@cascivo/charts 0.16.0 → 0.17.0

package/dist/charts.css

@@ -1,2 +1,2 @@
-@layer cascivo.component{._frame_1kt6d_2{inline-size:100%;min-inline-size:0;position:relative}._frame_1kt6d_2>svg{block-size:auto;max-inline-size:100%}@media (prefers-reduced-motion:no-preference){._frame_1kt6d_2>svg{animation:_cascivo-chart-in_1kt6d_1 var(--cascivo-chart-anim-dur,.32s) var(--cascivo-chart-anim-ease,ease-out) both}@keyframes _cascivo-chart-in_1kt6d_1{0%{opacity:0;transform:translateY(4px)}to{opacity:1;transform:translateY(0)}}._frame_1kt6d_2 svg :is(path,rect,circle,line)[data-series],._frame_1kt6d_2 svg path[data-link],._frame_1kt6d_2 svg path[data-depth],._frame_1kt6d_2 svg rect[data-day]{transition-property:var(--cascivo-chart-anim-props,opacity, fill, fill-opacity);transition-duration:var(--cascivo-chart-anim-dur,.24s);transition-timing-function:var(--cascivo-chart-anim-ease,ease)}._frame_1kt6d_2[data-no-anim]>svg{animation:none}._frame_1kt6d_2[data-no-anim] svg :is(path,rect,circle,line)[data-series],._frame_1kt6d_2[data-no-anim] svg path[data-link],._frame_1kt6d_2[data-no-anim] svg path[data-depth],._frame_1kt6d_2[data-no-anim] svg rect[data-day]{transition:none}}._fallback_1kt6d_67{clip-path:inset(50%);white-space:nowrap;block-size:1px;inline-size:1px;position:absolute;inset-inline-start:-9999px;overflow:hidden}._legend_1pign_2{gap:var(--cascivo-space-2);padding-block:var(--cascivo-space-2);flex-wrap:wrap;display:flex}._item_1pign_9{align-items:center;gap:var(--cascivo-space-1);padding:var(--cascivo-space-1) var(--cascivo-space-2);border:1px solid var(--cascivo-color-border);border-radius:var(--cascivo-radius-sm);cursor:pointer;font-size:var(--cascivo-text-sm);color:var(--cascivo-color-text);transition:opacity var(--cascivo-duration-150,.15s) ease;background:0 0;display:flex}._item_1pign_9[data-state=off]{opacity:.4}._swatch_1pign_27{border-radius:2px;flex-shrink:0;block-size:12px;inline-size:12px;display:inline-block}._kpi_nrb8p_7{gap:var(--cascivo-space-2);padding:var(--cascivo-kpi-padding,var(--cascivo-space-4));border-radius:var(--cascivo-radius-surface);border:1px solid var(--cascivo-color-border);background:var(--cascivo-color-surface);flex-direction:column;min-inline-size:0;display:flex}._head_nrb8p_19{justify-content:space-between;align-items:center;gap:var(--cascivo-space-2);min-inline-size:0;display:flex}._label_nrb8p_27{font-size:var(--cascivo-text-sm);color:var(--cascivo-color-foreground-muted);overflow-wrap:anywhere;min-inline-size:0}._valueRow_nrb8p_34{align-items:flex-end;gap:var(--cascivo-space-2);min-inline-size:0;display:flex}._value_nrb8p_34{font-size:var(--cascivo-text-2xl);font-weight:var(--cascivo-font-bold);line-height:var(--cascivo-leading-none);color:var(--cascivo-color-foreground);font-variant-numeric:tabular-nums}._delta_nrb8p_49{font-size:var(--cascivo-text-sm);font-weight:var(--cascivo-font-medium);white-space:nowrap;color:var(--cascivo-color-foreground-muted)}._delta_nrb8p_49[data-sentiment=good]{color:var(--cascivo-color-success-foreground)}._delta_nrb8p_49[data-sentiment=bad]{color:var(--cascivo-color-destructive-foreground)}}
+@layer cascivo.component{._frame_1gm0a_2{flex:auto;min-block-size:0;inline-size:100%;min-inline-size:0;position:relative}._frame_1gm0a_2>svg{block-size:auto;max-block-size:100%;max-inline-size:100%}@media (prefers-reduced-motion:no-preference){._frame_1gm0a_2>svg{animation:_cascivo-chart-in_1gm0a_1 var(--cascivo-chart-anim-dur,.32s) var(--cascivo-chart-anim-ease,ease-out) both}@keyframes _cascivo-chart-in_1gm0a_1{0%{opacity:0;transform:translateY(4px)}to{opacity:1;transform:translateY(0)}}._frame_1gm0a_2 svg :is(path,rect,circle,line)[data-series],._frame_1gm0a_2 svg path[data-link],._frame_1gm0a_2 svg path[data-depth],._frame_1gm0a_2 svg rect[data-day]{transition-property:var(--cascivo-chart-anim-props,opacity, fill, fill-opacity);transition-duration:var(--cascivo-chart-anim-dur,.24s);transition-timing-function:var(--cascivo-chart-anim-ease,ease)}._frame_1gm0a_2[data-no-anim]>svg{animation:none}._frame_1gm0a_2[data-no-anim] svg :is(path,rect,circle,line)[data-series],._frame_1gm0a_2[data-no-anim] svg path[data-link],._frame_1gm0a_2[data-no-anim] svg path[data-depth],._frame_1gm0a_2[data-no-anim] svg rect[data-day]{transition:none}}._fallback_1gm0a_78{clip-path:inset(50%);white-space:nowrap;block-size:1px;inline-size:1px;position:absolute;inset-inline-start:-9999px;overflow:hidden}._legend_1pign_2{gap:var(--cascivo-space-2);padding-block:var(--cascivo-space-2);flex-wrap:wrap;display:flex}._item_1pign_9{align-items:center;gap:var(--cascivo-space-1);padding:var(--cascivo-space-1) var(--cascivo-space-2);border:1px solid var(--cascivo-color-border);border-radius:var(--cascivo-radius-sm);cursor:pointer;font-size:var(--cascivo-text-sm);color:var(--cascivo-color-text);transition:opacity var(--cascivo-duration-150,.15s) ease;background:0 0;display:flex}._item_1pign_9[data-state=off]{opacity:.4}._swatch_1pign_27{border-radius:2px;flex-shrink:0;block-size:12px;inline-size:12px;display:inline-block}._meter_cns3q_2{inline-size:100%;min-inline-size:0}._svg_cns3q_9{block-size:auto;inline-size:100%;max-inline-size:100%;display:block}._label_cns3q_16{font-size:var(--cascivo-text-xs);color:var(--cascivo-color-foreground-muted);margin-block-start:var(--cascivo-space-1)}._gaugeLabel_cns3q_22{text-align:center;font-size:var(--cascivo-text-sm);color:var(--cascivo-color-foreground-muted)}._fill_cns3q_28{transform-origin:0;transition:transform .4s}@media (prefers-reduced-motion:reduce){._fill_cns3q_28{transition:none}}._kpi_nrb8p_7{gap:var(--cascivo-space-2);padding:var(--cascivo-kpi-padding,var(--cascivo-space-4));border-radius:var(--cascivo-radius-surface);border:1px solid var(--cascivo-color-border);background:var(--cascivo-color-surface);flex-direction:column;min-inline-size:0;display:flex}._head_nrb8p_19{justify-content:space-between;align-items:center;gap:var(--cascivo-space-2);min-inline-size:0;display:flex}._label_nrb8p_27{font-size:var(--cascivo-text-sm);color:var(--cascivo-color-foreground-muted);overflow-wrap:anywhere;min-inline-size:0}._valueRow_nrb8p_34{align-items:flex-end;gap:var(--cascivo-space-2);min-inline-size:0;display:flex}._value_nrb8p_34{font-size:var(--cascivo-text-2xl);font-weight:var(--cascivo-font-bold);line-height:var(--cascivo-leading-none);color:var(--cascivo-color-foreground);font-variant-numeric:tabular-nums}._delta_nrb8p_49{font-size:var(--cascivo-text-sm);font-weight:var(--cascivo-font-medium);white-space:nowrap;color:var(--cascivo-color-foreground-muted)}._delta_nrb8p_49[data-sentiment=good]{color:var(--cascivo-color-success-foreground)}._delta_nrb8p_49[data-sentiment=bad]{color:var(--cascivo-color-destructive-foreground)}}
 /*$vite$:1*/

