@sckyzo/cosmos-charts 0.1.1 → 0.2.0

package/dist/index.d.ts

@@ -11,7 +11,9 @@ declare const COSMOS_PALETTE: string[];
 declare const useDarkMode: () => boolean;
 /**
  * Returns ApexCharts grid + axis options and colors matching the Cosmos
- * design tokens for the current theme and accent.
+ * design tokens for the current theme and accent: `brandScale` is a
+ * sequential scale (five brand steps, low to high) and `surface` the card
+ * background.
  */
 declare const useChartTheme: () => {
     dark: boolean;
@@ -24,6 +26,8 @@ declare const useChartTheme: () => {
         };
     };
     brand: string;
+    brandScale: string[];
+    surface: string;
     palette: string[];
 };
 
@@ -141,4 +145,173 @@ type BarChartProps = ChartSize & {
 };
 declare const BarChart: ({ series, categories, orientation, stacked, colors, formatValue, showLegend, borderRadius, height, width, }: BarChartProps) => react.JSX.Element;
 
-export { BarChart, type BarChartOrientation, type BarChartProps, COSMOS_BRAND, COSMOS_PALETTE, type ChartSeriesPoint, type ChartSize, DonutChart, type DonutChartProps, DonutRightLegend, GradientRadial, type GradientRadialProps, LineAreaChart, type LineAreaChartProps, RadialBarChart, type RadialBarChartProps, RealtimeChart, type RealtimeChartProps, SemiCircleGauge, type SemiCircleGaugeProps, Sparkline, SparklineGroup, type SparklineGroupItem, type SparklineProps, StrokedGauge, type StrokedGaugeProps, TreemapChart, type TreemapChartProps, type TreemapDatum, useChartTheme, useDarkMode };
+type HeatmapColorRange = {
+    /** Lowest value of the range, inclusive. */
+    from: number;
+    /** Highest value of the range, inclusive. A value on a shared bound takes the later range. */
+    to: number;
+    color: string;
+    /** Legend label. Default: `from – to`, formatted with `formatValue`. */
+    name?: string;
+};
+type HeatmapChartProps = ChartSize & {
+    /** One row per series, drawn top to bottom; one value per category. */
+    series: {
+        name: string;
+        data: number[];
+    }[];
+    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.
+     */
+    colors?: string[];
+    /**
+     * Explicit color ranges (thresholds such as OK / WARN / CRIT), which take
+     * precedence over `colors`. Cover every value: a cell outside all ranges
+     * falls back to a series color.
+     */
+    ranges?: HeatmapColorRange[];
+    /** Format the values in the tooltip, the legend and the cells. */
+    formatValue?: (value: number) => string;
+    /** Print each value inside its cell. */
+    showValues?: boolean;
+    /** Show the color legend. Default true. */
+    showLegend?: boolean;
+};
+declare const HeatmapChart: ({ series, categories, colors, ranges, formatValue, showValues, showLegend, height, width, }: HeatmapChartProps) => react.JSX.Element;
+
+type RadarChartProps = ChartSize & {
+    /** One polygon per series; one value per category, in the same order. */
+    series: {
+        name: string;
+        data: number[];
+    }[];
+    /** The axes, clockwise from the top. */
+    categories: string[];
+    /** Override the default Cosmos palette. */
+    colors?: string[];
+    /** Format the scale labels and the tooltip values. */
+    formatValue?: (value: number) => string;
+    /** Show the legend (auto-true when 2+ series). */
+    showLegend?: boolean;
+    /** Top of the scale, e.g. 100 for scores. Default: rounded up from the data. */
+    max?: number;
+};
+declare const RadarChart: ({ series, categories, colors, formatValue, showLegend, max, height, width, }: RadarChartProps) => react.JSX.Element;
+
+type ScatterPoint = {
+    x: number;
+    y: number;
+    /** Names the point in the tooltip title: a node, a host, a rack. */
+    label?: string;
+};
+type BubblePoint = ScatterPoint & {
+    /** Third measure, drawn as the bubble size. */
+    z: number;
+};
+type XYChartProps = ChartSize & {
+    /** 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`). */
+    yTitle?: string;
+    /** Override the default Cosmos palette, one color per series. */
+    colors?: string[];
+    /** Format the x-axis labels and the tooltip's x value (default: at most two decimals). */
+    formatX?: (value: number) => string;
+    /** Format the y-axis labels and the tooltip's y value (default: at most two decimals). */
+    formatY?: (value: number) => string;
+    /** Show the legend (auto-true when 2+ series). */
+    showLegend?: boolean;
+};
+type ScatterChartProps = XYChartProps & {
+    series: {
+        name: string;
+        data: ScatterPoint[];
+    }[];
+};
+type BubbleChartProps = XYChartProps & {
+    series: {
+        name: string;
+        data: BubblePoint[];
+    }[];
+    /** Labels the size in the tooltip. Default `Size`. */
+    sizeTitle?: string;
+    /** Format the size in the tooltip (default: at most two decimals). */
+    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;
+/** 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;
+
+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 & {
+    /** One summary per category, in the order of `categories`. */
+    series: {
+        name: string;
+        data: BoxPlotSummary[];
+    }[];
+    categories: string[];
+    /** `vertical` (default) draws boxes upward; `horizontal` draws them rightward. */
+    orientation?: BoxPlotChartOrientation;
+    /** Override the default Cosmos palette, one color per series. */
+    colors?: string[];
+    /** Format the value axis labels and the tooltip values. */
+    formatValue?: (value: number) => string;
+    /** Show the legend (auto-true when 2+ series). */
+    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;
+
+type RangeBarPoint = {
+    /** Row label: the service, rack or host the range belongs to. */
+    x: string;
+    /** 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. */
+    series: {
+        name: string;
+        data: RangeBarPoint[];
+    }[];
+    /** Draw every series of a row on one lane, instead of one lane per series. */
+    groupRows?: boolean;
+    /** Override the default Cosmos palette. */
+    colors?: string[];
+    /** Format the start and end times in the tooltip. Default: `14 Oct, 02:00`, in UTC like the axis. */
+    formatDate?: (timestamp: number) => string;
+    /** Show the legend (auto-true when 2+ series). */
+    showLegend?: boolean;
+};
+declare const RangeBarChart: ({ series, groupRows, colors, formatDate, showLegend, 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';
+    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. */
+    series: MixedChartSeries[];
+    categories: (string | number)[];
+    /** Override the default Cosmos palette. */
+    colors?: string[];
+    /** Format the left axis labels and the tooltip values of its series. */
+    formatValue?: (value: number) => string;
+    /** Format the right axis labels and the tooltip values of its series. */
+    formatRightValue?: (value: number) => string;
+    /** Show the legend (auto-true when 2+ series). */
+    showLegend?: boolean;
+};
+declare const MixedChart: ({ series, categories, colors, formatValue, formatRightValue, showLegend, height, width, }: MixedChartProps) => 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 };