From dae9517b4fc32822ccd0539bc24c07d7fb3c53c5 Mon Sep 17 00:00:00 2001
From: Drew Slobodnjak <60050885+drew08t@users.noreply.github.com>
Date: Wed, 10 Sep 2025 16:20:37 -0700
Subject: [PATCH] TimeSeries: Simplify time comparison styling (#110909)

* TimeSeries: Simplify time comparison styling

* Remove extraneous fill value

* Add fill value back to ensure correct legend
---
 packages/grafana-data/src/dataframe/utils.ts | 28 +++++---------------
 1 file changed, 7 insertions(+), 21 deletions(-)

diff --git a/packages/grafana-data/src/dataframe/utils.ts b/packages/grafana-data/src/dataframe/utils.ts
index e4d065f559b..abb2e0d383b 100644
--- a/packages/grafana-data/src/dataframe/utils.ts
+++ b/packages/grafana-data/src/dataframe/utils.ts
@@ -1,4 +1,3 @@
-import { getFieldSeriesColor } from '../field/fieldColor';
 import { GrafanaTheme2 } from '../themes/types';
 import { DataFrame, Field, FieldType } from '../types/dataFrame';
 import { TimeRange } from '../types/time';
@@ -155,26 +154,13 @@ export function alignTimeRangeCompareData(series: DataFrame, diff: number, theme
 
     // Apply visual styling for comparison series
     if (field.type === FieldType.number || field.type === FieldType.boolean || field.type === FieldType.enum) {
-      const seriesColor = getFieldSeriesColor(field, theme).color;
-      const lineStyle = field.config.custom?.lineStyle;
-      const isSolid = !lineStyle?.fill || lineStyle.fill === 'solid';
-
-      if (isSolid) {
-        field.config.custom = {
-          ...(field.config.custom ?? {}),
-          lineStyle: {
-            fill: 'dash',
-            dash: [5, 5],
-          },
-        };
-      } else {
-        // For already dashed/dotted lines, reduce opacity
-        const tinycolor = require('tinycolor2');
-        field.config.color = {
-          mode: 'fixed',
-          fixedColor: tinycolor(seriesColor).setAlpha(0.5).toString(),
-        };
-      }
+      field.config.custom = {
+        ...(field.config.custom ?? {}),
+        lineStyle: {
+          fill: 'dash',
+          dash: [1, 5, 4, 5],
+        },
+      };
     }
   });
 }