Chart for incs by categories over weeks

Author: Sinan-96

app/db.js

@@ -117,6 +117,39 @@ export async function getIncNumberByWeek(numberOfDaysAgo) {
   return await client.query(queryText);
 }
 
+export async function getIncCountForCategoryByWeek(category, numberOfDaysAgo) {
+  let queryText;
+
+  if (numberOfDaysAgo === undefined) {
+    queryText = `
+      SELECT DATE_TRUNC('week', created_at) AS week, COUNT(*) AS count
+      FROM incs
+      WHERE category = $1
+      GROUP BY week
+      ORDER BY week;
+    `;
+  } else {
+    // Calculate the date range
+    const dateAgo = new Date();
+    dateAgo.setDate(dateAgo.getDate() - numberOfDaysAgo);
+    const formattedDateAgo = dateAgo.toISOString(); // ISO8601 format
+
+    // Construct the SQL query with parameterized query
+    queryText = {
+      text: `
+        SELECT DATE_TRUNC('week', created_at) AS week, COUNT(*) AS count
+        FROM incs
+        WHERE category = $1 AND created_at >= $2
+        GROUP BY week
+        ORDER BY week;
+      `,
+      values: [category, formattedDateAgo],
+    };
+  }
+
+  return await client.query(queryText);
+}
+
 export async function getCategoriesArray() {
   try {
     const result = await client.query("SELECT name FROM categories");

app/server.js

@@ -7,6 +7,7 @@ import {
   getIncByCategory,
   getCategoriesArray,
   addCategory,
+  getIncCountForCategoryByWeek
 } from "./db.js";
 import QuickChart from "quickchart-js";
 
@@ -175,13 +176,26 @@ app.command("/inc_stats", async ({ ack, body, client }) => {
   const chartUrlByWeek = await generateIncByWeekChart(numberOfDays);
   const chartUrlByCategory = await generateIncByCategoryChart(numberOfDays);
 
+  const categories = await getCategoriesArray();
+
+
+  // Format the options
+  const categoryOptions = categories.map((category) => ({
+    text: {
+      type: "plain_text",
+      text: category,
+    },
+    value: category,
+  }));
+
   // Post a response in the channel where the command was invoked
   try {
     await client.views.open({
       trigger_id: body.trigger_id,
       view: {
         type: "modal",
         callback_id: "inc_stats_modal",
+        private_metadata: JSON.stringify({ numberOfDays }), // Store the number of days in the metadata
         title: {
           type: "plain_text",
           text: `Inc stats ${numberOfDays ? `siste ${numberOfDays} dager` : ""}`,
@@ -205,6 +219,23 @@ app.command("/inc_stats", async ({ ack, body, client }) => {
             image_url: chartUrlByWeek,
             alt_text: "Incidents per Week",
           },
+          {
+            type: "input",
+            block_id: "category_select",
+            element: {
+              type: "static_select",
+              action_id: "category_select_modal",
+              placeholder: {
+                type: "plain_text",
+                text: "Select a category",
+              },
+              options: categoryOptions,
+            },
+            label: {
+              type: "plain_text",
+              text: "Category",
+            },
+          },
         ],
       },
     });
@@ -213,6 +244,64 @@ app.command("/inc_stats", async ({ ack, body, client }) => {
   }
 });
 
+app.action("category_select_modal", async ({ ack, body, client }) => {
+  await ack();
+
+  const selectedCategory = body.actions[0].selected_option.value;
+  const numberOfDays = body?.view?.metadata?.numberOfDays;
+  const chartUrl = await generateIncByCategoryOverWeeksChart(selectedCategory, numberOfDays);
+
+  try {
+    await client.views.update({
+      view_id: body.view.id,
+      view: {
+        type: "modal",
+        callback_id: "inc_stats_modal",
+        private_metadata: JSON.stringify({ numberOfDays }), // Store the number of days in the metadata
+        title: {
+          type: "plain_text",
+          text: "Inc stats",
+        },
+        blocks: [
+          ...body.view.blocks.filter(block => block.block_id !== "chart_block_category_by_week"),
+          {
+            type: "input",
+            block_id: "category_select",
+            element: {
+              type: "static_select",
+              action_id: "category",
+              placeholder: {
+                type: "plain_text",
+                text: "Select a category",
+              },
+              options: body.view.blocks[0].element.options,
+              initial_option: {
+                text: {
+                  type: "plain_text",
+                  text: selectedCategory,
+                },
+                value: selectedCategory,
+              },
+            },
+            label: {
+              type: "plain_text",
+              text: "Category",
+            },
+          },
+          {
+            type: "image",
+            block_id: "chart_block_category_by_week",
+            image_url: chartUrl,
+            alt_text: "Incidents per Week",
+          },
+        ],
+      },
+    });
+  } catch (error) {
+    console.error("Error updating modal:", error);
+  }
+});
+
 (async () => {
   await app.start(process.env.PORT || 3000);
   console.log("⚡️ Bolt app started");
@@ -301,3 +390,44 @@ async function generateIncByCategoryChart(numberOfDays) {
   console.log("url", chart.getUrl());
   return chart.getUrl();
 }
+
+async function generateIncByCategoryOverWeeksChart(category, numberOfDays) {
+  const dbResponse = await getIncCountForCategoryByWeek(category, numberOfDays);
+
+  const labels = dbResponse.rows.map((row) => row.category);
+  const data = dbResponse.rows.map((row) => parseInt(row.count, 10));
+
+  // Generate the bar chart URL using QuickChart
+  const chart = new QuickChart();
+  chart.setConfig({
+    type: "line",
+    data: {
+      labels: labels,
+      datasets: [
+        {
+          label: `Incidents for ${category}`,
+          data: data,
+          backgroundColor: "rgba(75, 192, 192, 0.2)",
+          borderColor: "rgba(75, 192, 192, 1)",
+          borderWidth: 1,
+        },
+      ],
+    },
+    options: {
+      scales: {
+        yAxes: [{
+          ticks: {
+            beginAtZero: true,
+            min: 0,
+            stepSize: 1,
+            precision: 0
+          }
+        }]
+      }
+    }
+  });
+  chart.setWidth(800);
+  chart.setHeight(400);
+  console.log("url", chart.getUrl());
+  return chart.getUrl();
+}