@cloud-ru/uikit-product-charts 0.13.12 → 0.13.13

package/dist/esm/components/InteractiveChart/configurations/defaultPlot.js

@@ -0,0 +1,59 @@
+import Color from 'color';
+import { OTHER_COLORS } from '../../../constants/colors';
+import { wheelZoomPlugin } from '../plugins/wheelZoomPlugin';
+export const getDefaultPlotOptions = ({ computedColors }) => {
+    const axisColor = new Color(computedColors[OTHER_COLORS.AxisColor]).alpha(0.8).rgb().string();
+    const labelColor = computedColors[OTHER_COLORS.LabelColor];
+    return {
+        id: 'defaultPlot',
+        title: 'Title',
+        width: 800,
+        height: 600,
+        cursor: {
+            drag: {
+                x: true,
+                y: true,
+                dist: 10,
+                uni: 10,
+            },
+        },
+        plugins: [wheelZoomPlugin({ factor: 0.75 })],
+        series: [
+            {
+                label: 'x',
+            },
+        ],
+        scales: {
+            x: {
+                time: false,
+                auto: true,
+            },
+            y: {
+                time: false,
+                auto: true,
+            },
+        },
+        axes: [
+            {
+                show: true,
+                label: 'x',
+                labelSize: 30,
+                stroke: labelColor,
+                grid: {
+                    stroke: axisColor,
+                    width: 1 / devicePixelRatio,
+                },
+            },
+            {
+                show: true,
+                label: 'y',
+                labelSize: 30,
+                stroke: labelColor,
+                grid: {
+                    stroke: axisColor,
+                    width: 1 / devicePixelRatio,
+                },
+            },
+        ],
+    };
+};

package/dist/esm/components/InteractiveChart/configurations/index.d.ts

@@ -0,0 +1,2 @@
+export * from './boxPlot';
+export * from './defaultPlot';

package/dist/esm/components/InteractiveChart/configurations/index.js

@@ -0,0 +1,2 @@
+export * from './boxPlot';
+export * from './defaultPlot';

package/dist/esm/components/InteractiveChart/constants.d.ts

@@ -0,0 +1,17 @@
+export declare const PLOT_TYPES: {
+    readonly BoxPlot: "boxPlot";
+    readonly Default: "default";
+};
+export declare const LINE_INTERPOLATIONS: {
+    readonly Linear: "linear";
+    readonly StepAfter: "stepAfter";
+    readonly StepBefore: "stepBefore";
+    readonly Spline: "spline";
+};
+export declare const DRAW_STYLES: {
+    readonly Line: "line";
+    readonly Bars: "bars";
+    readonly Points: "points";
+    readonly BarsLeft: "barsLeft";
+    readonly BarsRight: "barsRight";
+};

package/dist/esm/components/InteractiveChart/constants.js

@@ -0,0 +1,17 @@
+export const PLOT_TYPES = {
+    BoxPlot: 'boxPlot',
+    Default: 'default',
+};
+export const LINE_INTERPOLATIONS = {
+    Linear: 'linear',
+    StepAfter: 'stepAfter',
+    StepBefore: 'stepBefore',
+    Spline: 'spline',
+};
+export const DRAW_STYLES = {
+    Line: 'line',
+    Bars: 'bars',
+    Points: 'points',
+    BarsLeft: 'barsLeft',
+    BarsRight: 'barsRight',
+};

package/dist/esm/components/InteractiveChart/helpers/pathRenderer.d.ts

@@ -0,0 +1,3 @@
+import uPlot from 'uplot';
+import { DrawStyle, LineInterpolation } from '../types';
+export declare function getPathRenderer(drawStyle: DrawStyle, lineInterpolation?: LineInterpolation): (self: uPlot, seriesIdx: number, idx0: number, idx1: number) => uPlot.Series.Paths | null;

package/dist/esm/components/InteractiveChart/helpers/pathRenderer.js

