@fluentui/react-charts 0.0.0-nightly-20250826-0412.1 → 0.0.0-nightly-20250827-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.
- package/CHANGELOG.md +15 -15
- package/lib/components/ChartTable/ChartTable.js +87 -6
- package/lib/components/ChartTable/ChartTable.js.map +1 -1
- package/lib/components/DeclarativeChart/DeclarativeChart.js +11 -1
- package/lib/components/DeclarativeChart/DeclarativeChart.js.map +1 -1
- package/lib/components/DeclarativeChart/PlotlyColorAdapter.js +19 -0
- package/lib/components/DeclarativeChart/PlotlyColorAdapter.js.map +1 -1
- package/lib/components/DeclarativeChart/PlotlySchemaAdapter.js +202 -63
- package/lib/components/DeclarativeChart/PlotlySchemaAdapter.js.map +1 -1
- package/lib/components/LineChart/LineChart.js +29 -4
- package/lib/components/LineChart/LineChart.js.map +1 -1
- package/lib/components/ScatterChart/ScatterChart.js +62 -45
- package/lib/components/ScatterChart/ScatterChart.js.map +1 -1
- package/lib/utilities/scatterpolar-utils.js +63 -0
- package/lib/utilities/scatterpolar-utils.js.map +1 -0
- package/lib/utilities/utilities.js +32 -8
- package/lib/utilities/utilities.js.map +1 -1
- package/lib-commonjs/components/ChartTable/ChartTable.js +87 -6
- package/lib-commonjs/components/ChartTable/ChartTable.js.map +1 -1
- package/lib-commonjs/components/DeclarativeChart/DeclarativeChart.js +11 -1
- package/lib-commonjs/components/DeclarativeChart/DeclarativeChart.js.map +1 -1
- package/lib-commonjs/components/DeclarativeChart/PlotlyColorAdapter.js +22 -0
- package/lib-commonjs/components/DeclarativeChart/PlotlyColorAdapter.js.map +1 -1
- package/lib-commonjs/components/DeclarativeChart/PlotlySchemaAdapter.js +201 -62
- package/lib-commonjs/components/DeclarativeChart/PlotlySchemaAdapter.js.map +1 -1
- package/lib-commonjs/components/LineChart/LineChart.js +28 -3
- package/lib-commonjs/components/LineChart/LineChart.js.map +1 -1
- package/lib-commonjs/components/ScatterChart/ScatterChart.js +61 -44
- package/lib-commonjs/components/ScatterChart/ScatterChart.js.map +1 -1
- package/lib-commonjs/utilities/scatterpolar-utils.js +78 -0
- package/lib-commonjs/utilities/scatterpolar-utils.js.map +1 -0
- package/lib-commonjs/utilities/utilities.js +28 -8
- package/lib-commonjs/utilities/utilities.js.map +1 -1
- package/package.json +12 -12
|
@@ -6,7 +6,7 @@ import { DataVizPalette, getColorFromToken } from '../../utilities/colors';
|
|
|
6
6
|
import { findNumericMinMaxOfY, formatScientificLimitWidth, MIN_DONUT_RADIUS } from '../../utilities/utilities';
|
|
7
7
|
import { isArrayOrTypedArray, isDate, isDateArray, isNumberArray, isStringArray, isYearArray, isInvalidValue, formatToLocaleString } from '@fluentui/chart-utilities';
|
|
8
8
|
import { curveCardinal as d3CurveCardinal } from 'd3-shape';
|
|
9
|
-
import { getOpacity, extractColor, resolveColor } from './PlotlyColorAdapter';
|
|
9
|
+
import { getOpacity, extractColor, resolveColor, createColorScale } from './PlotlyColorAdapter';
|
|
10
10
|
import { rgb } from 'd3-color';
|
|
11
11
|
export const NON_PLOT_KEY_PREFIX = 'nonplot_';
|
|
12
12
|
export const SINGLE_REPEAT = 'repeat(1, 1fr)';
|
|
@@ -265,15 +265,13 @@ export const transformPlotlyJsonToVSBCProps = (input, isMultiPlot, colorMap, col
|
|
|
265
265
|
const yAxisTickFormat = getYAxisTickFormat(input.data[0], input.layout);
|
|
266
266
|
let yMinValue = 0;
|
|
267
267
|
input.data.forEach((series, index1)=>{
|
|
268
|
-
var
|
|
269
|
-
|
|
270
|
-
colorScale = createColorScale(input.layout, series);
|
|
271
|
-
}
|
|
268
|
+
var _input_layout_template_layout, _input_layout_template, _input_layout, _series_marker, _input_layout_template_layout1, _input_layout_template1, _input_layout1, _series_line;
|
|
269
|
+
colorScale = createColorScale(input.layout, series, colorScale);
|
|
272
270
|
const isXYearCategory = isYearArray(series.x); // Consider year as categorical not numeric continuous axis
|
|
273
271
|
// extract bar colors for each series only once
|
|
274
|
-
const extractedBarColors = extractColor((
|
|
272
|
+
const extractedBarColors = 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);
|
|
275
273
|
// extract line colors for each series only once
|
|
276
|
-
const extractedLineColors = extractColor((
|
|
274
|
+
const extractedLineColors = 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);
|
|
277
275
|
const xValues = series.x;
|
|
278
276
|
const isXDate = isDateArray(xValues);
|
|
279
277
|
const isXString = isStringArray(xValues);
|
|
@@ -361,23 +359,11 @@ export const transformPlotlyJsonToVSBCProps = (input, isMultiPlot, colorMap, col
|
|
|
361
359
|
...getTitles(input.layout),
|
|
362
360
|
...getXAxisTickFormat(input.data[0], input.layout),
|
|
363
361
|
...yAxisTickFormat,
|
|
364
|
-
...getAxisCategoryOrderProps(input.data, input.layout)
|
|
362
|
+
...getAxisCategoryOrderProps(input.data, input.layout),
|
|
363
|
+
...getBarProps(input.data, input.layout),
|
|
364
|
+
...getYMinMaxValues(input.data[0], input.layout)
|
|
365
365
|
};
|
|
366
366
|
};
|
|
367
|
-
const createColorScale = (layout, series)=>{
|
|
368
|
-
var _layout_coloraxis, _series_marker, _layout_coloraxis1, _layout_coloraxis2;
|
|
369
|
-
const scale = layout === null || layout === void 0 ? void 0 : (_layout_coloraxis = layout.coloraxis) === null || _layout_coloraxis === void 0 ? void 0 : _layout_coloraxis.colorscale;
|
|
370
|
-
const colorValues = (_series_marker = series.marker) === null || _series_marker === void 0 ? void 0 : _series_marker.color;
|
|
371
|
-
var _layout_coloraxis_cmin, _layout_coloraxis_cmax;
|
|
372
|
-
const [dMin, dMax] = [
|
|
373
|
-
(_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),
|
|
374
|
-
(_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)
|
|
375
|
-
];
|
|
376
|
-
// Normalize colorscale domain to actual data domain
|
|
377
|
-
const scaleDomain = scale.map(([pos])=>dMin + pos * (dMax - dMin));
|
|
378
|
-
const scaleColors = scale.map((item)=>item[1]);
|
|
379
|
-
return d3ScaleLinear().domain(scaleDomain).range(scaleColors);
|
|
380
|
-
};
|
|
381
367
|
export const transformPlotlyJsonToGVBCProps = (input, isMultiPlot, colorMap, colorwayType, isDarkTheme)=>{
|
|
382
368
|
var _input_layout, _input_layout1, _gvbcData_;
|
|
383
369
|
const mapXToDataPoints = {};
|
|
@@ -386,12 +372,10 @@ export const transformPlotlyJsonToGVBCProps = (input, isMultiPlot, colorMap, col
|
|
|
386
372
|
let colorScale = undefined;
|
|
387
373
|
const yAxisTickFormat = getYAxisTickFormat(input.data[0], input.layout);
|
|
388
374
|
input.data.forEach((series, index1)=>{
|
|
389
|
-
var
|
|
390
|
-
|
|
391
|
-
colorScale = createColorScale(input.layout, series);
|
|
392
|
-
}
|
|
375
|
+
var _input_layout_template_layout, _input_layout_template, _input_layout, _series_marker, _series_x;
|
|
376
|
+
colorScale = createColorScale(input.layout, series, colorScale);
|
|
393
377
|
// extract colors for each series only once
|
|
394
|
-
const extractedColors = extractColor((
|
|
378
|
+
const extractedColors = 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);
|
|
395
379
|
(_series_x = series.x) === null || _series_x === void 0 ? void 0 : _series_x.forEach((x, index2)=>{
|
|
396
380
|
var _series_y;
|
|
397
381
|
if (isInvalidValue(x) || isInvalidValue((_series_y = series.y) === null || _series_y === void 0 ? void 0 : _series_y[index2])) {
|
|
@@ -442,7 +426,8 @@ export const transformPlotlyJsonToGVBCProps = (input, isMultiPlot, colorMap, col
|
|
|
442
426
|
...getYMinMaxValues(input.data[0], input.layout),
|
|
443
427
|
...getXAxisTickFormat(input.data[0], input.layout),
|
|
444
428
|
...yAxisTickFormat,
|
|
445
|
-
...getAxisCategoryOrderProps(input.data, input.layout)
|
|
429
|
+
...getAxisCategoryOrderProps(input.data, input.layout),
|
|
430
|
+
...getBarProps(input.data, input.layout)
|
|
446
431
|
};
|
|
447
432
|
};
|
|
448
433
|
export const transformPlotlyJsonToVBCProps = (input, isMultiPlot, colorMap, colorwayType, isDarkTheme)=>{
|
|
@@ -451,15 +436,13 @@ export const transformPlotlyJsonToVBCProps = (input, isMultiPlot, colorMap, colo
|
|
|
451
436
|
const { legends, hideLegend } = getLegendProps(input.data, input.layout, isMultiPlot);
|
|
452
437
|
let colorScale = undefined;
|
|
453
438
|
input.data.forEach((series, seriesIdx)=>{
|
|
454
|
-
var
|
|
439
|
+
var _input_layout_template_layout, _input_layout_template, _input_layout, _series_marker, _series_xbins, _series_xbins1, _series_xbins2;
|
|
455
440
|
if (!series.x) {
|
|
456
441
|
return;
|
|
457
442
|
}
|
|
458
|
-
|
|
459
|
-
colorScale = createColorScale(input.layout, series);
|
|
460
|
-
}
|
|
443
|
+
colorScale = createColorScale(input.layout, series, colorScale);
|
|
461
444
|
// extract colors for each series only once
|
|
462
|
-
const extractedColors = extractColor((
|
|
445
|
+
const extractedColors = 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);
|
|
463
446
|
const xValues = [];
|
|
464
447
|
const yValues = [];
|
|
465
448
|
series.x.forEach((xVal, index)=>{
|
|
@@ -536,12 +519,14 @@ export const transformPlotlyJsonToScatterChartProps = (input, isMultiPlot, color
|
|
|
536
519
|
const transformPlotlyJsonToScatterTraceProps = (input, isMultiPlot, chartType, colorMap, colorwayType, isDarkTheme)=>{
|
|
537
520
|
var _input_data_, _input_layout, _input_layout1;
|
|
538
521
|
const isScatterMarkers = [
|
|
522
|
+
'text',
|
|
539
523
|
'markers',
|
|
540
524
|
'text+markers',
|
|
541
525
|
'markers+text',
|
|
542
526
|
'lines+markers',
|
|
543
527
|
'markers+line',
|
|
544
|
-
'text+lines+markers'
|
|
528
|
+
'text+lines+markers',
|
|
529
|
+
'lines+markers+text'
|
|
545
530
|
].includes((_input_data_ = input.data[0]) === null || _input_data_ === void 0 ? void 0 : _input_data_.mode);
|
|
546
531
|
const isAreaChart = chartType === 'area';
|
|
547
532
|
const isScatterChart = chartType === 'scatter';
|
|
@@ -565,11 +550,11 @@ const transformPlotlyJsonToScatterTraceProps = (input, isMultiPlot, chartType, c
|
|
|
565
550
|
const seriesOpacity = getOpacity(series, index);
|
|
566
551
|
mode = series.fill === 'tozeroy' ? 'tozeroy' : 'tonexty';
|
|
567
552
|
// if mode contains 'text', we prioritize showing the text over curving the line
|
|
568
|
-
const lineOptions = !((_series_mode1 = series.mode) === null || _series_mode1 === void 0 ? void 0 : _series_mode1.includes('text')) ? getLineOptions(series.line) : undefined;
|
|
553
|
+
const lineOptions = !((_series_mode1 = series.mode) === null || _series_mode1 === void 0 ? void 0 : _series_mode1.includes('text')) && series.type !== 'scatterpolar' ? getLineOptions(series.line) : undefined;
|
|
569
554
|
const legendShape = getLegendShape(series);
|
|
570
555
|
const validXYRanges = getValidXYRanges(series);
|
|
571
556
|
return validXYRanges.map(([rangeStart, rangeEnd], rangeIdx)=>{
|
|
572
|
-
var _series_marker;
|
|
557
|
+
var _series_marker, _input_layout, _input_layout_polar_angularaxis, _input_layout_polar, _input_layout1, _input_layout_polar_angularaxis1, _input_layout_polar1, _input_layout2;
|
|
573
558
|
const rangeXValues = xValues.slice(rangeStart, rangeEnd);
|
|
574
559
|
const rangeYValues = series.y.slice(rangeStart, rangeEnd);
|
|
575
560
|
const markerSizes = isArrayOrTypedArray((_series_marker = series.marker) === null || _series_marker === void 0 ? void 0 : _series_marker.size) ? series.marker.size.slice(rangeStart, rangeEnd) : [];
|
|
@@ -599,7 +584,14 @@ const transformPlotlyJsonToScatterTraceProps = (input, isMultiPlot, chartType, c
|
|
|
599
584
|
}).formatHex8()) !== null && _rgb_copy_formatHex8 !== void 0 ? _rgb_copy_formatHex8 : seriesColor,
|
|
600
585
|
lineOptions: {
|
|
601
586
|
...lineOptions !== null && lineOptions !== void 0 ? lineOptions : {},
|
|
602
|
-
mode: series.mode
|
|
587
|
+
mode: series.type !== 'scatterpolar' ? series.mode : 'scatterpolar',
|
|
588
|
+
// originXOffset is not typed on Layout, but may be present in input.layout as a part of projection of
|
|
589
|
+
// scatter polar coordingates to cartesian coordinates
|
|
590
|
+
...series.type === 'scatterpolar' ? {
|
|
591
|
+
originXOffset: (_input_layout = input.layout) === null || _input_layout === void 0 ? void 0 : _input_layout.__polarOriginX,
|
|
592
|
+
direction: (_input_layout1 = input.layout) === null || _input_layout1 === void 0 ? void 0 : (_input_layout_polar = _input_layout1.polar) === null || _input_layout_polar === void 0 ? void 0 : (_input_layout_polar_angularaxis = _input_layout_polar.angularaxis) === null || _input_layout_polar_angularaxis === void 0 ? void 0 : _input_layout_polar_angularaxis.direction,
|
|
593
|
+
rotation: (_input_layout2 = input.layout) === null || _input_layout2 === void 0 ? void 0 : (_input_layout_polar1 = _input_layout2.polar) === null || _input_layout_polar1 === void 0 ? void 0 : (_input_layout_polar_angularaxis1 = _input_layout_polar1.angularaxis) === null || _input_layout_polar_angularaxis1 === void 0 ? void 0 : _input_layout_polar_angularaxis1.rotation
|
|
594
|
+
} : {}
|
|
603
595
|
},
|
|
604
596
|
useSecondaryYScale: usesSecondaryYScale(series, input.layout)
|
|
605
597
|
};
|
|
@@ -652,12 +644,10 @@ export const transformPlotlyJsonToHorizontalBarWithAxisProps = (input, isMultiPl
|
|
|
652
644
|
const { legends, hideLegend } = getLegendProps(input.data, input.layout, isMultiPlot);
|
|
653
645
|
let colorScale = undefined;
|
|
654
646
|
const chartData = input.data.map((series, index)=>{
|
|
655
|
-
var
|
|
656
|
-
|
|
657
|
-
colorScale = createColorScale(input.layout, series);
|
|
658
|
-
}
|
|
647
|
+
var _input_layout_template_layout, _input_layout_template, _input_layout, _series_marker;
|
|
648
|
+
colorScale = createColorScale(input.layout, series, colorScale);
|
|
659
649
|
// extract colors for each series only once
|
|
660
|
-
const extractedColors = extractColor((
|
|
650
|
+
const extractedColors = 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);
|
|
661
651
|
const legend = legends[index];
|
|
662
652
|
return series.y.map((yValue, i)=>{
|
|
663
653
|
var _series_x, _series_marker, _series_marker1, _series_marker_color, _series_marker2;
|
|
@@ -702,7 +692,8 @@ export const transformPlotlyJsonToHorizontalBarWithAxisProps = (input, isMultiPl
|
|
|
702
692
|
hideLegend,
|
|
703
693
|
roundCorners: true,
|
|
704
694
|
...getTitles(input.layout),
|
|
705
|
-
...getAxisCategoryOrderProps(input.data, input.layout)
|
|
695
|
+
...getAxisCategoryOrderProps(input.data, input.layout),
|
|
696
|
+
...getBarProps(input.data, input.layout, true)
|
|
706
697
|
};
|
|
707
698
|
};
|
|
708
699
|
export const transformPlotlyJsonToHeatmapProps = (input, isMultiPlot, colorMap, colorwayType, isDarkTheme)=>{
|
|
@@ -984,7 +975,7 @@ const formatValue = (value, colIndex, cells)=>{
|
|
|
984
975
|
return `${prefix !== null && prefix !== void 0 ? prefix : ''}${formatted}${suffix !== null && suffix !== void 0 ? suffix : ''}`;
|
|
985
976
|
};
|
|
986
977
|
export const transformPlotlyJsonToChartTableProps = (input, isMultiPlot, colorMap, colorwayType, isDarkTheme)=>{
|
|
987
|
-
var _tableData_cells, _input_layout_template_data, _input_layout_template, _input_layout, _input_layout_font, _input_layout1, _tableData_header,
|
|
978
|
+
var _tableData_cells, _input_layout_template_data_table_, _input_layout_template_data_table, _input_layout_template_data, _input_layout_template, _input_layout, _input_layout_font, _input_layout1, _tableData_header, _input_layout_template_data1, _input_layout_template1, _input_layout2, _input_layout3, _input_layout4;
|
|
988
979
|
const tableData = input.data[0];
|
|
989
980
|
const normalizeHeaders = (values, header)=>{
|
|
990
981
|
const cleanedValues = Array.isArray(values[0]) ? values.map((row)=>row.map((cell)=>cleanText(cell)).filter(Boolean).join(' ')) : values.map((cell)=>cleanText(cell));
|
|
@@ -993,7 +984,8 @@ export const transformPlotlyJsonToChartTableProps = (input, isMultiPlot, colorMa
|
|
|
993
984
|
const fontColorRaw = header === null || header === void 0 ? void 0 : (_header_font = header.font) === null || _header_font === void 0 ? void 0 : _header_font.color;
|
|
994
985
|
let fontColor;
|
|
995
986
|
if (Array.isArray(fontColorRaw)) {
|
|
996
|
-
|
|
987
|
+
var _fontColorRaw_colIndex;
|
|
988
|
+
const colorEntry = (_fontColorRaw_colIndex = fontColorRaw[colIndex]) !== null && _fontColorRaw_colIndex !== void 0 ? _fontColorRaw_colIndex : fontColorRaw[0];
|
|
997
989
|
if (Array.isArray(colorEntry)) {
|
|
998
990
|
fontColor = typeof colorEntry[0] === 'string' ? colorEntry[0] : undefined;
|
|
999
991
|
} else if (typeof colorEntry === 'string') {
|
|
@@ -1005,15 +997,20 @@ export const transformPlotlyJsonToChartTableProps = (input, isMultiPlot, colorMa
|
|
|
1005
997
|
const fontSizeRaw = header === null || header === void 0 ? void 0 : (_header_font1 = header.font) === null || _header_font1 === void 0 ? void 0 : _header_font1.size;
|
|
1006
998
|
let fontSize;
|
|
1007
999
|
if (Array.isArray(fontSizeRaw)) {
|
|
1008
|
-
|
|
1000
|
+
var _fontSizeRaw_colIndex;
|
|
1001
|
+
const fontSizeEntry = (_fontSizeRaw_colIndex = fontSizeRaw[colIndex]) !== null && _fontSizeRaw_colIndex !== void 0 ? _fontSizeRaw_colIndex : fontSizeRaw[0];
|
|
1002
|
+
var _fontSizeRaw__colIndex;
|
|
1003
|
+
fontSize = Array.isArray(fontSizeRaw[0]) ? (_fontSizeRaw__colIndex = fontSizeRaw[0][colIndex]) !== null && _fontSizeRaw__colIndex !== void 0 ? _fontSizeRaw__colIndex : fontSizeRaw[0][0] : typeof fontSizeEntry === 'number' ? fontSizeEntry : undefined;
|
|
1009
1004
|
} else if (typeof fontSizeRaw === 'number') {
|
|
1010
1005
|
fontSize = fontSizeRaw;
|
|
1011
1006
|
}
|
|
1012
1007
|
const updatedColIndex = colIndex >= 1 ? 1 : 0;
|
|
1013
1008
|
const fillColorRaw = header === null || header === void 0 ? void 0 : (_header_fill = header.fill) === null || _header_fill === void 0 ? void 0 : _header_fill.color;
|
|
1014
|
-
|
|
1009
|
+
var _fillColorRaw_updatedColIndex;
|
|
1010
|
+
const backgroundColor = Array.isArray(fillColorRaw) ? (_fillColorRaw_updatedColIndex = fillColorRaw[updatedColIndex]) !== null && _fillColorRaw_updatedColIndex !== void 0 ? _fillColorRaw_updatedColIndex : fillColorRaw[0] : fillColorRaw;
|
|
1015
1011
|
const textAlignRaw = header === null || header === void 0 ? void 0 : header.align;
|
|
1016
|
-
|
|
1012
|
+
var _textAlignRaw_colIndex;
|
|
1013
|
+
const textAlign = Array.isArray(textAlignRaw) ? (_textAlignRaw_colIndex = textAlignRaw[colIndex]) !== null && _textAlignRaw_colIndex !== void 0 ? _textAlignRaw_colIndex : textAlignRaw[0] : textAlignRaw;
|
|
1017
1014
|
const style = {
|
|
1018
1015
|
...typeof fontColor === 'string' ? {
|
|
1019
1016
|
color: fontColor
|
|
@@ -1036,7 +1033,7 @@ export const transformPlotlyJsonToChartTableProps = (input, isMultiPlot, colorMa
|
|
|
1036
1033
|
};
|
|
1037
1034
|
var _tableData_cells_values;
|
|
1038
1035
|
const columns = (_tableData_cells_values = (_tableData_cells = tableData.cells) === null || _tableData_cells === void 0 ? void 0 : _tableData_cells.values) !== null && _tableData_cells_values !== void 0 ? _tableData_cells_values : [];
|
|
1039
|
-
const cells = tableData.cells.
|
|
1036
|
+
const cells = tableData.cells && Object.keys(tableData.cells).length > 0 ? tableData.cells : (_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_data = _input_layout_template.data) === null || _input_layout_template_data === void 0 ? void 0 : (_input_layout_template_data_table = _input_layout_template_data.table) === null || _input_layout_template_data_table === void 0 ? void 0 : (_input_layout_template_data_table_ = _input_layout_template_data_table[0]) === null || _input_layout_template_data_table_ === void 0 ? void 0 : _input_layout_template_data_table_.cells;
|
|
1040
1037
|
const rows = columns[0].map((_, rowIndex)=>columns.map((col, colIndex)=>{
|
|
1041
1038
|
var _cells_font, _cells_font1, _cells_fill;
|
|
1042
1039
|
const cellValue = col[rowIndex];
|
|
@@ -1045,7 +1042,8 @@ export const transformPlotlyJsonToChartTableProps = (input, isMultiPlot, colorMa
|
|
|
1045
1042
|
const rawFontColor = cells === null || cells === void 0 ? void 0 : (_cells_font = cells.font) === null || _cells_font === void 0 ? void 0 : _cells_font.color;
|
|
1046
1043
|
let fontColor;
|
|
1047
1044
|
if (Array.isArray(rawFontColor)) {
|
|
1048
|
-
|
|
1045
|
+
var _rawFontColor_colIndex;
|
|
1046
|
+
const entry = (_rawFontColor_colIndex = rawFontColor[colIndex]) !== null && _rawFontColor_colIndex !== void 0 ? _rawFontColor_colIndex : rawFontColor[0];
|
|
1049
1047
|
const colorValue = Array.isArray(entry) ? entry[rowIndex] : entry;
|
|
1050
1048
|
fontColor = typeof colorValue === 'string' ? colorValue : undefined;
|
|
1051
1049
|
} else if (typeof rawFontColor === 'string') {
|
|
@@ -1054,7 +1052,8 @@ export const transformPlotlyJsonToChartTableProps = (input, isMultiPlot, colorMa
|
|
|
1054
1052
|
const rawFontSize = cells === null || cells === void 0 ? void 0 : (_cells_font1 = cells.font) === null || _cells_font1 === void 0 ? void 0 : _cells_font1.size;
|
|
1055
1053
|
let fontSize;
|
|
1056
1054
|
if (Array.isArray(rawFontSize)) {
|
|
1057
|
-
|
|
1055
|
+
var _rawFontSize_colIndex;
|
|
1056
|
+
const entry = (_rawFontSize_colIndex = rawFontSize[colIndex]) !== null && _rawFontSize_colIndex !== void 0 ? _rawFontSize_colIndex : rawFontSize[0];
|
|
1058
1057
|
const fontSizeValue = Array.isArray(entry) ? entry[rowIndex] : entry;
|
|
1059
1058
|
fontSize = typeof fontSizeValue === 'number' ? fontSizeValue : undefined;
|
|
1060
1059
|
} else if (typeof rawFontSize === 'number') {
|
|
@@ -1064,13 +1063,15 @@ export const transformPlotlyJsonToChartTableProps = (input, isMultiPlot, colorMa
|
|
|
1064
1063
|
const rawBackgroundColor = cells === null || cells === void 0 ? void 0 : (_cells_fill = cells.fill) === null || _cells_fill === void 0 ? void 0 : _cells_fill.color;
|
|
1065
1064
|
let backgroundColor;
|
|
1066
1065
|
if (Array.isArray(rawBackgroundColor)) {
|
|
1067
|
-
|
|
1066
|
+
var _rawBackgroundColor_updatedColIndex;
|
|
1067
|
+
const entry = (_rawBackgroundColor_updatedColIndex = rawBackgroundColor[updatedColIndex]) !== null && _rawBackgroundColor_updatedColIndex !== void 0 ? _rawBackgroundColor_updatedColIndex : rawBackgroundColor[0];
|
|
1068
1068
|
const colorValue = Array.isArray(entry) ? entry[rowIndex] : entry;
|
|
1069
1069
|
backgroundColor = typeof colorValue === 'string' ? colorValue : undefined;
|
|
1070
1070
|
} else if (typeof rawBackgroundColor === 'string') {
|
|
1071
1071
|
backgroundColor = rawBackgroundColor;
|
|
1072
1072
|
}
|
|
1073
|
-
|
|
1073
|
+
var _cells_align_colIndex;
|
|
1074
|
+
const rawTextAlign = Array.isArray(cells === null || cells === void 0 ? void 0 : cells.align) ? (_cells_align_colIndex = cells.align[colIndex]) !== null && _cells_align_colIndex !== void 0 ? _cells_align_colIndex : cells.align[0] : cells === null || cells === void 0 ? void 0 : cells.align;
|
|
1074
1075
|
const textAlign = rawTextAlign;
|
|
1075
1076
|
const style = {
|
|
1076
1077
|
...fontColor ? {
|
|
@@ -1100,7 +1101,7 @@ export const transformPlotlyJsonToChartTableProps = (input, isMultiPlot, colorMa
|
|
|
1100
1101
|
};
|
|
1101
1102
|
var _tableData_header_values;
|
|
1102
1103
|
return {
|
|
1103
|
-
headers: normalizeHeaders((_tableData_header_values = (_tableData_header = tableData.header) === null || _tableData_header === void 0 ? void 0 : _tableData_header.values) !== null && _tableData_header_values !== void 0 ? _tableData_header_values : [],
|
|
1104
|
+
headers: normalizeHeaders((_tableData_header_values = (_tableData_header = tableData.header) === null || _tableData_header === void 0 ? void 0 : _tableData_header.values) !== null && _tableData_header_values !== void 0 ? _tableData_header_values : [], tableData.header && Object.keys(tableData.header).length > 0 ? tableData.header : (_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_data1 = _input_layout_template1.data) === null || _input_layout_template_data1 === void 0 ? void 0 : _input_layout_template_data1.table[0].header),
|
|
1104
1105
|
rows,
|
|
1105
1106
|
width: (_input_layout3 = input.layout) === null || _input_layout3 === void 0 ? void 0 : _input_layout3.width,
|
|
1106
1107
|
height: (_input_layout4 = input.layout) === null || _input_layout4 === void 0 ? void 0 : _input_layout4.height,
|
|
@@ -1108,27 +1109,133 @@ export const transformPlotlyJsonToChartTableProps = (input, isMultiPlot, colorMa
|
|
|
1108
1109
|
};
|
|
1109
1110
|
};
|
|
1110
1111
|
export const projectPolarToCartesian = (input)=>{
|
|
1112
|
+
var _input_layout, _input_layout1;
|
|
1111
1113
|
const projection = {
|
|
1112
1114
|
...input
|
|
1113
1115
|
};
|
|
1116
|
+
// 1. Find the global min and max radius across all series
|
|
1117
|
+
let minRadius = 0;
|
|
1118
|
+
let maxRadius = 0;
|
|
1114
1119
|
for(let sindex = 0; sindex < input.data.length; sindex++){
|
|
1115
|
-
|
|
1120
|
+
const rVals = input.data[sindex].r;
|
|
1121
|
+
if (rVals && isArrayOrTypedArray(rVals)) {
|
|
1122
|
+
for(let ptindex = 0; ptindex < rVals.length; ptindex++){
|
|
1123
|
+
if (!isInvalidValue(rVals[ptindex])) {
|
|
1124
|
+
minRadius = Math.min(minRadius, rVals[ptindex]);
|
|
1125
|
+
maxRadius = Math.max(maxRadius, rVals[ptindex]);
|
|
1126
|
+
}
|
|
1127
|
+
}
|
|
1128
|
+
}
|
|
1129
|
+
}
|
|
1130
|
+
// 2. If there are negative radii, compute the shift
|
|
1131
|
+
const radiusShift = minRadius < 0 ? -minRadius : 0;
|
|
1132
|
+
// 3. Project all points and create a perfect square domain
|
|
1133
|
+
const allX = [];
|
|
1134
|
+
const allY = [];
|
|
1135
|
+
let originX = null;
|
|
1136
|
+
for(let sindex = 0; sindex < input.data.length; sindex++){
|
|
1137
|
+
var _input_layout_polar_angularaxis, _input_layout_polar, _input_layout2, _input_layout_polar_angularaxis1, _input_layout_polar1, _input_layout3;
|
|
1116
1138
|
const series = input.data[sindex];
|
|
1139
|
+
// If scatterpolar, set text to theta values as strings
|
|
1140
|
+
if (series.type === 'scatterpolar' && Array.isArray(series.theta)) {
|
|
1141
|
+
series.text = series.theta.map((v)=>String(v));
|
|
1142
|
+
}
|
|
1117
1143
|
series.x = [];
|
|
1118
1144
|
series.y = [];
|
|
1119
|
-
|
|
1120
|
-
|
|
1121
|
-
|
|
1122
|
-
|
|
1145
|
+
const thetas = series.theta;
|
|
1146
|
+
const rVals = series.r;
|
|
1147
|
+
// Skip if rVals or thetas are not arrays
|
|
1148
|
+
if (!isArrayOrTypedArray(rVals) || !isArrayOrTypedArray(thetas)) {
|
|
1149
|
+
projection.data[sindex] = series;
|
|
1150
|
+
continue;
|
|
1151
|
+
}
|
|
1152
|
+
// retrieve polar axis settings
|
|
1153
|
+
const dirMultiplier = ((_input_layout2 = input.layout) === null || _input_layout2 === void 0 ? void 0 : (_input_layout_polar = _input_layout2.polar) === null || _input_layout_polar === void 0 ? void 0 : (_input_layout_polar_angularaxis = _input_layout_polar.angularaxis) === null || _input_layout_polar_angularaxis === void 0 ? void 0 : _input_layout_polar_angularaxis.direction) === 'clockwise' ? -1 : 1;
|
|
1154
|
+
var _input_layout_polar_angularaxis_rotation;
|
|
1155
|
+
const startAngleInRad = ((_input_layout_polar_angularaxis_rotation = (_input_layout3 = input.layout) === null || _input_layout3 === void 0 ? void 0 : (_input_layout_polar1 = _input_layout3.polar) === null || _input_layout_polar1 === void 0 ? void 0 : (_input_layout_polar_angularaxis1 = _input_layout_polar1.angularaxis) === null || _input_layout_polar_angularaxis1 === void 0 ? void 0 : _input_layout_polar_angularaxis1.rotation) !== null && _input_layout_polar_angularaxis_rotation !== void 0 ? _input_layout_polar_angularaxis_rotation : 0) * Math.PI / 180;
|
|
1156
|
+
// Compute tick positions if categorical
|
|
1157
|
+
let uniqueTheta = [];
|
|
1158
|
+
let categorical = false;
|
|
1159
|
+
if (!isNumberArray(thetas)) {
|
|
1160
|
+
uniqueTheta = Array.from(new Set(thetas));
|
|
1161
|
+
categorical = true;
|
|
1162
|
+
}
|
|
1163
|
+
for(let ptindex = 0; ptindex < rVals.length; ptindex++){
|
|
1164
|
+
if (isInvalidValue(thetas === null || thetas === void 0 ? void 0 : thetas[ptindex]) || isInvalidValue(rVals === null || rVals === void 0 ? void 0 : rVals[ptindex])) {
|
|
1123
1165
|
continue;
|
|
1124
1166
|
}
|
|
1125
|
-
|
|
1126
|
-
|
|
1127
|
-
|
|
1128
|
-
|
|
1167
|
+
// 4. Map theta to angle in radians
|
|
1168
|
+
let thetaRad;
|
|
1169
|
+
if (categorical) {
|
|
1170
|
+
const idx = uniqueTheta.indexOf(thetas[ptindex]);
|
|
1171
|
+
const step = 2 * Math.PI / uniqueTheta.length;
|
|
1172
|
+
thetaRad = startAngleInRad + dirMultiplier * idx * step;
|
|
1173
|
+
} else {
|
|
1174
|
+
thetaRad = startAngleInRad + dirMultiplier * (thetas[ptindex] * Math.PI / 180);
|
|
1175
|
+
}
|
|
1176
|
+
// 5. Shift only the polar origin (not the cartesian)
|
|
1177
|
+
const rawRadius = rVals[ptindex];
|
|
1178
|
+
const polarRadius = rawRadius + radiusShift; // Only for projection
|
|
1179
|
+
// 6. Calculate cartesian coordinates (with shifted polar origin)
|
|
1180
|
+
const x = polarRadius * Math.cos(thetaRad);
|
|
1181
|
+
const y = polarRadius * Math.sin(thetaRad);
|
|
1182
|
+
// Calculate the cartesian coordinates of the original polar origin (0,0)
|
|
1183
|
+
// This is the point that should be mapped to (0,0) in cartesian coordinates
|
|
1184
|
+
if (sindex === 0 && ptindex === 0) {
|
|
1185
|
+
// For polar origin (r=0, θ=0), cartesian coordinates are (0,0)
|
|
1186
|
+
// But since we shifted the radius by radiusShift, the cartesian origin is at (radiusShift, 0)
|
|
1187
|
+
originX = radiusShift;
|
|
1188
|
+
}
|
|
1189
|
+
series.x.push(x);
|
|
1190
|
+
series.y.push(y);
|
|
1191
|
+
allX.push(x);
|
|
1192
|
+
allY.push(y);
|
|
1193
|
+
}
|
|
1194
|
+
// Map text to each data point for downstream chart rendering
|
|
1195
|
+
if (series.x && series.y) {
|
|
1196
|
+
series.data = series.x.map((xVal, idx)=>({
|
|
1197
|
+
x: xVal,
|
|
1198
|
+
y: series.y[idx],
|
|
1199
|
+
...series.text ? {
|
|
1200
|
+
text: series.text[idx]
|
|
1201
|
+
} : {}
|
|
1202
|
+
}));
|
|
1129
1203
|
}
|
|
1130
1204
|
projection.data[sindex] = series;
|
|
1131
1205
|
}
|
|
1206
|
+
// 7. Recenter all cartesian coordinates
|
|
1207
|
+
if (originX !== null) {
|
|
1208
|
+
for(let sindex = 0; sindex < projection.data.length; sindex++){
|
|
1209
|
+
const series = projection.data[sindex];
|
|
1210
|
+
if (series.x && series.y) {
|
|
1211
|
+
series.x = series.x.map((v)=>v - originX);
|
|
1212
|
+
}
|
|
1213
|
+
}
|
|
1214
|
+
// Also recenter allX for normalization
|
|
1215
|
+
for(let i = 0; i < allX.length; i++){
|
|
1216
|
+
allX[i] = allX[i] - originX;
|
|
1217
|
+
}
|
|
1218
|
+
}
|
|
1219
|
+
// 8. Find the maximum absolute value among all x and y
|
|
1220
|
+
let maxAbs = Math.max(...allX.map(Math.abs), ...allY.map(Math.abs));
|
|
1221
|
+
maxAbs = maxAbs === 0 ? 1 : maxAbs;
|
|
1222
|
+
// 9. Rescale all points so that the largest |x| or |y| is 0.5
|
|
1223
|
+
for(let sindex = 0; sindex < projection.data.length; sindex++){
|
|
1224
|
+
const series = projection.data[sindex];
|
|
1225
|
+
if (series.x && series.y) {
|
|
1226
|
+
series.x = series.x.map((v)=>v / (2 * maxAbs));
|
|
1227
|
+
series.y = series.y.map((v)=>v / (2 * maxAbs));
|
|
1228
|
+
}
|
|
1229
|
+
}
|
|
1230
|
+
// 10. Customize layout for perfect square with absolute positioning
|
|
1231
|
+
const size = ((_input_layout = input.layout) === null || _input_layout === void 0 ? void 0 : _input_layout.width) || ((_input_layout1 = input.layout) === null || _input_layout1 === void 0 ? void 0 : _input_layout1.height) || 500;
|
|
1232
|
+
projection.layout = {
|
|
1233
|
+
...projection.layout,
|
|
1234
|
+
width: size,
|
|
1235
|
+
height: size
|
|
1236
|
+
};
|
|
1237
|
+
// Attach originX as custom properties
|
|
1238
|
+
projection.layout.__polarOriginX = originX !== null && originX !== void 0 ? originX : undefined;
|
|
1132
1239
|
return projection;
|
|
1133
1240
|
};
|
|
1134
1241
|
// eslint-disable-next-line @typescript-eslint/no-explicit-any
|
|
@@ -1612,3 +1719,35 @@ export const getGridProperties = (schema, isMultiPlot, validTracesInfo)=>{
|
|
|
1612
1719
|
});
|
|
1613
1720
|
return result;
|
|
1614
1721
|
};
|
|
1722
|
+
const getBarProps = (data, layout, isHorizontal)=>{
|
|
1723
|
+
let padding;
|
|
1724
|
+
if (typeof (layout === null || layout === void 0 ? void 0 : layout.bargap) === 'number') {
|
|
1725
|
+
padding = layout.bargap;
|
|
1726
|
+
}
|
|
1727
|
+
const plotlyBarWidths = data.map((series)=>{
|
|
1728
|
+
if (series.type === 'bar' && (isArrayOrTypedArray(series.width) || typeof series.width === 'number')) {
|
|
1729
|
+
return series.width;
|
|
1730
|
+
}
|
|
1731
|
+
return [];
|
|
1732
|
+
}).flat();
|
|
1733
|
+
const maxPlotlyBarWidth = d3Max(plotlyBarWidths);
|
|
1734
|
+
if (typeof maxPlotlyBarWidth === 'number') {
|
|
1735
|
+
padding = 1 - maxPlotlyBarWidth;
|
|
1736
|
+
padding = Math.max(0, Math.min(padding, 1));
|
|
1737
|
+
}
|
|
1738
|
+
if (typeof padding === 'undefined') {
|
|
1739
|
+
return {};
|
|
1740
|
+
}
|
|
1741
|
+
if (isHorizontal) {
|
|
1742
|
+
return {
|
|
1743
|
+
maxBarHeight: 1000,
|
|
1744
|
+
yAxisPadding: padding
|
|
1745
|
+
};
|
|
1746
|
+
}
|
|
1747
|
+
return {
|
|
1748
|
+
barWidth: 'auto',
|
|
1749
|
+
maxBarWidth: 1000,
|
|
1750
|
+
xAxisInnerPadding: padding,
|
|
1751
|
+
xAxisOuterPadding: padding / 2
|
|
1752
|
+
};
|
|
1753
|
+
};
|