kanto-ds 1.0.0 → 1.0.1

package/dist/components/data/kt-chart/geometry.d.ts

@@ -0,0 +1,41 @@
+/**
+ * SVG path geometry for the chart's marks. Every function is pure and writes
+ * coordinates rounded to two decimals, so paths stay short and comparable.
+ */
+export type Point = readonly [number, number];
+/** One cubic Bézier piece of a curve. */
+export interface Segment {
+    readonly from: Point;
+    readonly c1: Point;
+    readonly c2: Point;
+    readonly to: Point;
+}
+export declare const TAU: number;
+export declare const round: (value: number) => number;
+/** Straight segments through `points`. `move` false continues an open path. */
+export declare function linearPath(points: readonly Point[], move?: boolean): string;
+/**
+ * A monotone cubic through `points` (Fritsch–Carlson).
+ *
+ * Between two samples the curve stays within their range, so it never draws a
+ * peak or a dip that is not in the data — the failure of the cardinal splines
+ * most charts use. Needs at least three points; fewer have nothing to smooth.
+ */
+export declare function monotoneSegments(points: readonly Point[]): Segment[];
+/** A monotone curve as a path, or straight segments when there is nothing to smooth. */
+export declare function monotonePath(points: readonly Point[], move?: boolean): string;
+/** The point at `radius` and `angle` from a centre; 0 is twelve o'clock, clockwise. */
+export declare function polar(cx: number, cy: number, radius: number, angle: number): Point;
+/**
+ * A slice from `start` to `end`: a wedge to the centre when `inner` is 0, an
+ * annular sector otherwise. A whole turn is drawn as circles (and a hole, with
+ * `fill-rule="evenodd"`) because a single SVG arc cannot close on itself.
+ */
+export declare function arcPath(cx: number, cy: number, inner: number, outer: number, start: number, end: number): string;
+/** Which end of a bar is rounded. The baseline end always stays square. */
+export type Tip = 'top' | 'bottom' | 'left' | 'right' | 'none';
+/**
+ * A bar, rounded at its tip only. A bar rounded at the baseline too floats
+ * above the axis instead of standing on it.
+ */
+export declare function barPath(x: number, y: number, width: number, height: number, radius: number, tip: Tip): string;

package/dist/components/data/kt-chart/kt-chart.d.ts

@@ -1,25 +1,20 @@
 import { type TemplateResult } from 'lit';
 import { KtElement } from '#internal/kt-element';
-export type KtChartType = 'area' | 'line' | 'bar';
-export interface KtSeries {
-    readonly name: string;
-    readonly values: readonly number[];
-    /** Overrides the slot this series would take from the categorical order. */
-    readonly color?: string;
-}
+import type { Format, KtChartType, KtSeries } from './model.js';
+export type { KtChartType, KtMark, KtPoint, KtSeries } from './model.js';
 /**
- * A small chart, drawn from the token layer.
+ * A chart, drawn from the token layer.
  *
- * Deliberately narrow: one axis, one to eight series, three marks. It is the
- * shape a product dashboard actually needs, not a charting library — anything
- * past this and you want a real one.
+ * Line, area and bar — stacked, sideways or mixed — plus scatter, bubble,
+ * pie, doughnut, polar area and radar, all in Kanto's voice: the eight
+ * categorical hues in fixed order, one value axis, recessive grid, and the
+ * data always available as a table.
  *
  * **Colour.** One series takes the brand hue: with nothing to tell apart there
  * is no identity to encode, and the title names it. Two or more take the fixed
  * categorical order in `--chart-series-1…8`, assigned by position and never
  * cycled, so a series keeps its colour when a filter removes its neighbours.
- * Those hues are kept clear of the semantic palette, so a line can never be
- * mistaken for a status.
+ * Slices take the same order by slice.
  *
  * **The table is not optional.** Every chart also renders its data as a table,
  * visually hidden by default. It is what a screen reader reads, and it is the
@@ -29,11 +24,14 @@ export interface KtSeries {
  * @element kt-chart
  *
  * @csspart svg - The plot.
- * @csspart legend - The legend, when there are two or more series.
+ * @csspart legend - The legend.
  * @csspart table - The data table.
  *
- * @fires kt-point-hover - The hovered index changed. `detail: { index }`,
- *   with `index` of -1 when the pointer leaves.
+ * @fires kt-point-hover - The active point changed. `detail: { index, series }`;
+ *   `index` is -1 when nothing is active, `series` -1 when the index spans
+ *   every series.
+ * @fires kt-series-toggle - A legend item was pressed. `detail: { series, hidden }`.
+ *   Cancelable.
  *
  * @example
  * ```js
@@ -47,49 +45,95 @@ export declare class KtChart extends KtElement {
     private observer?;
     private readonly tableId;
     private box;
+    /** The active category, point or slice, or -1. */
     private active;
