Add a real charting layer and a heatmap panel type
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.
This commit is contained in:
@@ -0,0 +1,46 @@
|
||||
// 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
|
||||
>;
|
||||
Reference in New Issue
Block a user