@gravity-ui/charts 0.6.1 → 0.8.0

package/dist/cjs/hooks/useShapes/utils.js

@@ -1,4 +1,4 @@
-import { select } from 'd3';
+import { path, select } from 'd3';
 import get from 'lodash/get';
 import { getDataCategoryValue } from '../../utils';
 export function getXValue(args) {
@@ -36,20 +36,25 @@ export function setActiveState(args) {
     }
     return datum;
 }
-export function getLineDashArray(dashStyle, strokeWidth = 2) {
-    const value = dashStyle.toLowerCase();
-    const arrayValue = value
-        .replace('shortdashdotdot', '3,1,1,1,1,1,')
-        .replace('shortdashdot', '3,1,1,1')
-        .replace('shortdot', '1,1,')
-        .replace('shortdash', '3,1,')
-        .replace('longdash', '8,3,')
-        .replace(/dot/g, '1,3,')
-        .replace('dash', '4,3,')
-        .replace(/,$/, '')
-        .split(',')
-        .map((part) => {
-        return `${parseInt(part, 10) * strokeWidth}`;
-    });
-    return arrayValue.join(',').replace(/NaN/g, 'none');
+export function getRectPath(args) {
+    const { x, y, width, height, borderRadius = 0 } = args;
+    const borderRadiuses = typeof borderRadius === 'number' ? new Array(4).fill(borderRadius) : borderRadius;
+    const [borderRadiusTopLeft = 0, borderRadiusTopRight = 0, borderRadiusBottomRight = 0, borderRadiusBottomLeft = 0,] = borderRadiuses !== null && borderRadiuses !== void 0 ? borderRadiuses : [];
+    const p = path();
+    let startAngle = -Math.PI / 2;
+    const angle = Math.PI / 2;
+    p.moveTo(x + borderRadiusTopLeft, y);
+    p.lineTo(x + width - borderRadiusTopRight, y);
+    p.arc(x + width - borderRadiusTopRight, y + borderRadiusTopRight, borderRadiusTopRight, startAngle, startAngle + angle);
+    startAngle += angle;
+    p.lineTo(x + width, y + height - borderRadiusBottomRight);
+    p.arc(x + width - borderRadiusBottomRight, y + height - borderRadiusBottomRight, borderRadiusBottomRight, startAngle, startAngle + angle);
+    startAngle += angle;
+    p.lineTo(x + borderRadiusBottomLeft, y + height);
+    p.arc(x + borderRadiusBottomLeft, y + height - borderRadiusBottomLeft, borderRadiusBottomLeft, startAngle, startAngle + angle);
+    startAngle += angle;
+    p.lineTo(x, y + borderRadiusTopLeft);
+    p.arc(x + borderRadiusTopLeft, y + borderRadiusTopLeft, borderRadiusTopLeft, startAngle, startAngle + angle);
+    p.closePath();
+    return p;
 }

package/dist/cjs/hooks/useShapes/waterfall/index.js

@@ -2,9 +2,8 @@ import React from 'react';
 import { color, line as lineGenerator, select } from 'd3';
 import get from 'lodash/get';
 import { DashStyle } from '../../../constants';
-import { block, filterOverlappingLabels, getWaterfallPointColor } from '../../../utils';
+import { block, filterOverlappingLabels, getLineDashArray, getWaterfallPointColor, } from '../../../utils';
 import { HtmlLayer } from '../HtmlLayer';
-import { getLineDashArray } from '../utils';
 export { prepareWaterfallData } from './prepare-data';
 export * from './types';
 const b = block('d3-waterfall');

package/dist/cjs/types/chart/area.d.ts

@@ -3,7 +3,7 @@ import type { MeaningfulAny } from '../misc';
 import type { BaseSeries, BaseSeriesData } from './base';
 import type { ChartLegend, RectLegendSymbolOptions } from './legend';
 import type { PointMarkerOptions } from './marker';
-export type AreaSeriesData<T = MeaningfulAny> = BaseSeriesData<T> & {
+export interface AreaSeriesData<T = MeaningfulAny> extends BaseSeriesData<T> {
     /**
      * The `x` value of the point. Depending on the context , it may represents:
      * - numeric value (for `linear` x axis)
@@ -35,12 +35,12 @@ export type AreaSeriesData<T = MeaningfulAny> = BaseSeriesData<T> & {
             };
         };
     };
-};
+}
 export type AreaMarkerSymbol = 'circle' | 'square';
-export type AreaMarkerOptions = PointMarkerOptions & {
+export interface AreaMarkerOptions extends PointMarkerOptions {
     symbol?: AreaMarkerSymbol;
-};
-export type AreaSeries<T = MeaningfulAny> = BaseSeries & {
+}
+export interface AreaSeries<T = MeaningfulAny> extends BaseSeries {
     type: typeof SeriesType.Area;
     data: AreaSeriesData<T>[];
     /** The name of the series (used in legend, tooltip etc) */
@@ -73,4 +73,4 @@ export type AreaSeries<T = MeaningfulAny> = BaseSeries & {
     marker?: AreaMarkerOptions;
     /** Y-axis index (when using two axes) */
     yAxis?: number;
-};
+}

package/dist/cjs/types/chart/axis.d.ts

@@ -1,8 +1,9 @@
+import type { DashStyle } from 'src/constants';
 import type { FormatNumberOptions } from '../formatter';
 import type { BaseTextStyle } from './base';
 export type ChartAxisType = 'category' | 'datetime' | 'linear' | 'logarithmic';
 export type ChartAxisTitleAlignment = 'left' | 'center' | 'right';
-export type ChartAxisLabels = {
+export interface ChartAxisLabels {
     /** Enable or disable the axis labels. */
     enabled?: boolean;
     /** The label's pixel distance from the perimeter of the plot area.
@@ -27,8 +28,8 @@ export type ChartAxisLabels = {
      * @default: 0
      */
     rotation?: number;
-};
-export type ChartAxis = {
+}
+export interface ChartAxis {
     categories?: string[];
     timestamps?: number[];
     type?: ChartAxisType;
@@ -72,9 +73,31 @@ export type ChartAxis = {
      * Defaults to 0.05 for Y axis and to 0.01 for X axis.
      * */
     maxPadding?: number;
-};
-export type ChartXAxis = ChartAxis;
-export type ChartYAxis = ChartAxis & {
+}
+export interface ChartXAxis extends ChartAxis {
+}
+export interface AxisPlotLine {
+    /** The position of the line in axis units. */
+    value?: number;
+    /** The color of the plot line (hex, rgba). */
+    color?: string;
+    /** Pixel width of the plot line.
+     *
+     * @default 1
+     * */
+    width?: number;
+    /** Option for line stroke style. */
+    dashStyle?: `${DashStyle}`;
+    /**
+     * Individual opacity for the line.
+     *
+     * @default 1
+     * */
+    opacity?: number;
+    /** Place the line behind or above the chart. */
+    layerPlacement?: 'before' | 'after';
+}
+export interface ChartYAxis extends ChartAxis {
     /** Axis location.
      * Possible values - 'left' and 'right'.
      * */
@@ -82,4 +105,6 @@ export type ChartYAxis = ChartAxis & {
     /** Property for splitting charts. Determines which area the axis is located in.
      * */
     plotIndex?: number;
-};
+    /** An array of lines stretching across the plot area, marking a specific value */
+    plotLines?: AxisPlotLine[];
+}

package/dist/cjs/types/chart/bar-x.d.ts

@@ -3,7 +3,7 @@ import type { MeaningfulAny } from '../misc';
 import type { BaseSeries, BaseSeriesData } from './base';
 import type { ChartLegend, RectLegendSymbolOptions } from './legend';
 import type { ChartSeriesOptions } from './series';
-export type BarXSeriesData<T = MeaningfulAny> = BaseSeriesData<T> & {
+export interface BarXSeriesData<T = MeaningfulAny> extends BaseSeriesData<T> {
     /**
      * The `x` value of the bar. Depending on the context , it may represents:
      * - numeric value (for `linear` x axis)
@@ -28,14 +28,19 @@ export type BarXSeriesData<T = MeaningfulAny> = BaseSeriesData<T> & {
     label?: string | number;
     /** Individual opacity for the bar-x column. */
     opacity?: number;
-};
-export type BarXSeries<T = MeaningfulAny> = BaseSeries & {
+}
+export interface BarXSeries<T = MeaningfulAny> extends 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;
+    /**
+     * The corner radius of the border surrounding each bar.
+     * @default 0
+     */
+    borderRadius?: number;
     /** 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"
      *
@@ -64,4 +69,4 @@ export type BarXSeries<T = MeaningfulAny> = BaseSeries & {
     };
     /** Y-axis index (when using two axes) */
     yAxis?: number;
-};
+}

package/dist/cjs/types/chart/bar-y.d.ts

@@ -2,8 +2,7 @@ import type { SeriesType } from '../../constants';
 import type { MeaningfulAny } from '../misc';
 import type { BaseSeries, BaseSeriesData } from './base';
 import type { ChartLegend, RectLegendSymbolOptions } from './legend';
-import type { ChartSeriesOptions } from './series';
-export type BarYSeriesData<T = MeaningfulAny> = BaseSeriesData<T> & {
+export interface BarYSeriesData<T = MeaningfulAny> extends BaseSeriesData<T> {
     /**
      * The `x` value of the bar. Depending on the context , it may represents:
      * - numeric value (for `linear` x axis)
@@ -22,14 +21,19 @@ export type BarYSeriesData<T = MeaningfulAny> = BaseSeriesData<T> & {
     label?: string | number;
     /** Individual opacity for the bar. */
     opacity?: number;
-};
-export type BarYSeries<T = MeaningfulAny> = BaseSeries & {
+}
+export interface BarYSeries<T = MeaningfulAny> extends 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;
+    /**
+     * The corner radius of the border surrounding each bar.
+     * @default 0
+     */
+    borderRadius?: number;
     /** 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"
      *
@@ -44,7 +48,7 @@ export type BarYSeries<T = MeaningfulAny> = BaseSeries & {
      * @default true
      * */
     grouping?: boolean;
-    dataLabels?: ChartSeriesOptions['dataLabels'] & {
+    dataLabels?: BaseSeries['dataLabels'] & {
         /**
          * Whether to align the data label inside or outside the box.
          * For charts with a percentage stack, it is always true.
@@ -57,4 +61,4 @@ export type BarYSeries<T = MeaningfulAny> = BaseSeries & {
     legend?: ChartLegend & {
         symbol?: RectLegendSymbolOptions;
     };
-};
+}

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

@@ -1,5 +1,5 @@
 import type { MeaningfulAny } from '../misc';
-export type BaseSeries = {
+export interface BaseSeries {
     /** Initial visibility of the series */
     visible?: boolean;
     /**
@@ -30,8 +30,8 @@ export type BaseSeries = {
     };
     /** 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> = {
+}
+export interface BaseSeriesData<T = MeaningfulAny> {
     /**
      * A reserved subspace to store options and values for customized functionality
      *
@@ -40,9 +40,9 @@ export type BaseSeriesData<T = MeaningfulAny> = {
     custom?: T;
     /** Individual color for the data chunk (point in scatter, segment in pie, bar etc) */
     color?: string;
-};
-export type BaseTextStyle = {
+}
+export interface BaseTextStyle {
     fontSize: string;
     fontWeight?: string;
     fontColor?: string;
-};
+}

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

@@ -1,12 +1,12 @@
 import type { MeaningfulAny } from '../misc';
 import type { ChartTooltipRendererArgs } from './tooltip';
-export type ChartMargin = {
+export interface ChartMargin {
     top: number;
     right: number;
     bottom: number;
     left: number;
-};
-export type ChartOptions = {
+}
+export interface ChartOptions {
     margin?: Partial<ChartMargin>;
     events?: {
         click?: (data: {
@@ -15,4 +15,4 @@ export type ChartOptions = {
         }, event: PointerEvent) => void;
         pointermove?: (data: ChartTooltipRendererArgs | undefined, event: PointerEvent) => void;
     };
-};
+}

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

@@ -1,9 +1,9 @@
 /** The halo appearing around the hovered part of series(point in line-type series or slice in pie charts) */
-export type Halo = {
+export interface 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/cjs/types/chart/legend.d.ts

@@ -1,5 +1,5 @@
 import type { BaseTextStyle } from './base';
-export type ChartLegend = {
+export interface ChartLegend {
     enabled?: boolean;
     /**
      * Different types for different color schemes.
@@ -47,16 +47,16 @@ export type ChartLegend = {
         domain?: number[];
     };
     width?: number;
-};
-export type BaseLegendSymbol = {
+}
+export interface BaseLegendSymbol {
     /**
      * The pixel padding between the legend item symbol and the legend item text.
      *
      * @default 5
      * */
     padding?: number;
-};
-export type RectLegendSymbolOptions = BaseLegendSymbol & {
+}
+export interface RectLegendSymbolOptions extends BaseLegendSymbol {
     /**
      * The pixel width of the symbol for series types that use a rectangle in the legend
      *
@@ -75,20 +75,20 @@ export type RectLegendSymbolOptions = BaseLegendSymbol & {
      * Defaults to half the symbolHeight, effectively creating a circle.
      */
     radius?: number;
-};
-export type PathLegendSymbolOptions = BaseLegendSymbol & {
+}
+export interface PathLegendSymbolOptions extends 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 & {
+}
+export interface SymbolLegendSymbolOptions extends BaseLegendSymbol {
     /**
      * The pixel width of the symbol for series types that use a symbol in the legend
      *
      * @default 8
      * */
     width?: number;
-};
+}

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

@@ -3,7 +3,7 @@ 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> & {
+export interface LineSeriesData<T = MeaningfulAny> extends BaseSeriesData<T> {
     /**
      * The `x` value of the point. Depending on the context , it may represents:
      * - numeric value (for `linear` x axis)
@@ -27,8 +27,8 @@ export type LineSeriesData<T = MeaningfulAny> = BaseSeriesData<T> & {
             };
         };
     };
-};
-export type LineSeries<T = MeaningfulAny> = BaseSeries & {
+}
+export interface LineSeries<T = MeaningfulAny> extends BaseSeries {
     type: typeof SeriesType.Line;
     data: LineSeriesData<T>[];
     /** The name of the series (used in legend, tooltip etc) */
@@ -54,4 +54,4 @@ export type LineSeries<T = MeaningfulAny> = BaseSeries & {
     opacity?: number;
     /** Y-axis index (when using two axes) */
     yAxis?: number;
-};
+}

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

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

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

@@ -3,7 +3,7 @@ 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> & {
+export interface PieSeriesData<T = MeaningfulAny> extends BaseSeriesData<T> {
     /** The value of the pie segment. */
     value: number;
     /** The name of the pie segment (used in legend, tooltip etc). */
@@ -14,10 +14,12 @@ export type PieSeriesData<T = MeaningfulAny> = BaseSeriesData<T> & {
     label?: string;
     /** Individual opacity for the pie segment. */
     opacity?: number;
-};
+    /** The individual radius of the pie segment. The default value is series.radius */
+    radius?: string | number;
+}
 export type ConnectorShape = 'straight-line' | 'polyline';
 export type ConnectorCurve = 'linear' | 'basic';
-export type PieSeries<T = MeaningfulAny> = BaseSeries & {
+export interface PieSeries<T = MeaningfulAny> extends BaseSeries {
     type: typeof SeriesType.Pie;
     data: PieSeriesData<T>[];
     /**
@@ -85,4 +87,4 @@ export type PieSeries<T = MeaningfulAny> = BaseSeries & {
             innerRadius: number;
         };
     }) => BaseType;
-};
+}

package/dist/cjs/types/chart/sankey.d.ts

@@ -0,0 +1,22 @@
+import type { SeriesType } from '../../constants';
+import type { MeaningfulAny } from '../misc';
+import type { BaseSeries, BaseSeriesData } from './base';
+import type { ChartLegend, RectLegendSymbolOptions } from './legend';
+export interface SankeySeriesData<T = MeaningfulAny> extends BaseSeriesData<T> {
+    name: string;
+    color?: string;
+    links: {
+        name: string;
+        value: number;
+    }[];
+}
+export interface SankeySeries<T = MeaningfulAny> extends BaseSeries {
+    type: typeof SeriesType.Sankey;
+    /** The name of the series (used in legend, tooltip etc). */
+    name: string;
+    data: SankeySeriesData<T>[];
+    /** Individual series legend options. Has higher priority than legend options in widget data. */
+    legend?: ChartLegend & {
+        symbol?: RectLegendSymbolOptions;
+    };
+}

package/dist/cjs/types/chart/sankey.js

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

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

@@ -2,7 +2,7 @@ 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> & {
+export interface ScatterSeriesData<T = MeaningfulAny> extends BaseSeriesData<T> {
     /**
      * The `x` value of the point. Depending on the context , it may represents:
      * - numeric value (for `linear` x axis)
@@ -27,8 +27,8 @@ export type ScatterSeriesData<T = MeaningfulAny> = BaseSeriesData<T> & {
     radius?: number;
     /** Individual opacity for the point. */
     opacity?: number;
-};
-export type ScatterSeries<T = MeaningfulAny> = BaseSeries & {
+}
+export interface ScatterSeries<T = MeaningfulAny> extends BaseSeries {
     type: typeof SeriesType.Scatter;
     data: ScatterSeriesData<T>[];
     /** The name of the series (used in legend, tooltip etc) */
@@ -43,4 +43,4 @@ export type ScatterSeries<T = MeaningfulAny> = BaseSeries & {
     };
     /** Y-axis index (when using two axes) */
     yAxis?: number;
-};
+}

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

@@ -8,15 +8,16 @@ import type { Halo } from './halo';
 import type { LineSeries, LineSeriesData } from './line';
 import type { PointMarkerOptions } from './marker';
 import type { PieSeries, PieSeriesData } from './pie';
+import type { SankeySeries, SankeySeriesData } from './sankey';
 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> = {
+export type ChartSeries<T = MeaningfulAny> = ScatterSeries<T> | PieSeries<T> | BarXSeries<T> | BarYSeries<T> | LineSeries<T> | AreaSeries<T> | TreemapSeries<T> | WaterfallSeries<T> | SankeySeries<T>;
+export type ChartSeriesData<T = MeaningfulAny> = ScatterSeriesData<T> | PieSeriesData<T> | BarXSeriesData<T> | BarYSeriesData<T> | LineSeriesData<T> | AreaSeriesData<T> | TreemapSeriesData<T> | WaterfallSeriesData<T> | SankeySeriesData<T>;
+export interface DataLabelRendererData<T = MeaningfulAny> {
     data: ChartSeriesData<T>;
-};
-export type BasicHoverState = {
+}
+export interface BasicHoverState {
     /**
      * Enable separate styles for the hovered series.
      *
@@ -32,8 +33,8 @@ export type BasicHoverState = {
      * @default 0.3
      */
     brightness?: number;
-};
-export type BasicInactiveState = {
+}
+export interface BasicInactiveState {
     /**
      * Enable separate styles for the inactive series.
      *
@@ -46,8 +47,8 @@ export type BasicInactiveState = {
      * @default 0.5
      * */
     opacity?: number;
-};
-export type ChartSeriesOptions = {
+}
+export interface ChartSeriesOptions {
     /** Individual data label for each point. */
     dataLabels?: {
         /** Enable or disable the data labels */
@@ -72,6 +73,11 @@ export type ChartSeriesOptions = {
          * @default 0.2
          */
         groupPadding?: number;
+        /**
+         * The corner radius of the border surrounding each bar.
+         * @default 0
+         */
+        borderRadius?: 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"
@@ -108,6 +114,11 @@ export type ChartSeriesOptions = {
          * @default 0.2
          */
         groupPadding?: number;
+        /**
+         * The corner radius of the border surrounding each bar.
+         * @default 0
+         */
+        borderRadius?: 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"
@@ -222,4 +233,4 @@ export type ChartSeriesOptions = {
             inactive?: BasicInactiveState;
         };
     };
-};
+}

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

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

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

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