package/dist/index.d.ts

@@ -55,9 +55,20 @@ interface TimeScale {
   map(value: Date): number;
   invert(position: number): Date;
   ticks(count?: number): Date[];
-  tickInterval(): 'minute' | 'hour' | 'day' | 'week' | 'month' | 'quarter' | 'year';
-  tickFormat(): Intl.DateTimeFormatOptions;
+  /**
+   * The unit the ticks step in at the given density. Pass the same `count` you pass to
+   * {@link TimeScale.ticks} — a 24-hour domain steps in hours at `count: 6` and in days at
+   * `count: 1`, so a hardcoded density would disagree with the ticks actually drawn.
+   */
+  tickInterval(count?: number): IntervalUnit;
+  /**
+   * `Intl.DateTimeFormat` options that make the ticks at this density distinguishable.
+   * Sub-day steps format as times, day/week steps as dates, and so on — formatting a
+   * 3-hourly axis with a day format renders the same string on every tick.
+   */
+  tickFormat(count?: number): Intl.DateTimeFormatOptions;
 }
+type IntervalUnit = 'minute' | 'hour' | 'day' | 'week' | 'month' | 'quarter' | 'year';
 declare function timeScale(domain: [Date, Date], range: [number, number]): TimeScale;
 type Point = readonly [x: number, y: number];
 /**
@@ -912,8 +923,17 @@ interface ChartFrameProps {
    * container (`max-inline-size: 100%`) so it can never overflow its card.
    */
   width?: number | undefined;
