fix(localconf): vis colors in localconf.js

uc-cdis · Aug 15, 2018 · 606b3ca · 606b3ca
1 parent 3f350ea
commit 606b3ca
Show file tree

Hide file tree

Showing 17 changed files with 45 additions and 184 deletions.
diff --git a/src/DataExplorer/DataExplorerVisualizations.jsx b/src/DataExplorer/DataExplorerVisualizations.jsx
@@ -7,7 +7,6 @@ import SummaryChartGroup from '../components/charts/SummaryChartGroup/.';
 import PercentageStackedBarChart from '../components/charts/PercentageStackedBarChart/.';
 import DataSummaryCardGroup from '../components/cards/DataSummaryCardGroup/.';
 import { getCharts } from '../components/charts/helper';
-import { localTheme } from '../localconf';
 
 class DataExplorerVisualizations extends React.Component {
   constructor(props) {
@@ -45,14 +44,13 @@ class DataExplorerVisualizations extends React.Component {
         { charts && this.state.showVisualization ?
           <div className='data-explorer__charts'>
             <DataSummaryCardGroup summaryItems={charts.countItems} connected />
-            <SummaryChartGroup summaries={charts.summaries} localTheme={localTheme} />
+            <SummaryChartGroup summaries={charts.summaries} />
             {
               charts.stackedBarCharts.map((chart, i) =>
                 (<PercentageStackedBarChart
                   key={i}
                   data={chart.data}
                   title={chart.title}
-                  localTheme={localTheme}
                   width='100%'
                 />),
               )

diff --git a/src/Index/reduxer.jsx b/src/Index/reduxer.jsx
@@ -1,6 +1,5 @@
 import { connect } from 'react-redux';
 import { sortCompare } from '../utils';
-import { localTheme } from '../localconf';
 import dictIcons from '../img/icons';
 import { setActive } from '../Top/reduxer';
 import IndexBarChart from '../components/charts/IndexBarChart/.';
@@ -13,7 +12,7 @@ export const ReduxIndexBarChart = (() => {
       const projectList = Object.values(
         state.homepage.projectsByName,
       ).sort(sortCompare);
-      return { projectList, countNames: components.charts.indexChartNames, localTheme };
+      return { projectList, countNames: components.charts.indexChartNames };
     }
     return {};
   };

diff --git a/src/components/ProjectDashboard.jsx b/src/components/ProjectDashboard.jsx
@@ -19,7 +19,6 @@ class ProjectDashboard extends Component {
             summaryItems={this.props.summaries}
             align='left'
           />
-          {/* <ReduxProjectBarChart projectList={this.props.projectList} /> */}
         </div>
         <ProjectTable projectList={projectList} summaries={this.props.details} />
       </React.Fragment>

diff --git a/src/components/charts/IndexBarChart/index.jsx b/src/components/charts/IndexBarChart/index.jsx
@@ -6,6 +6,7 @@ import Spinner from '../../Spinner';
 import TooltipCDIS from '../TooltipCDIS/.';
 import Tick from '../Tick';
 import './IndexBarChart.less';
+import helper from '../helper';
 
 const sortCount = (a, b) => {
   const countA = a.counts.reduce((res, item) => res + item);
@@ -95,9 +96,7 @@ class IndexBarChart extends React.Component {
     countNames: PropTypes.arrayOf(
       PropTypes.string,
     ),
-    localTheme: PropTypes.objectOf(
-      PropTypes.any,
-    ),
+    xAxisColor: PropTypes.string,
   };
 
   render() {
@@ -106,11 +105,8 @@ class IndexBarChart extends React.Component {
     }
     const projectList = [...this.props.projectList.sort(sortCount)];
     const topList = (projectList.length <= 5) ? projectList : getTopList(projectList);
-
-    const localTheme = this.props.localTheme;
     const sumList = computeSummations(topList, this.props.countNames);
     const indexChart = createChartData(topList, this.props.countNames, sumList);
-
     const projectNames = topList.map(project => project.code);
     const barNames = createBarNames(indexChart);
     let countBar = 0;
@@ -125,8 +121,8 @@ class IndexBarChart extends React.Component {
           >
             <h4>Project Submission status</h4>
             <XAxis
-              stroke={localTheme['barGraph.lineColor']}
-              fill={localTheme['barGraph.lineColor']}
+              stroke={this.props.xAxisColor}
+              fill={this.props.xAxisColor}
               domain={[0, 100]}
               ticks={[0, 25, 50, 75, 100]}
               allowDecimals={false}
@@ -152,7 +148,7 @@ class IndexBarChart extends React.Component {
                       name={projectNames[index]}
                       dataKey={barName}
                       stackId='a'
-                      fill={localTheme[`barGraph.bar${(index + 1).toString()}Color`]}
+                      fill={helper.getCategoryColor(index)}
                     />
                   );
                 },
@@ -166,11 +162,10 @@ class IndexBarChart extends React.Component {
   }
 }
 
-
 IndexBarChart.defaultProps = {
   projectList: [],
   countNames: [],
-  localTheme: {},
+  xAxisColor: '#666666',
 };
 
 export default IndexBarChart;
diff --git a/src/components/charts/PercentageStackedBarChart/index.jsx b/src/components/charts/PercentageStackedBarChart/index.jsx
@@ -24,7 +24,6 @@ const labelListStyle = {
   fontWeight: 600,
 };
 
-
 // FIXME: add back in animation (https://github.com/recharts/recharts/issues/1083)
 class PercentageStackedBarChart extends React.Component {
   render() {
@@ -64,8 +63,8 @@ class PercentageStackedBarChart extends React.Component {
                 key={name}
                 dataKey={name}
                 stackId='a'
-                fill={helper.getCategoryColor(index, this.props.localTheme)}
                 isAnimationActive={false}
+                fill={helper.getCategoryColor(index)}
               >
                 <LabelList dataKey={name} position='center' style={labelListStyle} formatter={helper.addPercentage} className='percentage-bar-chart__label-list' />
               </Bar>
@@ -80,7 +79,7 @@ class PercentageStackedBarChart extends React.Component {
                   <span
                     className='percentage-bar-chart__legend-color'
                     style={{
-                      background: helper.getCategoryColor(index, this.props.localTheme),
+                      background: helper.getCategoryColor(index),
                     }}
                   />
                   <span className='percentage-bar-chart__legend-name form-body'>
@@ -106,7 +105,6 @@ const ChartDataShape = PropTypes.shape({
 
 PercentageStackedBarChart.propTypes = {
   data: PropTypes.arrayOf(ChartDataShape).isRequired,
-  localTheme: PropTypes.object.isRequired,
   percentageFixedPoint: PropTypes.number,
 };
 

diff --git a/src/components/charts/ProjectBarChart/ProjectBarChart.less b/src/components/charts/ProjectBarChart/ProjectBarChart.less
diff --git a/src/components/charts/ProjectBarChart/index.jsx b/src/components/charts/ProjectBarChart/index.jsx
diff --git a/src/components/charts/SummaryChartGroup/SummaryChartGroup.test.jsx b/src/components/charts/SummaryChartGroup/SummaryChartGroup.test.jsx
@@ -1,7 +1,6 @@
 import React from 'react';
 import { mount } from 'enzyme';
 import SummaryChartGroup from '.';
-import { localTheme } from '../../../localconf';
 import SummaryPieChart from '../SummaryPieChart';
 import SummaryHorizontalBarChart from '../SummaryHorizontalBarChart';
 
@@ -37,7 +36,6 @@ describe('<SummaryChartGroup />', () => {
   const charts = mount(<SummaryChartGroup
     summaries={summaries}
     width={1010}
-    localTheme={localTheme}
   />);
 
   it('renders', () => {

diff --git a/src/components/charts/SummaryChartGroup/index.jsx b/src/components/charts/SummaryChartGroup/index.jsx
@@ -22,13 +22,11 @@ class SummaryChartGroup extends Component {
                     <SummaryPieChart
                       data={item.data}
                       title={item.title}
-                      localTheme={this.props.localTheme}
                     />
                   ) : (
                     <SummaryHorizontalBarChart
                       data={item.data}
                       title={item.title}
-                      localTheme={this.props.localTheme}
                       vertical
                       color='#3283c8'
                     />
@@ -44,7 +42,6 @@ class SummaryChartGroup extends Component {
 
 SummaryChartGroup.propTypes = {
   summaries: PropTypes.arrayOf(PropTypes.object).isRequired,
-  localTheme: PropTypes.object.isRequired,
   width: PropTypes.oneOfType([PropTypes.number, PropTypes.string]),
 };
 

diff --git a/src/components/charts/SummaryHorizontalBarChart/SummaryHorizontalBarChart.test.jsx b/src/components/charts/SummaryHorizontalBarChart/SummaryHorizontalBarChart.test.jsx
@@ -1,6 +1,5 @@
 import React from 'react';
 import { mount } from 'enzyme';
-import { localTheme } from '../../../localconf';
 import SummaryHorizontalBarChart from '.';
 
 describe('<SummaryHorizontalBarChart />', () => {
@@ -14,7 +13,7 @@ describe('<SummaryHorizontalBarChart />', () => {
   ];
 
   const wrapper = mount(
-    <SummaryHorizontalBarChart data={chartData} title='bar chart title' color='#3283c8' localTheme={localTheme} />,
+    <SummaryHorizontalBarChart data={chartData} title='bar chart title' color='#3283c8' />,
   );
   const charts = wrapper.find(SummaryHorizontalBarChart);
 

diff --git a/src/components/charts/SummaryHorizontalBarChart/index.jsx b/src/components/charts/SummaryHorizontalBarChart/index.jsx
@@ -58,7 +58,7 @@ class SummaryBarChart extends React.Component {
                   <Cell
                     key={dataKey}
                     fill={this.props.color
-                      || helper.getCategoryColor(index, this.props.localTheme)}
+                      || helper.getCategoryColor(index)}
                   />
                 ))
               }
@@ -79,7 +79,6 @@ const ChartDataShape = PropTypes.shape({
 SummaryBarChart.propTypes = {
   title: PropTypes.string.isRequired,
   data: PropTypes.arrayOf(ChartDataShape).isRequired,
-  localTheme: PropTypes.object.isRequired,
   color: PropTypes.string,
   barSize: PropTypes.number,
   barGap: PropTypes.number,

diff --git a/src/components/charts/SummaryPieChart/SummaryPieChart.test.jsx b/src/components/charts/SummaryPieChart/SummaryPieChart.test.jsx
@@ -1,6 +1,5 @@
 import React from 'react';
 import { mount } from 'enzyme';
-import { localTheme } from '../../../localconf';
 import SummaryPieChart from '.';
 
 describe('<SummaryPieChart />', () => {
@@ -16,7 +15,6 @@ describe('<SummaryPieChart />', () => {
   const charts = mount(<SummaryPieChart
     title='test'
     data={chartData}
-    localTheme={localTheme}
   />).find(SummaryPieChart);
 
   it('renders', () => {

diff --git a/src/components/charts/SummaryPieChart/index.jsx b/src/components/charts/SummaryPieChart/index.jsx
@@ -65,7 +65,7 @@ class SummaryPieChart extends React.Component {
                   <Cell
                     key={dataKey}
                     dataKey={dataKey}
-                    fill={getColor(index, this.props.localTheme, useTwoColors)}
+                    fill={getColor(index)}
                   />))
               }
             </Pie>
@@ -85,7 +85,6 @@ const ChartDataShape = PropTypes.shape({
 SummaryPieChart.propTypes = {
   title: PropTypes.string.isRequired,
   data: PropTypes.arrayOf(ChartDataShape).isRequired,
-  localTheme: PropTypes.object.isRequired,
   innerRadius: PropTypes.number,
   outerRadius: PropTypes.number,
   showPercentage: PropTypes.bool,

diff --git a/src/components/charts/helper.js b/src/components/charts/helper.js
@@ -1,3 +1,5 @@
+import { colorsForCharts } from '../../localconf';
+
 const percentageFormatter = showPercentage => v => (showPercentage ? `${v}%` : v);
 
 const addPercentage = v => (percentageFormatter(true)(v));
@@ -39,13 +41,9 @@ const getPercentageData = (chartData, percentageFixedPoint) => {
   return [result];
 };
 
-const getCategoryColor = (index, localTheme) => {
-  // map index to (1-9)
-  const i = (index % 9) + 1;
-  return localTheme[`barGraph.bar${i}Color`];
-};
+const getCategoryColor = index => (colorsForCharts.categorical9Colors[index % 9]);
 
-const getCategoryColorFrom2Colors = (index, localTheme) => localTheme[`pieChartTwoColor.pie${(index % 2) + 1}Color`];
+const getCategoryColorFrom2Colors = index => colorsForCharts.categorical2Colors[index % 2];
 
 const getDataKey = showPercentage => (showPercentage ? 'percentage' : 'value');