+    /** The series the active point belongs to, for scatter and bubble; -1 otherwise. */
+    private activeSeries;
+    /**
+     * Series hidden from the legend — or slices, for pie, doughnut and polar
+     * area. Not `hidden`: that is HTMLElement's, and shadowing it would stop
+     * `chart.hidden = true` from hiding the chart.
+     */
+    private hiddenSeries;
     type: KtChartType;
     series: readonly KtSeries[];
-    /** One label per index along the x axis. */
+    /** One label per index along the category axis, or per slice or spoke. */
     labels: readonly string[];
     height: number;
-    /** Formats a value for the tooltip and the table. */
-    format: (value: number) => string;
-    /** Horizontal grid lines. */
+    /** Formats a value for the value axis, the tooltip and the table. */
+    format: Format;
+    /** Formats the x value of a scatter or bubble point. */
+    formatX: Format;
+    /** Grid lines. */
     noGrid: boolean;
+    /** Hides the value axis labels, for a chart too small to carry them. */
+    noAxis: boolean;
     /** Puts the data table on screen instead of only in the accessibility tree. */
     showTable: boolean;
     /**
-     * Smooths the line through a monotone spline.
+     * Smooths lines and areas through a monotone spline.
      *
      * Off by default on purpose: a curve between two samples draws values that
      * were never measured. Turn it on when the underlying quantity really is
      * continuous and the reader knows it.
      */
     smooth: boolean;
+    /** Bars, and areas, on top of one another instead of side by side. */
+    stacked: boolean;
+    /** Bars along the horizontal axis, with the categories down the left. */
+    horizontal: boolean;
+    /** Pins the bottom of the value axis. */
+    min: number | null;
+    /** Pins the top of the value axis. */
+    max: number | null;
+    /** Names the total in the middle of a doughnut. */
+    centerLabel: string;
+    /** Names the sum in a stacked chart's tooltip and table. */
+    totalLabel: string;
     /** Accessible name. Say what the chart shows. */
     label: string;
     connectedCallback(): void;
     firstUpdated(): void;
     disconnectedCallback(): void;
-    private colorFor;
+    willUpdate(changed: Map<PropertyKey, unknown>): void;
+    private get family();
     private get pointCount();
-    private get bounds();
-    private get plotArea();
-    private xFor;
-    private yFor;
-    /**
-     * A monotone cubic path — it never overshoots the samples, which a plain
-     * cardinal spline happily does, inventing peaks that are not in the data.
-     */
-    private pathFor;
+    private colorOf;
+    private measureContext;
+    /** Text width in the axis font. Estimated where there is no canvas to ask. */
+    private measure;
+    private get cartesianView();
+    private get pointView();
+    /** Pie, doughnut and polar area: one series, whose slices are the labels. */
+    private get sliced();
+    private sliceColor;
+    private get radialView();
+    /** Whether there is anything to draw. */
+    private get hasData();
+    private setActive;
     private onPointerMove;
     private onPointerLeave;
-    private renderGrid;
-    private renderBars;
-    private renderLines;
-    private renderAxis;
+    /** How many positions the keyboard walks through, in order. */
+    private get stops();
+    /**
+     * Arrows walk the points, Home and End jump to the ends, Escape lets go.
+     * Every move emits `kt-point-hover` and opens the tooltip, which is a live
+     * region, so a keyboard user hears what a pointer user sees.
+     */
+    private onKeyDown;
+    /**
+     * Scatter and bubble: left and right walk the current series in x order,
+     * up and down move to the neighbouring visible series.
+     */
+    private onPointKeyDown;
+    private toggle;
+    private renderMarks;
+    private get tooltip();
     private renderTooltip;
+    private renderLegend;
+    private renderPointTable;
+    private renderSliceTable;
+    private renderTable;
     render(): TemplateResult;
 }
 declare global {