Upgrade chart.js

4 files changed, 42 insertions, 65 deletions

diff --git a/src/misc/chart-lib.ts b/src/misc/chart-lib.ts
new file mode 100644
index 0000000..9a2bf35
--- /dev/null
+++ b/src/misc/chart-lib.ts
@@ -0,0 +1,23 @@
+import {
+  CategoryScale,
+  Chart,
+  Filler,
+  Legend,
+  LinearScale,
+  LineController,
+  LineElement,
+  PointElement,
+} from 'chart.js';
+
+// see https://www.chartjs.org/docs/latest/getting-started/integration.html#bundlers-webpack-rollup-etc
+Chart.register(
+  LineElement,
+  PointElement,
+  LineController,
+  CategoryScale,
+  LinearScale,
+  Filler,
+  Legend
+);
+
+export { Chart };
diff --git a/src/misc/chart.ts b/src/misc/chart.ts
index 9e2c459..a6ee82e 100644
--- a/src/misc/chart.ts
+++ b/src/misc/chart.ts
@@ -1,71 +1,36 @@
 import { unstable_createResource as createResource } from '@hsjs/react-cache';
 
 import prettyBytes from './pretty-bytes';
-
 export const chartJSResource = createResource(() => {
-  return import(
-    /* webpackChunkName: "chartjs" */
-    /* webpackPrefetch: true */
-    /* webpackPreload: true */
-    'chart.js/dist/Chart.min.js'
-  ).then((c) => c.default);
+  return import('$src/misc/chart-lib');
 });
 
-export const commonDataSetProps = {
-  borderWidth: 1,
-  lineTension: 0,
-  pointRadius: 0,
-};
+export const commonDataSetProps = { borderWidth: 1, pointRadius: 0, tension: 0.2, fill: true };
 
-export const commonChartOptions = {
+export const commonChartOptions: import('chart.js').ChartOptions<'line'> = {
   responsive: true,
   maintainAspectRatio: true,
-  title: {
-    display: false,
-  },
-  legend: {
-    display: true,
-    position: 'top',
-    labels: {
-      fontColor: '#ccc',
-      boxWidth: 20,
-    },
-  },
-  tooltips: {
-    enabled: false,
-    mode: 'index',
-    intersect: false,
-    animationDuration: 100,
-  },
-  hover: {
-    mode: 'nearest',
-    intersect: true,
+  plugins: {
+    legend: { labels: { boxWidth: 20 } }
   },
   scales: {
-    xAxes: [
-      {
-        display: false,
-        gridLines: {
-          display: false,
-        },
-      },
-    ],
-    yAxes: [
-      {
+    x: { display: false, type: 'category' },
+    y: {
+      type: 'linear',
+      display: true,
+      grid: {
         display: true,
-        gridLines: {
-          display: true,
-          color: '#555',
-          borderDash: [3, 6],
-          drawBorder: false,
-        },
-        ticks: {
-          callback(value) {
-            return prettyBytes(value) + '/s ';
-          },
+        color: '#555',
+        drawTicks: false,
+        borderDash: [3, 6],
+        drawBorder: false,
+      },
+      ticks: {
+        callback(value: number) {
+          return prettyBytes(value) + '/s ';
         },
       },
-    ],
+    },
   },
 };
 
diff --git a/src/misc/constants.ts b/src/misc/constants.ts
deleted file mode 100644
index 5c66350..0000000
--- a/src/misc/constants.ts
+++ /dev/null
@@ -1 +0,0 @@
-// const ProxySortingOptions =
diff --git a/src/misc/sentry.ts b/src/misc/sentry.ts
deleted file mode 100644
index efedcb3..0000000
--- a/src/misc/sentry.ts
+++ /dev/null
@@ -1,10 +0,0 @@
-const dsn = 'https://[email protected]/1359284';
-let Sentry;
-export async function getSentry() {
-  if (Sentry) return Sentry;
-  const s = await import('@sentry/browser');
-  s.init({ dsn });
-  // eslint-disable-next-line require-atomic-updates
-  Sentry = s;
-  return Sentry;
-}