fix(marimekko): use readonly arrays for props as the library does not…

… modify them (#2493)
plouc · Mar 5, 2024 · 0ab8f73 · 0ab8f73
1 parent a90a6cc
commit 0ab8f73
Show file tree

Hide file tree

Showing 4 changed files with 16 additions and 14 deletions.
diff --git a/packages/marimekko/src/Bars.tsx b/packages/marimekko/src/Bars.tsx
@@ -5,7 +5,7 @@ import { Bar } from './Bar'
 
 interface BarsProps<RawDatum> extends MouseEventHandlers<RawDatum, SVGRectElement> {
     isInteractive: boolean
-    bars: BarDatum<RawDatum>[]
+    bars: readonly BarDatum<RawDatum>[]
     tooltip: CommonProps<RawDatum>['tooltip']
 }
 

diff --git a/packages/marimekko/src/hooks.ts b/packages/marimekko/src/hooks.ts
@@ -38,7 +38,7 @@ export const useDataDimensions = <RawDatum>(rawDimensions: DataProps<RawDatum>['
     }, [rawDimensions])
 
 export const useStack = <RawDatum>(
-    dimensionIds: string[],
+    dimensionIds: readonly string[],
     dimensions: Record<string, (datum: RawDatum) => number>,
     offset: OffsetId
 ) =>
@@ -186,6 +186,7 @@ export const useComputedData = <RawDatum>({
                 height: layout === 'vertical' ? 0 : thickness,
                 dimensions: [],
             }
+            const dimensions: DimensionDatum<RawDatum>[] = []
 
             const allPositions: number[] = []
             let totalSize = 0
@@ -231,7 +232,7 @@ export const useComputedData = <RawDatum>({
 
                     dimensionDatum.color = getColor(dimensionDatum)
 
-                    computedDatum.dimensions.push(dimensionDatum)
+                    dimensions.push(dimensionDatum)
                 }
 
                 if (layout === 'vertical') {
@@ -242,6 +243,7 @@ export const useComputedData = <RawDatum>({
                     computedDatum.width = totalSize
                 }
             })
+            computedDatum.dimensions = dimensions
 
             computedData.push(computedDatum)
         })

diff --git a/packages/marimekko/src/types.ts b/packages/marimekko/src/types.ts
@@ -19,10 +19,10 @@ export type DatumFormattedValue = string | number
 export type DatumPropertyAccessor<RawDatum, T> = (datum: RawDatum) => T
 
 export interface DataProps<RawDatum> {
-    data: RawDatum[]
+    data: readonly RawDatum[]
     id: string | number | DatumPropertyAccessor<RawDatum, DatumId>
     value: string | number | DatumPropertyAccessor<RawDatum, DatumValue>
-    dimensions: {
+    dimensions: readonly {
         id: string
         value: string | number | DatumPropertyAccessor<RawDatum, DatumValue>
     }[]
@@ -53,7 +53,7 @@ export interface ComputedDatum<RawDatum> extends NormalizedDatum<RawDatum> {
     y: number
     width: number
     height: number
-    dimensions: DimensionDatum<RawDatum>[]
+    dimensions: readonly DimensionDatum<RawDatum>[]
 }
 
 export interface BarDatum<RawDatum> extends DimensionDatum<RawDatum> {
@@ -68,8 +68,8 @@ export type LabelAccessorFunction<RawDatum> = (datum: ComputedDatum<RawDatum>) =
 export type LayerId = 'grid' | 'axes' | 'bars' | 'legends'
 
 export interface CustomLayerProps<RawDatum> {
-    data: ComputedDatum<RawDatum>[]
-    bars: BarDatum<RawDatum>[]
+    data: readonly ComputedDatum<RawDatum>[]
+    bars: readonly BarDatum<RawDatum>[]
     thicknessScale: ScaleLinear<number>
     dimensionsScale: ScaleLinear<number>
 }
@@ -119,9 +119,9 @@ export type CommonProps<RawDatum> = {
     axisBottom?: AxisProps | null
     axisLeft?: AxisProps | null
     enableGridX: boolean
-    gridXValues?: number[]
+    gridXValues?: readonly number[]
     enableGridY: boolean
-    gridYValues?: number[]
+    gridYValues?: readonly number[]
 
     // colors, theme and border
     colors: OrdinalColorScaleConfig<Omit<DimensionDatum<RawDatum>, 'color' | 'fill'>>
@@ -140,7 +140,7 @@ export type CommonProps<RawDatum> = {
     isInteractive: boolean
     tooltip: BarTooltipType<RawDatum>
 
-    legends: LegendProps[]
+    legends: readonly LegendProps[]
 
     role: string
 }
@@ -163,5 +163,5 @@ export type SvgProps<RawDatum> = DataProps<RawDatum> &
     MotionProps &
     SvgDefsAndFill<BarDatum<RawDatum>> &
     MouseEventHandlers<RawDatum, SVGRectElement> & {
-        layers?: Layer<RawDatum>[]
+        layers?: readonly Layer<RawDatum>[]
     }
diff --git a/packages/scales/src/types.ts b/packages/scales/src/types.ts
@@ -142,7 +142,7 @@ export type SerieAxis<Axis extends ScaleAxis, Value extends ScaleValue> = {
 }[]
 
 export type ComputedSerieAxis<Value extends ScaleValue> = {
-    all: Value[]
+    all: readonly Value[]
     min: Value
     minStacked?: Value
     max: Value
@@ -159,4 +159,4 @@ export type TicksSpec<Value extends ScaleValue> =
     // for example: every 2 weeks
     | string
     // override scale ticks with custom explicit values
-    | Value[]
+    | readonly Value[]