@fluentui/react-charting 5.24.0 → 5.24.2
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.json +43 -1
- package/CHANGELOG.md +22 -2
- package/dist/react-charting.d.ts +5 -0
- package/dist/react-charting.js +1 -1
- package/dist/react-charting.min.js +1 -1
- package/etc/react-charting.api.md +3 -0
- package/lib/components/DeclarativeChart/PlotlySchemaAdapter.d.ts +1 -0
- package/lib/components/DeclarativeChart/PlotlySchemaAdapter.js +113 -42
- package/lib/components/DeclarativeChart/PlotlySchemaAdapter.js.map +1 -1
- package/lib/components/LineChart/LineChart.base.js +23 -17
- package/lib/components/LineChart/LineChart.base.js.map +1 -1
- package/lib/components/LineChart/LineChart.styles.js +9 -0
- package/lib/components/LineChart/LineChart.styles.js.map +1 -1
- package/lib/components/LineChart/LineChart.types.d.ts +2 -0
- package/lib/components/LineChart/LineChart.types.js.map +1 -1
- package/lib/components/VerticalStackedBarChart/VerticalStackedBarChart.base.js +8 -2
- package/lib/components/VerticalStackedBarChart/VerticalStackedBarChart.base.js.map +1 -1
- package/lib/types/IDataPoint.d.ts +4 -0
- package/lib/types/IDataPoint.js.map +1 -1
- package/lib-amd/components/DeclarativeChart/PlotlySchemaAdapter.d.ts +1 -0
- package/lib-amd/components/DeclarativeChart/PlotlySchemaAdapter.js +115 -43
- package/lib-amd/components/DeclarativeChart/PlotlySchemaAdapter.js.map +1 -1
- package/lib-amd/components/LineChart/LineChart.base.js +23 -17
- package/lib-amd/components/LineChart/LineChart.base.js.map +1 -1
- package/lib-amd/components/LineChart/LineChart.styles.js +9 -1
- package/lib-amd/components/LineChart/LineChart.styles.js.map +1 -1
- package/lib-amd/components/LineChart/LineChart.types.d.ts +2 -0
- package/lib-amd/components/LineChart/LineChart.types.js.map +1 -1
- package/lib-amd/components/VerticalStackedBarChart/VerticalStackedBarChart.base.js +8 -2
- package/lib-amd/components/VerticalStackedBarChart/VerticalStackedBarChart.base.js.map +1 -1
- package/lib-amd/types/IDataPoint.d.ts +4 -0
- package/lib-amd/types/IDataPoint.js.map +1 -1
- package/lib-commonjs/components/DeclarativeChart/PlotlySchemaAdapter.d.ts +1 -0
- package/lib-commonjs/components/DeclarativeChart/PlotlySchemaAdapter.js +115 -43
- package/lib-commonjs/components/DeclarativeChart/PlotlySchemaAdapter.js.map +1 -1
- package/lib-commonjs/components/LineChart/LineChart.base.js +23 -17
- package/lib-commonjs/components/LineChart/LineChart.base.js.map +1 -1
- package/lib-commonjs/components/LineChart/LineChart.styles.js +9 -0
- package/lib-commonjs/components/LineChart/LineChart.styles.js.map +1 -1
- package/lib-commonjs/components/LineChart/LineChart.types.d.ts +2 -0
- package/lib-commonjs/components/LineChart/LineChart.types.js.map +1 -1
- package/lib-commonjs/components/VerticalStackedBarChart/VerticalStackedBarChart.base.js +8 -2
- package/lib-commonjs/components/VerticalStackedBarChart/VerticalStackedBarChart.base.js.map +1 -1
- package/lib-commonjs/types/IDataPoint.d.ts +4 -0
- package/lib-commonjs/types/IDataPoint.js.map +1 -1
- package/package.json +1 -1
- package/src/components/LineChart/LineChart.types.ts +4 -1
|
@@ -846,7 +846,7 @@ var LineChartBase = /** @class */ (function (_super) {
|
|
|
846
846
|
};
|
|
847
847
|
LineChartBase.prototype._createLines = function (xElement, containerHeight) {
|
|
848
848
|
var _this_1 = this;
|
|
849
|
-
var _a, _b, _c, _d, _e, _f, _g, _h, _j, _k, _l, _m, _o, _p, _q, _r, _s, _t, _u, _v, _w, _x, _y, _z, _0, _1, _2, _3, _4, _5, _6, _7, _8;
|
|
849
|
+
var _a, _b, _c, _d, _e, _f, _g, _h, _j, _k, _l, _m, _o, _p, _q, _r, _s, _t, _u, _v, _w, _x, _y, _z, _0, _1, _2, _3, _4, _5, _6, _7, _8, _9, _10;
|
|
850
850
|
var lines = [];
|
|
851
851
|
if (this.state.isSelectedLegend) {
|
|
852
852
|
this._points = this.state.selectedLegendPoints;
|
|
@@ -859,6 +859,9 @@ var LineChartBase = /** @class */ (function (_super) {
|
|
|
859
859
|
return item.markerSize;
|
|
860
860
|
});
|
|
861
861
|
});
|
|
862
|
+
var classNames = getClassNames(this.props.styles, {
|
|
863
|
+
theme: this.props.theme,
|
|
864
|
+
});
|
|
862
865
|
var _loop_1 = function (i) {
|
|
863
866
|
var linesForLine = [];
|
|
864
867
|
var bordersForLine = [];
|
|
@@ -872,7 +875,7 @@ var LineChartBase = /** @class */ (function (_super) {
|
|
|
872
875
|
var yPadding = this_1._points[i].useSecondaryYScale && this_1._yScaleSecondary ? this_1._yPaddingSecondary : this_1._yPaddingPrimary;
|
|
873
876
|
var extraMaxPixels = this_1._hasMarkersMode ? this_1._getRangeForScatterMarkerSize(yScale, yPadding) : 0;
|
|
874
877
|
if (this_1._points[i].data.length === 1) {
|
|
875
|
-
var
|
|
878
|
+
var _11 = this_1._points[i].data[0], x1_1 = _11.x, y1 = _11.y, xAxisCalloutData_1 = _11.xAxisCalloutData, xAxisCalloutAccessibilityData_1 = _11.xAxisCalloutAccessibilityData;
|
|
876
879
|
var circleId_1 = "".concat(this_1._circleId, "_").concat(i);
|
|
877
880
|
var isLegendSelected = this_1._legendHighlighted(legendVal) || this_1._noLegendHighlighted() || this_1.state.isSelectedLegend;
|
|
878
881
|
var currentMarkerSize = this_1._points[i].data[0].markerSize;
|
|
@@ -931,48 +934,54 @@ var LineChartBase = /** @class */ (function (_super) {
|
|
|
931
934
|
var lineId = "".concat(this_1._lineId, "_").concat(i, "_").concat(j);
|
|
932
935
|
var borderId = "".concat(this_1._borderId, "_").concat(i, "_").concat(j);
|
|
933
936
|
var circleId = "".concat(this_1._circleId, "_").concat(i, "_").concat(j);
|
|
934
|
-
var
|
|
935
|
-
var
|
|
937
|
+
var _12 = this_1._points[i].data[j - 1], x1 = _12.x, y1 = _12.y, xAxisCalloutData = _12.xAxisCalloutData, xAxisCalloutAccessibilityData = _12.xAxisCalloutAccessibilityData;
|
|
938
|
+
var _13 = this_1._points[i].data[j], x2 = _13.x, y2 = _13.y;
|
|
936
939
|
var path = this_1._getPath(this_1._xAxisScale(x1), yScale(y1), circleId, j, false, this_1._points[i].index);
|
|
937
940
|
var strokeWidth = ((_q = this_1._points[i].lineOptions) === null || _q === void 0 ? void 0 : _q.strokeWidth) || this_1.props.strokeWidth || DEFAULT_LINE_STROKE_SIZE;
|
|
938
941
|
var isLegendSelected = this_1._legendHighlighted(legendVal) || this_1._noLegendHighlighted() || this_1.state.isSelectedLegend;
|
|
939
942
|
var currentPointHidden = this_1._points[i].hideNonActiveDots && activePoint !== circleId;
|
|
940
943
|
var currentMarkerSize = this_1._points[i].data[j - 1].markerSize;
|
|
941
|
-
pointsForLine.push(((_s = (_r = this_1._points[i].lineOptions) === null || _r === void 0 ? void 0 : _r.mode) === null || _s === void 0 ? void 0 : _s.includes('markers')) ? (React.createElement(
|
|
944
|
+
pointsForLine.push(((_s = (_r = this_1._points[i].lineOptions) === null || _r === void 0 ? void 0 : _r.mode) === null || _s === void 0 ? void 0 : _s.includes('markers')) ? (React.createElement(React.Fragment, null,
|
|
945
|
+
React.createElement("circle", tslib_1.__assign({ id: circleId, key: circleId, r: currentMarkerSize ? (currentMarkerSize * extraMaxPixels) / maxMarkerSize : 4, cx: this_1._xAxisScale(x1), cy: yScale(y1), "data-is-focusable": isLegendSelected, onMouseOver: this_1._handleHover.bind(this_1, x1, y1, verticaLineHeight, xAxisCalloutData, circleId, xAxisCalloutAccessibilityData, yScale), onMouseMove: this_1._handleHover.bind(this_1, x1, y1, verticaLineHeight, xAxisCalloutData, circleId, xAxisCalloutAccessibilityData, yScale), onMouseOut: this_1._handleMouseOut, onFocus: function () {
|
|
946
|
+
return _this_1._handleFocus(lineId, x1, xAxisCalloutData, circleId, xAxisCalloutAccessibilityData);
|
|
947
|
+
}, onBlur: this_1._handleMouseOut }, this_1._getClickHandler(this_1._points[i].data[j - 1].onDataPointClick), { opacity: isLegendSelected && !currentPointHidden ? 1 : 0.01, fill: this_1._getPointFill(lineColor, circleId, j, false), stroke: lineColor, strokeWidth: strokeWidth, role: "img", "aria-label": (_t = this_1._points[i].data[j - 1].text) !== null && _t !== void 0 ? _t : this_1._getAriaLabel(i, j - 1) })),
|
|
948
|
+
this_1._points[i].data[j - 1].text && (React.createElement("text", { key: "".concat(circleId, "-label"), x: this_1._xAxisScale(x1), y: yScale(y1) + 35, fontSize: 12, fill: theme === null || theme === void 0 ? void 0 : theme.semanticColors.bodyText, textAnchor: "middle", className: classNames.markerLabel }, this_1._points[i].data[j - 1].text)))) : (React.createElement("path", tslib_1.__assign({ id: circleId, key: circleId, d: path, "data-is-focusable": isLegendSelected, onMouseOver: this_1._handleHover.bind(this_1, x1, y1, verticaLineHeight, xAxisCalloutData, circleId, xAxisCalloutAccessibilityData, yScale), onMouseMove: this_1._handleHover.bind(this_1, x1, y1, verticaLineHeight, xAxisCalloutData, circleId, xAxisCalloutAccessibilityData, yScale), onMouseOut: this_1._handleMouseOut, onFocus: function () { return _this_1._handleFocus(lineId, x1, xAxisCalloutData, circleId, xAxisCalloutAccessibilityData); }, onBlur: this_1._handleMouseOut }, this_1._getClickHandler(this_1._points[i].data[j - 1].onDataPointClick), { opacity: isLegendSelected && !currentPointHidden ? 1 : 0.01, fill: this_1._getPointFill(lineColor, circleId, j, false), stroke: lineColor, strokeWidth: strokeWidth, role: "img", "aria-label": this_1._getAriaLabel(i, j - 1) }))));
|
|
942
949
|
if (j + 1 === this_1._points[i].data.length) {
|
|
943
950
|
// If this is last point of the line segment.
|
|
944
951
|
var lastCircleId_1 = "".concat(circleId).concat(j, "L");
|
|
945
952
|
var hiddenHoverCircleId = "".concat(circleId).concat(j, "D");
|
|
946
953
|
var lastPointHidden = this_1._points[i].hideNonActiveDots && activePoint !== lastCircleId_1;
|
|
947
954
|
path = this_1._getPath(this_1._xAxisScale(x2), yScale(y2), lastCircleId_1, j, true, this_1._points[i].index);
|
|
948
|
-
var
|
|
955
|
+
var _14 = this_1._points[i].data[j], lastCirlceXCallout_1 = _14.xAxisCalloutData, lastCirlceXCalloutAccessibilityData_1 = _14.xAxisCalloutAccessibilityData;
|
|
949
956
|
currentMarkerSize = this_1._points[i].data[j].markerSize;
|
|
950
957
|
pointsForLine.push(React.createElement(React.Fragment, { key: "".concat(lastCircleId_1, "_container") },
|
|
951
|
-
((
|
|
952
|
-
|
|
953
|
-
|
|
958
|
+
((_v = (_u = this_1._points[i].lineOptions) === null || _u === void 0 ? void 0 : _u.mode) === null || _v === void 0 ? void 0 : _v.includes('markers')) ? (React.createElement(React.Fragment, null,
|
|
959
|
+
React.createElement("circle", tslib_1.__assign({ id: lastCircleId_1, key: lastCircleId_1, r: currentMarkerSize ? (currentMarkerSize * extraMaxPixels) / maxMarkerSize : 4, cx: this_1._xAxisScale(x2), cy: yScale(y2), "data-is-focusable": isLegendSelected, onMouseOver: this_1._handleHover.bind(this_1, x2, y2, verticaLineHeight, lastCirlceXCallout_1, lastCircleId_1, lastCirlceXCalloutAccessibilityData_1, yScale), onMouseMove: this_1._handleHover.bind(this_1, x2, y2, verticaLineHeight, lastCirlceXCallout_1, lastCircleId_1, lastCirlceXCalloutAccessibilityData_1, yScale), onMouseOut: this_1._handleMouseOut, onFocus: function () {
|
|
960
|
+
return _this_1._handleFocus(lineId, x2, lastCirlceXCallout_1, lastCircleId_1, lastCirlceXCalloutAccessibilityData_1);
|
|
961
|
+
}, onBlur: this_1._handleMouseOut }, this_1._getClickHandler(this_1._points[i].data[j].onDataPointClick), { opacity: isLegendSelected && !lastPointHidden ? 1 : 0.01, fill: this_1._getPointFill(lineColor, lastCircleId_1, j, true), stroke: lineColor, strokeWidth: strokeWidth, role: "img", "aria-label": (_w = this_1._points[i].data[j].text) !== null && _w !== void 0 ? _w : this_1._getAriaLabel(i, j) })),
|
|
962
|
+
this_1._points[i].data[j].text && (React.createElement("text", { key: "".concat(lastCircleId_1, "-label"), x: this_1._xAxisScale(x2), y: yScale(y2) + 35, fontSize: 12, fill: theme === null || theme === void 0 ? void 0 : theme.semanticColors.bodyText, textAnchor: "middle", className: classNames.markerLabel }, this_1._points[i].data[j].text)))) : (React.createElement("path", tslib_1.__assign({ id: lastCircleId_1, key: lastCircleId_1, d: path, "data-is-focusable": isLegendSelected, onMouseOver: this_1._handleHover.bind(this_1, x2, y2, verticaLineHeight, lastCirlceXCallout_1, lastCircleId_1, lastCirlceXCalloutAccessibilityData_1, yScale), onMouseMove: this_1._handleHover.bind(this_1, x2, y2, verticaLineHeight, lastCirlceXCallout_1, lastCircleId_1, lastCirlceXCalloutAccessibilityData_1, yScale), onMouseOut: this_1._handleMouseOut, onFocus: function () {
|
|
954
963
|
return _this_1._handleFocus(lineId, x2, lastCirlceXCallout_1, lastCircleId_1, lastCirlceXCalloutAccessibilityData_1);
|
|
955
964
|
}, onBlur: this_1._handleMouseOut }, this_1._getClickHandler(this_1._points[i].data[j].onDataPointClick), { opacity: isLegendSelected && !lastPointHidden ? 1 : 0.01, fill: this_1._getPointFill(lineColor, lastCircleId_1, j, true), stroke: lineColor, strokeWidth: strokeWidth, role: "img", "aria-label": this_1._getAriaLabel(i, j) }))),
|
|
956
965
|
React.createElement("circle", { id: hiddenHoverCircleId, key: hiddenHoverCircleId, r: 8, cx: this_1._xAxisScale(x2), cy: yScale(y2), opacity: 0, width: 0, onMouseOver: this_1._handleHover.bind(this_1, x2, y2, verticaLineHeight, lastCirlceXCallout_1, lastCircleId_1, lastCirlceXCalloutAccessibilityData_1, yScale), onMouseMove: this_1._handleHover.bind(this_1, x2, y2, verticaLineHeight, lastCirlceXCallout_1, lastCircleId_1, lastCirlceXCalloutAccessibilityData_1, yScale), onMouseOut: this_1._handleMouseOut, strokeWidth: 0, focusable: false, onBlur: this_1._handleMouseOut })));
|
|
957
966
|
}
|
|
958
|
-
if (!this_1._hasMarkersMode || ((
|
|
967
|
+
if (!this_1._hasMarkersMode || ((_y = (_x = this_1._points[i].lineOptions) === null || _x === void 0 ? void 0 : _x.mode) === null || _y === void 0 ? void 0 : _y.includes('lines'))) {
|
|
959
968
|
if (isLegendSelected) {
|
|
960
969
|
// don't draw line if it is in a gap
|
|
961
970
|
if (!isInGap) {
|
|
962
|
-
var lineBorderWidth = ((
|
|
971
|
+
var lineBorderWidth = ((_z = this_1._points[i].lineOptions) === null || _z === void 0 ? void 0 : _z.lineBorderWidth)
|
|
963
972
|
? Number.parseFloat(this_1._points[i].lineOptions.lineBorderWidth.toString())
|
|
964
973
|
: 0;
|
|
965
974
|
if (lineBorderWidth > 0) {
|
|
966
|
-
bordersForLine.push(React.createElement("line", { id: borderId, key: borderId, x1: this_1._xAxisScale(x1), y1: yScale(y1), x2: this_1._xAxisScale(x2), y2: yScale(y2), strokeLinecap: (
|
|
975
|
+
bordersForLine.push(React.createElement("line", { id: borderId, key: borderId, x1: this_1._xAxisScale(x1), y1: yScale(y1), x2: this_1._xAxisScale(x2), y2: yScale(y2), strokeLinecap: (_1 = (_0 = this_1._points[i].lineOptions) === null || _0 === void 0 ? void 0 : _0.strokeLinecap) !== null && _1 !== void 0 ? _1 : 'round', strokeWidth: Number.parseFloat(strokeWidth.toString()) + lineBorderWidth, stroke: ((_2 = this_1._points[i].lineOptions) === null || _2 === void 0 ? void 0 : _2.lineBorderColor) || theme.semanticColors.bodyBackground, opacity: 1 }));
|
|
967
976
|
}
|
|
968
977
|
linesForLine.push(React.createElement("line", tslib_1.__assign({ id: lineId, key: lineId, x1: this_1._xAxisScale(x1), y1: yScale(y1), x2: this_1._xAxisScale(x2), y2: yScale(y2), strokeWidth: strokeWidth, ref: function (e) {
|
|
969
978
|
_this_1._refCallback(e, lineId);
|
|
970
|
-
}, onMouseOver: this_1._handleHover.bind(this_1, x1, y1, verticaLineHeight, xAxisCalloutData, circleId, xAxisCalloutAccessibilityData, yScale), onMouseMove: this_1._handleHover.bind(this_1, x1, y1, verticaLineHeight, xAxisCalloutData, circleId, xAxisCalloutAccessibilityData, yScale), onMouseOut: this_1._handleMouseOut, stroke: lineColor, strokeLinecap: (
|
|
979
|
+
}, onMouseOver: this_1._handleHover.bind(this_1, x1, y1, verticaLineHeight, xAxisCalloutData, circleId, xAxisCalloutAccessibilityData, yScale), onMouseMove: this_1._handleHover.bind(this_1, x1, y1, verticaLineHeight, xAxisCalloutData, circleId, xAxisCalloutAccessibilityData, yScale), onMouseOut: this_1._handleMouseOut, stroke: lineColor, strokeLinecap: (_4 = (_3 = this_1._points[i].lineOptions) === null || _3 === void 0 ? void 0 : _3.strokeLinecap) !== null && _4 !== void 0 ? _4 : 'round', strokeDasharray: (_5 = this_1._points[i].lineOptions) === null || _5 === void 0 ? void 0 : _5.strokeDasharray, strokeDashoffset: (_6 = this_1._points[i].lineOptions) === null || _6 === void 0 ? void 0 : _6.strokeDashoffset, opacity: 1 }, this_1._getClickHandler(this_1._points[i].onLineClick))));
|
|
971
980
|
}
|
|
972
981
|
}
|
|
973
982
|
else {
|
|
974
983
|
if (!isInGap) {
|
|
975
|
-
linesForLine.push(React.createElement("line", { id: lineId, key: lineId, x1: this_1._xAxisScale(x1), y1: yScale(y1), x2: this_1._xAxisScale(x2), y2: yScale(y2), strokeWidth: strokeWidth, stroke: lineColor, strokeLinecap: (
|
|
984
|
+
linesForLine.push(React.createElement("line", { id: lineId, key: lineId, x1: this_1._xAxisScale(x1), y1: yScale(y1), x2: this_1._xAxisScale(x2), y2: yScale(y2), strokeWidth: strokeWidth, stroke: lineColor, strokeLinecap: (_8 = (_7 = this_1._points[i].lineOptions) === null || _7 === void 0 ? void 0 : _7.strokeLinecap) !== null && _8 !== void 0 ? _8 : 'round', strokeDasharray: (_9 = this_1._points[i].lineOptions) === null || _9 === void 0 ? void 0 : _9.strokeDasharray, strokeDashoffset: (_10 = this_1._points[i].lineOptions) === null || _10 === void 0 ? void 0 : _10.strokeDashoffset, opacity: 0.1 }));
|
|
976
985
|
}
|
|
977
986
|
}
|
|
978
987
|
}
|
|
@@ -990,9 +999,6 @@ var LineChartBase = /** @class */ (function (_super) {
|
|
|
990
999
|
for (var i = this._points.length - 1; i >= 0; i--) {
|
|
991
1000
|
_loop_1(i);
|
|
992
1001
|
}
|
|
993
|
-
var classNames = getClassNames(this.props.styles, {
|
|
994
|
-
theme: this.props.theme,
|
|
995
|
-
});
|
|
996
1002
|
// Removing un wanted tooltip div from DOM, when prop not provided.
|
|
997
1003
|
if (!this.props.showXAxisLablesTooltip) {
|
|
998
1004
|
try {
|