Add type yAxis prop to allow logarithmic scale (#82)

* fix: add yAxis prop to allow logarithmic scale * docs: add type to timeseries's readme * refactor: switch type to scale * refactor: use chart.js DeepPartial * refactor: use if statement instead of object indexing
propeldata · Jun 15, 2023 · 19efbdc · 19efbdc
1 parent 2751f40
commit 19efbdc
Show file tree

Hide file tree

Showing 6 changed files with 105 additions and 65 deletions.
diff --git a/app/examples/react-18/src/components/TimeSeriesStaticTest.jsx b/app/examples/react-18/src/components/TimeSeriesStaticTest.jsx
@@ -31,28 +31,15 @@ const mockData1 = {
 
 const mockData2 = {
   labels: [
-    '01/02',
-    '02/02',
-    '03/02',
-    '04/02',
-    '05/02',
-    '06/02',
-    '07/02',
-    '08/02',
-    '09/02',
-    '10/02',
-    '11/02',
-    '12/02',
-    '13/02',
-    '14/02',
-    '15/02',
-    '16/02',
-    '17/02',
-    '18/02',
-    '19/02',
-    '20/02'
+    '2023-05-11T00:00:00.000Z',
+    '2023-05-12T00:00:00.000Z',
+    '2023-05-13T00:00:00.000Z',
+    '2023-05-14T00:00:00.000Z',
+    '2023-05-15T00:00:00.000Z',
+    '2023-05-16T00:00:00.000Z',
+    '2023-05-17T00:00:00.000Z'
   ],
-  values: [809, 984, 673, 500, 522, 471, 872, 578, 123, 619, 38, 326, 128, 11, 844, 58, 576, 28, 663, 189]
+  values: [0, 200, 300, 400, 79187691, 248679, 131034]
 }
 
 export function TimeSeriesStaticTest() {
@@ -81,7 +68,11 @@ export function TimeSeriesStaticTest() {
         styles={{
           bar: { backgroundColor: barsColor },
           canvas: { backgroundColor: '#f5f5f5' },
-          point: { style: pointStyle }
+          point: { style: pointStyle },
+          yAxis: {
+            beginAtZero: true,
+            scale: 'logarithmic'
+          }
         }}
       />
       <div className="flex items-center gap-2">

diff --git a/packages/react/time-series/README.md b/packages/react/time-series/README.md
@@ -188,6 +188,7 @@ The `styles` prop allows you to customize the appearance of the chart. It accept
 
 ## yAxis Styles
 
-| Name        | Type      | Default | Description                                     |
-| ----------- | --------- | ------- | ----------------------------------------------- |
-| beginAtZero | `boolean` | `false` | Whether the y axis should begin at zero or not. |
+| Name        | Type                          | Default    | Description                                     |
+| ----------- | ----------------------------- | ---------- | ----------------------------------------------- |
+| beginAtZero | `boolean`                     | `false`    | Whether the y axis should begin at zero or not. |
+| scale       | `"linear"` or `"logarithmic"` | `"linear"` | The scale of the y axis.                        |
diff --git a/packages/react/time-series/src/TimeSeries.tsx b/packages/react/time-series/src/TimeSeries.tsx
@@ -21,7 +21,8 @@ import {
   PointElement,
   Colors,
   TimeSeriesScale,
-  LinearScale
+  LinearScale,
+  LogarithmicScale
 } from 'chart.js'
 import 'chartjs-adapter-date-fns'
 
@@ -31,9 +32,9 @@ import {
   useSetupDefaultStyles,
   getDefaultGranularity,
   formatLabels,
-  getGranularityBasedUnit,
   updateChartStyles,
-  updateChartConfig
+  updateChartConfig,
+  getScales
 } from './utils'
 import { ErrorFallback, ErrorFallbackProps } from './ErrorFallback'
 import { Loader } from './Loader'
@@ -44,6 +45,7 @@ import { Loader } from './Loader'
  * we reduce bundle weight
  */
 ChartJS.register(
+  LogarithmicScale,
   Tooltip,
   Colors,
   PointElement,
@@ -155,7 +157,6 @@ export function TimeSeries(props: TimeSeriesProps) {
       const labels = data.labels || []
       const values = data.values || []
 
-      const hideGridLines = styles?.canvas?.hideGridLines || defaultStyles.canvas.hideGridLines
       const backgroundColor = styles?.[variant]?.backgroundColor || defaultStyles[variant].backgroundColor
       const borderColor = styles?.[variant]?.borderColor || defaultStyles[variant].borderColor
 
@@ -178,42 +179,14 @@ export function TimeSeries(props: TimeSeriesProps) {
         ]
       }
 
-      const scalesBase = {
-        x: {
-          display: !hideGridLines,
-          grid: {
-            drawOnChartArea: false
-          },
-          beginAtZero: true
-        },
-        y: {
-          display: !hideGridLines,
-          beginAtZero: styles?.yAxis?.beginAtZero || defaultStyles.yAxis.beginAtZero,
-          grid: { drawOnChartArea: true }
-        }
-      }
-
-      const customFormatScales = {
-        ...scalesBase
-      }
-
-      const autoFormatScales = {
-        ...scalesBase,
-        x: {
-          ...scalesBase.x,
-          type: 'timeseries',
-          time: {
-            unit: getGranularityBasedUnit(granularity)
-          }
-        }
-      }
+      const scales = getScales({ granularity, isFormatted, isStatic, styles })
 
       if (chartRef.current) {
         updateChartConfig({
           chart: chartRef.current,
           labels,
           values,
-          scales: isFormatted || isStatic ? customFormatScales : autoFormatScales,
+          scales,
           variant,
           customPlugins
         })
@@ -234,7 +207,7 @@ export function TimeSeries(props: TimeSeriesProps) {
           layout: {
             padding: styles?.canvas?.padding || defaultStyles.canvas.padding
           },
-          scales: isFormatted || isStatic ? customFormatScales : autoFormatScales
+          scales
         },
         plugins
       })

diff --git a/packages/react/time-series/src/defaults.ts b/packages/react/time-series/src/defaults.ts
@@ -54,7 +54,8 @@ export const defaultStyles = {
     hoverBackgroundColor: '#000'
   },
   yAxis: {
-    beginAtZero: false
+    beginAtZero: false,
+    scale: 'linear'
   }
 }
 

diff --git a/packages/react/time-series/src/types.ts b/packages/react/time-series/src/types.ts
@@ -1,3 +1,7 @@
+import type { ScaleOptionsByType } from 'chart.js'
+
+export type ChartScales = Partial<{ [key: string]: ScaleOptionsByType<'linear' | 'logarithmic'> }>
+
 export type ChartVariant = 'bar' | 'line'
 
 export type TimeSeriesData = {
@@ -78,5 +82,6 @@ export type Styles = {
   }
   yAxis?: {
     beginAtZero?: boolean
+    scale?: 'linear' | 'logarithmic'
   }
 }
diff --git a/packages/react/time-series/src/utils.ts b/packages/react/time-series/src/utils.ts
@@ -8,12 +8,13 @@ import {
   PointStyle,
   ScriptableAndArray,
   ScriptableContext,
-  ScaleOptions,
-  TimeUnit
+  TimeUnit,
+  ScaleOptionsByType
 } from 'chart.js'
+import type { DeepPartial } from 'chart.js/dist/types/utils'
 import { Maybe, RelativeTimeRange, TimeRangeInput, TimeSeriesGranularity } from '@propeldata/ui-kit-graphql'
 
-import { ChartPlugins, ChartVariant, Styles } from './types'
+import { ChartPlugins, ChartVariant, Styles, ChartScales } from './types'
 import { defaultStyles } from './defaults'
 
 export function cssvar(name: string) {
@@ -200,7 +201,7 @@ interface UpdateChartConfig {
   chart: Chart
   values: number[]
   labels: string[]
-  scales: Record<string, Partial<ScaleOptions>>
+  scales: ChartScales
   variant: ChartVariant
   customPlugins: ChartPlugins
 }
@@ -217,3 +218,71 @@ export function updateChartConfig(options: UpdateChartConfig) {
 
   chart.options.plugins = customPlugins
 }
+
+interface GetScalesOptions {
+  styles?: Styles
+  granularity: TimeSeriesGranularity | null
+  isFormatted: boolean
+  isStatic: boolean
+}
+
+export function getScales(options: GetScalesOptions) {
+  const { styles, granularity, isFormatted, isStatic } = options
+  const scale = styles?.yAxis?.scale || defaultStyles.yAxis.scale
+
+  const hideGridLines = styles?.canvas?.hideGridLines || defaultStyles.canvas.hideGridLines
+
+  const scalesBase = {
+    x: {
+      display: !hideGridLines,
+      grid: {
+        drawOnChartArea: false
+      },
+      beginAtZero: true
+    },
+    y: {
+      display: !hideGridLines,
+      beginAtZero: styles?.yAxis?.beginAtZero || defaultStyles.yAxis.beginAtZero,
+      grid: { drawOnChartArea: true }
+    }
+  }
+
+  const customFormatScales = {
+    ...scalesBase
+  }
+
+  const autoFormatScales = {
+    ...scalesBase,
+    x: {
+      ...scalesBase.x,
+      type: 'timeseries',
+      time: {
+        unit: getGranularityBasedUnit(granularity)
+      }
+    }
+  }
+
+  const currentFormatScales = isFormatted || isStatic ? customFormatScales : autoFormatScales
+
+  if (scale === 'linear') {
+    const linearScales: DeepPartial<{ [key: string]: ScaleOptionsByType<'linear'> }> = {
+      ...currentFormatScales,
+      y: {
+        ...currentFormatScales.y,
+        type: 'linear'
+      }
+    }
+
+    return linearScales
+  }
+
+  const logarithmicScales: DeepPartial<{ [key: string]: ScaleOptionsByType<'logarithmic'> }> = {
+    ...(isFormatted || isStatic ? customFormatScales : autoFormatScales),
+    y: {
+      ...currentFormatScales.y,
+      type: 'logarithmic'
+    }
+  }
+
+  return logarithmicScales
+}