Add the new BoxPlot component to the website

conf/base.yaml

@@ -1,4 +1,4 @@
-baseUrl: http://localhost:8000
+baseUrl: http://localhost:9000
 capture:
     pages:
       - id: home
@@ -28,6 +28,10 @@ capture:
       - id: voronoi
 
     charts:
+      - pkg: boxplot
+        chart: boxplot
+        flavors: [svg]
+
       - pkg: bump
         chart: bump
         flavors: [svg]

packages/boxplot/README.md

@@ -2,8 +2,8 @@
 
 # `@nivo/boxplot`
 
-[![version](https://img.shields.io/npm/v/@nivo/boxplot?style=for-the-badge)](https://www.npmjs.com/package/@nivo/bar)
-[![downloads](https://img.shields.io/npm/dm/@nivo/boxplot?style=for-the-badge)](https://www.npmjs.com/package/@nivo/bar)
+[![version](https://img.shields.io/npm/v/@nivo/boxplot?style=for-the-badge)](https://www.npmjs.com/package/@nivo/boxplot)
+[![downloads](https://img.shields.io/npm/dm/@nivo/boxplot?style=for-the-badge)](https://www.npmjs.com/package/@nivo/boxplot)
 
 ## Boxplot
 

packages/boxplot/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@nivo/boxplot",
-  "version": "0.79.1",
+  "version": "0.81.0",
   "license": "MIT",
   "author": {
     "name": "Raphaël Benitte",
@@ -34,24 +34,24 @@
     "!dist/tsconfig.tsbuildinfo"
   ],
   "dependencies": {
-    "@nivo/annotations": "0.79.1",
-    "@nivo/axes": "0.79.0",
-    "@nivo/colors": "0.79.1",
-    "@nivo/legends": "0.79.1",
-    "@nivo/scales": "0.79.0",
-    "@nivo/tooltip": "0.79.0",
-    "@react-spring/web": "9.4.5",
+    "@nivo/annotations": "0.81.0",
+    "@nivo/axes": "0.81.0",
+    "@nivo/colors": "0.81.0",
+    "@nivo/legends": "0.81.0",
+    "@nivo/scales": "0.81.0",
+    "@nivo/tooltip": "0.81.0",
+    "@react-spring/web": "9.4.5 || ^9.7.2",
     "d3-scale": "^3.2.3",
-    "d3-shape": "^1.2.2",
+    "d3-shape": "^1.3.5",
     "lodash": "^4.17.21"
   },
   "devDependencies": {
-    "@nivo/core": "0.79.0",
-    "@nivo/generators": "0.79.0"
+    "@nivo/core": "0.81.0",
+    "@nivo/generators": "0.81.0"
   },
   "peerDependencies": {
-    "@nivo/core": "0.79.0",
-    "react": ">= 16.14.0 < 18.0.0"
+    "@nivo/core": "0.81.0",
+    "react": ">= 16.14.0 < 19.0.0"
   },
   "publishConfig": {
     "access": "public"

scripts/capture.js

@@ -40,19 +40,16 @@ const getChartUrl = (chart, flavor) => {
 
     return `${Path.join(...chunks)}/?capture=1`
 }
-const getChartIconFilePath = (chart, variant) => Path.join(
-    websiteIconsDir,
-    `${chart}-${variant}.png`
-)
-const getHomeDemoFilePath = (id) => Path.join(websiteHomeDemosDir, `${id}.png`)
-const getPageUrl = (path) => {
-    return `${Path.join(config.get('baseUrl'), path)}/?capture=1`
-}
-const getPageFilePath = (id) => Path.join(websitePagesDir, `${id}.png`)
-
-const delay = (time) => new Promise((resolve) => {
-    setTimeout(resolve, time)
-})
+const getChartIconFilePath = (chart, variant) =>
+    Path.join(websiteIconsDir, `${chart}-${variant}.png`)
+const getHomeDemoFilePath = id => Path.join(websiteHomeDemosDir, `${id}.png`)
+const getPageUrl = path => `${Path.join(config.get('baseUrl'), path)}/?capture=1`
+const getPageFilePath = id => Path.join(websitePagesDir, `${id}.png`)
+
+const delay = time =>
+    new Promise(resolve => {
+        setTimeout(resolve, time)
+    })
 
 const captureChart = async (page, { pkg, chart, flavor, theme }) => {
     const url = getChartUrl(chart, flavor)
@@ -100,7 +97,7 @@ const captureCharts = async () => {
 
     try {
         const browser = await puppeteer.launch({
-            headless: true
+            headless: true,
         })
         const page = await browser.newPage()
 
@@ -131,15 +128,11 @@ const captureIcons = async () => {
 
     try {
         const browser = await puppeteer.launch({
-            headless: true
+            headless: false,
         })
         const page = await browser.newPage()
         await page.setViewport(VIEWPORT.icons)
-        await page.goto(`${Path.join(
-            config.get('baseUrl'),
-            'internal',
-            'icons'
-        )}/`)
+        await page.goto(`${Path.join(config.get('baseUrl'), 'internal', 'icons')}/?capture=1`)
 
         for (let icon of icons) {
             console.log(chalk`{yellow Capturing {white ${icon}} chart icons}`)
@@ -186,15 +179,11 @@ const captureHomeDemos = async () => {
 
     try {
         const browser = await puppeteer.launch({
-            headless: true
+            headless: true,
         })
         const page = await browser.newPage()
         await page.setViewport(VIEWPORT.homeDemos)
-        await page.goto(`${Path.join(
-            config.get('baseUrl'),
-            'internal',
-            'home-demos'
-        )}/?capture=1`)
+        await page.goto(`${Path.join(config.get('baseUrl'), 'internal', 'home-demos')}/?capture=1`)
 
         for (let demo of demos) {
             console.log(chalk`{yellow Capturing {white ${demo.id}} demo}`)
@@ -239,7 +228,7 @@ const capturePages = async () => {
 
     try {
         const browser = await puppeteer.launch({
-            headless: true
+            headless: true,
         })
         const page = await browser.newPage()
 
@@ -287,10 +276,10 @@ const capturePages = async () => {
 
 
 const run = async () => {
-    await capturePages()
+    // await capturePages()
     // await captureHomeDemos()
     // await captureCharts()
-    // await captureIcons()
+    await captureIcons()
 }
 
 run()

website/src/@types/file_types.d.ts

@@ -24,6 +24,15 @@ declare module '*bar/meta.yml' {
     export default meta
 }
 
+declare module '*boxplot/meta.yml' {
+    const meta: {
+        flavors: ChartMetaFlavors
+        BoxPlot: ChartMeta
+    }
+
+    export default meta
+}
+
 declare module '*bullet/meta.yml' {
     const meta: {
         flavors: ChartMetaFlavors

website/src/components/icons/BoxPlotIcon.tsx

@@ -0,0 +1,96 @@
+import React, { useMemo } from 'react'
+import { BoxPlot, BoxPlotSvgProps } from '@nivo/boxplot'
+import boxplotLightNeutralImg from '../../assets/icons/boxplot-light-neutral.png'
+import boxplotLightColoredImg from '../../assets/icons/boxplot-light-colored.png'
+import boxplotDarkNeutralImg from '../../assets/icons/boxplot-dark-neutral.png'
+import boxplotDarkColoredImg from '../../assets/icons/boxplot-dark-colored.png'
+import { ICON_SIZE, Icon, colors, IconImg } from './styled'
+import { IconType } from './types'
+
+const quantiles = [0.1, 0.25, 0.5, 0.75, 0.9]
+
+const chartProps: BoxPlotSvgProps<any> = {
+    width: ICON_SIZE,
+    height: ICON_SIZE,
+    layout: 'horizontal',
+    margin: {
+        top: 6,
+        right: 2,
+        bottom: 6,
+        left: 2,
+    },
+    padding: 0.15,
+    enableGridX: false,
+    enableGridY: false,
+    axisTop: null,
+    axisRight: null,
+    axisBottom: null,
+    axisLeft: null,
+    // Using pre-computed data for predictability.
+    data: [
+        {
+            group: 'A',
+            subGroup: '',
+            quantiles: quantiles,
+            values: [1.5, 2.2, 2.9, 3.6, 4.3],
+            extrema: [1, 5],
+            mean: 2.5,
+            n: 100,
+        },
+        {
+            group: 'B',
+            subGroup: '',
+            quantiles: quantiles,
+            values: [2, 2.5, 3.7, 4.5, 5],
+            extrema: [2, 7],
+            mean: 3.75,
+            n: 200,
+        },
+        {
+            group: 'C',
+            subGroup: '',
+            quantiles: quantiles,
+            values: [1, 1.5, 2, 2.5, 3],
+            extrema: [2, 7],
+            mean: 3.75,
+            n: 200,
+        },
+    ],
+    medianWidth: 2,
+    whiskerWidth: 3,
+    whiskerEndSize: 0.6,
+    borderRadius: 2,
+    isInteractive: false,
+    animate: false,
+}
+
+const BoxPlotIconItem = ({ type }: { type: IconType }) => {
+    const typedColors = useMemo(
+        () => [colors[type].colors[1], colors[type].colors[2], colors[type].colors[4]],
+        [type]
+    )
+
+    return (
+        <Icon id={`boxplot-${type}`} type={type}>
+            <BoxPlot<any>
+                {...chartProps}
+                colors={[typedColors[1]]}
+                medianColor={typedColors[2]}
+                whiskerColor={typedColors[2]}
+            />
+        </Icon>
+    )
+}
+
+export const BoxPlotIcon = () => (
+    <>
+        <BoxPlotIconItem type="lightNeutral" />
+        <IconImg url={boxplotLightNeutralImg} />
+        <BoxPlotIconItem type="lightColored" />
+        <IconImg url={boxplotLightColoredImg} />
+        <BoxPlotIconItem type="darkNeutral" />
+        <IconImg url={boxplotDarkNeutralImg} />
+        <BoxPlotIconItem type="darkColored" />
+        <IconImg url={boxplotDarkColoredImg} />
+    </>
+)

website/src/components/icons/Icons.tsx

@@ -2,6 +2,7 @@ import React, { Fragment } from 'react'
 import { Container } from './styled'
 import { AreaBumpIcon } from './AreaBumpIcon'
 import { BarIcon } from './BarIcon'
+import { BoxPlotIcon } from './BoxPlotIcon'
 import { BulletIcon } from './BulletIcon'
 import { BumpIcon } from './BumpIcon'
 import { CalendarIcon } from './CalendarIcon'
@@ -63,6 +64,7 @@ export const Icons = () => (
         <ColorsDemo type="lightColored" />
         <ColorsDemo type="darkNeutral" />
         <ColorsDemo type="darkColored" />
+        <BoxPlotIcon />
         <AreaBumpIcon />
         <BarIcon />
         <BulletIcon />

website/src/data/components/boxplot/generator.ts

@@ -0,0 +1,15 @@
+import { generateBoxPlotData } from '@nivo/generators'
+
+export const generateLightDataSet = () =>
+    generateBoxPlotData([
+        { group: 'Alpha', subgroup: 'A', mu: 5, sd: 1, n: 20 },
+        { group: 'Alpha', subgroup: 'B', mu: 6, sd: 1, n: 20 },
+        { group: 'Beta', subgroup: 'A', mu: 8, sd: 1.4, n: 20 },
+        { group: 'Beta', subgroup: 'B', mu: 7.5, sd: 1.4, n: 20 },
+        { group: 'Gamma', subgroup: 'A', mu: 5, sd: 1, n: 20 },
+        { group: 'Gamma', subgroup: 'B', mu: 7.2, sd: 1.8, n: 20 },
+        { group: 'Delta', subgroup: 'A', mu: 5, sd: 1, n: 20 },
+        { group: 'Delta', subgroup: 'B', mu: 6, sd: 1, n: 20 },
+        { group: 'Epsilon', subgroup: 'A', mu: 5, sd: 1.4, n: 20 },
+        { group: 'Epsilon', subgroup: 'B', mu: 6, sd: 3, n: 20 },
+    ])

website/src/data/components/boxplot/mapper.ts

@@ -0,0 +1,14 @@
+import { settingsMapper, mapAxis, mapFormat } from '../../../lib/settings'
+
+export default settingsMapper(
+    {
+        valueFormat: mapFormat,
+        axisTop: mapAxis('top'),
+        axisRight: mapAxis('right'),
+        axisBottom: mapAxis('bottom'),
+        axisLeft: mapAxis('left'),
+    },
+    {
+        exclude: ['enable axisTop', 'enable axisRight', 'enable axisBottom', 'enable axisLeft'],
+    }
+)

website/src/data/components/boxplot/meta.yml

@@ -0,0 +1,34 @@
+flavors:
+  - flavor: svg
+    path: /boxplot/
+
+BoxPlot:
+  package: '@nivo/boxplot'
+  tags: []
+  stories: []
+  #  - label: Using markers
+  #    link: bar--with-marker
+  #  - label: Stacked diverging bar chart
+  #    link: bar--diverging-stacked
+  #  - label: Grouped diverging bar chart
+  #    link: bar--diverging-grouped
+  #  - label: Custom bar element
+  #    link: bar--custom-bar-item
+  #  - label: Formatting values
+  #    link: bar--with-formatted-values
+  #  - label: Using custom tooltip
+  #    link: bar--custom-tooltip
+  #  - label: Custom axis ticks
+  #    link: bar--custom-axis-ticks
+  #  - label: With symlog scale
+  #    link: bar--with-symlog-scale
+  #  - label: Race bar chart
+  #    link: bar--race-chart
+  #  - label: Initial hidden ids
+  #    link: bar--initial-hidden-ids
+  #  - label: Using custom label for legends
+  #    link: bar--custom-legend-labels
+  #  - label: Using annotations
+  #    link: bar--with-annotations
+  description: |
+    BoxPlot description.