Feat/allow passing label as prop (#1)

* feat - allow passing label as prop

* add donut

Author: alexbalonperin

src/components/chart-elements/AreaChart/AreaChart.tsx

@@ -78,6 +78,7 @@ const AreaChart = React.forwardRef<HTMLDivElement, AreaChartProps>((props, ref)
     onValueChange,
     enableLegendSlider = false,
     customTooltip,
+    renderLabel,
     rotateLabelX,
     tickGap = 5,
     xAxisLabel,
@@ -441,6 +442,7 @@ const AreaChart = React.forwardRef<HTMLDivElement, AreaChartProps>((props, ref)
                 animationDuration={animationDuration}
                 stackId={stack ? "a" : undefined}
                 connectNulls={connectNulls}
+                label={renderLabel}
               />
             ))}
             {onValueChange

src/components/chart-elements/BarChart/BarChart.tsx

@@ -93,6 +93,7 @@ const BarChart = React.forwardRef<HTMLDivElement, BarChartProps>((props, ref) =>
     onValueChange,
     enableLegendSlider = false,
     customTooltip,
+    renderLabel,
     rotateLabelX,
     barCategoryGap,
     tickGap = 5,
@@ -420,6 +421,7 @@ const BarChart = React.forwardRef<HTMLDivElement, BarChartProps>((props, ref) =>
                 animationDuration={animationDuration}
                 shape={(props: any) => renderShape(props, activeBar, activeLegend, layout)}
                 onClick={onBarClick}
+                label={renderLabel}
               />
             ))}
           </ReChartsBarChart>

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

src/components/chart-elements/LineChart/LineChart.tsx

@@ -73,6 +73,7 @@ const LineChart = React.forwardRef<HTMLDivElement, LineChartProps>((props, ref)
     onValueChange,
     enableLegendSlider = false,
     customTooltip,
+    renderLabel,
     rotateLabelX,
     tickGap = 5,
     xAxisLabel,
@@ -385,6 +386,7 @@ const LineChart = React.forwardRef<HTMLDivElement, LineChartProps>((props, ref)
                 isAnimationActive={showAnimation}
                 animationDuration={animationDuration}
                 connectNulls={connectNulls}
+                label={renderLabel}
               />
             ))}
             {onValueChange
@@ -407,6 +409,7 @@ const LineChart = React.forwardRef<HTMLDivElement, LineChartProps>((props, ref)
                       const { name } = props;
                       onCategoryClick(name);
                     }}
+                    label={renderLabel}
                   />
                 ))
               : null}

src/components/chart-elements/common/BaseChartProps.tsx

@@ -1,3 +1,4 @@
+import { ImplicitLabelType } from "recharts/types/component/Label";
 import { Color, ValueFormatter, IntervalType } from "../../../lib";
 import type BaseAnimationTimingProps from "./BaseAnimationTimingProps";
 import { CustomTooltipProps } from "./CustomTooltipProps";
@@ -44,6 +45,7 @@ interface BaseChartProps extends BaseAnimationTimingProps, React.HTMLAttributes<
   tickGap?: number;
   xAxisLabel?: string;
   yAxisLabel?: string;
+  renderLabel?: ImplicitLabelType;
 }
 
 export default BaseChartProps;

src/stories/chart-elements/AreaChart.stories.tsx

@@ -365,6 +365,32 @@ export const AxisLabels: Story = {
   },
 };
 
+export const DataLabelsSimple: Story = {
+  args: {
+    renderLabel: true,
+  },
+};
+
+export const DataLabelsObject: Story = {
+  args: {
+    renderLabel: { fill: "white", fontSize: 20, position: "top" },
+  },
+};
+
+const renderCustomizedLabel = ({ x, y, value }: { x: number; y: number; value: number }) => {
+  return (
+    <text x={x} y={y} fill="white" textAnchor="end" dominantBaseline="central">
+      {value}
+    </text>
+  );
+};
+
+export const DataLabelsFunction: Story = {
+  args: {
+    renderLabel: renderCustomizedLabel,
+  },
+}
+
 export const ShowAxisLine: Story = {
   args: {
     showAxisLine: true,

src/stories/chart-elements/BarChart.stories.tsx

@@ -388,6 +388,32 @@ export const AxisLabels: Story = {
   },
 };
 
+export const DataLabelsSimple: Story = {
+  args: {
+    renderLabel: true,
+  },
+};
+
+export const DataLabelsObject: Story = {
+  args: {
+    renderLabel: { fill: "white", fontSize: 20, position: "insideTop" },
+  },
+};
+
+const renderCustomizedLabel = ({ x, y, value }: { x: number; y: number; value: number }) => {
+  return (
+    <text x={x} y={y} fill="black" textAnchor="end" dominantBaseline="central">
+      {value}
+    </text>
+  );
+};
+
+export const DataLabelsFunction: Story = {
+  args: {
+    renderLabel: renderCustomizedLabel,
+  },
+}
+
 export const ShowAxisLine: Story = {
   args: {
     showAxisLine: true,

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",
+  },
+};

src/stories/chart-elements/LineChart.stories.tsx

@@ -325,6 +325,32 @@ export const AxisLabels: Story = {
   },
 };
 
+export const DataLabelsSimple: Story = {
+  args: {
+    renderLabel: true,
+  },
+};
+
+export const DataLabelsObject: Story = {
+  args: {
+    renderLabel: { fill: "white", fontSize: 20, position: "top" },
+  },
+};
+
+const renderCustomizedLabel = ({ x, y, value }: { x: number; y: number; value: number }) => {
+  return (
+    <text x={x} y={y} fill="white" textAnchor="end" dominantBaseline="central">
+      {value}
+    </text>
+  );
+};
+
+export const DataLabelsFunction: Story = {
+  args: {
+    renderLabel: renderCustomizedLabel,
+  },
+}
+
 export const ShowAxisLine: Story = {
   args: {
     showAxisLine: true,