From b1a7211a0baad42e71cc196d264d426baeb9a5fe Mon Sep 17 00:00:00 2001 From: Dallas Peters Date: Wed, 23 Jul 2025 09:23:01 -0500 Subject: [PATCH 1/2] adds demo pie chart --- src/stories/PieChart.stories.tsx | 165 +++++++++++++++++++++++++++++++ 1 file changed, 165 insertions(+) create mode 100644 src/stories/PieChart.stories.tsx diff --git a/src/stories/PieChart.stories.tsx b/src/stories/PieChart.stories.tsx new file mode 100644 index 0000000..9a97bff --- /dev/null +++ b/src/stories/PieChart.stories.tsx @@ -0,0 +1,165 @@ +import type { Meta, StoryObj } from '@storybook/react-vite' +import React from 'react' + +import { styled } from '@mui/material/styles' +import { + ChartsTooltip, + HighlightScope, + PieChart as MuiPieChart, + PieChart, + PieChartProps, + useDrawingArea, +} from '@mui/x-charts' + +const dataset = [ + { electronic: 86, noticeonly: 57, papermaterials: 59, month: 'January' }, + { electronic: 78, noticeonly: 52, papermaterials: 50, month: 'February' }, + { electronic: 106, noticeonly: 53, papermaterials: 47, month: 'March' }, + { electronic: 92, noticeonly: 56, papermaterials: 54, month: 'April' }, + { electronic: 92, noticeonly: 69, papermaterials: 57, month: 'May' }, + { electronic: 103, noticeonly: 63, papermaterials: 60, month: 'June' }, + { electronic: 105, noticeonly: 60, papermaterials: 59, month: 'July' }, + { electronic: 106, noticeonly: 60, papermaterials: 65, month: 'August' }, + { electronic: 95, noticeonly: 51, papermaterials: 51, month: 'September' }, + { electronic: 97, noticeonly: 65, papermaterials: 60, month: 'October' }, + { electronic: 76, noticeonly: 64, papermaterials: 67, month: 'November' }, + { electronic: 103, noticeonly: 70, papermaterials: 61, month: 'December' }, +] + +const meta: Meta = { + title: 'Components/Charts/PieChart', + component: PieChart, + parameters: { + layout: 'centered', + controls: { + expanded: true, + }, + }, + tags: ['autodocs'], + argTypes: { + height: { + control: { type: 'range', min: 200, max: 600, step: 50 }, + name: 'Chart Height', + defaultValue: 300, + }, + width: { + control: { type: 'range', min: 400, max: 1000, step: 50 }, + name: 'Chart Width', + defaultValue: 800, + }, + }, +} + +interface PieCenterLabelProps { + totalValue: number + subtitle?: string +} + +const StyledText = styled('text')(({ theme }) => ({ + fill: theme.vars?.palette.text.primary, + textAnchor: 'middle', + dominantBaseline: 'middle', + fontSize: '300%', + fontWeight: 'bold', + marginBottom: '5%', + lineHeight: 1.6, +})) + +const StyledSubText = styled('text')(({ theme }) => ({ + fill: theme.vars?.palette.text.secondary, + textAnchor: 'middle', + dominantBaseline: 'hanging', + fontSize: '100%', + lineHeight: 1, + fontWeight: 500, + textTransform: 'uppercase', +})) + +export default meta + +type Story = StoryObj + +function RenderPieChart(args: PieChartProps) { + const { height = 300, width = 800 } = args + + const PieCenterLabel = ({ totalValue, subtitle }: PieCenterLabelProps) => { + const { width, height, left, top } = useDrawingArea() + const cx = left + width / 2 + const cy = top + height / 2 + + const formattedValue = new Intl.NumberFormat('en-US', { + style: 'currency', + currency: 'USD', + minimumFractionDigits: 0, + maximumFractionDigits: 0, + notation: 'compact', + compactDisplay: 'short', + }).format(totalValue) + + return ( + + + {formattedValue} + + + {subtitle} + + + ) + } + + const totalValue = dataset.reduce((sum, item) => sum + item.electronic, 0) + + const pieData = [ + { + id: 'software', + value: 86, + label: 'Electronic Delivery', + color: 'var(--mui-palette-chartSeries-0-main)', + }, + { + id: 'hardware', + value: 57, + label: 'Notice Only', + color: 'var(--mui-palette-chartSeries-1-main)', + }, + { + id: 'services', + value: 59, + label: 'Paper Materials', + color: 'var(--mui-palette-chartSeries-2-main)', + }, + ] + + const series = [ + { + data: pieData, + innerRadius: '76%', + outerRadius: '100%', + showCenterLabel: true, + highlightScope: { + highlight: 'item', + fade: 'global', + } as HighlightScope, + }, + ] + + return ( + null }} + > + + + ) +} + +export const Default: Story = { + args: { + height: 300, + width: 800, + }, + render: RenderPieChart, +} From a389b4bb9eab801f781883b5e8aa9a7099160f71 Mon Sep 17 00:00:00 2001 From: Dallas Peters Date: Thu, 24 Jul 2025 18:18:24 -0500 Subject: [PATCH 2/2] Update PieChart story styles and layout - Increase font size of StyledSubText from 100% to 110% for better visibility. - Adjust font weight of StyledSubText from 500 to 400 for a lighter appearance. - Modify the vertical position of StyledSubText from y={cy + 15} to y={cy + 20} for improved spacing. - Add paddingAngle property to the pie chart configuration for enhanced visual separation between slices. --- src/stories/PieChart.stories.tsx | 8 ++++---- 1 file changed, 4 insertions(+), 4 deletions(-) diff --git a/src/stories/PieChart.stories.tsx b/src/stories/PieChart.stories.tsx index 9a97bff..1ac9314 100644 --- a/src/stories/PieChart.stories.tsx +++ b/src/stories/PieChart.stories.tsx @@ -69,10 +69,9 @@ const StyledSubText = styled('text')(({ theme }) => ({ fill: theme.vars?.palette.text.secondary, textAnchor: 'middle', dominantBaseline: 'hanging', - fontSize: '100%', + fontSize: '110%', lineHeight: 1, - fontWeight: 500, - textTransform: 'uppercase', + fontWeight: 400, })) export default meta @@ -101,7 +100,7 @@ function RenderPieChart(args: PieChartProps) { {formattedValue} - + {subtitle} @@ -137,6 +136,7 @@ function RenderPieChart(args: PieChartProps) { innerRadius: '76%', outerRadius: '100%', showCenterLabel: true, + paddingAngle: 1, highlightScope: { highlight: 'item', fade: 'global',