jcoffey-dev
5e8b3d8edd
Five chart types on ECharts (modular imports, not the full bundle):
TimeSeriesChart (multi-series, legend toggle), BarChart (incl.
stacked), SingleStat (big number + sparkline + trend), Heatmap, TopN.
Shared interactions: tooltips, dataZoom feeding the global time-range
picker, click-to-drill-into-query (drilldown.ts strips a panel's query
to its pre-stats filter and appends the clicked series/x-value as a
new filter term -- no backend change needed).
pivot.ts reshapes the query language's existing {columns, rows} tabular
output into per-series chart data client-side -- `stats count by
service, timestamp` already returns "long" rows, so multi-series
support needed zero query-language changes. theme.ts reads real
computed CSS custom properties so charts render in the active theme's
actual colors, with an SSR_FALLBACK for adapter-static's prerender pass
where `document` doesn't exist.
heatmap is the one narrow, justified backend change: a new VizType
needed to feed a new visualization, not a new query capability. Three
places had to change together, not two -- api/dashboards/types.go's
validator, web/src/lib/api.ts's union (previous commit), and the
dashboard_panels table's viz_type CHECK constraint
(migrations/0035_add_heatmap_viz_type.sql), which mirrors the Go
validator and doesn't update itself.
/dev/charts (unlisted, dev-only) is a synthetic fixture/perf-test route:
confirmed 50ms first-two-frames render time on a production build
against a 30,006-row/6-series stress case, and a 211,975-byte gzipped
chart chunk -- both real measurements behind the ECharts-over-
Observable-Plot-or-D3 choice, not estimates.
47 lines
1.6 KiB
TypeScript
47 lines
1.6 KiB
TypeScript
// Modular ECharts registration -- pulling in `echarts` (the full bundle)
|
|
// would ship every chart type/component ECharts has ever shipped,
|
|
// against the whole reason it was picked over hand-rolled D3 for the
|
|
// bundle-size tradeoff (see the Phase 5 charting-library review). This
|
|
// registers only what Sentry's five chart types actually use: line/bar
|
|
// (time-series, stacked bar, top-N, the single-stat sparkline) and
|
|
// heatmap, plus tooltip/legend/grid/dataZoom/visualMap and the canvas
|
|
// renderer. Imported once, here, not per-component -- echarts.use() is
|
|
// idempotent but there's no reason to repeat the list five times.
|
|
import * as echarts from 'echarts/core';
|
|
import { LineChart, BarChart, HeatmapChart } from 'echarts/charts';
|
|
import {
|
|
TooltipComponent,
|
|
GridComponent,
|
|
LegendComponent,
|
|
DataZoomComponent,
|
|
VisualMapComponent,
|
|
MarkLineComponent
|
|
} from 'echarts/components';
|
|
import { CanvasRenderer } from 'echarts/renderers';
|
|
|
|
echarts.use([
|
|
LineChart,
|
|
BarChart,
|
|
HeatmapChart,
|
|
TooltipComponent,
|
|
GridComponent,
|
|
LegendComponent,
|
|
DataZoomComponent,
|
|
VisualMapComponent,
|
|
MarkLineComponent,
|
|
CanvasRenderer
|
|
]);
|
|
|
|
export { echarts };
|
|
export type EChartsOption = echarts.ComposeOption<
|
|
| import('echarts/charts').LineSeriesOption
|
|
| import('echarts/charts').BarSeriesOption
|
|
| import('echarts/charts').HeatmapSeriesOption
|
|
| import('echarts/components').TooltipComponentOption
|
|
| import('echarts/components').GridComponentOption
|
|
| import('echarts/components').LegendComponentOption
|
|
| import('echarts/components').DataZoomComponentOption
|
|
| import('echarts/components').VisualMapComponentOption
|
|
| import('echarts/components').MarkLineComponentOption
|
|
>;
|