add bar charts for report/islands

my-app/src/components/visualizations/CityMap.jsx → my-app/src/components/visualizations/CityMapBox.jsx

@@ -58,7 +58,11 @@ const CityMapBox = () => {
         },
       };
 
-      Plotly.newPlot("CityMapBox", [trace], layout, { showLink: false });
+      const config = { displaylogo: false, modeBarButtonsToRemove: ['zoom2d', 'pan2d', 'select2d', 'lasso2d', 'zoomIn2d', 'zoomOut2d', 'autoScale2d', 'resetScale2d', 'hoverClosestCartesian', 'hoverCompareCartesian', 'toggleSpikelines', 'hoverClosestGl2d', 'hoverClosestPie', 'toggleHover', 'resetViews', 'toggleSpikeLines'] };
+
+
+
+      Plotly.newPlot("CityMapBox", [trace], layout, config);
 
       document.getElementById('CityMapBox').on('plotly_click', (eventData) => {
         if (eventData && eventData.points && eventData.points.length > 0) {

my-app/src/components/visualizations/IslandBarChart.jsx

@@ -0,0 +1,42 @@
+import { useEffect } from 'react';
+
+const IslandBarChart = () => {
+  useEffect(() => {
+    import('plotly.js-dist').then((Plotly) => {
+      const xValues = ['Big Island', 'Kauai', 'Lanai', 'Maui', 'Molokai', 'Oahu'];
+      const yTrace1 = [20, 14, 23, 34, 5, 20];
+      const yTrace2 = [2, 4, 7, 6, 2, 10];
+
+      const trace1Color = 'rgb(50, 130, 180)';
+      const trace2Color = 'rgb(200, 100, 0)';
+
+      const trace1 = {
+        x: xValues,
+        y: yTrace1,
+        name: 'Removed',
+        type: 'bar',
+        marker: { color: trace1Color },
+      };
+
+      const trace2 = {
+        x: xValues,
+        y: yTrace2,
+        name: 'Not Removed',
+        type: 'bar',
+        marker: { color: trace2Color },
+      };
+
+      const data = [trace1, trace2];
+
+      const layout = {
+        barmode: 'group',
+      };
+
+      Plotly.newPlot('islandBarChart', data, layout, {displayModeBar: false});
+    });
+  }, []);
+
+  return <div id="islandBarChart" />;
+};
+
+export default IslandBarChart;

my-app/src/components/visualizations/ReportTimeSeries.jsx

@@ -0,0 +1,97 @@
+import { useEffect } from "react";
+
+const ReporTimesSeries = () => {
+  useEffect(() => {
+    import("plotly.js-dist").then((Plotly) => {
+      const data = [
+        {
+          Month: "2015-02",
+          "Organization1": 130.0,
+          "Organization2": 120.0,
+        },
+        {
+          Month: "2015-03",
+          "Organization1": 135.0,
+          "Organization2": 125.0,
+        },
+        {
+          Month: "2015-04",
+          "Organization1": 140.0,
+          "Organization2": 130.0,
+        },
+        // Continue with the next months
+        {
+          Month: "2017-01",
+          "Organization1": 150.0,
+          "Organization2": 140.0,
+        },
+        {
+          Month: "2017-02",
+          "Organization1": 160.0,
+          "Organization2": 150.0,
+        },
+      ];
+
+      function unpack(rows, key) {
+        return rows.map((row) => row[key]);
+      }
+
+      const trace1 = {
+        type: "scatter",
+        mode: "lines",
+        name: "Organization 2",
+        x: unpack(data, "Month"),
+        y: unpack(data, "Organization1"),
+        line: { color: "#17BECF" },
+      };
+
+      const trace2 = {
+        type: "scatter",
+        mode: "lines",
+        name: "Organization 1",
+        x: unpack(data, "Month"),
+        y: unpack(data, "Organization2"),
+        line: { color: "#7F7F7F" },
+      };
+
+      const chartData = [trace1, trace2];
+
+      const layout = {
+        xaxis: {
+          autorange: true,
+          range: ["2015-02-17", "2017-02-16"],
+          rangeselector: {
+            buttons: [
+              {
+                count: 6,
+                label: "6m",
+                step: "month",
+                stepmode: "backward",
+              },
+              {
+                count: 12,
+                label: "1y",
+                step: "month",
+                stepmode: "backward",
+              },
+              { step: "all" },
+            ],
+          },
+          rangeslider: { range: ["2015-02", "2017-02"] },
+          type: "date",
+          tickformat: "%Y-%m",
+        },
+        yaxis: {
+          autorange: true,
+          type: "linear",
+        },
+      };
+
+      Plotly.newPlot("reportTimeSeries", chartData, layout);
+    });
+  }, []);
+
+  return <div id="reportTimeSeries"></div>;
+};
+
+export default ReporTimesSeries;

my-app/src/pages/data-insights/index.jsx

@@ -1,6 +1,24 @@
+import CityMap from "@/components/visualizations/CityMapBox";
+import ReportTimesSeries from "@/components/visualizations/ReportTimeSeries";
+import IslandBarChart from "@/components/visualizations/IslandBarChart";
+import { useState } from "react";
 
-import CityMap from "@/components/visualizations/CityMap";
 const DataInsights = () => {
+  const [activeTab, setActiveTab] = useState(0);
+
+  const tabContent = [
+    <div key="tab1">
+      <h5 className="text-xl font-semibold text-gray-600 mb-2">Reports By City</h5>
+      <CityMap />
+      <IslandBarChart />
+    </div>,
+    <div key="tab2">
+      <ReportTimesSeries />
+    </div>,
+    "Content for Tab 3 goes here.",
+  ];
+
+  const tabNames = ["Reported", "Removal", "Sorting & Disposal"];
 
   return (
     <div className="justify-center items-center">
@@ -9,8 +27,22 @@ const DataInsights = () => {
           Data Insights
         </h3>
         <hr />
-        <CityMap />
+        <br />
 
+        <div className="tabs">
+          {tabContent.map((content, index) => (
+            <a
+              key={index}
+              className={`tab tab-bordered text-gray-600 ${
+                activeTab === index ? "tab-active" : ""
+              }`}
+              onClick={() => setActiveTab(index)}
+            >
+              {tabNames[index]}
+            </a>
+          ))}
+        </div>
+        <div className="tab-content p-4">{tabContent[activeTab]}</div>
       </div>
     </div>
   );