Try ChartJS instead

Author: Sinan-96

app/server.js

@@ -8,7 +8,7 @@ import {
   getCategoriesArray,
   addCategory,
 } from "./db.js";
-import QuickChart from "quickchart-js";
+import { ChartJSNodeCanvas } from "chartjs-node-canvas"; // Import Chart.js
 
 const { App, SocketModeReceiver } = pkg;
 dotenv.config();
@@ -20,6 +20,14 @@ const app = new App({
   }),
 });
 
+// Set up the ChartJSNodeCanvas instance
+const chartWidth = 800;
+const chartHeight = 400;
+const chartJSNodeCanvas = new ChartJSNodeCanvas({
+  width: chartWidth,
+  height: chartHeight,
+});
+
 app.command("/addcategory", async ({ command, ack, respond }) => {
   await ack(); // Acknowledge the command
 
@@ -95,7 +103,6 @@ app.event("message", async ({ event, client }) => {
   }
 });
 
-
 // Listen for when the user clicks the dropdown and fetch categories
 app.options(/category_select-.*/, async ({ options, ack }) => {
   try {
@@ -133,7 +140,7 @@ app.options(/category_select-.*/, async ({ options, ack }) => {
 });
 
 // Listen for the interaction from the dropdown menu
-app.action(/category_select-.*/, async ({ body, ack, say }) => {
+app.action(/category_select-.*/, async ({ body, ack }) => {
   // Acknowledge the action
   await ack();
   console.log("body", body);
@@ -156,7 +163,6 @@ app.command("/inc_stats", async ({ ack, body, client }) => {
   const dbResponse = await getIncs(numberOfDays);
 
   const totalIncs = dbResponse.rows.length;
-  
 
   const chartUrlByWeek = await generateIncByWeekChart(numberOfDays);
   const chartUrlByCategory = await generateIncByCategoryChart(numberOfDays);
@@ -184,7 +190,7 @@ app.command("/inc_stats", async ({ ack, body, client }) => {
           {
             type: "image",
             image_url: chartUrlByCategory,
-            alt_text: "Incidents per Week",
+            alt_text: "Incidents per Category",
           },
           {
             type: "image",
@@ -213,9 +219,8 @@ async function generateIncByWeekChart(numberOfDays) {
   );
   const data = incNumberByWeek.rows.map((row) => parseInt(row.count, 10));
 
-  // Generate the bar chart URL using QuickChart
-  const chart = new QuickChart();
-  chart.setConfig({
+  // Create the chart configuration
+  const chartConfig = {
     type: "line",
     data: {
       labels: labels,
@@ -236,11 +241,21 @@ async function generateIncByWeekChart(numberOfDays) {
         },
       },
     },
+  };
+
+
+  // Render the chart and get the image as JPEG
+  const imageBuffer = await chartJSNodeCanvas.renderToBuffer(chartConfig, {
+    format: 'jpeg', // Change format to JPEG
+    width: 400, // Set width
+    height: 200, // Set height
+    quality: 0.5, // Set quality (0 to 1)
   });
-  // Increase chart size
-  chart.setWidth(400);
-  chart.setHeight(200);
-  return chart.getShortUrl();
+  // Convert the image buffer to a base64 string
+  const imageBase64 = imageBuffer.toString('base64');
+  console.log("imageBase64", imageBase64.length);
+  // Return the URL for Slack (using a data URL)
+  return `data:image/png;base64,${imageBase64}`;
 }
 
 async function generateIncByCategoryChart(numberOfDays) {
@@ -250,9 +265,8 @@ async function generateIncByCategoryChart(numberOfDays) {
   const labels = sortedCategories.map((row) => row.category);
   const data = sortedCategories.map((row) => parseInt(row.count, 10));
 
-  // Generate the bar chart URL using QuickChart
-  const chart = new QuickChart();
-  chart.setConfig({
+  // Create the chart configuration
+  const chartConfig = {
     type: "bar",
     data: {
       labels: labels,
@@ -268,23 +282,31 @@ async function generateIncByCategoryChart(numberOfDays) {
     },
     options: {
       scales: {
-        xAxes: {
+        x: {
           ticks: {
-            max: labels.length, // Limit the number of labels to show
+            autoSkip: false, // Show all labels
+            maxTicksLimit: labels.length,
           },
         },
-        yAxes: {
-          ticks: {
-            beginAtZero: true, // Start the y-axis at 0
-            stepSize: 1, // Set the step size to 1
-          }
+        y: {
+          beginAtZero: true,
+          min: 0,
+          stepSize: 1,
         },
       },
     },
+  };
+
+  // Render the chart and get the image as JPEG
+  const imageBuffer = await chartJSNodeCanvas.renderToBuffer(chartConfig, {
+    format: 'jpeg', // Change format to JPEG
+    width: 400, // Set width
+    height: 200, // Set height
+    quality: 0.5, // Set quality (0 to 1)
   });
-
-  // Increase chart size
-  chart.setWidth(400);
-  chart.setHeight(200);
-  return chart.getShortUrl();
+  // Convert the image buffer to a base64 string
+  const imageBase64 = imageBuffer.toString('base64');
+  console.log("imageBase64", imageBase64.length);
+  // Return the URL for Slack (using a data URL)
+  return `data:image/png;base64,${imageBase64}`;
 }