@cloud-ru/uikit-product-charts 0.13.12

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

@@ -0,0 +1,69 @@
+// eslint-disable-next-line @typescript-eslint/ban-ts-comment
+// @ts-nocheck
+/* eslint-disable */
+
+import uPlot from 'uplot';
+import { ColorMap, OTHER_COLORS } from '../../../constants/colors';
+
+export function legendAsTooltipPlugin({
+  className = '',
+  computedColors,
+}: {
+  className?: string;
+  computedColors: ColorMap;
+}) {
+  const backgroundColor = computedColors[OTHER_COLORS.TooltipBackgroundColor];
+  const color = computedColors[OTHER_COLORS.TooltipColor];
+
+  function init(u: uPlot, opts) {
+    const legendEl = u.root.querySelector(`.u-legend`) as Element;
+
+    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`) as Element;
+    legendEl.style.transform = 'translate(' + (left + 15) + 'px, ' + top + 'px)';
+  }
+
+  return {
+    hooks: {
+      init: init,
+      setCursor: update,
+    },
+  };
+}

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

@@ -0,0 +1,115 @@
+// 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/src/components/InteractiveChart/styles.module.scss

@@ -0,0 +1,39 @@
+@use '@sbercloud/figma-tokens-cloud-platform/build/scss/styles-theme-variables';
+
+/* stylelint-disable-next-line selector-pseudo-class-no-unknown*/
+:global {
+  .interactive-chart-wrapper {
+    & .uplot {
+      font-family: inherit;
+      background-color: styles-theme-variables.$sys-neutral-background1-level;
+      padding: 16px 0;
+      border-radius: 8px;
+      color: styles-theme-variables.$sys-neutral-text-main;
+    }
+
+    & .uplot .u-title {
+      font-size: 20px;
+      text-align: unset;
+      padding-left: 24px;
+    }
+
+    /* mouse cross hair */
+    & .u-hz .u-cursor-x,
+    & .u-vt .u-cursor-y,
+    & .u-hz .u-cursor-y,
+    & .u-vt .u-cursor-x {
+      border-color: styles-theme-variables.$sys-neutral-decor-default;
+    }
+
+    /* Selected area */
+    & .u-select {
+      background-color: styles-theme-variables.$sys-neutral-decor-disabled;
+    }
+
+    & table .u-series .u-marker {
+      width: 16px;
+      height: 16px;
+      border-radius: 16px;
+    }
+  }
+}

package/src/components/InteractiveChart/types.ts

@@ -0,0 +1,7 @@
+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/src/components/PieChart/Legend/Legend.tsx

@@ -0,0 +1,71 @@
+import { Fragment, MouseEvent } from 'react';
+
+import { Divider } from '@snack-uikit/divider';
+import { Link } from '@snack-uikit/link';
+import { Typography } from '@snack-uikit/typography';
+
+import { TextLike } from '../types';
+import styles from './styles.module.scss';
+
+type LegendItem = {
+  label: TextLike;
+  value: TextLike;
+  color?: string;
+  id?: string;
+};
+
+type LegendItemProps = LegendItem & {
+  size: 's' | 'm' | 'l';
+  onItemClick?: (event: MouseEvent<HTMLAnchorElement>) => void;
+};
+
+function LegendItem({ color, label, value, size, onItemClick }: LegendItemProps) {
+  return (
+    <div className={styles.legendItemWrapper}>
+      <span className={styles.legendItemTitle}>
+        {color && <span className={styles.dot} style={{ '--color': color }} />}
+        <Link onClick={onItemClick} text={String(label)} size={size} />
+      </span>
+
+      <span className={styles.legendValue}>{value}</span>
+    </div>
+  );
+}
+
+type LegendProps = {
+  data: Array<LegendItem>;
+  typographySize: 's' | 'm' | 'l';
+  legendTitle?: string;
+  onItemClick?: (event: MouseEvent<HTMLAnchorElement>, data: LegendItem) => void;
+};
+
+export function Legend({ data, legendTitle, typographySize, onItemClick }: LegendProps) {
+  return (
+    <div className={styles.legend}>
+      {legendTitle && (
+        <>
+          <Typography purpose={'label'} family={'sans'} size={typographySize}>
+            {legendTitle}
+          </Typography>
+          <div className={styles.legendDividerWrapper}>
+            <Divider />
+          </div>
+        </>
+      )}
+      {data.map((item, index) => (
+        <Fragment key={`legend_${item.label}_${index}`}>
+          <LegendItem
+            {...item}
+            size={typographySize}
+            onItemClick={onItemClick ? event => onItemClick(event, item) : undefined}
+          />
+          {index !== data.length - 1 && (
+            <div className={styles.legendDividerWrapper}>
+              <Divider />
+            </div>
+          )}
+        </Fragment>
+      ))}
+    </div>
+  );
+}

package/src/components/PieChart/Legend/index.ts

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

package/src/components/PieChart/Legend/styles.module.scss

@@ -0,0 +1,45 @@
+@use '@sbercloud/figma-tokens-cloud-platform/build/scss/styles-theme-variables';
+
+.legend {
+  display: flex;
+  flex-direction: column;
+  color: styles-theme-variables.$sys-neutral-text-support;
+  padding-right: 8px;
+}
+
+.legendItemWrapper {
+  color: styles-theme-variables.$sys-neutral-text-main;
+  display: flex;
+  align-items: center;
+  flex-direction: row;
+  gap: 8px;
+  justify-content: space-between;
+}
+
+.dot {
+  display: inline-block;
+  min-width: 8px;
+  min-height: 8px;
+  width: 8px;
+  height: 8px;
+  border-radius: 100%;
+
+  margin-right: 12px;
+  background-color: var(--color);
+}
+
+.legendDividerWrapper {
+  margin: 16px 0;
+}
+
+.legendItemTitle {
+  @include styles-theme-variables.composite-var(styles-theme-variables.$sans-body-m);
+
+  display: flex;
+  align-items: center;
+}
+
+.legendValue {
+  @include styles-theme-variables.composite-var(styles-theme-variables.$sans-label-l);
+}
+

package/src/components/PieChart/Pie.tsx

@@ -0,0 +1,71 @@
+import { arc, pie, PieArcDatum } from 'd3-shape';
+import { CSSProperties, Fragment, MouseEvent } from 'react';
+
+import { DataType, LabelRenderFunction } from './types';
+
+type PieProps = {
+  data: DataType[];
+  label: LabelRenderFunction<DataType>;
+  onMouseOut: () => void;
+  onMouseOver: (event: MouseEvent<SVGPathElement>, dataIndex: number) => void;
+  onMouseDown: (event: MouseEvent<SVGPathElement>, dataIndex: number) => void;
+  radius: number;
+  innerRadius: number;
+  segmentsShift: number;
+  segmentsStyle: CSSProperties;
+  hoveredIndex?: number;
+  style: CSSProperties;
+};
+
+export function Pie({
+  data,
+  hoveredIndex,
+  radius,
+  innerRadius,
+  segmentsShift,
+  onMouseOut,
+  label,
+  style,
+  segmentsStyle,
+  onMouseOver,
+  onMouseDown,
+}: PieProps) {
+  const pieSegments = pie<DataType>()
+    .sort(null)
+    .value((d: DataType) => d.value)(data);
+
+  const getHoveredPath = arc<PieArcDatum<DataType>>()
+    .outerRadius(radius + 1)
+    .innerRadius(innerRadius + 1)
+    .startAngle(d => d.startAngle + Math.PI / 2)
+    .endAngle(d => d.endAngle + Math.PI / 2)
+    .padAngle(segmentsShift);
+
+  const getPath = arc<PieArcDatum<DataType>>()
+    .outerRadius(radius)
+    .innerRadius(innerRadius)
+    .startAngle(d => d.startAngle + Math.PI / 2)
+    .endAngle(d => d.endAngle + Math.PI / 2)
+    .padAngle(segmentsShift);
+
+  return (
+    <svg viewBox='0 0 100 100' width='100%' height='100%' style={style}>
+      <g transform='translate(50,50)'>
+        {pieSegments.map((segment, index) => (
+          <Fragment key={index}>
+            <path
+              onMouseOver={e => onMouseOver(e, index)}
+              onMouseOut={onMouseOut}
+              onMouseDown={e => onMouseDown(e, index)}
+              fill={segment.data.color}
+              d={hoveredIndex === index ? String(getHoveredPath(segment)) : String(getPath(segment))}
+              style={segmentsStyle}
+            />
+
+            {label({ dataEntry: segment.data, dataIndex: index })}
+          </Fragment>
+        ))}
+      </g>
+    </svg>
+  );
+}

package/src/components/PieChart/PieChart.tsx

@@ -0,0 +1,154 @@
+import { truncateString } from '@cloud-ru/ft-formatters';
+import cn from 'classnames';
+import { MouseEvent, useCallback, useMemo, useState } from 'react';
+
+import { extractSupportProps, WithSupportProps } from '@cloud-ru/uikit-product-utils';
+import { Scroll } from '@snack-uikit/scroll';
+import { Typography } from '@snack-uikit/typography';
+
+import { CHART_SERIES_COLORS, SERIES_COLORS, SeriesColor } from '../../constants/colors';
+import { Legend } from './Legend';
+import { Pie } from './Pie';
+import styles from './styles.module.scss';
+import { DataType, LabelRenderFunction, LegendType, PieChartProps } from './types';
+
+export function PieChart({
+  options: { width, height, title, legendTitle, typographySize = 'l' },
+  data,
+  aggregatedLegend,
+  onPieSegmentClick,
+  onLegendItemClick,
+  className,
+  ...rest
+}: WithSupportProps<PieChartProps>) {
+  const [hovered, setHovered] = useState<number | undefined>(undefined);
+  const colorizedData: DataType[] = useMemo(
+    () =>
+      data.map((x, index) => {
+        const colorsKey = Object.values<SeriesColor>(SERIES_COLORS);
+        const chartColor = CHART_SERIES_COLORS[colorsKey[index % colorsKey.length]];
+        return {
+          ...x,
+          color: x.color || chartColor,
+        };
+      }),
+    [data],
+  );
+
+  const pieStyles = useMemo(() => ({ overflow: 'overlay' }), []);
+  const segmentStyles = useMemo(() => ({ transition: 'all .3s', cursor: 'pointer' }), []);
+  const onMouseOverCallback = useCallback((_: unknown, index: number) => setHovered(index), []);
+  const onMouseOutCallback = useCallback(() => setHovered(undefined), []);
+  const onMouseDownCallback = useCallback(
+    (event: MouseEvent<SVGPathElement>, index: number) => {
+      event.preventDefault();
+
+      if (onPieSegmentClick) {
+        onPieSegmentClick(data[index]);
+      }
+    },
+    [data, onPieSegmentClick],
+  );
+  const onColorizedLegendItemClick = useMemo(() => {
+    if (!onLegendItemClick) {
+      return undefined;
+    }
+
+    return (event: MouseEvent<HTMLAnchorElement>, item: LegendType) => {
+      event.preventDefault();
+      onLegendItemClick(item);
+    };
+  }, [onLegendItemClick]);
+  const onAggregatedItemClick = useMemo(() => {
+    const handleClick = aggregatedLegend?.onAggregatedLegendItemClick;
+    if (!handleClick) {
+      return undefined;
+    }
+
+    return (event: MouseEvent<HTMLAnchorElement>, item: LegendType) => {
+      event.preventDefault();
+      handleClick(item);
+    };
+  }, [aggregatedLegend]);
+
+  const labelRenderer = useCallback<LabelRenderFunction<DataType>>(
+    ({ dataEntry, dataIndex }) => (
+      <>
+        <text
+          className={styles.svgText}
+          x={0}
+          y={-4}
+          data-hovered={hovered === dataIndex || undefined}
+          key={`${dataIndex}_label`}
+        >
+          {truncateString(String(dataEntry.label), 15)}
+        </text>
+        <text
+          className={styles.svgText}
+          x={0}
+          y={4}
+          data-hovered={hovered === dataIndex || undefined}
+          data-bolder='true'
+          key={`${dataIndex}_value`}
+        >
+          {dataEntry.value}
+        </text>
+      </>
+    ),
+    [hovered],
+  );
+
+  return (
+    <div
+      {...extractSupportProps(rest)}
+      className={cn(className, styles.wrapper)}
+      style={{ '--width': width ? `${width}px` : undefined, '--height': height ? `${height}px` : undefined }}
+    >
+      <Typography purpose={'title'} family={'sans'} size={typographySize} className={styles.title}>
+        {title}
+      </Typography>
+
+      <div className={styles.contentWrapper}>
+        <div className={styles.legendWrapper}>
+          <Scroll size={'s'}>
+            <Legend
+              data={colorizedData}
+              legendTitle={legendTitle}
+              onItemClick={onColorizedLegendItemClick}
+              typographySize={typographySize}
+            />
+          </Scroll>
+        </div>
+
+        <div className={styles.pieWrapper}>
+          <Pie
+            style={pieStyles}
+            radius={46}
+            innerRadius={23}
+            label={labelRenderer}
+            data={colorizedData}
+            segmentsStyle={segmentStyles}
+            segmentsShift={0.015}
+            hoveredIndex={hovered}
+            onMouseOver={onMouseOverCallback}
+            onMouseOut={onMouseOutCallback}
+            onMouseDown={onMouseDownCallback}
+          />
+        </div>
+
+        {aggregatedLegend && (
+          <div className={styles.legendWrapper}>
+            <Scroll size={'s'}>
+              <Legend
+                data={aggregatedLegend.data}
+                legendTitle={aggregatedLegend.title}
+                onItemClick={onAggregatedItemClick}
+                typographySize={typographySize}
+              />
+            </Scroll>
+          </div>
+        )}
+      </div>
+    </div>
+  );
+}

package/src/components/PieChart/index.ts

@@ -0,0 +1,2 @@
+export * from './PieChart';
+export type { PieChartProps } from './types';

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

@@ -0,0 +1,56 @@
+@use '@sbercloud/figma-tokens-cloud-platform/build/scss/styles-theme-variables';
+
+.wrapper {
+  display: flex;
+  width: var(--width, 100%);
+  height: var(--height, 100%);
+  flex-direction: column;
+  box-sizing: border-box;
+  background-color: styles-theme-variables.$sys-neutral-background1-level;
+  border-radius: 8px;
+  padding: 24px;
+}
+
+.title {
+  padding-bottom: 24px;
+  color: styles-theme-variables.$sys-neutral-text-main;
+}
+
+.contentWrapper {
+  display: flex;
+  flex-direction: row;
+  gap: 24px;
+  height: calc(100% - 50px);
+  justify-content: space-between;
+}
+
+.legendWrapper {
+  min-width: 25%;
+  max-width: 33%;
+}
+
+.pieWrapper {
+  height: 100%;
+  text-align: center;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+}
+
+.svgText {
+  text-anchor: middle;
+  visibility: hidden;
+  width: 30px;
+  font-size: 5px;
+  word-break: break-all;
+  white-space: nowrap;
+  fill: styles-theme-variables.$sys-neutral-text-main;
+
+  &[data-hovered] {
+    visibility: visible;
+  }
+
+  &[data-bolder] {
+    font-weight: 700;
+  }
+}

package/src/components/PieChart/types.ts

@@ -0,0 +1,42 @@
+import { ReactNode } from 'react';
+
+export type TextLike = string | number;
+
+export type LegendType = {
+  label: TextLike;
+  value: TextLike;
+  id?: string;
+};
+
+export type DataType = {
+  label: TextLike;
+  value: number;
+  id?: string;
+  color?: string;
+};
+
+export type PieChartProps = {
+  data: DataType[];
+  options: {
+    title: string;
+    width?: number;
+    height?: number;
+    legendTitle?: string;
+    typographySize?: 's' | 'm' | 'l';
+  };
+  onPieSegmentClick?: (data: DataType) => void;
+  onLegendItemClick?: (data: LegendType) => void;
+  aggregatedLegend?: {
+    data: LegendType[];
+    title: string;
+    onAggregatedLegendItemClick?: (data: LegendType) => void;
+  };
+  className?: string;
+};
+
+export type LabelRenderProps<DataType> = {
+  dataEntry: DataType;
+  dataIndex: number;
+};
+
+export type LabelRenderFunction<DataType> = (labelRenderProps: LabelRenderProps<DataType>) => ReactNode;

package/src/components/index.ts

@@ -0,0 +1,4 @@
+export * from './InteractiveChart';
+export * from './PieChart';
+export * from './HeatMapChart';
+export * from './BagelChart';