Consolidate react-native MPChart libraries

[mikemonteith]

It seems that there are a few different people working on very similar projects. Maybe it would be best if we all focused our efforts in once place?

https://github.com/hongyin163/react-native-chart-android/issues/1 https://github.com/Jpadilla1/rn-ios-charts-experiment/issues/1 https://github.com/jeromewu/react-native-mpchart/issues/1 https://github.com/mikemonteith/react-native-mpchart/issues/1

[mikemonteith]

This is the best way I could think of getting everyone in one thread to discuss.

It seems like @jeromewu https://www.npmjs.com/package/react-native-mpchart has registered the best npm package name already.

I haven't had time to look at everyone's code but this lib has the most github stars.

Who wants to be the project owner?

[joddiy]

Hi, i'm very happy to see there are some guys want to do something awesome together, i'm interesting in your advice so much. This lib is a demo of our TV project, and just includes Bar Chart, Line Chart and Pie Chart which we want to use. The biggest problem I think is to make a elegant pass parameters format to accommodate more type of chart, maybe we can discuss for more details.

[mikemonteith]

I'm working on a project that need Pie Chart, Bar Chart and Line Chart, but I would be interested in supporting all charts and as many features of MPChart as possible. The way I started working was to create a separate react component for each chart type.

example usage:

var {
  PieChart,
  LineChart,
  BarChart
} = require('react-native-mpchart');

<PieChart values={...} />
<BarChart values={...} />

[Jpadilla1]

Hi all, I think that this is an awesome idea to work together and make this lib really good. Apart from my experiment repo with the ios-charts library (clone lib of MPChart in iOS) I have a working lib (react-native-ios-charts) that currently supports Bar Chart and Line Chart with almost all of their properties packed in a single config prop. For example, for Line Chart these are the properties that the lib currently supports https://github.com/Jpadilla1/react-native-ios-charts/blob/master/components/LineChart.js#L140-L410

Example usage:

var { BarChart } = require('react-native-ios-charts');

var MyComponent = React.createClass({
  render: function() {
    return (
      <View style={styles.container}>
        <BarChart
          config={{
            dataSets: [{
              values: [1, 2, 3, 10],
              colors: ['green'],
              label: '2015',
            }, {
              values: [3, 2, 1, 5],
              colors: ['red'],
              label: '2014',
            }],
            labels: ['a', 'b', 'c', 'd'],
          }}
          style={styles.chart}
        />
      </View>
    );
  }
});

I don't mind being the owner if everyone agrees :)

[joddiy]

In the beginning of our project, I thought about this problem for a long time, I was thinking about that list as much as possible or list a little type of parameters such as dataSource, chartStyles, yAxis and xAxis which is better. Finally, I chose the second. For example:

<MPChart style={styles.chart}
                         type={'bar'}
                         dataSource={dataSource2}
                         chartStyles={{"animateType":"Y","animateY":1500}}
                         yAxis={{'position':'LEFT'}}
                         xAxis={{'position':'BOTTOM'}}

and as you see, for every type I pass json , after in android, I decode the json, if some parameter has no value, I will give it a default value. Much more, I make 3 type chart to 1 component by this:

...
var chartsTypeMap = {};
chartsTypeMap['line'] = 'MPAndroidLineChart';
chartsTypeMap['bar'] = 'MPAndroidBarChart';
chartsTypeMap['pie'] = 'MPAndroidPieChart';
...
var type = props.type ? props.type : this.state.type;
viewConfig.uiViewClassName = chartsTypeMap[type];
...

Maybe Jpadilla1's method is better, I have no idea. OK, I don't have much time recently, if someone who else want to be owner, I have no mind. BTW, including Jpadilla1, we have ios and android engineer now , we can make this component stronger :smile:

[cnjon]

+1

[cablegunmaster]

+1