Allowing to integrate time as a groupby value (#3229)

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

@@ -28,6 +28,7 @@ class ControlPanelsContainer extends React.Component {
     this.getControlData = this.getControlData.bind(this);
   }
   getControlData(controlName) {
+    const control = this.props.controls[controlName];
     // Identifying mapStateToProps function to apply (logic can't be in store)
     let mapF = controls[controlName].mapStateToProps;
 
@@ -38,9 +39,9 @@ class ControlPanelsContainer extends React.Component {
     }
     // Applying mapStateToProps if needed
     if (mapF) {
-      return Object.assign({}, this.props.controls[controlName], mapF(this.props.exploreState));
+      return Object.assign({}, control, mapF(this.props.exploreState, control));
     }
-    return this.props.controls[controlName];
+    return control;
   }
   sectionsToRender() {
     return sectionsToRender(this.props.form_data.viz_type, this.props.datasource_type);

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

@@ -28,6 +28,36 @@ export const D3_TIME_FORMAT_OPTIONS = [
   ['%H:%M:%S', '%H:%M:%S | 01:32:10'],
 ];
 
+const timeColumnOption = {
+  verbose_name: 'Time',
+  column_name: '__timestamp',
+  description: (
+    'A reference to the [Time] configuration, taking granularity into ' +
+    'account'),
+};
+
+const groupByControl = {
+  type: 'SelectControl',
+  multi: true,
+  label: 'Group by',
+  default: [],
+  includeTime: false,
+  description: 'One or many controls to group by',
+  optionRenderer: c => <ColumnOption column={c} />,
+  valueRenderer: c => <ColumnOption column={c} />,
+  valueKey: 'column_name',
+  mapStateToProps: (state, control) => {
+    const newState = {};
+    if (state.datasource) {
+      newState.options = state.datasource.columns.filter(c => c.groupby);
+      if (control && control.includeTime) {
+        newState.options.push(timeColumnOption);
+      }
+    }
+    return newState;
+  },
+};
+
 export const controls = {
   datasource: {
     type: 'DatasourceControl',
@@ -323,33 +353,12 @@ export const controls = {
     'to find in the [country] column',
   },
 
-  groupby: {
-    type: 'SelectControl',
-    multi: true,
-    label: 'Group by',
-    default: [],
-    description: 'One or many controls to group by',
-    optionRenderer: c => <ColumnOption column={c} />,
-    valueRenderer: c => <ColumnOption column={c} />,
-    valueKey: 'column_name',
-    mapStateToProps: state => ({
-      options: (state.datasource) ? state.datasource.columns.filter(c => c.groupby) : [],
-    }),
-  },
+  groupby: groupByControl,
 
-  columns: {
-    type: 'SelectControl',
-    multi: true,
+  columns: Object.assign({}, groupByControl, {
     label: 'Columns',
-    default: [],
     description: 'One or many controls to pivot as columns',
-    optionRenderer: c => <ColumnOption column={c} />,
-    valueRenderer: c => <ColumnOption column={c} />,
-    valueKey: 'column_name',
-    mapStateToProps: state => ({
-      options: (state.datasource) ? state.datasource.columns : [],
-    }),
-  },
+  }),
 
   all_columns: {
     type: 'SelectControl',

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

@@ -52,7 +52,7 @@ export function getControlsState(state, form_data) {
   controlNames.forEach((k) => {
     const control = Object.assign({}, controls[k], controlOverrides[k]);
     if (control.mapStateToProps) {
-      Object.assign(control, control.mapStateToProps(state));
+      Object.assign(control, control.mapStateToProps(state, control));
       delete control.mapStateToProps;
     }
 

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

@@ -337,10 +337,15 @@ export const visTypes = {
         controlSetRows: [
           ['groupby', 'columns'],
           ['metrics', 'pandas_aggfunc'],
-          ['number_format', 'combine_metric', 'pivot_margins'],
+          ['number_format', 'combine_metric'],
+          ['pivot_margins'],
         ],
       },
     ],
+    controlOverrides: {
+      groupby: { includeTime: true },
+      columns: { includeTime: true },
+    },
   },
 
   separator: {