@gravity-ui/charts 0.1.0

package/dist/esm/types/chart/base.d.ts

@@ -0,0 +1,48 @@
+import type { MeaningfulAny } from '../misc';
+export type BaseSeries = {
+    /** Initial visibility of the series */
+    visible?: boolean;
+    /**
+     * Options for the series data labels, appearing next to each data point.
+     * */
+    dataLabels?: {
+        /**
+         * Enable or disable the data labels
+         * @default true
+         */
+        enabled?: boolean;
+        style?: Partial<BaseTextStyle>;
+        /**
+         * @default 5
+         * */
+        padding?: number;
+        /**
+         * @default false
+         * */
+        allowOverlap?: boolean;
+        /**
+         * Allows to use any html-tags to display the content.
+         * The element will be displayed outside the box of the SVG element.
+         *
+         * @default false
+         * */
+        html?: boolean;
+    };
+    /** You can set the cursor to "pointer" if you have click events attached to the series, to signal to the user that the points and lines can be clicked. */
+    cursor?: string;
+};
+export type BaseSeriesData<T = MeaningfulAny> = {
+    /**
+     * A reserved subspace to store options and values for customized functionality
+     *
+     * Here you can add additional data for your own event callbacks and formatter callbacks
+     */
+    custom?: T;
+    /** Individual color for the data chunk (point in scatter, segment in pie, bar etc) */
+    color?: string;
+};
+export type BaseTextStyle = {
+    fontSize: string;
+    fontWeight?: string;
+    fontColor?: string;
+};

package/dist/esm/types/chart/base.js

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

package/dist/esm/types/chart/chart.d.ts

@@ -0,0 +1,15 @@
+export type ChartMargin = {
+    top: number;
+    right: number;
+    bottom: number;
+    left: number;
+};
+export type ChartOptions = {
+    margin?: Partial<ChartMargin>;
+    events?: {
+        click?: (data: {
+            point: unknown;
+            series: unknown;
+        }, event: PointerEvent) => void;
+    };
+};

package/dist/esm/types/chart/chart.js

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

package/dist/esm/types/chart/halo.d.ts

@@ -0,0 +1,9 @@
+/** The halo appearing around the hovered part of series(point in line-type series or slice in pie charts) */
+export type Halo = {
+    /** Enable or disable the halo */
+    enabled?: boolean;
+    /** The opacity of halo */
+    opacity?: number;
+    /** The pixel size of the halo. Radius for point markers or width of the outside slice in pie charts. */
+    size?: number;
+};

package/dist/esm/types/chart/halo.js

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

package/dist/esm/types/chart/legend.d.ts

@@ -0,0 +1,92 @@
+import type { BaseTextStyle } from './base';
+export type ChartLegend = {
+    enabled?: boolean;
+    /**
+     * Different types for different color schemes.
+     * If the color scheme is continuous, a gradient legend will be drawn.
+     * Otherwise, samples for different point values
+     *
+     * @default 'discrete'
+     */
+    type?: 'discrete' | 'continuous';
+    /**
+     * The horizontal alignment of the legend box within the chart area.
+     *
+     * @default center
+     * */
+    align?: 'left' | 'center' | 'right';
+    /**
+     * Defines the pixel distance between each legend item
+     *
+     * @default 20
+     * */
+    itemDistance?: number;
+    /** CSS styles for each legend item */
+    itemStyle?: BaseTextStyle;
+    /**
+     * The space between the legend and the axis labels or chart area.
+     *
+     * @default 15
+     */
+    margin?: number;
+    title?: {
+        text?: string;
+        /** CSS styles for the title */
+        style?: Partial<BaseTextStyle>;
+        /** The distance(in pixels) between the main content of the legend and its title
+         *
+         * Defaults to 4 for horizontal axes, 8 for vertical.
+         * */
+        margin?: number;
+    };
+    colorScale?: {
+        stops?: number[];
+        colors: string[];
+        domain?: number[];
+    };
+    width?: number;
+};
+export type BaseLegendSymbol = {
+    /**
+     * The pixel padding between the legend item symbol and the legend item text.
+     *
+     * @default 5
+     * */
+    padding?: number;
+};
+export type RectLegendSymbolOptions = BaseLegendSymbol & {
+    /**
+     * The pixel width of the symbol for series types that use a rectangle in the legend
+     *
+     * @default 10
+     * */
+    width?: number;
+    /**
+     * The pixel width of the symbol for series types that use a rectangle in the legend
+     *
+     * @default 10
+     * */
+    height?: number;
+    /**
+     * The border radius of the symbol for series types that use a rectangle in the legend.
+     *
+     * Defaults to half the symbolHeight, effectively creating a circle.
+     */
+    radius?: number;
+};
+export type PathLegendSymbolOptions = BaseLegendSymbol & {
+    /**
+     * The pixel width of the symbol for series types that use a path in the legend
+     *
+     * @default 16
+     * */
+    width?: number;
+};
+export type SymbolLegendSymbolOptions = BaseLegendSymbol & {
+    /**
+     * The pixel width of the symbol for series types that use a symbol in the legend
+     *
+     * @default 8
+     * */
+    width?: number;
+};

