From aa87720f4ac2b48e8b5ea80f1ff38c5196bdc476 Mon Sep 17 00:00:00 2001 From: Paul Marbach Date: Mon, 15 Dec 2025 10:55:39 -0500 Subject: [PATCH] fix segmented --- .../RadialGauge/RadialBarSegmented.tsx | 2 +- .../RadialGauge/RadialColorDefs.tsx | 33 +++++++++---------- .../components/RadialGauge/ThresholdsBar.tsx | 2 +- .../src/components/RadialGauge/effects.tsx | 2 -- 4 files changed, 18 insertions(+), 21 deletions(-) diff --git a/packages/grafana-ui/src/components/RadialGauge/RadialBarSegmented.tsx b/packages/grafana-ui/src/components/RadialGauge/RadialBarSegmented.tsx index dbc93d2da7f..dd2ec0ac9bf 100644 --- a/packages/grafana-ui/src/components/RadialGauge/RadialBarSegmented.tsx +++ b/packages/grafana-ui/src/components/RadialGauge/RadialBarSegmented.tsx @@ -38,7 +38,7 @@ export function RadialBarSegmented({ for (let i = 0; i < segmentCountAdjusted; i++) { const angleValue = min + ((max - min) / segmentCountAdjusted) * i; - const angleColor = colorDefs.getSegmentColor(angleValue); + const angleColor = colorDefs.getSegmentColor(angleValue, i); const segmentAngle = startAngle + (angleRange / segmentCountAdjusted) * i + 0.01; const segmentColor = angleValue >= value ? theme.colors.action.hover : angleColor; diff --git a/packages/grafana-ui/src/components/RadialGauge/RadialColorDefs.tsx b/packages/grafana-ui/src/components/RadialGauge/RadialColorDefs.tsx index abef48720b4..5a8c14d529f 100644 --- a/packages/grafana-ui/src/components/RadialGauge/RadialColorDefs.tsx +++ b/packages/grafana-ui/src/components/RadialGauge/RadialColorDefs.tsx @@ -35,17 +35,20 @@ export class RadialColorDefs { constructor(private options: RadialColorDefsOptions) {} - getSegmentColor(forValue: number): string { + getSegmentColor(forValue: number, segmentIdx: number): string { const { displayProcessor } = this.options; const baseColor = displayProcessor(forValue).color ?? FALLBACK_COLOR; - - return this.getColor(baseColor, true); + return this.getColor(baseColor, segmentIdx); } - getColor(baseColor: string, forSegment?: boolean): string { - const { gradient, dimensions, gaugeId, fieldDisplay, shape, theme } = this.options; + getColor(baseColor: string, segmentIdx?: number): string { + const { gradient, dimensions, gaugeId, fieldDisplay, shape } = this.options; - const id = `value-color-${baseColor}-${gaugeId}`; + let id = `value-color-${baseColor}-${gaugeId}`; + const forSegment = segmentIdx !== undefined; + if (forSegment) { + id += `-segment-${segmentIdx}`; + } if (this.colorToIds[id]) { return this.colorToIds[id]; @@ -62,7 +65,7 @@ export class RadialColorDefs { const colorMode = getFieldColorMode(colorModeId); const valuePercent = fieldDisplay.display.percent ?? 0; - const gradientStops = this.getGradient(); + const gradientStops = this.getGradient(baseColor, forSegment); const stops = gradientStops.map((stop, i) => ( )); @@ -70,6 +73,10 @@ export class RadialColorDefs { // Handle continusous color modes first // If it's a segment color we don't want to do continuous gradients if (colorMode.isContinuous && colorMode.getColors && !forSegment) { + // this linear gradient doesn't work well for the circular shape yoday for what we actually + // want for continuous color modes, which would be to have the radial bar fill from the top + // around the circle. But SVG doesn't support that kind of gradient on stroke paths out-of-the-box, + // we'd need to implement something like https://gist.github.com/mbostock/4163057 this.defs.push( {stops} @@ -97,7 +104,6 @@ export class RadialColorDefs { const y2 = shape === 'circle' ? dimensions.centerY + dimensions.radius : 0; // this makes it so the gradient is always brightest at the current value - // this makes the point color math much more annoying so it's currently disabled. const transform = shape === 'circle' ? `rotate(${360 * valuePercent - 180} ${dimensions.centerX} ${dimensions.centerY})` @@ -129,9 +135,8 @@ export class RadialColorDefs { return this.getColor(this.getFieldBaseColor()); } - getGradient(): Array<{ color: string; percent: number }> { + getGradient(baseColor = this.getFieldBaseColor(), forSegment?: boolean): Array<{ color: string; percent: number }> { const { gradient, fieldDisplay, theme } = this.options; - const baseColor = this.getFieldBaseColor(); if (gradient === 'none') { return [ { color: baseColor, percent: 0 }, @@ -143,7 +148,7 @@ export class RadialColorDefs { const colorMode = getFieldColorMode(colorModeId); // Handle continusous color modes first - if (colorMode.isContinuous && colorMode.getColors) { + if (colorMode.isContinuous && colorMode.getColors && !forSegment) { const colors = colorMode.getColors(theme); return colors.map((color, idx) => ({ color, percent: idx / (colors.length - 1) })); } else if (colorMode.isByValue) { @@ -187,12 +192,6 @@ export class RadialColorDefs { let startColor = gradient[0].color; let endColor = gradient[gradient.length - 1].color; - const colorMode = getFieldColorMode(fieldDisplay.field.color?.mode); - if (colorMode.isContinuous) { - } else if (colorMode.isByValue) { - } else { - } - // if we have a percentageFilled, use it to get a the correct end color based on where the bar terminates if (gradient.length >= 2) { const endColorByPercentage = colorManipulator.colorAtGradientPercent(gradient, valuePercent); diff --git a/packages/grafana-ui/src/components/RadialGauge/ThresholdsBar.tsx b/packages/grafana-ui/src/components/RadialGauge/ThresholdsBar.tsx index 602038ccf10..8977bbb6642 100644 --- a/packages/grafana-ui/src/components/RadialGauge/ThresholdsBar.tsx +++ b/packages/grafana-ui/src/components/RadialGauge/ThresholdsBar.tsx @@ -58,7 +58,7 @@ export function ThresholdsBar({ dimensions={thresholdDimensions} roundedBars={roundedBars} glowFilter={glowFilter} - color={colorDefs.getColor(threshold.color, true)} + color={colorDefs.getColor(threshold.color, i)} /> ); diff --git a/packages/grafana-ui/src/components/RadialGauge/effects.tsx b/packages/grafana-ui/src/components/RadialGauge/effects.tsx index 09bbc46e349..759ae4241e8 100644 --- a/packages/grafana-ui/src/components/RadialGauge/effects.tsx +++ b/packages/grafana-ui/src/components/RadialGauge/effects.tsx @@ -1,5 +1,3 @@ -import { GrafanaTheme2 } from '@grafana/data'; - import { GaugeDimensions } from './utils'; export interface GlowGradientProps {