From e667125ef44314b511e35bd57e54a5a315d6f478 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Anders=20Fredrik=20Ki=C3=A6r?=
 <31612826+anders-kiaer@users.noreply.github.com>
Date: Tue, 17 Oct 2023 07:19:29 +0000
Subject: [PATCH] Change time series module previews

---
 .../modules/SimulationTimeSeries/preview.svg  |  6 +++
 .../modules/SimulationTimeSeries/preview.tsx  | 33 +------------
 .../SimulationTimeSeriesMatrix/preview.svg    |  9 ++++
 .../SimulationTimeSeriesMatrix/preview.tsx    | 46 +------------------
 4 files changed, 19 insertions(+), 75 deletions(-)
 create mode 100644 frontend/src/modules/SimulationTimeSeries/preview.svg
 create mode 100644 frontend/src/modules/SimulationTimeSeriesMatrix/preview.svg

diff --git a/frontend/src/modules/SimulationTimeSeries/preview.svg b/frontend/src/modules/SimulationTimeSeries/preview.svg
new file mode 100644
index 000000000..5a78c8a3e
--- /dev/null
+++ b/frontend/src/modules/SimulationTimeSeries/preview.svg
@@ -0,0 +1,6 @@
+<svg xmlns="http://www.w3.org/2000/svg" preserveAspectRatio="none" viewBox="0 0 145.6 65.1">
+  <path fill="none" stroke="#000" stroke-width=".3" d="M0 0v65h146"/>
+  <path fill="#004eff" fill-opacity=".3" fill-rule="evenodd" d="M146 0c-1 2-18 12-21 14l-8 6-11 5-9 2-15 5-9 3c-9 4-16 10-24 15-8 4-17 2-25 4L9 60c-3 1-7 2-9 5l42-7h10l15-4 23-5 13-4 7-2 11-4 9-3 8-2 8-4z"/>
+  <path fill="#004eff" fill-opacity=".3" fill-rule="evenodd" d="M146 0c0 7-6 9-9 11l-13 9-13 6-9 4c-6 1-8 3-13 5l-13 3-22 12c-7 4-18 4-26 6-5 1-11 1-16 4-3 1-10 2-12 5l42-9c10 0 18-4 27-6l23-5 11-4 10-3 11-5c13-2 15-9 22-13z"/>
+  <path fill="none" stroke="#0333ff" stroke-width=".3" d="m0 65 5-2 18-5 12-2c12-3 15-1 19-3l15-6 14-5 15-4c9-3 18-6 24-11l8-4 16-9"/>
+</svg>
\ No newline at end of file
diff --git a/frontend/src/modules/SimulationTimeSeries/preview.tsx b/frontend/src/modules/SimulationTimeSeries/preview.tsx
index 51231bf8b..eb2960245 100644
--- a/frontend/src/modules/SimulationTimeSeries/preview.tsx
+++ b/frontend/src/modules/SimulationTimeSeries/preview.tsx
@@ -1,35 +1,6 @@
 import { DrawPreviewFunc } from "@framework/Preview";
+import previewImg from "./preview.svg";
 
 export const preview: DrawPreviewFunc = function (width: number, height: number) {
-    const paths: { x1: number; y1: number; x2: number; y2: number; x3: number; y3: number; xc: number; yc: number }[] =
-        [];
-    const numPaths = 10;
-    for (let i = 0; i < numPaths; i++) {
-        const x1 = 0;
-        const y1 = height - (i / numPaths) * height;
-        const x2 = width / 2;
-        const y2 = height - ((i - 1) / numPaths) * height;
-        const x3 = width;
-        const y3 = height - (((i - 1) / numPaths) * height) / 1.2;
-        const xc = width / 4;
-        const yc = height - (i / numPaths) * height - height / 12;
-        paths.push({ x1, y1, x2, y2, x3, y3, xc, yc });
-    }
-    return (
-        <svg width={width} height={height} viewBox={`0 0 ${width} ${height}`}>
-            <path d={`M 0 ${height} L 0 0`} stroke="black" strokeWidth={1} />
-            <path d={`M 0 ${height} L ${width} ${height}`} stroke="black" strokeWidth={1} />
-            {paths.map((path, index) => {
-                return (
-                    <path
-                        key={index}
-                        d={`M ${path.x1} ${path.y1} Q ${path.xc} ${path.yc} ${path.x2} ${path.y2} T ${path.x3} ${path.y3}`}
-                        fill="none"
-                        stroke="green"
-                        strokeWidth={1}
-                    />
-                );
-            })}
-        </svg>
-    );
+   return <img src={previewImg} style={{width, height}} />
 };
