feat(marimekko): computed dimension now contains the original input dimension (#2681)

Author: Linschlager

packages/marimekko/src/hooks.ts

@@ -146,7 +146,7 @@ export const useThicknessScale = <RawDatum>({
 export const useComputedData = <RawDatum>({
     data,
     stacked,
-    dimensionIds,
+    rawDimensions,
     valueFormat,
     thicknessScale,
     dimensionsScale,
@@ -157,7 +157,7 @@ export const useComputedData = <RawDatum>({
 }: {
     data: NormalizedDatum<RawDatum>[]
     stacked: Series<RawDatum, string>[]
-    dimensionIds: string[]
+    rawDimensions: DataProps<RawDatum>['dimensions']
     valueFormat: DataProps<RawDatum>['valueFormat']
     thicknessScale: ScaleLinear<number>
     dimensionsScale: ScaleLinear<number>
@@ -193,12 +193,13 @@ export const useComputedData = <RawDatum>({
 
             position += thickness + innerPadding
 
-            dimensionIds.forEach(dimensionId => {
-                const dimension = stacked.find(stack => stack.key === dimensionId)
+            rawDimensions.forEach(rawDimension => {
+                const dimension = stacked.find(stack => stack.key === rawDimension.id)
                 if (dimension) {
                     const dimensionPoint = dimension[datum.index]
                     const dimensionDatum: DimensionDatum<RawDatum> = {
-                        id: dimensionId,
+                        id: rawDimension.id,
+                        dimension: rawDimension,
                         datum: computedDatum,
                         value: dimensionPoint[1] - dimensionPoint[0],
                         formattedValue: formatValue(dimensionPoint[1] - dimensionPoint[0]),
@@ -252,7 +253,7 @@ export const useComputedData = <RawDatum>({
     }, [
         data,
         stacked,
-        dimensionIds,
+        rawDimensions,
         thicknessScale,
         dimensionsScale,
         layout,
@@ -335,7 +336,7 @@ export const useMarimekko = <RawDatum>({
     const computedData = useComputedData<RawDatum>({
         data: normalizedData,
         stacked,
-        dimensionIds,
+        rawDimensions,
         valueFormat,
         thicknessScale,
         dimensionsScale,

packages/marimekko/src/types.ts

@@ -18,14 +18,16 @@ export type DatumFormattedValue = string | number
 
 export type DatumPropertyAccessor<RawDatum, T> = (datum: RawDatum) => T
 
+export type RawDimensionDatum<RawDatum> = {
+    id: string
+    value: string | number | DatumPropertyAccessor<RawDatum, DatumValue>
+}
+
 export interface DataProps<RawDatum> {
     data: readonly RawDatum[]
     id: string | number | DatumPropertyAccessor<RawDatum, DatumId>
     value: string | number | DatumPropertyAccessor<RawDatum, DatumValue>
-    dimensions: readonly {
-        id: string
-        value: string | number | DatumPropertyAccessor<RawDatum, DatumValue>
-    }[]
+    dimensions: readonly RawDimensionDatum<RawDatum>[]
     valueFormat?: ValueFormat<number>
 }
 
@@ -45,6 +47,7 @@ export interface DimensionDatum<RawDatum> {
     y: number
     width: number
     height: number
+    dimension: RawDimensionDatum<RawDatum>
     datum: ComputedDatum<RawDatum>
 }
 

storybook/stories/marimekko/Marimekko.stories.tsx

@@ -118,6 +118,41 @@ export const Diverging: Story = {
         )
     },
 }
+export const CustomColors: Story = {
+    render: () => {
+        const data = generateData()
+        const dimensions = [
+            {
+                id: 'disagree strongly',
+                value: 'stronglyDisagree',
+                color: '#d63a3a',
+            },
+            {
+                id: 'disagree',
+                value: 'disagree',
+                color: '#d6883a',
+            },
+            {
+                id: 'agree',
+                value: 'agree',
+                color: '#ecce00',
+            },
+            {
+                id: 'agree strongly',
+                value: 'stronglyAgree',
+                color: '#007c3e',
+            },
+        ]
+        return (
+            <Marimekko
+                {...commonProps}
+                data={data}
+                dimensions={dimensions}
+                colors={{ datum: 'dimension.color' }}
+            />
+        )
+    },
+}
 
 const ShadowsLayer = ({ data }) => (
     <>