@krizaka/charts 0.4.0 → 0.6.0

package/registry/scatter-chart.json

@@ -8,6 +8,19 @@
   "status": "beta",
   "category": "charts",
   "platforms": "web",
+  "parity": {
+    "web": {
+      "state": "yes"
+    },
+    "native": {
+      "state": "gap",
+      "reason": "Advanced tier: no phone screen needs it yet.",
+      "issue": "krizaka/krizaka-ui#280"
+    },
+    "desktop": {
+      "state": "yes"
+    }
+  },
   "engine": "echarts",
   "tier": "advanced",
   "whenToUse": [

package/registry/sparkline.json

@@ -8,6 +8,17 @@
   "status": "beta",
   "category": "charts",
   "platforms": "both",
+  "parity": {
+    "web": {
+      "state": "yes"
+    },
+    "native": {
+      "state": "yes"
+    },
+    "desktop": {
+      "state": "yes"
+    }
+  },
   "engine": "svg",
   "tier": "core",
   "whenToUse": [

package/registry/treemap.json

@@ -8,6 +8,19 @@
   "status": "beta",
   "category": "charts",
   "platforms": "web",
+  "parity": {
+    "web": {
+      "state": "yes"
+    },
+    "native": {
+      "state": "gap",
+      "reason": "Advanced tier: no phone screen needs it yet.",
+      "issue": "krizaka/krizaka-ui#280"
+    },
+    "desktop": {
+      "state": "yes"
+    }
+  },
   "engine": "echarts",
   "tier": "advanced",
   "whenToUse": [

package/dist/context-DNW7bJYw.d.ts

@@ -1,182 +0,0 @@
-import * as react from 'react';
-import { ReactNode } from 'react';
-
-interface ChartLabels {
-    /** The button that shows the data table. */
-    showData: string;
-    /** The button that hides it. */
-    hideData: string;
-    /** The caption of the data table: `{title}`. */
-    tableCaption: string;
-    /** The export buttons. */
-    exportPng: string;
-    exportSvg: string;
-    exportCsv: string;
-    /** The actions menu (⋯) of a chart: its accessible name, and its entries. */
-    actions: string;
-    viewTable: string;
-    downloadCsv: string;
-    downloadPng: string;
-    downloadSvg: string;
-    copyData: string;
-    /** Announced once the data is on the clipboard. */
-    copied: string;
-    /** The close button of the table sheet. */
-    close: string;
-    /** The sheet's description: `{count}` rows. */
-    tableRows: string;
-    /** Legend chips filter: the chip's accessible name, `{label}`. */
-    toggleSeries: string;
-    /** Sparse data: under the chart, `{count}` periods with data out of `{total}`. */
-    sparse: string;
-    /** A KPI's change: `{change}` (`+12 %`) against the previous period. */
-    trendVsPrevious: string;
-    /** Announced while the data loads. */
-    loading: string;
-    /** Shown when there is nothing to draw. */
-    empty: string;
-    /** Shown when the data could not be loaded. */
-    error: string;
-    /** The keyboard hint, read once when the plot takes the focus. */
-    keyboardHint: string;
-    /** The role description of the plot (`chart`). */
-    roleDescription: string;
-    /** Summary pieces. `{kind}` is the chart's name (`Line chart`), `{count}` a number of points or series. */
-    summaryIntro: string;
-    summarySeries: string;
-    summaryRange: string;
-    summaryTrendUp: string;
-    summaryTrendDown: string;
-    summaryTrendFlat: string;
-    summaryTotal: string;
-    summaryThreshold: string;
-    summaryShare: string;
-    /** Scatter: the correlation of x and y (Pearson's r). */
-    summaryCorrelation: string;
-    /** Funnel: from one stage to the next, and from the first to the last. */
-    summaryConversion: string;
-    summaryOverall: string;
-    /** Heatmap, calendar: the largest cell and the number of cells with a value. */
-    summaryPeak: string;
-    summaryActive: string;
-    /** Candlestick: the period's range. */
-    summaryOhlc: string;
-    /** The names of the charts, read first in the summary. */
-    kinds: Record<ChartKind, string>;
-    /** The column of the values, when the chart has no value label. */
-    value: string;
-    /** The column of the categories in the data table, when the chart has no x label. */
-    category: string;
-    /** The total row of a stacked chart, a pie, a funnel. */
-    total: string;
-    /** What a missing value reads as. */
-    noValue: string;
-}
-type ChartKind = "line" | "area" | "bar" | "pie" | "donut" | "gauge" | "sparkline" | "radar" | "heatmap" | "calendar" | "sankey" | "funnel" | "candlestick" | "treemap" | "scatter" | "map" | "globe" | "chart";
-declare const DEFAULT_LABELS: ChartLabels;
-/** The words an app or a chart passes: any of them, and any of the chart names. */
-type ChartLabelsInput = Partial<Omit<ChartLabels, "kinds">> & {
-    kinds?: Partial<Record<ChartKind, string>>;
-};
-
-/** A row of data: any object; the chart reads the fields its `x`, `y` and `series` name. */
-type Datum = object;
-/** A field of a row (`"month"`) or a function that reads it. */
-type Accessor<T, V> = (keyof T & string) | ((datum: T, index: number) => V);
-/** A Krizaka brand: its palette leads with the brand's own hue (Krizaka blue, Orazaka orange, Orochia violet). */
-type BrandId = "krizaka" | "orazaka" | "orochia";
-/** A BCP 47 locale (`"en-US"`, `"fr-FR"`), always explicit: server and client write the same figures. */
-type Locale = string | readonly string[];
-/**
- * How a value is written, through `@krizaka/intl`:
- * - `"number"` (default) `12,345.6`, `"integer"` `12,346`, `"compact"` `12.3K`, `"percent"` (a ratio: `0.42` → `42%`);
- * - `{ style: "money", currency }`: the values are **integer minor units** (cents), as the ledger stores them;
- * - `{ style: "unit", unit }`: an `Intl` unit (`"second"`, `"megabyte"`);
- * - a function, for anything else.
- */
-type ValueFormat = "number" | "integer" | "compact" | "percent" | {
-    readonly style: "money";
-    readonly currency: string;
-    readonly compact?: boolean;
-} | {
-    readonly style: "unit";
-    readonly unit: string;
-    readonly compact?: boolean;
-} | {
-    readonly style: "number";
-    readonly options: Intl.NumberFormatOptions;
-} | ((value: number, locale: Locale) => string);
-/**
- * How a category of the x axis is written. A category that is a `Date`, an epoch or an ISO date (`"2026-04"`,
- * `"2026-04-12"`) is a date: `"month"` (`Apr 2026`), `"day"` (`Apr 12`), `"date"` (`Apr 12, 2026`), `"time"`
- * (`14:30`), `"datetime"`, `"year"`. `"text"` writes it as is (the default for anything that is not a date).
- */
-type CategoryFormat = "text" | "year" | "month" | "day" | "date" | "time" | "datetime" | ((category: unknown, locale: Locale) => string);
-/** A series to draw: the field holding its values and the words that name it. */
-interface SeriesSpec<T extends Datum = Datum> {
-    /** The field (or a function) holding the series' value in each row. */
-    readonly key: Accessor<T, number | null | undefined>;
-    /** Its name: in the legend, the tooltip, the data table and the summary. */
-    readonly label: string;
-    /** A colour role instead of the next palette slot: `"accent"`, a status (`"success"`…) or a `var(--…)`. */
-    readonly color?: SeriesColor;
-    /** Draw it dashed (a forecast, a previous period). Lines and areas only. */
-    readonly dashed?: boolean;
-}
-/** A status or brand role a series, a threshold or a marker may wear instead of a palette slot. */
-type Tone = "neutral" | "accent" | "success" | "warning" | "danger" | "info";
-/** A palette slot (1–8), a tone, or any CSS colour (`var(--kz-…)` preferred). */
-type SeriesColor = Tone | 1 | 2 | 3 | 4 | 5 | 6 | 7 | 8 | (string & {});
-/** A horizontal line at a value: a goal, a payout threshold, a quota. */
-interface Threshold {
-    readonly value: number;
-    /** What it means, written beside the line and in the summary: “Payout threshold”. */
-    readonly label: string;
-    /** Default `"neutral"`; a goal reads well in `"success"`, a limit in `"danger"`. */
-    readonly tone?: Tone;
-}
-/** A vertical marker at a category: an event worth pointing at (“Campaign launch”). */
-interface Marker {
-    /** The category it marks, as in the data (`"2026-04"`). */
-    readonly x: unknown;
-    readonly label: string;
-    readonly tone?: Tone;
-}
-/** What a series says about itself, for the written summary. */
-interface SeriesSummary {
-    readonly label: string;
-    readonly count: number;
-    readonly min: {
-        readonly value: number;
-        readonly category: string;
-    } | null;
-    readonly max: {
-        readonly value: number;
-        readonly category: string;
-    } | null;
-    readonly first: number | null;
-    readonly last: number | null;
-    readonly total: number;
-    /** `last / first − 1`, or null when it cannot be said (no first value, a first value of 0). */
-    readonly change: number | null;
-    readonly trend: "up" | "down" | "flat" | "none";
-}
-
-interface ChartsSettings {
-    /** The locale of every figure and date (`"fr-FR"`). Default `"en-US"`. */
-    locale?: Locale;
-    /**
-     * The brand whose palette the charts use. Without it, a chart follows a `.brand-<id>` ancestor, else Krizaka. Set it
-     * when the app loads a brand stylesheet on `:root` (`@krizaka/tokens/brands/orazaka.css`).
-     */
-    brand?: BrandId;
-    /** The words, translated: the buttons, the states, the written summary. */
-    labels?: ChartLabelsInput;
-}
-interface ChartsProviderProps extends ChartsSettings {
-    children: ReactNode;
-}
-/** Sets the locale, the brand and the words of every chart below it. */
-declare function ChartsProvider({ locale, brand, labels, children }: ChartsProviderProps): react.JSX.Element;
-
-export { type Accessor as A, type BrandId as B, type CategoryFormat as C, DEFAULT_LABELS as D, type Locale as L, type Marker as M, type SeriesColor as S, type Threshold as T, type ValueFormat as V, type ChartKind as a, type ChartLabels as b, type ChartLabelsInput as c, ChartsProvider as d, type ChartsProviderProps as e, type ChartsSettings as f, type Datum as g, type SeriesSpec as h, type SeriesSummary as i, type Tone as j };