Solution for issue #5 about custom colors

[SimchaShats]

If this approach looks good for you, can use it for custom colors settings...

[marzolfb]

Haven't reviewed yet but you will need to resolve the conflicts first

[SimchaShats]

I think done

[marzolfb]

I made an interesting discovery that multi-color support was already baked into the react-pathjs-chart library which this charting lib is based on via the use of the pallette property.

You can see a working example of this by making a one-line change to the Pie chart source here to change this.props.pallete to this.props.options.pallete and then providing colors in the palette property.

Here's a working example:

'use strict';

import React from 'react';
import { AppRegistry, ScrollView } from 'react-native';
import {Pie} from 'react-native-pathjs-charts';

export class PieExample extends React.Component {
  render() {
    var data = [{
        "name": "Alagoas",
        "population": 1962903
    }, {
        "name": "Maranhão",
        "population": 2805387
    }, {
        "name": "São Paulo",
        "population": 6460102
    }, {
        "name": "Goiás",
        "population": 4157509
    }, {
        "name": "Sergipe",
        "population": 2637097
    }, {
        "name": "Rondônia",
        "population": 3552899
    }];

    var options = {
        margin: {
            top: 0,
            left: 0,
            right: 0,
            bottom: 0
        },
        width: 500,
        height: 500,
        center: [20, 20],
        color: '#2980B9',
        r: 50,
        R: 100,
        legendPosition: 'topLeft',
        animate: {
            type: 'oneByOne',
            duration: 200,
            fillTransition: 3
        },
        label: {
            fontFamily: 'Arial',
            fontSize: 10,
            fontWeight: true,
            color: '#ECF0F1'
        },
        pallete: [{'r':25,'g':99,'b':201}, {'r':24,'g':175,'b':35}, {'r':190,'g':31,'b':69}, {'r':100,'g':36,'b':199}, {'r':214,'g':207,'b':32}, {'r':198,'g':84,'b':45}]
    };

    return (
      <ScrollView style={{flex:1,backgroundColor:'#F5FCFF'}} contentContainerStyle={{justifyContent:'center',alignItems:'center'}}>
        <Pie
          data={data}
          options={options}
          accessorKey="population" />
      </ScrollView>
    );
  }
}

AppRegistry.registerComponent('example', () => PieExample);

which yields this:

Given all of this discovery of the pallete option, I think this PR adds unnecessary redundancy so I'm going to close it. I'll be working on a PR updating the chart source and samples to show multi-color support exists.

[SimchaShats]

Ok thAnks

[fabripeco]

Why should I change this.props.pallete to this.props.options.pallete in the source? Can I pass directly the prop pallete to the Pie Component?

let pallete = [{'r':25,'g':99,'b':201}, {'r':24,'g':175,'b':35}, {'r':190,'g':31,'b':69}, {'r':100,'g':36,'b':199}, {'r':214,'g':207,'b':32}, {'r':198,'g':84,'b':45}];
return (
      <ScrollView style={{flex:1,backgroundColor:'#F5FCFF'}} contentContainerStyle={{justifyContent:'center',alignItems:'center'}}>
          <Pie
            data={data}
            options={options}
            accessorKey="population" 
            pallete={pallete}/>
      </ScrollView>
    );

Does it work?

Anyway, it would be nice to pass color in the data array, like a property of the data object (name, population, color).

Thank you for your reply

[marzolfb]

That's a fair point. Your example works and it shows TMTOWTDI (There's More Than One Way To Do It). I was thinking specifying colors in the options property was more consistent with the way other chart options were handled in this library but you bring up two additional possibilities that I hadn't considered:

1. Specifying colors as a direct property (as in your example above)
2. Specifying each color with each data point you provide (as you suggest after your example above)

Yet another idea is a hybrid approach of using a palette of colors in the chart options (like I originally proposed) (for cases when you don't care what sections of the pie chart get what colors) and then use your idea of specifying the desired color with each data item as a possible way to override each item. Does that make proposal make sense? What do you think of that idea?

[fabripeco]

Yes, all are valid points. In my opinion it would be important and useful to have the chance to bind a specific color to each data item (to each section of the pie), in order to build a legend or whatever linked to the items. Thank you