@cloud-ru/uikit-product-charts 0.13.12

package/src/components/HeatMapChart/styles.module.scss

@@ -0,0 +1,96 @@
+@use '@sbercloud/figma-tokens-cloud-platform/build/scss/styles-theme-variables.scss';
+
+$title-height: 74;
+$legend-height: 94;
+$x-axis-label-height: 32;
+$ticks-size: 34;
+
+.wrapper {
+  padding: 24px;
+  background-color: styles-theme-variables.$sys-neutral-background1-level;
+  border-radius: 8px;
+}
+
+.gridWrapper {
+  position: relative;
+  display: block;
+
+  &[data-grid] {
+    display: grid;
+    grid-auto-rows: minmax(min-content, max-content);
+    grid-template-columns: auto 1fr;
+  }
+}
+
+.title {
+  @include styles-theme-variables.composite-var(styles-theme-variables.$sans-title-m);
+  margin-bottom: 24px;
+  font-size: 20px;
+  font-weight: bold;
+  color: styles-theme-variables.$sys-neutral-text-main;
+  height: #{$title-height - 24}px;
+}
+
+.legend {
+  margin-top: 24px;
+  height: #{$legend-height - 24}px;
+}
+
+.gradient {
+  height: 20px;
+  margin: 24px 0 8px;
+  background: var(--gradient);
+  /* stylelint-disable-next-line declaration-no-important */
+  background-color: styles-theme-variables.$sys-red-accent-default !important;
+  border-radius: 4px;
+}
+
+.legendTicksWrapper {
+  display: flex;
+  justify-content: space-between;
+}
+
+.tick {
+  @include styles-theme-variables.composite-var(styles-theme-variables.$sans-body-m);
+
+  color: styles-theme-variables.$sys-neutral-text-support;
+  font-size: 12px;
+}
+
+.cell {
+  @include styles-theme-variables.composite-var(styles-theme-variables.$sans-body-s);
+
+  color: var(--color);
+  text-overflow: ellipsis;
+  overflow: hidden;
+}
+
+.xAxisLabel {
+  display: flex;
+  justify-content: center;
+  margin-top: 8px;
+  color: styles-theme-variables.$sys-neutral-text-support;
+  font-size: 12px;
+  font-weight: 600;
+  height: #{$x-axis-label-height - 8}px;
+  margin-left: 6px;
+}
+
+.yAxisLabel {
+  margin-right: 16px;
+  transform: rotate(180deg);
+  transform-origin: right, top;
+  writing-mode: vertical-rl;
+  text-align: center;
+  font-size: 12px;
+  font-weight: 600;
+  color: styles-theme-variables.$sys-neutral-text-support;
+
+  &[data-x-axis-position='top'] {
+    margin-top: #{$ticks-size}px;
+  }
+
+  &[data-x-axis-position='bottom'] {
+    margin-bottom: #{$ticks-size}px;
+  }
+}

package/src/components/HeatMapChart/types.ts

@@ -0,0 +1,40 @@
+import { ReactNode } from 'react';
+
+import { XAxisPosition } from './constants';
+
+export type HeatMapChartAxisOptions = {
+  label?: string;
+  ticks?: string[];
+};
+
+export type HeatMapChartLegendOptions = {
+  show?: boolean;
+};
+
+export type HeatMapChartAxesOptions = {
+  xAxis?: HeatMapChartAxisOptions & { position?: XAxisPosition };
+  yAxis?: HeatMapChartAxisOptions;
+};
+
+export type HeatMapChartStyles = {
+  xLabelsStyle: (index: number) => Record<string, string | number>;
+  yLabelsStyle: (index: number) => Record<string, string | number>;
+  cellStyle: (x: number, y: number, ratio: number) => Record<string, string | number>;
+};
+
+export type HeatMapChartOptions = {
+  title?: string;
+  height?: number;
+  formatter?: (value: number) => string;
+  axes?: HeatMapChartAxesOptions;
+  domain: [number, number];
+  cellRender?: (x: number, y: number, value: number) => ReactNode;
+  legend?: HeatMapChartLegendOptions;
+  styles?: Partial<HeatMapChartStyles>;
+};
+
+export type HeatMapChartProps = {
+  data: number[][];
+  options: HeatMapChartOptions;
+  className?: string;
+};

package/src/components/InteractiveChart/InteractiveChart.tsx

@@ -0,0 +1,75 @@
+import 'uplot/dist/uPlot.min.css';
+
+import './styles.module.scss';
+
+import cn from 'classnames';
+import merge from 'lodash.merge';
+import { CSSProperties, useMemo } from 'react';
+import uPlot from 'uplot';
+import UPlotReact from 'uplot-react';
+
+import { extractSupportProps, WithSupportProps } from '@cloud-ru/uikit-product-utils';
+
+import {
+  CHART_OTHER_COLORS,
+  CHART_SERIES_COLORS,
+  COLOR_CONTAINER_CLASSNAME,
+  SeriesColorMap,
+} from '../../constants/colors';
+import { getBoxPlotOptions, getDefaultPlotOptions } from './configurations';
+import { PLOT_TYPES } from './constants';
+import { useComputedColors } from './hooks/useComputedColors';
+import { PlotType } from './types';
+
+export type InteractiveChartProps = {
+  data: uPlot.AlignedData;
+  options?: Partial<uPlot.Options>;
+  type?: PlotType;
+  className?: string;
+};
+
+function chooseBaseOptions({
+  type,
+  computedColors,
+}: {
+  type: PlotType;
+  computedColors: SeriesColorMap;
+}): uPlot.Options {
+  switch (type) {
+    case PLOT_TYPES.BoxPlot:
+      return getBoxPlotOptions({ computedColors });
+    case PLOT_TYPES.Default:
+    default:
+      return getDefaultPlotOptions({ computedColors });
+  }
+}
+
+export function InteractiveChart({
+  data,
+  options,
+  type = PLOT_TYPES.Default,
+  className,
+  ...rest
+}: WithSupportProps<InteractiveChartProps>) {
+  const style = useMemo(
+    () =>
+      Object.entries({ ...CHART_SERIES_COLORS, ...CHART_OTHER_COLORS }).reduce((styles, [key, value]) => {
+        styles[`--${key}`] = value;
+        return styles;
+      }, {} as CSSProperties),
+    [],
+  );
+
+  const computedColors = useComputedColors();
+
+  const resultOptions = useMemo(
+    () => merge({}, chooseBaseOptions({ type, computedColors }), options),
+    [computedColors, options, type],
+  );
+
+  return (
+    <div {...extractSupportProps(rest)} className={cn(COLOR_CONTAINER_CLASSNAME, className)} style={style}>
+      <UPlotReact options={resultOptions} data={data} />
+    </div>
+  );
+}

