@k2b/ui 0.50.0 → 0.52.0

package/dist/types/charts/core/svg-renderers.d.ts

@@ -0,0 +1,118 @@
+import type { BarChartOptions, LineOptions, PieChartOptions, SparklineOptions, StateTimelineOptions, StatOptions } from "./svg-common";
+export { barGauge } from "./svg-barGauge";
+export { boxplot } from "./svg-boxplot";
+export * from "./svg-common";
+export { gauge } from "./svg-gauge";
+export { heatmap } from "./svg-heatmap";
+export { histogram } from "./svg-histogram";
+export { scatter } from "./svg-scatter";
+/**
+ * Render a line chart. Each series becomes a `<path class="stdlib-chart-line">`
+ * connecting its points (sorted by `x`). Multi-series charts get distinct
+ * `stdlib-chart-series-N` classes.
+ *
+ * Non-finite points are filtered. A series with fewer than 2 finite points
+ * is skipped (no path can be drawn). An empty/all-non-finite chart renders
+ * an empty-state SVG.
+ *
+ * @example
+ * charts.line({ series: [{ data: [{x:1,y:10},{x:2,y:25},{x:3,y:18}] }] });
+ *
+ * @example
+ * charts.line({
+ *   series: [
+ *     { label: "Revenue", data: [...] },
+ *     { label: "Costs",   data: [...] },
+ *   ],
+ *   yAxis: { format: v => `$${v}k` },
+ * });
+ */
+export declare const line: (opts: LineOptions) => string;
+/**
+ * Render a categorical bar chart. The y-domain always includes zero so bars
+ * rest on a visible baseline. Negative values produce bars below the zero
+ * line; mixed positive/negative inputs render the zero line as the X axis.
+ *
+ * Bars use class `stdlib-chart-bar stdlib-chart-series-0` (single-series
+ * only in v1 — grouped/stacked bars are out of scope).
+ *
+ * Non-finite values are filtered. Empty input renders an empty-state SVG.
+ *
+ * @example
+ * charts.bar({ data: [{label:"Q1",value:120},{label:"Q2",value:180}] });
+ *
+ * @example
+ * charts.bar({
+ *   data: [{label:"Profit",value:50},{label:"Loss",value:-20}],
+ *   yAxis: { format: v => `${v}k` },
+ * });
+ */
+export declare const bar: (opts: BarChartOptions) => string;
+/**
+ * Render a pie chart. Slices are drawn clockwise starting at 12 o'clock,
+ * proportional to each item's `value`. Pass `showLabels: true` to render
+ * `Label (XX%)` outside each slice, or `legend: true` to render a wrapping
+ * legend below the chart.
+ *
+ * Use `legend` (not `showLabels`) when slices are many or one slice dominates —
+ * outside labels collide in those cases.
+ *
+ * Non-positive and non-finite values are filtered. A 100%-single-slice draws
+ * a complete circle. Empty/all-zero input renders an empty-state SVG.
+ *
+ * @example
+ * charts.pie({ data: [{label:"A",value:30},{label:"B",value:50},{label:"C",value:20}] });
+ *
+ * @example
+ * charts.pie({ data: [...], showLabels: true });
+ *
+ * @example
+ * charts.pie({ data: [...], legend: true }); // recommended for many small slices
+ */
+export declare const pie: (opts: PieChartOptions) => string;
+/**
+ * Render a donut chart. Identical to {@link pie} but with a hollow center
+ * (default `innerRadius: 0.6`). Override `innerRadius` for a thicker or
+ * thinner ring.
+ *
+ * @example
+ * charts.donut({ data: [{label:"Used",value:67},{label:"Free",value:33}] });
+ *
+ * @example
+ * charts.donut({ data: [...], innerRadius: 0.4, showLabels: true });
+ *
+ * @example
+ * charts.donut({ data: [...], legend: true }); // wrapping legend below the ring
+ */
+export declare const donut: (opts: PieChartOptions) => string;
+/** Render a large value panel with optional delta and inline sparkline. */
+export declare const stat: (opts: StatOptions) => string;
+/**
+ * Render state regions over a numeric timeline for services, jobs, deploys, or
+ * health checks.
+ */
+export declare const stateTimeline: (opts: StateTimelineOptions) => string;
+/**
+ * Render a minimalist sparkline — a tiny inline chart with no axes, no
+ * labels, and minimal padding. Designed to fit alongside text or in dense
+ * tables.
+ *
+ * Stroke uses `currentColor` by default, so it adopts the surrounding text
+ * color. Pass `className` to scope a different color.
+ *
+ * @example
+ * charts.sparkline({ data: [3, 7, 5, 9, 12, 10, 14] });
+ *
+ * @example
+ * charts.sparkline({
+ *   data: [3, 7, 5, 9, 12, 10, 14],
+ *   smooth: true,
+ *   showLast: true,
+ *   width: 120,
+ * });
+ *
+ * @example
+ * // Dashboard-tile look: stroke + soft gradient fill fading to transparent.
+ * charts.sparkline({ data: [3, 7, 5, 9, 12, 10, 14], area: true });
+ */
+export declare const sparkline: (opts: SparklineOptions) => string;

package/dist/types/charts/core/svg-scatter.d.ts

@@ -0,0 +1,23 @@
+import { type ScatterOptions } from "./svg-common";
+/**
+ * Render a scatter plot. Each series produces a group of circles, one per
+ * data point, classed `stdlib-chart-series-N` so series colors stay
+ * consistent across charts.
+ *
+ * Non-finite x or y values are filtered out. An empty `series` (or one with
+ * no finite points) renders an empty-state SVG with a "no data" label.
+ *
+ * @example
+ * charts.scatter({ series: [{ data: [{x:1,y:2},{x:2,y:5},{x:3,y:3}] }] });
+ *
+ * @example
+ * charts.scatter({
+ *   series: [
+ *     { label: "Group A", data: [...] },
+ *     { label: "Group B", data: [...] },
+ *   ],
+ *   xAxis: { label: "Time (s)" },
+ *   yAxis: { label: "Value", format: v => `${v}k` },
+ * });
+ */
+export declare const scatter: (opts: ScatterOptions) => string;