Skip to content

Commit 63a1d7f

Browse files
lisalupilisalupi
committed
fix: nivo types
1 parent 140e0b9 commit 63a1d7f

10 files changed

Lines changed: 42 additions & 35 deletions

File tree

‎packages/ui/package.json‎

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -78,6 +78,7 @@
7878
"@nivo/line": "0.99.0",
7979
"@nivo/pie": "0.99.0",
8080
"@nivo/scales": "0.99.0",
81+
"@nivo/theming": "0.99.0",
8182
"@nivo/treemap": "0.99.0",
8283
"@scaleway/fuzzy-search": "1.0.2",
8384
"@scaleway/random-name": "5.1.4",

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

Lines changed: 5 additions & 5 deletions
Original file line numberDiff line numberDiff line change
@@ -9,7 +9,7 @@ exports[`barChart > renders correctly with data 1`] = `
99
style="height: 537px;"
1010
>
1111
<div
12-
style="width: 100%; height: 100%;"
12+
style="overflow: visible; height: 0px; width: 0px;"
1313
/>
1414
</div>
1515
</div>
@@ -25,7 +25,7 @@ exports[`barChart > renders correctly with data transformer 1`] = `
2525
style="height: 537px;"
2626
>
2727
<div
28-
style="width: 100%; height: 100%;"
28+
style="overflow: visible; height: 0px; width: 0px;"
2929
/>
3030
</div>
3131
</div>
@@ -41,7 +41,7 @@ exports[`barChart > renders correctly with multiple series 1`] = `
4141
style="height: 537px;"
4242
>
4343
<div
44-
style="width: 100%; height: 100%;"
44+
style="overflow: visible; height: 0px; width: 0px;"
4545
/>
4646
</div>
4747
</div>
@@ -57,7 +57,7 @@ exports[`barChart > renders correctly with negative values 1`] = `
5757
style="height: 537px;"
5858
>
5959
<div
60-
style="width: 100%; height: 100%;"
60+
style="overflow: visible; height: 0px; width: 0px;"
6161
/>
6262
</div>
6363
</div>
@@ -73,7 +73,7 @@ exports[`barChart > renders correctly without data 1`] = `
7373
style="height: 537px;"
7474
>
7575
<div
76-
style="width: 100%; height: 100%;"
76+
style="overflow: visible; height: 0px; width: 0px;"
7777
/>
7878
</div>
7979
</div>

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

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -12,8 +12,8 @@ import { getAverage, getCurrent, getMax, getMin, getSelected } from './helpers'
1212
import { Cell } from './LegendCell'
1313
import { backgroundColorLegend, lineChartStyle } from './styles.css'
1414

15+
import type { Serie } from './helpers'
1516
import type { DatumValue } from '@nivo/core'
16-
import type { Serie } from '@nivo/line'
1717

1818
type Transformer = (value: DatumValue) => string
1919

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

Lines changed: 3 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -6,10 +6,10 @@ import { Text } from '../Text'
66

77
import { colorLine, lineChartStyle } from './styles.css'
88

9-
import type { Point } from '@nivo/line'
9+
import type { LineSeries, Point } from '@nivo/line'
1010

1111
type LineChartTooltipProps = {
12-
point: Point
12+
point: Point<LineSeries>
1313
xFormatted?: string
1414
yFormatted?: string
1515
}
@@ -24,7 +24,7 @@ export const LineChartTooltip = ({
2424
<span
2525
className={lineChartStyle.lineColorSquare}
2626
style={assignInlineVars({
27-
[colorLine]: point.serieColor,
27+
[colorLine]: point.seriesColor,
2828
})}
2929
/>
3030
</div>

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

Lines changed: 0 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -11,7 +11,6 @@ exports[`lineChart Tooltip > renders correctly 1`] = `
1111
<div>
1212
<span
1313
class="styles__8i9lug7"
14-
style="--_8i9lug0: #ff0000;"
1514
/>
1615
</div>
1716
<div>

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