@@ -0,0 +1,39 @@
+// eslint-disable-next-line @typescript-eslint/ban-ts-comment
+// @ts-nocheck
+/* eslint-disable */
+import uPlot from 'uplot';
+import { LINE_INTERPOLATIONS, DRAW_STYLES } from '../constants';
+const { linear, stepped, bars, spline } = uPlot.paths;
+const _bars60_100 = bars({ size: [0.6, 100] });
+const _bars100Left = bars({ size: [1], align: 1 });
+const _bars100Right = bars({ size: [1], align: -1 });
+const _stepBefore = stepped({ align: -1 });
+const _stepAfter = stepped({ align: 1 });
+const _linear = linear();
+const _spline = spline();
+export function getPathRenderer(drawStyle, lineInterpolation) {
+    return function pathRenderer(self, seriesIdx, idx0, idx1) {
+        const style = drawStyle;
+        const interp = lineInterpolation;
+        const renderer = style === DRAW_STYLES.Line
+            ? interp === LINE_INTERPOLATIONS.Linear
+                ? _linear
+                : interp === LINE_INTERPOLATIONS.StepAfter
+                    ? _stepAfter
+                    : interp === LINE_INTERPOLATIONS.StepBefore
+                        ? _stepBefore
+                        : interp === LINE_INTERPOLATIONS.Spline
+                            ? _spline
+                            : null
+            : style === DRAW_STYLES.Bars
+                ? _bars60_100
+                : style === DRAW_STYLES.BarsLeft
+                    ? _bars100Left
+                    : style === DRAW_STYLES.BarsRight
+                        ? _bars100Right
+                        : style === DRAW_STYLES.Points
+                            ? () => null
+                            : () => null;
+        return renderer(self, seriesIdx, idx0, idx1);
+    };
+}

package/dist/esm/components/InteractiveChart/hooks/useComputedColors.d.ts

@@ -0,0 +1,2 @@
+import { SeriesColorMap } from '../../../constants/colors';
+export declare function useComputedColors(): SeriesColorMap;

package/dist/esm/components/InteractiveChart/hooks/useComputedColors.js

@@ -0,0 +1,21 @@
+import { useState } from 'react';
+import { useTheme } from '@sbercloud/uikit-product-utils';
+import { useLayoutEffect } from '@snack-uikit/utils';
+import { COLOR_CONTAINER_CLASSNAME, OTHER_COLORS, SERIES_COLORS } from '../../../constants/colors';
+const EMPTY_COLORS = {};
+export function useComputedColors() {
+    const { theme } = useTheme();
+    const [computedColors, setComputedColors] = useState(EMPTY_COLORS);
+    useLayoutEffect(() => {
+        const colorContainer = document.querySelector('.' + COLOR_CONTAINER_CLASSNAME);
+        if (!colorContainer) {
+            return;
+        }
+        const styles = getComputedStyle(colorContainer);
+        setComputedColors(Object.values(Object.assign(Object.assign({}, SERIES_COLORS), OTHER_COLORS)).reduce((colors, color) => {
+            colors[color] = styles.getPropertyValue(`--${color}`);
+            return colors;
+        }, {}));
+    }, [theme]);
+    return computedColors;
+}

package/dist/esm/components/InteractiveChart/hooks/useLayer.d.ts

@@ -0,0 +1,12 @@
+import { Series } from 'uplot';
+import { SeriesColor } from '../../../constants/colors';
+import { DrawStyle, LineInterpolation } from '../types';
+type Layer = Partial<Series>;
+type UseLayerProps = {
+    label: string;
+    color: SeriesColor;
+    drawStyle: DrawStyle;
+    lineInterpolation?: LineInterpolation;
+};
+export declare function useLayer({ label, color, drawStyle, lineInterpolation }: UseLayerProps): Layer;
+export {};

package/dist/esm/components/InteractiveChart/hooks/useLayer.js

