@fluentui/react-charts 0.0.0-nightly-20250815-0407.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 (6) hide show
  1. package/CHANGELOG.md +15 -15
  2. package/lib/components/DeclarativeChart/PlotlySchemaAdapter.js +42 -32
  3. package/lib/components/DeclarativeChart/PlotlySchemaAdapter.js.map +1 -1
  4. package/lib-commonjs/components/DeclarativeChart/PlotlySchemaAdapter.js +42 -32
  5. package/lib-commonjs/components/DeclarativeChart/PlotlySchemaAdapter.js.map +1 -1
  6. package/package.json +13 -13
package/lib-commonjs/components/DeclarativeChart/PlotlySchemaAdapter.js CHANGED
@@ -282,14 +282,18 @@ const transformPlotlyJsonToVSBCProps = (input, colorMap, colorwayType, isDarkThe
282
282
  let yMaxValue = 0;
283
283
  const secondaryYAxisValues = getSecondaryYAxisValues(input.data, input.layout);
284
284
  const { legends, hideLegend } = getLegendProps(input.data, input.layout);
285
+ let colorScale = undefined;
285
286
  let yMinValue = 0;
286
287
  input.data.forEach((series, index1)=>{
287
- 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
+ }
288
292
  const isXYearCategory = (0, _chartutilities.isYearArray)(series.x); // Consider year as categorical not numeric continuous axis
289
293
  // extract bar colors for each series only once
290
- 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);
291
295
  // extract line colors for each series only once
292
- 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);
293
297
  const xValues = series.x;
294
298
  const isXDate = (0, _chartutilities.isDateArray)(xValues);
295
299
  const isXString = isStringArray(xValues);
