Merge pull request #47 from ut-code/graph-layout

グラフのレイアウトを改善して、ダウンロードできるようにした

Author: tknkaa

desktop/frontend/src/lib/chart.ts

@@ -1,38 +1,72 @@
-import { type ChartConfiguration } from "chart.js";
+import { type ChartConfiguration, type Plugin } from "chart.js";
 
 type Vertex = {
   x: number;
   y: number;
 };
+
 export function setupPlot(values: number[]): ChartConfiguration {
-  const rawData: Vertex[] = [];
-  console.log(values);
+  const dataPoints: Vertex[] = [];
+
+  const xValues = []
+  const yValues = []
+
   for (let i = 0; i < values.length; i += 2) {
-    rawData.push({
-      x: values[i],
-      y: values[i + 1],
+    const x = values[i];
+    const y = values[i + 1];
+    xValues.push(x)
+    yValues.push(y)
+    dataPoints.push({
+      x,
+      y,
     });
   }
+  
+  xValues.sort()
+  yValues.sort()
+  const xRange = xValues[xValues.length - 1] - xValues[0]
+  const yRange = yValues[yValues.length - 1] - yValues[0]
+  const marginRatio = 0.1
+  const xAxisMax = xValues[xValues.length - 1] + xRange * marginRatio 
+  const xAxisMin = xValues[0] - xRange * marginRatio
+  const yAxisMax = yValues[yValues.length - 1] + yRange * marginRatio 
+  const yAxisMin = yValues[0] - yRange * marginRatio
   const data = {
     datasets: [
       {
         label: "Scatter Dataset",
-        data: rawData,
+        data: dataPoints,
         backgroundColor: "white",
         borderColor: "black",
       },
     ],
   };
 
+  const plugin: Plugin = {
+  id: 'customCanvasBackgroundColor',
+  beforeDraw: (chart, args, options) => {
+    const {ctx} = chart;
+    ctx.save();
+    ctx.globalCompositeOperation = 'destination-over';
+    ctx.fillStyle = options.color || '#FFFFFF';
+    ctx.fillRect(0, 0, chart.width, chart.height);
+    ctx.restore();
+  }
+};
   const config: ChartConfiguration = {
     type: "scatter",
     data: data,
+    plugins: [plugin],
     options: {
       scales: {
         x: {
-          type: "linear",
-          position: "bottom",
+          max: xAxisMax,
+          min: xAxisMin
         },
+        y: {
+          max: yAxisMax,
+          min: yAxisMin
+        }
       },
     },
   };

desktop/frontend/src/lib/components/Chart.svelte

@@ -66,13 +66,23 @@
     }
     return false;
   }
+  function exportImage() {
+    const imageData = canvasRef.toDataURL("image/png");
+    const link = document.createElement("a");
+    link.href = imageData;
+    link.download = `chart-${new Date().getTime()}.png`;
+    link.click();
+  }
 </script>
 
 <dialog class="modal" bind:this={dialogRef}>
-  <div class="relative h-96 w-128">
-    <form method="dialog">
-      <button class="btn">Close</button>
-    </form>
+  <div class="modal-box">
+    <button aria-label="export as image" class="btn btn-sm absolute top-2 right-6" onclick={exportImage}>
+      <svg class="w-5 h-5" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg"><g id="SVGRepo_bgCarrier" stroke-width="0"></g><g id="SVGRepo_tracerCarrier" stroke-linecap="round" stroke-linejoin="round"></g><g id="SVGRepo_iconCarrier"> <path d="M5.25589 16C3.8899 15.0291 3 13.4422 3 11.6493C3 9.20008 4.8 6.9375 7.5 6.5C8.34694 4.48637 10.3514 3 12.6893 3C15.684 3 18.1317 5.32251 18.3 8.25C19.8893 8.94488 21 10.6503 21 12.4969C21 14.0582 20.206 15.4339 19 16.2417M12 21V11M12 21L9 18M12 21L15 18" stroke="#000000" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"></path> </g></svg>
+    </button>
     <canvas bind:this={canvasRef} class="bg-white"></canvas>
   </div>
+    <form method="dialog" class="modal-backdrop">
+      <button>close</button>
+    </form>
 </dialog>