feat(website): add TimeRange component

website/src/data/components/time-range/mapper.js

@@ -0,0 +1,55 @@
+/*
+ * This file is part of the nivo project.
+ *
+ * Copyright 2016-present, 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 styled from 'styled-components'
+import { settingsMapper } from '../../../lib/settings'
+
+const TooltipWrapper = styled.div`
+    display: grid;
+    background: #333;
+    padding: 10px;
+    border-radius: 4px;
+    grid-template-columns: 100px 1fr;
+    grid-column-gap: 12px;
+`
+const TooltipKey = styled.span`
+    font-weight: 600;
+`
+
+const CustomTooltip = day => {
+    return (
+        <TooltipWrapper style={{ color: day.color }}>
+            <TooltipKey>day</TooltipKey>
+            <span>{day.day}</span>
+            <TooltipKey>value</TooltipKey>
+            <span>{day.value}</span>
+            <TooltipKey>coordinates.x</TooltipKey>
+            <span>{day.coordinates.x}</span>
+            <TooltipKey>coordinates.y</TooltipKey>
+            <span>{day.coordinates.y}</span>
+            <TooltipKey>height</TooltipKey>
+            <span>{day.height}</span>
+            <TooltipKey>width</TooltipKey>
+            <span>{day.width}</span>
+        </TooltipWrapper>
+    )
+}
+
+export default settingsMapper(
+    {
+        tooltip: (value, values) => {
+            if (!values['custom tooltip example']) return undefined
+
+            return CustomTooltip
+        },
+    },
+    {
+        exclude: ['custom tooltip example'],
+    }
+)

website/src/data/components/time-range/meta.yml

@@ -0,0 +1,13 @@
+flavors:
+  - flavor: svg
+    path: /time-range/
+
+TimeRange:
+  package: '@nivo/calendar'
+  tags:
+    - svg
+    - isomorphic
+  stories: []
+  description: |
+    The TimeRange chart is similar to the [Calendar](self:/calendar) chart, but
+    it allows you to specify dates less than a year.