Add labels to progress chart

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
 

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'], // optional
+    data: [0.4, 0.6, 0.8]
+}
 ```
 
 ```html

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'], // optional
+  data: [0.2, 0.5, 0.3]
+}
 
 const stackedBarGraphData = {
   labels: ['Test1', 'Test2'],

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.map((pieData, i) => {
-      const r = ((height / 2 - 32) / this.props.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.map((pieData, i) => {
-      const r = ((height / 2 - 32) / this.props.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,6 +42,8 @@ class ProgressChart extends AbstractChart {
       })
     })
 
+    const withLabel = i => data.labels && data.labels[i]
+
     return (
       <View
         style={{
@@ -100,7 +108,7 @@ class ProgressChart extends AbstractChart {
                     x={this.props.width / 2.5 - 24}
                     y={
                       -(this.props.height / 2.5) +
-                      ((this.props.height * 0.8) / this.props.data.length) * i +
+                      ((this.props.height * 0.8) / data.data.length) * i +
                       12
                     }
                   />
@@ -117,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.length) * i +
+                      ((this.props.height * 0.8) / data.data.length) * i +
                       12 * 2
                     }
                   >
-                    {Math.round(100 * this.props.data[i]) + '%'}
+                    {withLabel(i)
+                      ? `${data.labels[i]} ${Math.round(100 * data.data[i])}%`
+                      : `${Math.round(100 * data.data[i])}%`}
                   </Text>
                 )
               })}