Fix chartConfigProps not passing props to the components (#182)

* fix: chartConfigProps not passing plugins and options to chart.js instance * chore: add changeset * chore: changes to publish-canary workflow * chore: changes to publish-canary workflow * chore: add env variables * chore: add pre flag * chore: custom commit message * chore: small fix * chore: setup npm auth * chore: setup npm auth * chore: undo canary releases fix to add in a separate PR * refactor: change order to re-use config variable * chore: tests add canary release workflow * chore: remove canary-release workflow * refactor: use chartConfigProps to mutate chart config * refactor: revert approach and add stories
propeldata · Jan 31, 2024 · 59cbf58 · 59cbf58
1 parent e7226f3
commit 59cbf58
Show file tree

Hide file tree

Showing 8 changed files with 239 additions and 69 deletions.
diff --git a/.changeset/twelve-fishes-lay.md b/.changeset/twelve-fishes-lay.md
@@ -0,0 +1,5 @@
+---
+'@propeldata/ui-kit': patch
+---
+
+Fixed chartConfigProps not passing some props
diff --git a/.github/workflows/publish-canary.yml b/.github/workflows/publish-canary.yml
@@ -62,4 +62,4 @@ jobs:
           yarn changeset publish --tag canary --no-git-tag
         env:
           GITHUB_TOKEN: ${{ secrets.PROPELDATA_CI_TOKEN }}
-          NPM_TOKEN: ${{ secrets.NPM_TOKEN }}
+          NPM_TOKEN: ${{ secrets.NPM_TOKEN }}
diff --git a/packages/ui-kit/src/components/Leaderboard/Leaderboard.stories.tsx b/packages/ui-kit/src/components/Leaderboard/Leaderboard.stories.tsx
@@ -1,5 +1,5 @@
 import type { Meta, StoryContext, StoryObj } from '@storybook/react'
-import React from 'react'
+import React, { useState } from 'react'
 import axiosInstance from '../../../../../app/storybook/src/axios'
 import {
   quotedStringRegex,
@@ -11,6 +11,8 @@ import {
 import { Leaderboard as LeaderboardSource, LeaderboardComponent } from './Leaderboard'
 import './Leaderboard.stories.css'
 import rawLeaderboardCss from '!!raw-loader!./Leaderboard.stories.css'
+import { DefaultThemes, ThemeProvider } from '../ThemeProvider'
+import { ThemeTokenProps } from '../../themes'
 
 const meta: Meta<typeof LeaderboardComponent> = {
   title: 'Components/Leaderboard',
@@ -283,7 +285,7 @@ export const CustomStyleStory: Story = {
     `,
     codeTemplate: (body: string, context: StoryContext): string => `
       // Leaderboard.tsx
-      
+
       import { ${context?.parameters?.imports ?? ''} } from '@propeldata/ui-kit'
       import './Leaderboard.css'
 
@@ -306,3 +308,42 @@ export const CustomStyleStory: Story = {
   },
   render: (args) => <Leaderboard {...args} />
 }
+
+export const ThemeStory: Story = {
+  name: 'Theme',
+  args: {
+    headers: barHeaders,
+    rows: barRows,
+    card: true
+  },
+  decorators: [
+    (Story) => {
+      const [baseTheme, setBaseTheme] = useState<DefaultThemes>('lightTheme')
+
+      const lightColors: ThemeTokenProps = {
+        accent: '#3d3d3d',
+        accentHover: '#3d3d3dc6'
+      }
+
+      const darkColors: ThemeTokenProps = {
+        accent: '#adadad',
+        accentHover: '#ffffffc6'
+      }
+
+      const theme = baseTheme === 'darkTheme' ? darkColors : lightColors
+
+      return (
+        <ThemeProvider baseTheme={baseTheme} theme={theme}>
+          <div style={{ margin: '10px', display: 'flex', gap: '8px' }}>
+            <button type="button" onClick={() => setBaseTheme(baseTheme === 'darkTheme' ? 'lightTheme' : 'darkTheme')}>
+              Switch theme
+            </button>
+            <span>{baseTheme}</span>
+          </div>
+          <Story />
+        </ThemeProvider>
+      )
+    }
+  ],
+  render: (args) => <Leaderboard {...args} />
+}
diff --git a/packages/ui-kit/src/components/Leaderboard/Leaderboard.tsx b/packages/ui-kit/src/components/Leaderboard/Leaderboard.tsx
@@ -97,30 +97,6 @@ export const LeaderboardComponent = React.forwardRef<HTMLDivElement, Leaderboard
           customChartLabelsPlugin
         }
 
-        if (chartRef.current) {
-          const chart = chartRef.current
-          chart.data.labels = labels
-          chart.data.datasets[0].data = values
-          chart.options.plugins = {
-            ...chart.options.plugins,
-            ...customPlugins
-          }
-
-          // @TODO: need improvement
-          // eslint-disable-next-line @typescript-eslint/ban-ts-comment
-          // @ts-ignore
-          chart.options.scales.x.border.color = theme?.colorSecondary
-          // eslint-disable-next-line @typescript-eslint/ban-ts-comment
-          // @ts-ignore
-          chart.options.scales.x.grid.color = theme?.colorSecondary
-          // eslint-disable-next-line @typescript-eslint/ban-ts-comment
-          // @ts-ignore
-          chart.options.scales.y.grid.color = theme?.colorSecondary
-
-          chart.update()
-          return
-        }
-
         let config: ChartConfiguration<'bar'> = {
           ...chartConfig,
           type: 'bar',
@@ -191,6 +167,41 @@ export const LeaderboardComponent = React.forwardRef<HTMLDivElement, Leaderboard
           config = chartConfigProps(config)
         }
 
+        if (chartRef.current) {
+          const chart = chartRef.current
+          chart.data.labels = labels
+          chart.options.plugins = {
+            ...chart.options.plugins,
+            ...customPlugins,
+            ...config?.options?.plugins
+          }
+
+          chart.data.datasets[0].data = values
+          Object.assign(chart.data.datasets[0], {
+            type: variant,
+            ...chart.data.datasets,
+            ...config?.data.datasets[0]
+          })
+
+          if (chart.options.scales?.x && 'border' in chart.options.scales.x && chart.options.scales.x.border) {
+            chart.options.scales.x.border = { ...chart.options.scales.x.border, color: theme.colorSecondary }
+          }
+          if (chart.options.scales?.x?.grid != null) {
+            chart.options.scales.x.grid = { ...chart.options.scales.x.grid, color: theme.colorSecondary }
+          }
+          if (chart.options.scales?.y?.grid != null) {
+            chart.options.scales.y.grid = { ...chart.options.scales.y.grid, color: theme.colorSecondary }
+          }
+
+          chart.options.scales = {
+            ...chart.options.scales,
+            ...config?.options?.scales
+          }
+
+          chart.update()
+          return
+        }
+
         chartRef.current = new ChartJS(canvasRef.current, config)
         canvasRef.current.style.borderRadius = '0px'
       },

diff --git a/packages/ui-kit/src/components/PieChart/PieChart.stories.tsx b/packages/ui-kit/src/components/PieChart/PieChart.stories.tsx
@@ -1,5 +1,5 @@
 import type { Meta, StoryObj } from '@storybook/react'
-import React from 'react'
+import React, { useState } from 'react'
 import axiosInstance from '../../../../../app/storybook/src/axios'
 import {
   quotedStringRegex,
@@ -8,6 +8,8 @@ import {
   storybookCodeTemplate,
   useStorybookAccessToken
 } from '../../helpers'
+import { ThemeTokenProps } from '../../themes'
+import { DefaultThemes, ThemeProvider } from '../ThemeProvider'
 import { PieChart as PieChartSource, PieChartComponent } from './PieChart'
 
 const meta: Meta<typeof PieChartComponent> = {
@@ -234,3 +236,59 @@ export const ShowValuesDoughnutStory: Story = {
   },
   render: (args) => <PieChart {...args} />
 }
+
+export const ThemeStory: Story = {
+  name: 'Theme',
+  args: {
+    variant: 'pie',
+    headers: pieHeaders,
+    rows: pieRows,
+    card: true
+  },
+  decorators: [
+    (Story) => {
+      const [baseTheme, setBaseTheme] = useState<DefaultThemes>('lightTheme')
+
+      const lightColors: ThemeTokenProps = {
+        colorBlue950: '#1a1919',
+        colorBlue900: '#2D3748',
+        colorBlue800: '#4A5568',
+        colorBlue700: '#718096',
+        colorBlue600: '#A0AEC0',
+        colorBlue500: '#CBD5E0',
+        colorBlue400: '#E2E8F0',
+        colorBlue300: '#EDF2F7',
+        colorBlue200: '#F7FAFC',
+        colorBlue100: '#FFFFFF'
+      }
+
+      const darkColors: ThemeTokenProps = {
+        colorBlue950: '#d9d9d9',
+        colorBlue900: '#F7FAFC',
+        colorBlue800: '#EDF2F7',
+        colorBlue700: '#E2E8F0',
+        colorBlue600: '#CBD5E0',
+        colorBlue500: '#A0AEC0',
+        colorBlue400: '#718096',
+        colorBlue300: '#4A5568',
+        colorBlue200: '#2D3748',
+        colorBlue100: '#1a1919'
+      }
+
+      const theme = baseTheme === 'darkTheme' ? darkColors : lightColors
+
+      return (
+        <ThemeProvider baseTheme={baseTheme} theme={theme}>
+          <div style={{ margin: '10px', display: 'flex', gap: '8px' }}>
+            <button type="button" onClick={() => setBaseTheme(baseTheme === 'darkTheme' ? 'lightTheme' : 'darkTheme')}>
+              Switch theme
+            </button>
+            <span>{baseTheme}</span>
+          </div>
+          <Story />
+        </ThemeProvider>
+      )
+    }
+  ],
+  render: (args) => <PieChart {...args} />
+}
diff --git a/packages/ui-kit/src/components/PieChart/PieChart.tsx b/packages/ui-kit/src/components/PieChart/PieChart.tsx
@@ -1,5 +1,6 @@
 import React from 'react'
-import { Chart as ChartJS, ChartConfiguration, Plugin } from 'chart.js/auto'
+import { Chart as ChartJS, ChartConfiguration, ChartTypeRegistry, Plugin, PluginOptionsByType } from 'chart.js/auto'
+import { _DeepPartialObject } from 'chart.js/dist/types/utils'
 import classnames from 'classnames'
 import componentStyles from './PieChart.module.scss'
 
@@ -147,26 +148,6 @@ export const PieChartComponent = React.forwardRef<HTMLDivElement, PieChartProps>
 
         const datasets = isDoughnut ? { cutout: '75%' } : { cutout: '0' }
 
-        if (chartRef.current) {
-          const chart = chartRef.current
-
-          chart.data.labels = labels
-          Object.assign(chart.data.datasets[0], {
-            type: variant,
-            data: values,
-            backgroundColor: chartColorPalette,
-            ...datasets
-          })
-
-          chart.options.plugins = {
-            ...chart.options.plugins,
-            ...customPlugins
-          }
-
-          chart.update()
-          return
-        }
-
         let config: ChartConfiguration<'pie' | 'doughnut'> = {
           ...chartConfig,
           type: variant,
@@ -211,6 +192,30 @@ export const PieChartComponent = React.forwardRef<HTMLDivElement, PieChartProps>
           config = chartConfigProps(config)
         }
 
+        if (chartRef.current) {
+          const customConfig = chartConfigProps?.(config)
+
+          const chart = chartRef.current
+
+          chart.data.labels = labels
+          Object.assign(chart.data.datasets[0], {
+            type: variant,
+            data: values,
+            backgroundColor: chartColorPalette,
+            ...datasets,
+            ...customConfig?.data.datasets[0]
+          })
+
+          chart.options.plugins = {
+            ...chart.options.plugins,
+            ...customPlugins,
+            ...(customConfig?.options?.plugins as _DeepPartialObject<PluginOptionsByType<keyof ChartTypeRegistry>>)
+          }
+
+          chart.update()
+          return
+        }
+
         chartRef.current = new ChartJS(canvasRef.current, config) as ChartJS
         canvasRef.current.style.borderRadius = '0px'
       },

diff --git a/packages/ui-kit/src/components/TimeSeries/TimeSeries.stories.tsx b/packages/ui-kit/src/components/TimeSeries/TimeSeries.stories.tsx
@@ -1,6 +1,6 @@
 import type { Meta, StoryObj } from '@storybook/react'
 import { Chart } from 'chart.js'
-import React from 'react'
+import React, { useState } from 'react'
 import axiosInstance from '../../../../../app/storybook/src/axios'
 import {
   quotedStringRegex,
@@ -9,6 +9,8 @@ import {
   TimeSeriesGranularity,
   useStorybookAccessToken
 } from '../../helpers'
+import { ThemeTokenProps } from '../../themes'
+import { DefaultThemes, ThemeProvider } from '../ThemeProvider'
 import { TimeSeries as TimeSeriesSource, TimeSeriesComponent } from './TimeSeries'
 
 const meta: Meta<typeof TimeSeriesComponent> = {
@@ -324,3 +326,42 @@ export const ErrorStory: Story = {
   },
   render: (args) => <TimeSeries {...args} />
 }
+
+export const ThemeStory: Story = {
+  name: 'Theme',
+  args: {
+    variant: 'bar',
+    card: true,
+    ...dataset
+  },
+  decorators: [
+    (Story) => {
+      const [baseTheme, setBaseTheme] = useState<DefaultThemes>('lightTheme')
+
+      const lightColors: ThemeTokenProps = {
+        accent: '#3d3d3d',
+        accentHover: '#3d3d3dc6'
+      }
+
+      const darkColors: ThemeTokenProps = {
+        accent: '#adadad',
+        accentHover: '#ffffffc6'
+      }
+
+      const theme = baseTheme === 'darkTheme' ? darkColors : lightColors
+
+      return (
+        <ThemeProvider baseTheme={baseTheme} theme={theme}>
+          <div style={{ margin: '10px', display: 'flex', gap: '8px' }}>
+            <button type="button" onClick={() => setBaseTheme(baseTheme === 'darkTheme' ? 'lightTheme' : 'darkTheme')}>
+              Switch theme
+            </button>
+            <span>{baseTheme}</span>
+          </div>
+          <Story />
+        </ThemeProvider>
+      )
+    }
+  ],
+  render: (args) => <TimeSeries {...args} />
+}