From 1ea72be2970715a1842c0d699ccccd3cbdc9c83b Mon Sep 17 00:00:00 2001 From: Abby George Date: Wed, 22 Aug 2018 11:56:31 -0500 Subject: [PATCH] PXD-1521 Make charts customizable (#349) * replace hardcoded values with props * linting * linting --- src/components/charts/IndexBarChart/index.jsx | 32 +++++-- .../PercentageStackedBarChart/index.jsx | 73 +++++++++------ .../charts/SummaryChartGroup/index.jsx | 4 +- .../SummaryHorizontalBarChart/index.jsx | 93 +++++++++++++------ .../charts/SummaryPieChart/index.jsx | 19 ++-- 5 files changed, 143 insertions(+), 78 deletions(-) diff --git a/src/components/charts/IndexBarChart/index.jsx b/src/components/charts/IndexBarChart/index.jsx index 780af3d967..bfde8f10ec 100644 --- a/src/components/charts/IndexBarChart/index.jsx +++ b/src/components/charts/IndexBarChart/index.jsx @@ -96,7 +96,8 @@ class IndexBarChart extends React.Component { countNames: PropTypes.arrayOf( PropTypes.string, ), - xAxisColor: PropTypes.string, + xAxisStyle: PropTypes.object, + barChartStyle: PropTypes.object, }; render() { @@ -110,22 +111,21 @@ class IndexBarChart extends React.Component { const projectNames = topList.map(project => project.code); const barNames = createBarNames(indexChart); let countBar = 0; + const { barChartStyle, xAxisStyle } = this.props; return (
{ browserHistory.push(`/${e.activeLabel}`); window.location.reload(false); }} data={indexChart} - margin={{ top: 20, right: 0, left: 250, bottom: 5 }} - layout='vertical' + margin={barChartStyle.margins} + layout={barChartStyle.layout} >

Project Submission status

