feat(website): add TimeRange icon

conf/base.yaml

@@ -155,9 +155,9 @@ capture:
       #   selector: '#chart'
       #   output: ./packages/funnel/doc/funnel.png
 
-      - path: /marimekko
-        selector: '#chart'
-        output: ./packages/marimekko/doc/marimekko.png
+      # - path: /marimekko
+      #   selector: '#chart'
+      #   output: ./packages/marimekko/doc/marimekko.png
 
       #########################################################################
       #
@@ -204,7 +204,7 @@ capture:
       # - path: /internal/icons/
       #   selector: '#bar-darkColored'
       #   output: ./website/src/assets/icons/bar-dark-colored.png
-    
+
       # - path: /internal/icons/
       #   selector: '#bullet-lightNeutral'
       #   output: ./website/src/assets/icons/bullet-light-neutral.png
@@ -256,7 +256,7 @@ capture:
       # - path: /internal/icons/
       #   selector: '#choropleth-darkColored'
       #   output: ./website/src/assets/icons/choropleth-dark-colored.png
-      
+
       # - path: /internal/icons/
       #   selector: '#heatmap-lightNeutral'
       #   output: ./website/src/assets/icons/heatmap-light-neutral.png
@@ -515,4 +515,17 @@ capture:
       #   output: ./website/src/assets/icons/marimekko-dark-neutral.png
       # - path: /internal/icons/
       #   selector: '#marimekko-darkColored'
-      #   output: ./website/src/assets/icons/marimekko-dark-colored.png
+      #   output: ./website/src/assets/icons/marimekko-dark-colored.png
+
+      - path: /internal/icons/
+        selector: '#time-range-lightNeutral'
+        output: ./website/src/assets/icons/time-range-light-neutral.png
+      - path: /internal/icons/
+        selector: '#time-range-lightColored'
+        output: ./website/src/assets/icons/time-range-light-colored.png
+      - path: /internal/icons/
+        selector: '#time-range-darkNeutral'
+        output: ./website/src/assets/icons/time-range-dark-neutral.png
+      - path: /internal/icons/
+        selector: '#time-range-darkColored'
+        output: ./website/src/assets/icons/time-range-dark-colored.png

website/src/components/icons/Icons.js

@@ -23,6 +23,7 @@ import ScatterPlotIcon from './ScatterPlotIcon'
 import StreamIcon from './StreamIcon'
 import SunburstIcon from './SunburstIcon'
 import SwarmPlotIcon from './SwarmPlotIcon'
+import TimeRangeIcon from './TimeRangeIcon'
 import TreeMapIcon from './TreeMapIcon'
 import WaffleIcon from './WaffleIcon'
 import ParallelCoordinatesIcon from './ParallelCoordinatesIcon'
@@ -84,6 +85,7 @@ const Icons = () => (
         <StreamIcon />
         <SunburstIcon />
         <SwarmPlotIcon />
+        <TimeRangeIcon />
         <TreeMapIcon />
         <VoronoiIcon />
         <WaffleIcon />

website/src/components/icons/TimeRangeIcon.js

@@ -0,0 +1,75 @@
+/*
+ * 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 from 'react'
+import { TimeRange } from '@nivo/calendar'
+import timeRangeLightNeutralImg from '../../assets/icons/time-range-light-neutral.png'
+import timeRangeLightColoredImg from '../../assets/icons/time-range-light-colored.png'
+import timeRangeDarkNeutralImg from '../../assets/icons/time-range-dark-neutral.png'
+import timeRangeDarkColoredImg from '../../assets/icons/time-range-dark-colored.png'
+import { ICON_SIZE, Icon, colors, IconImg } from './styled'
+
+const pad = value => `0${value}`.slice(-2)
+const data = Array(21)
+    .fill('')
+    .map((_, index) => ({
+        day: `2021-06-${pad(index + 2)}`,
+        value: Math.round(Math.random() * 400),
+    }))
+
+const chartProps = {
+    width: ICON_SIZE,
+    height: ICON_SIZE,
+    data,
+    margin: {
+        top: 6,
+        right: 14,
+        bottom: 6,
+        left: 14,
+    },
+    dayRadius: 3,
+    daySpacing: 2,
+    square: false,
+    weekdayLegendOffset: 0,
+}
+
+const TimeRangeIconItem = ({ type }) => {
+    const currentColors = colors[type].colors
+
+    return (
+        <Icon id={`time-range-${type}`} type={type}>
+            <TimeRange
+                {...chartProps}
+                colors={[currentColors[4], currentColors[2], currentColors[1]]}
+                dayBorderColor="none"
+                theme={{
+                    labels: {
+                        text: {
+                            fill: 'none',
+                        },
+                    },
+                }}
+            />
+        </Icon>
+    )
+}
+
+const TimeRangeIcon = () => (
+    <>
+        <TimeRangeIconItem type="lightNeutral" />
+        <IconImg url={timeRangeLightNeutralImg} />
+        <TimeRangeIconItem type="lightColored" />
+        <IconImg url={timeRangeLightColoredImg} />
+        <TimeRangeIconItem type="darkNeutral" />
+        <IconImg url={timeRangeDarkNeutralImg} />
+        <TimeRangeIconItem type="darkColored" />
+        <IconImg url={timeRangeDarkColoredImg} />
+    </>
+)
+
+export default TimeRangeIcon

website/src/data/nav.js

@@ -162,7 +162,7 @@ export const components = [
     {
         label: 'TimeRange',
         path: '/time-range/',
-        icon: 'calendar',
+        icon: 'time-range',
         tags: timeRange.TimeRange.tags,
     },
     {

website/src/pages/time-range/index.js

@@ -73,12 +73,11 @@ const initialProperties = {
 }
 
 const TimeRange = () => {
-    console.log('m', mapper)
     return (
         <ComponentTemplate
             name="TimeRange"
             meta={meta.TimeRange}
-            icon="calendar"
+            icon="time-range"
             flavors={meta.flavors}
             currentFlavor="svg"
             properties={groups}