feat(pie): add pie stories

plouc · Aug 9, 2017 · a123c89 · a123c89
1 parent b5bfda2
commit a123c89
Show file tree

Hide file tree

Showing 4 changed files with 101 additions and 5 deletions.
diff --git a/src/components/charts/pie/Pie.js b/src/components/charts/pie/Pie.js
@@ -94,7 +94,7 @@ export default class Pie extends Component {
 
         // theming
         theme: {},
-        colors: Nivo.defaults.colorRange,
+        colors: 'nivo',
         colorBy: 'id',
 
         // motion

diff --git a/src/components/charts/pie/PieRadialLabels.js b/src/components/charts/pie/PieRadialLabels.js
@@ -98,6 +98,7 @@ export default class PieRadialLabels extends Component {
                             <g transform={`translate(${labelPosition.x}, ${labelPosition.y})`}>
                                 <text
                                     textAnchor={textAnchor}
+                                    dy="0.3em"
                                     style={{
                                         fill: textColor(d.data, theme),
                                         fontSize: theme.axis.fontSize,

diff --git a/src/lib/charts/bar/index.js b/src/lib/charts/bar/index.js
@@ -69,7 +69,7 @@ export const generateGroupedBars = (data, width, height, color, { xPadding = 0 }
 
     const bars = []
     data.forEach((serie, serieIndex) => {
-        serie.data.forEach(d => {
+        serie.data.forEach((d, i) => {
             const barWidth = xScale.bandwidth() / data.length
             const x = xScale(d.x) + barWidth * serieIndex
             const y = yScale(d.y)
@@ -79,7 +79,7 @@ export const generateGroupedBars = (data, width, height, color, { xPadding = 0 }
 
             if (barWidth > 0 && barHeight > 0) {
                 bars.push({
-                    key: `${serie.id}.${d.x}`,
+                    key: `${serie.id}.${i}`,
                     value,
                     x,
                     y,
@@ -133,7 +133,7 @@ export const generateStackedBars = (data, width, height, color, { xPadding = 0 }
 
     const bars = []
     stackedData.forEach(serie => {
-        serie.data.forEach(d => {
+        serie.data.forEach((d, i) => {
             const x = xScale(d.x)
             const barWidth = xScale.bandwidth()
             const y = yScale(d.y1)
@@ -143,7 +143,7 @@ export const generateStackedBars = (data, width, height, color, { xPadding = 0 }
 
             if (barWidth > 0 && barHeight > 0) {
                 bars.push({
-                    key: `${serie.id}.${d.x}`,
+                    key: `${serie.id}.${i}`,
                     value,
                     x,
                     y,

diff --git a/stories/charts/pie.stories.js b/stories/charts/pie.stories.js
@@ -0,0 +1,95 @@
+import React from 'react'
+import { storiesOf } from '@storybook/react'
+import { withKnobs, select } from '@storybook/addon-knobs'
+import { generateProgrammingLanguageStats } from 'nivo-generators'
+import '../style.css'
+import { Pie } from '../../src'
+
+const commonProperties = {
+    width: 600,
+    height: 600,
+    margin: { top: 80, right: 120, bottom: 80, left: 120 },
+    data: generateProgrammingLanguageStats(true, 9).map(d => ({
+        id: d.label,
+        ...d,
+    })),
+    animate: true,
+}
+
+const stories = storiesOf('Pie', module)
+
+stories
+    .addDecorator(story =>
+        <div className="wrapper">
+            {story()}
+        </div>
+    )
+    .addDecorator(withKnobs)
+
+stories.add('default', () => <Pie {...commonProperties} />)
+
+stories.add('donut', () => <Pie {...commonProperties} innerRadius={0.6} />)
+
+stories.add('fancy slices', () =>
+    <Pie
+        {...commonProperties}
+        innerRadius={0.6}
+        padAngle={0.5}
+        cornerRadius={5}
+        radialLabelsLinkColor="inherit"
+        radialLabelsLinkStrokeWidth={3}
+        radialLabelsTextColor="inherit:darker(1.2)"
+    />
+)
+
+stories.add('custom radial label', () =>
+    <Pie
+        {...commonProperties}
+        innerRadius={0.6}
+        padAngle={0.5}
+        cornerRadius={5}
+        radialLabel={d => `${d.id}: ${d.value}`}
+        radialLabelsLinkColor="inherit"
+        radialLabelsLinkStrokeWidth={3}
+        radialLabelsTextColor="inherit:darker(1.2)"
+        enableSlicesLabels={false}
+    />
+)
+
+/*
+stories.add('with custom curve', () =>
+    <Radar {...commonProperties} gridShape="linear" curve="catmullRomClosed" />
+)
+
+stories.add('linear grid shape', () =>
+    <Radar
+        {...commonProperties}
+        gridShape="linear"
+        curve={select('curve', curveOptions, 'linearClosed')}
+    />
+)
+
+stories.add('with markers label', () =>
+    <Radar
+        {...commonProperties}
+        curve={select('curve', curveOptions, 'linearClosed')}
+        gridShape="linear"
+        markersSize={10}
+        markersBorderColor="#fff"
+        markersBorderWidth={2}
+        enableMarkersLabel={true}
+        gridLabelOffset={36}
+    />
+)
+
+stories.add('abusing markers label', () =>
+    <Radar
+        {...commonProperties}
+        curve={select('curve', curveOptions, 'catmullRomClosed')}
+        markersSize={32}
+        markersLabelYOffset={3}
+        enableMarkersLabel={true}
+        gridLabelOffset={36}
+    />
+)
+*/