@@ -299,6 +303,7 @@ const transformPlotlyJsonToVSBCProps = (input, colorMap, colorwayType, isDarkThe
299
303
  const rangeXValues = series.x.slice(rangeStart, rangeEnd);
300
304
  const rangeYValues = series.y.slice(rangeStart, rangeEnd);
301
305
  rangeXValues.forEach((x, index2)=>{
306
+ var _series_marker, _series_marker1, _series_marker_color, _series_marker2;
302
307
  if (!mapXToDataPoints[x]) {
303
308
  mapXToDataPoints[x] = {
304
309
  xAxisPoint: resolveXAxisPoint(x, isXYearCategory, isXString, isXDate, isXNumber),
@@ -307,8 +312,8 @@ const transformPlotlyJsonToVSBCProps = (input, colorMap, colorwayType, isDarkThe
307
312
  };
308
313
  }
309
314
  const legend = legends[index1];
310
- // resolve color for each legend's bars from the extracted colors
311
- 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);
312
317
  const yVal = rangeYValues[index2];
313
318
  if (series.type === 'bar') {
314
319
  mapXToDataPoints[x].chartData.push({
@@ -369,11 +374,18 @@ const transformPlotlyJsonToVSBCProps = (input, colorMap, colorwayType, isDarkThe
369
374
  showYAxisLablesTooltip: true
370
375
  };
371
376
  };
372
- const createColorScale = (colorscale, domain)=>{
373
- 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
+ ];
374
386
  // Normalize colorscale domain to actual data domain
375
- const scaleDomain = colorscale.map(([pos])=>dMin + pos * (dMax - dMin));
376
- 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]);
377
389
  return (0, _d3scale.scaleLinear)().domain(scaleDomain).range(scaleColors);
378
390
  };
379
391
  const transformPlotlyJsonToGVBCProps = (input, colorMap, colorwayType, isDarkTheme)=>{
@@ -385,18 +397,7 @@ const transformPlotlyJsonToGVBCProps = (input, colorMap, colorwayType, isDarkThe
385
397
  input.data.forEach((series, index1)=>{
386
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;
387
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') {
388
- var _series_marker4, _input_layout_coloraxis1, _input_layout_coloraxis2;
389
- const scale = input.layout.coloraxis.colorscale;
390
- const colorValues = (_series_marker4 = series.marker) === null || _series_marker4 === void 0 ? void 0 : _series_marker4.color;
391
- var _input_layout_coloraxis_cmin, _input_layout_coloraxis_cmax;
392
- const [dMin, dMax] = [
393
- (_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),
394
- (_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)
395
- ];
396
- colorScale = createColorScale(scale, [
397
- dMin,
398
- dMax
399
- ]);
400
+ colorScale = createColorScale(input.layout, series);
400
401
  }
401
402
  // extract colors for each series only once
402
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);
@@ -412,10 +413,10 @@ const transformPlotlyJsonToGVBCProps = (input, colorMap, colorwayType, isDarkThe
412
413
  };
413
414
  }
414
415
  if (series.type === 'bar') {
415
- var _series_marker, _series_marker_color, _series_marker1;
416
+ var _series_marker, _series_marker1, _series_marker_color, _series_marker2;
416
417
  const legend = legends[index1];
417
418
  // resolve color for each legend's bars from the colorscale or extracted colors
418
- 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);
419
420
  mapXToDataPoints[x].series.push({
420
421
  key: legend,
421
422
  data: series.y[index2],
@@ -450,13 +451,17 @@ const transformPlotlyJsonToVBCProps = (input, colorMap, colorwayType, isDarkThem
450
451
  var _input_layout, _input_layout1, _vbcData_;
451
452
  const vbcData = [];
452
453
  const { legends, hideLegend } = getLegendProps(input.data, input.layout);
454
+ let colorScale = undefined;
453
455
  input.data.forEach((series, seriesIdx)=>{
454
- 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;
455
457
  if (!series.x) {
456
458
  return;
457
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
+ }
458
463
  // extract colors for each series only once
459
- 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);
460
465
  const xValues = [];
461
466
  const yValues = [];
462
467
  series.x.forEach((xVal, index)=>{
@@ -485,9 +490,10 @@ const transformPlotlyJsonToVBCProps = (input, colorMap, colorwayType, isDarkThem
485
490
  return yVal;
486
491
  });
487
492
  xBins.forEach((bin, index)=>{
493
+ var _series_marker, _series_marker1, _series_marker_color, _series_marker2;
488
494
  const legend = legends[seriesIdx];
489
- // resolve color for each legend's bars from the extracted colors
490
- 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);
491
497
  const yVal = calculateHistNorm(series.histnorm, y[index], total, isXString ? bin.length : getBinSize(bin));
492
498
  vbcData.push({
493
499
  x: isXString ? bin.join(', ') : getBinCenter(bin),
@@ -616,18 +622,22 @@ const transformPlotlyJsonToScatterChartProps = (input, isAreaChart, isScatterMar
616
622
  const transformPlotlyJsonToHorizontalBarWithAxisProps = (input, colorMap, colorwayType, isDarkTheme)=>{
617
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;
618
624
  const { legends, hideLegend } = getLegendProps(input.data, input.layout);
625
+ let colorScale = undefined;
619
626
  const chartData = input.data.map((series, index)=>{
620
- 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
+ }
621
631
  // extract colors for each series only once
622
- 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);
623
633
  const legend = legends[index];
624
- // resolve color for each legend's bars from the extracted colors
625
- const color = (0, _PlotlyColorAdapter.resolveColor)(extractedColors, index, legend, colorMap, isDarkTheme);
626
634
  return series.y.map((yValue, i)=>{
627
- var _series_x;
635
+ var _series_x, _series_marker, _series_marker1, _series_marker_color, _series_marker2;
628
636
  if ((0, _chartutilities.isInvalidValue)((_series_x = series.x) === null || _series_x === void 0 ? void 0 : _series_x[i]) || (0, _chartutilities.isInvalidValue)(yValue)) {
629
637
  return null;
630
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);
631
641
  return {
632
642
  x: series.x[i],
633
643
  y: yValue,