@redsift/charts 9.2.3 → 9.2.4

package/src/components/PieChart/RenderedPieChart.tsx

@@ -1,174 +0,0 @@
-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>
-  );
-});