@flanksource/clicky-ui 0.3.54 → 0.3.56

package/dist/data/TimeseriesPanel.js.map

@@ -1 +1 @@
-{"version":3,"file":"TimeseriesPanel.js","names":["_Fragment"],"sources":["../../src/data/TimeseriesPanel.tsx"],"sourcesContent":["import { useMemo, useState } from \"react\";\nimport {\n  Area,\n  AreaChart,\n  CartesianGrid,\n  Line,\n  LineChart,\n  ReferenceLine,\n  ResponsiveContainer,\n  Tooltip,\n  XAxis,\n  YAxis,\n} from \"recharts\";\nimport { cn } from \"../lib/utils\";\nimport { resolveCssColor } from \"../lib/color\";\nimport { formatUnit } from \"../lib/format\";\nimport { Modal } from \"../overlay/Modal\";\nimport { ProgressBar, type ProgressSegment } from \"./ProgressBar\";\nimport { UiFullscreen } from \"../icons\";\nimport { Icon, type StaticIconComponent } from \"./Icon\";\nimport { assignAxes, latestOf } from \"./TimeseriesPanel.axes\";\nimport {\n  mergeSeries,\n  resolveBreakdown,\n  resolveSeries,\n  type BreakdownItem,\n  type MergedRow,\n  type ResolvedSeries,\n  type TimeseriesPanelProps,\n  type TimeseriesReferenceLine,\n} from \"./TimeseriesPanel.model\";\nimport { defaultTimeseriesFetcher, useTimeseriesQueries } from \"./timeseries-query\";\n\nexport type { AxisAssignment, AxisOrientation, AxisSpec } from \"./TimeseriesPanel.axes\";\nexport type {\n  BreakdownItem,\n  MergedRow,\n  ResolvedSeries,\n  SeriesLoadContext,\n  SeriesLoader,\n  TimeseriesPanelProps,\n  TimeseriesPoint,\n  TimeseriesReferenceLine,\n  TimeseriesResponse,\n  TimeseriesSeries,\n} from \"./TimeseriesPanel.model\";\n\nfunction formatClock(at: string): string {\n  const date = new Date(at);\n  if (Number.isNaN(date.getTime())) return \"\";\n  return date.toLocaleTimeString([], { hour: \"2-digit\", minute: \"2-digit\" });\n}\n\nexport function TimeseriesPanel(props: TimeseriesPanelProps) {\n  const {\n    title,\n    icon,\n    unit,\n    range = \"1h\",\n    refreshMs = 5000,\n    height = 160,\n    variant = \"area\",\n    expandable = true,\n    total,\n    referenceLines,\n    fetcher = defaultTimeseriesFetcher,\n    className,\n  } = props;\n  const isBreakdown = variant === \"breakdown\";\n  // The inline chart (non-breakdown only) and the expand modal both need a\n  // time-series variant; breakdown has no inline chart and expands to \"area\".\n  const chartVariant: ChartVariant = isBreakdown ? \"area\" : variant;\n  const expandVariant = props.expandVariant ?? chartVariant;\n\n  const [expanded, setExpanded] = useState(false);\n\n  const series = useMemo(() => resolveSeries(props), [props]);\n  const results = useTimeseriesQueries(\n    series.map((s) => ({ id: s.key, load: s.load })),\n    { baseUrl: props.baseUrl ?? \"\", range, refreshMs, fetcher },\n  );\n  const refs = referenceLines ?? [];\n\n  const isError = results.some((r) => r.isError);\n  const error = results.find((r) => r.isError)?.error;\n  const isLoading = results.some((r) => r.isLoading) && results.every((r) => !r.data);\n  const pointsBySeries = results.map((r) => r.data?.points);\n  const rows = useMemo(() => mergeSeries(series, pointsBySeries), [series, pointsBySeries]);\n  const hasMirrored = series.some((s) => s.transform);\n  const breakdown = useMemo(\n    () => (isBreakdown ? resolveBreakdown(series, rows, total) : null),\n    [isBreakdown, series, rows, total],\n  );\n\n  // Breakdown renders instantly from `current`; the modal still needs polled\n  // history. Other variants gate on having ≥2 points to draw a line.\n  const canExpand = expandable && rows.length >= 2;\n\n  return (\n    <div className={cn(\"flex flex-col rounded-lg border border-border bg-card p-3\", className)}>\n      <div className=\"flex items-center justify-between gap-2 text-xs text-muted-foreground\">\n        <span className=\"inline-flex min-w-0 items-center gap-1.5\">\n          {icon ? <PanelIcon icon={icon} /> : null}\n          <span className=\"truncate font-medium text-foreground\">{title}</span>\n        </span>\n        <span className=\"inline-flex shrink-0 items-center gap-1.5\">\n          {breakdown ? (\n            <BreakdownReadout total={breakdown.total} unit={unit} items={breakdown.items} />\n          ) : (\n            <LatestReadout series={series} rows={rows} />\n          )}\n          {canExpand ? (\n            <button\n              type=\"button\"\n              aria-label=\"Expand chart\"\n              onClick={() => setExpanded(true)}\n              className=\"text-muted-foreground transition-colors hover:text-foreground\"\n            >\n              <Icon icon={UiFullscreen} width={14} height={14} />\n            </button>\n          ) : null}\n        </span>\n      </div>\n      <div className=\"mt-2\" style={breakdown ? undefined : { height }}>\n        {breakdown ? (\n          <BreakdownView total={breakdown.total} unit={unit} items={breakdown.items} />\n        ) : isError ? (\n          <PanelMessage>{(error as Error)?.message ?? \"Failed to load metric\"}</PanelMessage>\n        ) : isLoading ? (\n          <PanelMessage>Loading…</PanelMessage>\n        ) : rows.length < 2 ? (\n          <PanelMessage>Collecting data…</PanelMessage>\n        ) : (\n          <Chart\n            rows={rows}\n            series={series}\n            variant={chartVariant}\n            unit={unit}\n            showZeroLine={hasMirrored}\n            referenceLines={refs}\n          />\n        )}\n      </div>\n      {!breakdown && !isError && !isLoading && rows.length >= 2 && series.length + refs.length > 1 ? (\n        <ChartLegend series={series} rows={rows} referenceLines={refs} unit={unit} />\n      ) : null}\n      {canExpand ? (\n        <Modal open={expanded} onClose={() => setExpanded(false)} title={title} size=\"xl\">\n          <div style={{ height: 360 }}>\n            <Chart\n              rows={rows}\n              series={series}\n              variant={expandVariant}\n              unit={unit}\n              showZeroLine={hasMirrored}\n              referenceLines={refs}\n            />\n          </div>\n          {series.length + refs.length > 1 ? (\n            <ChartLegend series={series} rows={rows} referenceLines={refs} unit={unit} />\n          ) : null}\n        </Modal>\n      ) : null}\n    </div>\n  );\n}\n\n/**\n * Header readout for a single-series panel: the latest value, formatted with the\n * series' unit. Multi-series panels render the per-series values in {@link ChartLegend}\n * below the chart instead, so this returns null for them to avoid overlapping the title.\n */\nfunction LatestReadout({ series, rows }: { series: ResolvedSeries[]; rows: MergedRow[] }) {\n  const only = series.length === 1 ? series[0] : undefined;\n  if (!only) return null;\n  const v = latestOf(rows, only.key);\n  if (v === undefined) return null;\n  return <span className=\"tabular-nums\">{formatUnit(Math.abs(v), only.unit)}</span>;\n}\n\nconst REFERENCE_LINE_COLOR = \"var(--muted-foreground, #64748b)\";\n\nfunction referenceColor(ref: TimeseriesReferenceLine): string {\n  return resolveCssColor(ref.color ?? REFERENCE_LINE_COLOR);\n}\n\n/**\n * Wrapping color-keyed legend for the time-series variants: dot + label + latest\n * value, then each reference line with its fixed value.\n */\nfunction ChartLegend({\n  series,\n  rows,\n  referenceLines,\n  unit,\n}: {\n  series: ResolvedSeries[];\n  rows: MergedRow[];\n  referenceLines: TimeseriesReferenceLine[];\n  unit: string | undefined;\n}) {\n  return (\n    <ul className=\"mt-1.5 flex flex-wrap gap-x-3 gap-y-1 text-xs text-muted-foreground\">\n      {series.map((s) => {\n        const v = latestOf(rows, s.key);\n        return (\n          <li key={s.key} className=\"inline-flex min-w-0 items-center gap-1.5\">\n            <span\n              className=\"h-2 w-2 shrink-0 rounded-full\"\n              style={{ backgroundColor: resolveCssColor(s.color) }}\n              aria-hidden\n            />\n            <span className=\"truncate text-foreground\">{s.label}</span>\n            {v !== undefined ? (\n              <span className=\"tabular-nums\">{formatUnit(Math.abs(v), s.unit)}</span>\n            ) : null}\n          </li>\n        );\n      })}\n      {referenceLines.map((ref, i) => (\n        <li key={`ref-${i}`} className=\"inline-flex min-w-0 items-center gap-1.5\">\n          <span\n            className=\"h-0.5 w-2.5 shrink-0\"\n            style={{ backgroundColor: referenceColor(ref) }}\n            aria-hidden\n          />\n          <span className=\"truncate text-foreground\">{ref.label}</span>\n          <span className=\"tabular-nums\">{formatUnit(ref.value, ref.unit ?? unit)}</span>\n        </li>\n      ))}\n    </ul>\n  );\n}\n\n/** Breakdown header readout: `used / total · pct%`, where used is the sum of segments. */\nfunction BreakdownReadout({\n  total,\n  unit,\n  items,\n}: {\n  total: number;\n  unit: string | undefined;\n  items: BreakdownItem[];\n}) {\n  const used = items.reduce((acc, it) => acc + it.value, 0);\n  const pct = total > 0 ? Math.min(100, (used / total) * 100) : 0;\n  return (\n    <span className=\"font-mono tabular-nums\">\n      {formatUnit(used, unit)} / {formatUnit(total, unit)} · {pct.toFixed(0)}%\n    </span>\n  );\n}\n\n/** Instantaneous stacked bar + legend list. The expand button (in the panel header) opens the graph. */\nfunction BreakdownView({\n  total,\n  unit,\n  items,\n}: {\n  total: number;\n  unit: string | undefined;\n  items: BreakdownItem[];\n}) {\n  const segments: ProgressSegment[] = items.map((it) => ({\n    count: it.value,\n    color: it.color,\n    label: it.label,\n  }));\n  return (\n    <div className=\"flex flex-col gap-2\">\n      <ProgressBar segments={segments} total={total > 0 ? total : 1} height=\"h-3\" />\n      {items.length > 0 ? (\n        <ul className=\"grid grid-cols-1 gap-y-1 text-xs\">\n          {items.map((it) => (\n            <li key={it.key} className=\"flex items-center gap-2\">\n              <span\n                className=\"h-2 w-2 shrink-0 rounded-full\"\n                style={{ backgroundColor: resolveCssColor(it.color) }}\n                aria-hidden\n              />\n              <span className=\"min-w-0 flex-1 truncate font-mono text-muted-foreground\">\n                {it.label}\n              </span>\n              <span className=\"font-mono tabular-nums text-foreground\">\n                {formatUnit(it.value, it.unit ?? unit)}\n              </span>\n              <span className=\"w-10 text-right font-mono tabular-nums text-muted-foreground\">\n                {it.percent.toFixed(0)}%\n              </span>\n            </li>\n          ))}\n        </ul>\n      ) : null}\n    </div>\n  );\n}\n\ntype ChartVariant = \"area\" | \"line\" | \"stacked\";\n\nfunction Chart({\n  rows,\n  series,\n  variant,\n  unit,\n  showZeroLine,\n  referenceLines,\n}: {\n  rows: MergedRow[];\n  series: ResolvedSeries[];\n  variant: ChartVariant;\n  unit: string | undefined;\n  showZeroLine: boolean;\n  referenceLines: TimeseriesReferenceLine[];\n}) {\n  const stacked = variant === \"stacked\";\n  // Mirrored series carry negative values; show magnitudes on axis and tooltip.\n  const seriesByKey = new Map(series.map((s) => [s.key, s]));\n  // recharts needs a CSS color value; a series may carry a Tailwind class.\n  const strokeOf = (s: ResolvedSeries) => resolveCssColor(s.color);\n  // Distinct units map to a left and (when present) right axis; each series draws\n  // against the axis for its unit so mixed-unit panels keep independent scales.\n  const { axes: yAxes, axisOfKey } = useMemo(() => assignAxes(series), [series]);\n  const axisOf = (key: string): \"left\" | \"right\" => axisOfKey.get(key) ?? \"left\";\n  // A reference line draws against the axis formatting its unit, else the left.\n  const axisOfUnit = (u: string | undefined): \"left\" | \"right\" =>\n    yAxes.find((ax) => ax.unit === u)?.id ?? \"left\";\n  const axes = (\n    <>\n      <CartesianGrid strokeOpacity={0.12} vertical={false} />\n      <XAxis\n        dataKey=\"at\"\n        tickFormatter={formatClock}\n        tick={{ fontSize: 10 }}\n        stroke=\"currentColor\"\n        strokeOpacity={0.35}\n        minTickGap={32}\n      />\n      {yAxes.map((ax) => (\n        <YAxis\n          key={ax.id}\n          yAxisId={ax.id}\n          orientation={ax.orientation}\n          tick={{ fontSize: 10 }}\n          stroke=\"currentColor\"\n          strokeOpacity={0.35}\n          width={40}\n          tickFormatter={(v: number) => formatUnit(Math.abs(v), ax.unit)}\n        />\n      ))}\n      <Tooltip\n        labelFormatter={(label) => formatClock(String(label))}\n        formatter={(value, name) => {\n          const s = seriesByKey.get(String(name));\n          return [formatUnit(Math.abs(Number(value) || 0), s?.unit ?? unit), s?.label ?? String(name)];\n        }}\n        contentStyle={{ fontSize: 12 }}\n      />\n      {showZeroLine ? (\n        <ReferenceLine yAxisId=\"left\" y={0} stroke=\"currentColor\" strokeOpacity={0.35} />\n      ) : null}\n      {referenceLines.map((ref, i) => (\n        <ReferenceLine\n          key={`ref-${i}`}\n          yAxisId={axisOfUnit(ref.unit ?? unit)}\n          y={ref.value}\n          stroke={referenceColor(ref)}\n          strokeDasharray=\"4 4\"\n          ifOverflow=\"extendDomain\"\n        />\n      ))}\n    </>\n  );\n\n  return (\n    <ResponsiveContainer width=\"100%\" height=\"100%\">\n      {variant === \"line\" ? (\n        <LineChart data={rows} margin={{ top: 4, right: 8, bottom: 0, left: 0 }}>\n          {axes}\n          {series.map((s) => (\n            <Line\n              key={s.key}\n              yAxisId={axisOf(s.key)}\n              type=\"monotone\"\n              dataKey={s.key}\n              name={s.key}\n              stroke={strokeOf(s)}\n              strokeWidth={2}\n              dot={false}\n              connectNulls\n              isAnimationActive={false}\n            />\n          ))}\n        </LineChart>\n      ) : (\n        <AreaChart data={rows} margin={{ top: 4, right: 8, bottom: 0, left: 0 }}>\n          {axes}\n          {series.map((s) => (\n            <Area\n              key={s.key}\n              yAxisId={axisOf(s.key)}\n              type=\"monotone\"\n              dataKey={s.key}\n              name={s.key}\n              stroke={strokeOf(s)}\n              fill={strokeOf(s)}\n              {...(stacked ? { stackId: `stack-${axisOf(s.key)}` } : {})}\n              fillOpacity={stacked ? 0.7 : 0.12}\n              strokeWidth={stacked ? 0 : 2}\n              connectNulls\n              isAnimationActive={false}\n            />\n          ))}\n        </AreaChart>\n      )}\n    </ResponsiveContainer>\n  );\n}\n\nfunction PanelMessage({ children }: { children: React.ReactNode }) {\n  return (\n    <div className=\"flex h-full items-center justify-center text-xs text-muted-foreground\">\n      {children}\n    </div>\n  );\n}\n\nfunction PanelIcon({ icon }: { icon: string | StaticIconComponent }) {\n  if (typeof icon === \"string\") {\n    return <Icon name={icon} width={16} height={16} className=\"text-muted-foreground\" />;\n  }\n  return <Icon icon={icon} width={16} height={16} className=\"text-muted-foreground\" />;\n}\n"],"mappings":"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"}
+{"version":3,"file":"TimeseriesPanel.js","names":["_Fragment"],"sources":["../../src/data/TimeseriesPanel.tsx"],"sourcesContent":["import { useMemo, useState } from \"react\";\nimport {\n  Area,\n  AreaChart,\n  CartesianGrid,\n  Line,\n  LineChart,\n  ReferenceLine,\n  ResponsiveContainer,\n  Tooltip,\n  XAxis,\n  YAxis,\n} from \"recharts\";\nimport { cn } from \"../lib/utils\";\nimport { resolveCssColor } from \"../lib/color\";\nimport { formatUnit } from \"../lib/format\";\nimport { Modal } from \"../overlay/Modal\";\nimport { ProgressBar, type ProgressSegment } from \"./ProgressBar\";\nimport { UiFullscreen } from \"../icons\";\nimport { Icon, type StaticIconComponent } from \"./Icon\";\nimport { assignAxes, latestOf } from \"./TimeseriesPanel.axes\";\nimport {\n  expandServedSeries,\n  mergeSeries,\n  resolveBreakdown,\n  resolveSeries,\n  type BreakdownItem,\n  type MergedRow,\n  type ResolvedSeries,\n  type TimeseriesPanelProps,\n  type TimeseriesReferenceLine,\n} from \"./TimeseriesPanel.model\";\nimport { defaultTimeseriesFetcher, useTimeseriesQueries } from \"./timeseries-query\";\n\nexport type { AxisAssignment, AxisOrientation, AxisSpec } from \"./TimeseriesPanel.axes\";\nexport type {\n  BreakdownItem,\n  DisplaySeries,\n  MergedRow,\n  ResolvedSeries,\n  SeriesLoadContext,\n  SeriesLoader,\n  TimeseriesPanelProps,\n  TimeseriesPoint,\n  TimeseriesReferenceLine,\n  TimeseriesResponse,\n  TimeseriesSeries,\n  TimeseriesServerSeries,\n} from \"./TimeseriesPanel.model\";\n\nfunction formatClock(at: string): string {\n  const date = new Date(at);\n  if (Number.isNaN(date.getTime())) return \"\";\n  return date.toLocaleTimeString([], { hour: \"2-digit\", minute: \"2-digit\" });\n}\n\nexport function TimeseriesPanel(props: TimeseriesPanelProps) {\n  const {\n    title,\n    icon,\n    unit,\n    range = \"1h\",\n    refreshMs = 5000,\n    height = 160,\n    variant = \"area\",\n    expandable = true,\n    total,\n    referenceLines,\n    fetcher = defaultTimeseriesFetcher,\n    className,\n  } = props;\n  const isBreakdown = variant === \"breakdown\";\n  // The inline chart (non-breakdown only) and the expand modal both need a\n  // time-series variant; breakdown has no inline chart and expands to \"area\".\n  const chartVariant: ChartVariant = isBreakdown ? \"area\" : variant;\n  const expandVariant = props.expandVariant ?? chartVariant;\n\n  const [expanded, setExpanded] = useState(false);\n\n  const requested = useMemo(() => resolveSeries(props), [props]);\n  const results = useTimeseriesQueries(\n    requested.map((s) => ({ id: s.key, load: s.load })),\n    { baseUrl: props.baseUrl ?? \"\", range, refreshMs, fetcher },\n  );\n  const refs = referenceLines ?? [];\n\n  const error = results.find((r) => r.error)?.error ?? null;\n  const isError = error !== null;\n  const isLoading = results.some((r) => r.isLoading) && results.every((r) => !r.series);\n  const served = results.map((r) => r.series);\n  const { series, points } = useMemo(() => expandServedSeries(props, served), [props, served]);\n  const rows = useMemo(() => mergeSeries(series, points), [series, points]);\n  const hasMirrored = series.some((s) => s.transform);\n  const breakdown = useMemo(\n    () => (isBreakdown ? resolveBreakdown(series, rows, total) : null),\n    [isBreakdown, series, rows, total],\n  );\n\n  // Breakdown renders instantly from `current`; the modal still needs polled\n  // history. Other variants gate on having ≥2 points to draw a line.\n  const canExpand = expandable && rows.length >= 2;\n\n  return (\n    <div className={cn(\"flex flex-col rounded-lg border border-border bg-card p-3\", className)}>\n      <div className=\"flex items-center justify-between gap-2 text-xs text-muted-foreground\">\n        <span className=\"inline-flex min-w-0 items-center gap-1.5\">\n          {icon ? <PanelIcon icon={icon} /> : null}\n          <span className=\"truncate font-medium text-foreground\">{title}</span>\n        </span>\n        <span className=\"inline-flex shrink-0 items-center gap-1.5\">\n          {breakdown ? (\n            <BreakdownReadout total={breakdown.total} unit={unit} items={breakdown.items} />\n          ) : (\n            <LatestReadout series={series} rows={rows} />\n          )}\n          {canExpand ? (\n            <button\n              type=\"button\"\n              aria-label=\"Expand chart\"\n              onClick={() => setExpanded(true)}\n              className=\"text-muted-foreground transition-colors hover:text-foreground\"\n            >\n              <Icon icon={UiFullscreen} width={14} height={14} />\n            </button>\n          ) : null}\n        </span>\n      </div>\n      <div className=\"mt-2\" style={breakdown ? undefined : { height }}>\n        {error ? (\n          <PanelMessage>{error.message || \"Failed to load metric\"}</PanelMessage>\n        ) : breakdown ? (\n          <BreakdownView total={breakdown.total} unit={unit} items={breakdown.items} />\n        ) : isLoading ? (\n          <PanelMessage>Loading…</PanelMessage>\n        ) : rows.length < 2 ? (\n          <PanelMessage>Collecting data…</PanelMessage>\n        ) : (\n          <Chart\n            rows={rows}\n            series={series}\n            variant={chartVariant}\n            unit={unit}\n            showZeroLine={hasMirrored}\n            referenceLines={refs}\n          />\n        )}\n      </div>\n      {!breakdown && !isError && !isLoading && rows.length >= 2 && series.length + refs.length > 1 ? (\n        <ChartLegend series={series} rows={rows} referenceLines={refs} unit={unit} />\n      ) : null}\n      {canExpand ? (\n        <Modal open={expanded} onClose={() => setExpanded(false)} title={title} size=\"xl\">\n          <div style={{ height: 360 }}>\n            <Chart\n              rows={rows}\n              series={series}\n              variant={expandVariant}\n              unit={unit}\n              showZeroLine={hasMirrored}\n              referenceLines={refs}\n            />\n          </div>\n          {series.length + refs.length > 1 ? (\n            <ChartLegend series={series} rows={rows} referenceLines={refs} unit={unit} />\n          ) : null}\n        </Modal>\n      ) : null}\n    </div>\n  );\n}\n\n/**\n * Header readout for a single-series panel: the latest value, formatted with the\n * series' unit. Multi-series panels render the per-series values in {@link ChartLegend}\n * below the chart instead, so this returns null for them to avoid overlapping the title.\n */\nfunction LatestReadout({ series, rows }: { series: ResolvedSeries[]; rows: MergedRow[] }) {\n  const only = series.length === 1 ? series[0] : undefined;\n  if (!only) return null;\n  const v = latestOf(rows, only.key);\n  if (v === undefined) return null;\n  return <span className=\"tabular-nums\">{formatUnit(Math.abs(v), only.unit)}</span>;\n}\n\nconst REFERENCE_LINE_COLOR = \"var(--muted-foreground, #64748b)\";\n\nfunction referenceColor(ref: TimeseriesReferenceLine): string {\n  return resolveCssColor(ref.color ?? REFERENCE_LINE_COLOR);\n}\n\n/**\n * Wrapping color-keyed legend for the time-series variants: dot + label + latest\n * value, then each reference line with its fixed value.\n */\nfunction ChartLegend({\n  series,\n  rows,\n  referenceLines,\n  unit,\n}: {\n  series: ResolvedSeries[];\n  rows: MergedRow[];\n  referenceLines: TimeseriesReferenceLine[];\n  unit: string | undefined;\n}) {\n  return (\n    <ul className=\"mt-1.5 flex flex-wrap gap-x-3 gap-y-1 text-xs text-muted-foreground\">\n      {series.map((s) => {\n        const v = latestOf(rows, s.key);\n        return (\n          <li key={s.key} className=\"inline-flex min-w-0 items-center gap-1.5\">\n            <span\n              className=\"h-2 w-2 shrink-0 rounded-full\"\n              style={{ backgroundColor: resolveCssColor(s.color) }}\n              aria-hidden\n            />\n            <span className=\"truncate text-foreground\">{s.label}</span>\n            {v !== undefined ? (\n              <span className=\"tabular-nums\">{formatUnit(Math.abs(v), s.unit)}</span>\n            ) : null}\n          </li>\n        );\n      })}\n      {referenceLines.map((ref, i) => (\n        <li key={`ref-${i}`} className=\"inline-flex min-w-0 items-center gap-1.5\">\n          <span\n            className=\"h-0.5 w-2.5 shrink-0\"\n            style={{ backgroundColor: referenceColor(ref) }}\n            aria-hidden\n          />\n          <span className=\"truncate text-foreground\">{ref.label}</span>\n          <span className=\"tabular-nums\">{formatUnit(ref.value, ref.unit ?? unit)}</span>\n        </li>\n      ))}\n    </ul>\n  );\n}\n\n/** Breakdown header readout: `used / total · pct%`, where used is the sum of segments. */\nfunction BreakdownReadout({\n  total,\n  unit,\n  items,\n}: {\n  total: number;\n  unit: string | undefined;\n  items: BreakdownItem[];\n}) {\n  const used = items.reduce((acc, it) => acc + it.value, 0);\n  const pct = total > 0 ? Math.min(100, (used / total) * 100) : 0;\n  return (\n    <span className=\"font-mono tabular-nums\">\n      {formatUnit(used, unit)} / {formatUnit(total, unit)} · {pct.toFixed(0)}%\n    </span>\n  );\n}\n\n/** Instantaneous stacked bar + legend list. The expand button (in the panel header) opens the graph. */\nfunction BreakdownView({\n  total,\n  unit,\n  items,\n}: {\n  total: number;\n  unit: string | undefined;\n  items: BreakdownItem[];\n}) {\n  const segments: ProgressSegment[] = items.map((it) => ({\n    count: it.value,\n    color: it.color,\n    label: it.label,\n  }));\n  return (\n    <div className=\"flex flex-col gap-2\">\n      <ProgressBar segments={segments} total={total > 0 ? total : 1} height=\"h-3\" />\n      {items.length > 0 ? (\n        <ul className=\"grid grid-cols-1 gap-y-1 text-xs\">\n          {items.map((it) => (\n            <li key={it.key} className=\"flex items-center gap-2\">\n              <span\n                className=\"h-2 w-2 shrink-0 rounded-full\"\n                style={{ backgroundColor: resolveCssColor(it.color) }}\n                aria-hidden\n              />\n              <span className=\"min-w-0 flex-1 truncate font-mono text-muted-foreground\">\n                {it.label}\n              </span>\n              <span className=\"font-mono tabular-nums text-foreground\">\n                {formatUnit(it.value, it.unit ?? unit)}\n              </span>\n              <span className=\"w-10 text-right font-mono tabular-nums text-muted-foreground\">\n                {it.percent.toFixed(0)}%\n              </span>\n            </li>\n          ))}\n        </ul>\n      ) : null}\n    </div>\n  );\n}\n\ntype ChartVariant = \"area\" | \"line\" | \"stacked\";\n\nfunction Chart({\n  rows,\n  series,\n  variant,\n  unit,\n  showZeroLine,\n  referenceLines,\n}: {\n  rows: MergedRow[];\n  series: ResolvedSeries[];\n  variant: ChartVariant;\n  unit: string | undefined;\n  showZeroLine: boolean;\n  referenceLines: TimeseriesReferenceLine[];\n}) {\n  const stacked = variant === \"stacked\";\n  // Mirrored series carry negative values; show magnitudes on axis and tooltip.\n  const seriesByKey = new Map(series.map((s) => [s.key, s]));\n  // recharts needs a CSS color value; a series may carry a Tailwind class.\n  const strokeOf = (s: ResolvedSeries) => resolveCssColor(s.color);\n  // Distinct units map to a left and (when present) right axis; each series draws\n  // against the axis for its unit so mixed-unit panels keep independent scales.\n  const { axes: yAxes, axisOfKey } = useMemo(() => assignAxes(series), [series]);\n  const axisOf = (key: string): \"left\" | \"right\" => axisOfKey.get(key) ?? \"left\";\n  // A reference line draws against the axis formatting its unit, else the left.\n  const axisOfUnit = (u: string | undefined): \"left\" | \"right\" =>\n    yAxes.find((ax) => ax.unit === u)?.id ?? \"left\";\n  const axes = (\n    <>\n      <CartesianGrid strokeOpacity={0.12} vertical={false} />\n      <XAxis\n        dataKey=\"at\"\n        tickFormatter={formatClock}\n        tick={{ fontSize: 10 }}\n        stroke=\"currentColor\"\n        strokeOpacity={0.35}\n        minTickGap={32}\n      />\n      {yAxes.map((ax) => (\n        <YAxis\n          key={ax.id}\n          yAxisId={ax.id}\n          orientation={ax.orientation}\n          tick={{ fontSize: 10 }}\n          stroke=\"currentColor\"\n          strokeOpacity={0.35}\n          width={40}\n          tickFormatter={(v: number) => formatUnit(Math.abs(v), ax.unit)}\n        />\n      ))}\n      <Tooltip\n        labelFormatter={(label) => formatClock(String(label))}\n        formatter={(value, name) => {\n          const s = seriesByKey.get(String(name));\n          return [formatUnit(Math.abs(Number(value) || 0), s?.unit ?? unit), s?.label ?? String(name)];\n        }}\n        contentStyle={{ fontSize: 12 }}\n      />\n      {showZeroLine ? (\n        <ReferenceLine yAxisId=\"left\" y={0} stroke=\"currentColor\" strokeOpacity={0.35} />\n      ) : null}\n      {referenceLines.map((ref, i) => (\n        <ReferenceLine\n          key={`ref-${i}`}\n          yAxisId={axisOfUnit(ref.unit ?? unit)}\n          y={ref.value}\n          stroke={referenceColor(ref)}\n          strokeDasharray=\"4 4\"\n          ifOverflow=\"extendDomain\"\n        />\n      ))}\n    </>\n  );\n\n  return (\n    <ResponsiveContainer width=\"100%\" height=\"100%\">\n      {variant === \"line\" ? (\n        <LineChart data={rows} margin={{ top: 4, right: 8, bottom: 0, left: 0 }}>\n          {axes}\n          {series.map((s) => (\n            <Line\n              key={s.key}\n              yAxisId={axisOf(s.key)}\n              type=\"monotone\"\n              dataKey={s.key}\n              name={s.key}\n              stroke={strokeOf(s)}\n              strokeWidth={2}\n              dot={false}\n              connectNulls\n              isAnimationActive={false}\n            />\n          ))}\n        </LineChart>\n      ) : (\n        <AreaChart data={rows} margin={{ top: 4, right: 8, bottom: 0, left: 0 }}>\n          {axes}\n          {series.map((s) => (\n            <Area\n              key={s.key}\n              yAxisId={axisOf(s.key)}\n              type=\"monotone\"\n              dataKey={s.key}\n              name={s.key}\n              stroke={strokeOf(s)}\n              fill={strokeOf(s)}\n              {...(stacked ? { stackId: `stack-${axisOf(s.key)}` } : {})}\n              fillOpacity={stacked ? 0.7 : 0.12}\n              strokeWidth={stacked ? 0 : 2}\n              connectNulls\n              isAnimationActive={false}\n            />\n          ))}\n        </AreaChart>\n      )}\n    </ResponsiveContainer>\n  );\n}\n\nfunction PanelMessage({ children }: { children: React.ReactNode }) {\n  return (\n    <div className=\"flex h-full items-center justify-center text-xs text-muted-foreground\">\n      {children}\n    </div>\n  );\n}\n\nfunction PanelIcon({ icon }: { icon: string | StaticIconComponent }) {\n  if (typeof icon === \"string\") {\n    return <Icon name={icon} width={16} height={16} className=\"text-muted-foreground\" />;\n  }\n  return <Icon icon={icon} width={16} height={16} className=\"text-muted-foreground\" />;\n}\n"],"mappings":"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"}

