@gravity-ui/charts 0.1.0

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

@@ -0,0 +1,67 @@
+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 { LineSeries, LineSeriesData } from './line';
+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 TooltipDataChunkBarX<T = MeaningfulAny> = {
+    data: BarXSeriesData<T>;
+    series: BarXSeries<T>;
+};
+export type TooltipDataChunkBarY<T = MeaningfulAny> = {
+    data: BarYSeriesData<T>;
+    series: BarYSeries<T>;
+};
+export type TooltipDataChunkPie<T = MeaningfulAny> = {
+    data: PieSeriesData<T>;
+    series: {
+        type: PieSeries['type'];
+        id: string;
+        name: string;
+    };
+};
+export type TooltipDataChunkScatter<T = MeaningfulAny> = {
+    data: ScatterSeriesData<T>;
+    series: {
+        type: ScatterSeries['type'];
+        id: string;
+        name: string;
+    };
+};
+export type TooltipDataChunkLine<T = MeaningfulAny> = {
+    data: LineSeriesData<T>;
+    series: {
+        type: LineSeries['type'];
+        id: string;
+        name: string;
+    };
+};
+export type TooltipDataChunkArea<T = MeaningfulAny> = {
+    data: AreaSeriesData<T>;
+    series: {
+        type: AreaSeries['type'];
+        id: string;
+        name: string;
+    };
+};
+export type TooltipDataChunkTreemap<T = MeaningfulAny> = {
+    data: TreemapSeriesData<T>;
+    series: TreemapSeries<T>;
+};
+export type TooltipDataChunkWaterfall<T = MeaningfulAny> = {
+    data: WaterfallSeriesData<T>;
+    series: WaterfallSeries<T>;
+};
+export type TooltipDataChunk<T = MeaningfulAny> = (TooltipDataChunkBarX<T> | TooltipDataChunkBarY<T> | TooltipDataChunkPie<T> | TooltipDataChunkScatter<T> | TooltipDataChunkLine<T> | TooltipDataChunkArea<T> | TooltipDataChunkTreemap<T> | TooltipDataChunkWaterfall<T>) & {
+    closest?: boolean;
+};
+export type ChartTooltip<T = MeaningfulAny> = {
+    enabled?: boolean;
+    /** Specifies the renderer for the tooltip. If returned null default tooltip renderer will be used. */
+    renderer?: (args: {
+        hovered: TooltipDataChunk<T>[];
+    }) => React.ReactElement | null;
+};

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

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

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

@@ -0,0 +1,46 @@
+import type { LayoutAlgorithm, SeriesType } from '../../constants';
+import type { MeaningfulAny } from '../misc';
+import type { BaseSeries, BaseSeriesData } from './base';
+import type { ChartLegend, RectLegendSymbolOptions } from './legend';
+export type TreemapSeriesData<T = MeaningfulAny> = BaseSeriesData<T> & {
+    /** The name of the node (used in legend, tooltip etc). */
+    name: string | string[];
+    /** The value of the node. All nodes should have this property except nodes that have children. */
+    value?: number;
+    /** An id for the node. Used to group children. */
+    id?: string;
+    /**
+     * Parent id. Used to build a tree structure. The value should be the id of the node which is the parent.
+     * If no nodes has a matching id, or this option is undefined, then the parent will be set to the root.
+     */
+    parentId?: string;
+};
+export type TreemapSeries<T = MeaningfulAny> = BaseSeries & {
+    type: typeof SeriesType.Treemap;
+    data: TreemapSeriesData<T>[];
+    /** The name of the series (used in legend, tooltip etc). */
+    name: string;
+    /** The main color of the series (hex, rgba). */
+    color?: string;
+    /** Individual series legend options. Has higher priority than legend options in widget data. */
+    legend?: ChartLegend & {
+        symbol?: RectLegendSymbolOptions;
+    };
+    /** Set options on specific levels. Takes precedence over series options, but not point options. */
+    levels?: {
+        /** Decides which level takes effect from the options set in the levels object. */
+        index: number;
+        /** Can set the padding between all points which lies on the same level. */
+        padding?: number;
+        /** Can set a color on all points which lies on the same level. */
+        color?: string;
+    }[];
+    layoutAlgorithm?: `${LayoutAlgorithm}`;
+    /**
+     * Options for the series data labels, appearing next to each data point.
+     * */
+    dataLabels?: BaseSeries['dataLabels'] & {
+        /** Horizontal alignment of the data label inside the tile. */
+        align?: 'left' | 'center' | 'right';
+    };
+};

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

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

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

