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" +} 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/DeclarativeChart.tsx b/packages/charts/react-charts/library/src/components/DeclarativeChart/DeclarativeChart.tsx index 9c46686c1b2c8..579c2ed355344 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..93880fe115a66 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,19 @@ export const getSchemaColors = ( // eslint-disable-next-line @typescript-eslint/no-explicit-any (colors as any[]).forEach((element, index) => { const colorString = element?.toString().trim(); - 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('colorstring', colorString); + //const nextFluentColor = getColor(`Label_${index}`, colorMap, templateColorway, isDarkTheme, isDonut); + //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('#f7630c'); + // } else { + // hexColors.push(nextFluentColor); + // } }); } else if (typeof colors === 'string') { const parsedColor = d3Color(colors); @@ -163,12 +169,13 @@ export const getSchemaColors = ( ? tryMapFluentDataViz(parsedColor.formatHex(), templateColorway, isDarkTheme) : getColor('Label_0', colorMap, templateColorway, isDarkTheme, isDonut); } + //console.log('hexColors', hexColors); return hexColors; }; export const extractColor = ( colorway: string[] | undefined, - colorwayType: ColorwayType, + colorwayType: ColorwayType = 'default', colors: PieColors | Color | Color[] | string | null | undefined, colorMap: React.MutableRefObject>, isDarkTheme?: boolean, @@ -189,7 +196,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 +206,7 @@ export const resolveColor = ( } else { color = getColor(legend, colorMap, templateColorway, isDarkTheme, isDonut); } + //console.log('color', color); return color; }; 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==