| | |
|---|
| | | function chartSvg(metric: CompareMetricDefinition, record: SavedCompareReport) { |
|---|
| | | const chart = init(null, undefined, { renderer: 'svg', ssr: true, width: 900, height: 300 }) |
|---|
| | | try { |
|---|
| | | chart.setOption({ ...compareChartOption(metric, record.items, record.settings.seriesColors), tooltip: { show: false } }) |
|---|
| | | chart.setOption({ ...compareChartOption(metric, record.items, record.settings.seriesColors, record.settings.hiddenSeriesKeys), tooltip: { show: false } }) |
|---|
| | | return chart.renderToSVGString() |
|---|
| | | } finally { chart.dispose() } |
|---|
| | | } |
|---|
| | |
|---|
| | | const legend = record.items.map((item, index) => { |
|---|
| | | const color = record.settings.seriesColors[index % record.settings.seriesColors.length] |
|---|
| | | const safeColor = color && /^#[0-9a-f]{6}$/i.test(color) ? color : '#52606d' |
|---|
| | | return `<span><i style="background:${safeColor}"></i>${escapeHtml(compareSeriesName(item))}</span>` |
|---|
| | | const hidden = record.settings.hiddenSeriesKeys?.includes(compareSelectionKey(item.source.selection)) |
|---|
| | | return `<span${hidden ? ' style="text-decoration:line-through;color:#8795a3"' : ''}><i style="background:${safeColor}"></i>${escapeHtml(compareSeriesName(item))}</span>` |
|---|
| | | }).join('') |
|---|
| | | const charts = compareMetricDefinitions.filter(metric => record.settings.metrics.includes(metric.key)).map(metric => |
|---|
| | | `<article class="chart-card"><header><strong>${metric.title} (${escapeHtml(record.displayUnits[metric.key] || metric.unit)})</strong></header>${chartSvg(metric, record)}<div class="chart-inner-legend">${legend}</div></article>`).join('') |
|---|
