50:I[707087,["/_next/static/immutable/chunks/3arlv5bvukoo2.js","/_next/static/immutable/chunks/39v64hmfyo-sr.js","/_next/static/immutable/chunks/2nvof3-29tvc3.js","/_next/static/immutable/chunks/3tjobt77z_9dj.js","/_next/static/immutable/chunks/04j_o97cgxn2x.js","/_next/static/immutable/chunks/3upr08c9vtj8w.js","/_next/static/immutable/chunks/1ww0328si-u8x.js","/_next/static/immutable/chunks/11mfl5ymqld9-.js","/_next/static/immutable/chunks/2xxcqy6ppds3l.js","/_next/static/immutable/chunks/3j06ow7w40nxu.js","/_next/static/immutable/chunks/31nn7jwsjvqii.js","/_next/static/immutable/chunks/43_s7jweyypoh.js","/_next/static/immutable/chunks/0p6vao205o1jc.js","/_next/static/immutable/chunks/1_kyvgkyokw92.js","/_next/static/immutable/chunks/1lo-zn37dolb5.js","/_next/static/immutable/chunks/1v8k6yxw1rg0u.js"],"RegistryDependencies"] 51:I[314491,["/_next/static/immutable/chunks/3arlv5bvukoo2.js","/_next/static/immutable/chunks/39v64hmfyo-sr.js","/_next/static/immutable/chunks/2nvof3-29tvc3.js","/_next/static/immutable/chunks/3tjobt77z_9dj.js","/_next/static/immutable/chunks/04j_o97cgxn2x.js","/_next/static/immutable/chunks/3upr08c9vtj8w.js","/_next/static/immutable/chunks/1ww0328si-u8x.js","/_next/static/immutable/chunks/11mfl5ymqld9-.js","/_next/static/immutable/chunks/2xxcqy6ppds3l.js","/_next/static/immutable/chunks/3j06ow7w40nxu.js","/_next/static/immutable/chunks/31nn7jwsjvqii.js","/_next/static/immutable/chunks/43_s7jweyypoh.js","/_next/static/immutable/chunks/0p6vao205o1jc.js","/_next/static/immutable/chunks/1_kyvgkyokw92.js","/_next/static/immutable/chunks/1lo-zn37dolb5.js","/_next/static/immutable/chunks/1v8k6yxw1rg0u.js"],"FilesView"] 52:T582,/* Room under the plot for the category labels, which hang below each column. */ .cr-bar-chart__plot { margin-bottom: 22px; } .cr-bar-chart__bars { position: absolute; inset: 0; display: flex; align-items: flex-end; } .cr-bar-chart__column { position: relative; display: flex; flex: 1; flex-direction: column; align-items: center; justify-content: flex-end; min-width: 0; height: 100%; } /* First series at the bottom. */ .cr-bar-chart__stack { display: flex; flex-direction: column-reverse; gap: 2px; width: min(60%, 28px); min-height: 2px; overflow: hidden; border-radius: 6px 6px 0 0; } .cr-bar-chart__bar { flex-basis: 0; } .cr-bar-chart__column[data-dim] .cr-bar-chart__bar { opacity: 0.32; } .cr-bar-chart__value { margin-bottom: var(--cr-space-1); font-size: 11px; font-weight: var(--cr-font-weight-semibold); visibility: hidden; } .cr-bar-chart__column:hover .cr-bar-chart__value, .cr-bar-chart__column[data-highlight] .cr-bar-chart__value { visibility: visible; } .cr-bar-chart__column:hover .cr-bar-chart__bar { opacity: 1; } .cr-bar-chart__label { position: absolute; top: 100%; padding-top: 6px; color: var(--cr-color-text-muted); font-size: 11px; white-space: nowrap; } .cr-bar-chart__column[data-highlight] .cr-bar-chart__label { color: var(--cr-color-text-default); font-weight: var(--cr-font-weight-semibold); } 53:Td4a,import { ChartLegend, ChartTable, formatter, niceScale, seriesColor, type ChartTone, type ValueFormat } from '@/lib/creance/chart'; import { cx } from '@/lib/creance/cx'; import './BarChart.css'; export interface BarSeries { name: string; /** One value per label. */ values: number[]; /** `danger` is red, for a failure. */ tone?: ChartTone; } export interface BarChartProps extends ValueFormat { /** The categories along the bottom. */ labels: string[]; /** One series draws plain bars. More than one stacks them, first at the bottom. */ series: BarSeries[]; /** What the chart shows, for screen readers and as the table's caption: "Runs per day". */ label: string; /** What the labels are, as the heading of the table's first column. Default "Category". */ axisLabel?: string; /** Index of one bar to pick out in ink with its value shown. The others turn grey. Single series only. */ highlight?: number; /** Height in pixels. Default 200. */ height?: number; /** Names the series. Default true when there is more than one. */ legend?: boolean; className?: string; } /** Amounts across categories. Hovering a bar shows its value; the whole chart is also a table for screen readers. */ export function BarChart({ labels, series, label, axisLabel = 'Category', highlight, height = 200, legend = series.length > 1, className, ...format }: BarChartProps) { const fmt = formatter(format); const totals = labels.map((_, i) => series.reduce((sum, s) => sum + Math.max(s.values[i] ?? 0, 0), 0)); const scale = niceScale(Math.max(...totals, 0), 3); const stacked = series.length > 1; // Ink steps down through the series that are not failures. const colors = series.map((s, i) => seriesColor(series.slice(0, i).filter((b) => b.tone !== 'danger').length, s.tone)); return (

{legend && ({ name: s.name, color: colors[i]! }))} />} s.name), ...(stacked ? ['Total'] : [])]} rows={labels.map((name, i) => [name, ...series.map((s) => fmt(s.values[i] ?? 0)), ...(stacked ? [fmt(totals[i]!)] : [])])} /> ); } 4f:["$","div",null,{"className":"mt-3 flex min-h-0 min-w-0 flex-1 flex-col gap-3","children":[["$","div",null,{"className":"flex shrink-0 items-start gap-3","children":[["$","div",null,{"className":"flex max-h-28 min-w-0 flex-1 flex-wrap items-center gap-2 overflow-y-auto","children":[null,["$","$L50",null,{"namespace":"@creance","registryDependencies":["https://creance.pages.dev/r/creance-base.json","https://creance.pages.dev/r/creance-chart.json"]}]]}],null]}],["$","$L51",null,{"files":[{"path":"bar-chart/BarChart.css","content":"$52","type":"registry:file","target":"@components/creance/bar-chart/BarChart.css"},{"path":"bar-chart/BarChart.tsx","content":"$53","type":"registry:ui","target":"@components/creance/bar-chart/BarChart.tsx"}],"className":"h-[70svh] min-h-80"}]]}]