@pushwoosh/kit-charts 0.0.1

package/core/types/options.d.ts

@@ -0,0 +1,331 @@
+import { type AxisLabelContext, type AxisLabelFormatter, type DataLabelFormatter, type LegendLabelFormatter, type TooltipCellFormatter, type TooltipFormatter } from './formatter';
+import { type Spacing } from './geometry';
+import { type ColorStop, type TimeUnit } from './scale';
+export type Stacking = 'normal' | 'percent';
+export interface TextStyle {
+    color?: string;
+    fontFamily?: string;
+    fontSize?: string;
+    fontWeight?: string;
+    fontStyle?: string;
+    textOutline?: string;
+    textAlign?: 'left' | 'center' | 'right';
+    whiteSpace?: 'normal' | 'nowrap';
+    display?: 'none';
+}
+export interface ShadowOptions {
+    color?: string;
+    offsetX?: number;
+    offsetY?: number;
+    width?: number;
+    opacity?: number;
+}
+export interface AnimationOptions {
+    duration: number;
+}
+export interface ChartRootOptions {
+    type?: string;
+    height?: number | string | null;
+    width?: number | string | null;
+    backgroundColor?: string;
+    spacing?: Spacing;
+    marginTop?: number;
+    marginRight?: number;
+    marginBottom?: number;
+    marginLeft?: number;
+    style?: TextStyle;
+    plotBorderWidth?: number;
+    plotBorderColor?: string;
+    /**
+     * Drag across the plot to narrow the x axis to what was dragged over, with a
+     * button to undo it. Only a continuous x axis zooms; there is nothing between
+     * two categories to zoom to.
+     */
+    zoomType?: 'x';
+    resetZoomText?: string;
+    scrollablePlotArea?: {
+        minWidth?: number;
+        minHeight?: number;
+    };
+}
+export interface TitleOptions {
+    text?: string | null;
+    align?: 'left' | 'center' | 'right';
+    /** Explains the chart behind an info icon beside the title, on hover or focus. */
+    hint?: string;
+    /**
+     * A muted note on the far end of the title's own row — what period the figures
+     * cover, when they were counted. Only the main title draws one.
+     */
+    caption?: string;
+    captionStyle?: TextStyle;
+    style?: TextStyle;
+}
+export interface AxisTitleOptions {
+    text?: string | null;
+    align?: 'low' | 'middle' | 'high';
+    rotation?: number;
+    offset?: number;
+    x?: number;
+    y?: number;
+    style?: TextStyle;
+}
+export interface AxisLabelsOptions {
+    enabled?: boolean;
+    format?: string;
+    formatter?: AxisLabelFormatter;
+    /**
+     * Explains one tick on hover or focus, in the same callout a title hint uses.
+     * Return nothing for a tick that needs no explanation.
+     */
+    hint?: (ctx: AxisLabelContext) => string | undefined;
+    allowOverlap?: boolean;
+    align?: 'left' | 'center' | 'right';
+    rotation?: number;
+    x?: number;
+    y?: number;
+    padding?: number;
+    style?: TextStyle;
+}
+/** `zIndex` at or above this draws over the series instead of under it. */
+export declare const ABOVE_SERIES_Z_INDEX = 5;
+export interface PlotLineOptions {
+    value: number | string;
+    color?: string;
+    width?: number;
+    dashStyle?: 'solid' | 'dash' | 'dot';
+    zIndex?: number;
+    label?: PlotLabelOptions;
+}
+export interface PlotBandOptions {
+    from: number | string;
+    to: number | string;
+    color?: string;
+    borderColor?: string;
+    borderWidth?: number;
+    zIndex?: number;
+    label?: PlotLabelOptions;
+}
+export interface PlotLabelOptions {
+    text?: string;
+    align?: 'left' | 'center' | 'right';
+    verticalAlign?: 'top' | 'middle' | 'bottom';
+    x?: number;
+    y?: number;
+    rotation?: number;
+    style?: TextStyle;
+}
+export interface StackLabelsOptions {
+    enabled?: boolean;
+    formatter?: DataLabelFormatter;
+    style?: TextStyle;
+}
+export interface AxisOptions {
+    type?: 'linear' | 'datetime' | 'category';
+    categories?: readonly string[];
+    min?: number;
+    max?: number;
+    visible?: boolean;
+    opposite?: boolean;
+    reversed?: boolean;
+    linkedTo?: number;
+    offset?: number;
+    allowDecimals?: boolean;
+    lineColor?: string;
+    lineWidth?: number;
+    tickColor?: string;
+    tickWidth?: number;
+    tickLength?: number;
+    tickAmount?: number;
+    tickInterval?: number | TimeUnit;
+    tickPixelInterval?: number;
+    tickPositions?: readonly number[];
+    gridLineWidth?: number;
+    gridLineColor?: string;
+    plotLines?: readonly PlotLineOptions[];
+    plotBands?: readonly PlotBandOptions[];
+    stackLabels?: StackLabelsOptions;
+    labels?: AxisLabelsOptions;
+    title?: AxisTitleOptions;
+}
+export interface ColorAxisOptions {
+    min?: number;
+    max?: number;
+    visible?: boolean;
+    stops?: readonly ColorStop[];
+}
+export interface LegendOptions<TSeriesMeta = unknown> {
+    enabled?: boolean;
+    align?: 'left' | 'center' | 'right';
+    verticalAlign?: 'top' | 'middle' | 'bottom';
+    layout?: 'horizontal' | 'vertical';
+    margin?: number;
+    x?: number;
+    y?: number;
+    itemStyle?: TextStyle;
+    itemHoverStyle?: TextStyle;
+    itemDistance?: number;
+    symbolHeight?: number;
+    symbolWidth?: number;
+    symbolRadius?: number;
+    symbolPadding?: number;
+    labelFormatter?: LegendLabelFormatter<TSeriesMeta>;
+}
+export interface TooltipTableColumn<TChartMeta = unknown, TSeriesMeta = unknown> {
+    /**
+     * A function is resolved per hover, and one that returns `null` drops the whole
+     * column: that is how a "vs the previous point" column names the date it
+     * compares against and disappears on the first point, where there is none.
+     */
+    title?: string | TooltipFormatter<TChartMeta, TSeriesMeta>;
+    align?: 'left' | 'right';
+    cell: TooltipCellFormatter<TSeriesMeta>;
+}
+/**
+ * Lays the tooltip out as a table: a header line, a heading row, and one row per
+ * series with its swatch. Use it when a point carries more than one figure —
+ * a count and its share of the whole — and a single line would run them together.
+ */
+export interface TooltipTableOptions<TChartMeta = unknown, TSeriesMeta = unknown> {
+    /** The line above the table. Defaults to the formatted x. */
+    header?: TooltipFormatter<TChartMeta, TSeriesMeta>;
+    /** Heading over the series-name column. */
+    seriesTitle?: string;
+    columns: readonly TooltipTableColumn<TChartMeta, TSeriesMeta>[];
+}
+export interface TooltipOptions<TChartMeta = unknown, TSeriesMeta = unknown> {
+    enabled?: boolean;
+    shared?: boolean;
+    table?: TooltipTableOptions<TChartMeta, TSeriesMeta>;
+    /** `callout` anchors a beaked bubble to the point; `box` floats near the cursor. */
+    shape?: 'callout' | 'box';
+    followPointer?: boolean;
+    formatter?: TooltipFormatter<TChartMeta, TSeriesMeta>;
+    dateFormat?: string;
+    valuePrefix?: string;
+    valueSuffix?: string;
+    backgroundColor?: string;
+    borderColor?: string;
+    borderRadius?: number;
+    padding?: number;
+    shadow?: ShadowOptions | false;
+    style?: TextStyle;
+}
+export interface MarkerStateOptions {
+    enabled?: boolean;
+    radius?: number;
+    lineWidth?: number;
+}
+export interface MarkerOptions {
+    enabled?: boolean;
+    symbol?: 'circle' | 'square' | 'none';
+    radius?: number;
+    width?: number;
+    height?: number;
+    lineWidth?: number;
+    lineColor?: string;
+    fillColor?: string;
+    states?: {
+        hover?: MarkerStateOptions;
+    };
+}
+export interface DataLabelsOptions<TSeriesMeta = unknown> {
+    enabled?: boolean;
+    format?: string;
+    formatter?: DataLabelFormatter<TSeriesMeta>;
+    align?: 'left' | 'center' | 'right';
+    color?: string;
+    padding?: number;
+    allowOverlap?: boolean;
+    style?: TextStyle;
+    /**
+     * Style for every line after the first, when the label text carries newlines —
+     * the muted share printed under a headline figure.
+     */
+    secondaryStyle?: TextStyle;
+}
+export interface SeriesStatesOptions {
+    hover?: {
+        enabled?: boolean;
+        lineWidth?: number;
+        brightness?: number;
+        /** Deepens a translucent body on hover, where brightening a pale fill does nothing. */
+        fillOpacity?: number;
+    };
+    inactive?: {
+        opacity?: number;
+    };
+}
+export type PointTuple = readonly [x: number, y: number] | readonly [category: string, y: number] | readonly [x: number, y: number, value: number];
+export interface PointObject<TPointMeta = unknown> {
+    x?: number | string;
+    y?: number | null;
+    value?: number | null;
+    name?: string;
+    color?: string;
+    meta?: TPointMeta;
+}
+export type SeriesPoint<TPointMeta = unknown> = number | null | PointTuple | PointObject<TPointMeta>;
+export type SeriesData<TPointMeta = unknown> = readonly SeriesPoint<TPointMeta>[];
+export interface SeriesOptionsBase<TSeriesMeta = unknown, TPointMeta = unknown> {
+    type: string;
+    name?: string;
+    data?: SeriesData<TPointMeta>;
+    color?: string;
+    visible?: boolean;
+    showInLegend?: boolean;
+    /**
+     * Overrides the shape the legend uses for this series. A line series keys with
+     * a dash by default; a dot reads better when the legend is a plain key above
+     * the plot rather than a swatch column beside it.
+     */
+    legendSymbol?: 'circle' | 'square' | 'line';
+    yAxis?: number;
+    stacking?: Stacking;
+    meta?: TSeriesMeta;
+    lineWidth?: number;
+    borderWidth?: number;
+    borderColor?: string;
+    borderRadius?: number;
+    /**
+     * `top` strokes only the edge the value reaches — the top of a bar counting up,
+     * the bottom of one counting down — which is the funnel look: pale body, one
+     * bright rule along the value. `all` (the default) is the Highcharts box.
+     */
+    borderPosition?: 'all' | 'top';
+    fillOpacity?: number;
+    pointPadding?: number;
+    groupPadding?: number;
+    minPointLength?: number;
+    innerSize?: number | string;
+    marker?: MarkerOptions;
+    dataLabels?: DataLabelsOptions<TSeriesMeta>;
+    states?: SeriesStatesOptions;
+    animation?: AnimationOptions | false;
+    cursor?: 'pointer' | 'default';
+    turboThreshold?: number;
+}
+export interface PlotOptions<TSeriesMeta = unknown, TPointMeta = unknown> {
+    series?: Partial<SeriesOptionsBase<TSeriesMeta, TPointMeta>>;
+    [seriesType: string]: Partial<SeriesOptionsBase<TSeriesMeta, TPointMeta>> | undefined;
+}
+export interface ChartOptions<TChartMeta = unknown, TSeriesMeta = unknown, TPointMeta = unknown> {
+    chart?: ChartRootOptions;
+    title?: TitleOptions;
+    subtitle?: TitleOptions;
+    xAxis?: AxisOptions | readonly AxisOptions[];
+    yAxis?: AxisOptions | readonly AxisOptions[];
+    colorAxis?: ColorAxisOptions;
+    legend?: LegendOptions<TSeriesMeta>;
+    tooltip?: TooltipOptions<TChartMeta, TSeriesMeta>;
+    plotOptions?: PlotOptions<TSeriesMeta, TPointMeta>;
+    series?: readonly SeriesOptionsBase<TSeriesMeta, TPointMeta>[];
+    colors?: readonly string[];
+    meta?: TChartMeta;
+    /**
+     * Turns a bare number into text everywhere the chart prints one without a
+     * formatter of its own: axis labels, data labels, stack labels and the default
+     * tooltip. Replaces repeating the same thousands separator in four callbacks.
+     */
+    numberFormat?: (value: number) => string;
+}

