Release/4.1.0 (#82)

v4.1.0

Author: JesperLekland

CHANGELOG.md

@@ -1,64 +1,21 @@
-### Awesome new BarChart (breaking changes)
 
-The BarChart has been rewritten from the ground up. It works the same as before
-but have some nice new features. The expectation on the `data` props has changed to better align with the other charts APIs, see the README and [examples](https://github.com/JesperLekland/react-native-svg-charts-examples) for more info.
+* **Support for styles xAxis labels**
 
-* **Complex objects**
+  XAxis now supports complex data argument with `svg` property to style each label individually. See [examples repo](https://github.com/JesperLekland/react-native-svg-charts-examples) for usage.
+  Thanks to @fqueiruga for this ❤️
 
-    As before you can still pass in an array of just numbers, but you can now also pass in an array of complex objects! These objects can contain any data you want but you must also
-    pass in a `yAccessor` prop to tell the chart what the actual value for the item is (same as Line/AreaChart).
-    The entire object will be returned to you as `item` in the `renderDecorator` callback, allowing for nice label rendering.
-    The BarChart looks for a `svg` property on each entry, allowing you to set custom svg props for each bar (!!!).
-    The BarChart itself also takes an svg prop that will be passed to all bars (item specific svg properties will not be overriden)
 
-    All in all you should be able to do what you did before, and then some 😄 Check out the [examples repo](https://github.com/JesperLekland/react-native-svg-charts-examples) for some nice use examples
+* **Support for backgroundColor in ProgressCircle**
 
+  You can now customize the progress "background" color
 
-* **Horizontal support**
+* **Support for strokeWidth in ProgressCircle**
 
-    `horizontal={true}`, how nice is that!? 😄 Supports both the standard barChart and the grouped one (multiple data sets).
-
-* **Extras support**
-
-    BarChart now has first class support for the extras prop.
-Render a clip path or a gradient in a specific bar, up to you!
-
-* **Spacing is replaced**
-
-    We've replaced `spacing` with `spacingInner` and `spacingOuter` to give more control to the user. Same default as before - 0.05
-This is true for all places where `spacing` was being used.
-
-### YAxis supports scaleBand and spacing
-
-In order to have a nice YAxis along with the horizontal BarChart we have now added support for `scale=d3.scaleBand` to the yAxis.
-This in turn comes with added props `spacingInner` and `spacingOuter` to align nicely with your BarChart.
-
-
-### PieChart
-
-* **data entry supports `svg` prop**
-
-    PieChart has been upgraded to take the `svg` prop on each data entry, allowing you to customise your PieChart even further
-We've also added the `valueAccessor` prop to allow you to use different dataStructures, not forcing you to name the value "value" and aligning with the other APIs.
-
-* **data entry supports `arc` prop**
-
-    You can now customize your arcs on an individual level. Want one arc to be bigger than the reset? No problem!
-
-Check out [examples repo](https://github.com/JesperLekland/react-native-svg-charts-examples) for examples
-
-### WaterfallChart is removed
-
-Due to low usage and high maintenance the WaterfallChart is removed.
-
-### Cleaned up README
-
-The README is now more focused on the basic usage of this library. Any cool custom behavior has been moved to the [examples repo](https://github.com/JesperLekland/react-native-svg-charts-examples).
-This is the go to place where you want inspiration on how to do cool things with your charts or if you've ever asked yourself "can I do this with react-native-svg-charts?"
-
-We want to make sure that the README is concise and to the point. Here we want to explain the APIs and not much more.
-All charts and their APIs will still be documented here, but as an MVP.
+  Customize the width of the ProgressCircle
 
+* **Prettier transition in ProgressCircle from progress to background**
 
+  Old implementation used to have a small cutoff between the progress and the background.
+  Now the progress seems to be "inside" the circle instead.
 
 

README.md

@@ -72,7 +72,7 @@ yarn storybook
 | data | **required** | An array of arbitrary data - use prop `xAccessor`/`yAccessor`to tell the chart about the data structure|
 | yAccessor | ({ item }) => item | A function that takes each entry of `data` (named "item") as well as the index and returns the y-value of that entry |
 | xAccessor | ({ index }) => index | Same as `yAccessor` but returns the x-value of that entry|
-| yScale | d3Scale.scaleLinear | A function that determines the scale of said axis (only tested with scaleLinear, scaleTime & scaleBand )| 
+| yScale | d3Scale.scaleLinear | A function that determines the scale of said axis (only tested with scaleLinear, scaleTime & scaleBand )|
 | xScale | d3Scale.scaleLinear | Same as `yScale` but for the x axis |
 | svg | `{}` | an object containing  all the props that should be passed down to the underlying `react-native-svg` component. [See available props](https://github.com/react-native-community/react-native-svg#common-props)|
 | animate | true | PropTypes.bool |
@@ -257,8 +257,9 @@ Also see [Common Props](#common-props)
 
 | Property | Default | Description |
 | --- | --- | --- |
-| data | **required** |  The data prop in a barChart can look exactly like in a Line- or AreaChart, i.e an array of just numbers or complex objects. It can however also be an array with several data sets. See [the examples repo](https://github.com/JesperLekland/react-native-svg-charts-examples)|
+| data | **required** |  The data prop in a barChart can look exactly like in a Line- or AreaChart, i.e an array of just numbers or complex objects. It can however also be an array with several data sets. A data object can contain a `svg` property which allows you two override styles on that specific object. See [the examples repo](https://github.com/JesperLekland/react-native-svg-charts-examples)|
 | horizontal | false | Boolean whether or not the bars should be horizontal |
+| svg | `{}` | Default svg props **for all bars**. Supports all svg props an svg path normally supports. This styles will be overriden if there are specific styles for a given data object  |
 | spacingInner | 0.05 | Spacing between the bars (or groups of bars) |
 | spacingOuter | 0.05 | Spacing outside of the bars (or groups of bars). Percentage of one bars width |
 | contentInset | `{ top: 0, left: 0, right: 0, bottom: 0 }` | PropTypes.shape |
@@ -466,8 +467,10 @@ class ProgressCircleExample extends React.PureComponent {
 | --- | --- | --- |
 | progress | **required** | PropTypes.number.isRequired |
 | progressColor | 'black' | PropTypes.any |
+| backgroundColor | '#ECECEC' |  PropTypes.any |
 | startAngle | `0` | PropTypes.number |
 | endAngle | `Math.PI * 2` |  PropTypes.number |
+| strokeWidth | 5 |  PropTypes.number |
 
 ### YAxis
 
@@ -524,6 +527,8 @@ class YAxisExample extends React.PureComponent {
 | --- | --- | --- |
 | scale | `d3Scale.scaleLinear`| Should be the same as passed into the charts `yScale`, *or* d3Scale.scaleBand if used in conjunction with a horizontal BarChart |
 | svg | `{}` | supports all svg props an svg text normally supports |
+| spacingInner | 0.05 | Spacing between the labels. Only applicable if `scale=d3Scale.scaleBand` and should then be equal to `spacingInner` prop on the actual BarChart |
+| spacingOuter | 0.05 | Spacing outside of the labels. Only applicable if `scale=d3Scale.scaleBand` and should then be equal to `spacingOuter` prop on the actual BarChart  |
 | formatLabel | `value => {}` | A utility function to format the text before it is displayed, e.g `value => "$" + value |
 | contentInset | { top: 0, bottom: 0 } | Used to sync layout with chart (if same prop used there) |
 | min | undefined | Used to sync layout with chart (if gridMin is used there) |
@@ -580,11 +585,12 @@ class XAxisExample extends React.PureComponent {
 
 | Property | Default | Description |
 | --- | --- | --- |
-| values | **required** | An array of values to render on the xAxis. Should preferably have the same length as the chart's dataPoints. |
+| data | **required** | An array of values or objects to render on the xAxis. Should preferably have the same length as the chart's dataPoints. If a complex object is used instead of a simple value, a `xAccessor`  prop **is required** to calculate the axis' extent. A data object can contain a `svg` property which allows you to override styles on that specific object  |
 | scale | `d3Scale.scaleLinear`| Should be the same as passed into the charts `xScale` |
-| spacing | 0.05 | Only applicable if `scale=d3Scale.scaleBand` and should then be equal to `spacing` prop on the actual BarChart.   |
-| svg | `{}` | supports all svg props an svg text normally supports |
-| formatLabel | `value => value` | A utility function to format the text before it is displayed, e.g `value => "day" + value. Passes back the value provided by the `xAccessor` |
+| spacingInner | 0.05 | Spacing between the labels. Only applicable if `scale=d3Scale.scaleBand` and should then be equal to `spacingInner` prop on the actual BarChart |
+| spacingOuter | 0.05 | Spacing between the labels. Only applicable if `scale=d3Scale.scaleBand` and should then be equal to `spacingOuter` prop on the actual BarChart |
+| svg | `{}` | Default svg props **for all labels**. Supports all svg props an svg text normally supports. This styles will be overriden if there are specific styles for a given data object  |
+| formatLabel | `value => value` | A utility function to format the text before it is displayed, e.g `value => "day" + value`. Passes back the value provided by the `xAccessor` |
 | contentInset | { left: 0, right: 0 } | Used to sync layout with chart (if same prop used there) |
 
 
@@ -630,8 +636,8 @@ There might be additional parameters sent to the `extras` functions as well, dep
 
 The `LineChart` passes the svg path data that rendered the line. (argument name `line`)
 
-The `AreaChart` passes both the area svg path as well as the 
-svg path for the line following the upper bounds of the area. 
+The `AreaChart` passes both the area svg path as well as the
+svg path for the line following the upper bounds of the area.
 (argument name `area` and `line` respectively)
 
 Take a look in the source code for additional details.

package.json

@@ -1,6 +1,6 @@
 {
   "name": "react-native-svg-charts",
-  "version": "4.0.1",
+  "version": "4.1.0",
   "private": false,
   "description": "Customizable charts (Line, Bar, Area, Pie, Circle, Progress) for React Native",
   "main": "src/index.js",

src/area-chart.js

@@ -1,11 +1,10 @@
-import React from 'react'
 import * as shape from 'd3-shape'
 import PropTypes from 'prop-types'
 import Chart from './chart'
 
-class AreaChart extends React.PureComponent {
+class AreaChart extends Chart {
 
-    _createPaths = ({ data, x, y }) => {
+    createPaths({ data, x, y }) {
         const { curve, start } = this.props
 
         const area = shape.area()
@@ -29,15 +28,6 @@ class AreaChart extends React.PureComponent {
             line,
         }
     }
-
-    render() {
-        return (
-            <Chart
-                createPaths={this._createPaths}
-                {...this.props}
-            />
-        )
-    }
 }
 
 AreaChart.propTypes = {

src/chart.js

@@ -20,6 +20,10 @@ class Chart extends PureComponent {
         this.setState({ height, width })
     }
 
+    createPaths() {
+        throw 'Extending "Chart" requires you to override "createPaths'
+    }
+
     render() {
 
         const {
@@ -29,7 +33,6 @@ class Chart extends PureComponent {
             yScale,
             xScale,
             style,
-            createPaths,
             animate,
             animationDuration,
             showGrid,
@@ -75,7 +78,7 @@ class Chart extends PureComponent {
             .domain(xExtent)
             .range([ left, width - right ])
 
-        const paths = createPaths({
+        const paths = this.createPaths({
             data: mappedData,
             x,
             y,

src/line-chart.js

@@ -1,10 +1,9 @@
-import React from 'react'
 import * as shape from 'd3-shape'
 import Chart from './chart'
 
-class LineChart extends React.PureComponent {
+class LineChart extends Chart {
 
-    _createPaths = ({ data, x, y }) => {
+    createPaths({ data, x, y }) {
         const { curve } = this.props
 
         const line = shape.line()
@@ -19,16 +18,6 @@ class LineChart extends React.PureComponent {
             line,
         }
     }
-
-    render() {
-
-        return (
-            <Chart
-                createPaths={this._createPaths}
-                {...this.props}
-            />
-        )
-    }
 }
 
 LineChart.propTypes = {

src/progress-circle.js

@@ -21,6 +21,8 @@ class ProgressCircle extends PureComponent {
         const {
                   style,
                   progressColor,
+            backgroundColor,
+            strokeWidth,
                   startAngle,
                   endAngle,
                   animate,
@@ -38,21 +40,20 @@ class ProgressCircle extends PureComponent {
         }
 
         const data = [
+            {
+                key: 'rest',
+                value: 1 - progress,
+                color: backgroundColor,
+            },
             {
                 key: 'progress',
                 value: progress,
                 color: progressColor,
             },
-            {
-                key: 'rest',
-                value: 1 - progress,
-                color: '#ECECEC',
-            },
         ]
 
         const pieSlices = shape
             .pie()
-            .sort(null)
             .startAngle(startAngle)
             .endAngle(endAngle)
             (data.map(d => d.value))
@@ -63,9 +64,9 @@ class ProgressCircle extends PureComponent {
                 ...slice,
                 path: shape.arc()
                     .outerRadius(outerDiameter / 2)  // Radius of the pie
-                    .innerRadius((outerDiameter / 2) - 5)  // Inner radius: to create a donut or pie
-                    .startAngle(slice.startAngle)
-                    .endAngle(slice.endAngle)
+                    .innerRadius((outerDiameter / 2) - strokeWidth)  // Inner radius: to create a donut or pie
+                    .startAngle(index === 0 ? startAngle : slice.startAngle)
+                    .endAngle(index === 0 ? endAngle : slice.endAngle)
                     .cornerRadius(45)
                     (),
             }
@@ -103,14 +104,18 @@ ProgressCircle.propTypes = {
     progress: PropTypes.number.isRequired,
     style: PropTypes.any,
     progressColor: PropTypes.any,
+    backgroundColor: PropTypes.any,
+    strokeWidth: PropTypes.number,
     startAngle: PropTypes.number,
     endAngle: PropTypes.number,
     animate: PropTypes.bool,
     animateDuration: PropTypes.number,
 }
 
 ProgressCircle.defaultProps = {
-    progressColor: '#22B6B0',
+    progressColor: 'black',
+    backgroundColor: '#ECECEC',
+    strokeWidth: 5,
     startAngle: 0,
     endAngle: Math.PI * 2,
 }

src/x-axis.js

@@ -39,8 +39,6 @@ class XAxis extends PureComponent {
 
         if (scale === d3Scale.scaleBand) {
 
-            // use index as domain identifier instead of value since
-            // same value can occur at several places in dataPoints
             x
                 .paddingInner([ spacingInner ])
                 .paddingOuter([ spacingOuter ])
@@ -93,12 +91,15 @@ class XAxis extends PureComponent {
                             // causes rendering issues
                             width > 0 &&
                             ticks.map((value, index) => {
+                                const { svg: valueSvg = {} } = data[ index ] || {}
+
                                 return (
                                     <SVGText
                                       textAnchor={'middle'}
                                       originX={x(value)}
                                       alignmentBaseline={'hanging'}
                                       {...svg}
+                                      {...valueSvg}
                                       key={index}
                                       x={x(value)}
                                     >
@@ -115,7 +116,10 @@ class XAxis extends PureComponent {
 }
 
 XAxis.propTypes = {
-    data: PropTypes.array.isRequired,
+    data: PropTypes.arrayOf(PropTypes.oneOfType([
+        PropTypes.number,
+        PropTypes.object,
+    ])).isRequired,
     labelStyle: PropTypes.any,
     spacingInner: PropTypes.number,
     spacingOuter: PropTypes.number,

storybook/stories/index.js

@@ -24,6 +24,7 @@ import Extras from './extras'
 import XAxisScaleBandExample from './x-axis/scale-band'
 import XAxisScaleTimeExample from './x-axis/scale-time'
 import XAxisScaleLinearExample from './x-axis/scale-linear'
+import XAxisDataObjectExample from './x-axis/data-object'
 
 import YAxisExample from './y-axis'
 
@@ -75,6 +76,7 @@ storiesOf('Axes', module)
     .add('XAxis - scaleLinear', () => <XAxisScaleLinearExample/>)
     .add('XAxis - scaleTime', () => <XAxisScaleTimeExample/>)
     .add('XAxis - scaleBand', () => <XAxisScaleBandExample/>)
+    .add('XAxis - data object', () => <XAxisDataObjectExample />)
 
 storiesOf('Others', module)
     .addDecorator(getStory => <ShowcaseCard>{ getStory() }</ShowcaseCard>)

storybook/stories/progress-gauge/index.js

@@ -1,18 +1,18 @@
 import React from 'react'
-import ProgressCircle from '../../../src/progress-circle'
+import { ProgressCircle } from 'react-native-svg-charts'
 
 class ProgressCircleExample extends React.PureComponent {
 
     render() {
 
         return (
-            <ProgressCircle
-                style={ { height: 200 } }
-                progress={ 0.7 }
-                progressColor={'rgb(134, 65, 244)'}
-                startAngle={ -Math.PI * 0.8 }
-                endAngle={ Math.PI * 0.8 }
-            />
+                <ProgressCircle
+                    style={{ height: 200, marginTop: 10 }}
+                    progress={0.7}
+                    progressColor={'rgb(134, 65, 244)'}
+                    startAngle={-Math.PI * 0.8}
+                    endAngle={Math.PI * 0.8}
+                />
         )
     }