feat(website): generate chart icons from code

Makefile

@@ -225,6 +225,10 @@ website-build: ##@2 website build website
 	@echo "${YELLOW}Building website${RESET}"
 	@cd website && yarn build
 
+website-serve: ##@2 website build & serve website
+	@$(MAKE) website-build
+	@./node_modules/.bin/serve -l 5678 ./website/build
+
 website-deploy: ##@2 website build & deploy website
 	@$(MAKE) website-build
 

conf/base.yaml

@@ -1,6 +1,7 @@
 capture:
-    baseUrl: http://localhost:3000
+    baseUrl: http://localhost:5678
     pages:
+      # capture illustrations for readme
       - path: /bar
         selector: .chart-tabs__content
         output: ./packages/bar/doc/bar.png
@@ -112,3 +113,92 @@ capture:
       - path: /waffle/canvas
         selector: .chart-tabs__content
         output: ./packages/waffle/doc/waffle-canvas.png
+
+      # capture icons for website
+      - path: /icons
+        selector: '#bar-grey'
+        output: ./website/src/assets/icons/bar-grey.png
+
+      - path: /icons
+        selector: '#bar-red'
+        output: ./website/src/assets/icons/bar-red.png
+
+      - path: /icons
+        selector: '#heatmap-grey'
+        output: ./website/src/assets/icons/heatmap-grey.png
+
+      - path: /icons
+        selector: '#heatmap-red'
+        output: ./website/src/assets/icons/heatmap-red.png
+
+      - path: /icons
+        selector: '#waffle-grey'
+        output: ./website/src/assets/icons/waffle-grey.png
+
+      - path: /icons
+        selector: '#waffle-red'
+        output: ./website/src/assets/icons/waffle-red.png
+
+      - path: /icons
+        selector: '#pie-grey'
+        output: ./website/src/assets/icons/pie-grey.png
+
+      - path: /icons
+        selector: '#pie-red'
+        output: ./website/src/assets/icons/pie-red.png
+
+      #- path: /icons
+      #  selector: '#radar-grey'
+      #  output: ./website/src/assets/icons/radar-grey.png
+
+      #- path: /icons
+      #  selector: '#radar-red'
+      #  output: ./website/src/assets/icons/radar-red.png
+
+      - path: /icons
+        selector: '#line-grey'
+        output: ./website/src/assets/icons/line-grey.png
+
+      - path: /icons
+        selector: '#line-red'
+        output: ./website/src/assets/icons/line-red.png
+
+      - path: /icons
+        selector: '#bullet-grey'
+        output: ./website/src/assets/icons/bullet-grey.png
+
+      - path: /icons
+        selector: '#bullet-red'
+        output: ./website/src/assets/icons/bullet-red.png
+
+      - path: /icons
+        selector: '#circle-packing-grey'
+        output: ./website/src/assets/icons/circle-packing-grey.png
+
+      - path: /icons
+        selector: '#circle-packing-red'
+        output: ./website/src/assets/icons/circle-packing-red.png 
+
+      - path: /icons
+        selector: '#stream-grey'
+        output: ./website/src/assets/icons/stream-grey.png
+
+      - path: /icons
+        selector: '#stream-red'
+        output: ./website/src/assets/icons/stream-red.png
+
+      - path: /icons
+        selector: '#scatterplot-grey'
+        output: ./website/src/assets/icons/scatterplot-grey.png
+
+      - path: /icons
+        selector: '#scatterplot-red'
+        output: ./website/src/assets/icons/scatterplot-red.png
+
+      - path: /icons
+        selector: '#parallel-coordinates-grey'
+        output: ./website/src/assets/icons/parallel-coordinates-grey.png
+
+      - path: /icons
+        selector: '#parallel-coordinates-red'
+        output: ./website/src/assets/icons/parallel-coordinates-red.png

package.json

@@ -49,6 +49,7 @@
     "rollup-plugin-node-resolve": "^3.3.0",
     "rollup-plugin-prettier": "^0.4.0",
     "rollup-plugin-strip-banner": "^0.2.0",
+    "serve": "^10.1.1",
     "tslint": "^5.11.0",
     "typescript": "^3.0.1"
   },

