feat(heatmap): use @nivo/axes package for axes

packages/axes/src/canvas.js

@@ -80,3 +80,44 @@ export const renderAxisToCanvas = (
 
     ctx.restore()
 }
+
+const positions = ['top', 'right', 'bottom', 'left']
+
+export const renderAxesToCanvas = (
+    ctx,
+    {
+        xScale,
+        yScale,
+        width,
+        height,
+
+        top,
+        right,
+        bottom,
+        left,
+
+        theme,
+    }
+) => {
+    const axes = { top, right, bottom, left }
+
+    positions.forEach(position => {
+        const axis = axes[position]
+
+        if (!axis) return null
+
+        const isXAxis = position === 'top' || position === 'bottom'
+        const ticksPosition = position === 'top' || position === 'left' ? 'before' : 'after'
+
+        renderAxisToCanvas(ctx, {
+            ...axis,
+            axis: isXAxis ? 'x' : 'y',
+            x: position === 'right' ? width : 0,
+            y: position === 'bottom' ? height : 0,
+            scale: isXAxis ? xScale : yScale,
+            length: isXAxis ? width : height,
+            ticksPosition,
+            theme,
+        })
+    })
+}

packages/heatmap/index.d.ts

@@ -1,5 +1,6 @@
 import * as React from 'react'
 import { Dimensions, Box, MotionProps, ColorProps, GetColor, Theme } from '@nivo/core'
