feat(waffle): add support for custom tooltip on all components

CONTRIBUTING.md

@@ -4,6 +4,8 @@
 - [development](#development)
   - [formatting](#formatting)
   - [linting](#linting)
+  - [screenshots](#screenshots)
+- [website](#website)
 - [deploy](#deploy)
 
 ## Setup
@@ -61,6 +63,31 @@ make package-lint-bar
 
 where `bar` is the name of the targeted nivo package.
 
+### Screenshots
+
+Each package comes with its own README, we use screenshots from the website
+in order to illustrate available package components.
+
+The script takes screenshots from the website using config defined in
+`conf/base.yaml`, if you added a new package, please update this config accordingly.
+
+To refresh the screenshots, please make sure the website is running on port `3000`,
+otherwise run:
+
+```
+make website
+```
+
+Then run the corresponding script:
+
+```
+make packages-screenshots
+```
+
+## Website
+
+The website is a CRA based application.
+
 ## Deploy
 
 The website is hosted on GitHub pages.

conf/base.yaml

@@ -1,90 +1,102 @@
 capture:
     baseUrl: http://localhost:3000
     pages:
-      - path: /#/bar
+      - path: /bar
         selector: .chart-tabs--chart
         output: ./packages/nivo-bar/doc/bar.png
 
-      - path: /#/bar/canvas
+      - path: /bar/canvas
         selector: .chart-tabs--chart
         output: ./packages/nivo-bar/doc/bar-canvas.png
 
-      - path: /#/calendar
+      - path: /calendar
         selector: .chart-tabs--chart
         output: ./packages/nivo-calendar/doc/calendar.png
 
-      - path: /#/chord
+      - path: /chord
         selector: .chart-tabs--chart
         output: ./packages/nivo-chord/doc/chord.png
 
-      - path: /#/chord/canvas
+      - path: /chord/canvas
         selector: .chart-tabs--chart
         output: ./packages/nivo-chord/doc/chord-canvas.png
 
-      - path: /#/bubble
+      - path: /bubble
         selector: .chart-tabs--chart
         output: ./packages/nivo-circle-packing/doc/bubble.png
 
-      - path: /#/bubble/html
+      - path: /bubble/html
         selector: .chart-tabs--chart
         output: ./packages/nivo-circle-packing/doc/bubble-html.png
 
-      - path: /#/bubble/canvas
+      - path: /bubble/canvas
         selector: .chart-tabs--chart
         output: ./packages/nivo-circle-packing/doc/bubble-canvas.png
 
-      - path: /#/heatmap
+      - path: /heatmap
         selector: .chart-tabs--chart
         output: ./packages/nivo-heatmap/doc/heatmap.png
 
-      - path: /#/heatmap/canvas
+      - path: /heatmap/canvas
         selector: .chart-tabs--chart
         output: ./packages/nivo-heatmap/doc/heatmap-canvas.png
 
-      - path: /#/line
+      - path: /line
         selector: .chart-tabs--chart
         output: ./packages/nivo-line/doc/line.png
 
-      - path: /#/pie
+      - path: /pie
         selector: .chart-tabs--chart
         output: ./packages/nivo-pie/doc/pie.png
 
-      - path: /#/radar
+      - path: /radar
         selector: .chart-tabs--chart
         output: ./packages/nivo-radar/doc/radar.png
 
-      - path: /#/sankey
+      - path: /sankey
         selector: .chart-tabs--chart
         output: ./packages/nivo-sankey/doc/sankey.png
 
-      - path: /#/scatterplot
+      - path: /scatterplot
         selector: .chart-tabs--chart
         output: ./packages/nivo-scatterplot/doc/scatterplot.png
 
-      - path: /#/scatterplot/canvas
+      - path: /scatterplot/canvas
         selector: .chart-tabs--chart
         output: ./packages/nivo-scatterplot/doc/scatterplot-canvas.png
 
-      - path: /#/stream
+      - path: /stream
         selector: .chart-tabs--chart
         output: ./packages/nivo-stream/doc/stream.png
 
-      - path: /#/sunburst
+      - path: /sunburst
         selector: .chart-tabs--chart
         output: ./packages/nivo-sunburst/doc/sunburst.png
 
-      - path: /#/treemap
+      - path: /treemap
         selector: .chart-tabs--chart
         output: ./packages/nivo-treemap/doc/treemap.png
 
-      - path: /#/treemap/html
+      - path: /treemap/html
         selector: .chart-tabs--chart
         output: ./packages/nivo-treemap/doc/treemap-html.png
 
-      - path: /#/treemap/canvas
+      - path: /treemap/canvas
         selector: .chart-tabs--chart
         output: ./packages/nivo-treemap/doc/treemap-canvas.png
 
-      - path: /#/voronoi
+      - path: /voronoi
         selector: .chart-tabs--chart
         output: ./packages/nivo-voronoi/doc/voronoi.png
+
+      - path: /waffle
+        selector: .chart-tabs--chart
+        output: ./packages/nivo-waffle/doc/waffle.png
+
+      - path: /waffle/html
+        selector: .chart-tabs--chart
+        output: ./packages/nivo-waffle/doc/waffle-html.png
+
+      - path: /waffle/canvas
+        selector: .chart-tabs--chart
+        output: ./packages/nivo-waffle/doc/waffle-canvas.png

packages/nivo-waffle/package.json

@@ -6,6 +6,7 @@
   "files": [
     "README.md",
     "index.js",
+    "index.d.ts",
     "cjs/"
   ],
   "dependencies": {

packages/nivo-waffle/src/Waffle.js

@@ -9,11 +9,12 @@
 import React, { Component, Fragment } from 'react'
 import partial from 'lodash/partial'
 import { TransitionMotion, spring } from 'react-motion'
-import { Container, SvgWrapper, BasicTooltip } from '@nivo/core'
+import { Container, SvgWrapper } from '@nivo/core'
 import { WafflePropTypes } from './props'
 import enhance from './enhance'
-import WaffleNode from './WaffleNode'
 import { applyDataToGrid } from './compute'
+import WaffleNode from './WaffleNode'
+import WaffleCellTooltip from './WaffleCellTooltip'
 
 export class Waffle extends Component {
     static propTypes = WafflePropTypes
@@ -26,18 +27,15 @@ export class Waffle extends Component {
         if (!cell.data) return
 
         showTooltip(
-            <BasicTooltip
-                id={cell.data.label}
-                value={cell.data.value}
-                enableChip={true}
+            <WaffleCellTooltip
+                position={cell.position}
+                row={cell.row}
+                column={cell.column}
                 color={cell.color}
+                data={cell.data}
                 theme={theme}
-                format={tooltipFormat}
-                renderContent={
-                    typeof tooltip === 'function'
-                        ? tooltip.bind(null, { color: cell.color, ...cell.data })
-                        : null
-                }
+                tooltipFormat={tooltipFormat}
+                tooltip={tooltip}
             />,
             event
         )
@@ -127,6 +125,7 @@ export class Waffle extends Component {
                                                     x={cell.x}
                                                     y={cell.y}
                                                     color={cell.color}
+                                                    fill={cell.data && cell.data.fill}
                                                     opacity={cell.data ? 1 : emptyOpacity}
                                                     borderWidth={borderWidth}
                                                     borderColor={getBorderColor(cell)}
@@ -154,6 +153,7 @@ export class Waffle extends Component {
                                         x={cell.x}
                                         y={cell.y}
                                         color={cell.color}
+                                        fill={cell.data && cell.data.fill}
                                         opacity={cell.data ? 1 : emptyOpacity}
                                         borderWidth={borderWidth}
                                         borderColor={getBorderColor(cell)}

packages/nivo-waffle/src/WaffleCanvas.js

@@ -11,8 +11,8 @@ import range from 'lodash/range'
 import { Container } from '@nivo/core'
 import enhance from './enhance'
 import { WafflePropTypes } from './props'
-import { computeGrid } from './compute'
 import { isCursorInRect, getRelativeCursor } from '@nivo/core'
+import WaffleCellTooltip from './WaffleCellTooltip'
 
 const findCellUnderCursor = (cells, cellSize, origin, margin, x, y) =>
     cells.find(cell =>
@@ -43,8 +43,6 @@ class WaffleCanvas extends Component {
 
             // dimensions
             margin,
-            width,
-            height,
             outerWidth,
             outerHeight,
 
@@ -97,9 +95,41 @@ class WaffleCanvas extends Component {
     }
 
     handleMouseHover = (showTooltip, hideTooltip) => event => {
-        const { isInteractive, margin, theme } = this.props
+        const {
+            isInteractive,
+            margin,
+            theme,
+            cells,
+            cellSize,
+            origin,
+            tooltipFormat,
+            tooltip,
+        } = this.props
+
+        if (!isInteractive || !cells) return
+
+        const [x, y] = getRelativeCursor(this.surface, event)
+        const cell = findCellUnderCursor(cells, cellSize, origin, margin, x, y)
 
-        if (!isInteractive) return
+        if (cell !== undefined) {
+            if (!cell.data) {
+                hideTooltip()
+            } else {
+                showTooltip(
+                    <WaffleCellTooltip
+                        position={cell.position}
+                        row={cell.row}
+                        column={cell.column}
+                        color={cell.color}
+                        data={cell.data}
+                        theme={theme}
+                        tooltipFormat={tooltipFormat}
+                        tooltip={tooltip}
+                    />,
+                    event
+                )
+            }
+        }
     }
 
     handleMouseLeave = hideTooltip => () => {
@@ -112,7 +142,6 @@ class WaffleCanvas extends Component {
         if (!isInteractive || !cells) return
 
         const [x, y] = getRelativeCursor(this.surface, event)
-
         const cell = findCellUnderCursor(cells, cellSize, origin, margin, x, y)
         if (cell !== undefined) onClick(cell, event)
     }

packages/nivo-waffle/src/WaffleCellTooltip.js

@@ -0,0 +1,56 @@
+/*
+ * This file is part of the nivo project.
+ *
+ * Copyright 2016-present, Raphaël Benitte.
+ *
+ * For the full copyright and license information, please view the LICENSE
+ * file that was distributed with this source code.
+ */
+import React from 'react'
+import PropTypes from 'prop-types'
+import { BasicTooltip } from '@nivo/core'
+
+const WaffleCellTooltip = ({
+    position,
+    row,
+    column,
+    color,
+    data,
+    theme,
+    tooltipFormat,
+    tooltip,
+}) => (
+    <BasicTooltip
+        id={data.label}
+        value={data.value}
+        enableChip={true}
+        color={color}
+        theme={theme}
+        format={tooltipFormat}
+        renderContent={
+            typeof tooltip === 'function'
+                ? tooltip.bind(null, {
+                      position,
+                      row,
+                      column,
+                      color,
+                      ...data,
+                  })
+                : null
+        }
+    />
+)
+
+WaffleCellTooltip.displayName = 'WaffleCellTooltip'
+WaffleCellTooltip.propTypes = {
+    position: PropTypes.number.isRequired,
+    row: PropTypes.number.isRequired,
+    column: PropTypes.number.isRequired,
+    color: PropTypes.string.isRequired,
+    data: PropTypes.object.isRequired,
+    theme: PropTypes.object.isRequired,
+    tooltipFormat: PropTypes.oneOfType([PropTypes.func, PropTypes.string]),
+    tooltip: PropTypes.func,
+}
+
+export default WaffleCellTooltip