Fix: Show active deltas in charts

covid19india · Jun 14, 2021 · 8c1b83a · 8c1b83a
1 parent cbcdb54
commit 8c1b83a
Show file tree

Hide file tree

Showing 4 changed files with 18 additions and 46 deletions.
diff --git a/src/App.scss b/src/App.scss
@@ -1706,7 +1706,7 @@ h6 {
   .clickable {
     border-radius: 5px;
     cursor: pointer;
-    height: 13rem;
+    height: 14rem;
     width: calc(25%);
     z-index: 10;
   }
@@ -4968,7 +4968,7 @@ footer {
   .MapSwitcher {
     .highlight,
     .clickable {
-      height: 12rem;
+      height: 13rem;
     }
   }
 }

diff --git a/src/components/DeltaBarGraph.js b/src/components/DeltaBarGraph.js
@@ -28,14 +28,7 @@ function DeltaBarGraph({timeseries, statistic, lookback}) {
 
   const getDeltaStatistic = useCallback(
     (date, statistic) => {
-      const statisticConfig = STATISTIC_CONFIGS[statistic];
-      return getStatistic(
-        timeseries?.[date],
-        statisticConfig?.showDelta || statisticConfig?.nonLinear
-          ? 'delta'
-          : 'total',
-        statistic
-      );
+      return getStatistic(timeseries?.[date], 'delta', statistic);
     },
     [timeseries]
   );

diff --git a/src/components/Minigraphs.js b/src/components/Minigraphs.js
@@ -23,7 +23,7 @@ import {useMeasure} from 'react-use';
 
 // Dimensions
 const margin = {top: 10, right: 10, bottom: 2, left: 10};
-const height = 60;
+const height = 75;
 const maxWidth = 120;
 
 function Minigraphs({timeseries, date: timelineDate}) {
@@ -48,13 +48,7 @@ function Minigraphs({timeseries, date: timelineDate}) {
 
   const getMinigraphStatistic = useCallback(
     (date, statistic) => {
-      const statisticConfig = STATISTIC_CONFIGS[statistic];
-      const chartType =
-        ((statisticConfig?.showDelta || statisticConfig?.nonLinear) &&
-          'delta') ||
-        'total';
-      const t = getStatistic(timeseries?.[date], chartType, statistic);
-      return t;
+      return getStatistic(timeseries?.[date], 'delta', statistic);
     },
     [timeseries]
   );
@@ -86,7 +80,7 @@ function Minigraphs({timeseries, date: timelineDate}) {
 
       const yScale = scaleLinear()
         .clamp(true)
-        .domain([0, dailyMaxAbs])
+        .domain([-dailyMaxAbs, dailyMaxAbs])
         .range([chartBottom, margin.top]);
 
       const linePath = line()

diff --git a/src/components/Timeseries.js b/src/components/Timeseries.js
@@ -55,12 +55,7 @@ function Timeseries({
 
   const getTimeseriesStatistic = useCallback(
     (date, statistic, movingAverage = isMovingAverage) => {
-      const statisticConfig = STATISTIC_CONFIGS[statistic];
-      const newChartType =
-        ((statisticConfig?.showDelta || statisticConfig?.nonLinear) &&
-          chartType) ||
-        'total';
-      return getStatistic(timeseries?.[date], newChartType, statistic, {
+      return getStatistic(timeseries?.[date], chartType, statistic, {
         movingAverage,
       });
     },
@@ -115,9 +110,9 @@ function Timeseries({
     const [uniformScaleMin, uniformScaleMax] = extent(
       dates.reduce((res, date) => {
         res.push(
-          ...PRIMARY_STATISTICS.filter(
-            (statistic) => statistic != 'active' || chartType === 'total'
-          ).map((statistic) => getTimeseriesStatistic(date, statistic))
+          ...PRIMARY_STATISTICS.map((statistic) =>
+            getTimeseriesStatistic(date, statistic)
+          )
         );
         return res;
       }, [])
@@ -148,15 +143,12 @@ function Timeseries({
           PRIMARY_STATISTICS.includes(statistic)
         ) {
           return yScaleUniformLog;
-        } else if (
-          PRIMARY_STATISTICS.includes(statistic) &&
-          (statistic !== 'active' || chartType === 'total')
-        ) {
+        } else if (PRIMARY_STATISTICS.includes(statistic)) {
           return yScaleUniformLinear;
         }
       }
 
-      const [, scaleMax] = extent(dates, (date) =>
+      const [scaleMin, scaleMax] = extent(dates, (date) =>
         getTimeseriesStatistic(date, statistic)
       );
 
@@ -174,7 +166,7 @@ function Timeseries({
           scaleLinear()
             .clamp(true)
             .domain([
-              0,
+              Math.min(0, scaleMin),
               STATISTIC_CONFIGS[statistic].format === '%'
                 ? Math.min(100, Math.max(1, scaleMax))
                 : Math.max(1, scaleMax),
@@ -259,9 +251,6 @@ function Timeseries({
         STATISTIC_CONFIGS[statistic].format === '%' ? '%' : 'short';
       const isNonLinear = !!STATISTIC_CONFIGS[statistic]?.nonLinear;
 
-      const newChartType =
-        ((statisticConfig.showDelta || isNonLinear) && chartType) || 'total';
-
       /* X axis */
       svg
         .select('.x-axis')
@@ -312,7 +301,7 @@ function Timeseries({
       svg
         .selectAll('.trend-area')
         .data(
-          T && newChartType === 'delta' && !isNonLinear && condenseChart
+          T && chartType === 'delta' && !isNonLinear && condenseChart
             ? [dates]
             : []
         )
@@ -349,7 +338,7 @@ function Timeseries({
       svg
         .selectAll('.stem')
         .data(
-          T && newChartType === 'delta' && !isNonLinear && !condenseChart
+          T && chartType === 'delta' && !isNonLinear && !condenseChart
             ? dates
             : [],
           (date) => date
@@ -400,7 +389,7 @@ function Timeseries({
         .select('.trend')
         .selectAll('path')
         .data(
-          T && (newChartType === 'total' || isNonLinear || isMovingAverage)
+          T && (chartType === 'total' || isNonLinear || isMovingAverage)
             ? [dates]
             : []
         )
@@ -433,7 +422,7 @@ function Timeseries({
         .select('.trend-background')
         .selectAll('path')
         .data(
-          T && newChartType === 'delta' && isNonLinear && isMovingAverage
+          T && chartType === 'delta' && isNonLinear && isMovingAverage
             ? [dates]
             : []
         )
@@ -564,11 +553,7 @@ function Timeseries({
             {highlightedDate && (
               <div className={classnames('stats', `is-${statistic}`)}>
                 <h5 className="title">
-                  {`${
-                    chartType === 'delta' && statistic === 'active'
-                      ? `${t('Total')} `
-                      : ''
-                  }${t(capitalize(statisticConfig.displayName))}`}
+                  {t(capitalize(statisticConfig.displayName))}
                 </h5>
                 <h5>{formatDate(highlightedDate, 'dd MMMM')}</h5>
                 <div className="stats-bottom">