@redsift/charts 8.0.1 → 8.0.2

package/src/components/PieChart/RenderedPieChart.tsx

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