From b27b9d480f2fc1de080281d9aa4da369dbbddd05 Mon Sep 17 00:00:00 2001 From: Alexandre Balon-Perin Date: Fri, 24 May 2024 23:43:18 +0900 Subject: [PATCH 1/2] feat - allow passing label as prop --- .../chart-elements/AreaChart/AreaChart.tsx | 2 ++ .../chart-elements/BarChart/BarChart.tsx | 2 ++ .../chart-elements/LineChart/LineChart.tsx | 3 +++ .../chart-elements/common/BaseChartProps.tsx | 2 ++ .../chart-elements/AreaChart.stories.tsx | 26 +++++++++++++++++++ .../chart-elements/BarChart.stories.tsx | 26 +++++++++++++++++++ .../chart-elements/LineChart.stories.tsx | 26 +++++++++++++++++++ 7 files changed, 87 insertions(+) diff --git a/src/components/chart-elements/AreaChart/AreaChart.tsx b/src/components/chart-elements/AreaChart/AreaChart.tsx index 57426b02..10d73ec9 100644 --- a/src/components/chart-elements/AreaChart/AreaChart.tsx +++ b/src/components/chart-elements/AreaChart/AreaChart.tsx @@ -77,6 +77,7 @@ const AreaChart = React.forwardRef((props, ref) onValueChange, enableLegendSlider = false, customTooltip, + renderLabel, rotateLabelX, tickGap = 5, xAxisLabel, @@ -428,6 +429,7 @@ const AreaChart = React.forwardRef((props, ref) animationDuration={animationDuration} stackId={stack ? "a" : undefined} connectNulls={connectNulls} + label={renderLabel} /> ))} {onValueChange diff --git a/src/components/chart-elements/BarChart/BarChart.tsx b/src/components/chart-elements/BarChart/BarChart.tsx index c87df34b..5fca7cc2 100644 --- a/src/components/chart-elements/BarChart/BarChart.tsx +++ b/src/components/chart-elements/BarChart/BarChart.tsx @@ -92,6 +92,7 @@ const BarChart = React.forwardRef((props, ref) => onValueChange, enableLegendSlider = false, customTooltip, + renderLabel, rotateLabelX, barCategoryGap, tickGap = 5, @@ -395,6 +396,7 @@ const BarChart = React.forwardRef((props, ref) => animationDuration={animationDuration} shape={(props: any) => renderShape(props, activeBar, activeLegend, layout)} onClick={onBarClick} + label={renderLabel} /> ))} diff --git a/src/components/chart-elements/LineChart/LineChart.tsx b/src/components/chart-elements/LineChart/LineChart.tsx index ded14f8d..b030aa4d 100644 --- a/src/components/chart-elements/LineChart/LineChart.tsx +++ b/src/components/chart-elements/LineChart/LineChart.tsx @@ -72,6 +72,7 @@ const LineChart = React.forwardRef((props, ref) onValueChange, enableLegendSlider = false, customTooltip, + renderLabel, rotateLabelX, tickGap = 5, xAxisLabel, @@ -372,6 +373,7 @@ const LineChart = React.forwardRef((props, ref) isAnimationActive={showAnimation} animationDuration={animationDuration} connectNulls={connectNulls} + label={renderLabel} /> ))} {onValueChange @@ -394,6 +396,7 @@ const LineChart = React.forwardRef((props, ref) const { name } = props; onCategoryClick(name); }} + label={renderLabel} /> )) : null} diff --git a/src/components/chart-elements/common/BaseChartProps.tsx b/src/components/chart-elements/common/BaseChartProps.tsx index a08969f5..1668c038 100644 --- a/src/components/chart-elements/common/BaseChartProps.tsx +++ b/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"; @@ -43,6 +44,7 @@ interface BaseChartProps extends BaseAnimationTimingProps, React.HTMLAttributes< tickGap?: number; xAxisLabel?: string; yAxisLabel?: string; + renderLabel?: ImplicitLabelType; } export default BaseChartProps; diff --git a/src/stories/chart-elements/AreaChart.stories.tsx b/src/stories/chart-elements/AreaChart.stories.tsx index db57ce06..9b8d7691 100644 --- a/src/stories/chart-elements/AreaChart.stories.tsx +++ b/src/stories/chart-elements/AreaChart.stories.tsx @@ -364,3 +364,29 @@ export const AxisLabels: Story = { yAxisLabel: "Amount (USD)", }, }; + +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 ( + + {value} + + ); +}; + +export const DataLabelsFunction: Story = { + args: { + renderLabel: renderCustomizedLabel, + }, +}; diff --git a/src/stories/chart-elements/BarChart.stories.tsx b/src/stories/chart-elements/BarChart.stories.tsx index 664925dc..0b386991 100644 --- a/src/stories/chart-elements/BarChart.stories.tsx +++ b/src/stories/chart-elements/BarChart.stories.tsx @@ -387,3 +387,29 @@ export const AxisLabels: Story = { yAxisLabel: "Amount (USD)", }, }; + +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 ( + + {value} + + ); +}; + +export const DataLabelsFunction: Story = { + args: { + renderLabel: renderCustomizedLabel, + }, +}; diff --git a/src/stories/chart-elements/LineChart.stories.tsx b/src/stories/chart-elements/LineChart.stories.tsx index 11cea258..0037ba7a 100644 --- a/src/stories/chart-elements/LineChart.stories.tsx +++ b/src/stories/chart-elements/LineChart.stories.tsx @@ -324,3 +324,29 @@ export const AxisLabels: Story = { yAxisLabel: "Amount (USD)", }, }; + +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 ( + + {value} + + ); +}; + +export const DataLabelsFunction: Story = { + args: { + renderLabel: renderCustomizedLabel, + }, +}; From 51127edb126d3689c7aa0cedb6d190a1986a00bd Mon Sep 17 00:00:00 2001 From: Alexandre Balon-Perin Date: Sat, 25 May 2024 00:06:31 +0900 Subject: [PATCH 2/2] add donut --- .../chart-elements/DonutChart/DonutChart.tsx | 4 ++ .../chart-elements/DonutChart.stories.tsx | 53 +++++++++++++++++++ 2 files changed, 57 insertions(+) diff --git a/src/components/chart-elements/DonutChart/DonutChart.tsx b/src/components/chart-elements/DonutChart/DonutChart.tsx index a3e0de11..3c15b43e 100644 --- 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; + renderLabel?: PieLabel; } const renderInactiveShape = (props: any) => { @@ -89,6 +91,7 @@ const DonutChart = React.forwardRef((props, ref noDataText, onValueChange, customTooltip, + renderLabel, className, ...other } = props; @@ -177,6 +180,7 @@ const DonutChart = React.forwardRef((props, ref activeIndex={activeIndex} inactiveShape={renderInactiveShape} style={{ outline: "none" }} + label={renderLabel} /> {/* {showTooltip ? ( { + 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 ( + cx ? "start" : "end"} + dominantBaseline="auto" + > + {`${(percent * 100).toFixed(0)}%`} + + ); +}; + +export const DataLabelsFunction: Story = { + args: { + renderLabel: renderCustomizedLabel, + variant: "pie", + }, +};