@@ -0,0 +1,40 @@
+import type { SeriesType } from '../../constants';
+import type { MeaningfulAny } from '../misc';
+import type { BaseSeries, BaseSeriesData } from './base';
+import type { ChartLegend, RectLegendSymbolOptions } from './legend';
+export type WaterfallSeriesData<T = MeaningfulAny> = BaseSeriesData<T> & {
+    /**
+     * The `x` value. 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. Depending on the context , it may represents:
+     * - numeric value (for `linear` y axis)
+     */
+    y?: number;
+    /** Data label value of the point. If not specified, the y value is used. */
+    label?: string | number;
+    /** Individual opacity for the point. */
+    opacity?: number;
+    /** When this property is true, the point display the total sum across the entire series. */
+    total?: boolean;
+};
+export type WaterfallSeries<T = MeaningfulAny> = BaseSeries & {
+    type: typeof SeriesType.Waterfall;
+    data: WaterfallSeriesData<T>[];
+    /** The name of the series (used in legend, tooltip etc). */
+    name: string;
+    /** The main color of the series (hex, rgba). */
+    color?: string;
+    /** The color used for positive values. If it is not specified, the general color of the series is used. */
+    positiveColor?: string;
+    /** The color used for negative values. If it is not specified, the general color of the series is used. */
+    negativeColor?: string;
+    /** Individual series legend options. Has higher priority than legend options in widget data. */
+    legend?: ChartLegend & {
+        symbol?: RectLegendSymbolOptions;
+    };
+};

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

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

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

@@ -0,0 +1,24 @@
+import type { BaseTextStyle } from './chart/base';
+export type LabelData = {
+    text: string;
+    x: number;
+    y: number;
+    style: BaseTextStyle;
+    size: {
+        width: number;
+        height: number;
+    };
+    textAnchor: 'start' | 'end' | 'middle';
+    series: {
+        id: string;
+    };
+    active?: boolean;
+};
+export type HtmlItem = {
+    x: number;
+    y: number;
+    content: string;
+};
+export type ShapeDataWithHtmlItems = {
+    htmlElements: HtmlItem[];
+};

package/dist/cjs/types/chart-ui.js

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

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

@@ -0,0 +1,14 @@
+export type FormatOptions = {
+    precision?: number | 'auto';
+    unitRate?: number;
+    showRankDelimiter?: boolean;
+    lang?: string;
+    labelMode?: string;
+};
+export type FormatNumberOptions = FormatOptions & {
+    format?: 'number' | 'percent';
+    multiplier?: number;
+    prefix?: string;
+    postfix?: string;
+    unit?: 'auto' | 'k' | 'm' | 'b' | 't' | null;
+};

package/dist/cjs/types/formatter.js

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

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

@@ -0,0 +1,42 @@
+import type { ChartXAxis, ChartYAxis } from './chart/axis';
+import type { ChartOptions } from './chart/chart';
+import type { ChartLegend } from './chart/legend';
+import type { ChartSeries, ChartSeriesOptions } from './chart/series';
+import type { ChartSplit } from './chart/split';
+import type { ChartTitle } from './chart/title';
+import type { ChartTooltip } from './chart/tooltip';
+import type { MeaningfulAny } from './misc';
+export * from './chart-ui';
+export * from './misc';
+export * from './chart/axis';
+export * from './chart/base';
+export * from './chart/chart';
+export * from './chart/legend';
+export * from './chart/pie';
+export * from './chart/scatter';
+export * from './chart/bar-x';
+export * from './chart/bar-y';
+export * from './chart/area';
+export * from './chart/line';
+export * from './chart/series';
+export * from './chart/split';
+export * from './chart/title';
+export * from './chart/tooltip';
+export * from './chart/halo';
+export * from './chart/treemap';
+export * from './chart/waterfall';
+export type ChartData<T = MeaningfulAny> = {
+    chart?: ChartOptions;
+    legend?: ChartLegend;
+    series: {
+        data: ChartSeries<T>[];
+        options?: ChartSeriesOptions;
+    };
+    title?: ChartTitle;
+    tooltip?: ChartTooltip<T>;
+    xAxis?: ChartXAxis;
+    yAxis?: ChartYAxis[];
+    /** Setting for displaying charts on different plots.
+     * It can be used to visualize related information on multiple charts. */
+    split?: ChartSplit;
+};

package/dist/cjs/types/index.js

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

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

@@ -0,0 +1,4 @@
+/**
+ * A utilitarian type to describe `any` when it does not contradict the typescript usage paradigm.
+ */
+export type MeaningfulAny = any;