scripts/capture.js

@@ -3,7 +3,7 @@ const chalk = require('chalk')
 const config = require('@ekino/config')
 
 const capture = async (browser, baseUrl, { path, selector, output }) => {
-    const url = `${baseUrl}${path}`
+    const url = `${baseUrl}${path}?capture=1`
 
     const page = await browser.newPage()
     await page.setViewport({ width: 1400, height: 4000 })
@@ -22,6 +22,7 @@ const capture = async (browser, baseUrl, { path, selector, output }) => {
     await page.screenshot({
         path: output,
         clip,
+        omitBackground: true,
     })
 
     console.log(chalk`  {green saved to {white ${output}}}`)

website/src/SiteMap.js

@@ -73,6 +73,7 @@ import Gradients from './components/guides/gradients/Gradients'
 import Patterns from './components/guides/patterns/Patterns'
 import About from './components/pages/About'
 import Faq from './components/pages/Faq'
+import Icons from './components/icons/Icons'
 import Components from './components/components/Components'
 
 const SITEMAP = [
@@ -110,7 +111,7 @@ const SITEMAP = [
                 ],
             },
             {
-                className: 'bubble',
+                className: 'circle-packing',
                 path: '/bubble',
                 label: 'Bubble',
                 component: BubblePage,
@@ -667,6 +668,8 @@ export const getRoutes = () => {
         }
     })
 
+    routes.push(<Route key="icons" path="/icons" component={Icons} />)
+
     return routes
 }
 

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

