mirror of
https://github.com/wavetermdev/waveterm.git
synced 2024-12-22 16:48:23 +01:00
fix: remove hardcoded data state
This adds an example that works to load in data properly without the hard-coded data
This commit is contained in:
parent
1290d56397
commit
1f85bfe944
@ -10,18 +10,35 @@ function PlotConfig() {
|
|||||||
return <input type="text" className="plot-config" />;
|
return <input type="text" className="plot-config" />;
|
||||||
}
|
}
|
||||||
|
|
||||||
|
const AsyncFunction = Object.getPrototypeOf(async function () {}).constructor;
|
||||||
|
|
||||||
|
function evalAsync(Plot: any, d3: any, funcText: string): Promise<unknown> {
|
||||||
|
return new Promise((resolve, reject) => {
|
||||||
|
new AsyncFunction(
|
||||||
|
"resolve",
|
||||||
|
"reject",
|
||||||
|
"Plot",
|
||||||
|
"d3",
|
||||||
|
`try { await ${funcText}; resolve(); } catch(e) { reject(e); } }`
|
||||||
|
)(resolve, reject, Plot, d3);
|
||||||
|
});
|
||||||
|
}
|
||||||
|
|
||||||
function PlotBlock() {
|
function PlotBlock() {
|
||||||
const containerRef = React.useRef<HTMLInputElement>();
|
const containerRef = React.useRef<HTMLInputElement>();
|
||||||
const [plotDef, setPlotDef] = React.useState<string>();
|
const [plotDef, setPlotDef] = React.useState<string>();
|
||||||
|
/*
|
||||||
const [data, setData] = React.useState();
|
const [data, setData] = React.useState();
|
||||||
|
|
||||||
React.useEffect(() => {
|
React.useEffect(() => {
|
||||||
d3.csv("/plotdata/congress.csv", d3.autoType).then(setData);
|
d3.csv("/plotdata/congress.csv", d3.autoType).then(setData);
|
||||||
}, []);
|
}, []);
|
||||||
|
*/
|
||||||
|
|
||||||
React.useEffect(() => {
|
React.useEffect(() => {
|
||||||
// replace start
|
// replace start
|
||||||
/*
|
/*
|
||||||
|
d3.csv("/plotdata/congress.csv", d3.autoType).then((out) => data = out)
|
||||||
return Plot.plot({
|
return Plot.plot({
|
||||||
aspectRatio: 1,
|
aspectRatio: 1,
|
||||||
x: { label: "Age (years)" },
|
x: { label: "Age (years)" },
|
||||||
@ -50,7 +67,9 @@ function PlotBlock() {
|
|||||||
let plotErr;
|
let plotErr;
|
||||||
try {
|
try {
|
||||||
console.log(plotDef);
|
console.log(plotDef);
|
||||||
plot = new Function("Plot", "data", plotDef)(Plot, data);
|
plot = new Function("Plot", "d3", plotDef)(Plot, d3);
|
||||||
|
//plot = new Function("Plot", "data", "d3", plotDef)(Plot, data, d3);
|
||||||
|
//evalAsync(Plot, d3, plotDef).then((out) => (plot = out));
|
||||||
} catch (e) {
|
} catch (e) {
|
||||||
plotErr = e;
|
plotErr = e;
|
||||||
console.log("error: ", e);
|
console.log("error: ", e);
|
||||||
@ -69,7 +88,7 @@ function PlotBlock() {
|
|||||||
plot.remove();
|
plot.remove();
|
||||||
}
|
}
|
||||||
};
|
};
|
||||||
}, [data, plotDef]);
|
}, [plotDef]);
|
||||||
|
|
||||||
return (
|
return (
|
||||||
<div className="plot-block">
|
<div className="plot-block">
|
||||||
|
Loading…
Reference in New Issue
Block a user