@@ -0,0 +1,16 @@
+import Color from 'color';
+import { useMemo } from 'react';
+import { getPathRenderer } from '../helpers/pathRenderer';
+import { useComputedColors } from './useComputedColors';
+export function useLayer({ label, color, drawStyle, lineInterpolation }) {
+    const computedColors = useComputedColors();
+    const stroke = computedColors[color];
+    const fill = new Color(stroke).alpha(0.1).rgb().string();
+    return useMemo(() => ({
+        label,
+        stroke,
+        fill,
+        width: 2,
+        paths: getPathRenderer(drawStyle, lineInterpolation),
+    }), [drawStyle, label, stroke, fill, lineInterpolation]);
+}

package/dist/esm/components/InteractiveChart/index.d.ts

@@ -0,0 +1,2 @@
+export * from './InteractiveChart';
+export * from './hooks/useLayer';

package/dist/esm/components/InteractiveChart/index.js

@@ -0,0 +1,2 @@
+export * from './InteractiveChart';
+export * from './hooks/useLayer';

package/dist/esm/components/InteractiveChart/plugins/boxPlotPlugin.d.ts

@@ -0,0 +1,12 @@
+import { ColorMap } from '../../../constants/colors';
+export declare function boxPlotPlugin({ gap, bodyMaxWidth, shadowWidth, computedColors, }: {
+    gap?: number;
+    bodyMaxWidth?: number;
+    shadowWidth?: number;
+    computedColors: ColorMap;
+}): {
+    opts: (u: any, opts: any) => void;
+    hooks: {
+        draw: (u: any) => void;
+    };
+};

package/dist/esm/components/InteractiveChart/plugins/boxPlotPlugin.js

@@ -0,0 +1,84 @@
+// eslint-disable-next-line @typescript-eslint/ban-ts-comment
+// @ts-nocheck
+/* eslint-disable */
+import Color from 'color';
+import uPlot from 'uplot';
+import { SERIES_COLORS, OTHER_COLORS } from '../../../constants/colors';
+export function boxPlotPlugin({ gap = 5, bodyMaxWidth = 60, shadowWidth = 3, computedColors, }) {
+    const shadowColor = computedColors[OTHER_COLORS.ShadowColor];
+    const lineColor = new Color(computedColors[OTHER_COLORS.LineColor]).alpha(0.5).rgb().string();
+    function roundRect(ctx, x, y, width, height, radius) {
+        ctx.beginPath();
+        ctx.moveTo(x + radius, y);
+        ctx.lineTo(x + width - radius, y);
+        ctx.quadraticCurveTo(x + width, y, x + width, y - radius);
+        ctx.lineTo(x + width, y + height + radius);
+        ctx.quadraticCurveTo(x + width, y + height, x + width - radius, y + height);
+        ctx.lineTo(x + radius, y + height);
+        ctx.quadraticCurveTo(x, y + height, x, y + height + radius);
+        ctx.lineTo(x, y - radius);
+        ctx.quadraticCurveTo(x, y, x + radius, y);
+        ctx.closePath();
+        ctx.fill();
+    }
+    function drawBoxes(u) {
+        u.ctx.save();
+        const offset = (shadowWidth % 2) / 2;
+        u.ctx.translate(offset, offset);
+        const [iMin, iMax] = u.series[0].idxs;
+        for (let i = iMin; i <= iMax; i++) {
+            const xVal = u.scales.x.distr === 2 ? i : u.data[0][i];
+            const open = u.data[1][i];
+            const low = u.data[2][i];
+            const median = u.data[3][i];
+            const high = u.data[4][i];
+            const close = u.data[5][i];
+            const timeAsX = u.valToPos(xVal, 'x', true);
+            const openAsY = u.valToPos(open, 'y', true);
+            const lowAsY = u.valToPos(low, 'y', true);
+            const medianAsY = u.valToPos(median, 'y', true);
+            const highAsY = u.valToPos(high, 'y', true);
+            const closeAsY = u.valToPos(close, 'y', true);
+            // moustache
+            const shadowHeight = closeAsY - openAsY;
+            const shadowX = timeAsX - shadowWidth / 2;
+            const shadowY = openAsY;
+            const columnWidth = u.bbox.width / (iMax - iMin + 2);
+            const bodyWidth = Math.min(bodyMaxWidth, columnWidth - gap);
+            u.ctx.fillStyle = shadowColor;
+            u.ctx.fillRect(Math.round(shadowX), Math.round(shadowY), Math.round(shadowWidth), Math.round(shadowHeight));
+            u.ctx.fillRect(Math.round(timeAsX - bodyWidth / 4), Math.round(shadowY - shadowWidth / 2), Math.round(bodyWidth / 2), Math.round(shadowWidth));
+            u.ctx.fillRect(Math.round(timeAsX - bodyWidth / 4), Math.round(shadowY + shadowHeight - shadowWidth / 2), Math.round(bodyWidth / 2), Math.round(shadowWidth));
+            // body rect
+            const bodyHeight = highAsY - lowAsY;
+            const bodyX = timeAsX - bodyWidth / 2;
+            const bodyY = lowAsY;
+            if (Math.abs(bodyHeight) > 8) {
+                u.ctx.fillStyle = computedColors === null || computedColors === void 0 ? void 0 : computedColors[Object.values(SERIES_COLORS)[i % Object.keys(SERIES_COLORS).length]];
+                roundRect(u.ctx, Math.round(bodyX), Math.round(bodyY), Math.round(bodyWidth), Math.round(bodyHeight), 8, true, true);
+                u.ctx.fillStyle = lineColor;
+                u.ctx.fillRect(Math.round(bodyX), medianAsY - shadowWidth / 2, Math.round(bodyWidth), Math.round(shadowWidth));
+            }
+        }
+        u.ctx.translate(-offset, -offset);
+        u.ctx.restore();
+    }
+    return {
+        opts: (u, opts) => {
+            uPlot.assign(opts, {
+                cursor: {
+                    points: {
+                        show: false,
+                    },
+                },
+            });
+            opts.series.forEach(series => {
+                series.paths = () => null;
+                series.points = { show: false };
+            });
+        },
+        hooks: {
+            draw: drawBoxes,
+        },
+    };
+}

