Skip to content

[testing]: test color #35444

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Draft
Anush2303 wants to merge 5 commits into
base: master
Choose a base branch
from
Draft

[testing]: test color #35444

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
5 commits
Select commit Hold shift + click to select a range
4ba2c3e
test color
Nov 3, 2025
c410fa9
change file
Nov 3, 2025
d422ba2
solve lint
Nov 3, 2025
cfe481e
test change
Nov 4, 2025
a9742ea
test change
Nov 4, 2025
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
7 changes: 7 additions & 0 deletions change/@fluentui-react-charts-4a781aa4-b04f-4c56-b1e6-c06359e83113.json
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,7 @@
{
Copy link

@github-actions github-actions bot Nov 3, 2025 •
edited
Loading

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

🕵🏾‍♀️ visual changes to review in the Visual Change Report

vr-tests-react-components/CalendarCompat 4 screenshots
Image Name Diff(in Pixels) Image Type
vr-tests-react-components/CalendarCompat.multiDayView - Dark Mode.default.chromium.png 1108 Changed
vr-tests-react-components/CalendarCompat.multiDayView.default.chromium_1.png 492 Changed
vr-tests-react-components/CalendarCompat.multiDayView - RTL.default.chromium.png 494 Changed
vr-tests-react-components/CalendarCompat.multiDayView - High Contrast.default.chromium.png 1229 Changed
vr-tests-react-components/Charts-DonutChart 3 screenshots
Image Name Diff(in Pixels) Image Type
vr-tests-react-components/Charts-DonutChart.Dynamic - RTL.default.chromium.png 30793 Changed
vr-tests-react-components/Charts-DonutChart.Dynamic - Dark Mode.default.chromium.png 12635 Changed
vr-tests-react-components/Charts-DonutChart.Dynamic.default.chromium.png 27053 Changed
vr-tests-react-components/Positioning 2 screenshots
Image Name Diff(in Pixels) Image Type
vr-tests-react-components/Positioning.Positioning end.updated 2 times.chromium.png 601 Changed
vr-tests-react-components/Positioning.Positioning end.chromium.png 916 Changed
vr-tests-react-components/Skeleton converged 2 screenshots
Image Name Diff(in Pixels) Image Type
vr-tests-react-components/Skeleton converged.Opaque Skeleton with circle - Dark Mode.default.chromium.png 2 Changed
vr-tests-react-components/Skeleton converged.Opaque Skeleton with circle - High Contrast.default.chromium.png 2 Changed
vr-tests-web-components/Accordion 1 screenshots
Image Name Diff(in Pixels) Image Type
vr-tests-web-components/Accordion. - Dark Mode.normal.chromium_1.png 3151 Changed
vr-tests-web-components/Avatar 1 screenshots
Image Name Diff(in Pixels) Image Type
vr-tests-web-components/Avatar. - Dark Mode.normal.chromium_1.png 298 Changed
vr-tests/Callout 7 screenshots
Image Name Diff(in Pixels) Image Type
vr-tests/Callout.Beak 25.default.chromium.png 2185 Changed
vr-tests/Callout.Right bottom edge.default.chromium.png 3037 Changed
vr-tests/Callout.Left top edge.default.chromium.png 2168 Changed
vr-tests/Callout.Bottom center.default.chromium.png 2116 Changed
vr-tests/Callout.Left center.default.chromium.png 2544 Changed
vr-tests/Callout.Rendering callout attached to a rectangle.default.chromium.png 1832 Changed
vr-tests/Callout.Right center.default.chromium.png 2080 Changed
vr-tests/Coachmark 1 screenshots
Image Name Diff(in Pixels) Image Type
vr-tests/Coachmark.Collapsed.default.chromium.png 159 Changed
vr-tests/Keytip 2 screenshots
Image Name Diff(in Pixels) Image Type
vr-tests/Keytip.Disabled.default.chromium.png 26 Changed
vr-tests/Keytip.Offset.default.chromium.png 86 Changed
vr-tests/react-charting-AreaChart 1 screenshots
Image Name Diff(in Pixels) Image Type
vr-tests/react-charting-AreaChart.Custom Accessibility.default.chromium.png 11 Changed
vr-tests/react-charting-GaugeChart 1 screenshots
Image Name Diff(in Pixels) Image Type
vr-tests/react-charting-GaugeChart.Basic.default.chromium.png 2 Changed
vr-tests/react-charting-LineChart 3 screenshots
Image Name Diff(in Pixels) Image Type
vr-tests/react-charting-LineChart.Events - RTL.default.chromium.png 15 Changed
vr-tests/react-charting-LineChart.Events - Dark Mode.default.chromium.png 16 Changed
vr-tests/react-charting-LineChart.Events.default.chromium.png 15 Changed
vr-tests/react-charting-MultiStackBarChart 3 screenshots
Image Name Diff(in Pixels) Image Type
vr-tests/react-charting-MultiStackBarChart.Basic_Absolute - RTL.default.chromium.png 343 Changed
vr-tests/react-charting-MultiStackBarChart.Basic_Absolute - Dark Mode.default.chromium.png 363 Changed
vr-tests/react-charting-MultiStackBarChart.Basic_PartToWhole - RTL.default.chromium.png 343 Changed
vr-tests/react-charting-VerticalBarChart 1 screenshots
Image Name Diff(in Pixels) Image Type
vr-tests/react-charting-VerticalBarChart.Basic - Secondary Y Axis.default.chromium.png 3 Changed

There were 1 duplicate changes discarded. Check the build logs for more information.

"type": "patch",
"comment": "test branch",
"packageName": "@fluentui/react-charts",
"email": "anushgupta@microsoft.com",
"dependentChangeType": "patch"
}
4 changes: 2 additions & 2 deletions packages/charts/react-charts/library/package.json
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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",
Expand All @@ -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",
Expand Down
21 changes: 15 additions & 6 deletions packages/charts/react-charts/library/src/components/DeclarativeChart/DeclarativeChart.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -129,8 +129,16 @@ export interface IDeclarativeChart {
exportAsImage: (opts?: ImageExportOptions) => Promise<string>;
}

