Atisjai/chart callout fixes

change/@fluentui-react-charts-44bddcc6-c2b6-4612-b1cc-b5872295c51a.json

@@ -0,0 +1,7 @@
+{
+  "type": "patch",
+  "comment": "fix: improve LineChart and GaugeChart callout behavior and formatting",
+  "packageName": "@fluentui/react-charts",
+  "email": "atisjai@microsoft.com",
+  "dependentChangeType": "none"
+}

packages/charts/react-charts/library/etc/react-charts.api.md

@@ -897,14 +897,22 @@ export const GaugeChart: React_2.FunctionComponent<GaugeChartProps>;
 
 // @public
 export interface GaugeChartCalloutData {
+    chartTitle?: string;
     chartValue: number;
     chartValueLabel: string;
     legend: string;
     maxValue: number;
     minValue: number;
+    segments: GaugeChartCalloutSegment[];
     segmentValues: YValueHover[];
 }
 
+// @public
+export interface GaugeChartCalloutSegment extends GaugeChartSegment {
+    end: number;
+    start: number;
+}
+
 // @public
 export interface GaugeChartProps {
     calloutProps?: Partial<ChartPopoverProps>;

packages/charts/react-charts/library/src/components/CommonComponents/CartesianChart.tsx

@@ -531,6 +531,12 @@ export const CartesianChart: React.FunctionComponent<ModifiedCartesianChartProps
     props.onChartMouseLeave && props.onChartMouseLeave();
   }
 
