I have been getting the error
9:29:19 PM: ./src/components/StockAnalysis.js
9:29:19 PM: Cannot find file './Chart' in './src/components'.
when deploying to Netlify, however, I have no issues displaying the site locally in the browser. The StockAnalysis component looks as follows:
import React from 'react';
import Container from "@material-ui/core/Container";
import { makeStyles } from '@material-ui/core/styles';
import Chart from './Chart'
const useStyles = makeStyles({
root: {
background: 'linear-gradient(45deg, #FE6B8B 30%, #FF8E53 90%)',
border: 0,
borderRadius: 3,
boxShadow: '0 3px 5px 2px rgba(255, 105, 135, .3)',
color: 'white',
height: 48,
padding: '0 30px',
},
mainContainer: {
display: 'flex',
flexWrap: 'wrap',
justifyContent: 'center',
background: 'blue'
}
});
const StockAnalysis = () => {
const classes = useStyles();
return (
<Container maxWidth="md" className={classes.mainContainer} >
<Chart />
</Container>
);
};
export default StockAnalysis;
and the Chart component:
import React, {useState, useEffect} from 'react';
import { useParams } from 'react-router-dom';
import {getChartData} from '../api/marketData';
import {LineChart, Line, XAxis, YAxis, CartesianGrid, Tooltip, ResponsiveContainer} from 'recharts';
import { makeStyles } from '@material-ui/core/styles';
import ToggleButton from '@material-ui/lab/ToggleButton';
import ToggleButtonGroup from '@material-ui/lab/ToggleButtonGroup';
import Container from '@material-ui/core/Container';
const useStyles = makeStyles({
root: {
background: 'linear-gradient(45deg, #FE6B8B 30%, #FF8E53 90%)',
},
chartContainer: {
display: 'flex',
flexDirection: 'column',
flexWrap: 'wrap',
alignItems: 'center',
background: 'white',
textAlign: 'left',
width: '800px',
},
typography: {
noWrap: {
marginRight: '99px',
}
},
'@global': {
'.recharts-wrapper .recharts-cartesian-grid-horizontal line:first-child': {
strokeOpacity: '0',
},
'.recharts-wrapper .recharts-cartesian-grid-horizontal line:last-child': {
strokeOpacity: '0',
}
}
});
const Chart = () => {
const classes = useStyles();
const {ticker} = useParams();
const ranges = [
{range: '1d', interval: '15m'},
{range: '5d', interval: '60m'},
{range: '1mo', interval: '60m'},
{range: '3mo', interval: '1d'},
{range: '6mo', interval: '1d'},
{range: '1y', interval: '1d'},
{range: '2y', interval: '1d'},
{range: '5y', interval: '1d'},
]
const [timeRange, setTimeRange] = useState({range: '1d', interval: '15m'})
const [chartData, setChartData] = useState({});
const [isLoading, setIsLoading] = useState(true);
const [isError, setIsError] = useState(false);
const handleTimeRangeSelect = (event, newTimeRange) => {
setTimeRange(newTimeRange)
};
useEffect(() => {
getChartData(ticker, timeRange)
.then(response => {
console.log(response)
setChartData(formatResponseForRechart(response))
setIsLoading(false);
})
.catch((error) => {
setIsError(true);
});
}, [ticker, timeRange])
const formatResponseForRechart = (responseData) => {
const timestamps = responseData.chart.result[0].timestamp.map(timestamp => new Date(timestamp*1000).toString().substr(0,15));
const lowQuotes = responseData.chart.result[0].indicators.quote[0].low;
const highQuotes = responseData.chart.result[0].indicators.quote[0].high;
const closeQuotes = responseData.chart.result[0].indicators.quote[0].close;
const chartHigh = Math.max.apply(Math, closeQuotes)
const chartLow = Math.min.apply(Math, closeQuotes)
const rechartData = [];
for (let i = 0; i < responseData.chart.result[0].timestamp.length; i += 1) {
if(closeQuotes[i]!=null) {
let chartPoint = {};
chartPoint.timestamp = timestamps[i];
chartPoint.low = lowQuotes[i].toFixed(2);
chartPoint.high = highQuotes[i].toFixed(2);
chartPoint.price = closeQuotes[i].toFixed(2);
rechartData.push(chartPoint);
}
}
return {rechartData, chartHigh, chartLow}
};
/*function linearRegression(y,x){
var lr = {};
var n = y.length;
var sum_x = 0;
var sum_y = 0;
var sum_xy = 0;
var sum_xx = 0;
var sum_yy = 0;
for (var i = 0; i < y.length; i++) {
sum_x += x[i];
sum_y += y[i];
sum_xy += (x[i]*y[i]);
sum_xx += (x[i]*x[i]);
sum_yy += (y[i]*y[i]);
}
lr.slope = (n * sum_xy - sum_x * sum_y) / (n*sum_xx - sum_x * sum_x);
lr.intercept = (sum_y - lr.slope * sum_x)/n;
lr.r2 = Math.pow((n*sum_xy - sum_x*sum_y)/Math.sqrt((n*sum_xx-sum_x*sum_x)*(n*sum_yy-sum_y*sum_y)),2);
return lr;
}*/
const stonksUp = (startPrice, endPrice) => {
return startPrice < endPrice
}
if (isError) {
return <div>Error!</div>;
} else if (isLoading) {
return <div>Loading...</div>;
} else {
return (
<Container maxWidth="800" className={classes.chartContainer}>
<h2>{ticker}</h2>
<p>{chartData.rechartData[chartData.rechartData.length -1].price}</p>
<p>{chartData.rechartData[0].price}</p>
<ResponsiveContainer width="95%" height={320}>
<LineChart data={chartData.rechartData}>
<XAxis dataKey="timestamp" tick={false}/>
<YAxis domain={[chartData.chartLow*.98,chartData.chartHigh*1.02]} tick={false} />
<CartesianGrid strokeDasharray="3 3"/>
<Tooltip/>
<Line type="monotone" dataKey="price" stroke={stonksUp(parseInt(chartData.rechartData[0].price), parseInt(chartData.rechartData[chartData.rechartData.length-1].price)) ? "green" : "red" } dot={false} />
</LineChart>
</ResponsiveContainer>
<ToggleButtonGroup
value={timeRange}
exclusive
onChange={handleTimeRangeSelect}
aria-label="text alignment"
>
{ranges.map((range) => (
<ToggleButton value={range}>{range.range}</ToggleButton>
))}
</ToggleButtonGroup>
</Container>
);
}
}
export default Chart;
The file tree is depicted here:
Does anyone have any ideas as to what could be going on?
Pursuing ML Course.