+import { Axis } from '@nivo/axes'
 
 declare module '@nivo/heatmap' {
     export interface HeatMapDatum {
@@ -28,25 +29,22 @@ declare module '@nivo/heatmap' {
         margin: Box
         padding: number
 
-        // cells
         cellShape: 'rect' | 'circle' | React.StatelessComponent<any>
         cellOpacity: number
         cellBorderWidth: number
         cellBorderColor: string | GetColor<HeatMapDatumWithColor>
 
-        // axes & grid
         axisTop: Axis
         axisRight: Axis
         axisBottom: Axis
         axisLeft: Axis
+
         enableGridX: boolean
         enableGridY: boolean
 
-        // labels
         enableLabels: boolean
         labelTextColor: string | GetColor<HeatMapDatumWithColor>
 
-        // interactivity
         isInteractive: boolean
         hoverTarget: 'cell' | 'row' | 'column' | 'rowColumn'
         cellHoverOpacity: number
@@ -68,16 +66,6 @@ declare module '@nivo/heatmap' {
         opacity: number
     }
 
-    export type Axis = Partial<{
-        orient: string
-        legend: string
-        tickSize: number
-        tickPadding: number
-        tickRotation: number
-        legendOffset: number
-        legendPosition: string
-    }>
-
     export type HeatMapSvgProps = HeatMapData
         & HeatMapCommonProps
         & MotionProps

packages/heatmap/package.json

@@ -23,6 +23,7 @@
     "umd/"
   ],
   "dependencies": {
+    "@nivo/axes": "0.50.0",
     "@nivo/core": "0.50.0",
     "d3-scale": "^2.1.2",
     "lodash": "^4.17.4",

packages/heatmap/src/HeatMap.js

@@ -9,9 +9,8 @@
 import React, { Component } from 'react'
 import partial from 'lodash/partial'
 import { TransitionMotion } from 'react-motion'
-import { colorMotionSpring, getInterpolatedColor } from '@nivo/core'
-import { Container, SvgWrapper } from '@nivo/core'
-import { Grid, Axes } from '@nivo/core'
+import { colorMotionSpring, getInterpolatedColor, Container, SvgWrapper, Grid } from '@nivo/core'
+import { Axes } from '@nivo/axes'
 import setDisplayName from 'recompose/setDisplayName'
 import { HeatMapPropTypes } from './props'
 import computeNodes from './computeNodes'

packages/heatmap/src/HeatMapCanvas.js

@@ -8,12 +8,11 @@
  */
 import React, { Component } from 'react'
 import partial from 'lodash/partial'
-import { renderAxesToCanvas } from '@nivo/core'
-import { getRelativeCursor, isCursorInRect } from '@nivo/core'
+import { Container, getRelativeCursor, isCursorInRect } from '@nivo/core'
+import { renderAxesToCanvas } from '@nivo/axes'
 import { renderRect, renderCircle } from './canvas'
 import computeNodes from './computeNodes'
 import HeatMapCellTooltip from './HeatMapCellTooltip'
-import { Container } from '@nivo/core'
 import { HeatMapPropTypes } from './props'
 import enhance from './enhance'
 
@@ -56,6 +55,11 @@ class HeatMapCanvas extends Component {
             xScale,
             yScale,
 
+            axisTop,
+            axisRight,
+            axisBottom,
+            axisLeft,
+
             cellShape,
 
             theme,
@@ -84,10 +88,10 @@ class HeatMapCanvas extends Component {
             yScale,
             width: width - offsetX * 2,
             height: height - offsetY * 2,
-            top: props.axisTop,
-            right: props.axisRight,
-            bottom: props.axisBottom,
-            left: props.axisLeft,
+            top: axisTop,
+            right: axisRight,
+            bottom: axisBottom,
+            left: axisLeft,
             theme,
         })
 

packages/heatmap/src/props.js

@@ -8,9 +8,9 @@
  */
 import PropTypes from 'prop-types'
 import { quantizeColorScalePropType, noop } from '@nivo/core'
+import { axisPropType } from '@nivo/axes'
 
 export const HeatMapPropTypes = {
-    // data
     data: PropTypes.arrayOf(PropTypes.object).isRequired,
     indexBy: PropTypes.oneOfType([PropTypes.string, PropTypes.func]).isRequired,
     getIndex: PropTypes.func.isRequired, // computed
@@ -23,33 +23,29 @@ export const HeatMapPropTypes = {
     sizeVariation: PropTypes.number.isRequired,
     padding: PropTypes.number.isRequired,
 
-    // cells
     cellShape: PropTypes.oneOfType([PropTypes.oneOf(['rect', 'circle']), PropTypes.func])
         .isRequired,
     cellOpacity: PropTypes.number.isRequired,
     cellBorderWidth: PropTypes.number.isRequired,
     cellBorderColor: PropTypes.oneOfType([PropTypes.string, PropTypes.func]).isRequired,
     getCellBorderColor: PropTypes.func.isRequired, // computed
 
-    // axes & grid
-    axisTop: PropTypes.object,
-    axisRight: PropTypes.object,
-    axisBottom: PropTypes.object,
-    axisLeft: PropTypes.object,
+    axisTop: axisPropType,
+    axisRight: axisPropType,
+    axisBottom: axisPropType,
+    axisLeft: axisPropType,
+
     enableGridX: PropTypes.bool.isRequired,
     enableGridY: PropTypes.bool.isRequired,
 
-    // labels
     enableLabels: PropTypes.bool.isRequired,
     labelTextColor: PropTypes.oneOfType([PropTypes.string, PropTypes.func]).isRequired,
     getLabelTextColor: PropTypes.func.isRequired, // computed
 
-    // theming
     colors: quantizeColorScalePropType.isRequired,
     colorScale: PropTypes.func.isRequired, // computed
     nanColor: PropTypes.string,
 
-    // interactivity
     isInteractive: PropTypes.bool,
     onClick: PropTypes.func.isRequired,
     hoverTarget: PropTypes.oneOf(['cell', 'row', 'column', 'rowColumn']).isRequired,
@@ -58,7 +54,6 @@ export const HeatMapPropTypes = {
     tooltipFormat: PropTypes.oneOfType([PropTypes.func, PropTypes.string]),
     tooltip: PropTypes.func,
 
-    // canvas specific
     pixelRatio: PropTypes.number.isRequired,
 }
 

website/src/components/charts/heatmap/HeatMap.js

@@ -60,7 +60,7 @@ export default class HeatMap extends Component {
                 tickPadding: 5,
                 tickRotation: 0,
                 legend: 'country',
-                legendPosition: 'center',
+                legendPosition: 'middle',
                 legendOffset: 0,
             },
             axisBottom: {
@@ -70,7 +70,7 @@ export default class HeatMap extends Component {
                 tickPadding: 5,
                 tickRotation: 0,
                 legend: 'country',
-                legendPosition: 'center',
+                legendPosition: 'middle',
                 legendOffset: 36,
             },
             axisLeft: {
@@ -80,7 +80,7 @@ export default class HeatMap extends Component {
                 tickPadding: 5,
                 tickRotation: 0,
                 legend: 'country',
-                legendPosition: 'center',
+                legendPosition: 'middle',
                 legendOffset: -40,
             },
 

website/src/components/charts/heatmap/HeatMapAPI.js

@@ -66,7 +66,7 @@ export default class HeatMapAPI extends Component {
                         tickPadding: 5,
                         tickRotation: 0,
                         legend: 'country',
-                        legendPosition: 'center',
+                        legendPosition: 'middle',
                         legendOffset: 0,
                     },
                     axisBottom: {
@@ -76,7 +76,7 @@ export default class HeatMapAPI extends Component {
                         tickPadding: 5,
                         tickRotation: 0,
                         legend: 'country',
-                        legendPosition: 'center',
+                        legendPosition: 'middle',
                         legendOffset: 36,
                     },
                     axisLeft: {
@@ -86,7 +86,7 @@ export default class HeatMapAPI extends Component {
                         tickPadding: 5,
                         tickRotation: 0,
                         legend: 'country',
-                        legendPosition: 'center',
+                        legendPosition: 'middle',
                         legendOffset: -40,
                     },
 

website/src/components/charts/heatmap/HeatMapCanvas.js

@@ -60,7 +60,7 @@ export default class HeatMap extends Component {
                 tickPadding: 5,
                 tickRotation: 0,
                 legend: 'country',
-                legendPosition: 'center',
+                legendPosition: 'middle',
                 legendOffset: 0,
             },
             axisBottom: {
@@ -70,7 +70,7 @@ export default class HeatMap extends Component {
                 tickPadding: 5,
                 tickRotation: -90,
                 legend: 'country',
-                legendPosition: 'center',
+                legendPosition: 'middle',
                 legendOffset: 36,
             },
             axisLeft: {
@@ -80,7 +80,7 @@ export default class HeatMap extends Component {
                 tickPadding: 5,
                 tickRotation: 0,
                 legend: 'country',
-                legendPosition: 'center',
+                legendPosition: 'middle',
                 legendOffset: -40,
             },