From 504cbdc64e3d4ee82466f393fd16bb61ca770c4b Mon Sep 17 00:00:00 2001 From: Wouter Date: Sat, 27 Jul 2019 17:07:04 +0200 Subject: [PATCH 1/2] Add labels to progress chart --- README.md | 5 ++++- data.js | 5 ++++- src/progress-chart.js | 17 ++++++++++------- 3 files changed, 18 insertions(+), 9 deletions(-) diff --git a/README.md b/README.md index af368b0a..4967800e 100644 --- a/README.md +++ b/README.md @@ -154,7 +154,10 @@ const data = { ```js // each value represents a goal ring in Progress chart -const data = [0.4, 0.6, 0.8] +const data = { + labels: ['Swim', 'Bike', 'Run'], + data: [0.4, 0.6, 0.8] +} ``` ```html diff --git a/data.js b/data.js index 6b9d19fc..4eed9bfa 100644 --- a/data.js +++ b/data.js @@ -74,7 +74,10 @@ const pieChartData = [ // Mock data object for Progress -const progressChartData = [0.4, 0.6, 0.8] +const progressChartData = { + labels: ['Swim', 'Bike', 'Run'], + data: [0.2, 0.5, 0.3] +} const stackedBarGraphData = { labels: ['Test1', 'Test2'], diff --git a/src/progress-chart.js b/src/progress-chart.js index 0710f2b0..075adf80 100644 --- a/src/progress-chart.js +++ b/src/progress-chart.js @@ -10,8 +10,8 @@ class ProgressChart extends AbstractChart { const {width, height, style = {}} = this.props const {borderRadius = 0} = style - const pies = this.props.data.map((pieData, i) => { - const r = ((height / 2 - 32) / this.props.data.length) * i + 32 + const pies = this.props.data.data.map((pieData, i) => { + const r = ((height / 2 - 32) / this.props.data.data.length) * i + 32 return Pie({ r, R: r, @@ -23,8 +23,8 @@ class ProgressChart extends AbstractChart { }) }) - const pieBackgrounds = this.props.data.map((pieData, i) => { - const r = ((height / 2 - 32) / this.props.data.length) * i + 32 + const pieBackgrounds = this.props.data.data.map((pieData, i) => { + const r = ((height / 2 - 32) / this.props.data.data.length) * i + 32 return Pie({ r, R: r, @@ -36,6 +36,9 @@ class ProgressChart extends AbstractChart { }) }) + const withLabels = () => this.props.data.labels; + const withLabel = (i) => withLabels() && this.props.data.labels[i]; + return ( @@ -117,11 +120,11 @@ class ProgressChart extends AbstractChart { x={this.props.width / 2.5} y={ -(this.props.height / 2.5) + - ((this.props.height * 0.8) / this.props.data.length) * i + + ((this.props.height * 0.8) / this.props.data.data.length) * i + 12 * 2 } > - {Math.round(100 * this.props.data[i]) + '%'} + {withLabels && withLabel(i) ? `${this.props.data.labels[i]} ${Math.round(100 * this.props.data.data[i])}%` : `${Math.round(100 * this.props.data.data[i])}%`} ) })} From 554c3627f509195a95a2e8f4d308dd527f5f1bd2 Mon Sep 17 00:00:00 2001 From: Herman Starikov Date: Sun, 28 Jul 2019 12:49:20 -0400 Subject: [PATCH 2/2] Refactoring to make this a non-breaking change --- CHANGELOG.md | 3 +++ README.md | 2 +- data.js | 4 ++-- src/progress-chart.js | 27 +++++++++++++++++---------- 4 files changed, 23 insertions(+), 13 deletions(-) diff --git a/CHANGELOG.md b/CHANGELOG.md index 5639db7c..0995749b 100644 --- a/CHANGELOG.md +++ b/CHANGELOG.md @@ -1,5 +1,8 @@ # Changelog +## 3.2.0 +- added optional labels for ProgressChart + ## 3.1.0 - added withVerticalLabels and withHorizontalLabels to LineChart, BarChart and StackedBarChart diff --git a/README.md b/README.md index 4967800e..f47014ba 100644 --- a/README.md +++ b/README.md @@ -155,7 +155,7 @@ const data = { ```js // each value represents a goal ring in Progress chart const data = { - labels: ['Swim', 'Bike', 'Run'], + labels: ['Swim', 'Bike', 'Run'], // optional data: [0.4, 0.6, 0.8] } ``` diff --git a/data.js b/data.js index 4eed9bfa..f99c3d81 100644 --- a/data.js +++ b/data.js @@ -75,8 +75,8 @@ const pieChartData = [ // Mock data object for Progress const progressChartData = { - labels: ['Swim', 'Bike', 'Run'], - data: [0.2, 0.5, 0.3] + labels: ['Swim', 'Bike', 'Run'], // optional + data: [0.2, 0.5, 0.3] } const stackedBarGraphData = { diff --git a/src/progress-chart.js b/src/progress-chart.js index 075adf80..91e82aad 100644 --- a/src/progress-chart.js +++ b/src/progress-chart.js @@ -7,11 +7,17 @@ const Pie = require('paths-js/pie') class ProgressChart extends AbstractChart { render() { - const {width, height, style = {}} = this.props + let {width, height, style = {}, data} = this.props const {borderRadius = 0} = style - const pies = this.props.data.data.map((pieData, i) => { - const r = ((height / 2 - 32) / this.props.data.data.length) * i + 32 + if (Array.isArray(data)) { + data = { + data + } + } + + const pies = data.data.map((pieData, i) => { + const r = ((height / 2 - 32) / data.data.length) * i + 32 return Pie({ r, R: r, @@ -23,8 +29,8 @@ class ProgressChart extends AbstractChart { }) }) - const pieBackgrounds = this.props.data.data.map((pieData, i) => { - const r = ((height / 2 - 32) / this.props.data.data.length) * i + 32 + const pieBackgrounds = data.data.map((pieData, i) => { + const r = ((height / 2 - 32) / data.data.length) * i + 32 return Pie({ r, R: r, @@ -36,8 +42,7 @@ class ProgressChart extends AbstractChart { }) }) - const withLabels = () => this.props.data.labels; - const withLabel = (i) => withLabels() && this.props.data.labels[i]; + const withLabel = i => data.labels && data.labels[i] return ( @@ -120,11 +125,13 @@ class ProgressChart extends AbstractChart { x={this.props.width / 2.5} y={ -(this.props.height / 2.5) + - ((this.props.height * 0.8) / this.props.data.data.length) * i + + ((this.props.height * 0.8) / data.data.length) * i + 12 * 2 } > - {withLabels && withLabel(i) ? `${this.props.data.labels[i]} ${Math.round(100 * this.props.data.data[i])}%` : `${Math.round(100 * this.props.data.data[i])}%`} + {withLabel(i) + ? `${data.labels[i]} ${Math.round(100 * data.data[i])}%` + : `${Math.round(100 * data.data[i])}%`} ) })}