package/core/types/options.js

@@ -0,0 +1,2 @@
+/** `zIndex` at or above this draws over the series instead of under it. */
+export const ABOVE_SERIES_Z_INDEX = 5;

package/core/types/renderer.d.ts

@@ -0,0 +1,101 @@
+import { type ReactNode } from 'react';
+import { type Point, type Rect, type SlotGeometry } from './geometry';
+import { type SeriesOptionsBase } from './options';
+import { type AnyScale, type ColorScale, type DomainRange, type ScaleKind, type ValueScale } from './scale';
+import { type NormalizedPoint } from '../data/points';
+export interface DomainAcc {
+    readonly x: DomainRange;
+    readonly y: readonly DomainRange[];
+    readonly color: DomainRange;
+    readonly categories: readonly string[];
+}
+export interface StackedValue {
+    from: number;
+    to: number;
+    total: number;
+}
+export interface HoverState {
+    seriesIndex: number;
+    pointIndex: number;
+}
+export interface RenderContext<TSeries extends SeriesOptionsBase = SeriesOptionsBase> {
+    series: TSeries;
+    seriesIndex: number;
+    points: readonly NormalizedPoint[];
+    plot: Rect;
+    scales: {
+        x: AnyScale;
+        y: ValueScale;
+        color: ColorScale | undefined;
+    };
+    color: string;
+    colors: readonly string[];
+    stacked: readonly (StackedValue | undefined)[] | undefined;
+    slot: SlotGeometry | undefined;
+    hovered: HoverState | undefined;
+    /**
+     * The series is switched off. A renderer whose `exit` is `collapse` draws its
+     * shapes flattened onto their own baseline so the CSS transition on the geometry
+     * carries them there; the rest can ignore it and let the layer fade.
+     */
+    hidden: boolean;
+    /**
+     * Points switched off one by one, by `point.index` — a pie's legend does this.
+     * They are still handed over so their shape can shrink away rather than vanish;
+     * they must not be drawn at full size, counted in a total, or hit-tested.
+     */
+    hiddenPoints: ReadonlySet<number>;
+    animate: boolean;
+    /**
+     * How the chart turns a bare number into text. A renderer reaches for it
+     * wherever it prints a value the caller gave no formatter for.
+     */
+    numberFormat: NumberFormatter;
+}
+/** Chart-wide number-to-text rule; the default is `String`. */
+export type NumberFormatter = (value: number) => string;
+export interface PointHit {
+    seriesIndex: number;
+    pointIndex: number;
+    x: number | string;
+    y: number | null;
+    value: number | null;
+    anchor: Point;
+    distance: number;
+}
+export interface LegendItem {
+    seriesIndex: number;
+    /**
+     * Set when the item stands for a single point rather than the whole series — a
+     * pie slice. Toggling it takes that point out of the chart, not the series.
+     */
+    pointIndex?: number;
+    label: string;
+    color: string;
+    symbol: 'circle' | 'square' | 'line';
+    visible: boolean;
+}
+/**
+ * How a series leaves the plot when it is switched off. Bars read as growing out
+ * of the axis, so they collapse back into it; a line has no baseline to collapse
+ * to and simply fades.
+ */
+export type ExitMotion = 'collapse' | 'fade';
+export interface SeriesRenderer<TSeries extends SeriesOptionsBase = SeriesOptionsBase> {
+    readonly type: string;
+    readonly scales: {
+        x: ScaleKind;
+        y: ScaleKind;
+    };
+    readonly exit?: ExitMotion;
+    /**
+     * The renderer tweens its own geometry frame by frame — the chart then leaves its
+     * shapes alone rather than putting a CSS transition on top, which would fight it.
+     */
+    readonly animatesGeometry?: boolean;
+    extendDomain(series: TSeries, acc: DomainAcc): DomainAcc;
+    render(ctx: RenderContext<TSeries>): ReactNode;
+    hitTest(ctx: RenderContext<TSeries>, pointer: Point): PointHit[] | null;
+    legendItems(series: TSeries, seriesIndex: number, colors: readonly string[]): LegendItem[];
+}
+export type AnySeriesRenderer = SeriesRenderer<SeriesOptionsBase>;

