From 058df5932e72dac5ac60a5cfb739c85eacf7f4e2 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Dami=C3=A1n=20Su=C3=A1rez?= Date: Tue, 17 Dec 2024 00:29:14 +0000 Subject: [PATCH] Charts: update PieSemiCircleChart component (#40625) * remove height property from pie semi circle chart * improve width story control * introduce clockwise property * introduce thickness property * add pad to thickness equation * changelog --------- Co-authored-by: Grzegorz Chudzinski-Pawlowski <112354940+grzegorz-cp@users.noreply.github.com> --- .../changelog/update-charts-pie-iteration | 4 +++ .../pie-semi-circle-chart.tsx | 33 +++++++++++++----- .../stories/index.stories.tsx | 34 ++++++++++++++----- .../charts/src/components/shared/types.d.ts | 2 +- 4 files changed, 56 insertions(+), 17 deletions(-) create mode 100644 projects/js-packages/charts/changelog/update-charts-pie-iteration diff --git a/projects/js-packages/charts/changelog/update-charts-pie-iteration b/projects/js-packages/charts/changelog/update-charts-pie-iteration new file mode 100644 index 0000000000000..04e1f08148d44 --- /dev/null +++ b/projects/js-packages/charts/changelog/update-charts-pie-iteration @@ -0,0 +1,4 @@ +Significance: patch +Type: changed + +Update PieSemiCircleChart component diff --git a/projects/js-packages/charts/src/components/pie-semi-circle-chart/pie-semi-circle-chart.tsx b/projects/js-packages/charts/src/components/pie-semi-circle-chart/pie-semi-circle-chart.tsx index 4eb3b27ed3263..c89c4062ece98 100644 --- a/projects/js-packages/charts/src/components/pie-semi-circle-chart/pie-semi-circle-chart.tsx +++ b/projects/js-packages/charts/src/components/pie-semi-circle-chart/pie-semi-circle-chart.tsx @@ -19,6 +19,15 @@ interface PieSemiCircleChartProps extends BaseChartProps< DataPointPercentage[] * Note text to display below the label */ note: string; + /** + * Direction of chart rendering + * true for clockwise, false for counter-clockwise + */ + clockwise?: boolean; + /** + * Thickness of the pie chart. A value between 0 and 1 + */ + thickness?: number; } type ArcData = PieArcDatum< DataPointPercentage >; @@ -26,17 +35,21 @@ type ArcData = PieArcDatum< DataPointPercentage >; const PieSemiCircleChart: FC< PieSemiCircleChartProps > = ( { data, width, - height, label, note, withTooltips = false, + clockwise = true, + thickness = 0.4, } ) => { const providerTheme = useChartTheme(); const { tooltipOpen, tooltipLeft, tooltipTop, tooltipData, hideTooltip, showTooltip } = useTooltip< DataPointPercentage >(); const centerX = width / 2; - const centerY = height; + const height = width / 2; + const radius = width / 2; + const pad = 0.03; + const innerRadius = radius * ( 1 - thickness + pad ); // Map the data to include index for color assignment const dataWithIndex = data.map( ( d, index ) => ( { @@ -44,6 +57,10 @@ const PieSemiCircleChart: FC< PieSemiCircleChartProps > = ( { index, } ) ); + // Set the clockwise direction based on the prop + const startAngle = clockwise ? -Math.PI / 2 : Math.PI / 2; + const endAngle = clockwise ? Math.PI / 2 : -Math.PI / 2; + const accessors = { value: ( d: DataPointPercentage & { index: number } ) => d.value, sort: ( @@ -84,17 +101,17 @@ const PieSemiCircleChart: FC< PieSemiCircleChartProps > = ( {
{ /* Main chart group that contains both the pie and text elements */ } - + { /* Pie chart */ } data={ dataWithIndex } pieValue={ accessors.value } - outerRadius={ width / 2 } // half of the diameter (width) - innerRadius={ ( width / 2 ) * 0.6 } // 60% of the radius + outerRadius={ radius } + innerRadius={ innerRadius } cornerRadius={ 3 } - padAngle={ 0.03 } - startAngle={ -Math.PI / 2 } - endAngle={ Math.PI / 2 } + padAngle={ pad } + startAngle={ startAngle } + endAngle={ endAngle } pieSort={ accessors.sort } > { pie => { diff --git a/projects/js-packages/charts/src/components/pie-semi-circle-chart/stories/index.stories.tsx b/projects/js-packages/charts/src/components/pie-semi-circle-chart/stories/index.stories.tsx index 428f845e361e6..886e1c2f21119 100644 --- a/projects/js-packages/charts/src/components/pie-semi-circle-chart/stories/index.stories.tsx +++ b/projects/js-packages/charts/src/components/pie-semi-circle-chart/stories/index.stories.tsx @@ -2,12 +2,6 @@ import { PieSemiCircleChart } from '../index'; import type { Meta } from '@storybook/react'; const data = [ - { - label: 'Windows', - value: 80000, - valueDisplay: '80K', - percentage: 2, - }, { label: 'MacOS', value: 30000, @@ -20,6 +14,12 @@ const data = [ valueDisplay: '22K', percentage: 1, }, + { + label: 'Windows', + value: 80000, + valueDisplay: '80K', + percentage: 2, + }, ]; export default { @@ -35,6 +35,24 @@ export default {
), ], + argTypes: { + width: { + control: { + type: 'range', + min: 0, + max: 1000, + step: 10, + }, + }, + thickness: { + control: { + type: 'range', + min: 0, + max: 1, + step: 0.01, + }, + }, + }, } satisfies Meta< typeof PieSemiCircleChart >; const Template = args => ; @@ -42,16 +60,16 @@ const Template = args => ; export const Default = Template.bind( {} ); Default.args = { width: 500, - height: 300, data, label: 'OS', note: 'Windows +10%', + thickness: 0.4, + clockwise: true, }; export const WithTooltips = Template.bind( {} ); WithTooltips.args = { width: 500, - height: 300, data, label: 'OS', note: 'Windows +10%', diff --git a/projects/js-packages/charts/src/components/shared/types.d.ts b/projects/js-packages/charts/src/components/shared/types.d.ts index aeb74223d6d76..6b4bd04bc76c6 100644 --- a/projects/js-packages/charts/src/components/shared/types.d.ts +++ b/projects/js-packages/charts/src/components/shared/types.d.ts @@ -68,7 +68,7 @@ export type BaseChartProps< T = DataPoint | DataPointDate > = { /** * Height of the chart in pixels */ - height: number; + height?: number; /** * Chart margins */