From f15bd1095b649dc9a93f852e6632abb1efaa54a4 Mon Sep 17 00:00:00 2001
From: Tero Tikkanen <tero.tikkanen@gmail.com>
Date: Wed, 11 Oct 2023 21:45:57 +0300
Subject: [PATCH] Use custom goal line color from theme

---
 components/graphs/GraphAsTable.js    |  7 +++++++
 components/graphs/IndicatorGraph.tsx | 17 ++++++-----------
 2 files changed, 13 insertions(+), 11 deletions(-)

diff --git a/components/graphs/GraphAsTable.js b/components/graphs/GraphAsTable.js
index 1e07580e..6ebb18fa 100644
--- 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
index 2577002b..fc0c1319 100644
--- 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,9 +450,6 @@ 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) => {
@@ -456,11 +457,6 @@ function IndicatorGraph(props: IndicatorGraphProps) {
         ...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,