import React from "react"; import CircularProgress from "@material-ui/core/CircularProgress"; import { ScatterChart, Scatter, XAxis, YAxis, ZAxis, CartesianGrid, Tooltip, Legend, Label, ComposedChart, Line, ResponsiveContainer, } from "recharts"; import { useModelState } from "state/ModelState"; import LoadingComponent from "./LoadingComponent"; import { useState } from "state/State"; import { SampleDataset } from "state/StateTypes"; function compareX(a, b) { return a.x - b.x; } export default function PlotLinReg() { const { model_state } = useModelState(); const { linreg_test_result, linreg_test_set } = model_state; const { state } = useState(); const data = []; linreg_test_set.map((point, index) => { if (linreg_test_result[index][1] >= 0) { data.push({ x: point[0], scatter: point[1], line: linreg_test_result[index][1], }); } }); data.sort(compareX); return ( <> {!model_state.viz_loading ? ( <ResponsiveContainer className="graph-wrapper" width="100%" height="100%" > <ComposedChart data={data} margin={{ top: 20, right: 20, bottom: 20, left: 20, }} > <CartesianGrid /> <XAxis dataKey="x" name={model_state.linreg_x_name} type="number"> <Label value={model_state.linreg_x_name} position="insideBottom" offset={-12} /> </XAxis> <YAxis unit={state.sample_dataset === SampleDataset.BOSTON ? "k$" : ""} name={model_state.linreg_y_name} type="number" > <Label value={model_state.linreg_y_name} angle={-90} position="insideLeft" /> </YAxis> <Tooltip cursor={{ strokeDasharray: "3 3" }} /> <Legend verticalAlign="top" height={36} /> <Scatter name="Test Data" dataKey="scatter" fill="#e06aa6" /> <Line dataKey="line" name="Line of Best Fit (Train Data)" stroke="#5D5DE1" dot={false} /> </ComposedChart> </ResponsiveContainer> ) : ( <LoadingComponent /> )} </> ); }