@fluentui/react-charting 5.23.88 → 5.23.89

package/lib-commonjs/components/DeclarativeChart/PlotlyColorAdapter.js

@@ -0,0 +1,110 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.resolveColor = exports.extractColor = exports.getSchemaColors = exports.getColor = void 0;
+var d3_color_1 = require("d3-color");
+var chart_utilities_1 = require("@fluentui/chart-utilities");
+var utilities_1 = require("../../utilities/utilities");
+var colors_1 = require("../../utilities/colors");
+var DEFAULT_PLOTLY_COLORWAY = [
+    '#636efa', //1
+    '#ef553b', //2
+    '#00cc96', //3
+    '#ab63fa', //4
+    '#ffa15a', //5
+    '#19d3f3', //6
+    '#ff6692', //7
+    '#b6e880', //8
+    '#ff97ff', //9
+    '#fecb52', //10
+];
+var PLOTLY_FLUENTVIZ_COLORWAY_MAPPING = [
+    colors_1.DataVizPalette.color1, //1
+    colors_1.DataVizPalette.warning, //2
+    colors_1.DataVizPalette.color8, //3
+    colors_1.DataVizPalette.color4, //4
+    colors_1.DataVizPalette.color7, //5
+    colors_1.DataVizPalette.color6, //6
+    colors_1.DataVizPalette.color2, //7
+    colors_1.DataVizPalette.color5, //8
+    colors_1.DataVizPalette.color9, //9
+    colors_1.DataVizPalette.color10, //10
+];
+function getPlotlyColorway(colorway) {
+    var isPlotlyColorway = (0, chart_utilities_1.isArrayOrTypedArray)(colorway) &&
+        (0, utilities_1.areArraysEqual)(colorway === null || colorway === void 0 ? void 0 : colorway.map(function (c) { return c.toLowerCase(); }), DEFAULT_PLOTLY_COLORWAY);
+    return isPlotlyColorway ? 'plotly' : 'others';
+}
+function tryMapFluentDataViz(hexColor, templateColorway, isDarkTheme) {
+    if (templateColorway !== 'plotly') {
+        return hexColor;
+    }
+    var index = DEFAULT_PLOTLY_COLORWAY.indexOf(hexColor.toLowerCase());
+    if (index !== -1) {
+        return (0, colors_1.getColorFromToken)(PLOTLY_FLUENTVIZ_COLORWAY_MAPPING[index], isDarkTheme);
+    }
+    return hexColor;
+}
+var getColor = function (legendLabel, colorMap, isDarkTheme) {
+    if (!colorMap.current.has(legendLabel)) {
+        var nextColor = void 0;
+        if (colorMap.current.size < PLOTLY_FLUENTVIZ_COLORWAY_MAPPING.length) {
+            // Get first 10 colors from plotly-fluentviz colorway mapping
+            nextColor = (0, colors_1.getColorFromToken)(PLOTLY_FLUENTVIZ_COLORWAY_MAPPING[colorMap.current.size], isDarkTheme);
+        }
+        else {
+            nextColor = (0, colors_1.getNextColor)(colorMap.current.size, 0, isDarkTheme);
+        }
+        colorMap.current.set(legendLabel, nextColor);
+        return nextColor;
+    }
+    return colorMap.current.get(legendLabel);
+};
+exports.getColor = getColor;
+var getSchemaColors = function (colorway, colors, colorMap, isDarkTheme) {
+    var hexColors = [];
+    if (!colors) {
+        return undefined;
+    }
+    var templateColorway = getPlotlyColorway(colorway);
+    if ((0, chart_utilities_1.isArrayOrTypedArray)(colors)) {
+        // eslint-disable-next-line @typescript-eslint/no-explicit-any
+        colors.forEach(function (element, index) {
+            var colorString = element === null || element === void 0 ? void 0 : element.toString().trim();
+            var nextFluentColor = (0, exports.getColor)("Label_".concat(index), colorMap, isDarkTheme);
+            if (colorString) {
+                var parsedColor = (0, d3_color_1.color)(colorString);
+                hexColors.push(parsedColor ? tryMapFluentDataViz(parsedColor.formatHex(), templateColorway, isDarkTheme) : nextFluentColor);
+            }
+            else {
+                hexColors.push(nextFluentColor);
+            }
+        });
+    }
+    else if (typeof colors === 'string') {
+        var parsedColor = (0, d3_color_1.color)(colors);
+        return parsedColor
+            ? tryMapFluentDataViz(parsedColor.formatHex(), templateColorway, isDarkTheme)
+            : (0, exports.getColor)('Label_0', colorMap, isDarkTheme);
+    }
+    return hexColors;
+};
+exports.getSchemaColors = getSchemaColors;
+var extractColor = function (colorway, colorwayType, colors, colorMap, isDarkTheme) {
+    return colorwayType === 'default' && colors ? (0, exports.getSchemaColors)(colorway, colors, colorMap, isDarkTheme) : undefined;
+};
+exports.extractColor = extractColor;
+var resolveColor = function (extractedColors, index, legend, colorMap, isDarkTheme) {
+    var color = '';
+    if (extractedColors && (0, chart_utilities_1.isArrayOrTypedArray)(extractedColors) && extractedColors[index]) {
+        color = extractedColors[index % extractedColors.length];
+    }
+    else if (typeof extractedColors === 'string') {
+        color = extractedColors;
+    }
+    else {
+        color = (0, exports.getColor)(legend, colorMap, isDarkTheme);
+    }
+    return color;
+};
+exports.resolveColor = resolveColor;
+//# sourceMappingURL=PlotlyColorAdapter.js.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"PlotlyColorAdapter.js","sourceRoot":"../src/","sources":["components/DeclarativeChart/PlotlyColorAdapter.ts"],"names":[],"mappings":"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","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"]}

