@fluentui/react-charting 5.24.32 → 5.24.34

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 (24) hide show
  1. package/CHANGELOG.json +66 -1
  2. package/CHANGELOG.md +22 -2
  3. package/dist/react-charting.js +1 -1
  4. package/dist/react-charting.min.js +1 -1
  5. package/lib/components/ChartTable/ChartTable.base.js +12 -6
  6. package/lib/components/ChartTable/ChartTable.base.js.map +1 -1
  7. package/lib/components/DeclarativeChart/PlotlySchemaAdapter.js +94 -16
  8. package/lib/components/DeclarativeChart/PlotlySchemaAdapter.js.map +1 -1
  9. package/lib/components/LineChart/LineChart.base.js +40 -23
  10. package/lib/components/LineChart/LineChart.base.js.map +1 -1
  11. package/lib-amd/components/ChartTable/ChartTable.base.js +12 -7
  12. package/lib-amd/components/ChartTable/ChartTable.base.js.map +1 -1
  13. package/lib-amd/components/DeclarativeChart/PlotlySchemaAdapter.js +94 -16
  14. package/lib-amd/components/DeclarativeChart/PlotlySchemaAdapter.js.map +1 -1
  15. package/lib-amd/components/LineChart/LineChart.base.js +40 -23
  16. package/lib-amd/components/LineChart/LineChart.base.js.map +1 -1
  17. package/lib-commonjs/components/ChartTable/ChartTable.base.js +12 -6
  18. package/lib-commonjs/components/ChartTable/ChartTable.base.js.map +1 -1
  19. package/lib-commonjs/components/DeclarativeChart/PlotlySchemaAdapter.js +94 -16
  20. package/lib-commonjs/components/DeclarativeChart/PlotlySchemaAdapter.js.map +1 -1
  21. package/lib-commonjs/components/LineChart/LineChart.base.js +40 -23
  22. package/lib-commonjs/components/LineChart/LineChart.base.js.map +1 -1
  23. package/package.json +2 -5
  24. package/project.json +2 -1
package/lib-commonjs/components/ChartTable/ChartTable.base.js CHANGED
@@ -7,6 +7,7 @@ var Utilities_1 = require("@fluentui/react/lib/Utilities");
7
7
  var image_export_utils_1 = require("../../utilities/image-export-utils");
8
8
  var d3 = require("d3-color");
9
9
  var colors_1 = require("../../utilities/colors");
10
+ var utilities_1 = require("../../utilities/utilities");
10
11
  function invertHexColor(hex, theme) {
11
12
  var color = d3.color(hex);
12
13
  if (!color) {
@@ -15,14 +16,19 @@ function invertHexColor(hex, theme) {
15
16
  var rgb = color.rgb();
16
17
  return d3.rgb(255 - rgb.r, 255 - rgb.g, 255 - rgb.b).formatHex();
17
18
  }
18
- function getSafeBackgroundColor(theme, foreground, background) {
19
+ function getSafeBackgroundColor(theme, chartContainer, foreground, background) {
19
20
  var fallbackFg = theme.semanticColors.bodyText;
20
21
  var fallbackBg = theme.semanticColors.bodyBackground;
21
- var fg = d3.color(foreground || fallbackFg);
22
- var bg = d3.color(background || fallbackBg);
23
- if (!fg || !bg) {
22
+ if (!chartContainer) {
24
23
  return fallbackBg;
25
24
  }
25
+ var resolvedFg = (0, utilities_1.resolveCSSVariables)(chartContainer, foreground || fallbackFg);
26
+ var resolvedBg = (0, utilities_1.resolveCSSVariables)(chartContainer, background || fallbackBg);
27
+ var fg = d3.color(resolvedFg);
28
+ var bg = d3.color(resolvedBg);
29
+ if (!fg || !bg) {
30
+ return resolvedBg;
31
+ }
26
32
  var contrast = (0, colors_1.getColorContrast)(fg.formatHex(), bg.formatHex());
27
33
  if (contrast >= 3) {
28
34
  return bg.formatHex();
@@ -107,7 +113,7 @@ var ChartTableBase = /** @class */ (function (_super) {
107
113
  style.backgroundColor = sharedBackgroundColor;
108
114
  }
109
115
  else if (fg || bg) {
110
- style.backgroundColor = getSafeBackgroundColor(theme, fg, bg);
116
+ style.backgroundColor = getSafeBackgroundColor(theme, _this._rootElem, fg, bg);
111
117
  }
112
118
  return (React.createElement("th", { key: idx, className: classNames.headerCell, style: style }, header.value));
113
119
  }))),
@@ -116,7 +122,7 @@ var ChartTableBase = /** @class */ (function (_super) {
116
122
  var fg = style.color;
117
123
  var bg = style.backgroundColor;
118
124
  if (fg || bg) {
119
- style.backgroundColor = getSafeBackgroundColor(theme, fg, bg);
125
+ style.backgroundColor = getSafeBackgroundColor(theme, _this._rootElem, fg, bg);
120
126
  }
121
127
  return (React.createElement("td", { key: colIdx, className: classNames.bodyCell, style: style }, cell.value));
122
128
  }))); })))))))));