package/core/types/renderer.js

@@ -0,0 +1 @@
+export {};

package/core/types/scale.d.ts

@@ -0,0 +1,34 @@
+export type ScaleKind = 'linear' | 'time' | 'band' | 'color' | 'none';
+export type TimeUnit = 'second' | 'minute' | 'hour' | 'day' | 'week' | 'month' | 'year';
+export interface ContinuousScale {
+    readonly kind: 'linear' | 'time';
+    map(value: number): number;
+    invert(px: number): number;
+    ticks(hint?: number): number[];
+    domain(): readonly [number, number];
+    range(): readonly [number, number];
+}
+export interface BandScale {
+    readonly kind: 'band';
+    map(value: string): number;
+    invert(px: number): string | undefined;
+    ticks(): string[];
+    domain(): readonly string[];
+    range(): readonly [number, number];
+    bandwidth(): number;
+    step(): number;
+}
+export type ColorStop = readonly [position: number, color: string];
+export interface ColorScale {
+    readonly kind: 'color';
+    map(value: number): string;
+    domain(): readonly [number, number];
+    stops(): readonly ColorStop[];
+}
+export type AnyScale = ContinuousScale | BandScale | ColorScale;
+/** What a renderer can be handed as its value axis: numbers or categories. */
+export type ValueScale = ContinuousScale | BandScale;
+export interface DomainRange {
+    min: number;
+    max: number;
+}

