Try out uPlot for new UI

Signed-off-by: Julius Volz <[email protected]>
Maniktherana · Jul 19, 2024 · d9520b1 · d9520b1
1 parent 9252826
commit d9520b1
Show file tree

Hide file tree

Showing 6 changed files with 1,169 additions and 419 deletions.
diff --git a/web/ui/mantine-ui/package.json b/web/ui/mantine-ui/package.json
@@ -30,13 +30,14 @@
     "@types/lodash": "^4.17.7",
     "@uiw/react-codemirror": "^4.21.22",
     "dayjs": "^1.11.10",
-    "echarts": "^5.5.1",
     "lodash": "^4.17.21",
     "react": "^18.2.0",
     "react-dom": "^18.2.0",
     "react-infinite-scroll-component": "^6.1.0",
     "react-redux": "^9.1.0",
-    "react-router-dom": "^6.22.1"
+    "react-router-dom": "^6.22.1",
+    "uplot": "^1.6.30",
+    "uplot-react": "^1.2.2"
   },
   "devDependencies": {
     "@types/react": "^18.2.55",

diff --git a/web/ui/mantine-ui/src/pages/query/EChart.tsx b/web/ui/mantine-ui/src/pages/query/EChart.tsx
diff --git a/web/ui/mantine-ui/src/pages/query/Graph.module.css b/web/ui/mantine-ui/src/pages/query/Graph.module.css
@@ -0,0 +1,11 @@
+.chartWrapper {
+  border: 1px solid
+    light-dark(var(--mantine-color-gray-3), var(--mantine-color-dark-5));
+  border-radius: var(--mantine-radius-default);
+}
+
+.uplotChart {
+  width: 100%;
+  height: 100%;
+  padding: 15px;
+}