From 59067e5da8511af5fbb23e51242f36cc9981b91f Mon Sep 17 00:00:00 2001 From: Clem Freeman Date: Tue, 25 Apr 2017 19:58:42 -0700 Subject: [PATCH 01/10] Add initial arcPieChart files --- src/ArcPieChart/ArcPieChart.js | 5 +++++ src/index.js | 1 + stories/ArcPieChart.story.js | 18 ++++++++++++++++++ stories/index.js | 2 ++ 4 files changed, 26 insertions(+) create mode 100644 src/ArcPieChart/ArcPieChart.js create mode 100644 stories/ArcPieChart.story.js diff --git a/src/ArcPieChart/ArcPieChart.js b/src/ArcPieChart/ArcPieChart.js new file mode 100644 index 00000000..fd9b39e4 --- /dev/null +++ b/src/ArcPieChart/ArcPieChart.js @@ -0,0 +1,5 @@ +import React from 'react'; + +const ArcPieChart = () =>

test

; + +export default ArcPieChart; diff --git a/src/index.js b/src/index.js index 5cfa8b0e..d2496798 100644 --- a/src/index.js +++ b/src/index.js @@ -17,6 +17,7 @@ export LeafletMap from './LeafletMap/LeafletMap'; export Dropdown from './Dropdown/Dropdown'; export Icon from './Icon/Icon'; export Scatterplot from './Scatterplot/Scatterplot'; +export ArcPieChart from './ArcPieChart/ArcPieChart'; // export utils as well for broader use export isClient from './utils/isClient'; diff --git a/stories/ArcPieChart.story.js b/stories/ArcPieChart.story.js new file mode 100644 index 00000000..4d07e5d2 --- /dev/null +++ b/stories/ArcPieChart.story.js @@ -0,0 +1,18 @@ +import React from 'react'; +import { storiesOf } from '@kadira/storybook'; +import { ArcPieChart } from '../src'; + +const displayName = ArcPieChart.displayName || 'ArcPieChart'; +const title = 'Simple usage'; +const description = 'Arc pie chart'; + +const demoCode = () => ( + +); + +export default () => storiesOf(displayName, module) + .addWithInfo( + title, + description, + demoCode, + ); diff --git a/stories/index.js b/stories/index.js index fa551296..fadabd7a 100644 --- a/stories/index.js +++ b/stories/index.js @@ -19,6 +19,7 @@ import dropdownStory from './Dropdown.story'; import rechartsPie from './RechartsPie.story'; import heroStory from './Hero.story'; import scatterplotStory from './Scatterplot.story'; +import arcPieChartStory from './ArcPieChart.story'; import '../src/global.styles.css'; import '../assets/leaflet.css'; @@ -48,3 +49,4 @@ rechartsPie(); leafletMap(); heroStory(); scatterplotStory(); +arcPieChartStory(); From 16f6d7c78030a0f4c409c8bf42312e06c7a49434 Mon Sep 17 00:00:00 2001 From: Clem Freeman Date: Thu, 27 Apr 2017 19:50:22 -0700 Subject: [PATCH 02/10] Copy ArrivalPieChart into ArcPieChart component --- src/ArcPieChart/ArcPieChart.js | 90 +++++++++++++++++++++++++- src/ArcPieChart/ArcPieChart.styles.css | 34 ++++++++++ 2 files changed, 123 insertions(+), 1 deletion(-) create mode 100644 src/ArcPieChart/ArcPieChart.styles.css diff --git a/src/ArcPieChart/ArcPieChart.js b/src/ArcPieChart/ArcPieChart.js index fd9b39e4..5cb390b5 100644 --- a/src/ArcPieChart/ArcPieChart.js +++ b/src/ArcPieChart/ArcPieChart.js @@ -1,5 +1,93 @@ import React from 'react'; +import { PieChart, Pie, ResponsiveContainer, Text, Cell, Curve, Legend } from 'recharts'; +import styles from './ArcPieChart.styles.css'; -const ArcPieChart = () =>

