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 && (