@fluentui/react-charts 9.2.0 → 9.2.2

package/lib/components/DeclarativeChart/PlotlyColorAdapter.js

@@ -0,0 +1,95 @@
+import * as React from 'react';
+import { color as d3Color } from 'd3-color';
+import { isArrayOrTypedArray } from '@fluentui/chart-utilities';
+import { areArraysEqual } from '../../utilities/utilities';
+import { DataVizPalette, getColorFromToken, getNextColor } from '../../utilities/colors';
+const DEFAULT_PLOTLY_COLORWAY = [
+    '#636efa',
+    '#ef553b',
+    '#00cc96',
+    '#ab63fa',
+    '#ffa15a',
+    '#19d3f3',
+    '#ff6692',
+    '#b6e880',
+    '#ff97ff',
+    '#fecb52'
+];
+const PLOTLY_FLUENTVIZ_COLORWAY_MAPPING = [
+    DataVizPalette.color1,
+    DataVizPalette.warning,
+    DataVizPalette.color8,
+    DataVizPalette.color4,
+    DataVizPalette.color7,
+    DataVizPalette.color6,
+    DataVizPalette.color2,
+    DataVizPalette.color5,
+    DataVizPalette.color9,
+    DataVizPalette.color10
+];
+function getPlotlyColorway(colorway) {
+    const isPlotlyColorway = isArrayOrTypedArray(colorway) && areArraysEqual(colorway === null || colorway === void 0 ? void 0 : colorway.map((c)=>c.toLowerCase()), DEFAULT_PLOTLY_COLORWAY);
+    return isPlotlyColorway ? 'plotly' : 'others';
+}
+function tryMapFluentDataViz(hexColor, templateColorway, isDarkTheme) {
+    if (templateColorway !== 'plotly') {
+        return hexColor;
+    }
+    const index = DEFAULT_PLOTLY_COLORWAY.indexOf(hexColor.toLowerCase());
+    if (index !== -1) {
+        return getColorFromToken(PLOTLY_FLUENTVIZ_COLORWAY_MAPPING[index], isDarkTheme);
+    }
+    return hexColor;
+}
+export const getColor = (legendLabel, colorMap, isDarkTheme)=>{
+    if (!colorMap.current.has(legendLabel)) {
+        let nextColor;
+        if (colorMap.current.size < PLOTLY_FLUENTVIZ_COLORWAY_MAPPING.length) {
+            // Get first 10 colors from plotly-fluentviz colorway mapping
+            nextColor = getColorFromToken(PLOTLY_FLUENTVIZ_COLORWAY_MAPPING[colorMap.current.size], isDarkTheme);
+        } else {
+            nextColor = getNextColor(colorMap.current.size, 0, isDarkTheme);
+        }
+        colorMap.current.set(legendLabel, nextColor);
+        return nextColor;
+    }
+    return colorMap.current.get(legendLabel);
+};
+export const getSchemaColors = (colorway, colors, colorMap, isDarkTheme)=>{
+    const hexColors = [];
+    if (!colors) {
+        return undefined;
+    }
+    const templateColorway = getPlotlyColorway(colorway);
+    if (isArrayOrTypedArray(colors)) {
+        // eslint-disable-next-line @typescript-eslint/no-explicit-any
+        colors.forEach((element, index)=>{
+            const colorString = element === null || element === void 0 ? void 0 : element.toString().trim();
+            const nextFluentColor = getColor(`Label_${index}`, colorMap, isDarkTheme);
+            if (colorString) {
+                const parsedColor = d3Color(colorString);
+                hexColors.push(parsedColor ? tryMapFluentDataViz(parsedColor.formatHex(), templateColorway, isDarkTheme) : nextFluentColor);
+            } else {
+                hexColors.push(nextFluentColor);
+            }
+        });
+    } else if (typeof colors === 'string') {
+        const parsedColor = d3Color(colors);
+        return parsedColor ? tryMapFluentDataViz(parsedColor.formatHex(), templateColorway, isDarkTheme) : getColor('Label_0', colorMap, isDarkTheme);
+    }
+    return hexColors;
+};
+export const extractColor = (colorway, colorwayType, colors, colorMap, isDarkTheme)=>{
+    return colorwayType === 'default' && colors ? getSchemaColors(colorway, colors, colorMap, isDarkTheme) : undefined;
+};
+export const resolveColor = (extractedColors, index, legend, colorMap, isDarkTheme)=>{
+    let color = '';
+    if (extractedColors && isArrayOrTypedArray(extractedColors) && extractedColors[index]) {
+        color = extractedColors[index % extractedColors.length];
+    } else if (typeof extractedColors === 'string') {
+        color = extractedColors;
+    } else {
+        color = getColor(legend, colorMap, isDarkTheme);
+    }
+    return color;
+};

package/lib/components/DeclarativeChart/PlotlyColorAdapter.js.map

@@ -0,0 +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 } 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[index]) {\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"],"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"],"mappings":"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"}