feat(boxplot): remove bg from boxplot icons

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]

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/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: .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 />