Feature/rn svg charts 4.0 (#2)

Align with react-native-svg-charts version 4.0.0

README.md

@@ -15,12 +15,15 @@ Click an example to see the code! 💪
 # Examples
 
 * [AreaChart](#areachart)
+* [StackedAreaChart](#stackedareachart)
 * [Bar](#bar)
 * [Line](#linechart)
 * [ProgressCircle](#progresscircle)
+* [PieChart](#piechart)
 
 ## AreaChart
 [<img src="https://raw.githubusercontent.com/jesperlekland/react-native-svg-charts-examples/master/screenshots/area-chart.png" width=33% />](./storybook/stories/area-chart/with-line.js)
+[<img src="https://raw.githubusercontent.com/jesperlekland/react-native-svg-charts-examples/master/screenshots/grid-min-max.png" width=33% />](./storybook/stories/grid-min-max.js)
 [<img src="https://raw.githubusercontent.com/jesperlekland/react-native-svg-charts-examples/master/screenshots/gradient.png" width=33% />](./storybook/stories/area-chart/with-gradient.js)
 [<img src="https://raw.githubusercontent.com/jesperlekland/react-native-svg-charts-examples/master/screenshots/partial-chart-area.png" width=33% />](./storybook/stories/partial-chart/area-chart.js)
 [<img src="https://raw.githubusercontent.com/jesperlekland/react-native-svg-charts-examples/master/screenshots/layered-charts.png" width=33% />](./storybook/stories/layered-charts.js)
@@ -30,6 +33,10 @@ Click an example to see the code! 💪
 
 [<img src="https://raw.githubusercontent.com/jesperlekland/react-native-svg-charts-examples/master/screenshots/grouped-bar-chart.png" width=33% />](./storybook/stories/bar-chart/with-multiple-data-sets.js)
 [<img src="https://raw.githubusercontent.com/jesperlekland/react-native-svg-charts-examples/master/screenshots/gradient-bar.png" width=33% />](./storybook/stories/bar-chart/with-gradient.js)
+[<img src="https://raw.githubusercontent.com/jesperlekland/react-native-svg-charts-examples/master/screenshots/bar-with-different-bars.png" width=33% />](./storybook/stories/bar-chart/with-different-bars.js)
+[<img src="https://raw.githubusercontent.com/jesperlekland/react-native-svg-charts-examples/master/screenshots/bar-horizontal.png" width=33% />](./storybook/stories/bar-chart/horizontal.js)
+[<img src="https://raw.githubusercontent.com/jesperlekland/react-native-svg-charts-examples/master/screenshots/bar-horizontal-with-axis.png" width=33% />](./storybook/stories/bar-chart/horizontal-with-axis.js)
+[<img src="https://raw.githubusercontent.com/jesperlekland/react-native-svg-charts-examples/master/screenshots/bar-horizontal-with-labels.png" width=33% />](./storybook/stories/bar-chart/horizontal-with-labels.js)
 [<img src="https://raw.githubusercontent.com/jesperlekland/react-native-svg-charts-examples/master/screenshots/scale-band.png" width=33% />](./storybook/stories/x-axis/scale-band.js)
 
 ## LineChart
@@ -40,10 +47,22 @@ Click an example to see the code! 💪
 [<img src="https://raw.githubusercontent.com/jesperlekland/react-native-svg-charts-examples/master/screenshots/custom-grid.png" width=33% />](./storybook/stories/custom-grid.js)
 [<img src="https://raw.githubusercontent.com/jesperlekland/react-native-svg-charts-examples/master/screenshots/extras.png" width=33% />](./storybook/stories/extras.js)
 
+## StackedAreaChart
+
+[<img src="https://raw.githubusercontent.com/jesperlekland/react-native-svg-charts-examples/master/screenshots/area-stack-with-y-axis.png" width=33% />](./storybook/stories/area-stack/with-y-axis.js)
+
 ## ProgressCircle
 
 [<img src="https://raw.githubusercontent.com/jesperlekland/react-native-svg-charts-examples/master/screenshots/progress-gauge.png" width=33% />](./storybook/stories/progress-gauge/index.js)
 
+## PieChart
+
+[<img src="https://raw.githubusercontent.com/jesperlekland/react-native-svg-charts-examples/master/screenshots/pie-chart-with-labels.png" width=33% />](./storybook/stories/pie-chart/with-labels.js)
+[<img src="https://raw.githubusercontent.com/jesperlekland/react-native-svg-charts-examples/master/screenshots/pie-with-different-arcs.png" width=33% />](./storybook/stories/pie-chart/with-different-arcs.js)
+[<img src="https://raw.githubusercontent.com/jesperlekland/react-native-svg-charts-examples/master/screenshots/pie-with-centered-labels.png" width=33% />](./storybook/stories/pie-chart/with-centered-labels.js)
+[<img src="https://raw.githubusercontent.com/jesperlekland/react-native-svg-charts-examples/master/screenshots/pie-with-image-labels.png" width=33% />](./storybook/stories/pie-chart/with-image-labels.js)
+
+
 
 ## License
 [MIT](./LICENSE)

assets/images/index.js

@@ -0,0 +1,9 @@
+export default {
+    memes: {
+        1: require('./meme-1.png'),
+        2: require('./meme-2.png'),
+        3: require('./meme-3.gif'),
+        4: require('./meme-4.jpg'),
+        5: require('./meme-5.png'),
+    }
+}

package.json

@@ -8,27 +8,27 @@
     "storybook": "storybook start -p 7007"
   },
   "dependencies": {
-    "react": "16.2.0",
-    "react-native": "0.53.3",
-    "react-native-svg": "^6.2.2",
-    "react-native-svg-charts": "^3.0.2-test",
     "d3-array": "^1.2.0",
     "d3-scale": "^1.0.6",
     "d3-shape": "^1.0.6",
-    "date-fns": "^1.28.5"
+    "date-fns": "^1.28.5",
+    "react": "16.2.0",
+    "react-native": "0.53.3",
+    "react-native-svg": "^6.2.2",
+    "react-native-svg-charts": "^4.0.0"
   },
   "devDependencies": {
-    "babel-jest": "22.4.1",
-    "babel-preset-react-native": "4.0.0",
-    "jest": "22.4.2",
-    "react-test-renderer": "16.2.0",
-    "@storybook/react-native": "^3.3.14",
     "@storybook/addon-actions": "^3.3.14",
     "@storybook/addon-links": "^3.3.14",
     "@storybook/addons": "^3.3.14",
+    "@storybook/react-native": "^3.3.14",
     "babel-core": "^6.26.0",
+    "babel-jest": "22.4.1",
+    "babel-preset-react-native": "4.0.0",
+    "jest": "22.4.2",
+    "prop-types": "^15.6.0",
     "react-dom": "16.2.0",
-    "prop-types": "^15.6.0"
+    "react-test-renderer": "16.2.0"
   },
   "jest": {
     "preset": "react-native"

storybook/stories/bar-chart/horizontal-grouped.js

@@ -0,0 +1,98 @@
+import React from 'react'
+import { View } from 'react-native'
+import { YAxis, BarChart, Grid } from 'react-native-svg-charts'
+import { Defs, Line, LinearGradient, Stop } from 'react-native-svg'
+import * as scale from 'd3-scale'
+
+class BarChartExample extends React.PureComponent {
+
+    render() {
+
+        const data = [
+            {
+                value: 50,
+                label: 'Default',
+            },
+            {
+                value: 10,
+                label: 'PurpleOpacity',
+                svg: {
+                    fill: 'rgba(134, 65, 244, 0.5)',
+                },
+            },
+            {
+                value: 40,
+                label: 'PurpleDash',
+                svg: {
+                    stroke: 'purple',
+                    strokeWidth: 2,
+                    fill: 'white',
+                    strokeDasharray: [ 4, 2 ],
+                },
+            },
+            {
+                value: 95,
+                label: 'Gradient',
+                svg: {
+                    fill: 'url(#gradient)',
+                },
+            },
+            {
+                value: 85,
+                label: 'Green',
+                svg: {
+                    fill: 'green',
+                },
+            },
+        ]
+
+        const Gradient = () => (
+            <Defs key={'gradient'}>
+                <LinearGradient id={'gradient'} x1={'0'} y={'0%'} x2={'100%'} y2={'0%'}>
+                    <Stop offset={'0%'} stopColor={'rgb(134, 65, 244)'}/>
+                    <Stop offset={'100%'} stopColor={'rgb(66, 194, 244)'}/>
+                </LinearGradient>
+            </Defs>
+        )
+
+        return (
+            <View style={{ flexDirection: 'row', height: 500, paddingVertical: 16 }}>
+                <YAxis
+                    data={data}
+                    yAccessor={({ index }) => index}
+                    scale={scale.scaleBand}
+                    contentInset={{ top: 10, bottom: 10 }}
+                    spacing={0.2}
+                    formatLabel={(_, index) => data[ index ].label}
+                />
+                <BarChart
+                    style={{ flex: 1, marginLeft: 8 }}
+                    data={[
+                        {
+                            data,
+                            svg: { fill: 'orange' },
+                        },
+                        {
+                            data: [ ...data ].reverse(),
+                            svg: { fill: 'red' },
+                        },
+                        { data },
+                    ]}
+                    yAccessor={({ item }) => item.value}
+                    svg={{
+                        fill: 'blue',
+                    }}
+                    horizontal={true}
+                    extras={[ Gradient ]}
+                    contentInset={{ top: 10, bottom: 10 }}
+                    spacing={0.2}
+                    gridMin={0}
+                    renderGrid={Grid.Vertical}
+                />
+            </View>
+        )
+    }
+
+}
+
+export default BarChartExample

storybook/stories/bar-chart/horizontal-with-axis.js

@@ -0,0 +1,61 @@
+import React from 'react'
+import { View } from 'react-native'
+import { BarChart, Grid, YAxis } from 'react-native-svg-charts'
+import * as scale from 'd3-scale'
+
+class HorizontaBarChartWithYAxis extends React.PureComponent {
+
+    render() {
+
+        const data = [
+            {
+                value: 50,
+                label: 'One',
+            },
+            {
+                value: 10,
+                label: 'Two',
+            },
+            {
+                value: 40,
+                label: 'Three',
+            },
+            {
+                value: 95,
+                label: 'Four',
+            },
+            {
+                value: 85,
+                label: 'Five',
+            },
+        ]
+
+
+        return (
+            <View style={{ flexDirection: 'row', height: 200, paddingVertical: 16 }}>
+                <YAxis
+                    data={data}
+                    yAccessor={({ index }) => index}
+                    scale={scale.scaleBand}
+                    contentInset={{ top: 10, bottom: 10 }}
+                    spacing={0.2}
+                    formatLabel={(_, index) => data[ index ].label}
+                />
+                <BarChart
+                    style={{ flex: 1, marginLeft: 8 }}
+                    data={data}
+                    horizontal={true}
+                    yAccessor={({ item }) => item.value}
+                    svg={{ fill: 'rgba(134, 65, 244, 0.8)' }}
+                    contentInset={{ top: 10, bottom: 10 }}
+                    spacing={0.2}
+                    gridMin={0}
+                    renderGrid={Grid.Vertical}
+                />
+            </View>
+        )
+    }
+
+}
+
+export default HorizontaBarChartWithYAxis

storybook/stories/bar-chart/horizontal-with-labels.js

@@ -0,0 +1,46 @@
+import React from 'react'
+import { View } from 'react-native'
+import { BarChart, Grid } from 'react-native-svg-charts'
+import { Text } from 'react-native-svg'
+
+class BarChartHorizontalWithLabels extends React.PureComponent {
+
+    render() {
+
+        const data = [ 50, 10, 40, 95, 85 ]
+
+        const CUT_OFF = 50
+        const Label = ({ item: value, x, y, index, bandwidth }) => (
+            <Text
+                key={index}
+                x={value > CUT_OFF ? x(value) - 10 : x(value) + 10}
+                y={y(index) + (bandwidth / 2)}
+                fontSize={14}
+                fill={value > CUT_OFF ? 'white' : 'black'}
+                alignmentBaseline={'middle'}
+                textAnchor={value > CUT_OFF ? 'end' : 'start'}
+            >
+                {value}
+            </Text>
+        )
+
+        return (
+            <View style={{ flexDirection: 'row', height: 200, paddingVertical: 16 }}>
+                <BarChart
+                    style={{ flex: 1, marginLeft: 8 }}
+                    data={data}
+                    horizontal={true}
+                    svg={{ fill: 'rgba(134, 65, 244, 0.8)' }}
+                    contentInset={{ top: 10, bottom: 10 }}
+                    spacing={0.2}
+                    gridMin={0}
+                    renderDecorator={Label}
+                    renderGrid={Grid.Vertical}
+                />
+            </View>
+        )
+    }
+
+}
+
+export default BarChartHorizontalWithLabels

storybook/stories/bar-chart/horizontal.js

@@ -0,0 +1,29 @@
+import React from 'react'
+import { View } from 'react-native'
+import { BarChart } from 'react-native-svg-charts'
+
+class BarChartExample extends React.PureComponent {
+
+    render() {
+
+        const data = [ 50, 10, 40, 95, 85 ]
+
+        return (
+            <View style={{ flexDirection: 'row', height: 200, paddingVertical: 16 }}>
+                <BarChart
+                    style={{ flex: 1, marginLeft: 8 }}
+                    data={data}
+                    horizontal={true}
+                    svg={{ fill: 'rgba(134, 65, 244, 0.8)', }}
+                    contentInset={{ top: 10, bottom: 10 }}
+                    spacing={0.2}
+                    gridMin={0}
+                    showGrid={false}
+                />
+            </View>
+        )
+    }
+
+}
+
+export default BarChartExample