package/lib-commonjs/components/ChartTable/ChartTable.base.js.map CHANGED
@@ -1 +1 @@
1
- {"version":3,"file":"ChartTable.base.js","sourceRoot":"../src/","sources":["components/ChartTable/ChartTable.base.tsx"],"names":[],"mappings":"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","sourcesContent":["import * as React from 'react';\nimport { IChartTableProps } from './ChartTable.types';\nimport { IChartTableStyleProps, IChartTableStyles } from '../../index';\nimport { classNamesFunction, getRTL, initializeComponentRef } from '@fluentui/react/lib/Utilities';\nimport { IImageExportOptions } from '../../types/index';\nimport { toImage } from '../../utilities/image-export-utils';\nimport * as d3 from 'd3-color';\nimport { getColorContrast } from '../../utilities/colors';\nimport { ITheme } from '@fluentui/react';\n\nfunction invertHexColor(hex: string, theme: ITheme): string {\n const color = d3.color(hex);\n if (!color) {\n return theme.semanticColors.bodyText!;\n }\n const rgb = color.rgb();\n return d3.rgb(255 - rgb.r, 255 - rgb.g, 255 - rgb.b).formatHex();\n}\n\nfunction getSafeBackgroundColor(theme: ITheme, foreground?: string, background?: string): string {\n const fallbackFg = theme.semanticColors.bodyText;\n const fallbackBg = theme.semanticColors.bodyBackground;\n\n const fg = d3.color(foreground || fallbackFg);\n const bg = d3.color(background || fallbackBg);\n if (!fg || !bg) {\n return fallbackBg;\n }\n const contrast = getColorContrast(fg.formatHex(), bg.formatHex());\n if (contrast >= 3) {\n return bg.formatHex();\n }\n\n const invertedBg = invertHexColor(bg.formatHex(), theme);\n const invertedContrast = getColorContrast(fg.formatHex(), invertedBg);\n return invertedContrast >= 3 ? invertedBg : fallbackBg;\n}\n\nconst getClassNames = classNamesFunction<IChartTableStyleProps, IChartTableStyles>();\n\nexport class ChartTableBase extends React.Component<IChartTableProps> {\n private _isRTL: boolean;\n private _rootElem: HTMLDivElement | null;\n\n constructor(props: IChartTableProps) {\n super(props);\n initializeComponentRef(this);\n this._isRTL = getRTL(props.theme);\n }\n public toImage = (opts?: IImageExportOptions): Promise<string> => {\n return toImage(this._rootElem, undefined, this._isRTL, opts);\n };\n\n // eslint-disable-next-line @typescript-eslint/no-deprecated\n public render(): JSX.Element {\n const { headers, rows, width, height, styles, theme } = this.props;\n\n const classNames = getClassNames(styles!, {\n theme: theme!,\n });\n\n if (!headers || headers.length === 0) {\n return <div>No data available</div>;\n }\n const bgColorSet = new Set<string>();\n headers.forEach(header => {\n const bg = header?.style?.backgroundColor;\n const normalized = d3.color(bg || '')?.formatHex();\n if (normalized) {\n bgColorSet.add(normalized);\n }\n });\n let sharedBackgroundColor: string | undefined;\n let useSharedBackground = false;\n\n /*\n If we have only one or two unique background colors, we can consider using a shared background color\n for the table headers. This is to ensure better contrast with the foreground text.\n For size 1, we will consider that as default color if it satisfies the contrast ratio.\n There could also be a scenario where backgroundcolor array is of size 2, for eg: [\"dimsgray\", \"gray\"],\n which will assign 1st column header bg color to dimsgray and rest to gray. so our logic of shared background\n color won't run here. So will consider for size 2 as well.\n For size greater than this, we will consider that user wants different colors and will let color contrast fail\n if any.\n */\n if (bgColorSet.size === 1 || bgColorSet.size === 2) {\n const candidateBg = bgColorSet.size === 1 ? Array.from(bgColorSet)[0] : Array.from(bgColorSet)[1];\n for (const header of headers) {\n const fg = header?.style?.color;\n if (fg && getColorContrast(fg, candidateBg) >= 3) {\n sharedBackgroundColor = candidateBg;\n useSharedBackground = true;\n break;\n }\n }\n }\n\n return (\n <div\n ref={el => (this._rootElem = el)}\n className={classNames.root}\n style={{ height: height ? `${height}px` : '650px', overflow: 'hidden' }}\n >\n <svg width={width ?? '100%'} height={height ?? '650px'} className={classNames.chart}>\n <foreignObject x=\"0\" y=\"0\" width=\"100%\" height=\"100%\">\n <div\n style={{\n maxHeight: height ? `${height}px` : '650px',\n overflowY: 'auto',\n overflowX: 'auto',\n }}\n >\n <table\n className={classNames.table}\n style={{\n width: width ? `${width}px` : '100%',\n }}\n >\n <thead>\n <tr>\n {headers.map((header, idx) => {\n const style = { ...header?.style };\n const fg = style.color;\n const bg = style.backgroundColor;\n\n if (useSharedBackground) {\n style.backgroundColor = sharedBackgroundColor;\n } else if (fg || bg) {\n style.backgroundColor = getSafeBackgroundColor(theme!, fg, bg);\n }\n return (\n <th key={idx} className={classNames.headerCell} style={style}>\n {header.value}\n </th>\n );\n })}\n </tr>\n </thead>\n {rows && rows.length > 0 && (\n <tbody>\n {rows.map((row, rowIdx) => (\n <tr key={rowIdx}>\n {row.map((cell, colIdx) => {\n const style = { ...cell?.style };\n const fg = style.color;\n const bg = style.backgroundColor;\n if (fg || bg) {\n style.backgroundColor = getSafeBackgroundColor(theme!, fg, bg);\n }\n return (\n <td key={colIdx} className={classNames.bodyCell} style={style}>\n {cell.value}\n </td>\n );\n })}\n </tr>\n ))}\n </tbody>\n )}\n </table>\n </div>\n </foreignObject>\n </svg>\n </div>\n );\n }\n}\n"]}
1
+ {"version":3,"file":"ChartTable.base.js","sourceRoot":"../src/","sources":["components/ChartTable/ChartTable.base.tsx"],"names":[],"mappings":"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","sourcesContent":["import * as React from 'react';\nimport { IChartTableProps } from './ChartTable.types';\nimport { IChartTableStyleProps, IChartTableStyles } from '../../index';\nimport { classNamesFunction, getRTL, initializeComponentRef } from '@fluentui/react/lib/Utilities';\nimport { IImageExportOptions } from '../../types/index';\nimport { toImage } from '../../utilities/image-export-utils';\nimport * as d3 from 'd3-color';\nimport { getColorContrast } from '../../utilities/colors';\nimport { ITheme } from '@fluentui/react';\nimport { resolveCSSVariables } from '../../utilities/utilities';\n\nfunction invertHexColor(hex: string, theme: ITheme): string {\n const color = d3.color(hex);\n if (!color) {\n return theme.semanticColors.bodyText!;\n }\n const rgb = color.rgb();\n return d3.rgb(255 - rgb.r, 255 - rgb.g, 255 - rgb.b).formatHex();\n}\n\nfunction getSafeBackgroundColor(\n theme: ITheme,\n chartContainer: HTMLElement,\n foreground?: string,\n background?: string,\n): string {\n const fallbackFg = theme.semanticColors.bodyText;\n const fallbackBg = theme.semanticColors.bodyBackground;\n if (!chartContainer) {\n return fallbackBg;\n }\n\n const resolvedFg = resolveCSSVariables(chartContainer, foreground || fallbackFg);\n const resolvedBg = resolveCSSVariables(chartContainer, background || fallbackBg);\n\n const fg = d3.color(resolvedFg);\n const bg = d3.color(resolvedBg);\n\n if (!fg || !bg) {\n return resolvedBg;\n }\n const contrast = getColorContrast(fg.formatHex(), bg.formatHex());\n if (contrast >= 3) {\n return bg.formatHex();\n }\n\n const invertedBg = invertHexColor(bg.formatHex(), theme);\n const invertedContrast = getColorContrast(fg.formatHex(), invertedBg);\n return invertedContrast >= 3 ? invertedBg : fallbackBg;\n}\n\nconst getClassNames = classNamesFunction<IChartTableStyleProps, IChartTableStyles>();\n\nexport class ChartTableBase extends React.Component<IChartTableProps> {\n private _isRTL: boolean;\n private _rootElem: HTMLDivElement | null;\n\n constructor(props: IChartTableProps) {\n super(props);\n initializeComponentRef(this);\n this._isRTL = getRTL(props.theme);\n }\n public toImage = (opts?: IImageExportOptions): Promise<string> => {\n return toImage(this._rootElem, undefined, this._isRTL, opts);\n };\n\n // eslint-disable-next-line @typescript-eslint/no-deprecated\n public render(): JSX.Element {\n const { headers, rows, width, height, styles, theme } = this.props;\n\n const classNames = getClassNames(styles!, {\n theme: theme!,\n });\n\n if (!headers || headers.length === 0) {\n return <div>No data available</div>;\n }\n const bgColorSet = new Set<string>();\n headers.forEach(header => {\n const bg = header?.style?.backgroundColor;\n const normalized = d3.color(bg || '')?.formatHex();\n if (normalized) {\n bgColorSet.add(normalized);\n }\n });\n let sharedBackgroundColor: string | undefined;\n let useSharedBackground = false;\n\n /*\n If we have only one or two unique background colors, we can consider using a shared background color\n for the table headers. This is to ensure better contrast with the foreground text.\n For size 1, we will consider that as default color if it satisfies the contrast ratio.\n There could also be a scenario where backgroundcolor array is of size 2, for eg: [\"dimsgray\", \"gray\"],\n which will assign 1st column header bg color to dimsgray and rest to gray. so our logic of shared background\n color won't run here. So will consider for size 2 as well.\n For size greater than this, we will consider that user wants different colors and will let color contrast fail\n if any.\n */\n if (bgColorSet.size === 1 || bgColorSet.size === 2) {\n const candidateBg = bgColorSet.size === 1 ? Array.from(bgColorSet)[0] : Array.from(bgColorSet)[1];\n for (const header of headers) {\n const fg = header?.style?.color;\n if (fg && getColorContrast(fg, candidateBg) >= 3) {\n sharedBackgroundColor = candidateBg;\n useSharedBackground = true;\n break;\n }\n }\n }\n\n return (\n <div\n ref={el => (this._rootElem = el)}\n className={classNames.root}\n style={{ height: height ? `${height}px` : '650px', overflow: 'hidden' }}\n >\n <svg width={width ?? '100%'} height={height ?? '650px'} className={classNames.chart}>\n <foreignObject x=\"0\" y=\"0\" width=\"100%\" height=\"100%\">\n <div\n style={{\n maxHeight: height ? `${height}px` : '650px',\n overflowY: 'auto',\n overflowX: 'auto',\n }}\n >\n <table\n className={classNames.table}\n style={{\n width: width ? `${width}px` : '100%',\n }}\n >\n <thead>\n <tr>\n {headers.map((header, idx) => {\n const style = { ...header?.style };\n const fg = style.color;\n const bg = style.backgroundColor;\n\n if (useSharedBackground) {\n style.backgroundColor = sharedBackgroundColor;\n } else if (fg || bg) {\n style.backgroundColor = getSafeBackgroundColor(theme!, this._rootElem!, fg, bg);\n }\n return (\n <th key={idx} className={classNames.headerCell} style={style}>\n {header.value}\n </th>\n );\n })}\n </tr>\n </thead>\n {rows && rows.length > 0 && (\n <tbody>\n {rows.map((row, rowIdx) => (\n <tr key={rowIdx}>\n {row.map((cell, colIdx) => {\n const style = { ...cell?.style };\n const fg = style.color;\n const bg = style.backgroundColor;\n if (fg || bg) {\n style.backgroundColor = getSafeBackgroundColor(theme!, this._rootElem!, fg, bg);\n }\n return (\n <td key={colIdx} className={classNames.bodyCell} style={style}>\n {cell.value}\n </td>\n );\n })}\n </tr>\n ))}\n </tbody>\n )}\n </table>\n </div>\n </foreignObject>\n </svg>\n </div>\n );\n }\n}\n"]}
package/lib-commonjs/components/DeclarativeChart/PlotlySchemaAdapter.js CHANGED
@@ -418,12 +418,12 @@ var transformPlotlyJsonToDonutProps = function (input, isMultiPlot, colorMap, co
418
418
  };
