feat(marimekko): add stories

packages/core/src/components/Container.js

@@ -56,7 +56,7 @@ Container.propTypes = {
     children: PropTypes.element.isRequired,
     isInteractive: PropTypes.bool,
     renderWrapper: PropTypes.bool,
-    theme: PropTypes.object.isRequired,
+    theme: PropTypes.object,
     animate: PropTypes.bool,
     motionStiffness: PropTypes.number,
     motionDamping: PropTypes.number,

packages/marimekko/src/props.ts

@@ -1,7 +1,8 @@
-import { LayerId, Layout } from './types'
+import { LayerId, Layout, OffsetId } from './types'
 
 export const defaultProps = {
     layout: 'vertical' as Layout,
+    offset: 'none' as OffsetId,
 
     layers: ['grid', 'axes', 'bars', 'legends'] as LayerId[],
 

packages/marimekko/src/types.ts

@@ -1,4 +1,11 @@
 import * as React from 'react'
+import {
+    stackOffsetDiverging,
+    stackOffsetExpand,
+    stackOffsetNone,
+    stackOffsetSilhouette,
+    stackOffsetWiggle,
+} from 'd3-shape'
 import { Box, Dimensions, Theme, SvgDefsAndFill, ModernMotionProps } from '@nivo/core'
 import { OrdinalColorScaleConfig, InheritedColorConfig } from '@nivo/colors'
 import { LegendProps } from '@nivo/legends'
@@ -70,11 +77,32 @@ export interface TooltipProps<RawDatum> {
 
 export type Layout = 'horizontal' | 'vertical'
 
+export const offsetById = {
+    // Applies a zero baseline and normalizes the values
+    // for each point such that the topline is always one.
+    expand: stackOffsetExpand,
+    // Positive values are stacked above zero, negative values
+    // are stacked below zero, and zero values are stacked at zero.
+    diverging: stackOffsetDiverging,
+    // Applies a zero baseline.
+    none: stackOffsetNone,
+    // Shifts the baseline down such that the center of the streamgraph
+    // is always at zero.
+    silouhette: stackOffsetSilhouette,
+    // Shifts the baseline so as to minimize the weighted wiggle of layers.
+    // This offset is recommended for streamgraphs in conjunction with the inside-out order.
+    // See Stacked Graphs—Geometry & Aesthetics by Bryon & Wattenberg for more information.
+    wiggle: stackOffsetWiggle,
+}
+
+export type OffsetId = keyof typeof offsetById
+
 export type CommonProps<RawDatum> = {
     valueFormat?: string | ValueFormatter
 
     margin: Box
     layout: Layout
+    offset: OffsetId
 
     // colors, theme and border
     colors: OrdinalColorScaleConfig<Omit<DimensionDatum<RawDatum>, 'color' | 'fill'>>

packages/marimekko/stories/marimekko.stories.tsx

@@ -0,0 +1,116 @@
+import React from 'react'
+import { storiesOf } from '@storybook/react'
+import { withKnobs } from '@storybook/addon-knobs'
+import { Marimekko, Layout } from '../src'
+
+const commonProps = {
+    width: 900,
+    height: 500,
+    id: 'id',
+    value: 'value',
+    layout: 'vertical' as Layout,
+    dimensions: [
+        {
+            id: 'cool stuff',
+            value: 'cool',
+        },
+        {
+            id: 'not cool stuff',
+            value: 'notCool',
+        },
+        {
+            id: 'YABAI!',
+            value: 'yabai',
+        },
+    ],
+    data: [
+        {
+            id: 'A',
+            value: 42,
+            cool: 9,
+            notCool: 13,
+            yabai: 32,
+        },
+        {
+            id: 'B',
+            value: 7,
+            cool: 12,
+            notCool: 24,
+            yabai: 17,
+        },
+        {
+            id: 'C',
+            value: 15,
+            cool: 21,
+            notCool: 8,
+            yabai: 12,
+        },
+    ],
+}
+
+const stories = storiesOf('Marimekko', module)
+
+stories.addDecorator(withKnobs)
+
+stories.add('default', () => <Marimekko {...commonProps} />)
+
+stories.add('using arrays for data', () => {
+    type RawDatum = [string, number, number, number, number]
+
+    const data: RawDatum[] = [
+        ['A', 42, 9, 3, 31],
+        ['B', 21, 13, 21, 9],
+        ['C', 34, 7, 12, 32],
+    ]
+
+    return (
+        <Marimekko<RawDatum>
+            {...commonProps}
+            data={data}
+            id={0}
+            value={1}
+            dimensions={[
+                {
+                    id: 'cool stuff',
+                    value: 2,
+                },
+                {
+                    id: 'not cool stuff',
+                    value: 3,
+                },
+                {
+                    id: 'YABAI!',
+                    value: 4,
+                },
+            ]}
+        />
+    )
+})
+
+stories.add('diverging', () => {
+    const data = [
+        {
+            id: 'A',
+            value: 42,
+            cool: 9,
+            notCool: -13,
+            yabai: 32,
+        },
+        {
+            id: 'B',
+            value: 7,
+            cool: 12,
+            notCool: -24,
+            yabai: 17,
+        },
+        {
+            id: 'C',
+            value: 15,
+            cool: 21,
+            notCool: -8,
+            yabai: 12,
+        },
+    ]
+
+    return <Marimekko {...commonProps} data={data} />
+})

website/src/data/components/marimekko/meta.yml

@@ -7,7 +7,11 @@ Marimekko:
   tags: 
     - svg
     - isomorphic
-  stories: []
+  stories:
+    - label: using arrays for data
+      link: marimekko--using-arrays-for-data
+    - label: diverging chart
+      link: marimekko--diverging
   description: |
     The `Marimekko` component is somehow similar to a bar chart,
     but it allows you to use an extra dimension to compute the