Update test app to represent latest scenarios

microsoft · Dec 27, 2024 · 0946368 · 0946368
1 parent 41036f7
commit 0946368
Show file tree

Hide file tree

Showing 15 changed files with 93 additions and 4,361 deletions.
diff --git a/.gitignore b/.gitignore
@@ -21,3 +21,5 @@
 npm-debug.log*
 yarn-debug.log*
 yarn-error.log*
+
+**/build
diff --git a/apps/plotly_examples/package.json b/apps/plotly_examples/package.json
@@ -3,7 +3,7 @@
   "version": "1.0.0",
   "private": true,
   "dependencies": {
-    "@fluentui/react-charting": "^5.23.29",
+    "@fluentui/react-charting": "^5.23.32",
     "react": "^17.0.2",
     "react-dom": "^17.0.2",
     "react-scripts": "^5.0.1",

diff --git a/apps/plotly_examples/public/index.html b/apps/plotly_examples/public/index.html
@@ -3,7 +3,7 @@
 <head>
     <meta charset="UTF-8">
     <meta name="viewport" content="width=device-width, initial-scale=1.0">
-    <title>React Chart App</title>
+    <title>Fluent charts test app</title>
     <link rel="icon" href="%PUBLIC_URL%/favicon.ico" />
 </head>
 <body>

diff --git a/apps/plotly_examples/src/components/DeclarativeChart.tsx b/apps/plotly_examples/src/components/DeclarativeChart.tsx
@@ -1,13 +1,41 @@
 import * as React from 'react';
 import { Dropdown, IDropdownOption } from '@fluentui/react/lib/Dropdown';
+import { TextField, ITextFieldStyles } from '@fluentui/react/lib/TextField';
 import { DeclarativeChart, DeclarativeChartProps, IDeclarativeChart, Schema } from '@fluentui/react-charting';
-import { Toggle } from '@fluentui/react/lib/Toggle';
+
+interface IErrorBoundaryProps {
+  children: React.ReactNode;
+}
+
+interface IErrorBoundaryState {
+  hasError: boolean;
+  error: string;
+}
+
+class ErrorBoundary extends React.Component<IErrorBoundaryProps, IErrorBoundaryState> {
+  public static getDerivedStateFromError(error: Error) {
+    // Update state so the next render will show the fallback UI.
+    return { hasError: true, error: `${error.message} ${error.stack}` };
+  }
+
+  constructor(props: IErrorBoundaryProps) {
+    super(props);
+    this.state = { hasError: false, error: '' };
+  }
+
+  public render() {
+    if (this.state.hasError) {
+      return <h1>${this.state.error}</h1>;
+    }
+
+    return this.props.children;
+  }
+}
 
 interface IDeclarativeChartState {
   selectedChoice: string;
   selectedSchema: any;
   schemasData: any[];
-  preSelectLegends: boolean;
   selectedLegends: string;
 }
 
@@ -25,28 +53,45 @@ const options: IDropdownOption[] = schemasData.map((data) => ({
 
 const dropdownStyles = { dropdown: { width: 200 } };
 
+const textFieldStyles: Partial<ITextFieldStyles> = { root: { maxWidth: 300 } };
+
 export class DeclarativeChartBasicExample extends React.Component<{}, IDeclarativeChartState> {
   private _declarativeChartRef: React.RefObject<IDeclarativeChart>;
+  private _lastKnownValidLegends: string[] | undefined;
+
   constructor(props: DeclarativeChartProps) {
     super(props);
+    const selectedSchema = schemasData[0]?.schema || {};
+    const { selectedLegends } = selectedSchema as any;
     this.state = {
       selectedChoice: (schemasData[0].schema as { id: string }).id || 'unknown', // Set the first file as the default choice if available
-      selectedSchema: schemasData[0]?.schema || null,
+      selectedSchema: selectedSchema,
       schemasData: schemasData,
-      preSelectLegends: false,
-      selectedLegends: '',
+      selectedLegends: JSON.stringify(selectedLegends),
     };
+
     this._declarativeChartRef = React.createRef();
+    this._lastKnownValidLegends = selectedLegends;
+  }
+
+  public componentDidMount() {
+    document.addEventListener('contextmenu', e => {
+      e.preventDefault();
+    });
   }
 
   private _onChange = (ev: any, option?: IDropdownOption): void => {
     const selectedChoice = option?.key as string;
     const selectedSchema = this.state.schemasData.find((data) => (data.schema as { id: string }).id === selectedChoice)?.schema;
-    this.setState({ selectedChoice, selectedSchema, selectedLegends: '' });
+    const { selectedLegends } = selectedSchema as any;
+    this.setState({ selectedChoice, selectedSchema, selectedLegends: JSON.stringify(selectedLegends) });
   };
 
-  private _onTogglePreselectLegends = (ev: React.MouseEvent<HTMLElement>, checked?: boolean) => {
-    this.setState({ preSelectLegends: checked! });
+  private _onSelectedLegendsEdited = (
+    event: React.FormEvent<HTMLInputElement | HTMLTextAreaElement>,
+    newValue?: string,
+  ): void => {
+    this.setState({ selectedLegends: newValue ?? '' });
   };
 
   private fileSaver(url: string) {
@@ -64,12 +109,24 @@ export class DeclarativeChartBasicExample extends React.Component<{}, IDeclarati
   };
 
   private _createDeclarativeChart(): JSX.Element {
+
+    const uniqueKey = `${this.state.selectedChoice}`;
     const { selectedSchema } = this.state;
+    const { data, layout } = selectedSchema;
     if (!selectedSchema) {
       return <div>No data available</div>;
     }
-    const inputSchema: Schema = { plotlySchema: selectedSchema };
-    const uniqueKey = `${this.state.selectedChoice}_${this.state.preSelectLegends}`;
+    if (this.state.selectedLegends === '') {
+      this._lastKnownValidLegends = undefined;
+    } else {
+      try {
+        this._lastKnownValidLegends = JSON.parse(this.state.selectedLegends);
+      } catch (error) {
+        // Nothing to do here
+      }
+    }
+    const plotlySchema = { data, layout, selectedLegends: this._lastKnownValidLegends };
+    const inputSchema: Schema = { plotlySchema };
     return (
       <>
         <div style={{ display: 'flex' }}>
@@ -81,13 +138,6 @@ export class DeclarativeChartBasicExample extends React.Component<{}, IDeclarati
             styles={dropdownStyles}
           />
           &nbsp;&nbsp;&nbsp;
-          <Toggle
-            label="Pre select legends"
-            onText="ON"
-            offText="OFF"
-            onChange={this._onTogglePreselectLegends}
-            checked={this.state.preSelectLegends}
-          />
         </div>
         <br />
         <button
@@ -104,14 +154,21 @@ export class DeclarativeChartBasicExample extends React.Component<{}, IDeclarati
         <h2>{this.state.selectedChoice}. {selectedSchema.layout.title}</h2>
         <br />
         <br />
-        <DeclarativeChart
-          key={uniqueKey}
-          chartSchema={inputSchema}
-          onSchemaChange={this._handleChartSchemaChanged}
-          componentRef={this._declarativeChartRef}
-        />
+        <ErrorBoundary>
+          <DeclarativeChart
+            key={uniqueKey}
+            chartSchema={inputSchema}
+            onSchemaChange={this._handleChartSchemaChanged}
+            componentRef={this._declarativeChartRef}
+          />
+        </ErrorBoundary>
         <br />
-        Legend selection changed : {this.state.selectedLegends}
+        <TextField
+          label="Current Legend selection"
+          value={this.state.selectedLegends}
+          onChange={this._onSelectedLegendsEdited}
+          styles={textFieldStyles}
+        />
       </>
     );
   }

diff --git a/apps/plotly_examples/src/data/data_1.json → apps/plotly_examples/src/data/data_01.json b/apps/plotly_examples/src/data/data_1.json → apps/plotly_examples/src/data/data_01.json
diff --git a/apps/plotly_examples/src/data/data_2.json → apps/plotly_examples/src/data/data_02.json b/apps/plotly_examples/src/data/data_2.json → apps/plotly_examples/src/data/data_02.json
@@ -76,5 +76,6 @@
       "title": "Sales Volume"
     }
   },
+  "selectedLegends": ["Category A"],
   "id": 2
 }
diff --git a/apps/plotly_examples/src/data/data_3.json → apps/plotly_examples/src/data/data_03.json b/apps/plotly_examples/src/data/data_3.json → apps/plotly_examples/src/data/data_03.json
@@ -19,5 +19,6 @@
   "layout": {
     "title": "Proportion of Sales for March"
   },
+  "selectedLegends": ["Category A", "Category B"],
   "id": 3
 }
diff --git a/apps/plotly_examples/src/data/data_4.json → apps/plotly_examples/src/data/data_04.json b/apps/plotly_examples/src/data/data_4.json → apps/plotly_examples/src/data/data_04.json
@@ -25,5 +25,6 @@
       "title": "Categories"
     }
   },