419
419
  exports.transformPlotlyJsonToDonutProps = transformPlotlyJsonToDonutProps;
420
420
  var transformPlotlyJsonToVSBCProps = function (input, isMultiPlot, colorMap, colorwayType, isDarkTheme, fallbackVSBC) {
421
- var _a, _b, _c, _d;
421
+ var _a, _b, _c, _d, _e, _f, _g, _h;
422
422
  var mapXToDataPoints = {};
423
423
  var yMaxValue = 0;
424
424
  var yMinValue = 0;
425
425
  var secondaryYAxisValues = getSecondaryYAxisValues(input.data, input.layout);
426
- var _e = getLegendProps(input.data, input.layout, isMultiPlot), legends = _e.legends, hideLegend = _e.hideLegend;
426
+ var _j = getLegendProps(input.data, input.layout, isMultiPlot), legends = _j.legends, hideLegend = _j.hideLegend;
427
427
  var colorScale = undefined;
428
428
  var yAxisTickFormat = getYAxisTickFormat(input.data[0], input.layout);
429
429
  input.data.forEach(function (series, index1) {
@@ -494,8 +494,53 @@ var transformPlotlyJsonToVSBCProps = function (input, isMultiPlot, colorMap, col
494
494
  });
495
495
  });
496
496
  });
