add funnel chart

HACC-2023 · Nov 1, 2023 · 3ef5cc5 · 3ef5cc5
1 parent d43b862
commit 3ef5cc5
Show file tree

Hide file tree

Showing 3 changed files with 112 additions and 8 deletions.
diff --git a/my-app/src/components/visualizations/OrganizationFunnel.jsx b/my-app/src/components/visualizations/OrganizationFunnel.jsx
@@ -0,0 +1,38 @@
+import { useEffect } from "react";
+
+const OrganizationFunnel = () => {
+  useEffect(() => {
+    import("plotly.js-dist").then((Plotly) => {
+      const gd = document.getElementById("orgFunnel");
+      const data = [
+        {
+          type: "funnelarea",
+          values: [7, 6, 5, 4, 3, 2, 1, 0],
+          text: ["Org. 1", "Org. 2", "Org. 3", "Org. 4", "Org. 5", "Org. 6", "Org. 7", "Org. 8"],
+          marker: {
+
+            line: {
+              color: ["3E4E88", "606470", "606470", "606470", "606470", "606470", "606470", "606470"],
+              width: [2, 2, 2, 2, 2, 2, 2, 2],
+            },
+          },
+          textfont: { size: 13, color: "white" },
+          opacity: 0.90,
+        },
+      ];
+
+      const layout = {
+        margin: { t: 50, l: 20, r: 20 },
+        funnelmode: "stack",
+        showlegend: true,
+        height: 400,
+      };
+
+      Plotly.newPlot(gd, data, layout);
+    });
+  }, []);
+
+  return <div id="orgFunnel" />;
+};
+
+export default OrganizationFunnel;
diff --git a/my-app/src/components/visualizations/ReportTimeSeries.jsx b/my-app/src/components/visualizations/ReportTimeSeries.jsx
@@ -39,7 +39,7 @@ const ReporTimesSeries = () => {
       const trace1 = {
         type: "scatter",
         mode: "lines",
-        name: "Organization 2",
+        name: "Org. 1",
         x: unpack(data, "Month"),
         y: unpack(data, "Organization1"),
         line: { color: "#17BECF" },
@@ -48,7 +48,7 @@ const ReporTimesSeries = () => {
       const trace2 = {
         type: "scatter",
         mode: "lines",
-        name: "Organization 1",
+        name: "Org. 2",
         x: unpack(data, "Month"),
         y: unpack(data, "Organization2"),
         line: { color: "#7F7F7F" },
@@ -57,6 +57,8 @@ const ReporTimesSeries = () => {
       const chartData = [trace1, trace2];
 
       const layout = {
+        margin: { r: 10, t: 18, b: 20, l: 26 },
+        height: 300,
         xaxis: {
           autorange: true,
           range: ["2015-02-17", "2017-02-16"],
@@ -87,7 +89,29 @@ const ReporTimesSeries = () => {
         },
       };
 
-      Plotly.newPlot("reportTimeSeries", chartData, layout);
+      const config = {
+        displaylogo: false,
+        modeBarButtonsToRemove: [
+          "zoom2d",
+          "pan2d",
+          "select2d",
+          "lasso2d",
+          "zoomIn2d",
+          "zoomOut2d",
+          "autoScale2d",
+          "resetScale2d",
+          "hoverClosestCartesian",
+          "hoverCompareCartesian",
+          "toggleSpikelines",
+          "hoverClosestGl2d",
+          "hoverClosestPie",
+          "toggleHover",
+          "resetViews",
+          "toggleSpikeLines",
+        ],
+      };
+
+      Plotly.newPlot("reportTimeSeries", chartData, layout, config);
     });
   }, []);
 

diff --git a/my-app/src/pages/data-insights/index.jsx b/my-app/src/pages/data-insights/index.jsx
@@ -2,8 +2,8 @@ import { useState } from "react";
 import CityMap from "@/components/visualizations/CityMapBox";
 import IslandBarChart from "@/components/visualizations/IslandBarChart";
 import PieChart from "@/components/visualizations/PieChart";
-
 import ReportTimesSeries from "@/components/visualizations/ReportTimeSeries";
+import OrganizationFunnel from "@/components/visualizations/OrganizationFunnel";
 
 const DataInsights = () => {
   const [activeTab, setActiveTab] = useState(0);
@@ -21,15 +21,57 @@ const DataInsights = () => {
           <h6 className="text-lg font-semibold text-gray-600 mb-4">
             Reports By Island
           </h6>
-          <h8 className="text-sm font-semibold text-gray-600 mb-2">Status of Reports</h8>
+          <h8 className="text-sm font-semibold text-gray-600 mb-2">
+            Status of Reports
+          </h8>
+          <IslandBarChart />
+          <br />
+          <h8 className="text-sm font-semibold text-gray-600 mb-2">
+            Percentage of Reports
+          </h8>
+          <PieChart />
+        </div>
+      </div>
+      <div className="flex pt-6 flex-row justify-between p-8 mt-4 shadow">
+        <div className="w-3/6">
+          <h6 className="text-lg font-semibold text-gray-600 mb-2">
+            Reports Solved by Organization Over Time
+          </h6>
+          <ReportTimesSeries />
+        </div>
+        <div className="w-3/6 pl-16">
+          <h6 className="text-lg font-semibold text-gray-600 mb-2">
+            Percetange of Reports Solved by Organization
+          </h6>
+          <OrganizationFunnel />
+        </div>
+      </div>
+    </div>,
+    <div key="tab2">
+      {" "}
+      <div className="flex pt-6 flex-row justify-between p-8 mt-4 shadow">
+        <div className="w-3/6">
+          <h6 className="text-lg font-semibold text-gray-600 mb-2">
+            Reports Solved by Organization Over Time
+          </h6>
+          <ReportTimesSeries />
+        </div>
+        <div className="w-3/6 pl-16">
+          <h6 className="text-lg font-semibold text-gray-600 mb-4">
+            Reports By Island
+          </h6>
+          <h8 className="text-sm font-semibold text-gray-600 mb-2">
+            Status of Reports
+          </h8>
           <IslandBarChart />
-          <br/>
-          <h8 className="text-sm font-semibold text-gray-600 mb-2">Percentage of Reports</h8>
+          <br />
+          <h8 className="text-sm font-semibold text-gray-600 mb-2">
+            Percentage of Reports
+          </h8>
           <PieChart />
         </div>
       </div>
     </div>,
-    <div key="tab2"><ReportTimesSeries/></div>,
     "Content for Tab 3 goes here.",
   ];