@fluentui/react-charting 5.24.1 → 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 +28 -1
- package/CHANGELOG.md +13 -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 +104 -38
- 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 +106 -39
- 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 +106 -39
- 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
|
@@ -833,7 +833,7 @@ define(["require", "exports", "tslib", "react", "d3-selection", "d3-array", "../
|
|
|
833
833
|
};
|
|
834
834
|
LineChartBase.prototype._createLines = function (xElement, containerHeight) {
|
|
835
835
|
var _this_1 = this;
|
|
836
|
-
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;
|
|
836
|
+
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;
|
|
837
837
|
var lines = [];
|
|
838
838
|
if (this.state.isSelectedLegend) {
|
|
839
839
|
this._points = this.state.selectedLegendPoints;
|
|
@@ -846,6 +846,9 @@ define(["require", "exports", "tslib", "react", "d3-selection", "d3-array", "../
|
|
|
846
846
|
return item.markerSize;
|
|
847
847
|
});
|
|
848
848
|
});
|
|
849
|
+
var classNames = getClassNames(this.props.styles, {
|
|
850
|
+
theme: this.props.theme,
|
|
851
|
+
});
|
|
849
852
|
var _loop_1 = function (i) {
|
|
850
853
|
var linesForLine = [];
|
|
851
854
|
var bordersForLine = [];
|
|
@@ -859,7 +862,7 @@ define(["require", "exports", "tslib", "react", "d3-selection", "d3-array", "../
|
|
|
859
862
|
var yPadding = this_1._points[i].useSecondaryYScale && this_1._yScaleSecondary ? this_1._yPaddingSecondary : this_1._yPaddingPrimary;
|
|
860
863
|
var extraMaxPixels = this_1._hasMarkersMode ? this_1._getRangeForScatterMarkerSize(yScale, yPadding) : 0;
|
|
861
864
|
if (this_1._points[i].data.length === 1) {
|
|
862
|
-
var
|
|
865
|
+
var _11 = this_1._points[i].data[0], x1_1 = _11.x, y1 = _11.y, xAxisCalloutData_1 = _11.xAxisCalloutData, xAxisCalloutAccessibilityData_1 = _11.xAxisCalloutAccessibilityData;
|
|
863
866
|
var circleId_1 = "".concat(this_1._circleId, "_").concat(i);
|
|
864
867
|
var isLegendSelected = this_1._legendHighlighted(legendVal) || this_1._noLegendHighlighted() || this_1.state.isSelectedLegend;
|
|
865
868
|
var currentMarkerSize = this_1._points[i].data[0].markerSize;
|
|
@@ -918,48 +921,54 @@ define(["require", "exports", "tslib", "react", "d3-selection", "d3-array", "../
|
|
|
918
921
|
var lineId = "".concat(this_1._lineId, "_").concat(i, "_").concat(j);
|
|
919
922
|
var borderId = "".concat(this_1._borderId, "_").concat(i, "_").concat(j);
|
|
920
923
|
var circleId = "".concat(this_1._circleId, "_").concat(i, "_").concat(j);
|
|
921
|
-
var
|
|
922
|
-
var
|
|
924
|
+
var _12 = this_1._points[i].data[j - 1], x1 = _12.x, y1 = _12.y, xAxisCalloutData = _12.xAxisCalloutData, xAxisCalloutAccessibilityData = _12.xAxisCalloutAccessibilityData;
|
|
925
|
+
var _13 = this_1._points[i].data[j], x2 = _13.x, y2 = _13.y;
|
|
923
926
|
var path = this_1._getPath(this_1._xAxisScale(x1), yScale(y1), circleId, j, false, this_1._points[i].index);
|
|
924
927
|
var strokeWidth = ((_q = this_1._points[i].lineOptions) === null || _q === void 0 ? void 0 : _q.strokeWidth) || this_1.props.strokeWidth || DEFAULT_LINE_STROKE_SIZE;
|
|
925
928
|
var isLegendSelected = this_1._legendHighlighted(legendVal) || this_1._noLegendHighlighted() || this_1.state.isSelectedLegend;
|
|
926
929
|
var currentPointHidden = this_1._points[i].hideNonActiveDots && activePoint !== circleId;
|
|
927
930
|
var currentMarkerSize = this_1._points[i].data[j - 1].markerSize;
|
|
928
|
-
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(
|
|
931
|
+
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,
|
|
932
|
+
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 () {
|
|
933
|
+
return _this_1._handleFocus(lineId, x1, xAxisCalloutData, circleId, xAxisCalloutAccessibilityData);
|
|
934
|
+
}, 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) })),
|
|
935
|
+
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) }))));
|
|
929
936
|
if (j + 1 === this_1._points[i].data.length) {
|
|
930
937
|
// If this is last point of the line segment.
|
|
931
938
|
var lastCircleId_1 = "".concat(circleId).concat(j, "L");
|
|
932
939
|
var hiddenHoverCircleId = "".concat(circleId).concat(j, "D");
|
|
933
940
|
var lastPointHidden = this_1._points[i].hideNonActiveDots && activePoint !== lastCircleId_1;
|
|
934
941
|
path = this_1._getPath(this_1._xAxisScale(x2), yScale(y2), lastCircleId_1, j, true, this_1._points[i].index);
|
|
935
|
-
var
|
|
942
|
+
var _14 = this_1._points[i].data[j], lastCirlceXCallout_1 = _14.xAxisCalloutData, lastCirlceXCalloutAccessibilityData_1 = _14.xAxisCalloutAccessibilityData;
|
|
936
943
|
currentMarkerSize = this_1._points[i].data[j].markerSize;
|
|
937
944
|
pointsForLine.push(React.createElement(React.Fragment, { key: "".concat(lastCircleId_1, "_container") },
|
|
938
|
-
((
|
|
939
|
-
|
|
940
|
-
|
|
945
|
+
((_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,
|
|
946
|
+
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 () {
|
|
947
|
+
return _this_1._handleFocus(lineId, x2, lastCirlceXCallout_1, lastCircleId_1, lastCirlceXCalloutAccessibilityData_1);
|
|
948
|
+
}, 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) })),
|
|
949
|
+
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 () {
|
|
941
950
|
return _this_1._handleFocus(lineId, x2, lastCirlceXCallout_1, lastCircleId_1, lastCirlceXCalloutAccessibilityData_1);
|
|
942
951
|
}, 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) }))),
|
|
943
952
|
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 })));
|
|
944
953
|
}
|
|
945
|
-
if (!this_1._hasMarkersMode || ((
|
|
954
|
+
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'))) {
|
|
946
955
|
if (isLegendSelected) {
|
|
947
956
|
// don't draw line if it is in a gap
|
|
948
957
|
if (!isInGap) {
|
|
949
|
-
var lineBorderWidth = ((
|
|
958
|
+
var lineBorderWidth = ((_z = this_1._points[i].lineOptions) === null || _z === void 0 ? void 0 : _z.lineBorderWidth)
|
|
950
959
|
? Number.parseFloat(this_1._points[i].lineOptions.lineBorderWidth.toString())
|
|
951
960
|
: 0;
|
|
952
961
|
if (lineBorderWidth > 0) {
|
|
953
|
-
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: (
|
|
962
|
+
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 }));
|
|
954
963
|
}
|
|
955
964
|
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) {
|
|
956
965
|
_this_1._refCallback(e, lineId);
|
|
957
|
-
}, 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: (
|
|
966
|
+
}, 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))));
|
|
958
967
|
}
|
|
959
968
|
}
|
|
960
969
|
else {
|
|
961
970
|
if (!isInGap) {
|
|
962
|
-
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: (
|
|
971
|
+
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 }));
|
|
963
972
|
}
|
|
964
973
|
}
|
|
965
974
|
}
|
|
@@ -977,9 +986,6 @@ define(["require", "exports", "tslib", "react", "d3-selection", "d3-array", "../
|
|
|
977
986
|
for (var i = this._points.length - 1; i >= 0; i--) {
|
|
978
987
|
_loop_1(i);
|
|
979
988
|
}
|
|
980
|
-
var classNames = getClassNames(this.props.styles, {
|
|
981
|
-
theme: this.props.theme,
|
|
982
|
-
});
|
|
983
989
|
// Removing un wanted tooltip div from DOM, when prop not provided.
|
|
984
990
|
if (!this.props.showXAxisLablesTooltip) {
|
|
985
991
|
try {
|