497
+ var xCategories = (_b = (_a = input.data[0]) === null || _a === void 0 ? void 0 : _a.x) !== null && _b !== void 0 ? _b : [];
498
+ ((_d = (_c = input.layout) === null || _c === void 0 ? void 0 : _c.shapes) !== null && _d !== void 0 ? _d : [])
499
+ .filter(function (shape) { return shape.type === 'line'; })
500
+ .forEach(function (shape, shapeIdx) {
501
+ var _a, _b, _c;
502
+ var lineColor = (_a = shape.line) === null || _a === void 0 ? void 0 : _a.color;
503
+ // eslint-disable-next-line @typescript-eslint/no-explicit-any
504
+ var resolveX = function (val) {
505
+ if (typeof val === 'number' && Array.isArray(xCategories) && xCategories[val] !== undefined) {
506
+ return xCategories[val];
507
+ }
508
+ return val;
509
+ };
510
+ var x0Key = resolveX(shape.x0);
511
+ var x1Key = resolveX(shape.x1);
512
+ // eslint-disable-next-line @typescript-eslint/no-explicit-any
513
+ var resolveY = function (val) {
514
+ if (shape.yref === 'paper') {
515
+ if (val === 0) {
516
+ return yMinValue;
517
+ }
518
+ if (val === 1) {
519
+ return yMaxValue;
520
+ }
521
+ return yMinValue + val * (yMaxValue - yMinValue);
522
+ }
523
+ return val;
524
+ };
525
+ var y0Val = resolveY(shape.y0);
526
+ var y1Val = resolveY(shape.y1);
527
+ mapXToDataPoints[x0Key].lineData.push({
528
+ legend: "Reference_".concat(shapeIdx),
529
+ y: y0Val,
530
+ color: (_b = (0, d3_color_1.rgb)(lineColor).formatHex8()) !== null && _b !== void 0 ? _b : lineColor,
531
+ lineOptions: getLineOptions(shape.line),
532
+ useSecondaryYScale: false,
533
+ });
534
+ mapXToDataPoints[x1Key].lineData.push({
535
+ legend: "Reference_".concat(shapeIdx),
536
+ y: y1Val,
537
+ color: (_c = (0, d3_color_1.rgb)(lineColor).formatHex8()) !== null && _c !== void 0 ? _c : lineColor,
538
+ lineOptions: getLineOptions(shape.line),
539
+ useSecondaryYScale: false,
540
+ });
541
+ });
497
542
  var vsbcData = Object.values(mapXToDataPoints);
