initial cut at adding Gantt chart visualization

docs/gallery.rst

@@ -33,6 +33,10 @@ Visualizations Gallery
    :scale: 25 %
 
 
+.. image:: images/viz_thumbnails/gantt.png
+   :scale: 25 %
+
+
 .. image:: images/viz_thumbnails/chord.png
    :scale: 25 %
 
@@ -187,4 +191,3 @@ Visualizations Gallery
 
 .. image:: images/viz_thumbnails/world_map.png
    :scale: 25 %
-

superset/assets/backendSync.json

@@ -1168,6 +1168,34 @@
       ],
       "description": "The time unit for each block. Should be a smaller unit than domain_granularity. Should be larger or equal to Time Grain"
     },
+    "task_column": {
+      "type": "SelectControl",
+      "label": "Task Column",
+      "description": "The task / taskname column for the visualization.",
+      "clearable": false,
+      "valueKey": "column_name"
+    },
+    "status_column": {
+      "type": "SelectControl",
+      "label": "Status Column",
+      "description": "The column containing task status for the visualization.",
+      "clearable": false,
+      "valueKey": "column_name"
+    },
+    "start_time_column": {
+      "type": "SelectControl",
+      "label": "Start Time Column",
+      "description": "The start_time column for the visualization.",
+      "clearable": false,
+      "valueKey": "column_name"
+    },
+    "end_time_column": {
+      "type": "SelectControl",
+      "label": "End Time Column",
+      "description": "The end_time column for the visualization.",
+      "clearable": false,
+      "valueKey": "column_name"
+    },
     "link_length": {
       "type": "SelectControl",
       "freeForm": true,

superset/assets/src/explore/controls.jsx

@@ -796,6 +796,78 @@ export const controls = {
     'domain_granularity. Should be larger or equal to Time Grain'),
   },
 
+  start_time_column: {
+    type: 'SelectControl',
+    label: t('Start Time Column'),
+    description: "The start_time column for the visualization.",
+    default: null,
+    clearable: false,
+    optionRenderer: c => <ColumnOption column={c} showType />,
+    valueRenderer: c => <ColumnOption column={c} />,
+    valueKey: 'column_name',
+    mapStateToProps: (state) => {
+      const newState = {};
+      if (state.datasource) {
+        newState.options = state.datasource.columns.filter(c => c.is_dttm);
+      }
+      return newState;
+    }
+  },
+
+  end_time_column: {
+    type: 'SelectControl',
+    label: t('End Time Column'),
+    description: "The end_time column for the visualization.",
+    default: null,
+    clearable: false,
+    optionRenderer: c => <ColumnOption column={c} showType />,
+    valueRenderer: c => <ColumnOption column={c} />,
+    valueKey: 'column_name',
+    mapStateToProps: (state) => {
+      const newState = {};
+      if (state.datasource) {
+        newState.options = state.datasource.columns.filter(c => c.is_dttm);
+      }
+      return newState;
+    }
+  },
+
+  task_column: {
+    type: 'SelectControl',
+    label: t('Task Column'),
+    description: "The task / taskname column for the visualization.",
+    default: null,
+    clearable: false,
+    optionRenderer: c => <ColumnOption column={c} showType />,
+    valueRenderer: c => <ColumnOption column={c} />,
+    valueKey: 'column_name',
+    mapStateToProps: (state) => {
+      const newState = {};
+      if (state.datasource) {
+        newState.options = state.datasource.columns.filter(c => c.groupby);
+      }
+      return newState;
+    }
+  },
+
+  status_column: {
+    type: 'SelectControl',
+    label: t('Status Column'),
+    description: "The status column of tasks for the visualization.",
+    default: null,
+    clearable: false,
+    optionRenderer: c => <ColumnOption column={c} showType />,
+    valueRenderer: c => <ColumnOption column={c} />,
+    valueKey: 'column_name',
+    mapStateToProps: (state) => {
+      const newState = {};
+      if (state.datasource) {
+        newState.options = state.datasource.columns.filter(c => c.groupby);
+      }
+      return newState;
+    }
+  },
+
   link_length: {
     type: 'SelectControl',
     freeForm: true,

superset/assets/src/explore/visTypes.js

@@ -1018,6 +1018,37 @@ export const visTypes = {
     },
   },
 
