Use custom goal line color from theme

kausaltech · Oct 11, 2023 · f15bd10 · f15bd10
1 parent 0678671
commit f15bd10
Show file tree

Hide file tree

Showing 2 changed files with 13 additions and 11 deletions.
diff --git a/components/graphs/GraphAsTable.js b/components/graphs/GraphAsTable.js
@@ -11,6 +11,7 @@ const CollapsibleTable = styled.div`
 `;
 
 const Trigger = styled.div`
+  padding-bottom: ${(props) => props.theme.spaces.s050};
   background-color: ${(props) => props.theme.graphColors.grey005};
   text-align: center;
 `;
@@ -43,6 +44,12 @@ const TableContainer = styled.div`
 
 const TriggerButton = styled(Button)`
   text-decoration: none;
+  color: ${(props) => props.theme.linkColor};
+
+  &:hover {
+    text-decoration: underline;
+    color: ${(props) => props.theme.linkColor};
+  }
 `;
 
 function GraphAsTable(props) {

diff --git a/components/graphs/IndicatorGraph.tsx b/components/graphs/IndicatorGraph.tsx
@@ -1,5 +1,4 @@
 import React from 'react';
-import PropTypes from 'prop-types';
 import dynamic from 'next/dynamic';
 import { merge, uniq } from 'lodash';
 import styled from 'styled-components';
@@ -344,6 +343,11 @@ function IndicatorGraph(props: IndicatorGraphProps) {
     ],
   };
 
+  /* Override goal line color from theme, only supports single color */
+  if (theme.settings?.graphs?.goalLineColor) {
+    plotColors.goalScale = [theme.settings.graphs.goalLineColor];
+  }
+
   // TODO: these ought to be set in the backend
   const lineShape = theme.settings?.graphs?.lineShape || 'spline';
   const useAreaGraph = theme.settings?.graphs?.areaGraphs;
@@ -424,7 +428,7 @@ function IndicatorGraph(props: IndicatorGraphProps) {
         t.legendGroup = t.name = organizationDimension.categories[idx % 2].name;
       }
       if (axisIndex > 1) {
-        for (let c of ['x', 'y']) {
+        for (const c of ['x', 'y']) {
           t[`${c}axis`] = `${c}${axisIndex}`;
         }
       }
@@ -446,21 +450,13 @@ 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',
@@ -472,7 +468,6 @@ function IndicatorGraph(props: IndicatorGraphProps) {
           color: plotColors.goalScale[idx % plotColors.goalScale.length],
         },
         opacity: 0.7,
-        //hoverinfo: 'none',
         hovertemplate: `(%{x}) ${goalTrace.name}: %{y} ${yRange.unit}`,
         hoverlabel: {
           namelength: 0,