add poly js surface chart

This commit is contained in:
c9s 2022-07-06 14:12:05 +08:00
parent b643b8ed0d
commit a852411e01
No known key found for this signature in database
GPG Key ID: 7385E7E464CB0A54
5 changed files with 2097 additions and 39 deletions

View File

@ -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;

View File

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

View File

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

View File

@ -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

File diff suppressed because it is too large Load Diff