[New Viz] Partition Diagram (#3642)

* Added Partition Visualization

* added unit tests

superset/assets/javascripts/components/OptionDescription.jsx

@@ -0,0 +1,28 @@
+import React from 'react';
+import PropTypes from 'prop-types';
+
+import InfoTooltipWithTrigger from './InfoTooltipWithTrigger';
+
+const propTypes = {
+  option: PropTypes.object.isRequired,
+};
+
+// This component provides a general tooltip for options
+// in a SelectControl
+export default function OptionDescription({ option }) {
+  return (
+    <span>
+      <span className="m-r-5 option-label">
+        {option.label}
+      </span>
+      {option.description &&
+        <InfoTooltipWithTrigger
+          className="m-r-5 text-muted"
+          icon="question-circle-o"
+          tooltip={option.description}
+          label={`descr-${option.label}`}
+        />
+      }
+    </span>);
+}
+OptionDescription.propTypes = propTypes;

superset/assets/javascripts/explore/stores/controls.jsx

@@ -4,6 +4,7 @@ import * as v from '../validators';
 import { ALL_COLOR_SCHEMES, spectrums } from '../../modules/colors';
 import MetricOption from '../../components/MetricOption';
 import ColumnOption from '../../components/ColumnOption';
+import OptionDescription from '../../components/OptionDescription';
 import { t } from '../../locales';
 
 const D3_FORMAT_DOCS = 'D3 format syntax: https://github.com/d3/d3-format';
@@ -98,6 +99,7 @@ export const controls = {
     }),
     description: t('One or many metrics to display'),
   },
+
   y_axis_bounds: {
     type: 'BoundsControl',
     label: t('Y Axis Bounds'),
@@ -108,6 +110,7 @@ export const controls = {
     "this feature will only expand the axis range. It won't " +
     "narrow the data's extent."),
   },
+
   order_by_cols: {
     type: 'SelectControl',
     multi: true,
@@ -909,6 +912,16 @@ export const controls = {
     description: D3_FORMAT_DOCS,
   },
 
+  date_time_format: {
+    type: 'SelectControl',
+    freeForm: true,
+    label: t('Date Time Format'),
+    renderTrigger: true,
+    default: 'smart_date',
+    choices: D3_TIME_FORMAT_OPTIONS,
+    description: D3_FORMAT_DOCS,
+  },
+
   markup_type: {
     type: 'SelectControl',
     label: t('Markup Type'),
@@ -1136,6 +1149,14 @@ export const controls = {
     description: t('Use a log scale for the X axis'),
   },
 
+  log_scale: {
+    type: 'CheckboxControl',
+    label: t('Log Scale'),
+    default: false,
+    renderTrigger: true,
+    description: t('Use a log scale'),
+  },
+
   donut: {
     type: 'CheckboxControl',
     label: t('Donut'),
@@ -1456,5 +1477,85 @@ export const controls = {
     controlName: 'TimeSeriesColumnControl',
   },
 
+  time_series_option: {
+    type: 'SelectControl',
+    label: t('Options'),
+    validators: [v.nonEmpty],
+    default: 'not_time',
+    valueKey: 'value',
+    options: [
+      {
+        label: t('Not Time Series'),
+        value: 'not_time',
+        description: t('Ignore time'),
+      },
+      {
+        label: t('Time Series'),
+        value: 'time_series',
+        description: t('Standard time series'),
+      },
+      {
+        label: t('Aggregate Mean'),
+        value: 'agg_mean',
+        description: t('Mean of values over specified period'),
+      },
+      {
+        label: t('Aggregate Sum'),
+        value: 'agg_sum',
+        description: t('Sum of values over specified period'),
+      },
+      {
+        label: t('Difference'),
+        value: 'point_diff',
+        description: t('Metric change in value from `since` to `until`'),
+      },
+      {
+        label: t('Percent Change'),
+        value: 'point_percent',
+        description: t('Metric percent change in value from `since` to `until`'),
+      },
+      {
+        label: t('Factor'),
+        value: 'point_factor',
+        description: t('Metric factor change from `since` to `until`'),
+      },
+      {
+        label: t('Advanced Analytics'),
+        value: 'adv_anal',
+        description: t('Use the Advanced Analytics options below'),
+      },
+    ],
+    optionRenderer: op => <OptionDescription option={op} />,
+    valueRenderer: op => <OptionDescription option={op} />,
+    description: t('Settings for time series'),
+  },
+
+  equal_date_size: {
+    type: 'CheckboxControl',
+    label: t('Equal Date Sizes'),
+    default: true,
+    renderTrigger: true,
+    description: t('Check to force date partitions to have the same height'),
+  },
+
+  partition_limit: {
+    type: 'TextControl',
+    label: t('Partition Limit'),
+    isInt: true,
+    default: '5',
+    description:
+      t('The maximum number of subdivisions of each group; ' +
+      'lower values are pruned first'),
+  },
+
+  partition_threshold: {
+    type: 'TextControl',
+    label: t('Partition Threshold'),
+    isFloat: true,
+    default: '0.05',
+    description:
+      t('Partitions whose height to parent height proportions are ' +
+      'below this value are pruned'),
+  },
 };
 export default controls;

superset/assets/javascripts/explore/stores/visTypes.js

@@ -1155,6 +1155,33 @@ export const visTypes = {
       },
     ],
   },
+
+  partition: {
+    label: 'Partition Diagram',
+    showOnExplore: true,
+    controlPanelSections: [
+      sections.NVD3TimeSeries[0],
+      {
+        label: t('Time Series Options'),
+        expanded: true,
+        controlSetRows: [
+          ['time_series_option'],
+        ],
+      },
+      {
+        label: t('Chart Options'),
+        expanded: true,
+        controlSetRows: [
+          ['color_scheme'],
+          ['number_format', 'date_time_format'],
+          ['partition_limit', 'partition_threshold'],
+          ['log_scale', 'equal_date_size'],
+          ['rich_tooltip'],
+        ],
+      },
+      sections.NVD3TimeSeries[1],
+    ],
+  },
 };
 
 export default visTypes;

superset/assets/package.json

@@ -52,6 +52,7 @@
     "d3-sankey": "^0.4.2",
     "d3-svg-legend": "^1.x",
     "d3-tip": "^0.6.7",
+    "d3-hierarchy": "^1.1.5",
     "datamaps": "^0.5.8",
     "datatables.net-bs": "^1.10.15",
     "distributions": "^1.0.0",

superset/assets/visualizations/main.js

@@ -35,5 +35,6 @@ const vizMap = {
   dual_line: require('./nvd3_vis.js'),
   event_flow: require('./EventFlow.jsx'),
   paired_ttest: require('./paired_ttest.jsx'),
+  partition: require('./partition.js'),
 };
 export default vizMap;

superset/assets/visualizations/partition.css

@@ -0,0 +1,27 @@
+.partition .chart {
+  display: block;
+  margin: auto;
+  font-size: 11px;
+}
+
+.partition rect {
+  stroke: #eee;
+  fill: #aaa;
+  fill-opacity: .8;
+  transition: fill-opacity 180ms linear;
+  cursor: pointer;
+}
+
+.partition rect:hover {
+  fill-opacity: 1;
+}
+
+.partition g text {
+  font-weight: bold;
+  pointer-events: none;
+  fill: rgba(0, 0, 0, 0.8);
+}
+
+.partition g:hover text {
+  fill: rgba(0, 0, 0, 1);
+}