Merge pull request getredash#4 from salabh-aot/gannt2

gantt chart

viz-lib/package.json

@@ -86,6 +86,8 @@
     "debug": "^3.1.0",
     "dompurify": "^2.0.7",
     "font-awesome": "^4.7.0",
+    "highcharts": "^10.0.0",
+    "highcharts-react-official": "^3.1.0",
     "hoist-non-react-statics": "^3.3.0",
     "leaflet": "^1.2.0",
     "leaflet-fullscreen": "^1.0.2",

viz-lib/src/visualizations/gantt-chart/Editor.tsx

@@ -0,0 +1,33 @@
+import { map, merge } from "lodash";
+import React from "react";
+import * as Grid from "antd/lib/grid";
+import { Section, Select, InputNumber, ControlLabel } from "@/components/visualizations/editor";
+import { EditorPropTypes } from "@/visualizations/prop-types";
+
+export default function Editor({ options, data, onOptionsChange }: any) {
+  const optionsChanged = (newOptions: any) => {
+    onOptionsChange(merge({}, options, newOptions));
+  };
+
+  return (
+    <React.Fragment>
+      {/* @ts-expect-error ts-migrate(2745) FIXME: This JSX tag's 'children' prop expects type 'never... Remove this comment to see the full error message */}
+      <Section>
+        <Select
+          label="Project Name Column"
+          value={options.projectName}
+          onChange={(projectName: any) => optionsChanged({ projectName })}>
+          {map(data.columns, ({ name }) => (
+            // @ts-expect-error ts-migrate(2339) FIXME: Property 'Option' does not exist on type '({ class... Remove this comment to see the full error message
+            <Select.Option key={name}>
+              {name}
+              {/* @ts-expect-error ts-migrate(2339) FIXME: Property 'Option' does not exist on type '({ class... Remove this comment to see the full error message */}
+            </Select.Option>
+          ))}
+        </Select>
+      </Section>
+    </React.Fragment>
+  );
+}
+
+Editor.propTypes = EditorPropTypes;

viz-lib/src/visualizations/gantt-chart/Renderer.tsx

@@ -0,0 +1,103 @@
+import React, { useMemo, useState, useEffect } from "react";
+import { RendererPropTypes } from "@/visualizations/prop-types";
+
+import { groupBy } from "lodash";
+
+import HighchartsReact from "highcharts-react-official";
+// Import Highcharts
+import Highcharts from "highcharts";
+import highchartsGantt from "highcharts/modules/gantt";
+
+highchartsGantt(Highcharts);
+
+import "./renderer.less";
+
+function prepareData(data: any) {
+  const colors: any = {
+    "Early Engagement": "#e1ebf3",
+    "Proponent Time: Project Description": "#ccffff",
+    "Readiness Decision": "#c3d7e8",
+    "Process Planning": "#a6c3dd",
+    "Proponent Time: Application Development": "#ccffff",
+    "Application Development & Review": "#faeadc",
+    "Proponent Time: Revised Application": "#ccffff",
+    "Effects Assessment": "#f6d5b9",
+    Recommendation: "#f2c096",
+    "Referral/Decision": "#f2c096",
+  };
+  const projects = groupBy(data, (item: any) => item.project);
+  const series: Array<any> = [];
+  let projectIndex = 0;
+
+  for (const project in projects) {
+    const projectData: any = projects[project];
+    const projectId: string = `${projectData[0].project_id}`;
+    const projectSeries: any = {
+      name: projectData[0].project,
+      data: [],
+    };
+
+    projectData.forEach((phase: any) => {
+      projectSeries.data.push({
+        id: phase.phase_id,
+        name: phase.phase,
+        start: new Date(phase.phase_start).getTime(),
+        end: new Date(phase.phase_end).getTime(),
+        y: projectIndex,
+        color: colors[phase.phase],
+      });
+    });
+    series.push(projectSeries);
+    projectIndex += 1;
+  }
+
+  return [series, Object.keys(projects)];
+}
+
+export default function Renderer({ data, options }: any) {
+  const [tasks, projects] = prepareData(data.rows);
+  const first = tasks[0];
+  const last = tasks[tasks.length - 1];
+  const day = 1000 * 60 * 60 * 24;
+  const chartData: Highcharts.Options = {
+    title: {
+      text: "Highcharts Gantt With Subtasks",
+    },
+    xAxis: [
+      {
+        tickInterval: 1000 * 60 * 60 * 24 * 30, // Month
+        labels: {
+          format: "{value:%b}",
+          style: {
+            fontSize: "8px",
+          },
+          autoRotation: [-90],
+        },
+        min: first.data[0].start - day * 15,
+        max: last.data[last.data.length - 1].end + day * 15,
+        currentDateIndicator: false,
+      },
+      {
+        tickInterval: 1000 * 60 * 60 * 24 * 365, // Year
+        labels: {
+          format: "{value:%Y}",
+        },
+        linkedTo: 0,
+      },
+    ],
+    yAxis: {
+      categories: projects,
+    },
+    series: tasks,
+  };
+
+  console.log(chartData);
+
+  return (
+    <div className="gantt-chart-visualization-container">
+      <HighchartsReact highcharts={Highcharts} constructorType={"ganttChart"} options={chartData} />
+    </div>
+  );
+}
+
+Renderer.propTypes = RendererPropTypes;

viz-lib/src/visualizations/gantt-chart/index.ts

@@ -0,0 +1,18 @@
+import { merge } from "lodash";
+
+import Renderer from "./Renderer";
+import Editor from "./Editor";
+
+const DEFAULT_OPTIONS = {
+  projectName: "",
+};
+
+export default {
+  type: "GANTT_CHART",
+  name: "Gantt Chart",
+  getOptions: (options: any) => merge({}, DEFAULT_OPTIONS, options),
+  Renderer,
+  Editor,
+
+  defaultRows: 8,
+};

viz-lib/src/visualizations/gantt-chart/renderer.less

@@ -0,0 +1,12 @@
+.word-cloud-visualization-container {
+  overflow: hidden;
+  height: 400px;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+
+  svg {
+    transform-origin: center center;
+    flex: 0 0 auto;
+  }
+}

viz-lib/src/visualizations/registeredVisualizations.ts

@@ -14,6 +14,7 @@ import sankeyVisualization from "./sankey";
 import sunburstVisualization from "./sunburst";
 import tableVisualization from "./table";
 import wordCloudVisualization from "./word-cloud";
+import ganttChartVisualization from "./gantt-chart";
 
 type VisualizationConfig = {
   type: string;
@@ -91,6 +92,7 @@ each(
     sunburstVisualization,
     tableVisualization,
     wordCloudVisualization,
+    ganttChartVisualization,
   ]),
   registerVisualization
 );