public/grafana
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

hide glow at small angles

Browse Source
This commit is contained in:
Paul Marbach
2025-12-17 17:32:50 -05:00
parent 5a1ae834e0
commit 2c9b7ca135
1 changed files with 16 additions and 14 deletions
Download Patch File Download Diff File Expand all files Collapse all files
packages/grafana-ui/src/components/RadialGauge/RadialArcPath.tsx
+16 -14
View File
@@ -30,7 +30,7 @@ interface RadialArcPathPropsWithGuideDot extends RadialArcPathPropsBase {
type RadialArcPathProps = RadialArcPathPropsBase | RadialArcPathPropsWithGuideDot; type RadialArcPathProps = RadialArcPathPropsBase | RadialArcPathPropsWithGuideDot;
const DOT_START_MIN_ANGLE_DEG = 5; const ENDPOINT_MARKER_MIN_ANGLE = 10;
const DOT_OPACITY = 0.5; const DOT_OPACITY = 0.5;
const DOT_RADIUS_FACTOR = 0.4; const DOT_RADIUS_FACTOR = 0.4;
const MAX_DOT_RADIUS = 8; const MAX_DOT_RADIUS = 8;
@@ -85,7 +85,7 @@ export const RadialArcPath = memo(
const [pointColorStart, pointColorEnd] = getEndpointMarkerColors(gradientStops, fieldDisplay.display.percent); const [pointColorStart, pointColorEnd] = getEndpointMarkerColors(gradientStops, fieldDisplay.display.percent);
endpointMarks = ( endpointMarks = (
<> <>
{arcLengthDeg > DOT_START_MIN_ANGLE_DEG && ( {arcLengthDeg > ENDPOINT_MARKER_MIN_ANGLE && (
<circle cx={xStart} cy={yStart} r={dotRadius} fill={pointColorStart} opacity={DOT_OPACITY} /> <circle cx={xStart} cy={yStart} r={dotRadius} fill={pointColorStart} opacity={DOT_OPACITY} />
)} )}
<circle cx={xEnd} cy={yEnd} r={dotRadius} fill={pointColorEnd} opacity={DOT_OPACITY} /> <circle cx={xEnd} cy={yEnd} r={dotRadius} fill={pointColorEnd} opacity={DOT_OPACITY} />
@@ -93,18 +93,20 @@ export const RadialArcPath = memo(
); );
break; break;
case 'glow': case 'glow':
const xStartMark = centerX + radius * Math.cos(endRadians - 0.2); const offsetAngle = toRad(ENDPOINT_MARKER_MIN_ANGLE);
const yStartMark = centerY + radius * Math.sin(endRadians - 0.2); const xStartMark = centerX + radius * Math.cos(endRadians + offsetAngle);
endpointMarks = ( const yStartMark = centerY + radius * Math.sin(endRadians + offsetAngle);
<path endpointMarks =
d={['M', xStartMark, yStartMark, 'A', radius, radius, 0, 0, 1, xEnd, yEnd].join(' ')} arcLengthDeg > ENDPOINT_MARKER_MIN_ANGLE ? (
fill="none" <path
strokeWidth={barWidth} d={['M', xStartMark, yStartMark, 'A', radius, radius, 0, 0, 1, xEnd, yEnd].join(' ')}
stroke={endpointMarkerGlowFilter} fill="none"
strokeLinecap={roundedBars ? 'round' : 'butt'} strokeWidth={barWidth}
filter={glowFilter} stroke={endpointMarkerGlowFilter}
/> strokeLinecap={roundedBars ? 'round' : 'butt'}
); filter={glowFilter}
/>
) : null;
break; break;
default: default:
break; break;