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

package/dist/cjs/components/InteractiveChart/InteractiveChart.js

@@ -0,0 +1,48 @@
+"use strict";
+var __rest = (this && this.__rest) || function (s, e) {
+    var t = {};
+    for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p) && e.indexOf(p) < 0)
+        t[p] = s[p];
+    if (s != null && typeof Object.getOwnPropertySymbols === "function")
+        for (var i = 0, p = Object.getOwnPropertySymbols(s); i < p.length; i++) {
+            if (e.indexOf(p[i]) < 0 && Object.prototype.propertyIsEnumerable.call(s, p[i]))
+                t[p[i]] = s[p[i]];
+        }
+    return t;
+};
+var __importDefault = (this && this.__importDefault) || function (mod) {
+    return (mod && mod.__esModule) ? mod : { "default": mod };
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.InteractiveChart = InteractiveChart;
+const jsx_runtime_1 = require("react/jsx-runtime");
+require("uplot/dist/uPlot.min.css");
+require('./styles.module.css');
+const classnames_1 = __importDefault(require("classnames"));
+const lodash_merge_1 = __importDefault(require("lodash.merge"));
+const react_1 = require("react");
+const uplot_react_1 = __importDefault(require("uplot-react"));
+const uikit_product_utils_1 = require("@sbercloud/uikit-product-utils");
+const colors_1 = require("../../constants/colors");
+const configurations_1 = require("./configurations");
+const constants_1 = require("./constants");
+const useComputedColors_1 = require("./hooks/useComputedColors");
+function chooseBaseOptions({ type, computedColors, }) {
+    switch (type) {
+        case constants_1.PLOT_TYPES.BoxPlot:
+            return (0, configurations_1.getBoxPlotOptions)({ computedColors });
+        case constants_1.PLOT_TYPES.Default:
+        default:
+            return (0, configurations_1.getDefaultPlotOptions)({ computedColors });
+    }
+}
+function InteractiveChart(_a) {
+    var { data, options, type = constants_1.PLOT_TYPES.Default, className } = _a, rest = __rest(_a, ["data", "options", "type", "className"]);
+    const style = (0, react_1.useMemo)(() => Object.entries(Object.assign(Object.assign({}, colors_1.CHART_SERIES_COLORS), colors_1.CHART_OTHER_COLORS)).reduce((styles, [key, value]) => {
+        styles[`--${key}`] = value;
+        return styles;
+    }, {}), []);
+    const computedColors = (0, useComputedColors_1.useComputedColors)();
+    const resultOptions = (0, react_1.useMemo)(() => (0, lodash_merge_1.default)({}, chooseBaseOptions({ type, computedColors }), options), [computedColors, options, type]);
+    return ((0, jsx_runtime_1.jsx)("div", Object.assign({}, (0, uikit_product_utils_1.extractSupportProps)(rest), { className: (0, classnames_1.default)(colors_1.COLOR_CONTAINER_CLASSNAME, className), style: style, children: (0, jsx_runtime_1.jsx)(uplot_react_1.default, { options: resultOptions, data: data }) })));
+}

package/dist/cjs/components/InteractiveChart/configurations/boxPlot.d.ts

@@ -0,0 +1,5 @@
+import uPlot from 'uplot';
+import { ColorMap } from '../../../constants/colors';
+export declare const getBoxPlotOptions: ({ computedColors }: {
+    computedColors: ColorMap;
+}) => uPlot.Options;

package/dist/cjs/components/InteractiveChart/configurations/boxPlot.js

@@ -0,0 +1,75 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.getBoxPlotOptions = void 0;
+const boxPlotPlugin_1 = require("../plugins/boxPlotPlugin");
+const columnHighlightPlugin_1 = require("../plugins/columnHighlightPlugin");
+const legendAsTooltipPlugin_1 = require("../plugins/legendAsTooltipPlugin");
+const getBoxPlotOptions = ({ computedColors }) => ({
+    id: 'boxPlot',
+    title: 'Distribution of object predictions by bin',
+    width: 800,
+    height: 600,
+    cursor: {
+        drag: {
+            x: false,
+            y: false,
+        },
+    },
+    plugins: [
+        (0, boxPlotPlugin_1.boxPlotPlugin)({ computedColors }),
+        (0, columnHighlightPlugin_1.columnHighlightPlugin)({ computedColors }),
+        (0, legendAsTooltipPlugin_1.legendAsTooltipPlugin)({ computedColors }),
+    ],
+    series: [
+        {
+            label: 'bin',
+        },
+        {
+            label: 'X1',
+        },
+        {
+            label: 'Q1',
+        },
+        {
+            label: 'Median',
+        },
+        {
+            label: 'Q3',
+        },
+        {
+            label: 'X2',
+        },
+    ],
+    scales: {
+        x: {
+            distr: 2,
+            time: false,
+            range: (self, fromMin, fromMax) => [fromMin - 1, fromMax + 1],
+        },
+        y: {
+            time: false,
+            auto: true,
+        },
+    },
+    axes: [
+        {
+            label: 'Bin Number',
+            labelSize: 30,
+            stroke: '#808080',
+            grid: {
+                stroke: 'rgba(128, 128, 128, 0.15)',
+                width: 1 / devicePixelRatio,
+            },
+        },
+        {
+            label: 'Prediction',
+            labelSize: 30,
+            stroke: '#808080',
+            grid: {
+                stroke: 'rgba(128, 128, 128, 0.15)',
+                width: 1 / devicePixelRatio,
+            },
+        },
+    ],
+});
+exports.getBoxPlotOptions = getBoxPlotOptions;

package/dist/cjs/components/InteractiveChart/configurations/defaultPlot.d.ts

@@ -0,0 +1,5 @@
+import uPlot from 'uplot';
+import { ColorMap } from '../../../constants/colors';
+export declare const getDefaultPlotOptions: ({ computedColors }: {
+    computedColors: ColorMap;
+}) => uPlot.Options;

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

@@ -0,0 +1,66 @@
+"use strict";
+var __importDefault = (this && this.__importDefault) || function (mod) {
+    return (mod && mod.__esModule) ? mod : { "default": mod };
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.getDefaultPlotOptions = void 0;
+const color_1 = __importDefault(require("color"));
+const colors_1 = require("../../../constants/colors");
+const wheelZoomPlugin_1 = require("../plugins/wheelZoomPlugin");
+const getDefaultPlotOptions = ({ computedColors }) => {
+    const axisColor = new color_1.default(computedColors[colors_1.OTHER_COLORS.AxisColor]).alpha(0.8).rgb().string();
+    const labelColor = computedColors[colors_1.OTHER_COLORS.LabelColor];
+    return {
+        id: 'defaultPlot',
+        title: 'Title',
+        width: 800,
+        height: 600,
+        cursor: {
+            drag: {
+                x: true,
+                y: true,
+                dist: 10,
+                uni: 10,
+            },
+        },
+        plugins: [(0, wheelZoomPlugin_1.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,
+                },
+            },
+        ],
+    };
+};
+exports.getDefaultPlotOptions = getDefaultPlotOptions;

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

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

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

@@ -0,0 +1,18 @@
+"use strict";
+var __createBinding = (this && this.__createBinding) || (Object.create ? (function(o, m, k, k2) {
+    if (k2 === undefined) k2 = k;
+    var desc = Object.getOwnPropertyDescriptor(m, k);
+    if (!desc || ("get" in desc ? !m.__esModule : desc.writable || desc.configurable)) {
+      desc = { enumerable: true, get: function() { return m[k]; } };
+    }
+    Object.defineProperty(o, k2, desc);
+}) : (function(o, m, k, k2) {
+    if (k2 === undefined) k2 = k;
+    o[k2] = m[k];
+}));
+var __exportStar = (this && this.__exportStar) || function(m, exports) {
+    for (var p in m) if (p !== "default" && !Object.prototype.hasOwnProperty.call(exports, p)) __createBinding(exports, m, p);
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+__exportStar(require("./boxPlot"), exports);
+__exportStar(require("./defaultPlot"), exports);

package/dist/cjs/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/cjs/components/InteractiveChart/constants.js

@@ -0,0 +1,20 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.DRAW_STYLES = exports.LINE_INTERPOLATIONS = exports.PLOT_TYPES = void 0;
+exports.PLOT_TYPES = {
+    BoxPlot: 'boxPlot',
+    Default: 'default',
+};
+exports.LINE_INTERPOLATIONS = {
+    Linear: 'linear',
+    StepAfter: 'stepAfter',
+    StepBefore: 'stepBefore',
+    Spline: 'spline',
+};
+exports.DRAW_STYLES = {
+    Line: 'line',
+    Bars: 'bars',
+    Points: 'points',
+    BarsLeft: 'barsLeft',
+    BarsRight: 'barsRight',
+};

package/dist/cjs/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/cjs/components/InteractiveChart/helpers/pathRenderer.js

@@ -0,0 +1,45 @@
+"use strict";
+// eslint-disable-next-line @typescript-eslint/ban-ts-comment
+// @ts-nocheck
+/* eslint-disable */
+var __importDefault = (this && this.__importDefault) || function (mod) {
+    return (mod && mod.__esModule) ? mod : { "default": mod };
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.getPathRenderer = getPathRenderer;
+const uplot_1 = __importDefault(require("uplot"));
+const constants_1 = require("../constants");
+const { linear, stepped, bars, spline } = uplot_1.default.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();
+function getPathRenderer(drawStyle, lineInterpolation) {
+    return function pathRenderer(self, seriesIdx, idx0, idx1) {
+        const style = drawStyle;
+        const interp = lineInterpolation;
+        const renderer = style === constants_1.DRAW_STYLES.Line
+            ? interp === constants_1.LINE_INTERPOLATIONS.Linear
+                ? _linear
+                : interp === constants_1.LINE_INTERPOLATIONS.StepAfter
+                    ? _stepAfter
+                    : interp === constants_1.LINE_INTERPOLATIONS.StepBefore
+                        ? _stepBefore
+                        : interp === constants_1.LINE_INTERPOLATIONS.Spline
+                            ? _spline
+                            : null
+            : style === constants_1.DRAW_STYLES.Bars
+                ? _bars60_100
+                : style === constants_1.DRAW_STYLES.BarsLeft
+                    ? _bars100Left
+                    : style === constants_1.DRAW_STYLES.BarsRight
+                        ? _bars100Right
+                        : style === constants_1.DRAW_STYLES.Points
+                            ? () => null
+                            : () => null;
+        return renderer(self, seriesIdx, idx0, idx1);
+    };
+}

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

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

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

@@ -0,0 +1,24 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.useComputedColors = useComputedColors;
+const react_1 = require("react");
+const uikit_product_utils_1 = require("@sbercloud/uikit-product-utils");
+const utils_1 = require("@snack-uikit/utils");
+const colors_1 = require("../../../constants/colors");
+const EMPTY_COLORS = {};
+function useComputedColors() {
+    const { theme } = (0, uikit_product_utils_1.useTheme)();
+    const [computedColors, setComputedColors] = (0, react_1.useState)(EMPTY_COLORS);
+    (0, utils_1.useLayoutEffect)(() => {
+        const colorContainer = document.querySelector('.' + colors_1.COLOR_CONTAINER_CLASSNAME);
+        if (!colorContainer) {
+            return;
+        }
+        const styles = getComputedStyle(colorContainer);
+        setComputedColors(Object.values(Object.assign(Object.assign({}, colors_1.SERIES_COLORS), colors_1.OTHER_COLORS)).reduce((colors, color) => {
+            colors[color] = styles.getPropertyValue(`--${color}`);
+            return colors;
+        }, {}));
+    }, [theme]);
+    return computedColors;
+}

package/dist/cjs/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/cjs/components/InteractiveChart/hooks/useLayer.js

@@ -0,0 +1,22 @@
+"use strict";
+var __importDefault = (this && this.__importDefault) || function (mod) {
+    return (mod && mod.__esModule) ? mod : { "default": mod };
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.useLayer = useLayer;
+const color_1 = __importDefault(require("color"));
+const react_1 = require("react");
+const pathRenderer_1 = require("../helpers/pathRenderer");
+const useComputedColors_1 = require("./useComputedColors");
+function useLayer({ label, color, drawStyle, lineInterpolation }) {
+    const computedColors = (0, useComputedColors_1.useComputedColors)();
+    const stroke = computedColors[color];
+    const fill = new color_1.default(stroke).alpha(0.1).rgb().string();
+    return (0, react_1.useMemo)(() => ({
+        label,
+        stroke,
+        fill,
+        width: 2,
+        paths: (0, pathRenderer_1.getPathRenderer)(drawStyle, lineInterpolation),
+    }), [drawStyle, label, stroke, fill, lineInterpolation]);
+}

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

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

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

@@ -0,0 +1,18 @@
+"use strict";
+var __createBinding = (this && this.__createBinding) || (Object.create ? (function(o, m, k, k2) {
+    if (k2 === undefined) k2 = k;
+    var desc = Object.getOwnPropertyDescriptor(m, k);
+    if (!desc || ("get" in desc ? !m.__esModule : desc.writable || desc.configurable)) {
+      desc = { enumerable: true, get: function() { return m[k]; } };
+    }
+    Object.defineProperty(o, k2, desc);
+}) : (function(o, m, k, k2) {
+    if (k2 === undefined) k2 = k;
+    o[k2] = m[k];
+}));
+var __exportStar = (this && this.__exportStar) || function(m, exports) {
+    for (var p in m) if (p !== "default" && !Object.prototype.hasOwnProperty.call(exports, p)) __createBinding(exports, m, p);
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+__exportStar(require("./InteractiveChart"), exports);
+__exportStar(require("./hooks/useLayer"), exports);

package/dist/cjs/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/cjs/components/InteractiveChart/plugins/boxPlotPlugin.js

@@ -0,0 +1,90 @@
+"use strict";
+var __importDefault = (this && this.__importDefault) || function (mod) {
+    return (mod && mod.__esModule) ? mod : { "default": mod };
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.boxPlotPlugin = boxPlotPlugin;
+// eslint-disable-next-line @typescript-eslint/ban-ts-comment
+// @ts-nocheck
+/* eslint-disable */
+const color_1 = __importDefault(require("color"));
+const uplot_1 = __importDefault(require("uplot"));
+const colors_1 = require("../../../constants/colors");
+function boxPlotPlugin({ gap = 5, bodyMaxWidth = 60, shadowWidth = 3, computedColors, }) {
+    const shadowColor = computedColors[colors_1.OTHER_COLORS.ShadowColor];
+    const lineColor = new color_1.default(computedColors[colors_1.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(colors_1.SERIES_COLORS)[i % Object.keys(colors_1.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_1.default.assign(opts, {
+                cursor: {
+                    points: {
+                        show: false,
+                    },
+                },
+            });
+            opts.series.forEach(series => {
+                series.paths = () => null;
+                series.points = { show: false };
+            });
+        },
+        hooks: {
+            draw: drawBoxes,
+        },
+    };
+}

package/dist/cjs/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/cjs/components/InteractiveChart/plugins/columnHighlightPlugin.js

@@ -0,0 +1,65 @@
+"use strict";
+var __importDefault = (this && this.__importDefault) || function (mod) {
+    return (mod && mod.__esModule) ? mod : { "default": mod };
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.columnHighlightPlugin = columnHighlightPlugin;
+// eslint-disable-next-line @typescript-eslint/ban-ts-comment
+// @ts-nocheck
+/* eslint-disable */
+const color_1 = __importDefault(require("color"));
+const uplot_1 = __importDefault(require("uplot"));
+const colors_1 = require("../../../constants/colors");
+function columnHighlightPlugin({ className = '', computedColors, }) {
+    const backgroundColor = new color_1.default(computedColors[colors_1.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_1.default.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_1.default.assign(opts, {
+                cursor: {
+                    x: false,
+                    y: false,
+                },
+            });
+        },
+        hooks: {
+            init: init,
+            setCursor: update,
+        },
+    };
+}

package/dist/cjs/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/cjs/components/InteractiveChart/plugins/legendAsTooltipPlugin.js

@@ -0,0 +1,58 @@
+"use strict";
+// eslint-disable-next-line @typescript-eslint/ban-ts-comment
+// @ts-nocheck
+/* eslint-disable */
+var __importDefault = (this && this.__importDefault) || function (mod) {
+    return (mod && mod.__esModule) ? mod : { "default": mod };
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.legendAsTooltipPlugin = legendAsTooltipPlugin;
+const uplot_1 = __importDefault(require("uplot"));
+const colors_1 = require("../../../constants/colors");
+function legendAsTooltipPlugin({ className = '', computedColors, }) {
+    const backgroundColor = computedColors[colors_1.OTHER_COLORS.TooltipBackgroundColor];
+    const color = computedColors[colors_1.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_1.default.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,
+        },
+    };
+}