@onesy/ui-react
Version:
UI for React
647 lines (619 loc) • 27.2 kB
JavaScript
"use strict";
var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
Object.defineProperty(exports, "__esModule", {
value: true
});
exports.default = void 0;
var _objectWithoutProperties2 = _interopRequireDefault(require("@babel/runtime/helpers/objectWithoutProperties"));
var _defineProperty2 = _interopRequireDefault(require("@babel/runtime/helpers/defineProperty"));
var _react = _interopRequireDefault(require("react"));
var _utils = require("@onesy/utils");
var _styleReact = require("@onesy/style-react");
var _Surface = _interopRequireDefault(require("../Surface"));
var _utils2 = require("../utils");
var _jsxRuntime = require("react/jsx-runtime");
const _excluded = ["ref", "tonal", "color", "size", "parts", "lineCap", "padding", "gap", "border", "background", "boundary", "boundaryWidth", "arcProgress", "arcsVisible", "marksVisible", "labelsVisible", "marks", "markSize", "markWidth", "labels", "renderLabel", "childrenPosition", "additional", "textProps", "pathProps", "SvgProps", "MarkProps", "LabelProps", "BackgroundProps", "BorderProps", "ArcProps", "ArcMainProps", "ArcsProgressProps", "ArcProgressProps", "Component", "className", "style", "children"],
_excluded2 = ["size", "padding", "position"],
_excluded3 = ["value", "padding", "position"],
_excluded4 = ["x", "y", "value"];
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; }
const useStyle = (0, _styleReact.style)(theme => ({
root: {
position: 'relative',
width: '100vw'
},
size_small: {
maxWidth: '180px'
},
size_regular: {
maxWidth: '240px'
},
size_large: {
maxWidth: '300px'
},
boundary_1: {
aspectRatio: '1'
},
boundary_075: {
aspectRatio: '1'
},
boundary_05: {
aspectRatio: '1'
},
boundary_025: {
aspectRatio: '1'
},
label: _objectSpread(_objectSpread({}, theme.typography.values.b2), {}, {
textAnchor: 'middle',
alignmentBaseline: 'central',
dominantBaseline: 'central'
}),
svg: {
position: 'relative',
width: '100%',
height: 'auto'
}
}), {
name: 'onesy-RoundMeter'
});
const RoundMeter = props_ => {
var _theme$ui, _theme$ui2, _theme$elements;
const theme = (0, _styleReact.useOnesyTheme)();
const props = _objectSpread(_objectSpread(_objectSpread({}, theme === null || theme === void 0 || (_theme$ui = theme.ui) === null || _theme$ui === void 0 || (_theme$ui = _theme$ui.elements) === null || _theme$ui === void 0 || (_theme$ui = _theme$ui.all) === null || _theme$ui === void 0 || (_theme$ui = _theme$ui.props) === null || _theme$ui === void 0 ? void 0 : _theme$ui.default), theme === null || theme === void 0 || (_theme$ui2 = theme.ui) === null || _theme$ui2 === void 0 || (_theme$ui2 = _theme$ui2.elements) === null || _theme$ui2 === void 0 || (_theme$ui2 = _theme$ui2.onesyRoundMeter) === null || _theme$ui2 === void 0 || (_theme$ui2 = _theme$ui2.props) === null || _theme$ui2 === void 0 ? void 0 : _theme$ui2.default), props_);
const Surface = (theme === null || theme === void 0 || (_theme$elements = theme.elements) === null || _theme$elements === void 0 ? void 0 : _theme$elements.Surface) || _Surface.default;
const {
ref,
tonal = true,
color = 'primary',
size = 'regular',
parts: parts_ = 1,
lineCap,
padding: outsidePadding = 0,
gap: gap_ = 0,
border = false,
background = false,
boundary: boundary_ = 1,
boundaryWidth = 1,
arcProgress = false,
arcsVisible = true,
marksVisible = true,
labelsVisible = true,
marks: marks_ = [],
markSize = 4,
markWidth = 1,
labels: labels_ = [],
renderLabel,
childrenPosition = 'post',
additional,
textProps,
pathProps,
SvgProps,
MarkProps,
LabelProps,
BackgroundProps,
BorderProps,
ArcProps,
ArcMainProps,
ArcsProgressProps,
ArcProgressProps,
Component = 'div',
className,
style,
children
} = props,
other = (0, _objectWithoutProperties2.default)(props, _excluded);
const {
classes
} = useStyle();
const refs = {
root: _react.default.useRef(undefined)
};
const styles = {
root: {}
};
let radius;
const boundary = (0, _utils.parse)(boundary_);
const width = 240;
const height = width;
let gap = ['round', 'square'].includes(lineCap) ? gap_ + boundaryWidth / 2 : gap_;
const parts = (0, _utils.clamp)((0, _utils.parse)(parts_), 1, 180);
let min = 0;
let max = 360;
let yViewBox = 0;
// 1
if (boundary === 1) {
// 0 is middle top
// ie. 270 degreese
min = 270;
max = 270 + 360;
}
// 0.75
if (boundary === 0.75) {
// 0 is angle bottom left
// ie. 270 degreese
min = 135;
max = 135 + 270;
yViewBox = -15;
}
// 0.5
if (boundary === 0.5) {
// 0 is left
// ie. 180 degreese
min = 180;
max = 180 + 180;
yViewBox = -50;
}
// 0.25
if (boundary === 0.25) {
// 0 is angle top left
// ie. 225 degreese
min = 225;
max = 225 + 90;
yViewBox = -60;
}
if (!['small', 'regular', 'large'].includes(size)) styles.root.maxWidth = size;
const marks = _react.default.useMemo(() => {
const values = [];
if (marks_.length) {
const center = (0, _utils2.toNumber)(width / 2);
radius = (0, _utils2.toNumber)(width / 2 - boundaryWidth - outsidePadding);
let marksValues = marks_;
if (!(0, _utils.is)('array', marksValues[0])) marksValues = [marksValues];
marksValues.forEach((marksValue, index) => {
values[index] = [];
marksValue.forEach(mark => {
const {
size: size_,
padding: markPadding = 0,
position
} = mark,
other_ = (0, _objectWithoutProperties2.default)(mark, _excluded2);
const itemPadding = (0, _utils2.toNumber)(markPadding);
const angle = (0, _utils.valueFromPercentageWithinRange)(position, min, max);
const start = (0, _utils2.angleToCoordinates)(angle, center, center, radius - itemPadding);
const end = (0, _utils2.angleToCoordinates)(angle, center, center, radius - (size_ !== undefined ? size_ : markSize) - itemPadding);
values[index].push(_objectSpread({
d: ['M', start.x, start.y, 'L', end.x, end.y].join(' ')
}, other_));
});
});
}
return values;
}, [width, height, parts, marks_, markSize, boundary, boundaryWidth, lineCap, outsidePadding, gap]);
const labels = _react.default.useMemo(() => {
const values_0 = [];
if (labels_.length) {
var _sort$;
const center_0 = (0, _utils2.toNumber)(width / 2);
const marksPadding = (0, _utils2.toNumber)(marks_ !== null && marks_ !== void 0 && marks_.length ? ((_sort$ = (marks_ || []).sort((a, b) => b.size - a.size)[0]) === null || _sort$ === void 0 ? void 0 : _sort$.size) || markSize : 0);
radius = (0, _utils2.toNumber)(width / 2 - boundaryWidth - marksPadding - outsidePadding);
let labelsValues = labels_;
if (!(0, _utils.is)('array', labelsValues[0])) labelsValues = [labelsValues];
labelsValues.forEach((labelsValue, index_0) => {
values_0[index_0] = [];
labelsValue.forEach(label => {
var _label$style;
const {
value,
padding: labelPadding = 0,
position: position_0
} = label,
other__0 = (0, _objectWithoutProperties2.default)(label, _excluded3);
const itemPadding_0 = (0, _utils2.toNumber)(labelPadding);
const fontSize = (0, _utils2.toNumber)(((_label$style = label.style) === null || _label$style === void 0 ? void 0 : _label$style.fontSize) !== undefined ? label.style.fontSize : 14);
const angle_0 = (0, _utils.valueFromPercentageWithinRange)(position_0, min, max);
const start_0 = (0, _utils2.angleToCoordinates)(angle_0, center_0, center_0, radius - fontSize / 2 - itemPadding_0);
values_0[index_0].push(_objectSpread({
x: start_0.x,
y: start_0.y,
value
}, other__0));
});
});
}
return values_0;
}, [width, height, parts, marks_, markSize, boundary, boundaryWidth, lineCap, outsidePadding, gap]);
const arcs = _react.default.useMemo(() => {
const values_1 = [];
let value_0 = [];
const offset = outsidePadding;
// 1
if (boundary === 1) {
if (parts === 1) {
radius = width / 2 - boundaryWidth / 2 - offset;
values_1.push({
d: [
// Move
'M', offset + boundaryWidth / 2, width / 2 + 0.001,
// Arc
'A', radius, radius, 0, 1, 0, offset + boundaryWidth / 2, width / 2].join(' ')
});
} else {
const center_1 = width / 2;
radius = width / 2 - boundaryWidth / 2 - offset;
const total = 360;
const part = (total - parts * gap) / parts;
const angles = {
start: (0, _utils2.angleToCoordinates)(0, center_1, center_1, radius)
};
let anglePrevious = 0;
for (let i = 0; i < parts; i++) {
// Move to 0 deg
if (i === 0) value_0.push(
// Move to 0 deg
'M', angles.start.x, angles.start.y);
const angleEnd = anglePrevious + part;
angles.end = (0, _utils2.angleToCoordinates)(angleEnd, center_1, center_1, radius);
angles.move = (0, _utils2.angleToCoordinates)(angleEnd + gap, center_1, center_1, radius);
// Arc
value_0.push('A', radius, radius, 0, 0, 1, angles.end.x, angles.end.y);
// Move the gap if there's a gap
if (gap > 0 && i < parts - 1) {
value_0.push('M', angles.move.x, angles.move.y);
anglePrevious = angleEnd + gap;
} else anglePrevious = angleEnd;
values_1.push({
d: value_0.join(' ')
});
// Move for the next value
if (i < parts - 1) {
value_0 = ['M', angles.move.x, angles.move.y];
}
}
}
}
// 0.75
if (boundary === 0.75) {
value_0 = [];
const center_2 = width / 2;
radius = width / 2 - boundaryWidth / 2 - offset;
const angles_0 = {
end: (0, _utils2.angleToCoordinates)(45, center_2, center_2, radius),
start: (0, _utils2.angleToCoordinates)(135, center_2, center_2, radius)
};
if (parts === 1) {
values_1.push({
d: [
// Line middle bottom
'M', angles_0.start.x, angles_0.start.y,
// Arc
'A', radius, radius, 0, 1, 1, angles_0.end.x, angles_0.end.y].join(' ')
});
} else {
const total_0 = 270;
const part_0 = (total_0 - (parts - 1) * gap) / parts;
const angles_ = {
0: (0, _utils2.angleToCoordinates)(135, center_2, center_2, radius)
};
let anglePrevious_0 = 135;
for (let i_0 = 0; i_0 < parts; i_0++) {
// Move to 135 deg
if (i_0 === 0) value_0.push(
// Move to 0 deg
'M', angles_[0].x, angles_[0].y);
const angleEnd_0 = anglePrevious_0 + part_0;
angles_.end = (0, _utils2.angleToCoordinates)(angleEnd_0, center_2, center_2, radius);
angles_.move = (0, _utils2.angleToCoordinates)(angleEnd_0 + gap, center_2, center_2, radius);
// Arc
value_0.push('A', radius, radius, 0, 0, 1, angles_.end.x, angles_.end.y);
// Move the gap if there's a gap
if (gap > 0 && i_0 < parts - 1) {
value_0.push('M', angles_.move.x, angles_.move.y);
anglePrevious_0 = angleEnd_0 + gap;
} else anglePrevious_0 = angleEnd_0;
values_1.push({
d: value_0.join(' ')
});
// Move for the next value
if (i_0 < parts - 1) {
value_0 = ['M', angles_.move.x, angles_.move.y];
}
}
}
}
// 0.5
if (boundary === 0.5) {
value_0 = [];
const center_3 = width / 2;
radius = width / 2 - boundaryWidth / 2 - offset;
const total_1 = 180;
const part_1 = (total_1 - (parts - 1) * gap) / parts;
const angles_1 = {
start: (0, _utils2.angleToCoordinates)(180, center_3, center_3, radius)
};
let anglePrevious_1 = 180;
for (let i_1 = 0; i_1 < parts; i_1++) {
// Move to 180 deg
if (i_1 === 0) value_0.push(
// Move to 0 deg
'M', angles_1.start.x, angles_1.start.y);
const angleEnd_1 = anglePrevious_1 + part_1;
angles_1.end = (0, _utils2.angleToCoordinates)(angleEnd_1, center_3, center_3, radius);
angles_1.move = (0, _utils2.angleToCoordinates)(angleEnd_1 + gap, center_3, center_3, radius);
// Arc
value_0.push('A', radius, radius, 0, 0, 1, angles_1.end.x, angles_1.end.y);
// Move the gap if there's a gap
if (gap > 0 && i_1 < parts - 1) {
value_0.push('M', angles_1.move.x, angles_1.move.y);
anglePrevious_1 = angleEnd_1 + gap;
} else anglePrevious_1 = angleEnd_1;
values_1.push({
d: value_0.join(' ')
});
// Move for the next value
if (i_1 < parts - 1) {
value_0 = ['M', angles_1.move.x, angles_1.move.y];
}
}
}
// 0.25
if (boundary === 0.25) {
value_0 = [];
const center_4 = width / 2;
radius = width / 2 - boundaryWidth / 2 - offset;
const total_2 = 90;
const part_2 = (0, _utils.clamp)((total_2 - (parts - 1) * gap) / parts, 0.01);
gap = (0, _utils.clamp)(gap, 0, (total_2 - part_2 * parts) / (parts - 1));
const angles_2 = {
start: (0, _utils2.angleToCoordinates)(225, center_4, center_4, radius)
};
let anglePrevious_2 = 225;
for (let i_2 = 0; i_2 < parts; i_2++) {
// Move to 225 deg
if (i_2 === 0) value_0.push(
// Move to 0 deg
'M', angles_2.start.x, angles_2.start.y);
const angleEnd_2 = anglePrevious_2 + part_2;
angles_2.end = (0, _utils2.angleToCoordinates)(angleEnd_2, center_4, center_4, radius);
angles_2.move = (0, _utils2.angleToCoordinates)(angleEnd_2 + gap, center_4, center_4, radius);
// Arc
value_0.push('A', radius, radius, 0, 0, 1, angles_2.end.x, angles_2.end.y);
// Move the gap if there's a gap
if (gap > 0 && i_2 < parts - 1) {
value_0.push('M', angles_2.move.x, angles_2.move.y);
anglePrevious_2 = angleEnd_2 + gap;
} else anglePrevious_2 = angleEnd_2;
values_1.push({
d: value_0.join(' ')
});
// Move for the next value
if (i_2 < parts - 1) {
value_0 = ['M', angles_2.move.x, angles_2.move.y];
}
}
}
return values_1;
}, [width, height, parts, boundary, boundaryWidth, lineCap, outsidePadding, gap, gap_]);
const pathBackground = _react.default.useMemo(() => {
const values_2 = [];
const offset_0 = outsidePadding;
// 1
if (boundary === 1) {
radius = width / 2 - boundaryWidth / 2 - offset_0;
values_2.push(
// Move
'M', offset_0 + boundaryWidth / 2, width / 2 + 0.001,
// Arc
'A', radius, radius, 0, 1, 0, offset_0 + boundaryWidth / 2, width / 2);
}
// 0.75
if (boundary === 0.75) {
const center_5 = width / 2;
radius = width / 2 - boundaryWidth / 2 - offset_0;
const angles_3 = {
end: (0, _utils2.angleToCoordinates)(45, center_5, center_5, radius),
start: (0, _utils2.angleToCoordinates)(135, center_5, center_5, radius)
};
values_2.push(
// Move
'M', center_5, center_5,
// Line middle bottom
'L', angles_3.start.x, angles_3.start.y,
// Arc
'A', radius, radius, 0, 1, 1, angles_3.end.x, angles_3.end.y,
// Line bottom middle
'L', center_5, center_5, 'Z');
}
// 0.5
if (boundary === 0.5) {
const center_6 = width / 2;
radius = width / 2 - boundaryWidth / 2 - offset_0;
const total_3 = 180;
const part_3 = (total_3 - (parts - 1) * gap) / parts;
const angles_4 = {
start: (0, _utils2.angleToCoordinates)(180, center_6, center_6, radius)
};
const anglePrevious_3 = 180;
const angleEnd_3 = anglePrevious_3 + part_3;
angles_4.end = (0, _utils2.angleToCoordinates)(angleEnd_3, center_6, center_6, radius);
angles_4.move = (0, _utils2.angleToCoordinates)(angleEnd_3 + gap, center_6, center_6, radius);
values_2.push(
// Move
'M', angles_4.start.x, angles_4.start.y,
// Arc
'A', radius, radius, 0, 0, 1, angles_4.end.x, angles_4.end.y, 'Z');
}
// 0.25
if (boundary === 0.25) {
const center_7 = width / 2;
radius = width / 2 - boundaryWidth / 2 - offset_0;
const total_4 = 90;
const part_4 = (0, _utils.clamp)((total_4 - (parts - 1) * gap) / parts, 0.01);
gap = (0, _utils.clamp)(gap, 0, (total_4 - part_4 * parts) / (parts - 1));
const angles_5 = {
start: (0, _utils2.angleToCoordinates)(225, center_7, center_7, radius)
};
const anglePrevious_4 = 225;
const angleEnd_4 = anglePrevious_4 + part_4;
angles_5.end = (0, _utils2.angleToCoordinates)(angleEnd_4, center_7, center_7, radius);
angles_5.move = (0, _utils2.angleToCoordinates)(angleEnd_4 + gap, center_7, center_7, radius);
values_2.push(
// Move
'M', center_7, width / 2 - boundaryWidth,
// Line middle bottom, top quarter left
'L', angles_5.start.x, angles_5.start.y,
// Arc
'A', radius, radius, 0, 0, 1, angles_5.end.x, angles_5.end.y,
// Line top quarter right, middle bottom
'L', center_7, width / 2 - boundaryWidth, 'Z');
}
return values_2.join(' ');
}, [width, height, boundary, boundaryWidth, outsidePadding]);
const pathBorder = _react.default.useMemo(() => {
const values_3 = [];
const offset_1 = outsidePadding;
// 0.75
if (boundary === 0.75) {
const center_8 = width / 2;
radius = width / 2 - boundaryWidth / 2 - offset_1;
const angles_6 = {
end: (0, _utils2.angleToCoordinates)(45, center_8, center_8, radius),
start: (0, _utils2.angleToCoordinates)(135, center_8, center_8, radius)
};
values_3.push(
// Move bottom angle left
'M', angles_6.start.x, angles_6.start.y,
// Line middle
'L', center_8, center_8,
// Line bottom angle right
'L', angles_6.end.x, angles_6.end.y);
}
// 0.5
if (boundary === 0.5) {
const center_9 = width / 2;
radius = width / 2 - boundaryWidth / 2 - offset_1;
const angles_7 = {
start: (0, _utils2.angleToCoordinates)(180, center_9, center_9, radius)
};
values_3.push(
// Move
'M', angles_7.start.x, angles_7.start.y,
// Line
'L', width - boundaryWidth / 2 - offset_1, angles_7.start.y);
}
// 0.25
if (boundary === 0.25) {
const center_10 = width / 2;
radius = width / 2 - boundaryWidth / 2 - offset_1;
const total_5 = 90;
const part_5 = (0, _utils.clamp)((total_5 - (parts - 1) * gap) / parts, 0.01);
gap = (0, _utils.clamp)(gap, 0, (total_5 - part_5 * parts) / (parts - 1));
const angles_8 = {
start: (0, _utils2.angleToCoordinates)(225, center_10, center_10, radius),
end: (0, _utils2.angleToCoordinates)(315, center_10, center_10, radius)
};
values_3.push(
// Move middle bottom, top quarter left
'M', angles_8.start.x, angles_8.start.y,
// Line middle bottom
'L', center_10, width / 2 - boundaryWidth,
// Arc top quarter right, middle bottom
'L', angles_8.end.x, angles_8.end.y);
}
return values_3.join(' ');
}, [width, height, boundary, boundaryWidth, outsidePadding]);
const children_ = children && /*#__PURE__*/(0, _jsxRuntime.jsx)("g", {
className: (0, _styleReact.classNames)([(0, _utils2.staticClassName)('RoundMeter', theme) && ['onesy-RoundMeter-children'], classes.children]),
children: _react.default.Children.toArray(children).map((item, index_1) => {
return /*#__PURE__*/_react.default.cloneElement(item, {
key: index_1,
fill: item.props.fill !== undefined ? item.props.fill : color,
stroke: item.props.stroke !== undefined ? item.props.stroke : color,
// clean up
value: undefined,
style: _objectSpread(_objectSpread({}, item.props.value !== undefined ? {
transform: `rotate(${(0, _utils.valueFromPercentageWithinRange)(item.props.value, min, max)}deg)`
} : undefined), item.props.style)
});
})
});
return /*#__PURE__*/(0, _jsxRuntime.jsxs)(Component, _objectSpread(_objectSpread({
ref: item_0 => {
if (ref) {
if ((0, _utils.is)('function', ref)) ref(item_0);else ref.current = item_0;
}
refs.root.current = item_0;
},
className: (0, _styleReact.classNames)([(0, _utils2.staticClassName)('RoundMeter', theme) && ['onesy-RoundMeter-root', `onesy-RoundMeter-size-${size}`], className, classes.root, classes[`size_${size}`], classes[`boundary_${String(boundary).replace('.', '')}`]]),
style: _objectSpread(_objectSpread({}, styles.root), style)
}, other), {}, {
children: [additional, /*#__PURE__*/(0, _jsxRuntime.jsx)(Surface, {
tonal: tonal,
color: color,
children: ({
color: color_,
backgroundColor
}) => /*#__PURE__*/(0, _jsxRuntime.jsxs)("svg", _objectSpread(_objectSpread({
xmlns: "http://www.w3.org/2000/svg",
viewBox: `0 ${yViewBox} ${width || 0} ${height || 0}`
}, SvgProps), {}, {
className: (0, _styleReact.classNames)([(0, _utils2.staticClassName)('RoundMeter', theme) && ['onesy-RoundMeter-svg'], SvgProps === null || SvgProps === void 0 ? void 0 : SvgProps.className, classes.svg]),
children: [childrenPosition === 'pre' && children_, background && /*#__PURE__*/(0, _jsxRuntime.jsx)("path", _objectSpread(_objectSpread({
d: pathBackground,
fill: backgroundColor,
stroke: "none"
}, pathProps), BackgroundProps)), border && /*#__PURE__*/(0, _jsxRuntime.jsx)("path", _objectSpread(_objectSpread({
d: pathBorder,
fill: "none",
stroke: color_,
strokeWidth: boundaryWidth
}, pathProps), BorderProps)), arcsVisible && /*#__PURE__*/(0, _jsxRuntime.jsx)("g", {
className: (0, _styleReact.classNames)([(0, _utils2.staticClassName)('RoundMeter', theme) && ['onesy-RoundMeter-arcs'], classes.arcs]),
children: arcs.map((item_1, index_2) => /*#__PURE__*/(0, _jsxRuntime.jsx)("path", _objectSpread(_objectSpread(_objectSpread({
d: item_1.d,
fill: "none",
stroke: color_,
strokeWidth: boundaryWidth,
strokeLinecap: lineCap
}, pathProps), ArcProps), ArcMainProps), index_2))
}), arcsVisible && arcProgress && /*#__PURE__*/(0, _jsxRuntime.jsx)("g", _objectSpread(_objectSpread({}, ArcsProgressProps), {}, {
className: (0, _styleReact.classNames)([(0, _utils2.staticClassName)('RoundMeter', theme) && ['onesy-RoundMeter-arcs-progress'], ArcsProgressProps === null || ArcsProgressProps === void 0 ? void 0 : ArcsProgressProps.className, classes.arcs_progress]),
children: arcs.map((item_2, index_3) => /*#__PURE__*/(0, _jsxRuntime.jsx)("path", _objectSpread(_objectSpread(_objectSpread({
d: item_2.d,
fill: "none",
stroke: color_,
strokeWidth: boundaryWidth,
strokeLinecap: lineCap
}, pathProps), ArcProps), ArcProgressProps), index_3))
})), childrenPosition === 'pre-marks' && children_, marksVisible && !!marks_.length && marks.map((marksValue_0, index_4) => /*#__PURE__*/(0, _jsxRuntime.jsx)("g", {
className: (0, _styleReact.classNames)([(0, _utils2.staticClassName)('RoundMeter', theme) && ['onesy-RoundMeter-marks'], classes.marks]),
children: marksValue_0.map((item_3, index_) => /*#__PURE__*/(0, _jsxRuntime.jsx)("path", _objectSpread(_objectSpread({
d: item_3.d,
fill: "none",
stroke: color_,
strokeWidth: item_3.width !== undefined ? item_3.width : markWidth,
strokeLinecap: lineCap
}, pathProps), MarkProps), index_))
}, index_4)), childrenPosition === 'pre-labels' && children_, labelsVisible && !!labels_.length && labels.map((labelsValue_0, index_5) => {
return /*#__PURE__*/(0, _jsxRuntime.jsx)("g", {
className: (0, _styleReact.classNames)([(0, _utils2.staticClassName)('RoundMeter', theme) && ['onesy-RoundMeter-labels'], classes.labels]),
children: labelsValue_0.map((item_4, index__0) => {
const {
x,
y,
value: value_1
} = item_4,
other__1 = (0, _objectWithoutProperties2.default)(item_4, _excluded4);
const propsLabel = _objectSpread(_objectSpread(_objectSpread(_objectSpread({}, other__1), textProps), LabelProps), {}, {
style: _objectSpread(_objectSpread(_objectSpread({
fill: color_
}, other__1.style), textProps === null || textProps === void 0 ? void 0 : textProps.style), LabelProps === null || LabelProps === void 0 ? void 0 : LabelProps.style)
});
if ((0, _utils.is)('function', renderLabel)) return renderLabel(x, y, value_1, propsLabel);
return /*#__PURE__*/(0, _jsxRuntime.jsx)("text", _objectSpread(_objectSpread({
x: x,
y: y
}, propsLabel), {}, {
className: (0, _styleReact.classNames)([(0, _utils2.staticClassName)('RoundMeter', theme) && ['onesy-RoundMeter-label'], other__1 === null || other__1 === void 0 ? void 0 : other__1.className, textProps === null || textProps === void 0 ? void 0 : textProps.className, LabelProps === null || LabelProps === void 0 ? void 0 : LabelProps.className, classes.label]),
children: value_1
}), index__0);
})
}, index_5);
}), childrenPosition === 'post' && children_]
}))
})]
}));
};
RoundMeter.displayName = 'onesy-RoundMeter';
var _default = exports.default = RoundMeter;