package/dist/esm/types/chart/legend.js

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

package/dist/esm/types/chart/line.d.ts

@@ -0,0 +1,57 @@
+import type { DashStyle, LineCap, SeriesType } from '../../constants';
+import type { MeaningfulAny } from '../misc';
+import type { BaseSeries, BaseSeriesData } from './base';
+import type { ChartLegend, RectLegendSymbolOptions } from './legend';
+import type { PointMarkerOptions } from './marker';
+export type LineSeriesData<T = MeaningfulAny> = BaseSeriesData<T> & {
+    /**
+     * The `x` value of the point. Depending on the context , it may represents:
+     * - numeric value (for `linear` x axis)
+     * - timestamp value (for `datetime` x axis)
+     * - x axis category value (for `category` x axis). If the type is a string, then it is a category value itself. If the type is a number, then it is the index of an element in the array of categories described in `xAxis.categories`
+     */
+    x?: string | number;
+    /**
+     * The `y` value of the point. Depending on the context , it may represents:
+     * - numeric value (for `linear` y axis)
+     * - timestamp value (for `datetime` y axis)
+     * - y axis category value (for `category` y axis). If the type is a string, then it is a category value itself. If the type is a number, then it is the index of an element in the array of categories described in `yAxis[0].categories`
+     */
+    y?: string | number;
+    /** Data label value of the point. If not specified, the y value is used. */
+    label?: string | number;
+    marker?: {
+        states?: {
+            normal?: {
+                enabled: boolean;
+            };
+        };
+    };
+};
+export type LineSeries<T = MeaningfulAny> = BaseSeries & {
+    type: typeof SeriesType.Line;
+    data: LineSeriesData<T>[];
+    /** The name of the series (used in legend, tooltip etc) */
+    name: string;
+    /** The main color of the series (hex, rgba) */
+    color?: string;
+    /** Pixel width of the graph line.
+     *
+     * @default 1
+     * */
+    lineWidth?: number;
+    /** Individual series legend options. Has higher priority than legend options in widget data */
+    legend?: ChartLegend & {
+        symbol?: RectLegendSymbolOptions;
+    };
+    /** Options for the point markers of line series */
+    marker?: PointMarkerOptions;
+    /** Option for line stroke style */
+    dashStyle?: `${DashStyle}`;
+    /** Option for line cap style */
+    linecap?: `${LineCap}`;
+    /** Individual opacity for the line. */
+    opacity?: number;
+    /** Y-axis index (when using two axes) */
+    yAxis?: number;
+};

package/dist/esm/types/chart/line.js

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

package/dist/esm/types/chart/marker.d.ts

@@ -0,0 +1,12 @@
+import type { SymbolType } from '../../constants';
+export type PointMarkerOptions = {
+    /** Enable or disable the point marker */
+    enabled?: boolean;
+    /** The radius of the point marker */
+    radius?: number;
+    /** The color of the point marker's border */
+    borderColor?: string;
+    /** The width of the point marker's border */
+    borderWidth?: number;
+    symbol?: `${SymbolType}`;
+};

package/dist/esm/types/chart/marker.js

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

package/dist/esm/types/chart/pie.d.ts

