feat(waffle-grid): add support for standard chart axes

plouc · Dec 13, 2021 · 0e08f9c · 0e08f9c
1 parent 9a92803
commit 0e08f9c
Show file tree

Hide file tree

Showing 9 changed files with 287 additions and 98 deletions.
diff --git a/packages/axes/src/components/Axes.tsx b/packages/axes/src/components/Axes.tsx
@@ -8,6 +8,8 @@ export const Axes = memo(
     <X extends ScaleValue, Y extends ScaleValue>({
         xScale,
         yScale,
+        x = 0,
+        y = 0,
         width,
         height,
         top,
@@ -17,6 +19,8 @@ export const Axes = memo(
     }: {
         xScale: AnyScale
         yScale: AnyScale
+        x?: number
+        y?: number
         width: number
         height: number
         top?: AxisProps<X> | null
@@ -44,8 +48,8 @@ export const Axes = memo(
                             key={position}
                             {...axis}
                             axis={isXAxis ? 'x' : 'y'}
-                            x={position === 'right' ? width : 0}
-                            y={position === 'bottom' ? height : 0}
+                            x={position === 'right' ? x + width : x}
+                            y={position === 'bottom' ? y + height : y}
                             scale={isXAxis ? xScale : yScale}
                             length={isXAxis ? width : height}
                             ticksPosition={ticksPosition}

diff --git a/packages/waffle-grid/package.json b/packages/waffle-grid/package.json
@@ -32,6 +32,7 @@
     "@nivo/axes": "0.74.0",
     "@nivo/colors": "0.74.0",
     "@nivo/legends": "0.74.0",
+    "@nivo/scales": "0.74.0",
     "@nivo/tooltip": "0.74.0",
     "@react-spring/web": "9.3.1"
   },

diff --git a/packages/waffle-grid/src/WaffleGrid.tsx b/packages/waffle-grid/src/WaffleGrid.tsx
@@ -1,7 +1,7 @@
 import { ReactNode, Fragment, createElement, useMemo } from 'react'
 import { Container, useDimensions, SvgWrapper } from '@nivo/core'
+import { Axes } from '@nivo/axes'
 import { WaffleGridAllCells } from './WaffleGridAllCells'
-import { WaffleGridAxes } from './WaffleGridAxes'
 import { WaffleGridGrid } from './WaffleGridGrid'
 import { WaffleGridSvgProps, WaffleGridLayerId, WaffleGridCustomLayerProps } from './types'
 import { svgDefaultProps } from './defaults'
@@ -28,6 +28,10 @@ export const InnerWaffleGrid = ({
     valueCellColor = svgDefaultProps.valueCellColor,
     enableGridX = svgDefaultProps.enableGridX,
     enableGridY = svgDefaultProps.enableGridY,
+    axisTop,
+    axisRight,
+    axisBottom,
+    axisLeft,
     layers = svgDefaultProps.layers,
     blankCellComponent = svgDefaultProps.blankCellComponent,
     blankCellsMotion = {},
@@ -77,7 +81,22 @@ export const InnerWaffleGrid = ({
     }
 
     if (layers.includes('axes')) {
-        layerById.axes = <WaffleGridAxes key="axes" xAxis={xAxis} yAxis={yAxis} />
+        // layerById.axes = <WaffleGridAxes key="axes" xAxis={xAxis} yAxis={yAxis} />
+        layerById.axes = (
+            <Axes
+                key="axes"
+                xScale={xAxis.scale}
+                yScale={yAxis.scale}
+                x={yAxis.x1}
+                y={xAxis.y1}
+                width={yAxis.x2 - yAxis.x1}
+                height={xAxis.y2 - xAxis.y1}
+                top={axisTop}
+                right={axisRight}
+                bottom={axisBottom}
+                left={axisLeft}
+            />
+        )
     }
 
     if (layers.includes('cells')) {

diff --git a/packages/waffle-grid/src/defaults.ts b/packages/waffle-grid/src/defaults.ts
@@ -13,6 +13,10 @@ export const commonDefaultProps = {
 
     enableGridX: true,
     enableGridY: true,
+    axisTop: null,
+    axisRight: null,
+    axisBottom: {},
+    axisLeft: {},
 
     layers: ['grid', 'axes', 'cells'] as WaffleGridLayerId[],