update plotly test app (#105)

* Create v9 theme wrapper

* Use v9 dropdown control

* Add portal compat provider

* Address comments

---------

Co-authored-by: Atishay Jain (from Dev Box) <[email protected]>

Author: AtishayMsft

apps/plotly_examples/.vscode/settings.json

@@ -0,0 +1,4 @@
+{
+    "appService.defaultWebAppToDeploy": "undefined/subscriptions/394a341b-4f31-4bea-8f00-9577217a04d2/resourceGroups/loopback/providers/Microsoft.Web/sites/fluentchartstest",
+    "appService.deploySubpath": "build"
+}

apps/plotly_examples/package-lock.json

@@ -4,6 +4,10 @@
   "private": true,
   "dependencies": {
     "@fluentui/react-charting": "^5.23.32",
+    "@fluentui/react-portal-compat": "9.0.176",
+    "@fluentui/react-components": "^9.21.0",
+    "@types/d3-color": "^3.1.1",
+    "d3-color": "^3.1.0",
     "react": "^17.0.2",
     "react-dom": "^17.0.2",
     "react-scripts": "^5.0.1",

apps/plotly_examples/package.json

@@ -1,11 +1,39 @@
 import React from 'react';
-import { DeclarativeChartBasicExample } from './components/DeclarativeChart';
+import { 
+  FluentProvider, 
+  webLightTheme,
+  webDarkTheme,
+  Dropdown,
+  Option,
+  SelectionEvents,
+  OptionOnSelectData,
+  Subtitle2
+} from '@fluentui/react-components';
+import { PortalCompatProvider } from '@fluentui/react-portal-compat';
+import { ChartWrapper } from './components/ChartWrapper';
 
 const App: React.FC = () => {
+  const [value, setValue] = React.useState("Light");
+
+  const onOptionSelect = (event: SelectionEvents, data: OptionOnSelectData): void => {
+    setValue(data.optionText ?? "Light");
+  };
+
   return (
     <div>
-      <h1>Data Visualization</h1>
-      <DeclarativeChartBasicExample />
+      <FluentProvider theme={ value === "Light"? webLightTheme: webDarkTheme} targetDocument={document}>
+        <PortalCompatProvider>
+          <Subtitle2> Theme:</Subtitle2>&nbsp;&nbsp;
+          <Dropdown
+              value={value}
+              onOptionSelect={onOptionSelect}
+            >
+              <Option>Light</Option>
+              <Option>Dark</Option>
+            </Dropdown>
+          <ChartWrapper />
+        </PortalCompatProvider>
+      </FluentProvider>
     </div>
   );
 };

apps/plotly_examples/src/App.tsx

@@ -0,0 +1,16 @@
+import { ThemeProvider, createTheme } from '@fluentui/react'
+import React from 'react';
+import { Subtitle1 } from "@fluentui/react-components";
+import { paletteSlots, semanticSlots } from "../theming/v8TokenMapping";
+import { DeclarativeChartBasicExample } from './DeclarativeChart';
+
+export function ChartWrapper() {
+    const v8Theme = createTheme({ palette: paletteSlots, semanticColors: semanticSlots }); //ToDo - Make the slot values dynamic
+    return (
+    <ThemeProvider theme={v8Theme}>
+        <Subtitle1 align="center" style={{marginLeft:'30%'}}>Declarative chart using plotly schema</Subtitle1>
+        <DeclarativeChartBasicExample />
+    </ThemeProvider>
+    );
+  }
+  

apps/plotly_examples/src/components/ChartWrapper.tsx

@@ -1,6 +1,12 @@
 import * as React from 'react';
-import { Dropdown, IDropdownOption } from '@fluentui/react/lib/Dropdown';
 import { TextField, ITextFieldStyles } from '@fluentui/react/lib/TextField';
+import { 
+  Dropdown,
+  Option,
+  SelectionEvents,
+  OptionOnSelectData,
+  Subtitle2
+} from '@fluentui/react-components';
 import { DeclarativeChart, DeclarativeChartProps, IDeclarativeChart, Schema } from '@fluentui/react-charting';
 
 interface IErrorBoundaryProps {
@@ -46,11 +52,6 @@ const schemasData = requireContext.keys().map((fileName: string) => ({
   schema: requireContext(fileName),
 }));
 
-const options: IDropdownOption[] = schemasData.map((data) => ({
-  key: (data.schema as { id: string }).id,
-  text: data.fileName,
-}));
-
 const dropdownStyles = { dropdown: { width: 200 } };
 
 const textFieldStyles: Partial<ITextFieldStyles> = { root: { maxWidth: 300 } };
@@ -64,7 +65,7 @@ export class DeclarativeChartBasicExample extends React.Component<{}, IDeclarati
     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
+      selectedChoice: (schemasData[0].fileName) || 'unknown', // Set the first file as the default choice if available
       selectedSchema: selectedSchema,
       schemasData: schemasData,
       selectedLegends: JSON.stringify(selectedLegends),
@@ -80,9 +81,9 @@ export class DeclarativeChartBasicExample extends React.Component<{}, IDeclarati
     });
   }
 
-  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;
+  private _onChange = (event: SelectionEvents, data: OptionOnSelectData): void => {
+    const selectedChoice = data.optionText!;
+    const selectedSchema = this.state.schemasData.find((s) => (s.schema as { id: string }).id === data.optionValue!)?.schema;
     const { selectedLegends } = selectedSchema as any;
     this.setState({ selectedChoice, selectedSchema, selectedLegends: JSON.stringify(selectedLegends) });
   };
@@ -130,13 +131,15 @@ export class DeclarativeChartBasicExample extends React.Component<{}, IDeclarati
     return (
       <>
         <div style={{ display: 'flex' }}>
-          <Dropdown
-            label="Select a schema"
-            options={options}
-            onChange={this._onChange}
-            selectedKey={this.state.selectedChoice}
-            styles={dropdownStyles}
-          />
+          <label> Select a schema:</label>&nbsp;&nbsp;&nbsp;
+        <Dropdown
+            value={this.state.selectedChoice}
+            onOptionSelect={this._onChange}
+          >
+            {schemasData.map((data) => (
+            <Option value={(data.schema as { id: string }).id}>{data.fileName}</Option>
+        ))}
+          </Dropdown>
           &nbsp;&nbsp;&nbsp;
         </div>
         <br />
@@ -147,12 +150,12 @@ export class DeclarativeChartBasicExample extends React.Component<{}, IDeclarati
             });
           }}
         >
-          Download
+          Download as Image
         </button>
         <div data-testid="chart-container" >
           <br />
           <br />
-          <h2>{this.state.selectedChoice}. {selectedSchema.layout.title}</h2>
+          <Subtitle2>{selectedSchema.layout.title}</Subtitle2>
           <br />
           <br />
           <ErrorBoundary>