package/core/types/scale.js

@@ -0,0 +1 @@
+export {};

package/index.d.ts

@@ -0,0 +1,16 @@
+export { Chart, type ChartProps } from './core/Chart/Chart';
+export { AreaChart, ColumnChart, LineChart, PieChart, StackedColumnChart, type StackedColumnChartProps, } from './presets';
+export { area } from './series/area';
+export { column } from './series/column';
+export { heatmap } from './series/heatmap';
+export { line } from './series/line';
+export { pie } from './series/pie';
+export { registerSeries, resolveRenderers, getRenderer } from './core/registry/registry';
+export { DEFAULT_COLORS, DEFAULT_GRID_COLOR, DEFAULT_AXIS_COLOR, DEFAULT_TEXT_COLOR, DEFAULT_MUTED_TEXT_COLOR, DEFAULT_SURFACE_COLOR, } from './core/model/palette';
+export { formatTime } from './core/format/time';
+export { type NormalizedPoint } from './core/data/points';
+export type { Point, Rect, Size, SlotGeometry, Spacing, } from './core/types/geometry';
+export type { AnyScale, BandScale, ColorScale, ColorStop, ContinuousScale, DomainRange, ScaleKind, TimeUnit, ValueScale, } from './core/types/scale';
+export type { AxisLabelContext, AxisLabelFormatter, DataLabelContext, DataLabelFormatter, LegendLabelContext, LegendLabelFormatter, TooltipCellFormatter, TooltipContext, TooltipFormatter, TooltipNeighbour, TooltipPoint, } from './core/types/formatter';
+export type { AnimationOptions, AxisLabelsOptions, AxisOptions, AxisTitleOptions, ChartOptions, ChartRootOptions, ColorAxisOptions, DataLabelsOptions, LegendOptions, MarkerOptions, MarkerStateOptions, PlotBandOptions, PlotLabelOptions, PlotLineOptions, PlotOptions, PointObject, PointTuple, SeriesData, SeriesOptionsBase, SeriesPoint, SeriesStatesOptions, ShadowOptions, Stacking, StackLabelsOptions, TextStyle, TitleOptions, TooltipOptions, TooltipTableColumn, TooltipTableOptions, } from './core/types/options';
+export type { AnySeriesRenderer, DomainAcc, ExitMotion, HoverState, LegendItem, PointHit, RenderContext, SeriesRenderer, StackedValue, } from './core/types/renderer';

