fix(core): update

This commit is contained in:
Philipp Kunz 2024-02-03 14:42:20 +01:00
parent 2f7fdc16c7
commit 38b4df1ce3
3 changed files with 122 additions and 20 deletions

View File

@ -3,6 +3,6 @@
*/ */
export const commitinfo = { export const commitinfo = {
name: '@design.estate/dees-catalog', name: '@design.estate/dees-catalog',
version: '1.0.279', version: '1.0.280',
description: 'website for lossless.com' description: 'website for lossless.com'
} }

View File

@ -12,7 +12,9 @@ export const demoFunc = () => {
} }
</style> </style>
<div class="demoBox"> <div class="demoBox">
<dees-chart-area></dees-chart-area> <dees-chart-area
.title=${'System Usage'}
></dees-chart-area>
</div> </div>
`; `;
}; };

View File

@ -5,6 +5,7 @@ import {
customElement, customElement,
html, html,
property, property,
state,
type CSSResult, type CSSResult,
type TemplateResult, type TemplateResult,
} from '@design.estate/dees-element'; } from '@design.estate/dees-element';
@ -24,50 +25,95 @@ declare global {
export class DeesChartArea extends DeesElement { export class DeesChartArea extends DeesElement {
public static demo = demoFunc; public static demo = demoFunc;
// instance
@state()
public chart: ApexCharts;
@property()
public title: string = 'Untitled Chart';
constructor() { constructor() {
super(); super();
domtools.elementBasic.setup(); domtools.elementBasic.setup();
} }
public static styles = [cssManager.defaultStyles, css` public static styles = [
.mainbox { cssManager.defaultStyles,
width: 600px; css`
height: 600px; :host {
background: #222; font-family: 'Roboto', sans-serif;
border-radius: 3px; color: #ccc;
padding: 16px; font-weight: 600;
padding-top: 32px; 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 { public render(): TemplateResult {
return html` <div class="mainbox"></div> `; return html` <div class="mainbox">
<div class="chartTitle">${this.title}</div>
<div class="chartContainer"></div>
</div> `;
} }
public async firstUpdated() { public async firstUpdated() {
var options = { const domtoolsInstance = await this.domtoolsPromise;
var options: ApexCharts.ApexOptions = {
series: [ series: [
{ {
name: 'series1', name: 'cpu',
data: [31, 40, 28, 51, 42, 109, 100], data: [31, 40, 28, 51, 42, 109, 100],
}, },
{ {
name: 'series2', name: 'memory',
data: [11, 32, 45, 32, 34, 52, 41], data: [11, 32, 45, 32, 34, 52, 41],
}, },
], ],
chart: { chart: {
width: 560, width: 0, // Adjusted for responsive width
height: 540, height: 0, // Adjusted for responsive height
type: 'area', type: 'area',
toolbar: {
show: false, // This line disables the toolbar
},
}, },
dataLabels: { dataLabels: {
enabled: false, enabled: false,
}, },
stroke: { stroke: {
width: 1,
curve: 'smooth', curve: 'smooth',
}, },
xaxis: { xaxis: {
crosshairs: {
stroke: {
width: 1,
color: '#444',
},
},
type: 'datetime', type: 'datetime',
categories: [ categories: [
'2018-09-19T00:00:00.000Z', '2018-09-19T00:00:00.000Z',
@ -79,14 +125,68 @@ export class DeesChartArea extends DeesElement {
'2018-09-19T06:30:00.000Z', '2018-09-19T06:30:00.000Z',
], ],
}, },
yaxis: {
crosshairs: {
stroke: {
width: 1,
color: '#444',
},
},
},
tooltip: { tooltip: {
x: { x: {
format: 'dd/MM/yy HH:mm', 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); public async resizeChart() {
chart.render(); 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,
},
});
} }
} }