+  gantt: {
+    label: t('Gantt Chart'),
+    requiresTime: true,
+    controlPanelSections: [
+      {
+        label: t('Query'),
+        expanded: true,
+        controlSetRows: [
+          ['task_column', 'status_column'],
+          ['start_time_column', 'end_time_column'],
+        ],
+      },
+      {
+        label: t('Chart Options'),
+        expanded: true,
+        controlSetRows: [
+          ['x_axis_time_format'],
+          ['show_legend', null],
+        ],
+      },
+    ],
+    controlOverrides: {
+      x_axis_time_format: {
+        label: t('Time Format'),
+      },
+      show_values: {
+        default: false,
+      },
+    },
+  },
+
   box_plot: {
     label: t('Box Plot'),
     controlPanelSections: [

superset/assets/src/visualizations/index.js

@@ -16,6 +16,7 @@ export const VIZ_TYPES = {
   chord: 'chord',
   dist_bar: 'dist_bar',
   filter_box: 'filter_box',
+  gantt: 'gantt',
   heatmap: 'heatmap',
   histogram: 'histogram',
   horizon: 'horizon',
@@ -66,6 +67,7 @@ const vizMap = {
   [VIZ_TYPES.chord]: require('./chord.jsx'),
   [VIZ_TYPES.dist_bar]: nvd3Vis,
   [VIZ_TYPES.filter_box]: require('./filter_box.jsx'),
+  [VIZ_TYPES.gantt]: require('./gantt.js'),
   [VIZ_TYPES.heatmap]: require('./heatmap.js'),
   [VIZ_TYPES.histogram]: require('./histogram.js'),
   [VIZ_TYPES.horizon]: require('./horizon.js'),

superset/assets/vendor/d3-gantt-chart/gantt-chart-d3.css

@@ -0,0 +1,94 @@
+.gantt-chart-container {
+    pointer-events: all;
+}
+
+.wf-gantt-bar {
+    cursor: default !important;
+}
+
+.wf-gantt-x-axis {
+    pointer-events: all;
+}
+
+.gantt-chart .x.axis .tick line {
+    stroke: #a1a1a1;
+    stroke-dasharray: 2, 5;
+}
+
+.gantt-chart .y.axis .tick text {
+    fill: #434343;
+    font-weight: bold;
+}
+
+.gantt-chart .y.axis .domain {
+    visibility: hidden;
+}
+
+.wf-gantt-chart {
+    max-height: 550px;
+    overflow-y: scroll;
+    overflow-x: hidden;
+}
+
+
+/* Gant chart styles*/
+
+.axis path,
+.axis line {
+    fill: none;
+    stroke: #8994a0;
+    shape-rendering: crispEdges;
+}
+
+.wf-legend-item-text {
+    font-size: 12px;
+}
+
+.pane {
+    fill: none;
+    pointer-events: all;
+}
+
+.gantt-chart-container {
+    pointer-events: all;
+}
+
+.wf-gantt-bar {
+    cursor: default !important;
+}
+
+.wf-gantt-x-axis {
+    pointer-events: all;
+}
+
+.gantt-chart .x.axis .tick line {
+    stroke: #a1a1a1;
+    stroke-dasharray: 2, 5;
+}
+
+.gantt-chart .y.axis .tick text {
+    fill: #434343;
+    font-weight: bold;
+}
+
+.gantt-chart .y.axis .domain {
+    visibility: hidden;
+}
+
+.wf-gantt-chart {
+    max-height: 550px;
+    overflow-y: scroll;
+    overflow-x: hidden;
+}
+
+.c3-tooltip-container {
+  background-color: #fff;
+  border: 1px solid #999;
+  border-radius: 2px;
+  padding: 0.2em;
+}
+
+.c3-tooltip-container th,td {
+  font-size: 80%;
+  padding: 0.2em;
+}