package/src/components/InteractiveChart/configurations/boxPlot.ts

@@ -0,0 +1,75 @@
+import uPlot from 'uplot';
+
+import { ColorMap } from '../../../constants/colors';
+import { boxPlotPlugin } from '../plugins/boxPlotPlugin';
+import { columnHighlightPlugin } from '../plugins/columnHighlightPlugin';
+import { legendAsTooltipPlugin } from '../plugins/legendAsTooltipPlugin';
+
+export const getBoxPlotOptions = ({ computedColors }: { computedColors: ColorMap }): uPlot.Options => ({
+  id: 'boxPlot',
+  title: 'Distribution of object predictions by bin',
+  width: 800,
+  height: 600,
+  cursor: {
+    drag: {
+      x: false,
+      y: false,
+    },
+  },
+  plugins: [
+    boxPlotPlugin({ computedColors }),
+    columnHighlightPlugin({ computedColors }),
+    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,
+      },
+    },
+  ],
+});

package/src/components/InteractiveChart/configurations/defaultPlot.ts

@@ -0,0 +1,63 @@
+import Color from 'color';
+import uPlot from 'uplot';
+
+import { ColorMap, OTHER_COLORS } from '../../../constants/colors';
+import { wheelZoomPlugin } from '../plugins/wheelZoomPlugin';
+
+export const getDefaultPlotOptions = ({ computedColors }: { computedColors: ColorMap }): uPlot.Options => {
+  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/src/components/InteractiveChart/configurations/index.ts

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

package/src/components/InteractiveChart/constants.ts

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

package/src/components/InteractiveChart/helpers/pathRenderer.ts

@@ -0,0 +1,48 @@
+// eslint-disable-next-line @typescript-eslint/ban-ts-comment
+// @ts-nocheck
+/* eslint-disable */
+
+import uPlot from 'uplot';
+
+import { LINE_INTERPOLATIONS, DRAW_STYLES } from '../constants';
+import { DrawStyle, LineInterpolation } from '../types';
+
+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: DrawStyle, lineInterpolation?: LineInterpolation) {
+  return function pathRenderer(self: uPlot, seriesIdx: number, idx0: number, idx1: number): uPlot.Series.Paths | null {
+    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/src/components/InteractiveChart/hooks/useComputedColors.ts

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

package/src/components/InteractiveChart/hooks/useLayer.ts

@@ -0,0 +1,33 @@
+import Color from 'color';
+import { useMemo } from 'react';
+import { Series } from 'uplot';
+
+import { SeriesColor } from '../../../constants/colors';
+import { getPathRenderer } from '../helpers/pathRenderer';
+import { DrawStyle, LineInterpolation } from '../types';
+import { useComputedColors } from './useComputedColors';
+
+type Layer = Partial<Series>;
+type UseLayerProps = {
+  label: string;
+  color: SeriesColor;
+  drawStyle: DrawStyle;
+  lineInterpolation?: LineInterpolation;
+};
+
+export function useLayer({ label, color, drawStyle, lineInterpolation }: UseLayerProps): Layer {
+  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/src/components/InteractiveChart/index.ts

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

package/src/components/InteractiveChart/plugins/boxPlotPlugin.ts

@@ -0,0 +1,132 @@
+// eslint-disable-next-line @typescript-eslint/ban-ts-comment
+// @ts-nocheck
+/* eslint-disable */
+import Color from 'color';
+import uPlot from 'uplot';
+
+import { SERIES_COLORS, ColorMap, OTHER_COLORS } from '../../../constants/colors';
+
+export function boxPlotPlugin({
+  gap = 5,
+  bodyMaxWidth = 60,
+  shadowWidth = 3,
+  computedColors,
+}: {
+  gap?: number;
+  bodyMaxWidth?: number;
+  shadowWidth?: number;
+  computedColors: ColorMap;
+}) {
+  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?.[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/src/components/InteractiveChart/plugins/columnHighlightPlugin.ts

@@ -0,0 +1,78 @@
+// eslint-disable-next-line @typescript-eslint/ban-ts-comment
+// @ts-nocheck
+/* eslint-disable */
+import Color from 'color';
+import uPlot from 'uplot';
+import { ColorMap, OTHER_COLORS } from '../../../constants/colors';
+
+export function columnHighlightPlugin({
+  className = '',
+  computedColors,
+}: {
+  className?: string;
+  computedColors: ColorMap;
+}) {
+  const backgroundColor = new Color(computedColors[OTHER_COLORS.ColumnHighlightColor]).alpha(0.5).rgb().string();
+
+  let underEl, overEl, currIdx: number;
+
+  function init(u: uPlot) {
+    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,
+    },
+  };
+}