fix(deps): update nivo monorepo to v0.99.0

.changeset/renovate-21ac08c.md

@@ -0,0 +1,12 @@
+---
+'@ultraviolet/ui': patch
+---
+
+Updated dependency `@nivo/bar` to `0.99.0`.
+Updated dependency `@nivo/core` to `0.99.0`.
+Updated dependency `@nivo/line` to `0.99.0`.
+Updated dependency `@nivo/pie` to `0.99.0`.
+Updated dependency `@nivo/scales` to `0.99.0`.
+Updated dependency `@nivo/treemap` to `0.99.0`.
+
+`LineChart`: ⚠️ Breaking change: type of `point` in `tooltipFunction` has changed slightly: use `point.x` instead of `point.data.x` (and similarly `point.y` instead of `point.data.y`). `xFormatted` and `yFormatted` remain unchanged

packages/ui/package.json

@@ -73,12 +73,13 @@
     "watch:build": "vite build --config vite.config.ts --watch"
   },
   "dependencies": {
-    "@nivo/bar": "0.89.1",
-    "@nivo/core": "0.89.1",
-    "@nivo/line": "0.89.1",
-    "@nivo/pie": "0.89.1",
-    "@nivo/scales": "0.89.0",
-    "@nivo/treemap": "0.89.1",
+    "@nivo/bar": "0.99.0",
+    "@nivo/core": "0.99.0",
+    "@nivo/line": "0.99.0",
+    "@nivo/pie": "0.99.0",
+    "@nivo/scales": "0.99.0",
+    "@nivo/theming": "0.99.0",
+    "@nivo/treemap": "0.99.0",
     "@scaleway/fuzzy-search": "1.0.2",
     "@scaleway/random-name": "5.1.4",
     "@uiw/codemirror-extensions-langs": "4.25.9",

packages/ui/src/components/BarChart/__tests__/__snapshots__/index.test.tsx.snap

@@ -9,7 +9,7 @@ exports[`barChart > renders correctly with data 1`] = `
       style="height: 537px;"
     >
       <div
-        style="width: 100%; height: 100%;"
+        style="overflow: visible; height: 0px; width: 0px;"
       />
     </div>
   </div>
@@ -25,7 +25,7 @@ exports[`barChart > renders correctly with data transformer 1`] = `
       style="height: 537px;"
     >
       <div
-        style="width: 100%; height: 100%;"
+        style="overflow: visible; height: 0px; width: 0px;"
       />
     </div>
   </div>
@@ -41,7 +41,7 @@ exports[`barChart > renders correctly with multiple series 1`] = `
       style="height: 537px;"
     >
       <div
-        style="width: 100%; height: 100%;"
+        style="overflow: visible; height: 0px; width: 0px;"
       />
     </div>
   </div>
@@ -57,7 +57,7 @@ exports[`barChart > renders correctly with negative values 1`] = `
       style="height: 537px;"
     >
       <div
-        style="width: 100%; height: 100%;"
+        style="overflow: visible; height: 0px; width: 0px;"
       />
     </div>
   </div>
@@ -73,7 +73,7 @@ exports[`barChart > renders correctly without data 1`] = `
       style="height: 537px;"
     >
       <div
-        style="width: 100%; height: 100%;"
+        style="overflow: visible; height: 0px; width: 0px;"
       />
     </div>
   </div>

packages/ui/src/components/BarChart/index.tsx

@@ -34,7 +34,10 @@ type BarChartProps = {
   tooltipFunction?: (
     props: BarTooltipProps<BarDatum>,
   ) => ComponentProps<typeof BarChartTooltip>
-  chartProps?: Partial<BarSvgProps<BarDatum>>
+  chartProps?: Partial<BarSvgProps<BarDatum>> & {
+    minValue?: number
+    maxValue?: number
+  }
   'data-testid'?: string
   style?: CSSProperties
 }
@@ -109,6 +112,13 @@ export const BarChart = ({
         margin={margin}
         theme={getNivoTheme(theme)}
         tooltip={tooltip}
+        valueScale={
+          chartProps?.valueScale ?? {
+            type: 'linear',
+            min: chartProps?.minValue,
+            max: chartProps?.maxValue,
+          }
+        }
         {...chartProps}
       />
     </div>

packages/ui/src/components/LineChart/CustomLegend.tsx

@@ -12,8 +12,8 @@ import { getAverage, getCurrent, getMax, getMin, getSelected } from './helpers'
 import { Cell } from './LegendCell'
 import { backgroundColorLegend, lineChartStyle } from './styles.css'
 
+import type { Serie } from './helpers'
 import type { DatumValue } from '@nivo/core'
-import type { Serie } from '@nivo/line'
 
 type Transformer = (value: DatumValue) => string
 

packages/ui/src/components/LineChart/Tooltip.tsx

@@ -6,10 +6,10 @@ import { Text } from '../Text'
 
 import { colorLine, lineChartStyle } from './styles.css'
 
-import type { Point } from '@nivo/line'
+import type { LineSeries, Point } from '@nivo/line'
 
 type LineChartTooltipProps = {
-  point: Point
+  point: Point<LineSeries>
   xFormatted?: string
   yFormatted?: string
 }
@@ -24,7 +24,7 @@ export const LineChartTooltip = ({
       <span
         className={lineChartStyle.lineColorSquare}
         style={assignInlineVars({
-          [colorLine]: point.serieColor,
+          [colorLine]: point.seriesColor,
         })}
       />
     </div>

packages/ui/src/components/LineChart/__stories__/CustomTooltip.stories.tsx

@@ -7,7 +7,7 @@ export const CustomTooltip = Template.bind({})
 
 CustomTooltip.args = {
   tooltipFunction: ({ point }) => ({
-    xFormatted: `Date: ${format(new Date(point.data.x), 'MM-y')}`,
+    xFormatted: `Date: ${format(new Date(point.x), 'MM-y')}`,
     yFormatted: `Valeur: ${point.data.yFormatted}`,
   }),
   axisFormatters: {

packages/ui/src/components/LineChart/__stories__/FormattedAxisAndPoints.stories.tsx

@@ -12,7 +12,7 @@ FormattedAxisAndPoints.args = {
   },
   data: lineChartHoursData,
   pointFormatters: {
-    x: value => format(new Date(value), 'dd-MM-y hh:mm'),
-    y: value => `${value.toString()} liters`,
+    x: value => format(new Date(value ?? ''), 'dd-MM-y hh:mm'),
+    y: value => `${value?.toString()} liters`,
   },
 }

packages/ui/src/components/LineChart/__tests__/Tooltip.test.tsx

@@ -3,7 +3,7 @@ import { describe, test } from 'vitest'
 
 import { LineChartTooltip } from '../Tooltip'
 
-import type { Point } from '@nivo/line'
+import type { LineSeries, Point } from '@nivo/line'
 
 describe('lineChart Tooltip', () => {
   test('renders correctly ', () =>
@@ -13,7 +13,7 @@ describe('lineChart Tooltip', () => {
           {
             data: { xFormatted: '05-05-2022', yFormatted: '15 kb' },
             serieColor: '#ff0000',
-          } as Point
+          } as unknown as Point<LineSeries>
         }
       />,
     ))

packages/ui/src/components/LineChart/__tests__/__snapshots__/Tooltip.test.tsx.snap

@@ -11,7 +11,6 @@ exports[`lineChart Tooltip > renders correctly  1`] = `
       <div>
         <span
           class="styles__8i9lug7"
-          style="--_8i9lug0: #ff0000;"
         />
       </div>
       <div>

packages/ui/src/components/LineChart/__tests__/__snapshots__/index.test.tsx.snap

@@ -9,7 +9,7 @@ exports[`lineChart > renders correctly when data is async 1`] = `
       style="height: 537px;"
     >
       <div
-        style="width: 100%; height: 100%;"
+        style="overflow: visible; height: 0px; width: 0px;"
       />
     </div>
     <div
@@ -371,7 +371,7 @@ exports[`lineChart > renders correctly when legend is deselected 1`] = `
       style="height: 537px;"
     >
       <div
-        style="width: 100%; height: 100%;"
+        style="overflow: visible; height: 0px; width: 0px;"
       />
     </div>
     <div
@@ -528,7 +528,7 @@ exports[`lineChart > renders correctly with data 1`] = `
       style="height: 537px;"
     >
       <div
-        style="width: 100%; height: 100%;"
+        style="overflow: visible; height: 0px; width: 0px;"
       />
     </div>
   </div>
@@ -544,7 +544,7 @@ exports[`lineChart > renders correctly with data transformer 1`] = `
       style="height: 537px;"
     >
       <div
-        style="width: 100%; height: 100%;"
+        style="overflow: visible; height: 0px; width: 0px;"
       />
     </div>
   </div>
@@ -560,7 +560,7 @@ exports[`lineChart > renders correctly with detailed legend 1`] = `
       style="height: 537px;"
     >
       <div
-        style="width: 100%; height: 100%;"
+        style="overflow: visible; height: 0px; width: 0px;"
       />
     </div>
     <div
@@ -717,7 +717,7 @@ exports[`lineChart > renders correctly with multiple series 1`] = `
       style="height: 537px;"
     >
       <div
-        style="width: 100%; height: 100%;"
+        style="overflow: visible; height: 0px; width: 0px;"
       />
     </div>
     <div
@@ -1082,7 +1082,7 @@ exports[`lineChart > renders correctly with point formatter 1`] = `
       style="height: 537px;"
     >
       <div
-        style="width: 100%; height: 100%;"
+        style="overflow: visible; height: 0px; width: 0px;"
       />
     </div>
   </div>
@@ -1098,7 +1098,7 @@ exports[`lineChart > renders correctly with timeline data 1`] = `
       style="height: 537px;"
     >
       <div
-        style="width: 100%; height: 100%;"
+        style="overflow: visible; height: 0px; width: 0px;"
       />
     </div>
     <div
@@ -1255,7 +1255,7 @@ exports[`lineChart > renders correctly without data 1`] = `
       style="height: 537px;"
     >
       <div
-        style="width: 100%; height: 100%;"
+        style="overflow: visible; height: 0px; width: 0px;"
       />
     </div>
   </div>

packages/ui/src/components/LineChart/__tests__/index.test.tsx

@@ -53,7 +53,7 @@ describe('lineChart', () => {
       <LineChart
         data={lineChartData}
         pointFormatters={{
-          x: value => value.toString(),
+          x: value => value?.toString() ?? '',
           y: value => `${value as number} unit`,
         }}
         xScale={{ type: 'linear' }}

packages/ui/src/components/LineChart/helpers.ts

@@ -1,6 +1,6 @@
-import type { DatumValue, Serie } from '@nivo/line'
+import type { AllowedValue, LineSeries } from '@nivo/line'
 
-const parse = (data?: DatumValue | null): number => {
+const parse = (data?: AllowedValue): number => {
   if (typeof data === 'number') {
     return data || 0
   }
@@ -14,13 +14,13 @@ const parse = (data?: DatumValue | null): number => {
   return 0
 }
 
-export const getMin = (values: DatumValue[] = []): number =>
+export const getMin = (values: AllowedValue[] = []): number =>
   values.length > 0 ? Math.min(...values.map(data => parse(data))) : 0
 
-export const getMax = (values: DatumValue[] = []): number =>
+export const getMax = (values: AllowedValue[] = []): number =>
   values.length > 0 ? Math.max(...values.map(data => parse(data))) : 0
 
-export const getAverage = (values: DatumValue[] = []): number =>
+export const getAverage = (values: AllowedValue[] = []): number =>
   values.length > 0
     ? Math.round(
         // oxlint-disable-next-line typescript/no-unnecessary-type-arguments needed here
@@ -30,7 +30,7 @@ export const getAverage = (values: DatumValue[] = []): number =>
       ) / 100
     : 0
 
-export const getMaxChartValue = (preppedData?: Serie[]): number => {
+export const getMaxChartValue = (preppedData?: LineSeries[]): number => {
   if (!preppedData?.length) {
     return 0
   }
@@ -42,7 +42,7 @@ export const getMaxChartValue = (preppedData?: Serie[]): number => {
   return Math.ceil(maximum + maximum * 0.1)
 }
 
-export const getMinChartValue = (preppedData?: Serie[]): number => {
+export const getMinChartValue = (preppedData?: LineSeries[]): number => {
   if (!preppedData?.length) {
     return 0
   }
@@ -76,3 +76,8 @@ export const getSelected = (
 
   return selected
 }
+
+export type Serie = LineSeries & {
+  label?: string
+  [key: string]: unknown
+}

packages/ui/src/components/LineChart/index.tsx

@@ -11,8 +11,9 @@ import { CustomLegend } from './CustomLegend'
 import { getMaxChartValue, getMinChartValue } from './helpers'
 import { LineChartTooltip } from './Tooltip'
 
-import type { DatumValue, Box as NivoBox, ValueFormat } from '@nivo/core'
-import type { LineSvgProps, Point, Serie } from '@nivo/line'
+import type { Serie } from './helpers'
+import type { Box as NivoBox, ValueFormat } from '@nivo/core'
+import type { LineSvgProps, Point, LineSeries, AllowedValue } from '@nivo/line'
 import type { ScaleSpec } from '@nivo/scales'
 import type { theme as UVTheme } from '@ultraviolet/themes'
 import type { ComponentProps, CSSProperties } from 'react'
@@ -25,7 +26,7 @@ type LineChartProps = {
   data?: Serie[]
   withLegend?: boolean
   tooltipFunction?: (props: {
-    point: Point
+    point: Point<LineSeries>
   }) => Partial<
     Pick<ComponentProps<typeof LineChartTooltip>, 'xFormatted' | 'yFormatted'>
   >
@@ -35,11 +36,11 @@ type LineChartProps = {
       ComponentProps<typeof CustomLegend>['axisTransformer']
     >
   >
-  pointFormatters?: Partial<Record<'x' | 'y', ValueFormat<DatumValue>>>
+  pointFormatters?: Partial<Record<'x' | 'y', ValueFormat<AllowedValue>>>
   tickValues?: Partial<
     Record<'bottom' | 'left' | 'right' | 'top', number | string>
   >
-  chartProps?: Partial<LineSvgProps>
+  chartProps?: Partial<LineSvgProps<LineSeries>>
   'data-testid'?: string
   style?: CSSProperties
 }
@@ -56,7 +57,7 @@ const DEFAULT_CHARTPROPS = {}
 
 const createCustomTooltip =
   (tooltipFunction?: LineChartProps['tooltipFunction']) =>
-  (props: { point: Point }) => {
+  (props: { point: Point<LineSeries> }) => {
     const customProps = tooltipFunction ? tooltipFunction(props) : {}
 
     return (
@@ -93,7 +94,7 @@ export const LineChart = ({
     datasets: data?.map(d => ({
       data: d.data,
       id: d.id,
-      label: d?.['label'] as string,
+      label: d?.['label'],
     })),
   }
 
@@ -151,15 +152,15 @@ export const LineChart = ({
               max: getMaxChartValue(finalData),
               min: getMinChartValue(finalData),
               ...yScale,
-            } as LineSvgProps['yScale']
+            } as LineSvgProps<LineSeries>['yScale']
           }
           {...chartProps}
         />
       </div>
       {withLegend && (
         <CustomLegend
           axisTransformer={axisFormatters?.left}
-          data={dataset.datasets}
+          data={data}
           selected={selected ?? []}
           setSelected={setSelected}
         />