Skip to content

Commit

Permalink
feat(pie): cleanup website PieCanvas demo
Browse files Browse the repository at this point in the history
  • Loading branch information
Raphaël Benitte authored and Raphaël Benitte committed Jun 4, 2018
1 parent 52f6a9e commit 31ef9e5
Show file tree
Hide file tree
Showing 8 changed files with 180 additions and 93 deletions.
2 changes: 2 additions & 0 deletions packages/nivo-pie/src/Pie.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -31,6 +31,7 @@ class Pie extends Component {
startAngle,
endAngle,
padAngle,
fit,
innerRadius,
cornerRadius,

Expand Down Expand Up @@ -95,6 +96,7 @@ class Pie extends Component {
sortByValue={sortByValue}
startAngle={startAngle}
endAngle={endAngle}
fit={fit}
padAngle={padAngle}
innerRadius={innerRadius}
cornerRadius={cornerRadius}
Expand Down
52 changes: 49 additions & 3 deletions website/src/components/charts/pie/Pie.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -7,7 +7,6 @@
* file that was distributed with this source code.
*/
import React, { Component } from 'react'
import omit from 'lodash/omit'
import { Link } from 'react-router-dom'
import MediaQuery from 'react-responsive'
import ChartHeader from '../../ChartHeader'
Expand All @@ -20,12 +19,59 @@ import properties from './props'
import nivoTheme from '../../../nivoTheme'
import config from '../../../config'
import propsMapper from './propsMapper'
import defaultProps from './defaultProps'

export default class Pie extends Component {
state = {
settings: {
...omit(defaultProps, ['width', 'height']),
margin: {
top: 40,
right: 80,
bottom: 80,
left: 80,
},

startAngle: 0,
endAngle: 360,
sortByValue: false,
innerRadius: 0.5,
padAngle: 0.7,
cornerRadius: 3,
fit: true,

// Styling
colors: 'nivo',
colorBy: 'id',

// border
borderWidth: 0,
borderColor: { type: 'inherit:darker', gamma: 0.6 },

// radial labels
enableRadialLabels: true,
radialLabel: 'id',
radialLabelsSkipAngle: 10,
radialLabelsTextXOffset: 6,
radialLabelsTextColor: { type: 'custom', color: '#333333' },
radialLabelsLinkOffset: 0,
radialLabelsLinkDiagonalLength: 16,
radialLabelsLinkHorizontalLength: 24,
radialLabelsLinkStrokeWidth: 1,
radialLabelsLinkColor: { type: 'inherit' },

// slice labels
enableSlicesLabels: true,
sliceLabel: 'value',
slicesLabelsSkipAngle: 10,
slicesLabelsTextColor: { type: 'custom', color: '#333333' },

// motion
animate: true,
motionStiffness: 90,
motionDamping: 15,

// isInteractive
isInteractive: true,

'custom tooltip example': false,
tooltip: null,
theme: nivoTheme,
Expand Down
51 changes: 40 additions & 11 deletions website/src/components/charts/pie/PieAPI.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -7,11 +7,9 @@
* file that was distributed with this source code.
*/
import React, { Component } from 'react'
import omit from 'lodash/omit'
import APIClient from '../../api-client/APIClient'
import PieControls from './PieControls'
import propsMapper from './propsMapper'
import defaultProps from './defaultProps'

export default class PieAPI extends Component {
render() {
Expand All @@ -23,15 +21,46 @@ export default class PieAPI extends Component {
controls={PieControls}
propsMapper={propsMapper}
defaultProps={{
...omit(defaultProps, [
'startAngle',
'endAngle',
'sortByValue',
'animate',
'motionDamping',
'motionStiffness',
'isInteractive',
]),
width: 800,
height: 800,

margin: {
top: 40,
right: 80,
bottom: 80,
left: 80,
},

innerRadius: 0.5,
padAngle: 0.7,
cornerRadius: 3,

// Styling
colors: 'nivo',
colorBy: 'id',

// border
borderWidth: 0,
borderColor: { type: 'inherit:darker', gamma: 0.6 },

// radial labels
enableRadialLabels: true,
radialLabel: 'id',
radialLabelsSkipAngle: 10,
radialLabelsTextXOffset: 6,
radialLabelsTextColor: { type: 'custom', color: '#333333' },
radialLabelsLinkOffset: 0,
radialLabelsLinkDiagonalLength: 16,
radialLabelsLinkHorizontalLength: 24,
radialLabelsLinkStrokeWidth: 1,
radialLabelsLinkColor: { type: 'inherit' },

// slice labels
enableSlicesLabels: true,
sliceLabel: 'value',
slicesLabelsSkipAngle: 10,
slicesLabelsTextColor: { type: 'custom', color: '#333333' },

data: JSON.stringify(this.props.data, null, ' '),
}}
/>
Expand Down
71 changes: 59 additions & 12 deletions website/src/components/charts/pie/PieCanvas.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -7,7 +7,6 @@
* file that was distributed with this source code.
*/
import React, { Component } from 'react'
import omit from 'lodash/omit'
import { Link } from 'react-router-dom'
import MediaQuery from 'react-responsive'
import ChartHeader from '../../ChartHeader'
Expand All @@ -20,12 +19,61 @@ import properties from './props'
import nivoTheme from '../../../nivoTheme'
import config from '../../../config'
import propsMapper from './propsMapper'
import defaultProps from './defaultProps'

export default class Pie extends Component {
state = {
settings: {
...omit(defaultProps, ['width', 'height']),
margin: {
top: 40,
right: 80,
bottom: 80,
left: 80,
},

pixelRatio: window && window.devicePixelRatio ? window.devicePixelRatio : 1,

startAngle: 0,
endAngle: 360,
sortByValue: false,
innerRadius: 0.5,
padAngle: 0.7,
cornerRadius: 3,
fit: true,

// Styling
colors: 'nivo',
colorBy: 'id',

// border
borderWidth: 0,
borderColor: { type: 'inherit:darker', gamma: 0.6 },

// radial labels
enableRadialLabels: true,
radialLabel: 'id',
radialLabelsSkipAngle: 10,
radialLabelsTextXOffset: 6,
radialLabelsTextColor: { type: 'custom', color: '#333333' },
radialLabelsLinkOffset: 0,
radialLabelsLinkDiagonalLength: 16,
radialLabelsLinkHorizontalLength: 24,
radialLabelsLinkStrokeWidth: 1,
radialLabelsLinkColor: { type: 'inherit' },

// slice labels
enableSlicesLabels: true,
sliceLabel: 'value',
slicesLabelsSkipAngle: 10,
slicesLabelsTextColor: { type: 'custom', color: '#333333' },

// motion
animate: true,
motionStiffness: 90,
motionDamping: 15,

// isInteractive
isInteractive: true,

'custom tooltip example': false,
tooltip: null,
theme: nivoTheme,
Expand Down Expand Up @@ -65,19 +113,18 @@ export default class Pie extends Component {
defaults: PieDefaultProps,
})

const header = <ChartHeader chartClass="Pie" tags={['canvas']} />
const header = <ChartHeader chartClass="PieCanvas" tags={['canvas']} />

const description = (
<div className="chart-description">
<p>
Generates a pie chart from an array of data, each datum must have an id and a
value property.<br />
Note that margin object does not take radial labels into account,&nbsp; so you
should adjust it to leave enough room for it.
<p className="description">
A variation around the <Link to="/bar">Pie</Link> component. Well suited for
large data sets as it does not impact DOM tree depth and does not involve React
diffing stuff for children (not that useful when using canvas), however you'll
lose the isomorphic ability and transitions.
</p>
<p className="description">
The responsive alternative of this component is&nbsp;
<code>ResponsivePie</code>.
The responsive alternative of this component is <code>ResponsiveCanvasPie</code>.
</p>
<p className="description">
This component is available in the{' '}
Expand All @@ -98,7 +145,7 @@ export default class Pie extends Component {
or <Link to="/pie/api">try it using the API client</Link>. You can also see more
example usages in{' '}
<a
href={`${config.storybookUrl}?selectedKind=Pie&selectedStory=default`}
href={`${config.storybookUrl}?selectedKind=PieCanvas&selectedStory=default`}
target="_blank"
rel="noopener noreferrer"
>
Expand Down
2 changes: 1 addition & 1 deletion website/src/components/charts/pie/PieControls.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -14,7 +14,7 @@ import properties from './props'

const groupsByScope = {
Pie: getPropertiesGroupsControls(properties, 'Pie'),
PieCanvas: getPropertiesGroupsControls(properties, 'Pie'),
PieCanvas: getPropertiesGroupsControls(properties, 'PieCanvas'),
api: getPropertiesGroupsControls(properties, 'api'),
}

Expand Down
61 changes: 0 additions & 61 deletions website/src/components/charts/pie/defaultProps.js
View file

This file was deleted.

Loading

0 comments on commit 31ef9e5

Please sign in to comment.