+  "selectedLegends": ["Category A"],
   "id": 4
 }
diff --git a/apps/plotly_examples/src/data/data_5.json → apps/plotly_examples/src/data/data_05.json b/apps/plotly_examples/src/data/data_5.json → apps/plotly_examples/src/data/data_05.json
@@ -46,5 +46,6 @@
       "title": "Sales"
     }
   },
+  "selectedLegends": ["Category B"],
   "id": 5
 }
diff --git a/apps/plotly_examples/src/data/data_6.json → apps/plotly_examples/src/data/data_06.json b/apps/plotly_examples/src/data/data_6.json → apps/plotly_examples/src/data/data_06.json
diff --git a/apps/plotly_examples/src/data/data_7.json → apps/plotly_examples/src/data/data_07.json b/apps/plotly_examples/src/data/data_7.json → apps/plotly_examples/src/data/data_07.json
diff --git a/apps/plotly_examples/src/data/data_8.json → apps/plotly_examples/src/data/data_08.json b/apps/plotly_examples/src/data/data_8.json → apps/plotly_examples/src/data/data_08.json
diff --git a/apps/plotly_examples/src/data/data_9.json → apps/plotly_examples/src/data/data_09.json b/apps/plotly_examples/src/data/data_9.json → apps/plotly_examples/src/data/data_09.json
-Original file line number
+Diff line change
@@ Expand Up / @@ -76,5 +76,6 @@ @@
           "title": "Sales Volume"
         }
       },
+      "selectedLegends": ["Category A"],
       "id": 2
     }