Adding filters for test app and fixing dataset ids

apps/plotly_examples/README.md

@@ -72,3 +72,6 @@ First run the function **generate_visualization_scenarios()**. Then run **genera
 **253 - 277** - Large Dataset
 **278 - 302** - Locale based Dataset
 
+## Map data to the chart types
+
+This function **get_chart_type_from_image()** generates mapping of plotly chart data to the chart types available in fluent charts. Before running this, generate screenshots by running Playwright tests by changing the **getByTestId** in DeclarativeChart.spec.ts to **plotly-plot** which will take screenshots of the plotly charts only. These are then mapped to the charts available in our fluent charting library using the above function.

apps/plotly_examples/python-scripts/generate_plotly_schema.py

@@ -4,6 +4,7 @@
 from azure.identity import ManagedIdentityCredential, DefaultAzureCredential, VisualStudioCodeCredential, InteractiveBrowserCredential, get_bearer_token_provider
 from openai import AzureOpenAI
 import random
+import glob
 
 scenario_dir = 'detailed_scenarios'
 class Scenario(BaseModel):
@@ -330,6 +331,54 @@ def call_llm_detailed_plotly_schema(scenario: str, id: int, suffix: str):
 
     return id
 
+def get_chart_type_from_image():
+    directory_path = os.path.join('..', 'tests', 'Plotly.spec.ts-snapshots')
+    files = glob.glob(os.path.join(directory_path, '*'))
+
+    chart_types = {}
+
+    for file_path in files:
+        # Extract the file number from the file path
+        file_name = os.path.basename(file_path)
+        file_number = file_name.split('-')[3]
+        # padding the file_number with zeros making it a 3 digit number
+        if file_number.isdigit():
+            file_number = file_number.zfill(3)
+
+            with open(file_path, 'rb') as image_file:
+                response_format={ "type": "json_object" }
+                messages = [
+                    {
+                        "role": "system",
+                        "content": "You are an image data analyst having expertize in predicting data visualizations."
+                    }
+                    ,
+                    {
+                        "role": "user",
+                        "content": f"""Refer the image {image_file} and predict the chart type that best fits the data among 'Area', 'Line', 'Donut', 'Pie', 'Guage', 'Horizontal Bar tWithAxis', 'Vertical Bar', 'Vertical Stacked Bar ', 'Grouped Vertical Bar', 'Heatmap', 'Sankey'. Mark the chart type as 'Others' if none of the above types match.  Provide the output in the form of a json object. Categorize the images correctly based on the chart type.
+                        For example: {{"chart_type": "Area"}}"""
+                    }
+                ]
+                response = call_llm(messages, response_format)
+                data = json.loads(response)
+                retry_count = 0
+                while 'chart_type' not in data and retry_count < 3:
+                    response = call_llm(messages, response_format)
+                    data = json.loads(response)
+                    retry_count += 1
+                if retry_count == 3:
+                    print(f"Failed to get chart type for file {file_number}")
+                    continue
+                chart_type = data['chart_type']
+
+                # Map the file number and chart type
+                chart_types[file_number] = chart_type
+
+    chart_types_json = json.dumps(chart_types, indent=2)
+
+    output_path = 'aggregated_chart_types.json'
+    with open(output_path, 'w') as output_file:
+        output_file.write(chart_types_json)    
 
 file_path = 'scenarios_level1.json'
 
@@ -344,4 +393,7 @@ def call_llm_detailed_plotly_schema(scenario: str, id: int, suffix: str):
 # generate_detailed_visualization_schemas()
 
 # Generate locale based schemas
-generate_locale_visualization_schemas()
+# generate_locale_visualization_schemas()
+
+# Generate chart types from screenshots taken by Playwright
+get_chart_type_from_image()

apps/plotly_examples/python-scripts/sort-by-id.py

@@ -0,0 +1,9 @@
+import json
+
+with open('aggregated_chart_types.json', 'r') as file:
+    data = json.load(file)
+
+sorted_data = {key: data[key] for key in sorted(data.keys(), key=lambda x: int(x))}
+
+with open('aggregated_chart_types_sorted.json', 'w') as file:
+    json.dump(sorted_data, file, indent=2)

apps/plotly_examples/src/App.tsx

