From dba075826cc9d86516e7ddaf5936672a99086ec3 Mon Sep 17 00:00:00 2001 From: Jasper Kang Date: Thu, 16 Jan 2025 15:30:28 +1300 Subject: [PATCH 1/5] allow passing in axis options --- .../src/components/line-chart/line-chart.tsx | 14 +++++++++++-- .../line-chart/stories/index.stories.tsx | 10 ++++++++++ projects/js-packages/charts/src/types.ts | 20 +++++++++++++++++++ 3 files changed, 42 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 c105f26f39ac0..ae9a1a91a59f8 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 @@ -83,6 +83,16 @@ const LineChart: FC< LineChartProps > = ( { withTooltips = true, showLegend = false, legendOrientation = 'horizontal', + options = { + axis: { + x: { + orientation: 'bottom', + }, + y: { + orientation: 'left', + }, + }, + }, } ) => { const providerTheme = useChartTheme(); @@ -124,8 +134,8 @@ const LineChart: FC< LineChartProps > = ( { yScale={ { type: 'linear', nice: true } } > - - + + { data.map( ( seriesData, index ) => ( = T[ keyof T ]; + +declare type OrientationType = ValueOf< typeof Orientation >; + export type DataPoint = { label: string; value: number; @@ -65,6 +70,11 @@ export type ChartTheme = { gridColorDark: string; }; +declare type AxisOptions = { + orientation?: OrientationType; + numTicks?: number; +}; + /** * Base properties shared across all chart components */ @@ -110,6 +120,16 @@ export type BaseChartProps< T = DataPoint | DataPointDate > = { * Grid visibility. x is default. */ gridVisibility?: 'x' | 'y' | 'xy' | 'none'; + + /** + * More options for the chart. + */ + options?: { + axis: { + x: AxisOptions; + y: AxisOptions; + }; + }; }; /** From f98d9e8885e831cbfd6ecb94aa6485a2c2c9a12d Mon Sep 17 00:00:00 2001 From: Jasper Kang Date: Thu, 16 Jan 2025 15:33:55 +1300 Subject: [PATCH 2/5] changelog --- .../js-packages/charts/changelog/add-x-y-axis-orientation | 4 ++++ 1 file changed, 4 insertions(+) create mode 100644 projects/js-packages/charts/changelog/add-x-y-axis-orientation diff --git a/projects/js-packages/charts/changelog/add-x-y-axis-orientation b/projects/js-packages/charts/changelog/add-x-y-axis-orientation new file mode 100644 index 0000000000000..1cba564f78b87 --- /dev/null +++ b/projects/js-packages/charts/changelog/add-x-y-axis-orientation @@ -0,0 +1,4 @@ +Significance: minor +Type: added + +Added passing through options for X, Y axis From a0840afaeeeb6b42b45386c83a17943095e871c3 Mon Sep 17 00:00:00 2001 From: Jasper Kang Date: Thu, 16 Jan 2025 15:34:11 +1300 Subject: [PATCH 3/5] passing through the class names --- projects/js-packages/charts/src/types.ts | 4 ++++ 1 file changed, 4 insertions(+) diff --git a/projects/js-packages/charts/src/types.ts b/projects/js-packages/charts/src/types.ts index 804b6a386567f..8b4ebf73071c0 100644 --- a/projects/js-packages/charts/src/types.ts +++ b/projects/js-packages/charts/src/types.ts @@ -73,6 +73,10 @@ export type ChartTheme = { declare type AxisOptions = { orientation?: OrientationType; numTicks?: number; + axisClassName?: string; + axisLineClassName?: string; + labelClassName?: string; + tickClassName?: string; }; /** From 8207c4fc675172bd3fc93f33c6bbe3446e12472d Mon Sep 17 00:00:00 2001 From: Jasper Kang Date: Thu, 16 Jan 2025 15:43:26 +1300 Subject: [PATCH 4/5] add options --- projects/js-packages/charts/src/types.ts | 6 +++--- 1 file changed, 3 insertions(+), 3 deletions(-) diff --git a/projects/js-packages/charts/src/types.ts b/projects/js-packages/charts/src/types.ts index 8b4ebf73071c0..8c35f58d8d61a 100644 --- a/projects/js-packages/charts/src/types.ts +++ b/projects/js-packages/charts/src/types.ts @@ -129,9 +129,9 @@ export type BaseChartProps< T = DataPoint | DataPointDate > = { * More options for the chart. */ options?: { - axis: { - x: AxisOptions; - y: AxisOptions; + axis?: { + x?: AxisOptions; + y?: AxisOptions; }; }; }; From 06093b26be2673bf32ae8554079f364ed4299c61 Mon Sep 17 00:00:00 2001 From: Jasper Kang Date: Fri, 17 Jan 2025 09:52:28 +1300 Subject: [PATCH 5/5] move defaults to component to make them available when options is passed --- .../src/components/line-chart/line-chart.tsx | 20 ++++++++----------- 1 file changed, 8 insertions(+), 12 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 ae9a1a91a59f8..eb88bb5cf5a55 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 @@ -83,16 +83,7 @@ const LineChart: FC< LineChartProps > = ( { withTooltips = true, showLegend = false, legendOrientation = 'horizontal', - options = { - axis: { - x: { - orientation: 'bottom', - }, - y: { - orientation: 'left', - }, - }, - }, + options = {}, } ) => { const providerTheme = useChartTheme(); @@ -134,8 +125,13 @@ const LineChart: FC< LineChartProps > = ( { yScale={ { type: 'linear', nice: true } } > - - + + { data.map( ( seriesData, index ) => (