fix(Diagnostics): specify chart dimensions in use

[pedrolamas]

When one doesn't specify the input data dimensions, echarts will look at the first item on the dataset and infer from the available members, which can lead to problems if those change mid dataset - as it was the case here!

The fix is by declaring the dimensions we actually will use on the chart.

Fixes #1737

[Copilot]

Pull Request Overview

This PR fixes a bug in the diagnostics chart rendering where echarts was inferring dimensions from the first dataset item, causing issues when dataset properties changed mid-dataset. The fix explicitly declares the chart dimensions to prevent inference errors.

• Adds explicit dimensions prop to AppChart component for echarts configuration
• Computes chart dimensions dynamically based on diagnostics card configuration (date + metric collectors)

Reviewed Changes

Copilot reviewed 2 out of 2 changed files in this pull request and generated 2 comments.

File	Description
src/components/widgets/diagnostics/DiagnosticsCard.vue	Adds computed property to generate chart dimensions array and passes it to AppChart component
src/components/ui/AppChart.vue	Adds optional dimensions prop and applies it to echarts dataset configuration

[Copilot]

Pull Request Overview

Copilot reviewed 2 out of 2 changed files in this pull request and generated 2 comments.

[Copilot]

Consider adding a watcher for the dimensions prop to handle cases where dimensions change after initial data load. If the dimensions are updated (e.g., when metrics are added/removed), the chart won't update without re-triggering the data watcher:

@Watch('dimensions')
onDimensionsChange (dimensions?: unknown[]) {
  if (this.chart && dimensions) {
    this.chart.setOption({
      dataset: {
        dimensions,
        source: this.data
      }
    })
  }
}

[pedrolamas]

From tests, this doesn't seem to be required.

[Copilot]

The chartDimensions getter should filter out metrics from disabled axes to match the behavior of the series getter (line 221). Currently, dimensions include all metrics regardless of whether their axis is enabled, while series only includes metrics from enabled axes. This mismatch could cause issues with ECharts:

get chartDimensions () {
  return [
    'date',
    ...this.config.axes
      .filter(axis => axis.enabled)
      .flatMap(axis => axis.metrics.map(metric => metric.collector))
  ]
}

Suggested change

	...this.config.axes.flatMap(axis => axis.metrics.map(metric => metric.collector))
	...this.config.axes
	.filter(axis => axis.enabled)
	.flatMap(axis => axis.metrics.map(metric => metric.collector))

[pedrolamas]

Not required.