@@ -0,0 +1,88 @@
+import type { BaseType } from 'd3';
+import type { SeriesType } from '../../constants';
+import type { MeaningfulAny } from '../misc';
+import type { BaseSeries, BaseSeriesData } from './base';
+import type { ChartLegend, RectLegendSymbolOptions } from './legend';
+export type PieSeriesData<T = MeaningfulAny> = BaseSeriesData<T> & {
+    /** The value of the pie segment. */
+    value: number;
+    /** The name of the pie segment (used in legend, tooltip etc). */
+    name: string;
+    /** Initial visibility of the pie segment. */
+    visible?: boolean;
+    /** Initial data label of the pie segment. If not specified, the value is used. */
+    label?: string;
+    /** Individual opacity for the pie segment. */
+    opacity?: number;
+};
+export type ConnectorShape = 'straight-line' | 'polyline';
+export type ConnectorCurve = 'linear' | 'basic';
+export type PieSeries<T = MeaningfulAny> = BaseSeries & {
+    type: typeof SeriesType.Pie;
+    data: PieSeriesData<T>[];
+    /**
+     * The color of the border surrounding each segment.
+     * @default `--g-color-base-background` from @gravity-ui/uikit.
+     */
+    borderColor?: string;
+    /**
+     * The width of the border surrounding each segment.
+     * @default '1px'
+     */
+    borderWidth?: number;
+    /**
+     * The corner radius of the border surrounding each segment.
+     * @default 0
+     */
+    borderRadius?: number;
+    /** The center of the pie chart relative to the chart area. */
+    center?: [string | number | null, string | number | null];
+    /**
+     * The inner radius of the pie.
+     * @default 0
+     */
+    innerRadius?: string | number;
+    /** The radius of the pie relative to the chart area. The default behaviour is to scale to the chart area. */
+    radius?: string | number;
+    /** Individual series legend options. Has higher priority than legend options in widget data */
+    legend?: ChartLegend & {
+        symbol?: RectLegendSymbolOptions;
+    };
+    dataLabels?: BaseSeries['dataLabels'] & {
+        /**
+         * The distance of the data label from the pie's edge.
+         *
+         * @default 30
+         * */
+        distance?: number;
+        /**
+         * The distance from the data label to the connector.
+         *
+         * @default 5
+         * */
+        connectorPadding?: number;
+        /**
+         * The method that is used to generate the connector path.
+         *
+         * @default 'polyline'
+         * */
+        connectorShape?: ConnectorShape;
+        /**
+         * How to interpolate between two-dimensional [x, y] points for a connector.
+         * Works only if connectorShape equals to 'polyline'
+         *
+         * @default 'basic'
+         * */
+        connectorCurve?: ConnectorCurve;
+    };
+    /**
+     * Function for adding custom svg nodes for a series
+     *
+     * @return BaseType
+     * */
+    renderCustomShape?: (args: {
+        series: {
+            innerRadius: number;
+        };
+    }) => BaseType;
+};

package/dist/esm/types/chart/pie.js

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

package/dist/esm/types/chart/scatter.d.ts

@@ -0,0 +1,46 @@
+import type { SeriesType, SymbolType } from '../../constants';
+import type { MeaningfulAny } from '../misc';
+import type { BaseSeries, BaseSeriesData } from './base';
+import type { ChartLegend, RectLegendSymbolOptions } from './legend';
+export type ScatterSeriesData<T = MeaningfulAny> = BaseSeriesData<T> & {
+    /**
+     * The `x` value of the point. Depending on the context , it may represents:
+     * - numeric value (for `linear` x axis)
+     * - timestamp value (for `datetime` x axis)
+     * - x axis category value (for `category` x axis). If the type is a string, then it is a category value itself. If the type is a number, then it is the index of an element in the array of categories described in `xAxis.categories`
+     */
+    x?: string | number;
+    /**
+     * The `y` value of the point. Depending on the context , it may represents:
+     * - numeric value (for `linear` y axis)
+     * - timestamp value (for `datetime` y axis)
+     * - y axis category value (for `category` y axis). If the type is a string, then it is a category value itself. If the type is a number, then it is the index of an element in the array of categories described in `yAxis[0].categories`
+     */
+    y?: string | number;
+    /**
+     * Corresponding value of axis category.
+     *
+     * @deprecated use `x` or `y` instead
+     */
+    category?: string;
+    /** Individual radius for the point. */
+    radius?: number;
+    /** Individual opacity for the point. */
+    opacity?: number;
+};
+export type ScatterSeries<T = MeaningfulAny> = BaseSeries & {
+    type: typeof SeriesType.Scatter;
+    data: ScatterSeriesData<T>[];
+    /** The name of the series (used in legend, tooltip etc) */
+    name: string;
+    /** The main color of the series (hex, rgba) */
+    color?: string;
+    /** A predefined shape or symbol for the dot */
+    symbolType?: `${SymbolType}`;
+    /** Individual series legend options. Has higher priority than legend options in widget data */
+    legend?: ChartLegend & {
+        symbol?: RectLegendSymbolOptions;
+    };
+    /** Y-axis index (when using two axes) */
+    yAxis?: number;
+};