package/index.js

@@ -0,0 +1,10 @@
+export { Chart } from './core/Chart/Chart';
+export { AreaChart, ColumnChart, LineChart, PieChart, StackedColumnChart } from './presets';
+export { area } from './series/area';
+export { column } from './series/column';
+export { heatmap } from './series/heatmap';
+export { line } from './series/line';
+export { pie } from './series/pie';
+export { registerSeries, resolveRenderers, getRenderer } from './core/registry/registry';
+export { DEFAULT_COLORS, DEFAULT_GRID_COLOR, DEFAULT_AXIS_COLOR, DEFAULT_TEXT_COLOR, DEFAULT_MUTED_TEXT_COLOR, DEFAULT_SURFACE_COLOR } from './core/model/palette';
+export { formatTime } from './core/format/time';

package/package.json

@@ -0,0 +1,64 @@
+{
+  "name": "@pushwoosh/kit-charts",
+  "version": "0.0.1",
+  "description": "Small React chart library on SVG, with a Highcharts-shaped configuration model",
+  "license": "MIT",
+  "repository": {
+    "type": "git",
+    "url": "git+https://gitlab.corp.pushwoosh.com/frontend/development-kit/charts.git"
+  },
+  "keywords": [
+    "chart",
+    "charts",
+    "react",
+    "svg",
+    "dataviz",
+    "visualization",
+    "highcharts-alternative"
+  ],
+  "main": "index.js",
+  "module": "index.js",
+  "types": "index.d.ts",
+  "sideEffects": false,
+  "publishConfig": {
+    "access": "public"
+  },
+  "scripts": {
+    "start": "npm run playground",
+    "build": "pushwoosh-engine lib:build && cp ai-documentation.md LICENSE dist/",
+    "playground": "webpack serve --config ./node_modules/@pushwoosh/frontend-builder-engine/lib/webpack.playground.config.js --stats-error-details",
+    "check": "npm run check:lint && npm run check:types",
+    "check:lint": "echo \"Run check:lint\" && NODE_ENV=production eslint ./src ./playground ./tests",
+    "check:lint-fix": "echo \"Run check:lint\" && NODE_ENV=production eslint ./src ./playground ./tests --fix",
+    "check:types": "echo \"Run check:types\" && pushwoosh-engine lib:check-types && tsc --noEmit -p tsconfig.json",
+    "test": "jest"
+  },
+  "pre-commit": "check",
+  "dependencies": {
+    "@pushwoosh/kit-constants": "^1.8.0"
+  },
+  "devDependencies": {
+    "@pushwoosh/frontend-builder-engine": "^3.0.0",
+    "@testing-library/jest-dom": "^6.9.1",
+    "@testing-library/react": "^16.3.0",
+    "@types/jest": "^30.0.0",
+    "@types/react": "^18.3.2",
+    "@types/react-dom": "^18.3.0",
+    "@types/styled-components": "^5.1.34",
+    "cross-env": "^7.0.3",
+    "jest": "^30.2.0",
+    "jest-environment-jsdom": "^30.2.0",
+    "pre-commit": "^1.2.2",
+    "react": "^18.3.1",
+    "react-dom": "^18.3.1",
+    "styled-components": "^5.3.11",
+    "ts-jest": "^29.4.6"
+  },
+  "peerDependencies": {
+    "react": ">=18.0.0",
+    "styled-components": ">=5.3.3"
+  },
+  "engines": {
+    "node": ">= 18"
+  }
+}