package/dist/esm/components/InteractiveChart/plugins/columnHighlightPlugin.d.ts

@@ -0,0 +1,12 @@
+import uPlot from 'uplot';
+import { ColorMap } from '../../../constants/colors';
+export declare function columnHighlightPlugin({ className, computedColors, }: {
+    className?: string;
+    computedColors: ColorMap;
+}): {
+    opts: (u: any, opts: any) => void;
+    hooks: {
+        init: (u: uPlot) => void;
+        setCursor: (u: any) => void;
+    };
+};

package/dist/esm/components/InteractiveChart/plugins/columnHighlightPlugin.js

@@ -0,0 +1,59 @@
+// eslint-disable-next-line @typescript-eslint/ban-ts-comment
+// @ts-nocheck
+/* eslint-disable */
+import Color from 'color';
+import uPlot from 'uplot';
+import { OTHER_COLORS } from '../../../constants/colors';
+export function columnHighlightPlugin({ className = '', computedColors, }) {
+    const backgroundColor = new Color(computedColors[OTHER_COLORS.ColumnHighlightColor]).alpha(0.5).rgb().string();
+    let underEl, overEl, currIdx;
+    function init(u) {
+        underEl = u.under;
+        overEl = u.over;
+        const highlightEl = document.createElement('div');
+        className && highlightEl.classList.add(className);
+        uPlot.assign(highlightEl.style, {
+            pointerEvents: 'none',
+            display: 'none',
+            position: 'absolute',
+            left: 0,
+            top: 0,
+            height: '100%',
+            backgroundColor,
+        });
+        underEl.appendChild(highlightEl);
+        u._highlightEl = highlightEl;
+        // show/hide highlight on enter/exit
+        overEl.addEventListener('mouseenter', () => {
+            highlightEl.style.display = null;
+        });
+        overEl.addEventListener('mouseleave', () => {
+            highlightEl.style.display = 'none';
+        });
+    }
+    function update(u) {
+        if (currIdx !== u.cursor.idx) {
+            currIdx = u.cursor.idx;
+            const highlightEl = u._highlightEl;
+            const dx = u.scales.x.max - u.scales.x.min;
+            const width = u.bbox.width / dx / devicePixelRatio;
+            const left = u.valToPos(currIdx, 'x') - width / 2;
+            highlightEl.style.transform = 'translateX(' + Math.round(left) + 'px)';
+            highlightEl.style.width = Math.round(width) + 'px';
+        }
+    }
+    return {
+        opts: (u, opts) => {
+            uPlot.assign(opts, {
+                cursor: {
+                    x: false,
+                    y: false,
+                },
+            });
+        },
+        hooks: {
+            init: init,
+            setCursor: update,
+        },
+    };
+}

