fix: use the same color theme as the main charts for the vertical crosshair on the throughput charts (#3423)

dashboard/src/main/home/app-dashboard/expanded-app/metrics/AreaChart.tsx

@@ -16,14 +16,10 @@ import { bisector, extent, max } from "d3-array";
 import { timeFormat } from "d3-time-format";
 import { NormalizedMetricsData } from "../../../cluster-dashboard/expanded-chart/metrics/types";
 import { AggregatedDataColors } from "../../../cluster-dashboard/expanded-chart/metrics/utils";
+import { ColorTheme } from "./utils";
 
 var globalData: NormalizedMetricsData[];
 
-export const background = "#3b697800";
-export const background2 = "#20405100";
-export const accentColor = "#949eff";
-export const accentColorDark = "#949eff";
-
 // util
 const formatDate = timeFormat("%H:%M:%S %b %d, '%y");
 
@@ -258,13 +254,13 @@ const AreaChart: React.FunctionComponent<AreaProps> = ({
 
                 <LinearGradient
                     id="area-background-gradient"
-                    from={background}
-                    to={background2}
+                    from={ColorTheme.background}
+                    to={ColorTheme.background2}
                 />
                 <LinearGradient
                     id="area-gradient"
-                    from={accentColor}
-                    to={accentColor}
+                    from={ColorTheme.accentColor}
+                    to={ColorTheme.accentColor}
                     toOpacity={0}
                 />
                 {Object.entries(AggregatedDataColors).map(([dataKey, color]) => (
@@ -374,7 +370,7 @@ const AreaChart: React.FunctionComponent<AreaProps> = ({
                         <Line
                             from={{ x: tooltipLeft, y: margin.top }}
                             to={{ x: tooltipLeft, y: innerHeight + margin.top }}
-                            stroke={accentColorDark}
+                            stroke={ColorTheme.accentColorDark}
                             strokeWidth={2}
                             pointerEvents="none"
                             strokeDasharray="5,2"
@@ -408,7 +404,7 @@ const AreaChart: React.FunctionComponent<AreaProps> = ({
                             cx={tooltipLeft}
                             cy={dataGraphTooltipGlyphPosition}
                             r={4}
-                            fill={accentColorDark}
+                            fill={ColorTheme.accentColorDark}
                             stroke="white"
                             strokeWidth={2}
                             pointerEvents="none"
@@ -419,7 +415,7 @@ const AreaChart: React.FunctionComponent<AreaProps> = ({
                                 cx={tooltipLeft}
                                 cy={valueScale(getValue(d))}
                                 r={4}
-                                fill={accentColorDark}
+                                fill={ColorTheme.accentColorDark}
                                 stroke="white"
                                 strokeWidth={2}
                                 pointerEvents="none"
@@ -442,7 +438,7 @@ const AreaChart: React.FunctionComponent<AreaProps> = ({
                                     cx={tooltipLeft}
                                     cy={hpaGraphTooltipGlyphPosition}
                                     r={4}
-                                    fill={accentColorDark}
+                                    fill={ColorTheme.accentColorDark}
                                     stroke="white"
                                     strokeWidth={2}
                                     pointerEvents="none"
@@ -499,6 +495,6 @@ const TooltipDate = styled.div`
 `;
 
 const TooltipDataRow = styled.div<{ color?: string }>`
-  color: ${(props) => props.color ?? accentColor};
+  color: ${(props) => props.color ?? ColorTheme.accentColor};
   margin-bottom: 4px;
 `;

dashboard/src/main/home/app-dashboard/expanded-app/metrics/StackedAreaChart.tsx

@@ -9,16 +9,12 @@ import { scaleLinear, scaleTime } from "@visx/scale";
 import { bisector, extent, max } from "d3-array";
 import { timeFormat } from "d3-time-format";
 
+import { ColorTheme } from "./utils";
 import { default as areaTheme } from "./themes/area";
 import { NormalizedNginxStatusMetricsData } from "../../../cluster-dashboard/expanded-chart/metrics/types";
 
 var globalData: NormalizedNginxStatusMetricsData[];
 
-export const background = "#3b697800";
-export const background2 = "#20405100";
-export const accentColor = "#949eff";
-export const accentColorDark = "#949eff";
-
 // util
 const formatDate = timeFormat("%H:%M:%S %b %d, '%y");
 
@@ -212,6 +208,12 @@ const StackedAreaChart: React.FunctionComponent<StackedAreaChartProps> = ({
                         snapTooltipToDatumY={true}
                         showDatumGlyph={true}
                         applyPositionStyle={true}
+                        verticalCrosshairStyle={{
+                            pointerEvents: 'none',
+                            stroke: ColorTheme.accentColorDark,
+                            strokeDasharray: '5,2',
+                            strokeWidth: '2',
+                        }}
                         style={{ 
                             background: 'rgb(38, 39, 47)',
                             borderRadius: '3px',
@@ -280,6 +282,6 @@ const TooltipDate = styled.div`
 `;
 
 const TooltipDataRow = styled.div<{ color?: string }>`
-  color: ${(props) => props.color ?? accentColor};
+  color: ${(props) => props.color ?? ColorTheme.accentColor};
   margin-bottom: 4px;
 `;

dashboard/src/main/home/app-dashboard/expanded-app/metrics/utils.ts

@@ -7,6 +7,13 @@ export const StatusCodeDataColors: Record<string, string> = {
     "5xx": "#9C20A5", // purple
 };
 
+export const ColorTheme = {
+    background: "#3b697800",
+    background2: "#20405100",
+    accentColor: "#949eff",
+    accentColorDark: "#949eff",
+}
+
 type RGB = {
     r: number;
     g: number;