package/presets/AreaChart.d.ts

@@ -0,0 +1,3 @@
+import { type ReactElement } from 'react';
+import { type ChartProps } from '../core/Chart/Chart';
+export declare function AreaChart<TChartMeta = unknown, TSeriesMeta = unknown>(props: ChartProps<TChartMeta, TSeriesMeta>): ReactElement;

package/presets/AreaChart.js

@@ -0,0 +1,13 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+import { Chart } from '../core/Chart/Chart';
+import { area } from '../series/area';
+export function AreaChart(props) {
+  const {
+    renderers,
+    ...rest
+  } = props;
+  return _jsx(Chart, {
+    ...rest,
+    renderers: renderers ? [area, ...renderers] : [area]
+  });
+}

package/presets/ColumnChart.d.ts

@@ -0,0 +1,3 @@
+import { type ReactElement } from 'react';
+import { type ChartProps } from '../core/Chart/Chart';
+export declare function ColumnChart<TChartMeta = unknown, TSeriesMeta = unknown>(props: ChartProps<TChartMeta, TSeriesMeta>): ReactElement;

package/presets/ColumnChart.js

@@ -0,0 +1,13 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+import { Chart } from '../core/Chart/Chart';
+import { column } from '../series/column';
+export function ColumnChart(props) {
+  const {
+    renderers,
+    ...rest
+  } = props;
+  return _jsx(Chart, {
+    ...rest,
+    renderers: renderers ? [column, ...renderers] : [column]
+  });
+}

