fix: Text in sparkline does not render correctly in RTL mode (#29817)

* fix: Text in sparkline does not render correctly in RTL mode * yarn change * sparkline basic example padding reverted * sparkline text textanchor fix
microsoft · Nov 14, 2023 · 73b15f2 · 73b15f2
1 parent 4189b9d
commit 73b15f2
Show file tree

Hide file tree

Showing 4 changed files with 19 additions and 2 deletions.
diff --git a/change/@fluentui-react-charting-51f43c57-5f52-424a-a747-874776dcb240.json b/change/@fluentui-react-charting-51f43c57-5f52-424a-a747-874776dcb240.json
@@ -0,0 +1,7 @@
+{
+  "type": "patch",
+  "comment": "fix: Text in sparkline does not render correctly in RTL mode",
+  "packageName": "@fluentui/react-charting",
+  "email": "[email protected]",
+  "dependentChangeType": "patch"
+}
diff --git a/packages/react-charting/src/components/Sparkline/Sparkline.base.tsx b/packages/react-charting/src/components/Sparkline/Sparkline.base.tsx
@@ -4,7 +4,7 @@ import { area as d3Area, line as d3Line, curveLinear as d3curveLinear } from 'd3
 import { max as d3Max, extent as d3Extent } from 'd3-array';
 import { FocusZone, FocusZoneDirection } from '@fluentui/react-focus';
 import { ILineChartDataPoint } from '../../types/IDataPoint';
-import { classNamesFunction, getId } from '@fluentui/react/lib/Utilities';
+import { classNamesFunction, getId, getRTL } from '@fluentui/react/lib/Utilities';
 import { ISparklineProps, ISparklineStyleProps, ISparklineStyles } from '../../index';
 
 const getClassNames = classNamesFunction<ISparklineStyleProps, ISparklineStyles>();
@@ -32,6 +32,7 @@ export class SparklineBase extends React.Component<ISparklineProps, ISparklineSt
   private area: any;
   private line: any;
   private _emptyChartId: string;
+  private _isRTL: boolean = getRTL();
 
   constructor(props: ISparklineProps) {
     super(props);
@@ -125,7 +126,14 @@ export class SparklineBase extends React.Component<ISparklineProps, ISparklineSt
           )}
           {this.props.showLegend && this.props.data!.lineChartData![0].legend ? (
             <svg width={this.state._valueTextWidth} height={this.state._height} data-is-focusable={true}>
-              <text x="0%" dx={8} y="100%" dy={-5} className={classNames.valueText}>
+              <text
+                x="0%"
+                textAnchor={this._isRTL ? 'end' : 'start'}
+                dx={8}
+                y="100%"
+                dy={-5}
+                className={classNames.valueText}
+              >
                 {this.props.data!.lineChartData![0].legend!}
               </text>
             </svg>

diff --git a/packages/react-charting/src/components/Sparkline/__snapshots__/Sparkline.test.tsx.snap b/packages/react-charting/src/components/Sparkline/__snapshots__/Sparkline.test.tsx.snap
@@ -62,6 +62,7 @@ exports[`Sparkline snapShot testing renders Sparkline correctly 1`] = `
             }
         dx={8}
         dy={-5}
+        textAnchor="start"
         x="0%"
         y="100%"
       >

diff --git a/packages/react-charting/src/components/Sparkline/__snapshots__/SparklineRTL.test.tsx.snap b/packages/react-charting/src/components/Sparkline/__snapshots__/SparklineRTL.test.tsx.snap
@@ -104,6 +104,7 @@ exports[`Sparkline snapShot testing renders Sparkline correctly 1`] = `
             }
         dx={8}
         dy={-5}
+        textAnchor="start"
         x="0%"
         y="100%"
       >
-Original file line number
+Diff line change
@@ Expand Up @@
                 }
             dx={8}
             dy={-5}
+            textAnchor="start"
             x="0%"
             y="100%"
           >
@@ Expand Down @@