package/dist/esm/types/chart/scatter.js

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

package/dist/esm/types/chart/series.d.ts

@@ -0,0 +1,226 @@
+import type React from 'react';
+import type { DashStyle, LineCap } from '../../constants';
+import type { MeaningfulAny } from '../misc';
+import type { AreaSeries, AreaSeriesData } from './area';
+import type { BarXSeries, BarXSeriesData } from './bar-x';
+import type { BarYSeries, BarYSeriesData } from './bar-y';
+import type { Halo } from './halo';
+import type { LineSeries, LineSeriesData } from './line';
+import type { PointMarkerOptions } from './marker';
+import type { PieSeries, PieSeriesData } from './pie';
+import type { ScatterSeries, ScatterSeriesData } from './scatter';
+import type { TreemapSeries, TreemapSeriesData } from './treemap';
+import type { WaterfallSeries, WaterfallSeriesData } from './waterfall';
+export type ChartSeries<T = MeaningfulAny> = ScatterSeries<T> | PieSeries<T> | BarXSeries<T> | BarYSeries<T> | LineSeries<T> | AreaSeries<T> | TreemapSeries<T> | WaterfallSeries<T>;
+export type ChartSeriesData<T = MeaningfulAny> = ScatterSeriesData<T> | PieSeriesData<T> | BarXSeriesData<T> | BarYSeriesData<T> | LineSeriesData<T> | AreaSeriesData<T> | TreemapSeriesData<T> | WaterfallSeriesData<T>;
+export type DataLabelRendererData<T = MeaningfulAny> = {
+    data: ChartSeriesData<T>;
+};
+type BasicHoverState = {
+    /**
+     * Enable separate styles for the hovered series.
+     *
+     * @default true
+     * */
+    enabled?: boolean;
+    /**
+     * How much to brighten/darken the point on hover. Use positive to brighten, negative to darken.
+     * The behavior of this property is dependent on the implementing color space ([more details](https://d3js.org/d3-color#color_brighter)).
+     * For example in case of using rgb color you can use floating point number from `-5.0` to `5.0`.
+     * Rgb color space is used by default.
+     *
+     * @default 0.3
+     */
+    brightness?: number;
+};
+export type BasicInactiveState = {
+    /**
+     * Enable separate styles for the inactive series.
+     *
+     * @default true
+     * */
+    enabled?: boolean;
+    /**
+     * Opacity of series elements (bars, data labels)
+     *
+     * @default 0.5
+     * */
+    opacity?: number;
+};
+export type ChartSeriesOptions = {
+    /** Individual data label for each point. */
+    dataLabels?: {
+        /** Enable or disable the data labels */
+        enabled?: boolean;
+        /** Callback function to render the data label */
+        renderer?: (args: DataLabelRendererData) => React.SVGTextElementAttributes<SVGTextElement>;
+    };
+    'bar-x'?: {
+        /** The maximum allowed pixel width for a column.
+         * This prevents the columns from becoming too wide when there is a small number of points in the chart.
+         *
+         * @default 50
+         */
+        barMaxWidth?: number;
+        /** Padding between each column or bar, in x axis units.
+         *
+         * @default 0.1
+         * */
+        barPadding?: number;
+        /** Padding between each value groups, in x axis units
+         *
+         * @default 0.2
+         */
+        groupPadding?: number;
+        dataSorting?: {
+            /** Determines what data value should be used to sort by.
+             * Possible values are undefined to disable, "name" to sort by series name or "y"
+             *
+             * @default undefined
+             * */
+            key?: 'name' | 'y' | undefined;
+            /** Sorting direction.
+             *
+             * @default 'asc'
+             * */
+            direction?: 'asc' | 'desc';
+        };
+        /** Options for the series states that provide additional styling information to the series. */
+        states?: {
+            hover?: BasicHoverState;
+            inactive?: BasicInactiveState;
+        };
+    };
+    'bar-y'?: {
+        /** The maximum allowed pixel width for a column.
+         * This prevents the columns from becoming too wide when there is a small number of points in the chart.
+         *
+         * @default 50
+         */
+        barMaxWidth?: number;
+        /** Padding between each column or bar, in x axis units.
+         *
+         * @default 0.1
+         * */
+        barPadding?: number;
+        /** Padding between each value groups, in x axis units
+         *
+         * @default 0.2
+         */
+        groupPadding?: number;
+        dataSorting?: {
+            /** Determines what data value should be used to sort by.
+             * Possible values are undefined to disable, "name" to sort by series name or "x"
+             *
+             * @default undefined
+             * */
+            key?: 'name' | 'x' | undefined;
+            /** Sorting direction.
+             *
+             * @default 'asc'
+             * */
+            direction?: 'asc' | 'desc';
+        };
+        /** Options for the series states that provide additional styling information to the series. */
+        states?: {
+            hover?: BasicHoverState;
+            inactive?: BasicInactiveState;
+        };
+    };
+    pie?: {
+        /** Options for the series states that provide additional styling information to the series. */
+        states?: {
+            hover?: BasicHoverState & {
+                /** Options for the halo appearing outside the hovered slice */
+                halo?: Halo;
+            };
+            inactive?: BasicInactiveState;
+        };
+    };
+    scatter?: {
+        /** Options for the series states that provide additional styling information to the series. */
+        states?: {
+            hover?: BasicHoverState & {
+                marker?: PointMarkerOptions & {
+                    /** Options for the halo appearing around the hovered point */
+                    halo?: Halo;
+                };
+            };
+            inactive?: BasicInactiveState;
+        };
+    };
+    line?: {
+        /** Pixel width of the graph line.
+         *
+         * @default 1
+         * */
+        lineWidth?: number;
+        /** Options for the series states that provide additional styling information to the series. */
+        states?: {
+            hover?: BasicHoverState & {
+                marker?: PointMarkerOptions & {
+                    /** Options for the halo appearing around the hovered point */
+                    halo?: Halo;
+                };
+            };
+            inactive?: BasicInactiveState;
+        };
+        /** Options for the point markers of line series */
+        marker?: PointMarkerOptions;
+        /** Options for line style
+         *
+         * @default 'Solid'
+         * */
+        dashStyle?: `${DashStyle}`;
+        /** Options for line cap style
+         *
+         * @default 'round' when dashStyle is not 'solid', 'none' when dashStyle is not 'solid'
+         * */
+        linecap?: `${LineCap}`;
+    };
+    area?: {
+        /** Pixel width of the graph line.
+         *
+         * @default 1
+         * */
+        lineWidth?: number;
+        /** Options for the series states that provide additional styling information to the series. */
+        states?: {
+            hover?: BasicHoverState & {
+                marker?: PointMarkerOptions & {
+                    /** Options for the halo appearing around the hovered point */
+                    halo?: Halo;
+                };
+            };
+            inactive?: BasicInactiveState;
+        };
+        /** Options for the point markers of line series */
+        marker?: PointMarkerOptions;
+    };
+    treemap?: {
+        /** Options for the series states that provide additional styling information to the series. */
+        states?: {
+            hover?: BasicHoverState;
+            inactive?: BasicInactiveState;
+        };
+    };
+    waterfall?: {
+        /** The maximum allowed pixel width for a column.
+         * This prevents the columns from becoming too wide when there is a small number of points in the chart.
+         *
+         * @default 50
+         */
+        barMaxWidth?: number;
+        /** Padding between each column or bar, in x axis units.
+         *
+         * @default 0.1
+         * */
+        barPadding?: number;
+        /** Options for the series states that provide additional styling information to the series. */
+        states?: {
+            hover?: BasicHoverState;
+            inactive?: BasicInactiveState;
+        };
+    };
+};
+export {};

package/dist/esm/types/chart/series.js

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

package/dist/esm/types/chart/split.d.ts

@@ -0,0 +1,13 @@
+import type { BaseTextStyle } from './base';
+export type SplitPlotOptions = {
+    title?: {
+        text: string;
+        style?: Partial<BaseTextStyle>;
+    };
+};
+export type ChartSplit = {
+    enable: boolean;
+    layout?: 'vertical';
+    gap?: string | number;
+    plots?: SplitPlotOptions[];
+};

package/dist/esm/types/chart/split.js

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

package/dist/esm/types/chart/title.d.ts

@@ -0,0 +1,5 @@
+import type { BaseTextStyle } from './base';
+export type ChartTitle = {
+    text: string;
+    style?: Partial<BaseTextStyle>;
+};

package/dist/esm/types/chart/title.js

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