package/presets/LineChart.d.ts

@@ -0,0 +1,3 @@
+import { type ReactElement } from 'react';
+import { type ChartProps } from '../core/Chart/Chart';
+export declare function LineChart<TChartMeta = unknown, TSeriesMeta = unknown>(props: ChartProps<TChartMeta, TSeriesMeta>): ReactElement;

package/presets/LineChart.js

@@ -0,0 +1,13 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+import { Chart } from '../core/Chart/Chart';
+import { line } from '../series/line';
+export function LineChart(props) {
+  const {
+    renderers,
+    ...rest
+  } = props;
+  return _jsx(Chart, {
+    ...rest,
+    renderers: renderers ? [line, ...renderers] : [line]
+  });
+}

package/presets/PieChart.d.ts

@@ -0,0 +1,3 @@
+import { type ReactElement } from 'react';
+import { type ChartProps } from '../core/Chart/Chart';
+export declare function PieChart<TChartMeta = unknown, TSeriesMeta = unknown>(props: ChartProps<TChartMeta, TSeriesMeta>): ReactElement;

package/presets/PieChart.js

@@ -0,0 +1,13 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+import { Chart } from '../core/Chart/Chart';
+import { pie } from '../series/pie';
+export function PieChart(props) {
+  const {
+    renderers,
+    ...rest
+  } = props;
+  return _jsx(Chart, {
+    ...rest,
+    renderers: renderers ? [pie, ...renderers] : [pie]
+  });
+}

package/presets/StackedColumnChart.d.ts

@@ -0,0 +1,7 @@
+import { type ReactElement } from 'react';
+import { type ChartProps } from '../core/Chart/Chart';
+import { type Stacking } from '../core/types/options';
+export interface StackedColumnChartProps<TChartMeta = unknown, TSeriesMeta = unknown> extends ChartProps<TChartMeta, TSeriesMeta> {
+    stacking?: Stacking;
+}
+export declare function StackedColumnChart<TChartMeta = unknown, TSeriesMeta = unknown>(props: StackedColumnChartProps<TChartMeta, TSeriesMeta>): ReactElement;