@sckyzo/cosmos-charts 0.2.0 → 0.3.0

package/dist/index.d.ts

@@ -1,35 +1,28 @@
-import * as apexcharts from 'apexcharts';
 import * as react from 'react';
+import { ReactNode } from 'react';
+import { Topology } from 'topojson-specification';
 
-/** Default brand color (the blue accent). Prefer `useChartTheme().brand`, which follows the accent. */
+/** Default brand color (the blue accent). The charts themselves follow the accent through `--color-brand-500`. */
 declare const COSMOS_BRAND = "#465fff";
-declare const COSMOS_PALETTE: string[];
 /**
- * Subscribes to dark-mode toggles on `<html>` (the Cosmos convention).
- * Returns the current `isDark` value.
+ * The default series colors without the theme CSS: eight categorical colors,
+ * the blue accent first. With the theme, the charts draw `--color-brand-500`
+ * and `--color-chart-2` to `--color-chart-8` instead, and each accent skips the
+ * hues that look like it (a cyan accent drops the cyan and the teal).
+ *
+ * Series do not read as statuses: green, amber and red are absent from the
+ * first four places, and the status colors are never the default. A chart that
+ * means a status passes them as `colors`. A palette is a categorical scale: it
+ * names things, it does not rank them.
  */
-declare const useDarkMode: () => boolean;
+declare const COSMOS_PALETTE: string[];
 /**
- * Returns ApexCharts grid + axis options and colors matching the Cosmos
- * design tokens for the current theme and accent: `brandScale` is a
- * sequential scale (five brand steps, low to high) and `surface` the card
- * background.
+ * The text color, white or black, that reads best on `background`, a
+ * `#rrggbb` color (white when it is not one). White text drops under 3:1 on
+ * the palette's green and amber, and black text drops to 4.34:1 on the brand
+ * blue, where white gets 4.84:1: the pick reaches 4.5:1 on every color of the palette.
  */