@@ -1,41 +1,76 @@
 import React from 'react';
-import { 
-  FluentProvider, 
+import {
+  FluentProvider,
   webLightTheme,
   webDarkTheme,
   Dropdown,
   Option,
   SelectionEvents,
   OptionOnSelectData,
   Subtitle2,
-  Body2
+  Body2,
+  Switch,
+  Slider
 } from '@fluentui/react-components';
 import { PortalCompatProvider } from '@fluentui/react-portal-compat';
 import { ChartWrapper } from './components/ChartWrapper';
 import { getSelection, saveSelection } from './components/utils';
+import { setRTL } from '@fluentui/react/lib/Utilities';
+import { SliderOnChangeData } from '@fluentui/react-components';
 
 const App: React.FC = () => {
   const [value, setValue] = React.useState(getSelection("Theme", "Light"));
+  const [isRTL, setisRTL] = React.useState(getSelection("RTL", "false") === "true");
+  const [labelRTLMode, setLabelRTLMode] = React.useState("Enable RTL");
+  const [chartWidth, setChartWidth] = React.useState<number>(Number(getSelection("ChartWidth", window.innerWidth.toString())));
 
+  setRTL(isRTL);
   const onOptionSelect = (event: SelectionEvents, data: OptionOnSelectData): void => {
     setValue(data.optionText ?? "Light");
     saveSelection("Theme", data.optionText ?? "Light");
   };
 
+  const handleRTLSwitchChange = () => {
+    const newIsRTL = !isRTL;
+    setisRTL(newIsRTL);
+    setLabelRTLMode(newIsRTL ? "Disable RTL" : "Enable RTL");
+    setRTL(newIsRTL);
+    saveSelection("RTL", newIsRTL.toString());
+  };
+
+  const handleSliderChange = (event: React.ChangeEvent<HTMLInputElement>, data: SliderOnChangeData) => {
+    setChartWidth(Number(data.value));
+    saveSelection("ChartWidth", data.value.toString());
+  };
+
   return (
     <div>
-      <FluentProvider theme={ value === "Light"? webLightTheme: webDarkTheme} targetDocument={document}>
+      <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>
-            &nbsp;&nbsp;<Body2>@fluentui/react-charting &nbsp;</Body2><Subtitle2>v5.23.46</Subtitle2>
-          <ChartWrapper/>
+            value={value}
+            onOptionSelect={onOptionSelect}
+          >
+            <Option>Light</Option>
+            <Option>Dark</Option>
+          </Dropdown>
+          &nbsp;&nbsp;&nbsp;
+          <Switch
+            checked={isRTL}
+            onChange={handleRTLSwitchChange}
+            label={labelRTLMode}
+          />
+          &nbsp;&nbsp;<Body2>@fluentui/react-charting &nbsp;</Body2><Subtitle2>v5.23.43</Subtitle2>
+          <br />
+          <Subtitle2>Chart Width:</Subtitle2>&nbsp;&nbsp;
+          <Slider
+            min={300}
+            max={window.innerWidth}
+            value={chartWidth}
+            onChange={handleSliderChange}
+          />
+          <ChartWrapper width={chartWidth} />
         </PortalCompatProvider>
       </FluentProvider>
     </div>

apps/plotly_examples/src/components/ChartWrapper.tsx

@@ -3,14 +3,18 @@ import React from 'react';
 import { paletteSlots, semanticSlots } from "../theming/v8TokenMapping";
 import DeclarativeChartBasicExample from './DeclarativeChart';
 
-export function ChartWrapper() {
+interface ChartWrapperProps {
+    width: number;
+}
+
+export function ChartWrapper({ width }: ChartWrapperProps) {
     const v8Theme = createTheme({ palette: paletteSlots, semanticColors: semanticSlots }); //ToDo - Make the slot values dynamic
     return (
-    <ThemeProvider theme={v8Theme}>
-        <div style={{marginLeft: '25px'}}>
-            <DeclarativeChartBasicExample/>
-        </div>
-    </ThemeProvider>
+        <ThemeProvider theme={v8Theme}>
+            <div style={{ marginLeft: '25px', width: width }}>
+                <DeclarativeChartBasicExample />
+            </div>
+        </ThemeProvider>
     );
-  }
+}