@fluentui/react-charts 0.0.0-nightly-20250820-0406.1 → 0.0.0-nightly-20250821-0406.1

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
Files changed (34) hide show
  1. package/CHANGELOG.md +15 -15
  2. package/lib/components/DeclarativeChart/PlotlyColorAdapter.js +1 -1
  3. package/lib/components/DeclarativeChart/PlotlyColorAdapter.js.map +1 -1
  4. package/lib/components/DeclarativeChart/PlotlySchemaAdapter.js +53 -8
  5. package/lib/components/DeclarativeChart/PlotlySchemaAdapter.js.map +1 -1
  6. package/lib/components/GroupedVerticalBarChart/GroupedVerticalBarChart.js +23 -4
  7. package/lib/components/GroupedVerticalBarChart/GroupedVerticalBarChart.js.map +1 -1
  8. package/lib/components/HeatMapChart/HeatMapChart.js +175 -114
  9. package/lib/components/HeatMapChart/HeatMapChart.js.map +1 -1
  10. package/lib/components/HorizontalBarChartWithAxis/HorizontalBarChartWithAxis.js +26 -6
  11. package/lib/components/HorizontalBarChartWithAxis/HorizontalBarChartWithAxis.js.map +1 -1
  12. package/lib/components/ScatterChart/ScatterChart.js +4 -2
  13. package/lib/components/ScatterChart/ScatterChart.js.map +1 -1
  14. package/lib/components/VerticalBarChart/VerticalBarChart.js +27 -4
  15. package/lib/components/VerticalBarChart/VerticalBarChart.js.map +1 -1
  16. package/lib/components/VerticalStackedBarChart/VerticalStackedBarChart.js +61 -44
  17. package/lib/components/VerticalStackedBarChart/VerticalStackedBarChart.js.map +1 -1
  18. package/lib-commonjs/components/DeclarativeChart/PlotlyColorAdapter.js +1 -1
  19. package/lib-commonjs/components/DeclarativeChart/PlotlyColorAdapter.js.map +1 -1
  20. package/lib-commonjs/components/DeclarativeChart/PlotlySchemaAdapter.js +53 -8
  21. package/lib-commonjs/components/DeclarativeChart/PlotlySchemaAdapter.js.map +1 -1
  22. package/lib-commonjs/components/GroupedVerticalBarChart/GroupedVerticalBarChart.js +22 -3
  23. package/lib-commonjs/components/GroupedVerticalBarChart/GroupedVerticalBarChart.js.map +1 -1
  24. package/lib-commonjs/components/HeatMapChart/HeatMapChart.js +174 -113
  25. package/lib-commonjs/components/HeatMapChart/HeatMapChart.js.map +1 -1
  26. package/lib-commonjs/components/HorizontalBarChartWithAxis/HorizontalBarChartWithAxis.js +25 -5
  27. package/lib-commonjs/components/HorizontalBarChartWithAxis/HorizontalBarChartWithAxis.js.map +1 -1
  28. package/lib-commonjs/components/ScatterChart/ScatterChart.js +4 -2
  29. package/lib-commonjs/components/ScatterChart/ScatterChart.js.map +1 -1
  30. package/lib-commonjs/components/VerticalBarChart/VerticalBarChart.js +26 -3
  31. package/lib-commonjs/components/VerticalBarChart/VerticalBarChart.js.map +1 -1
  32. package/lib-commonjs/components/VerticalStackedBarChart/VerticalStackedBarChart.js +60 -43
  33. package/lib-commonjs/components/VerticalStackedBarChart/VerticalStackedBarChart.js.map +1 -1
  34. package/package.json +12 -12
package/CHANGELOG.md CHANGED
@@ -1,28 +1,28 @@
1
1
  # Change Log - @fluentui/react-charts
2
2
 
3
- This log was last generated on Wed, 20 Aug 2025 04:21:02 GMT and should not be manually modified.
3
+ This log was last generated on Thu, 21 Aug 2025 04:20:54 GMT and should not be manually modified.
4
4
 
5
5
  <!-- Start content -->
6
6
 
7
- ## [0.0.0-nightly-20250820-0406.1](https://github.com/microsoft/fluentui/tree/@fluentui/react-charts_v0.0.0-nightly-20250820-0406.1)
7
+ ## [0.0.0-nightly-20250821-0406.1](https://github.com/microsoft/fluentui/tree/@fluentui/react-charts_v0.0.0-nightly-20250821-0406.1)
8
8
 
