function Timeseriesplot({ x, lineData, barData, choice, record }) {
    const [color, setColor] = useState('');
    useEffect(() => {
        if (choice === 'Deaths') {
            setColor('red');
        } else {
            setColor('#D79913');
        }
    }, [choice])

    return (
        <Plot
            data={[
                {
                    type: 'scatter',
                    x: x,
                    y: lineData,
                    name: choice,
                    line: { color: color }
                },
                {
                    type: 'bar',
                    x: x,
                    y: barData,
                    name: `Daily_${choice}`,
                    yaxis: 'y2',
                    marker: { color: color }
                },
                {
                    type: 'scatter',
                    x: x,
                    y: record,
                    name: 'Max Daily',
                    yaxis: 'y2',
                    line: { color: 'white', dash: 'dash', width: 1 }
                },
            ]}
            layout={{
                width: document.querySelector('div.col-md-6').clientWidth,
                height: 450,
                legend: {
                    font: {
                        size: 10
                    },
                    orientation: 'h',
                },
                hovermode: 'x unified',
                title: `Number of ${choice} Cases`,
                plot_bgcolor: "#323130",
                paper_bgcolor: "#323130",
                font: {
                    family: "Open Sans, sans-serif",
                    size: 13,
                    color: "white"
                },
                xaxis: { rangeslider: { visible: true } },
                yaxis: {
                    zeroline: false,
                    gridcolor: '#6c6c6c',
                },
                yaxis2: {
                    anchor: "free",
                    overlaying: "y",
                    side: "right",
                    position: 1,
                    showgrid: false,
                    zeroline: false,
                }
            }}
        />
    )
}
// time series plot for cases accross time
time series plot for cases accross time
time series plot for cases accross time
function Timeseriesplot({ x, lineData, barData, choice, record }) {
    const [color, setColor] = useState('');
    useEffect(() => {
        if (choice === 'Deaths') {
            setColor('red');
        } else {
            setColor('#D79913');
        }
    }, [choice])
    return (
        <Plot
            data={[
                {
                    type: 'scatter',
                    x: x,
                    y: lineData,
                    name: choice,
                    line: { color: color }
                },
                {
                    type: 'bar',
                    x: x,
                    y: barData,
                    name: `Daily_${choice}`,
                    yaxis: 'y2',
                    marker: { color: color }
                },
                {
                    type: 'scatter',
                    x: x,
                    y: record,
                    name: 'Max Daily',
                    yaxis: 'y2',
                    line: { color: 'white', dash: 'dash', width: 1 }
                },
            ]}
            layout={{
                width: document.querySelector('div.col-md-6').clientWidth,
                height: 450,
                legend: {
                    font: {
                        size: 10
                    },
                    orientation: 'h',
                },
                hovermode: 'x unified',
                title: `Number of ${choice} Cases`,
                plot_bgcolor: "#323130",
                paper_bgcolor: "#323130",
                font: {
                    family: "Open Sans, sans-serif",
                    size: 13,
                    color: "white"
                },
                xaxis: { rangeslider: { visible: true } },
                yaxis: {
                    zeroline: false,
                    gridcolor: '#6c6c6c',
                },
                yaxis2: {
                    anchor: "free",
                    overlaying: "y",
                    side: "right",
                    position: 1,
                    showgrid: false,
                    zeroline: false,
                }
            }}
        />
    )
}
function Timeseriesplot ( { x , lineData , barData , choice , record } ) { const [ color , setColor ] = useState ( '' ) ; useEffect ( ( ) => { if ( choice === 'Deaths' ) { setColor ( 'red' ) ; } else { setColor ( '#D79913' ) ; } } , [ choice ] ) return ( < Plot data = { [ { type : 'scatter' , x : x , y : lineData , name : choice , line : { color : color } } , { type : 'bar' , x : x , y : barData , name : ` ${ choice } ` , yaxis : 'y2' , marker : { color : color } } , { type : 'scatter' , x : x , y : record , name : 'Max Daily' , yaxis : 'y2' , line : { color : 'white' , dash : 'dash' , width : 1 } } , ] } layout = { { width : document . querySelector ( 'div.col-md-6' ) . clientWidth , height : 450 , legend : { font : { size : 10 } , orientation : 'h' , } , hovermode : 'x unified' , title : ` ${ choice } ` , plot_bgcolor : "#323130" , paper_bgcolor : "#323130" , font : { family : "Open Sans, sans-serif" , size : 13 , color : "white" } , xaxis : { rangeslider : { visible : true } } , yaxis : { zeroline : false , gridcolor : '#6c6c6c' , } , yaxis2 : { anchor : "free" , overlaying : "y" , side : "right" , position : 1 , showgrid : false , zeroline : false , } } } / > ) }
time series plot for cases accross time
time series plot for cases accross time