diff --git a/ts_web/00_commitinfo_data.ts b/ts_web/00_commitinfo_data.ts
index d013852..f142e56 100644
--- a/ts_web/00_commitinfo_data.ts
+++ b/ts_web/00_commitinfo_data.ts
@@ -3,6 +3,6 @@
*/
export const commitinfo = {
name: '@design.estate/dees-catalog',
- version: '1.0.279',
+ version: '1.0.280',
description: 'website for lossless.com'
}
diff --git a/ts_web/elements/dees-chart-area.demo.ts b/ts_web/elements/dees-chart-area.demo.ts
index bb85cfb..44c03ff 100644
--- a/ts_web/elements/dees-chart-area.demo.ts
+++ b/ts_web/elements/dees-chart-area.demo.ts
@@ -12,7 +12,9 @@ export const demoFunc = () => {
}
-
+
`;
};
diff --git a/ts_web/elements/dees-chart-area.ts b/ts_web/elements/dees-chart-area.ts
index ef9af18..dc33020 100644
--- a/ts_web/elements/dees-chart-area.ts
+++ b/ts_web/elements/dees-chart-area.ts
@@ -5,6 +5,7 @@ import {
customElement,
html,
property,
+ state,
type CSSResult,
type TemplateResult,
} from '@design.estate/dees-element';
@@ -24,50 +25,95 @@ declare global {
export class DeesChartArea extends DeesElement {
public static demo = demoFunc;
+ // instance
+ @state()
+ public chart: ApexCharts;
+
+ @property()
+ public title: string = 'Untitled Chart';
+
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 static styles = [
+ cssManager.defaultStyles,
+ css`
+ :host {
+ font-family: 'Roboto', sans-serif;
+ color: #ccc;
+ font-weight: 600;
+ font-size: 12px;
+ }
+ .mainbox {
+ position: relative;
+ width: 100%;
+ max-width: 600px;
+ height: 400px;
+ background: #222;
+ border-radius: 8px;
+ padding: 32px 16px 16px 0px;
+ }
+
+ .chartTitle {
+ position: absolute;
+ top: 0;
+ left: 0;
+ width: 100%;
+ text-align: center;
+ padding-top: 16px;
+ }
+ .chartContainer {
+ position: relative;
+ width: 100%;
+ height: 100%;
+ }
+ `,
+ ];
public render(): TemplateResult {
- return html` `;
+ return html` `;
}
public async firstUpdated() {
- var options = {
+ const domtoolsInstance = await this.domtoolsPromise;
+ var options: ApexCharts.ApexOptions = {
series: [
{
- name: 'series1',
+ name: 'cpu',
data: [31, 40, 28, 51, 42, 109, 100],
},
{
- name: 'series2',
+ name: 'memory',
data: [11, 32, 45, 32, 34, 52, 41],
},
],
chart: {
- width: 560,
- height: 540,
+ width: 0, // Adjusted for responsive width
+ height: 0, // Adjusted for responsive height
type: 'area',
+ toolbar: {
+ show: false, // This line disables the toolbar
+ },
},
dataLabels: {
enabled: false,
},
stroke: {
+ width: 1,
curve: 'smooth',
},
xaxis: {
+ crosshairs: {
+ stroke: {
+ width: 1,
+ color: '#444',
+ },
+ },
type: 'datetime',
categories: [
'2018-09-19T00:00:00.000Z',
@@ -79,14 +125,68 @@ export class DeesChartArea extends DeesElement {
'2018-09-19T06:30:00.000Z',
],
},
+ yaxis: {
+ crosshairs: {
+ stroke: {
+ width: 1,
+ color: '#444',
+ },
+ },
+ },
tooltip: {
x: {
format: 'dd/MM/yy HH:mm',
},
},
+ grid: {
+ xaxis: {
+ lines: {
+ show: true, // This enables the grid lines along the x-axis
+ },
+ },
+ yaxis: {
+ lines: {
+ show: true,
+ },
+ },
+ borderColor: '#666', // Set the color of the grid lines
+ strokeDashArray: 2, // Solid line
+ row: {
+ colors: [], // This can be used to alternate the shading of the horizontal rows
+ opacity: 0.1,
+ },
+ column: {
+ colors: [], // For vertical column bands, not needed here but available for customization
+ opacity: 0.1,
+ },
+ },
};
+ this.chart = new ApexCharts(this.shadowRoot.querySelector('.chartContainer'), options);
+ await this.chart.render();
+ await this.resizeChart();
+ }
- var chart = new ApexCharts(this.shadowRoot.querySelector('.mainbox'), options);
- chart.render();
+ public async resizeChart() {
+ const element = this.shadowRoot.querySelector('.chartContainer');
+
+ // Get computed style of the element
+ const style = window.getComputedStyle(element);
+
+ // Extract padding values
+ const paddingTop = parseInt(style.paddingTop, 10);
+ const paddingBottom = parseInt(style.paddingBottom, 10);
+ const paddingLeft = parseInt(style.paddingLeft, 10);
+ const paddingRight = parseInt(style.paddingRight, 10);
+
+ // Calculate the actual width and height to use, subtracting padding
+ const actualWidth = element.clientWidth - paddingLeft - paddingRight;
+ const actualHeight = element.clientHeight - paddingTop - paddingBottom;
+
+ await this.chart.updateOptions({
+ chart: {
+ width: actualWidth,
+ height: actualHeight,
+ },
+ });
}
}