package/dist/cjs/types/misc.js

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

package/dist/cjs/utils/chart/axis-generators/bottom.d.ts

@@ -0,0 +1,24 @@
+import type { AxisDomain, AxisScale, Selection } from 'd3';
+import type { BaseTextStyle } from '../../../types';
+type AxisBottomArgs = {
+    scale: AxisScale<AxisDomain>;
+    ticks: {
+        count?: number;
+        maxTickCount?: number;
+        labelFormat?: (value: any) => string;
+        labelsPaddings?: number;
+        labelsMargin?: number;
+        labelsStyle?: BaseTextStyle;
+        labelsMaxWidth?: number;
+        labelsLineHeight: number;
+        items?: [number, number][];
+        rotation?: number;
+        tickColor?: string;
+    };
+    domain: {
+        size: number;
+        color?: string;
+    };
+};
+export declare function axisBottom(args: AxisBottomArgs): (selection: Selection<SVGGElement, unknown, null, undefined>) => void;
+export {};

package/dist/cjs/utils/chart/axis-generators/bottom.js

@@ -0,0 +1,126 @@
+import { path, select } from 'd3';
+import { getXAxisItems, getXAxisOffset, getXTickPosition } from '../axis';
+import { calculateCos, calculateSin } from '../math';
+import { getLabelsSize, setEllipsisForOverflowText } from '../text';
+function addDomain(selection, options) {
+    const { size, color } = options;
+    const domainPath = selection
+        .selectAll('.domain')
+        .data([null])
+        .enter()
+        .insert('path', '.tick')
+        .attr('class', 'domain')
+        .attr('d', `M0,0V0H${size}`);
+    if (color) {
+        domainPath.style('stroke', color);
+    }
+}
+export function axisBottom(args) {
+    const { scale, ticks: { labelFormat = (value) => String(value), labelsPaddings = 0, labelsMargin = 0, labelsMaxWidth = Infinity, labelsStyle, labelsLineHeight, items: tickItems, count: ticksCount, maxTickCount, rotation = 0, tickColor, }, domain, } = args;
+    const offset = getXAxisOffset();
+    const position = getXTickPosition({ scale, offset });
+    const values = getXAxisItems({ scale, count: ticksCount, maxCount: maxTickCount });
+    const labelHeight = getLabelsSize({
+        labels: values,
+        style: labelsStyle,
+    }).maxHeight;
+    return function (selection) {
+        var _a, _b, _c;
+        const rect = (_a = selection.node()) === null || _a === void 0 ? void 0 : _a.getBoundingClientRect();
+        const x = (rect === null || rect === void 0 ? void 0 : rect.x) || 0;
+        const right = x + domain.size;
+        const top = -((_c = (_b = tickItems === null || tickItems === void 0 ? void 0 : tickItems[0]) === null || _b === void 0 ? void 0 : _b[0]) !== null && _c !== void 0 ? _c : 0);
+        let transform = `translate(0, ${labelHeight + labelsMargin - top}px)`;
+        if (rotation) {
+            const labelsOffsetTop = labelHeight * calculateCos(rotation) + labelsMargin - top;
+            let labelsOffsetLeft = calculateSin(rotation) * labelHeight;
+            if (Math.abs(rotation) % 360 === 90) {
+                labelsOffsetLeft += ((rotation > 0 ? -1 : 1) * labelHeight) / 2;
+            }
+            transform = `translate(${-labelsOffsetLeft}px, ${labelsOffsetTop}px) rotate(${rotation}deg)`;
+        }
+        const tickPath = path();
+        tickItems === null || tickItems === void 0 ? void 0 : tickItems.forEach(([start, end]) => {
+            tickPath.moveTo(0, start);
+            tickPath.lineTo(0, end);
+        });
+        selection
+            .selectAll('.tick')
+            .data(values)
+            .order()
+            .join((el) => {
+            const tick = el.append('g').attr('class', 'tick');
+            tick.append('path')
+                .attr('d', tickPath.toString())
+                .attr('stroke', tickColor !== null && tickColor !== void 0 ? tickColor : 'currentColor');
+            tick.append('text')
+                .text(labelFormat)
+                .attr('fill', 'currentColor')
+                .attr('text-anchor', () => {
+                if (rotation) {
+                    return rotation > 0 ? 'start' : 'end';
+                }
+                return 'middle';
+            })
+                .style('transform', transform)
+                .style('alignment-baseline', 'after-edge');
+            return tick;
+        })
+            .attr('transform', function (d) {
+            return `translate(${position(d) + offset}, ${top})`;
+        });
+        // Remove tick that has the same x coordinate like domain
+        selection
+            .select('.tick')
+            .filter((d) => {
+            return position(d) === 0;
+        })
+            .select('line')
+            .remove();
+        const labels = selection.selectAll('.tick text');
+        // FIXME: handle rotated overlapping labels (with a smarter approach)
+        if (rotation) {
+            const maxWidth = labelsMaxWidth * calculateCos(rotation) + labelsLineHeight * calculateSin(rotation);
+            labels.each(function () {
+                setEllipsisForOverflowText(select(this), maxWidth);
+            });
+        }
+        else {
+            // remove overlapping labels
+            let elementX = 0;
+            selection
+                .selectAll('.tick')
+                .filter(function () {
+                const node = this;
+                const r = node.getBoundingClientRect();
+                if (r.left < elementX) {
+                    return true;
+                }
+                elementX = r.right + labelsPaddings;
+                return false;
+            })
+                .remove();
+            // add an ellipsis to the labels that go beyond the boundaries of the chart
+            labels.each(function (_d, i, nodes) {
+                if (i === nodes.length - 1) {
+                    const currentElement = this;
+                    const prevElement = nodes[i - 1];
+                    const text = select(currentElement);
+                    const currentElementPosition = currentElement.getBoundingClientRect();
+                    const prevElementPosition = prevElement === null || prevElement === void 0 ? void 0 : prevElement.getBoundingClientRect();
+                    const lackingSpace = Math.max(0, currentElementPosition.right - right);
+                    if (lackingSpace) {
+                        const remainSpace = right - ((prevElementPosition === null || prevElementPosition === void 0 ? void 0 : prevElementPosition.right) || 0) - labelsPaddings;
+                        const translateX = currentElementPosition.width / 2 - lackingSpace;
+                        text.attr('text-anchor', 'end').attr('transform', `translate(${translateX},0)`);
+                        setEllipsisForOverflowText(text, remainSpace);
+                    }
+                }
+            });
+        }
+        const { size: domainSize, color: domainColor } = domain;
+        selection
+            .call(addDomain, { size: domainSize, color: domainColor })
+            .style('font-size', (labelsStyle === null || labelsStyle === void 0 ? void 0 : labelsStyle.fontSize) || '');
+    };
+}