const useColorMapping = () => {
const useColorMapping = (chartSchemaKey: string) => {
const colorMap = React.useRef(new Map<string, string>());
const prevSchemaKey = React.useRef<string>('');

// Clear color map when chart schema changes
if (prevSchemaKey.current !== chartSchemaKey) {
colorMap.current.clear();
prevSchemaKey.current = chartSchemaKey;
}

return colorMap;
};

Expand Down Expand Up @@ -331,7 +339,8 @@ const useIsDarkTheme = (): boolean => {
export const DeclarativeChart: React.FunctionComponent<DeclarativeChartProps> = 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) {
Expand All @@ -354,7 +363,10 @@ export const DeclarativeChart: React.FunctionComponent<DeclarativeChartProps> =
}));

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<Chart>(null);
const isMultiPlot = React.useRef(false);
Expand Down Expand Up @@ -557,6 +569,3 @@ export const DeclarativeChart: React.FunctionComponent<DeclarativeChartProps> =
);
});
DeclarativeChart.displayName = 'DeclarativeChart';
DeclarativeChart.defaultProps = {
colorwayType: 'default',
};
28 changes: 19 additions & 9 deletions packages/charts/react-charts/library/src/components/DeclarativeChart/PlotlyColorAdapter.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -88,6 +88,7 @@ function tryMapFluentDataViz(
isDarkTheme?: boolean,
isDonut?: boolean,
): string {
//console.log('hiiiii templ', templateColorway);
if (templateColorway !== 'plotly') {
return hexColor;
}
Expand Down Expand Up @@ -139,6 +140,7 @@ export const getSchemaColors = (
isDonut?: boolean,
): string[] | string | undefined => {
const hexColors: string[] = [];
//console.log('colors', colors);
if (!colors) {
return undefined;
}
Expand All @@ -147,28 +149,33 @@ 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);
return parsedColor
? 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<Map<string, string>>,
isDarkTheme?: boolean,
Expand All @@ -189,14 +196,17 @@ 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') {
color = extractedColors;
} else {
color = getColor(legend, colorMap, templateColorway, isDarkTheme, isDonut);
}
//console.log('color', color);
return color;
};

Expand Down
4 changes: 2 additions & 2 deletions yarn.lock
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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==
Expand Down Expand Up @@ -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==
Expand Down
Loading