Skip to content

Commit d535179

Browse files
v-baambativ-baambati
authored
Added toggle to reverse the chart order (#601)
* Added Show Fluent v8 Chart swich and respective functionality * Updated code to display charts in reverse order based on toggle * Updated code to display charts in reverse order based on toggle * updated param names * updated param names
1 parent 2957c51 commit d535179

File tree

3 files changed

+123
-62
lines changed

3 files changed

+123
-62
lines changed

‎apps/plotly_examples/src/App.tsx‎

Lines changed: 17 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -22,8 +22,10 @@ const App: React.FC = () => {
2222
const [value, setValue] = React.useState(getSelection("Theme", "Light"));
2323
const [isRTL, setisRTL] = React.useState(getSelection("RTL", "false") === "true");
2424
const [isWidthSet, setisWidthSet] = React.useState(getSelection("WidthSet", "true") === "true");
25+
const [isV9ChartFirst, setIsV9ChartFirst] = React.useState(getSelection("isV9ChartFirst", "false") === "true");
2526
const [labelRTLMode, setLabelRTLMode] = React.useState("Enable RTL");
2627
const [labelWidthSwitch, setLabelWidthSwitch] = React.useState("Disable Width slider");
28+
const [labelChartOrderSwitch] = React.useState("Mean the Chart Order");
2729
const [chartWidth, setChartWidth] = React.useState<number>(Number(getSelection("ChartWidth", window.innerWidth.toString())));
2830

2931
setRTL(isRTL);
@@ -47,6 +49,12 @@ const App: React.FC = () => {
4749
saveSelection("WidthSet", newIsWidthSet.toString());
4850
};
4951

52+
const handleChartOrderSwitchChange = () => {
53+
const newIsV9ChartFirst = !isV9ChartFirst;
54+
setIsV9ChartFirst(newIsV9ChartFirst);
55+
saveSelection("isV9ChartFirst", newIsV9ChartFirst.toString());
56+
};
57+
5058
const handleSliderChange = (event: React.ChangeEvent<HTMLInputElement>, data: SliderOnChangeData) => {
5159
setChartWidth(Number(data.value));
5260
saveSelection("ChartWidth", data.value.toString());
@@ -76,6 +84,11 @@ const App: React.FC = () => {
7684
onChange={handleWidthSwitchChange}
7785
label={labelWidthSwitch}
7886
/>
87+
<Switch
88+
checked={isV9ChartFirst}
89+
onChange={handleChartOrderSwitchChange}
90+
label={labelChartOrderSwitch}
91+
/>
7992
&nbsp;&nbsp;<Body2>@fluentui/react-charting &nbsp;</Body2><Subtitle2>v5.25.2</Subtitle2>
8093
&nbsp;&nbsp;<Body2>@fluentui/react-charts &nbsp;</Body2><Subtitle2>0.0.0-nightly-20251110-0407.1</Subtitle2>
8194
<br />
@@ -87,7 +100,10 @@ const App: React.FC = () => {
87100
value={chartWidth}
88101
onChange={handleSliderChange}
89102
/></>)}
90-
<ChartWrapper width={isWidthSet ? chartWidth : undefined} />
103+
<ChartWrapper
104+
width={isWidthSet ? chartWidth : undefined}
105+
isReversedOrder={isV9ChartFirst}
106+
/>
91107
</PortalCompatProvider>
92108
</FluentProvider>
93109
</div>

‎apps/plotly_examples/src/components/ChartWrapper.tsx‎

Lines changed: 3 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -5,14 +5,15 @@ import DeclarativeChartBasicExample from './DeclarativeChart';
55

66
interface ChartWrapperProps {
77
width: number| undefined;
8+
isReversedOrder?: boolean;
89
}
910

10-
export function ChartWrapper({ width }: ChartWrapperProps) {
11+
export function ChartWrapper({ width, isReversedOrder }: ChartWrapperProps) {
1112
const v8Theme = createTheme({ palette: paletteSlots, semanticColors: semanticSlots }); //ToDo - Make the slot values dynamic
1213
return (
1314
<ThemeProvider theme={v8Theme}>
1415
<div style={{ marginLeft: '25px', ...(width !== undefined && { width }) }}>
15-
<DeclarativeChartBasicExample />
16+
<DeclarativeChartBasicExample isReversedOrder={isReversedOrder} />
1617
</div>
1718
</ThemeProvider>
1819
);

‎apps/plotly_examples/src/components/DeclarativeChart.tsx‎

Lines changed: 103 additions & 59 deletions
Original file line numberDiff line numberDiff line change
@@ -23,6 +23,7 @@ import { mapFluentChart } from '@fluentui/chart-utilities';
2323
import { DeclarativeChart as DeclarativeChartV9 } from '@fluentui/react-charts'
2424

2525
interface IDeclarativeChartProps {
26+
isReversedOrder?: boolean;
2627
}
2728

2829

@@ -82,7 +83,7 @@ const schemasData = requireContext.keys().map((fileName: string) => ({
8283

8384
const textFieldStyles: Partial<ITextFieldStyles> = { root: { maxWidth: 300 } };
8485

85-
const DeclarativeChartBasicExample: React.FC<IDeclarativeChartProps> = () => {
86+
const DeclarativeChartBasicExample: React.FC<IDeclarativeChartProps> = ({ isReversedOrder = false }) => {
8687
const savedOptionStr = getSelection(SCHEMA_KEY, SCHEMA_KEY_DEFAULT);
8788
const savedOption = parseInt(savedOptionStr, 10) - 1; // To handle 0 based index
8889
const savedFileName = `data_${savedOptionStr}.json`;
@@ -247,6 +248,100 @@ const DeclarativeChartBasicExample: React.FC<IDeclarativeChartProps> = () => {
247248
}
248249
};
249250

251+
// Render V8 Chart section
252+
const renderV8Chart = (chartType: OutputChartType, inputSchema: Schema, chartTitle: string) => (
253+
<>
254+
<Subtitle1 align="center" style={{ marginLeft: '30%' }}>Declarative chart from fluent v8</Subtitle1>
255+
<div data-testid="chart-container">
256+
<br />
257+
<br />
258+
<ErrorBoundary key={`${selectedChoice}_error-boundary-v8`}>
259+
<Subtitle2>{chartTitle}</Subtitle2>
260+
<Divider />
261+
<br />
262+
<br />
263+
{chartType.isValid ? (
264+
<DeclarativeChart
265+
chartSchema={inputSchema}
266+
onSchemaChange={_handleChartSchemaChanged}
267+
componentRef={declarativeChartRef}
268+
/>
269+
) : (
270+
<div style={{ color: 'red', height: '180px', textAlign: 'center', paddingTop: '80px' }}>
271+
{`${selectedChoice}: Error: ${chartType.errorMessage}`}
272+
</div>
273+
)}
274+
</ErrorBoundary>
275+
</div>
276+
<br />
277+
<TextField
278+
label="Current Legend selection"
279+
value={selectedLegendsState}
280+
onChange={_onSelectedLegendsEdited}
281+
styles={textFieldStyles}
282+
disabled={isJsonInputEnabled}
283+
/>
284+
</>
285+
);
286+
287+
// Render V9 Chart section
288+
const renderV9Chart = (chartType: OutputChartType, inputSchema: Schema, chartTitle: string) => (
289+
<>
290+
<Subtitle2>Charts v9</Subtitle2>
291+
<div data-testid="chart-container-v9">
292+
<br />
293+
<br />
294+
<ErrorBoundary key={`${selectedChoice}_error-boundary-v9`}>
295+
<Subtitle2>{chartTitle}</Subtitle2>
296+
<Divider />
297+
<br />
298+
<br />
299+
{chartType.isValid ? (
300+
<DeclarativeChartV9
301+
chartSchema={inputSchema}
302+
onSchemaChange={_handleChartSchemaChanged}
303+
componentRef={declarativeChartV9Ref}
304+
/>
305+
) : (
306+
<div style={{ color: 'red', height: '180px', textAlign: 'center', paddingTop: '80px' }}>
307+
{`${selectedChoice}: Error: ${chartType.errorMessage}`}
308+
</div>
309+
)}
310+
</ErrorBoundary>
311+
</div>
312+
<br />
313+
</>
314+
);
315+
316+
// Render Plotly Chart section
317+
const renderPlotlyChart = (plotlySchemaCopy: any, plotlyKey: string) => (
318+
<div key={plotlyKey} data-testid="plotly-plot">
319+
<Divider />
320+
<br />
321+
<Subtitle1 align="center" style={{ marginLeft: '30%' }}>Chart from plotly.js</Subtitle1>
322+
<br />
323+
<br />
324+
<ErrorBoundary>
325+
<PlotlyChart schema={plotlySchemaCopy} />
326+
</ErrorBoundary>
327+
</div>
328+
);
329+
330+
// Get chart components in the correct order
331+
const getChartsInOrder = (chartType: OutputChartType, inputSchema: Schema, chartTitle: string, plotlySchemaCopy: any, plotlyKey: string) => {
332+
const v8Chart = renderV8Chart(chartType, inputSchema, chartTitle);
333+
const v9Chart = renderV9Chart(chartType, inputSchema, chartTitle);
334+
const plotlyChart = renderPlotlyChart(plotlySchemaCopy, plotlyKey);
335+
336+
if (isReversedOrder) {
337+
// Reversed order: V9 → Plotly → V8
338+
return [v9Chart, plotlyChart, v8Chart];
339+
} else {
340+
// Default order: V8 → Plotly → V9
341+
return [v8Chart, plotlyChart, v9Chart];
342+
}
343+
};
344+
250345
const createDeclarativeChart = (): React.JSX.Element => {
251346
const theme = getSelection("Theme", "Light");
252347
const isRTL = getSelection("RTL", "false") === "true";
@@ -371,65 +466,14 @@ const DeclarativeChartBasicExample: React.FC<IDeclarativeChartProps> = () => {
371466
>
372467
Download as Image
373468
</button>
374-
375-
<div data-testid="chart-container" >
376-
<br />
377-
<br />
378-
<ErrorBoundary key={`${selectedChoice}_error-boundary-v8`}>
379-
<Subtitle2>{chartTitle}</Subtitle2>
380-
<Divider />
381-
<br />
382-
<br />
383-
{chartType.isValid ? (
384-
<DeclarativeChart
385-
chartSchema={inputSchema}
386-
onSchemaChange={_handleChartSchemaChanged}
387-
componentRef={declarativeChartRef}
388-
/>
389-
) : (
390-
<div style={{ color: 'red', height: '180px', textAlign: 'center', paddingTop: '80px' }}>{`${selectedChoice}: Error: ${chartType.errorMessage}`}</div>
391-
)}
392-
</ErrorBoundary>
393-
</div>
394469
<br />
395-
<TextField
396-
label="Current Legend selection"
397-
value={selectedLegendsState}
398-
onChange={_onSelectedLegendsEdited}
399-
styles={textFieldStyles}
400-
disabled={isJsonInputEnabled}
401-
/>
402-
<br />
403-
<div key={plotlyKey} data-testid="plotly-plot">
404-
<Divider />
405-
<br />
406-
<Subtitle1 align="center" style={{ marginLeft: '30%' }}>Chart from plotly.js</Subtitle1>
407-
<br />
408-
<br />
409-
<ErrorBoundary>
410-
<PlotlyChart schema={plotlySchemaCopy} />
411-
</ErrorBoundary>
412-
</div>
413-
<Subtitle2>Charts v9</Subtitle2>
414-
<div data-testid="chart-container-v9" >
415-
<br />
416-
<br />
417-
<ErrorBoundary key={`${selectedChoice}_error-boundary-v9`}>
418-
<Subtitle2>{chartTitle}</Subtitle2>
419-
<Divider />
420-
<br />
421-
<br />
422-
{chartType.isValid ? (
423-
<DeclarativeChartV9
424-
chartSchema={inputSchema}
425-
onSchemaChange={_handleChartSchemaChanged}
426-
componentRef={declarativeChartV9Ref}
427-
/>
428-
) : (
429-
<div style={{ color: 'red', height: '180px', textAlign: 'center', paddingTop: '80px' }}>{`${selectedChoice}: Error: ${chartType.errorMessage}`}</div>
430-
)}
431-
</ErrorBoundary>
432-
</div>
470+
471+
{/* Render charts in the specified order */}
472+
{getChartsInOrder(chartType, inputSchema, chartTitle, plotlySchemaCopy, plotlyKey).map((chart, index) => (
473+
<div key={`chart-section-${index}`}>
474+
{chart}
475+
</div>
476+
))}
433477
</div>
434478
);
435479
};

0 commit comments

Comments
 (0)