package/lib-commonjs/components/DeclarativeChart/PlotlySchemaAdapter.d.ts

@@ -9,22 +9,22 @@ import { IHeatMapChartProps } from '../HeatMapChart/index';
 import { IGaugeChartProps } from '../GaugeChart/index';
 import { IGroupedVerticalBarChartProps } from '../GroupedVerticalBarChart/index';
 import { IVerticalBarChartProps } from '../VerticalBarChart/index';
-import type { Datum, PlotlySchema, TypedArray, PieColors, Color } from '@fluentui/chart-utilities';
+import { IChartTableProps } from '../ChartTable/index';
+import type { Datum, PlotlySchema, TypedArray, Color } from '@fluentui/chart-utilities';
+import type { ColorwayType } from './PlotlyColorAdapter';
 export declare const isMonthArray: (data: Datum[] | Datum[][] | TypedArray) => boolean;
 export declare const correctYearMonth: (xValues: Datum[] | Datum[][] | TypedArray) => any[];
-export declare const getColor: (legendLabel: string, colorMap: React.MutableRefObject<Map<string, string>>, isDarkTheme?: boolean) => string;
-export declare const getSchemaColors: (colors: PieColors | Color | Color[] | string | null | undefined, colorMap: React.MutableRefObject<Map<string, string>>, isDarkTheme?: boolean) => string[] | string | undefined;
-export declare const _extractColor: (useFluentVizColorPalette: boolean, colors: PieColors | Color | Color[] | string | null | undefined, colorMap: React.MutableRefObject<Map<string, string>>, isDarkTheme?: boolean) => string | string[] | undefined;
-export declare const _resolveColor: (extractedColors: string[] | string | null | undefined, index: number, legend: string, colorMap: React.MutableRefObject<Map<string, string>>, isDarkTheme?: boolean) => string;
-export declare const transformPlotlyJsonToDonutProps: (input: PlotlySchema, colorMap: React.MutableRefObject<Map<string, string>>, useFluentVizColorPalette: boolean, isDarkTheme?: boolean) => IDonutChartProps;
-export declare const transformPlotlyJsonToVSBCProps: (input: PlotlySchema, colorMap: React.MutableRefObject<Map<string, string>>, useFluentVizColorPalette: boolean, isDarkTheme?: boolean, fallbackVSBC?: boolean) => IVerticalStackedBarChartProps;
-export declare const transformPlotlyJsonToGVBCProps: (input: PlotlySchema, colorMap: React.MutableRefObject<Map<string, string>>, useFluentVizColorPalette: boolean, isDarkTheme?: boolean) => IGroupedVerticalBarChartProps;
-export declare const transformPlotlyJsonToVBCProps: (input: PlotlySchema, colorMap: React.MutableRefObject<Map<string, string>>, useFluentVizColorPalette: boolean, isDarkTheme?: boolean) => IVerticalBarChartProps;
-export declare const transformPlotlyJsonToScatterChartProps: (input: PlotlySchema, isAreaChart: boolean, colorMap: React.MutableRefObject<Map<string, string>>, useFluentVizColorPalette: boolean, isDarkTheme?: boolean) => ILineChartProps | IAreaChartProps;
-export declare const transformPlotlyJsonToHorizontalBarWithAxisProps: (input: PlotlySchema, colorMap: React.MutableRefObject<Map<string, string>>, useFluentVizColorPalette: boolean, isDarkTheme?: boolean) => IHorizontalBarChartWithAxisProps;
+export declare const _getGaugeAxisColor: (colorway: string[] | undefined, colorwayType: ColorwayType, color: Color | undefined, colorMap: React.MutableRefObject<Map<string, string>>, isDarkTheme?: boolean) => string;
+export declare const transformPlotlyJsonToDonutProps: (input: PlotlySchema, colorMap: React.MutableRefObject<Map<string, string>>, colorwayType: ColorwayType, isDarkTheme?: boolean) => IDonutChartProps;
+export declare const transformPlotlyJsonToVSBCProps: (input: PlotlySchema, colorMap: React.MutableRefObject<Map<string, string>>, colorwayType: ColorwayType, isDarkTheme?: boolean, fallbackVSBC?: boolean) => IVerticalStackedBarChartProps;
+export declare const transformPlotlyJsonToGVBCProps: (input: PlotlySchema, colorMap: React.MutableRefObject<Map<string, string>>, colorwayType: ColorwayType, isDarkTheme?: boolean) => IGroupedVerticalBarChartProps;
+export declare const transformPlotlyJsonToVBCProps: (input: PlotlySchema, colorMap: React.MutableRefObject<Map<string, string>>, colorwayType: ColorwayType, isDarkTheme?: boolean) => IVerticalBarChartProps;
+export declare const transformPlotlyJsonToScatterChartProps: (input: PlotlySchema, isAreaChart: boolean, isScatterMarkers: boolean, colorMap: React.MutableRefObject<Map<string, string>>, colorwayType: ColorwayType, isDarkTheme?: boolean) => ILineChartProps | IAreaChartProps;
+export declare const transformPlotlyJsonToHorizontalBarWithAxisProps: (input: PlotlySchema, colorMap: React.MutableRefObject<Map<string, string>>, colorwayType: ColorwayType, isDarkTheme?: boolean) => IHorizontalBarChartWithAxisProps;
 export declare const transformPlotlyJsonToHeatmapProps: (input: PlotlySchema) => IHeatMapChartProps;
-export declare const transformPlotlyJsonToSankeyProps: (input: PlotlySchema, colorMap: React.MutableRefObject<Map<string, string>>, isDarkTheme?: boolean) => ISankeyChartProps;
-export declare const transformPlotlyJsonToGaugeProps: (input: PlotlySchema, colorMap: React.MutableRefObject<Map<string, string>>, isDarkTheme?: boolean) => IGaugeChartProps;
+export declare const transformPlotlyJsonToSankeyProps: (input: PlotlySchema, colorMap: React.MutableRefObject<Map<string, string>>, colorwayType: ColorwayType, isDarkTheme?: boolean) => ISankeyChartProps;
+export declare const transformPlotlyJsonToGaugeProps: (input: PlotlySchema, colorMap: React.MutableRefObject<Map<string, string>>, colorwayType: ColorwayType, isDarkTheme?: boolean) => IGaugeChartProps;
+export declare const transformPlotlyJsonToChartTableProps: (input: PlotlySchema, colorMap: React.MutableRefObject<Map<string, string>>, isDarkTheme?: boolean) => IChartTableProps;
 export declare const projectPolarToCartesian: (input: PlotlySchema) => PlotlySchema;
 /**
  * Interate iteratively through the trace object and find all the array attributes.