Adding filters for test app and fixing dataset ids

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.43</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>
     );
-  }
+}
 

apps/plotly_examples/src/components/DeclarativeChart.tsx

@@ -12,11 +12,27 @@ import {
 import { DeclarativeChart, IDeclarativeChart, Schema } from '@fluentui/react-charting';
 import PlotlyChart from './PlotlyChart';
 import { ErrorBoundary } from './ErrorBoundary';
-import { getSelection, saveSelection } from './utils'
-
+import { getSelection, saveSelection } from './utils';
 interface IDeclarativeChartProps {
 }
 
+type PlotType =
+  | 'All'
+  | 'bar'
+  | 'pie'
+  | 'scatter'
+  | 'heatmap'
+  | 'histogram'
+  | 'sankey'
+  | 'indicator'
+  | 'others';
+
+type DataType =
+  | 'All'
+  | 'general'
+  | 'largeData'
+  | 'localization';
+
 // Use require.context to load all JSON files from the split_data folder
 const requireContext = require.context('../data', false, /\.json$/);
 const schemasData = requireContext.keys().map((fileName: string) => ({
@@ -35,6 +51,9 @@ const DeclarativeChartBasicExample: React.FC<IDeclarativeChartProps> = () => {
   const [selectedChoice, setSelectedChoice] = React.useState<string>(savedFileName);
   const [selectedSchema, setSelectedSchema] = React.useState<any>(_selectedSchema);
   const [selectedLegendsState, setSelectedLegendsState] = React.useState<string>(JSON.stringify(selectedLegends));
+  const [selectedPlotTypes, setSelectedPlotTypes] = React.useState<PlotType[]>(getSelection("PlotType_filter", 'All').split(',') as PlotType[]);
+  const [selectedDataTypes, setSelectedDataTypes] = React.useState<DataType[]>(getSelection("DataType_filter", 'All').split(',') as DataType[]);
+
   const declarativeChartRef = React.useRef<IDeclarativeChart>(null);
   let lastKnownValidLegends: string[] | undefined = selectedLegends;
 
@@ -91,10 +110,100 @@ const DeclarativeChartBasicExample: React.FC<IDeclarativeChartProps> = () => {
     setSelectedLegendsState(JSON.stringify(selectedLegends));
   };
 
+  const getFilteredData = () => {
+    const filteredDataItems = schemasData
+      .filter((data) => {
+        const schemaId = parseInt((data.schema as { id: string }).id, 10);
+        return selectedDataTypes.includes('All') ||
+          (selectedDataTypes.includes('general') && schemaId >= 1 && schemaId <= 252) ||
+          (selectedDataTypes.includes('largeData') && schemaId >= 253 && schemaId <= 277) ||
+          (selectedDataTypes.includes('localization') && schemaId >= 278 && schemaId <= 302);
+      })
+      .filter((data) => {
+        const plotType = (data.schema as any).data[0].type;
+        return selectedPlotTypes.includes('All') ||
+          (selectedPlotTypes.includes('others') && !['bar', 'pie', 'scatter', 'heatmap', 'histogram', 'sankey', 'indicator'].includes(plotType)) ||
+          (selectedPlotTypes.includes(plotType as PlotType));
+      });
+    return filteredDataItems;
+  }
+
+  const handleSelectPlotTypes = (_event: SelectionEvents, data: OptionOnSelectData) => {
+    let newSelectedPlotTypes: PlotType[];
+    if (data.optionValue === 'All') {
+      newSelectedPlotTypes = ['All'];
+    } else {
+      newSelectedPlotTypes = selectedPlotTypes.includes(data.optionValue as PlotType)
+        ? selectedPlotTypes.filter(type => type !== data.optionValue)
+        : [...selectedPlotTypes.filter(type => type !== 'All'), data.optionValue as PlotType];
+      if (newSelectedPlotTypes.length === 0) {
+        newSelectedPlotTypes = ['All'];
+      }
+    }
+    setSelectedPlotTypes(newSelectedPlotTypes as PlotType[]);
+    saveSelection("PlotType_filter", newSelectedPlotTypes.join(','));
+    const filteredSchemas = newSelectedPlotTypes.includes('All') ? schemasData : getFilteredData().filter((schema_data) => {
+      const plotType = (schema_data.schema as any).data[0].type;
+      return newSelectedPlotTypes.includes('All') ||
+        (newSelectedPlotTypes.includes('others') && !['bar', 'pie', 'scatter', 'heatmap', 'histogram', 'sankey', 'indicator'].includes(plotType)) ||
+        (newSelectedPlotTypes.includes(plotType as PlotType));
+    });
+    if (filteredSchemas.length > 0) {
+      const firstFilteredSchema = filteredSchemas[0];
+      setSelectedChoice(firstFilteredSchema.fileName);
+      setSelectedSchema(firstFilteredSchema.schema);
+      setSelectedLegendsState(JSON.stringify((firstFilteredSchema.schema as any).selectedLegends));
+      const fileNumberMatch = firstFilteredSchema.fileName.match(/\d+/);
+      const num_id = fileNumberMatch ? fileNumberMatch[0] : '0';
+      saveSelection("Schema", num_id.toString().padStart(3, '0'));
+    } else {
+      setSelectedChoice('');
+      setSelectedSchema({});
+      setSelectedLegendsState('');
+    }
+  }
+
+  const handleSelectDataTypes = (_event: SelectionEvents, data: OptionOnSelectData) => {
+    let newSelectedDataTypes: DataType[];
+    if (data.optionValue === 'All') {
+      newSelectedDataTypes = ['All'];
+    } else {
+      newSelectedDataTypes = selectedDataTypes.includes(data.optionValue as DataType)
+        ? selectedDataTypes.filter(type => type !== data.optionValue)
+        : [...selectedDataTypes.filter(type => type !== 'All'), data.optionValue as DataType];
+      if (newSelectedDataTypes.length === 0) {
+        newSelectedDataTypes = ['All'];
+      }
+    }
+    setSelectedDataTypes(newSelectedDataTypes as DataType[]);
+    saveSelection("DataType_filter", newSelectedDataTypes.join(','));
+    const filteredSchemas = newSelectedDataTypes.includes('All') ? schemasData : getFilteredData().filter((schema_data) => {
+      const schemaId = parseInt((schema_data.schema as { id: string }).id, 10);
+      return newSelectedDataTypes.includes('All') ||
+        (newSelectedDataTypes.includes('general') && schemaId >= 1 && schemaId <= 252) ||
+        (newSelectedDataTypes.includes('largeData') && schemaId >= 253 && schemaId <= 277) ||
+        (newSelectedDataTypes.includes('localization') && schemaId >= 278 && schemaId <= 302);
+    });
+    if (filteredSchemas.length > 0) {
+      const firstFilteredSchema = filteredSchemas[0];
+      setSelectedChoice(firstFilteredSchema.fileName);
+      setSelectedSchema(firstFilteredSchema.schema);
+      setSelectedLegendsState(JSON.stringify((firstFilteredSchema.schema as any).selectedLegends));
+      const fileNumberMatch = firstFilteredSchema.fileName.match(/\d+/);
+      const num_id = fileNumberMatch ? fileNumberMatch[0] : '0';
+      saveSelection("Schema", num_id.toString().padStart(3, '0'));
+    } else {
+      setSelectedChoice('');
+      setSelectedSchema({});
+      setSelectedLegendsState('');
+    }
+  }
+
   const createDeclarativeChart = (): JSX.Element => {
     const theme = getSelection("Theme", "Light");
-    const uniqueKey = `${selectedChoice}_${theme}`;
-    const plotlyKey = `plotly_${selectedChoice}_${theme}`;
+    const isRTL = getSelection("RTL", "false") === "true";
+    const uniqueKey = `${theme}_${isRTL}`;
+    const plotlyKey = `plotly_${theme}_${isRTL}`;
     const { data, layout } = selectedSchema;
     if (!selectedSchema) {
       return <div>No data available</div>;
@@ -120,14 +229,47 @@ const DeclarativeChartBasicExample: React.FC<IDeclarativeChartProps> = () => {
         <div style={{ display: 'flex' }}>
           <label> Select a schema:</label>&nbsp;&nbsp;&nbsp;
           <Dropdown
-            value={selectedChoice}
+            value={selectedChoice}            
             onOptionSelect={_onChange}
           >
-            {schemasData.map((data) => (
-              <Option value={(data.schema as { id: string }).id}>{data.fileName}</Option>
-            ))}
+            {getFilteredData()
+              .map((data) => (
+                <Option key={data.fileName} value={(data.schema as { id: string }).id}>
+                  {data.fileName}
+                </Option>
+              ))}
           </Dropdown>
           &nbsp;&nbsp;&nbsp;
+          <label> Filter by plot type:</label>&nbsp;&nbsp;&nbsp;
+          <Dropdown
+            value={selectedPlotTypes.join(',')}
+            selectedOptions={selectedPlotTypes}
+            onOptionSelect={handleSelectPlotTypes}
+            multiselect
+          >
+            <Option value="All">All</Option>
+            <Option value="bar">bar</Option>
+            <Option value="scatter">scatter</Option>
+            <Option value="pie">pie</Option>
+            <Option value="heatmap">heatmap</Option>
+            <Option value="histogram">histogram</Option>
+            <Option value="sankey">sankey</Option>
+            <Option value="indicator">indicator</Option>
+            <Option value="others">others</Option>
+          </Dropdown>
+          &nbsp;&nbsp;&nbsp;
+          <label> Filter by data type:</label>&nbsp;&nbsp;&nbsp;
+          <Dropdown
+            value={selectedDataTypes.join(',')}
+            selectedOptions={selectedDataTypes}
+            onOptionSelect={handleSelectDataTypes}
+            multiselect
+          >
+            <Option value='All'>All</Option>
+            <Option value='general'>general</Option>
+            <Option value='largeData'>largeData</Option>
+            <Option value='localization'>localization</Option>
+          </Dropdown>
         </div>
         <br />
         <button

apps/plotly_examples/src/data/data_278_Education_Arabic.json

@@ -59,5 +59,5 @@
         },
         "mode": "group"
     },
-    "id": 393
+    "id": 278
 }

apps/plotly_examples/src/data/data_279_Healthcare_Arabic.json

@@ -89,5 +89,5 @@
         },
         "showlegend": true
     },
-    "id": 394
+    "id": 279
 }

apps/plotly_examples/src/data/data_280_Hospitality_Arabic.json

@@ -74,5 +74,5 @@
             "title": "\u0627\u0644\u0623\u062f\u0627\u0621"
         }
     },
