design.estate/dees-catalog
2
0
Fork 0
Code Issues 2 Pull Requests Actions Packages Projects Releases Wiki Activity

feat(dees-chart-area): Enhance chart component with dynamic datasets, real-time updates, and improved demo features

Browse Source
This commit is contained in:
Juergen Kunz
2025-06-12 11:09:14 +00:00
parent b35b1fbae7
commit b9432c8489
5 changed files with 404 additions and 80 deletions
Download Patch File Download Diff File Expand all files Collapse all files

97
ts_web/elements/dees-chart-area.ts
View File

@ -32,6 +32,12 @@ export class DeesChartArea extends DeesElement {
@property()
public label: string = 'Untitled Chart';
@property({ type: Array })
public series: ApexAxisChartSeries = [];
@property({ type: Function })
public yAxisFormatter: (value: number) => string = (val) => `${val} Mbps`;
private resizeObserver: ResizeObserver;
private resizeTimeout: number;
@ -144,29 +150,32 @@ export class DeesChartArea extends DeesElement {
const initialWidth = mainbox.clientWidth - paddingLeft - paddingRight;
const initialHeight = mainbox.offsetHeight - paddingTop - paddingBottom;
// Use provided series data or default demo data
const chartSeries = this.series.length > 0 ? this.series : [
{
name: 'cpu',
data: [
{ x: '2025-01-15T03:00:00', y: 25 },
{ x: '2025-01-15T07:00:00', y: 30 },
{ x: '2025-01-15T11:00:00', y: 20 },
{ x: '2025-01-15T15:00:00', y: 35 },
{ x: '2025-01-15T19:00:00', y: 25 },
],
},
{
name: 'memory',
data: [
{ x: '2025-01-15T03:00:00', y: 10 },
{ x: '2025-01-15T07:00:00', y: 12 },
{ x: '2025-01-15T11:00:00', y: 10 },
{ x: '2025-01-15T15:00:00', y: 30 },
{ x: '2025-01-15T19:00:00', y: 40 },
],
},
];
var options: ApexCharts.ApexOptions = {
series: [
{
name: 'cpu',
data: [
{ x: '2025-01-15T03:00:00', y: 25 },
{ x: '2025-01-15T07:00:00', y: 30 },
{ x: '2025-01-15T11:00:00', y: 20 },
{ x: '2025-01-15T15:00:00', y: 35 },
{ x: '2025-01-15T19:00:00', y: 25 },
],
},
{
name: 'memory',
data: [
{ x: '2025-01-15T03:00:00', y: 10 },
{ x: '2025-01-15T07:00:00', y: 12 },
{ x: '2025-01-15T11:00:00', y: 10 },
{ x: '2025-01-15T15:00:00', y: 30 },
{ x: '2025-01-15T19:00:00', y: 40 },
],
},
],
series: chartSeries,
chart: {
width: initialWidth || 100, // Use actual width or fallback
height: initialHeight || 100, // Use actual height or fallback
@ -209,9 +218,7 @@ export class DeesChartArea extends DeesElement {
yaxis: {
min: 0,
labels: {
formatter: function (val: number) {
return `${val} Mbps`; // Format Y-axis labels
},
formatter: this.yAxisFormatter,
style: {
colors: '#9e9e9e', // Label color
fontSize: '12px',
@ -285,6 +292,46 @@ export class DeesChartArea extends DeesElement {
await this.resizeChart();
}
public async updated(changedProperties: Map<string, any>) {
super.updated(changedProperties);
// Update chart if series data changes
if (changedProperties.has('series') && this.chart && this.series.length > 0) {
await this.updateSeries(this.series);
}
// Update y-axis formatter if it changes
if (changedProperties.has('yAxisFormatter') && this.chart) {
await this.chart.updateOptions({
yaxis: {
labels: {
formatter: this.yAxisFormatter,
},
},
});
}
}
public async updateSeries(newSeries: ApexAxisChartSeries) {
if (!this.chart) {
return;
}
await this.chart.updateSeries(newSeries, true);
}
public async appendData(seriesIndex: number, newData: any[]) {
if (!this.chart) {
return;
}
const currentSeries = [...this.series];
if (currentSeries[seriesIndex]) {
currentSeries[seriesIndex].data = [...currentSeries[seriesIndex].data, ...newData];
await this.updateSeries(currentSeries);
}
}
public async resizeChart() {
if (!this.chart) {
return;