All files / javascripts/explorev2/components ControlPanelsContainer.jsx

0% Statements 0/27
0% Branches 0/4
0% Functions 0/4
0% Lines 0/27
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 70 71 72 73 74 75 76 77 78 79 80 81 82 83 84 85 86 87 88 89 90 91 92 93 94 95 96 97 98 99 100                                                                                                                                                                                                       
/* eslint camelcase: 0 */
import React, { PropTypes } from 'react';
import { bindActionCreators } from 'redux';
import * as actions from '../actions/exploreActions';
import { connect } from 'react-redux';
import { Panel } from 'react-bootstrap';
import { visTypes, commonControlPanelSections } from '../stores/store';
import ControlPanelSection from './ControlPanelSection';
import FieldSetRow from './FieldSetRow';
 
const propTypes = {
  datasource_id: PropTypes.number.isRequired,
  datasource_type: PropTypes.string.isRequired,
  actions: PropTypes.object.isRequired,
  fields: PropTypes.object.isRequired,
  isDatasourceMetaLoading: PropTypes.bool.isRequired,
  form_data: PropTypes.object.isRequired,
  y_axis_zero: PropTypes.any,
};
 
class ControlPanelsContainer extends React.Component {
  componentWillMount() {
    const { datasource_id, datasource_type } = this.props;
    if (datasource_id) {
      this.props.actions.fetchFieldOptions(datasource_id, datasource_type);
    }
  }
 
  onChange(name, value) {
    this.props.actions.setFieldValue(name, value);
  }
 
  sectionsToRender() {
    const viz = visTypes[this.props.form_data.viz_type];
    const { datasourceAndVizType, sqlClause } = commonControlPanelSections;
    const sectionsToRender = [datasourceAndVizType].concat(viz.controlPanelSections, sqlClause);
 
    return sectionsToRender;
  }
 
  fieldOverrides() {
    const viz = visTypes[this.props.form_data.viz_type];
    return viz.fieldOverrides;
  }
 
  render() {
    return (
      <Panel>
        {!this.props.isDatasourceMetaLoading &&
          <div className="scrollbar-container">
            <div className="scrollbar-content">
              {this.sectionsToRender().map((section) => (
                <ControlPanelSection
                  key={section.label}
                  label={section.label}
                  tooltip={section.description}
                >
                  {section.fieldSetRows.map((fieldSets, i) => (
                    <FieldSetRow
                      key={`${section.label}-fieldSetRow-${i}`}
                      fieldSets={fieldSets}
                      fieldOverrides={this.fieldOverrides()}
                      onChange={this.onChange.bind(this)}
                      fields={this.props.fields}
                      form_data={this.props.form_data}
                    />
                  ))}
                </ControlPanelSection>
              ))}
              {/* TODO: add filters section */}
            </div>
          </div>
        }
      </Panel>
    );
  }
}
 
ControlPanelsContainer.propTypes = propTypes;
 
function mapStateToProps(state) {
  return {
    isDatasourceMetaLoading: state.isDatasourceMetaLoading,
    fields: state.fields,
    datasource_id: state.datasource_id,
    datasource_type: state.datasource_type,
    form_data: state.viz.form_data,
  };
}
 
function mapDispatchToProps(dispatch) {
  return {
    actions: bindActionCreators(actions, dispatch),
  };
}
 
export { ControlPanelsContainer };
 
export default connect(mapStateToProps, mapDispatchToProps)(ControlPanelsContainer);