From 59086b5002b07491f42e4f13ec0968db84c6951d Mon Sep 17 00:00:00 2001
From: dutexion <dutexion@gmail.com>
Date: Wed, 7 Aug 2024 23:32:22 +0900
Subject: [PATCH] create :: error graph

---
 src/components/graph/TraceErrorGraph.tsx | 67 ++++++++++++++++++++++++
 1 file changed, 67 insertions(+)
 create mode 100644 src/components/graph/TraceErrorGraph.tsx

diff --git a/src/components/graph/TraceErrorGraph.tsx b/src/components/graph/TraceErrorGraph.tsx
new file mode 100644
index 0000000..269268a
--- /dev/null
+++ b/src/components/graph/TraceErrorGraph.tsx
@@ -0,0 +1,67 @@
+import React, { useEffect, useRef } from 'react';
+import Plotly from 'plotly.js-dist-min';
+
+interface DataPoint {
+  [timestamp: string]: string;
+}
+
+interface JsonData {
+  [key: string]: DataPoint;
+}
+
+interface PlotlyChartProps {
+  jsonData: JsonData;
+}
+
+export const TraceErrorGraph: React.FC<PlotlyChartProps> = ({ jsonData }) => {
+  const chartRef = useRef<HTMLDivElement>(null);
+
+  useEffect(() => {
+    if (chartRef.current && jsonData['1']) {
+      const timestamps = Object.keys(jsonData['1']).map((ts) => ts.substring(11, 16));
+      const values = Object.values(jsonData['1']).map(Number);
+
+      const trace = {
+        x: timestamps,
+        y: values,
+        type: 'bar' as const,
+        marker: {
+          color: 'rgba(204, 23, 29, 1)',
+        },
+      };
+
+      const layout: Partial<Plotly.Layout> = {
+        width: 428,
+        height: 180,
+        margin: {
+          l: 30,
+          r: 30,
+          t: 20,
+          b: 40,
+        },
+        xaxis: {
+          title: '',
+          fixedrange: true,
+          tickvals: timestamps.filter((_, i) => i % Math.ceil(timestamps.length / 4) === 0),
+          ticktext: timestamps.filter((_, i) => i % Math.ceil(timestamps.length / 4) === 0),
+        },
+        yaxis: {
+          title: '',
+          fixedrange: true,
+        },
+        dragmode: false as const,
+        hovermode: false as const,
+      };
+
+      const config: Partial<Plotly.Config> = {
+        displayModeBar: false,
+        staticPlot: true,
+        scrollZoom: false,
+      };
+
+      Plotly.newPlot(chartRef.current, [trace], layout, config);
+    }
+  }, [jsonData]);
+
+  return <div ref={chartRef} />;
+};