Improve area graphs and use trend line visibility setting

components/graphs/IndicatorGraph.tsx

@@ -4,6 +4,7 @@ import dynamic from 'next/dynamic';
 import { merge, uniq } from 'lodash';
 import styled from 'styled-components';
 import { useTheme } from 'common/theme';
+import { transparentize } from 'polished';
 import { splitLines } from 'common/utils';
 
 const log10 = Math.log(10);
@@ -200,28 +201,36 @@ const createTraces = (
     }
     // we have one or more categories as time series - draw lines and markers
     if (hasTimeDimension) {
-      // Only one category, draw line/area graph, no symbols
       modTrace.type = 'scatter';
-      modTrace.fill = categoryCount === 1 && useAreaGraph ? 'tozeroy' : 'none';
-      //modTrace.fillcolor could be defined here, defaults to trace color
+      // we fill traces if there is only one trace and area graph is enabled
+      if (traceCount === 1 && useAreaGraph) {
+        modTrace.fill = 'tozeroy';
+        modTrace.fillcolor = transparentize(
+          0.8,
+          plotColors.mainScale[idx % numColors]
+        );
+      }
+
       modTrace.line = {
         width: trace.dataType === 'total' ? 3 : 2, // TODO extension trace total vs dimension
-        shape: lineShape,
-        smoothing: lineShape === 'spline' ? 0.7 : undefined,
         color: plotColors.mainScale[idx % numColors],
       };
-      // Multiple categories, draw lines & symbols
-      if (categoryCount > 1) {
-        modTrace.marker = {
-          size: 6,
-          symbol: plotColors.symbols[idx % numSymbols],
-          color: '#ffffff',
-          line: {
-            width: 2,
-            color: plotColors.mainScale[idx % numColors],
-          },
-        };
+
+      // if we prefer smooth lines, set spline shape
+      if (lineShape === 'spline') {
+        modTrace.line.shape = 'spline';
+        modTrace.line.smoothing = 1.3;
       }
+
+      modTrace.marker = {
+        size: 8,
+        symbol: plotColors.symbols[idx % numSymbols],
+        color: '#ffffff',
+        line: {
+          width: 2,
+          color: plotColors.mainScale[idx % numColors],
+        },
+      };
     }
     // Leave out markers for long time series
     if (modTrace.type === 'scatter')
@@ -335,8 +344,10 @@ function IndicatorGraph(props: IndicatorGraphProps) {
     ],
   };
 
+  // TODO: these ought to be set in the backend
   const lineShape = theme.settings?.graphs?.lineShape || 'spline';
   const useAreaGraph = theme.settings?.graphs?.areaGraphs;
+  const showTrendline = theme.settings?.graphs?.showTrendline ?? true;
   const graphCustomBackground = theme.settings?.graphs?.customBackground;
 
   let mainTraces = [];
@@ -422,7 +433,7 @@ function IndicatorGraph(props: IndicatorGraphProps) {
   const { layoutConfig, traces: plotlyData } = mainTraces;
 
   // add trend if defined
-  if (!isComparison && trendTrace)
+  if (!isComparison && trendTrace && showTrendline)
     plotlyData.push({
       type: 'scatter',
       mode: 'lines',
@@ -435,13 +446,21 @@ function IndicatorGraph(props: IndicatorGraphProps) {
       ...trendTrace,
     });
 
+  // we fill goal trace too if there is only one data trace and area graph is enabled
+  const fillTraces = traces.length === 1 && useAreaGraph;
+
   // add goals if defined
   if (!isComparison && goalTraces.length) {
     goalTraces.forEach((goalTrace, idx) => {
       plotlyData.push({
         ...goalTrace,
         type: 'scatter',
         mode: goalTrace.scenario ? 'markers' : 'lines+markers',
+        fill: fillTraces ? 'tozeroy' : 'none',
+        fillcolor: transparentize(
+          0.8,
+          plotColors.goalScale[idx % plotColors.goalScale.length]
+        ),
         line: {
           width: 3,
           dash: 'dash',

package.json

@@ -9,7 +9,7 @@
     "@elastic/react-search-ui": "^1.11.2",
     "@kausal/mapboxgl-legend": "^1.7.2",
     "@kausal/plotly-custom": "^2.14.3",
-    "@kausal/themes": "^0.6.3",
+    "@kausal/themes": "^0.6.4",
     "@koa/router": "^10.1.1",
     "@n8tb1t/use-scroll-position": "^2.0.3",
     "@next/bundle-analyzer": "^12.1.6",
@@ -156,7 +156,7 @@
   ],
   "packageManager": "[email protected]",
   "optionalDependencies": {
-    "@kausal/themes-private": "^0.2.68"
+    "@kausal/themes-private": "^0.2.69"
   },
   "lint-staged": {
     "*.{tsx,ts,js,css,scss,md,json}": "prettier --write"

yarn.lock

@@ -3395,17 +3395,17 @@ __metadata:
   languageName: node
   linkType: hard
 
-"@kausal/themes-private@npm:^0.2.68":
-  version: 0.2.68
-  resolution: "@kausal/themes-private@npm:0.2.68"
-  checksum: 8d473f85a13b8f70f2a6c904f23644c30ac1543aaaec15267a899dd772da92dd39a150b1cdec84b0552b5ce4316d819647fbb708b2e1d3681b4b0f17fa2395f0
+"@kausal/themes-private@npm:^0.2.69":
+  version: 0.2.69
+  resolution: "@kausal/themes-private@npm:0.2.69"
+  checksum: 072ddc60a7cd7a067c4052b136d8762a98a7d28cada2805d623b02d32f34096237d8def087af040a057ae95c374a73aed0795c680f37b253597e3cf839003f88
   languageName: node
   linkType: hard
 
-"@kausal/themes@npm:^0.6.3":
-  version: 0.6.3
-  resolution: "@kausal/themes@npm:0.6.3"
-  checksum: 5cca72397dd2c298f63023b0021fc10c65035bf849aabe4e8954f0df05d34e0d148506a3354e4be6ead99eddbf35192a8fec8c4da8e9ae8b02ad0fe6b8c69e6d
+"@kausal/themes@npm:^0.6.4":
+  version: 0.6.4
+  resolution: "@kausal/themes@npm:0.6.4"
+  checksum: 3223c70910df7c439b8aa9193686f34088c24c759a1bf8c0ee9056e2c1fa1815cabef1cee3559a2e4f7a38161338902ea82d6d0653d575f543dc81334d1540aa
   languageName: node
   linkType: hard
 
@@ -16899,8 +16899,8 @@ __metadata:
     "@graphql-codegen/typescript-react-apollo": ^3.3.7
     "@kausal/mapboxgl-legend": ^1.7.2
     "@kausal/plotly-custom": ^2.14.3
-    "@kausal/themes": ^0.6.3
-    "@kausal/themes-private": ^0.2.68
+    "@kausal/themes": ^0.6.4
+    "@kausal/themes-private": ^0.2.69
     "@koa/router": ^10.1.1
     "@n8tb1t/use-scroll-position": ^2.0.3
     "@next/bundle-analyzer": ^12.1.6