package/dist/esm/components/InteractiveChart/plugins/legendAsTooltipPlugin.d.ts

@@ -0,0 +1,11 @@
+import uPlot from 'uplot';
+import { ColorMap } from '../../../constants/colors';
+export declare function legendAsTooltipPlugin({ className, computedColors, }: {
+    className?: string;
+    computedColors: ColorMap;
+}): {
+    hooks: {
+        init: (u: uPlot, opts: any) => void;
+        setCursor: (u: any) => void;
+    };
+};

package/dist/esm/components/InteractiveChart/plugins/legendAsTooltipPlugin.js

@@ -0,0 +1,52 @@
+// eslint-disable-next-line @typescript-eslint/ban-ts-comment
+// @ts-nocheck
+/* eslint-disable */
+import uPlot from 'uplot';
+import { OTHER_COLORS } from '../../../constants/colors';
+export function legendAsTooltipPlugin({ className = '', computedColors, }) {
+    const backgroundColor = computedColors[OTHER_COLORS.TooltipBackgroundColor];
+    const color = computedColors[OTHER_COLORS.TooltipColor];
+    function init(u, opts) {
+        const legendEl = u.root.querySelector(`.u-legend`);
+        legendEl.classList.remove('u-inline');
+        className && legendEl.classList.add(className);
+        uPlot.assign(legendEl.style, {
+            borderRadius: '4px',
+            textAlign: 'left',
+            pointerEvents: 'none',
+            display: 'none',
+            position: 'absolute',
+            left: 0,
+            top: 0,
+            zIndex: 100,
+            backgroundColor,
+            color,
+        });
+        // hide series color markers
+        const idents = legendEl.querySelectorAll('.u-marker');
+        for (let i = 0; i < idents.length; i++)
+            idents[i].style.display = 'none';
+        const overEl = u.over;
+        overEl.style.overflow = 'visible';
+        // move legend into plot bounds
+        overEl.appendChild(legendEl);
+        // show/hide tooltip on enter/exit
+        overEl.addEventListener('mouseenter', () => {
+            legendEl.style.display = null;
+        });
+        overEl.addEventListener('mouseleave', () => {
+            legendEl.style.display = 'none';
+        });
+    }
+    function update(u) {
+        const { left, top } = u.cursor;
+        const legendEl = u.root.querySelector(`.u-legend`);
+        legendEl.style.transform = 'translate(' + (left + 15) + 'px, ' + top + 'px)';
+    }
+    return {
+        hooks: {
+            init: init,
+            setCursor: update,
+        },
+    };
+}

package/dist/esm/components/InteractiveChart/plugins/wheelZoomPlugin.d.ts

@@ -0,0 +1,5 @@
+export declare function wheelZoomPlugin(opts: any): {
+    hooks: {
+        ready: (u: any) => void;
+    };
+};

package/dist/esm/components/InteractiveChart/plugins/wheelZoomPlugin.js

