fix(data-components): fix chart updating logic

packages/ui-kit/src/components/Counter/Counter.types.ts

@@ -1,12 +1,8 @@
 import type { DataComponentProps, QueryProps } from '../shared.types'
-import type { ThemeComponentProps } from '../../themes'
 
 export type CounterQueryProps = QueryProps
 
-export interface CounterProps
-  extends ThemeComponentProps,
-    Omit<React.ComponentProps<'span'>, 'style' | 'className'>,
-    DataComponentProps {
+export interface CounterProps extends DataComponentProps<'span'> {
   /** If passed, the component will ignore the built-in GraphQL operations */
   value?: string
 

packages/ui-kit/src/components/Leaderboard/Leaderboard.tsx

@@ -194,33 +194,11 @@ export const LeaderboardComponent = React.forwardRef<HTMLDivElement, Leaderboard
 
         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 = { ...config.options }
 
-          chart.options.scales = {
-            ...chart.options.scales,
-            ...config?.options?.scales
+          if (JSON.stringify(chart.data) !== JSON.stringify(config.data)) {
+            chart.data = { ...config.data }
           }
 
           chart.update()

packages/ui-kit/src/components/Leaderboard/Leaderboard.types.ts

@@ -1,5 +1,4 @@
 import type { ChartConfiguration } from 'chart.js'
-import { ThemeComponentProps } from 'src/themes'
 import { DimensionInput, LeaderboardLabels, Sort } from '../../helpers'
 import type { DataComponentProps, QueryProps } from '../shared.types'
 
@@ -49,7 +48,7 @@ export type LeaderboardChartProps = {
   labelPosition?: 'axis' | 'inside' | 'top'
 }
 
-export interface LeaderboardProps extends ThemeComponentProps, DataComponentProps {
+export interface LeaderboardProps extends DataComponentProps<'div'> {
   /** @deprecated This type is deprecated, use `errorFallbackProps` and `errorFallback` instead */
   error?: {
     title: string

packages/ui-kit/src/components/PieChart/PieChart.tsx

@@ -1,5 +1,4 @@
-import { Chart as ChartJS, ChartConfiguration, ChartTypeRegistry, Plugin, PluginOptionsByType } from 'chart.js/auto'
-import { _DeepPartialObject } from 'chart.js/dist/types/utils'
+import { Chart as ChartJS, ChartConfiguration, Plugin } from 'chart.js/auto'
 import classnames from 'classnames'
 import React from 'react'
 import {
@@ -15,7 +14,7 @@ import { Loader, LoaderProps } from '../Loader'
 import { useSetupTheme } from '../ThemeProvider'
 import { withContainer } from '../withContainer'
 import componentStyles from './PieChart.module.scss'
-import { PieChartData, PieChartProps } from './PieChart.types'
+import { PieChartData, PieChartProps, PieChartVariant } from './PieChart.types'
 import { emptyStatePlugin } from './plugins/empty'
 
 let idCounter = 0
@@ -55,7 +54,7 @@ export const PieChartComponent = React.forwardRef<HTMLDivElement, PieChartProps>
       loaderFallback: loaderFallbackComponent,
       errorFallback: errorFallbackComponent,
       emptyFallback: emptyFallbackComponent
-    } = useSetupTheme<'pie' | 'doughnut'>({
+    } = useSetupTheme<PieChartVariant>({
       componentContainer,
       baseTheme,
       loaderFallback,
@@ -148,7 +147,7 @@ export const PieChartComponent = React.forwardRef<HTMLDivElement, PieChartProps>
           return
         }
 
-        const customChartLabelsPlugin: Plugin<'pie' | 'doughnut'> = getCustomChartLabelsPlugin({
+        const customChartLabelsPlugin: Plugin<PieChartVariant> = getCustomChartLabelsPlugin({
           theme,
           hideTotal
         })
@@ -182,7 +181,7 @@ export const PieChartComponent = React.forwardRef<HTMLDivElement, PieChartProps>
 
         const datasets = isDoughnut ? { cutout: '75%' } : { cutout: '0' }
 
-        let config: ChartConfiguration<'pie' | 'doughnut'> = {
+        let config: ChartConfiguration<PieChartVariant> = {
           ...chartConfig,
           type: variant,
           data: {
@@ -223,27 +222,22 @@ export const PieChartComponent = React.forwardRef<HTMLDivElement, PieChartProps>
         }
 
         if (chartConfigProps) {
+          // @TODO: fix this complex type
+          // eslint-disable-next-line @typescript-eslint/ban-ts-comment
+          // @ts-ignore
           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>>)
+          // const newOptions =
+          // eslint-disable-next-line @typescript-eslint/ban-ts-comment
+          // @ts-ignore
+          chart.options = { ...config.options }
+
+          if (JSON.stringify(chart.data) !== JSON.stringify(config.data)) {
+            chart.data = { ...config.data }
           }
 
           chart.update()
@@ -432,4 +426,7 @@ export const PieChartComponent = React.forwardRef<HTMLDivElement, PieChartProps>
 
 PieChartComponent.displayName = 'PieChartComponent'
 
+// @TODO: fix this complex type
+// eslint-disable-next-line @typescript-eslint/ban-ts-comment
+// @ts-ignore
 export const PieChart = withContainer(PieChartComponent, ErrorFallback) as typeof PieChartComponent

packages/ui-kit/src/components/PieChart/PieChart.types.ts

@@ -1,9 +1,8 @@
 import type { ChartConfiguration } from 'chart.js'
 import { DimensionInput, Sort } from '../../helpers'
-import { ErrorFallbackProps } from '../ErrorFallback'
 import { DataComponentProps, QueryProps } from '../shared.types'
 
-type PieChartVariant = 'pie' | 'doughnut'
+export type PieChartVariant = 'pie' | 'doughnut'
 
 export type ChartProps = {
   /** Sets the position of the labels */
@@ -59,7 +58,13 @@ export interface PieChartQueryProps extends QueryProps {
   dimension?: DimensionInput
 }
 
-export interface PieChartProps extends ErrorFallbackProps, DataComponentProps {
+export interface PieChartProps extends DataComponentProps<'div'> {
+  /** @deprecated This type is deprecated, use `errorFallbackProps` and `errorFallback` instead */
+  error?: {
+    title: string
+    body: string
+  } | null
+
   /** The variant the chart will respond to, can be either `pie` or `doughnut`. */
   variant?: PieChartVariant
 

packages/ui-kit/src/components/SimpleFilter/SimpleFilter.types.ts

@@ -13,7 +13,8 @@ export interface SimpleFilterQueryProps extends Omit<QueryProps, 'metric' | 'fil
   maxValues?: number
 }
 
-export interface SimpleFilterProps extends Omit<DataComponentProps, 'card' | 'errorFallback' | 'emptyFallback'> {
+export interface SimpleFilterProps
+  extends Omit<DataComponentProps<'span'>, 'card' | 'errorFallback' | 'emptyFallback'> {
   /** Props that the autocomplete input will receive */
   autocompleteProps?: Omit<AutocompleteProps, 'options'>
 

packages/ui-kit/src/components/TimeSeries/TimeSeries.tsx

@@ -232,26 +232,11 @@ export const TimeSeriesComponent = React.forwardRef<HTMLDivElement, TimeSeriesPr
         if (chartRef.current) {
           const chart = chartRef.current
 
-          chart.data.labels = labels
-          chart.options.scales = {
-            ...chart.options.scales,
-            ...scales,
-            ...config?.options?.scales
-          }
-          chart.options.plugins = {
-            ...chart.options.plugins,
-            ...customPlugins,
-            ...config?.options?.plugins
-          }
+          chart.options = { ...config.options }
 
-          const dataset = chart.data.datasets[0]
-          dataset.data = values
-
-          Object.assign(chart.data.datasets[0], {
-            type: variant,
-            ...chart.data.datasets,
-            ...config?.data.datasets[0]
-          })
+          if (JSON.stringify(chart.data) !== JSON.stringify(config.data)) {
+            chart.data = { ...config.data }
+          }
 
           chart.update()
           return

packages/ui-kit/src/components/TimeSeries/TimeSeries.types.ts

@@ -1,6 +1,5 @@
 import type { ChartConfiguration, ScaleOptionsByType } from 'chart.js'
 import { DeepPartial } from 'chart.js/dist/types/utils'
-import { ThemeComponentProps } from 'src/themes'
 import { TimeSeriesGranularity, TimeSeriesLabels } from '../../helpers'
 import type { DataComponentProps, QueryProps } from '../shared.types'
 
@@ -29,7 +28,7 @@ export interface TimeSeriesChartProps {
   fillArea?: boolean
 }
 
-export interface TimeSeriesBaseProps extends ThemeComponentProps, DataComponentProps {
+export interface TimeSeriesBaseProps extends DataComponentProps<'div'> {
   /** @deprecated This type is deprecated, use `errorFallbackProps` and `errorFallback` instead */
   error?: {
     title: string

packages/ui-kit/src/components/shared.types.ts

@@ -1,3 +1,4 @@
+import { ThemeComponentProps } from 'src/themes'
 import { FilterInput, MetricInput, TimeRangeInput } from '../helpers'
 import type { ErrorFallback as ErrorFallbackComponent, ErrorFallbackProps } from './ErrorFallback'
 import type { Loader as LoaderComponent, LoaderProps } from './Loader'
@@ -50,16 +51,18 @@ export interface FallbackComponents {
   emptyFallback?: ({ theme }: { theme: ThemeStateProps }) => React.ReactElement
 }
 
-export interface DataComponentProps extends FallbackComponents {
-  /** @deprecated ~~Optional props that are used to configure the Loader component.~~ This type is deprecated, use `loaderFallback` instead */
-  loaderProps?: LoaderProps
+export type DataComponentProps<T extends keyof JSX.IntrinsicElements> = ThemeComponentProps &
+  Omit<React.ComponentPropsWithoutRef<T>, 'style' | 'className'> &
+  FallbackComponents & {
+    /** @deprecated ~~Optional props that are used to configure the Loader component.~~ This type is deprecated, use `loaderFallback` instead */
+    loaderProps?: LoaderProps
 
-  /** @deprecated ~~Optional props that are used to configure the ErrorFallback component.~~ This type is deprecated, use `errorFallback` instead */
-  errorFallbackProps?: ErrorFallbackProps
+    /** @deprecated ~~Optional props that are used to configure the ErrorFallback component.~~ This type is deprecated, use `errorFallback` instead */
+    errorFallbackProps?: ErrorFallbackProps
 
-  /** When true, wraps the component in a card */
-  card?: boolean
-}
+    /** When true, wraps the component in a card */
+    card?: boolean
+  }
 
 export interface QueryProps {
   /** Indicates specific time zone region */

packages/ui-kit/src/components/withContainer/withContainer.tsx

@@ -17,7 +17,7 @@ export const withContainer = <P extends object, C extends object>(
       <QueryClientProvider client={queryClient}>
         <ErrorBoundary fallback={<ErrorFallback {...errorFallbackProps} />}>
           {componentProps?.card ? (
-            <Card style={componentProps?.style} className={componentProps?.className}>
+            <Card>
               <WrappedComponent ref={ref} {...props} />
             </Card>
           ) : (

yarn.lock

@@ -10779,9 +10779,9 @@ __metadata:
   languageName: node
   linkType: hard
 
-"dashboard@workspace:^, dashboard@workspace:packages/examples/dashboard":
+"dashboard-example@workspace:^, dashboard-example@workspace:packages/examples/dashboard":
   version: 0.0.0-use.local
-  resolution: "dashboard@workspace:packages/examples/dashboard"
+  resolution: "dashboard-example@workspace:packages/examples/dashboard"
   dependencies:
     "@propeldata/ui-kit": "workspace:^"
     "@rollup/plugin-commonjs": ^25.0.7
@@ -20490,7 +20490,7 @@ __metadata:
   resolution: "react-16@workspace:app/examples/react-16"
   dependencies:
     "@propeldata/ui-kit": "workspace:^"
-    dashboard: "workspace:^"
+    dashboard-example: "workspace:^"
     react: ^16.8.0
     react-dom: ^16.8.0
     react-scripts: ^5.0.1
@@ -20501,7 +20501,7 @@ __metadata:
   version: 0.0.0-use.local
   resolution: "react-17@workspace:app/examples/react-17"
   dependencies:
-    dashboard: "workspace:^"
+    dashboard-example: "workspace:^"
     react: ^17.0.0
     react-dom: ^17.0.0
     react-scripts: ^5.0.1
@@ -20513,7 +20513,7 @@ __metadata:
   resolution: "react-18@workspace:app/examples/react-18"
   dependencies:
     "@propeldata/ui-kit": "workspace:^"
-    dashboard: "workspace:^"
+    dashboard-example: "workspace:^"
     react: ^18.2.0
     react-dom: ^18.2.0
     react-scripts: ^5.0.1