@@ -165,7 +165,21 @@ class IndexBarChart extends React.Component { IndexBarChart.defaultProps = { projectList: [], countNames: [], - xAxisColor: '#666666', + xAxisStyle: { + color: '#666666', + domain: [0, 100], + ticks: [0, 25, 50, 75, 100], + allowDecimals: false, + }, + barChartStyle: { + margins: { + top: 20, + right: 0, + left: 250, + bottom: 5, + }, + layout: 'vertical', + }, }; export default IndexBarChart; diff --git a/src/components/charts/PercentageStackedBarChart/index.jsx b/src/components/charts/PercentageStackedBarChart/index.jsx index e7fc8cc4ac..ffdf19ddd0 100644 --- a/src/components/charts/PercentageStackedBarChart/index.jsx +++ b/src/components/charts/PercentageStackedBarChart/index.jsx @@ -10,20 +10,6 @@ import './PercentageStackedBarChart.less'; const getPercentageDataLabels = chartData => chartData.map(entry => entry.name); -const xAxisStyle = { - fontSize: '10px', - fontWeight: 600, - lineHeight: '1em', - letterSpacing: '.02rem', - color: '#3283c8', -}; - -const labelListStyle = { - fill: '#FFFFFF', - fontSize: '14px', - fontWeight: 600, -}; - // FIXME: add back in animation (https://github.com/recharts/recharts/issues/1083) class PercentageStackedBarChart extends React.Component { render() { @@ -32,29 +18,17 @@ class PercentageStackedBarChart extends React.Component { this.props.percentageFixedPoint, ); const percentageDataLabels = getPercentageDataLabels(this.props.data); + const { barChartStyle, xAxisStyle, labelListStyle } = this.props; return (
- + { @@ -66,7 +40,13 @@ class PercentageStackedBarChart extends React.Component { isAnimationActive={false} fill={helper.getCategoryColor(index)} > - + )) } @@ -106,10 +86,43 @@ const ChartDataShape = PropTypes.shape({ PercentageStackedBarChart.propTypes = { data: PropTypes.arrayOf(ChartDataShape).isRequired, percentageFixedPoint: PropTypes.number, + barChartStyle: PropTypes.object, + xAxisStyle: PropTypes.object, + labelListStyle: PropTypes.object, }; PercentageStackedBarChart.defaultProps = { percentageFixedPoint: 2, + barChartStyle: { + width: 510, + height: 155, + layout: 'vertical', + margins: { + top: 28, + right: 12, + bottom: 8, + left: 12, + }, + barSize: 30, + }, + xAxisStyle: { + fontSize: '10px', + fontWeight: 600, + lineHeight: '1em', + letterSpacing: '.02rem', + color: '#3283c8', + axisLine: false, + tickLine: false, + ticks: _.range(0, 101, 10), + domain: [0, 100], + tickMargin: 10, + }, + labelListStyle: { + fill: '#FFFFFF', + fontSize: '14px', + fontWeight: 600, + position: 'center', + }, }; export default PercentageStackedBarChart; diff --git a/src/components/charts/SummaryChartGroup/index.jsx b/src/components/charts/SummaryChartGroup/index.jsx index 358f7f99eb..1e0f373639 100644 --- a/src/components/charts/SummaryChartGroup/index.jsx +++ b/src/components/charts/SummaryChartGroup/index.jsx @@ -28,7 +28,7 @@ class SummaryChartGroup extends Component { data={item.data} title={item.title} vertical - color='#3283c8' + color={this.props.barChartColor} /> ) } @@ -43,10 +43,12 @@ class SummaryChartGroup extends Component { SummaryChartGroup.propTypes = { summaries: PropTypes.arrayOf(PropTypes.object).isRequired, width: PropTypes.oneOfType([PropTypes.number, PropTypes.string]), + barChartColor: PropTypes.string, }; SummaryChartGroup.defaultProps = { width: '100%', + barChartColor: '#3283c8', }; export default SummaryChartGroup; diff --git a/src/components/charts/SummaryHorizontalBarChart/index.jsx b/src/components/charts/SummaryHorizontalBarChart/index.jsx index b9b612a061..532fd6bdbb 100644 --- a/src/components/charts/SummaryHorizontalBarChart/index.jsx +++ b/src/components/charts/SummaryHorizontalBarChart/index.jsx @@ -7,27 +7,17 @@ import React from 'react'; import helper from '../helper'; import './SummaryHorizontalBarChart.less'; -const yAxisStyle = { - fontSize: '12px', - fontWeight: 'regular', - lineHeight: '1em', - letterSpacing: '.03rem', - color: '#606060', -}; - -const labelValueStyle = { - fontSize: '10px', - fontWeight: 600, - lineHeight: '1em', - letterSpacing: '.02rem', - color: '#3283c8', -}; - // FIXME: add back in animation (https://github.com/recharts/recharts/issues/1083) class SummaryBarChart extends React.Component { render() { - const barChartHeight = (this.props.data.length * this.props.barSize) - + ((this.props.data.length + 1) * this.props.barGap) + 2; + const { + barChartStyle, + labelValueStyle, + xAxisStyle, + yAxisStyle, + } = this.props; + const barChartHeight = (this.props.data.length * barChartStyle.barSize) + + ((this.props.data.length + 1) * barChartStyle.barGap) + 2; const barChartData = helper.calculateChartData( this.props.data, this.props.showPercentage, @@ -43,15 +33,22 @@ class SummaryBarChart extends React.Component {
- - + + { barChartData.map((entry, index) => ( @@ -62,7 +59,13 @@ class SummaryBarChart extends React.Component { /> )) } - + @@ -80,18 +83,50 @@ SummaryBarChart.propTypes = { title: PropTypes.string.isRequired, data: PropTypes.arrayOf(ChartDataShape).isRequired, color: PropTypes.string, - barSize: PropTypes.number, - barGap: PropTypes.number, showPercentage: PropTypes.bool, percentageFixedPoint: PropTypes.number, + xAxisStyle: PropTypes.object, + yAxisStyle: PropTypes.object, + labelValueStyle: PropTypes.object, + barChartStyle: PropTypes.object, }; SummaryBarChart.defaultProps = { color: undefined, - barSize: 11, - barGap: 8, showPercentage: true, percentageFixedPoint: 2, + xAxisStyle: { + axisLine: false, + tickLine: false, + }, + yAxisStyle: { + fontSize: '12px', + fontWeight: 'regular', + lineHeight: '1em', + letterSpacing: '.03rem', + color: '#606060', + axisLine: false, + tickLine: false, + }, + labelValueStyle: { + fontSize: '10px', + fontWeight: 600, + lineHeight: '1em', + letterSpacing: '.02rem', + color: '#3283c8', + position: 'right', + offset: 8, + }, + barChartStyle: { + margins: { + top: 4, + right: 35, + left: 15, + }, + layout: 'vertical', + barSize: 11, + barGap: 8, + }, }; export default SummaryBarChart; diff --git a/src/components/charts/SummaryPieChart/index.jsx b/src/components/charts/SummaryPieChart/index.jsx index 1d765df5be..7579b03d78 100644 --- a/src/components/charts/SummaryPieChart/index.jsx +++ b/src/components/charts/SummaryPieChart/index.jsx @@ -6,13 +6,6 @@ import React from 'react'; import helper from '../helper'; import './SummaryPieChart.less'; -const pieChartStyle = { - flexGrow: 1, - display: 'flex', - justifyContent: 'flex-end', - marginTop: '22px', -}; - class SummaryPieChart extends React.Component { render() { const useTwoColors = this.props.data.length === 2; @@ -50,7 +43,7 @@ class SummaryPieChart extends React.Component { { pieChartData.map((entry, index) => ( @@ -89,6 +82,7 @@ SummaryPieChart.propTypes = { outerRadius: PropTypes.number, showPercentage: PropTypes.bool, percentageFixedPoint: PropTypes.number, + pieChartStyle: PropTypes.object, }; SummaryPieChart.defaultProps = { @@ -96,6 +90,13 @@ SummaryPieChart.defaultProps = { outerRadius: 43, showPercentage: true, percentageFixedPoint: 2, + pieChartStyle: { + flexGrow: 1, + display: 'flex', + justifyContent: 'flex-end', + marginTop: '22px', + fill: '#8884d8', + }, }; export default SummaryPieChart;