@wix/design-system
Version:
@wix/design-system
545 lines (544 loc) • 19.1 kB
JavaScript
"use strict";
var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
var _typeof = require("@babel/runtime/helpers/typeof");
exports.__esModule = true;
exports["default"] = void 0;
var _toConsumableArray2 = _interopRequireDefault(require("@babel/runtime/helpers/toConsumableArray"));
var _slicedToArray2 = _interopRequireDefault(require("@babel/runtime/helpers/slicedToArray"));
var _defineProperty2 = _interopRequireDefault(require("@babel/runtime/helpers/defineProperty"));
var _extends2 = _interopRequireDefault(require("@babel/runtime/helpers/extends"));
var _react = _interopRequireWildcard(require("react"));
var _d3Scale = require("d3-scale");
var _d3Selection = require("d3-selection");
var _d3Shape = require("d3-shape");
var _constants = require("./constants");
var _RadarChartSt = require("./RadarChart.st.css.js");
var _colorsSt = require("../Foundation/stylable/colors.st.css.js");
var _Tooltip = _interopRequireDefault(require("../Tooltip"));
var _useHover = require("../common/useHover");
var _jsxFileName = "/home/builduser/work/57e038ea7326c1ec/packages/wix-design-system/dist/cjs/RadarChart/RadarChart.jsx",
_this = void 0;
function _interopRequireWildcard(e, t) { if ("function" == typeof WeakMap) var r = new WeakMap(), n = new WeakMap(); return (_interopRequireWildcard = function _interopRequireWildcard(e, t) { if (!t && e && e.__esModule) return e; var o, i, f = { __proto__: null, "default": e }; if (null === e || "object" != _typeof(e) && "function" != typeof e) return f; if (o = t ? n : r) { if (o.has(e)) return o.get(e); o.set(e, f); } for (var _t in e) "default" !== _t && {}.hasOwnProperty.call(e, _t) && ((i = (o = Object.defineProperty) && Object.getOwnPropertyDescriptor(e, _t)) && (i.get || i.set) ? o(f, _t, i) : f[_t] = e[_t]); return f; })(e, t); }
function ownKeys(e, r) { var t = Object.keys(e); if (Object.getOwnPropertySymbols) { var o = Object.getOwnPropertySymbols(e); r && (o = o.filter(function (r) { return Object.getOwnPropertyDescriptor(e, r).enumerable; })), t.push.apply(t, o); } return t; }
function _objectSpread(e) { for (var r = 1; r < arguments.length; r++) { var t = null != arguments[r] ? arguments[r] : {}; r % 2 ? ownKeys(Object(t), !0).forEach(function (r) { (0, _defineProperty2["default"])(e, r, t[r]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(e, Object.getOwnPropertyDescriptors(t)) : ownKeys(Object(t)).forEach(function (r) { Object.defineProperty(e, r, Object.getOwnPropertyDescriptor(t, r)); }); } return e; }
var BLUE_COLOR = '#3899ec';
var DISABLED_COLOR = '#879cae';
var DOT_RADIUS = 2;
var LINE_DY = 0.35;
var LINE_HEIGHT = 1.4;
var PADDING = 12;
var AXIS_LABEL_DY = 12;
var getXY = function getXY(value, index, angle, rScale) {
var shift = arguments.length > 4 && arguments[4] !== undefined ? arguments[4] : 0;
return {
x: (rScale(value) + shift) * Math.cos(angle * index - Math.PI / 2),
y: (rScale(value) + shift) * Math.sin(angle * index - Math.PI / 2)
};
};
var CirclesSVG = /*#__PURE__*/(0, _react.memo)(function (_ref) {
var scale = _ref.scale,
rScale = _ref.rScale;
return scale.map(function (_ref2, index) {
var value = _ref2.value;
return /*#__PURE__*/_react["default"].createElement("circle", {
key: index,
"data-hook": _constants.dataHooks.radarChartScaleLine,
className: (0, _RadarChartSt.st)(_RadarChartSt.classes.circles, {
isTransparent: index !== scale.length - 1
}),
r: rScale(value),
cx: 0,
cy: 0,
__self: _this,
__source: {
fileName: _jsxFileName,
lineNumber: 28,
columnNumber: 7
}
});
}).reverse();
});
var WebChartSVG = /*#__PURE__*/(0, _react.memo)(function (_ref3) {
var disabled = _ref3.disabled,
dots = _ref3.dots;
if (disabled || dots.length === 0) {
return null;
}
return /*#__PURE__*/_react["default"].createElement("defs", {
__self: _this,
__source: {
fileName: _jsxFileName,
lineNumber: 48,
columnNumber: 5
}
}, /*#__PURE__*/_react["default"].createElement("linearGradient", {
id: "gradient",
x1: "0",
x2: "1",
y1: "0",
y2: "0",
__self: _this,
__source: {
fileName: _jsxFileName,
lineNumber: 49,
columnNumber: 7
}
}, /*#__PURE__*/_react["default"].createElement("stop", {
offset: "0",
stopColor: dots[dots.length - 1].color,
__self: _this,
__source: {
fileName: _jsxFileName,
lineNumber: 50,
columnNumber: 9
}
}), /*#__PURE__*/_react["default"].createElement("stop", {
offset: "1",
stopColor: dots[0].color,
__self: _this,
__source: {
fileName: _jsxFileName,
lineNumber: 51,
columnNumber: 9
}
})));
});
var OuterLabels = /*#__PURE__*/(0, _react.memo)(function (_ref4) {
var data = _ref4.data,
maxScaleValue = _ref4.maxScaleValue,
angle = _ref4.angle,
rScale = _ref4.rScale,
labelDistance = _ref4.labelDistance,
disabled = _ref4.disabled,
internalHoverIndex = _ref4.internalHoverIndex,
width = _ref4.width,
setInternalHoverIndex = _ref4.setInternalHoverIndex;
var outerCircleDots = data.map(function (_ref5, index) {
var label = _ref5.label;
return {
label: label,
labelPoint: getXY(maxScaleValue, index, angle, rScale, labelDistance),
linePoint: getXY(maxScaleValue, index, angle, rScale)
};
});
return outerCircleDots.map(function (_ref6, index) {
var label = _ref6.label,
labelPoint = _ref6.labelPoint,
linePoint = _ref6.linePoint;
var hoverProps = (0, _useHover.createHoverHandlers)({
isDisabled: disabled,
onHoverStart: function onHoverStart() {
return setInternalHoverIndex(index);
},
onHoverEnd: function onHoverEnd() {
return setInternalHoverIndex(null);
}
});
return /*#__PURE__*/_react["default"].createElement("g", {
key: index,
"data-hook": _constants.dataHooks.radarChartDataItem,
__self: _this,
__source: {
fileName: _jsxFileName,
lineNumber: 82,
columnNumber: 9
}
}, /*#__PURE__*/_react["default"].createElement("line", {
className: _RadarChartSt.classes.axis,
x1: 0,
y1: 0,
x2: linePoint.x,
y2: linePoint.y,
__self: _this,
__source: {
fileName: _jsxFileName,
lineNumber: 83,
columnNumber: 11
}
}), /*#__PURE__*/_react["default"].createElement("text", (0, _extends2["default"])({
className: (0, _RadarChartSt.st)(_RadarChartSt.classes.axisLabel, {
hovered: index === internalHoverIndex,
size: width < 360 ? 'small' : 'large',
disabled: disabled
}),
"data-hook": "axisName".concat(index),
x: labelPoint.x,
y: labelPoint.y,
dy: "".concat(LINE_DY, "em"),
textAnchor: "middle"
}, hoverProps, {
__self: _this,
__source: {
fileName: _jsxFileName,
lineNumber: 90,
columnNumber: 11
}
}), label));
});
});
var ScaleValues = /*#__PURE__*/(0, _react.memo)(function (_ref7) {
var scale = _ref7.scale,
rScale = _ref7.rScale;
var scaleValues = scale.map(function (_ref8) {
var value = _ref8.value,
label = _ref8.label;
return _objectSpread({
value: value,
label: label
}, getXY(value, 0, 0, rScale));
});
return scaleValues.map(function (_ref9, index) {
var label = _ref9.label,
y = _ref9.y;
return /*#__PURE__*/_react["default"].createElement("text", {
key: index,
className: _RadarChartSt.classes.scaleLabel,
x: 0,
y: y,
dy: AXIS_LABEL_DY,
textAnchor: "middle",
__self: _this,
__source: {
fileName: _jsxFileName,
lineNumber: 118,
columnNumber: 5
}
}, label);
});
});
var DataPoints = /*#__PURE__*/(0, _react.memo)(function (_ref0) {
var dots = _ref0.dots,
disabled = _ref0.disabled,
internalHoverIndex = _ref0.internalHoverIndex,
setInternalHoverIndex = _ref0.setInternalHoverIndex;
return dots.map(function (dot, index) {
var hoverProps = (0, _useHover.createHoverHandlers)({
isDisabled: disabled,
onHoverStart: function onHoverStart() {
return setInternalHoverIndex(index);
},
onHoverEnd: function onHoverEnd() {
return setInternalHoverIndex(null);
}
});
return /*#__PURE__*/_react["default"].createElement("g", {
key: index,
__self: _this,
__source: {
fileName: _jsxFileName,
lineNumber: 140,
columnNumber: 9
}
}, /*#__PURE__*/_react["default"].createElement("circle", {
r: !disabled && index === internalHoverIndex ? DOT_RADIUS * 2 : DOT_RADIUS,
cx: dot.x,
cy: dot.y,
fill: disabled ? DISABLED_COLOR : dots[index].color,
__self: _this,
__source: {
fileName: _jsxFileName,
lineNumber: 141,
columnNumber: 11
}
}), /*#__PURE__*/_react["default"].createElement("circle", (0, _extends2["default"])({
className: (0, _RadarChartSt.st)(_RadarChartSt.classes.dataPoint, {
disabled: disabled
}),
r: DOT_RADIUS * 4,
cx: dot.x,
cy: dot.y,
fillOpacity: 0
}, hoverProps, !disabled && {
focusable: true,
tabIndex: 0,
onFocus: function onFocus() {
return !disabled && setInternalHoverIndex(index);
},
onBlur: function onBlur() {
return !disabled && setInternalHoverIndex(null);
}
}, {
__self: _this,
__source: {
fileName: _jsxFileName,
lineNumber: 151,
columnNumber: 11
}
})));
});
});
var DataPointsTooltips = /*#__PURE__*/(0, _react.memo)(function (_ref1) {
var dots = _ref1.dots,
containerWidth = _ref1.containerWidth,
internalHoverIndex = _ref1.internalHoverIndex,
disabled = _ref1.disabled;
return dots.map(function (_ref10, index) {
var x = _ref10.x,
y = _ref10.y,
tooltipContent = _ref10.tooltipContent,
value = _ref10.value;
return /*#__PURE__*/_react["default"].createElement("div", {
key: index,
style: {
position: 'absolute',
left: x + containerWidth / 2,
top: y + containerWidth / 2 - 7
},
__self: _this,
__source: {
fileName: _jsxFileName,
lineNumber: 173,
columnNumber: 7
}
}, /*#__PURE__*/_react["default"].createElement(_Tooltip["default"], {
className: _RadarChartSt.classes.tooltip,
shown: index === internalHoverIndex,
content: tooltipContent !== null && tooltipContent !== void 0 ? tooltipContent : value,
disabled: disabled,
__self: _this,
__source: {
fileName: _jsxFileName,
lineNumber: 181,
columnNumber: 9
}
}, /*#__PURE__*/_react["default"].createElement("div", {
__self: _this,
__source: {
fileName: _jsxFileName,
lineNumber: 187,
columnNumber: 11
}
})));
});
});
var WebChartLine = /*#__PURE__*/(0, _react.memo)(function (_ref11) {
var disabled = _ref11.disabled,
data = _ref11.data,
angle = _ref11.angle,
rScale = _ref11.rScale;
var ref = (0, _react.useRef)(null);
(0, _react.useEffect)(function () {
if (ref.current && data.length) {
(0, _d3Selection.select)(ref.current).selectAll("[data-hook='curvePart']").remove();
var drawCurve = (0, _d3Shape.lineRadial)().curve(_d3Shape.curveCardinalClosed).radius(function (d) {
return rScale(d.value);
}).angle(function (_d, i) {
return i * angle;
});
var blob = (0, _d3Selection.select)(ref.current).selectAll("[data-hook='curvePart']").data([data]).enter().append('g').attr('data-hook', 'curvePart');
blob.append('path').attr('d', function (d) {
return drawCurve(d);
}).style('stroke', BLUE_COLOR).style('stroke-width', '1px').style('stroke', disabled ? DISABLED_COLOR : 'url(#gradient)').style('fill', disabled ? DISABLED_COLOR : 'url(#gradient)').style('stroke-dasharray', disabled ? 6 : null).style('fill-opacity', 0.3);
}
}, [ref, data, disabled, rScale, angle]);
return /*#__PURE__*/_react["default"].createElement("g", {
ref: ref,
__self: _this,
__source: {
fileName: _jsxFileName,
lineNumber: 223,
columnNumber: 10
}
});
});
var RadarChart = function RadarChart(_ref12) {
var dataHook = _ref12.dataHook,
_ref12$data = _ref12.data,
data = _ref12$data === void 0 ? [] : _ref12$data,
_ref12$scale = _ref12.scale,
scale = _ref12$scale === void 0 ? [{
value: 50,
label: '50%'
}, {
value: 100,
label: '100%'
}] : _ref12$scale,
disabled = _ref12.disabled,
_ref12$width = _ref12.width,
width = _ref12$width === void 0 ? 150 : _ref12$width,
_ref12$labelDistance = _ref12.labelDistance,
labelDistance = _ref12$labelDistance === void 0 ? 50 : _ref12$labelDistance,
hoverIndex = _ref12.hoverIndex,
_ref12$labelWidth = _ref12.labelWidth,
labelWidth = _ref12$labelWidth === void 0 ? 100 : _ref12$labelWidth,
_ref12$onDataPointHov = _ref12.onDataPointHover,
onDataPointHover = _ref12$onDataPointHov === void 0 ? function () {} : _ref12$onDataPointHov;
var _useState = (0, _react.useState)(hoverIndex),
_useState2 = (0, _slicedToArray2["default"])(_useState, 2),
internalHoverIndex = _useState2[0],
setInternalHoverIndex = _useState2[1];
var containerWidth = (0, _react.useMemo)(function () {
return width + labelDistance * 4 + PADDING * 2;
}, [width, labelDistance]);
var maxScaleValue = (0, _react.useMemo)(function () {
return Math.max.apply(Math, (0, _toConsumableArray2["default"])(scale.map(function (_ref13) {
var value = _ref13.value;
return value;
})));
}, [scale]);
var rScale = (0, _react.useMemo)(function () {
return (0, _d3Scale.scaleLinear)().range([0, width / 2]).domain([0, maxScaleValue]);
}, [width, maxScaleValue]);
var angle = (0, _react.useMemo)(function () {
return Math.PI * 2 / data.length;
}, [data]);
var dots = (0, _react.useMemo)(function () {
return data.map(function (_ref14, index) {
var value = _ref14.value,
label = _ref14.label,
color = _ref14.color,
tooltipContent = _ref14.tooltipContent;
return _objectSpread({
value: value,
label: label,
color: _colorsSt.stVars[color] || color || _colorsSt.stVars['A1'],
tooltipContent: tooltipContent
}, getXY(value, index, angle, rScale));
});
}, [data, angle, rScale]);
(0, _react.useEffect)(function () {
return setInternalHoverIndex(hoverIndex);
}, [hoverIndex]);
(0, _react.useEffect)(function () {
if (internalHoverIndex === null) {
return;
}
onDataPointHover(data[internalHoverIndex], internalHoverIndex);
}, [internalHoverIndex, onDataPointHover, data]);
(0, _react.useEffect)(function () {
data.forEach(function (_ref15, index) {
var label = _ref15.label;
var text = (0, _d3Selection.select)(containerRef.current).select("[data-hook='axisName".concat(index, "']"));
var words = label.split(/\s+/);
var word;
var line = [];
var lineNumber = 0;
var tspan = text.text(null).append('tspan').attr('x', text.attr('x')).attr('y', text.attr('y')).attr('dy', "".concat(LINE_DY, "em"));
while (words.length) {
word = words.shift();
line.push(word);
tspan.text(line.join(' '));
if (tspan.node && tspan.node().getComputedTextLength && tspan.node().getComputedTextLength() > labelWidth) {
line.pop();
tspan.text(line.join(' '));
line = [word];
tspan = text.append('tspan').attr('x', text.attr('x')).attr('y', text.attr('y')).attr('dy', "".concat(++lineNumber * LINE_HEIGHT + LINE_DY, "em")).text(word);
}
}
});
});
var containerRef = (0, _react.useRef)(null);
return /*#__PURE__*/_react["default"].createElement("div", {
"data-hook": dataHook,
className: _RadarChartSt.classes.root,
style: {
width: containerWidth,
height: containerWidth
},
"data-disabled": disabled,
"data-hover-index": internalHoverIndex,
__self: _this,
__source: {
fileName: _jsxFileName,
lineNumber: 324,
columnNumber: 5
}
}, /*#__PURE__*/_react["default"].createElement("svg", {
width: containerWidth,
height: containerWidth,
ref: containerRef,
__self: _this,
__source: {
fileName: _jsxFileName,
lineNumber: 331,
columnNumber: 7
}
}, /*#__PURE__*/_react["default"].createElement("g", {
transform: "translate(".concat(containerWidth / 2, ", ").concat(containerWidth / 2, ")"),
__self: _this,
__source: {
fileName: _jsxFileName,
lineNumber: 332,
columnNumber: 9
}
}, /*#__PURE__*/_react["default"].createElement(WebChartSVG, {
dots: dots,
disabled: disabled,
__self: _this,
__source: {
fileName: _jsxFileName,
lineNumber: 335,
columnNumber: 11
}
}), /*#__PURE__*/_react["default"].createElement(CirclesSVG, {
scale: scale,
rScale: rScale,
__self: _this,
__source: {
fileName: _jsxFileName,
lineNumber: 336,
columnNumber: 11
}
}), /*#__PURE__*/_react["default"].createElement(OuterLabels, {
data: data,
maxScaleValue: maxScaleValue,
angle: angle,
rScale: rScale,
labelDistance: labelDistance,
disabled: disabled,
internalHoverIndex: internalHoverIndex,
width: width,
setInternalHoverIndex: setInternalHoverIndex,
__self: _this,
__source: {
fileName: _jsxFileName,
lineNumber: 337,
columnNumber: 11
}
}), /*#__PURE__*/_react["default"].createElement(ScaleValues, {
scale: scale,
rScale: rScale,
__self: _this,
__source: {
fileName: _jsxFileName,
lineNumber: 348,
columnNumber: 11
}
}), /*#__PURE__*/_react["default"].createElement(WebChartLine, {
disabled: disabled,
data: data,
angle: angle,
rScale: rScale,
__self: _this,
__source: {
fileName: _jsxFileName,
lineNumber: 349,
columnNumber: 11
}
}), /*#__PURE__*/_react["default"].createElement(DataPoints, {
dots: dots,
disabled: disabled,
internalHoverIndex: internalHoverIndex,
setInternalHoverIndex: setInternalHoverIndex,
__self: _this,
__source: {
fileName: _jsxFileName,
lineNumber: 355,
columnNumber: 11
}
}))), /*#__PURE__*/_react["default"].createElement(DataPointsTooltips, {
dots: dots,
disabled: disabled,
containerWidth: containerWidth,
internalHoverIndex: internalHoverIndex,
setInternalHoverIndex: setInternalHoverIndex,
__self: _this,
__source: {
fileName: _jsxFileName,
lineNumber: 363,
columnNumber: 7
}
}));
};
RadarChart.displayName = 'RadarChart';
var _default = exports["default"] = RadarChart;