package/dist/cjs/utils/chart/axis-generators/index.d.ts

@@ -0,0 +1 @@
+export * from './bottom';

package/dist/cjs/utils/chart/axis-generators/index.js

@@ -0,0 +1 @@
+export * from './bottom';

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

@@ -0,0 +1,31 @@
+import type { AxisDomain, AxisScale, ScaleBand } from 'd3';
+import type { PreparedAxis, PreparedSplit } from '../../hooks';
+import type { TextRow } from './text';
+export declare function getTicksCount({ axis, range }: {
+    axis: PreparedAxis;
+    range: number;
+}): number | undefined;
+export declare function isBandScale(scale: AxisScale<AxisDomain>): scale is ScaleBand<AxisDomain>;
+export declare function getScaleTicks(scale: AxisScale<AxisDomain>, ticksCount?: number): any;
+export declare function getXAxisOffset(): 0 | 0.5;
+export declare function getXTickPosition({ scale, offset }: {
+    scale: AxisScale<AxisDomain>;
+    offset: number;
+}): (d: AxisDomain) => number;
+export declare function getXAxisItems({ scale, count, maxCount, }: {
+    scale: AxisScale<AxisDomain>;
+    count?: number;
+    maxCount?: number;
+}): any;
+export declare function getMaxTickCount({ axis, width }: {
+    axis: PreparedAxis;
+    width: number;
+}): number;
+export declare function getAxisHeight(args: {
+    split: PreparedSplit;
+    boundsHeight: number;
+}): number;
+export declare function getAxisTitleRows(args: {
+    axis: PreparedAxis;
+    textMaxWidth: number;
+}): TextRow[];

package/dist/cjs/utils/chart/axis.js