-  /** SVG height in px. Defaults to 300 (48 in `plain` mode). Unlike `width`, height
-   * does not track the container — set it to change the chart's aspect. */
+  /**
+   * Height of the **plot area** in px — the SVG only. The title, description and legend
+   * render OUTSIDE it (the legend is a sibling of this frame), so the rendered block is
+   * taller than `height` by whatever chrome the chart shows. Sizing a card to `height`
+   * exactly is what clips a legend.
+   *
+   * **Omit it (the default) for a responsive chart.** Like `width`, height now tracks the
+   * container via `ResizeObserver`: in a parent with a definite block size the plot fills
+   * the space left over after the legend, and in an auto-height parent it falls back to
+   * 300px. Set it only to force a fixed aspect.
+   */
   height?: number | undefined;
   fallback?: ReactNode;
   children: (size: {
@@ -1610,6 +1630,19 @@ interface AreaChartSeries<Datum> {
   color?: string;
   /** Which y-axis this series is measured against (ignored when `stacked`). Default 'left'. */
   axis?: 'left' | 'right';
+  /**
+   * Draw this series as a stroked line with no fill.
+   *
+   * The case this exists for: a dual-axis chart plotting requests (left) against errors
+   * (right). As two areas the smaller series hides behind the larger one, and `fill` is
+   * chart-level so it cannot make just the second translucent. `ComboChart` does not help —
+   * it is bar+line, not area+line (2026-08-08 report A).
+   *
+   * Ignored when `stacked`, where every series must be an area for the stack to read.
+   *
+   * @defaultValue `'area'`
+   */
+  type?: 'area' | 'line';
   /**
    * Per-series Y accessor. Overrides the chart-level `y` for this series only —
    * use it to plot two series from one shared `data` row against different fields
@@ -1966,11 +1999,10 @@ declare function ScatterChart({
 interface SparklineBaseProps {
   data: readonly number[];
   /**
-   * Fixed SVG width in px. ⚠ **Omit for a responsive chart** — the chart fills and tracks
-   * its container via a ResizeObserver; there is no correct pixel number in a responsive
-   * grid. A fixed width is clamped to the container (max-inline-size: 100%) so it can never
-   * overflow its card, but it also stops the chart growing. `useChartSize` is NOT needed for
-   * this — charts call it internally.
+   * SVG width in px. **This chart is fixed-width by default** — it is a compact, inline
+   * chart meant to sit in a table cell or beside a label, so omitting `width` gives you
+   * 120px rather than a container-filling chart. Pass a number to change it. The
+   * catalogue-wide "omit for a responsive chart" note does not apply to this chart.
    *
    * @defaultValue `80`
    * @see the component manifest
@@ -2049,7 +2081,7 @@ declare function Meter({
   label,
   variant,
   thresholds,
-  width,
+  width: fixedWidth,
   height
 }: MeterProps): import("react").JSX.Element;
 interface KpiProps {
@@ -2478,11 +2510,10 @@ interface BulletProps {
   min?: number;
   max?: number;
   /**
-   * Fixed SVG width in px. ⚠ **Omit for a responsive chart** — the chart fills and tracks
-   * its container via a ResizeObserver; there is no correct pixel number in a responsive
-   * grid. A fixed width is clamped to the container (max-inline-size: 100%) so it can never
-   * overflow its card, but it also stops the chart growing. `useChartSize` is NOT needed for
-   * this — charts call it internally.
+   * SVG width in px. **This chart is fixed-width by default** — it is a compact, inline
+   * chart meant to sit in a table cell or beside a label, so omitting `width` gives you
+   * 300px rather than a container-filling chart. Pass a number to change it. The
+   * catalogue-wide "omit for a responsive chart" note does not apply to this chart.
    *
    * @defaultValue `300`
    * @see the component manifest
@@ -3053,4 +3084,4 @@ declare function Gauge({
   className,
   plain
 }: GaugeProps): import("react").JSX.Element;
-export { AXIS_CHAR_PX, AXIS_LINE_PX, AggOp, AggregateSpec, AngleBand, Annotation, AnnotationContext, AnnotationScale, AreaChart, AreaChartProps, AreaChartSeries, AreaDecimateOptions, Axis, AxisProps, BandScale, BarChart, BarChartProps, BarChartSeries, Bin, BoundStream, BoxStats, Boxplot, BoxplotProps, BoxplotSeries, Brush, BrushProps, BubbleChart, BubbleChartProps, BubbleDatum, BubbleSeries, Bullet, BulletProps, CalendarHeatmap, CalendarHeatmapDatum, CalendarHeatmapProps, Candlestick, CandlestickDatum, CandlestickProps, CanvasLayer, CanvasLayerProps, CanvasPaint, CanvasSize, CategoryDatum, CategoryMapping, ChartDefs, ChartDefsProps, ChartFrame, ChartFrameProps, ChartSize, ComboChart, ComboChartBar, ComboChartPoint, ComboChartProps, Curve, DEFAULT_MARGINS, DataLabel, DataLabelProps, DataZoom, DataZoomProps, DecimateMethod, DecimateOptions, DefSeries, EncodeMapping, EncodedResult, EncodedSeries, FillKind, Funnel, FunnelProps, FunnelStage, Gauge, GaugeProps, GaugeThreshold, Glyph, GlyphProps, GlyphShape, GridLines, GridLinesProps, Heatmap, HeatmapDatum, HeatmapProps, HierNode, Histogram, HistogramBin, HistogramProps, Kpi, KpiProps, LabelOptions, LaidLink, LaidNode, Legend, LegendProps, LegendSeries, LineChart, LineChartProps, LineChartSeries, LinearScale, LogScale, Meter, MeterProps, MeterThresholds, PLAIN_MARGINS, PartitionedNode, PatternKind, PieChart, PieChartDatum, PieChartProps, Point, Polar, PolarDatum, PolarProps, Pt, Radar, RadarProps, RadarSeries, RadialBar, RadialBarDatum, RadialBarProps, RampKind, Rect, RegressionResult, RegressionType, ResolvedLabelOptions, Row, Sankey, SankeyLayout, SankeyLink, SankeyNode, SankeyOptions, SankeyProps, ScatterChart, ScatterChartProps, ScatterChartSeries, ScatterDatum, Sparkline, SparklineProps, StackedRow, StackedSegment, Stream, StreamDecimate, StreamOffset, StreamProps, StreamSeries, StreamSeriesOptions, StreamSource, Sunburst, SunburstProps, SyncGroup, Text, TextProps, TimeScale, Toolbox, ToolboxOptions, ToolboxProps, Treemap, TreemapDatum, TreemapNode, TreemapProps, TreemapRect, Vec, VisualChannel, VisualMap, VisualMapOptions, VisualMapProps, VisualMode, VisualResult, ZoomConfig, _syncGroupCount, aggregate, angleBand, annotationSummary, arcPath, areaPath, autoLabelStride, bandScale, bin, binValues, bindStream, boxStats, cellPath, decimate$1 as decimate, divergingRamp, download, encode, encodeCategory, extent, fillFor, filter, getSyncGroup, glyphPath, gradientId, isZoomed, leftMarginForLabels, linePath, linearScale, linkPath, logScale, lttb, mapVisual, maxDepth, minmax, nearestIndex, niceTicks, panWindow, partition, patternId, pieceIndex, polarPoint, quantize, radiusScale, rampLightness, rampOf, rampStops, regression, releaseSyncGroup, renderAnnotation, renderAnnotations, resolveColor, resolveLabels, rightMarginForLabels, sankeyLayout, sequentialRamp, serializeSvg, sort, splitDefined, sqrtScale, squarify, stackSeries, streamExtent, streamLayout, sumValue, svgToPngBlob, timeScale, toStackedSeries, useChartSize, useStreamSeries, visualVisible, voronoiCells, voronoiFind, wrapText, zoomWindow };
+export { AXIS_CHAR_PX, AXIS_LINE_PX, AggOp, AggregateSpec, AngleBand, Annotation, AnnotationContext, AnnotationScale, AreaChart, AreaChartProps, AreaChartSeries, AreaDecimateOptions, Axis, AxisProps, BandScale, BarChart, BarChartProps, BarChartSeries, Bin, BoundStream, BoxStats, Boxplot, BoxplotProps, BoxplotSeries, Brush, BrushProps, BubbleChart, BubbleChartProps, BubbleDatum, BubbleSeries, Bullet, BulletProps, CalendarHeatmap, CalendarHeatmapDatum, CalendarHeatmapProps, Candlestick, CandlestickDatum, CandlestickProps, CanvasLayer, CanvasLayerProps, CanvasPaint, CanvasSize, CategoryDatum, CategoryMapping, ChartDefs, ChartDefsProps, ChartFrame, ChartFrameProps, ChartSize, ComboChart, ComboChartBar, ComboChartPoint, ComboChartProps, Curve, DEFAULT_MARGINS, DataLabel, DataLabelProps, DataZoom, DataZoomProps, DecimateMethod, DecimateOptions, DefSeries, EncodeMapping, EncodedResult, EncodedSeries, FillKind, Funnel, FunnelProps, FunnelStage, Gauge, GaugeProps, GaugeThreshold, Glyph, GlyphProps, GlyphShape, GridLines, GridLinesProps, Heatmap, HeatmapDatum, HeatmapProps, HierNode, Histogram, HistogramBin, HistogramProps, IntervalUnit, Kpi, KpiProps, LabelOptions, LaidLink, LaidNode, Legend, LegendProps, LegendSeries, LineChart, LineChartProps, LineChartSeries, LinearScale, LogScale, Meter, MeterProps, MeterThresholds, PLAIN_MARGINS, PartitionedNode, PatternKind, PieChart, PieChartDatum, PieChartProps, Point, Polar, PolarDatum, PolarProps, Pt, Radar, RadarProps, RadarSeries, RadialBar, RadialBarDatum, RadialBarProps, RampKind, Rect, RegressionResult, RegressionType, ResolvedLabelOptions, Row, Sankey, SankeyLayout, SankeyLink, SankeyNode, SankeyOptions, SankeyProps, ScatterChart, ScatterChartProps, ScatterChartSeries, ScatterDatum, Sparkline, SparklineProps, StackedRow, StackedSegment, Stream, StreamDecimate, StreamOffset, StreamProps, StreamSeries, StreamSeriesOptions, StreamSource, Sunburst, SunburstProps, SyncGroup, Text, TextProps, TimeScale, Toolbox, ToolboxOptions, ToolboxProps, Treemap, TreemapDatum, TreemapNode, TreemapProps, TreemapRect, Vec, VisualChannel, VisualMap, VisualMapOptions, VisualMapProps, VisualMode, VisualResult, ZoomConfig, _syncGroupCount, aggregate, angleBand, annotationSummary, arcPath, areaPath, autoLabelStride, bandScale, bin, binValues, bindStream, boxStats, cellPath, decimate$1 as decimate, divergingRamp, download, encode, encodeCategory, extent, fillFor, filter, getSyncGroup, glyphPath, gradientId, isZoomed, leftMarginForLabels, linePath, linearScale, linkPath, logScale, lttb, mapVisual, maxDepth, minmax, nearestIndex, niceTicks, panWindow, partition, patternId, pieceIndex, polarPoint, quantize, radiusScale, rampLightness, rampOf, rampStops, regression, releaseSyncGroup, renderAnnotation, renderAnnotations, resolveColor, resolveLabels, rightMarginForLabels, sankeyLayout, sequentialRamp, serializeSvg, sort, splitDefined, sqrtScale, squarify, stackSeries, streamExtent, streamLayout, sumValue, svgToPngBlob, timeScale, toStackedSeries, useChartSize, useStreamSeries, visualVisible, voronoiCells, voronoiFind, wrapText, zoomWindow };