-declare const useChartTheme: () => {
-    dark: boolean;
-    grid: apexcharts.ApexGrid;
-    axisLabels: {
-        style: {
-            colors: string;
-            fontSize: string;
-            fontFamily: string;
-        };
-    };
-    brand: string;
-    brandScale: string[];
-    surface: string;
-    palette: string[];
-};
+declare const readableOn: (background: string) => string;
 
 type ChartSeriesPoint = [number, number] | {
     x: number | string;
@@ -39,92 +32,295 @@ type ChartSize = {
     height?: number | string;
     width?: number | string;
 };
+/** Props of the charts that can have no data to draw. */
+type ChartEmptyProps = {
+    /**
+     * Text drawn in place of the plot when the chart has no series, or only
+     * empty ones. Default `No data`; an empty string draws nothing. It is drawn
+     * as plain text: markup in it shows as written.
+     */
+    emptyMessage?: string;
+};
+/** Props of the charts with a horizontal and a vertical axis. */
+type ChartAxisTitleProps = {
+    /** Title under the horizontal axis, such as "Time (UTC)". Drawn as plain text. */
+    xTitle?: string;
+    /** Title beside the vertical axis, such as "Requests / s". Drawn as plain text. */
+    yTitle?: string;
+};
+/** The meaning of a reference line or band: its color comes from the theme. */
+type ChartIntent = 'neutral' | 'warning' | 'danger' | 'success';
+/** A line across the plot at a value of the value axis: a threshold, a target, a limit. */
+type ChartReferenceLine = {
+    /** Where the line sits, in the units of the value axis. */
+    value: number;
+    /** Written next to the line, as plain text: markup in it shows as written. */
+    label?: string;
+    /** `neutral` (default) is the muted text color; the others are the theme's status colors. */
+    intent?: ChartIntent;
+    /** Draw the line dashed. Default solid. */
+    dashed?: boolean;
+};
+/** A band across the plot between two values of the value axis: a target range, a safe zone. */
+type ChartReferenceBand = {
+    /** One end of the band, in the units of the value axis. */
+    from: number;
+    /** The other end of the band. */
+    to: number;
+    /** Written in the band, as plain text: markup in it shows as written. */
+    label?: string;
+    /** `neutral` (default) is the muted text color; the others are the theme's status colors. */
+    intent?: ChartIntent;
+};
+/** Props of the charts that can draw lines and bands at values of their value axis. */
+type ChartReferenceProps = {
+    /**
+     * Lines across the plot at a value of the value axis: the vertical axis,
+     * or the horizontal one on a chart of horizontal bars. A line outside the
+     * data makes the axis reach it. On `MixedChart` they read the left axis (the
+     * right one when no series is on the left). Drawn above the series.
+     */
+    referenceLines?: ChartReferenceLine[];
+    /** Bands across the plot between two values of the value axis, behind the series. Same axis rules as `referenceLines`. */
+    referenceBands?: ChartReferenceBand[];
+};
+type ChartLegendPosition = 'top' | 'right' | 'bottom' | 'left';
+/** Props of the charts that draw a legend. */
+type ChartLegendProps = {
+    /**
+     * The side of the plot the legend sits on. Default `top` (`bottom` on
+     * `DonutChart`). The legend is a row on `top` and `bottom` and a column on
+     * `left` and `right`, and takes its room from the plot.
+     */
+    legendPosition?: ChartLegendPosition;
+};
+/** Props every chart wrapper takes. */
+type ChartProps = ChartSize & {
+    /**
+     * Name screen readers read for the chart, such as "CPU usage per hour".
+     * Without it, the chart is named from its type and its series.
+     */
+    ariaLabel?: string;
+    /**
+     * [Recharts](https://recharts.github.io/) elements drawn inside the chart,
+     * after the ones the wrapper builds: a `ReferenceLine` for a threshold, a
+     * `ReferenceArea`, a `Brush`, an extra axis. They read the chart's data and
+     * axes, so a reference line takes a `y` in the units of the series.
+     *
+     * Add `recharts` at the version this package depends on (`3.10.1`): two
+     * copies of it do not share a chart's context. Colors take CSS variables
+     * (`stroke="var(--color-status-warn)"`), which follow the theme.
+     */
+    children?: ReactNode;
+};
 
-type LineAreaChartProps = ChartSize & {
+type LineAreaChartVariant = 'area' | 'line';
+/** How a series is drawn: a `solid` smooth curve, a `dashed` one, or a `step` line that jumps from value to value. */
+type LineAreaChartSeriesStyle = 'solid' | 'dashed' | 'step';
+type LineAreaChartProps = ChartProps & ChartEmptyProps & ChartLegendProps & ChartAxisTitleProps & ChartReferenceProps & {
     series: {
         name: string;
         data: number[];
+        /** `solid` (default), `dashed` or `step`: a line that jumps from one value to the next, such as a quota or a replica count. */
+        style?: LineAreaChartSeriesStyle;
     }[];
     categories: (string | number)[];
+    /** Override the default Cosmos palette. */
+    colors?: string[];
+    /** Format the y-axis labels and the tooltip values. */
+    formatValue?: (value: number) => string;
+    /** Show the legend (auto-true when 2+ series). */
+    showLegend?: boolean;
+    /** `area` (default) fills under each line with a gradient; `line` draws the lines alone. */
+    variant?: LineAreaChartVariant;
+    /** Pile the series on each other, so the top line is the sum: the share of each in a total. */
+    stacked?: boolean;
+    /** Mark every data point with a dot. Default off: a dot appears under the pointer only. */
+    markers?: boolean;
 };
-declare const LineAreaChart: ({ series, categories, height, width, }: LineAreaChartProps) => react.JSX.Element;
+declare const LineAreaChart: ({ series, categories, colors, formatValue, xTitle, yTitle, referenceLines, referenceBands, emptyMessage, ariaLabel, children, height, width, showLegend, legendPosition, variant, stacked, markers, }: LineAreaChartProps) => react.JSX.Element;
 
-type RealtimeChartProps = ChartSize & {
+type RealtimeChartProps = ChartProps & ChartAxisTitleProps & {
     /** Sample generator — defaults to a noisy walk between 30 and 80. */
     generator?: () => number;
     /** Interval in ms — defaults to 2000. */
     intervalMs?: number;
     windowSize?: number;
+    /** Bottom of the y axis. Default 0. */
+    min?: number;
+    /** Top of the y axis, above `min`. Default 100. */
+    max?: number;
     warnThreshold?: number;
     critThreshold?: number;
+    /** Text of the warning threshold's label. Default `WARN`; an empty string draws the line alone. */
+    warnLabel?: string;
+    /** Text of the critical threshold's label. Default `CRIT`; an empty string draws the line alone. */
+    critLabel?: string;
+    /**
+     * Label the x axis with the time of each sample (`14:03:25`, in local time), and the
+     * tooltip with it, and `xTitle` has an axis to name. Default off: no x axis.
+     */
+    showTimeAxis?: boolean;
+    /** Format the y-axis labels and the tooltip values. */
+    formatValue?: (value: number) => string;
 };
-declare const RealtimeChart: ({ generator, intervalMs, windowSize, warnThreshold, critThreshold, height, width, }: RealtimeChartProps) => react.JSX.Element;
+declare const RealtimeChart: ({ generator, intervalMs, windowSize, min, max, warnThreshold, critThreshold, warnLabel, critLabel, showTimeAxis, xTitle, yTitle, formatValue, ariaLabel, children, height, width, }: RealtimeChartProps) => react.JSX.Element;
 
-type RadialBarChartProps = ChartSize & {
+type RadialBarChartProps = ChartProps & ChartEmptyProps & {
     series: number[];
     labels: string[];
+    /** Override the default Cosmos palette. */
+    colors?: string[];
+    /** Format the ring values and their average, on the 0–100 scale of the rings. Default: `78%`. */
+    formatValue?: (value: number) => string;
 };
-declare const RadialBarChart: ({ series, labels, height, width, }: RadialBarChartProps) => react.JSX.Element;
+declare const RadialBarChart: ({ series, labels, colors, formatValue, emptyMessage, ariaLabel, children, height, width, }: RadialBarChartProps) => react.JSX.Element;
 
-type GradientRadialProps = ChartSize & {
+type GradientRadialProps = ChartProps & {
     value: number;
     label?: string;
+    /** Color the arc starts from, fading to the theme's success color. Default: the accent. */
+    color?: string;
+    /** Value at the start of the arc. Default 0. */
+    min?: number;
+    /** Value at the end of the arc, above `min`. Default 100. Out of range, the arc stops at an end. */
+    max?: number;
+    /** Format the center value, from `value` itself (not its share of the range). Default: `84%`. */
+    formatValue?: (value: number) => string;
 };
-declare const GradientRadial: ({ value, label, height, width, }: GradientRadialProps) => react.JSX.Element;
+declare const GradientRadial: ({ value, label, color, min, max, formatValue, ariaLabel, children, height, width, }: GradientRadialProps) => react.JSX.Element;
 
-type SemiCircleGaugeProps = ChartSize & {
+type SemiCircleGaugeProps = Omit<ChartProps, 'height'> & {
     value: number;
     label?: string;
+    /**
+     * Color of the arc. Default: the accent, or the theme's status colors when
+     * `warnAt` or `critAt` is set.
+     */
     color?: string;
+    /** Value at the start of the arc. Default 0. */
+    min?: number;
+    /** Value at the end of the arc, above `min`. Default 100. Out of range, the arc stops at an end. */
+    max?: number;
+    /**
+     * Value from which the arc turns to the theme's warning color. Setting it (or
+     * `critAt`) colors the arc by status: the theme's success color below, the
+     * warning color from `warnAt`, the critical color from `critAt`. Without
+     * either, the arc keeps one color, so a gauge where higher is better (an
+     * uptime, a score) does not turn red.
+     */
+    warnAt?: number;
+    /** Value from which the arc turns to the theme's critical color. See `warnAt`. */
+    critAt?: number;
+    /**
+     * Format the center value, from `value` itself (not its share of the range), and the
+     * `showRange` labels. Default: `67%`.
+     */
+    formatValue?: (value: number) => string;
+    /** Write `min` and `max`, formatted, under the two ends of the arc. Default off. */
+    showRange?: boolean;
+    /**
+     * A goal on the scale of `min`–`max`, drawn as a mark across the arc. Out of range, the mark
+     * stops at an end of the arc, as the arc does. The target, formatted by `formatValue`, is read
+     * after the value in the name of the gauge.
+     */
+    target?: number;
+    /**
+     * The most the gauge takes, in pixels (default 120). The arc is as wide as the box allows, up
+     * to this height: in a narrower box the gauge is shorter, never taller.
+     */
+    height?: number;
 };
-declare const SemiCircleGauge: ({ value, label, color, height, width, }: SemiCircleGaugeProps) => react.JSX.Element;
+declare const SemiCircleGauge: ({ value, label, color, min, max, warnAt, critAt, formatValue, showRange, target, ariaLabel, children, height, width, }: SemiCircleGaugeProps) => react.JSX.Element;
 
-type StrokedGaugeProps = ChartSize & {
+type StrokedGaugeProps = ChartProps & {
     value: number;
     label?: string;
+    /** Color of the arc. Default: the accent. */
+    color?: string;
+    /** Value at the start of the arc. Default 0. */
+    min?: number;
+    /** Value at the end of the arc, above `min`. Default 100. Out of range, the arc stops at an end. */
+    max?: number;
+    /** Format the center value, from `value` itself (not its share of the range). Default: `92%`. */
+    formatValue?: (value: number) => string;
 };
-declare const StrokedGauge: ({ value, label, height, width, }: StrokedGaugeProps) => react.JSX.Element;
+declare const StrokedGauge: ({ value, label, color, min, max, formatValue, ariaLabel, children, height, width, }: StrokedGaugeProps) => react.JSX.Element;
 
-type DonutChartProps = ChartSize & {
+type DonutChartVariant = 'donut' | 'pie';
+type DonutChartProps = ChartProps & ChartEmptyProps & ChartLegendProps & {
     series: number[];
     labels: string[];
-    /** Whether to show the right-side legend (default: bottom). */
-    rightLegend?: boolean;
+    /** Override the default Cosmos palette. */
+    colors?: string[];
+    /** Format the slice values in the center and the tooltip, and the total. */
+    formatValue?: (value: number) => string;
+    /** `donut` (default) leaves a hole with the total in it; `pie` fills the disc, with no center text. */
+    variant?: DonutChartVariant;
+    /** The small text under the center value, in place of "Total". An empty string draws nothing. Ignored by `pie`. Drawn as plain text. */
+    centerLabel?: string;
+    /** The center value, in place of the total (which `formatValue` formats). Ignored by `pie`. Drawn as plain text. */
+    centerValue?: string;
+    /**
+     * Write each slice's value (through `formatValue`) and its share of the total in the
+     * legend, in whole percents that add up to 100. With the legend on the left or the right
+     * the figures sit in columns at the right edge of the legend.
+     */
+    legendValues?: boolean;
 };
-declare const DonutChart: ({ series, labels, rightLegend, height, width, }: DonutChartProps) => react.JSX.Element;
-declare const DonutRightLegend: (props: Omit<DonutChartProps, "rightLegend">) => react.JSX.Element;
+declare const DonutChart: ({ series, labels, colors, formatValue, variant, centerLabel, centerValue, legendValues, legendPosition, emptyMessage, ariaLabel, children, height, width, }: DonutChartProps) => react.JSX.Element;
 
-type SparklineProps = ChartSize & {
-    data: number[];
-    color?: string;
-    variant?: 'line' | 'area';
-};
-declare const Sparkline: ({ data, color, variant, height, width, }: SparklineProps) => react.JSX.Element;
-type SparklineGroupItem = {
-    label: string;
-    value: number | string;
+type SparklineProps = ChartProps & ChartEmptyProps & {
     data: number[];
+    /** A CSS color. Default: the accent. */
     color?: string;
+    /**
+     * `area` (default), `line`, or `bar`: narrow columns in `color`, the ones below zero in the
+     * danger color under a dashed zero line.
+     */
+    variant?: 'line' | 'area' | 'bar';
+    /** Names the value in the tooltip. Default `value`. Drawn as plain text. */
+    label?: string;
+    /** Format the tooltip value (default `String`). */
+    formatValue?: (value: number) => string;
+    /**
+     * Bottom of the scale. Default: the lowest value of `data`, so each sparkline fills its
+     * height; for `bar`, the lower of 0 and the lowest value, since a bar scale that does not
+     * start at zero exaggerates the differences. Set the same `min` and `max` on sparklines that
+     * are read against each other.
+     */
+    min?: number;
+    /** Top of the scale. Default: the highest value of `data` (for `bar`, at least 0). */
+    max?: number;
 };
-declare const SparklineGroup: ({ items, className, }: {
-    items: SparklineGroupItem[];
-    className?: string;
-}) => react.JSX.Element;
+declare const Sparkline: ({ data, color, variant, label, formatValue, min, max, emptyMessage, ariaLabel, children, height, width, }: SparklineProps) => react.JSX.Element;
 
 type TreemapDatum = {
     x: string;
     y: number;
 };
-type TreemapChartProps = ChartSize & {
+type TreemapChartProps = ChartProps & ChartEmptyProps & {
     series: {
         name?: string;
         data: TreemapDatum[];
     }[];
+    /**
+     * Override the default Cosmos palette. Tiles are colored by name, in the
+     * order the names first appear: one name keeps its color in every group.
+     */
+    colors?: string[];
+    /** Format the values in the tooltip and on the tiles. */
+    formatValue?: (value: number) => string;
+    /**
+     * Write each tile's value, formatted, under its name. Default off: the name alone, and the
+     * value in the tooltip.
+     */
+    showValues?: boolean;
 };
-declare const TreemapChart: ({ series, height, width }: TreemapChartProps) => react.JSX.Element;
+declare const TreemapChart: ({ series, colors, formatValue, showValues, emptyMessage, ariaLabel, children, height, width, }: TreemapChartProps) => react.JSX.Element;
 
 type BarChartOrientation = 'vertical' | 'horizontal';
-type BarChartProps = ChartSize & {
+type BarChartProps = ChartProps & ChartEmptyProps & ChartLegendProps & ChartAxisTitleProps & ChartReferenceProps & {
     series: {
         name: string;
         data: number[];
@@ -136,14 +332,24 @@ type BarChartProps = ChartSize & {
     stacked?: boolean;
     /** Override the default Cosmos palette. */
     colors?: string[];
-    /** Format the numeric axis labels (and tooltip values). */
+    /** Format the numeric axis labels and the tooltip values. */
     formatValue?: (value: number) => string;
     /** Show the legend (auto-true when 2+ series). */
     showLegend?: boolean;
-    /** Tailwind border-radius applied to bar tops. Default 4. */
+    /** Radius, in px, of the end of a bar away from the axis; only the outer end of a stack is rounded. Default 4. */
     borderRadius?: number;
+    /**
+     * The color of a bar from its value and the index of its category, for a threshold or a
+     * ranking. Return `undefined` to keep the color the other rules give. Applies to every
+     * series; the tooltip chip of a bar follows it, the legend keeps the series color.
+     */
+    colorByValue?: (value: number, index: number) => string | undefined;
+    /** One palette color per category (`colors` cycles), instead of one per series. For a single series. */
+    distributed?: boolean;
+    /** The color of the bars below zero, for diverging bars. `colorByValue` wins over it. */
+    negativeColor?: string;
 };
-declare const BarChart: ({ series, categories, orientation, stacked, colors, formatValue, showLegend, borderRadius, height, width, }: BarChartProps) => react.JSX.Element;
+declare const BarChart: ({ series, categories, orientation, stacked, colors, formatValue, xTitle, yTitle, referenceLines, referenceBands, showLegend, legendPosition, borderRadius, colorByValue, distributed, negativeColor, emptyMessage, ariaLabel, children, height, width, }: BarChartProps) => react.JSX.Element;
 
 type HeatmapColorRange = {
     /** Lowest value of the range, inclusive. */
@@ -154,7 +360,7 @@ type HeatmapColorRange = {
     /** Legend label. Default: `from – to`, formatted with `formatValue`. */
     name?: string;
 };
-type HeatmapChartProps = ChartSize & {
+type HeatmapChartProps = Omit<ChartProps, 'children'> & ChartEmptyProps & ChartLegendProps & ChartAxisTitleProps & {
     /** One row per series, drawn top to bottom; one value per category. */
     series: {
         name: string;
@@ -163,7 +369,8 @@ type HeatmapChartProps = ChartSize & {
     categories: (string | number)[];
     /**
      * Color steps, low to high, spread over the data range in buckets with
-     * round bounds. Default: five brand steps of the current theme and accent.
+     * round bounds. Default: five steps of the current accent, mixed over the
+     * card.
      */
     colors?: string[];
     /**
@@ -179,9 +386,45 @@ type HeatmapChartProps = ChartSize & {
     /** Show the color legend. Default true. */
     showLegend?: boolean;
 };
-declare const HeatmapChart: ({ series, categories, colors, ranges, formatValue, showValues, showLegend, height, width, }: HeatmapChartProps) => react.JSX.Element;
+declare const HeatmapChart: ({ series, categories, colors, ranges, formatValue, xTitle, yTitle, showValues, showLegend, legendPosition, emptyMessage, ariaLabel, height, width, }: HeatmapChartProps) => react.JSX.Element;
 
-type RadarChartProps = ChartSize & {
+/** The weekday a week starts on: 0 is Sunday, 1 is Monday. */
+type WeekStart = 0 | 1;
+
+type CalendarDay = {
+    /** The date, `YYYY-MM-DD`. A day listed twice adds up; anything else is ignored. */
+    day: string;
+    value: number;
+};
+type CalendarChartProps = Omit<ChartProps, 'children' | 'height'> & ChartEmptyProps & {
+    data: CalendarDay[];
+    /**
+     * First day shown, `YYYY-MM-DD`. Default: the first day of the earliest
+     * year of `data` in the `calendar` layout, the earliest day in `range`.
+     */
+    from?: string;
+    /** Last day shown, `YYYY-MM-DD`. Default: the end of the latest year, or the latest day in `range`. */
+    to?: string;
+    /**
+     * `calendar` draws one block per year, with the months named above their
+     * first full week. `range` draws one continuous grid from `from` to `to`,
+     * with larger cells when the range is short. Default `calendar`.
+     */
+    layout?: 'calendar' | 'range';
+    /** The weekday a week starts on: 1 for Monday (default), 0 for Sunday. */
+    weekStart?: WeekStart;
+    /** Format the value in the tooltip and in the name of each day. */
+    formatValue?: (value: number) => string;
+    /** Text at the low end of the scale under the grid. Default `Less`. */
+    lessLabel?: string;
+    /** Text at the high end of the scale under the grid. Default `More`. */
+    moreLabel?: string;
+    /** The language of the month, weekday and date names (BCP 47). Default `en-US`. */
+    locale?: string;
+};
+declare const CalendarChart: ({ data, from, to, layout, weekStart, formatValue, locale, lessLabel, moreLabel, emptyMessage, ariaLabel, width, }: CalendarChartProps) => react.JSX.Element;
+
+type RadarChartProps = ChartProps & ChartEmptyProps & ChartLegendProps & {
     /** One polygon per series; one value per category, in the same order. */
     series: {
         name: string;
@@ -197,8 +440,13 @@ type RadarChartProps = ChartSize & {
     showLegend?: boolean;
     /** Top of the scale, e.g. 100 for scores. Default: rounded up from the data. */
     max?: number;
+    /**
+     * Write the scale on the polygons (0, 20 … 100). Default off: the labels sit on the
+     * polygons and the tooltip gives the values. `max` and `formatValue` still apply.
+     */
+    showScale?: boolean;
 };
-declare const RadarChart: ({ series, categories, colors, formatValue, showLegend, max, height, width, }: RadarChartProps) => react.JSX.Element;
+declare const RadarChart: ({ series, categories, colors, formatValue, showLegend, legendPosition, max, showScale, emptyMessage, ariaLabel, children, height, width, }: RadarChartProps) => react.JSX.Element;
 
 type ScatterPoint = {
     x: number;
@@ -210,7 +458,7 @@ type BubblePoint = ScatterPoint & {
     /** Third measure, drawn as the bubble size. */
     z: number;
 };
-type XYChartProps = ChartSize & {
+type XYChartProps = ChartProps & ChartEmptyProps & ChartLegendProps & ChartReferenceProps & {
     /** Title under the x-axis. Also labels the x value in the tooltip (default `x`). */
     xTitle?: string;
     /** Title beside the y-axis. Also labels the y value in the tooltip (default `y`). */
@@ -241,14 +489,14 @@ type BubbleChartProps = XYChartProps & {
     formatSize?: (value: number) => string;
 };
 /** Points on two numeric axes, e.g. latency against load, one point per node. */
-declare const ScatterChart: ({ height, width, ...props }: ScatterChartProps) => react.JSX.Element;
+declare const ScatterChart: (props: ScatterChartProps) => react.JSX.Element;
 /** A scatter chart whose bubble size carries a third measure (`z`), e.g. request volume. */
-declare const BubbleChart: ({ sizeTitle, formatSize, height, width, ...props }: BubbleChartProps) => react.JSX.Element;
+declare const BubbleChart: ({ sizeTitle, formatSize, ...props }: BubbleChartProps) => react.JSX.Element;
 
 type BoxPlotChartOrientation = 'vertical' | 'horizontal';
 /** One box, the five-number summary of a distribution. */
 type BoxPlotSummary = [min: number, q1: number, median: number, q3: number, max: number];
-type BoxPlotChartProps = ChartSize & {
+type BoxPlotChartProps = ChartProps & ChartEmptyProps & ChartLegendProps & ChartAxisTitleProps & ChartReferenceProps & {
     /** One summary per category, in the order of `categories`. */
     series: {
         name: string;
@@ -265,7 +513,7 @@ type BoxPlotChartProps = ChartSize & {
     showLegend?: boolean;
 };
 /** Distributions per category (min, quartiles, median, max), e.g. response times per service. */
-declare const BoxPlotChart: ({ series, categories, orientation, colors, formatValue, showLegend, height, width, }: BoxPlotChartProps) => react.JSX.Element;
+declare const BoxPlotChart: ({ series, categories, orientation, colors, formatValue, xTitle, yTitle, referenceLines, referenceBands, showLegend, legendPosition, emptyMessage, ariaLabel, children, height, width, }: BoxPlotChartProps) => react.JSX.Element;
 
 type RangeBarPoint = {
     /** Row label: the service, rack or host the range belongs to. */
@@ -273,8 +521,8 @@ type RangeBarPoint = {
     /** Start and end, as timestamps in milliseconds. */
     y: [number, number];
 };
-type RangeBarChartProps = ChartSize & {
-    /** One series per kind of range (maintenance, deploy, incident…), drawn on a datetime axis. */
+type RangeBarChartProps = ChartProps & ChartEmptyProps & ChartLegendProps & ChartAxisTitleProps & ChartReferenceProps & {
+    /** One series per kind of range (maintenance, deploy, incident…), drawn on a time axis. */
     series: {
         name: string;
         data: RangeBarPoint[];
@@ -288,19 +536,19 @@ type RangeBarChartProps = ChartSize & {
     /** Show the legend (auto-true when 2+ series). */
     showLegend?: boolean;
 };
-declare const RangeBarChart: ({ series, groupRows, colors, formatDate, showLegend, height, width, }: RangeBarChartProps) => react.JSX.Element;
+declare const RangeBarChart: ({ series, groupRows, colors, formatDate, xTitle, yTitle, referenceLines, referenceBands, showLegend, legendPosition, emptyMessage, ariaLabel, children, height, width, }: RangeBarChartProps) => react.JSX.Element;
 
 type MixedChartAxis = 'left' | 'right';
 type MixedChartSeries = {
     name: string;
-    /** `column` draws bars, `line` draws a line over them. */
-    type: 'line' | 'column';
+    /** `column` draws bars, `line` draws a line over them, `area` fills under a line, behind the bars. */
+    type: 'line' | 'column' | 'area';
     data: number[];
     /** The y axis the series is read on. Any `right` series adds a second axis. Default `left`. */
     axis?: MixedChartAxis;
 };
-type MixedChartProps = ChartSize & {
-    /** Lines and columns on one category axis. Names must be unique: each y axis finds its series by name. */
+type MixedChartProps = ChartProps & ChartEmptyProps & ChartLegendProps & ChartAxisTitleProps & ChartReferenceProps & {
+    /** Lines and columns on one category axis. */
     series: MixedChartSeries[];
     categories: (string | number)[];
     /** Override the default Cosmos palette. */
@@ -309,9 +557,151 @@ type MixedChartProps = ChartSize & {
     formatValue?: (value: number) => string;
     /** Format the right axis labels and the tooltip values of its series. */
     formatRightValue?: (value: number) => string;
+    /**
+     * Title beside the right axis. `yTitle` names the left one. With one axis only, that axis
+     * takes the title of its side.
+     */
+    yRightTitle?: string;
     /** Show the legend (auto-true when 2+ series). */
     showLegend?: boolean;
+    /** Pile the `column` series on each other instead of grouping them side by side; the columns of each axis stack apart. */
+    stackedColumns?: boolean;
+};
+declare const MixedChart: ({ series, categories, colors, formatValue, formatRightValue, xTitle, yTitle, yRightTitle, referenceLines, referenceBands, showLegend, legendPosition, stackedColumns, emptyMessage, ariaLabel, children, height, width, }: MixedChartProps) => react.JSX.Element;
+
+type BumpPoint = {
+    x: string;
+    rank: number;
+};
+type BumpSeries = {
+    name: string;
+    data: BumpPoint[];
+};
+
+type BumpChartPoints = 'rank' | 'dot';
+type BumpChartProps = ChartProps & ChartEmptyProps & {
+    /**
+     * One entry per ranked item. `data` lists the rank (1 is the top) of the
+     * item in each period. The periods are every `x` once, in the order they
+     * first appear, so list them in order in the series that has them all. A
+     * period an item has no point in (it enters late, or leaves) is a gap in
+     * its line. Ties are allowed: items tied on a rank are drawn apart around it.
+     */
+    series: BumpSeries[];
+    /** Override the default Cosmos palette. */
+    colors?: string[];
+    /** Format a rank in the tooltip. Default `#1`, `#2`…; the points keep the bare number. */
+    formatValue?: (rank: number) => string;
+    /**
+     * `rank` (default) draws a disc ringed with the series color with the rank
+     * written in it; `dot` draws a small filled dot.
+     */
+    points?: BumpChartPoints;
+};
+declare const BumpChart: ({ series, colors, formatValue, points, emptyMessage, ariaLabel, children, height, width, }: BumpChartProps) => react.JSX.Element;
+
+type FunnelStage = {
+    label: string;
+    value: number;
+};
+
+type FunnelChartProps = Omit<ChartProps, 'children'> & ChartEmptyProps & {
+    /**
+     * The stages, drawn top to bottom in the order given: the wrapper does not
+     * sort them. Each bar is as wide as its value against the largest stage,
+     * which is the first one unless a stage grows.
+     */
+    stages: {
+        label: string;
+        value: number;
+    }[];
+    /**
+     * One color per stage, cycling when there are fewer. Default: the accent,
+     * fading from the first stage to the last.
+     */
+    colors?: string[];
+    /** Format the values, in the labels and the tooltip. Percentages always have one decimal. */
+    formatValue?: (value: number) => string;
+    /**
+     * Show the conversion: a chip with the rate from the previous stage, the
+     * rate from the first stage beside it, and both in the tooltip. Off, only
+     * the values show. Default true.
+     */
+    showConversion?: boolean;
+};
+declare const FunnelChart: ({ stages, colors, formatValue, showConversion, emptyMessage, ariaLabel, height, width, }: FunnelChartProps) => react.JSX.Element;
+
+type WaterfallDatum = {
+    label: string;
+    /** A step: the signed change. A total: sets the running total to it (an opening balance). */
+    value?: number;
+    /** Default `step`. `subtotal` and `total` are drawn from 0 to the running total. */
+    kind?: 'step' | 'subtotal' | 'total';
+};
+
+type WaterfallChartProps = ChartProps & ChartEmptyProps & ChartAxisTitleProps & {
+    /**
+     * The bars, left to right. A step (default) carries a signed `value`. A
+     * `subtotal` is drawn from 0 to the running total at that point. A
+     * `total` is drawn the same way, and a `value` on it sets the running
+     * total to it: an opening balance, or a known balance mid-walk.
+     */
+    data: WaterfallDatum[];
+    /** Format the value axis, the labels and the tooltip. The sign of a step is written apart: the function gets the magnitude. */
+    formatValue?: (value: number) => string;
+    /**
+     * Write the value above each bar. Default: on with 12 bars or fewer in a chart at least
+     * 480px wide, off otherwise (the values stay in the tooltip and the keyboard walk).
+     */
+    showLabels?: boolean;
+    /** Dashed lines from the top of a bar to the next one. Default true. */
+    showConnectors?: boolean;
+    /** Override the colors: increases, decreases, totals and subtotals. Defaults: the theme's success, error and accent. */
+    colors?: {
+        positive?: string;
+        negative?: string;
+        total?: string;
+    };
+};
+declare const WaterfallChart: ({ data, formatValue, showLabels, showConnectors, colors, xTitle, yTitle, emptyMessage, ariaLabel, children, height, width, }: WaterfallChartProps) => react.JSX.Element;
+
+type WorldMapProps = Omit<ChartProps, 'children'> & {
+    /**
+     * The value of each country, keyed by ISO 3166-1 alpha-2 code in upper case
+     * (`FR`, `US`). A code the `geography` does not hold is not drawn, and a
+     * value that is not a finite number counts as none.
+     */
+    data: Record<string, number>;
+    /**
+     * The map: a TopoJSON `Topology` with a `countries` object, such as
+     * `world-atlas/countries-110m.json` or `countries-50m.json`. The package
+     * ships no map data. A country is a feature whose `id` is its ISO 3166-1
+     * numeric code and whose `properties.name` is the name the tooltip and the
+     * reading table give; a feature without an id (Kosovo) is drawn and never
+     * takes a value. Antarctica is left out.
+     */
+    geography: Topology;
+    /** Format the values, in the tooltip, the legend and the table. Default `String`. */
+    formatValue?: (value: number) => string;
+    /** Names the value in the tooltip, such as `visitors`. Default `Value`. */
+    label?: string;
+    /**
+     * Clamp the values to this end before the color steps are cut: a value under
+     * `min` counts as `min`. The legend starts at `min`. Default: the lowest value.
+     */
+    min?: number;
+    /** Clamp the values to this end before the color steps are cut: a value over `max` counts as `max`. Default: no limit. */
+    max?: number;
+    /** Show the legend: the lower bound of each step, and a swatch for countries without data. Default true. Never shown without a value to draw. */
+    showLegend?: boolean;
+    /**
+     * Called with the code of a country that has a value when it is clicked, or
+     * when Enter or Space is pressed on the one the keyboard is on. Without it,
+     * the map only shows.
+     */
+    onSelect?: (code: string) => void;
 };
-declare const MixedChart: ({ series, categories, colors, formatValue, formatRightValue, showLegend, height, width, }: MixedChartProps) => react.JSX.Element;
+declare const WorldMap: ({ data, geography, formatValue, label, min, max, showLegend, onSelect, ariaLabel, height, width, }: WorldMapProps) => react.JSX.Element;
 
-export { BarChart, type BarChartOrientation, type BarChartProps, BoxPlotChart, type BoxPlotChartOrientation, type BoxPlotChartProps, type BoxPlotSummary, BubbleChart, type BubbleChartProps, type BubblePoint, COSMOS_BRAND, COSMOS_PALETTE, type ChartSeriesPoint, type ChartSize, DonutChart, type DonutChartProps, DonutRightLegend, GradientRadial, type GradientRadialProps, HeatmapChart, type HeatmapChartProps, type HeatmapColorRange, LineAreaChart, type LineAreaChartProps, MixedChart, type MixedChartAxis, type MixedChartProps, type MixedChartSeries, RadarChart, type RadarChartProps, RadialBarChart, type RadialBarChartProps, RangeBarChart, type RangeBarChartProps, type RangeBarPoint, RealtimeChart, type RealtimeChartProps, ScatterChart, type ScatterChartProps, type ScatterPoint, SemiCircleGauge, type SemiCircleGaugeProps, Sparkline, SparklineGroup, type SparklineGroupItem, type SparklineProps, StrokedGauge, type StrokedGaugeProps, TreemapChart, type TreemapChartProps, type TreemapDatum, useChartTheme, useDarkMode };
+export { BarChart, BoxPlotChart, BubbleChart, BumpChart, COSMOS_BRAND, COSMOS_PALETTE, CalendarChart, DonutChart, FunnelChart, GradientRadial, HeatmapChart, LineAreaChart, MixedChart, RadarChart, RadialBarChart, RangeBarChart, RealtimeChart, ScatterChart, SemiCircleGauge, Sparkline, StrokedGauge, TreemapChart, WaterfallChart, WorldMap, readableOn };
+export type { BarChartOrientation, BarChartProps, BoxPlotChartOrientation, BoxPlotChartProps, BoxPlotSummary, BubbleChartProps, BubblePoint, BumpChartPoints, BumpChartProps, BumpPoint, BumpSeries, CalendarChartProps, CalendarDay, ChartAxisTitleProps, ChartEmptyProps, ChartIntent, ChartLegendPosition, ChartLegendProps, ChartProps, ChartReferenceBand, ChartReferenceLine, ChartReferenceProps, ChartSeriesPoint, ChartSize, DonutChartProps, DonutChartVariant, FunnelChartProps, FunnelStage, GradientRadialProps, HeatmapChartProps, HeatmapColorRange, LineAreaChartProps, LineAreaChartSeriesStyle, LineAreaChartVariant, MixedChartAxis, MixedChartProps, MixedChartSeries, RadarChartProps, RadialBarChartProps, RangeBarChartProps, RangeBarPoint, RealtimeChartProps, ScatterChartProps, ScatterPoint, SemiCircleGaugeProps, SparklineProps, StrokedGaugeProps, TreemapChartProps, TreemapDatum, WaterfallChartProps, WaterfallDatum, WorldMapProps };