From 472eb55d39e9feb5bb8606f5e49e43fa00c2ccf9 Mon Sep 17 00:00:00 2001 From: srmukher Date: Thu, 23 Jan 2025 14:44:21 +0530 Subject: [PATCH 1/6] Adding filters for test app amd fixing dataset ids --- apps/plotly_examples/src/App.tsx | 59 +++++-- .../src/components/ChartWrapper.tsx | 18 +- .../src/components/DeclarativeChart.tsx | 158 +++++++++++++++++- .../src/data/data_278_Education_Arabic.json | 2 +- .../src/data/data_279_Healthcare_Arabic.json | 2 +- .../src/data/data_280_Hospitality_Arabic.json | 2 +- .../src/data/data_281_Automobile_Arabic.json | 2 +- .../src/data/data_282_Defence_Arabic.json | 2 +- .../src/data/data_283_Education_Chinese.json | 2 +- .../src/data/data_284_Healthcare_Chinese.json | 2 +- .../data/data_285_Hospitality_Chinese.json | 2 +- .../src/data/data_286_Automobile_Chinese.json | 2 +- .../src/data/data_287_Defence_Chinese.json | 2 +- .../src/data/data_288_Education_German.json | 2 +- .../src/data/data_289_Healthcare_German.json | 2 +- .../src/data/data_290_Hospitality_German.json | 2 +- .../src/data/data_291_Automobile_German.json | 2 +- .../src/data/data_292_Defence_German.json | 2 +- .../src/data/data_293_Education_Italian.json | 2 +- .../src/data/data_294_Healthcare_Italian.json | 2 +- .../data/data_295_Hospitality_Italian.json | 2 +- .../src/data/data_296_Automobile_Italian.json | 2 +- .../src/data/data_297_Defence_Italian.json | 2 +- .../src/data/data_298_Education_Japanese.json | 2 +- .../data/data_299_Healthcare_Japanese.json | 2 +- .../data/data_300_Hospitality_Japanese.json | 2 +- .../data/data_301_Automobile_Japanese.json | 2 +- .../src/data/data_302_Defence_Japanese.json | 2 +- 28 files changed, 233 insertions(+), 52 deletions(-) diff --git a/apps/plotly_examples/src/App.tsx b/apps/plotly_examples/src/App.tsx index 21fac21370..a95f060423 100644 --- a/apps/plotly_examples/src/App.tsx +++ b/apps/plotly_examples/src/App.tsx @@ -1,6 +1,6 @@ import React from 'react'; -import { - FluentProvider, +import { + FluentProvider, webLightTheme, webDarkTheme, Dropdown, @@ -8,34 +8,69 @@ import { 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(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, data: SliderOnChangeData) => { + setChartWidth(Number(data.value)); + saveSelection("ChartWidth", data.value.toString()); + }; + return (
- + Theme:   - - - -   @fluentui/react-charting  v5.23.43 - + value={value} + onOptionSelect={onOptionSelect} + > + + + +     + +   @fluentui/react-charting  v5.23.43 +
+ Chart Width:   + +
diff --git a/apps/plotly_examples/src/components/ChartWrapper.tsx b/apps/plotly_examples/src/components/ChartWrapper.tsx index 81bbdc203a..4355db64b9 100644 --- a/apps/plotly_examples/src/components/ChartWrapper.tsx +++ b/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 ( - -
- -
- + +
+ +
+ ); - } +} \ No newline at end of file diff --git a/apps/plotly_examples/src/components/DeclarativeChart.tsx b/apps/plotly_examples/src/components/DeclarativeChart.tsx index 32a791a7e4..ba065bf0b9 100644 --- a/apps/plotly_examples/src/components/DeclarativeChart.tsx +++ b/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 = () => { const [selectedChoice, setSelectedChoice] = React.useState(savedFileName); const [selectedSchema, setSelectedSchema] = React.useState(_selectedSchema); const [selectedLegendsState, setSelectedLegendsState] = React.useState(JSON.stringify(selectedLegends)); + const [selectedPlotTypes, setSelectedPlotTypes] = React.useState(getSelection("PlotType_filter", 'All').split(',') as PlotType[]); + const [selectedDataTypes, setSelectedDataTypes] = React.useState(getSelection("DataType_filter", 'All').split(',') as DataType[]); + const declarativeChartRef = React.useRef(null); let lastKnownValidLegends: string[] | undefined = selectedLegends; @@ -91,10 +110,100 @@ const DeclarativeChartBasicExample: React.FC = () => { 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
No data available
; @@ -120,14 +229,47 @@ const DeclarativeChartBasicExample: React.FC = () => {
    - {schemasData.map((data) => ( - - ))} + {getFilteredData() + .map((data) => ( + + ))}     +     + + + + + + + + + + + +     +     + + + + + +