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:
Sylvia Crowe 2024-05-15 12:05:36 -07:00
parent 1290d56397
commit 1f85bfe944

View File

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