diff --git a/packages/grafana-ui/src/components/RadialGauge/RadialArcPath.tsx b/packages/grafana-ui/src/components/RadialGauge/RadialArcPath.tsx index f54f3cd6f22..fcaf949bd79 100644 --- a/packages/grafana-ui/src/components/RadialGauge/RadialArcPath.tsx +++ b/packages/grafana-ui/src/components/RadialGauge/RadialArcPath.tsx @@ -1,14 +1,23 @@ import { GaugeDimensions, toRad } from './utils'; -export interface RadialArcPathProps { +export interface RadialArcPathPropsBase { startAngle: number; dimensions: GaugeDimensions; color: string; glowFilter?: string; arcLengthDeg: number; roundedBars?: boolean; + showGuideDots?: boolean; + guideDotColor?: string; } +interface RadialArcPathPropsWithGuideDot extends RadialArcPathPropsBase { + showGuideDots: true; + guideDotColor: string; +} + +type RadialArcPathProps = RadialArcPathPropsBase | RadialArcPathPropsWithGuideDot; + export function RadialArcPath({ startAngle: angle, dimensions, @@ -16,6 +25,8 @@ export function RadialArcPath({ glowFilter, arcLengthDeg, roundedBars, + showGuideDots, + guideDotColor, }: RadialArcPathProps) { const { radius, centerX, centerY, barWidth } = dimensions; @@ -35,18 +46,27 @@ export function RadialArcPath({ const largeArc = arcLengthDeg > 180 ? 1 : 0; const path = ['M', x1, y1, 'A', radius, radius, 0, largeArc, 1, x2, y2].join(' '); + const dotRadius = (barWidth / 2) * 0.4; return ( - + <> + + {showGuideDots && ( + <> + {arcLengthDeg > 5 && } + + + )} + ); } diff --git a/packages/grafana-ui/src/components/RadialGauge/RadialBar.tsx b/packages/grafana-ui/src/components/RadialGauge/RadialBar.tsx index 2bacc3af3e8..2d9d0fbe80d 100644 --- a/packages/grafana-ui/src/components/RadialGauge/RadialBar.tsx +++ b/packages/grafana-ui/src/components/RadialGauge/RadialBar.tsx @@ -47,6 +47,8 @@ export function RadialBar({ color={colorDefs.getMainBarColor()} roundedBars={roundedBars} glowFilter={glowFilter} + showGuideDots={roundedBars} + guideDotColor={colorDefs.getGuideDotColor()} /> {spotlightStroke && angle > 8 && (