PXD-1521 Make charts customizable

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 (
       <div className='index-bar-chart'>
         <ResponsiveContainer width='100%' height='100%'>
           <BarChart
             onClick={(e) => { 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}
           >
             <h4>Project Submission status</h4>
             <XAxis
-              stroke={this.props.xAxisColor}
-              fill={this.props.xAxisColor}
-              domain={[0, 100]}
-              ticks={[0, 25, 50, 75, 100]}
-              allowDecimals={false}
+              {...xAxisStyle}
+              stroke={xAxisStyle.color}
+              fill={xAxisStyle.color}
               unit='%'
               type='number'
             />
@@ -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;

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 (
       <div className='percentage-bar-chart'>
-        <BarChart
-          width={580}
-          height={155}
-          data={percentageData}
-          layout='vertical'
-          margin={{
-            top: 28, right: 12, bottom: 8, left: 12,
-          }}
-          barSize={30}
-        >
+        <BarChart data={percentageData} {...barChartStyle}>
           <Tooltip />
           <CartesianGrid />
           <XAxis
-            axisLine={false}
-            tickLine={false}
-            ticks={_.range(0, 101, 10)}
             type='number'
-            domain={[0, 100]}
-            tickMargin={10}
             style={xAxisStyle}
             tickFormatter={helper.addPercentage}
+            {...xAxisStyle}
           />
           <YAxis axisLine={false} tickLine={false} dataKey='name' type='category' hide />
           {
@@ -66,7 +40,13 @@ class PercentageStackedBarChart extends React.Component {
                 isAnimationActive={false}
                 fill={helper.getCategoryColor(index)}
               >
-                <LabelList dataKey={name} position='center' style={labelListStyle} formatter={helper.addPercentage} className='percentage-bar-chart__label-list' />
+                <LabelList
+                  dataKey={name}
+                  position={labelListStyle.position}
+                  style={labelListStyle}
+                  formatter={helper.addPercentage}
+                  className='percentage-bar-chart__label-list'
+                />
               </Bar>
             ))
           }
@@ -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;

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;

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 {
         </div>
         <ResponsiveContainer width='100%' height={barChartHeight}>
           <BarChart
-            layout='vertical'
+            layout={barChartStyle.layout}
             data={barChartData}
-            barCategoryGap={this.props.barGap}
-            barSize={this.props.barSize}
-            margin={{ top: 4, right: 35, left: 15 }}
+            barCategoryGap={barChartStyle.barGap}
+            barSize={barChartStyle.barSize}
+            margin={barChartStyle.margins}
           >
             <Tooltip formatter={helper.percentageFormatter(this.props.showPercentage)} />
-            <XAxis axisLine={false} tickLine={false} type='number' hide />
-            <YAxis axisLine={false} tickLine={false} dataKey='name' type='category' style={yAxisStyle} interval={0} />
+            <XAxis {...xAxisStyle} type='number' hide />
+            <YAxis
+              axisLine={yAxisStyle.axisLine}
+              tickLine={yAxisStyle.tickLine}
+              dataKey='name'
+              type='category'
+              style={yAxisStyle}
+              interval={0}
+            />
             <Bar dataKey={dataKey} isAnimationActive={false}>
               {
                 barChartData.map((entry, index) => (
@@ -62,7 +59,13 @@ class SummaryBarChart extends React.Component {
                   />
                 ))
               }
-              <LabelList dataKey={dataKey} position='right' offset={8} style={labelValueStyle} formatter={helper.percentageFormatter(this.props.showPercentage)} />
+              <LabelList
+                dataKey={dataKey}
+                position={labelValueStyle.position}
+                offset={labelValueStyle.offset}
+                style={labelValueStyle}
+                formatter={helper.percentageFormatter(this.props.showPercentage)}
+              />
             </Bar>
           </BarChart>
         </ResponsiveContainer>
@@ -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;

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,15 +43,15 @@ class SummaryPieChart extends React.Component {
           <PieChart
             width={this.props.outerRadius * 2}
             height={this.props.outerRadius * 2}
-            style={pieChartStyle}
+            style={this.props.pieChartStyle}
           >
             <Pie
               dataKey={dataKey}
               isAnimationActive={false}
               data={pieChartData}
               innerRadius={this.props.innerRadius}
               outerRadius={this.props.outerRadius}
-              fill='#8884d8'
+              fill={this.props.pieChartStyle.fill}
             >
               {
                 pieChartData.map((entry, index) => (
@@ -89,13 +82,21 @@ SummaryPieChart.propTypes = {
   outerRadius: PropTypes.number,
   showPercentage: PropTypes.bool,
   percentageFixedPoint: PropTypes.number,
+  pieChartStyle: PropTypes.object,
 };
 
 SummaryPieChart.defaultProps = {
   innerRadius: 31.5,
   outerRadius: 43,
   showPercentage: true,
   percentageFixedPoint: 2,
+  pieChartStyle: {
+    flexGrow: 1,
+    display: 'flex',
+    justifyContent: 'flex-end',
+    marginTop: '22px',
+    fill: '#8884d8',
+  },
 };
 
 export default SummaryPieChart;