diff --git a/frontend/src/modules/SimulationTimeSeriesMatrix/preview.svg b/frontend/src/modules/SimulationTimeSeriesMatrix/preview.svg
new file mode 100644
index 000000000..f87d9840c
--- /dev/null
+++ b/frontend/src/modules/SimulationTimeSeriesMatrix/preview.svg
@@ -0,0 +1,9 @@
+<svg xmlns="http://www.w3.org/2000/svg" preserveAspectRatio="none" viewBox="0 0 145.6 65.1">
+  <path fill="none" stroke="#000" stroke-width=".3" d="M0 0v65h146"/>
+  <path fill="#004eff" fill-opacity=".3" fill-rule="evenodd" d="M146 0c-1 2-18 12-21 14l-8 6-11 5-9 2-15 5-9 3c-9 4-16 10-24 15-8 4-17 2-25 4L9 60c-3 1-7 2-9 5l42-7h10l15-4 23-5 13-4 7-2 11-4 9-3 8-2 8-4z"/>
+  <path fill="#004eff" fill-opacity=".3" fill-rule="evenodd" d="M146 0c0 7-6 9-9 11l-13 9-13 6-9 4c-6 1-8 3-13 5l-13 3-22 12c-7 4-18 4-26 6-5 1-11 1-16 4-3 1-10 2-12 5l42-9c10 0 18-4 27-6l23-5 11-4 10-3 11-5c13-2 15-9 22-13z"/>
+  <path fill="none" stroke="#0333ff" stroke-width=".3" d="m0 65 5-2 18-5 12-2c12-3 15-1 19-3l15-6 14-5 15-4c9-3 18-6 24-11l8-4 16-9"/>
+  <path fill="#0aa900" fill-opacity=".3" fill-rule="evenodd" d="M146 0c-17 6-38 7-52 13l-17 3-18 6c-3 1-11 2-14 4-9 4-7 8-15 12-7 5-8 12-16 14-5 1-4 8-9 11-3 1-3-1-5 2 14-3 22-14 36-16 4-1 12-9 21-11l21-6 22-5a414 414 0 0 1 37-8l9-1V0z"/>
+  <path fill="#0aa900" fill-opacity=".3" fill-rule="evenodd" d="M146 2c-4 3-5 2-8 3-5 1-12 1-14 3-4 2-10 1-13 3l-14 5c-6 1-12 1-17 3-3 1-18 4-21 6l-15 6c-7 4-9 8-14 13L13 56s-3 6-13 9c17-7 28-17 36-20l11-9 22-7c4-1 17-4 23-7l20-3c3-2 13-3 16-4l18-1z"/>
+  <path fill="none" stroke="#077500" stroke-width=".3" d="m0 65 8-4c6-1 5-5 15-9l15-13c9-8 19-8 22-10l17-6 23-5 14-4c11-4 25-3 32-6"/>
+</svg>
diff --git a/frontend/src/modules/SimulationTimeSeriesMatrix/preview.tsx b/frontend/src/modules/SimulationTimeSeriesMatrix/preview.tsx
index d61301c73..eb2960245 100644
--- a/frontend/src/modules/SimulationTimeSeriesMatrix/preview.tsx
+++ b/frontend/src/modules/SimulationTimeSeriesMatrix/preview.tsx
@@ -1,48 +1,6 @@
 import { DrawPreviewFunc } from "@framework/Preview";
+import previewImg from "./preview.svg";
 
 export const preview: DrawPreviewFunc = function (width: number, height: number) {
-    const paths: {
-        x1: number;
-        y1: number;
-        x2: number;
-        y2: number;
-        x3: number;
-        y3: number;
-        xc: number;
-        yc: number;
-        color: string;
-    }[] = [];
-    const numPaths = 9;
-    for (let i = 0; i < numPaths; i++) {
-        const x1 = 0;
-        const y1 = height - (i / numPaths) * height;
-        const x2 = width / 2;
-        const y2 = height - ((i - 1) / numPaths) * height;
-        const x3 = width;
-        const y3 = height - (((i - 1) / numPaths) * height) / 1.2;
-        const xc = width / 4;
-        const yc = height - (i / numPaths) * height - height / 12;
-
-        // Assign colors based on position
-        const color = i < 3 ? "green" : i < 6 ? "red" : "blue";
-
-        paths.push({ x1, y1, x2, y2, x3, y3, xc, yc, color });
-    }
-    return (
-        <svg width={width} height={height} viewBox={`0 0 ${width} ${height}`}>
-            <path d={`M 0 ${height} L 0 0`} stroke="black" strokeWidth={1} />
-            <path d={`M 0 ${height} L ${width} ${height}`} stroke="black" strokeWidth={1} />
-            {paths.map((path, index) => {
-                return (
-                    <path
-                        key={index}
-                        d={`M ${path.x1} ${path.y1} Q ${path.xc} ${path.yc} ${path.x2} ${path.y2} T ${path.x3} ${path.y3}`}
-                        fill="none"
-                        stroke={path.color} // Set stroke color
-                        strokeWidth={1}
-                    />
-                );
-            })}
-        </svg>
-    );
+   return <img src={previewImg} style={{width, height}} />
 };