498
- return tslib_1.__assign(tslib_1.__assign(tslib_1.__assign(tslib_1.__assign(tslib_1.__assign(tslib_1.__assign(tslib_1.__assign(tslib_1.__assign(tslib_1.__assign({ data: vsbcData, width: (_a = input.layout) === null || _a === void 0 ? void 0 : _a.width, height: (_c = (_b = input.layout) === null || _b === void 0 ? void 0 : _b.height) !== null && _c !== void 0 ? _c : 350, barWidth: 'auto', yMaxValue: yMaxValue, yMinValue: yMinValue, mode: 'plotly' }, secondaryYAxisValues), { hideTickOverlap: true, hideLegend: hideLegend, roundCorners: true, supportNegativeData: true, barGapMax: 2, showYAxisLables: true, noOfCharsToTruncate: 20, showYAxisLablesTooltip: true, wrapXAxisLables: typeof ((_d = vsbcData[0]) === null || _d === void 0 ? void 0 : _d.xAxisPoint) === 'string' }), getTitles(input.layout)), getAxisCategoryOrderProps(input.data, input.layout)), getYMinMaxValues(input.data[0], input.layout)), getXAxisTickFormat(input.data[0], input.layout)), yAxisTickFormat), getBarProps(input.data, input.layout)), getAxisTickProps(input.data, input.layout));
543
+ return tslib_1.__assign(tslib_1.__assign(tslib_1.__assign(tslib_1.__assign(tslib_1.__assign(tslib_1.__assign(tslib_1.__assign(tslib_1.__assign(tslib_1.__assign({ data: vsbcData, width: (_e = input.layout) === null || _e === void 0 ? void 0 : _e.width, height: (_g = (_f = input.layout) === null || _f === void 0 ? void 0 : _f.height) !== null && _g !== void 0 ? _g : 350, barWidth: 'auto', yMaxValue: yMaxValue, yMinValue: yMinValue, mode: 'plotly' }, secondaryYAxisValues), { hideTickOverlap: true, hideLegend: hideLegend, roundCorners: true, supportNegativeData: true, barGapMax: 2, showYAxisLables: true, noOfCharsToTruncate: 20, showYAxisLablesTooltip: true, wrapXAxisLables: typeof ((_h = vsbcData[0]) === null || _h === void 0 ? void 0 : _h.xAxisPoint) === 'string' }), getTitles(input.layout)), getAxisCategoryOrderProps(input.data, input.layout)), getYMinMaxValues(input.data[0], input.layout)), getXAxisTickFormat(input.data[0], input.layout)), yAxisTickFormat), getBarProps(input.data, input.layout)), getAxisTickProps(input.data, input.layout));
499
544
  };