@@ -0,0 +1,71 @@
+import { wrapText } from './text';
+export function getTicksCount({ axis, range }) {
+    let ticksCount;
+    if (axis.ticks.pixelInterval) {
+        ticksCount = Math.ceil(range / axis.ticks.pixelInterval);
+    }
+    return ticksCount;
+}
+export function isBandScale(scale) {
+    return 'bandwidth' in scale && typeof scale.bandwidth === 'function';
+}
+export function getScaleTicks(scale, ticksCount) {
+    return 'ticks' in scale && typeof scale.ticks === 'function'
+        ? scale.ticks(ticksCount)
+        : scale.domain();
+}
+export function getXAxisOffset() {
+    return typeof window !== 'undefined' && window.devicePixelRatio > 1 ? 0 : 0.5;
+}
+function number(scale) {
+    return (d) => Number(scale(d));
+}
+function center(scale, offset) {
+    offset = Math.max(0, scale.bandwidth() - offset * 2) / 2;
+    if (scale.round()) {
+        offset = Math.round(offset);
+    }
+    return (d) => Number(scale(d)) + offset;
+}
+export function getXTickPosition({ scale, offset }) {
+    return isBandScale(scale) ? center(scale.copy(), offset) : number(scale.copy());
+}
+export function getXAxisItems({ scale, count, maxCount, }) {
+    let values = getScaleTicks(scale, count);
+    if (maxCount && values.length > maxCount) {
+        const step = Math.ceil(values.length / maxCount);
+        values = values.filter((_, i) => i % step === 0);
+    }
+    return values;
+}
+export function getMaxTickCount({ axis, width }) {
+    const minTickWidth = parseInt(axis.labels.style.fontSize) + axis.labels.padding;
+    return Math.floor(width / minTickWidth);
+}
+export function getAxisHeight(args) {
+    const { split, boundsHeight } = args;
+    if (split.plots.length > 1) {
+        return split.plots[0].height;
+    }
+    return boundsHeight;
+}
+export function getAxisTitleRows(args) {
+    const { axis, textMaxWidth } = args;
+    if (axis.title.maxRowCount < 1) {
+        return [];
+    }
+    const textRows = wrapText({
+        text: axis.title.text,
+        style: axis.title.style,
+        width: textMaxWidth,
+    });
+    return textRows.reduce((acc, row, index) => {
+        if (index < axis.title.maxRowCount) {
+            acc.push(row);
+        }
+        else {
+            acc[axis.title.maxRowCount - 1].text += row.text;
+        }
+        return acc;
+    }, []);
+}

package/dist/cjs/utils/chart/color.d.ts

@@ -0,0 +1,10 @@
+import type { ChartData } from '../../types';
+export declare function getDomainForContinuousColorScale(args: {
+    series: ChartData['series']['data'];
+}): number[];
+export declare function getDefaultColorStops(size: number): number[];
+export declare function getContinuesColorFn(args: {
+    values: number[];
+    colors: string[];
+    stops?: number[];
+}): (value: number) => string;

package/dist/cjs/utils/chart/color.js

@@ -0,0 +1,43 @@
+import { range, scaleLinear } from 'd3';
+export function getDomainForContinuousColorScale(args) {
+    const { series } = args;
+    const values = series.reduce((acc, s) => {
+        switch (s.type) {
+            case 'pie': {
+                acc.push(...s.data.map((d) => d.value));
+                break;
+            }
+            case 'bar-y': {
+                acc.push(...s.data.map((d) => Number(d.x)));
+                break;
+            }
+            case 'scatter':
+            case 'bar-x':
+            case 'waterfall':
+            case 'line':
+            case 'area': {
+                acc.push(...s.data.map((d) => Number(d.y)));
+                break;
+            }
+            default: {
+                throw Error(`The method for calculation a domain for a continuous color scale for the "${s.type}" series is not defined`);
+            }
+        }
+        return acc;
+    }, []);
+    return [Math.min(...values), Math.max(...values)];
+}
+export function getDefaultColorStops(size) {
+    return range(size).map((d) => d / size);
+}
+export function getContinuesColorFn(args) {
+    const { values, colors, stops: customStops } = args;
+    const min = Math.min(...values);
+    const max = Math.max(...values);
+    const stops = customStops !== null && customStops !== void 0 ? customStops : getDefaultColorStops(colors.length);
+    const color = scaleLinear(stops, colors);
+    return (value) => {
+        const colorValue = (value - min) / (max - min);
+        return color(colorValue);
+    };
+}

package/dist/cjs/utils/chart/get-closest-data.d.ts

@@ -0,0 +1,15 @@
+import type { ShapeData } from '../../hooks';
+import type { ChartSeries, ChartSeriesData, TooltipDataChunk } from '../../types';
+type GetClosestPointsArgs = {
+    position: [number, number];
+    shapesData: ShapeData[];
+};
+export type ShapePoint = {
+    x: number;
+    y0: number;
+    y1: number;
+    data: ChartSeriesData;
+    series: ChartSeries;
+};
+export declare function getClosestPoints(args: GetClosestPointsArgs): TooltipDataChunk[];
+export {};