@redsift/charts 8.0.0 → 8.0.1

package/src/components/PieChart/RenderedPieChart.tsx

@@ -0,0 +1,162 @@
+import React, { forwardRef, RefObject, useEffect, useRef } from 'react';
+import { arc as d3arc, pie as d3pie, sum as d3sum } from 'd3';
+
+import {
+  LabelVariant,
+  ArcDatum,
+  CategoryData,
+  CategoryDatum,
+} from '../../types';
+import { PieChartLabelVariant, PieChartProps, PieChartVariant } from './types';
+import { StyledPieChartCenterText, StyledPieChart } from './styles';
+import { Arcs } from '../Arcs';
+import { useFormatCategoricalData } from '../../hooks';
+import { Legend } from '../Legend';
+import { sizeToDimension } from './utils';
+import { PieChart } from './PieChart';
+
+interface RenderedPieChartProps
+  extends Required<Pick<PieChartProps, 'data'>>,
+    Omit<PieChartProps, 'data'> {}
+
+export const RenderedPieChart = forwardRef<
+  HTMLDivElement,
+  RenderedPieChartProps
+>((props, ref) => {
+  const {
+    caping,
+    className,
+    data: propsData,
+    id,
+    isSliceSelected,
+    labelDecorator,
+    labelVariant,
+    middleText,
+    onSliceClick,
+    others,
+    size,
+    sliceProps,
+    sliceRole,
+    subtext,
+    text,
+    theme,
+    tooltipVariant,
+    variant,
+    ...forwardedProps
+  } = props;
+
+  const cache = useRef<CategoryData>();
+
+  const isDonut =
+    variant === PieChartVariant.donut ||
+    variant === PieChartVariant.spacedDonut;
+
+  const { data, colorScale } = useFormatCategoricalData({
+    data: propsData,
+    theme: theme!,
+    caping,
+    others,
+  });
+
+  useEffect(() => {
+    cache.current = data;
+  });
+
+  const { width, height, smallFontSize, fontSize, innerRadius } =
+    sizeToDimension(size!);
+  const externalRadiusPadding = 8;
+
+  const createPie = d3pie<CategoryDatum>()
+    .value((d) => d.value)
+    .sort(null);
+  const createArc = d3arc<ArcDatum>()
+    .innerRadius(isDonut ? innerRadius : 0)
+    .outerRadius(width / 2 - externalRadiusPadding);
+  const pieData = createPie(data);
+  const previousPieData = cache.current ? createPie(cache.current) : undefined;
+  const total = d3sum(data, (d) => d.value);
+
+  return (
+    <StyledPieChart
+      {...forwardedProps}
+      className={className}
+      id={id}
+      ref={ref as RefObject<HTMLDivElement>}
+    >
+      <div className={`${PieChart.className}__chart-wrapper`}>
+        {text ? (
+          <StyledPieChartCenterText
+            $maxWidth={innerRadius * 2}
+            $textSize={fontSize}
+            $smallTextSize={smallFontSize}
+          >
+            {subtext ? <b>{text}</b> : <span>{text}</span>}
+            {middleText ? <b>{middleText}</b> : null}
+            <span>{subtext}</span>
+          </StyledPieChartCenterText>
+        ) : null}
+        <svg width={width} height={height}>
+          <Arcs
+            arcs={pieData
+              .filter((datum) => datum.data.value)
+              .map((datum, index) => {
+                const percent = datum.data.value / total;
+                const from = previousPieData
+                  ? previousPieData[index]
+                  : {
+                      data: {
+                        key: '',
+                        value: 0,
+                      },
+                      startAngle: 0,
+                      endAngle: 0,
+                      padAngle: 0,
+                      value: 0,
+                      index: index,
+                    };
+                const to = { ...datum, data: { ...datum.data, percent } };
+
+                return {
+                  color: colorScale?.(to.data.key),
+                  createArc,
+                  previousData: from,
+                  id: `id${id}__bar-${index}`,
+                  index,
+                  isSelected: isSliceSelected!(to),
+                  key: `id${id}__bar-${index}`,
+                  data: to,
+                };
+              })}
+            hasLabels={labelVariant === PieChartLabelVariant.internal}
+            hasStroke={
+              variant === PieChartVariant.spaced ||
+              variant === PieChartVariant.spacedDonut
+            }
+            labelDecorator={labelDecorator}
+            onClick={onSliceClick}
+            role={sliceRole}
+            sliceProps={sliceProps}
+            tooltipVariant={tooltipVariant}
+            transform={`translate(${width / 2} ${height / 2})`}
+          />
+        </svg>
+      </div>
+      {labelVariant !== PieChartLabelVariant.none &&
+      labelVariant !== PieChartLabelVariant.internal ? (
+        <Legend
+          data={data.map((d) => ({
+            ...d,
+            color: colorScale?.(d.key)!,
+          }))}
+          variant={
+            labelVariant === PieChartLabelVariant.externalLabelValue
+              ? LabelVariant.value
+              : labelVariant === PieChartLabelVariant.externalLabelPercent
+              ? LabelVariant.percent
+              : LabelVariant.label
+          }
+        />
+      ) : null}
+    </StyledPieChart>
+  );
+});