@@ -0,0 +1,93 @@
+// eslint-disable-next-line @typescript-eslint/ban-ts-comment
+// @ts-nocheck
+/* eslint-disable */
+export function wheelZoomPlugin(opts) {
+    const factor = opts.factor || 0.75;
+    let xMin, xMax, yMin, yMax, xRange, yRange;
+    function clamp(nRange, nMin, nMax, fRange, fMin, fMax) {
+        if (nRange > fRange) {
+            nMin = fMin;
+            nMax = fMax;
+        }
+        else if (nMin < fMin) {
+            nMin = fMin;
+            nMax = fMin + nRange;
+        }
+        else if (nMax > fMax) {
+            nMax = fMax;
+            nMin = fMax - nRange;
+        }
+        return [nMin, nMax];
+    }
+    return {
+        hooks: {
+            ready: u => {
+                xMin = u.scales.x.min;
+                xMax = u.scales.x.max;
+                yMin = u.scales.y.min;
+                yMax = u.scales.y.max;
+                xRange = xMax - xMin;
+                yRange = yMax - yMin;
+                const plot = u.root.querySelector('.u-over');
+                const rect = plot.getBoundingClientRect();
+                // wheel drag pan
+                plot.addEventListener('mousedown', e => {
+                    if (e.button == 1) {
+                        //	plot.style.cursor = "move";
+                        e.preventDefault();
+                        const left0 = e.clientX;
+                        //	let top0 = e.clientY;
+                        const scXMin0 = u.scales.x.min;
+                        const scXMax0 = u.scales.x.max;
+                        const xUnitsPerPx = u.posToVal(1, 'x') - u.posToVal(0, 'x');
+                        function onmove(e) {
+                            e.preventDefault();
+                            const left1 = e.clientX;
+                            //	let top1 = e.clientY;
+                            const dx = xUnitsPerPx * (left1 - left0);
+                            u.setScale('x', {
+                                min: scXMin0 - dx,
+                                max: scXMax0 - dx,
+                            });
+                        }
+                        function onup(e) {
+                            document.removeEventListener('mousemove', onmove);
+                            document.removeEventListener('mouseup', onup);
+                        }
+                        document.addEventListener('mousemove', onmove);
+                        document.addEventListener('mouseup', onup);
+                    }
+                });
+                // wheel scroll zoom
+                plot.addEventListener('wheel', e => {
+                    e.preventDefault();
+                    const { left, top } = u.cursor;
+                    const leftPct = left / rect.width;
+                    const btmPct = 1 - top / rect.height;
+                    const xVal = u.posToVal(left, 'x');
+                    const yVal = u.posToVal(top, 'y');
+                    const oxRange = u.scales.x.max - u.scales.x.min;
+                    const oyRange = u.scales.y.max - u.scales.y.min;
+                    const nxRange = e.deltaY < 0 ? oxRange * factor : oxRange / factor;
+                    let nxMin = xVal - leftPct * nxRange;
+                    let nxMax = nxMin + nxRange;
+                    [nxMin, nxMax] = clamp(nxRange, nxMin, nxMax, xRange, xMin, xMax);
+                    const nyRange = e.deltaY < 0 ? oyRange * factor : oyRange / factor;
+                    let nyMin = yVal - btmPct * nyRange;
+                    let nyMax = nyMin + nyRange;
+                    [nyMin, nyMax] = clamp(nyRange, nyMin, nyMax, yRange, yMin, yMax);
+                    u.batch(() => {
+                        u.setScale('x', {
+                            min: nxMin,
+                            max: nxMax,
+                        });
+                        u.setScale('y', {
+                            min: nyMin,
+                            max: nyMax,
+                        });
+                    });
+                });
+            },
+        },
+    };
+}

package/dist/esm/components/InteractiveChart/styles.module.css