package/dist/data/TimeseriesPanel.model.cjs

@@ -9,19 +9,70 @@ var SERIES_PALETTE = [
 function paletteColor(index) {
 	return SERIES_PALETTE[index % SERIES_PALETTE.length] ?? SERIES_PALETTE[0];
 }
-/** Normalises the single-url and baseUrl+series forms to one list. */
-function resolveSeries(props) {
-	const base = props.baseUrl ?? "";
-	return (props.series ?? (props.url ? [{ id: props.url }] : [])).map((s, i) => ({
+/** The label-set values in key order, e.g. `{ pod: "api", ns: "x" }` → "x, api". */
+function labelValues(labels) {
+	if (!labels) return void 0;
+	const values = Object.keys(labels).sort().map((key) => labels[key]);
+	return values.length > 0 ? values.join(", ") : void 0;
+}
+function requestedSeries(props) {
+	return props.series ?? (props.url ? [{ id: props.url }] : []);
+}
+function resolveEntry(s, index, props, servedUnit) {
+	const unit = s.unit ?? servedUnit ?? props.unit;
+	return {
 		key: s.id,
-		url: base + s.id,
-		label: s.label ?? s.id,
-		color: s.color ?? paletteColor(i),
-		...s.unit ?? props.unit ? { unit: s.unit ?? props.unit } : {},
+		url: (props.baseUrl ?? "") + s.id,
+		label: s.label ?? labelValues(s.labels) ?? s.id,
+		color: s.color ?? paletteColor(index),
+		...unit ? { unit } : {},
 		...s.transform ? { transform: s.transform } : {},
 		...s.load ? { load: s.load } : {},
-		...s.current !== void 0 ? { current: s.current } : {}
-	}));
+		...s.current !== void 0 ? { current: s.current } : {},
+		...s.labels ? { labels: s.labels } : {},
+		...s.source ? { source: s.source } : {}
+	};
+}
+/** Normalises the single-url and baseUrl+series forms to one list. */
+function resolveSeries(props) {
+	return requestedSeries(props).map((s, i) => resolveEntry(s, i, props));
+}
+/**
+* Resolves what a panel plots from what its requested series were answered
+* with (`served`, index-aligned with the requested series; undefined while a
+* series is loading). A requested id answered by its own series alone keeps
+* the panel's label, color and `current`; an id that expanded into several
+* series plots each one, labelled by its `label` or label values. A series
+* without a unit of its own takes the served unit, then the panel `unit`.
+*/
+function expandServedSeries(props, served) {
+	const series = [];
+	const points = [];
+	requestedSeries(props).forEach((requested, i) => {
+		const answer = served[i];
+		const [first] = answer ?? [];
+		if (!answer || !first || answer.length === 1 && first.id === requested.id) {
+			series.push(resolveEntry(requested, series.length, props, first?.unit));
+			points.push(answer ? first?.points ?? [] : void 0);
+			return;
+		}
+		for (const s of answer) {
+			const expanded = {
+				id: s.id,
+				source: requested.id,
+				...s.label ? { label: s.label } : {},
+				...s.labels ? { labels: s.labels } : {},
+				...requested.unit ? { unit: requested.unit } : {},
+				...requested.transform ? { transform: requested.transform } : {}
+			};
+			series.push(resolveEntry(expanded, series.length, props, s.unit));
+			points.push(s.points);
+		}
+	});
+	return {
+		series,
+		points
+	};
 }
 function resolveBreakdown(series, rows, total) {
 	const withValue = series.map((s) => ({
@@ -52,6 +103,7 @@ function mergeSeries(series, pointsBySeries) {
 	});
 	return [...rows.values()].sort((a, b) => a.at.localeCompare(b.at));
 }
+exports.expandServedSeries = expandServedSeries;
 exports.mergeSeries = mergeSeries;
 exports.resolveBreakdown = resolveBreakdown;
 exports.resolveSeries = resolveSeries;

package/dist/data/TimeseriesPanel.model.cjs.map

@@ -1 +1 @@
-{"version":3,"file":"TimeseriesPanel.model.cjs","names":["latestOf"],"sources":["../../src/data/TimeseriesPanel.model.ts"],"sourcesContent":["import type { StaticIconComponent } from \"./Icon\";\nimport { latestOf } from \"./TimeseriesPanel.axes\";\n\nexport interface TimeseriesPoint {\n  at: string;\n  value: number;\n}\n\nexport interface TimeseriesResponse {\n  id: string;\n  points: TimeseriesPoint[];\n}\n\n/** What a {@link SeriesLoader} receives from the widget polling it. */\nexport interface SeriesLoadContext {\n  /** The widget's look-back window, e.g. \"1h\". */\n  range: string;\n  /** Aborted when the query is cancelled, e.g. the widget unmounts mid-request. */\n  signal: AbortSignal;\n}\n\n/**\n * Loads a series directly, instead of the widget requesting `baseUrl + id`\n * through its `fetcher`. Called again whenever the range changes and on every\n * poll.\n */\nexport type SeriesLoader = (ctx: SeriesLoadContext) => Promise<TimeseriesResponse>;\n\n/**\n * One metric plotted on a panel. Its request URL is `baseUrl + id`, unless a\n * `load` function supplies the data.\n */\nexport interface TimeseriesSeries {\n  /**\n   * Metric id appended to the panel's baseUrl, e.g. \"sqlserver.iops.read\".\n   * With `load`, the id is the series' cache identity instead: loaded series\n   * are cached under `[\"timeseries\", \"load\", id, range]`, so it must be unique\n   * per data source (two series sharing an id share one cached response).\n   */\n  id: string;\n  /** Loads the series' points; when set, `baseUrl` and `fetcher` are not used. */\n  load?: SeriesLoader;\n  /** Tooltip/legend label; defaults to the id. */\n  label?: string;\n  /**\n   * Maps each point's value before plotting, e.g. writes pass `(v) => -v` to\n   * render below the zero axis. Identity when omitted.\n   */\n  transform?: (value: number) => number;\n  /**\n   * Stroke/fill override as a CSS color value or a Tailwind color class.\n   * Defaults cycle a small palette by index.\n   */\n  color?: string;\n  /**\n   * Grafana-style unit key for this series' readout/tooltip. Falls back to the\n   * panel-level `unit`.\n   */\n  unit?: string;\n  /**\n   * Instantaneous value for the `breakdown` variant. When omitted, the\n   * breakdown falls back to the latest polled point.\n   */\n  current?: number;\n}\n\n/** A horizontal marker line at a fixed value, e.g. a static capacity. */\nexport interface TimeseriesReferenceLine {\n  value: number;\n  /** Legend label, e.g. \"capacity\". */\n  label: string;\n  /** CSS color value or Tailwind color class; defaults to the muted foreground. */\n  color?: string;\n  /** Grafana-style unit key for the legend value; falls back to the panel `unit`. */\n  unit?: string;\n}\n\nexport interface TimeseriesPanelProps {\n  url?: string;\n  baseUrl?: string;\n  series?: TimeseriesSeries[];\n  title: string;\n  icon?: string | StaticIconComponent;\n  unit?: string;\n  range?: string;\n  refreshMs?: number;\n  height?: number;\n  variant?: \"area\" | \"line\" | \"stacked\" | \"breakdown\";\n  expandVariant?: \"area\" | \"line\" | \"stacked\";\n  total?: number;\n  /** Flat lines drawn across the time-series chart, e.g. a fixed capacity. */\n  referenceLines?: TimeseriesReferenceLine[];\n  expandable?: boolean;\n  fetcher?: (url: string) => Promise<TimeseriesResponse>;\n  className?: string;\n}\n\nconst SERIES_PALETTE = [\n  \"var(--chart-1, #3b82f6)\",\n  \"var(--chart-2, #ef4444)\",\n  \"var(--chart-3, #10b981)\",\n  \"var(--chart-4, #f59e0b)\",\n] as const;\n\nfunction paletteColor(index: number): string {\n  return SERIES_PALETTE[index % SERIES_PALETTE.length] ?? SERIES_PALETTE[0];\n}\n\n/** A series with its full request URL, resolved label, color, and unit. */\nexport interface ResolvedSeries {\n  key: string;\n  url: string;\n  label: string;\n  color: string;\n  unit?: string;\n  transform?: (value: number) => number;\n  load?: SeriesLoader;\n  current?: number;\n}\n\n/** Normalises the single-url and baseUrl+series forms to one list. */\nexport function resolveSeries(props: TimeseriesPanelProps): ResolvedSeries[] {\n  const base = props.baseUrl ?? \"\";\n  const list = props.series ?? (props.url ? [{ id: props.url }] : []);\n  return list.map((s, i) => ({\n    key: s.id,\n    url: base + s.id,\n    label: s.label ?? s.id,\n    color: s.color ?? paletteColor(i),\n    ...(s.unit ?? props.unit ? { unit: s.unit ?? props.unit } : {}),\n    ...(s.transform ? { transform: s.transform } : {}),\n    ...(s.load ? { load: s.load } : {}),\n    ...(s.current !== undefined ? { current: s.current } : {}),\n  }));\n}\n\n/** One legend/bar row of the breakdown variant. */\nexport interface BreakdownItem {\n  key: string;\n  label: string;\n  color: string;\n  unit?: string;\n  value: number;\n  percent: number;\n}\n\n/**\n * One row of the merged chart data: the timestamp in `at` plus each series'\n * value under its key.\n */\nexport interface MergedRow {\n  at: string;\n  [seriesKey: string]: string | number | undefined;\n}\n\nexport function resolveBreakdown(\n  series: ResolvedSeries[],\n  rows: MergedRow[],\n  total?: number,\n): { items: BreakdownItem[]; total: number } {\n  const withValue = series.map((s) => ({ s, value: s.current ?? latestOf(rows, s.key) ?? 0 }));\n  const denom = total ?? withValue.reduce((acc, w) => acc + w.value, 0);\n  const items = withValue.map(({ s, value }) => ({\n    key: s.key,\n    label: s.label,\n    color: s.color,\n    ...(s.unit ? { unit: s.unit } : {}),\n    value,\n    percent: denom > 0 ? Math.min(100, Math.max(0, (value / denom) * 100)) : 0,\n  }));\n  return { items, total: denom };\n}\n\nexport function mergeSeries(\n  series: ResolvedSeries[],\n  pointsBySeries: (TimeseriesPoint[] | undefined)[],\n): MergedRow[] {\n  const rows = new Map<string, MergedRow>();\n  series.forEach((s, i) => {\n    for (const p of pointsBySeries[i] ?? []) {\n      const row = rows.get(p.at) ?? { at: p.at };\n      row[s.key] = s.transform ? s.transform(p.value) : p.value;\n      rows.set(p.at, row);\n    }\n  });\n  return [...rows.values()].sort((a, b) => a.at.localeCompare(b.at));\n}\n"],"mappings":";;AAiGA,IAAM,iBAAiB;CACrB;CACA;CACA;CACA;AACF;AAEA,SAAS,aAAa,OAAuB;CAC3C,OAAO,eAAe,QAAQ,eAAe,WAAW,eAAe;AACzE;;AAeA,SAAgB,cAAc,OAA+C;CAC3E,MAAM,OAAO,MAAM,WAAW;CAE9B,QADa,MAAM,WAAW,MAAM,MAAM,CAAC,EAAE,IAAI,MAAM,IAAI,CAAC,IAAI,CAAC,GAAA,CACrD,KAAK,GAAG,OAAO;EACzB,KAAK,EAAE;EACP,KAAK,OAAO,EAAE;EACd,OAAO,EAAE,SAAS,EAAE;EACpB,OAAO,EAAE,SAAS,aAAa,CAAC;EAChC,GAAI,EAAE,QAAQ,MAAM,OAAO,EAAE,MAAM,EAAE,QAAQ,MAAM,KAAK,IAAI,CAAC;EAC7D,GAAI,EAAE,YAAY,EAAE,WAAW,EAAE,UAAU,IAAI,CAAC;EAChD,GAAI,EAAE,OAAO,EAAE,MAAM,EAAE,KAAK,IAAI,CAAC;EACjC,GAAI,EAAE,YAAY,KAAA,IAAY,EAAE,SAAS,EAAE,QAAQ,IAAI,CAAC;CAC1D,EAAE;AACJ;AAqBA,SAAgB,iBACd,QACA,MACA,OAC2C;CAC3C,MAAM,YAAY,OAAO,KAAK,OAAO;EAAE;EAAG,OAAO,EAAE,WAAWA,6BAAAA,SAAS,MAAM,EAAE,GAAG,KAAK;CAAE,EAAE;CAC3F,MAAM,QAAQ,SAAS,UAAU,QAAQ,KAAK,MAAM,MAAM,EAAE,OAAO,CAAC;CASpE,OAAO;EAAE,OARK,UAAU,KAAK,EAAE,GAAG,aAAa;GAC7C,KAAK,EAAE;GACP,OAAO,EAAE;GACT,OAAO,EAAE;GACT,GAAI,EAAE,OAAO,EAAE,MAAM,EAAE,KAAK,IAAI,CAAC;GACjC;GACA,SAAS,QAAQ,IAAI,KAAK,IAAI,KAAK,KAAK,IAAI,GAAI,QAAQ,QAAS,GAAG,CAAC,IAAI;EAC3E,EACS;EAAO,OAAO;CAAM;AAC/B;AAEA,SAAgB,YACd,QACA,gBACa;CACb,MAAM,uBAAO,IAAI,IAAuB;CACxC,OAAO,SAAS,GAAG,MAAM;EACvB,KAAK,MAAM,KAAK,eAAe,MAAM,CAAC,GAAG;GACvC,MAAM,MAAM,KAAK,IAAI,EAAE,EAAE,KAAK,EAAE,IAAI,EAAE,GAAG;GACzC,IAAI,EAAE,OAAO,EAAE,YAAY,EAAE,UAAU,EAAE,KAAK,IAAI,EAAE;GACpD,KAAK,IAAI,EAAE,IAAI,GAAG;EACpB;CACF,CAAC;CACD,OAAO,CAAC,GAAG,KAAK,OAAO,CAAC,CAAC,CAAC,MAAM,GAAG,MAAM,EAAE,GAAG,cAAc,EAAE,EAAE,CAAC;AACnE"}
+{"version":3,"file":"TimeseriesPanel.model.cjs","names":["latestOf"],"sources":["../../src/data/TimeseriesPanel.model.ts"],"sourcesContent":["import type { StaticIconComponent } from \"./Icon\";\nimport { latestOf } from \"./TimeseriesPanel.axes\";\n\nexport interface TimeseriesPoint {\n  at: string;\n  value: number;\n}\n\nexport interface TimeseriesResponse {\n  id: string;\n  points: TimeseriesPoint[];\n}\n\n/**\n * One series as the metrics stream serves it. `source` is the id a panel\n * requested; one requested id can expand into several series (a profile\n * grouped by pod, say), each with its own `id` (`<source>#<labels>`) and\n * `labels`. For a plain metric id, `id === source`.\n */\nexport interface TimeseriesServerSeries {\n  id: string;\n  source: string;\n  label?: string;\n  labels?: Record<string, string>;\n  /** A `formatUnit` key, used when the panel series names no unit. */\n  unit?: string;\n  points: TimeseriesPoint[];\n}\n\n/** What a {@link SeriesLoader} receives from the widget polling it. */\nexport interface SeriesLoadContext {\n  /** The widget's look-back window, e.g. \"1h\". */\n  range: string;\n  /** Aborted when the query is cancelled, e.g. the widget unmounts mid-request. */\n  signal: AbortSignal;\n}\n\n/**\n * Loads a series directly, instead of the widget requesting `baseUrl + id`\n * through its `fetcher`. Called again whenever the range changes and on every\n * poll.\n */\nexport type SeriesLoader = (ctx: SeriesLoadContext) => Promise<TimeseriesResponse>;\n\n/**\n * One metric plotted on a panel. Its request URL is `baseUrl + id`, unless a\n * `load` function supplies the data.\n */\nexport interface TimeseriesSeries {\n  /**\n   * Metric id appended to the panel's baseUrl, e.g. \"sqlserver.iops.read\".\n   * With `load`, the id is the series' cache identity instead: loaded series\n   * are cached under `[\"timeseries\", \"load\", id, range]`, so it must be unique\n   * per data source (two series sharing an id share one cached response).\n   */\n  id: string;\n  /** Loads the series' points; when set, `baseUrl` and `fetcher` are not used. */\n  load?: SeriesLoader;\n  /** Tooltip/legend label; defaults to the `labels` values, then the id. */\n  label?: string;\n  /** The series' label set, e.g. `{ pod: \"api\" }`; its values label the series when `label` is unset. */\n  labels?: Record<string, string>;\n  /**\n   * The requested id this series was expanded from, when one id answers with\n   * several series (see {@link TimeseriesServerSeries}). Unset on requested series.\n   */\n  source?: string;\n  /**\n   * Maps each point's value before plotting, e.g. writes pass `(v) => -v` to\n   * render below the zero axis. Identity when omitted.\n   */\n  transform?: (value: number) => number;\n  /**\n   * Stroke/fill override as a CSS color value or a Tailwind color class.\n   * Defaults cycle a small palette by index.\n   */\n  color?: string;\n  /**\n   * Grafana-style unit key for this series' readout/tooltip. Falls back to the\n   * panel-level `unit`.\n   */\n  unit?: string;\n  /**\n   * Instantaneous value for the `breakdown` variant. When omitted, the\n   * breakdown falls back to the latest polled point.\n   */\n  current?: number;\n}\n\n/** A horizontal marker line at a fixed value, e.g. a static capacity. */\nexport interface TimeseriesReferenceLine {\n  value: number;\n  /** Legend label, e.g. \"capacity\". */\n  label: string;\n  /** CSS color value or Tailwind color class; defaults to the muted foreground. */\n  color?: string;\n  /** Grafana-style unit key for the legend value; falls back to the panel `unit`. */\n  unit?: string;\n}\n\nexport interface TimeseriesPanelProps {\n  url?: string;\n  baseUrl?: string;\n  series?: TimeseriesSeries[];\n  title: string;\n  icon?: string | StaticIconComponent;\n  unit?: string;\n  range?: string;\n  refreshMs?: number;\n  height?: number;\n  variant?: \"area\" | \"line\" | \"stacked\" | \"breakdown\";\n  expandVariant?: \"area\" | \"line\" | \"stacked\";\n  total?: number;\n  /** Flat lines drawn across the time-series chart, e.g. a fixed capacity. */\n  referenceLines?: TimeseriesReferenceLine[];\n  expandable?: boolean;\n  fetcher?: (url: string) => Promise<TimeseriesResponse>;\n  className?: string;\n}\n\nconst SERIES_PALETTE = [\n  \"var(--chart-1, #3b82f6)\",\n  \"var(--chart-2, #ef4444)\",\n  \"var(--chart-3, #10b981)\",\n  \"var(--chart-4, #f59e0b)\",\n] as const;\n\nfunction paletteColor(index: number): string {\n  return SERIES_PALETTE[index % SERIES_PALETTE.length] ?? SERIES_PALETTE[0];\n}\n\n/** A series with its full request URL, resolved label, color, and unit. */\nexport interface ResolvedSeries {\n  key: string;\n  url: string;\n  label: string;\n  color: string;\n  unit?: string;\n  transform?: (value: number) => number;\n  load?: SeriesLoader;\n  current?: number;\n  labels?: Record<string, string>;\n  /** The requested id an expanded series came from; unset on requested series. */\n  source?: string;\n}\n\n/** The label-set values in key order, e.g. `{ pod: \"api\", ns: \"x\" }` → \"x, api\". */\nfunction labelValues(labels: Record<string, string> | undefined): string | undefined {\n  if (!labels) return undefined;\n  const values = Object.keys(labels)\n    .sort()\n    .map((key) => labels[key]);\n  return values.length > 0 ? values.join(\", \") : undefined;\n}\n\nfunction requestedSeries(props: TimeseriesPanelProps): TimeseriesSeries[] {\n  return props.series ?? (props.url ? [{ id: props.url }] : []);\n}\n\nfunction resolveEntry(\n  s: TimeseriesSeries,\n  index: number,\n  props: TimeseriesPanelProps,\n  servedUnit?: string,\n): ResolvedSeries {\n  const unit = s.unit ?? servedUnit ?? props.unit;\n  return {\n    key: s.id,\n    url: (props.baseUrl ?? \"\") + s.id,\n    label: s.label ?? labelValues(s.labels) ?? s.id,\n    color: s.color ?? paletteColor(index),\n    ...(unit ? { unit } : {}),\n    ...(s.transform ? { transform: s.transform } : {}),\n    ...(s.load ? { load: s.load } : {}),\n    ...(s.current !== undefined ? { current: s.current } : {}),\n    ...(s.labels ? { labels: s.labels } : {}),\n    ...(s.source ? { source: s.source } : {}),\n  };\n}\n\n/** Normalises the single-url and baseUrl+series forms to one list. */\nexport function resolveSeries(props: TimeseriesPanelProps): ResolvedSeries[] {\n  return requestedSeries(props).map((s, i) => resolveEntry(s, i, props));\n}\n\n/** The series a panel plots, index-aligned with each one's points (undefined while loading). */\nexport interface DisplaySeries {\n  series: ResolvedSeries[];\n  points: (TimeseriesPoint[] | undefined)[];\n}\n\n/**\n * Resolves what a panel plots from what its requested series were answered\n * with (`served`, index-aligned with the requested series; undefined while a\n * series is loading). A requested id answered by its own series alone keeps\n * the panel's label, color and `current`; an id that expanded into several\n * series plots each one, labelled by its `label` or label values. A series\n * without a unit of its own takes the served unit, then the panel `unit`.\n */\nexport function expandServedSeries(\n  props: TimeseriesPanelProps,\n  served: readonly (readonly TimeseriesServerSeries[] | undefined)[],\n): DisplaySeries {\n  const series: ResolvedSeries[] = [];\n  const points: (TimeseriesPoint[] | undefined)[] = [];\n  requestedSeries(props).forEach((requested, i) => {\n    const answer = served[i];\n    const [first] = answer ?? [];\n    if (!answer || !first || (answer.length === 1 && first.id === requested.id)) {\n      series.push(resolveEntry(requested, series.length, props, first?.unit));\n      points.push(answer ? (first?.points ?? []) : undefined);\n      return;\n    }\n    for (const s of answer) {\n      const expanded: TimeseriesSeries = {\n        id: s.id,\n        source: requested.id,\n        ...(s.label ? { label: s.label } : {}),\n        ...(s.labels ? { labels: s.labels } : {}),\n        ...(requested.unit ? { unit: requested.unit } : {}),\n        ...(requested.transform ? { transform: requested.transform } : {}),\n      };\n      series.push(resolveEntry(expanded, series.length, props, s.unit));\n      points.push(s.points);\n    }\n  });\n  return { series, points };\n}\n\n/** One legend/bar row of the breakdown variant. */\nexport interface BreakdownItem {\n  key: string;\n  label: string;\n  color: string;\n  unit?: string;\n  value: number;\n  percent: number;\n}\n\n/**\n * One row of the merged chart data: the timestamp in `at` plus each series'\n * value under its key.\n */\nexport interface MergedRow {\n  at: string;\n  [seriesKey: string]: string | number | undefined;\n}\n\nexport function resolveBreakdown(\n  series: ResolvedSeries[],\n  rows: MergedRow[],\n  total?: number,\n): { items: BreakdownItem[]; total: number } {\n  const withValue = series.map((s) => ({ s, value: s.current ?? latestOf(rows, s.key) ?? 0 }));\n  const denom = total ?? withValue.reduce((acc, w) => acc + w.value, 0);\n  const items = withValue.map(({ s, value }) => ({\n    key: s.key,\n    label: s.label,\n    color: s.color,\n    ...(s.unit ? { unit: s.unit } : {}),\n    value,\n    percent: denom > 0 ? Math.min(100, Math.max(0, (value / denom) * 100)) : 0,\n  }));\n  return { items, total: denom };\n}\n\nexport function mergeSeries(\n  series: ResolvedSeries[],\n  pointsBySeries: (TimeseriesPoint[] | undefined)[],\n): MergedRow[] {\n  const rows = new Map<string, MergedRow>();\n  series.forEach((s, i) => {\n    for (const p of pointsBySeries[i] ?? []) {\n      const row = rows.get(p.at) ?? { at: p.at };\n      row[s.key] = s.transform ? s.transform(p.value) : p.value;\n      rows.set(p.at, row);\n    }\n  });\n  return [...rows.values()].sort((a, b) => a.at.localeCompare(b.at));\n}\n"],"mappings":"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"}

package/dist/data/TimeseriesPanel.model.d.ts

@@ -7,6 +7,21 @@ export interface TimeseriesResponse {
     id: string;
     points: TimeseriesPoint[];
 }
+/**
+ * One series as the metrics stream serves it. `source` is the id a panel
+ * requested; one requested id can expand into several series (a profile
+ * grouped by pod, say), each with its own `id` (`<source>#<labels>`) and
+ * `labels`. For a plain metric id, `id === source`.
+ */
+export interface TimeseriesServerSeries {
+    id: string;
+    source: string;
+    label?: string;
+    labels?: Record<string, string>;
+    /** A `formatUnit` key, used when the panel series names no unit. */
+    unit?: string;
+    points: TimeseriesPoint[];
+}
 /** What a {@link SeriesLoader} receives from the widget polling it. */
 export interface SeriesLoadContext {
     /** The widget's look-back window, e.g. "1h". */
@@ -34,8 +49,15 @@ export interface TimeseriesSeries {
     id: string;
     /** Loads the series' points; when set, `baseUrl` and `fetcher` are not used. */
     load?: SeriesLoader;
-    /** Tooltip/legend label; defaults to the id. */
+    /** Tooltip/legend label; defaults to the `labels` values, then the id. */
     label?: string;
+    /** The series' label set, e.g. `{ pod: "api" }`; its values label the series when `label` is unset. */
+    labels?: Record<string, string>;
+    /**
+     * The requested id this series was expanded from, when one id answers with
+     * several series (see {@link TimeseriesServerSeries}). Unset on requested series.
+     */
+    source?: string;
     /**
      * Maps each point's value before plotting, e.g. writes pass `(v) => -v` to
      * render below the zero axis. Identity when omitted.
@@ -96,9 +118,26 @@ export interface ResolvedSeries {
     transform?: (value: number) => number;
     load?: SeriesLoader;
     current?: number;
+    labels?: Record<string, string>;
+    /** The requested id an expanded series came from; unset on requested series. */
+    source?: string;
 }
 /** Normalises the single-url and baseUrl+series forms to one list. */
 export declare function resolveSeries(props: TimeseriesPanelProps): ResolvedSeries[];
+/** The series a panel plots, index-aligned with each one's points (undefined while loading). */
+export interface DisplaySeries {
+    series: ResolvedSeries[];
+    points: (TimeseriesPoint[] | undefined)[];
+}
+/**
+ * Resolves what a panel plots from what its requested series were answered
+ * with (`served`, index-aligned with the requested series; undefined while a
+ * series is loading). A requested id answered by its own series alone keeps
+ * the panel's label, color and `current`; an id that expanded into several
+ * series plots each one, labelled by its `label` or label values. A series
+ * without a unit of its own takes the served unit, then the panel `unit`.
+ */
+export declare function expandServedSeries(props: TimeseriesPanelProps, served: readonly (readonly TimeseriesServerSeries[] | undefined)[]): DisplaySeries;
 /** One legend/bar row of the breakdown variant. */
 export interface BreakdownItem {
     key: string;

package/dist/data/TimeseriesPanel.model.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"TimeseriesPanel.model.d.ts","sourceRoot":"","sources":["../../src/data/TimeseriesPanel.model.ts"],"names":[],"mappings":"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"}
+{"version":3,"file":"TimeseriesPanel.model.d.ts","sourceRoot":"","sources":["../../src/data/TimeseriesPanel.model.ts"],"names":[],"mappings":"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"}

package/dist/data/TimeseriesPanel.model.js

@@ -9,19 +9,70 @@ var SERIES_PALETTE = [
 function paletteColor(index) {
 	return SERIES_PALETTE[index % SERIES_PALETTE.length] ?? SERIES_PALETTE[0];
 }
-/** Normalises the single-url and baseUrl+series forms to one list. */
-function resolveSeries(props) {
-	const base = props.baseUrl ?? "";
-	return (props.series ?? (props.url ? [{ id: props.url }] : [])).map((s, i) => ({
+/** The label-set values in key order, e.g. `{ pod: "api", ns: "x" }` → "x, api". */
+function labelValues(labels) {
+	if (!labels) return void 0;
+	const values = Object.keys(labels).sort().map((key) => labels[key]);
+	return values.length > 0 ? values.join(", ") : void 0;
+}
+function requestedSeries(props) {
+	return props.series ?? (props.url ? [{ id: props.url }] : []);
+}
+function resolveEntry(s, index, props, servedUnit) {
+	const unit = s.unit ?? servedUnit ?? props.unit;
+	return {
 		key: s.id,
-		url: base + s.id,
-		label: s.label ?? s.id,
-		color: s.color ?? paletteColor(i),
-		...s.unit ?? props.unit ? { unit: s.unit ?? props.unit } : {},
+		url: (props.baseUrl ?? "") + s.id,
+		label: s.label ?? labelValues(s.labels) ?? s.id,
+		color: s.color ?? paletteColor(index),
+		...unit ? { unit } : {},
 		...s.transform ? { transform: s.transform } : {},
 		...s.load ? { load: s.load } : {},
-		...s.current !== void 0 ? { current: s.current } : {}
-	}));
+		...s.current !== void 0 ? { current: s.current } : {},
+		...s.labels ? { labels: s.labels } : {},
+		...s.source ? { source: s.source } : {}
+	};
+}
+/** Normalises the single-url and baseUrl+series forms to one list. */
+function resolveSeries(props) {
+	return requestedSeries(props).map((s, i) => resolveEntry(s, i, props));
+}
+/**
+* Resolves what a panel plots from what its requested series were answered
+* with (`served`, index-aligned with the requested series; undefined while a
+* series is loading). A requested id answered by its own series alone keeps
+* the panel's label, color and `current`; an id that expanded into several
+* series plots each one, labelled by its `label` or label values. A series
+* without a unit of its own takes the served unit, then the panel `unit`.
+*/
+function expandServedSeries(props, served) {
+	const series = [];
+	const points = [];
+	requestedSeries(props).forEach((requested, i) => {
+		const answer = served[i];
+		const [first] = answer ?? [];
+		if (!answer || !first || answer.length === 1 && first.id === requested.id) {
+			series.push(resolveEntry(requested, series.length, props, first?.unit));
+			points.push(answer ? first?.points ?? [] : void 0);
+			return;
+		}
+		for (const s of answer) {
+			const expanded = {
+				id: s.id,
+				source: requested.id,
+				...s.label ? { label: s.label } : {},
+				...s.labels ? { labels: s.labels } : {},
+				...requested.unit ? { unit: requested.unit } : {},
+				...requested.transform ? { transform: requested.transform } : {}
+			};
+			series.push(resolveEntry(expanded, series.length, props, s.unit));
+			points.push(s.points);
+		}
+	});
+	return {
+		series,
+		points
+	};
 }
 function resolveBreakdown(series, rows, total) {
 	const withValue = series.map((s) => ({
@@ -52,6 +103,6 @@ function mergeSeries(series, pointsBySeries) {
 	});
 	return [...rows.values()].sort((a, b) => a.at.localeCompare(b.at));
 }
-export { mergeSeries, resolveBreakdown, resolveSeries };
+export { expandServedSeries, mergeSeries, resolveBreakdown, resolveSeries };
 
 //# sourceMappingURL=TimeseriesPanel.model.js.map

package/dist/data/TimeseriesPanel.model.js.map

@@ -1 +1 @@
-{"version":3,"file":"TimeseriesPanel.model.js","names":[],"sources":["../../src/data/TimeseriesPanel.model.ts"],"sourcesContent":["import type { StaticIconComponent } from \"./Icon\";\nimport { latestOf } from \"./TimeseriesPanel.axes\";\n\nexport interface TimeseriesPoint {\n  at: string;\n  value: number;\n}\n\nexport interface TimeseriesResponse {\n  id: string;\n  points: TimeseriesPoint[];\n}\n\n/** What a {@link SeriesLoader} receives from the widget polling it. */\nexport interface SeriesLoadContext {\n  /** The widget's look-back window, e.g. \"1h\". */\n  range: string;\n  /** Aborted when the query is cancelled, e.g. the widget unmounts mid-request. */\n  signal: AbortSignal;\n}\n\n/**\n * Loads a series directly, instead of the widget requesting `baseUrl + id`\n * through its `fetcher`. Called again whenever the range changes and on every\n * poll.\n */\nexport type SeriesLoader = (ctx: SeriesLoadContext) => Promise<TimeseriesResponse>;\n\n/**\n * One metric plotted on a panel. Its request URL is `baseUrl + id`, unless a\n * `load` function supplies the data.\n */\nexport interface TimeseriesSeries {\n  /**\n   * Metric id appended to the panel's baseUrl, e.g. \"sqlserver.iops.read\".\n   * With `load`, the id is the series' cache identity instead: loaded series\n   * are cached under `[\"timeseries\", \"load\", id, range]`, so it must be unique\n   * per data source (two series sharing an id share one cached response).\n   */\n  id: string;\n  /** Loads the series' points; when set, `baseUrl` and `fetcher` are not used. */\n  load?: SeriesLoader;\n  /** Tooltip/legend label; defaults to the id. */\n  label?: string;\n  /**\n   * Maps each point's value before plotting, e.g. writes pass `(v) => -v` to\n   * render below the zero axis. Identity when omitted.\n   */\n  transform?: (value: number) => number;\n  /**\n   * Stroke/fill override as a CSS color value or a Tailwind color class.\n   * Defaults cycle a small palette by index.\n   */\n  color?: string;\n  /**\n   * Grafana-style unit key for this series' readout/tooltip. Falls back to the\n   * panel-level `unit`.\n   */\n  unit?: string;\n  /**\n   * Instantaneous value for the `breakdown` variant. When omitted, the\n   * breakdown falls back to the latest polled point.\n   */\n  current?: number;\n}\n\n/** A horizontal marker line at a fixed value, e.g. a static capacity. */\nexport interface TimeseriesReferenceLine {\n  value: number;\n  /** Legend label, e.g. \"capacity\". */\n  label: string;\n  /** CSS color value or Tailwind color class; defaults to the muted foreground. */\n  color?: string;\n  /** Grafana-style unit key for the legend value; falls back to the panel `unit`. */\n  unit?: string;\n}\n\nexport interface TimeseriesPanelProps {\n  url?: string;\n  baseUrl?: string;\n  series?: TimeseriesSeries[];\n  title: string;\n  icon?: string | StaticIconComponent;\n  unit?: string;\n  range?: string;\n  refreshMs?: number;\n  height?: number;\n  variant?: \"area\" | \"line\" | \"stacked\" | \"breakdown\";\n  expandVariant?: \"area\" | \"line\" | \"stacked\";\n  total?: number;\n  /** Flat lines drawn across the time-series chart, e.g. a fixed capacity. */\n  referenceLines?: TimeseriesReferenceLine[];\n  expandable?: boolean;\n  fetcher?: (url: string) => Promise<TimeseriesResponse>;\n  className?: string;\n}\n\nconst SERIES_PALETTE = [\n  \"var(--chart-1, #3b82f6)\",\n  \"var(--chart-2, #ef4444)\",\n  \"var(--chart-3, #10b981)\",\n  \"var(--chart-4, #f59e0b)\",\n] as const;\n\nfunction paletteColor(index: number): string {\n  return SERIES_PALETTE[index % SERIES_PALETTE.length] ?? SERIES_PALETTE[0];\n}\n\n/** A series with its full request URL, resolved label, color, and unit. */\nexport interface ResolvedSeries {\n  key: string;\n  url: string;\n  label: string;\n  color: string;\n  unit?: string;\n  transform?: (value: number) => number;\n  load?: SeriesLoader;\n  current?: number;\n}\n\n/** Normalises the single-url and baseUrl+series forms to one list. */\nexport function resolveSeries(props: TimeseriesPanelProps): ResolvedSeries[] {\n  const base = props.baseUrl ?? \"\";\n  const list = props.series ?? (props.url ? [{ id: props.url }] : []);\n  return list.map((s, i) => ({\n    key: s.id,\n    url: base + s.id,\n    label: s.label ?? s.id,\n    color: s.color ?? paletteColor(i),\n    ...(s.unit ?? props.unit ? { unit: s.unit ?? props.unit } : {}),\n    ...(s.transform ? { transform: s.transform } : {}),\n    ...(s.load ? { load: s.load } : {}),\n    ...(s.current !== undefined ? { current: s.current } : {}),\n  }));\n}\n\n/** One legend/bar row of the breakdown variant. */\nexport interface BreakdownItem {\n  key: string;\n  label: string;\n  color: string;\n  unit?: string;\n  value: number;\n  percent: number;\n}\n\n/**\n * One row of the merged chart data: the timestamp in `at` plus each series'\n * value under its key.\n */\nexport interface MergedRow {\n  at: string;\n  [seriesKey: string]: string | number | undefined;\n}\n\nexport function resolveBreakdown(\n  series: ResolvedSeries[],\n  rows: MergedRow[],\n  total?: number,\n): { items: BreakdownItem[]; total: number } {\n  const withValue = series.map((s) => ({ s, value: s.current ?? latestOf(rows, s.key) ?? 0 }));\n  const denom = total ?? withValue.reduce((acc, w) => acc + w.value, 0);\n  const items = withValue.map(({ s, value }) => ({\n    key: s.key,\n    label: s.label,\n    color: s.color,\n    ...(s.unit ? { unit: s.unit } : {}),\n    value,\n    percent: denom > 0 ? Math.min(100, Math.max(0, (value / denom) * 100)) : 0,\n  }));\n  return { items, total: denom };\n}\n\nexport function mergeSeries(\n  series: ResolvedSeries[],\n  pointsBySeries: (TimeseriesPoint[] | undefined)[],\n): MergedRow[] {\n  const rows = new Map<string, MergedRow>();\n  series.forEach((s, i) => {\n    for (const p of pointsBySeries[i] ?? []) {\n      const row = rows.get(p.at) ?? { at: p.at };\n      row[s.key] = s.transform ? s.transform(p.value) : p.value;\n      rows.set(p.at, row);\n    }\n  });\n  return [...rows.values()].sort((a, b) => a.at.localeCompare(b.at));\n}\n"],"mappings":";;AAiGA,IAAM,iBAAiB;CACrB;CACA;CACA;CACA;AACF;AAEA,SAAS,aAAa,OAAuB;CAC3C,OAAO,eAAe,QAAQ,eAAe,WAAW,eAAe;AACzE;;AAeA,SAAgB,cAAc,OAA+C;CAC3E,MAAM,OAAO,MAAM,WAAW;CAE9B,QADa,MAAM,WAAW,MAAM,MAAM,CAAC,EAAE,IAAI,MAAM,IAAI,CAAC,IAAI,CAAC,GAAA,CACrD,KAAK,GAAG,OAAO;EACzB,KAAK,EAAE;EACP,KAAK,OAAO,EAAE;EACd,OAAO,EAAE,SAAS,EAAE;EACpB,OAAO,EAAE,SAAS,aAAa,CAAC;EAChC,GAAI,EAAE,QAAQ,MAAM,OAAO,EAAE,MAAM,EAAE,QAAQ,MAAM,KAAK,IAAI,CAAC;EAC7D,GAAI,EAAE,YAAY,EAAE,WAAW,EAAE,UAAU,IAAI,CAAC;EAChD,GAAI,EAAE,OAAO,EAAE,MAAM,EAAE,KAAK,IAAI,CAAC;EACjC,GAAI,EAAE,YAAY,KAAA,IAAY,EAAE,SAAS,EAAE,QAAQ,IAAI,CAAC;CAC1D,EAAE;AACJ;AAqBA,SAAgB,iBACd,QACA,MACA,OAC2C;CAC3C,MAAM,YAAY,OAAO,KAAK,OAAO;EAAE;EAAG,OAAO,EAAE,WAAW,SAAS,MAAM,EAAE,GAAG,KAAK;CAAE,EAAE;CAC3F,MAAM,QAAQ,SAAS,UAAU,QAAQ,KAAK,MAAM,MAAM,EAAE,OAAO,CAAC;CASpE,OAAO;EAAE,OARK,UAAU,KAAK,EAAE,GAAG,aAAa;GAC7C,KAAK,EAAE;GACP,OAAO,EAAE;GACT,OAAO,EAAE;GACT,GAAI,EAAE,OAAO,EAAE,MAAM,EAAE,KAAK,IAAI,CAAC;GACjC;GACA,SAAS,QAAQ,IAAI,KAAK,IAAI,KAAK,KAAK,IAAI,GAAI,QAAQ,QAAS,GAAG,CAAC,IAAI;EAC3E,EACS;EAAO,OAAO;CAAM;AAC/B;AAEA,SAAgB,YACd,QACA,gBACa;CACb,MAAM,uBAAO,IAAI,IAAuB;CACxC,OAAO,SAAS,GAAG,MAAM;EACvB,KAAK,MAAM,KAAK,eAAe,MAAM,CAAC,GAAG;GACvC,MAAM,MAAM,KAAK,IAAI,EAAE,EAAE,KAAK,EAAE,IAAI,EAAE,GAAG;GACzC,IAAI,EAAE,OAAO,EAAE,YAAY,EAAE,UAAU,EAAE,KAAK,IAAI,EAAE;GACpD,KAAK,IAAI,EAAE,IAAI,GAAG;EACpB;CACF,CAAC;CACD,OAAO,CAAC,GAAG,KAAK,OAAO,CAAC,CAAC,CAAC,MAAM,GAAG,MAAM,EAAE,GAAG,cAAc,EAAE,EAAE,CAAC;AACnE"}
+{"version":3,"file":"TimeseriesPanel.model.js","names":[],"sources":["../../src/data/TimeseriesPanel.model.ts"],"sourcesContent":["import type { StaticIconComponent } from \"./Icon\";\nimport { latestOf } from \"./TimeseriesPanel.axes\";\n\nexport interface TimeseriesPoint {\n  at: string;\n  value: number;\n}\n\nexport interface TimeseriesResponse {\n  id: string;\n  points: TimeseriesPoint[];\n}\n\n/**\n * One series as the metrics stream serves it. `source` is the id a panel\n * requested; one requested id can expand into several series (a profile\n * grouped by pod, say), each with its own `id` (`<source>#<labels>`) and\n * `labels`. For a plain metric id, `id === source`.\n */\nexport interface TimeseriesServerSeries {\n  id: string;\n  source: string;\n  label?: string;\n  labels?: Record<string, string>;\n  /** A `formatUnit` key, used when the panel series names no unit. */\n  unit?: string;\n  points: TimeseriesPoint[];\n}\n\n/** What a {@link SeriesLoader} receives from the widget polling it. */\nexport interface SeriesLoadContext {\n  /** The widget's look-back window, e.g. \"1h\". */\n  range: string;\n  /** Aborted when the query is cancelled, e.g. the widget unmounts mid-request. */\n  signal: AbortSignal;\n}\n\n/**\n * Loads a series directly, instead of the widget requesting `baseUrl + id`\n * through its `fetcher`. Called again whenever the range changes and on every\n * poll.\n */\nexport type SeriesLoader = (ctx: SeriesLoadContext) => Promise<TimeseriesResponse>;\n\n/**\n * One metric plotted on a panel. Its request URL is `baseUrl + id`, unless a\n * `load` function supplies the data.\n */\nexport interface TimeseriesSeries {\n  /**\n   * Metric id appended to the panel's baseUrl, e.g. \"sqlserver.iops.read\".\n   * With `load`, the id is the series' cache identity instead: loaded series\n   * are cached under `[\"timeseries\", \"load\", id, range]`, so it must be unique\n   * per data source (two series sharing an id share one cached response).\n   */\n  id: string;\n  /** Loads the series' points; when set, `baseUrl` and `fetcher` are not used. */\n  load?: SeriesLoader;\n  /** Tooltip/legend label; defaults to the `labels` values, then the id. */\n  label?: string;\n  /** The series' label set, e.g. `{ pod: \"api\" }`; its values label the series when `label` is unset. */\n  labels?: Record<string, string>;\n  /**\n   * The requested id this series was expanded from, when one id answers with\n   * several series (see {@link TimeseriesServerSeries}). Unset on requested series.\n   */\n  source?: string;\n  /**\n   * Maps each point's value before plotting, e.g. writes pass `(v) => -v` to\n   * render below the zero axis. Identity when omitted.\n   */\n  transform?: (value: number) => number;\n  /**\n   * Stroke/fill override as a CSS color value or a Tailwind color class.\n   * Defaults cycle a small palette by index.\n   */\n  color?: string;\n  /**\n   * Grafana-style unit key for this series' readout/tooltip. Falls back to the\n   * panel-level `unit`.\n   */\n  unit?: string;\n  /**\n   * Instantaneous value for the `breakdown` variant. When omitted, the\n   * breakdown falls back to the latest polled point.\n   */\n  current?: number;\n}\n\n/** A horizontal marker line at a fixed value, e.g. a static capacity. */\nexport interface TimeseriesReferenceLine {\n  value: number;\n  /** Legend label, e.g. \"capacity\". */\n  label: string;\n  /** CSS color value or Tailwind color class; defaults to the muted foreground. */\n  color?: string;\n  /** Grafana-style unit key for the legend value; falls back to the panel `unit`. */\n  unit?: string;\n}\n\nexport interface TimeseriesPanelProps {\n  url?: string;\n  baseUrl?: string;\n  series?: TimeseriesSeries[];\n  title: string;\n  icon?: string | StaticIconComponent;\n  unit?: string;\n  range?: string;\n  refreshMs?: number;\n  height?: number;\n  variant?: \"area\" | \"line\" | \"stacked\" | \"breakdown\";\n  expandVariant?: \"area\" | \"line\" | \"stacked\";\n  total?: number;\n  /** Flat lines drawn across the time-series chart, e.g. a fixed capacity. */\n  referenceLines?: TimeseriesReferenceLine[];\n  expandable?: boolean;\n  fetcher?: (url: string) => Promise<TimeseriesResponse>;\n  className?: string;\n}\n\nconst SERIES_PALETTE = [\n  \"var(--chart-1, #3b82f6)\",\n  \"var(--chart-2, #ef4444)\",\n  \"var(--chart-3, #10b981)\",\n  \"var(--chart-4, #f59e0b)\",\n] as const;\n\nfunction paletteColor(index: number): string {\n  return SERIES_PALETTE[index % SERIES_PALETTE.length] ?? SERIES_PALETTE[0];\n}\n\n/** A series with its full request URL, resolved label, color, and unit. */\nexport interface ResolvedSeries {\n  key: string;\n  url: string;\n  label: string;\n  color: string;\n  unit?: string;\n  transform?: (value: number) => number;\n  load?: SeriesLoader;\n  current?: number;\n  labels?: Record<string, string>;\n  /** The requested id an expanded series came from; unset on requested series. */\n  source?: string;\n}\n\n/** The label-set values in key order, e.g. `{ pod: \"api\", ns: \"x\" }` → \"x, api\". */\nfunction labelValues(labels: Record<string, string> | undefined): string | undefined {\n  if (!labels) return undefined;\n  const values = Object.keys(labels)\n    .sort()\n    .map((key) => labels[key]);\n  return values.length > 0 ? values.join(\", \") : undefined;\n}\n\nfunction requestedSeries(props: TimeseriesPanelProps): TimeseriesSeries[] {\n  return props.series ?? (props.url ? [{ id: props.url }] : []);\n}\n\nfunction resolveEntry(\n  s: TimeseriesSeries,\n  index: number,\n  props: TimeseriesPanelProps,\n  servedUnit?: string,\n): ResolvedSeries {\n  const unit = s.unit ?? servedUnit ?? props.unit;\n  return {\n    key: s.id,\n    url: (props.baseUrl ?? \"\") + s.id,\n    label: s.label ?? labelValues(s.labels) ?? s.id,\n    color: s.color ?? paletteColor(index),\n    ...(unit ? { unit } : {}),\n    ...(s.transform ? { transform: s.transform } : {}),\n    ...(s.load ? { load: s.load } : {}),\n    ...(s.current !== undefined ? { current: s.current } : {}),\n    ...(s.labels ? { labels: s.labels } : {}),\n    ...(s.source ? { source: s.source } : {}),\n  };\n}\n\n/** Normalises the single-url and baseUrl+series forms to one list. */\nexport function resolveSeries(props: TimeseriesPanelProps): ResolvedSeries[] {\n  return requestedSeries(props).map((s, i) => resolveEntry(s, i, props));\n}\n\n/** The series a panel plots, index-aligned with each one's points (undefined while loading). */\nexport interface DisplaySeries {\n  series: ResolvedSeries[];\n  points: (TimeseriesPoint[] | undefined)[];\n}\n\n/**\n * Resolves what a panel plots from what its requested series were answered\n * with (`served`, index-aligned with the requested series; undefined while a\n * series is loading). A requested id answered by its own series alone keeps\n * the panel's label, color and `current`; an id that expanded into several\n * series plots each one, labelled by its `label` or label values. A series\n * without a unit of its own takes the served unit, then the panel `unit`.\n */\nexport function expandServedSeries(\n  props: TimeseriesPanelProps,\n  served: readonly (readonly TimeseriesServerSeries[] | undefined)[],\n): DisplaySeries {\n  const series: ResolvedSeries[] = [];\n  const points: (TimeseriesPoint[] | undefined)[] = [];\n  requestedSeries(props).forEach((requested, i) => {\n    const answer = served[i];\n    const [first] = answer ?? [];\n    if (!answer || !first || (answer.length === 1 && first.id === requested.id)) {\n      series.push(resolveEntry(requested, series.length, props, first?.unit));\n      points.push(answer ? (first?.points ?? []) : undefined);\n      return;\n    }\n    for (const s of answer) {\n      const expanded: TimeseriesSeries = {\n        id: s.id,\n        source: requested.id,\n        ...(s.label ? { label: s.label } : {}),\n        ...(s.labels ? { labels: s.labels } : {}),\n        ...(requested.unit ? { unit: requested.unit } : {}),\n        ...(requested.transform ? { transform: requested.transform } : {}),\n      };\n      series.push(resolveEntry(expanded, series.length, props, s.unit));\n      points.push(s.points);\n    }\n  });\n  return { series, points };\n}\n\n/** One legend/bar row of the breakdown variant. */\nexport interface BreakdownItem {\n  key: string;\n  label: string;\n  color: string;\n  unit?: string;\n  value: number;\n  percent: number;\n}\n\n/**\n * One row of the merged chart data: the timestamp in `at` plus each series'\n * value under its key.\n */\nexport interface MergedRow {\n  at: string;\n  [seriesKey: string]: string | number | undefined;\n}\n\nexport function resolveBreakdown(\n  series: ResolvedSeries[],\n  rows: MergedRow[],\n  total?: number,\n): { items: BreakdownItem[]; total: number } {\n  const withValue = series.map((s) => ({ s, value: s.current ?? latestOf(rows, s.key) ?? 0 }));\n  const denom = total ?? withValue.reduce((acc, w) => acc + w.value, 0);\n  const items = withValue.map(({ s, value }) => ({\n    key: s.key,\n    label: s.label,\n    color: s.color,\n    ...(s.unit ? { unit: s.unit } : {}),\n    value,\n    percent: denom > 0 ? Math.min(100, Math.max(0, (value / denom) * 100)) : 0,\n  }));\n  return { items, total: denom };\n}\n\nexport function mergeSeries(\n  series: ResolvedSeries[],\n  pointsBySeries: (TimeseriesPoint[] | undefined)[],\n): MergedRow[] {\n  const rows = new Map<string, MergedRow>();\n  series.forEach((s, i) => {\n    for (const p of pointsBySeries[i] ?? []) {\n      const row = rows.get(p.at) ?? { at: p.at };\n      row[s.key] = s.transform ? s.transform(p.value) : p.value;\n      rows.set(p.at, row);\n    }\n  });\n  return [...rows.values()].sort((a, b) => a.at.localeCompare(b.at));\n}\n"],"mappings":";;AAwHA,IAAM,iBAAiB;CACrB;CACA;CACA;CACA;AACF;AAEA,SAAS,aAAa,OAAuB;CAC3C,OAAO,eAAe,QAAQ,eAAe,WAAW,eAAe;AACzE;;AAkBA,SAAS,YAAY,QAAgE;CACnF,IAAI,CAAC,QAAQ,OAAO,KAAA;CACpB,MAAM,SAAS,OAAO,KAAK,MAAM,CAAC,CAC/B,KAAK,CAAC,CACN,KAAK,QAAQ,OAAO,IAAI;CAC3B,OAAO,OAAO,SAAS,IAAI,OAAO,KAAK,IAAI,IAAI,KAAA;AACjD;AAEA,SAAS,gBAAgB,OAAiD;CACxE,OAAO,MAAM,WAAW,MAAM,MAAM,CAAC,EAAE,IAAI,MAAM,IAAI,CAAC,IAAI,CAAC;AAC7D;AAEA,SAAS,aACP,GACA,OACA,OACA,YACgB;CAChB,MAAM,OAAO,EAAE,QAAQ,cAAc,MAAM;CAC3C,OAAO;EACL,KAAK,EAAE;EACP,MAAM,MAAM,WAAW,MAAM,EAAE;EAC/B,OAAO,EAAE,SAAS,YAAY,EAAE,MAAM,KAAK,EAAE;EAC7C,OAAO,EAAE,SAAS,aAAa,KAAK;EACpC,GAAI,OAAO,EAAE,KAAK,IAAI,CAAC;EACvB,GAAI,EAAE,YAAY,EAAE,WAAW,EAAE,UAAU,IAAI,CAAC;EAChD,GAAI,EAAE,OAAO,EAAE,MAAM,EAAE,KAAK,IAAI,CAAC;EACjC,GAAI,EAAE,YAAY,KAAA,IAAY,EAAE,SAAS,EAAE,QAAQ,IAAI,CAAC;EACxD,GAAI,EAAE,SAAS,EAAE,QAAQ,EAAE,OAAO,IAAI,CAAC;EACvC,GAAI,EAAE,SAAS,EAAE,QAAQ,EAAE,OAAO,IAAI,CAAC;CACzC;AACF;;AAGA,SAAgB,cAAc,OAA+C;CAC3E,OAAO,gBAAgB,KAAK,CAAC,CAAC,KAAK,GAAG,MAAM,aAAa,GAAG,GAAG,KAAK,CAAC;AACvE;;;;;;;;;AAgBA,SAAgB,mBACd,OACA,QACe;CACf,MAAM,SAA2B,CAAC;CAClC,MAAM,SAA4C,CAAC;CACnD,gBAAgB,KAAK,CAAC,CAAC,SAAS,WAAW,MAAM;EAC/C,MAAM,SAAS,OAAO;EACtB,MAAM,CAAC,SAAS,UAAU,CAAC;EAC3B,IAAI,CAAC,UAAU,CAAC,SAAU,OAAO,WAAW,KAAK,MAAM,OAAO,UAAU,IAAK;GAC3E,OAAO,KAAK,aAAa,WAAW,OAAO,QAAQ,OAAO,OAAO,IAAI,CAAC;GACtE,OAAO,KAAK,SAAU,OAAO,UAAU,CAAC,IAAK,KAAA,CAAS;GACtD;EACF;EACA,KAAK,MAAM,KAAK,QAAQ;GACtB,MAAM,WAA6B;IACjC,IAAI,EAAE;IACN,QAAQ,UAAU;IAClB,GAAI,EAAE,QAAQ,EAAE,OAAO,EAAE,MAAM,IAAI,CAAC;IACpC,GAAI,EAAE,SAAS,EAAE,QAAQ,EAAE,OAAO,IAAI,CAAC;IACvC,GAAI,UAAU,OAAO,EAAE,MAAM,UAAU,KAAK,IAAI,CAAC;IACjD,GAAI,UAAU,YAAY,EAAE,WAAW,UAAU,UAAU,IAAI,CAAC;GAClE;GACA,OAAO,KAAK,aAAa,UAAU,OAAO,QAAQ,OAAO,EAAE,IAAI,CAAC;GAChE,OAAO,KAAK,EAAE,MAAM;EACtB;CACF,CAAC;CACD,OAAO;EAAE;EAAQ;CAAO;AAC1B;AAqBA,SAAgB,iBACd,QACA,MACA,OAC2C;CAC3C,MAAM,YAAY,OAAO,KAAK,OAAO;EAAE;EAAG,OAAO,EAAE,WAAW,SAAS,MAAM,EAAE,GAAG,KAAK;CAAE,EAAE;CAC3F,MAAM,QAAQ,SAAS,UAAU,QAAQ,KAAK,MAAM,MAAM,EAAE,OAAO,CAAC;CASpE,OAAO;EAAE,OARK,UAAU,KAAK,EAAE,GAAG,aAAa;GAC7C,KAAK,EAAE;GACP,OAAO,EAAE;GACT,OAAO,EAAE;GACT,GAAI,EAAE,OAAO,EAAE,MAAM,EAAE,KAAK,IAAI,CAAC;GACjC;GACA,SAAS,QAAQ,IAAI,KAAK,IAAI,KAAK,KAAK,IAAI,GAAI,QAAQ,QAAS,GAAG,CAAC,IAAI;EAC3E,EACS;EAAO,OAAO;CAAM;AAC/B;AAEA,SAAgB,YACd,QACA,gBACa;CACb,MAAM,uBAAO,IAAI,IAAuB;CACxC,OAAO,SAAS,GAAG,MAAM;EACvB,KAAK,MAAM,KAAK,eAAe,MAAM,CAAC,GAAG;GACvC,MAAM,MAAM,KAAK,IAAI,EAAE,EAAE,KAAK,EAAE,IAAI,EAAE,GAAG;GACzC,IAAI,EAAE,OAAO,EAAE,YAAY,EAAE,UAAU,EAAE,KAAK,IAAI,EAAE;GACpD,KAAK,IAAI,EAAE,IAAI,GAAG;EACpB;CACF,CAAC;CACD,OAAO,CAAC,GAAG,KAAK,OAAO,CAAC,CAAC,CAAC,MAAM,GAAG,MAAM,EAAE,GAAG,cAAc,EAAE,EAAE,CAAC;AACnE"}

package/dist/data/WorkloadCard.cjs

@@ -161,7 +161,11 @@ function headerMetaItems(workload, typeLabel) {
 		items.push({
 			key: `meta-${i}`,
 			content: /* @__PURE__ */ (0, react_jsx_runtime.jsxs)(react_jsx_runtime.Fragment, { children: [
-				/* @__PURE__ */ (0, react_jsx_runtime.jsx)("span", {
+				item.icon ? /* @__PURE__ */ (0, react_jsx_runtime.jsx)(WorkloadIcon, {
+					icon: item.icon,
+					title: item.label,
+					className: "h-3.5 w-auto shrink-0"
+				}) : /* @__PURE__ */ (0, react_jsx_runtime.jsx)("span", {
 					className: "text-muted-foreground/70",
 					children: item.label
 				}),
@@ -185,7 +189,7 @@ function headerMetaItems(workload, typeLabel) {
 * Like the timeseries widgets it renders, it needs a react-query
 * `QueryClientProvider` above it.
 */
-function WorkloadCard({ workload, metrics, baseUrl, range = "1h", refreshMs = 5e3, expandable = true, headerActions, size = "md", variant = "default", fetcher, className }) {
+function WorkloadCard({ children, workload, metrics, baseUrl, range = "1h", refreshMs = 5e3, expandable = true, headerActions, size = "md", variant = "default", fetcher, className }) {
 	const [expanded, setExpanded] = (0, react.useState)(false);
 	const typeLabel = require_WorkloadCard_model.workloadTypeLabel(workload);
 	const statusLabel = require_WorkloadCard_model.workloadStatusLabel(workload.status);
@@ -280,7 +284,7 @@ function WorkloadCard({ workload, metrics, baseUrl, range = "1h", refreshMs = 5e
 					]
 				})]
 			}),
-			hasMetric(metrics) ? /* @__PURE__ */ (0, react_jsx_runtime.jsxs)("div", {
+			children !== void 0 ? children : hasMetric(metrics) ? /* @__PURE__ */ (0, react_jsx_runtime.jsxs)("div", {
 				className: require_utils.cn("grid items-start gap-3", sizeClasses.metricVariant === "cell" ? sizeClasses.metricGrid : require_utils.cn(metricGridClass(panelMetrics.length), sizeClasses.metricGrid)),
 				children: [
 					metrics.cpu ? /* @__PURE__ */ (0, react_jsx_runtime.jsx)(require_TimeseriesCoreBars.TimeseriesCoreBars, {