From e01451b26f469a19f02562ad0b8fd660dbb3793a Mon Sep 17 00:00:00 2001 From: Grzegorz Chudzinski-Pawlowski <112354940+grzegorz-cp@users.noreply.github.com> Date: Wed, 11 Dec 2024 12:20:55 +1100 Subject: [PATCH 1/5] Charts - Adding a Theme provider and themes --- .../src/components/line-chart/line-chart.tsx | 62 ++------------ .../charts/src/components/shared/types.d.ts | 20 +++++ .../charts/src/providers/theme/index.ts | 3 + .../providers/theme/stories/index.stories.tsx | 80 +++++++++++++++++++ .../src/providers/theme/theme-provider.tsx | 37 +++++++++ .../charts/src/providers/theme/themes.ts | 18 +++++ 6 files changed, 163 insertions(+), 57 deletions(-) create mode 100644 projects/js-packages/charts/src/providers/theme/index.ts create mode 100644 projects/js-packages/charts/src/providers/theme/stories/index.stories.tsx create mode 100644 projects/js-packages/charts/src/providers/theme/theme-provider.tsx create mode 100644 projects/js-packages/charts/src/providers/theme/themes.ts diff --git a/projects/js-packages/charts/src/components/line-chart/line-chart.tsx b/projects/js-packages/charts/src/components/line-chart/line-chart.tsx index c6a87bdaa6b12..02406f0f6719b 100644 --- a/projects/js-packages/charts/src/components/line-chart/line-chart.tsx +++ b/projects/js-packages/charts/src/components/line-chart/line-chart.tsx @@ -1,13 +1,7 @@ -import { - XYChart, - AnimatedLineSeries, - AnimatedAxis, - AnimatedGrid, - Tooltip, - buildChartTheme, -} from '@visx/xychart'; +import { XYChart, AnimatedLineSeries, AnimatedAxis, AnimatedGrid, Tooltip } from '@visx/xychart'; import clsx from 'clsx'; import { FC } from 'react'; +import { useChartTheme } from '../../providers/theme/theme-provider'; import styles from './line-chart.module.scss'; import type { DataPointDate } from '../shared/types'; @@ -36,52 +30,6 @@ type LineChartProps = { lineColor?: string; }; -// TODO: move to a provider -// const customTheme = buildChartTheme( { -// // Customize colors -// colors: [ '#3182ce' ], -// // Customize typography -// // labelStyles: { -// // fill: '#666', -// // fontSize: 12, -// // }, -// // Customize grid styles -// gridStyles: { -// stroke: '#e2e8f0', -// strokeWidth: 1, -// }, -// } ); - -const customTheme = buildChartTheme( { - // colors - backgroundColor: 'lightblue', // used by Tooltip, Annotation - colors: [ '#3182ce' ], // categorical colors, mapped to series via `dataKey`s - - // labels - // svgLabelBig?: SVGTextProps, - // svgLabelSmall?: SVGTextProps, - // htmlLabel?: HTMLTextStyles, - - // lines - // xAxisLineStyles?: LineStyles, - // yAxisLineStyles?: LineStyles, - // xTickLineStyles?: LineStyles, - // yTickLineStyles?: LineStyles, - // tickLength: number, - - // grid - // gridColor: string, - // gridColorDark: string, // used for axis baseline if x/yxAxisLineStyles not set - // gridStyles?: CSSProperties, - gridStyles: { - stroke: '#e2e8f0', - strokeWidth: 1, - }, - tickLength: 0, - gridColor: '', - gridColorDark: '', -} ); - // eslint-disable-next-line @typescript-eslint/no-explicit-any const renderTooltip: any = ( { tooltipData } ) => { // TODO: fix any @@ -117,8 +65,8 @@ const LineChart: FC< LineChartProps > = ( { width, height, margin = { top: 20, right: 20, bottom: 40, left: 40 }, - lineColor = '#3182ce', } ) => { + const theme = useChartTheme(); const accessors = { xAccessor: ( d: DataPointDate ) => d.date, yAccessor: ( d: DataPointDate ) => d.value, @@ -128,7 +76,7 @@ const LineChart: FC< LineChartProps > = ( { return (
= ( { dataKey="Line" data={ data } { ...accessors } - stroke={ lineColor } + stroke={ theme.colors[ 0 ] } strokeWidth={ 2 } /> 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 c4ced7b65e00c..d9ef0fed4f817 100644 --- a/projects/js-packages/charts/src/components/shared/types.d.ts +++ b/projects/js-packages/charts/src/components/shared/types.d.ts @@ -1,3 +1,5 @@ +import type { CSSProperties } from 'react'; + export type DataPoint = { label: string; value: number; @@ -30,3 +32,21 @@ export type DataPointPercentage = { */ color?: string; }; + +/** + * Theme configuration for chart components + */ +export type ChartTheme = { + /** Background color for chart components */ + backgroundColor: string; + /** Array of colors used for data visualization */ + colors: string[]; + /** Optional CSS styles for grid lines */ + gridStyles?: CSSProperties; + /** Length of axis ticks in pixels */ + tickLength: number; + /** Color of the grid lines */ + gridColor: string; + /** Color of the grid lines in dark mode */ + gridColorDark: string; +}; diff --git a/projects/js-packages/charts/src/providers/theme/index.ts b/projects/js-packages/charts/src/providers/theme/index.ts new file mode 100644 index 0000000000000..e3495f2e1a60c --- /dev/null +++ b/projects/js-packages/charts/src/providers/theme/index.ts @@ -0,0 +1,3 @@ +export { ThemeProvider, useChartTheme } from './theme-provider'; +export { defaultTheme } from './themes'; +// export product specific theme diff --git a/projects/js-packages/charts/src/providers/theme/stories/index.stories.tsx b/projects/js-packages/charts/src/providers/theme/stories/index.stories.tsx new file mode 100644 index 0000000000000..86243a633bd90 --- /dev/null +++ b/projects/js-packages/charts/src/providers/theme/stories/index.stories.tsx @@ -0,0 +1,80 @@ +import { Meta, StoryObj } from '@storybook/react'; +import { LineChart } from '../../..'; +import { ThemeProvider } from '../theme-provider'; + +const meta: Meta< typeof LineChart > = { + title: 'JS Packages/Charts/Themes', + component: ThemeProvider, + parameters: { + layout: 'centered', + }, +}; + +export default meta; +type Story = StoryObj< typeof ThemeProvider >; + +const sampleData = [ + { date: new Date( '2024-01-01' ), value: 10 }, + { date: new Date( '2024-01-02' ), value: 20 }, + { date: new Date( '2024-01-03' ), value: 15 }, + { date: new Date( '2024-01-04' ), value: 25 }, + { date: new Date( '2024-01-05' ), value: 30 }, +]; + +export const Default: Story = { + render: () => ( + + + + ), +}; + +export const JetpackTheme: Story = { + render: () => ( + + + + ), +}; + +export const WooTheme: Story = { + render: () => ( + + + + ), +}; + +export const CustomColorTheme: Story = { + render: () => ( + + + + ), +}; diff --git a/projects/js-packages/charts/src/providers/theme/theme-provider.tsx b/projects/js-packages/charts/src/providers/theme/theme-provider.tsx new file mode 100644 index 0000000000000..1f76bd13bbaad --- /dev/null +++ b/projects/js-packages/charts/src/providers/theme/theme-provider.tsx @@ -0,0 +1,37 @@ +import { buildChartTheme } from '@visx/xychart'; +import { createContext, useContext, FC, ReactNode } from 'react'; +import { defaultTheme } from './themes'; +import type { ChartTheme } from '../../components/shared/types'; + +/** + * Context for sharing theme configuration across components + */ +const ThemeContext = createContext< ChartTheme >( defaultTheme ); + +/** + * Hook to access chart theme + * @return {object} A built theme configuration compatible with visx charts + */ +const useChartTheme = () => { + const theme = useContext( ThemeContext ); + return buildChartTheme( theme ); +}; + +/** + * Props for the ThemeProvider component + */ +type ThemeProviderProps = { + /** Optional partial theme override */ + theme?: Partial< ChartTheme >; + /** Child components that will have access to the theme */ + children: ReactNode; +}; + +// Provider component for chart theming +// Allows theme customization through props while maintaining default values +const ThemeProvider: FC< ThemeProviderProps > = ( { theme = {}, children } ) => { + const mergedTheme = { ...defaultTheme, ...theme }; + return { children }; +}; + +export { ThemeProvider, useChartTheme }; diff --git a/projects/js-packages/charts/src/providers/theme/themes.ts b/projects/js-packages/charts/src/providers/theme/themes.ts new file mode 100644 index 0000000000000..0606215f42521 --- /dev/null +++ b/projects/js-packages/charts/src/providers/theme/themes.ts @@ -0,0 +1,18 @@ +import type { ChartTheme } from '../../components/shared/types'; + +/** + * Default theme configuration + */ +const defaultTheme: ChartTheme = { + backgroundColor: 'white', + colors: [ '#3182ce' ], + gridStyles: { + stroke: '#e2e8f0', + strokeWidth: 1, + }, + tickLength: 0, + gridColor: '', + gridColorDark: '', +}; + +export { defaultTheme }; From 5d8400ff72c8534c8e60a77da4851cbd47e6029c Mon Sep 17 00:00:00 2001 From: Grzegorz Chudzinski-Pawlowski <112354940+grzegorz-cp@users.noreply.github.com> Date: Wed, 11 Dec 2024 13:40:14 +1100 Subject: [PATCH 2/5] Charts - Updating theme objects with colours --- .../charts/src/components/bar-chart/index.tsx | 4 +- .../bar-chart/stories/index.stories.tsx | 2 +- .../src/components/line-chart/line-chart.tsx | 15 ++- .../line-chart/stories/index.stories.tsx | 2 +- .../pie-semi-circle-chart.tsx | 5 +- .../stories/index.stories.tsx | 8 +- .../charts/src/providers/theme/index.ts | 3 +- .../providers/theme/stories/index.stories.tsx | 91 +++++++++++++------ .../src/providers/theme/theme-provider.tsx | 3 +- .../charts/src/providers/theme/themes.ts | 30 +++++- 10 files changed, 119 insertions(+), 44 deletions(-) diff --git a/projects/js-packages/charts/src/components/bar-chart/index.tsx b/projects/js-packages/charts/src/components/bar-chart/index.tsx index b8d21f7184c3c..41a22493c509d 100644 --- a/projects/js-packages/charts/src/components/bar-chart/index.tsx +++ b/projects/js-packages/charts/src/components/bar-chart/index.tsx @@ -5,6 +5,7 @@ import { scaleBand, scaleLinear } from '@visx/scale'; import { Bar } from '@visx/shape'; import { useTooltip } from '@visx/tooltip'; import React from 'react'; +import { useChartTheme } from '../../providers/theme'; import { Tooltip } from '../tooltip'; import type { DataPoint } from '../shared/types'; @@ -28,6 +29,7 @@ function BarChart( { data, width, height, margin, showTooltips = false }: BarCha const { tooltipOpen, tooltipLeft, tooltipTop, tooltipData, hideTooltip, showTooltip } = useTooltip< DataPoint >(); + const theme = useChartTheme(); const margins = { top: 20, right: 20, bottom: 40, left: 40, ...margin }; const xMax = width - margins.left - margins.right; const yMax = height - margins.top - margins.bottom; @@ -80,7 +82,7 @@ function BarChart( { data, width, height, margin, showTooltips = false }: BarCha y={ yScale( d.value ) } width={ xScale.bandwidth() } height={ yMax - ( yScale( d.value ) ?? 0 ) } - fill="#0675C4" + fill={ theme.colors[ 0 ] } onMouseMove={ getMouseMoveHandler( d ) } onMouseLeave={ showTooltips ? handleMouseLeave : undefined } /> diff --git a/projects/js-packages/charts/src/components/bar-chart/stories/index.stories.tsx b/projects/js-packages/charts/src/components/bar-chart/stories/index.stories.tsx index be5ad4064d28d..3ad3aa21d7f9d 100644 --- a/projects/js-packages/charts/src/components/bar-chart/stories/index.stories.tsx +++ b/projects/js-packages/charts/src/components/bar-chart/stories/index.stories.tsx @@ -2,7 +2,7 @@ import BarChart from '../index'; import type { Meta } from '@storybook/react'; export default { - title: 'JS Packages/Charts/Bar Chart', + title: 'JS Packages/Charts/Types/Bar Chart', component: BarChart, parameters: { layout: 'centered', diff --git a/projects/js-packages/charts/src/components/line-chart/line-chart.tsx b/projects/js-packages/charts/src/components/line-chart/line-chart.tsx index 02406f0f6719b..7b75577c8f95b 100644 --- a/projects/js-packages/charts/src/components/line-chart/line-chart.tsx +++ b/projects/js-packages/charts/src/components/line-chart/line-chart.tsx @@ -1,4 +1,5 @@ import { XYChart, AnimatedLineSeries, AnimatedAxis, AnimatedGrid, Tooltip } from '@visx/xychart'; +import { buildChartTheme } from '@visx/xychart'; import clsx from 'clsx'; import { FC } from 'react'; import { useChartTheme } from '../../providers/theme/theme-provider'; @@ -66,12 +67,24 @@ const LineChart: FC< LineChartProps > = ( { height, margin = { top: 20, right: 20, bottom: 40, left: 40 }, } ) => { - const theme = useChartTheme(); + const providerTheme = useChartTheme(); const accessors = { xAccessor: ( d: DataPointDate ) => d.date, yAccessor: ( d: DataPointDate ) => d.value, }; + // Use theme to construct XYChart theme + const chartTheme = { + backgroundColor: providerTheme.backgroundColor, + colors: providerTheme.colors, + gridStyles: providerTheme.gridStyles, + tickLength: providerTheme?.tickLength || 0, + gridColor: providerTheme?.gridColor || '', + gridColorDark: providerTheme?.gridColorDark || '', + }; + + const theme = buildChartTheme( chartTheme ); + // return (
diff --git a/projects/js-packages/charts/src/components/line-chart/stories/index.stories.tsx b/projects/js-packages/charts/src/components/line-chart/stories/index.stories.tsx index 1ce2430c18365..40a11b9c67364 100644 --- a/projects/js-packages/charts/src/components/line-chart/stories/index.stories.tsx +++ b/projects/js-packages/charts/src/components/line-chart/stories/index.stories.tsx @@ -9,7 +9,7 @@ const data = [ ]; export default { - title: 'JS Packages/Charts/Line Chart', + title: 'JS Packages/Charts/Types/Line Chart', component: LineChart, parameters: { layout: 'centered', 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 86340e54eea84..113d6ad5d0aa9 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 @@ -3,6 +3,7 @@ import { Pie } from '@visx/shape'; import { Text } from '@visx/text'; import clsx from 'clsx'; import { FC } from 'react'; +import { useChartTheme } from '../../providers/theme/theme-provider'; import styles from './pie-semi-circle-chart.module.scss'; import type { DataPointPercentage } from '../shared/types'; @@ -38,13 +39,15 @@ const PieSemiCircleChart: FC< PieSemiCircleChartProps > = ( { label, note, } ) => { + const providerTheme = useChartTheme(); const centerX = width / 2; const centerY = height; const accessors = { value: d => d.value, sort: ( a, b ) => a.value - b.value, - fill: d => d.data.color, + // Take the color from the theme or the data object + fill: d => providerTheme.colors[ d.index ] || d.data.color, }; return ( 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 5ebd227447aef..c7e591ce3dacb 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 @@ -7,26 +7,26 @@ const data = [ value: 80000, valueDisplay: '$80K', percentage: 2, - color: '#3858E9', + // color: '#3858E9', }, { label: 'MacOS', value: 30000, valueDisplay: '$30K', percentage: 5, - color: '#80C8FF', + // color: '#80C8FF', }, { label: 'Linux', value: 22000, valueDisplay: '$22K', percentage: 1, - color: '#B999FF', + // color: '#B999FF', }, ]; export default { - title: 'JS Packages/Charts/Pie Semi Circle Chart', + title: 'JS Packages/Charts/Types/Pie Semi Circle Chart', component: PieSemiCircleChart, parameters: { layout: 'centered', diff --git a/projects/js-packages/charts/src/providers/theme/index.ts b/projects/js-packages/charts/src/providers/theme/index.ts index e3495f2e1a60c..af2ad75002ffc 100644 --- a/projects/js-packages/charts/src/providers/theme/index.ts +++ b/projects/js-packages/charts/src/providers/theme/index.ts @@ -1,3 +1,2 @@ export { ThemeProvider, useChartTheme } from './theme-provider'; -export { defaultTheme } from './themes'; -// export product specific theme +export { defaultTheme, jetpackTheme, wooTheme } from './themes'; diff --git a/projects/js-packages/charts/src/providers/theme/stories/index.stories.tsx b/projects/js-packages/charts/src/providers/theme/stories/index.stories.tsx index 86243a633bd90..96dbbb878a368 100644 --- a/projects/js-packages/charts/src/providers/theme/stories/index.stories.tsx +++ b/projects/js-packages/charts/src/providers/theme/stories/index.stories.tsx @@ -1,6 +1,6 @@ import { Meta, StoryObj } from '@storybook/react'; -import { LineChart } from '../../..'; -import { ThemeProvider } from '../theme-provider'; +import { ThemeProvider, jetpackTheme, wooTheme } from '../.'; +import { LineChart, BarChart, PieSemiCircleChart } from '../../..'; const meta: Meta< typeof LineChart > = { title: 'JS Packages/Charts/Themes', @@ -14,51 +14,78 @@ export default meta; type Story = StoryObj< typeof ThemeProvider >; const sampleData = [ - { date: new Date( '2024-01-01' ), value: 10 }, - { date: new Date( '2024-01-02' ), value: 20 }, - { date: new Date( '2024-01-03' ), value: 15 }, - { date: new Date( '2024-01-04' ), value: 25 }, - { date: new Date( '2024-01-05' ), value: 30 }, + { date: new Date( '2024-01-01' ), value: 10, label: 'Jan 1' }, + { date: new Date( '2024-01-02' ), value: 20, label: 'Jan 2' }, + { date: new Date( '2024-01-03' ), value: 15, label: 'Jan 3' }, + { date: new Date( '2024-01-04' ), value: 25, label: 'Jan 4' }, + { date: new Date( '2024-01-05' ), value: 30, label: 'Jan 5' }, +]; + +const pieData = [ + { + label: 'Windows', + value: 80000, + valueDisplay: '80K', + percentage: 2, + }, + { + label: 'MacOS', + value: 30000, + valueDisplay: '30K', + percentage: 5, + }, + { + label: 'Linux', + value: 22000, + valueDisplay: '22K', + percentage: 1, + }, ]; export const Default: Story = { render: () => ( + + ), }; export const JetpackTheme: Story = { render: () => ( - + + + ), }; export const WooTheme: Story = { render: () => ( - + + + ), }; @@ -67,7 +94,7 @@ export const CustomColorTheme: Story = { render: () => ( + + ), }; diff --git a/projects/js-packages/charts/src/providers/theme/theme-provider.tsx b/projects/js-packages/charts/src/providers/theme/theme-provider.tsx index 1f76bd13bbaad..88584dda80aae 100644 --- a/projects/js-packages/charts/src/providers/theme/theme-provider.tsx +++ b/projects/js-packages/charts/src/providers/theme/theme-provider.tsx @@ -1,4 +1,3 @@ -import { buildChartTheme } from '@visx/xychart'; import { createContext, useContext, FC, ReactNode } from 'react'; import { defaultTheme } from './themes'; import type { ChartTheme } from '../../components/shared/types'; @@ -14,7 +13,7 @@ const ThemeContext = createContext< ChartTheme >( defaultTheme ); */ const useChartTheme = () => { const theme = useContext( ThemeContext ); - return buildChartTheme( theme ); + return theme; }; /** diff --git a/projects/js-packages/charts/src/providers/theme/themes.ts b/projects/js-packages/charts/src/providers/theme/themes.ts index 0606215f42521..53b4ddde527ea 100644 --- a/projects/js-packages/charts/src/providers/theme/themes.ts +++ b/projects/js-packages/charts/src/providers/theme/themes.ts @@ -4,10 +4,10 @@ import type { ChartTheme } from '../../components/shared/types'; * Default theme configuration */ const defaultTheme: ChartTheme = { - backgroundColor: 'white', + backgroundColor: '#FFFFFF', colors: [ '#3182ce' ], gridStyles: { - stroke: '#e2e8f0', + stroke: '#787C82', strokeWidth: 1, }, tickLength: 0, @@ -15,4 +15,28 @@ const defaultTheme: ChartTheme = { gridColorDark: '', }; -export { defaultTheme }; +const jetpackTheme: ChartTheme = { + backgroundColor: '#FFFFFF', + colors: [ '#98C8DF', '#006DAB', '#A6DC80', '#1F9828', '#FF8C8F' ], + gridStyles: { + stroke: '#787C82', + strokeWidth: 1, + }, + tickLength: 0, + gridColor: '', + gridColorDark: '', +}; + +const wooTheme: ChartTheme = { + backgroundColor: '#FFFFFF', + colors: [ '#80C8FF', '#B999FF', '#3858E9' ], + gridStyles: { + stroke: '#787C82', + strokeWidth: 1, + }, + tickLength: 0, + gridColor: '', + gridColorDark: '', +}; + +export { defaultTheme, jetpackTheme, wooTheme }; From 93a36f97fe3aa7e636aa06f5f042ada92d0a30f3 Mon Sep 17 00:00:00 2001 From: Grzegorz Chudzinski-Pawlowski <112354940+grzegorz-cp@users.noreply.github.com> Date: Wed, 11 Dec 2024 14:15:21 +1100 Subject: [PATCH 3/5] Charts - Updating examples --- .../pie-semi-circle-chart.tsx | 4 +- .../stories/index.stories.tsx | 3 - .../charts/src/components/shared/types.d.ts | 2 +- .../providers/theme/stories/index.stories.tsx | 90 +++++++++++-------- .../charts/src/providers/theme/themes.ts | 8 +- 5 files changed, 63 insertions(+), 44 deletions(-) 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 113d6ad5d0aa9..e67868e16adb4 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 @@ -46,8 +46,8 @@ const PieSemiCircleChart: FC< PieSemiCircleChartProps > = ( { const accessors = { value: d => d.value, sort: ( a, b ) => a.value - b.value, - // Take the color from the theme or the data object - fill: d => providerTheme.colors[ d.index ] || d.data.color, + // Use the color property from the data object as a last resort. The theme provides colours by default. + fill: d => d.color || providerTheme.colors[ d.index ], }; return ( 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 c7e591ce3dacb..cfc4f50d7453c 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 @@ -7,21 +7,18 @@ const data = [ value: 80000, valueDisplay: '$80K', percentage: 2, - // color: '#3858E9', }, { label: 'MacOS', value: 30000, valueDisplay: '$30K', percentage: 5, - // color: '#80C8FF', }, { label: 'Linux', value: 22000, valueDisplay: '$22K', percentage: 1, - // color: '#B999FF', }, ]; 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 d9ef0fed4f817..44f2fc9831d57 100644 --- a/projects/js-packages/charts/src/components/shared/types.d.ts +++ b/projects/js-packages/charts/src/components/shared/types.d.ts @@ -28,7 +28,7 @@ export type DataPointPercentage = { */ percentage: number; /** - * Color code for the segment + * Color code for the segment, by default colours are taken from the theme but this property can overrides it */ color?: string; }; diff --git a/projects/js-packages/charts/src/providers/theme/stories/index.stories.tsx b/projects/js-packages/charts/src/providers/theme/stories/index.stories.tsx index 96dbbb878a368..69e1cdd50887f 100644 --- a/projects/js-packages/charts/src/providers/theme/stories/index.stories.tsx +++ b/projects/js-packages/charts/src/providers/theme/stories/index.stories.tsx @@ -42,18 +42,28 @@ const pieData = [ }, ]; +const GridComponent = ( { children } ) => { + return ( +
+ { children } +
+ ); +}; + export const Default: Story = { render: () => ( - - - + + + + + ), }; @@ -61,15 +71,17 @@ export const Default: Story = { export const JetpackTheme: Story = { render: () => ( - - - + + + + + ), }; @@ -77,15 +89,17 @@ export const JetpackTheme: Story = { export const WooTheme: Story = { render: () => ( - - - + + + + + ), }; @@ -94,22 +108,24 @@ export const CustomColorTheme: Story = { render: () => ( - - - + + + + + ), }; diff --git a/projects/js-packages/charts/src/providers/theme/themes.ts b/projects/js-packages/charts/src/providers/theme/themes.ts index 53b4ddde527ea..b41d14bd845a1 100644 --- a/projects/js-packages/charts/src/providers/theme/themes.ts +++ b/projects/js-packages/charts/src/providers/theme/themes.ts @@ -5,7 +5,7 @@ import type { ChartTheme } from '../../components/shared/types'; */ const defaultTheme: ChartTheme = { backgroundColor: '#FFFFFF', - colors: [ '#3182ce' ], + colors: [ '#98C8DF', '#006DAB', '#A6DC80', '#1F9828', '#FF8C8F' ], gridStyles: { stroke: '#787C82', strokeWidth: 1, @@ -15,6 +15,9 @@ const defaultTheme: ChartTheme = { gridColorDark: '', }; +/** + * Jetpack theme configuration + */ const jetpackTheme: ChartTheme = { backgroundColor: '#FFFFFF', colors: [ '#98C8DF', '#006DAB', '#A6DC80', '#1F9828', '#FF8C8F' ], @@ -27,6 +30,9 @@ const jetpackTheme: ChartTheme = { gridColorDark: '', }; +/** + * Woo theme configuration + */ const wooTheme: ChartTheme = { backgroundColor: '#FFFFFF', colors: [ '#80C8FF', '#B999FF', '#3858E9' ], From 6ae46c3e7b49ab77c42d91b60b1d437885e82bf0 Mon Sep 17 00:00:00 2001 From: Grzegorz Chudzinski-Pawlowski <112354940+grzegorz-cp@users.noreply.github.com> Date: Wed, 11 Dec 2024 14:16:24 +1100 Subject: [PATCH 4/5] changelog --- projects/js-packages/charts/changelog/add-charts-themes | 4 ++++ 1 file changed, 4 insertions(+) create mode 100644 projects/js-packages/charts/changelog/add-charts-themes diff --git a/projects/js-packages/charts/changelog/add-charts-themes b/projects/js-packages/charts/changelog/add-charts-themes new file mode 100644 index 0000000000000..bed6b167cc232 --- /dev/null +++ b/projects/js-packages/charts/changelog/add-charts-themes @@ -0,0 +1,4 @@ +Significance: patch +Type: added + +Adding a theme provider to Automattic Charts From aa716ab284cc0598e72bf4c9b70254e6f6757e0f Mon Sep 17 00:00:00 2001 From: Grzegorz Chudzinski-Pawlowski <112354940+grzegorz-cp@users.noreply.github.com> Date: Thu, 12 Dec 2024 08:12:36 +1100 Subject: [PATCH 5/5] Charts - Fixing double imports --- .../charts/src/components/line-chart/line-chart.tsx | 10 ++++++++-- 1 file changed, 8 insertions(+), 2 deletions(-) diff --git a/projects/js-packages/charts/src/components/line-chart/line-chart.tsx b/projects/js-packages/charts/src/components/line-chart/line-chart.tsx index 7b75577c8f95b..a7aa6cf8cb9db 100644 --- a/projects/js-packages/charts/src/components/line-chart/line-chart.tsx +++ b/projects/js-packages/charts/src/components/line-chart/line-chart.tsx @@ -1,5 +1,11 @@ -import { XYChart, AnimatedLineSeries, AnimatedAxis, AnimatedGrid, Tooltip } from '@visx/xychart'; -import { buildChartTheme } from '@visx/xychart'; +import { + XYChart, + AnimatedLineSeries, + AnimatedAxis, + AnimatedGrid, + Tooltip, + buildChartTheme, +} from '@visx/xychart'; import clsx from 'clsx'; import { FC } from 'react'; import { useChartTheme } from '../../providers/theme/theme-provider';