@gravity-ui/chartkit 5.21.0 → 5.22.1

package/build/index.d.ts

@@ -1,6 +1,5 @@
 import { ChartKit } from './components/ChartKit';
 import { settings } from './libs';
-export * from './types/widget-data';
 export * from './libs/chartkit-error/chartkit-error';
 export type { ChartKitLang, ChartKitOnLoadData, ChartKitOnRenderData, ChartKitOnChartLoad, ChartKitOnError, ChartKitPlugin, ChartKitProps, ChartKitRef, ChartKitWidgetRef, ChartKitType, ChartKitWidget, } from './types';
 export { settings };

package/build/index.js

@@ -1,6 +1,5 @@
 import { ChartKit } from './components/ChartKit';
 import { settings } from './libs';
-export * from './types/widget-data';
 export * from './libs/chartkit-error/chartkit-error';
 export { settings };
 export default ChartKit;

package/build/plugins/d3/renderer/D3Widget.d.ts

@@ -2,7 +2,7 @@ import React from 'react';
 import type { ChartKitWidgetRef } from '../../../types';
 declare const D3Widget: React.ForwardRefExoticComponent<{
     type: "d3";
-    data: import("../../../types").ChartKitWidgetData;
+    data: import("@gravity-ui/charts").ChartData<any>;
     id?: string | undefined;
     isMobile?: boolean | undefined;
     onLoad?: ((data?: import("../../../types").ChartKitOnLoadData<"d3"> | undefined) => void) | undefined;

package/build/plugins/d3/types.d.ts

@@ -1,4 +1,5 @@
 import type { ChartData } from '@gravity-ui/charts';
+export type { ChartData } from '@gravity-ui/charts';
 export type D3WidgetData = {
     data: ChartData;
 };

package/build/plugins/highcharts/renderer/helpers/config/utils/index.d.ts

@@ -49,10 +49,10 @@ export declare const getSortedData: <T extends Record<string, any>>(data: T[], s
     [Symbol.iterator]?: boolean | undefined;
     readonly [Symbol.unscopables]?: boolean | undefined;
     at?: boolean | undefined;
-} | (() => string) | (() => string) | (() => T | undefined) | ((...items: T[]) => number) | {
+} | ((start?: number | undefined, end?: number | undefined) => T[]) | (() => string) | (() => string) | (() => T | undefined) | ((...items: T[]) => number) | {
     (...items: ConcatArray<T>[]): T[];
     (...items: (T | ConcatArray<T>)[]): T[];
-} | ((separator?: string | undefined) => string) | (() => T[]) | (() => T | undefined) | ((start?: number | undefined, end?: number | undefined) => T[]) | ((compareFn?: ((a: T, b: T) => number) | undefined) => T[]) | {
+} | ((separator?: string | undefined) => string) | (() => T[]) | (() => T | undefined) | ((compareFn?: ((a: T, b: T) => number) | undefined) => T[]) | {
     (start: number, deleteCount?: number | undefined): T[];
     (start: number, deleteCount: number, ...items: T[]): T[];
 } | ((...items: T[]) => number) | ((searchElement: T, fromIndex?: number | undefined) => number) | ((searchElement: T, fromIndex?: number | undefined) => number) | {

package/build/types/index.d.ts

@@ -2,7 +2,6 @@ import React from 'react';
 import { ChartKitError } from '../libs';
 import type { ChartKitWidget } from './widget';
 export type { ChartKitHolidays } from './misc';
-export * from './widget-data';
 export type ChartKitLang = 'ru' | 'en';
 export type ChartKitType = keyof ChartKitWidget;
 export type ChartKitRef = {

package/build/types/index.js

@@ -1,2 +1 @@
-// TODO: remove in the next major. This types should be consumed directly from '@gravity-ui/charts'
-export * from './widget-data';
+export {};

package/build/types/widget.d.ts

@@ -1,9 +1,9 @@
 /// <reference types="react" />
+import type { ChartData } from '@gravity-ui/charts';
 import type { SplitLayoutType } from '../components/SplitPane/types';
 import type { Highcharts, HighchartsWidgetData, StringParams } from '../plugins/highcharts/types';
 import type { IndicatorWidgetData } from '../plugins/indicator/types';
 import type { CustomTooltipProps, Yagr, YagrWidgetData } from '../plugins/yagr/types';
-import type { ChartKitWidgetData } from './widget-data';
 export interface ChartKitWidget {
     yagr: {
         data: YagrWidgetData;
@@ -33,7 +33,7 @@ export interface ChartKitWidget {
         }, callExternalOnChange?: boolean) => void;
     };
     d3: {
-        data: ChartKitWidgetData;
+        data: ChartData;
         widget: never;
         tooltip?: {
             splitted?: boolean;

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@gravity-ui/chartkit",
-  "version": "5.21.0",
+  "version": "5.22.1",
   "description": "React component used to render charts based on any sources you need",
   "license": "MIT",
   "repository": "git@github.com:gravity-ui/ChartKit.git",
@@ -47,7 +47,7 @@
   ],
   "dependencies": {
     "@bem-react/classname": "^1.6.0",
-    "@gravity-ui/charts": "^0.5.0",
+    "@gravity-ui/charts": "0.6.1-beta.1",
     "@gravity-ui/date-utils": "^2.1.0",
     "@gravity-ui/i18n": "^1.0.0",
     "@gravity-ui/yagr": "^4.6.0",

package/build/types/widget-data/area.d.ts

@@ -1,75 +0,0 @@
-import { SeriesType } from '../../constants';
-import type { BaseSeries, BaseSeriesData } from './base';
-import type { ChartKitWidgetLegend, RectLegendSymbolOptions } from './legend';
-import type { PointMarkerOptions } from './marker';
-export type AreaSeriesData<T = any> = 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;
-    /** Individual marker options for the point. */
-    marker?: {
-        /** States for a single point marker. */
-        states?: {
-            /** The normal state of a single point marker. */
-            normal?: {
-                /**
-                 * Enable or disable the point marker.
-                 *
-                 * @default false
-                 * */
-                enabled: boolean;
-            };
-        };
-    };
-};
-export type AreaMarkerSymbol = 'circle' | 'square';
-export type AreaMarkerOptions = PointMarkerOptions & {
-    symbol?: AreaMarkerSymbol;
-};
-export type AreaSeries<T = any> = BaseSeries & {
-    type: typeof SeriesType.Area;
-    data: AreaSeriesData<T>[];
-    /** The name of the series (used in legend, tooltip etc) */
-    name: string;
-    /** Whether to stack the values of each series on top of each other.
-     * Possible values are undefined to disable, "normal" to stack by value or "percent"
-     *
-     * @default undefined
-     * */
-    stacking?: 'normal' | 'percent';
-    /** This option allows grouping series in a stacked chart */
-    stackId?: string;
-    /** The main color of the series (hex, rgba) */
-    color?: string;
-    /** Fill opacity for the area
-     *
-     * @default 0.75
-     * */
-    opacity?: number;
-    /** Pixel width of the graph line.
-     *
-     * @default 1
-     * */
-    lineWidth?: number;
-    /** Individual series legend options. Has higher priority than legend options in widget data */
-    legend?: ChartKitWidgetLegend & {
-        symbol?: RectLegendSymbolOptions;
-    };
-    /** Options for the point markers of line in area series */
-    marker?: AreaMarkerOptions;
-    /** Y-axis index (when using two axes) */
-    yAxis?: number;
-};

package/build/types/widget-data/area.js

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

package/build/types/widget-data/axis.d.ts

@@ -1,85 +0,0 @@
-import type { FormatNumberOptions } from '../../plugins/shared';
-import type { BaseTextStyle } from './base';
-export type ChartKitWidgetAxisType = 'category' | 'datetime' | 'linear' | 'logarithmic';
-export type ChartKitWidgetAxisTitleAlignment = 'left' | 'center' | 'right';
-export type ChartKitWidgetAxisLabels = {
-    /** Enable or disable the axis labels. */
-    enabled?: boolean;
-    /** The label's pixel distance from the perimeter of the plot area.
-     *
-     * @default: 10
-     */
-    margin?: number;
-    /** The pixel padding for axis labels, to ensure white space between them.
-     *
-     * @defaults: 5
-     * */
-    padding?: number;
-    dateFormat?: string;
-    numberFormat?: FormatNumberOptions;
-    style?: Partial<BaseTextStyle>;
-    /** For horizontal axes, enable label rotation to prevent overlapping labels.
-     * If there is enough space, labels are not rotated.
-     * As the chart gets narrower, it will start rotating the labels -45 degrees. */
-    autoRotation?: boolean;
-    /** Rotation of the labels in degrees.
-     *
-     * @default: 0
-     */
-    rotation?: number;
-};
-export type ChartKitWidgetAxis = {
-    categories?: string[];
-    timestamps?: number[];
-    type?: ChartKitWidgetAxisType;
-    /** The axis labels show the number or category for each tick. */
-    labels?: ChartKitWidgetAxisLabels;
-    /** The color of the line marking the axis itself. */
-    lineColor?: string;
-    title?: {
-        text?: string;
-        /** CSS styles for the title */
-        style?: Partial<BaseTextStyle>;
-        /** The pixel distance between the axis labels or line and the title.
-         *
-         * Defaults to 4 for horizontal axes, 8 for vertical.
-         * */
-        margin?: number;
-        /** Alignment of the title. */
-        align?: ChartKitWidgetAxisTitleAlignment;
-        /** Allows limiting of the contents of a title block to the specified number of lines.
-         *  Defaults to 1. */
-        maxRowCount?: number;
-    };
-    /** The minimum value of the axis. If undefined the min value is automatically calculate. */
-    min?: number;
-    /** The grid lines settings. */
-    grid?: {
-        /** Enable or disable the grid lines.
-         *
-         * Defaults to true.
-         * */
-        enabled?: boolean;
-    };
-    ticks?: {
-        /** Pixel interval of the tick marks. Not applicable to categorized axis.
-         * The specified value is only a hint; the interval between ticks can be greater or less depending on the data. */
-        pixelInterval?: number;
-    };
-    /** Padding of the max value relative to the length of the axis.
-     * A padding of 0.05 will make a 100px axis 5px longer.
-     *
-     * Defaults to 0.05 for Y axis and to 0.01 for X axis.
-     * */
-    maxPadding?: number;
-};
-export type ChartKitWidgetXAxis = ChartKitWidgetAxis;
-export type ChartKitWidgetYAxis = ChartKitWidgetAxis & {
-    /** Axis location.
-     * Possible values - 'left' and 'right'.
-     * */
-    position?: 'left' | 'right';
-    /** Property for splitting charts. Determines which area the axis is located in.
-     * */
-    plotIndex?: number;
-};

package/build/types/widget-data/axis.js

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

package/build/types/widget-data/bar-x.d.ts

@@ -1,66 +0,0 @@
-import { SeriesType } from '../../constants';
-import type { BaseSeries, BaseSeriesData } from './base';
-import { ChartKitWidgetLegend, RectLegendSymbolOptions } from './legend';
-import type { ChartKitWidgetSeriesOptions } from './series';
-export type BarXSeriesData<T = any> = BaseSeriesData<T> & {
-    /**
-     * The `x` value of the bar. 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 bar. 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;
-    /** Data label value of the bar-x column. If not specified, the y value is used. */
-    label?: string | number;
-    /** Individual opacity for the bar-x column. */
-    opacity?: number;
-};
-export type BarXSeries<T = any> = BaseSeries & {
-    type: typeof SeriesType.BarX;
-    data: BarXSeriesData<T>[];
-    /** The name of the series (used in legend, tooltip etc) */
-    name: string;
-    /** The main color of the series (hex, rgba) */
-    color?: string;
-    /** Whether to stack the values of each series on top of each other.
-     * Possible values are undefined to disable, "normal" to stack by value or "percent"
-     *
-     * @default undefined
-     * */
-    stacking?: 'normal' | 'percent';
-    /** This option allows grouping series in a stacked chart */
-    stackId?: string;
-    /** Whether to group non-stacked columns or to let them render independent of each other.
-     * When false columns will be laid out individually and overlap each other.
-     *
-     * @default true
-     * */
-    grouping?: boolean;
-    dataLabels?: BaseSeries['dataLabels'] & ChartKitWidgetSeriesOptions['dataLabels'] & {
-        /**
-         * Whether to align the data label inside or outside the box
-         *
-         * @default false
-         * */
-        inside?: boolean;
-    };
-    /** Individual series legend options. Has higher priority than legend options in widget data */
-    legend?: ChartKitWidgetLegend & {
-        symbol?: RectLegendSymbolOptions;
-    };
-    /** Y-axis index (when using two axes) */
-    yAxis?: number;
-};

package/build/types/widget-data/bar-x.js

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

package/build/types/widget-data/bar-y.d.ts

@@ -1,59 +0,0 @@
-import { SeriesType } from '../../constants';
-import type { BaseSeries, BaseSeriesData } from './base';
-import { ChartKitWidgetLegend, RectLegendSymbolOptions } from './legend';
-import type { ChartKitWidgetSeriesOptions } from './series';
-export type BarYSeriesData<T = any> = BaseSeriesData<T> & {
-    /**
-     * The `x` value of the bar. 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 bar. 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 bar. If not specified, the x value is used. */
-    label?: string | number;
-    /** Individual opacity for the bar. */
-    opacity?: number;
-};
-export type BarYSeries<T = any> = BaseSeries & {
-    type: typeof SeriesType.BarY;
-    data: BarYSeriesData<T>[];
-    /** The name of the series (used in legend, tooltip etc) */
-    name: string;
-    /** The main color of the series (hex, rgba) */
-    color?: string;
-    /** Whether to stack the values of each series on top of each other.
-     * Possible values are undefined to disable, "normal" to stack by value or "percent"
-     *
-     * @default undefined
-     * */
-    stacking?: 'normal' | 'percent';
-    /** This option allows grouping series in a stacked chart */
-    stackId?: string;
-    /** Whether to group non-stacked columns or to let them render independent of each other.
-     * When false columns will be laid out individually and overlap each other.
-     *
-     * @default true
-     * */
-    grouping?: boolean;
-    dataLabels?: ChartKitWidgetSeriesOptions['dataLabels'] & {
-        /**
-         * Whether to align the data label inside or outside the box.
-         * For charts with a percentage stack, it is always true.
-         *
-         * @default false
-         * */
-        inside?: boolean;
-    };
-    /** Individual series legend options. Has higher priority than legend options in widget data */
-    legend?: ChartKitWidgetLegend & {
-        symbol?: RectLegendSymbolOptions;
-    };
-};

package/build/types/widget-data/bar-y.js

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

package/build/types/widget-data/base.d.ts

@@ -1,47 +0,0 @@
-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 = any> = {
-    /**
-     * 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/build/types/widget-data/base.js

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

package/build/types/widget-data/chart.d.ts

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

package/build/types/widget-data/chart.js

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

package/build/types/widget-data/halo.d.ts

@@ -1,9 +0,0 @@
-/** 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/build/types/widget-data/halo.js

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

package/build/types/widget-data/index.d.ts

@@ -1,39 +0,0 @@
-import type { ChartKitWidgetXAxis, ChartKitWidgetYAxis } from './axis';
-import type { ChartKitWidgetChart } from './chart';
-import type { ChartKitWidgetLegend } from './legend';
-import type { ChartKitWidgetSeries, ChartKitWidgetSeriesOptions } from './series';
-import type { ChartKitWidgetSplit } from './split';
-import type { ChartKitWidgetTitle } from './title';
-import type { ChartKitWidgetTooltip } from './tooltip';
-export * from './axis';
-export * from './base';
-export * from './chart';
-export * from './legend';
-export * from './pie';
-export * from './scatter';
-export * from './bar-x';
-export * from './bar-y';
-export * from './area';
-export * from './line';
-export * from './series';
-export * from './split';
-export * from './title';
-export * from './tooltip';
-export * from './halo';
-export * from './treemap';
-export * from './waterfall';
-export type ChartKitWidgetData<T = any> = {
-    chart?: ChartKitWidgetChart;
-    legend?: ChartKitWidgetLegend;
-    series: {
-        data: ChartKitWidgetSeries<T>[];
-        options?: ChartKitWidgetSeriesOptions;
-    };
-    title?: ChartKitWidgetTitle;
-    tooltip?: ChartKitWidgetTooltip<T>;
-    xAxis?: ChartKitWidgetXAxis;
-    yAxis?: ChartKitWidgetYAxis[];
-    /** Setting for displaying charts on different plots.
-     * It can be used to visualize related information on multiple charts. */
-    split?: ChartKitWidgetSplit;
-};

package/build/types/widget-data/index.js

@@ -1,17 +0,0 @@
-export * from './axis';
-export * from './base';
-export * from './chart';
-export * from './legend';
-export * from './pie';
-export * from './scatter';
-export * from './bar-x';
-export * from './bar-y';
-export * from './area';
-export * from './line';
-export * from './series';
-export * from './split';
-export * from './title';
-export * from './tooltip';
-export * from './halo';
-export * from './treemap';
-export * from './waterfall';

package/build/types/widget-data/legend.d.ts

@@ -1,92 +0,0 @@
-import type { BaseTextStyle } from './base';
-export type ChartKitWidgetLegend = {
-    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/build/types/widget-data/legend.js

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