Lines changed: 9 additions & 9 deletions
Original file line numberDiff line numberDiff line change
@@ -9,7 +9,7 @@ exports[`lineChart > renders correctly when data is async 1`] = `
99
style="height: 537px;"
1010
>
1111
<div
12-
style="width: 100%; height: 100%;"
12+
style="overflow: visible; height: 0px; width: 0px;"
1313
/>
1414
</div>
1515
<div
@@ -371,7 +371,7 @@ exports[`lineChart > renders correctly when legend is deselected 1`] = `
371371
style="height: 537px;"
372372
>
373373
<div
374-
style="width: 100%; height: 100%;"
374+
style="overflow: visible; height: 0px; width: 0px;"
375375
/>
376376
</div>
377377
<div
@@ -528,7 +528,7 @@ exports[`lineChart > renders correctly with data 1`] = `
528528
style="height: 537px;"
529529
>
530530
<div
531-
style="width: 100%; height: 100%;"
531+
style="overflow: visible; height: 0px; width: 0px;"
532532
/>
533533
</div>
534534
</div>
@@ -544,7 +544,7 @@ exports[`lineChart > renders correctly with data transformer 1`] = `
544544
style="height: 537px;"
545545
>
546546
<div
547-
style="width: 100%; height: 100%;"
547+
style="overflow: visible; height: 0px; width: 0px;"
548548
/>
549549
</div>
550550
</div>
@@ -560,7 +560,7 @@ exports[`lineChart > renders correctly with detailed legend 1`] = `
560560
style="height: 537px;"
561561
>
562562
<div
563-
style="width: 100%; height: 100%;"
563+
style="overflow: visible; height: 0px; width: 0px;"
564564
/>
565565
</div>
566566
<div
@@ -717,7 +717,7 @@ exports[`lineChart > renders correctly with multiple series 1`] = `
717717
style="height: 537px;"
718718
>
719719
<div
720-
style="width: 100%; height: 100%;"
720+
style="overflow: visible; height: 0px; width: 0px;"
721721
/>
722722
</div>
723723
<div
@@ -1082,7 +1082,7 @@ exports[`lineChart > renders correctly with point formatter 1`] = `
10821082
style="height: 537px;"
10831083
>
10841084
<div
1085-
style="width: 100%; height: 100%;"
1085+
style="overflow: visible; height: 0px; width: 0px;"
10861086
/>
10871087
</div>
10881088
</div>
@@ -1098,7 +1098,7 @@ exports[`lineChart > renders correctly with timeline data 1`] = `
10981098
style="height: 537px;"
10991099
>
11001100
<div
1101-
style="width: 100%; height: 100%;"
1101+
style="overflow: visible; height: 0px; width: 0px;"
11021102
/>
11031103
</div>
11041104
<div
@@ -1255,7 +1255,7 @@ exports[`lineChart > renders correctly without data 1`] = `
12551255
style="height: 537px;"
12561256
>
12571257
<div
1258-
style="width: 100%; height: 100%;"
1258+
style="overflow: visible; height: 0px; width: 0px;"
12591259
/>
12601260
</div>
12611261
</div>

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

Lines changed: 10 additions & 7 deletions
Original file line numberDiff line numberDiff line change
@@ -1,6 +1,7 @@
1-
import type { DatumValue, Serie } from '@nivo/line'
1+
import type { AllowedValue, LineSeries } from '@nivo/line'
2+
import type { ReactNode } from 'react'
23

3-
const parse = (data?: DatumValue | null): number => {
4+
const parse = (data?: AllowedValue): number => {
45
if (typeof data === 'number') {
56
return data || 0
67
}
@@ -14,13 +15,13 @@ const parse = (data?: DatumValue | null): number => {
1415
return 0
1516
}
1617

17-
export const getMin = (values: DatumValue[] = []): number =>
18+
export const getMin = (values: AllowedValue[] = []): number =>
1819
values.length > 0 ? Math.min(...values.map(data => parse(data))) : 0
1920

20-
export const getMax = (values: DatumValue[] = []): number =>
21+
export const getMax = (values: AllowedValue[] = []): number =>
2122
values.length > 0 ? Math.max(...values.map(data => parse(data))) : 0
2223

23-
export const getAverage = (values: DatumValue[] = []): number =>
24+
export const getAverage = (values: AllowedValue[] = []): number =>
2425
values.length > 0
2526
? Math.round(
2627
// oxlint-disable-next-line typescript/no-unnecessary-type-arguments needed here
@@ -30,7 +31,7 @@ export const getAverage = (values: DatumValue[] = []): number =>
3031
) / 100
3132
: 0
3233

33-
export const getMaxChartValue = (preppedData?: Serie[]): number => {
34+
export const getMaxChartValue = (preppedData?: LineSeries[]): number => {
3435
if (!preppedData?.length) {
3536
return 0
3637
}
@@ -42,7 +43,7 @@ export const getMaxChartValue = (preppedData?: Serie[]): number => {
4243
return Math.ceil(maximum + maximum * 0.1)
4344
}
4445

45-
export const getMinChartValue = (preppedData?: Serie[]): number => {
46+
export const getMinChartValue = (preppedData?: LineSeries[]): number => {
4647
if (!preppedData?.length) {
4748
return 0
4849
}
@@ -76,3 +77,5 @@ export const getSelected = (
7677

7778
return selected
7879
}
80+
81+
export type Serie = LineSeries & { [label: string]: ReactNode }

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

Lines changed: 9 additions & 8 deletions
Original file line numberDiff line numberDiff line change
@@ -11,8 +11,9 @@ import { CustomLegend } from './CustomLegend'
1111
import { getMaxChartValue, getMinChartValue } from './helpers'
1212
import { LineChartTooltip } from './Tooltip'
1313

14-
import type { DatumValue, Box as NivoBox, ValueFormat } from '@nivo/core'
15-
import type { LineSvgProps, Point, Serie } from '@nivo/line'
14+
import type { Serie } from './helpers'
15+
import type { Box as NivoBox, ValueFormat } from '@nivo/core'
16+
import type { LineSvgProps, Point, LineSeries, AllowedValue } from '@nivo/line'
1617
import type { ScaleSpec } from '@nivo/scales'
1718
import type { theme as UVTheme } from '@ultraviolet/themes'
1819
import type { ComponentProps, CSSProperties } from 'react'
@@ -25,7 +26,7 @@ type LineChartProps = {
2526
data?: Serie[]
2627
withLegend?: boolean
2728
tooltipFunction?: (props: {
28-
point: Point
29+
point: Point<LineSeries>
2930
}) => Partial<
3031
Pick<ComponentProps<typeof LineChartTooltip>, 'xFormatted' | 'yFormatted'>
3132
>
@@ -35,11 +36,11 @@ type LineChartProps = {
3536
ComponentProps<typeof CustomLegend>['axisTransformer']
3637
>
3738
>
38-
pointFormatters?: Partial<Record<'x' | 'y', ValueFormat<DatumValue>>>
39+
pointFormatters?: Partial<Record<'x' | 'y', ValueFormat<AllowedValue>>>
3940
tickValues?: Partial<
4041
Record<'bottom' | 'left' | 'right' | 'top', number | string>
4142
>
42-
chartProps?: Partial<LineSvgProps>
43+
chartProps?: Partial<LineSvgProps<LineSeries>>
4344
'data-testid'?: string
4445
style?: CSSProperties
4546
}
@@ -56,7 +57,7 @@ const DEFAULT_CHARTPROPS = {}
5657

5758
const createCustomTooltip =
5859
(tooltipFunction?: LineChartProps['tooltipFunction']) =>
59-
(props: { point: Point }) => {
60+
(props: { point: Point<LineSeries> }) => {
6061
const customProps = tooltipFunction ? tooltipFunction(props) : {}
6162

6263
return (
@@ -151,15 +152,15 @@ export const LineChart = ({
151152
max: getMaxChartValue(finalData),
152153
min: getMinChartValue(finalData),
153154
...yScale,
154-
} as LineSvgProps['yScale']
155+
} as LineSvgProps<LineSeries>['yScale']
155156
}
156157
{...chartProps}
157158
/>
158159
</div>
159160
{withLegend && (
160161
<CustomLegend
161162
axisTransformer={axisFormatters?.left}
162-
data={dataset.datasets}
163+
data={data}
163164
selected={selected ?? []}
164165
setSelected={setSelected}
165166
/>

‎packages/ui/src/helpers/nivoTheme.ts‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -1,4 +1,4 @@
1-
import type { Theme as NivoTheme } from '@nivo/core'
1+
import type { PartialTheme as NivoTheme } from '@nivo/theming'
22
import type { useTheme } from '@ultraviolet/themes'
33

44
// be aware that this theme is applied on all chart using nivo library, please check any changes you make here on all charts

‎pnpm-lock.yaml‎

Lines changed: 3 additions & 0 deletions
Some generated files are not rendered by default. Learn more about customizing how changed files appear on GitHub.

0 commit comments

Comments
 (0)