@fluentui/react-charts 0.0.0-nightly-20251223-0406.1 → 0.0.0-nightly-20251225-0406.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 +13 -13
- package/lib/components/DeclarativeChart/PlotlySchemaAdapter.js +148 -55
- package/lib/components/DeclarativeChart/PlotlySchemaAdapter.js.map +1 -1
- package/lib/components/VerticalStackedBarChart/VerticalStackedBarChart.js +4 -2
- package/lib/components/VerticalStackedBarChart/VerticalStackedBarChart.js.map +1 -1
- package/lib-commonjs/components/DeclarativeChart/PlotlySchemaAdapter.js +148 -55
- package/lib-commonjs/components/DeclarativeChart/PlotlySchemaAdapter.js.map +1 -1
- package/lib-commonjs/components/VerticalStackedBarChart/VerticalStackedBarChart.js +4 -2
- package/lib-commonjs/components/VerticalStackedBarChart/VerticalStackedBarChart.js.map +1 -1
- package/package.json +12 -12
package/CHANGELOG.md
CHANGED
|
@@ -1,26 +1,26 @@
|
|
|
1
1
|
# Change Log - @fluentui/react-charts
|
|
2
2
|
|
|
3
|
-
This log was last generated on
|
|
3
|
+
This log was last generated on Thu, 25 Dec 2025 04:21:03 GMT and should not be manually modified.
|
|
4
4
|
|
|
5
5
|
<!-- Start content -->
|
|
6
6
|
|
|
7
|
-
## [0.0.0-nightly-
|
|
7
|
+
## [0.0.0-nightly-20251225-0406.1](https://github.com/microsoft/fluentui/tree/@fluentui/react-charts_v0.0.0-nightly-20251225-0406.1)
|
|
8
8
|
|
|
9
|
-
|
|
10
|
-
[Compare changes](https://github.com/microsoft/fluentui/compare/@fluentui/react-charts_v9.3.8..@fluentui/react-charts_v0.0.0-nightly-
|
|
9
|
+
Thu, 25 Dec 2025 04:21:03 GMT
|
|
10
|
+
[Compare changes](https://github.com/microsoft/fluentui/compare/@fluentui/react-charts_v9.3.8..@fluentui/react-charts_v0.0.0-nightly-20251225-0406.1)
|
|
11
11
|
|
|
12
12
|
### Changes
|
|
13
13
|
|
|
14
14
|
- Release nightly v9 ([commit](https://github.com/microsoft/fluentui/commit/not available) by fluentui-internal@service.microsoft.com)
|
|
15
|
-
- Bump @fluentui/react-button to v0.0.0-nightly-
|
|
16
|
-
- Bump @fluentui/react-jsx-runtime to v0.0.0-nightly-
|
|
17
|
-
- Bump @fluentui/react-overflow to v0.0.0-nightly-
|
|
18
|
-
- Bump @fluentui/react-popover to v0.0.0-nightly-
|
|
19
|
-
- Bump @fluentui/react-shared-contexts to v0.0.0-nightly-
|
|
20
|
-
- Bump @fluentui/react-tabster to v0.0.0-nightly-
|
|
21
|
-
- Bump @fluentui/react-theme to v0.0.0-nightly-
|
|
22
|
-
- Bump @fluentui/react-tooltip to v0.0.0-nightly-
|
|
23
|
-
- Bump @fluentui/react-utilities to v0.0.0-nightly-
|
|
15
|
+
- Bump @fluentui/react-button to v0.0.0-nightly-20251225-0406.1 ([commit](https://github.com/microsoft/fluentui/commit/3fd90b37e85d4647d0b801a918d5d3a82c329f24) by beachball)
|
|
16
|
+
- Bump @fluentui/react-jsx-runtime to v0.0.0-nightly-20251225-0406.1 ([commit](https://github.com/microsoft/fluentui/commit/3fd90b37e85d4647d0b801a918d5d3a82c329f24) by beachball)
|
|
17
|
+
- Bump @fluentui/react-overflow to v0.0.0-nightly-20251225-0406.1 ([commit](https://github.com/microsoft/fluentui/commit/3fd90b37e85d4647d0b801a918d5d3a82c329f24) by beachball)
|
|
18
|
+
- Bump @fluentui/react-popover to v0.0.0-nightly-20251225-0406.1 ([commit](https://github.com/microsoft/fluentui/commit/3fd90b37e85d4647d0b801a918d5d3a82c329f24) by beachball)
|
|
19
|
+
- Bump @fluentui/react-shared-contexts to v0.0.0-nightly-20251225-0406.1 ([commit](https://github.com/microsoft/fluentui/commit/3fd90b37e85d4647d0b801a918d5d3a82c329f24) by beachball)
|
|
20
|
+
- Bump @fluentui/react-tabster to v0.0.0-nightly-20251225-0406.1 ([commit](https://github.com/microsoft/fluentui/commit/3fd90b37e85d4647d0b801a918d5d3a82c329f24) by beachball)
|
|
21
|
+
- Bump @fluentui/react-theme to v0.0.0-nightly-20251225-0406.1 ([commit](https://github.com/microsoft/fluentui/commit/3fd90b37e85d4647d0b801a918d5d3a82c329f24) by beachball)
|
|
22
|
+
- Bump @fluentui/react-tooltip to v0.0.0-nightly-20251225-0406.1 ([commit](https://github.com/microsoft/fluentui/commit/3fd90b37e85d4647d0b801a918d5d3a82c329f24) by beachball)
|
|
23
|
+
- Bump @fluentui/react-utilities to v0.0.0-nightly-20251225-0406.1 ([commit](https://github.com/microsoft/fluentui/commit/3fd90b37e85d4647d0b801a918d5d3a82c329f24) by beachball)
|
|
24
24
|
|
|
25
25
|
## [9.3.8](https://github.com/microsoft/fluentui/tree/@fluentui/react-charts_v9.3.8)
|
|
26
26
|
|
|
@@ -337,6 +337,57 @@ const toFiniteNumber = (value)=>{
|
|
|
337
337
|
const numeric = typeof value === 'number' ? value : Number(value);
|
|
338
338
|
return Number.isFinite(numeric) ? numeric : undefined;
|
|
339
339
|
};
|
|
340
|
+
/**
|
|
341
|
+
* Parses Plotly axis references (e.g. `x`, `x2`, `xaxis2`, `paper`, `pixel`, `x domain`) into a ref type + axis id.
|
|
342
|
+
*/ const parseAxisRef = (ref, axis)=>{
|
|
343
|
+
if (!ref) {
|
|
344
|
+
return {
|
|
345
|
+
refType: 'axis',
|
|
346
|
+
axisId: 1
|
|
347
|
+
};
|
|
348
|
+
}
|
|
349
|
+
const normalized = ref.toLowerCase().trim();
|
|
350
|
+
if (normalized === 'pixel') {
|
|
351
|
+
return {
|
|
352
|
+
refType: 'pixel',
|
|
353
|
+
axisId: 1
|
|
354
|
+
};
|
|
355
|
+
}
|
|
356
|
+
if (normalized === 'paper') {
|
|
357
|
+
return {
|
|
358
|
+
refType: 'relative',
|
|
359
|
+
axisId: 1
|
|
360
|
+
};
|
|
361
|
+
}
|
|
362
|
+
if (normalized.endsWith(' domain')) {
|
|
363
|
+
return normalized.startsWith(axis) ? {
|
|
364
|
+
refType: 'relative',
|
|
365
|
+
axisId: 1
|
|
366
|
+
} : {
|
|
367
|
+
refType: undefined,
|
|
368
|
+
axisId: 1
|
|
369
|
+
};
|
|
370
|
+
}
|
|
371
|
+
const match = normalized.match(/^([xy])(axis)?(\d*)$/);
|
|
372
|
+
if (!match || match[1] !== axis) {
|
|
373
|
+
return {
|
|
374
|
+
refType: undefined,
|
|
375
|
+
axisId: 1
|
|
376
|
+
};
|
|
377
|
+
}
|
|
378
|
+
const suffix = match[3];
|
|
379
|
+
if (!suffix || suffix === '1') {
|
|
380
|
+
return {
|
|
381
|
+
refType: 'axis',
|
|
382
|
+
axisId: 1
|
|
383
|
+
};
|
|
384
|
+
}
|
|
385
|
+
const parsed = Number(suffix);
|
|
386
|
+
return {
|
|
387
|
+
refType: 'axis',
|
|
388
|
+
axisId: Number.isFinite(parsed) && parsed >= 1 ? parsed : 1
|
|
389
|
+
};
|
|
390
|
+
};
|
|
340
391
|
/**
|
|
341
392
|
* Converts Plotly's bottom-origin relative Y coordinate into the SVG top-origin space used by our overlay.
|
|
342
393
|
*/ const transformRelativeYForChart = (value)=>{
|
|
@@ -390,21 +441,13 @@ const appendPx = (value)=>{
|
|
|
390
441
|
if (!ref) {
|
|
391
442
|
return 'axis';
|
|
392
443
|
}
|
|
393
|
-
const
|
|
394
|
-
if (
|
|
395
|
-
return
|
|
396
|
-
}
|
|
397
|
-
if (normalized === 'paper') {
|
|
398
|
-
return 'relative';
|
|
399
|
-
}
|
|
400
|
-
if (normalized.endsWith(' domain')) {
|
|
401
|
-
return normalized.startsWith(axis) ? 'relative' : undefined;
|
|
444
|
+
const parsed = parseAxisRef(ref, axis);
|
|
445
|
+
if (parsed.refType !== 'axis') {
|
|
446
|
+
return parsed.refType;
|
|
402
447
|
}
|
|
448
|
+
const normalized = (ref !== null && ref !== void 0 ? ref : '').toLowerCase().trim();
|
|
403
449
|
const match = normalized.match(/^([xy])(\d*)$/);
|
|
404
|
-
|
|
405
|
-
return 'axis';
|
|
406
|
-
}
|
|
407
|
-
return undefined;
|
|
450
|
+
return match && match[1] === axis ? 'axis' : undefined;
|
|
408
451
|
};
|
|
409
452
|
/**
|
|
410
453
|
* Retrieves the appropriate axis layout section from Plotly's layout given an axis reference alias.
|
|
@@ -413,56 +456,36 @@ const appendPx = (value)=>{
|
|
|
413
456
|
return undefined;
|
|
414
457
|
}
|
|
415
458
|
const defaultAxisKey = `${axis}axis`;
|
|
416
|
-
|
|
417
|
-
|
|
418
|
-
}
|
|
419
|
-
const normalized = ref.toLowerCase();
|
|
420
|
-
if (normalized === 'paper' || normalized === 'pixel' || normalized.endsWith(' domain')) {
|
|
459
|
+
const { refType, axisId } = parseAxisRef(ref, axis);
|
|
460
|
+
if (refType !== 'axis' || axisId === 1) {
|
|
421
461
|
return layout[defaultAxisKey];
|
|
422
462
|
}
|
|
423
|
-
const
|
|
424
|
-
|
|
425
|
-
const index = match[2];
|
|
426
|
-
if (index && index !== '' && index !== '1') {
|
|
427
|
-
const axisKey = `${axis}axis${index}`;
|
|
428
|
-
return layout[axisKey];
|
|
429
|
-
}
|
|
430
|
-
return layout[defaultAxisKey];
|
|
431
|
-
}
|
|
432
|
-
return layout[defaultAxisKey];
|
|
463
|
+
const axisKey = `${axis}axis${axisId}`;
|
|
464
|
+
return layout[axisKey];
|
|
433
465
|
};
|
|
434
|
-
|
|
435
|
-
* Normalizes raw Plotly data values into canonical number/date/string types based on axis configuration.
|
|
436
|
-
*/ const convertDataValue = (value, axisLayout)=>{
|
|
466
|
+
const convertAnnotationDataValue = (value, axisType)=>{
|
|
437
467
|
if (value === undefined || value === null) {
|
|
438
468
|
return undefined;
|
|
439
469
|
}
|
|
440
|
-
const axisType = axisLayout === null || axisLayout === void 0 ? void 0 : axisLayout.type;
|
|
441
470
|
if (axisType === 'date') {
|
|
442
471
|
const dateValue = value instanceof Date ? value : new Date(value);
|
|
443
472
|
return Number.isNaN(dateValue.getTime()) ? undefined : dateValue;
|
|
444
473
|
}
|
|
445
|
-
if (value instanceof Date) {
|
|
446
|
-
return Number.isNaN(value.getTime()) ? undefined : value;
|
|
447
|
-
}
|
|
448
|
-
if (typeof value === 'number') {
|
|
449
|
-
return Number.isFinite(value) ? value : undefined;
|
|
450
|
-
}
|
|
451
474
|
if (axisType === 'linear' || axisType === 'log') {
|
|
475
|
+
if (typeof value === 'number') {
|
|
476
|
+
return Number.isFinite(value) ? value : undefined;
|
|
477
|
+
}
|
|
452
478
|
const numeric = Number(value);
|
|
453
479
|
return Number.isFinite(numeric) ? numeric : undefined;
|
|
454
480
|
}
|
|
455
|
-
|
|
456
|
-
|
|
457
|
-
if (shouldTryParseDate && isDate(value)) {
|
|
458
|
-
const parsedDate = new Date(value);
|
|
459
|
-
if (!Number.isNaN(parsedDate.getTime()) && parsedDate.getFullYear() >= 1900) {
|
|
460
|
-
return parsedDate;
|
|
461
|
-
}
|
|
462
|
-
}
|
|
481
|
+
// For category-like axes, preserve raw strings (and avoid date parsing heuristics).
|
|
482
|
+
if (value instanceof Date) {
|
|
463
483
|
return value;
|
|
464
484
|
}
|
|
465
|
-
|
|
485
|
+
if (typeof value === 'number' || typeof value === 'string') {
|
|
486
|
+
return value;
|
|
487
|
+
}
|
|
488
|
+
return undefined;
|
|
466
489
|
};
|
|
467
490
|
const createAnnotationId = (text, index)=>{
|
|
468
491
|
const normalized = text.replace(/\s+/g, ' ').trim();
|
|
@@ -541,7 +564,9 @@ const getAnnotationCoordinateValue = (axis, refType, annotation, layout)=>{
|
|
|
541
564
|
const axisRef = axis === 'x' ? annotation === null || annotation === void 0 ? void 0 : annotation.xref : annotation === null || annotation === void 0 ? void 0 : annotation.yref;
|
|
542
565
|
const axisLayout = getAxisLayoutByRef(layout, axisRef, axis);
|
|
543
566
|
const rawValue = axis === 'x' ? annotation === null || annotation === void 0 ? void 0 : annotation.x : annotation === null || annotation === void 0 ? void 0 : annotation.y;
|
|
544
|
-
|
|
567
|
+
var _axisLayout_type;
|
|
568
|
+
const axisType = (_axisLayout_type = axisLayout === null || axisLayout === void 0 ? void 0 : axisLayout.type) !== null && _axisLayout_type !== void 0 ? _axisLayout_type : 'category';
|
|
569
|
+
return convertAnnotationDataValue(rawValue, axisType);
|
|
545
570
|
}
|
|
546
571
|
const numericValue = toFiniteNumber(axis === 'x' ? annotation === null || annotation === void 0 ? void 0 : annotation.x : annotation === null || annotation === void 0 ? void 0 : annotation.y);
|
|
547
572
|
if (numericValue === undefined) {
|
|
@@ -765,14 +790,82 @@ const getAnnotationCoordinateValue = (axis, refType, annotation, layout)=>{
|
|
|
765
790
|
}
|
|
766
791
|
return chartAnnotation;
|
|
767
792
|
};
|
|
768
|
-
const getChartAnnotationsFromLayout = (layout, isMultiPlot)=>{
|
|
793
|
+
const getChartAnnotationsFromLayout = (data, layout, isMultiPlot)=>{
|
|
769
794
|
if (isMultiPlot || !(layout === null || layout === void 0 ? void 0 : layout.annotations)) {
|
|
770
795
|
return undefined;
|
|
771
796
|
}
|
|
797
|
+
// Infer axis types when they are not explicitly set.
|
|
798
|
+
// This is needed so annotation coordinate parsing can correctly treat values as 'date' vs 'category'
|
|
799
|
+
// (for example, bar chart category axes with date-like strings).
|
|
800
|
+
const inferredLayout = (()=>{
|
|
801
|
+
if (!data || !isArrayOrTypedArray(data) || data.length === 0) {
|
|
802
|
+
return layout;
|
|
803
|
+
}
|
|
804
|
+
const valuesByAxisKey = new Map();
|
|
805
|
+
const axesExpectingCategories = new Set();
|
|
806
|
+
data.forEach((series)=>{
|
|
807
|
+
const trace = series;
|
|
808
|
+
const axisIds = getAxisIds(trace);
|
|
809
|
+
if (trace.type === 'bar') {
|
|
810
|
+
const categoryAxisLetter = trace.orientation === 'h' ? 'y' : 'x';
|
|
811
|
+
axesExpectingCategories.add(getAxisKey(categoryAxisLetter, axisIds[categoryAxisLetter]));
|
|
812
|
+
}
|
|
813
|
+
[
|
|
814
|
+
'x',
|
|
815
|
+
'y'
|
|
816
|
+
].forEach((axLetter)=>{
|
|
817
|
+
const coords = trace[axLetter];
|
|
818
|
+
if (!coords || !isArrayOrTypedArray(coords)) {
|
|
819
|
+
return;
|
|
820
|
+
}
|
|
821
|
+
const axisKey = getAxisKey(axLetter, axisIds[axLetter]);
|
|
822
|
+
var _valuesByAxisKey_get;
|
|
823
|
+
const existing = (_valuesByAxisKey_get = valuesByAxisKey.get(axisKey)) !== null && _valuesByAxisKey_get !== void 0 ? _valuesByAxisKey_get : [];
|
|
824
|
+
coords.forEach((val)=>{
|
|
825
|
+
if (!isInvalidValue(val)) {
|
|
826
|
+
existing.push(val);
|
|
827
|
+
}
|
|
828
|
+
});
|
|
829
|
+
valuesByAxisKey.set(axisKey, existing);
|
|
830
|
+
});
|
|
831
|
+
});
|
|
832
|
+
let nextLayout;
|
|
833
|
+
valuesByAxisKey.forEach((values, axisKey)=>{
|
|
834
|
+
const currentAxis = layout === null || layout === void 0 ? void 0 : layout[axisKey];
|
|
835
|
+
const currentType = currentAxis === null || currentAxis === void 0 ? void 0 : currentAxis.type;
|
|
836
|
+
if ([
|
|
837
|
+
'linear',
|
|
838
|
+
'log',
|
|
839
|
+
'date',
|
|
840
|
+
'category'
|
|
841
|
+
].includes(currentType !== null && currentType !== void 0 ? currentType : '')) {
|
|
842
|
+
return;
|
|
843
|
+
}
|
|
844
|
+
let inferredType;
|
|
845
|
+
if (axesExpectingCategories.has(axisKey) || isYearArray(values)) {
|
|
846
|
+
inferredType = 'category';
|
|
847
|
+
} else if (isDateArray(values)) {
|
|
848
|
+
inferredType = 'date';
|
|
849
|
+
}
|
|
850
|
+
if (!inferredType) {
|
|
851
|
+
return;
|
|
852
|
+
}
|
|
853
|
+
if (!nextLayout) {
|
|
854
|
+
nextLayout = {
|
|
855
|
+
...layout
|
|
856
|
+
};
|
|
857
|
+
}
|
|
858
|
+
nextLayout[axisKey] = {
|
|
859
|
+
...currentAxis !== null && currentAxis !== void 0 ? currentAxis : {},
|
|
860
|
+
type: inferredType
|
|
861
|
+
};
|
|
862
|
+
});
|
|
863
|
+
return nextLayout !== null && nextLayout !== void 0 ? nextLayout : layout;
|
|
864
|
+
})();
|
|
772
865
|
const annotationsArray = Array.isArray(layout.annotations) ? layout.annotations : [
|
|
773
866
|
layout.annotations
|
|
774
867
|
];
|
|
775
|
-
const converted = annotationsArray.map((annotation, index)=>convertPlotlyAnnotation(annotation,
|
|
868
|
+
const converted = annotationsArray.map((annotation, index)=>convertPlotlyAnnotation(annotation, inferredLayout, index)).filter((annotation)=>annotation !== undefined);
|
|
776
869
|
return converted.length > 0 ? converted : undefined;
|
|
777
870
|
};
|
|
778
871
|
/**
|
|
@@ -854,7 +947,7 @@ const getChartAnnotationsFromLayout = (layout, isMultiPlot)=>{
|
|
|
854
947
|
export const transformPlotlyJsonToAnnotationChartProps = (input, isMultiPlot, _colorMap, _colorwayType, _isDarkTheme)=>{
|
|
855
948
|
var _layoutWithMeta_meta, _input_layout, _input_layout1, _input_layout2, _input_layout3, _input_layout_font, _input_layout4, _input_layout_font1, _input_layout5, _input_layout6;
|
|
856
949
|
var _getChartAnnotationsFromLayout;
|
|
857
|
-
const annotations = (_getChartAnnotationsFromLayout = getChartAnnotationsFromLayout(input.layout, isMultiPlot)) !== null && _getChartAnnotationsFromLayout !== void 0 ? _getChartAnnotationsFromLayout : [];
|
|
950
|
+
const annotations = (_getChartAnnotationsFromLayout = getChartAnnotationsFromLayout(input.data, input.layout, isMultiPlot)) !== null && _getChartAnnotationsFromLayout !== void 0 ? _getChartAnnotationsFromLayout : [];
|
|
858
951
|
const titles = getTitles(input.layout);
|
|
859
952
|
const layoutTitle = titles.chartTitle || undefined;
|
|
860
953
|
const layoutWithMeta = input.layout;
|
|
@@ -1121,7 +1214,7 @@ export const transformPlotlyJsonToVSBCProps = (input, isMultiPlot, colorMap, col
|
|
|
1121
1214
|
}
|
|
1122
1215
|
});
|
|
1123
1216
|
const vsbcData = Object.values(mapXToDataPoints);
|
|
1124
|
-
const annotations = getChartAnnotationsFromLayout(input.layout, isMultiPlot);
|
|
1217
|
+
const annotations = getChartAnnotationsFromLayout(input.data, input.layout, isMultiPlot);
|
|
1125
1218
|
var _input_layout_height;
|
|
1126
1219
|
return {
|
|
1127
1220
|
data: vsbcData,
|
|
@@ -1266,7 +1359,7 @@ export const transformPlotlyJsonToGVBCProps = (input, isMultiPlot, colorMap, col
|
|
|
1266
1359
|
});
|
|
1267
1360
|
}
|
|
1268
1361
|
});
|
|
1269
|
-
const annotations = getChartAnnotationsFromLayout(processedInput.layout, isMultiPlot);
|
|
1362
|
+
const annotations = getChartAnnotationsFromLayout(processedInput.data, processedInput.layout, isMultiPlot);
|
|
1270
1363
|
var _processedInput_layout_height;
|
|
1271
1364
|
return {
|
|
1272
1365
|
dataV2: gvbcDataV2,
|
|
@@ -1363,7 +1456,7 @@ export const transformPlotlyJsonToVBCProps = (input, isMultiPlot, colorMap, colo
|
|
|
1363
1456
|
});
|
|
1364
1457
|
});
|
|
1365
1458
|
});
|
|
1366
|
-
const annotations = getChartAnnotationsFromLayout(input.layout, isMultiPlot);
|
|
1459
|
+
const annotations = getChartAnnotationsFromLayout(input.data, input.layout, isMultiPlot);
|
|
1367
1460
|
var _input_layout_height;
|
|
1368
1461
|
return {
|
|
1369
1462
|
data: vbcData,
|
|
@@ -1582,7 +1675,7 @@ const transformPlotlyJsonToScatterTraceProps = (input, isMultiPlot, chartType, c
|
|
|
1582
1675
|
...lineShape
|
|
1583
1676
|
]
|
|
1584
1677
|
};
|
|
1585
|
-
const annotations = getChartAnnotationsFromLayout(input.layout, isMultiPlot);
|
|
1678
|
+
const annotations = getChartAnnotationsFromLayout(input.data, input.layout, isMultiPlot);
|
|
1586
1679
|
var _input_layout_height;
|
|
1587
1680
|
const commonProps = {
|
|
1588
1681
|
supportNegativeData: true,
|