@fluentui/react-charts 0.0.0-nightly-20250814-0406.1 → 0.0.0-nightly-20250818-0407.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 (29) hide show
  1. package/CHANGELOG.md +15 -15
  2. package/dist/index.d.ts +15 -6
  3. package/lib/components/CommonComponents/CartesianChart.js +12 -16
  4. package/lib/components/CommonComponents/CartesianChart.js.map +1 -1
  5. package/lib/components/CommonComponents/CartesianChart.types.js.map +1 -1
  6. package/lib/components/DeclarativeChart/DeclarativeChart.js +3 -2
  7. package/lib/components/DeclarativeChart/DeclarativeChart.js.map +1 -1
  8. package/lib/components/DeclarativeChart/PlotlySchemaAdapter.js +55 -38
  9. package/lib/components/DeclarativeChart/PlotlySchemaAdapter.js.map +1 -1
  10. package/lib/components/VerticalStackedBarChart/VerticalStackedBarChart.js +126 -33
  11. package/lib/components/VerticalStackedBarChart/VerticalStackedBarChart.js.map +1 -1
  12. package/lib/components/VerticalStackedBarChart/VerticalStackedBarChart.types.js.map +1 -1
  13. package/lib/types/DataPoint.js.map +1 -1
  14. package/lib/utilities/utilities.js +10 -4
  15. package/lib/utilities/utilities.js.map +1 -1
  16. package/lib-commonjs/components/CommonComponents/CartesianChart.js +12 -15
  17. package/lib-commonjs/components/CommonComponents/CartesianChart.js.map +1 -1
  18. package/lib-commonjs/components/CommonComponents/CartesianChart.types.js.map +1 -1
  19. package/lib-commonjs/components/DeclarativeChart/DeclarativeChart.js +2 -1
  20. package/lib-commonjs/components/DeclarativeChart/DeclarativeChart.js.map +1 -1
  21. package/lib-commonjs/components/DeclarativeChart/PlotlySchemaAdapter.js +57 -38
  22. package/lib-commonjs/components/DeclarativeChart/PlotlySchemaAdapter.js.map +1 -1
  23. package/lib-commonjs/components/VerticalStackedBarChart/VerticalStackedBarChart.js +125 -32
  24. package/lib-commonjs/components/VerticalStackedBarChart/VerticalStackedBarChart.js.map +1 -1
  25. package/lib-commonjs/components/VerticalStackedBarChart/VerticalStackedBarChart.types.js.map +1 -1
  26. package/lib-commonjs/types/DataPoint.js.map +1 -1
  27. package/lib-commonjs/utilities/utilities.js +10 -4
  28. package/lib-commonjs/utilities/utilities.js.map +1 -1
  29. package/package.json +13 -13
