[WIP] Cherry-pick(s): <description>

docs/faq.rst

@@ -114,8 +114,8 @@ never be affected by any dashboard level filtering.
         "filter_immune_slices": [324, 65, 92],
         "expanded_slices": {},
         "filter_immune_slice_fields": {
-            "177": ["country_name", "__from", "__to"],
-            "32": ["__from", "__to"]
+            "177": ["country_name", "__time_range"],
+            "32": ["__time_range"]
         },
         "timed_refresh_immune_slices": [324]
     }
@@ -127,8 +127,8 @@ Now note the ``filter_immune_slice_fields`` key. This one allows you to
 be more specific and define for a specific slice_id, which filter fields
 should be disregarded.
 
-Note the use of the ``__from`` and ``__to`` keywords, those are reserved
-for dealing with the time boundary filtering mentioned above.
+Note the use of the ``__time_range`` keyword, which is reserved for dealing
+with the time boundary filtering mentioned above.
 
 But what happens with filtering when dealing with slices coming from
 different tables or databases? If the column name is shared, the filter will

superset/assets/package.json

@@ -54,6 +54,7 @@
     "classnames": "^2.2.5",
     "d3": "^3.5.17",
     "d3-cloud": "^1.2.1",
+    "d3-color": "^1.2.0",
     "d3-hierarchy": "^1.1.5",
     "d3-sankey": "^0.4.2",
     "d3-svg-legend": "^1.x",
@@ -68,7 +69,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';
@@ -30,7 +29,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 +76,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 +133,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/explore/visTypes.jsx

@@ -1242,6 +1242,7 @@ export const visTypes = {
           ['compare_lag', 'compare_suffix'],
           ['y_axis_format', null],
           ['show_trend_line', 'start_y_axis_at_zero'],
+          ['color_picker', null],
         ],
       },
     ],

superset/assets/src/visualizations/BigNumber.jsx

@@ -1,6 +1,7 @@
 import React from 'react';
 import PropTypes from 'prop-types';
 import ReactDOM from 'react-dom';
+import * as color from 'd3-color';
 import { XYChart, AreaSeries, CrossHair, LinearGradient } from '@data-ui/xy-chart';
 
 import { brandColor } from '../modules/colors';
@@ -230,12 +231,14 @@ BigNumberVis.defaultProps = defaultProps;
 function adaptor(slice, payload) {
   const { formData, containerId } = slice;
   const { data, subheader, compare_suffix: compareSuffix } = payload.data;
+  const { r, g, b } = formData.color_picker;
   const compareLag = Number(payload.data.compare_lag);
   const supportTrendline = formData.viz_type === 'big_number';
   const showTrendline = supportTrendline && formData.show_trend_line;
   const startYAxisAtZero = formData.start_y_axis_at_zero;
   const formatValue = d3FormatPreset(formData.y_axis_format);
   const bigNumber = supportTrendline ? data[data.length - 1][1] : data[0][0];
+  const userColor = color.rgb(r, g, b).hex();
 
   let percentChange = 0;
   let formattedSubheader = subheader;
@@ -271,7 +274,7 @@ function adaptor(slice, payload) {
       showTrendline={showTrendline}
       startYAxisAtZero={startYAxisAtZero}
       trendlineData={trendlineData}
-      mainColor={brandColor}
+      mainColor={userColor}
       gradientId={`big_number_${containerId}`}
       renderTooltip={renderTooltipFactory(formatValue)}
     />,

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;