-    "id": 395
+    "id": 280
 }

apps/plotly_examples/src/data/data_281_Automobile_Arabic.json

@@ -75,5 +75,5 @@
         },
         "showlegend": true
     },
-    "id": 396
+    "id": 281
 }

apps/plotly_examples/src/data/data_282_Defence_Arabic.json

@@ -95,5 +95,5 @@
             "side": "right"
         }
     },
-    "id": 397
+    "id": 282
 }

apps/plotly_examples/src/data/data_283_Education_Chinese.json

@@ -98,5 +98,5 @@
             "title": "\u751f\u4ea7\u529b\u5f97\u5206"
         }
     },
-    "id": 398
+    "id": 283
 }

apps/plotly_examples/src/data/data_284_Healthcare_Chinese.json

@@ -70,5 +70,5 @@
             ]
         }
     },
-    "id": 399
+    "id": 284
 }

apps/plotly_examples/src/data/data_285_Hospitality_Chinese.json

@@ -111,5 +111,5 @@
             }
         }
     },
-    "id": 400
+    "id": 285
 }

apps/plotly_examples/src/data/data_286_Automobile_Chinese.json

@@ -74,5 +74,5 @@
             "title": "\u751f\u4ea7\u529b\u5206\u6570 (\u767e\u5206\u6bd4)"
         }
     },
-    "id": 401
+    "id": 286
 }

apps/plotly_examples/src/data/data_287_Defence_Chinese.json

@@ -107,5 +107,5 @@
             "title": "\u6027\u80fd\u6307\u6807"
         }
     },
-    "id": 402
+    "id": 287
 }

apps/plotly_examples/src/data/data_288_Education_German.json

@@ -77,5 +77,5 @@
             "orientation": "h"
         }
     },
-    "id": 403
+    "id": 288
 }