package/lib-commonjs/components/DeclarativeChart/PlotlySchemaAdapter.js CHANGED
@@ -24,6 +24,9 @@ _export(exports, {
24
24
  getValidXYRanges: function() {
25
25
  return getValidXYRanges;
26
26
  },
27
+ isStringArray: function() {
28
+ return isStringArray;
29
+ },
27
30
  projectPolarToCartesian: function() {
28
31
  return projectPolarToCartesian;
29
32
  },
@@ -279,14 +282,18 @@ const transformPlotlyJsonToVSBCProps = (input, colorMap, colorwayType, isDarkThe
279
282
  let yMaxValue = 0;
280
283
  const secondaryYAxisValues = getSecondaryYAxisValues(input.data, input.layout);
281
284
  const { legends, hideLegend } = getLegendProps(input.data, input.layout);
285
+ let colorScale = undefined;
282
286
  let yMinValue = 0;
283
287
  input.data.forEach((series, index1)=>{
284
- var _input_layout_template_layout, _input_layout_template, _input_layout, _series_marker, _input_layout_template_layout1, _input_layout_template1, _input_layout1, _series_line;
288
+ var _input_layout_coloraxis_colorscale, _input_layout_coloraxis, _input_layout, _series_marker, _series_marker1, _series_marker_color, _series_marker2, _input_layout_template_layout, _input_layout_template, _input_layout1, _series_marker3, _input_layout_template_layout1, _input_layout_template1, _input_layout2, _series_line;
289
+ if (((_input_layout = input.layout) === null || _input_layout === void 0 ? void 0 : (_input_layout_coloraxis = _input_layout.coloraxis) === null || _input_layout_coloraxis === void 0 ? void 0 : (_input_layout_coloraxis_colorscale = _input_layout_coloraxis.colorscale) === null || _input_layout_coloraxis_colorscale === void 0 ? void 0 : _input_layout_coloraxis_colorscale.length) && (0, _chartutilities.isArrayOrTypedArray)((_series_marker = series.marker) === null || _series_marker === void 0 ? void 0 : _series_marker.color) && ((_series_marker1 = series.marker) === null || _series_marker1 === void 0 ? void 0 : _series_marker1.color).length > 0 && typeof ((_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[0]) === 'number') {
290
+ colorScale = createColorScale(input.layout, series);
291
+ }
285
292
  const isXYearCategory = (0, _chartutilities.isYearArray)(series.x); // Consider year as categorical not numeric continuous axis
286
293
  // extract bar colors for each series only once
287
- const extractedBarColors = (0, _PlotlyColorAdapter.extractColor)((_input_layout = input.layout) === null || _input_layout === void 0 ? void 0 : (_input_layout_template = _input_layout.template) === null || _input_layout_template === void 0 ? void 0 : (_input_layout_template_layout = _input_layout_template.layout) === null || _input_layout_template_layout === void 0 ? void 0 : _input_layout_template_layout.colorway, colorwayType, (_series_marker = series.marker) === null || _series_marker === void 0 ? void 0 : _series_marker.color, colorMap, isDarkTheme);
294
+ const extractedBarColors = (0, _PlotlyColorAdapter.extractColor)((_input_layout1 = input.layout) === null || _input_layout1 === void 0 ? void 0 : (_input_layout_template = _input_layout1.template) === null || _input_layout_template === void 0 ? void 0 : (_input_layout_template_layout = _input_layout_template.layout) === null || _input_layout_template_layout === void 0 ? void 0 : _input_layout_template_layout.colorway, colorwayType, (_series_marker3 = series.marker) === null || _series_marker3 === void 0 ? void 0 : _series_marker3.color, colorMap, isDarkTheme);
288
295
  // extract line colors for each series only once
289
- const extractedLineColors = (0, _PlotlyColorAdapter.extractColor)((_input_layout1 = input.layout) === null || _input_layout1 === void 0 ? void 0 : (_input_layout_template1 = _input_layout1.template) === null || _input_layout_template1 === void 0 ? void 0 : (_input_layout_template_layout1 = _input_layout_template1.layout) === null || _input_layout_template_layout1 === void 0 ? void 0 : _input_layout_template_layout1.colorway, colorwayType, (_series_line = series.line) === null || _series_line === void 0 ? void 0 : _series_line.color, colorMap, isDarkTheme);
296
+ const extractedLineColors = (0, _PlotlyColorAdapter.extractColor)((_input_layout2 = input.layout) === null || _input_layout2 === void 0 ? void 0 : (_input_layout_template1 = _input_layout2.template) === null || _input_layout_template1 === void 0 ? void 0 : (_input_layout_template_layout1 = _input_layout_template1.layout) === null || _input_layout_template_layout1 === void 0 ? void 0 : _input_layout_template_layout1.colorway, colorwayType, (_series_line = series.line) === null || _series_line === void 0 ? void 0 : _series_line.color, colorMap, isDarkTheme);
290
297
  const xValues = series.x;
291
298
  const isXDate = (0, _chartutilities.isDateArray)(xValues);
292
299
  const isXString = isStringArray(xValues);
@@ -296,6 +303,7 @@ const transformPlotlyJsonToVSBCProps = (input, colorMap, colorwayType, isDarkThe
296
303
  const rangeXValues = series.x.slice(rangeStart, rangeEnd);
297
304
  const rangeYValues = series.y.slice(rangeStart, rangeEnd);
298
305
  rangeXValues.forEach((x, index2)=>{
306
+ var _series_marker, _series_marker1, _series_marker_color, _series_marker2;
299
307
  if (!mapXToDataPoints[x]) {
300
308
  mapXToDataPoints[x] = {
301
309
  xAxisPoint: resolveXAxisPoint(x, isXYearCategory, isXString, isXDate, isXNumber),
@@ -304,8 +312,8 @@ const transformPlotlyJsonToVSBCProps = (input, colorMap, colorwayType, isDarkThe
304
312
  };
305
313
  }
306
314
  const legend = legends[index1];
307
- // resolve color for each legend's bars from the extracted colors
308
- const color = (0, _PlotlyColorAdapter.resolveColor)(extractedBarColors, index1, legend, colorMap, isDarkTheme);
315
+ // resolve color for each legend's bars from the colorscale or extracted colors
316
+ const color = colorScale ? colorScale((0, _chartutilities.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) : (0, _PlotlyColorAdapter.resolveColor)(extractedBarColors, index2, legend, colorMap, isDarkTheme);
309
317
  const yVal = rangeYValues[index2];
310
318
  if (series.type === 'bar') {
311
319
  mapXToDataPoints[x].chartData.push({
@@ -313,6 +321,9 @@ const transformPlotlyJsonToVSBCProps = (input, colorMap, colorwayType, isDarkThe
313
321
  data: yVal,
314
322
  color
315
323
  });
324
+ if (typeof yVal === 'number') {
325
+ yMaxValue = Math.max(yMaxValue, yVal);
326
+ }
316
327
  } else if (series.type === 'scatter' || !!fallbackVSBC) {
317
328
  var _series_line;
318
329
  const lineColor = (0, _PlotlyColorAdapter.resolveColor)(extractedLineColors, index1, legend, colorMap, isDarkTheme);
@@ -329,7 +340,7 @@ const transformPlotlyJsonToVSBCProps = (input, colorMap, colorwayType, isDarkThe
329
340
  } : {},
330
341
  useSecondaryYScale: usesSecondaryYScale(series)
331
342
  });
332
- if (!usesSecondaryYScale(series)) {
343
+ if (!usesSecondaryYScale(series) && typeof yVal === 'number') {
333
344
  yMaxValue = Math.max(yMaxValue, yVal);
334
345
  yMinValue = Math.min(yMinValue, yVal);
335
346
  }
@@ -357,14 +368,24 @@ const transformPlotlyJsonToVSBCProps = (input, colorMap, colorwayType, isDarkThe
357
368
  hideTickOverlap: true,
358
369
  barGapMax: 2,
359
370
  hideLegend,
360
- roundCorners: true
371
+ roundCorners: true,
372
+ showYAxisLables: true,
373
+ noOfCharsToTruncate: 20,
374
+ showYAxisLablesTooltip: true
361
375
  };
362
376
  };
363
- const createColorScale = (colorscale, domain)=>{
364
- const [dMin, dMax] = domain;
377
+ const createColorScale = (layout, series)=>{
378
+ var _layout_coloraxis, _series_marker, _layout_coloraxis1, _layout_coloraxis2;
379
+ const scale = layout === null || layout === void 0 ? void 0 : (_layout_coloraxis = layout.coloraxis) === null || _layout_coloraxis === void 0 ? void 0 : _layout_coloraxis.colorscale;
380
+ const colorValues = (_series_marker = series.marker) === null || _series_marker === void 0 ? void 0 : _series_marker.color;
381
+ var _layout_coloraxis_cmin, _layout_coloraxis_cmax;
382
+ const [dMin, dMax] = [
383
+ (_layout_coloraxis_cmin = layout === null || layout === void 0 ? void 0 : (_layout_coloraxis1 = layout.coloraxis) === null || _layout_coloraxis1 === void 0 ? void 0 : _layout_coloraxis1.cmin) !== null && _layout_coloraxis_cmin !== void 0 ? _layout_coloraxis_cmin : Math.min(...colorValues),
384
+ (_layout_coloraxis_cmax = layout === null || layout === void 0 ? void 0 : (_layout_coloraxis2 = layout.coloraxis) === null || _layout_coloraxis2 === void 0 ? void 0 : _layout_coloraxis2.cmax) !== null && _layout_coloraxis_cmax !== void 0 ? _layout_coloraxis_cmax : Math.max(...colorValues)
385
+ ];
365
386
  // Normalize colorscale domain to actual data domain
366
- const scaleDomain = colorscale.map(([pos])=>dMin + pos * (dMax - dMin));
367
- const scaleColors = colorscale.map((item)=>item[1]);
387
+ const scaleDomain = scale.map(([pos])=>dMin + pos * (dMax - dMin));
388
+ const scaleColors = scale.map((item)=>item[1]);
368
389
  return (0, _d3scale.scaleLinear)().domain(scaleDomain).range(scaleColors);
369
390
  };
370
391
  const transformPlotlyJsonToGVBCProps = (input, colorMap, colorwayType, isDarkTheme)=>{
@@ -376,18 +397,7 @@ const transformPlotlyJsonToGVBCProps = (input, colorMap, colorwayType, isDarkThe
376
397
  input.data.forEach((series, index1)=>{
377
398
  var _input_layout_coloraxis_colorscale, _input_layout_coloraxis, _input_layout, _series_marker, _series_marker1, _series_marker_color, _series_marker2, _input_layout_template_layout, _input_layout_template, _input_layout1, _series_marker3, _series_x;
378
399
  if (((_input_layout = input.layout) === null || _input_layout === void 0 ? void 0 : (_input_layout_coloraxis = _input_layout.coloraxis) === null || _input_layout_coloraxis === void 0 ? void 0 : (_input_layout_coloraxis_colorscale = _input_layout_coloraxis.colorscale) === null || _input_layout_coloraxis_colorscale === void 0 ? void 0 : _input_layout_coloraxis_colorscale.length) && (0, _chartutilities.isArrayOrTypedArray)((_series_marker = series.marker) === null || _series_marker === void 0 ? void 0 : _series_marker.color) && ((_series_marker1 = series.marker) === null || _series_marker1 === void 0 ? void 0 : _series_marker1.color).length > 0 && typeof ((_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[0]) === 'number') {
379
- var _series_marker4, _input_layout_coloraxis1, _input_layout_coloraxis2;
380
- const scale = input.layout.coloraxis.colorscale;
381
- const colorValues = (_series_marker4 = series.marker) === null || _series_marker4 === void 0 ? void 0 : _series_marker4.color;
382
- var _input_layout_coloraxis_cmin, _input_layout_coloraxis_cmax;
383
- const [dMin, dMax] = [
384
- (_input_layout_coloraxis_cmin = (_input_layout_coloraxis1 = input.layout.coloraxis) === null || _input_layout_coloraxis1 === void 0 ? void 0 : _input_layout_coloraxis1.cmin) !== null && _input_layout_coloraxis_cmin !== void 0 ? _input_layout_coloraxis_cmin : Math.min(...colorValues),
385
- (_input_layout_coloraxis_cmax = (_input_layout_coloraxis2 = input.layout.coloraxis) === null || _input_layout_coloraxis2 === void 0 ? void 0 : _input_layout_coloraxis2.cmax) !== null && _input_layout_coloraxis_cmax !== void 0 ? _input_layout_coloraxis_cmax : Math.max(...colorValues)
386
- ];
387
- colorScale = createColorScale(scale, [
388
- dMin,
389
- dMax
390
- ]);
400
+ colorScale = createColorScale(input.layout, series);
391
401
  }
392
402
  // extract colors for each series only once
393
403
  const extractedColors = (0, _PlotlyColorAdapter.extractColor)((_input_layout1 = input.layout) === null || _input_layout1 === void 0 ? void 0 : (_input_layout_template = _input_layout1.template) === null || _input_layout_template === void 0 ? void 0 : (_input_layout_template_layout = _input_layout_template.layout) === null || _input_layout_template_layout === void 0 ? void 0 : _input_layout_template_layout.colorway, colorwayType, (_series_marker3 = series.marker) === null || _series_marker3 === void 0 ? void 0 : _series_marker3.color, colorMap, isDarkTheme);
@@ -403,10 +413,10 @@ const transformPlotlyJsonToGVBCProps = (input, colorMap, colorwayType, isDarkThe
403
413
  };
404
414
  }
405
415
  if (series.type === 'bar') {
406
- var _series_marker, _series_marker_color, _series_marker1;
416
+ var _series_marker, _series_marker1, _series_marker_color, _series_marker2;
407
417
  const legend = legends[index1];
408
418
  // resolve color for each legend's bars from the colorscale or extracted colors
409
- const color = colorScale ? colorScale((0, _chartutilities.isArrayOrTypedArray)((_series_marker = series.marker) === null || _series_marker === void 0 ? void 0 : _series_marker.color) ? (_series_marker1 = series.marker) === null || _series_marker1 === void 0 ? void 0 : (_series_marker_color = _series_marker1.color) === null || _series_marker_color === void 0 ? void 0 : _series_marker_color[index2] : 0) : (0, _PlotlyColorAdapter.resolveColor)(extractedColors, index1, legend, colorMap, isDarkTheme);
419
+ const color = colorScale ? colorScale((0, _chartutilities.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) : (0, _PlotlyColorAdapter.resolveColor)(extractedColors, index1, legend, colorMap, isDarkTheme);
410
420
  mapXToDataPoints[x].series.push({
411
421
  key: legend,
412
422
  data: series.y[index2],
@@ -441,13 +451,17 @@ const transformPlotlyJsonToVBCProps = (input, colorMap, colorwayType, isDarkThem
441
451
  var _input_layout, _input_layout1, _vbcData_;
442
452
  const vbcData = [];
443
453
  const { legends, hideLegend } = getLegendProps(input.data, input.layout);
454
+ let colorScale = undefined;
444
455
  input.data.forEach((series, seriesIdx)=>{
445
- var _input_layout_template_layout, _input_layout_template, _input_layout, _series_marker, _series_xbins, _series_xbins1, _series_xbins2;
456
+ var _input_layout_coloraxis_colorscale, _input_layout_coloraxis, _input_layout, _series_marker, _series_marker1, _series_marker_color, _series_marker2, _input_layout_template_layout, _input_layout_template, _input_layout1, _series_marker3, _series_xbins, _series_xbins1, _series_xbins2;
446
457
  if (!series.x) {
447
458
  return;
448
459
  }
460
+ if (((_input_layout = input.layout) === null || _input_layout === void 0 ? void 0 : (_input_layout_coloraxis = _input_layout.coloraxis) === null || _input_layout_coloraxis === void 0 ? void 0 : (_input_layout_coloraxis_colorscale = _input_layout_coloraxis.colorscale) === null || _input_layout_coloraxis_colorscale === void 0 ? void 0 : _input_layout_coloraxis_colorscale.length) && (0, _chartutilities.isArrayOrTypedArray)((_series_marker = series.marker) === null || _series_marker === void 0 ? void 0 : _series_marker.color) && ((_series_marker1 = series.marker) === null || _series_marker1 === void 0 ? void 0 : _series_marker1.color).length > 0 && typeof ((_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[0]) === 'number') {
461
+ colorScale = createColorScale(input.layout, series);
462
+ }
449
463
  // extract colors for each series only once
450
- const extractedColors = (0, _PlotlyColorAdapter.extractColor)((_input_layout = input.layout) === null || _input_layout === void 0 ? void 0 : (_input_layout_template = _input_layout.template) === null || _input_layout_template === void 0 ? void 0 : (_input_layout_template_layout = _input_layout_template.layout) === null || _input_layout_template_layout === void 0 ? void 0 : _input_layout_template_layout.colorway, colorwayType, (_series_marker = series.marker) === null || _series_marker === void 0 ? void 0 : _series_marker.color, colorMap, isDarkTheme);
464
+ const extractedColors = (0, _PlotlyColorAdapter.extractColor)((_input_layout1 = input.layout) === null || _input_layout1 === void 0 ? void 0 : (_input_layout_template = _input_layout1.template) === null || _input_layout_template === void 0 ? void 0 : (_input_layout_template_layout = _input_layout_template.layout) === null || _input_layout_template_layout === void 0 ? void 0 : _input_layout_template_layout.colorway, colorwayType, (_series_marker3 = series.marker) === null || _series_marker3 === void 0 ? void 0 : _series_marker3.color, colorMap, isDarkTheme);
451
465
  const xValues = [];
452
466
  const yValues = [];
453
467
  series.x.forEach((xVal, index)=>{
@@ -476,9 +490,10 @@ const transformPlotlyJsonToVBCProps = (input, colorMap, colorwayType, isDarkThem
476
490
  return yVal;
477
491
  });
478
492
  xBins.forEach((bin, index)=>{
493
+ var _series_marker, _series_marker1, _series_marker_color, _series_marker2;
479
494
  const legend = legends[seriesIdx];
480
- // resolve color for each legend's bars from the extracted colors
481
- const color = (0, _PlotlyColorAdapter.resolveColor)(extractedColors, seriesIdx, legend, colorMap, isDarkTheme);
495
+ // resolve color for each legend's bars from the colorscale or extracted colors
496
+ const color = colorScale ? colorScale((0, _chartutilities.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[index % ((_series_marker1 = series.marker) === null || _series_marker1 === void 0 ? void 0 : _series_marker1.color).length] : 0) : (0, _PlotlyColorAdapter.resolveColor)(extractedColors, index, legend, colorMap, isDarkTheme);
482
497
  const yVal = calculateHistNorm(series.histnorm, y[index], total, isXString ? bin.length : getBinSize(bin));
483
498
  vbcData.push({
484
499
  x: isXString ? bin.join(', ') : getBinCenter(bin),
@@ -513,9 +528,10 @@ const transformPlotlyJsonToScatterChartProps = (input, isAreaChart, isScatterMar
513
528
  let mode = 'tonexty';
514
529
  const { legends, hideLegend } = getLegendProps(input.data, input.layout);
515
530
  const chartData = input.data.map((series, index)=>{
516
- var _input_layout_template_layout, _input_layout_template, _input_layout, _series_marker, _series_line, _series_line1;
531
+ var _series_mode, _series_line, _series_marker, _series_line1, _input_layout_template_layout, _input_layout_template, _input_layout, _series_line2;
532
+ const colors = isScatterMarkers ? (series === null || series === void 0 ? void 0 : (_series_mode = series.mode) === null || _series_mode === void 0 ? void 0 : _series_mode.includes('line')) ? (_series_line = series.line) === null || _series_line === void 0 ? void 0 : _series_line.color : (_series_marker = series.marker) === null || _series_marker === void 0 ? void 0 : _series_marker.color : (_series_line1 = series.line) === null || _series_line1 === void 0 ? void 0 : _series_line1.color;
517
533
  // extract colors for each series only once
518
- const extractedColors = (0, _PlotlyColorAdapter.extractColor)((_input_layout = input.layout) === null || _input_layout === void 0 ? void 0 : (_input_layout_template = _input_layout.template) === null || _input_layout_template === void 0 ? void 0 : (_input_layout_template_layout = _input_layout_template.layout) === null || _input_layout_template_layout === void 0 ? void 0 : _input_layout_template_layout.colorway, colorwayType, isScatterMarkers ? (_series_marker = series.marker) === null || _series_marker === void 0 ? void 0 : _series_marker.color : (_series_line = series.line) === null || _series_line === void 0 ? void 0 : _series_line.color, colorMap, isDarkTheme);
534
+ const extractedColors = (0, _PlotlyColorAdapter.extractColor)((_input_layout = input.layout) === null || _input_layout === void 0 ? void 0 : (_input_layout_template = _input_layout.template) === null || _input_layout_template === void 0 ? void 0 : (_input_layout_template_layout = _input_layout_template.layout) === null || _input_layout_template_layout === void 0 ? void 0 : _input_layout_template_layout.colorway, colorwayType, colors, colorMap, isDarkTheme);
519
535
  const xValues = series.x;
520
536
  const isXString = isStringArray(xValues);
521
537
  const isXDate = (0, _chartutilities.isDateArray)(xValues);
@@ -527,7 +543,7 @@ const transformPlotlyJsonToScatterChartProps = (input, isAreaChart, isScatterMar
527
543
  const seriesColor = (0, _PlotlyColorAdapter.resolveColor)(extractedColors, index, legend, colorMap, isDarkTheme);
528
544
  mode = series.fill === 'tozeroy' ? 'tozeroy' : 'tonexty';
529
545
  const lineOptions = getLineOptions(series.line);
530
- const dashType = ((_series_line1 = series.line) === null || _series_line1 === void 0 ? void 0 : _series_line1.dash) || 'solid';
546
+ const dashType = ((_series_line2 = series.line) === null || _series_line2 === void 0 ? void 0 : _series_line2.dash) || 'solid';
531
547
  const legendShape = dashType === 'dot' || dashType === 'dash' || dashType === 'dashdot' ? 'dottedLine' : 'default';
532
548
  const validXYRanges = getValidXYRanges(series);
533
549
  return validXYRanges.map(([rangeStart, rangeEnd], rangeIdx)=>{
@@ -606,18 +622,22 @@ const transformPlotlyJsonToScatterChartProps = (input, isAreaChart, isScatterMar
606
622
  const transformPlotlyJsonToHorizontalBarWithAxisProps = (input, colorMap, colorwayType, isDarkTheme)=>{
607
623
  var _input_layout, _input_layout_margin, _input_layout1, _input_layout_margin1, _input_layout2, _input_layout_yaxis2, _input_layout3, _input_layout_yaxis21, _input_layout4, _input_layout_yaxis2_title, _input_layout_yaxis22, _input_layout5, _input_layout6;
608
624
  const { legends, hideLegend } = getLegendProps(input.data, input.layout);
625
+ let colorScale = undefined;
609
626
  const chartData = input.data.map((series, index)=>{
610
- var _input_layout_template_layout, _input_layout_template, _input_layout, _series_marker;
627
+ var _input_layout_coloraxis_colorscale, _input_layout_coloraxis, _input_layout, _series_marker, _series_marker1, _series_marker_color, _series_marker2, _input_layout_template_layout, _input_layout_template, _input_layout1, _series_marker3;
628
+ if (((_input_layout = input.layout) === null || _input_layout === void 0 ? void 0 : (_input_layout_coloraxis = _input_layout.coloraxis) === null || _input_layout_coloraxis === void 0 ? void 0 : (_input_layout_coloraxis_colorscale = _input_layout_coloraxis.colorscale) === null || _input_layout_coloraxis_colorscale === void 0 ? void 0 : _input_layout_coloraxis_colorscale.length) && (0, _chartutilities.isArrayOrTypedArray)((_series_marker = series.marker) === null || _series_marker === void 0 ? void 0 : _series_marker.color) && ((_series_marker1 = series.marker) === null || _series_marker1 === void 0 ? void 0 : _series_marker1.color).length > 0 && typeof ((_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[0]) === 'number') {
629
+ colorScale = createColorScale(input.layout, series);
630
+ }
611
631
  // extract colors for each series only once
612
- const extractedColors = (0, _PlotlyColorAdapter.extractColor)((_input_layout = input.layout) === null || _input_layout === void 0 ? void 0 : (_input_layout_template = _input_layout.template) === null || _input_layout_template === void 0 ? void 0 : (_input_layout_template_layout = _input_layout_template.layout) === null || _input_layout_template_layout === void 0 ? void 0 : _input_layout_template_layout.colorway, colorwayType, (_series_marker = series.marker) === null || _series_marker === void 0 ? void 0 : _series_marker.color, colorMap, isDarkTheme);
632
+ const extractedColors = (0, _PlotlyColorAdapter.extractColor)((_input_layout1 = input.layout) === null || _input_layout1 === void 0 ? void 0 : (_input_layout_template = _input_layout1.template) === null || _input_layout_template === void 0 ? void 0 : (_input_layout_template_layout = _input_layout_template.layout) === null || _input_layout_template_layout === void 0 ? void 0 : _input_layout_template_layout.colorway, colorwayType, (_series_marker3 = series.marker) === null || _series_marker3 === void 0 ? void 0 : _series_marker3.color, colorMap, isDarkTheme);
613
633
  const legend = legends[index];
614
- // resolve color for each legend's bars from the extracted colors
615
- const color = (0, _PlotlyColorAdapter.resolveColor)(extractedColors, index, legend, colorMap, isDarkTheme);
616
634
  return series.y.map((yValue, i)=>{
617
- var _series_x;
635
+ var _series_x, _series_marker, _series_marker1, _series_marker_color, _series_marker2;
618
636
  if ((0, _chartutilities.isInvalidValue)((_series_x = series.x) === null || _series_x === void 0 ? void 0 : _series_x[i]) || (0, _chartutilities.isInvalidValue)(yValue)) {
619
637
  return null;
620
638
  }
639
+ // resolve color for each legend's bars from the colorscale or extracted colors
640
+ const color = colorScale ? colorScale((0, _chartutilities.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[i % ((_series_marker1 = series.marker) === null || _series_marker1 === void 0 ? void 0 : _series_marker1.color).length] : 0) : (0, _PlotlyColorAdapter.resolveColor)(extractedColors, i, legend, colorMap, isDarkTheme);
621
641
  return {
622
642
  x: series.x[i],
623
643
  y: yValue,
@@ -1149,7 +1169,6 @@ function getLineOptions(line) {
1149
1169
  }
1150
1170
  return Object.keys(lineOptions).length > 0 ? lineOptions : undefined;
1151
1171
  }
1152
- // eslint-disable-next-line @typescript-eslint/no-explicit-any
1153
1172
  const isStringArray = (arr)=>{
1154
1173
  // eslint-disable-next-line @typescript-eslint/no-explicit-any
1155
1174
  return (0, _chartutilities.isArrayOfType)(arr, (value)=>typeof value === 'string' || value === null);