@@ -0,0 +1,25 @@
+:global .interactive-chart-wrapper{
+}
+:global .interactive-chart-wrapper .uplot{
+  font-family:inherit;
+  background-color:var(--sys-neutral-background1-level, #fdfdfd);
+  padding:16px 0;
+  border-radius:8px;
+  color:var(--sys-neutral-text-main, #41424e);
+}
+:global .interactive-chart-wrapper .uplot .u-title{
+  font-size:20px;
+  text-align:unset;
+  padding-left:24px;
+}
+:global .interactive-chart-wrapper .u-hz .u-cursor-x, :global .interactive-chart-wrapper .u-vt .u-cursor-y, :global .interactive-chart-wrapper .u-hz .u-cursor-y, :global .interactive-chart-wrapper .u-vt .u-cursor-x{
+  border-color:var(--sys-neutral-decor-default, #dde0ea);
+}
+:global .interactive-chart-wrapper .u-select{
+  background-color:var(--sys-neutral-decor-disabled, #e6e8ef);
+}
+:global .interactive-chart-wrapper table .u-series .u-marker{
+  width:16px;
+  height:16px;
+  border-radius:16px;
+}

package/dist/esm/components/InteractiveChart/types.d.ts

@@ -0,0 +1,5 @@
+import { ValueOf } from '@snack-uikit/utils';
+import { DRAW_STYLES, LINE_INTERPOLATIONS, PLOT_TYPES } from './constants';
+export type PlotType = ValueOf<typeof PLOT_TYPES>;
+export type LineInterpolation = ValueOf<typeof LINE_INTERPOLATIONS>;
+export type DrawStyle = ValueOf<typeof DRAW_STYLES>;

package/dist/esm/components/InteractiveChart/types.js

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

package/dist/esm/components/PieChart/Legend/Legend.d.ts

@@ -0,0 +1,21 @@
+import { MouseEvent } from 'react';
+import { TextLike } from '../types';
+type LegendItem = {
+    label: TextLike;
+    value: TextLike;
+    color?: string;
+    id?: string;
+};
+type LegendItemProps = LegendItem & {
+    size: 's' | 'm' | 'l';
+    onItemClick?: (event: MouseEvent<HTMLAnchorElement>) => void;
+};
+declare function LegendItem({ color, label, value, size, onItemClick }: LegendItemProps): import("react/jsx-runtime").JSX.Element;
+type LegendProps = {
+    data: Array<LegendItem>;
+    typographySize: 's' | 'm' | 'l';
+    legendTitle?: string;
+    onItemClick?: (event: MouseEvent<HTMLAnchorElement>, data: LegendItem) => void;
+};
+export declare function Legend({ data, legendTitle, typographySize, onItemClick }: LegendProps): import("react/jsx-runtime").JSX.Element;
+export {};

package/dist/esm/components/PieChart/Legend/Legend.js

@@ -0,0 +1,12 @@
+import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
+import { Fragment } from 'react';
+import { Divider } from '@snack-uikit/divider';
+import { Link } from '@snack-uikit/link';
+import { Typography } from '@snack-uikit/typography';
+import styles from './styles.module.css';
+function LegendItem({ color, label, value, size, onItemClick }) {
+    return (_jsxs("div", { className: styles.legendItemWrapper, children: [_jsxs("span", { className: styles.legendItemTitle, children: [color && _jsx("span", { className: styles.dot, style: { '--color': color } }), _jsx(Link, { onClick: onItemClick, text: String(label), size: size })] }), _jsx("span", { className: styles.legendValue, children: value })] }));
+}
+export function Legend({ data, legendTitle, typographySize, onItemClick }) {
+    return (_jsxs("div", { className: styles.legend, children: [legendTitle && (_jsxs(_Fragment, { children: [_jsx(Typography, { purpose: 'label', family: 'sans', size: typographySize, children: legendTitle }), _jsx("div", { className: styles.legendDividerWrapper, children: _jsx(Divider, {}) })] })), data.map((item, index) => (_jsxs(Fragment, { children: [_jsx(LegendItem, Object.assign({}, item, { size: typographySize, onItemClick: onItemClick ? event => onItemClick(event, item) : undefined })), index !== data.length - 1 && (_jsx("div", { className: styles.legendDividerWrapper, children: _jsx(Divider, {}) }))] }, `legend_${item.label}_${index}`)))] }));
+}

package/dist/esm/components/PieChart/Legend/index.d.ts

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

package/dist/esm/components/PieChart/Legend/index.js

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