Cherry-picks: Sunburst, Horizon, Treemap and a few small updates from community

superset/assets/package.json

@@ -68,7 +68,6 @@
     "geojson-extent": "^0.3.2",
     "geolib": "^2.0.24",
     "immutable": "^3.8.2",
-    "is-react": "^1.1.1",
     "jed": "^1.1.1",
     "jquery": "3.1.1",
     "lodash.throttle": "^4.1.1",

superset/assets/src/chart/Chart.jsx

@@ -1,7 +1,6 @@
 /* eslint no-undef: 2 */
 import React from 'react';
 import PropTypes from 'prop-types';
-import Mustache from 'mustache';
 import { Tooltip } from 'react-bootstrap';
 
 import { d3format } from '../modules/utils';
@@ -183,15 +182,6 @@ class Chart extends React.PureComponent {
     return this.props.datasource.verbose_map[metric] || metric;
   }
 
-  // eslint-disable-next-line camelcase
-  render_template(s) {
-    const context = {
-      width: this.width(),
-      height: this.height(),
-    };
-    return Mustache.render(s, context);
-  }
-
   renderTooltip() {
     if (this.state.tooltip) {
       return (

superset/assets/src/explore/components/ControlPanelsContainer.jsx

@@ -1,6 +1,5 @@
 /* eslint camelcase: 0 */
 import React from 'react';
-import isReact from 'is-react';
 import PropTypes from 'prop-types';
 import { bindActionCreators } from 'redux';
 import { connect } from 'react-redux';
@@ -11,6 +10,7 @@ import ControlRow from './ControlRow';
 import Control from './Control';
 import controls from '../controls';
 import * as actions from '../actions/exploreActions';
+import { t } from '../../locales';
 
 const propTypes = {
   actions: PropTypes.object.isRequired,
@@ -30,7 +30,7 @@ class ControlPanelsContainer extends React.Component {
     this.renderControlPanelSection = this.renderControlPanelSection.bind(this);
   }
   getControlData(controlName) {
-    if (isReact.element(controlName)) {
+    if (React.isValidElement(controlName)) {
       return controlName;
     }
 
@@ -77,7 +77,7 @@ class ControlPanelsContainer extends React.Component {
             controls={controlSets.map((controlName) => {
               if (!controlName) {
                 return null;
-              } else if (isReact.element(controlName)) {
+              } else if (React.isValidElement(controlName)) {
                 return controlName;
               } else if (ctrls[controlName]) {
                 return (<Control
@@ -134,7 +134,7 @@ class ControlPanelsContainer extends React.Component {
               {querySectionsToRender.map(this.renderControlPanelSection)}
             </Tab>
             {displaySectionsToRender.length > 0 &&
-              <Tab eventKey="display" title="Style">
+              <Tab eventKey="display" title={t('Visual Properties')}>
                 {displaySectionsToRender.map(this.renderControlPanelSection)}
               </Tab>
             }

superset/assets/src/explore/controls.jsx

@@ -345,14 +345,15 @@ export const controls = {
 
   horizon_color_scale: {
     type: 'SelectControl',
-    label: t('Horizon Color Scale'),
+    renderTrigger: true,
+    label: t('Value Domain'),
     choices: [
       ['series', 'series'],
       ['overall', 'overall'],
       ['change', 'change'],
     ],
     default: 'series',
-    description: t('Defines how the color are attributed.'),
+    description: t('series: Treat each series independently; overall: All series use the same scale; change: Show changes compared to the first data point in each series'),
   },
 
   canvas_image_rendering: {
@@ -512,10 +513,13 @@ export const controls = {
       'Italy',
       'Portugal',
       'Morocco',
+      'Myanmar',
       'Netherlands',
       'Russia',
       'Singapore',
       'Spain',
+      'Thailand',
+      'Timorleste',
       'Uk',
       'Ukraine',
       'Usa',
@@ -1160,6 +1164,7 @@ export const controls = {
 
   series_height: {
     type: 'SelectControl',
+    renderTrigger: true,
     freeForm: true,
     label: t('Series Height'),
     default: '25',

superset/assets/src/explore/store.js

@@ -1,5 +1,5 @@
 /* eslint camelcase: 0 */
-import isReact from 'is-react';
+import React from 'react';
 import controls from './controls';
 import visTypes, { sectionsToRender } from './visTypes';
 
@@ -51,7 +51,7 @@ export function getControlsState(state, form_data) {
   const controlOverrides = viz.controlOverrides || {};
   const controlsState = {};
   controlNames.forEach((k) => {
-    if (isReact.element(k)) {
+    if (React.isValidElement(k)) {
       // no state
       return;
     }

superset/assets/src/visualizations/HorizonChart.css

@@ -0,0 +1,17 @@
+.horizon-chart {
+  overflow: auto;
+}
+
+.horizon-chart .horizon-row  {
+  border-bottom: solid 1px #ddd;
+  border-top: 0px;
+  padding: 0px;
+  margin: 0px;
+}
+
+.horizon-row span {
+  position: absolute;
+  color: #333;
+  font-size: 0.8em;
+  text-shadow: 1px 1px rgba(255, 255, 255, 0.75);
+}

superset/assets/src/visualizations/HorizonChart.jsx

@@ -0,0 +1,103 @@
+import React from 'react';
+import ReactDOM from 'react-dom';
+import PropTypes from 'prop-types';
+import d3 from 'd3';
+import HorizonRow, { DEFAULT_COLORS } from './HorizonRow';
+import './HorizonChart.css';
+
+const propTypes = {
+  className: PropTypes.string,
+  width: PropTypes.number,
+  seriesHeight: PropTypes.number,
+  data: PropTypes.arrayOf(PropTypes.shape({
+    key: PropTypes.arrayOf(PropTypes.string),
+    values: PropTypes.arrayOf(PropTypes.shape({
+      y: PropTypes.number,
+    })),
+  })).isRequired,
+  // number of bands in each direction (positive / negative)
+  bands: PropTypes.number,
+  colors: PropTypes.arrayOf(PropTypes.string),
+  colorScale: PropTypes.string,
+  mode: PropTypes.string,
+  offsetX: PropTypes.number,
+};
+const defaultProps = {
+  className: '',
+  width: 800,
+  seriesHeight: 20,
+  bands: Math.floor(DEFAULT_COLORS.length / 2),
+  colors: DEFAULT_COLORS,
+  colorScale: 'series',
+  mode: 'offset',
+  offsetX: 0,
+};
+
+class HorizonChart extends React.PureComponent {
+  render() {
+    const {
+      className,
+      width,
+      data,
+      seriesHeight,
+      bands,
+      colors,
+      colorScale,
+      mode,
+      offsetX,
+    } = this.props;
+
+    let yDomain;
+    if (colorScale === 'overall') {
+      const allValues = data.reduce(
+        (acc, current) => acc.concat(current.values),
+        [],
+      );
+      yDomain = d3.extent(allValues, d => d.y);
+    }
+
+    return (
+      <div className={`horizon-chart ${className}`}>
+        {data.map(row => (
+          <HorizonRow
+            key={row.key}
+            width={width}
+            height={seriesHeight}
+            title={row.key[0]}
+            data={row.values}
+            bands={bands}
+            colors={colors}
+            colorScale={colorScale}
+            mode={mode}
+            offsetX={offsetX}
+            yDomain={yDomain}
+          />
+        ))}
+      </div>
+    );
+  }
+}
+
+HorizonChart.propTypes = propTypes;
+HorizonChart.defaultProps = defaultProps;
+
+function adaptor(slice, payload) {
+  const { selector, formData } = slice;
+  const element = document.querySelector(selector);
+  const {
+    horizon_color_scale: colorScale,
+    series_height: seriesHeight,
+  } = formData;
+
+  ReactDOM.render(
+    <HorizonChart
+      data={payload.data}
+      width={slice.width()}
+      seriesHeight={parseInt(seriesHeight, 10)}
+      colorScale={colorScale}
+    />,
+    element,
+  );
+}
+
+export default adaptor;