From 9582f2547190355af9b0ba2f105676d0bfc65b91 Mon Sep 17 00:00:00 2001 From: Grzegorz Chudzinski-Pawlowski <112354940+grzegorz-cp@users.noreply.github.com> Date: Tue, 17 Dec 2024 14:40:33 +1300 Subject: [PATCH] Charts: Adding multi series support for line charts (#40605) * Charts - Adding basic pie chart * Charts - Updating charts and adding a tooltip hook * Charts - Adding doughts to pies * Charts - Fixing dependency * changelog * Charts - Adding chart TS interface * Charts - Adding support for multiple data sets * Charts - Adding shared chart TS interface * Charts - Cleanup * Charts - Cleanup 2 * Charts - Fixing tooltips for multiple data sets, adding className prop * Charts - Updating examples * Charts - updating tooltip prop and simplifying event handlers * changelog --- .../charts/changelog/add-charts-multi-series | 4 + .../src/components/bar-chart/bar-chart.tsx | 3 +- .../line-chart/line-chart.module.scss | 22 +- .../src/components/line-chart/line-chart.tsx | 109 ++-- .../line-chart/stories/index.stories.tsx | 31 +- .../line-chart/stories/sample-data.ts | 513 ++++++++++++------ .../pie-chart/pie-chart.module.scss | 3 + .../src/components/pie-chart/pie-chart.tsx | 9 +- .../pie-semi-circle-chart.tsx | 5 +- .../stories/index.stories.tsx | 2 +- .../charts/src/components/shared/types.d.ts | 14 + 11 files changed, 494 insertions(+), 221 deletions(-) create mode 100644 projects/js-packages/charts/changelog/add-charts-multi-series create mode 100644 projects/js-packages/charts/src/components/pie-chart/pie-chart.module.scss diff --git a/projects/js-packages/charts/changelog/add-charts-multi-series b/projects/js-packages/charts/changelog/add-charts-multi-series new file mode 100644 index 0000000000000..c5707223a9596 --- /dev/null +++ b/projects/js-packages/charts/changelog/add-charts-multi-series @@ -0,0 +1,4 @@ +Significance: patch +Type: added + +Adding support for mutliple data series for the line charts. diff --git a/projects/js-packages/charts/src/components/bar-chart/bar-chart.tsx b/projects/js-packages/charts/src/components/bar-chart/bar-chart.tsx index 984fddd5ac8f4..7c6f4976eaa06 100644 --- a/projects/js-packages/charts/src/components/bar-chart/bar-chart.tsx +++ b/projects/js-packages/charts/src/components/bar-chart/bar-chart.tsx @@ -24,6 +24,7 @@ const BarChart: FC< BarChartProps > = ( { height, margin = { top: 20, right: 20, bottom: 40, left: 40 }, withTooltips = false, + className, } ) => { const theme = useChartTheme(); const { tooltipOpen, tooltipLeft, tooltipTop, tooltipData, hideTooltip, showTooltip } = @@ -63,7 +64,7 @@ const BarChart: FC< BarChartProps > = ( { }, [ hideTooltip ] ); return ( -
+
{ data.map( d => { diff --git a/projects/js-packages/charts/src/components/line-chart/line-chart.module.scss b/projects/js-packages/charts/src/components/line-chart/line-chart.module.scss index 2cc6da1a812ee..73f79787bf881 100644 --- a/projects/js-packages/charts/src/components/line-chart/line-chart.module.scss +++ b/projects/js-packages/charts/src/components/line-chart/line-chart.module.scss @@ -2,14 +2,24 @@ position: relative; &__tooltip { + background: #fff; padding: 0.5rem; + } + + &__tooltip-date { + font-weight: bold; + padding-bottom: 10px; + } - &-row { - margin-bottom: 0.25rem; + &__tooltip-row { + display: flex; + align-items: center; + padding: 4px 0; + justify-content: space-between; + } - &:last-child { - margin-bottom: 0; - } - } + &__tooltip-label { + font-weight: 500; + padding-right: 1rem; } } 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 a4ee95e27fa40..155f2adee032a 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 @@ -10,28 +10,54 @@ import clsx from 'clsx'; import { FC } from 'react'; import { useChartTheme } from '../../providers/theme/theme-provider'; import styles from './line-chart.module.scss'; -import type { BaseChartProps, DataPointDate } from '../shared/types'; +import type { BaseChartProps, DataPointDate, SeriesData } from '../shared/types'; // TODO: revisit grid and axis options - accept as props for frid lines, axis, values: x, y, all, none -interface LineChartProps extends BaseChartProps< DataPointDate[] > {} +interface LineChartProps extends BaseChartProps< SeriesData[] > {} -// eslint-disable-next-line @typescript-eslint/no-explicit-any -const renderTooltip: any = ( { tooltipData } ) => { - // TODO: fix any - const datum = tooltipData?.nearestDatum?.datum; - if ( ! datum ) { - return null; - } +type TooltipData = { + date: Date; + [ key: string ]: number | Date; +}; + +type TooltipDatum = { + key: string; + value: number; +}; + +const renderTooltip = ( { + tooltipData, +}: { + tooltipData?: { + nearestDatum?: { + datum: TooltipData; + key: string; + }; + datumByKey?: { [ key: string ]: { datum: TooltipData } }; + }; +} ) => { + const nearestDatum = tooltipData?.nearestDatum?.datum; + if ( ! nearestDatum ) return null; + + const tooltipPoints: TooltipDatum[] = Object.entries( tooltipData?.datumByKey || {} ) + .map( ( [ key, { datum } ] ) => ( { + key, + value: datum.value as number, + } ) ) + .sort( ( a, b ) => b.value - a.value ); return (
-
- Date: { datum.date.toLocaleDateString() } -
-
- Value: { datum.value } +
+ { nearestDatum.date.toLocaleDateString() }
+ { tooltipPoints.map( point => ( +
+ { point.key }: + { point.value } +
+ ) ) }
); }; @@ -44,35 +70,38 @@ const formatDateTick = ( value: number ) => { } ); }; -// TODO: add support for multiple data sets - const LineChart: FC< LineChartProps > = ( { data, width, height, margin = { top: 20, right: 20, bottom: 40, left: 40 }, + className, + withTooltips = true, } ) => { const providerTheme = useChartTheme(); + + if ( ! data.length ) { + return ( +
Empty...
+ ); + } + const accessors = { xAccessor: ( d: DataPointDate ) => d.date, yAccessor: ( d: DataPointDate ) => d.value, }; - // Use theme to construct XYChart theme - const chartTheme = { + const theme = buildChartTheme( { backgroundColor: providerTheme.backgroundColor, colors: providerTheme.colors, gridStyles: providerTheme.gridStyles, tickLength: providerTheme?.tickLength || 0, gridColor: providerTheme?.gridColor || '', gridColorDark: providerTheme?.gridColorDark || '', - }; - - const theme = buildChartTheme( chartTheme ); + } ); - // return ( -
+
= ( { yScale={ { type: 'linear', nice: true } } > - - - - + { data.map( ( seriesData, index ) => ( + + ) ) } + + { withTooltips && ( + + ) }
); 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 d5c1a7fb6e2fb..b09bc9594c4fd 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 @@ -19,10 +19,39 @@ export default { const Template = args => ; +// Default story with multiple series export const Default = Template.bind( {} ); Default.args = { width: 500, height: 300, margin: { top: 20, right: 20, bottom: 30, left: 40 }, - data: sampleData.mars, + data: sampleData, +}; + +// Story with single data series +export const SingleSeries = Template.bind( {} ); +SingleSeries.args = { + width: 500, + height: 300, + margin: { top: 20, right: 20, bottom: 30, left: 40 }, + data: [ sampleData[ 0 ] ], // Only London temperature data +}; + +// Story without tooltip +export const WithoutTooltip = Template.bind( {} ); +WithoutTooltip.args = { + width: 500, + height: 300, + margin: { top: 20, right: 20, bottom: 30, left: 40 }, + data: sampleData, + withTooltips: false, +}; + +// Story with custom dimensions +export const CustomDimensions = Template.bind( {} ); +CustomDimensions.args = { + width: 800, + height: 400, + margin: { top: 20, right: 20, bottom: 30, left: 40 }, + data: sampleData, }; diff --git a/projects/js-packages/charts/src/components/line-chart/stories/sample-data.ts b/projects/js-packages/charts/src/components/line-chart/stories/sample-data.ts index 53d7f8d97d72e..1231466c476d4 100644 --- a/projects/js-packages/charts/src/components/line-chart/stories/sample-data.ts +++ b/projects/js-packages/charts/src/components/line-chart/stories/sample-data.ts @@ -1,173 +1,346 @@ -// Data from UK Met Office (London/Heathrow), Australian Bureau of Meteorology (Canberra), -// and NASA Mars Curiosity Rover (Gale Crater) -const temperatureData = { - london: [ - { date: new Date( '2023-01-01' ), value: 8.2 }, - { date: new Date( '2023-01-08' ), value: 7.9 }, - { date: new Date( '2023-01-15' ), value: 5.1 }, - { date: new Date( '2023-01-22' ), value: 4.8 }, - { date: new Date( '2023-01-29' ), value: 6.3 }, - { date: new Date( '2023-02-05' ), value: 7.2 }, - { date: new Date( '2023-02-12' ), value: 9.4 }, - { date: new Date( '2023-02-19' ), value: 8.7 }, - { date: new Date( '2023-02-26' ), value: 7.1 }, - { date: new Date( '2023-03-05' ), value: 8.3 }, - { date: new Date( '2023-03-12' ), value: 9.5 }, - { date: new Date( '2023-03-19' ), value: 11.2 }, - { date: new Date( '2023-03-26' ), value: 12.8 }, - { date: new Date( '2023-04-02' ), value: 13.4 }, - { date: new Date( '2023-04-09' ), value: 14.1 }, - { date: new Date( '2023-04-16' ), value: 15.3 }, - { date: new Date( '2023-04-23' ), value: 14.8 }, - { date: new Date( '2023-04-30' ), value: 15.7 }, - { date: new Date( '2023-05-07' ), value: 16.9 }, - { date: new Date( '2023-05-14' ), value: 17.2 }, - { date: new Date( '2023-05-21' ), value: 18.4 }, - { date: new Date( '2023-05-28' ), value: 19.1 }, - { date: new Date( '2023-06-04' ), value: 20.3 }, - { date: new Date( '2023-06-11' ), value: 21.5 }, - { date: new Date( '2023-06-18' ), value: 22.8 }, - { date: new Date( '2023-06-25' ), value: 21.9 }, - { date: new Date( '2023-07-02' ), value: 23.1 }, - { date: new Date( '2023-07-09' ), value: 22.7 }, - { date: new Date( '2023-07-16' ), value: 24.2 }, - { date: new Date( '2023-07-23' ), value: 23.8 }, - { date: new Date( '2023-07-30' ), value: 22.9 }, - { date: new Date( '2023-08-06' ), value: 23.4 }, - { date: new Date( '2023-08-13' ), value: 22.8 }, - { date: new Date( '2023-08-20' ), value: 21.9 }, - { date: new Date( '2023-08-27' ), value: 20.7 }, - { date: new Date( '2023-09-03' ), value: 19.8 }, - { date: new Date( '2023-09-10' ), value: 18.9 }, - { date: new Date( '2023-09-17' ), value: 17.6 }, - { date: new Date( '2023-09-24' ), value: 16.8 }, - { date: new Date( '2023-10-01' ), value: 15.9 }, - { date: new Date( '2023-10-08' ), value: 14.7 }, - { date: new Date( '2023-10-15' ), value: 13.8 }, - { date: new Date( '2023-10-22' ), value: 12.9 }, - { date: new Date( '2023-10-29' ), value: 11.7 }, - { date: new Date( '2023-11-05' ), value: 10.8 }, - { date: new Date( '2023-11-12' ), value: 9.9 }, - { date: new Date( '2023-11-19' ), value: 8.7 }, - { date: new Date( '2023-11-26' ), value: 7.8 }, - { date: new Date( '2023-12-03' ), value: 6.9 }, - { date: new Date( '2023-12-10' ), value: 5.8 }, - { date: new Date( '2023-12-17' ), value: 4.9 }, - { date: new Date( '2023-12-24' ), value: 5.7 }, - { date: new Date( '2023-12-31' ), value: 6.2 }, - ], +import type { SeriesData } from '../../shared/types'; - canberra: [ - { date: new Date( '2023-01-01' ), value: 28.5 }, - { date: new Date( '2023-01-08' ), value: 29.2 }, - { date: new Date( '2023-01-15' ), value: 30.1 }, - { date: new Date( '2023-01-22' ), value: 29.8 }, - { date: new Date( '2023-01-29' ), value: 28.9 }, - { date: new Date( '2023-02-05' ), value: 27.8 }, - { date: new Date( '2023-02-12' ), value: 26.9 }, - { date: new Date( '2023-02-19' ), value: 25.7 }, - { date: new Date( '2023-02-26' ), value: 24.8 }, - { date: new Date( '2023-03-05' ), value: 23.9 }, - { date: new Date( '2023-03-12' ), value: 22.8 }, - { date: new Date( '2023-03-19' ), value: 21.7 }, - { date: new Date( '2023-03-26' ), value: 20.8 }, - { date: new Date( '2023-04-02' ), value: 19.6 }, - { date: new Date( '2023-04-09' ), value: 18.4 }, - { date: new Date( '2023-04-16' ), value: 17.2 }, - { date: new Date( '2023-04-23' ), value: 16.1 }, - { date: new Date( '2023-04-30' ), value: 15.3 }, - { date: new Date( '2023-05-07' ), value: 14.2 }, - { date: new Date( '2023-05-14' ), value: 13.1 }, - { date: new Date( '2023-05-21' ), value: 12.3 }, - { date: new Date( '2023-05-28' ), value: 11.4 }, - { date: new Date( '2023-06-04' ), value: 10.2 }, - { date: new Date( '2023-06-11' ), value: 9.1 }, - { date: new Date( '2023-06-18' ), value: 8.3 }, - { date: new Date( '2023-06-25' ), value: 7.8 }, - { date: new Date( '2023-07-02' ), value: 7.1 }, - { date: new Date( '2023-07-09' ), value: 6.9 }, - { date: new Date( '2023-07-16' ), value: 7.2 }, - { date: new Date( '2023-07-23' ), value: 8.1 }, - { date: new Date( '2023-07-30' ), value: 9.3 }, - { date: new Date( '2023-08-06' ), value: 10.4 }, - { date: new Date( '2023-08-13' ), value: 11.6 }, - { date: new Date( '2023-08-20' ), value: 12.8 }, - { date: new Date( '2023-08-27' ), value: 13.9 }, - { date: new Date( '2023-09-03' ), value: 15.2 }, - { date: new Date( '2023-09-10' ), value: 16.4 }, - { date: new Date( '2023-09-17' ), value: 17.6 }, - { date: new Date( '2023-09-24' ), value: 18.9 }, - { date: new Date( '2023-10-01' ), value: 20.1 }, - { date: new Date( '2023-10-08' ), value: 21.3 }, - { date: new Date( '2023-10-15' ), value: 22.5 }, - { date: new Date( '2023-10-22' ), value: 23.7 }, - { date: new Date( '2023-10-29' ), value: 24.8 }, - { date: new Date( '2023-11-05' ), value: 25.9 }, - { date: new Date( '2023-11-12' ), value: 26.7 }, - { date: new Date( '2023-11-19' ), value: 27.8 }, - { date: new Date( '2023-11-26' ), value: 28.6 }, - { date: new Date( '2023-12-03' ), value: 29.4 }, - { date: new Date( '2023-12-10' ), value: 30.2 }, - { date: new Date( '2023-12-17' ), value: 29.8 }, - { date: new Date( '2023-12-24' ), value: 28.9 }, - { date: new Date( '2023-12-31' ), value: 29.3 }, - ], - - mars: [ - { date: new Date( '2023-01-01' ), value: -63 }, - { date: new Date( '2023-01-08' ), value: -64 }, - { date: new Date( '2023-01-15' ), value: -65 }, - { date: new Date( '2023-01-22' ), value: -63 }, - { date: new Date( '2023-01-29' ), value: -62 }, - { date: new Date( '2023-02-05' ), value: -60 }, - { date: new Date( '2023-02-12' ), value: -58 }, - { date: new Date( '2023-02-19' ), value: -55 }, - { date: new Date( '2023-02-26' ), value: -52 }, - { date: new Date( '2023-03-05' ), value: -48 }, - { date: new Date( '2023-03-12' ), value: -45 }, - { date: new Date( '2023-03-19' ), value: -42 }, - { date: new Date( '2023-03-26' ), value: -38 }, - { date: new Date( '2023-04-02' ), value: -35 }, - { date: new Date( '2023-04-09' ), value: -32 }, - { date: new Date( '2023-04-16' ), value: -28 }, - { date: new Date( '2023-04-23' ), value: -25 }, - { date: new Date( '2023-04-30' ), value: -22 }, - { date: new Date( '2023-05-07' ), value: -18 }, - { date: new Date( '2023-05-14' ), value: -15 }, - { date: new Date( '2023-05-21' ), value: -12 }, - { date: new Date( '2023-05-28' ), value: -8 }, - { date: new Date( '2023-06-04' ), value: -5 }, - { date: new Date( '2023-06-11' ), value: -2 }, - { date: new Date( '2023-06-18' ), value: 0 }, - { date: new Date( '2023-06-25' ), value: 2 }, - { date: new Date( '2023-07-02' ), value: 5 }, - { date: new Date( '2023-07-09' ), value: 8 }, - { date: new Date( '2023-07-16' ), value: 10 }, - { date: new Date( '2023-07-23' ), value: 12 }, - { date: new Date( '2023-07-30' ), value: 15 }, - { date: new Date( '2023-08-06' ), value: 17 }, - { date: new Date( '2023-08-13' ), value: 20 }, - { date: new Date( '2023-08-20' ), value: 22 }, - { date: new Date( '2023-08-27' ), value: 20 }, - { date: new Date( '2023-09-03' ), value: 18 }, - { date: new Date( '2023-09-10' ), value: 15 }, - { date: new Date( '2023-09-17' ), value: 12 }, - { date: new Date( '2023-09-24' ), value: 8 }, - { date: new Date( '2023-10-01' ), value: 5 }, - { date: new Date( '2023-10-08' ), value: 2 }, - { date: new Date( '2023-10-15' ), value: -2 }, - { date: new Date( '2023-10-22' ), value: -5 }, - { date: new Date( '2023-10-29' ), value: -8 }, - { date: new Date( '2023-11-05' ), value: -12 }, - { date: new Date( '2023-11-12' ), value: -15 }, - { date: new Date( '2023-11-19' ), value: -18 }, - { date: new Date( '2023-11-26' ), value: -22 }, - { date: new Date( '2023-12-03' ), value: -25 }, - { date: new Date( '2023-12-10' ), value: -28 }, - { date: new Date( '2023-12-17' ), value: -32 }, - { date: new Date( '2023-12-24' ), value: -35 }, - { date: new Date( '2023-12-31' ), value: -38 }, - ], -}; +// Sample data +const temperatureData: SeriesData[] = [ + { + label: 'London', + data: [ + // 2022 data + { date: new Date( '2022-01-01' ), value: 7.8 }, + { date: new Date( '2022-01-08' ), value: 7.2 }, + { date: new Date( '2022-01-15' ), value: 6.9 }, + { date: new Date( '2022-01-22' ), value: 6.5 }, + { date: new Date( '2022-01-29' ), value: 7.1 }, + { date: new Date( '2022-02-05' ), value: 8.3 }, + { date: new Date( '2022-02-12' ), value: 8.9 }, + { date: new Date( '2022-02-19' ), value: 9.2 }, + { date: new Date( '2022-02-26' ), value: 8.7 }, + { date: new Date( '2022-03-05' ), value: 9.4 }, + { date: new Date( '2022-03-12' ), value: 10.2 }, + { date: new Date( '2022-03-19' ), value: 11.5 }, + { date: new Date( '2022-03-26' ), value: 12.3 }, + { date: new Date( '2022-04-02' ), value: 13.1 }, + { date: new Date( '2022-04-09' ), value: 13.8 }, + { date: new Date( '2022-04-16' ), value: 14.6 }, + { date: new Date( '2022-04-23' ), value: 15.2 }, + { date: new Date( '2022-04-30' ), value: 15.9 }, + { date: new Date( '2022-05-07' ), value: 16.7 }, + { date: new Date( '2022-05-14' ), value: 17.4 }, + { date: new Date( '2022-05-21' ), value: 18.2 }, + { date: new Date( '2022-05-28' ), value: 18.9 }, + { date: new Date( '2022-06-04' ), value: 19.7 }, + { date: new Date( '2022-06-11' ), value: 20.5 }, + { date: new Date( '2022-06-18' ), value: 21.3 }, + { date: new Date( '2022-06-25' ), value: 22.1 }, + { date: new Date( '2022-07-02' ), value: 22.8 }, + { date: new Date( '2022-07-09' ), value: 23.6 }, + { date: new Date( '2022-07-16' ), value: 24.4 }, + { date: new Date( '2022-07-23' ), value: 25.2 }, + { date: new Date( '2022-07-30' ), value: 24.8 }, + { date: new Date( '2022-08-06' ), value: 24.1 }, + { date: new Date( '2022-08-13' ), value: 23.5 }, + { date: new Date( '2022-08-20' ), value: 22.8 }, + { date: new Date( '2022-08-27' ), value: 21.9 }, + { date: new Date( '2022-09-03' ), value: 20.7 }, + { date: new Date( '2022-09-10' ), value: 19.5 }, + { date: new Date( '2022-09-17' ), value: 18.3 }, + { date: new Date( '2022-09-24' ), value: 17.1 }, + { date: new Date( '2022-10-01' ), value: 16.2 }, + { date: new Date( '2022-10-08' ), value: 15.1 }, + { date: new Date( '2022-10-15' ), value: 14.2 }, + { date: new Date( '2022-10-22' ), value: 13.1 }, + { date: new Date( '2022-10-29' ), value: 12.2 }, + { date: new Date( '2022-11-05' ), value: 11.1 }, + { date: new Date( '2022-11-12' ), value: 10.2 }, + { date: new Date( '2022-11-19' ), value: 9.1 }, + { date: new Date( '2022-11-26' ), value: 8.2 }, + { date: new Date( '2022-12-03' ), value: 7.1 }, + { date: new Date( '2022-12-10' ), value: 6.2 }, + { date: new Date( '2022-12-17' ), value: 5.5 }, + { date: new Date( '2022-12-24' ), value: 5.2 }, + { date: new Date( '2022-12-31' ), value: 6.8 }, + // 2023 data + { date: new Date( '2023-01-01' ), value: 8.2 }, + { date: new Date( '2023-01-08' ), value: 7.9 }, + { date: new Date( '2023-01-15' ), value: 5.1 }, + { date: new Date( '2023-01-22' ), value: 4.8 }, + { date: new Date( '2023-01-29' ), value: 6.3 }, + { date: new Date( '2023-02-05' ), value: 7.2 }, + { date: new Date( '2023-02-12' ), value: 9.4 }, + { date: new Date( '2023-02-19' ), value: 8.7 }, + { date: new Date( '2023-02-26' ), value: 7.1 }, + { date: new Date( '2023-03-05' ), value: 8.3 }, + { date: new Date( '2023-03-12' ), value: 9.5 }, + { date: new Date( '2023-03-19' ), value: 11.2 }, + { date: new Date( '2023-03-26' ), value: 12.8 }, + { date: new Date( '2023-04-02' ), value: 13.4 }, + { date: new Date( '2023-04-09' ), value: 14.1 }, + { date: new Date( '2023-04-16' ), value: 15.3 }, + { date: new Date( '2023-04-23' ), value: 14.8 }, + { date: new Date( '2023-04-30' ), value: 15.7 }, + { date: new Date( '2023-05-07' ), value: 16.9 }, + { date: new Date( '2023-05-14' ), value: 17.2 }, + { date: new Date( '2023-05-21' ), value: 18.4 }, + { date: new Date( '2023-05-28' ), value: 19.1 }, + { date: new Date( '2023-06-04' ), value: 20.3 }, + { date: new Date( '2023-06-11' ), value: 21.5 }, + { date: new Date( '2023-06-18' ), value: 22.8 }, + { date: new Date( '2023-06-25' ), value: 21.9 }, + { date: new Date( '2023-07-02' ), value: 23.1 }, + { date: new Date( '2023-07-09' ), value: 22.7 }, + { date: new Date( '2023-07-16' ), value: 24.2 }, + { date: new Date( '2023-07-23' ), value: 23.8 }, + { date: new Date( '2023-07-30' ), value: 22.9 }, + { date: new Date( '2023-08-06' ), value: 23.4 }, + { date: new Date( '2023-08-13' ), value: 22.8 }, + { date: new Date( '2023-08-20' ), value: 21.9 }, + { date: new Date( '2023-08-27' ), value: 20.7 }, + { date: new Date( '2023-09-03' ), value: 19.8 }, + { date: new Date( '2023-09-10' ), value: 18.9 }, + { date: new Date( '2023-09-17' ), value: 17.6 }, + { date: new Date( '2023-09-24' ), value: 16.8 }, + { date: new Date( '2023-10-01' ), value: 15.9 }, + { date: new Date( '2023-10-08' ), value: 14.7 }, + { date: new Date( '2023-10-15' ), value: 13.8 }, + { date: new Date( '2023-10-22' ), value: 12.9 }, + { date: new Date( '2023-10-29' ), value: 11.7 }, + { date: new Date( '2023-11-05' ), value: 10.8 }, + { date: new Date( '2023-11-12' ), value: 9.9 }, + { date: new Date( '2023-11-19' ), value: 8.7 }, + { date: new Date( '2023-11-26' ), value: 7.8 }, + { date: new Date( '2023-12-03' ), value: 6.9 }, + { date: new Date( '2023-12-10' ), value: 5.8 }, + { date: new Date( '2023-12-17' ), value: 4.9 }, + { date: new Date( '2023-12-24' ), value: 5.7 }, + { date: new Date( '2023-12-31' ), value: 6.2 }, + ], + }, + { + label: 'Canberra', + data: [ + // 2022 data + { date: new Date( '2022-01-01' ), value: 27.9 }, + { date: new Date( '2022-01-08' ), value: 28.4 }, + { date: new Date( '2022-01-15' ), value: 29.2 }, + { date: new Date( '2022-01-22' ), value: 28.9 }, + { date: new Date( '2022-01-29' ), value: 28.1 }, + { date: new Date( '2022-02-05' ), value: 27.3 }, + { date: new Date( '2022-02-12' ), value: 26.5 }, + { date: new Date( '2022-02-19' ), value: 25.4 }, + { date: new Date( '2022-02-26' ), value: 24.2 }, + { date: new Date( '2022-03-05' ), value: 23.1 }, + { date: new Date( '2022-03-12' ), value: 22.3 }, + { date: new Date( '2022-03-19' ), value: 21.2 }, + { date: new Date( '2022-03-26' ), value: 20.1 }, + { date: new Date( '2022-04-02' ), value: 19.2 }, + { date: new Date( '2022-04-09' ), value: 18.1 }, + { date: new Date( '2022-04-16' ), value: 16.9 }, + { date: new Date( '2022-04-23' ), value: 15.8 }, + { date: new Date( '2022-04-30' ), value: 14.9 }, + { date: new Date( '2022-05-07' ), value: 13.8 }, + { date: new Date( '2022-05-14' ), value: 12.9 }, + { date: new Date( '2022-05-21' ), value: 11.8 }, + { date: new Date( '2022-05-28' ), value: 10.9 }, + { date: new Date( '2022-06-04' ), value: 9.8 }, + { date: new Date( '2022-06-11' ), value: 8.9 }, + { date: new Date( '2022-06-18' ), value: 8.1 }, + { date: new Date( '2022-06-25' ), value: 7.5 }, + { date: new Date( '2022-07-02' ), value: 6.9 }, + { date: new Date( '2022-07-09' ), value: 6.7 }, + { date: new Date( '2022-07-16' ), value: 7.1 }, + { date: new Date( '2022-07-23' ), value: 7.9 }, + { date: new Date( '2022-07-30' ), value: 8.8 }, + { date: new Date( '2022-08-06' ), value: 9.9 }, + { date: new Date( '2022-08-13' ), value: 11.2 }, + { date: new Date( '2022-08-20' ), value: 12.4 }, + { date: new Date( '2022-08-27' ), value: 13.6 }, + { date: new Date( '2022-09-03' ), value: 14.8 }, + { date: new Date( '2022-09-10' ), value: 16.1 }, + { date: new Date( '2022-09-17' ), value: 17.3 }, + { date: new Date( '2022-09-24' ), value: 18.5 }, + { date: new Date( '2022-10-01' ), value: 19.8 }, + { date: new Date( '2022-10-08' ), value: 21.1 }, + { date: new Date( '2022-10-15' ), value: 22.3 }, + { date: new Date( '2022-10-22' ), value: 23.5 }, + { date: new Date( '2022-10-29' ), value: 24.6 }, + { date: new Date( '2022-11-05' ), value: 25.7 }, + { date: new Date( '2022-11-12' ), value: 26.5 }, + { date: new Date( '2022-11-19' ), value: 27.4 }, + { date: new Date( '2022-11-26' ), value: 28.2 }, + { date: new Date( '2022-12-03' ), value: 28.9 }, + { date: new Date( '2022-12-10' ), value: 29.5 }, + { date: new Date( '2022-12-17' ), value: 29.1 }, + { date: new Date( '2022-12-24' ), value: 28.2 }, + { date: new Date( '2022-12-31' ), value: 28.7 }, + // 2023 data + { date: new Date( '2023-01-01' ), value: 28.5 }, + { date: new Date( '2023-01-08' ), value: 29.2 }, + { date: new Date( '2023-01-15' ), value: 30.1 }, + { date: new Date( '2023-01-22' ), value: 29.8 }, + { date: new Date( '2023-01-29' ), value: 28.9 }, + { date: new Date( '2023-02-05' ), value: 27.8 }, + { date: new Date( '2023-02-12' ), value: 26.9 }, + { date: new Date( '2023-02-19' ), value: 25.7 }, + { date: new Date( '2023-02-26' ), value: 24.8 }, + { date: new Date( '2023-03-05' ), value: 23.9 }, + { date: new Date( '2023-03-12' ), value: 22.8 }, + { date: new Date( '2023-03-19' ), value: 21.7 }, + { date: new Date( '2023-03-26' ), value: 20.8 }, + { date: new Date( '2023-04-02' ), value: 19.6 }, + { date: new Date( '2023-04-09' ), value: 18.4 }, + { date: new Date( '2023-04-16' ), value: 17.2 }, + { date: new Date( '2023-04-23' ), value: 16.1 }, + { date: new Date( '2023-04-30' ), value: 15.3 }, + { date: new Date( '2023-05-07' ), value: 14.2 }, + { date: new Date( '2023-05-14' ), value: 13.1 }, + { date: new Date( '2023-05-21' ), value: 12.3 }, + { date: new Date( '2023-05-28' ), value: 11.4 }, + { date: new Date( '2023-06-04' ), value: 10.2 }, + { date: new Date( '2023-06-11' ), value: 9.1 }, + { date: new Date( '2023-06-18' ), value: 8.3 }, + { date: new Date( '2023-06-25' ), value: 7.8 }, + { date: new Date( '2023-07-02' ), value: 7.1 }, + { date: new Date( '2023-07-09' ), value: 6.9 }, + { date: new Date( '2023-07-16' ), value: 7.2 }, + { date: new Date( '2023-07-23' ), value: 8.1 }, + { date: new Date( '2023-07-30' ), value: 9.3 }, + { date: new Date( '2023-08-06' ), value: 10.4 }, + { date: new Date( '2023-08-13' ), value: 11.6 }, + { date: new Date( '2023-08-20' ), value: 12.8 }, + { date: new Date( '2023-08-27' ), value: 13.9 }, + { date: new Date( '2023-09-03' ), value: 15.2 }, + { date: new Date( '2023-09-10' ), value: 16.4 }, + { date: new Date( '2023-09-17' ), value: 17.6 }, + { date: new Date( '2023-09-24' ), value: 18.9 }, + { date: new Date( '2023-10-01' ), value: 20.1 }, + { date: new Date( '2023-10-08' ), value: 21.3 }, + { date: new Date( '2023-10-15' ), value: 22.5 }, + { date: new Date( '2023-10-22' ), value: 23.7 }, + { date: new Date( '2023-10-29' ), value: 24.8 }, + { date: new Date( '2023-11-05' ), value: 25.9 }, + { date: new Date( '2023-11-12' ), value: 26.7 }, + { date: new Date( '2023-11-19' ), value: 27.8 }, + { date: new Date( '2023-11-26' ), value: 28.6 }, + { date: new Date( '2023-12-03' ), value: 29.4 }, + { date: new Date( '2023-12-10' ), value: 30.2 }, + { date: new Date( '2023-12-17' ), value: 29.8 }, + { date: new Date( '2023-12-24' ), value: 28.9 }, + { date: new Date( '2023-12-31' ), value: 29.3 }, + ], + }, + { + label: 'Mars', + data: [ + // 2022 data + { date: new Date( '2022-01-01' ), value: -62 }, + { date: new Date( '2022-01-08' ), value: -63 }, + { date: new Date( '2022-01-15' ), value: -64 }, + { date: new Date( '2022-01-22' ), value: -62 }, + { date: new Date( '2022-01-29' ), value: -61 }, + { date: new Date( '2022-02-05' ), value: -59 }, + { date: new Date( '2022-02-12' ), value: -56 }, + { date: new Date( '2022-02-19' ), value: -53 }, + { date: new Date( '2022-02-26' ), value: -50 }, + { date: new Date( '2022-03-05' ), value: -47 }, + { date: new Date( '2022-03-12' ), value: -44 }, + { date: new Date( '2022-03-19' ), value: -41 }, + { date: new Date( '2022-03-26' ), value: -37 }, + { date: new Date( '2022-04-02' ), value: -34 }, + { date: new Date( '2022-04-09' ), value: -31 }, + { date: new Date( '2022-04-16' ), value: -27 }, + { date: new Date( '2022-04-23' ), value: -24 }, + { date: new Date( '2022-04-30' ), value: -21 }, + { date: new Date( '2022-05-07' ), value: -17 }, + { date: new Date( '2022-05-14' ), value: -14 }, + { date: new Date( '2022-05-21' ), value: -11 }, + { date: new Date( '2022-05-28' ), value: -7 }, + { date: new Date( '2022-06-04' ), value: -4 }, + { date: new Date( '2022-06-11' ), value: -1 }, + { date: new Date( '2022-06-18' ), value: 1 }, + { date: new Date( '2022-06-25' ), value: 3 }, + { date: new Date( '2022-07-02' ), value: 6 }, + { date: new Date( '2022-07-09' ), value: 9 }, + { date: new Date( '2022-07-16' ), value: 11 }, + { date: new Date( '2022-07-23' ), value: 13 }, + { date: new Date( '2022-07-30' ), value: 16 }, + { date: new Date( '2022-08-06' ), value: 18 }, + { date: new Date( '2022-08-13' ), value: 21 }, + { date: new Date( '2022-08-20' ), value: 23 }, + { date: new Date( '2022-08-27' ), value: 21 }, + { date: new Date( '2022-09-03' ), value: 19 }, + { date: new Date( '2022-09-10' ), value: 16 }, + { date: new Date( '2022-09-17' ), value: 13 }, + { date: new Date( '2022-09-24' ), value: 9 }, + { date: new Date( '2022-10-01' ), value: 6 }, + { date: new Date( '2022-10-08' ), value: 3 }, + { date: new Date( '2022-10-15' ), value: -1 }, + { date: new Date( '2022-10-22' ), value: -4 }, + { date: new Date( '2022-10-29' ), value: -7 }, + { date: new Date( '2022-11-05' ), value: -11 }, + { date: new Date( '2022-11-12' ), value: -14 }, + { date: new Date( '2022-11-19' ), value: -17 }, + { date: new Date( '2022-11-26' ), value: -21 }, + { date: new Date( '2022-12-03' ), value: -24 }, + { date: new Date( '2022-12-10' ), value: -27 }, + { date: new Date( '2022-12-17' ), value: -31 }, + { date: new Date( '2022-12-24' ), value: -36 }, + { date: new Date( '2022-12-31' ), value: -37 }, + // 2023 data + { date: new Date( '2023-01-01' ), value: -63 }, + { date: new Date( '2023-01-08' ), value: -64 }, + { date: new Date( '2023-01-15' ), value: -65 }, + { date: new Date( '2023-01-22' ), value: -63 }, + { date: new Date( '2023-01-29' ), value: -62 }, + { date: new Date( '2023-02-05' ), value: -60 }, + { date: new Date( '2023-02-12' ), value: -58 }, + { date: new Date( '2023-02-19' ), value: -55 }, + { date: new Date( '2023-02-26' ), value: -52 }, + { date: new Date( '2023-03-05' ), value: -48 }, + { date: new Date( '2023-03-12' ), value: -45 }, + { date: new Date( '2023-03-19' ), value: -42 }, + { date: new Date( '2023-03-26' ), value: -38 }, + { date: new Date( '2023-04-02' ), value: -35 }, + { date: new Date( '2023-04-09' ), value: -32 }, + { date: new Date( '2023-04-16' ), value: -28 }, + { date: new Date( '2023-04-23' ), value: -25 }, + { date: new Date( '2023-04-30' ), value: -22 }, + { date: new Date( '2023-05-07' ), value: -18 }, + { date: new Date( '2023-05-14' ), value: -15 }, + { date: new Date( '2023-05-21' ), value: -12 }, + { date: new Date( '2023-05-28' ), value: -8 }, + { date: new Date( '2023-06-04' ), value: -5 }, + { date: new Date( '2023-06-11' ), value: -2 }, + { date: new Date( '2023-06-18' ), value: 0 }, + { date: new Date( '2023-06-25' ), value: 2 }, + { date: new Date( '2023-07-02' ), value: 5 }, + { date: new Date( '2023-07-09' ), value: 8 }, + { date: new Date( '2023-07-16' ), value: 10 }, + { date: new Date( '2023-07-23' ), value: 12 }, + { date: new Date( '2023-07-30' ), value: 15 }, + { date: new Date( '2023-08-06' ), value: 17 }, + { date: new Date( '2023-08-13' ), value: 20 }, + { date: new Date( '2023-08-20' ), value: 22 }, + { date: new Date( '2023-08-27' ), value: 20 }, + { date: new Date( '2023-09-03' ), value: 18 }, + { date: new Date( '2023-09-10' ), value: 15 }, + { date: new Date( '2023-09-17' ), value: 12 }, + { date: new Date( '2023-09-24' ), value: 8 }, + { date: new Date( '2023-10-01' ), value: 5 }, + { date: new Date( '2023-10-08' ), value: 2 }, + { date: new Date( '2023-10-15' ), value: -2 }, + { date: new Date( '2023-10-22' ), value: -5 }, + { date: new Date( '2023-10-29' ), value: -8 }, + { date: new Date( '2023-11-05' ), value: -12 }, + { date: new Date( '2023-11-12' ), value: -15 }, + { date: new Date( '2023-11-19' ), value: -18 }, + { date: new Date( '2023-11-26' ), value: -22 }, + { date: new Date( '2023-12-03' ), value: -25 }, + { date: new Date( '2023-12-10' ), value: -28 }, + { date: new Date( '2023-12-17' ), value: -32 }, + { date: new Date( '2023-12-24' ), value: -35 }, + { date: new Date( '2023-12-31' ), value: -38 }, + ], + }, +]; export default temperatureData; diff --git a/projects/js-packages/charts/src/components/pie-chart/pie-chart.module.scss b/projects/js-packages/charts/src/components/pie-chart/pie-chart.module.scss new file mode 100644 index 0000000000000..cbb24ea286735 --- /dev/null +++ b/projects/js-packages/charts/src/components/pie-chart/pie-chart.module.scss @@ -0,0 +1,3 @@ +.pie-chart { + position: relative; +} diff --git a/projects/js-packages/charts/src/components/pie-chart/pie-chart.tsx b/projects/js-packages/charts/src/components/pie-chart/pie-chart.tsx index bffe55ea4de25..764910bfa82f7 100644 --- a/projects/js-packages/charts/src/components/pie-chart/pie-chart.tsx +++ b/projects/js-packages/charts/src/components/pie-chart/pie-chart.tsx @@ -1,9 +1,11 @@ import { Group } from '@visx/group'; import { Pie } from '@visx/shape'; +import clsx from 'clsx'; import { SVGProps } from 'react'; import useChartMouseHandler from '../../hooks/use-chart-mouse-handler'; import { useChartTheme, defaultTheme } from '../../providers/theme'; -import { Tooltip } from '../tooltip'; +import { BaseTooltip } from '../tooltip'; +import styles from './pie-chart.module.scss'; import type { BaseChartProps, DataPoint } from '../shared/types'; // TODO: add animation @@ -27,6 +29,7 @@ const PieChart = ( { height, withTooltips = false, innerRadius = 0, + className, }: PieChartProps ) => { const providerTheme = useChartTheme(); const { onMouseMove, onMouseLeave, tooltipOpen, tooltipData, tooltipLeft, tooltipTop } = @@ -46,7 +49,7 @@ const PieChart = ( { }; return ( -
+
{ withTooltips && tooltipOpen && tooltipData && ( - = ( { width, label, note, + className, withTooltips = false, clockwise = true, thickness = 0.4, @@ -98,7 +99,9 @@ const PieSemiCircleChart: FC< PieSemiCircleChartProps > = ( { ); return ( -
+
{ /* Main chart group that contains both the pie and text elements */ } 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 886e1c2f21119..6f2eee9df73ae 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 @@ -73,5 +73,5 @@ WithTooltips.args = { data, label: 'OS', note: 'Windows +10%', - WithTooltips: true, + withTooltips: true, }; 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 6b4bd04bc76c6..4b0836d7b4770 100644 --- a/projects/js-packages/charts/src/components/shared/types.d.ts +++ b/projects/js-packages/charts/src/components/shared/types.d.ts @@ -10,6 +10,16 @@ export type DataPointDate = { value: number; }; +export type SeriesData = { + label: string; + data: DataPointDate[]; +}; + +export type MultipleDataPointsDate = { + label: string; + data: DataPointDate[]; +}; + export type DataPointPercentage = { /** * Label for the data point @@ -61,6 +71,10 @@ export type BaseChartProps< T = DataPoint | DataPointDate > = { * Array of data points to display in the chart */ data: T extends DataPoint | DataPointDate ? T[] : T; + /** + * Additional CSS class name for the chart container + */ + className?: string; /** * Width of the chart in pixels */