test

; + +const propsData = [ + { name: 'Homeless on arrival', value: 31.7 }, +]; + +const propsYears = [2011, 2013, 2015]; +const propsActive = 2011; + +const COLORS = ['#75568D', '#AAA4AB']; + + +const pieLabel = (options) => { + if (options.payload.name === 'DontLabelMe') { + return null; + } + + return ( + + {`${options.payload.value}%`} + + ); +}; + +const labelLine = options => ( + +); + +const ArcPieChart = props => ( +
+
+
    + { + propsYears.map((item) => { + const active = item === propsActive ? styles.linkActive : ''; + return ( +
  • + {item} +
    • + ); + }) + } +
+
+ + + + + { + propsData.map((entry, idx) => + ) + } + + + + +
+); export default ArcPieChart; diff --git a/src/ArcPieChart/ArcPieChart.styles.css b/src/ArcPieChart/ArcPieChart.styles.css new file mode 100644 index 00000000..a8d6e9a1 --- /dev/null +++ b/src/ArcPieChart/ArcPieChart.styles.css @@ -0,0 +1,34 @@ +.container { + color:#726371; + font-weight: bold; + width: 50%; +} + +.years { + display: flex; + justify-content: space-between; +} + +.listItem { + display: inline; + padding: 10px; + color: #AAA4AB; + flex: inherit; +} + +.link { + display: inline-block; + padding:5px; + font-size: 1.3em; +} + +.link:hover { + color: black; + cursor: pointer; +} + +.linkActive { + font-weight: bold; + color: black; + border-bottom: 3px solid black; +} From d9882ca9ba61285f440027143b4d1e43e4e95795 Mon Sep 17 00:00:00 2001 From: Clem Freeman Date: Thu, 27 Apr 2017 20:12:36 -0700 Subject: [PATCH 03/10] Fix css issues --- src/ArcPieChart/ArcPieChart.js | 12 +++--------- src/ArcPieChart/ArcPieChart.styles.css | 7 +++++-- 2 files changed, 8 insertions(+), 11 deletions(-) diff --git a/src/ArcPieChart/ArcPieChart.js b/src/ArcPieChart/ArcPieChart.js index 5cb390b5..4d028b4f 100644 --- a/src/ArcPieChart/ArcPieChart.js +++ b/src/ArcPieChart/ArcPieChart.js @@ -1,5 +1,5 @@ import React from 'react'; -import { PieChart, Pie, ResponsiveContainer, Text, Cell, Curve, Legend } from 'recharts'; +import { PieChart, Pie, ResponsiveContainer, Text, Cell, Legend } from 'recharts'; import styles from './ArcPieChart.styles.css'; @@ -20,9 +20,8 @@ const pieLabel = (options) => { return ( { ); }; -const labelLine = options => ( - -); - const ArcPieChart = props => (
-
+
    { propsYears.map((item) => { @@ -58,7 +53,6 @@ const ArcPieChart = props => ( - Date: Thu, 27 Apr 2017 20:44:13 -0700 Subject: [PATCH 04/10] Add props to component --- src/ArcPieChart/ArcPieChart.js | 31 ++++++++++--------------------- stories/ArcPieChart.story.js | 12 +++++++++++- 2 files changed, 21 insertions(+), 22 deletions(-) diff --git a/src/ArcPieChart/ArcPieChart.js b/src/ArcPieChart/ArcPieChart.js index 4d028b4f..9ff6cbd7 100644 --- a/src/ArcPieChart/ArcPieChart.js +++ b/src/ArcPieChart/ArcPieChart.js @@ -2,17 +2,6 @@ import React from 'react'; import { PieChart, Pie, ResponsiveContainer, Text, Cell, Legend } from 'recharts'; import styles from './ArcPieChart.styles.css'; - -const propsData = [ - { name: 'Homeless on arrival', value: 31.7 }, -]; - -const propsYears = [2011, 2013, 2015]; -const propsActive = 2011; - -const COLORS = ['#75568D', '#AAA4AB']; - - const pieLabel = (options) => { if (options.payload.name === 'DontLabelMe') { return null; @@ -33,16 +22,16 @@ const pieLabel = (options) => { ); }; -const ArcPieChart = props => ( +const ArcPieChart = ({ dataSet, setName, labels, colors }) => (
      { - propsYears.map((item) => { - const active = item === propsActive ? styles.linkActive : ''; + labels.map((label) => { + const active = label === setName ? styles.linkActive : ''; return ( -
    • - {item} +
    • + {label}
      • ); }) @@ -56,7 +45,7 @@ const ArcPieChart = props => ( ( label={pieLabel} > { - propsData.map((entry, idx) => - ) + dataSet.map((entry, idx) => + ) } diff --git a/stories/ArcPieChart.story.js b/stories/ArcPieChart.story.js index 4d07e5d2..6d264eb9 100644 --- a/stories/ArcPieChart.story.js +++ b/stories/ArcPieChart.story.js @@ -6,8 +6,18 @@ const displayName = ArcPieChart.displayName || 'ArcPieChart'; const title = 'Simple usage'; const description = 'Arc pie chart'; +const dataSet = [ + { name: 'Homeless on arrival', value: 31.7 }, + { name: 'Smorg', value: 27 }, +]; + +const labels = ['2011', '2013', '2015']; +const setName = '2011'; + +const colors = ['#75568D', '#AAA4AB']; + const demoCode = () => ( - + ); export default () => storiesOf(displayName, module) From 7cdd9d2303b5dccc811f001116ba3781fc0ff8f9 Mon Sep 17 00:00:00 2001 From: Clem Freeman Date: Sat, 29 Apr 2017 12:13:32 -0700 Subject: [PATCH 05/10] Fix center label for multiple data points --- src/ArcPieChart/ArcPieChart.js | 117 +++++++++++++++++---------------- stories/ArcPieChart.story.js | 7 +- 2 files changed, 63 insertions(+), 61 deletions(-) diff --git a/src/ArcPieChart/ArcPieChart.js b/src/ArcPieChart/ArcPieChart.js index 9ff6cbd7..3731832f 100644 --- a/src/ArcPieChart/ArcPieChart.js +++ b/src/ArcPieChart/ArcPieChart.js @@ -2,75 +2,76 @@ import React from 'react'; import { PieChart, Pie, ResponsiveContainer, Text, Cell, Legend } from 'recharts'; import styles from './ArcPieChart.styles.css'; -const pieLabel = (options) => { - if (options.payload.name === 'DontLabelMe') { - return null; - } +const ArcPieChart = ({ dataSet, setNames, selectedSet, selectedData, colors }) => { + const pieLabel = (options) => { + const { cx, cy, payload } = options; + if (payload.name !== selectedData) { + return null; + } + return ( + + {`${payload.value}%`} + + ); + }; return ( - - {`${options.payload.value}%`} - - ); -}; - -const ArcPieChart = ({ dataSet, setName, labels, colors }) => ( -
      -
      -
        - { - labels.map((label) => { - const active = label === setName ? styles.linkActive : ''; +
        +
        +
          + { + setNames.map((name) => { + const active = name === selectedSet ? styles.linkActive : ''; return ( -
        • - {label} +
        • + {name}
          • ); }) } -
        -
        - - - +
        + + - { + + { dataSet.map((entry, idx) => ) } - - + - - -
      -); + payload={[{ + color: colors[0], + type: 'circle', + value: dataSet[0].name, + }]} + wrapperStyle={{ bottom: '-35px' }} + /> + + +
      + ); +}; export default ArcPieChart; diff --git a/stories/ArcPieChart.story.js b/stories/ArcPieChart.story.js index 6d264eb9..f5efa049 100644 --- a/stories/ArcPieChart.story.js +++ b/stories/ArcPieChart.story.js @@ -11,13 +11,14 @@ const dataSet = [ { name: 'Smorg', value: 27 }, ]; -const labels = ['2011', '2013', '2015']; -const setName = '2011'; +const setNames = ['2011', '2013', '2015']; +const selectedSet = '2011'; +const selectedData = 'Smorg'; const colors = ['#75568D', '#AAA4AB']; const demoCode = () => ( - + ); export default () => storiesOf(displayName, module) From e011a7723dac32dd8d8eab18a10e379ac62531f4 Mon Sep 17 00:00:00 2001 From: Clem Freeman Date: Sat, 29 Apr 2017 12:30:41 -0700 Subject: [PATCH 06/10] Fix color selection --- src/ArcPieChart/ArcPieChart.js | 17 +++++++++-------- 1 file changed, 9 insertions(+), 8 deletions(-) diff --git a/src/ArcPieChart/ArcPieChart.js b/src/ArcPieChart/ArcPieChart.js index 3731832f..65a69d5c 100644 --- a/src/ArcPieChart/ArcPieChart.js +++ b/src/ArcPieChart/ArcPieChart.js @@ -22,6 +22,8 @@ const ArcPieChart = ({ dataSet, setNames, selectedSet, selectedData, colors }) = ); }; + const selectColor = name => name === selectedData ? colors[0] : colors[1]; + return (
      @@ -45,7 +47,7 @@ const ArcPieChart = ({ dataSet, setNames, selectedSet, selectedData, colors }) = { - dataSet.map((entry, idx) => - ) + dataSet.map(data => + ) } ({ + color: selectColor(data.name), type: 'circle', - value: dataSet[0].name, - }]} + value: data.name, + }))} wrapperStyle={{ bottom: '-35px' }} /> From 376c801cdf538197ef678e255e4cad08107a491b Mon Sep 17 00:00:00 2001 From: Clem Freeman Date: Sat, 29 Apr 2017 13:51:04 -0700 Subject: [PATCH 07/10] Convert to class component with local state --- src/ArcPieChart/ArcPieChart.js | 112 ++++++++++++++++++--------------- stories/ArcPieChart.story.js | 35 ++++++++--- 2 files changed, 87 insertions(+), 60 deletions(-) diff --git a/src/ArcPieChart/ArcPieChart.js b/src/ArcPieChart/ArcPieChart.js index 65a69d5c..3d5bf846 100644 --- a/src/ArcPieChart/ArcPieChart.js +++ b/src/ArcPieChart/ArcPieChart.js @@ -2,10 +2,20 @@ import React from 'react'; import { PieChart, Pie, ResponsiveContainer, Text, Cell, Legend } from 'recharts'; import styles from './ArcPieChart.styles.css'; -const ArcPieChart = ({ dataSet, setNames, selectedSet, selectedData, colors }) => { - const pieLabel = (options) => { +class ArcPieChart extends React.Component { + constructor(props) { + super(props); + this.state = { + selectedSet: props.dataSets[0], + selectedData: props.dataSets[0].data[0], + colors: ['#75568D', '#AAA4AB'], + }; + this.getColor = this.getColor.bind(this); + this.pieLabel = this.pieLabel.bind(this); + } + pieLabel(options) { const { cx, cy, payload } = options; - if (payload.name !== selectedData) { + if (payload.name !== this.state.selectedData.name) { return null; } return ( @@ -20,59 +30,61 @@ const ArcPieChart = ({ dataSet, setNames, selectedSet, selectedData, colors }) = {`${payload.value}%`} ); - }; - - const selectColor = name => name === selectedData ? colors[0] : colors[1]; - - return ( -
      -
      -
        - { - setNames.map((name) => { - const active = name === selectedSet ? styles.linkActive : ''; + } + getColor(name) { + return name === this.state.selectedData.name ? this.state.colors[0] : this.state.colors[1]; + } + render() { + return ( +
        +
        +
          + { + this.props.dataSets.map((data) => { + const active = data.name === this.state.selectedSet.name ? styles.linkActive : ''; return ( -
        • - {name} +
        • + {data.name}
          • ); }) } -
        -
        - - - +
        + + - { - dataSet.map(data => - ) + + { + this.state.selectedSet.data.map(data => + ) } - - ({ - color: selectColor(data.name), - type: 'circle', - value: data.name, - }))} - wrapperStyle={{ bottom: '-35px' }} - /> - - -
      - ); -}; + + ({ + color: this.getColor(data.name), + type: 'circle', + value: data.name, + }))} + wrapperStyle={{ bottom: '-35px' }} + /> + + +
      + ); + } +} export default ArcPieChart; diff --git a/stories/ArcPieChart.story.js b/stories/ArcPieChart.story.js index f5efa049..87f453db 100644 --- a/stories/ArcPieChart.story.js +++ b/stories/ArcPieChart.story.js @@ -6,19 +6,34 @@ const displayName = ArcPieChart.displayName || 'ArcPieChart'; const title = 'Simple usage'; const description = 'Arc pie chart'; -const dataSet = [ - { name: 'Homeless on arrival', value: 31.7 }, - { name: 'Smorg', value: 27 }, +const dataSets = [ + { + name: 'Monsters', + data: [ + { name: 'Boggarts', value: 86 }, + { name: 'Acromantula', value: 14 }, + ], + }, + { + name: 'People', + data: [ + { name: 'Muggles', value: 50 }, + { name: 'Witches', value: 25 }, + { name: 'Wizards', value: 25 }, + ], + }, + { + name: 'Other', + data: [ + { name: 'Giants', value: 20 }, + { name: 'House Elves', value: 15 }, + { name: 'Goblins', value: 65 }, + ], + }, ]; -const setNames = ['2011', '2013', '2015']; -const selectedSet = '2011'; -const selectedData = 'Smorg'; - -const colors = ['#75568D', '#AAA4AB']; - const demoCode = () => ( - + ); export default () => storiesOf(displayName, module) From 43af8f101fe939b339aab08eb2fd086cee6a40b4 Mon Sep 17 00:00:00 2001 From: Clem Freeman Date: Sat, 29 Apr 2017 14:18:58 -0700 Subject: [PATCH 08/10] Add data selection to component --- src/ArcPieChart/ArcPieChart.js | 10 ++++++++++ 1 file changed, 10 insertions(+) diff --git a/src/ArcPieChart/ArcPieChart.js b/src/ArcPieChart/ArcPieChart.js index 3d5bf846..4594c073 100644 --- a/src/ArcPieChart/ArcPieChart.js +++ b/src/ArcPieChart/ArcPieChart.js @@ -12,6 +12,7 @@ class ArcPieChart extends React.Component { }; this.getColor = this.getColor.bind(this); this.pieLabel = this.pieLabel.bind(this); + this.selectData = this.selectData.bind(this); } pieLabel(options) { const { cx, cy, payload } = options; @@ -34,6 +35,12 @@ class ArcPieChart extends React.Component { getColor(name) { return name === this.state.selectedData.name ? this.state.colors[0] : this.state.colors[1]; } + selectData(payload) { + this.setState(prevState => ({ + ...prevState, + selectedData: this.state.selectedSet.data.find(data => data.name === payload.name), + })); + } render() { return (
      @@ -65,6 +72,7 @@ class ArcPieChart extends React.Component { outerRadius={'185%'} fill="#e3dde8" label={this.pieLabel} + onClick={this.selectData} > { this.state.selectedSet.data.map(data => @@ -77,8 +85,10 @@ class ArcPieChart extends React.Component { color: this.getColor(data.name), type: 'circle', value: data.name, + name: data.name, }))} wrapperStyle={{ bottom: '-35px' }} + onClick={this.selectData} /> From 42575bb09f688594806fab2c1b1f09e6bc60a373 Mon Sep 17 00:00:00 2001 From: Clem Freeman Date: Sat, 29 Apr 2017 14:43:48 -0700 Subject: [PATCH 09/10] Add selecting data sets --- src/ArcPieChart/ArcPieChart.js | 21 ++++++++++++++++++--- 1 file changed, 18 insertions(+), 3 deletions(-) diff --git a/src/ArcPieChart/ArcPieChart.js b/src/ArcPieChart/ArcPieChart.js index 4594c073..3c21668e 100644 --- a/src/ArcPieChart/ArcPieChart.js +++ b/src/ArcPieChart/ArcPieChart.js @@ -13,6 +13,7 @@ class ArcPieChart extends React.Component { this.getColor = this.getColor.bind(this); this.pieLabel = this.pieLabel.bind(this); this.selectData = this.selectData.bind(this); + this.selectSet = this.selectSet.bind(this); } pieLabel(options) { const { cx, cy, payload } = options; @@ -41,6 +42,14 @@ class ArcPieChart extends React.Component { selectedData: this.state.selectedSet.data.find(data => data.name === payload.name), })); } + selectSet(name) { + const newSet = this.props.dataSets.find(set => set.name === name); + this.setState(prevState => ({ + ...prevState, + selectedSet: newSet, + selectedData: newSet.data[0], + })); + } render() { return (
      @@ -48,10 +57,16 @@ class ArcPieChart extends React.Component {
        { this.props.dataSets.map((data) => { - const active = data.name === this.state.selectedSet.name ? styles.linkActive : ''; + const name = data.name; + const active = name === this.state.selectedSet.name ? styles.linkActive : ''; return ( -
      • - {data.name} +
      • + this.selectSet(name)} + > + {name} +
        • ); }) From bb4925a40cfc560729f17945a980c11adde655be Mon Sep 17 00:00:00 2001 From: Clem Freeman Date: Sat, 29 Apr 2017 20:22:43 -0700 Subject: [PATCH 10/10] Fix eslint issues --- src/ArcPieChart/ArcPieChart.js | 42 +++++++++++++++++++--------------- 1 file changed, 23 insertions(+), 19 deletions(-) diff --git a/src/ArcPieChart/ArcPieChart.js b/src/ArcPieChart/ArcPieChart.js index 3c21668e..57d7ba13 100644 --- a/src/ArcPieChart/ArcPieChart.js +++ b/src/ArcPieChart/ArcPieChart.js @@ -1,4 +1,4 @@ -import React from 'react'; +import React, { PropTypes } from 'react'; import { PieChart, Pie, ResponsiveContainer, Text, Cell, Legend } from 'recharts'; import styles from './ArcPieChart.styles.css'; @@ -15,6 +15,9 @@ class ArcPieChart extends React.Component { this.selectData = this.selectData.bind(this); this.selectSet = this.selectSet.bind(this); } + getColor(name) { + return name === this.state.selectedData.name ? this.state.colors[0] : this.state.colors[1]; + } pieLabel(options) { const { cx, cy, payload } = options; if (payload.name !== this.state.selectedData.name) { @@ -33,9 +36,6 @@ class ArcPieChart extends React.Component { ); } - getColor(name) { - return name === this.state.selectedData.name ? this.state.colors[0] : this.state.colors[1]; - } selectData(payload) { this.setState(prevState => ({ ...prevState, @@ -56,21 +56,21 @@ class ArcPieChart extends React.Component {
          { - this.props.dataSets.map((data) => { - const name = data.name; - const active = name === this.state.selectedSet.name ? styles.linkActive : ''; - return ( -
        • - this.selectSet(name)} - > - {name} - -
          • - ); - }) - } + this.props.dataSets.map((data) => { + const name = data.name; + const active = name === this.state.selectedSet.name ? styles.linkActive : ''; + return ( +
        • + this.selectSet(name)} + > + {name} + +
          • + ); + }) + }
        @@ -112,4 +112,8 @@ class ArcPieChart extends React.Component { } } +ArcPieChart.propTypes = { + dataSets: PropTypes.array, +}; + export default ArcPieChart;