From a074fd764a4a16548175e06907a533cd7737085a Mon Sep 17 00:00:00 2001 From: TaeSeong Park Date: Fri, 10 Aug 2018 20:55:20 +0900 Subject: [PATCH 1/4] added options for modification of color and alignment for PieChart --- App.js | 2 ++ README.md | 17 ++++++++++++----- data.js | 10 +++++----- src/pie-chart.js | 12 ++++++------ src/piechart_modified.png | Bin 0 -> 21848 bytes 5 files changed, 25 insertions(+), 16 deletions(-) create mode 100644 src/piechart_modified.png diff --git a/App.js b/App.js index 9b2542e7..3fc8d2af 100644 --- a/App.js +++ b/App.js @@ -142,6 +142,8 @@ export default class App extends React.Component { chartConfig={chartConfig} accessor="population" style={graphStyle} + bgColor={'white'} + paddingLeft="15" /> Line Chart ``` @@ -214,6 +219,8 @@ const data = [ | height | Number | Height of the chart | | chartConfig | Object | Configuration object for the chart, see example config in the beginning of this file | | accessor | string | Property in the `data` object from which the number values are taken | +| bgColor | string | background color - if you want to set transparent, input `transparent` or `none`. | +| paddingLeft | string | left padding of the pie chart | ## Contribution graph (heatmap) diff --git a/data.js b/data.js index 52f92363..51799744 100644 --- a/data.js +++ b/data.js @@ -51,11 +51,11 @@ const contributionData = [ // Mock data object for Pie Chart const pieChartData = [ - { name: 'Italy', population: Math.random() * 10000 }, - { name: 'Mexico', population: Math.random() * 10000 }, - { name: 'France', population: Math.random() * 10000 }, - { name: 'Argentina', population: Math.random() * 10000 }, - { name: 'Japan', population: Math.random() * 10000 } + { name: 'Seoul', population: 21500000, color: 'rgba(131, 167, 234, 1)', legendFontColor: '#7F7F7F' }, + { name: 'Toronto', population: 2800000, color: '#F00', legendFontColor: '#7F7F7F' }, + { name: 'Beijing', population: 527612, color: 'red', legendFontColor: '#7F7F7F' }, + { name: 'New York', population: 8538000, color: '#ffffff', legendFontColor: '#7F7F7F' }, + { name: 'Moscow', population: 11920000, color: 'rgb(0, 0, 255)', legendFontColor: '#7F7F7F' } ] // Mock data object for Progress diff --git a/src/pie-chart.js b/src/pie-chart.js index a3f05e76..d6c3b64d 100644 --- a/src/pie-chart.js +++ b/src/pie-chart.js @@ -13,7 +13,7 @@ const Pie = require('paths-js/pie') class PieChart extends AbstractChart { render() { - const { style = {} } = this.props + const { style = {}, backgroundColor } = this.props const { borderRadius = 0 } = style const chart = Pie({ center: this.props.center || [0, 0], @@ -32,19 +32,19 @@ class PieChart extends AbstractChart { + {slices} diff --git a/src/piechart_modified.png b/src/piechart_modified.png new file mode 100644 index 0000000000000000000000000000000000000000..e398c16baf92c7f58d8b7a4f62492a3b6e01df87 GIT binary patch literal 21848 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%0ADx*_788*ha>N=Ccw3lDD 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 R%FzG-002ovPDHLkV1gj*@$~=z literal 0 HcmV?d00001 From 6197373b479e691a5fdf12a83a81d076707c344d Mon Sep 17 00:00:00 2001 From: TaeSeong Park Date: Fri, 10 Aug 2018 21:00:30 +0900 Subject: [PATCH 2/4] modified some props --- App.js | 2 +- README.md | 2 +- src/pie-chart.js | 2 +- 3 files changed, 3 insertions(+), 3 deletions(-) diff --git a/App.js b/App.js index 3fc8d2af..73310197 100644 --- a/App.js +++ b/App.js @@ -142,7 +142,7 @@ export default class App extends React.Component { chartConfig={chartConfig} accessor="population" style={graphStyle} - bgColor={'white'} + bgColor="transparent" paddingLeft="15" /> Line Chart diff --git a/README.md b/README.md index 9178e6c6..0785cda8 100644 --- a/README.md +++ b/README.md @@ -207,7 +207,7 @@ const data = [ height={220} chartConfig={chartConfig} accessor="population" - bgColor={'transparent'} + bgColor="transparent" paddingLeft="15" /> ``` diff --git a/src/pie-chart.js b/src/pie-chart.js index d6c3b64d..369bfee3 100644 --- a/src/pie-chart.js +++ b/src/pie-chart.js @@ -73,7 +73,7 @@ class PieChart extends AbstractChart { })} {slices} From a0f8c1ff9784c4a452d9e595d6b3f14ef09c0dda Mon Sep 17 00:00:00 2001 From: TaeSeong Park Date: Fri, 10 Aug 2018 21:59:20 +0900 Subject: [PATCH 3/4] added adjust legend fontsize --- src/pie-chart.js | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/src/pie-chart.js b/src/pie-chart.js index 369bfee3..c0727a7d 100644 --- a/src/pie-chart.js +++ b/src/pie-chart.js @@ -45,7 +45,7 @@ class PieChart extends AbstractChart { /> {Math.round(100 / total * c.item[this.props.accessor])}% { c.item.name } From 35a762ef8588e85f1c607b2b42be2ccf86d64527 Mon Sep 17 00:00:00 2001 From: TaeSeong Park Date: Fri, 10 Aug 2018 21:59:20 +0900 Subject: [PATCH 4/4] added adjust legend fontsize --- README.md | 10 +++++----- data.js | 10 +++++----- src/pie-chart.js | 2 +- 3 files changed, 11 insertions(+), 11 deletions(-) diff --git a/README.md b/README.md index 0785cda8..e8d59388 100644 --- a/README.md +++ b/README.md @@ -193,11 +193,11 @@ const data = { ```js const data = [ - { name: 'Seoul', population: 21500000, color: 'rgba(131, 167, 234, 1)', legendFontColor: '#7F7F7F' }, - { name: 'Toronto', population: 2800000, color: '#F00', legendFontColor: '#7F7F7F' }, - { name: 'Beijing', population: 527612, color: 'red', legendFontColor: '#7F7F7F' }, - { name: 'New York', population: 8538000, color: '#ffffff', legendFontColor: '#7F7F7F' }, - { name: 'Moscow', population: 11920000, color: 'rgb(0, 0, 255)', legendFontColor: '#7F7F7F' } + { name: 'Seoul', population: 21500000, color: 'rgba(131, 167, 234, 1)', legendFontColor: '#7F7F7F', legendFontSize: 15 }, + { name: 'Toronto', population: 2800000, color: '#F00', legendFontColor: '#7F7F7F', legendFontSize: 15 }, + { name: 'Beijing', population: 527612, color: 'red', legendFontColor: '#7F7F7F', legendFontSize: 15 }, + { name: 'New York', population: 8538000, color: '#ffffff', legendFontColor: '#7F7F7F', legendFontSize: 15 }, + { name: 'Moscow', population: 11920000, color: 'rgb(0, 0, 255)', legendFontColor: '#7F7F7F, legendFontSize: 15' } ] ``` ```html diff --git a/data.js b/data.js index 51799744..96b12f5f 100644 --- a/data.js +++ b/data.js @@ -51,11 +51,11 @@ const contributionData = [ // Mock data object for Pie Chart const pieChartData = [ - { name: 'Seoul', population: 21500000, color: 'rgba(131, 167, 234, 1)', legendFontColor: '#7F7F7F' }, - { name: 'Toronto', population: 2800000, color: '#F00', legendFontColor: '#7F7F7F' }, - { name: 'Beijing', population: 527612, color: 'red', legendFontColor: '#7F7F7F' }, - { name: 'New York', population: 8538000, color: '#ffffff', legendFontColor: '#7F7F7F' }, - { name: 'Moscow', population: 11920000, color: 'rgb(0, 0, 255)', legendFontColor: '#7F7F7F' } + { name: 'Seoul', population: 21500000, color: 'rgba(131, 167, 234, 1)', legendFontColor: '#7F7F7F', legendFontSize: 15 }, + { name: 'Toronto', population: 2800000, color: '#F00', legendFontColor: '#7F7F7F', legendFontSize: 15 }, + { name: 'Beijing', population: 527612, color: 'red', legendFontColor: '#7F7F7F', legendFontSize: 15 }, + { name: 'New York', population: 8538000, color: '#ffffff', legendFontColor: '#7F7F7F', legendFontSize: 15 }, + { name: 'Moscow', population: 11920000, color: 'rgb(0, 0, 255)', legendFontColor: '#7F7F7F', legendFontSize: 15 } ] // Mock data object for Progress diff --git a/src/pie-chart.js b/src/pie-chart.js index 369bfee3..c0727a7d 100644 --- a/src/pie-chart.js +++ b/src/pie-chart.js @@ -45,7 +45,7 @@ class PieChart extends AbstractChart { /> {Math.round(100 / total * c.item[this.props.accessor])}% { c.item.name }