add poly js surface chart

apps/backtest-report/components/Plot.jsx

@@ -0,0 +1,4 @@
+import plotly from 'plotly.js/dist/plotly';
+import createPlotComponent from 'react-plotly.js/factory';
+const Plot = createPlotComponent(plotly);
+export default Plot;

apps/backtest-report/next.config.js

@@ -8,10 +8,12 @@
 const withTM = require('next-transpile-modules')([
     'lightweight-charts',
     'fancy-canvas',
-    // 'd3-array',
-    // 'd3-format',
-    // 'd3-time',
-    // 'd3-time-format',
+    'd3',
+    'd3-array',
+    'd3-format',
+    'd3-time',
+    'd3-time-format',
+    'react-plotly.js',
     // 'react-financial-charts',
     // '@react-financial-charts/annotations',
     // '@react-financial-charts/axes',

apps/backtest-report/package.json

@@ -13,6 +13,7 @@
     "@mantine/core": "^4.2.5",
     "@mantine/hooks": "^4.2.5",
     "@mantine/next": "^4.2.5",
+    "d3": "^7.4.4",
     "d3-dsv": "^3.0.1",
     "d3-format": "^3.1.0",
     "d3-scale": "^4.0.2",
@@ -21,9 +22,12 @@
     "lightweight-charts": "^3.8.0",
     "moment": "^2.29.3",
     "next": "12.1.6",
+    "plotly.js": "^2.12.1",
+    "plotly.js-dist-min": "^2.12.1",
     "react": "18.1.0",
     "react-compound-slider": "^3.4.0",
     "react-dom": "18.1.0",
+    "react-plotly.js": "^2.5.1",
     "tabler-icons-react": "^1.48.0"
   },
   "devDependencies": {

apps/backtest-report/pages/metrics.tsx

@@ -0,0 +1,60 @@
+import type {NextPage} from 'next'
+import styles from '../styles/Home.module.css'
+import {useRouter} from "next/router";
+import {useEffect, useState} from "react";
+import dynamic from 'next/dynamic';
+
+import * as d3 from "d3";
+
+const DynamicPlot = dynamic(import('../components/Plot'), {
+  ssr: false
+})
+
+const Metrics: NextPage = () => {
+  const {query} = useRouter();
+  const basePath = query.basePath ? query.basePath as string : '/output';
+  const [zData, setZData] = useState();
+
+  useEffect(() => {
+    d3.csv('https://raw.githubusercontent.com/plotly/datasets/master/api_docs/mt_bruno_elevation.csv').then((rows) => {
+      function unpack(rows, key) {
+        return rows.map(function (row) {
+          return row[key];
+        });
+      }
+
+      let z_data = []
+      for (let i = 0; i < 24; i++) {
+        z_data.push(unpack(rows, i));
+      }
+      setZData(z_data);
+    });
+  }, [])
+
+  return (
+    <div>
+      <main className={styles.main}>
+        <DynamicPlot
+          data={[{
+            z: zData,
+            type: 'surface'
+          }]}
+          layout={{
+            title: 'Metrics',
+            autosize: true,
+            width: 800,
+            height: 500,
+            margin: {
+              l: 65,
+              r: 50,
+              b: 65,
+              t: 90,
+            }
+          }}
+        />
+      </main>
+    </div>
+  )
+}
+
+export default Metrics