From 6bcccf302fc3a8978bfaa051bb528b93f605adb4 Mon Sep 17 00:00:00 2001
From: Bartosz Prusinowski <bartosz@interactivethings.com>
Date: Fri, 27 Sep 2024 15:50:45 +0200
Subject: [PATCH] fix: Segmented line chart whisker colors

---
 CHANGELOG.md              |  1 +
 app/charts/line/lines.tsx | 10 ++++++----
 2 files changed, 7 insertions(+), 4 deletions(-)

diff --git a/CHANGELOG.md b/CHANGELOG.md
index ba862215b..b7e84ccd6 100644
--- a/CHANGELOG.md
+++ b/CHANGELOG.md
@@ -40,6 +40,7 @@ You can also check the
     is not breaking the application anymore
   - Axis titles now wrap
   - Metadata panel is not longer shared between separate charts in a dashboard
+  - Segmented line charts' whiskers have now the same color as the line
 
 # [4.8.0] - 2024-09-11
 
diff --git a/app/charts/line/lines.tsx b/app/charts/line/lines.tsx
index 114021eed..c0a63bd1f 100644
--- a/app/charts/line/lines.tsx
+++ b/app/charts/line/lines.tsx
@@ -1,4 +1,3 @@
-import { useTheme } from "@mui/material";
 import { line } from "d3-shape";
 import { Fragment, memo, useEffect, useMemo, useRef } from "react";
 
@@ -14,7 +13,6 @@ import { Observation } from "@/domain/data";
 import { useTransitionStore } from "@/stores/transition";
 
 export const ErrorWhiskers = () => {
-  const theme = useTheme();
   const {
     getX,
     getYError,
@@ -23,6 +21,8 @@ export const ErrorWhiskers = () => {
     yScale,
     xScale,
     showYStandardError,
+    colors,
+    getSegment,
     bounds,
   } = useChartState() as LinesState;
   const { margins } = bounds;
@@ -36,6 +36,7 @@ export const ErrorWhiskers = () => {
 
     return chartData.filter(filterWithoutErrors(getYError)).map((d, i) => {
       const x0 = xScale(getX(d)) as number;
+      const segment = getSegment(d);
       const barWidth = 15;
       const [y1, y2] = getYErrorRange(d);
       return {
@@ -44,17 +45,18 @@ export const ErrorWhiskers = () => {
         y1: yScale(y1),
         y2: yScale(y2),
         width: barWidth,
-        fill: theme.palette.primary.main,
+        fill: colors(segment),
         renderMiddleCircle: true,
       } as RenderWhiskerDatum;
     });
   }, [
     chartData,
+    colors,
+    getSegment,
     getX,
     getYError,
     getYErrorRange,
     showYStandardError,
-    theme.palette.primary.main,
     xScale,
     yScale,
   ]);