500
545
  exports.transformPlotlyJsonToVSBCProps = transformPlotlyJsonToVSBCProps;
501
546
  var transformPlotlyJsonToGVBCProps = function (input, isMultiPlot, colorMap, colorwayType, isDarkTheme) {
@@ -669,7 +714,7 @@ var transformPlotlyJsonToScatterChartProps = function (input, isMultiPlot, color
669
714
  };
670
715
  exports.transformPlotlyJsonToScatterChartProps = transformPlotlyJsonToScatterChartProps;
671
716
  var transformPlotlyJsonToScatterTraceProps = function (input, isMultiPlot, chartType, colorMap, colorwayType, isDarkTheme) {
672
- var _a, _b, _c, _d;
717
+ var _a, _b, _c, _d, _e, _f;
673
718
  var isScatterMarkers = [
674
719
  'text',
675
720
  'markers',
@@ -684,7 +729,7 @@ var transformPlotlyJsonToScatterTraceProps = function (input, isMultiPlot, chart
684
729
  var isScatterChart = chartType === 'scatter';
685
730
  var secondaryYAxisValues = getSecondaryYAxisValues(input.data, input.layout);
686
731
  var mode = 'tonexty';
687
- var _e = getLegendProps(input.data, input.layout, isMultiPlot), legends = _e.legends, hideLegend = _e.hideLegend;
732
+ var _g = getLegendProps(input.data, input.layout, isMultiPlot), legends = _g.legends, hideLegend = _g.hideLegend;
688
733
  var yAxisTickFormat = getYAxisTickFormat(input.data[0], input.layout);
689
734
  var chartData = input.data
690
735
  .map(function (series, index) {
@@ -744,6 +789,7 @@ var transformPlotlyJsonToScatterTraceProps = function (input, isMultiPlot, chart
744
789
  axisLabel: series.__axisLabel
745
790
  ? series.__axisLabel
746
791
  : {},
792
+ fill: series.fill,
747
793
  }
748
794
  : {})),
749
795
  useSecondaryYScale: usesSecondaryYScale(series, input.layout),
@@ -751,6 +797,22 @@ var transformPlotlyJsonToScatterTraceProps = function (input, isMultiPlot, chart
751
797
  });
752
798
  })
753
799
  .flat();
800
+ var lineShape = ((_c = (_b = input.layout) === null || _b === void 0 ? void 0 : _b.shapes) !== null && _c !== void 0 ? _c : [])
801
+ .filter(function (shape) { return shape.type === 'line'; })
802
+ .map(function (shape, shapeIdx) {
803
+ var _a, _b;
804
+ var lineColor = (_a = shape.line) === null || _a === void 0 ? void 0 : _a.color;
805
+ return {
806
+ legend: "Reference_".concat(shapeIdx),
807
+ data: [
808
+ { x: shape.x0, y: shape.y0 },
809
+ { x: shape.x1, y: shape.y1 },
810
+ ],
811
+ color: (_b = (0, d3_color_1.rgb)(lineColor).formatHex8()) !== null && _b !== void 0 ? _b : lineColor,
812
+ lineOptions: getLineOptions(shape.line),
813
+ useSecondaryYScale: false,
814
+ };
815
+ });
754
816
  var yMinMax = getYMinMaxValues(input.data[0], input.layout);
755
817
  if (yMinMax.yMinValue === undefined && yMinMax.yMaxValue === undefined) {
756
818
  var yMinMaxValues = (0, utilities_1.findNumericMinMaxOfY)(chartData);
@@ -759,12 +821,12 @@ var transformPlotlyJsonToScatterTraceProps = function (input, isMultiPlot, chart
759
821
  }
760
822
  var numDataPoints = chartData.reduce(function (total, lineChartPoints) { return total + lineChartPoints.data.length; }, 0);
761
823
  var chartProps = {
762
- lineChartData: chartData,
824
+ lineChartData: tslib_1.__spreadArray(tslib_1.__spreadArray([], chartData, true), lineShape, true),
763
825
  };
764
826
  var scatterChartProps = {
765
827
  scatterChartData: chartData,
766
828
  };
767
- var commonProps = tslib_1.__assign(tslib_1.__assign(tslib_1.__assign(tslib_1.__assign(tslib_1.__assign(tslib_1.__assign(tslib_1.__assign({ supportNegativeData: true }, secondaryYAxisValues), { width: (_b = input.layout) === null || _b === void 0 ? void 0 : _b.width, height: (_d = (_c = input.layout) === null || _c === void 0 ? void 0 : _c.height) !== null && _d !== void 0 ? _d : 350, hideTickOverlap: true, hideLegend: hideLegend, useUTC: false, optimizeLargeData: numDataPoints > 1000 }), getTitles(input.layout)), getXAxisTickFormat(input.data[0], input.layout)), yAxisTickFormat), getAxisScaleTypeProps(input.data, input.layout)), getAxisTickProps(input.data, input.layout));
829
+ var commonProps = tslib_1.__assign(tslib_1.__assign(tslib_1.__assign(tslib_1.__assign(tslib_1.__assign(tslib_1.__assign(tslib_1.__assign({ supportNegativeData: true }, secondaryYAxisValues), { width: (_d = input.layout) === null || _d === void 0 ? void 0 : _d.width, height: (_f = (_e = input.layout) === null || _e === void 0 ? void 0 : _e.height) !== null && _f !== void 0 ? _f : 350, hideTickOverlap: true, hideLegend: hideLegend, useUTC: false, optimizeLargeData: numDataPoints > 1000 }), getTitles(input.layout)), getXAxisTickFormat(input.data[0], input.layout)), yAxisTickFormat), getAxisScaleTypeProps(input.data, input.layout)), getAxisTickProps(input.data, input.layout));
768
830
  if (isAreaChart) {
769
831
  return tslib_1.__assign({ data: chartProps, mode: mode }, commonProps);
770
832
  }
@@ -1142,8 +1204,20 @@ function resolveCellStyle(raw, rowIndex, colIndex) {
1142
1204
  }
1143
1205
  return raw;
1144
1206
  }
1207
+ function mergeCells(tableCells, templateCells) {
1208
+ var _a, _b, _c, _d, _e, _f, _g, _h, _j, _k;
1209
+ return {
1210
+ values: (_b = (_a = tableCells === null || tableCells === void 0 ? void 0 : tableCells.values) !== null && _a !== void 0 ? _a : templateCells === null || templateCells === void 0 ? void 0 : templateCells.values) !== null && _b !== void 0 ? _b : [],
1211
+ align: (_c = tableCells === null || tableCells === void 0 ? void 0 : tableCells.align) !== null && _c !== void 0 ? _c : templateCells === null || templateCells === void 0 ? void 0 : templateCells.align,
1212
+ fill: tslib_1.__assign(tslib_1.__assign({}, ((_d = templateCells === null || templateCells === void 0 ? void 0 : templateCells.fill) !== null && _d !== void 0 ? _d : {})), ((_e = tableCells === null || tableCells === void 0 ? void 0 : tableCells.fill) !== null && _e !== void 0 ? _e : {})),
1213
+ font: tslib_1.__assign(tslib_1.__assign({}, ((_f = templateCells === null || templateCells === void 0 ? void 0 : templateCells.font) !== null && _f !== void 0 ? _f : {})), ((_g = tableCells === null || tableCells === void 0 ? void 0 : tableCells.font) !== null && _g !== void 0 ? _g : {})),
1214
+ format: (_h = tableCells === null || tableCells === void 0 ? void 0 : tableCells.format) !== null && _h !== void 0 ? _h : templateCells === null || templateCells === void 0 ? void 0 : templateCells.format,
1215
+ prefix: (_j = tableCells === null || tableCells === void 0 ? void 0 : tableCells.prefix) !== null && _j !== void 0 ? _j : templateCells === null || templateCells === void 0 ? void 0 : templateCells.prefix,
1216
+ suffix: (_k = tableCells === null || tableCells === void 0 ? void 0 : tableCells.suffix) !== null && _k !== void 0 ? _k : templateCells === null || templateCells === void 0 ? void 0 : templateCells.suffix,
1217
+ };
1218
+ }
1145
1219
  var transformPlotlyJsonToChartTableProps = function (input, isMultiPlot, colorMap, colorwayType, isDarkTheme) {
1146
- var _a, _b, _c, _d, _e, _f, _g, _h, _j, _k, _l, _m, _o, _p, _q, _r;
1220
+ var _a, _b, _c, _d, _e, _f, _g, _h, _j, _k, _l, _m, _o, _p, _q, _r, _s, _t, _u, _v, _w, _x, _y, _z, _0;
1147
1221
  var tableData = input.data[0];
1148
1222
  var normalizeHeaders = function (values, header) {
1149
1223
  var cleanedValues = Array.isArray(values[0])
@@ -1167,9 +1241,7 @@ var transformPlotlyJsonToChartTableProps = function (input, isMultiPlot, colorMa
1167
1241
  });
1168
1242
  };
1169
1243
  var columns = (_b = (_a = tableData.cells) === null || _a === void 0 ? void 0 : _a.values) !== null && _b !== void 0 ? _b : [];
1170
- var cells = tableData.cells && Object.keys(tableData.cells).length > 0
1171
- ? tableData.cells
1172
- : (_g = (_f = (_e = (_d = (_c = input.layout) === null || _c === void 0 ? void 0 : _c.template) === null || _d === void 0 ? void 0 : _d.data) === null || _e === void 0 ? void 0 : _e.table) === null || _f === void 0 ? void 0 : _f[0]) === null || _g === void 0 ? void 0 : _g.cells;
1244
+ var cells = mergeCells(tableData.cells, (_g = (_f = (_e = (_d = (_c = input.layout) === null || _c === void 0 ? void 0 : _c.template) === null || _d === void 0 ? void 0 : _d.data) === null || _e === void 0 ? void 0 : _e.table) === null || _f === void 0 ? void 0 : _f[0]) === null || _g === void 0 ? void 0 : _g.cells);
1173
1245
  var rows = columns[0].map(function (_, rowIndex) {
1174
1246
  return columns.map(function (col, colIndex) {
1175
1247
  var _a, _b, _c;
@@ -1192,13 +1264,19 @@ var transformPlotlyJsonToChartTableProps = function (input, isMultiPlot, colorMa
1192
1264
  var styles = {
1193
1265
  root: tslib_1.__assign({}, (((_j = (_h = input.layout) === null || _h === void 0 ? void 0 : _h.font) === null || _j === void 0 ? void 0 : _j.size) ? { fontSize: input.layout.font.size } : {})),
1194
1266
  };
1267
+ var templateHeader = (_p = (_o = (_m = (_l = (_k = input.layout) === null || _k === void 0 ? void 0 : _k.template) === null || _l === void 0 ? void 0 : _l.data) === null || _m === void 0 ? void 0 : _m.table) === null || _o === void 0 ? void 0 : _o[0]) === null || _p === void 0 ? void 0 : _p.header;
1268
+ var tableHeader = tableData.header;
1269
+ var header = {
1270
+ align: (_q = tableHeader === null || tableHeader === void 0 ? void 0 : tableHeader.align) !== null && _q !== void 0 ? _q : templateHeader === null || templateHeader === void 0 ? void 0 : templateHeader.align,
1271
+ fill: tslib_1.__assign(tslib_1.__assign({}, ((_r = templateHeader === null || templateHeader === void 0 ? void 0 : templateHeader.fill) !== null && _r !== void 0 ? _r : {})), ((_s = tableHeader === null || tableHeader === void 0 ? void 0 : tableHeader.fill) !== null && _s !== void 0 ? _s : {})),
1272
+ font: tslib_1.__assign(tslib_1.__assign({}, ((_t = templateHeader === null || templateHeader === void 0 ? void 0 : templateHeader.font) !== null && _t !== void 0 ? _t : {})), ((_u = tableHeader === null || tableHeader === void 0 ? void 0 : tableHeader.font) !== null && _u !== void 0 ? _u : {})),
1273
+ values: (_w = (_v = tableHeader === null || tableHeader === void 0 ? void 0 : tableHeader.values) !== null && _v !== void 0 ? _v : templateHeader === null || templateHeader === void 0 ? void 0 : templateHeader.values) !== null && _w !== void 0 ? _w : [],
1274
+ };
1195
1275
  return {
1196
- headers: normalizeHeaders((_l = (_k = tableData.header) === null || _k === void 0 ? void 0 : _k.values) !== null && _l !== void 0 ? _l : [], tableData.header && Object.keys(tableData.header).length > 0
1197
- ? tableData.header
1198
- : (_p = (_o = (_m = input.layout) === null || _m === void 0 ? void 0 : _m.template) === null || _o === void 0 ? void 0 : _o.data) === null || _p === void 0 ? void 0 : _p.table[0].header),
1276
+ headers: normalizeHeaders((_y = (_x = tableData.header) === null || _x === void 0 ? void 0 : _x.values) !== null && _y !== void 0 ? _y : [], header),
1199
1277
  rows: rows,
1200
- width: (_q = input.layout) === null || _q === void 0 ? void 0 : _q.width,
1201
- height: (_r = input.layout) === null || _r === void 0 ? void 0 : _r.height,
1278
+ width: (_z = input.layout) === null || _z === void 0 ? void 0 : _z.width,
1279
+ height: (_0 = input.layout) === null || _0 === void 0 ? void 0 : _0.height,
1202
1280
  styles: styles,
1203
1281
  };
1204
1282
  };