diff --git a/src/components/DeltaBarGraph.js b/src/components/DeltaBarGraph.js index 6bb4594cea..415f38d0f9 100644 --- a/src/components/DeltaBarGraph.js +++ b/src/components/DeltaBarGraph.js @@ -48,11 +48,11 @@ function DeltaBarGraph({timeseries, statistic, lookback}) { .domain([ Math.min( 0, - min(dates, (date) => getDeltaStatistic(timeseries[date], statistic)) + min(dates, (date) => getDeltaStatistic(timeseries?.[date], statistic)) ), Math.max( 1, - max(dates, (date) => getDeltaStatistic(timeseries[date], statistic)) + max(dates, (date) => getDeltaStatistic(timeseries?.[date], statistic)) ), ]) .range([chartBottom, margin.top]); @@ -72,7 +72,7 @@ function DeltaBarGraph({timeseries, statistic, lookback}) { .selectAll('text') .attr('y', 0) .attr('dy', (date, i) => - getDeltaStatistic(timeseries[date], statistic) < 0 ? '-1em' : '1.5em' + getDeltaStatistic(timeseries?.[date], statistic) < 0 ? '-1em' : '1.5em' ) .style('text-anchor', 'middle') .attr('fill', COLORS[statistic]); @@ -94,7 +94,7 @@ function DeltaBarGraph({timeseries, statistic, lookback}) { xScale(date), yScale(0), xScale.bandwidth(), - yScale(0) - yScale(getDeltaStatistic(timeseries[date], statistic)), + yScale(0) - yScale(getDeltaStatistic(timeseries?.[date], statistic)), r ) ) @@ -111,14 +111,14 @@ function DeltaBarGraph({timeseries, statistic, lookback}) { .attr('class', 'label') .attr('x', (date) => xScale(date) + xScale.bandwidth() / 2) .text((date) => - formatNumber(getDeltaStatistic(timeseries[date], statistic)) + formatNumber(getDeltaStatistic(timeseries?.[date], statistic)) ); textSelection .transition(t) .attr('fill', COLORS[statistic]) .attr('y', (date) => { - const val = getDeltaStatistic(timeseries[date], statistic); + const val = getDeltaStatistic(timeseries?.[date], statistic); return yScale(val) + (val < 0 ? 15 : -6); }); @@ -127,14 +127,20 @@ function DeltaBarGraph({timeseries, statistic, lookback}) { .attr( 'dy', (date) => - `${getDeltaStatistic(timeseries[date], statistic) < 0 ? 1.2 : -1.2}em` + `${ + getDeltaStatistic(timeseries?.[date], statistic) < 0 ? 1.2 : -1.2 + }em` ) .attr('x', (date) => xScale(date) + xScale.bandwidth() / 2) .text((date, i) => { if (i === 0) return ''; - const prevVal = getDeltaStatistic(timeseries[dates[i - 1]], statistic); + const prevVal = getDeltaStatistic( + timeseries?.[dates[i - 1]], + statistic + ); if (!prevVal) return ''; - const delta = getDeltaStatistic(timeseries[date], statistic) - prevVal; + const delta = + getDeltaStatistic(timeseries?.[date], statistic) - prevVal; return `${delta > 0 ? '+' : ''}${formatNumber( (100 * delta) / Math.abs(prevVal) )}%`; @@ -160,7 +166,9 @@ function DeltaBarGraph({timeseries, statistic, lookback}) { } const isEqual = (prevProps, currProps) => { - if (!currProps.timeseries) { + if (currProps.forceRender) { + return false; + } else if (!currProps.timeseries && prevProps.timeseries) { return true; } else if (currProps.timeseries && !prevProps.timeseries) { return false; diff --git a/src/components/Minigraphs.js b/src/components/Minigraphs.js index b39f680c7f..2f4c891637 100644 --- a/src/components/Minigraphs.js +++ b/src/components/Minigraphs.js @@ -171,7 +171,9 @@ function Minigraphs({timeseries, date: timelineDate}) { } const isEqual = (prevProps, currProps) => { - if (!currProps.timeseries) { + if (currProps.forceRender) { + return false; + } else if (!currProps.timeseries && prevProps.timeseries) { return true; } else if (currProps.timeseries && !prevProps.timeseries) { return false; diff --git a/src/components/State.js b/src/components/State.js index 6a71be8868..74cfbd0f34 100644 --- a/src/components/State.js +++ b/src/components/State.js @@ -49,10 +49,11 @@ function State(props) { stateCode: stateCode, districtName: null, }); + setShowAllDistricts(false); } }, [regionHighlighted.stateCode, stateCode]); - const {data: timeseries} = useSWR( + const {data: timeseries, error: timeseriesResponseError} = useSWR( `${API_ROOT_URL}/timeseries-${stateCode}.min.json`, fetcher, { @@ -130,6 +131,7 @@ function State(props) { @@ -150,13 +152,13 @@ function State(props) { - {data && timeseries && isStateMetaVisible && ( + {data && isStateMetaVisible && ( )} @@ -252,8 +254,9 @@ function State(props) { )} @@ -281,6 +284,7 @@ function State(props) { regionHighlighted, setRegionHighlighted, }} + forceRender={!!timeseriesResponseError} /> diff --git a/src/components/StateMeta.js b/src/components/StateMeta.js index 56d898325e..4f6f99bb1b 100644 --- a/src/components/StateMeta.js +++ b/src/components/StateMeta.js @@ -24,7 +24,7 @@ function StateMeta({stateCode, data, timeseries}) { const prevWeekDate = format(sub(getIndiaDate(), {weeks: 1}), 'yyyy-MM-dd'); const prevWeekConfirmed = getStatistic( - timeseries[stateCode]?.[prevWeekDate], + timeseries?.[prevWeekDate], 'total', 'confirmed' ); @@ -182,7 +182,9 @@ function StateMeta({stateCode, data, timeseries}) { } const isEqual = (prevProps, currProps) => { - if (prevProps.stateCode !== currProps.stateCode) { + if (currProps.timeseries && !prevProps.timeseries) { + return false; + } else if (prevProps.stateCode !== currProps.stateCode) { return false; } return true; diff --git a/src/components/TimeseriesExplorer.js b/src/components/TimeseriesExplorer.js index a0b6a15b38..92293ae1f5 100644 --- a/src/components/TimeseriesExplorer.js +++ b/src/components/TimeseriesExplorer.js @@ -269,7 +269,9 @@ function TimeseriesExplorer({ } const isEqual = (prevProps, currProps) => { - if (!currProps.timeseries) { + if (currProps.forceRender) { + return false; + } else if (!currProps.timeseries && prevProps.timeseries) { return true; } else if (currProps.timeseries && !prevProps.timeseries) { return false;