add donut

tremorlabs · Jun 8, 2024 · 51127ed · 51127ed
1 parent b27b9d4
commit 51127ed
Show file tree

Hide file tree

Showing 2 changed files with 57 additions and 0 deletions.
diff --git a/src/components/chart-elements/DonutChart/DonutChart.tsx b/src/components/chart-elements/DonutChart/DonutChart.tsx
@@ -18,6 +18,7 @@ import { parseData, parseLabelInput } from "./inputParser";
 import type { EventProps } from "components/chart-elements/common";
 import { CustomTooltipProps } from "components/chart-elements/common/CustomTooltipProps";
 import type BaseAnimationTimingProps from "../common/BaseAnimationTimingProps";
+import { PieLabel } from "recharts/types/polar/Pie";
 
 type DonutChartVariant = "donut" | "pie";
 
@@ -36,6 +37,7 @@ export interface DonutChartProps extends BaseAnimationTimingProps {
   className?: string;
   onValueChange?: (value: EventProps) => void;
   customTooltip?: React.ComponentType<CustomTooltipProps>;
+  renderLabel?: PieLabel;
 }
 
 const renderInactiveShape = (props: any) => {
@@ -89,6 +91,7 @@ const DonutChart = React.forwardRef<HTMLDivElement, DonutChartProps>((props, ref
     noDataText,
     onValueChange,
     customTooltip,
+    renderLabel,
     className,
     ...other
   } = props;
@@ -177,6 +180,7 @@ const DonutChart = React.forwardRef<HTMLDivElement, DonutChartProps>((props, ref
               activeIndex={activeIndex}
               inactiveShape={renderInactiveShape}
               style={{ outline: "none" }}
+              label={renderLabel}
             />
             {/* {showTooltip ? (
               <Tooltip

diff --git a/src/stories/chart-elements/DonutChart.stories.tsx b/src/stories/chart-elements/DonutChart.stories.tsx
@@ -171,3 +171,56 @@ export const CustomTooltipSimple: Story = {
     },
   },
 };
+
+export const DataLabelsSimple: Story = {
+  args: {
+    renderLabel: true,
+  },
+};
+
+export const DataLabelsObject: Story = {
+  args: {
+    renderLabel: { fill: "red", fontSize: 20 },
+  },
+};
+
+const RADIAN = Math.PI / 180;
+const renderCustomizedLabel = ({
+  cx,
+  cy,
+  midAngle,
+  innerRadius,
+  outerRadius,
+  percent,
+}: {
+  cx: number;
+  cy: number;
+  midAngle: number;
+  innerRadius: number;
+  outerRadius: number;
+  percent: number;
+}) => {
+  const radius = innerRadius + 10 + (outerRadius - innerRadius) * 0.6;
+  const x = cx + radius * Math.cos(-midAngle * RADIAN);
+  const y = cy + radius * Math.sin(-midAngle * RADIAN);
+
+  return (
+    <text
+      x={x}
+      y={y}
+      fill="white"
+      fontSize="9"
+      textAnchor={x > cx ? "start" : "end"}
+      dominantBaseline="auto"
+    >
+      {`${(percent * 100).toFixed(0)}%`}
+    </text>
+  );
+};
+
+export const DataLabelsFunction: Story = {
+  args: {
+    renderLabel: renderCustomizedLabel,
+    variant: "pie",
+  },
+};