Adding interactive tests for dynamic donut chart inner text

microsoft · Feb 6, 2023 · 62a5b7f · 62a5b7f
1 parent 322ca58
commit 62a5b7f
Showing 1 changed file with 29 additions and 0 deletions.
diff --git a/packages/react-examples/src/react-charting/DonutChart/DonutChart.Dynamic.Example.tsx b/packages/react-examples/src/react-charting/DonutChart/DonutChart.Dynamic.Example.tsx
@@ -5,6 +5,7 @@ import { DefaultButton } from '@fluentui/react/lib/Button';
 
 export interface IExampleState {
   dynamicData: IChartDataPoint[];
+  dynamicInnerText: string;
 }
 
 export class DonutChartDynamicExample extends React.Component<IDonutChartProps, IExampleState> {
@@ -21,6 +22,16 @@ export class DonutChartDynamicExample extends React.Component<IDonutChartProps,
     [DefaultPalette.neutralTertiary, DefaultPalette.neutralSecondary, DefaultPalette.neutralPrimary],
   ];
 
+  private _innerText = [
+    '39,000',
+    'Incomprehensibilities',
+    'Tasks are incomprehensible',
+    'It is done',
+    'Handling central text overflow and adding tooltip for donut charts',
+    'Incomprehensibilities happen for texts that are not truncated',
+    '53 やるべきことが残っている',
+  ];
+
   constructor(props: IDonutChartProps) {
     super(props);
     this.state = {
@@ -30,10 +41,12 @@ export class DonutChartDynamicExample extends React.Component<IDonutChartProps,
         { legend: 'third', data: 30, color: '#4f67ed' },
         { legend: 'fourth', data: 10, color: '#ae8c00' },
       ],
+      dynamicInnerText: '39,000',
     };
 
     this._changeData = this._changeData.bind(this);
     this._changeColors = this._changeColors.bind(this);
+    this._changeInnerText = this._changeInnerText.bind(this);
   }
 
   public render(): JSX.Element {
@@ -49,9 +62,11 @@ export class DonutChartDynamicExample extends React.Component<IDonutChartProps,
           legendProps={{
             allowFocusOnLegends: true,
           }}
+          valueInsideDonut={this.state.dynamicInnerText}
         />
         <DefaultButton text="Change data" onClick={this._changeData} />
         <DefaultButton text="Change colors" onClick={this._changeColors} />
+        <DefaultButton text="Change inner text" onClick={this._changeInnerText} />
       </div>
     );
   }
@@ -83,11 +98,25 @@ export class DonutChartDynamicExample extends React.Component<IDonutChartProps,
     });
   }
 
+  private _changeInnerText(): void {
+    this.setState({
+      dynamicInnerText: this._randomInnerText(),
+    });
+  }
+
   private _randomY(max: number): number {
     return Math.floor(Math.random() * max + 5);
   }
 
   private _randomColor(index: number): string {
     return this._colors[index][Math.floor(Math.random() * this._colors[index].length)];
   }
+
+  private _randomInnerText(): string {
+    console.log(
+      'Math.floor(Math.random() * this._innerText.length = ',
+      Math.floor(Math.random() * this._innerText.length),
+    );
+    return this._innerText[Math.floor(Math.random() * this._innerText.length)];
+  }
 }