+  function _onChartBlur(event: React.FocusEvent<HTMLDivElement>): void {
+    if (!event.relatedTarget || !event.currentTarget.contains(event.relatedTarget as Node)) {
+      _onChartLeave();
+    }
+  }
+
   function _calculateChartMinWidth(): number {
     // Adding 10px for padding on both sides
     const labelWidth = _calcMaxLabelWidthWithTransform(_tickLabels) + 10;
@@ -746,6 +752,7 @@ export const CartesianChart: React.FunctionComponent<ModifiedCartesianChartProps
       ref={(rootElem: HTMLDivElement) => {
         chartContainer.current = rootElem;
       }}
+      onBlur={_onChartBlur}
       onMouseLeave={_onChartLeave}
     >
       <div className={classes.chartWrapper} {...focusAttributes} {...arrowAttributes}>

packages/charts/react-charts/library/src/components/GaugeChart/GaugeChart.test.tsx

@@ -392,19 +392,26 @@ describe('GaugeChart custom callout', () => {
     {
       segments,
       chartValue: 30,
+      chartTitle: 'Server tick time',
       minValue: 10,
       maxValue: 110,
-      onRenderCallout: (calloutData?: GaugeChartCalloutData) => (
-        <div data-testid="custom-gauge-callout">
-          {calloutData?.legend}: {calloutData?.chartValue} blocks ({calloutData?.minValue}-{calloutData?.maxValue})
-        </div>
-      ),
+      onRenderCallout: (calloutData?: GaugeChartCalloutData) => {
+        const lastSegment = calloutData?.segments.at(-1);
+        return (
+          <div data-testid="custom-gauge-callout">
+            {calloutData?.chartTitle}: {calloutData?.legend}: {calloutData?.chartValue} blocks ({calloutData?.minValue}-
+            {calloutData?.maxValue}); last range {lastSegment?.start}-{lastSegment?.end}
+          </div>
+        );
+      },
     },
     () => {
       const chartSegments = screen.getAllByText((content, element) => element!.tagName.toLowerCase() === 'path');
       fireEvent.mouseOver(chartSegments[0]);
 
-      expect(screen.getByTestId('custom-gauge-callout')).toHaveTextContent('Low Risk: 30 blocks (10-110)');
+      expect(screen.getByTestId('custom-gauge-callout')).toHaveTextContent(
+        'Server tick time: Low Risk: 30 blocks (10-110); last range 77-110',
+      );
     },
   );
 
@@ -414,13 +421,14 @@ describe('GaugeChart custom callout', () => {
     {
       segments,
       chartValue: 30,
+      chartValueFormat: ([value]) => `${value}ms`,
       onRenderCallout: renderDefaultCallout,
     },
     () => {
       const chartSegments = screen.getAllByText((content, element) => element!.tagName.toLowerCase() === 'path');
       fireEvent.mouseOver(chartSegments[0]);
 
-      expect(screen.getByTestId('wrapped-gauge-callout')).toHaveTextContent('Current value is 30/100');
+      expect(screen.getByTestId('wrapped-gauge-callout')).toHaveTextContent('Current value is 30ms');
       expect(screen.getByTestId('wrapped-gauge-callout')).toHaveTextContent('Low Risk');
     },
   );
@@ -504,30 +512,33 @@ describe('GaugeChart rendering and behavior tests', () => {
 
   it('should render the chart value correctly', () => {
     const customChartValue = 'Custom chart value';
+    const formatMilliseconds = ([value]: [number, number]) => (value === 0 ? 'offline' : `${value}ms`);
 
     expect(getChartValueLabel(25, 0, 100)).toBe('25%');
-    expect(getChartValueLabel(25, 0, 100, undefined, true)).toBe('25/100');
+    expect(getChartValueLabel(25, 0, 100, undefined, true)).toBe('25%');
 
     expect(getChartValueLabel(25, 0, 100, GaugeValueFormat.Percentage)).toBe('25%');
-    expect(getChartValueLabel(25, 0, 100, GaugeValueFormat.Percentage, true)).toBe('25/100');
+    expect(getChartValueLabel(25, 0, 100, GaugeValueFormat.Percentage, true)).toBe('25%');
 
     expect(getChartValueLabel(25, 0, 100, GaugeValueFormat.Fraction)).toBe('25/100');
-    expect(getChartValueLabel(25, 0, 100, GaugeValueFormat.Fraction, true)).toBe('25%');
+    expect(getChartValueLabel(25, 0, 100, GaugeValueFormat.Fraction, true)).toBe('25/100');
 
     expect(getChartValueLabel(25, 0, 100, () => customChartValue)).toBe(customChartValue);
-    expect(getChartValueLabel(25, 0, 100, () => customChartValue, true)).toBe('25/100');
+    expect(getChartValueLabel(25, 0, 100, () => customChartValue, true)).toBe(customChartValue);
+    expect(getChartValueLabel(50, 0, 200, formatMilliseconds, true)).toBe('50ms');
+    expect(getChartValueLabel(0, 0, 200, formatMilliseconds, true)).toBe('offline');
 
     expect(getChartValueLabel(125, 100, 200)).toBe('125');
     expect(getChartValueLabel(125, 100, 200, undefined, true)).toBe('125');
 
-    expect(getChartValueLabel(125, 100, 200, GaugeValueFormat.Percentage)).toBe('125');
-    expect(getChartValueLabel(125, 100, 200, GaugeValueFormat.Percentage, true)).toBe('125');
+    expect(getChartValueLabel(125, 100, 200, GaugeValueFormat.Percentage)).toBe('25%');
+    expect(getChartValueLabel(125, 100, 200, GaugeValueFormat.Percentage, true)).toBe('25%');
 
     expect(getChartValueLabel(125, 100, 200, GaugeValueFormat.Fraction)).toBe('125');
     expect(getChartValueLabel(125, 100, 200, GaugeValueFormat.Fraction, true)).toBe('125');
 
     expect(getChartValueLabel(125, 100, 200, () => customChartValue)).toBe(customChartValue);
-    expect(getChartValueLabel(125, 100, 200, () => customChartValue, true)).toBe('125');
+    expect(getChartValueLabel(125, 100, 200, () => customChartValue, true)).toBe(customChartValue);
   });
 });
 

packages/charts/react-charts/library/src/components/GaugeChart/GaugeChart.tsx

@@ -83,25 +83,38 @@ export const getChartValueLabel = (
   chartValueFormat?: GaugeValueFormat | ((sweepFraction: [number, number]) => string),
   forCallout: boolean = false,
 ): string => {
-  if (forCallout) {
-    // When displaying the chart value as a percentage, use fractions in the callout, and vice versa.
-    // This helps clarify the actual value and avoid repetition.
-    return minValue !== 0
-      ? chartValue.toString()
-      : chartValueFormat === 'fraction'
-      ? `${((chartValue / maxValue) * 100).toFixed()}%`
-      : `${chartValue}/${maxValue}`;
+  if (typeof chartValueFormat === 'function') {
+    return chartValueFormat([chartValue - minValue, maxValue - minValue]);
   }
 
-  return typeof chartValueFormat === 'function'
-    ? chartValueFormat([chartValue - minValue, maxValue - minValue])
-    : minValue !== 0
+  if (chartValueFormat === 'percentage') {
+    return `${(((chartValue - minValue) / (maxValue - minValue)) * 100).toFixed()}%`;
+  }
+
+  return minValue !== 0
     ? chartValue.toString()
     : chartValueFormat === 'fraction'
     ? `${chartValue}/${maxValue}`
     : `${((chartValue / maxValue) * 100).toFixed()}%`;
 };
 
+const getCalloutSegmentLabel = (
+  segment: ExtendedSegment,
+  minValue: number,
+  maxValue: number,
+  variant: GaugeChartVariant | undefined,
+  chartValueFormat: GaugeChartProps['chartValueFormat'],
+): string => {
+  if (chartValueFormat === 'percentage' || (!chartValueFormat && minValue === 0)) {
+    const range = maxValue - minValue;
+    const startPercentage = (((segment.start - minValue) / range) * 100).toFixed();
+    const endPercentage = (((segment.end - minValue) / range) * 100).toFixed();
+    return `${startPercentage}% - ${endPercentage}%`;
+  }
+
+  return getSegmentLabel(segment, minValue, maxValue, variant);
+};
+
 interface YValue extends Omit<YValueHover, 'y'> {
   y?: string | number;
 }
@@ -396,7 +409,7 @@ export const GaugeChart: React.FunctionComponent<GaugeChartProps> = React.forwar
         .map(segment => {
           const yValue: YValue = {
             legend: segment.legend,
-            y: getSegmentLabel(segment, _minValue, _maxValue, props.variant),
+            y: getCalloutSegmentLabel(segment, _minValue, _maxValue, props.variant, props.chartValueFormat),
             color: segment.color,
           };
           return yValue;
@@ -726,6 +739,7 @@ export const GaugeChart: React.FunctionComponent<GaugeChartProps> = React.forwar
                 (() => {
                   const calloutData: GaugeChartCalloutData = {
                     legend: calloutLegend,
+                    chartTitle: props.chartTitle,
                     chartValue: props.chartValue,
                     minValue: _minValue,
                     maxValue: _maxValue,
@@ -736,6 +750,7 @@ export const GaugeChart: React.FunctionComponent<GaugeChartProps> = React.forwar
                       props.chartValueFormat,
                       true,
                     ),
+                    segments: _segments,
                     segmentValues: hoverYValues,
                   };
 

packages/charts/react-charts/library/src/components/GaugeChart/GaugeChart.types.ts

@@ -46,6 +46,22 @@ export type GaugeValueFormat = 'percentage' | 'fraction';
  */
 export type GaugeChartVariant = 'single-segment' | 'multiple-segments';
 
+/**
+ * GaugeChart segment data with its calculated range.
+ * {@docCategory GaugeChart}
+ */
+export interface GaugeChartCalloutSegment extends GaugeChartSegment {
+  /**
+   * Start of the segment range.
+   */
+  start: number;
+
+  /**
+   * End of the segment range.
+   */
+  end: number;
+}
+
 /**
  * Data provided to a custom GaugeChart callout renderer.
  * {@docCategory GaugeChart}
@@ -56,6 +72,11 @@ export interface GaugeChartCalloutData {
    */
   legend: string;
 
+  /**
+   * Title of the gauge.
+   */
+  chartTitle?: string;
+
   /**
    * Current value of the gauge.
    */
@@ -76,6 +97,11 @@ export interface GaugeChartCalloutData {
    */
   chartValueLabel: string;
 
+  /**
+   * Gauge segments with their calculated ranges.
+   */
+  segments: GaugeChartCalloutSegment[];
+
   /**
    * Segment values displayed in the default callout.
    */