Fix RTL playwright add monosize measure (#285)

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

Author: AtishayMsft

.github/workflows/bundlesize.yml

@@ -28,18 +28,18 @@ jobs:
 
       - uses: actions/setup-node@v3
         with:
-          node-version: 18
+          node-version: '20.x'
           cache: yarn
           cache-dependency-path: ./repo/yarn.lock
 
       - name: "Install dependencies and build upto react-charting"
         run: |
           cd repo
-          yarn && yarn buildto @fluentui/react-charting
+          yarn && yarn nx run react-charting:build
       
       - name: "Run monosize on react-charting"
         run: |
-          cd repo/packages/react-charting
+          cd repo/packages/charts/react-charting
           yarn monosize measure
           mv -f ./dist/bundle-size/monosize.json ./../../../
           cd ./../../../

.github/workflows/plotlyTestCoverage.yml

@@ -152,6 +152,17 @@ jobs:
                 cd contrib_repo/apps/plotly_examples
                 mv playwright-report.json reports/playwright-report-v8.json
                 git add reports/playwright-report-v8.json
+            
+            - name: "Run monosize on react-charting"
+              run: |
+                cd repo1/packages/charts/react-charting
+                yarn monosize measure
+
+            - name: Upload monosize JSON report as artifact
+              uses: actions/upload-artifact@v4
+              with: 
+                name: monosize-report
+                path: repo1/packages/charts/react-charting/dist/bundle-size/monosize.json
 
             - name: Create branch name for scheduled report
               if: github.event_name == 'schedule'

apps/plotly_examples/src/App.tsx

@@ -54,7 +54,7 @@ const App: React.FC = () => {
 
   return (
     <div>
-      <FluentProvider theme={value === "Light" ? webLightTheme : webDarkTheme} targetDocument={document} dir={isRTL ? 'rtl' : 'ltr'}>
+      <FluentProvider theme={value === "Light" ? webLightTheme : webDarkTheme} targetDocument={document}>
         <PortalCompatProvider>
           <Subtitle2> Theme:</Subtitle2>&nbsp;&nbsp;
           <Dropdown

apps/plotly_examples/src/components/DeclarativeChart.tsx

@@ -59,7 +59,7 @@ const dataTypeRanges = {
   'plotly_express_basic': [{ min: 377, max: 427 }, {min: 760, max: 766}],
   'plotly_express_detailed': [{ min: 428, max: 569 }],
   'plotly_express_colors': [{ min: 570, max: 749 }, { min: 768, max: 787 }],
-  'advanced_scenarios': [{min: 788, max: 839}]
+  'advanced_scenarios': [{min: 788, max: 839}, {min: 847, max: 847}]
 };
 
 // Use require.context to load all JSON files from the split_data folder
@@ -85,7 +85,7 @@ const DeclarativeChartBasicExample: React.FC<IDeclarativeChartProps> = () => {
   const [selectedDataTypes, setSelectedDataTypes] = React.useState<DataType[]>(getSelection("DataType_filter", 'All').split(',') as DataType[]);
 
   const declarativeChartRef = React.useRef<IDeclarativeChart>(null);
-  // const declarativeChartV9Ref = React.useRef<IDeclarativeChart>(null);
+  const declarativeChartV9Ref = React.useRef<IDeclarativeChart>(null);
   let lastKnownValidLegends: string[] | undefined = selectedLegends;
 
   React.useEffect(() => {
@@ -357,7 +357,7 @@ const DeclarativeChartBasicExample: React.FC<IDeclarativeChartProps> = () => {
               <DeclarativeChartV9
                 chartSchema={inputSchema}
                 onSchemaChange={_handleChartSchemaChanged}
-                componentRef={declarativeChartRef}
+                componentRef={declarativeChartV9Ref}
               />
             ) : (
               <div style={{ color: 'red', height: '180px', textAlign: 'center', paddingTop: '80px'}}>{ `${selectedChoice}: Error: ${chartType.errorMessage}`}</div>

apps/plotly_examples/src/components/aggregated_chart_types.json

@@ -844,5 +844,6 @@
   "843": "VerticalStackedBar",
   "844": "GroupedVerticalBar",
   "845": "VerticalStackedBar",
-  "846": "VerticalStackedBar"
+  "846": "VerticalStackedBar",
+  "847": "Others"
 }