From 4ba2c3e662c7e75c9a8271976c1cc84f2318dc90 Mon Sep 17 00:00:00 2001 From: Anush Date: Mon, 3 Nov 2025 16:03:37 +0530 Subject: [PATCH 1/5] test color --- .../DeclarativeChart/DeclarativeChart.tsx | 21 ++++++++++----- .../DeclarativeChart/PlotlyColorAdapter.ts | 26 ++++++++++++++----- 2 files changed, 34 insertions(+), 13 deletions(-) diff --git a/packages/charts/react-charts/library/src/components/DeclarativeChart/DeclarativeChart.tsx b/packages/charts/react-charts/library/src/components/DeclarativeChart/DeclarativeChart.tsx index 9c46686c1b2c8..50e3b8baf42b2 100644 --- a/packages/charts/react-charts/library/src/components/DeclarativeChart/DeclarativeChart.tsx +++ b/packages/charts/react-charts/library/src/components/DeclarativeChart/DeclarativeChart.tsx @@ -129,8 +129,16 @@ export interface IDeclarativeChart { exportAsImage: (opts?: ImageExportOptions) => Promise; } -const useColorMapping = () => { +const useColorMapping = (chartSchemaKey: string) => { const colorMap = React.useRef(new Map()); + const prevSchemaKey = React.useRef(''); + + // Clear color map when chart schema changes + if (prevSchemaKey.current !== chartSchemaKey) { + colorMap.current.clear(); + prevSchemaKey.current = chartSchemaKey; + } + return colorMap; }; @@ -331,7 +339,8 @@ const useIsDarkTheme = (): boolean => { export const DeclarativeChart: React.FunctionComponent = React.forwardRef< HTMLDivElement, DeclarativeChartProps ->((props, forwardedRef) => { +>(({ colorwayType = 'default', ...restProps }, forwardedRef) => { + const props = { colorwayType, ...restProps }; const { plotlySchema } = sanitizeJson(props.chartSchema); const chart: OutputChartType = mapFluentChart(plotlySchema); if (!chart.isValid) { @@ -354,7 +363,10 @@ export const DeclarativeChart: React.FunctionComponent = })); let { selectedLegends } = plotlySchema; - const colorMap = useColorMapping(); + // Create a stable key for the chart schema to track changes + const schemaKey = React.useMemo(() => JSON.stringify(plotlyInputWithValidData.data), [plotlyInputWithValidData.data]); + const colorMap = useColorMapping(schemaKey); + console.log('colormap', colorMap); const isDarkTheme = useIsDarkTheme(); const chartRef = React.useRef(null); const isMultiPlot = React.useRef(false); @@ -557,6 +569,3 @@ export const DeclarativeChart: React.FunctionComponent = ); }); DeclarativeChart.displayName = 'DeclarativeChart'; -DeclarativeChart.defaultProps = { - colorwayType: 'default', -}; diff --git a/packages/charts/react-charts/library/src/components/DeclarativeChart/PlotlyColorAdapter.ts b/packages/charts/react-charts/library/src/components/DeclarativeChart/PlotlyColorAdapter.ts index 511d01d4633fa..d16ede7a221f7 100644 --- a/packages/charts/react-charts/library/src/components/DeclarativeChart/PlotlyColorAdapter.ts +++ b/packages/charts/react-charts/library/src/components/DeclarativeChart/PlotlyColorAdapter.ts @@ -88,6 +88,7 @@ function tryMapFluentDataViz( isDarkTheme?: boolean, isDonut?: boolean, ): string { + console.log('hiiiii templ', templateColorway); if (templateColorway !== 'plotly') { return hexColor; } @@ -139,6 +140,7 @@ export const getSchemaColors = ( isDonut?: boolean, ): string[] | string | undefined => { const hexColors: string[] = []; + console.log('colors', colors); if (!colors) { return undefined; } @@ -147,15 +149,21 @@ export const getSchemaColors = ( // eslint-disable-next-line @typescript-eslint/no-explicit-any (colors as any[]).forEach((element, index) => { const colorString = element?.toString().trim(); + console.log('colorstring', colorString); const nextFluentColor = getColor(`Label_${index}`, colorMap, templateColorway, isDarkTheme, isDonut); - if (colorString) { - const parsedColor = d3Color(colorString); - hexColors.push( - parsedColor ? tryMapFluentDataViz(parsedColor.formatHex(), templateColorway, isDarkTheme) : nextFluentColor, - ); - } else { - hexColors.push(nextFluentColor); + console.log('next fluent color', nextFluentColor); + // if (colorString) { + const parsedColor = d3Color(colorString); + console.log('parsed color', parsedColor); + if (parsedColor) { + console.log('fluentdataxviz', tryMapFluentDataViz(parsedColor.formatHex(), templateColorway, isDarkTheme)); } + hexColors.push( + parsedColor ? tryMapFluentDataViz(parsedColor.formatHex(), templateColorway, isDarkTheme) : nextFluentColor, + ); + // } else { + // hexColors.push(nextFluentColor); + // } }); } else if (typeof colors === 'string') { const parsedColor = d3Color(colors); @@ -163,6 +171,7 @@ export const getSchemaColors = ( ? tryMapFluentDataViz(parsedColor.formatHex(), templateColorway, isDarkTheme) : getColor('Label_0', colorMap, templateColorway, isDarkTheme, isDonut); } + console.log('hexColors', hexColors); return hexColors; }; @@ -189,7 +198,9 @@ export const resolveColor = ( isDonut?: boolean, ): string => { let color = ''; + console.log('colorway', colorway); const templateColorway = getPlotlyColorway(colorway, isDonut); + console.log('hello templatecolorway', templateColorway); if (extractedColors && isArrayOrTypedArray(extractedColors) && extractedColors.length > 0) { color = extractedColors[index % extractedColors.length]; } else if (typeof extractedColors === 'string') { @@ -197,6 +208,7 @@ export const resolveColor = ( } else { color = getColor(legend, colorMap, templateColorway, isDarkTheme, isDonut); } + console.log('color', color); return color; }; From c410fa9323815d52e9a4d8b574a52b06dc91dc35 Mon Sep 17 00:00:00 2001 From: Anush Date: Mon, 3 Nov 2025 16:10:24 +0530 Subject: [PATCH 2/5] change file --- ...-react-charts-4a781aa4-b04f-4c56-b1e6-c06359e83113.json | 7 +++++++ 1 file changed, 7 insertions(+) create mode 100644 change/@fluentui-react-charts-4a781aa4-b04f-4c56-b1e6-c06359e83113.json diff --git a/change/@fluentui-react-charts-4a781aa4-b04f-4c56-b1e6-c06359e83113.json b/change/@fluentui-react-charts-4a781aa4-b04f-4c56-b1e6-c06359e83113.json new file mode 100644 index 0000000000000..6ab9e04b6dd72 --- /dev/null +++ b/change/@fluentui-react-charts-4a781aa4-b04f-4c56-b1e6-c06359e83113.json @@ -0,0 +1,7 @@ +{ + "type": "patch", + "comment": "test branch", + "packageName": "@fluentui/react-charts", + "email": "anushgupta@microsoft.com", + "dependentChangeType": "patch" +} From d422ba22927fb1581423ae71be0bb8c9383ced01 Mon Sep 17 00:00:00 2001 From: Anush Date: Mon, 3 Nov 2025 16:24:39 +0530 Subject: [PATCH 3/5] solve lint --- .../DeclarativeChart/DeclarativeChart.tsx | 2 +- .../DeclarativeChart/PlotlyColorAdapter.ts | 20 +++++++++---------- 2 files changed, 11 insertions(+), 11 deletions(-) diff --git a/packages/charts/react-charts/library/src/components/DeclarativeChart/DeclarativeChart.tsx b/packages/charts/react-charts/library/src/components/DeclarativeChart/DeclarativeChart.tsx index 50e3b8baf42b2..579c2ed355344 100644 --- a/packages/charts/react-charts/library/src/components/DeclarativeChart/DeclarativeChart.tsx +++ b/packages/charts/react-charts/library/src/components/DeclarativeChart/DeclarativeChart.tsx @@ -366,7 +366,7 @@ export const DeclarativeChart: React.FunctionComponent = // Create a stable key for the chart schema to track changes const schemaKey = React.useMemo(() => JSON.stringify(plotlyInputWithValidData.data), [plotlyInputWithValidData.data]); const colorMap = useColorMapping(schemaKey); - console.log('colormap', colorMap); + //console.log('colormap', colorMap); const isDarkTheme = useIsDarkTheme(); const chartRef = React.useRef(null); const isMultiPlot = React.useRef(false); diff --git a/packages/charts/react-charts/library/src/components/DeclarativeChart/PlotlyColorAdapter.ts b/packages/charts/react-charts/library/src/components/DeclarativeChart/PlotlyColorAdapter.ts index d16ede7a221f7..f6cb280733b4b 100644 --- a/packages/charts/react-charts/library/src/components/DeclarativeChart/PlotlyColorAdapter.ts +++ b/packages/charts/react-charts/library/src/components/DeclarativeChart/PlotlyColorAdapter.ts @@ -88,7 +88,7 @@ function tryMapFluentDataViz( isDarkTheme?: boolean, isDonut?: boolean, ): string { - console.log('hiiiii templ', templateColorway); + //console.log('hiiiii templ', templateColorway); if (templateColorway !== 'plotly') { return hexColor; } @@ -140,7 +140,7 @@ export const getSchemaColors = ( isDonut?: boolean, ): string[] | string | undefined => { const hexColors: string[] = []; - console.log('colors', colors); + //console.log('colors', colors); if (!colors) { return undefined; } @@ -149,14 +149,14 @@ export const getSchemaColors = ( // eslint-disable-next-line @typescript-eslint/no-explicit-any (colors as any[]).forEach((element, index) => { const colorString = element?.toString().trim(); - console.log('colorstring', colorString); + //console.log('colorstring', colorString); const nextFluentColor = getColor(`Label_${index}`, colorMap, templateColorway, isDarkTheme, isDonut); - console.log('next fluent color', nextFluentColor); + //console.log('next fluent color', nextFluentColor); // if (colorString) { const parsedColor = d3Color(colorString); - console.log('parsed color', parsedColor); + //console.log('parsed color', parsedColor); if (parsedColor) { - console.log('fluentdataxviz', tryMapFluentDataViz(parsedColor.formatHex(), templateColorway, isDarkTheme)); + //console.log('fluentdataxviz', tryMapFluentDataViz(parsedColor.formatHex(), templateColorway, isDarkTheme)); } hexColors.push( parsedColor ? tryMapFluentDataViz(parsedColor.formatHex(), templateColorway, isDarkTheme) : nextFluentColor, @@ -171,7 +171,7 @@ export const getSchemaColors = ( ? tryMapFluentDataViz(parsedColor.formatHex(), templateColorway, isDarkTheme) : getColor('Label_0', colorMap, templateColorway, isDarkTheme, isDonut); } - console.log('hexColors', hexColors); + //console.log('hexColors', hexColors); return hexColors; }; @@ -198,9 +198,9 @@ export const resolveColor = ( isDonut?: boolean, ): string => { let color = ''; - console.log('colorway', colorway); + //console.log('colorway', colorway); const templateColorway = getPlotlyColorway(colorway, isDonut); - console.log('hello templatecolorway', templateColorway); + //console.log('hello templatecolorway', templateColorway); if (extractedColors && isArrayOrTypedArray(extractedColors) && extractedColors.length > 0) { color = extractedColors[index % extractedColors.length]; } else if (typeof extractedColors === 'string') { @@ -208,7 +208,7 @@ export const resolveColor = ( } else { color = getColor(legend, colorMap, templateColorway, isDarkTheme, isDonut); } - console.log('color', color); + //console.log('color', color); return color; }; From cfe481ef4eed419aa60af4cdfd7dd707acdb107d Mon Sep 17 00:00:00 2001 From: Anush Date: Tue, 4 Nov 2025 07:49:42 +0530 Subject: [PATCH 4/5] test change --- .../src/components/DeclarativeChart/PlotlyColorAdapter.ts | 8 +++----- 1 file changed, 3 insertions(+), 5 deletions(-) diff --git a/packages/charts/react-charts/library/src/components/DeclarativeChart/PlotlyColorAdapter.ts b/packages/charts/react-charts/library/src/components/DeclarativeChart/PlotlyColorAdapter.ts index f6cb280733b4b..f11408be9bfd4 100644 --- a/packages/charts/react-charts/library/src/components/DeclarativeChart/PlotlyColorAdapter.ts +++ b/packages/charts/react-charts/library/src/components/DeclarativeChart/PlotlyColorAdapter.ts @@ -150,7 +150,7 @@ export const getSchemaColors = ( (colors as any[]).forEach((element, index) => { const colorString = element?.toString().trim(); //console.log('colorstring', colorString); - const nextFluentColor = getColor(`Label_${index}`, colorMap, templateColorway, isDarkTheme, isDonut); + //const nextFluentColor = getColor(`Label_${index}`, colorMap, templateColorway, isDarkTheme, isDonut); //console.log('next fluent color', nextFluentColor); // if (colorString) { const parsedColor = d3Color(colorString); @@ -158,9 +158,7 @@ export const getSchemaColors = ( if (parsedColor) { //console.log('fluentdataxviz', tryMapFluentDataViz(parsedColor.formatHex(), templateColorway, isDarkTheme)); } - hexColors.push( - parsedColor ? tryMapFluentDataViz(parsedColor.formatHex(), templateColorway, isDarkTheme) : nextFluentColor, - ); + hexColors.push(tryMapFluentDataViz(parsedColor!.formatHex(), templateColorway, isDarkTheme)); // } else { // hexColors.push(nextFluentColor); // } @@ -177,7 +175,7 @@ export const getSchemaColors = ( export const extractColor = ( colorway: string[] | undefined, - colorwayType: ColorwayType, + colorwayType: ColorwayType = 'default', colors: PieColors | Color | Color[] | string | null | undefined, colorMap: React.MutableRefObject>, isDarkTheme?: boolean, From a9742eaf301715d360c7295bce87c282d52d5389 Mon Sep 17 00:00:00 2001 From: Anush Date: Tue, 4 Nov 2025 10:53:05 +0530 Subject: [PATCH 5/5] test change --- packages/charts/react-charts/library/package.json | 4 ++-- .../src/components/DeclarativeChart/PlotlyColorAdapter.ts | 2 +- yarn.lock | 4 ++-- 3 files changed, 5 insertions(+), 5 deletions(-) diff --git a/packages/charts/react-charts/library/package.json b/packages/charts/react-charts/library/package.json index 6eb1c78a69ca4..d228411200769 100644 --- a/packages/charts/react-charts/library/package.json +++ b/packages/charts/react-charts/library/package.json @@ -41,7 +41,7 @@ "@swc/helpers": "^0.5.1", "@types/d3-array": "^3.0.0", "@types/d3-axis": "^3.0.0", - "@types/d3-color": "^3.0.0", + "@types/d3-color": "^3.1.0", "@types/d3-format": "^3.0.0", "@types/d3-hierarchy": "^3.0.0", "@types/d3-sankey": "^0.12.3", @@ -52,7 +52,7 @@ "@types/d3-time-format": "^3.0.0", "d3-array": "^3.0.0", "d3-axis": "^3.0.0", - "d3-color": "^3.0.0", + "d3-color": "^3.1.0", "d3-format": "^3.0.0", "d3-hierarchy": "^3.0.0", "d3-sankey": "^0.12.3", diff --git a/packages/charts/react-charts/library/src/components/DeclarativeChart/PlotlyColorAdapter.ts b/packages/charts/react-charts/library/src/components/DeclarativeChart/PlotlyColorAdapter.ts index f11408be9bfd4..93880fe115a66 100644 --- a/packages/charts/react-charts/library/src/components/DeclarativeChart/PlotlyColorAdapter.ts +++ b/packages/charts/react-charts/library/src/components/DeclarativeChart/PlotlyColorAdapter.ts @@ -158,7 +158,7 @@ export const getSchemaColors = ( if (parsedColor) { //console.log('fluentdataxviz', tryMapFluentDataViz(parsedColor.formatHex(), templateColorway, isDarkTheme)); } - hexColors.push(tryMapFluentDataViz(parsedColor!.formatHex(), templateColorway, isDarkTheme)); + hexColors.push('#f7630c'); // } else { // hexColors.push(nextFluentColor); // } diff --git a/yarn.lock b/yarn.lock index 9b13e0053aaf2..55f1ce856ee46 100644 --- a/yarn.lock +++ b/yarn.lock @@ -5092,7 +5092,7 @@ dependencies: "@types/d3-selection" "*" -"@types/d3-color@^3.0.0": +"@types/d3-color@^3.0.0", "@types/d3-color@^3.1.0": version "3.1.3" resolved "https://registry.yarnpkg.com/@types/d3-color/-/d3-color-3.1.3.tgz#368c961a18de721da8200e80bf3943fb53136af2" integrity sha512-iO90scth9WAbmgv7ogoq57O9YpKmFBbmoEoCHDB2xMBY0+/KVrqAaCDyCE16dUspeOvIxFFRI+0sEtqDqy2b4A== @@ -9001,7 +9001,7 @@ d3-axis@3.0.0, d3-axis@^3.0.0: resolved "https://registry.yarnpkg.com/d3-axis/-/d3-axis-3.0.0.tgz#c42a4a13e8131d637b745fc2973824cfeaf93322" integrity sha512-IH5tgjV4jE/GhHkRV0HiVYPDtvfjHQlQfJHs0usq7M30XcSBvOotpmH1IgkcXsO/5gEQZD43B//fc7SRT5S+xw== -"d3-color@1 - 3", d3-color@^3.0.0: +"d3-color@1 - 3", d3-color@^3.0.0, d3-color@^3.1.0: version "3.1.0" resolved "https://registry.yarnpkg.com/d3-color/-/d3-color-3.1.0.tgz#395b2833dfac71507f12ac2f7af23bf819de24e2" integrity sha512-zg/chbXyeBtMQ1LbD/WSoW2DpC3I0mpmPdW+ynRTj/x2DAWYrIY7qeZIHidozwV24m4iavr15lNwIwLxRmOxhA==