93 lines
1.9 KiB
TypeScript
93 lines
1.9 KiB
TypeScript
import {
|
|
DeesElement,
|
|
css,
|
|
cssManager,
|
|
customElement,
|
|
html,
|
|
property,
|
|
type CSSResult,
|
|
type TemplateResult,
|
|
} from '@design.estate/dees-element';
|
|
|
|
import * as domtools from '@design.estate/dees-domtools';
|
|
import { demoFunc } from './dees-chart-area.demo.js';
|
|
|
|
import ApexCharts from 'apexcharts';
|
|
|
|
declare global {
|
|
interface HTMLElementTagNameMap {
|
|
'dees-chart-area': DeesChartArea;
|
|
}
|
|
}
|
|
|
|
@customElement('dees-chart-area')
|
|
export class DeesChartArea extends DeesElement {
|
|
public static demo = demoFunc;
|
|
|
|
constructor() {
|
|
super();
|
|
domtools.elementBasic.setup();
|
|
}
|
|
|
|
public static styles = [cssManager.defaultStyles, css`
|
|
.mainbox {
|
|
width: 600px;
|
|
height: 600px;
|
|
background: #222;
|
|
border-radius: 3px;
|
|
padding: 16px;
|
|
padding-top: 32px;
|
|
}
|
|
`];
|
|
|
|
public render(): TemplateResult {
|
|
return html` <div class="mainbox"></div> `;
|
|
}
|
|
|
|
public async firstUpdated() {
|
|
var options = {
|
|
series: [
|
|
{
|
|
name: 'series1',
|
|
data: [31, 40, 28, 51, 42, 109, 100],
|
|
},
|
|
{
|
|
name: 'series2',
|
|
data: [11, 32, 45, 32, 34, 52, 41],
|
|
},
|
|
],
|
|
chart: {
|
|
width: 560,
|
|
height: 540,
|
|
type: 'area',
|
|
},
|
|
dataLabels: {
|
|
enabled: false,
|
|
},
|
|
stroke: {
|
|
curve: 'smooth',
|
|
},
|
|
xaxis: {
|
|
type: 'datetime',
|
|
categories: [
|
|
'2018-09-19T00:00:00.000Z',
|
|
'2018-09-19T01:30:00.000Z',
|
|
'2018-09-19T02:30:00.000Z',
|
|
'2018-09-19T03:30:00.000Z',
|
|
'2018-09-19T04:30:00.000Z',
|
|
'2018-09-19T05:30:00.000Z',
|
|
'2018-09-19T06:30:00.000Z',
|
|
],
|
|
},
|
|
tooltip: {
|
|
x: {
|
|
format: 'dd/MM/yy HH:mm',
|
|
},
|
|
},
|
|
};
|
|
|
|
var chart = new ApexCharts(this.shadowRoot.querySelector('.mainbox'), options);
|
|
chart.render();
|
|
}
|
|
}
|