Gauge: Add guide dots for rounded bars to help with accuracy

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 (
-    <path
-      d={path}
-      fill="none"
-      fillOpacity="1"
-      stroke={color}
-      strokeOpacity="1"
-      strokeWidth={barWidth}
-      filter={glowFilter}
-      strokeLinecap={roundedBars ? 'round' : 'butt'}
-      className="radial-arc-path"
-    />
+    <>
+      <path
+        d={path}
+        fill="none"
+        fillOpacity="1"
+        stroke={color}
+        strokeOpacity="1"
+        strokeWidth={barWidth}
+        filter={glowFilter}
+        strokeLinecap={roundedBars ? 'round' : 'butt'}
+        className="radial-arc-path"
+      />
+      {showGuideDots && (
+        <>
+          {arcLengthDeg > 5 && <circle cx={x1} cy={y1} r={dotRadius} fill={guideDotColor} opacity={0.75} />}
+          <circle cx={x2} cy={y2} r={dotRadius} fill={guideDotColor} opacity={0.75} />
+        </>
+      )}
+    </>
   );
 }

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

packages/grafana-ui/src/components/RadialGauge/RadialColorDefs.tsx

@@ -135,6 +135,12 @@ export class RadialColorDefs {
     return this.getColor(this.options.fieldDisplay.display.color ?? FALLBACK_COLOR);
   }
 
+  getGuideDotColor(): string {
+    return this.getColor(
+      this.options.theme.colors.getContrastText(this.options.fieldDisplay.display.color ?? FALLBACK_COLOR)
+    );
+  }
+
   getDefs(): React.ReactNode[] {
     return this.defs;
   }