From d71af1edb54f99d1fc843303ba532b8a9a08bae1 Mon Sep 17 00:00:00 2001
From: Leszek Pietrzak <leszek@magicznyleszek.xyz>
Date: Thu, 6 May 2021 18:32:39 +0100
Subject: [PATCH 1/3] split huge repots file into smaller files

---
 jsapp/js/app.es6                              |    2 +-
 jsapp/js/components/reports.es6               | 1174 -----------------
 .../components/reports/chartColorsPicker.es6  |   62 +
 .../js/components/reports/chartTypePicker.es6 |   57 +
 .../components/reports/customReportForm.es6   |   95 ++
 .../reports/questionGraphSettings.es6         |  136 ++
 .../js/components/reports/reportContents.es6  |  151 +++
 .../reports/reportStyleSettings.es6           |  182 +++
 jsapp/js/components/reports/reportTable.es6   |  108 ++
 .../{ => reports}/reportViewItem.es6          |  192 +--
 jsapp/js/components/reports/reports.es6       |  557 ++++++++
 .../components/reports/reportsConstants.es6   |  100 ++
 jsapp/js/constants.es6                        |   10 -
 13 files changed, 1496 insertions(+), 1330 deletions(-)
 delete mode 100644 jsapp/js/components/reports.es6
 create mode 100644 jsapp/js/components/reports/chartColorsPicker.es6
 create mode 100644 jsapp/js/components/reports/chartTypePicker.es6
 create mode 100644 jsapp/js/components/reports/customReportForm.es6
 create mode 100644 jsapp/js/components/reports/questionGraphSettings.es6
 create mode 100644 jsapp/js/components/reports/reportContents.es6
 create mode 100644 jsapp/js/components/reports/reportStyleSettings.es6
 create mode 100644 jsapp/js/components/reports/reportTable.es6
 rename jsapp/js/components/{ => reports}/reportViewItem.es6 (65%)
 create mode 100644 jsapp/js/components/reports/reports.es6
 create mode 100644 jsapp/js/components/reports/reportsConstants.es6

