@redsift/charts 9.2.3-patch → 9.2.3

package/src/components/PieChart/RenderedPieChart.tsx

@@ -0,0 +1,174 @@
+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,
+    legendProps,
+    middleText: propsMiddleText,
+    onSliceClick,
+    others,
+    size,
+    sliceProps,
+    sliceRole,
+    subtext: propsSubtext,
+    text: propsText,
+    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);
+  const legendWidth = useRef<string>();
+  if (data && !legendWidth.current) {
+    legendWidth.current = `${Math.max(...data.map((d) => d.key.length + String(d.value).length)) * 8 + 32}px`;
+  }
+
+  const text =
+    typeof propsText === 'function'
+      ? propsText(
+          pieData.map((datum) => {
+            const percent = datum.data.value / total;
+            return { ...datum, data: { ...datum.data, percent } };
+          }),
+          total
+        )
+      : propsText;
+  const subtext =
+    typeof propsSubtext === 'function'
+      ? propsSubtext(
+          pieData.map((datum) => {
+            const percent = datum.data.value / total;
+            return { ...datum, data: { ...datum.data, percent } };
+          }),
+          total
+        )
+      : propsSubtext;
+  const middleText =
+    typeof propsMiddleText === 'function'
+      ? propsMiddleText(
+          pieData.map((datum) => {
+            const percent = datum.data.value / total;
+            return { ...datum, data: { ...datum.data, percent } };
+          }),
+          total
+        )
+      : propsMiddleText;
+
+  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
+          }
+          width={legendWidth.current}
+          {...legendProps}
+        />
+      ) : null}
+    </StyledPieChart>
+  );
+});