9
- Wed, 20 Aug 2025 04:21:02 GMT
10
- [Compare changes](https://github.com/microsoft/fluentui/compare/@fluentui/react-charts_v9.2.2..@fluentui/react-charts_v0.0.0-nightly-20250820-0406.1)
9
+ Thu, 21 Aug 2025 04:20:54 GMT
10
+ [Compare changes](https://github.com/microsoft/fluentui/compare/@fluentui/react-charts_v9.2.2..@fluentui/react-charts_v0.0.0-nightly-20250821-0406.1)
11
11
 
12
12
  ### Changes
13
13
 
14
14
  - Release nightly v9 ([commit](https://github.com/microsoft/fluentui/commit/not available) by fluentui-internal@service.microsoft.com)
15
- - Bump @fluentui/react-button to v0.0.0-nightly-20250820-0406.1 ([commit](https://github.com/microsoft/fluentui/commit/c1c2a7adf08d34834453a168af7ede24dc249d38) by beachball)
16
- - Bump @fluentui/react-jsx-runtime to v0.0.0-nightly-20250820-0406.1 ([commit](https://github.com/microsoft/fluentui/commit/c1c2a7adf08d34834453a168af7ede24dc249d38) by beachball)
17
- - Bump @fluentui/react-overflow to v0.0.0-nightly-20250820-0406.1 ([commit](https://github.com/microsoft/fluentui/commit/c1c2a7adf08d34834453a168af7ede24dc249d38) by beachball)
18
- - Bump @fluentui/react-popover to v0.0.0-nightly-20250820-0406.1 ([commit](https://github.com/microsoft/fluentui/commit/c1c2a7adf08d34834453a168af7ede24dc249d38) by beachball)
19
- - Bump @fluentui/react-shared-contexts to v0.0.0-nightly-20250820-0406.1 ([commit](https://github.com/microsoft/fluentui/commit/c1c2a7adf08d34834453a168af7ede24dc249d38) by beachball)
20
- - Bump @fluentui/react-tabster to v0.0.0-nightly-20250820-0406.1 ([commit](https://github.com/microsoft/fluentui/commit/c1c2a7adf08d34834453a168af7ede24dc249d38) by beachball)
21
- - Bump @fluentui/react-theme to v0.0.0-nightly-20250820-0406.1 ([commit](https://github.com/microsoft/fluentui/commit/c1c2a7adf08d34834453a168af7ede24dc249d38) by beachball)
22
- - Bump @fluentui/react-tooltip to v0.0.0-nightly-20250820-0406.1 ([commit](https://github.com/microsoft/fluentui/commit/c1c2a7adf08d34834453a168af7ede24dc249d38) by beachball)
23
- - Bump @fluentui/react-utilities to v0.0.0-nightly-20250820-0406.1 ([commit](https://github.com/microsoft/fluentui/commit/c1c2a7adf08d34834453a168af7ede24dc249d38) by beachball)
24
- - Bump @fluentui/react-conformance to v0.0.0-nightly-20250820-0406.1 ([commit](https://github.com/microsoft/fluentui/commit/c1c2a7adf08d34834453a168af7ede24dc249d38) by beachball)
25
- - Bump @fluentui/react-conformance-griffel to v0.0.0-nightly-20250820-0406.1 ([commit](https://github.com/microsoft/fluentui/commit/c1c2a7adf08d34834453a168af7ede24dc249d38) by beachball)
15
+ - Bump @fluentui/react-button to v0.0.0-nightly-20250821-0406.1 ([commit](https://github.com/microsoft/fluentui/commit/4a0194674a5922d5546051429388c92d4caa11eb) by beachball)
16
+ - Bump @fluentui/react-jsx-runtime to v0.0.0-nightly-20250821-0406.1 ([commit](https://github.com/microsoft/fluentui/commit/4a0194674a5922d5546051429388c92d4caa11eb) by beachball)
17
+ - Bump @fluentui/react-overflow to v0.0.0-nightly-20250821-0406.1 ([commit](https://github.com/microsoft/fluentui/commit/4a0194674a5922d5546051429388c92d4caa11eb) by beachball)
18
+ - Bump @fluentui/react-popover to v0.0.0-nightly-20250821-0406.1 ([commit](https://github.com/microsoft/fluentui/commit/4a0194674a5922d5546051429388c92d4caa11eb) by beachball)
19
+ - Bump @fluentui/react-shared-contexts to v0.0.0-nightly-20250821-0406.1 ([commit](https://github.com/microsoft/fluentui/commit/4a0194674a5922d5546051429388c92d4caa11eb) by beachball)
20
+ - Bump @fluentui/react-tabster to v0.0.0-nightly-20250821-0406.1 ([commit](https://github.com/microsoft/fluentui/commit/4a0194674a5922d5546051429388c92d4caa11eb) by beachball)
21
+ - Bump @fluentui/react-theme to v0.0.0-nightly-20250821-0406.1 ([commit](https://github.com/microsoft/fluentui/commit/4a0194674a5922d5546051429388c92d4caa11eb) by beachball)
22
+ - Bump @fluentui/react-tooltip to v0.0.0-nightly-20250821-0406.1 ([commit](https://github.com/microsoft/fluentui/commit/4a0194674a5922d5546051429388c92d4caa11eb) by beachball)
23
+ - Bump @fluentui/react-utilities to v0.0.0-nightly-20250821-0406.1 ([commit](https://github.com/microsoft/fluentui/commit/4a0194674a5922d5546051429388c92d4caa11eb) by beachball)
24
+ - Bump @fluentui/react-conformance to v0.0.0-nightly-20250821-0406.1 ([commit](https://github.com/microsoft/fluentui/commit/4a0194674a5922d5546051429388c92d4caa11eb) by beachball)
25
+ - Bump @fluentui/react-conformance-griffel to v0.0.0-nightly-20250821-0406.1 ([commit](https://github.com/microsoft/fluentui/commit/4a0194674a5922d5546051429388c92d4caa11eb) by beachball)
26
26
 
27
27
  ## [9.2.2](https://github.com/microsoft/fluentui/tree/@fluentui/react-charts_v9.2.2)
28
28
 
package/lib/components/DeclarativeChart/PlotlyColorAdapter.js CHANGED
@@ -84,7 +84,7 @@ export const extractColor = (colorway, colorwayType, colors, colorMap, isDarkThe
84
84
  };
85
85
  export const resolveColor = (extractedColors, index, legend, colorMap, isDarkTheme)=>{
86
86
  let color = '';
87
- if (extractedColors && isArrayOrTypedArray(extractedColors)) {
87
+ if (extractedColors && isArrayOrTypedArray(extractedColors) && extractedColors.length > 0) {
88
88
  color = extractedColors[index % extractedColors.length];
89
89
  } else if (typeof extractedColors === 'string') {
90
90
  color = extractedColors;
package/lib/components/DeclarativeChart/PlotlyColorAdapter.js.map CHANGED
@@ -1 +1 @@
1
- {"version":3,"sources":["../src/components/DeclarativeChart/PlotlyColorAdapter.ts"],"sourcesContent":["import * as React from 'react';\nimport { color as d3Color } from 'd3-color';\nimport type { PieColors, Color, PlotData } from '@fluentui/chart-utilities';\nimport { isArrayOrTypedArray } from '@fluentui/chart-utilities';\nimport { areArraysEqual } from '../../utilities/utilities';\nimport { DataVizPalette, getColorFromToken, getNextColor } from '../../utilities/colors';\n\ntype PlotlyColorway = 'plotly' | 'others';\n\n// The color sequences in plotly express are defined here:\n// https://plotly.com/python/discrete-color/#:~:text=Join%20now.-,Color%20Sequences%20in%20Plotly%20Express,-By%20default%2C%20Plotly\nexport type ColorwayType = 'default' | 'builtin' | 'others' | undefined;\n\nconst DEFAULT_PLOTLY_COLORWAY = [\n '#636efa', //1\n '#ef553b', //2\n '#00cc96', //3\n '#ab63fa', //4\n '#ffa15a', //5\n '#19d3f3', //6\n '#ff6692', //7\n '#b6e880', //8\n '#ff97ff', //9\n '#fecb52', //10\n];\n\nconst PLOTLY_FLUENTVIZ_COLORWAY_MAPPING = [\n DataVizPalette.color1, //1\n DataVizPalette.warning, //2\n DataVizPalette.color8, //3\n DataVizPalette.color4, //4\n DataVizPalette.color7, //5\n DataVizPalette.color6, //6\n DataVizPalette.color2, //7\n DataVizPalette.color5, //8\n DataVizPalette.color9, //9\n DataVizPalette.color10, //10\n];\n\nfunction getPlotlyColorway(colorway: string[] | undefined): PlotlyColorway {\n const isPlotlyColorway =\n isArrayOrTypedArray(colorway) &&\n areArraysEqual(\n colorway?.map(c => c.toLowerCase()),\n DEFAULT_PLOTLY_COLORWAY,\n );\n\n return isPlotlyColorway ? 'plotly' : 'others';\n}\n\nfunction tryMapFluentDataViz(hexColor: string, templateColorway: PlotlyColorway, isDarkTheme?: boolean): string {\n if (templateColorway !== 'plotly') {\n return hexColor;\n }\n const index = DEFAULT_PLOTLY_COLORWAY.indexOf(hexColor.toLowerCase());\n if (index !== -1) {\n return getColorFromToken(PLOTLY_FLUENTVIZ_COLORWAY_MAPPING[index], isDarkTheme);\n }\n return hexColor;\n}\n\nexport const getColor = (\n legendLabel: string,\n colorMap: React.MutableRefObject<Map<string, string>>,\n isDarkTheme?: boolean,\n): string => {\n if (!colorMap.current.has(legendLabel)) {\n let nextColor: string;\n if (colorMap.current.size < PLOTLY_FLUENTVIZ_COLORWAY_MAPPING.length) {\n // Get first 10 colors from plotly-fluentviz colorway mapping\n nextColor = getColorFromToken(PLOTLY_FLUENTVIZ_COLORWAY_MAPPING[colorMap.current.size], isDarkTheme);\n } else {\n nextColor = getNextColor(colorMap.current.size, 0, isDarkTheme);\n }\n colorMap.current.set(legendLabel, nextColor);\n return nextColor;\n }\n\n return colorMap.current.get(legendLabel) as string;\n};\n\nexport const getSchemaColors = (\n colorway: string[] | undefined,\n colors: PieColors | Color | Color[] | string | null | undefined,\n colorMap: React.MutableRefObject<Map<string, string>>,\n isDarkTheme?: boolean,\n): string[] | string | undefined => {\n const hexColors: string[] = [];\n if (!colors) {\n return undefined;\n }\n const templateColorway = getPlotlyColorway(colorway);\n if (isArrayOrTypedArray(colors)) {\n // eslint-disable-next-line @typescript-eslint/no-explicit-any\n (colors as any[]).forEach((element, index) => {\n const colorString = element?.toString().trim();\n const nextFluentColor = getColor(`Label_${index}`, colorMap, isDarkTheme);\n if (colorString) {\n const parsedColor = d3Color(colorString);\n hexColors.push(\n parsedColor ? tryMapFluentDataViz(parsedColor.formatHex(), templateColorway, isDarkTheme) : nextFluentColor,\n );\n } else {\n hexColors.push(nextFluentColor);\n }\n });\n } else if (typeof colors === 'string') {\n const parsedColor = d3Color(colors);\n return parsedColor\n ? tryMapFluentDataViz(parsedColor.formatHex(), templateColorway, isDarkTheme)\n : getColor('Label_0', colorMap, isDarkTheme);\n }\n return hexColors;\n};\n\nexport const extractColor = (\n colorway: string[] | undefined,\n colorwayType: ColorwayType,\n colors: PieColors | Color | Color[] | string | null | undefined,\n colorMap: React.MutableRefObject<Map<string, string>>,\n isDarkTheme?: boolean,\n): string | string[] | undefined => {\n return colorwayType === 'default' && colors ? getSchemaColors(colorway, colors, colorMap, isDarkTheme) : undefined;\n};\n\nexport const resolveColor = (\n extractedColors: string[] | string | null | undefined,\n index: number,\n legend: string,\n colorMap: React.MutableRefObject<Map<string, string>>,\n isDarkTheme?: boolean,\n): string => {\n let color = '';\n if (extractedColors && isArrayOrTypedArray(extractedColors)) {\n color = extractedColors[index % extractedColors.length];\n } else if (typeof extractedColors === 'string') {\n color = extractedColors;\n } else {\n color = getColor(legend, colorMap, isDarkTheme);\n }\n return color;\n};\n\nexport const getOpacity = (series: Partial<PlotData>, index: number): number => {\n return series.marker?.opacity\n ? isArrayOrTypedArray(series.marker?.opacity)\n ? (series.marker?.opacity as number[])[index % (series.marker?.opacity as number[]).length]\n : (series.marker?.opacity as number)\n : series.opacity ?? 1;\n};\n"],"names":["React","color","d3Color","isArrayOrTypedArray","areArraysEqual","DataVizPalette","getColorFromToken","getNextColor","DEFAULT_PLOTLY_COLORWAY","PLOTLY_FLUENTVIZ_COLORWAY_MAPPING","color1","warning","color8","color4","color7","color6","color2","color5","color9","color10","getPlotlyColorway","colorway","isPlotlyColorway","map","c","toLowerCase","tryMapFluentDataViz","hexColor","templateColorway","isDarkTheme","index","indexOf","getColor","legendLabel","colorMap","current","has","nextColor","size","length","set","get","getSchemaColors","colors","hexColors","undefined","forEach","element","colorString","toString","trim","nextFluentColor","parsedColor","push","formatHex","extractColor","colorwayType","resolveColor","extractedColors","legend","getOpacity","series","marker","opacity"],"mappings":"AAAA,YAAYA,WAAW,QAAQ;AAC/B,SAASC,SAASC,OAAO,QAAQ,WAAW;AAE5C,SAASC,mBAAmB,QAAQ,4BAA4B;AAChE,SAASC,cAAc,QAAQ,4BAA4B;AAC3D,SAASC,cAAc,EAAEC,iBAAiB,EAAEC,YAAY,QAAQ,yBAAyB;AAQzF,MAAMC,0BAA0B;IAC9B;IACA;IACA;IACA;IACA;IACA;IACA;IACA;IACA;IACA;CACD;AAED,MAAMC,oCAAoC;IACxCJ,eAAeK,MAAM;IACrBL,eAAeM,OAAO;IACtBN,eAAeO,MAAM;IACrBP,eAAeQ,MAAM;IACrBR,eAAeS,MAAM;IACrBT,eAAeU,MAAM;IACrBV,eAAeW,MAAM;IACrBX,eAAeY,MAAM;IACrBZ,eAAea,MAAM;IACrBb,eAAec,OAAO;CACvB;AAED,SAASC,kBAAkBC,QAA8B;IACvD,MAAMC,mBACJnB,oBAAoBkB,aACpBjB,eACEiB,qBAAAA,+BAAAA,SAAUE,GAAG,CAACC,CAAAA,IAAKA,EAAEC,WAAW,KAChCjB;IAGJ,OAAOc,mBAAmB,WAAW;AACvC;AAEA,SAASI,oBAAoBC,QAAgB,EAAEC,gBAAgC,EAAEC,WAAqB;IACpG,IAAID,qBAAqB,UAAU;QACjC,OAAOD;IACT;IACA,MAAMG,QAAQtB,wBAAwBuB,OAAO,CAACJ,SAASF,WAAW;IAClE,IAAIK,UAAU,CAAC,GAAG;QAChB,OAAOxB,kBAAkBG,iCAAiC,CAACqB,MAAM,EAAED;IACrE;IACA,OAAOF;AACT;AAEA,OAAO,MAAMK,WAAW,CACtBC,aACAC,UACAL;IAEA,IAAI,CAACK,SAASC,OAAO,CAACC,GAAG,CAACH,cAAc;QACtC,IAAII;QACJ,IAAIH,SAASC,OAAO,CAACG,IAAI,GAAG7B,kCAAkC8B,MAAM,EAAE;YACpE,6DAA6D;YAC7DF,YAAY/B,kBAAkBG,iCAAiC,CAACyB,SAASC,OAAO,CAACG,IAAI,CAAC,EAAET;QAC1F,OAAO;YACLQ,YAAY9B,aAAa2B,SAASC,OAAO,CAACG,IAAI,EAAE,GAAGT;QACrD;QACAK,SAASC,OAAO,CAACK,GAAG,CAACP,aAAaI;QAClC,OAAOA;IACT;IAEA,OAAOH,SAASC,OAAO,CAACM,GAAG,CAACR;AAC9B,EAAE;AAEF,OAAO,MAAMS,kBAAkB,CAC7BrB,UACAsB,QACAT,UACAL;IAEA,MAAMe,YAAsB,EAAE;IAC9B,IAAI,CAACD,QAAQ;QACX,OAAOE;IACT;IACA,MAAMjB,mBAAmBR,kBAAkBC;IAC3C,IAAIlB,oBAAoBwC,SAAS;QAC/B,8DAA8D;QAC7DA,OAAiBG,OAAO,CAAC,CAACC,SAASjB;YAClC,MAAMkB,cAAcD,oBAAAA,8BAAAA,QAASE,QAAQ,GAAGC,IAAI;YAC5C,MAAMC,kBAAkBnB,SAAS,CAAC,MAAM,EAAEF,OAAO,EAAEI,UAAUL;YAC7D,IAAImB,aAAa;gBACf,MAAMI,cAAclD,QAAQ8C;gBAC5BJ,UAAUS,IAAI,CACZD,cAAc1B,oBAAoB0B,YAAYE,SAAS,IAAI1B,kBAAkBC,eAAesB;YAEhG,OAAO;gBACLP,UAAUS,IAAI,CAACF;YACjB;QACF;IACF,OAAO,IAAI,OAAOR,WAAW,UAAU;QACrC,MAAMS,cAAclD,QAAQyC;QAC5B,OAAOS,cACH1B,oBAAoB0B,YAAYE,SAAS,IAAI1B,kBAAkBC,eAC/DG,SAAS,WAAWE,UAAUL;IACpC;IACA,OAAOe;AACT,EAAE;AAEF,OAAO,MAAMW,eAAe,CAC1BlC,UACAmC,cACAb,QACAT,UACAL;IAEA,OAAO2B,iBAAiB,aAAab,SAASD,gBAAgBrB,UAAUsB,QAAQT,UAAUL,eAAegB;AAC3G,EAAE;AAEF,OAAO,MAAMY,eAAe,CAC1BC,iBACA5B,OACA6B,QACAzB,UACAL;IAEA,IAAI5B,QAAQ;IACZ,IAAIyD,mBAAmBvD,oBAAoBuD,kBAAkB;QAC3DzD,QAAQyD,eAAe,CAAC5B,QAAQ4B,gBAAgBnB,MAAM,CAAC;IACzD,OAAO,IAAI,OAAOmB,oBAAoB,UAAU;QAC9CzD,QAAQyD;IACV,OAAO;QACLzD,QAAQ+B,SAAS2B,QAAQzB,UAAUL;IACrC;IACA,OAAO5B;AACT,EAAE;AAEF,OAAO,MAAM2D,aAAa,CAACC,QAA2B/B;QAC7C+B,gBACiBA,iBACjBA,iBAA6CA,iBAC7CA;QACHA;IAJJ,OAAOA,EAAAA,iBAAAA,OAAOC,MAAM,cAAbD,qCAAAA,eAAeE,OAAO,IACzB5D,qBAAoB0D,kBAAAA,OAAOC,MAAM,cAAbD,sCAAAA,gBAAeE,OAAO,IACxC,EAACF,kBAAAA,OAAOC,MAAM,cAAbD,sCAAAA,gBAAeE,OAAO,CAAa,CAACjC,QAAQ,EAAC+B,kBAAAA,OAAOC,MAAM,cAAbD,sCAAAA,gBAAeE,OAAO,EAAcxB,MAAM,CAAC,IACxFsB,kBAAAA,OAAOC,MAAM,cAAbD,sCAAAA,gBAAeE,OAAO,GACzBF,CAAAA,kBAAAA,OAAOE,OAAO,cAAdF,6BAAAA,kBAAkB;AACxB,EAAE"}
1
+ {"version":3,"sources":["../src/components/DeclarativeChart/PlotlyColorAdapter.ts"],"sourcesContent":["import * as React from 'react';\nimport { color as d3Color } from 'd3-color';\nimport type { PieColors, Color, PlotData } from '@fluentui/chart-utilities';\nimport { isArrayOrTypedArray } from '@fluentui/chart-utilities';\nimport { areArraysEqual } from '../../utilities/utilities';\nimport { DataVizPalette, getColorFromToken, getNextColor } from '../../utilities/colors';\n\ntype PlotlyColorway = 'plotly' | 'others';\n\n// The color sequences in plotly express are defined here:\n// https://plotly.com/python/discrete-color/#:~:text=Join%20now.-,Color%20Sequences%20in%20Plotly%20Express,-By%20default%2C%20Plotly\nexport type ColorwayType = 'default' | 'builtin' | 'others' | undefined;\n\nconst DEFAULT_PLOTLY_COLORWAY = [\n '#636efa', //1\n '#ef553b', //2\n '#00cc96', //3\n '#ab63fa', //4\n '#ffa15a', //5\n '#19d3f3', //6\n '#ff6692', //7\n '#b6e880', //8\n '#ff97ff', //9\n '#fecb52', //10\n];\n\nconst PLOTLY_FLUENTVIZ_COLORWAY_MAPPING = [\n DataVizPalette.color1, //1\n DataVizPalette.warning, //2\n DataVizPalette.color8, //3\n DataVizPalette.color4, //4\n DataVizPalette.color7, //5\n DataVizPalette.color6, //6\n DataVizPalette.color2, //7\n DataVizPalette.color5, //8\n DataVizPalette.color9, //9\n DataVizPalette.color10, //10\n];\n\nfunction getPlotlyColorway(colorway: string[] | undefined): PlotlyColorway {\n const isPlotlyColorway =\n isArrayOrTypedArray(colorway) &&\n areArraysEqual(\n colorway?.map(c => c.toLowerCase()),\n DEFAULT_PLOTLY_COLORWAY,\n );\n\n return isPlotlyColorway ? 'plotly' : 'others';\n}\n\nfunction tryMapFluentDataViz(hexColor: string, templateColorway: PlotlyColorway, isDarkTheme?: boolean): string {\n if (templateColorway !== 'plotly') {\n return hexColor;\n }\n const index = DEFAULT_PLOTLY_COLORWAY.indexOf(hexColor.toLowerCase());\n if (index !== -1) {\n return getColorFromToken(PLOTLY_FLUENTVIZ_COLORWAY_MAPPING[index], isDarkTheme);\n }\n return hexColor;\n}\n\nexport const getColor = (\n legendLabel: string,\n colorMap: React.MutableRefObject<Map<string, string>>,\n isDarkTheme?: boolean,\n): string => {\n if (!colorMap.current.has(legendLabel)) {\n let nextColor: string;\n if (colorMap.current.size < PLOTLY_FLUENTVIZ_COLORWAY_MAPPING.length) {\n // Get first 10 colors from plotly-fluentviz colorway mapping\n nextColor = getColorFromToken(PLOTLY_FLUENTVIZ_COLORWAY_MAPPING[colorMap.current.size], isDarkTheme);\n } else {\n nextColor = getNextColor(colorMap.current.size, 0, isDarkTheme);\n }\n colorMap.current.set(legendLabel, nextColor);\n return nextColor;\n }\n\n return colorMap.current.get(legendLabel) as string;\n};\n\nexport const getSchemaColors = (\n colorway: string[] | undefined,\n colors: PieColors | Color | Color[] | string | null | undefined,\n colorMap: React.MutableRefObject<Map<string, string>>,\n isDarkTheme?: boolean,\n): string[] | string | undefined => {\n const hexColors: string[] = [];\n if (!colors) {\n return undefined;\n }\n const templateColorway = getPlotlyColorway(colorway);\n if (isArrayOrTypedArray(colors)) {\n // eslint-disable-next-line @typescript-eslint/no-explicit-any\n (colors as any[]).forEach((element, index) => {\n const colorString = element?.toString().trim();\n const nextFluentColor = getColor(`Label_${index}`, colorMap, isDarkTheme);\n if (colorString) {\n const parsedColor = d3Color(colorString);\n hexColors.push(\n parsedColor ? tryMapFluentDataViz(parsedColor.formatHex(), templateColorway, isDarkTheme) : nextFluentColor,\n );\n } else {\n hexColors.push(nextFluentColor);\n }\n });\n } else if (typeof colors === 'string') {\n const parsedColor = d3Color(colors);\n return parsedColor\n ? tryMapFluentDataViz(parsedColor.formatHex(), templateColorway, isDarkTheme)\n : getColor('Label_0', colorMap, isDarkTheme);\n }\n return hexColors;\n};\n\nexport const extractColor = (\n colorway: string[] | undefined,\n colorwayType: ColorwayType,\n colors: PieColors | Color | Color[] | string | null | undefined,\n colorMap: React.MutableRefObject<Map<string, string>>,\n isDarkTheme?: boolean,\n): string | string[] | undefined => {\n return colorwayType === 'default' && colors ? getSchemaColors(colorway, colors, colorMap, isDarkTheme) : undefined;\n};\n\nexport const resolveColor = (\n extractedColors: string[] | string | null | undefined,\n index: number,\n legend: string,\n colorMap: React.MutableRefObject<Map<string, string>>,\n isDarkTheme?: boolean,\n): string => {\n let color = '';\n if (extractedColors && isArrayOrTypedArray(extractedColors) && extractedColors.length > 0) {\n color = extractedColors[index % extractedColors.length];\n } else if (typeof extractedColors === 'string') {\n color = extractedColors;\n } else {\n color = getColor(legend, colorMap, isDarkTheme);\n }\n return color;\n};\n\nexport const getOpacity = (series: Partial<PlotData>, index: number): number => {\n return series.marker?.opacity\n ? isArrayOrTypedArray(series.marker?.opacity)\n ? (series.marker?.opacity as number[])[index % (series.marker?.opacity as number[]).length]\n : (series.marker?.opacity as number)\n : series.opacity ?? 1;\n};\n"],"names":["React","color","d3Color","isArrayOrTypedArray","areArraysEqual","DataVizPalette","getColorFromToken","getNextColor","DEFAULT_PLOTLY_COLORWAY","PLOTLY_FLUENTVIZ_COLORWAY_MAPPING","color1","warning","color8","color4","color7","color6","color2","color5","color9","color10","getPlotlyColorway","colorway","isPlotlyColorway","map","c","toLowerCase","tryMapFluentDataViz","hexColor","templateColorway","isDarkTheme","index","indexOf","getColor","legendLabel","colorMap","current","has","nextColor","size","length","set","get","getSchemaColors","colors","hexColors","undefined","forEach","element","colorString","toString","trim","nextFluentColor","parsedColor","push","formatHex","extractColor","colorwayType","resolveColor","extractedColors","legend","getOpacity","series","marker","opacity"],"mappings":"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"}
package/lib/components/DeclarativeChart/PlotlySchemaAdapter.js CHANGED
@@ -314,7 +314,8 @@ export const transformPlotlyJsonToVSBCProps = (input, isMultiPlot, colorMap, col
314
314
  roundCorners: true,
315
315
  showYAxisLables: true,
316
316
  noOfCharsToTruncate: 20,
317
- showYAxisLablesTooltip: true
317
+ showYAxisLablesTooltip: true,
318
+ ...getAxisCategoryOrderProps(input.data, input.layout)
318
319
  };
319
320
  };
320
321
  const createColorScale = (layout, series)=>{
@@ -359,7 +360,7 @@ export const transformPlotlyJsonToGVBCProps = (input, isMultiPlot, colorMap, col
359
360
  var _series_marker, _series_marker1, _series_marker_color, _series_marker2;
360
361
  const legend = legends[index1];
361
362
  // resolve color for each legend's bars from the colorscale or extracted colors
362
- const color = colorScale ? colorScale(isArrayOrTypedArray((_series_marker = series.marker) === null || _series_marker === void 0 ? void 0 : _series_marker.color) ? (_series_marker2 = series.marker) === null || _series_marker2 === void 0 ? void 0 : (_series_marker_color = _series_marker2.color) === null || _series_marker_color === void 0 ? void 0 : _series_marker_color[index2 % ((_series_marker1 = series.marker) === null || _series_marker1 === void 0 ? void 0 : _series_marker1.color).length] : 0) : resolveColor(extractedColors, index1, legend, colorMap, isDarkTheme);
363
+ const color = colorScale ? colorScale(isArrayOrTypedArray((_series_marker = series.marker) === null || _series_marker === void 0 ? void 0 : _series_marker.color) ? (_series_marker2 = series.marker) === null || _series_marker2 === void 0 ? void 0 : (_series_marker_color = _series_marker2.color) === null || _series_marker_color === void 0 ? void 0 : _series_marker_color[index2 % ((_series_marker1 = series.marker) === null || _series_marker1 === void 0 ? void 0 : _series_marker1.color).length] : 0) : resolveColor(extractedColors, index2, legend, colorMap, isDarkTheme);
363
364
  const opacity = getOpacity(series, index2);
364
365
  var _rgb_copy_formatHex8;
365
366
  mapXToDataPoints[x].series.push({
@@ -391,7 +392,8 @@ export const transformPlotlyJsonToGVBCProps = (input, isMultiPlot, colorMap, col
391
392
  hideTickOverlap: true,
392
393
  wrapXAxisLables: typeof ((_gvbcData_ = gvbcData[0]) === null || _gvbcData_ === void 0 ? void 0 : _gvbcData_.name) === 'string',
393
394
  hideLegend,
394
- roundCorners: true
395
+ roundCorners: true,
396
+ ...getAxisCategoryOrderProps(input.data, input.layout)
395
397
  };
396
398
  };
397
399
  export const transformPlotlyJsonToVBCProps = (input, isMultiPlot, colorMap, colorwayType, isDarkTheme)=>{
@@ -471,7 +473,8 @@ export const transformPlotlyJsonToVBCProps = (input, isMultiPlot, colorMap, colo
471
473
  wrapXAxisLables: typeof ((_vbcData_ = vbcData[0]) === null || _vbcData_ === void 0 ? void 0 : _vbcData_.x) === 'string',
472
474
  maxBarWidth: 50,
473
475
  hideLegend,
474
- roundCorners: true
476
+ roundCorners: true,
477
+ ...getAxisCategoryOrderProps(input.data, input.layout)
475
478
  };
476
479
  };
477
480
  export const transformPlotlyJsonToAreaChartProps = (input, isMultiPlot, colorMap, colorwayType, isDarkTheme)=>{
@@ -631,8 +634,7 @@ export const transformPlotlyJsonToHorizontalBarWithAxisProps = (input, isMultiPl
631
634
  }).formatHex8()) !== null && _rgb_copy_formatHex8 !== void 0 ? _rgb_copy_formatHex8 : color
632
635
  };
633
636
  }).filter((point)=>point !== null);
634
- }).reverse().flat()//reversing the order to invert the Y bars order as required by plotly.
635
- .reverse();
637
+ }).flat();
636
638
  var _input_layout_height;
637
639
  const chartHeight = (_input_layout_height = (_input_layout = input.layout) === null || _input_layout === void 0 ? void 0 : _input_layout.height) !== null && _input_layout_height !== void 0 ? _input_layout_height : 450;
638
640
  var _input_layout_margin_l;
@@ -659,7 +661,8 @@ export const transformPlotlyJsonToHorizontalBarWithAxisProps = (input, isMultiPl
659
661
  noOfCharsToTruncate: 20,
660
662
  showYAxisLablesTooltip: true,
661
663
  hideLegend,
662
- roundCorners: true
664
+ roundCorners: true,
665
+ ...getAxisCategoryOrderProps(input.data, input.layout)
663
666
  };
664
667
  };
665
668
  export const transformPlotlyJsonToHeatmapProps = (input, isMultiPlot, colorMap, colorwayType, isDarkTheme)=>{
@@ -792,7 +795,10 @@ export const transformPlotlyJsonToHeatmapProps = (input, isMultiPlot, colorMap,
792
795
  hideTickOverlap: true,
793
796
  noOfCharsToTruncate: 20,
794
797
  showYAxisLablesTooltip: true,
795
- wrapXAxisLables: true
798
+ wrapXAxisLables: true,
799
+ ...getAxisCategoryOrderProps([
800
+ firstData
801
+ ], input.layout)
796
802
  };
797
803
  };
798
804
  export const transformPlotlyJsonToSankeyProps = (input, isMultiPlot, colorMap, colorwayType, isDarkTheme)=>{
@@ -1518,3 +1524,42 @@ export const getGridProperties = (layout, isMultiPlot)=>{
1518
1524
  layout: reversedGridLayout
1519
1525
  };
1520
1526
  };
1527
+ /**
1528
+ * @see {@link https://github.com/plotly/plotly.js/blob/master/src/plots/cartesian/category_order_defaults.js#L50}
1529
+ */ const getAxisCategoryOrderProps = (data, layout)=>{
1530
+ const result = {};
1531
+ const axesById = {
1532
+ x: layout === null || layout === void 0 ? void 0 : layout.xaxis,
1533
+ y: layout === null || layout === void 0 ? void 0 : layout.yaxis
1534
+ };
1535
+ Object.keys(axesById).forEach((axId)=>{
1536
+ const ax = axesById[axId];
1537
+ const axLetter = axId[0];
1538
+ const propName = `${axLetter}AxisCategoryOrder`;
1539
+ const values = [];
1540
+ data.forEach((series)=>{
1541
+ var _series_axLetter;
1542
+ (_series_axLetter = series[axLetter]) === null || _series_axLetter === void 0 ? void 0 : _series_axLetter.forEach((val)=>{
1543
+ if (!isInvalidValue(val)) {
1544
+ values.push(val);
1545
+ }
1546
+ });
1547
+ });
1548
+ const isAxisTypeCategory = (ax === null || ax === void 0 ? void 0 : ax.type) === 'category' || isStringArray(values) && !isNumberArray(values) && !isDateArray(values);
1549
+ if (!isAxisTypeCategory) {
1550
+ return;
1551
+ }
1552
+ const isValidArray = isArrayOrTypedArray(ax === null || ax === void 0 ? void 0 : ax.categoryarray) && ax.categoryarray.length > 0;
1553
+ if (isValidArray && (!(ax === null || ax === void 0 ? void 0 : ax.categoryorder) || ax.categoryorder === 'array')) {
1554
+ result[propName] = ax.categoryarray;
1555
+ return;
1556
+ }
1557
+ if (!(ax === null || ax === void 0 ? void 0 : ax.categoryorder) || ax.categoryorder === 'trace' || ax.categoryorder === 'array') {
1558
+ const categoriesInTraceOrder = Array.from(new Set(values));
1559
+ result[propName] = categoriesInTraceOrder;
1560
+ return;
1561
+ }
1562
+ result[propName] = ax.categoryorder;
1563
+ });
1564
+ return result;
1565
+ };