diff --git a/jsapp/js/app.es6 b/jsapp/js/app.es6
index f89247bb0b..7be85ffec9 100644
--- a/jsapp/js/app.es6
+++ b/jsapp/js/app.es6
@@ -35,7 +35,7 @@ import {
 import MyLibraryRoute from 'js/components/library/myLibraryRoute';
 import PublicCollectionsRoute from 'js/components/library/publicCollectionsRoute';
 import AssetRoute from 'js/components/library/assetRoute';
-import Reports from './components/reports';
+import Reports from './components/reports/reports';
 import FormLanding from './components/formLanding';
 import FormSummary from './components/formSummary';
 import FormSubScreens from './components/formSubScreens';
diff --git a/jsapp/js/components/reports.es6 b/jsapp/js/components/reports.es6
deleted file mode 100644
index d5742162b6..0000000000
--- a/jsapp/js/components/reports.es6
+++ /dev/null
@@ -1,1174 +0,0 @@
-import React from 'react';
-import reactMixin from 'react-mixin';
-import autoBind from 'react-autobind';
-import Reflux from 'reflux';
-import _ from 'underscore';
-import {dataInterface} from '../dataInterface';
-import Checkbox from 'js/components/common/checkbox';
-import Radio from 'js/components/common/radio';
-import {actions} from '../actions';
-import {bem} from '../bem';
-import {stores} from '../stores';
-import ui from '../ui';
-import mixins from '../mixins';
-import DocumentTitle from 'react-document-title';
-import { txtid } from '../../xlform/src/model.utils';
-import alertify from 'alertifyjs';
-
-import ReportViewItem from './reportViewItem';
-
-import {
-  assign,
-  launchPrinting
-} from 'utils';
-import {REPORT_STYLES} from 'js/constants';
-
-let reportStyles = [
-  REPORT_STYLES.vertical,
-  REPORT_STYLES.donut,
-  REPORT_STYLES.area,
-  REPORT_STYLES.horizontal,
-  REPORT_STYLES.pie,
-  REPORT_STYLES.line,
-];
-
-class ChartTypePicker extends React.Component {
-  constructor(props) {
-    super(props);
-    autoBind(this);
-  }
-  defaultReportStyleChange (e) {
-    this.props.onChange({
-      default: true,
-    }, {
-      report_type: e.currentTarget.value || 'bar'
-    });
-  }
-  render () {
-    var radioButtons = reportStyles.map(function(style, i){
-      return (
-          <bem.GraphSettings__radio m={style.value} key={i}>
-              <input type='radio' name='chart_type'
-                value={style.value}
-                checked={this.props.defaultStyle.report_type === style.value}
-                onChange={this.defaultReportStyleChange}
-                id={'type-' + style.value} />
-              <label htmlFor={'type-' + style.value}>
-                {style.label}
-              </label>
-          </bem.GraphSettings__radio>
-      );
-    }, this);
-
-    return (
-        <bem.GraphSettings__charttype>
-          {radioButtons}
-        </bem.GraphSettings__charttype>
-      );
-  }
-}
-
-let reportColorSets = [
-  {
-    label: 'set1',
-    colors: [
-      'rgba(52, 106, 200, 0.8)',
-      'rgba(252, 74, 124, 0.8)',
-      'rgba(250, 213, 99, 0.8)',
-      'rgba(113, 230, 33, 0.8)',
-      'rgba(78, 203, 255, 0.8)',
-      'rgba(253, 190, 76, 0.8)',
-      'rgba(77, 124, 244, 0.8)',
-      'rgba(33, 231, 184, 0.8)'
-    ]
-  },
-  {
-    label: 'set2',
-    colors: [
-      'rgba(40, 106, 163, 0.8)',
-      'rgba(69, 137, 197, 0.8)',
-      'rgba(0, 123, 234, 0.8)',
-      'rgba(0, 134, 255, 0.8)',
-      'rgba(50, 159, 255, 0.8)',
-      'rgba(100, 182, 255, 0.8)',
-      'rgba(141, 200, 255, 0.8)',
-      'rgba(192, 224, 255, 0.8)'
-    ]
-  },
-  {
-    label: 'set3',
-    colors: [
-      'rgba(39, 69, 255, 0.8)',
-      'rgba(34, 122, 233, 0.8)',
-      'rgba(46, 145, 243, 0.8)',
-      'rgba(92, 173, 255, 0.8)',
-      'rgba(148, 200, 255, 0.8)',
-      'rgba(31, 174, 228, 0.8)',
-      'rgba(25, 214, 209, 0.8)',
-      'rgba(28, 234, 225, 0.8)'
-    ]
-  },
-  {
-    label: 'set4',
-    colors: [
-      'rgba(253, 35, 4, 0.8)',
-      'rgba(253, 104, 97, 0.8)',
-      'rgba(232, 65, 14, 0.8)',
-      'rgba(253, 146, 72, 0.8)',
-      'rgba(233, 139, 3, 0.8)',
-      'rgba(253, 215, 114, 0.8)',
-      'rgba(254, 227, 159, 0.8)',
-      'rgba(253, 146, 72, 0.8)'
-    ]
-  },
-  {
-    label: 'set5',
-    colors: [
-      'rgba(63, 63, 63, 1)',
-      'rgba(90, 90, 90, 1)',
-      'rgba(107, 107, 107, 1)',
-      'rgba(128, 128, 128, 1)',
-      'rgba(151, 151, 151, 1)',
-      'rgba(169, 169, 169, 1)',
-      'rgba(196, 196, 196, 1)',
-      'rgba(178, 179, 190, 1)'
-    ]
-  }
-];
-
-class ChartColorsPicker extends React.Component {
-  constructor(props) {
-    super(props);
-    autoBind(this);
-  }
-  defaultReportColorsChange (e) {
-    this.props.onChange({
-      default: true,
-    }, {
-      report_colors: reportColorSets[e.currentTarget.value].colors || reportColorSets[0].colors
-    });
-  }
-  defaultValue (set, index) {
-    if (this.props.defaultStyle.report_colors === undefined && index === 0)
-      return true;
-
-    return JSON.stringify(this.props.defaultStyle.report_colors) === JSON.stringify(set.colors);
-  }
-  render () {
-    var radioButtons = reportColorSets.map(function(set, index){
-      return (
-        <bem.GraphSettings__radio key={index}>
-          <input type='radio' name='chart_colors'
-            value={index}
-            checked={this.defaultValue(set, index)}
-            onChange={this.defaultReportColorsChange}
-            id={'type-' + set.label} />
-          <label htmlFor={'type-' + set.label}>
-          {
-            reportColorSets[index].colors.map(function(color, i){
-              return (
-                <div style={{backgroundColor: color}} key={i} />
-              );
-            }, this)
-          }
-          </label>
-        </bem.GraphSettings__radio>
-      );
-    }, this);
-
-    return (
-        <bem.GraphSettings__colors>
-          {radioButtons}
-        </bem.GraphSettings__colors>
-      );
-  }
-};
-
-class CustomReportForm extends React.Component {
-  constructor(props) {
-    super(props);
-    autoBind(this);
-
-    this.state = {
-      customReport: props.customReport
-    };
-  }
-  customReportNameChange(e) {
-    var r = this.state.customReport;
-    r.name = e.target.value;
-    this.setState({customReport: r});
-  }
-  customReportQuestionChange(name, isChecked) {
-    var r = this.state.customReport;
-
-    if (isChecked) {
-      r.questions.push(name);
-    } else {
-      r.questions.splice(r.questions.indexOf(name), 1);
-    }
-    this.setState({customReport: r});
-  }
-  saveCustomReport() {
-    let report_custom = this.props.asset.report_custom;
-    const crid = this.state.customReport.crid;
-
-    report_custom[crid] = this.state.customReport;
-    actions.reports.setCustom(this.props.asset.uid, report_custom);
-  }
-  deleteCustomReport() {
-    let report_custom = this.props.asset.report_custom;
-    const crid = this.state.customReport.crid;
-
-    delete report_custom[crid];
-    actions.reports.setCustom(this.props.asset.uid, report_custom);
-  }
-  render () {
-    const crid = this.state.customReport.crid;
-    var questionList = this.props.reportData.map(function(q, i){
-      return (
-        <div className='graph-settings__question' key={i}>
-            <Checkbox
-              checked={this.state.customReport.questions.includes(q.name)}
-              onChange={this.customReportQuestionChange.bind(this, q.name)}
-              label={q.row.label ? q.row.label[0] : t('Unlabeled') }
-            />
-        </div>
-      );
-    }, this);
-
-    return (
-      <div className='custom-report-form'>
-        <div className='custom-report--title'>
-          <input type='text' name='title'
-                  value={this.state.customReport.name}
-                  placeholder={t('Untitled Report')}
-                  onChange={this.customReportNameChange} />
-        </div>
-        <strong>{t('Include the following questions:')}</strong>
-        <div className='custom-report--questions'>
-          {questionList}
-        </div>
-        <bem.Modal__footer>
-          {this.props.asset.report_custom[crid] &&
-            <bem.KoboButton
-              m='red'
-              onClick={this.deleteCustomReport}
-            >
-              {t('Delete')}
-            </bem.KoboButton>
-          }
-          <bem.KoboButton
-            m='blue'
-            onClick={this.saveCustomReport}
-          >
-            {t('Save')}
-          </bem.KoboButton>
-        </bem.Modal__footer>
-      </div>
-    );
-  }
-};
-
-class QuestionGraphSettings extends React.Component {
-  constructor(props) {
-    super();
-
-    this.state = {
-      activeModalTab: 0,
-      rStyle: {
-        report_type: false,
-        report_colors: false,
-        width: false
-      }
-    };
-
-    autoBind(this);
-  }
-  toggleTab(evt) {
-    var i = evt.target.getAttribute('data-index');
-    this.setState({activeModalTab: parseInt(i)});
-  }
-  componentDidMount() {
-    let _qn = this.props.question,
-        specificSettings = undefined;
-
-    if (!this.props.parentState.currentCustomReport) {
-      specificSettings = this.props.parentState.reportStyles.specified;
-    } else {
-      specificSettings = this.props.parentState.currentCustomReport.specified;
-    }
-
-    if (specificSettings && specificSettings[_qn] && Object.keys(specificSettings[_qn]).length) {
-      const rStyle = Object.assign({}, specificSettings[_qn]);
-      this.setState({rStyle: rStyle});
-    }
-  }
-  saveQS(reset) {
-    let assetUid = this.props.parentState.asset.uid,
-        customReport = this.props.parentState.currentCustomReport,
-        _qn = this.props.question;
-
-    if (!customReport) {
-      var sett_ = this.props.parentState.reportStyles;
-      sett_.specified[_qn] = reset ? {} : this.state.rStyle;
-      actions.reports.setStyle(assetUid, sett_);
-    } else {
-      let report_custom = this.props.parentState.asset.report_custom;
-      if (report_custom[customReport.crid].specified === undefined)
-        report_custom[customReport.crid].specified = {};
-
-      report_custom[customReport.crid].specified[_qn] = reset ? {} : this.state.rStyle;
-      actions.reports.setCustom(assetUid, report_custom);
-    }
-  }
-  questionStyleChange(params, value) {
-    var styles = this.state.rStyle;
-
-    if (value && value.report_type)
-      styles.report_type = value.report_type;
-    if (value && value.report_colors)
-      styles.report_colors = value.report_colors;
-    if (params && params.id == 'width')
-      styles.width = params.value;
-
-    this.setState({rStyle: styles});
-  }
-  render () {
-    let asset = this.props.parentState.asset,
-        reportStyle = this.state.rStyle;
-
-    var tabs = [t('Chart Type'), t('Colors')];
-    var modalTabs = tabs.map(function(tab, i) {
-      return (
-        <button className={`mdl-button mdl-button--tab ${this.state.activeModalTab === i ? 'active' : ''}`}
-                onClick={this.toggleTab}
-                data-index={i}
-                key={i}>
-          {tab}
-        </button>
-      );
-    }, this);
-
-    return (
-      <bem.GraphSettings>
-        <ui.Modal.Tabs>
-          {modalTabs}
-        </ui.Modal.Tabs>
-        <ui.Modal.Body>
-          <div className='tabs-content'>
-            {this.state.activeModalTab === 0 &&
-              <div id='graph-type'>
-                <ChartTypePicker
-                  defaultStyle={reportStyle}
-                  onChange={this.questionStyleChange}
-                />
-              </div>
-            }
-            {this.state.activeModalTab === 1 &&
-              <div id='graph-colors'>
-                <ChartColorsPicker
-                  defaultStyle={reportStyle}
-                  onChange={this.questionStyleChange} />
-              </div>
-            }
-          </div>
-        </ui.Modal.Body>
-
-        <ui.Modal.Footer>
-          {(reportStyle.report_type || reportStyle.report_colors || reportStyle.width) &&
-            <bem.Button className='reset' onClick={this.saveQS.bind(this, true)}>
-              {t('Reset')}
-            </bem.Button>
-          }
-          <bem.Button className='primary' onClick={this.saveQS.bind(this, false)}>
-            {t('Save')}
-          </bem.Button>
-        </ui.Modal.Footer>
-      </bem.GraphSettings>
-    );
-  }
-};
-
-class ReportContents extends React.Component {
-  constructor(props) {
-    super(props);
-  }
-  shouldComponentUpdate(nextProps, nextState) {
-    // to improve UI performance, don't refresh report while a modal window is visible
-    if (nextProps.parentState.showReportGraphSettings
-        || nextProps.parentState.showCustomReportModal
-        || nextProps.parentState.currentQuestionGraph) {
-      return false;
-    } else {
-      return true;
-    }
-  }
-  render () {
-    var tnslIndex = 0;
-    let customReport = this.props.parentState.currentCustomReport,
-        defaultRS = this.props.parentState.reportStyles,
-        asset = this.props.parentState.asset,
-        groupBy = this.props.parentState.groupBy;
-
-    if (customReport) {
-      if (customReport.reportStyle && customReport.reportStyle.translationIndex)
-        tnslIndex = parseInt(customReport.reportStyle.translationIndex);
-    } else {
-      tnslIndex = defaultRS.default.translationIndex || 0;
-    }
-
-    // reset to first language if trnslt index cannot be found
-    if (asset.content.translations && !asset.content.translations[tnslIndex])
-      tnslIndex = 0;
-
-    var reportData = this.props.reportData;
-
-    for (var i = reportData.length - 1; i > -1; i--) {
-      let _qn = reportData[i].name,
-          _type = reportData[i].row.type || null;
-
-      var _defSpec = undefined;
-
-      if (customReport) {
-        if (customReport.specified && customReport.specified[_qn])
-          _defSpec = customReport.specified[_qn];
-      } else {
-        _defSpec = defaultRS.specified[_qn];
-      }
-
-      if (_defSpec && Object.keys(_defSpec).length) {
-        reportData[i].style = _defSpec;
-      } else {
-        if (customReport && customReport.reportStyle) {
-          reportData[i].style = customReport.reportStyle;
-        } else {
-          reportData[i].style = defaultRS.default;
-        }
-      }
-
-      if ((_type === 'select_one' || _type === 'select_multiple') && asset.content.choices) {
-        let question = asset.content.survey.find(z => z.name === _qn || z.$autoname === _qn);
-        let resps = reportData[i].data.responses;
-        let choice;
-        if (resps) {
-          reportData[i].data.responseLabels = [];
-          for (var j = resps.length - 1; j >= 0; j--) {
-            choice = asset.content.choices.find(o => question && o.list_name === question.select_from_list_name && (o.name === resps[j] || o.$autoname == resps[j]));
-            if (choice && choice.label && choice.label[tnslIndex])
-              reportData[i].data.responseLabels.unshift(choice.label[tnslIndex]);
-            else
-              reportData[i].data.responseLabels.unshift(resps[j]);
-          }
-        } else {
-          const vals = reportData[i].data.values;
-          if (vals && vals[0] && vals[0][1] && vals[0][1].responses) {
-            var respValues = vals[0][1].responses;
-            reportData[i].data.responseLabels = [];
-            let qGB = asset.content.survey.find(z => z.name === groupBy || z.$autoname === groupBy);
-            respValues.forEach(function(r, ind){
-              choice = asset.content.choices.find(o => qGB && o.list_name === qGB.select_from_list_name && (o.name === r || o.$autoname == r));
-              reportData[i].data.responseLabels[ind] = (choice && choice.label && choice.label[tnslIndex]) ? choice.label[tnslIndex] : r;
-            });
-
-            // TODO: use a better way to store translated labels per row
-            for (var vD = vals.length - 1; vD >= 0; vD--) {
-              choice = asset.content.choices.find(o => question && o.list_name === question.select_from_list_name && (o.name === vals[vD][0] || o.$autoname == vals[vD][0]));
-              vals[vD][2] = (choice && choice.label && choice.label[tnslIndex]) ? choice.label[tnslIndex] : vals[vD][0];
-            }
-          }
-        }
-      }
-    }
-
-    return (
-      <div>
-        {
-          reportData.map((rowContent, i)=>{
-            let label = t('Unlabeled');
-            if (_.isArray(rowContent.row.label)) {
-              label = rowContent.row.label[tnslIndex];
-            } else if (_.isString(rowContent.row.label)) {
-              label = rowContent.row.label;
-            }
-
-            if (!rowContent.data.provided)
-              return false;
-
-            return (
-                <bem.ReportView__item key={i}>
-                  <ReportViewItem
-                      {...rowContent}
-                      label={label}
-                      triggerQuestionSettings={this.props.triggerQuestionSettings} />
-                </bem.ReportView__item>
-              );
-          })
-        }
-      </div>
-    );
-  }
-};
-
-class ReportStyleSettings extends React.Component {
-  constructor(props) {
-    super(props);
-    autoBind(this);
-    this.state = {
-      activeModalTab: 0,
-      reportStyle: props.parentState.reportStyles.default
-    };
-
-    if (props.parentState.currentCustomReport && props.parentState.currentCustomReport.reportStyle) {
-      this.state.reportStyle = props.parentState.currentCustomReport.reportStyle;
-    }
-  }
-  toggleTab(evt) {
-    var i = evt.target.getAttribute('data-index');
-    this.setState({
-      activeModalTab: parseInt(i),
-    });
-  }
-  reportStyleChange (params, value) {
-    let styles = this.state.reportStyle;
-    assign(styles, value);
-    this.setState({reportStyle: styles});
-  }
-  reportSizeChange (params) {
-    if (params.id == 'width') {
-      let styles = this.state.reportStyle;
-      styles.graphWidth = params.value;
-      this.setState({reportStyle: styles});
-    }
-  }
-  translationIndexChange (name, value) {
-    let styles = this.state.reportStyle;
-    styles.translationIndex = parseInt(value);
-    this.setState({reportStyle: styles});
-  }
-  onGroupByChange (name, value) {
-    let styles = this.state.reportStyle;
-    styles.groupDataBy = value;
-    this.setState({reportStyle: styles});
-  }
-  saveReportStyles() {
-    let currentCustomReport = this.props.parentState.currentCustomReport;
-    let assetUid = this.props.parentState.asset.uid;
-    if (currentCustomReport) {
-      let report_custom = this.props.parentState.asset.report_custom;
-      report_custom[currentCustomReport.crid].reportStyle = this.state.reportStyle;
-      actions.reports.setCustom(assetUid, report_custom);
-    } else {
-      let sett_ = this.props.parentState.reportStyles;
-      assign(sett_.default, this.state.ReportStyle);
-      actions.reports.setStyle(assetUid, sett_);
-    }
-  }
-  render () {
-    let asset = this.props.parentState.asset,
-        rowsByKuid = this.props.parentState.rowsByKuid,
-        rows = this.props.parentState.rowsByIdentifier || {},
-        translations = this.props.parentState.translations,
-        reportStyle = this.state.reportStyle;
-
-    const groupByOptions = [];
-    groupByOptions.push({
-      value: '',
-      label: t('No grouping')
-    });
-    for (let key in rows) {
-      if (
-        rows.hasOwnProperty(key) &&
-        rows[key].hasOwnProperty('type') &&
-        rows[key].type == 'select_one'
-      ) {
-        const row = rows[key];
-        const val = row.name || row.$autoname;
-        const label = translations ? row.label[reportStyle.translationIndex] : row.label;
-        groupByOptions.push({
-          value: val,
-          label: label
-        });
-      }
-    }
-
-    var tabs = [t('Chart Type'), t('Colors')];
-
-    if (groupByOptions.length > 1) {
-      tabs.push(t('Group By'));
-    }
-
-    const selectedTranslationOptions = [];
-    if (translations) {
-      tabs.push(t('Translation'));
-      this.props.parentState.asset.content.translations.map((row, i) => {
-        selectedTranslationOptions.push({
-          value: i,
-          label: row || t('Unnamed language')
-        });
-      })
-    }
-
-    var modalTabs = tabs.map(function(tab, i){
-      return (
-        <button className={`mdl-button mdl-button--tab ${this.state.activeModalTab === i ? 'active' : ''}`}
-                onClick={this.toggleTab}
-                data-index={i}
-                key={i}>
-          {tab}
-        </button>
-      );
-    }, this);
-
-    return (
-      <bem.GraphSettings>
-        <ui.Modal.Tabs>
-          {modalTabs}
-        </ui.Modal.Tabs>
-        <ui.Modal.Body>
-          <div className='tabs-content'>
-            {tabs[this.state.activeModalTab] === t('Chart Type') &&
-              <div id='graph-type'>
-                <ChartTypePicker
-                  defaultStyle={reportStyle}
-                  onChange={this.reportStyleChange}
-                />
-              </div>
-            }
-            {tabs[this.state.activeModalTab] === t('Colors') &&
-              <div id='graph-colors'>
-                <ChartColorsPicker
-                  defaultStyle={reportStyle}
-                  onChange={this.reportStyleChange} />
-              </div>
-            }
-            {tabs[this.state.activeModalTab] === t('Group By') && groupByOptions.length > 1 &&
-              <div className='graph-tab__groupby' id='graph-labels'>
-                <Radio
-                  name='reports-groupby'
-                  options={groupByOptions}
-                  onChange={this.onGroupByChange}
-                  selected={reportStyle.groupDataBy}
-                />
-              </div>
-            }
-            {tabs[this.state.activeModalTab] === t('Translation') && selectedTranslationOptions.length > 1 &&
-              <div className='graph-tab__translation' id='graph-labels'>
-                <Radio
-                  name='reports-selected-translation'
-                  options={selectedTranslationOptions}
-                  onChange={this.translationIndexChange}
-                  selected={reportStyle.translationIndex}
-                />
-              </div>
-            }
-          </div>
-          <ui.Modal.Footer>
-            <bem.KoboButton m='blue' onClick={this.saveReportStyles}>
-              {t('Save')}
-            </bem.KoboButton>
-          </ui.Modal.Footer>
-        </ui.Modal.Body>
-      </bem.GraphSettings>
-    );
-
-  }
-};
-
-class Reports extends React.Component {
-  constructor(props) {
-    super(props);
-    this.state = {
-      graphWidth: '700',
-      graphHeight: '250',
-      translations: false,
-      activeModalTab: 0,
-      error: false,
-      isFullscreen: false,
-      reportLimit: 200,
-      customReports: false,
-      showReportGraphSettings: false,
-      showCustomReportModal: false,
-      currentCustomReport: false,
-      currentQuestionGraph: false,
-      groupBy: ''
-    };
-    autoBind(this);
-  }
-  componentDidMount () {
-    this.loadReportData();
-    this.listenTo(actions.reports.setStyle, this.reportStyleListener);
-    this.listenTo(actions.reports.setCustom, this.reportCustomListener);
-  }
-  componentDidUpdate(prevProps, prevState) {
-    if (this.state.currentCustomReport != prevState.currentCustomReport) {
-      this.refreshReportData();
-    }
-    if (this.state.groupBy != prevState.groupBy) {
-      this.refreshReportData();
-    }
-  }
-  loadReportData() {
-    const uid = this.props.params.assetid || this.props.params.uid;
-
-    stores.allAssets.whenLoaded(uid, (asset)=>{
-      let rowsByKuid = {};
-      let rowsByIdentifier = {};
-      let groupBy = '',
-          reportStyles = asset.report_styles,
-          reportCustom = asset.report_custom;
-
-      if (
-        this.state.currentCustomReport &&
-        this.state.currentCustomReport.reportStyle &&
-        this.state.currentCustomReport.reportStyle.groupDataBy
-      ) {
-        groupBy = this.state.currentCustomReport.reportStyle.groupDataBy;
-      } else if (reportStyles.default.groupDataBy !== undefined) {
-        groupBy = reportStyles.default.groupDataBy;
-      }
-
-      // TODO: improve the defaults below
-      if (reportStyles.default.report_type === undefined) {
-        reportStyles.default.report_type = REPORT_STYLES.vertical.value;
-      }
-      if (reportStyles.default.translationIndex === undefined) {
-        reportStyles.default.translationIndex = 0;
-      }
-      if (reportStyles.default.groupDataBy === undefined) {
-        reportStyles.default.groupDataBy = '';
-      }
-
-      if (asset.content.survey != undefined) {
-        asset.content.survey.forEach(function(r){
-          if (r.$kuid) {
-            rowsByKuid[r.$kuid] = r;
-          }
-
-          let $identifier = r.$autoname || r.name;
-          rowsByIdentifier[$identifier] = r;
-        });
-
-        dataInterface.getReportData({uid: uid, identifiers: [], group_by: groupBy}).done((data)=> {
-          var dataWithResponses = [];
-
-          data.list.forEach(function(row){
-            if (row.data.responses || row.data.values || row.data.mean) {
-              if (rowsByIdentifier[row.name] !== undefined) {
-                row.row.label = rowsByIdentifier[row.name].label;
-              } else if (row.name !== undefined) {
-                row.row.label = row.name;
-              } else {
-                row.row.label = t('untitled');
-              }
-              dataWithResponses.push(row);
-            }
-          });
-
-          this.setState({
-            asset: asset,
-            rowsByKuid: rowsByKuid,
-            rowsByIdentifier: rowsByIdentifier,
-            reportStyles: reportStyles,
-            reportData: dataWithResponses,
-            reportCustom: reportCustom,
-            translations: asset.content.translations.length > 1 ? true : false,
-            groupBy: groupBy,
-            error: false
-          });
-        }).fail((err)=> {
-          if (groupBy && groupBy.length > 0 && !this.state.currentCustomReport && reportStyles.default.groupDataBy !== undefined) {
-            // reset default report groupBy if it fails and notify user
-            reportStyles.default.groupDataBy = '';
-            this.setState({
-              reportStyles: reportStyles
-            });
-            alertify.error(t('Could not load grouped results via "##". Will attempt to load the ungrouped report.').replace('##', groupBy));
-            this.loadReportData();
-          } else {
-            this.setState({
-              error: err,
-              asset: asset
-            });
-          }
-        });
-      } else {
-        // Redundant?
-        console.error('Survey not defined.');
-      }
-    });
-  }
-  refreshReportData() {
-    let uid = this.props.params.assetid || this.props.params.uid,
-        rowsByIdentifier = this.state.rowsByIdentifier,
-        customReport = this.state.currentCustomReport;
-
-    var groupBy = '';
-
-    if (!customReport && this.state.reportStyles.default.groupDataBy !== undefined)
-      groupBy = this.state.reportStyles.default.groupDataBy;
-
-    if (customReport && customReport.reportStyle && customReport.reportStyle.groupDataBy)
-      groupBy = this.state.currentCustomReport.reportStyle.groupDataBy;
-
-    dataInterface.getReportData({uid: uid, identifiers: [], group_by: groupBy}).done((data)=>{
-      var dataWithResponses = [];
-
-      data.list.forEach(function(row){
-        if (row.data.responses || row.data.values || row.data.mean) {
-          if (rowsByIdentifier[row.name] !== undefined) {
-            row.row.label = rowsByIdentifier[row.name].label;
-          } else if (row.name !== undefined) {
-            row.row.label = row.name;
-          } else {
-            row.row.label = t('untitled');
-          }
-          dataWithResponses.push(row);
-        }
-      });
-
-      this.setState({
-        reportData: dataWithResponses,
-        error: false
-      });
-    }).fail((err)=> {
-      alertify.error(t('Could not refresh report.'));
-      this.setState({
-        error: err
-      });
-    });
-  }
-  reportStyleListener(assetUid, reportStyles) {
-    this.setState({
-      reportStyles: reportStyles,
-      showReportGraphSettings: false,
-      currentQuestionGraph: false,
-      groupBy: reportStyles.default.groupDataBy
-    });
-  }
-  reportCustomListener(assetUid, reportCustom) {
-    var crid = this.state.currentCustomReport.crid;
-    if (reportCustom[crid]) {
-      this.setState({
-        reportCustom: reportCustom,
-        showCustomReportModal: false,
-        showReportGraphSettings: false,
-        currentQuestionGraph: false,
-        groupBy: (reportCustom[crid].reportStyle && reportCustom[crid].reportStyle.groupDataBy) ? reportCustom[crid].reportStyle.groupDataBy : false
-      });
-    } else {
-      this.setState({
-        reportCustom: reportCustom,
-        showCustomReportModal: false,
-        showReportGraphSettings: false,
-        currentQuestionGraph: false,
-        currentCustomReport: false,
-        groupBy: (reportStyles.default && reportStyles.default.groupDataBy) ? reportStyles.default.groupDataBy : false
-      });
-    }
-  }
-  toggleReportGraphSettings () {
-    this.setState({
-      showReportGraphSettings: !this.state.showReportGraphSettings,
-    });
-  }
-  hasAnyProvidedData (reportData) {
-    let hasAny = false;
-    reportData.map((rowContent, i)=>{
-      if (rowContent.data.provided) {
-        hasAny = true;
-      }
-    });
-    return hasAny;
-  }
-  setCustomReport (e) {
-    var crid = e ? e.target.getAttribute('data-crid') : false;
-
-    if(!this.state.showCustomReportModal) {
-      let currentCustomReport;
-      if (crid) {
-        // existing report
-        currentCustomReport = this.state.reportCustom[crid];
-      } else {
-        // new custom report
-        currentCustomReport = {
-          crid: txtid(),
-          name: '',
-          questions: []
-        }
-      }
-      this.setState({currentCustomReport: currentCustomReport});
-    }
-  }
-  editCustomReport () {
-    if(this.state.currentCustomReport) {
-      this.setState({showCustomReportModal: true});
-    }
-  }
-  toggleCustomReportModal () {
-    if(!this.state.showCustomReportModal) {
-      this.setCustomReport();
-    } else {
-      if (this.state.currentCustomReport) {
-        var crid = this.state.currentCustomReport.crid;
-        if (this.state.reportCustom[crid] == undefined) {
-          this.triggerDefaultReport();
-        }
-      }
-    }
-
-    this.setState({showCustomReportModal: !this.state.showCustomReportModal});
-  }
-  triggerDefaultReport() {
-    this.setState({currentCustomReport: false});
-  }
-  toggleFullscreen () {
-    this.setState({isFullscreen: !this.state.isFullscreen});
-  }
-  renderReportButtons () {
-    var customReports = this.state.reportCustom || {};
-    var customReportsList = [];
-    for (var key in customReports) {
-      if (customReports[key] && customReports[key].crid)
-        customReportsList.push(customReports[key]);
-    }
-
-    customReportsList.sort((a, b) => a.name.localeCompare(b.name));
-    var _this = this;
-
-    return (
-      <bem.FormView__reportButtons>
-        <ui.PopoverMenu type='custom-reports'
-            triggerLabel={this.state.currentCustomReport ? (this.state.currentCustomReport.name || t('Untitled Report')) : t('Custom Reports')}>
-            <bem.PopoverMenu__link
-              key='default'
-              data-name=''
-              onClick={this.triggerDefaultReport}
-              className={!this.state.currentCustomReport ? 'active' : ''}>
-                {t('Default Report')}
-            </bem.PopoverMenu__link>
-            {
-              customReportsList.map(function(m) {
-                return (
-                  <bem.PopoverMenu__link
-                    key={m.crid}
-                    data-crid={m.crid}
-                    onClick={_this.setCustomReport}
-                    className={(_this.state.currentCustomReport && _this.state.currentCustomReport.crid == m.crid) ? 'active' : ''}>
-                      {m.name || t('Untitled report')}
-                  </bem.PopoverMenu__link>
-                );
-              })
-            }
-            {this.userCan('change_asset', this.state.asset) &&
-              <bem.PopoverMenu__link
-                key='new'
-                onClick={this.toggleCustomReportModal}>
-                  {t('Create New Report')}
-              </bem.PopoverMenu__link>
-            }
-        </ui.PopoverMenu>
-
-        {this.state.currentCustomReport &&
-          <bem.Button m='icon' className='report-button__edit'
-                onClick={this.editCustomReport}
-                data-tip={t('Edit Report Questions')}>
-            <i className='k-icon-edit' />
-          </bem.Button>
-        }
-
-        <bem.Button
-          m='icon' className='report-button__expand right-tooltip'
-          onClick={this.toggleFullscreen}
-          data-tip={t('Toggle fullscreen')}
-        >
-          <i className='k-icon-expand' />
-        </bem.Button>
-
-        <bem.Button m='icon' className='report-button__print'
-                onClick={launchPrinting}
-                data-tip={t('Print')}>
-          <i className='k-icon-print' />
-        </bem.Button>
-
-        {this.userCan('change_asset', this.state.asset) &&
-          <bem.Button m='icon' className='report-button__settings'
-                  onClick={this.toggleReportGraphSettings}
-                  data-tip={t('Configure Report Style')}>
-            <i className='k-icon-settings' />
-          </bem.Button>
-        }
-      </bem.FormView__reportButtons>
-    );
-  }
-  renderCustomReportModal () {
-    return (
-      <bem.GraphSettings>
-        <ui.Modal.Body>
-          <CustomReportForm reportData={this.state.reportData}
-                            customReport={this.state.currentCustomReport}
-                            asset={this.state.asset}/>
-        </ui.Modal.Body>
-      </bem.GraphSettings>
-    );
-  }
-  resetReportLimit () {
-    this.setState({
-      reportLimit: false,
-    });
-  }
-  triggerQuestionSettings(evt) {
-    let question = evt.target.getAttribute('data-question');
-    if (question) {
-      this.setState({currentQuestionGraph: question});
-    }
-  }
-  renderQuestionSettings () {
-    return (
-      <bem.GraphSettings>
-        <ui.Modal.Body/>
-      </bem.GraphSettings>
-    );
-  }
-  closeQuestionSettings () {
-    this.setState({currentQuestionGraph: false});
-  }
-
-  render () {
-    if (!this.state.asset) {
-      return (
-          <bem.Loading>
-            {this.state.error ?
-              <bem.Loading__inner>
-                {t('This report cannot be loaded.')}
-                <br/>
-                <code>
-                  {this.state.error.statusText + ': ' + this.state.error.responseText}
-                </code>
-              </bem.Loading__inner>
-            :
-              <ui.LoadingSpinner/>
-            }
-          </bem.Loading>
-      );
-    }
-
-    let asset = this.state.asset,
-        currentCustomReport = this.state.currentCustomReport,
-        rowsByKuid = this.state.rowsByKuid,
-        docTitle;
-
-    if (asset && asset.content)
-      docTitle = asset.name || t('Untitled');
-
-    var reportData = this.state.reportData || [];
-
-    if (reportData.length) {
-      if (currentCustomReport && currentCustomReport.questions.length) {
-        const currentQuestions = currentCustomReport.questions;
-        const fullReportData = this.state.reportData;
-        reportData = fullReportData.filter(q => currentQuestions.includes(q.name));
-      }
-
-      if (this.state.reportLimit && reportData.length > this.state.reportLimit) {
-        reportData = reportData.slice(0, this.state.reportLimit);
-      }
-    }
-
-    if (this.state.reportData === undefined) {
-      return (
-        <bem.Loading>
-          {this.state.error ?
-            <bem.Loading__inner>
-              {t('This report cannot be loaded.')}
-              <br/>
-              <code>
-                {this.state.error.statusText + ': ' + this.state.error.responseText}
-              </code>
-            </bem.Loading__inner>
-          :
-            <ui.LoadingSpinner/>
-          }
-        </bem.Loading>
-      );
-    }
-
-    const formViewModifiers = [];
-    if (this.state.isFullscreen) {
-      formViewModifiers.push('fullscreen');
-    }
-
-    const hasAnyProvidedData = this.hasAnyProvidedData(reportData);
-    const hasGroupBy = this.state.groupBy.length !== 0;
-
-    return (
-      <DocumentTitle title={`${docTitle} | KoboToolbox`}>
-        <bem.FormView m={formViewModifiers}>
-          <bem.ReportView>
-            {this.renderReportButtons()}
-
-            {!hasAnyProvidedData &&
-              <bem.ReportView__wrap>
-                <bem.Loading>
-                  <bem.Loading__inner>
-                    {t('This report has no data.')}
-
-                    {hasGroupBy && ' ' + t('Try changing Report Style to "No grouping".')}
-                  </bem.Loading__inner>
-                </bem.Loading>
-              </bem.ReportView__wrap>
-            }
-
-            {hasAnyProvidedData &&
-              <bem.ReportView__wrap>
-                <bem.PrintOnly>
-                  <h3>{asset.name}</h3>
-                </bem.PrintOnly>
-                {!this.state.currentCustomReport && this.state.reportLimit && reportData.length && this.state.reportData.length > this.state.reportLimit &&
-                  <bem.FormView__cell m={['centered', 'reportLimit']}>
-                    <div>
-                      {t('For performance reasons, this report only includes the first ## questions.').replace('##', this.state.reportLimit)}
-                    </div>
-                    <bem.Button m='colored' onClick={this.resetReportLimit}>
-                      {t('Show all (##)').replace('##', this.state.reportData.length)}
-                    </bem.Button>
-                  </bem.FormView__cell>
-                }
-
-                <bem.FormView__cell m='warning'>
-                  <i className='k-icon-alert' />
-                  <p>{t('This is an automated report based on raw data submitted to this project. Please conduct proper data cleaning prior to using the graphs and figures used on this page. ')}</p>
-                </bem.FormView__cell>
-
-                <ReportContents parentState={this.state} reportData={reportData} triggerQuestionSettings={this.triggerQuestionSettings} />
-              </bem.ReportView__wrap>
-            }
-
-            {this.state.showReportGraphSettings &&
-              <ui.Modal open onClose={this.toggleReportGraphSettings} title={t('Edit Report Style')}>
-                <ReportStyleSettings parentState={this.state} />
-              </ui.Modal>
-            }
-
-            {this.state.showCustomReportModal &&
-              <ui.Modal open onClose={this.toggleCustomReportModal} title={t('Custom Report')}>
-                {this.renderCustomReportModal()}
-              </ui.Modal>
-            }
-
-            {this.state.currentQuestionGraph &&
-              <ui.Modal open onClose={this.closeQuestionSettings} title={t('Question Style')}>
-                <QuestionGraphSettings question={this.state.currentQuestionGraph} parentState={this.state} />
-              </ui.Modal>
-            }
-          </bem.ReportView>
-        </bem.FormView>
-      </DocumentTitle>
-      );
-  }
-
-}
-
-reactMixin(Reports.prototype, mixins.permissions);
-reactMixin(Reports.prototype, Reflux.ListenerMixin);
-
-export default Reports;
diff --git a/jsapp/js/components/reports/chartColorsPicker.es6 b/jsapp/js/components/reports/chartColorsPicker.es6
new file mode 100644
index 0000000000..14cce33c5d
--- /dev/null
+++ b/jsapp/js/components/reports/chartColorsPicker.es6
@@ -0,0 +1,62 @@
+import React from 'react';
+import autoBind from 'react-autobind';
+import {bem} from 'js/bem';
+import {REPORT_COLOR_SETS} from './reportsConstants';
+
+/**
+ * @prop {function} onChange
+ * @prop {object} defaultStyle
+ */
+export default class ChartColorsPicker extends React.Component {
+  constructor(props) {
+    super(props);
+    autoBind(this);
+  }
+
+  defaultReportColorsChange(evt) {
+    this.props.onChange(
+      { default: true },
+      { report_colors: REPORT_COLOR_SETS[evt.currentTarget.value].colors || REPORT_COLOR_SETS[0].colors },
+    );
+  }
+
+  defaultValue(set, index) {
+    if (this.props.defaultStyle.report_colors === undefined && index === 0) {
+      return true;
+    }
+
+    return JSON.stringify(this.props.defaultStyle.report_colors) === JSON.stringify(set.colors);
+  }
+
+  render() {
+    var radioButtons = REPORT_COLOR_SETS.map(function(set, index){
+      return (
+        <bem.GraphSettings__radio key={index}>
+          <input
+            type='radio'
+            name='chart_colors'
+            value={index}
+            checked={this.defaultValue(set, index)}
+            onChange={this.defaultReportColorsChange}
+            id={'type-' + set.label}
+          />
+          <label htmlFor={'type-' + set.label}>
+          {
+            REPORT_COLOR_SETS[index].colors.map(function(color, i){
+              return (
+                <div style={{backgroundColor: color}} key={i} />
+              );
+            }, this)
+          }
+          </label>
+        </bem.GraphSettings__radio>
+      );
+    }, this);
+
+    return (
+      <bem.GraphSettings__colors>
+        {radioButtons}
+      </bem.GraphSettings__colors>
+    );
+  }
+}
diff --git a/jsapp/js/components/reports/chartTypePicker.es6 b/jsapp/js/components/reports/chartTypePicker.es6
new file mode 100644
index 0000000000..f79fbae9e3
--- /dev/null
+++ b/jsapp/js/components/reports/chartTypePicker.es6
@@ -0,0 +1,57 @@
+import React from 'react';
+import autoBind from 'react-autobind';
+import {bem} from 'js/bem';
+import {REPORT_STYLES} from './reportsConstants';
+
+/**
+ * @prop {function} onChange
+ * @prop {object} defaultStyle
+ */
+export default class ChartTypePicker extends React.Component {
+  constructor(props) {
+    super(props);
+    autoBind(this);
+  }
+
+  defaultReportStyleChange(evt) {
+    this.props.onChange(
+      { default: true },
+      { report_type: evt.currentTarget.value || 'bar' },
+    );
+  }
+
+  render() {
+    let reportStylesOrdered = [
+      REPORT_STYLES.vertical,
+      REPORT_STYLES.donut,
+      REPORT_STYLES.area,
+      REPORT_STYLES.horizontal,
+      REPORT_STYLES.pie,
+      REPORT_STYLES.line,
+    ];
+
+    var radioButtons = reportStylesOrdered.map(function(style, i) {
+      return (
+        <bem.GraphSettings__radio m={style.value} key={i}>
+          <input
+            type='radio'
+            name='chart_type'
+            value={style.value}
+            checked={this.props.defaultStyle.report_type === style.value}
+            onChange={this.defaultReportStyleChange}
+            id={'type-' + style.value}
+          />
+          <label htmlFor={'type-' + style.value}>
+            {style.label}
+          </label>
+        </bem.GraphSettings__radio>
+      );
+    }, this);
+
+    return (
+      <bem.GraphSettings__charttype>
+        {radioButtons}
+      </bem.GraphSettings__charttype>
+    );
+  }
+}
diff --git a/jsapp/js/components/reports/customReportForm.es6 b/jsapp/js/components/reports/customReportForm.es6
new file mode 100644
index 0000000000..cc599c4870
--- /dev/null
+++ b/jsapp/js/components/reports/customReportForm.es6
@@ -0,0 +1,95 @@
+import React from 'react';
+import autoBind from 'react-autobind';
+import Checkbox from 'js/components/common/checkbox';
+import {actions} from 'js/actions';
+import {bem} from 'js/bem';
+
+export default class CustomReportForm extends React.Component {
+  constructor(props) {
+    super(props);
+    autoBind(this);
+
+    this.state = {
+      customReport: props.customReport,
+    };
+  }
+
+  customReportNameChange(evt) {
+    var report = this.state.customReport;
+    report.name = evt.target.value;
+    this.setState({customReport: report});
+  }
+
+  customReportQuestionChange(name, isChecked) {
+    var r = this.state.customReport;
+
+    if (isChecked) {
+      r.questions.push(name);
+    } else {
+      r.questions.splice(r.questions.indexOf(name), 1);
+    }
+    this.setState({customReport: r});
+  }
+
+  saveCustomReport() {
+    let report_custom = this.props.asset.report_custom;
+    const crid = this.state.customReport.crid;
+
+    report_custom[crid] = this.state.customReport;
+    actions.reports.setCustom(this.props.asset.uid, report_custom);
+  }
+
+  deleteCustomReport() {
+    let report_custom = this.props.asset.report_custom;
+    const crid = this.state.customReport.crid;
+
+    delete report_custom[crid];
+    actions.reports.setCustom(this.props.asset.uid, report_custom);
+  }
+
+  render() {
+    const crid = this.state.customReport.crid;
+    var questionList = this.props.reportData.map(function(q, i){
+      return (
+        <div className='graph-settings__question' key={i}>
+            <Checkbox
+              checked={this.state.customReport.questions.includes(q.name)}
+              onChange={this.customReportQuestionChange.bind(this, q.name)}
+              label={q.row.label ? q.row.label[0] : t('Unlabeled') }
+            />
+        </div>
+      );
+    }, this);
+
+    return (
+      <div className='custom-report-form'>
+        <div className='custom-report--title'>
+          <input
+            type='text'
+            name='title'
+            value={this.state.customReport.name}
+            placeholder={t('Untitled Report')}
+            onChange={this.customReportNameChange}
+          />
+        </div>
+
+        <strong>{t('Include the following questions:')}</strong>
+
+        <div className='custom-report--questions'>
+          {questionList}
+        </div>
+
+        <bem.Modal__footer>
+          {this.props.asset.report_custom[crid] &&
+            <bem.KoboButton m='red' onClick={this.deleteCustomReport}>
+              {t('Delete')}
+            </bem.KoboButton>
+          }
+          <bem.KoboButton m='blue' onClick={this.saveCustomReport}>
+            {t('Save')}
+          </bem.KoboButton>
+        </bem.Modal__footer>
+      </div>
+    );
+  }
+}
diff --git a/jsapp/js/components/reports/questionGraphSettings.es6 b/jsapp/js/components/reports/questionGraphSettings.es6
new file mode 100644
index 0000000000..4008acd316
--- /dev/null
+++ b/jsapp/js/components/reports/questionGraphSettings.es6
@@ -0,0 +1,136 @@
+import React from 'react';
+import autoBind from 'react-autobind';
+import {actions} from 'js/actions';
+import {bem} from 'js/bem';
+import ui from 'js/ui';
+import ChartTypePicker from './chartTypePicker';
+import ChartColorsPicker from './chartColorsPicker';
+
+export default class QuestionGraphSettings extends React.Component {
+  constructor(props) {
+    super(props);
+    autoBind(this);
+
+    this.state = {
+      activeModalTab: 0,
+      rStyle: {
+        report_type: false,
+        report_colors: false,
+        width: false,
+      },
+    };
+  }
+
+  toggleTab(evt) {
+    var i = evt.target.getAttribute('data-index');
+    this.setState({activeModalTab: parseInt(i)});
+  }
+
+  componentDidMount() {
+    let _qn = this.props.question;
+    let specificSettings = null;
+
+    if (!this.props.parentState.currentCustomReport) {
+      specificSettings = this.props.parentState.reportStyles.specified;
+    } else {
+      specificSettings = this.props.parentState.currentCustomReport.specified;
+    }
+
+    if (specificSettings && specificSettings[_qn] && Object.keys(specificSettings[_qn]).length) {
+      const rStyle = Object.assign({}, specificSettings[_qn]);
+      this.setState({rStyle: rStyle});
+    }
+  }
+
+  saveQS(reset) {
+    let assetUid = this.props.parentState.asset.uid,
+        customReport = this.props.parentState.currentCustomReport,
+        _qn = this.props.question;
+
+    if (!customReport) {
+      var sett_ = this.props.parentState.reportStyles;
+      sett_.specified[_qn] = reset ? {} : this.state.rStyle;
+      actions.reports.setStyle(assetUid, sett_);
+    } else {
+      let report_custom = this.props.parentState.asset.report_custom;
+      if (report_custom[customReport.crid].specified === undefined) {
+        report_custom[customReport.crid].specified = {};
+      }
+
+      report_custom[customReport.crid].specified[_qn] = reset ? {} : this.state.rStyle;
+      actions.reports.setCustom(assetUid, report_custom);
+    }
+  }
+
+  questionStyleChange(params, value) {
+    var styles = this.state.rStyle;
+
+    if (value && value.report_type) {
+      styles.report_type = value.report_type;
+    }
+    if (value && value.report_colors) {
+      styles.report_colors = value.report_colors;
+    }
+    if (params && params.id === 'width') {
+      styles.width = params.value;
+    }
+
+    this.setState({rStyle: styles});
+  }
+
+  render() {
+    let reportStyle = this.state.rStyle;
+
+    var tabs = [t('Chart Type'), t('Colors')];
+    var modalTabs = tabs.map(function(tab, i) {
+      return (
+        <button
+          className={`mdl-button mdl-button--tab ${this.state.activeModalTab === i ? 'active' : ''}`}
+          onClick={this.toggleTab}
+          data-index={i}
+          key={i}
+        >
+          {tab}
+        </button>
+      );
+    }, this);
+
+    return (
+      <bem.GraphSettings>
+        <ui.Modal.Tabs>
+          {modalTabs}
+        </ui.Modal.Tabs>
+        <ui.Modal.Body>
+          <div className='tabs-content'>
+            {this.state.activeModalTab === 0 &&
+              <div id='graph-type'>
+                <ChartTypePicker
+                  defaultStyle={reportStyle}
+                  onChange={this.questionStyleChange}
+                />
+              </div>
+            }
+            {this.state.activeModalTab === 1 &&
+              <div id='graph-colors'>
+                <ChartColorsPicker
+                  defaultStyle={reportStyle}
+                  onChange={this.questionStyleChange} />
+              </div>
+            }
+          </div>
+        </ui.Modal.Body>
+
+        <ui.Modal.Footer>
+          {(reportStyle.report_type || reportStyle.report_colors || reportStyle.width) &&
+            <bem.Button className='reset' onClick={this.saveQS.bind(this, true)}>
+              {t('Reset')}
+            </bem.Button>
+          }
+          <bem.Button className='primary' onClick={this.saveQS.bind(this, false)}>
+            {t('Save')}
+          </bem.Button>
+        </ui.Modal.Footer>
+      </bem.GraphSettings>
+    );
+  }
+}
diff --git a/jsapp/js/components/reports/reportContents.es6 b/jsapp/js/components/reports/reportContents.es6
new file mode 100644
index 0000000000..4ed1dfdee0
--- /dev/null
+++ b/jsapp/js/components/reports/reportContents.es6
@@ -0,0 +1,151 @@
+import React from 'react';
+import _ from 'underscore';
+import {bem} from 'js/bem';
+import {QUESTION_TYPES} from 'js/constans';
+import ReportViewItem from './reportViewItem';
+
+export default class ReportContents extends React.Component {
+  constructor(props) {
+    super(props);
+  }
+
+  shouldComponentUpdate(nextProps, nextState) {
+    // to improve UI performance, don't refresh report while a modal window is visible
+    if (nextProps.parentState.showReportGraphSettings
+        || nextProps.parentState.showCustomReportModal
+        || nextProps.parentState.currentQuestionGraph) {
+      return false;
+    } else {
+      return true;
+    }
+  }
+
+  render() {
+    var tnslIndex = 0;
+    let customReport = this.props.parentState.currentCustomReport;
+    let defaultRS = this.props.parentState.reportStyles;
+    let asset = this.props.parentState.asset;
+    let groupBy = this.props.parentState.groupBy;
+
+    if (customReport) {
+      if (customReport.reportStyle && customReport.reportStyle.translationIndex) {
+        tnslIndex = parseInt(customReport.reportStyle.translationIndex);
+      }
+    } else {
+      tnslIndex = defaultRS.default.translationIndex || 0;
+    }
+
+    // reset to first language if trnslt index cannot be found
+    if (asset.content.translations && !asset.content.translations[tnslIndex]) {
+      tnslIndex = 0;
+    }
+
+    var reportData = this.props.reportData;
+
+    for (var i = reportData.length - 1; i > -1; i--) {
+      let _qn = reportData[i].name;
+      let _type = reportData[i].row.type || null;
+      var _defSpec = undefined;
+
+      if (customReport) {
+        if (customReport.specified && customReport.specified[_qn]) {
+          _defSpec = customReport.specified[_qn];
+        }
+      } else {
+        _defSpec = defaultRS.specified[_qn];
+      }
+
+      if (_defSpec && Object.keys(_defSpec).length) {
+        reportData[i].style = _defSpec;
+      } else if (customReport && customReport.reportStyle) {
+        reportData[i].style = customReport.reportStyle;
+      } else {
+        reportData[i].style = defaultRS.default;
+      }
+
+      if (
+        (_type === QUESTION_TYPES.select_one.id || _type === QUESTION_TYPES.select_multiple.id) &&
+        asset.content.choices
+      ) {
+        let question = asset.content.survey.find((z) => {return z.name === _qn || z.$autoname === _qn;});
+        let resps = reportData[i].data.responses;
+        let choice;
+        if (resps) {
+          reportData[i].data.responseLabels = [];
+          for (var j = resps.length - 1; j >= 0; j--) {
+            choice = asset.content.choices.find((o) => {
+              return (
+                question &&
+                o.list_name === question.select_from_list_name &&
+                (o.name === resps[j] || o.$autoname == resps[j])
+              );
+            });
+            if (choice && choice.label && choice.label[tnslIndex]) {
+              reportData[i].data.responseLabels.unshift(choice.label[tnslIndex]);
+            } else {
+              reportData[i].data.responseLabels.unshift(resps[j]);
+            }
+          }
+        } else {
+          const vals = reportData[i].data.values;
+          if (vals && vals[0] && vals[0][1] && vals[0][1].responses) {
+            var respValues = vals[0][1].responses;
+            reportData[i].data.responseLabels = [];
+            let qGB = asset.content.survey.find((z) => {return z.name === groupBy || z.$autoname === groupBy});
+            respValues.forEach(function(r, ind){
+              choice = asset.content.choices.find((o) => {
+                return (
+                  qGB &&
+                  o.list_name === qGB.select_from_list_name &&
+                  (o.name === r || o.$autoname === r)
+                );
+              });
+              reportData[i].data.responseLabels[ind] = (choice && choice.label && choice.label[tnslIndex]) ? choice.label[tnslIndex] : r;
+            });
+
+            // TODO: use a better way to store translated labels per row
+            for (var vD = vals.length - 1; vD >= 0; vD--) {
+              choice = asset.content.choices.find((o) => {
+                return (
+                  question &&
+                  o.list_name === question.select_from_list_name &&
+                  (o.name === vals[vD][0] || o.$autoname === vals[vD][0])
+                );
+              });
+              vals[vD][2] = (choice && choice.label && choice.label[tnslIndex]) ? choice.label[tnslIndex] : vals[vD][0];
+            }
+          }
+        }
+      }
+    }
+
+    return (
+      <div>
+        {
+          reportData.map((rowContent, i) =>{
+            let label = t('Unlabeled');
+            if (_.isArray(rowContent.row.label)) {
+              label = rowContent.row.label[tnslIndex];
+            } else if (_.isString(rowContent.row.label)) {
+              label = rowContent.row.label;
+            }
+
+            if (!rowContent.data.provided) {
+              return false;
+            }
+
+            return (
+              <bem.ReportView__item key={i}>
+                <ReportViewItem
+                  {...rowContent}
+                  label={label}
+                  triggerQuestionSettings={this.props.triggerQuestionSettings}
+                />
+              </bem.ReportView__item>
+            );
+          })
+        }
+      </div>
+    );
+  }
+}
diff --git a/jsapp/js/components/reports/reportStyleSettings.es6 b/jsapp/js/components/reports/reportStyleSettings.es6
new file mode 100644
index 0000000000..605a01ef60
--- /dev/null
+++ b/jsapp/js/components/reports/reportStyleSettings.es6
@@ -0,0 +1,182 @@
+import React from 'react';
+import autoBind from 'react-autobind';
+import Radio from 'js/components/common/radio';
+import {actions} from 'js/actions';
+import {bem} from 'js/bem';
+import ui from 'js/ui';
+import { assign } from 'utils';
+import ChartTypePicker from './chartTypePicker';
+import ChartColorsPicker from './chartColorsPicker';
+
+export default class ReportStyleSettings extends React.Component {
+  constructor(props) {
+    super(props);
+    autoBind(this);
+    this.state = {
+      activeModalTab: 0,
+      reportStyle: props.parentState.reportStyles.default,
+    };
+
+    if (props.parentState.currentCustomReport && props.parentState.currentCustomReport.reportStyle) {
+      this.state.reportStyle = props.parentState.currentCustomReport.reportStyle;
+    }
+  }
+
+  toggleTab(evt) {
+    var i = evt.target.getAttribute('data-index');
+    this.setState({
+      activeModalTab: parseInt(i),
+    });
+  }
+
+  reportStyleChange(params, value) {
+    let styles = this.state.reportStyle;
+    assign(styles, value);
+    this.setState({reportStyle: styles});
+  }
+
+  reportSizeChange(params) {
+    if (params.id == 'width') {
+      let styles = this.state.reportStyle;
+      styles.graphWidth = params.value;
+      this.setState({reportStyle: styles});
+    }
+  }
+
+  translationIndexChange(name, value) {
+    let styles = this.state.reportStyle;
+    styles.translationIndex = parseInt(value);
+    this.setState({reportStyle: styles});
+  }
+
+  onGroupByChange(name, value) {
+    let styles = this.state.reportStyle;
+    styles.groupDataBy = value;
+    this.setState({reportStyle: styles});
+  }
+
+  saveReportStyles() {
+    let currentCustomReport = this.props.parentState.currentCustomReport;
+    let assetUid = this.props.parentState.asset.uid;
+    if (currentCustomReport) {
+      let report_custom = this.props.parentState.asset.report_custom;
+      report_custom[currentCustomReport.crid].reportStyle = this.state.reportStyle;
+      actions.reports.setCustom(assetUid, report_custom);
+    } else {
+      let sett_ = this.props.parentState.reportStyles;
+      assign(sett_.default, this.state.ReportStyle);
+      actions.reports.setStyle(assetUid, sett_);
+    }
+  }
+
+  render() {
+    let rows = this.props.parentState.rowsByIdentifier || {};
+    let translations = this.props.parentState.translations;
+    let reportStyle = this.state.reportStyle;
+
+    const groupByOptions = [];
+    groupByOptions.push({
+      value: '',
+      label: t('No grouping'),
+    });
+
+    for (let key in rows) {
+      if (
+        rows.hasOwnProperty(key) &&
+        rows[key].hasOwnProperty('type') &&
+        rows[key].type == 'select_one'
+      ) {
+        const row = rows[key];
+        const val = row.name || row.$autoname;
+        const label = translations ? row.label[reportStyle.translationIndex] : row.label;
+        groupByOptions.push({
+          value: val,
+          label: label,
+        });
+      }
+    }
+
+    var tabs = [t('Chart Type'), t('Colors')];
+
+    if (groupByOptions.length > 1) {
+      tabs.push(t('Group By'));
+    }
+
+    const selectedTranslationOptions = [];
+    if (translations) {
+      tabs.push(t('Translation'));
+      this.props.parentState.asset.content.translations.map((row, i) => {
+        selectedTranslationOptions.push({
+          value: i,
+          label: row || t('Unnamed language'),
+        });
+      });
+    }
+
+    var modalTabs = tabs.map(function(tab, i) {
+      return (
+        <button
+          className={`mdl-button mdl-button--tab ${this.state.activeModalTab === i ? 'active' : ''}`}
+          onClick={this.toggleTab}
+          data-index={i}
+          key={i}
+        >
+          {tab}
+        </button>
+      );
+    }, this);
+
+    return (
+      <bem.GraphSettings>
+        <ui.Modal.Tabs>
+          {modalTabs}
+        </ui.Modal.Tabs>
+        <ui.Modal.Body>
+          <div className='tabs-content'>
+            {tabs[this.state.activeModalTab] === t('Chart Type') &&
+              <div id='graph-type'>
+                <ChartTypePicker
+                  defaultStyle={reportStyle}
+                  onChange={this.reportStyleChange}
+                />
+              </div>
+            }
+            {tabs[this.state.activeModalTab] === t('Colors') &&
+              <div id='graph-colors'>
+                <ChartColorsPicker
+                  defaultStyle={reportStyle}
+                  onChange={this.reportStyleChange}
+                />
+              </div>
+            }
+            {tabs[this.state.activeModalTab] === t('Group By') && groupByOptions.length > 1 &&
+              <div className='graph-tab__groupby' id='graph-labels'>
+                <Radio
+                  name='reports-groupby'
+                  options={groupByOptions}
+                  onChange={this.onGroupByChange}
+                  selected={reportStyle.groupDataBy}
+                />
+              </div>
+            }
+            {tabs[this.state.activeModalTab] === t('Translation') && selectedTranslationOptions.length > 1 &&
+              <div className='graph-tab__translation' id='graph-labels'>
+                <Radio
+                  name='reports-selected-translation'
+                  options={selectedTranslationOptions}
+                  onChange={this.translationIndexChange}
+                  selected={reportStyle.translationIndex}
+                />
+              </div>
+            }
+          </div>
+          <ui.Modal.Footer>
+            <bem.KoboButton m='blue' onClick={this.saveReportStyles}>
+              {t('Save')}
+            </bem.KoboButton>
+          </ui.Modal.Footer>
+        </ui.Modal.Body>
+      </bem.GraphSettings>
+    );
+  }
+}
diff --git a/jsapp/js/components/reports/reportTable.es6 b/jsapp/js/components/reports/reportTable.es6
new file mode 100644
index 0000000000..6762c8dce0
--- /dev/null
+++ b/jsapp/js/components/reports/reportTable.es6
@@ -0,0 +1,108 @@
+import React from 'react';
+
+export default class ReportTable extends React.Component {
+  constructor(props) {
+    super(props);
+  }
+
+  formatNumber(x) {
+    if (isNaN(x)) {
+      return x;
+    }
+    return x.toFixed(2);
+  }
+
+  render() {
+    let th = [''], rows = [];
+    if (this.props.type === 'numerical') {
+      th = [t('Mean'), t('Median'), t('Mode'), t('Standard deviation')];
+      if (this.props.rows) {
+        th.unshift('');
+      }
+      if (this.props.values) {
+        var v = this.props.values;
+      }
+      return (
+        <table>
+          <thead>
+            <tr>
+              {th.map((t, i) =>{
+                return (<th key={i}>{t}</th>);
+              })}
+            </tr>
+          </thead>
+          {this.props.values &&
+            <tbody>
+              <tr>
+                <td>{this.formatNumber(v.mean) || t('N/A')}</td>
+                <td>{this.formatNumber(v.median) || t('N/A')}</td>
+                <td>{this.formatNumber(v.mode) || t('N/A')}</td>
+                <td>{this.formatNumber(v.stdev) || t('N/A')}</td>
+              </tr>
+            </tbody>
+          }
+          {this.props.rows &&
+            <tbody>
+              {this.props.rows.map((r) => {
+                return (
+                    <tr key={r[0]}>
+                      <td>{r[0]}</td>
+                      <td>{this.formatNumber(r[1].mean) || t('N/A')}</td>
+                      <td>{this.formatNumber(r[1].median) || t('N/A')}</td>
+                      <td>{this.formatNumber(r[1].mode) || t('N/A')}</td>
+                      <td>{this.formatNumber(r[1].stdev) || t('N/A')}</td>
+                    </tr>
+                  );
+              })}
+            </tbody>
+          }
+        </table>
+      );
+    }
+    if (this.props.type === 'regular') {
+      th = [t('Value'), t('Frequency'), t('Percentage')];
+      rows = this.props.rows;
+    // prepare table data for disaggregated rows
+    } else if (this.props.rows.length > 0) {
+      let rowsB = this.props.rows;
+      if (this.props.responseLabels) {
+        th = th.concat(this.props.responseLabels);
+      } else if (rowsB[0] && rowsB[0][1] && rowsB[0][1].responses) {
+        th = th.concat(rowsB[0][1].responses);
+      }
+
+      rowsB.map((row) => {
+        var rowitem = row[2] ? [row[2]] : [row[0]];
+        rowitem = rowitem.concat(row[1].percentages);
+        rows.push(rowitem);
+      });
+    }
+
+    if (rows.length === 0) {
+      return false;
+    }
+
+    return (
+      <table>
+        <thead>
+          <tr>
+            {th.map((t, i) =>{
+              return (<th key={i}>{t}</th>);
+            })}
+          </tr>
+        </thead>
+        <tbody>
+          {rows.map((row)=>{
+            return (
+              <tr key={row[0]}>
+                {row.map((r, i) =>{
+                  return (<td key={i}>{r}</td>);
+                })}
+              </tr>
+            );
+          })}
+        </tbody>
+      </table>
+    );
+  }
+}
diff --git a/jsapp/js/components/reportViewItem.es6 b/jsapp/js/components/reports/reportViewItem.es6
similarity index 65%
rename from jsapp/js/components/reportViewItem.es6
rename to jsapp/js/components/reports/reportViewItem.es6
index 0dcc93afd3..1718b2116c 100644
--- a/jsapp/js/components/reportViewItem.es6
+++ b/jsapp/js/components/reports/reportViewItem.es6
@@ -3,138 +3,42 @@ import autoBind from 'react-autobind';
 import ReactDOM from 'react-dom';
 import _ from 'underscore';
 import Chart from 'chart.js';
-import {bem} from '../bem';
-import {REPORT_STYLES} from 'js/constants';
+import {bem} from 'js/bem';
+import {
+  REPORT_STYLES,
+  REPORT_COLOR_SETS,
+} from './reportsConstants';
+import ReportTable from './reportTable';
 
-class ReportTable extends React.Component {
-  constructor(props) {
-    super(props);
-  }
-  formatNumber(x) {
-    if (isNaN(x))
-      return x;
-    return x.toFixed(2);
-  }
-  render () {
-    let th = [''], rows = [];
-    if (this.props.type === 'numerical') {
-      th = [t('Mean'), t('Median'), t('Mode'), t('Standard deviation')];
-      if (this.props.rows)
-        th.unshift('');
-      if (this.props.values)
-        var v = this.props.values
-      return (
-        <table>
-          <thead>
-            <tr>
-              {th.map((t,i)=>{
-                return (<th key={i}>{t}</th>);
-              })}
-            </tr>
-          </thead>
-          {this.props.values &&
-            <tbody>
-              <tr>
-                <td>{this.formatNumber(v.mean) || t('N/A')}</td>
-                <td>{this.formatNumber(v.median) || t('N/A')}</td>
-                <td>{this.formatNumber(v.mode) || t('N/A')}</td>
-                <td>{this.formatNumber(v.stdev) || t('N/A')}</td>
-              </tr>
-            </tbody>
-          }
-          {this.props.rows &&
-            <tbody>
-              {this.props.rows.map((r)=>{
-                return (
-                    <tr key={r[0]}>
-                      <td>{r[0]}</td>
-                      <td>{this.formatNumber(r[1].mean) || t('N/A')}</td>
-                      <td>{this.formatNumber(r[1].median) || t('N/A')}</td>
-                      <td>{this.formatNumber(r[1].mode) || t('N/A')}</td>
-                      <td>{this.formatNumber(r[1].stdev) || t('N/A')}</td>
-                    </tr>
-                  );
-              })}
-            </tbody>
-          }
-        </table>
-      );
-    }
-    if (this.props.type === 'regular') {
-      th = [t('Value'), t('Frequency'), t('Percentage')];
-      rows = this.props.rows;
-    } else {
-      // prepare table data for disaggregated rows
-      if (this.props.rows.length > 0) {
-        let rowsB = this.props.rows;
-        if (this.props.responseLabels) {
-          th = th.concat(this.props.responseLabels);
-        } else {
-          if (rowsB[0] && rowsB[0][1] && rowsB[0][1].responses)
-            th = th.concat(rowsB[0][1].responses);
-        }
-        rowsB.map((row, i)=> {
-          var rowitem = row[2] ? [row[2]] : [row[0]];
-          rowitem = rowitem.concat(row[1].percentages);
-          rows.push(rowitem);
-        });
-      }
-    }
-
-    if (rows.length === 0) {
-      return false;
-    }
-
-    return (
-        <table>
-          <thead>
-            <tr>
-              {th.map((t,i)=>{
-                return (<th key={i}>{t}</th>);
-              })}
-            </tr>
-          </thead>
-          <tbody>
-            {rows.map((row)=>{
-              return (
-                  <tr key={row[0]}>
-                    {row.map((r,i)=>{
-                      return (<td key={i}>{r}</td>);
-                    })}
-                  </tr>
-                );
-            })}
-          </tbody>
-        </table>
-      )
-  }
-};
-
-class ReportViewItem extends React.Component {
+export default class ReportViewItem extends React.Component {
   constructor(props) {
     super(props);
     this.state = {
-      reportTable: false
+      reportTable: false,
     };
     this.itemChart = false;
     autoBind(this);
   }
-  componentDidMount () {
+
+  componentDidMount() {
     this.prepareTable(this.props.data);
     if (this.props.data.show_graph) {
       this.loadChart();
     }
   }
+
   componentWillReceiveProps(nextProps) {
     this.prepareTable(nextProps.data);
   }
-  componentDidUpdate (prevProps) {
+
+  componentDidUpdate() {
     // refreshes a chart right after render()
     // TODO: ideally this shouldn't refresh a chart if it hasn't changed
     if (this.props.data.show_graph) {
       this.loadChart();
     }
   }
+
   loadChart() {
     var canvas = ReactDOM.findDOMNode(this.refs.canvas);
     var opts = this.buildChartOptions();
@@ -146,6 +50,7 @@ class ReportViewItem extends React.Component {
       this.itemChart = new Chart(canvas, opts);
     }
   }
+
   prepareTable(d) {
     var reportTable = [];
     if (d.percentages && d.responses && d.frequencies) {
@@ -156,15 +61,18 @@ class ReportViewItem extends React.Component {
         );
     }
 
-    if (d.mean)
+    if (d.mean) {
       reportTable = false;
+    }
 
     this.setState({reportTable: reportTable});
   }
+
   truncateLabel(label, length = 25) {
     return label.length > length ? label.substring(0,length - 3) + '...' : label;
   }
-  buildChartOptions () {
+
+  buildChartOptions() {
     var data = this.props.data;
     var chartType = this.props.style.report_type || 'bar';
     let _this = this;
@@ -191,19 +99,19 @@ class ReportViewItem extends React.Component {
     }
 
     if (chartType === REPORT_STYLES.donut.value) {
-      chartType = 'pie';
+      chartType = REPORT_STYLES.donut.chartJsType;
     }
 
     if (chartType === REPORT_STYLES.area.value) {
-      chartType = 'line';
+      chartType = REPORT_STYLES.area.chartJsType;
     }
 
     if (chartType === REPORT_STYLES.horizontal.value) {
-      chartType = 'horizontalBar';
+      chartType = REPORT_STYLES.horizontal.chartJsType;
     }
 
     if (chartType === REPORT_STYLES.vertical.value || chartType === 'bar_chart') {
-      chartType = 'bar';
+      chartType = REPORT_STYLES.vertical.chartJsType;
     }
 
     var datasets = [];
@@ -259,22 +167,22 @@ class ReportViewItem extends React.Component {
       type: chartType,
       data: {
           labels: data.responseLabels || data.responses,
-          datasets: datasets
+          datasets: datasets,
       },
       options: {
         // events: [''],
         legend: {
-          display: showLegend
+          display: showLegend,
         },
         animation: {
-          duration: 500
+          duration: 500,
         },
         scales: {
           xAxes: [{
             ticks: {
-              autoSkip:false,
+              autoSkip: false,
               beginAtZero: true,
-              max: maxPercentage
+              max: maxPercentage,
             },
             barPercentage: barPercentage,
             // gridLines: {
@@ -283,17 +191,17 @@ class ReportViewItem extends React.Component {
           }],
           yAxes: [{
             ticks: {
-              autoSkip:false,
+              autoSkip: false,
               beginAtZero: true,
-              max: maxPercentage
+              max: maxPercentage,
             },
             barPercentage: barPercentage,
             // gridLines: {
             //   display: chartType == 'horizontalBar' ? false : true
             // }
-          }]
+          }],
         },
-      }
+      },
     };
 
     if (chartType === 'pie') {
@@ -313,17 +221,9 @@ class ReportViewItem extends React.Component {
 
     return opts;
   }
-  buildChartColors () {
-    var colors = this.props.style.report_colors || [
-      'rgba(52, 106, 200, 0.8)',
-      'rgba(252, 74, 124, 0.8)',
-      'rgba(250, 213, 99, 0.8)',
-      'rgba(113, 230, 33, 0.8)',
-      'rgba(78, 203, 255, 0.8)',
-      'rgba(253, 190, 76, 0.8)',
-      'rgba(77, 124, 244, 0.8)',
-      'rgba(33, 231, 184, 0.8)'
-    ];
+
+  buildChartColors() {
+    var colors = this.props.style.report_colors || REPORT_COLOR_SETS[0].colors;
 
     var c1 = colors.slice(0).map((c,i)=>{
       c = c.replace('1)', '0.75)');
@@ -339,7 +239,8 @@ class ReportViewItem extends React.Component {
 
     return colors;
   }
-  render () {
+
+  render() {
     let p = this.props,
       d = p.data,
       r = p.row,
@@ -380,10 +281,13 @@ class ReportViewItem extends React.Component {
             </span>
           </bem.ReportView__headingMeta>
           {d.show_graph &&
-            <bem.Button m='icon' className='report-button__question-settings'
-                  onClick={this.props.triggerQuestionSettings}
-                  data-question={name}
-                  data-tip={t('Override Graph Style')}>
+            <bem.Button
+              m='icon'
+              className='report-button__question-settings'
+              onClick={this.props.triggerQuestionSettings}
+              data-question={name}
+              data-tip={t('Override Graph Style')}
+            >
               <i className='k-icon-more' data-question={name} />
             </bem.Button>
           }
@@ -409,8 +313,6 @@ class ReportViewItem extends React.Component {
           }
         </bem.ReportView__itemContent>
       </div>
-      );
+    );
   }
-};
-
-export default ReportViewItem;
+}
diff --git a/jsapp/js/components/reports/reports.es6 b/jsapp/js/components/reports/reports.es6
new file mode 100644
index 0000000000..bb4d276c2e
--- /dev/null
+++ b/jsapp/js/components/reports/reports.es6
@@ -0,0 +1,557 @@
+import React from 'react';
+import reactMixin from 'react-mixin';
+import autoBind from 'react-autobind';
+import Reflux from 'reflux';
+import {dataInterface} from 'js/dataInterface';
+import {actions} from 'js/actions';
+import {bem} from 'js/bem';
+import {stores} from 'js/stores';
+import ui from 'js/ui';
+import mixins from 'js/mixins';
+import DocumentTitle from 'react-document-title';
+import { txtid } from '../../../xlform/src/model.utils';
+import alertify from 'alertifyjs';
+import {launchPrinting} from 'utils';
+import {REPORT_STYLES} from './reportsConstants';
+import CustomReportForm from './customReportForm';
+import QuestionGraphSettings from './questionGraphSettings';
+import ReportContents from './reportContents';
+import ReportStyleSettings from './reportStyleSettings';
+
+export default class Reports extends React.Component {
+  constructor(props) {
+    super(props);
+    this.state = {
+      graphWidth: '700',
+      graphHeight: '250',
+      translations: false,
+      activeModalTab: 0,
+      error: false,
+      isFullscreen: false,
+      reportLimit: 200,
+      customReports: false,
+      showReportGraphSettings: false,
+      showCustomReportModal: false,
+      currentCustomReport: false,
+      currentQuestionGraph: false,
+      groupBy: '',
+    };
+    autoBind(this);
+  }
+
+  componentDidMount() {
+    this.loadReportData();
+    this.listenTo(actions.reports.setStyle, this.reportStyleListener);
+    this.listenTo(actions.reports.setCustom, this.reportCustomListener);
+  }
+
+  componentDidUpdate(prevProps, prevState) {
+    if (this.state.currentCustomReport !== prevState.currentCustomReport) {
+      this.refreshReportData();
+    }
+    if (this.state.groupBy !== prevState.groupBy) {
+      this.refreshReportData();
+    }
+  }
+
+  loadReportData() {
+    const uid = this.props.params.assetid || this.props.params.uid;
+
+    stores.allAssets.whenLoaded(uid, (asset) => {
+      let rowsByKuid = {};
+      let rowsByIdentifier = {};
+      let groupBy = '',
+          reportStyles = asset.report_styles,
+          reportCustom = asset.report_custom;
+
+      if (
+        this.state.currentCustomReport &&
+        this.state.currentCustomReport.reportStyle &&
+        this.state.currentCustomReport.reportStyle.groupDataBy
+      ) {
+        groupBy = this.state.currentCustomReport.reportStyle.groupDataBy;
+      } else if (reportStyles.default.groupDataBy !== undefined) {
+        groupBy = reportStyles.default.groupDataBy;
+      }
+
+      // TODO: improve the defaults below
+      if (reportStyles.default.report_type === undefined) {
+        reportStyles.default.report_type = REPORT_STYLES.vertical.value;
+      }
+      if (reportStyles.default.translationIndex === undefined) {
+        reportStyles.default.translationIndex = 0;
+      }
+      if (reportStyles.default.groupDataBy === undefined) {
+        reportStyles.default.groupDataBy = '';
+      }
+
+      if (asset.content.survey != undefined) {
+        asset.content.survey.forEach(function(r){
+          if (r.$kuid) {
+            rowsByKuid[r.$kuid] = r;
+          }
+
+          let $identifier = r.$autoname || r.name;
+          rowsByIdentifier[$identifier] = r;
+        });
+
+        dataInterface.getReportData({uid: uid, identifiers: [], group_by: groupBy}).done((data) => {
+          var dataWithResponses = [];
+
+          data.list.forEach(function(row){
+            if (row.data.responses || row.data.values || row.data.mean) {
+              if (rowsByIdentifier[row.name] !== undefined) {
+                row.row.label = rowsByIdentifier[row.name].label;
+              } else if (row.name !== undefined) {
+                row.row.label = row.name;
+              } else {
+                row.row.label = t('untitled');
+              }
+              dataWithResponses.push(row);
+            }
+          });
+
+          this.setState({
+            asset: asset,
+            rowsByKuid: rowsByKuid,
+            rowsByIdentifier: rowsByIdentifier,
+            reportStyles: reportStyles,
+            reportData: dataWithResponses,
+            reportCustom: reportCustom,
+            translations: asset.content.translations.length > 1 ? true : false,
+            groupBy: groupBy,
+            error: false,
+          });
+        }).fail((err) => {
+          if (groupBy && groupBy.length > 0 && !this.state.currentCustomReport && reportStyles.default.groupDataBy !== undefined) {
+            // reset default report groupBy if it fails and notify user
+            reportStyles.default.groupDataBy = '';
+            this.setState({
+              reportStyles: reportStyles,
+            });
+            alertify.error(t('Could not load grouped results via "##". Will attempt to load the ungrouped report.').replace('##', groupBy));
+            this.loadReportData();
+          } else {
+            this.setState({
+              error: err,
+              asset: asset,
+            });
+          }
+        });
+      } else {
+        // Redundant?
+        console.error('Survey not defined.');
+      }
+    });
+  }
+
+  refreshReportData() {
+    let uid = this.props.params.assetid || this.props.params.uid,
+        rowsByIdentifier = this.state.rowsByIdentifier,
+        customReport = this.state.currentCustomReport;
+
+    var groupBy = '';
+
+    if (!customReport && this.state.reportStyles.default.groupDataBy !== undefined) {
+      groupBy = this.state.reportStyles.default.groupDataBy;
+    }
+
+    if (customReport && customReport.reportStyle && customReport.reportStyle.groupDataBy) {
+      groupBy = this.state.currentCustomReport.reportStyle.groupDataBy;
+    }
+
+    dataInterface.getReportData({uid: uid, identifiers: [], group_by: groupBy}).done((data) =>{
+      var dataWithResponses = [];
+
+      data.list.forEach(function(row){
+        if (row.data.responses || row.data.values || row.data.mean) {
+          if (rowsByIdentifier[row.name] !== undefined) {
+            row.row.label = rowsByIdentifier[row.name].label;
+          } else if (row.name !== undefined) {
+            row.row.label = row.name;
+          } else {
+            row.row.label = t('untitled');
+          }
+          dataWithResponses.push(row);
+        }
+      });
+
+      this.setState({
+        reportData: dataWithResponses,
+        error: false,
+      });
+    }).fail((err)=> {
+      alertify.error(t('Could not refresh report.'));
+      this.setState({
+        error: err,
+      });
+    });
+  }
+
+  reportStyleListener(assetUid, reportStyles) {
+    this.setState({
+      reportStyles: reportStyles,
+      showReportGraphSettings: false,
+      currentQuestionGraph: false,
+      groupBy: reportStyles.default.groupDataBy,
+    });
+  }
+
+  reportCustomListener(assetUid, reportCustom) {
+    var crid = this.state.currentCustomReport.crid;
+    if (reportCustom[crid]) {
+      this.setState({
+        reportCustom: reportCustom,
+        showCustomReportModal: false,
+        showReportGraphSettings: false,
+        currentQuestionGraph: false,
+        groupBy: (reportCustom[crid].reportStyle && reportCustom[crid].reportStyle.groupDataBy) ? reportCustom[crid].reportStyle.groupDataBy : false,
+      });
+    } else {
+      this.setState({
+        reportCustom: reportCustom,
+        showCustomReportModal: false,
+        showReportGraphSettings: false,
+        currentQuestionGraph: false,
+        currentCustomReport: false,
+        groupBy: (REPORT_STYLES.default && REPORT_STYLES.default.groupDataBy) ? REPORT_STYLES.default.groupDataBy : false,
+      });
+    }
+  }
+
+  toggleReportGraphSettings() {
+    this.setState({
+      showReportGraphSettings: !this.state.showReportGraphSettings,
+    });
+  }
+
+  hasAnyProvidedData(reportData) {
+    let hasAny = false;
+    reportData.map((rowContent) => {
+      if (rowContent.data.provided) {
+        hasAny = true;
+      }
+    });
+    return hasAny;
+  }
+
+  setCustomReport(e) {
+    var crid = e ? e.target.getAttribute('data-crid') : false;
+
+    if(!this.state.showCustomReportModal) {
+      let currentCustomReport;
+      if (crid) {
+        // existing report
+        currentCustomReport = this.state.reportCustom[crid];
+      } else {
+        // new custom report
+        currentCustomReport = {
+          crid: txtid(),
+          name: '',
+          questions: [],
+        };
+      }
+      this.setState({currentCustomReport: currentCustomReport});
+    }
+  }
+
+  editCustomReport() {
+    if(this.state.currentCustomReport) {
+      this.setState({showCustomReportModal: true});
+    }
+  }
+
+  toggleCustomReportModal() {
+    if(!this.state.showCustomReportModal) {
+      this.setCustomReport();
+    } else if (this.state.currentCustomReport) {
+      var crid = this.state.currentCustomReport.crid;
+      if (this.state.reportCustom[crid] == undefined) {
+        this.triggerDefaultReport();
+      }
+    }
+
+    this.setState({showCustomReportModal: !this.state.showCustomReportModal});
+  }
+
+  triggerDefaultReport() {
+    this.setState({currentCustomReport: false});
+  }
+
+  toggleFullscreen() {
+    this.setState({isFullscreen: !this.state.isFullscreen});
+  }
+
+  renderReportButtons() {
+    var customReports = this.state.reportCustom || {};
+    var customReportsList = [];
+    for (var key in customReports) {
+      if (customReports[key] && customReports[key].crid) {
+        customReportsList.push(customReports[key]);
+      }
+    }
+
+    customReportsList.sort((a, b) => {return a.name.localeCompare(b.name);});
+    var _this = this;
+
+    return (
+      <bem.FormView__reportButtons>
+        <ui.PopoverMenu
+          type='custom-reports'
+          triggerLabel={this.state.currentCustomReport ? (this.state.currentCustomReport.name || t('Untitled Report')) : t('Custom Reports')}
+        >
+          <bem.PopoverMenu__link
+            key='default'
+            data-name=''
+            onClick={this.triggerDefaultReport}
+            className={!this.state.currentCustomReport ? 'active' : ''}
+          >
+            {t('Default Report')}
+          </bem.PopoverMenu__link>
+          {
+            customReportsList.map(function(m) {
+              return (
+                <bem.PopoverMenu__link
+                  key={m.crid}
+                  data-crid={m.crid}
+                  onClick={_this.setCustomReport}
+                  className={(_this.state.currentCustomReport && _this.state.currentCustomReport.crid == m.crid) ? 'active' : ''}
+                >
+                  {m.name || t('Untitled report')}
+                </bem.PopoverMenu__link>
+              );
+            })
+          }
+          {this.userCan('change_asset', this.state.asset) &&
+            <bem.PopoverMenu__link
+              key='new'
+              onClick={this.toggleCustomReportModal}
+            >
+              {t('Create New Report')}
+            </bem.PopoverMenu__link>
+          }
+        </ui.PopoverMenu>
+
+        {this.state.currentCustomReport &&
+          <bem.Button
+            m='icon'
+            className='report-button__edit'
+            onClick={this.editCustomReport}
+            data-tip={t('Edit Report Questions')}
+          >
+            <i className='k-icon-edit' />
+          </bem.Button>
+        }
+
+        <bem.Button
+          m='icon'
+          className='report-button__expand right-tooltip'
+          onClick={this.toggleFullscreen}
+          data-tip={t('Toggle fullscreen')}
+        >
+          <i className='k-icon-expand' />
+        </bem.Button>
+
+        <bem.Button
+          m='icon'
+          className='report-button__print'
+          onClick={launchPrinting}
+          data-tip={t('Print')}
+        >
+          <i className='k-icon-print' />
+        </bem.Button>
+
+        {this.userCan('change_asset', this.state.asset) &&
+          <bem.Button
+            m='icon'
+            className='report-button__settings'
+            onClick={this.toggleReportGraphSettings}
+            data-tip={t('Configure Report Style')}
+          >
+            <i className='k-icon-settings' />
+          </bem.Button>
+        }
+      </bem.FormView__reportButtons>
+    );
+  }
+
+  renderCustomReportModal() {
+    return (
+      <bem.GraphSettings>
+        <ui.Modal.Body>
+          <CustomReportForm
+            reportData={this.state.reportData}
+            customReport={this.state.currentCustomReport}
+            asset={this.state.asset}
+          />
+        </ui.Modal.Body>
+      </bem.GraphSettings>
+    );
+  }
+
+  resetReportLimit() {
+    this.setState({
+      reportLimit: false,
+    });
+  }
+
+  triggerQuestionSettings(evt) {
+    let question = evt.target.getAttribute('data-question');
+    if (question) {
+      this.setState({currentQuestionGraph: question});
+    }
+  }
+
+  renderQuestionSettings() {
+    return (
+      <bem.GraphSettings>
+        <ui.Modal.Body/>
+      </bem.GraphSettings>
+    );
+  }
+  closeQuestionSettings() {
+    this.setState({currentQuestionGraph: false});
+  }
+
+  render() {
+    if (!this.state.asset) {
+      return (
+        <bem.Loading>
+          {this.state.error ?
+            <bem.Loading__inner>
+              {t('This report cannot be loaded.')}
+              <br/>
+              <code>
+                {this.state.error.statusText + ': ' + this.state.error.responseText}
+              </code>
+            </bem.Loading__inner>
+          :
+            <ui.LoadingSpinner/>
+          }
+        </bem.Loading>
+      );
+    }
+
+    let asset = this.state.asset;
+    let currentCustomReport = this.state.currentCustomReport;
+    let docTitle;
+
+    if (asset && asset.content) {
+      docTitle = asset.name || t('Untitled');
+    }
+
+    var reportData = this.state.reportData || [];
+
+    if (reportData.length) {
+      if (currentCustomReport && currentCustomReport.questions.length) {
+        const currentQuestions = currentCustomReport.questions;
+        const fullReportData = this.state.reportData;
+        reportData = fullReportData.filter((q) => {
+          return currentQuestions.includes(q.name);
+        });
+      }
+
+      if (this.state.reportLimit && reportData.length > this.state.reportLimit) {
+        reportData = reportData.slice(0, this.state.reportLimit);
+      }
+    }
+
+    if (this.state.reportData === undefined) {
+      return (
+        <bem.Loading>
+          {this.state.error ?
+            <bem.Loading__inner>
+              {t('This report cannot be loaded.')}
+              <br/>
+              <code>
+                {this.state.error.statusText + ': ' + this.state.error.responseText}
+              </code>
+            </bem.Loading__inner>
+          :
+            <ui.LoadingSpinner/>
+          }
+        </bem.Loading>
+      );
+    }
+
+    const formViewModifiers = [];
+    if (this.state.isFullscreen) {
+      formViewModifiers.push('fullscreen');
+    }
+
+    const hasAnyProvidedData = this.hasAnyProvidedData(reportData);
+    const hasGroupBy = this.state.groupBy.length !== 0;
+
+    return (
+      <DocumentTitle title={`${docTitle} | KoboToolbox`}>
+        <bem.FormView m={formViewModifiers}>
+          <bem.ReportView>
+            {this.renderReportButtons()}
+
+            {!hasAnyProvidedData &&
+              <bem.ReportView__wrap>
+                <bem.Loading>
+                  <bem.Loading__inner>
+                    {t('This report has no data.')}
+
+                    {hasGroupBy && ' ' + t('Try changing Report Style to "No grouping".')}
+                  </bem.Loading__inner>
+                </bem.Loading>
+              </bem.ReportView__wrap>
+            }
+
+            {hasAnyProvidedData &&
+              <bem.ReportView__wrap>
+                <bem.PrintOnly>
+                  <h3>{asset.name}</h3>
+                </bem.PrintOnly>
+                {
+                  !this.state.currentCustomReport &&
+                  this.state.reportLimit &&
+                  reportData.length &&
+                  this.state.reportData.length > this.state.reportLimit &&
+                  <bem.FormView__cell m={['centered', 'reportLimit']}>
+                    <div>
+                      {t('For performance reasons, this report only includes the first ## questions.').replace('##', this.state.reportLimit)}
+                    </div>
+                    <bem.Button m='colored' onClick={this.resetReportLimit}>
+                      {t('Show all (##)').replace('##', this.state.reportData.length)}
+                    </bem.Button>
+                  </bem.FormView__cell>
+                }
+
+                <bem.FormView__cell m='warning'>
+                  <i className='k-icon-alert' />
+                  <p>{t('This is an automated report based on raw data submitted to this project. Please conduct proper data cleaning prior to using the graphs and figures used on this page. ')}</p>
+                </bem.FormView__cell>
+
+                <ReportContents parentState={this.state} reportData={reportData} triggerQuestionSettings={this.triggerQuestionSettings} />
+              </bem.ReportView__wrap>
+            }
+
+            {this.state.showReportGraphSettings &&
+              <ui.Modal open onClose={this.toggleReportGraphSettings} title={t('Edit Report Style')}>
+                <ReportStyleSettings parentState={this.state} />
+              </ui.Modal>
+            }
+
+            {this.state.showCustomReportModal &&
+              <ui.Modal open onClose={this.toggleCustomReportModal} title={t('Custom Report')}>
+                {this.renderCustomReportModal()}
+              </ui.Modal>
+            }
+
+            {this.state.currentQuestionGraph &&
+              <ui.Modal open onClose={this.closeQuestionSettings} title={t('Question Style')}>
+                <QuestionGraphSettings question={this.state.currentQuestionGraph} parentState={this.state} />
+              </ui.Modal>
+            }
+          </bem.ReportView>
+        </bem.FormView>
+      </DocumentTitle>
+    );
+  }
+}
+
+reactMixin(Reports.prototype, mixins.permissions);
+reactMixin(Reports.prototype, Reflux.ListenerMixin);
diff --git a/jsapp/js/components/reports/reportsConstants.es6 b/jsapp/js/components/reports/reportsConstants.es6
new file mode 100644
index 0000000000..7b7631ee49
--- /dev/null
+++ b/jsapp/js/components/reports/reportsConstants.es6
@@ -0,0 +1,100 @@
+export const REPORT_STYLES = Object.freeze({
+  vertical: {
+    value: 'vertical',
+    label: t('Vertical'),
+    chartJsType: 'bar',
+  },
+  donut: {
+    value: 'donut',
+    label: t('Donut'),
+    chartJsType: 'pie',
+  },
+  area: {
+    value: 'area',
+    label: t('Area'),
+    chartJsType: 'line',
+  },
+  horizontal: {
+    value: 'horizontal',
+    label: t('Horizontal'),
+    chartJsType: 'horizontalBar',
+  },
+  pie: {
+    value: 'pie',
+    label: t('Pie'),
+    chartJsType: 'pie',
+  },
+  line: {
+    value: 'line',
+    label: t('Line'),
+    chartJsType: 'line',
+  },
+});
+
+export const REPORT_COLOR_SETS = [
+  {
+    label: 'set1',
+    colors: [
+      'rgba(52, 106, 200, 0.8)',
+      'rgba(252, 74, 124, 0.8)',
+      'rgba(250, 213, 99, 0.8)',
+      'rgba(113, 230, 33, 0.8)',
+      'rgba(78, 203, 255, 0.8)',
+      'rgba(253, 190, 76, 0.8)',
+      'rgba(77, 124, 244, 0.8)',
+      'rgba(33, 231, 184, 0.8)',
+    ],
+  },
+  {
+    label: 'set2',
+    colors: [
+      'rgba(40, 106, 163, 0.8)',
+      'rgba(69, 137, 197, 0.8)',
+      'rgba(0, 123, 234, 0.8)',
+      'rgba(0, 134, 255, 0.8)',
+      'rgba(50, 159, 255, 0.8)',
+      'rgba(100, 182, 255, 0.8)',
+      'rgba(141, 200, 255, 0.8)',
+      'rgba(192, 224, 255, 0.8)',
+    ],
+  },
+  {
+    label: 'set3',
+    colors: [
+      'rgba(39, 69, 255, 0.8)',
+      'rgba(34, 122, 233, 0.8)',
+      'rgba(46, 145, 243, 0.8)',
+      'rgba(92, 173, 255, 0.8)',
+      'rgba(148, 200, 255, 0.8)',
+      'rgba(31, 174, 228, 0.8)',
+      'rgba(25, 214, 209, 0.8)',
+      'rgba(28, 234, 225, 0.8)',
+    ],
+  },
+  {
+    label: 'set4',
+    colors: [
+      'rgba(253, 35, 4, 0.8)',
+      'rgba(253, 104, 97, 0.8)',
+      'rgba(232, 65, 14, 0.8)',
+      'rgba(253, 146, 72, 0.8)',
+      'rgba(233, 139, 3, 0.8)',
+      'rgba(253, 215, 114, 0.8)',
+      'rgba(254, 227, 159, 0.8)',
+      'rgba(253, 146, 72, 0.8)',
+    ],
+  },
+  {
+    label: 'set5',
+    colors: [
+      'rgba(63, 63, 63, 1)',
+      'rgba(90, 90, 90, 1)',
+      'rgba(107, 107, 107, 1)',
+      'rgba(128, 128, 128, 1)',
+      'rgba(151, 151, 151, 1)',
+      'rgba(169, 169, 169, 1)',
+      'rgba(196, 196, 196, 1)',
+      'rgba(178, 179, 190, 1)',
+    ],
+  },
+];
diff --git a/jsapp/js/constants.es6 b/jsapp/js/constants.es6
index 876165e282..6d294d68bb 100644
--- a/jsapp/js/constants.es6
+++ b/jsapp/js/constants.es6
@@ -278,15 +278,6 @@ export const DEPLOYMENT_CATEGORIES = Object.freeze({
   Archived: {id: 'Archived', label: t('Archived')},
 });
 
-export const REPORT_STYLES = Object.freeze({
-  vertical: {value: 'vertical', label: t('Vertical')},
-  donut: {value: 'donut', label: t('Donut')},
-  area: {value: 'area', label: t('Area')},
-  horizontal: {value: 'horizontal', label: t('Horizontal')},
-  pie: {value: 'pie', label: t('Pie')},
-  line: {value: 'line', label: t('Line')},
-});
-
 export const QUERY_LIMIT_DEFAULT = 5000;
 
 export const ROUTES = Object.freeze({
@@ -349,7 +340,6 @@ const constants = {
   SCORE_ROW_TYPE,
   RANK_LEVEL_TYPE,
   DEPLOYMENT_CATEGORIES,
-  REPORT_STYLES,
   ROUTES,
   QUERY_LIMIT_DEFAULT,
   CHOICE_LISTS,

From d1492ff83921319b2b693ddd15e07a94a137e23d Mon Sep 17 00:00:00 2001
From: Leszek Pietrzak <leszek@magicznyleszek.xyz>
Date: Thu, 6 May 2021 18:41:12 +0100
Subject: [PATCH 2/3] fix typo

---
 jsapp/js/components/reports/reportContents.es6 | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/jsapp/js/components/reports/reportContents.es6 b/jsapp/js/components/reports/reportContents.es6
index 4ed1dfdee0..070e9259ce 100644
--- a/jsapp/js/components/reports/reportContents.es6
+++ b/jsapp/js/components/reports/reportContents.es6
@@ -1,7 +1,7 @@
 import React from 'react';
 import _ from 'underscore';
 import {bem} from 'js/bem';
-import {QUESTION_TYPES} from 'js/constans';
+import {QUESTION_TYPES} from 'js/constants';
 import ReportViewItem from './reportViewItem';
 
 export default class ReportContents extends React.Component {

From cc5d3a1f666c9deea9db26bceba1b0cec21657f3 Mon Sep 17 00:00:00 2001
From: Leszek Pietrzak <leszek@magicznyleszek.xyz>
Date: Fri, 14 May 2021 01:06:08 +0100
Subject: [PATCH 3/3] apply linter and prettier formatting

---
 .../components/reports/chartColorsPicker.es6  |  34 +-
 .../js/components/reports/chartTypePicker.es6 |  10 +-
 .../components/reports/customReportForm.es6   |  20 +-
 .../reports/questionGraphSettings.es6         |  61 ++-
 .../js/components/reports/reportContents.es6  |  43 +-
 .../reports/reportStyleSettings.es6           |  88 ++--
 jsapp/js/components/reports/reportTable.es6   |  44 +-
 .../js/components/reports/reportViewItem.es6  | 171 ++++----
 jsapp/js/components/reports/reports.es6       | 392 ++++++++++--------
 9 files changed, 496 insertions(+), 367 deletions(-)

diff --git a/jsapp/js/components/reports/chartColorsPicker.es6 b/jsapp/js/components/reports/chartColorsPicker.es6
index 14cce33c5d..180c691914 100644
--- a/jsapp/js/components/reports/chartColorsPicker.es6
+++ b/jsapp/js/components/reports/chartColorsPicker.es6
@@ -14,10 +14,15 @@ export default class ChartColorsPicker extends React.Component {
   }
 
   defaultReportColorsChange(evt) {
-    this.props.onChange(
-      { default: true },
-      { report_colors: REPORT_COLOR_SETS[evt.currentTarget.value].colors || REPORT_COLOR_SETS[0].colors },
-    );
+    let newColors = REPORT_COLOR_SETS[0].colors;
+    if (
+      REPORT_COLOR_SETS[evt.currentTarget.value] &&
+      REPORT_COLOR_SETS[evt.currentTarget.value].colors
+    ) {
+      newColors = REPORT_COLOR_SETS[evt.currentTarget.value].colors;
+    }
+
+    this.props.onChange({default: true}, {report_colors: newColors});
   }
 
   defaultValue(set, index) {
@@ -25,11 +30,14 @@ export default class ChartColorsPicker extends React.Component {
       return true;
     }
 
-    return JSON.stringify(this.props.defaultStyle.report_colors) === JSON.stringify(set.colors);
+    return (
+      JSON.stringify(this.props.defaultStyle.report_colors) ===
+      JSON.stringify(set.colors)
+    );
   }
 
   render() {
-    var radioButtons = REPORT_COLOR_SETS.map(function(set, index){
+    var radioButtons = REPORT_COLOR_SETS.map(function (set, index) {
       return (
         <bem.GraphSettings__radio key={index}>
           <input
@@ -41,22 +49,16 @@ export default class ChartColorsPicker extends React.Component {
             id={'type-' + set.label}
           />
           <label htmlFor={'type-' + set.label}>
-          {
-            REPORT_COLOR_SETS[index].colors.map(function(color, i){
-              return (
-                <div style={{backgroundColor: color}} key={i} />
-              );
-            }, this)
-          }
+            {REPORT_COLOR_SETS[index].colors.map(function (color, i) {
+              return <div style={{backgroundColor: color}} key={i} />;
+            }, this)}
           </label>
         </bem.GraphSettings__radio>
       );
     }, this);
 
     return (
-      <bem.GraphSettings__colors>
-        {radioButtons}
-      </bem.GraphSettings__colors>
+      <bem.GraphSettings__colors>{radioButtons}</bem.GraphSettings__colors>
     );
   }
 }
diff --git a/jsapp/js/components/reports/chartTypePicker.es6 b/jsapp/js/components/reports/chartTypePicker.es6
index f79fbae9e3..f2caa6d581 100644
--- a/jsapp/js/components/reports/chartTypePicker.es6
+++ b/jsapp/js/components/reports/chartTypePicker.es6
@@ -15,8 +15,8 @@ export default class ChartTypePicker extends React.Component {
 
   defaultReportStyleChange(evt) {
     this.props.onChange(
-      { default: true },
-      { report_type: evt.currentTarget.value || 'bar' },
+      {default: true},
+      {report_type: evt.currentTarget.value || 'bar'}
     );
   }
 
@@ -30,7 +30,7 @@ export default class ChartTypePicker extends React.Component {
       REPORT_STYLES.line,
     ];
 
-    var radioButtons = reportStylesOrdered.map(function(style, i) {
+    var radioButtons = reportStylesOrdered.map(function (style, i) {
       return (
         <bem.GraphSettings__radio m={style.value} key={i}>
           <input
@@ -41,9 +41,7 @@ export default class ChartTypePicker extends React.Component {
             onChange={this.defaultReportStyleChange}
             id={'type-' + style.value}
           />
-          <label htmlFor={'type-' + style.value}>
-            {style.label}
-          </label>
+          <label htmlFor={'type-' + style.value}>{style.label}</label>
         </bem.GraphSettings__radio>
       );
     }, this);
diff --git a/jsapp/js/components/reports/customReportForm.es6 b/jsapp/js/components/reports/customReportForm.es6
index cc599c4870..33e0933404 100644
--- a/jsapp/js/components/reports/customReportForm.es6
+++ b/jsapp/js/components/reports/customReportForm.es6
@@ -49,14 +49,14 @@ export default class CustomReportForm extends React.Component {
 
   render() {
     const crid = this.state.customReport.crid;
-    var questionList = this.props.reportData.map(function(q, i){
+    var questionList = this.props.reportData.map(function (q, i) {
       return (
         <div className='graph-settings__question' key={i}>
-            <Checkbox
-              checked={this.state.customReport.questions.includes(q.name)}
-              onChange={this.customReportQuestionChange.bind(this, q.name)}
-              label={q.row.label ? q.row.label[0] : t('Unlabeled') }
-            />
+          <Checkbox
+            checked={this.state.customReport.questions.includes(q.name)}
+            onChange={this.customReportQuestionChange.bind(this, q.name)}
+            label={q.row.label ? q.row.label[0] : t('Unlabeled')}
+          />
         </div>
       );
     }, this);
@@ -75,16 +75,14 @@ export default class CustomReportForm extends React.Component {
 
         <strong>{t('Include the following questions:')}</strong>
 
-        <div className='custom-report--questions'>
-          {questionList}
-        </div>
+        <div className='custom-report--questions'>{questionList}</div>
 
         <bem.Modal__footer>
-          {this.props.asset.report_custom[crid] &&
+          {this.props.asset.report_custom[crid] && (
             <bem.KoboButton m='red' onClick={this.deleteCustomReport}>
               {t('Delete')}
             </bem.KoboButton>
-          }
+          )}
           <bem.KoboButton m='blue' onClick={this.saveCustomReport}>
             {t('Save')}
           </bem.KoboButton>
diff --git a/jsapp/js/components/reports/questionGraphSettings.es6 b/jsapp/js/components/reports/questionGraphSettings.es6
index 4008acd316..1bfb00de91 100644
--- a/jsapp/js/components/reports/questionGraphSettings.es6
+++ b/jsapp/js/components/reports/questionGraphSettings.es6
@@ -36,16 +36,20 @@ export default class QuestionGraphSettings extends React.Component {
       specificSettings = this.props.parentState.currentCustomReport.specified;
     }
 
-    if (specificSettings && specificSettings[_qn] && Object.keys(specificSettings[_qn]).length) {
+    if (
+      specificSettings &&
+      specificSettings[_qn] &&
+      Object.keys(specificSettings[_qn]).length
+    ) {
       const rStyle = Object.assign({}, specificSettings[_qn]);
       this.setState({rStyle: rStyle});
     }
   }
 
   saveQS(reset) {
-    let assetUid = this.props.parentState.asset.uid,
-        customReport = this.props.parentState.currentCustomReport,
-        _qn = this.props.question;
+    let assetUid = this.props.parentState.asset.uid;
+    let customReport = this.props.parentState.currentCustomReport;
+    let _qn = this.props.question;
 
     if (!customReport) {
       var sett_ = this.props.parentState.reportStyles;
@@ -57,7 +61,11 @@ export default class QuestionGraphSettings extends React.Component {
         report_custom[customReport.crid].specified = {};
       }
 
-      report_custom[customReport.crid].specified[_qn] = reset ? {} : this.state.rStyle;
+      if (reset) {
+        report_custom[customReport.crid].specified[_qn] = {};
+      } else {
+        report_custom[customReport.crid].specified[_qn] = this.state.rStyle;
+      }
       actions.reports.setCustom(assetUid, report_custom);
     }
   }
@@ -82,10 +90,18 @@ export default class QuestionGraphSettings extends React.Component {
     let reportStyle = this.state.rStyle;
 
     var tabs = [t('Chart Type'), t('Colors')];
-    var modalTabs = tabs.map(function(tab, i) {
+    var modalTabs = tabs.map(function (tab, i) {
+      let tabClassNames = [
+        'mdl-button',
+        'mdl-button--tab',
+      ];
+      if (this.state.activeModalTab === i) {
+        tabClassNames.push('active');
+      }
+
       return (
         <button
-          className={`mdl-button mdl-button--tab ${this.state.activeModalTab === i ? 'active' : ''}`}
+          className={tabClassNames.join(' ')}
           onClick={this.toggleTab}
           data-index={i}
           key={i}
@@ -97,36 +113,43 @@ export default class QuestionGraphSettings extends React.Component {
 
     return (
       <bem.GraphSettings>
-        <ui.Modal.Tabs>
-          {modalTabs}
-        </ui.Modal.Tabs>
+        <ui.Modal.Tabs>{modalTabs}</ui.Modal.Tabs>
         <ui.Modal.Body>
           <div className='tabs-content'>
-            {this.state.activeModalTab === 0 &&
+            {this.state.activeModalTab === 0 && (
               <div id='graph-type'>
                 <ChartTypePicker
                   defaultStyle={reportStyle}
                   onChange={this.questionStyleChange}
                 />
               </div>
-            }
-            {this.state.activeModalTab === 1 &&
+            )}
+            {this.state.activeModalTab === 1 && (
               <div id='graph-colors'>
                 <ChartColorsPicker
                   defaultStyle={reportStyle}
-                  onChange={this.questionStyleChange} />
+                  onChange={this.questionStyleChange}
+                />
               </div>
-            }
+            )}
           </div>
         </ui.Modal.Body>
 
         <ui.Modal.Footer>
-          {(reportStyle.report_type || reportStyle.report_colors || reportStyle.width) &&
-            <bem.Button className='reset' onClick={this.saveQS.bind(this, true)}>
+          {(reportStyle.report_type ||
+            reportStyle.report_colors ||
+            reportStyle.width) && (
+            <bem.Button
+              className='reset'
+              onClick={this.saveQS.bind(this, true)}
+            >
               {t('Reset')}
             </bem.Button>
-          }
-          <bem.Button className='primary' onClick={this.saveQS.bind(this, false)}>
+          )}
+          <bem.Button
+            className='primary'
+            onClick={this.saveQS.bind(this, false)}
+          >
             {t('Save')}
           </bem.Button>
         </ui.Modal.Footer>
diff --git a/jsapp/js/components/reports/reportContents.es6 b/jsapp/js/components/reports/reportContents.es6
index 070e9259ce..98c9408657 100644
--- a/jsapp/js/components/reports/reportContents.es6
+++ b/jsapp/js/components/reports/reportContents.es6
@@ -9,11 +9,13 @@ export default class ReportContents extends React.Component {
     super(props);
   }
 
-  shouldComponentUpdate(nextProps, nextState) {
+  shouldComponentUpdate(nextProps) {
     // to improve UI performance, don't refresh report while a modal window is visible
-    if (nextProps.parentState.showReportGraphSettings
-        || nextProps.parentState.showCustomReportModal
-        || nextProps.parentState.currentQuestionGraph) {
+    if (
+      nextProps.parentState.showReportGraphSettings ||
+      nextProps.parentState.showCustomReportModal ||
+      nextProps.parentState.currentQuestionGraph
+    ) {
       return false;
     } else {
       return true;
@@ -45,7 +47,7 @@ export default class ReportContents extends React.Component {
     for (var i = reportData.length - 1; i > -1; i--) {
       let _qn = reportData[i].name;
       let _type = reportData[i].row.type || null;
-      var _defSpec = undefined;
+      let _defSpec;
 
       if (customReport) {
         if (customReport.specified && customReport.specified[_qn]) {
@@ -64,10 +66,15 @@ export default class ReportContents extends React.Component {
       }
 
       if (
-        (_type === QUESTION_TYPES.select_one.id || _type === QUESTION_TYPES.select_multiple.id) &&
-        asset.content.choices
+        asset.content.choices &&
+        (
+          _type === QUESTION_TYPES.select_one.id ||
+          _type === QUESTION_TYPES.select_multiple.id
+        )
       ) {
-        let question = asset.content.survey.find((z) => {return z.name === _qn || z.$autoname === _qn;});
+        let question = asset.content.survey.find((z) => {
+          return z.name === _qn || z.$autoname === _qn;
+        });
         let resps = reportData[i].data.responses;
         let choice;
         if (resps) {
@@ -77,7 +84,7 @@ export default class ReportContents extends React.Component {
               return (
                 question &&
                 o.list_name === question.select_from_list_name &&
-                (o.name === resps[j] || o.$autoname == resps[j])
+                (o.name === resps[j] || o.$autoname === resps[j])
               );
             });
             if (choice && choice.label && choice.label[tnslIndex]) {
@@ -91,7 +98,9 @@ export default class ReportContents extends React.Component {
           if (vals && vals[0] && vals[0][1] && vals[0][1].responses) {
             var respValues = vals[0][1].responses;
             reportData[i].data.responseLabels = [];
-            let qGB = asset.content.survey.find((z) => {return z.name === groupBy || z.$autoname === groupBy});
+            let qGB = asset.content.survey.find((z) => {
+              return z.name === groupBy || z.$autoname === groupBy;
+            });
             respValues.forEach(function(r, ind){
               choice = asset.content.choices.find((o) => {
                 return (
@@ -100,7 +109,11 @@ export default class ReportContents extends React.Component {
                   (o.name === r || o.$autoname === r)
                 );
               });
-              reportData[i].data.responseLabels[ind] = (choice && choice.label && choice.label[tnslIndex]) ? choice.label[tnslIndex] : r;
+              if (choice?.label && choice.label[tnslIndex]) {
+                reportData[i].data.responseLabels[ind] = choice.label[tnslIndex];
+              } else {
+                reportData[i].data.responseLabels[ind] = r;
+              }
             });
 
             // TODO: use a better way to store translated labels per row
@@ -112,7 +125,11 @@ export default class ReportContents extends React.Component {
                   (o.name === vals[vD][0] || o.$autoname === vals[vD][0])
                 );
               });
-              vals[vD][2] = (choice && choice.label && choice.label[tnslIndex]) ? choice.label[tnslIndex] : vals[vD][0];
+              if (choice && choice.label && choice.label[tnslIndex]) {
+                vals[vD][2] = choice.label[tnslIndex];
+              } else {
+                vals[vD][2] = vals[vD][0];
+              }
             }
           }
         }
@@ -122,7 +139,7 @@ export default class ReportContents extends React.Component {
     return (
       <div>
         {
-          reportData.map((rowContent, i) =>{
+          reportData.map((rowContent, i) => {
             let label = t('Unlabeled');
             if (_.isArray(rowContent.row.label)) {
               label = rowContent.row.label[tnslIndex];
diff --git a/jsapp/js/components/reports/reportStyleSettings.es6 b/jsapp/js/components/reports/reportStyleSettings.es6
index 605a01ef60..73023363f4 100644
--- a/jsapp/js/components/reports/reportStyleSettings.es6
+++ b/jsapp/js/components/reports/reportStyleSettings.es6
@@ -4,7 +4,7 @@ import Radio from 'js/components/common/radio';
 import {actions} from 'js/actions';
 import {bem} from 'js/bem';
 import ui from 'js/ui';
-import { assign } from 'utils';
+import {assign} from 'utils';
 import ChartTypePicker from './chartTypePicker';
 import ChartColorsPicker from './chartColorsPicker';
 
@@ -17,8 +17,12 @@ export default class ReportStyleSettings extends React.Component {
       reportStyle: props.parentState.reportStyles.default,
     };
 
-    if (props.parentState.currentCustomReport && props.parentState.currentCustomReport.reportStyle) {
-      this.state.reportStyle = props.parentState.currentCustomReport.reportStyle;
+    if (
+      props.parentState.currentCustomReport &&
+      props.parentState.currentCustomReport.reportStyle
+    ) {
+      this.state.reportStyle =
+        props.parentState.currentCustomReport.reportStyle;
     }
   }
 
@@ -36,7 +40,7 @@ export default class ReportStyleSettings extends React.Component {
   }
 
   reportSizeChange(params) {
-    if (params.id == 'width') {
+    if (params.id === 'width') {
       let styles = this.state.reportStyle;
       styles.graphWidth = params.value;
       this.setState({reportStyle: styles});
@@ -60,7 +64,9 @@ export default class ReportStyleSettings extends React.Component {
     let assetUid = this.props.parentState.asset.uid;
     if (currentCustomReport) {
       let report_custom = this.props.parentState.asset.report_custom;
-      report_custom[currentCustomReport.crid].reportStyle = this.state.reportStyle;
+      report_custom[
+        currentCustomReport.crid
+      ].reportStyle = this.state.reportStyle;
       actions.reports.setCustom(assetUid, report_custom);
     } else {
       let sett_ = this.props.parentState.reportStyles;
@@ -84,11 +90,14 @@ export default class ReportStyleSettings extends React.Component {
       if (
         rows.hasOwnProperty(key) &&
         rows[key].hasOwnProperty('type') &&
-        rows[key].type == 'select_one'
+        rows[key].type === 'select_one'
       ) {
         const row = rows[key];
         const val = row.name || row.$autoname;
-        const label = translations ? row.label[reportStyle.translationIndex] : row.label;
+        let label = row.label;
+        if (translations) {
+          label = row.label[reportStyle.translationIndex];
+        }
         groupByOptions.push({
           value: val,
           label: label,
@@ -113,10 +122,17 @@ export default class ReportStyleSettings extends React.Component {
       });
     }
 
-    var modalTabs = tabs.map(function(tab, i) {
+    var modalTabs = tabs.map(function (tab, i) {
+      let tabClassNames = [
+        'mdl-button',
+        'mdl-button--tab',
+      ];
+      if (this.state.activeModalTab === i) {
+        tabClassNames.push('active');
+      }
       return (
         <button
-          className={`mdl-button mdl-button--tab ${this.state.activeModalTab === i ? 'active' : ''}`}
+          className={tabClassNames}
           onClick={this.toggleTab}
           data-index={i}
           key={i}
@@ -128,47 +144,47 @@ export default class ReportStyleSettings extends React.Component {
 
     return (
       <bem.GraphSettings>
-        <ui.Modal.Tabs>
-          {modalTabs}
-        </ui.Modal.Tabs>
+        <ui.Modal.Tabs>{modalTabs}</ui.Modal.Tabs>
         <ui.Modal.Body>
           <div className='tabs-content'>
-            {tabs[this.state.activeModalTab] === t('Chart Type') &&
+            {tabs[this.state.activeModalTab] === t('Chart Type') && (
               <div id='graph-type'>
                 <ChartTypePicker
                   defaultStyle={reportStyle}
                   onChange={this.reportStyleChange}
                 />
               </div>
-            }
-            {tabs[this.state.activeModalTab] === t('Colors') &&
+            )}
+            {tabs[this.state.activeModalTab] === t('Colors') && (
               <div id='graph-colors'>
                 <ChartColorsPicker
                   defaultStyle={reportStyle}
                   onChange={this.reportStyleChange}
                 />
               </div>
-            }
-            {tabs[this.state.activeModalTab] === t('Group By') && groupByOptions.length > 1 &&
-              <div className='graph-tab__groupby' id='graph-labels'>
-                <Radio
-                  name='reports-groupby'
-                  options={groupByOptions}
-                  onChange={this.onGroupByChange}
-                  selected={reportStyle.groupDataBy}
-                />
-              </div>
-            }
-            {tabs[this.state.activeModalTab] === t('Translation') && selectedTranslationOptions.length > 1 &&
-              <div className='graph-tab__translation' id='graph-labels'>
-                <Radio
-                  name='reports-selected-translation'
-                  options={selectedTranslationOptions}
-                  onChange={this.translationIndexChange}
-                  selected={reportStyle.translationIndex}
-                />
-              </div>
-            }
+            )}
+            {tabs[this.state.activeModalTab] === t('Group By') &&
+              groupByOptions.length > 1 && (
+                <div className='graph-tab__groupby' id='graph-labels'>
+                  <Radio
+                    name='reports-groupby'
+                    options={groupByOptions}
+                    onChange={this.onGroupByChange}
+                    selected={reportStyle.groupDataBy}
+                  />
+                </div>
+              )}
+            {tabs[this.state.activeModalTab] === t('Translation') &&
+              selectedTranslationOptions.length > 1 && (
+                <div className='graph-tab__translation' id='graph-labels'>
+                  <Radio
+                    name='reports-selected-translation'
+                    options={selectedTranslationOptions}
+                    onChange={this.translationIndexChange}
+                    selected={reportStyle.translationIndex}
+                  />
+                </div>
+              )}
           </div>
           <ui.Modal.Footer>
             <bem.KoboButton m='blue' onClick={this.saveReportStyles}>
diff --git a/jsapp/js/components/reports/reportTable.es6 b/jsapp/js/components/reports/reportTable.es6
index 6762c8dce0..2489863401 100644
--- a/jsapp/js/components/reports/reportTable.es6
+++ b/jsapp/js/components/reports/reportTable.es6
@@ -13,7 +13,9 @@ export default class ReportTable extends React.Component {
   }
 
   render() {
-    let th = [''], rows = [];
+    let th = [''];
+    let rows = [];
+
     if (this.props.type === 'numerical') {
       th = [t('Mean'), t('Median'), t('Mode'), t('Standard deviation')];
       if (this.props.rows) {
@@ -26,12 +28,12 @@ export default class ReportTable extends React.Component {
         <table>
           <thead>
             <tr>
-              {th.map((t, i) =>{
-                return (<th key={i}>{t}</th>);
+              {th.map((t, i) => {
+                return <th key={i}>{t}</th>;
               })}
             </tr>
           </thead>
-          {this.props.values &&
+          {this.props.values && (
             <tbody>
               <tr>
                 <td>{this.formatNumber(v.mean) || t('N/A')}</td>
@@ -40,29 +42,29 @@ export default class ReportTable extends React.Component {
                 <td>{this.formatNumber(v.stdev) || t('N/A')}</td>
               </tr>
             </tbody>
-          }
-          {this.props.rows &&
+          )}
+          {this.props.rows && (
             <tbody>
               {this.props.rows.map((r) => {
                 return (
-                    <tr key={r[0]}>
-                      <td>{r[0]}</td>
-                      <td>{this.formatNumber(r[1].mean) || t('N/A')}</td>
-                      <td>{this.formatNumber(r[1].median) || t('N/A')}</td>
-                      <td>{this.formatNumber(r[1].mode) || t('N/A')}</td>
-                      <td>{this.formatNumber(r[1].stdev) || t('N/A')}</td>
-                    </tr>
-                  );
+                  <tr key={r[0]}>
+                    <td>{r[0]}</td>
+                    <td>{this.formatNumber(r[1].mean) || t('N/A')}</td>
+                    <td>{this.formatNumber(r[1].median) || t('N/A')}</td>
+                    <td>{this.formatNumber(r[1].mode) || t('N/A')}</td>
+                    <td>{this.formatNumber(r[1].stdev) || t('N/A')}</td>
+                  </tr>
+                );
               })}
             </tbody>
-          }
+          )}
         </table>
       );
     }
     if (this.props.type === 'regular') {
       th = [t('Value'), t('Frequency'), t('Percentage')];
       rows = this.props.rows;
-    // prepare table data for disaggregated rows
+      // prepare table data for disaggregated rows
     } else if (this.props.rows.length > 0) {
       let rowsB = this.props.rows;
       if (this.props.responseLabels) {
@@ -86,17 +88,17 @@ export default class ReportTable extends React.Component {
       <table>
         <thead>
           <tr>
-            {th.map((t, i) =>{
-              return (<th key={i}>{t}</th>);
+            {th.map((t, i) => {
+              return <th key={i}>{t}</th>;
             })}
           </tr>
         </thead>
         <tbody>
-          {rows.map((row)=>{
+          {rows.map((row) => {
             return (
               <tr key={row[0]}>
-                {row.map((r, i) =>{
-                  return (<td key={i}>{r}</td>);
+                {row.map((r, i) => {
+                  return <td key={i}>{r}</td>;
                 })}
               </tr>
             );
diff --git a/jsapp/js/components/reports/reportViewItem.es6 b/jsapp/js/components/reports/reportViewItem.es6
index 1718b2116c..20097a7f0c 100644
--- a/jsapp/js/components/reports/reportViewItem.es6
+++ b/jsapp/js/components/reports/reportViewItem.es6
@@ -4,18 +4,13 @@ import ReactDOM from 'react-dom';
 import _ from 'underscore';
 import Chart from 'chart.js';
 import {bem} from 'js/bem';
-import {
-  REPORT_STYLES,
-  REPORT_COLOR_SETS,
-} from './reportsConstants';
+import {REPORT_STYLES, REPORT_COLOR_SETS} from './reportsConstants';
 import ReportTable from './reportTable';
 
 export default class ReportViewItem extends React.Component {
   constructor(props) {
     super(props);
-    this.state = {
-      reportTable: false,
-    };
+    this.state = {reportTable: false};
     this.itemChart = false;
     autoBind(this);
   }
@@ -55,10 +50,10 @@ export default class ReportViewItem extends React.Component {
     var reportTable = [];
     if (d.percentages && d.responses && d.frequencies) {
       reportTable = _.zip(
-          d.responseLabels || d.responses,
-          d.frequencies,
-          d.percentages,
-        );
+        d.responseLabels || d.responses,
+        d.frequencies,
+        d.percentages
+      );
     }
 
     if (d.mean) {
@@ -69,7 +64,10 @@ export default class ReportViewItem extends React.Component {
   }
 
   truncateLabel(label, length = 25) {
-    return label.length > length ? label.substring(0,length - 3) + '...' : label;
+    if (label.length > length) {
+      return label.substring(0, length - 3) + '…';
+    }
+    return label;
   }
 
   buildChartOptions() {
@@ -87,7 +85,8 @@ export default class ReportViewItem extends React.Component {
     var baseColor = colors[0];
     Chart.defaults.global.elements.rectangle.backgroundColor = baseColor;
     Chart.defaults.global.elements.line.borderColor = baseColor;
-    Chart.defaults.global.elements.line.backgroundColor = 'rgba(255, 255, 255, 0.1)';
+    Chart.defaults.global.elements.line.backgroundColor =
+      'rgba(255, 255, 255, 0.1)';
     Chart.defaults.global.elements.point.backgroundColor = baseColor;
     Chart.defaults.global.elements.point.radius = 4;
     Chart.defaults.global.elements.arc.backgroundColor = baseColor;
@@ -110,21 +109,23 @@ export default class ReportViewItem extends React.Component {
       chartType = REPORT_STYLES.horizontal.chartJsType;
     }
 
-    if (chartType === REPORT_STYLES.vertical.value || chartType === 'bar_chart') {
+    if (
+      chartType === REPORT_STYLES.vertical.value ||
+      chartType === 'bar_chart'
+    ) {
       chartType = REPORT_STYLES.vertical.chartJsType;
     }
 
     var datasets = [];
 
     if (data.values != undefined) {
-
       if (data.responseLabels) {
-        data.responseLabels.forEach(function(r, i){
+        data.responseLabels.forEach(function (r, i) {
           data.responseLabels[i] = _this.truncateLabel(r);
         });
       }
       var allPercentages = [];
-      data.values.forEach(function(val, i){
+      data.values.forEach(function (val, i) {
         var item = {};
         var choiceLabel = val[2] || val[0];
         item.label = _this.truncateLabel(choiceLabel, 20);
@@ -151,23 +152,24 @@ export default class ReportViewItem extends React.Component {
       maxPercentage = Math.max.apply(Math, data.percentages);
       datasets.push({data: data.percentages});
       if (data.responseLabels) {
-        data.responseLabels.forEach(function(r, i){
+        data.responseLabels.forEach(function (r, i) {
           data.responseLabels[i] = _this.truncateLabel(r);
         });
       }
       if (data.responses) {
-        data.responses.forEach(function(r, i){
+        data.responses.forEach(function (r, i) {
           data.responses[i] = _this.truncateLabel(r);
         });
       }
     }
 
-    maxPercentage = maxPercentage < 85 ? ((parseInt(maxPercentage/10, 10)+1)*10) : 100;
+    maxPercentage =
+      maxPercentage < 85 ? (parseInt(maxPercentage / 10, 10) + 1) * 10 : 100;
     var opts = {
       type: chartType,
       data: {
-          labels: data.responseLabels || data.responses,
-          datasets: datasets,
+        labels: data.responseLabels || data.responses,
+        datasets: datasets,
       },
       options: {
         // events: [''],
@@ -178,28 +180,32 @@ export default class ReportViewItem extends React.Component {
           duration: 500,
         },
         scales: {
-          xAxes: [{
-            ticks: {
-              autoSkip: false,
-              beginAtZero: true,
-              max: maxPercentage,
+          xAxes: [
+            {
+              ticks: {
+                autoSkip: false,
+                beginAtZero: true,
+                max: maxPercentage,
+              },
+              barPercentage: barPercentage,
+              // gridLines: {
+              //   display: chartType == 'horizontalBar' ? true : false
+              // }
             },
-            barPercentage: barPercentage,
-            // gridLines: {
-            //   display: chartType == 'horizontalBar' ? true : false
-            // }
-          }],
-          yAxes: [{
-            ticks: {
-              autoSkip: false,
-              beginAtZero: true,
-              max: maxPercentage,
+          ],
+          yAxes: [
+            {
+              ticks: {
+                autoSkip: false,
+                beginAtZero: true,
+                max: maxPercentage,
+              },
+              barPercentage: barPercentage,
+              // gridLines: {
+              //   display: chartType == 'horizontalBar' ? false : true
+              // }
             },
-            barPercentage: barPercentage,
-            // gridLines: {
-            //   display: chartType == 'horizontalBar' ? false : true
-            // }
-          }],
+          ],
         },
       },
     };
@@ -225,13 +231,13 @@ export default class ReportViewItem extends React.Component {
   buildChartColors() {
     var colors = this.props.style.report_colors || REPORT_COLOR_SETS[0].colors;
 
-    var c1 = colors.slice(0).map((c,i)=>{
+    var c1 = colors.slice(0).map((c) => {
       c = c.replace('1)', '0.75)');
       return c.replace('0.8', '0.5');
     });
     colors = colors.concat(c1);
 
-    var c2 = colors.slice(0).map((c,i)=>{
+    var c2 = colors.slice(0).map((c) => {
       c = c.replace('1)', '0.5)');
       return c.replace('0.8', '0.25');
     });
@@ -241,15 +247,20 @@ export default class ReportViewItem extends React.Component {
   }
 
   render() {
-    let p = this.props,
-      d = p.data,
-      r = p.row,
-      _type = r.type,
-      name = p.name;
+    let p = this.props;
+    let d = p.data;
+    let r = p.row;
+    let _type = r.type;
+    let name = p.name;
 
     if (!_type) {
       console.error('No type given for row: ', p);
-      return <p className='error'>{'Error displaying row: '}<code>{p.kuid}</code></p>;
+      return (
+        <p className='error'>
+          {'Error displaying row: '}
+          <code>{p.kuid}</code>
+        </p>
+      );
     }
     if (_type.select_one || _type.select_multiple) {
       _type = _.keys(_type)[0];
@@ -258,29 +269,19 @@ export default class ReportViewItem extends React.Component {
     return (
       <div>
         <bem.ReportView__itemHeading>
-          <h2>
-            {p.label}
-          </h2>
+          <h2>{p.label}</h2>
           <bem.ReportView__headingMeta>
-            <span className='type'>
-              {
-                t('Type: ') + _type + t('. ')
-              }
-            </span>
+            <span className='type'>{t('Type: ') + _type + t('. ')}</span>
             <span className='respondents'>
-              {
-                t('#1 out of #2 respondents answered this question. ')
-                  .replace('#1', d.provided)
-                  .replace('#2', d.total_count)
-              }
+              {t('#1 out of #2 respondents answered this question. ')
+                .replace('#1', d.provided)
+                .replace('#2', d.total_count)}
             </span>
             <span>
-              {
-                t('(# were without data.)').replace('#', d.not_provided)
-              }
+              {t('(# were without data.)').replace('#', d.not_provided)}
             </span>
           </bem.ReportView__headingMeta>
-          {d.show_graph &&
+          {d.show_graph && (
             <bem.Button
               m='icon'
               className='report-button__question-settings'
@@ -290,27 +291,33 @@ export default class ReportViewItem extends React.Component {
             >
               <i className='k-icon-more' data-question={name} />
             </bem.Button>
-          }
+          )}
         </bem.ReportView__itemHeading>
         <bem.ReportView__itemContent>
-          {d.show_graph &&
+          {d.show_graph && (
             <bem.ReportView__chart
-                style={{width: this.props.style.graphWidth + 'px'}}>
+              style={{width: this.props.style.graphWidth + 'px'}}
+            >
               <canvas ref='canvas' />
             </bem.ReportView__chart>
-          }
-          {this.state.reportTable && ! d.values &&
-            <ReportTable rows={this.state.reportTable} type='regular'/>
-          }
-          {d.values && d.values[0] && d.values[0][1] && d.values[0][1].percentages &&
-            <ReportTable rows={d.values} responseLabels={d.responseLabels} type='disaggregated' />
-          }
-          {d.values && d.values[0] && d.values[0][1] && d.values[0][1].mean &&
+          )}
+          {this.state.reportTable && !d.values && (
+            <ReportTable rows={this.state.reportTable} type='regular' />
+          )}
+          {d.values &&
+            d.values[0] &&
+            d.values[0][1] &&
+            d.values[0][1].percentages && (
+              <ReportTable
+                rows={d.values}
+                responseLabels={d.responseLabels}
+                type='disaggregated'
+              />
+            )}
+          {d.values && d.values[0] && d.values[0][1] && d.values[0][1].mean && (
             <ReportTable rows={d.values} type='numerical' />
-          }
-          {d.mean &&
-            <ReportTable values={d} type='numerical'/>
-          }
+          )}
+          {d.mean && <ReportTable values={d} type='numerical' />}
         </bem.ReportView__itemContent>
       </div>
     );
diff --git a/jsapp/js/components/reports/reports.es6 b/jsapp/js/components/reports/reports.es6
index bb4d276c2e..bf2485c391 100644
--- a/jsapp/js/components/reports/reports.es6
+++ b/jsapp/js/components/reports/reports.es6
@@ -9,7 +9,7 @@ import {stores} from 'js/stores';
 import ui from 'js/ui';
 import mixins from 'js/mixins';
 import DocumentTitle from 'react-document-title';
-import { txtid } from '../../../xlform/src/model.utils';
+import {txtid} from '../../../xlform/src/model.utils';
 import alertify from 'alertifyjs';
 import {launchPrinting} from 'utils';
 import {REPORT_STYLES} from './reportsConstants';
@@ -60,9 +60,9 @@ export default class Reports extends React.Component {
     stores.allAssets.whenLoaded(uid, (asset) => {
       let rowsByKuid = {};
       let rowsByIdentifier = {};
-      let groupBy = '',
-          reportStyles = asset.report_styles,
-          reportCustom = asset.report_custom;
+      let groupBy = '';
+      let reportStyles = asset.report_styles;
+      let reportCustom = asset.report_custom;
 
       if (
         this.state.currentCustomReport &&
@@ -86,7 +86,7 @@ export default class Reports extends React.Component {
       }
 
       if (asset.content.survey != undefined) {
-        asset.content.survey.forEach(function(r){
+        asset.content.survey.forEach(function (r) {
           if (r.$kuid) {
             rowsByKuid[r.$kuid] = r;
           }
@@ -95,49 +95,59 @@ export default class Reports extends React.Component {
           rowsByIdentifier[$identifier] = r;
         });
 
-        dataInterface.getReportData({uid: uid, identifiers: [], group_by: groupBy}).done((data) => {
-          var dataWithResponses = [];
-
-          data.list.forEach(function(row){
-            if (row.data.responses || row.data.values || row.data.mean) {
-              if (rowsByIdentifier[row.name] !== undefined) {
-                row.row.label = rowsByIdentifier[row.name].label;
-              } else if (row.name !== undefined) {
-                row.row.label = row.name;
-              } else {
-                row.row.label = t('untitled');
+        dataInterface
+          .getReportData({uid: uid, identifiers: [], group_by: groupBy})
+          .done((data) => {
+            var dataWithResponses = [];
+
+            data.list.forEach(function (row) {
+              if (row.data.responses || row.data.values || row.data.mean) {
+                if (rowsByIdentifier[row.name] !== undefined) {
+                  row.row.label = rowsByIdentifier[row.name].label;
+                } else if (row.name !== undefined) {
+                  row.row.label = row.name;
+                } else {
+                  row.row.label = t('untitled');
+                }
+                dataWithResponses.push(row);
               }
-              dataWithResponses.push(row);
-            }
-          });
-
-          this.setState({
-            asset: asset,
-            rowsByKuid: rowsByKuid,
-            rowsByIdentifier: rowsByIdentifier,
-            reportStyles: reportStyles,
-            reportData: dataWithResponses,
-            reportCustom: reportCustom,
-            translations: asset.content.translations.length > 1 ? true : false,
-            groupBy: groupBy,
-            error: false,
-          });
-        }).fail((err) => {
-          if (groupBy && groupBy.length > 0 && !this.state.currentCustomReport && reportStyles.default.groupDataBy !== undefined) {
-            // reset default report groupBy if it fails and notify user
-            reportStyles.default.groupDataBy = '';
-            this.setState({
-              reportStyles: reportStyles,
             });
-            alertify.error(t('Could not load grouped results via "##". Will attempt to load the ungrouped report.').replace('##', groupBy));
-            this.loadReportData();
-          } else {
+
             this.setState({
-              error: err,
               asset: asset,
+              rowsByKuid: rowsByKuid,
+              rowsByIdentifier: rowsByIdentifier,
+              reportStyles: reportStyles,
+              reportData: dataWithResponses,
+              reportCustom: reportCustom,
+              translations: asset.content.translations.length > 1,
+              groupBy: groupBy,
+              error: false,
             });
-          }
-        });
+          })
+          .fail((err) => {
+            if (
+              groupBy &&
+              groupBy.length > 0 &&
+              !this.state.currentCustomReport &&
+              reportStyles.default.groupDataBy !== undefined
+            ) {
+              // reset default report groupBy if it fails and notify user
+              reportStyles.default.groupDataBy = '';
+              this.setState({reportStyles: reportStyles});
+              alertify.error(
+                t(
+                  'Could not load grouped results via "##". Will attempt to load the ungrouped report.'
+                ).replace('##', groupBy)
+              );
+              this.loadReportData();
+            } else {
+              this.setState({
+                error: err,
+                asset: asset,
+              });
+            }
+          });
       } else {
         // Redundant?
         console.error('Survey not defined.');
@@ -146,46 +156,54 @@ export default class Reports extends React.Component {
   }
 
   refreshReportData() {
-    let uid = this.props.params.assetid || this.props.params.uid,
-        rowsByIdentifier = this.state.rowsByIdentifier,
-        customReport = this.state.currentCustomReport;
+    let uid = this.props.params.assetid || this.props.params.uid;
+    let rowsByIdentifier = this.state.rowsByIdentifier;
+    let customReport = this.state.currentCustomReport;
 
     var groupBy = '';
 
-    if (!customReport && this.state.reportStyles.default.groupDataBy !== undefined) {
+    if (
+      !customReport &&
+      this.state.reportStyles.default.groupDataBy !== undefined
+    ) {
       groupBy = this.state.reportStyles.default.groupDataBy;
     }
 
-    if (customReport && customReport.reportStyle && customReport.reportStyle.groupDataBy) {
+    if (
+      customReport &&
+      customReport.reportStyle &&
+      customReport.reportStyle.groupDataBy
+    ) {
       groupBy = this.state.currentCustomReport.reportStyle.groupDataBy;
     }
 
-    dataInterface.getReportData({uid: uid, identifiers: [], group_by: groupBy}).done((data) =>{
-      var dataWithResponses = [];
-
-      data.list.forEach(function(row){
-        if (row.data.responses || row.data.values || row.data.mean) {
-          if (rowsByIdentifier[row.name] !== undefined) {
-            row.row.label = rowsByIdentifier[row.name].label;
-          } else if (row.name !== undefined) {
-            row.row.label = row.name;
-          } else {
-            row.row.label = t('untitled');
+    dataInterface
+      .getReportData({uid: uid, identifiers: [], group_by: groupBy})
+      .done((data) => {
+        var dataWithResponses = [];
+
+        data.list.forEach(function (row) {
+          if (row.data.responses || row.data.values || row.data.mean) {
+            if (rowsByIdentifier[row.name] !== undefined) {
+              row.row.label = rowsByIdentifier[row.name].label;
+            } else if (row.name !== undefined) {
+              row.row.label = row.name;
+            } else {
+              row.row.label = t('untitled');
+            }
+            dataWithResponses.push(row);
           }
-          dataWithResponses.push(row);
-        }
-      });
+        });
 
-      this.setState({
-        reportData: dataWithResponses,
-        error: false,
-      });
-    }).fail((err)=> {
-      alertify.error(t('Could not refresh report.'));
-      this.setState({
-        error: err,
+        this.setState({
+          reportData: dataWithResponses,
+          error: false,
+        });
+      })
+      .fail((err) => {
+        alertify.error(t('Could not refresh report.'));
+        this.setState({error: err});
       });
-    });
   }
 
   reportStyleListener(assetUid, reportStyles) {
@@ -199,22 +217,35 @@ export default class Reports extends React.Component {
 
   reportCustomListener(assetUid, reportCustom) {
     var crid = this.state.currentCustomReport.crid;
+    let newGroupBy = false;
+
     if (reportCustom[crid]) {
+      if (
+        reportCustom[crid].reportStyle &&
+        reportCustom[crid].reportStyle.groupDataBy
+      ) {
+        newGroupBy = reportCustom[crid].reportStyle.groupDataBy;
+      }
+
       this.setState({
         reportCustom: reportCustom,
         showCustomReportModal: false,
         showReportGraphSettings: false,
         currentQuestionGraph: false,
-        groupBy: (reportCustom[crid].reportStyle && reportCustom[crid].reportStyle.groupDataBy) ? reportCustom[crid].reportStyle.groupDataBy : false,
+        groupBy: newGroupBy,
       });
     } else {
+      if (REPORT_STYLES.default && REPORT_STYLES.default.groupDataBy) {
+        newGroupBy = REPORT_STYLES.default.groupDataBy;
+      }
+
       this.setState({
         reportCustom: reportCustom,
         showCustomReportModal: false,
         showReportGraphSettings: false,
         currentQuestionGraph: false,
         currentCustomReport: false,
-        groupBy: (REPORT_STYLES.default && REPORT_STYLES.default.groupDataBy) ? REPORT_STYLES.default.groupDataBy : false,
+        groupBy: newGroupBy,
       });
     }
   }
@@ -238,7 +269,7 @@ export default class Reports extends React.Component {
   setCustomReport(e) {
     var crid = e ? e.target.getAttribute('data-crid') : false;
 
-    if(!this.state.showCustomReportModal) {
+    if (!this.state.showCustomReportModal) {
       let currentCustomReport;
       if (crid) {
         // existing report
@@ -256,13 +287,13 @@ export default class Reports extends React.Component {
   }
 
   editCustomReport() {
-    if(this.state.currentCustomReport) {
+    if (this.state.currentCustomReport) {
       this.setState({showCustomReportModal: true});
     }
   }
 
   toggleCustomReportModal() {
-    if(!this.state.showCustomReportModal) {
+    if (!this.state.showCustomReportModal) {
       this.setCustomReport();
     } else if (this.state.currentCustomReport) {
       var crid = this.state.currentCustomReport.crid;
@@ -291,15 +322,19 @@ export default class Reports extends React.Component {
       }
     }
 
-    customReportsList.sort((a, b) => {return a.name.localeCompare(b.name);});
+    customReportsList.sort((a, b) => {
+      return a.name.localeCompare(b.name);
+    });
     var _this = this;
 
+    let menuLabel = t('Custom Reports');
+    if (this.state.currentCustomReport) {
+      menuLabel = this.state.currentCustomReport.name || t('Untitled Report');
+    }
+
     return (
       <bem.FormView__reportButtons>
-        <ui.PopoverMenu
-          type='custom-reports'
-          triggerLabel={this.state.currentCustomReport ? (this.state.currentCustomReport.name || t('Untitled Report')) : t('Custom Reports')}
-        >
+        <ui.PopoverMenu type='custom-reports' triggerLabel={menuLabel}>
           <bem.PopoverMenu__link
             key='default'
             data-name=''
@@ -308,31 +343,36 @@ export default class Reports extends React.Component {
           >
             {t('Default Report')}
           </bem.PopoverMenu__link>
-          {
-            customReportsList.map(function(m) {
-              return (
-                <bem.PopoverMenu__link
-                  key={m.crid}
-                  data-crid={m.crid}
-                  onClick={_this.setCustomReport}
-                  className={(_this.state.currentCustomReport && _this.state.currentCustomReport.crid == m.crid) ? 'active' : ''}
-                >
-                  {m.name || t('Untitled report')}
-                </bem.PopoverMenu__link>
-              );
-            })
-          }
-          {this.userCan('change_asset', this.state.asset) &&
+          {customReportsList.map(function (m) {
+            let itemClassName;
+            if (
+              _this.state.currentCustomReport &&
+              _this.state.currentCustomReport.crid === m.crid
+            ) {
+              itemClassName = 'active';
+            }
+            return (
+              <bem.PopoverMenu__link
+                key={m.crid}
+                data-crid={m.crid}
+                onClick={_this.setCustomReport}
+                className={itemClassName}
+              >
+                {m.name || t('Untitled report')}
+              </bem.PopoverMenu__link>
+            );
+          })}
+          {this.userCan('change_asset', this.state.asset) && (
             <bem.PopoverMenu__link
               key='new'
               onClick={this.toggleCustomReportModal}
             >
               {t('Create New Report')}
             </bem.PopoverMenu__link>
-          }
+          )}
         </ui.PopoverMenu>
 
-        {this.state.currentCustomReport &&
+        {this.state.currentCustomReport && (
           <bem.Button
             m='icon'
             className='report-button__edit'
@@ -341,7 +381,7 @@ export default class Reports extends React.Component {
           >
             <i className='k-icon-edit' />
           </bem.Button>
-        }
+        )}
 
         <bem.Button
           m='icon'
@@ -361,7 +401,7 @@ export default class Reports extends React.Component {
           <i className='k-icon-print' />
         </bem.Button>
 
-        {this.userCan('change_asset', this.state.asset) &&
+        {this.userCan('change_asset', this.state.asset) && (
           <bem.Button
             m='icon'
             className='report-button__settings'
@@ -370,7 +410,7 @@ export default class Reports extends React.Component {
           >
             <i className='k-icon-settings' />
           </bem.Button>
-        }
+        )}
       </bem.FormView__reportButtons>
     );
   }
@@ -405,7 +445,7 @@ export default class Reports extends React.Component {
   renderQuestionSettings() {
     return (
       <bem.GraphSettings>
-        <ui.Modal.Body/>
+        <ui.Modal.Body />
       </bem.GraphSettings>
     );
   }
@@ -413,23 +453,32 @@ export default class Reports extends React.Component {
     this.setState({currentQuestionGraph: false});
   }
 
-  render() {
-    if (!this.state.asset) {
+  renderLoadingOrError() {
+    if (this.state.error) {
       return (
         <bem.Loading>
-          {this.state.error ?
-            <bem.Loading__inner>
-              {t('This report cannot be loaded.')}
-              <br/>
-              <code>
-                {this.state.error.statusText + ': ' + this.state.error.responseText}
-              </code>
-            </bem.Loading__inner>
-          :
-            <ui.LoadingSpinner/>
-          }
+          <bem.Loading__inner>
+            {t('This report cannot be loaded.')}
+            <br />
+            <code>
+              {this.state.error.statusText}
+              {': ' + this.state.error.responseText}
+            </code>
+          </bem.Loading__inner>
         </bem.Loading>
       );
+    } else {
+      return (
+        <bem.Loading>
+          <ui.LoadingSpinner />
+        </bem.Loading>
+      );
+    }
+  }
+
+  render() {
+    if (!this.state.asset) {
+      return this.renderLoadingOrError();
     }
 
     let asset = this.state.asset;
@@ -451,27 +500,16 @@ export default class Reports extends React.Component {
         });
       }
 
-      if (this.state.reportLimit && reportData.length > this.state.reportLimit) {
+      if (
+        this.state.reportLimit &&
+        reportData.length > this.state.reportLimit
+      ) {
         reportData = reportData.slice(0, this.state.reportLimit);
       }
     }
 
     if (this.state.reportData === undefined) {
-      return (
-        <bem.Loading>
-          {this.state.error ?
-            <bem.Loading__inner>
-              {t('This report cannot be loaded.')}
-              <br/>
-              <code>
-                {this.state.error.statusText + ': ' + this.state.error.responseText}
-              </code>
-            </bem.Loading__inner>
-          :
-            <ui.LoadingSpinner/>
-          }
-        </bem.Loading>
-      );
+      return this.renderLoadingOrError();
     }
 
     const formViewModifiers = [];
@@ -488,64 +526,92 @@ export default class Reports extends React.Component {
           <bem.ReportView>
             {this.renderReportButtons()}
 
-            {!hasAnyProvidedData &&
+            {!hasAnyProvidedData && (
               <bem.ReportView__wrap>
                 <bem.Loading>
                   <bem.Loading__inner>
                     {t('This report has no data.')}
 
-                    {hasGroupBy && ' ' + t('Try changing Report Style to "No grouping".')}
+                    {hasGroupBy &&
+                      ' ' + t('Try changing Report Style to "No grouping".')}
                   </bem.Loading__inner>
                 </bem.Loading>
               </bem.ReportView__wrap>
-            }
+            )}
 
-            {hasAnyProvidedData &&
+            {hasAnyProvidedData && (
               <bem.ReportView__wrap>
                 <bem.PrintOnly>
                   <h3>{asset.name}</h3>
                 </bem.PrintOnly>
-                {
-                  !this.state.currentCustomReport &&
+                {!this.state.currentCustomReport &&
                   this.state.reportLimit &&
                   reportData.length &&
-                  this.state.reportData.length > this.state.reportLimit &&
-                  <bem.FormView__cell m={['centered', 'reportLimit']}>
-                    <div>
-                      {t('For performance reasons, this report only includes the first ## questions.').replace('##', this.state.reportLimit)}
-                    </div>
-                    <bem.Button m='colored' onClick={this.resetReportLimit}>
-                      {t('Show all (##)').replace('##', this.state.reportData.length)}
-                    </bem.Button>
-                  </bem.FormView__cell>
-                }
+                  this.state.reportData.length > this.state.reportLimit && (
+                    <bem.FormView__cell m={['centered', 'reportLimit']}>
+                      <div>
+                        {t(
+                          'For performance reasons, this report only includes the first ## questions.'
+                        ).replace('##', this.state.reportLimit)}
+                      </div>
+                      <bem.Button m='colored' onClick={this.resetReportLimit}>
+                        {t('Show all (##)').replace(
+                          '##',
+                          this.state.reportData.length
+                        )}
+                      </bem.Button>
+                    </bem.FormView__cell>
+                  )}
 
                 <bem.FormView__cell m='warning'>
                   <i className='k-icon-alert' />
-                  <p>{t('This is an automated report based on raw data submitted to this project. Please conduct proper data cleaning prior to using the graphs and figures used on this page. ')}</p>
+                  <p>
+                    {t(
+                      'This is an automated report based on raw data submitted to this project. Please conduct proper data cleaning prior to using the graphs and figures used on this page. '
+                    )}
+                  </p>
                 </bem.FormView__cell>
 
-                <ReportContents parentState={this.state} reportData={reportData} triggerQuestionSettings={this.triggerQuestionSettings} />
+                <ReportContents
+                  parentState={this.state}
+                  reportData={reportData}
+                  triggerQuestionSettings={this.triggerQuestionSettings}
+                />
               </bem.ReportView__wrap>
-            }
-
-            {this.state.showReportGraphSettings &&
-              <ui.Modal open onClose={this.toggleReportGraphSettings} title={t('Edit Report Style')}>
+            )}
+
+            {this.state.showReportGraphSettings && (
+              <ui.Modal
+                open
+                onClose={this.toggleReportGraphSettings}
+                title={t('Edit Report Style')}
+              >
                 <ReportStyleSettings parentState={this.state} />
               </ui.Modal>
-            }
-
-            {this.state.showCustomReportModal &&
-              <ui.Modal open onClose={this.toggleCustomReportModal} title={t('Custom Report')}>
+            )}
+
+            {this.state.showCustomReportModal && (
+              <ui.Modal
+                open
+                onClose={this.toggleCustomReportModal}
+                title={t('Custom Report')}
+              >
                 {this.renderCustomReportModal()}
               </ui.Modal>
-            }
-
-            {this.state.currentQuestionGraph &&
-              <ui.Modal open onClose={this.closeQuestionSettings} title={t('Question Style')}>
-                <QuestionGraphSettings question={this.state.currentQuestionGraph} parentState={this.state} />
+            )}
+
+            {this.state.currentQuestionGraph && (
+              <ui.Modal
+                open
+                onClose={this.closeQuestionSettings}
+                title={t('Question Style')}
+              >
+                <QuestionGraphSettings
+                  question={this.state.currentQuestionGraph}
+                  parentState={this.state}
+                />
               </ui.Modal>
-            }
+            )}
           </bem.ReportView>
         </bem.FormView>
       </DocumentTitle>