feat(marimekko): add support for axes and grid

plouc · Nov 16, 2020 · 8e4cd0d · 8e4cd0d
1 parent ed74e9f
commit 8e4cd0d
Show file tree

Hide file tree

Showing 9 changed files with 165 additions and 38 deletions.
diff --git a/packages/axes/index.d.ts b/packages/axes/index.d.ts
@@ -17,7 +17,7 @@ declare module '@nivo/axes' {
 
     export type Orient = 'top' | 'right' | 'bottom' | 'left'
 
-    type AxisPositions = { [K in Orient]: AxisProps }
+    type AxisPositions = Partial<{ [K in Orient]: AxisProps }>
 
     interface Scales {
         xScale?: Scale

diff --git a/packages/marimekko/package.json b/packages/marimekko/package.json
@@ -20,6 +20,7 @@
     "dist/"
   ],
   "dependencies": {
+    "@nivo/axes": "0.64.0",
     "@nivo/colors": "0.64.0",
     "d3-scale": "^3.0.0",
     "d3-shape": "^1.3.5",

diff --git a/packages/marimekko/src/Marimekko.tsx b/packages/marimekko/src/Marimekko.tsx
@@ -1,5 +1,6 @@
 import React, { createElement, Fragment, ReactNode } from 'react'
 import { Container, SvgWrapper, useDimensions } from '@nivo/core'
+import { Grid, Axes } from '@nivo/axes'
 import { InheritedColorConfig, OrdinalColorScaleConfig } from '@nivo/colors'
 import { SvgProps, LayerId, DimensionDatum } from './types'
 import { defaultProps } from './props'
@@ -18,6 +19,14 @@ const InnerMarimekko = <RawDatum,>({
     layout = defaultProps.layout,
     offset = defaultProps.offset,
     layers = defaultProps.layers,
+    axisTop,
+    axisRight,
+    axisBottom,
+    axisLeft,
+    enableGridX = defaultProps.enableGridX,
+    gridXValues,
+    enableGridY = defaultProps.enableGridY,
+    gridYValues,
     colors = defaultProps.colors as OrdinalColorScaleConfig<
         Omit<DimensionDatum<RawDatum>, 'color'>
     >,
@@ -58,18 +67,53 @@ const InnerMarimekko = <RawDatum,>({
         legends: null,
     }
 
-    layerById.bars = (
-        <Bars<RawDatum>
-            key="bars"
-            bars={bars}
-            isInteractive={isInteractive}
-            tooltip={tooltip}
-            onClick={onClick}
-            onMouseEnter={onMouseEnter}
-            onMouseMove={onMouseMove}
-            onMouseLeave={onMouseLeave}
-        />
-    )
+    if (layers.includes('bars')) {
+        layerById.bars = (
+            <Bars<RawDatum>
+                key="bars"
+                bars={bars}
+                isInteractive={isInteractive}
+                tooltip={tooltip}
+                onClick={onClick}
+                onMouseEnter={onMouseEnter}
+                onMouseMove={onMouseMove}
+                onMouseLeave={onMouseLeave}
+            />
+        )
+    }
+
+    const xScale = layout === 'vertical' ? thicknessScale : dimensionsScale
+    const yScale = layout === 'vertical' ? dimensionsScale : thicknessScale
+
+    if (layers.includes('grid')) {
+        layerById.grid = (
+            <Grid
+                key="grid"
+                xScale={enableGridX ? (xScale as any) : undefined}
+                yScale={enableGridY ? (yScale as any) : undefined}
+                width={innerWidth}
+                height={innerHeight}
+                xValues={gridXValues}
+                yValues={gridYValues}
+            />
+        )
+    }
+
+    if (layers.includes('axes')) {
+        layerById.axes = (
+            <Axes
+                key="axes"
+                xScale={xScale as any}
+                yScale={yScale as any}
+                width={innerWidth}
+                height={innerHeight}
+                top={axisTop}
+                right={axisRight}
+                bottom={axisBottom}
+                left={axisLeft}
+            />
+        )
+    }
 
     const layerContext = useLayerContext<RawDatum>({
         data: computedData,

diff --git a/packages/marimekko/src/props.ts b/packages/marimekko/src/props.ts
@@ -6,6 +6,13 @@ export const defaultProps = {
 
     layers: ['grid', 'axes', 'bars', 'legends'] as LayerId[],
 
+    //axisTop: any,
+    //axisRight: any,
+    //axisBottom: any,
+    //axisLeft: any,
+    enableGridX: false,
+    enableGridY: true,
+
     colors: { scheme: 'nivo' },
     borderWidth: 0,
     borderColor: {

diff --git a/packages/marimekko/src/types.ts b/packages/marimekko/src/types.ts
@@ -7,6 +7,7 @@ import {
     stackOffsetWiggle,
 } from 'd3-shape'
 import { Box, Dimensions, Theme, SvgDefsAndFill, ModernMotionProps } from '@nivo/core'
+import { AxisProps } from '@nivo/axes'
 import { OrdinalColorScaleConfig, InheritedColorConfig } from '@nivo/colors'
 import { LegendProps } from '@nivo/legends'
 
@@ -106,6 +107,16 @@ export type CommonProps<RawDatum> = {
     layout: Layout
     offset: OffsetId
 
+    // axes and grid
+    axisTop?: AxisProps
+    axisRight?: AxisProps
+    axisBottom?: AxisProps
+    axisLeft?: AxisProps
+    enableGridX: boolean
+    gridXValues?: number[]
+    enableGridY: boolean
+    gridYValues?: number[]
+
     // colors, theme and border
     colors: OrdinalColorScaleConfig<Omit<DimensionDatum<RawDatum>, 'color' | 'fill'>>
     theme: Theme

diff --git a/packages/marimekko/stories/marimekko.stories.tsx b/packages/marimekko/stories/marimekko.stories.tsx
@@ -6,6 +6,12 @@ import { Marimekko, Layout } from '../src'
 const commonProps = {
     width: 900,
     height: 500,
+    margin: {
+        top: 40,
+        right: 80,
+        bottom: 40,
+        left: 80,
+    },
     id: 'id',
     value: 'value',
     layout: 'vertical' as Layout,
@@ -112,5 +118,5 @@ stories.add('diverging', () => {
         },
     ]
 
-    return <Marimekko {...commonProps} data={data} layout="horizontal" offset="diverging" />
+    return <Marimekko {...commonProps} data={data} layout="vertical" offset="diverging" />
 })
diff --git a/website/src/data/components/marimekko/mapper.js b/website/src/data/components/marimekko/mapper.js
@@ -1,7 +1,7 @@
 import React from 'react'
 import styled from 'styled-components'
 import { patternDotsDef, patternLinesDef } from '@nivo/core'
-import { mapFormat, settingsMapper } from '../../../lib/settings'
+import { mapAxis, mapFormat, settingsMapper } from '../../../lib/settings'
 
 const TooltipWrapper = styled.div`
     display: grid;
@@ -35,32 +35,15 @@ const CustomTooltip = ({ bar }) => (
 export default settingsMapper(
     {
         valueFormat: mapFormat,
-        radialLabel: value => {
-            if (value === `d => \`\${d.id} (\${d.value})\``) return d => `${d.id} (${d.value})`
-            return value
-        },
-        sliceLabel: value => {
-            if (value === `d => \`\${d.id} (\${d.value})\``) return d => `${d.id} (${d.value})`
-            return value
-        },
+        axisTop: mapAxis('top'),
+        axisRight: mapAxis('right'),
+        axisBottom: mapAxis('bottom'),
+        axisLeft: mapAxis('left'),
         tooltip: (value, values) => {
             if (!values['custom tooltip example']) return undefined
 
             return CustomTooltip
         },
-        theme: (value, values) => {
-            if (!values['custom tooltip example']) return value
-
-            return {
-                ...values.theme,
-                tooltip: {
-                    container: {
-                        ...values.theme.tooltip.container,
-                        background: '#333',
-                    },
-                },
-            }
-        },
         defs: (value, values) => {
             if (!values['showcase pattern usage']) return
 

diff --git a/website/src/data/components/marimekko/props.js b/website/src/data/components/marimekko/props.js
@@ -5,6 +5,7 @@ import {
     groupProperties,
     getLegendsProps,
     motionProperties,
+    axesProperties,
 } from '../../../lib/componentProperties'
 
 const props = [
@@ -184,6 +185,39 @@ const props = [
         controlType: 'inheritedColor',
         group: 'Style',
     },
+    ...axesProperties(),
+    {
+        key: 'enableGridX',
+        help: 'Enable/disable x grid.',
+        type: 'boolean',
+        required: false,
+        defaultValue: defaults.enableGridX,
+        controlType: 'switch',
+        group: 'Grid & Axes',
+    },
+    {
+        key: 'gridXValues',
+        group: 'Grid & Axes',
+        help: 'Specify values to use for vertical grid lines.',
+        type: 'number[]',
+        required: false,
+    },
+    {
+        key: 'enableGridY',
+        help: 'Enable/disable y grid.',
+        type: 'boolean',
+        required: false,
+        defaultValue: defaults.enableGridY,
+        controlType: 'switch',
+        group: 'Grid & Axes',
+    },
+    {
+        key: 'gridYValues',
+        group: 'Grid & Axes',
+        help: 'Specify values to use for horizontal grid lines.',
+        type: 'number[]',
+        required: false,
+    },
     {
         key: 'layers',
         group: 'Customization',

diff --git a/website/src/pages/marimekko/index.js b/website/src/pages/marimekko/index.js
@@ -11,7 +11,7 @@ const getRandomValue = () => random(0, 32)
 const generateData = () =>
     [`it's good`, `it's sweet`, `it's spicy`, 'worth eating', 'worth buying'].map(statement => ({
         statement,
-        value: getRandomValue(),
+        participation: getRandomValue(),
         stronglyAgree: getRandomValue(),
         agree: getRandomValue(),
         disagree: getRandomValue(),
@@ -20,7 +20,7 @@ const generateData = () =>
 
 const initialProperties = {
     id: 'statement',
-    value: 'value',
+    value: 'participation',
     dimensions: [
         {
             id: 'agree strongly',
@@ -42,6 +42,47 @@ const initialProperties = {
     layout: defaultProps.layout,
     offset: defaultProps.offset,
 
+    axisTop: {
+        enable: false,
+        orient: 'top',
+        tickSize: 5,
+        tickPadding: 5,
+        tickRotation: 0,
+        legend: '',
+        legendOffset: 36,
+    },
+    axisRight: {
+        enable: true,
+        orient: 'right',
+        tickSize: 5,
+        tickPadding: 5,
+        tickRotation: 0,
+        legend: '',
+        legendOffset: 0,
+    },
+    axisBottom: {
+        enable: true,
+        orient: 'bottom',
+        tickSize: 5,
+        tickPadding: 5,
+        tickRotation: 0,
+        legend: 'participation',
+        legendOffset: 36,
+        legendPosition: 'middle',
+    },
+    axisLeft: {
+        enable: true,
+        orient: 'left',
+        tickSize: 5,
+        tickPadding: 5,
+        tickRotation: 0,
+        legend: 'opinions',
+        legendOffset: -40,
+        legendPosition: 'middle',
+    },
+    enableGridX: defaultProps.enableGridX,
+    enableGridY: defaultProps.enableGridY,
+
     margin: {
         top: 40,
         right: 80,