feat(website): add package to tag list

packages/geo/README.md

@@ -24,4 +24,4 @@
 
 [documentation](http://nivo.rocks/choropleth/canvas)
 
-![ChoroplethCanvas](./doc/choropleth-canvas.png)
+![ChoroplethCanvas](./doc/choropleth-canvas.png)

packages/geo/src/ChoroplethTooltip.js

@@ -11,6 +11,8 @@ import PropTypes from 'prop-types'
 import { BasicTooltip } from '@nivo/core'
 
 const ChoroplethTooltip = memo(({ feature }) => {
+    if (feature.data === undefined) return null
+
     return <BasicTooltip id={feature.id} color={feature.color} enableChip={true} />
 })
 

website/src/components/charts/bar/Bar.js

@@ -193,7 +193,7 @@ export default class Bar extends Component {
             { pkg: '@nivo/bar', defaults: BarDefaultProps }
         )
 
-        const header = <ChartHeader chartClass="Bar" tags={['basic', 'isomorphic', 'api']} />
+        const header = <ChartHeader chartClass="Bar" tags={['@nivo/bar', 'svg', 'isomorphic']} />
 
         const description = (
             <div className="chart-description">

website/src/components/charts/bar/BarCanvas.js

@@ -137,7 +137,7 @@ export default class BarCanvas extends Component {
             { pkg: '@nivo/bar' }
         )
 
-        const header = <ChartHeader chartClass="BarCanvas" tags={['bar', 'canvas']} />
+        const header = <ChartHeader chartClass="BarCanvas" tags={['@nivo/bar', 'canvas']} />
 
         const description = (
             <div className="chart-description">

website/src/components/charts/bubble/Bubble.js

@@ -94,7 +94,10 @@ export default class Bubble extends Component {
         })
 
         const header = (
-            <ChartHeader chartClass="Bubble" tags={['hierarchy', 'svg', 'isomorphic', 'api']} />
+            <ChartHeader
+                chartClass="Bubble"
+                tags={['@nivo/circle-packing', 'hierarchy', 'svg', 'isomorphic']}
+            />
         )
 
         const description = (

website/src/components/charts/bubble/BubbleCanvas.js

@@ -98,7 +98,12 @@ export default class BubbleCanvas extends Component {
             defaults: BubbleCanvasDefaultProps,
         })
 
-        const header = <ChartHeader chartClass="BubbleCanvas" tags={['hierarchy', 'canvas']} />
+        const header = (
+            <ChartHeader
+                chartClass="BubbleCanvas"
+                tags={['@nivo/circle-packing', 'hierarchy', 'canvas']}
+            />
+        )
 
         const description = (
             <div className="chart-description">

website/src/components/charts/bubble/BubbleHtml.js

@@ -81,7 +81,10 @@ export default class BubbleHtml extends Component {
         })
 
         const header = (
-            <ChartHeader chartClass="BubbleHtml" tags={['hierarchy', 'html', 'isomorphic']} />
+            <ChartHeader
+                chartClass="BubbleHtml"
+                tags={['@nivo/circle-packing', 'hierarchy', 'html', 'isomorphic']}
+            />
         )
 
         const description = (

website/src/components/charts/bullet/Bullet.js

@@ -100,7 +100,9 @@ export default class Bullet extends Component {
             defaults: BulletDefaultProps,
         })
 
-        const header = <ChartHeader chartClass="Bullet" tags={['isomorphic']} />
+        const header = (
+            <ChartHeader chartClass="Bullet" tags={['@nivo/bullet', 'svg', 'isomorphic']} />
+        )
 
         const description = (
             <div className="chart-description">

website/src/components/charts/calendar/Calendar.js

@@ -100,7 +100,9 @@ const Calendar = ({ data }) => {
         }
     )
 
-    const header = <ChartHeader chartClass="Calendar" tags={['calendar', 'svg', 'isomorphic']} />
+    const header = (
+        <ChartHeader chartClass="Calendar" tags={['@nivo/calendar', 'svg', 'isomorphic']} />
+    )
 
     const description = (
         <div className="chart-description">

website/src/components/charts/calendar/CalendarCanvas.js

@@ -105,7 +105,7 @@ const CalendarCanvas = ({ data }) => {
         }
     )
 
-    const header = <ChartHeader chartClass="CalendarCanvas" tags={['calendar', 'canvas']} />
+    const header = <ChartHeader chartClass="CalendarCanvas" tags={['@nivo/calendar', 'canvas']} />
 
     const description = (
         <div className="chart-description">

website/src/components/charts/chord/Chord.js

@@ -126,7 +126,12 @@ export default class Chord extends Component {
             }
         )
 
-        const header = <ChartHeader chartClass="Chord" tags={['relational', 'isomorphic', 'api']} />
+        const header = (
+            <ChartHeader
+                chartClass="Chord"
+                tags={['@nivo/chord', 'relational', 'svg', 'isomorphic']}
+            />
+        )
 
         const description = (
             <div className="chart-description">

website/src/components/charts/chord/ChordCanvas.js

@@ -104,7 +104,7 @@ export default class ChordCanvas extends Component {
         )
 
         const header = (
-            <ChartHeader chartClass="ChordCanvas" tags={['relational', 'canvas', 'experimental']} />
+            <ChartHeader chartClass="ChordCanvas" tags={['@nivo/chord', 'relational', 'canvas']} />
         )
 
         const description = (

website/src/components/charts/geo/Choropleth.js

@@ -34,7 +34,7 @@ const initialSettings = {
     },
 
     colors: 'YlGnBu',
-    unknownColor: '#ffffff',
+    unknownColor: '#152538',
 
     projectionType: 'mercator',
     projectionScale: 100,
@@ -75,6 +75,7 @@ const Choropleth = () => {
     const code = generateCode(
         'ResponsiveChoropleth',
         {
+            features: [],
             ...mappedSettings,
             tooltip: mappedSettings.tooltip ? Tooltip : undefined,
         },
@@ -85,7 +86,7 @@ const Choropleth = () => {
     )
 
     const header = (
-        <ChartHeader chartClass="Choropleth" tags={['geo', 'map', 'svg', 'isomorphic']} />
+        <ChartHeader chartClass="Choropleth" tags={['@nivo/geo', 'map', 'svg', 'isomorphic']} />
     )
 
     const description = (
@@ -96,8 +97,8 @@ const Choropleth = () => {
                 component.
             </p>
             <p className="description">
-                Using this component requires some knowledge about the <code>d3-geo</code>
-                library, projections, geoJSON… please have a loot at the{' '}
+                Using this component requires some knowledge about the <code>d3-geo</code> library,
+                projections, geoJSON… please have a loot at the{' '}
                 <a href="https://github.com/d3/d3-geo" target="_blank" rel="noopener noreferrer">
                     official d3 documentation
                 </a>{' '}

website/src/components/charts/geo/ChoroplethCanvas.js

@@ -34,7 +34,7 @@ const initialSettings = {
     },
 
     colors: 'PiYG',
-    unknownColor: '#ffffff',
+    unknownColor: '#101b42',
 
     projectionType: 'mercator',
     projectionScale: 100,
@@ -74,6 +74,7 @@ const ChoroplethCanvas = () => {
     const code = generateCode(
         'ResponsiveChoroplethCanvas',
         {
+            features: [],
             ...mappedSettings,
             tooltip: mappedSettings.tooltip ? Tooltip : undefined,
         },
@@ -83,7 +84,9 @@ const ChoroplethCanvas = () => {
         }
     )
 
-    const header = <ChartHeader chartClass="ChoroplethCanvas" tags={['geo', 'map', 'canvas']} />
+    const header = (
+        <ChartHeader chartClass="ChoroplethCanvas" tags={['@nivo/geo', 'map', 'canvas']} />
+    )
 
     const description = (
         <div className="chart-description">

website/src/components/charts/geo/GeoMap.js

@@ -64,6 +64,7 @@ const GeoMap = () => {
     const code = generateCode(
         'ResponsiveGeoMap',
         {
+            features: [],
             ...settings,
         },
         {
@@ -72,7 +73,9 @@ const GeoMap = () => {
         }
     )
 
-    const header = <ChartHeader chartClass="GeoMap" tags={['geo', 'map', 'svg', 'isomorphic']} />
+    const header = (
+        <ChartHeader chartClass="GeoMap" tags={['@nivo/geo', 'map', 'svg', 'isomorphic']} />
+    )
 
     const description = (
         <div className="chart-description">
@@ -82,8 +85,8 @@ const GeoMap = () => {
                 maps such as the <Link to="/choropleth">Choropleth</Link>.
             </p>
             <p className="description">
-                Using this component requires some knowledge about the <code>d3-geo</code>
-                library, projections, geoJSON… please have a loot at the{' '}
+                Using this component requires some knowledge about the <code>d3-geo</code> library,
+                projections, geoJSON… please have a loot at the{' '}
                 <a href="https://github.com/d3/d3-geo" target="_blank" rel="noopener noreferrer">
                     official d3 documentation
                 </a>{' '}

website/src/components/charts/geo/GeoMapCanvas.js

@@ -66,6 +66,7 @@ const GeoMapCanvas = () => {
     const code = generateCode(
         'ResponsiveGeoMapCanvas',
         {
+            features: [],
             ...settings,
         },
         {
@@ -74,7 +75,7 @@ const GeoMapCanvas = () => {
         }
     )
 
-    const header = <ChartHeader chartClass="GeoMapCanvas" tags={['geo', 'map', 'canvas']} />
+    const header = <ChartHeader chartClass="GeoMapCanvas" tags={['@nivo/geo', 'map', 'canvas']} />
 
     const description = (
         <div className="chart-description">

website/src/components/charts/geo/generators.js

@@ -8,8 +8,12 @@
  */
 import countries from './world_countries'
 
+const exclude = ['BRA', 'AUS', 'SWE', 'GRL', 'COD']
+
 export const generateChoroplethData = () =>
-    countries.features.map(feature => ({
-        id: feature.id,
-        value: Math.round(Math.random() * 1000000),
-    }))
+    countries.features
+        .filter(feature => !exclude.includes(feature.id))
+        .map(feature => ({
+            id: feature.id,
+            value: Math.round(Math.random() * 1000000),
+        }))

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

@@ -160,7 +160,9 @@ export default class HeatMap extends Component {
             { pkg: '@nivo/heatmap', defaults: HeatMapDefaultProps }
         )
 
-        const header = <ChartHeader chartClass="HeatMap" tags={['heatmap', 'svg']} />
+        const header = (
+            <ChartHeader chartClass="HeatMap" tags={['@nivo/heatmap', 'svg', 'isomorphic']} />
+        )
 
         const description = (
             <div className="chart-description">

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

@@ -149,9 +149,7 @@ export default class HeatMap extends Component {
             { pkg: '@nivo/heatmap' }
         )
 
-        const header = (
-            <ChartHeader chartClass="HeatMapCanvas" tags={['heatmap', 'canvas', 'experimental']} />
-        )
+        const header = <ChartHeader chartClass="HeatMapCanvas" tags={['@nivo/heatmap', 'canvas']} />
 
         const description = (
             <div className="chart-description">

website/src/components/charts/line/Line.js

@@ -75,7 +75,7 @@ export default class Line extends Component {
             defaults: LineDefaultProps,
         })
 
-        const header = <ChartHeader chartClass="Line" tags={['basic', 'isomorphic', 'api']} />
+        const header = <ChartHeader chartClass="Line" tags={['@nivo/line', 'svg', 'isomorphic']} />
 
         const description = (
             <div className="chart-description">

website/src/components/charts/parallel-coordinates/ParallelCoordinates.js

@@ -84,7 +84,12 @@ export default class ParallelCoordinates extends Component {
             defaults: defaultProps,
         })
 
-        const header = <ChartHeader chartClass="ParallelCoordinates" tags={['svg', 'isomorphic']} />
+        const header = (
+            <ChartHeader
+                chartClass="ParallelCoordinates"
+                tags={['@nivo/parallel-coordinates', 'svg', 'isomorphic']}
+            />
+        )
 
         const description = (
             <div className="chart-description">

website/src/components/charts/parallel-coordinates/ParallelCoordinatesCanvas.js

@@ -84,7 +84,12 @@ export default class ParallelCoordinatesCanvas extends Component {
             defaults: defaultProps,
         })
 
-        const header = <ChartHeader chartClass="ParallelCoordinatesCanvas" tags={['canvas']} />
+        const header = (
+            <ChartHeader
+                chartClass="ParallelCoordinatesCanvas"
+                tags={['@nivo/parallel-coordinates', 'canvas']}
+            />
+        )
 
         const description = (
             <div className="chart-description">

website/src/components/charts/pie/Pie.js

@@ -136,10 +136,7 @@ export default class Pie extends Component {
         })
 
         const header = (
-            <ChartHeader
-                chartClass="Pie"
-                tags={['basic', 'radial', 'circle', 'isomorphic', 'api']}
-            />
+            <ChartHeader chartClass="Pie" tags={['@nivo/pie', 'radial', 'svg', 'isomorphic']} />
         )
 
         const description = (

website/src/components/charts/pie/PieCanvas.js

@@ -127,7 +127,9 @@ export default class Pie extends Component {
             defaults: PieDefaultProps,
         })
 
-        const header = <ChartHeader chartClass="PieCanvas" tags={['canvas']} />
+        const header = (
+            <ChartHeader chartClass="PieCanvas" tags={['@nivo/pie', 'radial', 'canvas']} />
+        )
 
         const description = (
             <div className="chart-description">

website/src/components/charts/radar/Radar.js

@@ -120,7 +120,7 @@ export default class Radar extends Component {
         )
 
         const header = (
-            <ChartHeader chartClass="Radar" tags={['radar', 'radial', 'circle', 'isomorphic']} />
+            <ChartHeader chartClass="Radar" tags={['@nivo/radar', 'radial', 'svg', 'isomorphic']} />
         )
 
         const description = (

website/src/components/charts/sankey/Sankey.js

@@ -102,7 +102,12 @@ const Sankey = ({ data, randomizeLinkValues }) => {
         defaults: SankeyDefaultProps,
     })
 
-    const header = <ChartHeader chartClass="Sankey" tags={['relational', 'flow', 'svg']} />
+    const header = (
+        <ChartHeader
+            chartClass="Sankey"
+            tags={['@nivo/sankey', 'relational', 'flow', 'svg', 'isomorphic']}
+        />
+    )
 
     const description = (
         <div className="chart-description">

website/src/components/charts/scatterplot/ScatterPlot.js

@@ -164,7 +164,12 @@ export default class ScatterPlot extends Component {
             { pkg: '@nivo/scatterplot', defaults: ScatterPlotDefaultProps }
         )
 
-        const header = <ChartHeader chartClass="ScatterPlot" tags={['basic', 'isomorphic']} />
+        const header = (
+            <ChartHeader
+                chartClass="ScatterPlot"
+                tags={['@nivo/scatterplot', 'svg', 'isomorphic']}
+            />
+        )
 
         const description = (
             <div className="chart-description">

website/src/components/charts/scatterplot/ScatterPlotCanvas.js

@@ -148,7 +148,9 @@ export default class ScatterPlotCanvas extends Component {
             { pkg: '@nivo/scatterplot', defaults: ScatterPlotDefaultProps }
         )
 
-        const header = <ChartHeader chartClass="ScatterPlotCanvas" tags={['basic', 'canvas']} />
+        const header = (
+            <ChartHeader chartClass="ScatterPlotCanvas" tags={['@nivo/scatterplot', 'canvas']} />
+        )
 
         const description = (
             <div className="chart-description">

website/src/components/charts/stream/Stream.js

@@ -77,7 +77,12 @@ export default class Stream extends Component {
             }
         )
 
-        const header = <ChartHeader chartClass="Stream" tags={['stacked', 'isomorphic']} />
+        const header = (
+            <ChartHeader
+                chartClass="Stream"
+                tags={['@nivo/stream', 'stacked', 'svg', 'isomorphic']}
+            />
+        )
 
         const description = (
             <div className="chart-description">