@@ -158,7 +158,12 @@ export default class Bubble extends Component {
                         {header}
                         {description}
                     </MediaQuery>
-                    <ChartTabs chartClass="bubble" code={code} data={root} diceRoll={diceRoll}>
+                    <ChartTabs
+                        chartClass="circle-packing"
+                        code={code}
+                        data={root}
+                        diceRoll={diceRoll}
+                    >
                         <ResponsiveBubble
                             root={cloneDeep(root)}
                             {...mappedSettings}

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

@@ -124,7 +124,7 @@ export default class BubbleCanvas extends Component {
                         {description}
                     </MediaQuery>
                     <ChartTabs
-                        chartClass="bubble"
+                        chartClass="circle-packing"
                         code={code}
                         data={root}
                         nodeCount={NODE_COUNT}

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

@@ -143,7 +143,12 @@ export default class BubbleHtml extends Component {
                         {header}
                         {description}
                     </MediaQuery>
-                    <ChartTabs chartClass="bubble" code={code} data={root} diceRoll={diceRoll}>
+                    <ChartTabs
+                        chartClass="circle-packing"
+                        code={code}
+                        data={root}
+                        diceRoll={diceRoll}
+                    >
                         <ResponsiveBubbleHtml
                             root={cloneDeep(root)}
                             {...mappedSettings}

website/src/components/icons/BarIcon.js

@@ -0,0 +1,69 @@
+/*
+ * This file is part of the nivo project.
+ *
+ * (c) 2016 Raphaël Benitte
+ *
+ * For the full copyright and license information, please view the LICENSE
+ * file that was distributed with this source code.
+ */
+import React, { Fragment } from 'react'
+import { Bar } from '@nivo/bar'
+import barGreyImg from '../../assets/icons/bar-grey.png'
+import barRedImg from '../../assets/icons/bar-red.png'
+import { ICON_SIZE, Icon } from './styled'
+
+const chartProps = {
+    indexBy: 'id',
+    keys: ['A', 'B', 'C'],
+    margin: {
+        top: 12,
+        bottom: 16,
+    },
+    padding: 0.2,
+    enableGridX: false,
+    enableGridY: false,
+    axisBottom: null,
+    axisLeft: null,
+    enableLabel: false,
+    data: [
+        { id: '0', A: 3.2, B: 2, C: 1.6 },
+        { id: '1', A: 2.8, B: 1.7, C: 1.2 },
+        { id: '2', A: 4, B: 2.4, C: 1.8 },
+        { id: '3', A: 6, B: 4, C: 2 },
+        { id: '4', A: 5, B: 3, C: 2 },
+    ],
+    isInteractive: false,
+}
+
+const BarIcon = () => (
+    <Fragment>
+        <Icon id="bar-grey">
+            <Bar
+                width={ICON_SIZE}
+                height={ICON_SIZE}
+                {...chartProps}
+                colors={['#b0aeaf', '#838383', '#767676']}
+            />
+        </Icon>
+        <Icon
+            style={{
+                backgroundImage: `url(${barGreyImg})`,
+            }}
+        />
+        <Icon id="bar-red">
+            <Bar
+                width={ICON_SIZE}
+                height={ICON_SIZE}
+                {...chartProps}
+                colors={['#ff8d80', '#f54d31', '#e2462f']}
+            />
+        </Icon>
+        <Icon
+            style={{
+                backgroundImage: `url(${barRedImg})`,
+            }}
+        />
+    </Fragment>
+)
+
+export default BarIcon

website/src/components/icons/BulletIcon.js

@@ -0,0 +1,119 @@
+/*
+ * This file is part of the nivo project.
+ *
+ * (c) 2016 Raphaël Benitte
+ *
+ * For the full copyright and license information, please view the LICENSE
+ * file that was distributed with this source code.
+ */
+import React, { Fragment } from 'react'
+import { Bullet } from '@nivo/bullet'
+import bulletGreyImg from '../../assets/icons/bullet-grey.png'
+import bulletRedImg from '../../assets/icons/bullet-red.png'
+import { ICON_SIZE, Icon } from './styled'
+
+const chartProps = {
+    data: [
+        {
+            id: 'A',
+            ranges: [36, 100],
+            measures: [56],
+            markers: [76],
+        },
+        {
+            id: 'B',
+            ranges: [60, 100],
+            measures: [76],
+            markers: [88],
+        },
+        {
+            id: 'C',
+            ranges: [50, 100],
+            measures: [60],
+            markers: [74],
+        },
+    ],
+    margin: {
+        top: 8,
+        bottom: 8,
+    },
+    titleOffsetX: -300,
+    spacing: 8,
+    isInteractive: false,
+    markerSize: 0.4,
+}
+
+const Range = colors => d => {
+    const color = d.data.v1 === 100 ? colors[1] : colors[0]
+
+    return <rect x={d.x} y={d.y} width={d.width} height={d.height} fill={color} />
+}
+
+const Measure = color => d => (
+    <rect x={d.x} y={d.y} width={d.width} height={d.height} fill={color} />
+)
+
+const Marker = color => d => (
+    <rect fill={color} x={d.x - d.size / 2} y={d.y - d.size / 2} width={d.size} height={d.size} />
+)
+
+const BulletIcon = () => (
+    <Fragment>
+        <Icon id="bullet-grey">
+            <Bullet
+                width={ICON_SIZE}
+                height={ICON_SIZE}
+                {...chartProps}
+                rangeComponent={Range(['#e2e2e2', '#c5c5c5'])}
+                measureComponent={Measure('#666')}
+                markerComponent={Marker('#666')}
+                theme={{
+                    axis: {
+                        ticks: {
+                            line: {
+                                strokeWidth: 0,
+                            },
+                            text: {
+                                fill: 'transparent',
+                            },
+                        },
+                    },
+                }}
+            />
+        </Icon>
+        <Icon
+            style={{
+                backgroundImage: `url(${bulletGreyImg})`,
+            }}
+        />
+        <Icon id="bullet-red">
+            <Bullet
+                width={ICON_SIZE}
+                height={ICON_SIZE}
+                {...chartProps}
+                rangeComponent={Range(['#ffc6c6', '#ffa4a2'])}
+                measureComponent={Measure('#e2462f')}
+                markerComponent={Marker('#e2462f')}
+                theme={{
+                    axis: {
+                        ticks: {
+                            line: {
+                                strokeWidth: 0,
+                            },
+                            text: {
+                                fill: 'transparent',
+                            },
+                        },
+                    },
+                }}
+            />
+        </Icon>
+        <Icon
+            style={{
+                backgroundImage: `url(${bulletRedImg})`,
+            }}
+        />
+    </Fragment>
+)
+
+export default BulletIcon