@onesy/ui-react
Version:
UI for React
1,367 lines • 74.3 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 _Line = _interopRequireDefault(require("../Line"));
var _Type = _interopRequireDefault(require("../Type"));
var _Path = _interopRequireDefault(require("../Path"));
var _Append = _interopRequireDefault(require("../Append"));
var _Grow = _interopRequireDefault(require("../Grow"));
var _useMediaQuery = _interopRequireDefault(require("../useMediaQuery"));
var _utils2 = require("../utils");
var _jsxRuntime = require("react/jsx-runtime");
const _excluded = ["ref", "tonal", "color", "title", "subtitle", "values", "pre", "elements", "names", "nameX", "nameY", "tooltip", "tooltipIndividually", "tooltipCloseOnMouseLeave", "elementTooltip", "guidelines", "guidelinesAppend", "guidelinesDisplayInactive", "additionalLines", "legend", "legendManageVisibility", "legendPosition", "animate", "animateTimeout", "labels", "labelsX", "labelsY", "labelDecimalPlaces", "labelsAutoNumber", "labelsYAutoNumber", "labelsXAutoNumber", "marks", "marksX", "marksY", "marksAutoNumber", "marksYAutoNumber", "marksXAutoNumber", "grid", "gridX", "gridY", "gridAutoNumber", "gridYAutoNumber", "gridXAutoNumber", "points", "pointsVisibility", "borders", "borderStart", "borderLeft", "borderEnd", "borderRight", "borderTop", "borderBottom", "minX", "maxX", "minY", "maxY", "minMaxPadding", "minPadding", "maxPadding", "minPaddingX", "minPaddingY", "maxPaddingX", "maxPaddingY", "noMain", "tooltipRender", "tooltipGroupRender", "labelRender", "labelResolve", "onUpdateRects", "Component", "SvgProps", "TypeProps", "TitleProps", "SubtitleProps", "PointsProps", "PointProps", "HeaderProps", "AppendProps", "AdditionalLineProps", "AdditionalLinesProps", "LegendProps", "LegendItemProps", "GuidelineProps", "WrapperProps", "className", "children"],
_excluded2 = ["item", "className"];
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: {
width: '100%',
'&.onesy-Surface-root': {
background: 'transparent'
}
},
additionalLines: {
pointerEvents: 'none'
},
append_wrapper: {
userSelect: 'none',
pointerEvents: 'none',
zIndex: theme.z_index.tooltip
},
wrapper: {
position: 'relative',
height: '400px',
width: '100%',
maxWidth: '1000px'
},
wrapper_label_x: {
margin: '0 0 30px 0'
},
wrapper_label_y: {
margin: '0 0 0 40px'
},
wrapper_labels: {
margin: '0 0 30px 40px'
},
wrapper_name_x: {
margin: '0 0 60px 0'
},
wrapper_name_y: {
margin: '0 0 0 70px'
},
wrapper_names: {
margin: '0 0 60px 70px'
},
legend_offset_labels_y: {
paddingLeft: theme.methods.space.value(5, 'px')
},
legend_offset_names_y: {
paddingLeft: theme.methods.space.value(9, 'px')
},
svg: {
position: 'relative',
touchAction: 'none',
userSelect: 'none',
'& path, & circle, & rect, & g': {
transition: theme.methods.transitions.make('opacity', {
duration: 'xs'
})
}
},
header: {
width: '100%',
marginBottom: '24px'
},
subtitle: {
opacity: '0.74'
},
append: {
padding: `${theme.methods.space.value(1.5, 'px')} ${theme.methods.space.value(2.5, 'px')}`,
borderRadius: theme.methods.shape.radius.value(1.5, 'px')
},
name: {
position: 'absolute',
userSelect: 'none'
},
name_x: {
bottom: '-61px',
left: '50%',
transform: 'translateX(-50%)'
},
name_y: {
left: '-87px',
top: '50%',
transform: 'translateY(-50%) rotate(-90deg)'
},
labels: {
position: 'absolute',
userSelect: 'none'
},
labels_x: {
top: 'calc(100% + 12px)',
left: '0',
width: '100%'
},
labels_y: {
top: '0',
right: 'calc(100% + 12px)',
height: '100%'
},
label: {
position: 'absolute',
whiteSpace: 'nowrap'
},
label_x: {
transform: 'translateX(-50%)',
top: '0'
},
label_y: {
transform: 'translateY(50%)',
right: '0'
},
marks: {
position: 'absolute'
},
marks_x: {
top: 'calc(100% + 0px)',
left: '0',
width: '100%'
},
marks_y: {
top: '0',
right: 'calc(100% + 0px)',
height: '100%'
},
mark: {
position: 'absolute'
},
mark_x: {
width: '1px',
height: '7px',
top: '0',
background: 'currentColor'
},
mark_y: {
width: '7px',
height: '1px',
right: '0',
background: 'currentColor'
},
grids: {
position: 'absolute',
width: '100%',
height: '100%'
},
grids_x: {
top: '0',
left: '0'
},
grids_y: {
top: '0',
left: '0'
},
grid: {
position: 'absolute',
width: '100%',
height: '100%',
opacity: theme.palette.light ? '0.07' : '0.14'
},
grid_x: {
width: '1px',
background: 'currentColor'
},
grid_y: {
height: '1px',
background: 'currentColor'
},
border: {
position: 'absolute',
background: 'currentColor'
},
borderX: {
height: '1px',
width: 'calc(100% + 1px)',
left: '0'
},
borderTop: {
top: '0'
},
borderBottom: {
bottom: '0'
},
borderY: {
width: '1px',
height: 'calc(100% + 1px)',
top: '-1px'
},
borderStart: {
insetInlineStart: '0'
},
borderLeft: {
left: '0'
},
borderEnd: {
insetInlineEnd: '0'
},
borderRight: {
right: '0'
},
point_visibility_hover: {
opacity: '0',
transition: theme.methods.transitions.make('opacity', {
duration: 'xxs'
}),
'&:hover': {
opacity: '1'
}
},
point_visibility_visible: {
opacity: '1'
},
point_active: {
opacity: '1'
},
point_visibility_hidden: {
opacity: '0',
pointerEvents: 'none'
},
// Legend
legend: {},
legend_position_top: {
marginBottom: '16px'
},
legend_position_bottom: {
marginTop: '16px'
},
legend_item: {
userSelect: 'none'
},
legend_item_manage_visibility: {
cursor: 'pointer',
transition: theme.methods.transitions.make('opacity', {
duration: 'xs'
})
},
legend_item_hidden: {
opacity: '0.4'
},
legend_icon: {
width: '10px',
height: '10px',
borderRadius: theme.methods.shape.radius.value(40, 'px'),
boxSizing: 'border-box'
},
append_icon: {
width: '8px',
height: '8px',
borderRadius: theme.methods.shape.radius.value(40, 'px'),
boxSizing: 'border-box'
},
// Guideline
guidelines: {
stroke: 'currentColor',
strokeDasharray: '4',
opacity: '0.44',
pointerEvents: 'none'
}
}), {
name: 'onesy-Chart'
});
const Chart = props_ => {
var _theme$ui, _theme$ui2, _theme$elements, _theme$elements2, _theme$elements3, _theme$elements4, _theme$elements5, _theme$elements6, _append$values, _append$values2, _append$values3, _append$values4;
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.onesyChart) === null || _theme$ui2 === void 0 || (_theme$ui2 = _theme$ui2.props) === null || _theme$ui2 === void 0 ? void 0 : _theme$ui2.default), props_);
const Line = (theme === null || theme === void 0 || (_theme$elements = theme.elements) === null || _theme$elements === void 0 ? void 0 : _theme$elements.Line) || _Line.default;
const Surface = (theme === null || theme === void 0 || (_theme$elements2 = theme.elements) === null || _theme$elements2 === void 0 ? void 0 : _theme$elements2.Surface) || _Surface.default;
const Type = (theme === null || theme === void 0 || (_theme$elements3 = theme.elements) === null || _theme$elements3 === void 0 ? void 0 : _theme$elements3.Type) || _Type.default;
const Path = (theme === null || theme === void 0 || (_theme$elements4 = theme.elements) === null || _theme$elements4 === void 0 ? void 0 : _theme$elements4.Path) || _Path.default;
const Append = (theme === null || theme === void 0 || (_theme$elements5 = theme.elements) === null || _theme$elements5 === void 0 ? void 0 : _theme$elements5.Append) || _Append.default;
const Grow = (theme === null || theme === void 0 || (_theme$elements6 = theme.elements) === null || _theme$elements6 === void 0 ? void 0 : _theme$elements6.Grow) || _Grow.default;
const {
ref,
tonal = true,
color = 'primary',
title,
subtitle,
// Values
values,
// Pre
pre,
// Elements
elements,
// Names
names,
nameX: nameX_,
nameY: nameY_,
// Tooltip
tooltip: tooltip_,
tooltipIndividually: tooltipIndividually_,
tooltipCloseOnMouseLeave: tooltipCloseOnMouseLeave_,
elementTooltip: elementTooltip_,
// Guideline
guidelines: guidelines_,
guidelinesAppend: guidelinesAppend_,
guidelinesDisplayInactive: guidelinesDisplayInactive_,
// Additional lines
additionalLines: additionalLines__,
// Legend
legend: legend___,
legendManageVisibility = true,
legendPosition = 'bottom',
// Animation
animate: animate_,
animateTimeout: animateTimeout_,
// Labels
labels: labels___,
labelsX: labelsX_,
labelsY: labelsY_,
labelDecimalPlaces: labelDecimalPlaces_,
labelsAutoNumber: labelsAutoNumber_,
labelsYAutoNumber: labelsYAutoNumber_,
labelsXAutoNumber: labelsXAutoNumber_,
// Marks
marks: marks___,
marksX: marksX_,
marksY: marksY_,
marksAutoNumber: marksAutoNumber_,
marksYAutoNumber: marksYAutoNumber_,
marksXAutoNumber: marksXAutoNumber_,
// Grid
grid: grid___,
gridX: gridX_,
gridY: gridY_,
gridAutoNumber: gridAutoNumber_,
gridYAutoNumber: gridYAutoNumber_,
gridXAutoNumber: gridXAutoNumber_,
// Points
points: points___,
pointsVisibility: pointsVisibility_,
// Borders
borders: borders_ = true,
borderStart: borderStart_ = false,
borderLeft: borderLeft_ = true,
borderEnd: borderEnd_ = false,
borderRight: borderRight_ = false,
borderTop: borderTop_ = false,
borderBottom: borderBottom_ = true,
// Min, max
minX: minX_,
maxX: maxX_,
minY: minY_,
maxY: maxY_,
minMaxPadding: minMaxPadding__,
minPadding: minPadding__,
maxPadding: maxPadding__,
minPaddingX: minPaddingX__,
minPaddingY: minPaddingY__,
maxPaddingX: maxPaddingX__,
maxPaddingY: maxPaddingY__,
noMain,
tooltipRender,
tooltipGroupRender,
labelRender,
labelResolve,
onUpdateRects,
Component = 'div',
SvgProps,
TypeProps,
TitleProps,
SubtitleProps,
PointsProps,
PointProps,
HeaderProps,
AppendProps,
AdditionalLineProps,
AdditionalLinesProps,
LegendProps,
LegendItemProps,
GuidelineProps,
WrapperProps,
className,
children
} = props,
other = (0, _objectWithoutProperties2.default)(props, _excluded);
const {
classes
} = useStyle();
const refs = {
root: _react.default.useRef(undefined),
wrapper: _react.default.useRef(undefined),
svg: _react.default.useRef(undefined),
defs: _react.default.useRef(undefined),
minMax: _react.default.useRef(undefined),
rects: _react.default.useRef(undefined),
guidelines: _react.default.useRef(undefined),
guidelinesIn: _react.default.useRef(undefined),
guidelinesPosition: _react.default.useRef(undefined),
guidelinesAppend: _react.default.useRef(undefined),
hover: _react.default.useRef(undefined),
allValues: _react.default.useRef([]),
values: _react.default.useRef([]),
visible: _react.default.useRef([]),
appendStyle: _react.default.useRef({}),
theme: _react.default.useRef([])
};
const keys = _react.default.useMemo(() => {
const result = [];
const items = [nameX_, nameY_, tooltip_, tooltipIndividually_, tooltipCloseOnMouseLeave_, elementTooltip_, guidelines_, guidelinesAppend_, guidelinesDisplayInactive_, animate_, animateTimeout_, legend___, labels___, labelsX_, labelsY_, labelDecimalPlaces_, labelsAutoNumber_, labelsYAutoNumber_, labelsXAutoNumber_, marks___, marksX_, marksY_, marksAutoNumber_, marksYAutoNumber_, marksXAutoNumber_, grid___, gridX_, gridY_, gridAutoNumber_, gridYAutoNumber_, gridXAutoNumber_, points___, pointsVisibility_];
items.forEach(item => {
if ((0, _utils.is)('object', item)) Object.keys(item).filter(key => theme.breakpoints.media[key]).forEach(key_0 => result.push(key_0));
});
return (0, _utils.unique)(result);
}, [nameX_, nameY_, tooltip_, tooltipIndividually_, tooltipCloseOnMouseLeave_, elementTooltip_, guidelines_, guidelinesAppend_, guidelinesDisplayInactive_, animate_, animateTimeout_, legend___, labels___, labelsX_, labelsY_, labelDecimalPlaces_, labelsAutoNumber_, labelsYAutoNumber_, labelsXAutoNumber_, marks___, marksX_, marksY_, marksAutoNumber_, marksYAutoNumber_, marksXAutoNumber_, grid___, gridX_, gridY_, gridAutoNumber_, gridYAutoNumber_, gridXAutoNumber_, points___, pointsVisibility_, borders_, borderStart_, borderLeft_, borderEnd_, borderRight_, borderTop_, borderBottom_, minX_, maxX_, minY_, maxY_, minMaxPadding__, minPadding__, maxPadding__, minPaddingX__, minPaddingY__, maxPaddingX__, maxPaddingY__]);
const breakpoints = {};
keys.forEach(key_1 => {
breakpoints[key_1] = (0, _useMediaQuery.default)(theme.breakpoints.media[key_1], {
element: refs.root.current
});
});
const nameX = (0, _utils2.valueBreakpoints)(nameX_, undefined, breakpoints, theme);
const nameY = (0, _utils2.valueBreakpoints)(nameY_, undefined, breakpoints, theme);
const tooltip = (0, _utils2.valueBreakpoints)(tooltip_, true, breakpoints, theme);
const tooltipIndividually = (0, _utils2.valueBreakpoints)(tooltipIndividually_, true, breakpoints, theme);
const tooltipCloseOnMouseLeave = (0, _utils2.valueBreakpoints)(tooltipCloseOnMouseLeave_, true, breakpoints, theme);
const elementTooltip = (0, _utils2.valueBreakpoints)(elementTooltip_, undefined, breakpoints, theme);
const guidelines = (0, _utils2.valueBreakpoints)(guidelines_, undefined, breakpoints, theme);
const guidelinesAppend = (0, _utils2.valueBreakpoints)(guidelinesAppend_, true, breakpoints, theme);
const guidelinesDisplayInactive = (0, _utils2.valueBreakpoints)(guidelinesDisplayInactive_, false, breakpoints, theme);
const animate = (0, _utils2.valueBreakpoints)(animate_, true, breakpoints, theme);
const animateTimeout = (0, _utils2.valueBreakpoints)(animateTimeout_, 140, breakpoints, theme);
const legend__ = (0, _utils2.valueBreakpoints)(legend___, 'auto', breakpoints, theme);
const labels__ = (0, _utils2.valueBreakpoints)(labels___, 'auto', breakpoints, theme);
const labelsX = (0, _utils2.valueBreakpoints)(labelsX_, true, breakpoints, theme);
const labelsY = (0, _utils2.valueBreakpoints)(labelsY_, true, breakpoints, theme);
const labelDecimalPlaces = (0, _utils2.valueBreakpoints)(labelDecimalPlaces_, 0, breakpoints, theme);
const labelsAutoNumber = (0, _utils2.valueBreakpoints)(labelsAutoNumber_, 10, breakpoints, theme);
const labelsYAutoNumber = (0, _utils2.valueBreakpoints)(labelsYAutoNumber_, undefined, breakpoints, theme);
const labelsXAutoNumber = (0, _utils2.valueBreakpoints)(labelsXAutoNumber_, undefined, breakpoints, theme);
const marks__ = (0, _utils2.valueBreakpoints)(marks___, 'auto', breakpoints, theme);
const marksX = (0, _utils2.valueBreakpoints)(marksX_, true, breakpoints, theme);
const marksY = (0, _utils2.valueBreakpoints)(marksY_, true, breakpoints, theme);
const marksAutoNumber = (0, _utils2.valueBreakpoints)(marksAutoNumber_, 10, breakpoints, theme);
const marksYAutoNumber = (0, _utils2.valueBreakpoints)(marksYAutoNumber_, undefined, breakpoints, theme);
const marksXAutoNumber = (0, _utils2.valueBreakpoints)(marksXAutoNumber_, undefined, breakpoints, theme);
const grid__ = (0, _utils2.valueBreakpoints)(grid___, undefined, breakpoints, theme);
const gridX = (0, _utils2.valueBreakpoints)(gridX_, true, breakpoints, theme);
const gridY = (0, _utils2.valueBreakpoints)(gridY_, true, breakpoints, theme);
const gridAutoNumber = (0, _utils2.valueBreakpoints)(gridAutoNumber_, 10, breakpoints, theme);
const gridYAutoNumber = (0, _utils2.valueBreakpoints)(gridYAutoNumber_, undefined, breakpoints, theme);
const gridXAutoNumber = (0, _utils2.valueBreakpoints)(gridXAutoNumber_, undefined, breakpoints, theme);
const points__ = (0, _utils2.valueBreakpoints)(points___, true, breakpoints, theme);
const pointsVisibility = (0, _utils2.valueBreakpoints)(pointsVisibility_, 'hover', breakpoints, theme);
const borders = (0, _utils2.valueBreakpoints)(borders_, true, breakpoints, theme);
const borderStart = (0, _utils2.valueBreakpoints)(borderStart_, false, breakpoints, theme);
const borderLeft = (0, _utils2.valueBreakpoints)(borderLeft_, true, breakpoints, theme);
const borderEnd = (0, _utils2.valueBreakpoints)(borderEnd_, false, breakpoints, theme);
const borderRight = (0, _utils2.valueBreakpoints)(borderRight_, false, breakpoints, theme);
const borderTop = (0, _utils2.valueBreakpoints)(borderTop_, false, breakpoints, theme);
const borderBottom = (0, _utils2.valueBreakpoints)(borderBottom_, true, breakpoints, theme);
const minX = (0, _utils2.valueBreakpoints)(minX_, undefined, breakpoints, theme);
const maxX = (0, _utils2.valueBreakpoints)(maxX_, undefined, breakpoints, theme);
const minY = (0, _utils2.valueBreakpoints)(minY_, undefined, breakpoints, theme);
const maxY = (0, _utils2.valueBreakpoints)(maxY_, undefined, breakpoints, theme);
const minMaxPadding = (0, _utils2.valueBreakpoints)(minMaxPadding__, undefined, breakpoints, theme);
const minPadding = (0, _utils2.valueBreakpoints)(minPadding__, undefined, breakpoints, theme);
const maxPadding = (0, _utils2.valueBreakpoints)(maxPadding__, undefined, breakpoints, theme);
const minPaddingX = (0, _utils2.valueBreakpoints)(minPaddingX__, undefined, breakpoints, theme);
const minPaddingY = (0, _utils2.valueBreakpoints)(minPaddingY__, undefined, breakpoints, theme);
const maxPaddingX = (0, _utils2.valueBreakpoints)(maxPaddingX__, undefined, breakpoints, theme);
const maxPaddingY = (0, _utils2.valueBreakpoints)(maxPaddingY__, undefined, breakpoints, theme);
const [rects, setRects] = _react.default.useState();
const [points, setPoints] = _react.default.useState();
const [labels, setLabels] = _react.default.useState();
const [marks, setMarks] = _react.default.useState();
const [grid, setGrid] = _react.default.useState();
const [additionalLines, setAdditionalLines] = _react.default.useState();
const [legend, setLegend] = _react.default.useState([]);
const [defs, setDefs] = _react.default.useState([]);
const [append, setAppend] = _react.default.useState();
const [visible, setVisible] = _react.default.useState({});
const [guidelinesIn, setGuidelineIn] = _react.default.useState(false);
const [guidelinesPosition, setGuidelinePosition] = _react.default.useState({});
const [hover, setHover] = _react.default.useState(false);
refs.rects.current = rects;
refs.guidelines.current = guidelines;
refs.guidelinesIn.current = guidelinesIn;
refs.guidelinesPosition.current = guidelinesPosition;
refs.guidelinesAppend.current = guidelinesAppend;
refs.hover.current = hover;
refs.values.current = values;
refs.visible.current = visible;
refs.theme.current = theme;
const minMax = _react.default.useMemo(() => {
const values_ = {
min: {
x: minX !== null && minX !== void 0 ? minX : Number.MAX_SAFE_INTEGER,
y: minY !== null && minY !== void 0 ? minY : Number.MAX_SAFE_INTEGER
},
max: {
x: maxX !== null && maxX !== void 0 ? maxX : Number.MIN_SAFE_INTEGER,
y: maxY !== null && maxY !== void 0 ? maxY : Number.MIN_SAFE_INTEGER
}
};
if (!noMain) {
const allItems = values.flatMap(item_0 => (0, _utils.is)('array', item_0.values[0]) ? item_0.values : [item_0.values]);
if ((0, _utils.is)('array', values)) {
allItems.forEach(item_1 => {
const [x, y] = item_1;
if (minX === undefined) values_.min.x = Math.min(values_.min.x, x);
if (maxX === undefined) values_.max.x = Math.max(values_.max.x, x);
if (minY === undefined) values_.min.y = Math.min(values_.min.y, y);
if (maxY === undefined) values_.max.y = Math.max(values_.max.y, y);
});
}
const minPaddingY_ = minPaddingY !== undefined ? minPaddingY : minPadding !== undefined ? minPadding : minMaxPadding;
const maxPaddingY_ = maxPaddingY !== undefined ? maxPaddingY : maxPadding !== undefined ? maxPadding : minMaxPadding;
const minPaddingX_ = minPaddingX !== undefined ? minPaddingX : minPadding !== undefined ? minPadding : minMaxPadding;
const maxPaddingX_ = maxPaddingX !== undefined ? maxPaddingX : maxPadding !== undefined ? maxPadding : minMaxPadding;
const totals = {
x: values_.max.x - values_.min.x,
y: values_.max.y - values_.min.y
};
if (minPaddingY_ !== undefined) values_.min.y -= totals.y * minPaddingY_;
if (maxPaddingY_ !== undefined) values_.max.y += totals.y * maxPaddingY_;
if (minPaddingX_ !== undefined) values_.min.x -= totals.x * minPaddingX_;
if (maxPaddingX_ !== undefined) values_.max.x += totals.x * maxPaddingX_;
}
return values_;
}, [values, minX, maxX, minY, maxY, minMaxPadding, minPadding, maxPadding, minPaddingX, minPaddingY, maxPaddingX, maxPaddingY, noMain]);
refs.minMax.current = minMax;
const onWrapperMouseEnter = () => {
if (!refs.guidelinesIn.current) setGuidelineIn(true);
setHover(true);
};
const onWrapperMouseLeave = () => {
if (refs.hover.current) {
setHover(false);
setTimeout(() => {
if (tooltipCloseOnMouseLeave) setAppend(values__0 => _objectSpread(_objectSpread({}, values__0), {}, {
open: false
}));
if (!guidelinesDisplayInactive) setGuidelineIn(false);
setGuidelinePosition({});
});
}
};
const makeGroupTooltip = (x_, y_) => {
const items_0 = refs.allValues.current.filter(item_2 => item_2.normalized[0] === x_);
const itemsY = (0, _utils.copy)(items_0).sort((a, b) => a.normalized[1] - b.normalized[1]);
const x_0 = x_;
const y_0 = itemsY[0].normalized[1];
const groups = {};
items_0.forEach(item_3 => {
var _item_3$item;
const color_ = ((_item_3$item = item_3.item) === null || _item_3$item === void 0 ? void 0 : _item_3$item.color) || 'primary';
if (!groups[color_]) groups[color_] = [];
groups[color_].push(item_3);
});
// Group sorted by y largest, to smallest
Object.keys(groups).forEach(group => groups[group].sort((a_0, b_0) => {
var _a_0$normalized, _b_0$normalized;
return ((_a_0$normalized = a_0.normalized) === null || _a_0$normalized === void 0 ? void 0 : _a_0$normalized[1]) - ((_b_0$normalized = b_0.normalized) === null || _b_0$normalized === void 0 ? void 0 : _b_0$normalized[1]);
}));
// Groups sorted by y largest, to smallest
const groupsSorted = Object.keys(groups).sort((a_1, b_1) => {
var _groups$a_1$, _groups$b_1$;
return ((_groups$a_1$ = groups[a_1][0]) === null || _groups$a_1$ === void 0 || (_groups$a_1$ = _groups$a_1$.normalized) === null || _groups$a_1$ === void 0 ? void 0 : _groups$a_1$[1]) - ((_groups$b_1$ = groups[b_1][0]) === null || _groups$b_1$ === void 0 || (_groups$b_1$ = _groups$b_1$.normalized) === null || _groups$b_1$ === void 0 ? void 0 : _groups$b_1$[1]);
});
const element = (0, _utils.is)('function', tooltipGroupRender) ? tooltipGroupRender(groups, groupsSorted) : /*#__PURE__*/(0, _jsxRuntime.jsx)(Line, {
tonal: tonal,
color: color,
elevation: 1,
gap: 0.25,
direction: "column",
Component: Surface,
className: (0, _styleReact.classNames)([(0, _utils2.staticClassName)('Chart', theme) && ['onesy-Chart-append'], classes.append]),
children: /*#__PURE__*/(0, _jsxRuntime.jsxs)(Line, {
gap: 1,
direction: "column",
style: {
width: '100%'
},
children: [/*#__PURE__*/(0, _jsxRuntime.jsxs)(Line, {
gap: 1,
direction: "row",
align: "center",
children: [/*#__PURE__*/(0, _jsxRuntime.jsx)(Type, {
version: "b3",
style: {
fontWeight: 600
},
children: (names === null || names === void 0 ? void 0 : names.y) || 'y'
}), /*#__PURE__*/(0, _jsxRuntime.jsx)(Type, {
version: "b3",
style: {
fontWeight: 600
},
children: (names === null || names === void 0 ? void 0 : names.x) || 'x'
})]
}), /*#__PURE__*/(0, _jsxRuntime.jsx)(Line, {
gap: 1,
direction: "column",
children: groupsSorted.map((group_0, index) => {
var _groups$group_0$;
return /*#__PURE__*/(0, _jsxRuntime.jsxs)(Line, {
gap: 1,
direction: "column",
style: {
width: '100%'
},
children: [/*#__PURE__*/(0, _jsxRuntime.jsx)("span", {
className: (0, _styleReact.classNames)([(0, _utils2.staticClassName)('Chart', theme) && ['onesy-Chart-append-icon'], classes.append_icon]),
style: {
background: !refs.theme.current.palette.color[group_0] ? group_0 : refs.theme.current.palette.color[group_0][((_groups$group_0$ = groups[group_0][0]) === null || _groups$group_0$ === void 0 || (_groups$group_0$ = _groups$group_0$.item) === null || _groups$group_0$ === void 0 ? void 0 : _groups$group_0$.tone) || 'main']
}
}), /*#__PURE__*/(0, _jsxRuntime.jsx)(Line, {
gap: 0,
direction: "column",
style: {
width: '100%'
},
children: groups[group_0].map((item_4, index_) => {
var _item_4$values, _item_4$values2, _item_4$values3, _item_4$values4;
return /*#__PURE__*/(0, _jsxRuntime.jsxs)(Line, {
gap: 1,
direction: "row",
style: {
width: '100%'
},
children: [/*#__PURE__*/(0, _jsxRuntime.jsx)(Type, {
version: "b3",
children: (0, _utils.is)('function', labelResolve) ? labelResolve(item_4 === null || item_4 === void 0 || (_item_4$values = item_4.values) === null || _item_4$values === void 0 ? void 0 : _item_4$values[1], 'y', item_4, 'group') : item_4 === null || item_4 === void 0 || (_item_4$values2 = item_4.values) === null || _item_4$values2 === void 0 ? void 0 : _item_4$values2[1]
}), /*#__PURE__*/(0, _jsxRuntime.jsx)(Type, {
version: "b3",
children: (0, _utils.is)('function', labelResolve) ? labelResolve(item_4 === null || item_4 === void 0 || (_item_4$values3 = item_4.values) === null || _item_4$values3 === void 0 ? void 0 : _item_4$values3[0], 'x', item_4, 'group') : item_4 === null || item_4 === void 0 || (_item_4$values4 = item_4.values) === null || _item_4$values4 === void 0 ? void 0 : _item_4$values4[0]
})]
}, index_);
})
})]
}, index);
})
})]
})
});
const rectSvg = refs.svg.current.getBoundingClientRect();
const width = 8;
const height = 8;
const rect_ = {
x: x_0 + rectSvg.x - width,
y: y_0 + rectSvg.y - width,
width,
height
};
rect_.top = rect_.y;
rect_.bottom = rect_.y + height;
rect_.left = rect_.x;
rect_.right = rect_.x + width;
setAppend({
open: true,
element,
rect: rect_
});
};
_react.default.useEffect(() => {
var _refs$root$current;
const onMove = (x__0, y__0) => {
// Only horizontal move at the moment
// ie. vertical guidelines
const rectWrapper = refs.rects.current.wrapper;
const rectSvg_0 = refs.svg.current.getBoundingClientRect();
let x_1 = (0, _utils.clamp)(x__0 - (rectSvg_0 === null || rectSvg_0 === void 0 ? void 0 : rectSvg_0.x), 0, rectWrapper === null || rectWrapper === void 0 ? void 0 : rectWrapper.width);
const y_1 = (0, _utils.clamp)(y__0 - (rectSvg_0 === null || rectSvg_0 === void 0 ? void 0 : rectSvg_0.y), 0, rectWrapper === null || rectWrapper === void 0 ? void 0 : rectWrapper.height);
if (refs.guidelinesAppend.current && ['both', 'vertical'].includes(refs.guidelines.current)) {
const allValues = refs.allValues.current;
let index_0;
let previous;
let item_5;
for (let i = 0; i < allValues.length; i++) {
var _previous, _item_;
previous = allValues[i - 1];
item_5 = allValues[i];
if (((_previous = previous) === null || _previous === void 0 || (_previous = _previous.normalized) === null || _previous === void 0 ? void 0 : _previous[0]) <= x_1 && x_1 <= ((_item_ = item_5) === null || _item_ === void 0 || (_item_ = _item_.normalized) === null || _item_ === void 0 ? void 0 : _item_[0])) {
index_0 = i;
break;
}
}
if (index_0 === undefined) {
var _allValues$;
index_0 = x_1 <= ((_allValues$ = allValues[0]) === null || _allValues$ === void 0 || (_allValues$ = _allValues$.normalized) === null || _allValues$ === void 0 ? void 0 : _allValues$[0]) ? 0 : allValues.length - 1;
previous = allValues[index_0 - 1];
item_5 = allValues[index_0];
}
if (previous || item_5) {
var _item_5$normalized, _previous$normalized;
if (!previous) x_1 = (_item_5$normalized = item_5.normalized) === null || _item_5$normalized === void 0 ? void 0 : _item_5$normalized[0];else if (!item_5) x_1 = (_previous$normalized = previous.normalized) === null || _previous$normalized === void 0 ? void 0 : _previous$normalized[0];else {
const len = item_5.normalized[0] - previous.normalized[0];
const part = len / 2;
x_1 = x_1 < previous.normalized[0] + part ? previous.normalized[0] : item_5.normalized[0];
}
}
makeGroupTooltip(x_1, y_1);
}
setGuidelinePosition(value_ => _objectSpread(_objectSpread({}, value_), {}, {
x: x_1,
y: y_1
}));
};
const onMouseMove = event => {
if (refs.hover.current) {
const x_2 = event.clientX;
const y_2 = event.clientY;
onMove(x_2, y_2);
}
};
const onTouchMove = event_0 => {
if (refs.hover.current) {
const x_3 = event_0.touches[0].clientX;
const y_3 = event_0.touches[0].clientY;
onMove(x_3, y_3);
}
};
const method = () => {
if (refs.wrapper.current) {
const rectWrapper_0 = refs.wrapper.current.getBoundingClientRect();
const rectSvg_1 = refs.svg.current.getBoundingClientRect();
const rects_ = {
wrapper: rectWrapper_0,
svg: rectSvg_1
};
setRects(rects_);
if ((0, _utils.is)('function', onUpdateRects)) onUpdateRects(rects_);
}
};
method();
const observer = new ResizeObserver(method);
observer.observe(refs.root.current);
const rootDocument = (0, _utils.isEnvironment)('browser') ? ((_refs$root$current = refs.root.current) === null || _refs$root$current === void 0 ? void 0 : _refs$root$current.ownerDocument) || window.document : undefined;
rootDocument.addEventListener('mousemove', onMouseMove);
rootDocument.addEventListener('touchmove', onTouchMove);
rootDocument.addEventListener('touchend', onWrapperMouseLeave);
return () => {
observer.disconnect();
rootDocument.removeEventListener('mousemove', onMouseMove);
rootDocument.removeEventListener('touchmove', onTouchMove);
rootDocument.removeEventListener('touchend', onWrapperMouseLeave);
};
}, []);
_react.default.useEffect(() => {
make();
}, [values, labels__, marks__, grid__, additionalLines__, legend__, visible, guidelinesAppend && guidelinesPosition, rects, theme]);
const onPointMouseEnter = values__1 => {
if (tooltipIndividually) {
setAppend(_objectSpread(_objectSpread({}, (0, _utils.is)('function', tooltipRender) ? tooltipRender(values__1) : values__1), {}, {
rect: values__1.rect,
open: true
}));
}
};
const onPointMouseLeave = () => {
setAppend(append_ => _objectSpread(_objectSpread({}, append_), {}, {
open: false
}));
};
const onLegendClick = value => {
if (value !== undefined && legendManageVisibility) {
setVisible(visible_ => _objectSpread(_objectSpread({}, visible_), {}, {
[value]: ![undefined, true].includes(visible_[value])
}));
}
};
const LegendItem = props__ => {
const {
item: item_6 = {},
className: className_
} = props__,
other_ = (0, _objectWithoutProperties2.default)(props__, _excluded2);
const {
color: color__0,
tone = 'main',
name = 'No name'
} = item_6;
return /*#__PURE__*/(0, _jsxRuntime.jsxs)(Line, _objectSpread(_objectSpread(_objectSpread({
gap: 1,
direction: "row",
align: "center"
}, LegendItemProps), {}, {
className: (0, _styleReact.classNames)([(0, _utils2.staticClassName)('Chart', theme) && ['onesy-Chart-legend-item'], className_, LegendItemProps === null || LegendItemProps === void 0 ? void 0 : LegendItemProps.className, classes.legend_item])
}, other_), {}, {
children: [/*#__PURE__*/(0, _jsxRuntime.jsx)("span", {
className: (0, _styleReact.classNames)([(0, _utils2.staticClassName)('Chart', theme) && ['onesy-Chart-legend-icon'], classes.legend_icon]),
style: {
color: !theme.palette.color[color__0] ? color__0 : theme.palette.color[color__0][tone],
background: !theme.palette.color[color__0] ? color__0 : theme.palette.color[color__0][tone]
}
}), /*#__PURE__*/(0, _jsxRuntime.jsx)(Type, {
version: "b2",
children: name
})]
}));
};
const make = (valueNew = refs.values.current) => {
// Make values into x, y, coordinates
// normalized in rect width, height values
// invert y so 0, 0 is at bottom left
if (refs.rects.current && valueNew && !noMain) {
const {
width: width_0,
height: height_0
} = refs.rects.current.wrapper;
// Labels
const labels_ = {
x: (0, _utils.is)('array', labels__ === null || labels__ === void 0 ? void 0 : labels__.x) ? labels__.x : (0, _utils2.minMaxBetweenNumbers)(labelsXAutoNumber !== undefined ? labelsXAutoNumber : labelsAutoNumber !== undefined ? labelsAutoNumber : 10, refs.minMax.current.min.x, refs.minMax.current.max.x).map(item_7 => ({
value: item_7,
label: (0, _utils.castParam)(item_7.toFixed(labelDecimalPlaces || 0))
})),
y: (0, _utils.is)('array', labels__ === null || labels__ === void 0 ? void 0 : labels__.y) ? labels__.y : (0, _utils2.minMaxBetweenNumbers)(labelsYAutoNumber !== undefined ? labelsYAutoNumber : labelsAutoNumber !== undefined ? labelsAutoNumber : 10, refs.minMax.current.min.y, refs.minMax.current.max.y).map(item_8 => ({
value: item_8,
label: (0, _utils.castParam)(item_8.toFixed(labelDecimalPlaces || 0))
}))
};
labels_.x = labels_.x.map(item_9 => _objectSpread(_objectSpread({}, item_9), {}, {
percentage: (0, _utils.percentageFromValueWithinRange)(item_9.value, refs.minMax.current.min.x, refs.minMax.current.max.x)
}));
labels_.y = labels_.y.map(item_10 => _objectSpread(_objectSpread({}, item_10), {}, {
percentage: (0, _utils.percentageFromValueWithinRange)(item_10.value, refs.minMax.current.min.y, refs.minMax.current.max.y)
}));
// Marks
const marks_ = {
x: (0, _utils.is)('array', marks__ === null || marks__ === void 0 ? void 0 : marks__.x) ? marks__.x : (0, _utils2.minMaxBetweenNumbers)(marksXAutoNumber !== undefined ? marksXAutoNumber : marksAutoNumber !== undefined ? marksAutoNumber : 10, refs.minMax.current.min.x, refs.minMax.current.max.x).map(item_11 => ({
value: item_11
})),
y: (0, _utils.is)('array', marks__ === null || marks__ === void 0 ? void 0 : marks__.y) ? marks__.y : (0, _utils2.minMaxBetweenNumbers)(marksYAutoNumber !== undefined ? marksYAutoNumber : marksAutoNumber !== undefined ? marksAutoNumber : 10, refs.minMax.current.min.y, refs.minMax.current.max.y).map(item_12 => ({
value: item_12
}))
};
marks_.x = marks_.x.map(item_13 => _objectSpread(_objectSpread({}, item_13), {}, {
percentage: (0, _utils.percentageFromValueWithinRange)(item_13.value, refs.minMax.current.min.x, refs.minMax.current.max.x)
}));
marks_.y = marks_.y.map(item_14 => _objectSpread(_objectSpread({}, item_14), {}, {
percentage: (0, _utils.percentageFromValueWithinRange)(item_14.value, refs.minMax.current.min.y, refs.minMax.current.max.y)
}));
// Grid
const grid_ = {
x: (0, _utils.is)('array', grid__ === null || grid__ === void 0 ? void 0 : grid__.x) ? grid__.x : (0, _utils2.minMaxBetweenNumbers)(gridXAutoNumber !== undefined ? gridXAutoNumber : gridAutoNumber !== undefined ? gridAutoNumber : 10, refs.minMax.current.min.x, refs.minMax.current.max.x).map(item_15 => ({
value: item_15
})),
y: (0, _utils.is)('array', grid__ === null || grid__ === void 0 ? void 0 : grid__.y) ? grid__.y : (0, _utils2.minMaxBetweenNumbers)(gridYAutoNumber !== undefined ? gridYAutoNumber : gridAutoNumber !== undefined ? gridAutoNumber : 10, refs.minMax.current.min.y, refs.minMax.current.max.y).map(item_16 => ({
value: item_16
}))
};
grid_.x = grid_.x.map(item_17 => _objectSpread(_objectSpread({}, item_17), {}, {
percentage: (0, _utils.percentageFromValueWithinRange)(item_17.value, refs.minMax.current.min.x, refs.minMax.current.max.x)
}));
grid_.y = grid_.y.map(item_18 => _objectSpread(_objectSpread({}, item_18), {}, {
percentage: (0, _utils.percentageFromValueWithinRange)(item_18.value, refs.minMax.current.min.y, refs.minMax.current.max.y)
}));
refs.allValues.current = [];
// Points
const points_ = (0, _utils.copy)(valueNew).flatMap(item_19 => {
var _item_19$values;
const {
color: color__1,
tone: tone_0 = 'main',
name: name_0
} = item_19;
const itemValues = ([x_4, y_4, ...args]) => {
const values__ = {
x: (0, _utils.percentageFromValueWithinRange)(x_4, refs.minMax.current.min.x, refs.minMax.current.max.x),
y: (0, _utils.percentageFromValueWithinRange)(y_4, refs.minMax.current.min.y, refs.minMax.current.max.y)
};
values__.x = (0, _utils.valueFromPercentageWithinRange)(values__.x, 0, width_0);
values__.y = (0, _utils.valueFromPercentageWithinRange)(values__.y, 0, height_0);
if (refs.visible.current[name_0] !== false) {
refs.allValues.current.push({
item: item_19,
values: [x_4, y_4, ...args],
normalized: [values__.x, height_0 - values__.y].map(item_ => Math.abs(item_))
});
}
return {
values: [x_4, y_4, ...args],
normalized: [values__.x, height_0 - values__.y].map(item__0 => Math.abs(item__0))
};
};
const itemArrayNested = (0, _utils.is)('array', (_item_19$values = item_19.values) === null || _item_19$values === void 0 ? void 0 : _item_19$values[0]);
const values__2 = itemArrayNested ? (0, _utils.copy)(item_19.values)
// Sort for x from smallest to largest
.sort((a_2, b_2) => a_2[0] - b_2[0]).map(itemValues) : [itemValues(item_19.values)];
return values__2.map((item__1, index_1) => /*#__PURE__*/(0, _jsxRuntime.jsx)(Path, _objectSpread(_objectSpread(_objectSpread({
Component: "circle",
r: 4,
cx: item__1.normalized[0],
cy: item__1.normalized[1],
fill: !theme.palette.color[color__1] ? color__1 : theme.palette.color[color__1][tone_0],
stroke: "none"
}, !elementTooltip ? {
onMouseEnter: event_1 => {
const rect__0 = event_1.target.getBoundingClientRect();
onPointMouseEnter({
values: item__1.values,
rect: rect__0
});
},
onMouseLeave: onPointMouseLeave
} : undefined), PointProps), {}, {
className: (0, _styleReact.classNames)([(0, _utils2.staticClassName)('Chart', theme) && ['onesy-Chart-point'], PointProps === null || PointProps === void 0 ? void 0 : PointProps.className, classes.point, classes[`point_visibility_${pointsVisibility}`], refs.guidelinesAppend.current && refs.guidelinesPosition.current.x === item__1.normalized[0] && classes.point_active]),
style: _objectSpread(_objectSpread({}, refs.visible.current[name_0] === false ? {
opacity: 0,
pointerEvents: 'none'
} : undefined), PointProps === null || PointProps === void 0 ? void 0 : PointProps.style)
}), index_1));
});
refs.allValues.current.sort((a_3, b_3) => (a_3 === null || a_3 === void 0 ? void 0 : a_3.normalized[0]) - (b_3 === null || b_3 === void 0 ? void 0 : b_3.normalized[0]));
// Guidelines
const additionalLines_ = additionalLines__ && additionalLines__.map((item_20, index_2) => {
const {
color: color__2,
tone: tone_1 = 'main',
style
} = item_20;
const values__3 = {
x1: (0, _utils.percentageFromValueWithinRange)(item_20.x1, refs.minMax.current.min.x, refs.minMax.current.max.x),
y1: (0, _utils.percentageFromValueWithinRange)(item_20.y1, refs.minMax.current.min.y, refs.minMax.current.max.y),
x2: (0, _utils.percentageFromValueWithinRange)(item_20.x2, refs.minMax.current.min.x, refs.minMax.current.max.x),
y2: (0, _utils.percentageFromValueWithinRange)(item_20.y2, refs.minMax.current.min.y, refs.minMax.current.max.y)
};
values__3.x1 = (0, _utils.valueFromPercentageWithinRange)(values__3.x1, 0, width_0);
values__3.y1 = (0, _utils.valueFromPercentageWithinRange)(values__3.y1, 0, height_0);
values__3.x2 = (0, _utils.valueFromPercentageWithinRange)(values__3.x2, 0, width_0);
values__3.y2 = (0, _utils.valueFromPercentageWithinRange)(values__3.y2, 0, height_0);
return /*#__PURE__*/(0, _jsxRuntime.jsx)(Path, _objectSpread(_objectSpread({
d: `M ${values__3.x1} ${height_0 - values__3.y1} L ${values__3.x2} ${height_0 - values__3.y2}`,
fill: "none",
stroke: !theme.palette.color[color__2] ? color__2 : theme.palette.color[color__2][tone_1]
}, AdditionalLineProps), {}, {
className: (0, _styleReact.classNames)([(0, _utils2.staticClassName)('Chart', theme) && ['onesy-Chart-additional-lines'], AdditionalLineProps === null || AdditionalLineProps === void 0 ? void 0 : AdditionalLineProps.className, classes.additionalLines]),
style: _objectSpread(_objectSpread({}, style), AdditionalLineProps === null || AdditionalLineProps === void 0 ? void 0 : AdditionalLineProps.style)
}), index_2);
});
// Labels
setLabels(labels_);
// Marks
setMarks(marks_);
// Grid
setGrid(grid_);
// Guidelines
setAdditionalLines(additionalLines_);
// Update children value
setPoints(points_);
}
// Legend
const legend_ = legend__ !== 'auto' ? legend__ : [];
if (legend__ === 'auto') {
const map = {};
values.forEach(item_21 => {
const name_1 = (item_21 === null || item_21 === void 0 ? void 0 : item_21.name) || '';
if (!map[name_1]) {
legend_.push({
item: item_21,
element: /*#__PURE__*/(0, _jsxRuntime.jsx)(LegendItem, {
item: item_21
})
});
map[name_1] = true;
}
});
}
// Legend
if ((0, _utils.is)('array', legend_)) setLegend(legend_);
};
return /*#__PURE__*/(0, _jsxRuntime.jsxs)(Surface, _objectSpread(_objectSpread({
ref: item_22 => {
if (ref) {
if ((0, _utils.is)('function', ref)) ref(item_22);else ref.current = item_22;
}
refs.root.current = item_22;
},
tonal: tonal,
color: color,
gap: 0,
direction: "column",
align: "center",
Component: Line,
AdditionalProps: {
Component
},
className: (0, _styleReact.classNames)([(0, _utils2.staticClassName)('Chart', theme) && ['onesy-Chart-root'], className, classes.root])
}, other), {}, {
children: [(title || subtitle) && /*#__PURE__*/(0, _jsxRuntime.jsxs)(Line, _objectSpread(_objectSpread({
gap: 0.5,
align: "center",
justify: "center"
}, HeaderProps), {}, {
className: (0, _styleReact.classNames)([(0, _utils2.staticClassName)('Chart', theme) && ['onesy-Chart-header'], HeaderProps === null || HeaderProps === void 0 ? void 0 : HeaderProps.className, classes.header, (labels === null || labels === void 0 ? void 0 : labels.y) && labelsY && classes.legend_offset_labels_y, (names === null || names === void 0 ? void 0 : names.y) && nameY && classes.legend_offset_names_y]),
children: [(0, _utils.is)('simple', title) ? /*#__PURE__*/(0, _jsxRuntime.jsx)(Type, _objectSpread(_objectSpread(_objectSpread({
version: "t2"
}, TypeProps), TitleProps), {}, {
className: (0, _styleReact.classNames)([(0, _utils2.staticClassName)('Chart', theme) && ['onesy-Chart-title'], TypeProps === null || TypeProps === void 0 ? void 0 : TypeProps.className, TitleProps === null || TitleProps === void 0 ? void 0 : TitleProps.className, classes.title]),
children: title
})) : title, (0, _utils.is)('simple', subtitle) ? /*#__PURE__*/(0, _jsxRuntime.jsx)(Type, _objectSpread(_objectSpread(_objectSpread({
version: "b3"
}, TypeProps), SubtitleProps), {}, {
className: (0, _styleReact.classNames)([(0, _utils2.staticClassName)('Chart', theme) && ['onesy-Chart-title'], TypeProps === null || TypeProps === void 0 ? void 0 : TypeProps.className, SubtitleProps === null || SubtitleProps === void 0 ? void 0 : SubtitleProps.className, classes.subtitle]),
children: subtitle
})) : subtitle]
})), legend__ && legendPosition === 'top' && legend && /*#__PURE__*/(0, _jsxRuntime.jsx)(Line, _objectSpread(_objectSpread({
gap: 2,
direction: "row",
align: "center",
justify: "center",
wrap: "wrap"
}, LegendProps), {}, {
className: (0, _styleReact.classNames)([(0, _utils2.staticClassName)('Chart', theme) && ['onesy-Chart-legend', `onesy-Chart-legend-position-${legendPosition}`], LegendProps === null || LegendProps === void 0 ? void 0 : LegendProps.className, classes.legend, classes[`legend_position_${legendPosition}`], (labels === null || labels === void 0 ? void 0 : labels.y) && labelsY && classes.legend_offset_labels_y, (names === null || names === void 0 ? void 0 : names.y) && nameY && classes.legend_offset_names_y]),
children: legend.map(({
item: item_23,
element: element_0
}) => {
var _element_0$props;
return /*#__PURE__*/_react.default.cloneElement(element_0, {
onClick: () => onLegendClick(item_23.name),
className: (0, _styleReact.classNames)([element_0 === null || element_0 === void 0 || (_element_0$props = element_0.props) === null || _element_0$props === void 0 ? void 0 : _element_0$props.className, legendManageVisibility && classes.legend_item_manage_visibility, refs.visible.current[item_23.name] === false && classes.legend_item_hidden])
});
})
})), /*#__PURE__*/(0, _jsxRuntime.jsx)(Line, _objectSpread(_objectSpread({
ref: refs.wrapper
}, WrapperProps), {}, {
className: (0, _styleReact.classNames)([(0, _utils2.staticClassName)('Chart', theme) && ['onesy-Chart-wrapper'], WrapperProps === null || WrapperProps === void 0 ? void 0 : WrapperProps.className, classes.wrapper, (labels === null || labels === void 0 ? void 0 : labels.x) && (labels === null || labels === void 0 ? void 0 : labels.y) && labelsX && labelsY && classes.wrapper_labels, !(labels !== null && labels !== void 0 && labels.x && labels !== null && labels !== void 0 && labels.y && labelsX && labelsY) && (labels === null || labels === void 0 ? void 0 : labels.x) && labelsX && classes.wrapper_label_x, !(labels !== null && labels !== void 0 && labels.x && labels !== null && labels !== void 0 && labels.y && labelsX && labelsY) && (labels === null || labels === void 0 ? void 0 : labels.y) && labelsY && classes.wrapper_label_y, (names === null || names === void 0 ? void 0 : names.x) && (names === null || names === void 0 ? void 0 : names.y) && nameX && nameY && classes.wrapper_names, !(names !== null && names !== void 0 && names.x && names !== null && names !== void 0 && names.y && nameX && nameY) && (names === null || names === void 0 ? void 0 : names.x) && nameX && classes.wrapper_name_x, !(names !== null && names !== void 0 && names.x && names !== null && names !== void 0 && names.y && nameX && nameY) && (names === null || names === void 0 ? void 0 : names.y) && nameY && classes.wrapper_name_y]),
children: /*#__PURE__*/(0, _jsxRuntime.jsx)(Surface, {
tonal: tonal,
color: color,
children: ({
color: color__3,
backgroundColor,
palette
}) => {
var _rects$wrapper, _rects$wrapper2, _rects$wrapper3, _rects$wrapper4;
return /*#__PURE__*/(0, _jsxRuntime.jsxs)(_jsxRuntime.Fragment, {
children: [!!grid__ && gridX && (grid === null || grid === void 0 ? void 0 : grid.x) && /*#__PURE__*/(0, _jsxRuntime.jsx)(Line, {
gap: 0,
direction: "row",
align: "flex-start",
className: (0, _styleReact.classNames)([(0, _utils2.staticClassName)('Chart', theme) && ['onesy-Chart-grids', 'onesy-Chart-grids-x'], classes.grids, classes.grids_x]),
children: grid.x.map((item_24, index_3) => /*#__PURE__*/(0, _jsxRuntime.jsx)("div", {
className: (0, _styleReact.classNames)([(0, _utils2.staticClassName)('Chart', theme) && ['onesy-Chart-grid', 'onesy-Chart-grid-x'], classes.grid, classes.grid_x]),
style: {
left: `${item_24.percentage}%`
}
}, index_3))
}), !!grid__ && gridY && (grid === null || grid === void 0 ? void 0 : grid.y) && /*#__PURE__*/(0, _jsxRuntime.jsx)(Line, {
gap: 0,
direction: "column",
align: "flex-end",
justify: "center",
className: (0, _styleReact.classNames)([(0, _utils2.staticClassName)('Chart', theme) && ['onesy-Chart-grids', 'onesy-Chart-grids-y'], classes.grids, classes.grids_y]),
children: grid.y.map((item_25, index_4) => /*#__PURE__*/(0, _jsxRuntime.jsx)("div", {
className: (0, _styleReact.classNames)([(0, _utils2.staticClassName)('Chart', theme) && ['onesy-Chart-grid', 'onesy-Chart-grid-y'], classes.grid, classes.grid_y]),
style: {
bottom: `${item_25.percentage}%`
}
}, index_4))
}), /*#__PURE__*/(0, _jsxRuntime.jsxs)("svg", _objectSpread(_objectSpread(_objectSpread({
ref: refs.svg,
xmlns: "http://www.w3.org/2000/svg",
viewBox: `0 0 ${(rects === null || rects === void 0 || (_rects$wrapper = rects.wrapper) === null || _rects$wrapper === void 0 ? void 0 : _rects$wrapper.width) || 0} ${(rects === null || rects === void 0 || (_rects$wrapper2 = rects.wrapper) === null || _rects$wrapper2 === void 0 ? void 0 : _rects$wrapper2.height) || 0}`
}, guidelines ? {
onMouseEnter: onWrapperMouseEnter,
onTouchStart: onWrapperMouseEnter,
onMouseLeave: onWrapperMouseLeave
} : undefined), SvgProps), {}, {
className: (0, _styleReact.classNames)([(0, _utils2.staticClassName)('Chart', theme) && ['onesy-Chart-svg'], SvgProps === null || SvgProps === void 0 ? void 0 : SvgProps.className, classes.svg]),
children: [/*#__PURE__*/(0, _jsxRuntime.jsx)("defs", {
ref: refs.defs,
children: defs && defs.map((item_26, index_5) => (/*#__PURE__*/_react.default.cloneElement(item_26, {
key: index_5
})))
}), pre, elements && elements.map(({
item: item_27,
element: element_1
}, index_6) => {
var _props;
const isVisible = visible[item_27 === null || item_27 === void 0 ? void 0 : item_27.name] === undefined || !!visible[item_27 === null || item_27 === void 0 ? void 0 : item_27.name];
return /*#__PURE__*/_react.default.cloneElement(element_1, _objectSpread(_objectSpread({
key: index_6
}, elementTooltip ? {
onMouseEnter: event_2 => {
const rect__1 = event_2.target.getBoundingClientRect();
onPointMouseEnter(_objectSpread(_objectSpread({}, item_27), {}, {
rect: rect__1
}));
},
onMouseLeave: onPointMouseLeave
} : undefined), {}, {
style: _objectSpread(_objectSpread({}, element_1 === null || element_1 === void 0 || (_props = element_1.props) === null || _props === void 0 ? void 0 : _props.style), !isVisible ? {
opacity: '0',
pointerEvents: 'none'
} : undefined)
}));
}), children && _react.default.Children.toArray(children).map((element_2, index_7) => {
var _element_2$props, _element_2$props2, _props2;
const isVisible_0 = visible[(_element_2$props = element_2.props) === null || _element_2$props === void 0 ? void 0 : _element_2$props.name] === undefined || !!visible[(_element_2$props2 = element_2.props) === null || _element_2$props2 === void 0 ? void 0 : _element_2$props2.name];
return /*#__PURE__*/_react.default.cloneElement(element_2, _objectSpread(_objectSpread({
key: index_7,
refs: {
wrapper: refs.wrapper.current,
defs: refs.defs.current
},
rects,
animate: element_2.props.animate !== undefined ? element_2.props.animate : animate,
animateTimeout: element_2.props.animateTimeout !== undefined ? element_2.props.animateTimeout : animateTimeout,
updateDefs: setDefs,
updateLegend: setLegend
}, elementTooltip ? {
onMouseEnter: event_3 => {
const rect__2 = event_3.target.getBoundingClientRect();
onPointMouseEnter(_objectSpread(_objectSpread({}, element_2.props), {}, {
rect: rect__2
}));
},
onMouseLeave: onPointMouseLeave
} : undefined), {}, {
minMax: element_2.props.minMax !== undefined ? element_2.props.minMax : minMax,
minX: element_2.props.minX !== undefined ? element_2.props.minX : minX,
maxX: element_2.props.maxX !== undefined ? element_2.props.maxX : maxX,
minY: element_2.props.minY !== undefined ? element_2.props.minY : minY,
maxY: element_2.props.maxY !== undefined ? element_2.props.maxY : maxY,
minMaxPadding: element_2.props.minMaxPadding !== undefined ? element_2.props.minMaxPadding : minMaxPadding,
minPadding: element_2.props.minPadding !== undefined ? element_2.props.minPadding : minPadding,
maxPadding: element_2.props.maxPadding !== undefined ? element_2.props.maxPadding : maxPadding,
minPaddingX: element_2.props.minPaddingX !== undefined ? element_2.props.minPaddingX : minPaddingX,
minPaddingY: element_2.props.minPaddingY !== undefined ? element_2.props.minPaddingY : minPaddingY,
maxPaddingX: element_2.props.maxPaddingX !== undefined ? element_2.props.maxPaddingX : maxPaddingX,
maxPaddingY: element_2.props.maxPaddingY !== undefined ? element_2.props.maxPaddingY : maxPaddingY,
style: _objectSpread(_objectSpread({}, element_2 === null || element_2 === void 0 || (_props2 = element_2.props) === null || _props2 === void 0 ? void 0 : _props2.style), !isVisible_0 ? {
opacity: '0',
pointerEvents: 'none'
} : undefined)
}));
}), additionalLines && /*#__PURE__*/(0, _jsxRuntime.jsx)("g", _objectSpread(_objectSpread({}, AdditionalLinesProps), {}, {
className: (0, _styleReact.classNames)([(0, _utils2.staticClassName)('Chart', theme) && ['onesy-Chart-additional-lines'], AdditionalLinesProps === null || AdditionalLinesProps === void 0 ? void 0 : AdditionalLinesProps.className, classes.additionalLines]),
children: additionalLines
})), guidelines && guidelinesIn && /*#__PURE__*/(0, _jsxRuntime.jsxs)(_jsxRuntime.Fragment, {
children: [['both', 'vertical'].includes(guidelines) && /*#__PURE__*/(0, _jsxRuntime.jsx)("path", _objectSpread(_objectSpread({
d: `M ${(guidelinesPosition === null || guidelinesPosition === void 0 ? void 0 : guidelinesPosition.x) || 0} 0 ${(guidelinesPosition === null || guidelinesPosition === void 0 ? void 0 : guidelinesPosition.x) || 0} ${(rects === null || rects === void 0 || (_rects$wrapper3 = rects.wrapper) === null || _rects$wrapper3 === void 0 ? void 0 : _rects$wrapper3.height) || 0}`
}, GuidelineProps), {}, {
className: (0, _styleReact.classNames)([(0, _utils2.staticClassName)('Chart', theme) && ['onesy-Chart-guidelines', 'onesy-Chart-guidelines-vertical'], GuidelineProps === null || GuidelineProps === void 0 ? void 0 : GuidelineProps.className, classes.guidelines, classes.guidelines_vertical])
})), ['both', 'horizontal'].includes(guidelines) && /*#__PURE__*/(0, _jsxRuntime.jsx)("path", _objectSpread(_objectSpread({
d: `M 0 ${(guidelinesPosition === null || guidelinesPosition === void 0 ? void 0 : guidelinesPosition.y) || 0} ${(rects === null || rects === void 0 || (_rects$wrapper4 = rects.wrapper) === null || _rects$wrapper4 === void 0 ? void 0 : _rects$wrapper4.width) || 0} ${(guidelinesPosition === null || guidelinesPosition === void 0 ? void 0 : guidelinesPosition.y) || 0}`
}, GuidelineProps), {}, {
className: (0, _styleReact.classNames)([(0, _utils2.staticClassName)('Chart', theme) && ['onesy-Chart-guidelines', 'onesy-Chart-guidelines-horizontal'], GuidelineProps === null || GuidelineProps === void 0 ? void 0 : GuidelineProps.className, classes.guidelines, classes.guidelines_horizontal])
}))]
}), points__ && points && /*#__PURE__*/(0, _jsxRuntime.jsx)("g", _objectSpread(_objectSpread({}, PointsProps), {}, {
className: (0, _styleReact.classNames)([(0, _utils2.staticClassName)('Chart', theme) && ['onesy-Chart-points'], PointsProps === null || PointsProps === void 0 ? void 0 : PointsProps.className, classes.points]),
children: points.map((item_28, index_8) => (/*#__PURE__*/_react.default.cloneElement(item_28, {
key: index_8
})))
}))]
})), borders && /*#__PURE__*/(0, _jsxRuntime.jsxs)(_jsxRuntime.Fragment, {
children: [borderTop && /*#__PURE__*/(0, _jsxRuntime.jsx)("div", {
className: (0, _styleReact.classNames)([(0, _utils2.staticClassName)('Chart', theme) && ['onesy-Chart-border', 'onesy-Chart-border-x', 'onesy-Chart-border-top'], classes.border, classes.borderX, classes.borderTop])
}), borderBottom && /*#__PURE__*/(0, _jsxRuntime.jsx)("div", {
className: (0, _styleReact.classNames)([(0, _utils2.staticClassName)('Chart', theme) && ['onesy-Chart-border', 'onesy-Chart-border-x', 'onesy-Chart-border-bottom'], classes.border, classes.borderX, classes.borderBottom])
}), borderStart && /*#__PURE__*/(0, _jsxRuntime.jsx)("div", {
className: (0, _styleReact.classNames)([(0, _utils2.staticClassName)('Chart', theme) && ['onesy-Chart-border', 'onesy-Chart-border-y', 'onesy-Chart-border-start'], classes.border, classes.borderY, classes.boderStart])
}), borderLeft && /*#__PURE__*/(0, _jsxRuntime.jsx)("div", {
className: (0, _styleReact.classNames)([(0, _utils2.staticClassName)('Chart', theme) && ['onesy-Chart-border', 'onesy-Chart-border-y', 'onesy-Chart-border-left'], classes.border, classes.borderY, classes.borderLeft])
}), borderEnd && /*#__PURE__*/(0, _jsxRuntime.jsx)("div", {
className: (0, _styleReact.classNames)([(0, _utils2.staticClassName)('Chart', theme) && ['onesy-Chart-border', 'onesy-Chart-border-y', 'onesy-Chart-border-end'], classes.border, classes.borderY, classes.borderEnd])
}), borderRight && /*#__PURE__*/(0, _jsxRuntime.jsx)("div", {
className: (0, _styleReact.classNames)([(0, _utils2.staticClassName)('Chart', theme) && ['onesy-Chart-border', 'onesy-Chart-border-y', 'onesy-Chart-border-right'], classes.border, classes.borderY, classes.borderRight])
})]
}), !!labels__ && labelsX && (labels === null || labels === void 0 ? void 0 : labels.x) && /*#__PURE__*/(0, _jsxRuntime.jsx)(Line, {
gap: 0,
direction: "row",
align: "flex-start",
className: (0, _styleReact.classNames)([(0, _utils2.staticClassName)('Chart', theme) && ['onesy-Chart-labels', 'onesy-Chart-labels-x'], classes.labels, classes.labels_x]),
children: labels.x.map((item_29, index_9) => {
const itemProps = {
key: index_9,
version: 'b3',
className: (0, _styleReact.classNames)([(0, _utils2.staticClassName)('Chart', theme) && ['onesy-Chart-label', 'onesy-Chart-label-x'], classes.label, classes.label_x]),
style: {
left: `${item_29.percentage}%`
}
};
return (0, _utils.is)('function', labelRender) ? labelRender(_objectSpread(_objectSpread({}, item_29), {}, {
axis: 'x',
props: itemProps
})) : /*#__PURE__*/(0, _jsxRuntime.jsx)(Type, {
version: "b3",
className: (0, _styleReact.classNames)([(0, _utils2.staticClassName)('Chart', theme) && ['onesy-Chart-label', 'onesy-Chart-label-x'], classes.label, classes.label_x]),
style: {
left: `${item_29.percentage}%`
},
children: (0, _utils.is)('function', labelResolve) ? labelResolve(item_29.label, 'x', item_29) : item_29.label
}, index_9);
})
}), !!labels__ && labelsY && (labels === null || labels === void 0 ? void 0 : labels.y) && /*#__PURE__*/(0, _jsxRuntime.jsx)(Line, {
gap: 0,
direction: "column",
align: "flex-end",
justify: "center",
className: (0, _styleReact.classNames)([(0, _utils2.staticClassName)('Chart', theme) && ['onesy-Chart-labels', 'onesy-Chart-labels-y'], classes.labels, classes.labels_y]),
children: labels.y.map((item_30, index_10) => (0, _utils.is)('function', labelRender) ? labelRender(_objectSpread(_objectSpread({}, item_30), {}, {
axis: 'y'
})) : /*#__PURE__*/(0, _jsxRuntime.jsx)(Type, {
version: "b3",
className: (0, _styleReact.classNames)([(0, _utils2.staticClassName)('Chart', theme) && ['onesy-Chart-label', 'onesy-Chart-label-y'], classes.label, classes.label_y]),
style: {
bottom: `${item_30.percentage}%`
},
children: (0, _utils.is)('function', labelResolve) ? labelResolve(item_30.label, 'y', item_30) : item_30.label
}, index_10))
}), !!marks__ && marksX && (marks === null || marks === void 0 ? void 0 : marks.x) && /*#__PURE__*/(0, _jsxRuntime.jsx)(Line, {
gap: 0,
direction: "row",
align: "flex-start",
className: (0, _styleReact.classNames)([(0, _utils2.staticClassName)('Chart', theme) && ['onesy-Chart-marks', 'onesy-Chart-marks-x'], classes.marks, classes.marks_x]),
children: marks.x.map((item_31, index_11) => /*#__PURE__*/(0, _jsxRuntime.jsx)("span", {
className: (0, _styleReact.classNames)([(0, _utils2.staticClassName)('Chart', theme) && ['onesy-Chart-mark', 'onesy-Chart-mark-x'], classes.mark, classes.mark_x]),
style: {
left: `${item_31.percentage}%`
},
children: item_31.mark
}, index_11))
}), !!marks__ && marksY && (marks === null || marks === void 0 ? void 0 : marks.y) && /*#__PURE__*/(0, _jsxRuntime.jsx)(Line, {
gap: 0,
direction: "column",
align: "flex-end",
justify: "center",
className: (0, _styleReact.classNames)([(0, _utils2.staticClassName)('Chart', theme) && ['onesy-Chart-marks', 'onesy-Chart-marks-y'], classes.marks, classes.marks_y]),
children: marks.y.map((item_32, index_12) => /*#__PURE__*/(0, _jsxRuntime.jsx)("span", {
className: (0, _styleReact.classNames)([(0, _utils2.staticClassName)('Chart', theme) && ['onesy-Chart-mark', 'onesy-Chart-mark-y'], classes.mark, classes.mark_y]),
style: {
bottom: `${item_32.percentage}%`
},
children: item_32.mark
}, index_12))
}), (names === null || names === void 0 ? void 0 : names.x) && nameX && /*#__PURE__*/(0, _jsxRuntime.jsx)(Type, {
version: "b2",
className: (0, _styleReact.classNames)([(0, _utils2.staticClassName)('Chart', theme) && ['onesy-Chart-name', 'onesy-Chart-name-x'], classes.name, classes.name_x]),
children: names.x
}), (names === null || names === void 0 ? void 0 : names.y) && nameY && /*#__PURE__*/(0, _jsxRuntime.jsx)(Type, {
version: "b2",
className: (0, _styleReact.classNames)([(0, _utils2.staticClassName)('Chart', theme) && ['onesy-Chart-name', 'onesy-Chart-name-y'], classes.name, classes.name_y]),
children: names.y
})]
});
}
})
})), legend__ && legendPosition === 'bottom' && legend && /*#__PURE__*/(0, _jsxRuntime.jsx)(Line, _objectSpread(_objectSpread({
gap: 2,
direction: "row",
align: "center",
justify: "center",
wrap: "wrap"
}, LegendProps), {}, {
className: (0, _styleReact.classNames)([(0, _utils2.staticClassName)('Chart', theme) && ['onesy-Chart-legend', `onesy-Chart-legend-position-${legendPosition}`], LegendProps === null || LegendProps === void 0 ? void 0 : LegendProps.className, classes.legend, classes[`legend_position_${legendPosition}`], (labels === null || labels === void 0 ? void 0 : labels.y) && labelsY && classes.legend_offset_labels_y, (names === null || names === void 0 ? void 0 : names.y) && nameY && classes.legend_offset_names_y]),
children: legend.map(({
item: item_33,
element: element_3
}) => {
var _element_3$props;
return /*#__PURE__*/_react.default.cloneElement(element_3, {
onClick: () => onLegendClick(item_33.name),
className: (0, _styleReact.classNames)([element_3 === null || element_3 === void 0 || (_element_3$props = element_3.props) === null || _element_3$props === void 0 ? void 0 : _element_3$props.className, legendManageVisibility && classes.legend_item_manage_visibility, refs.visible.current[item_33.name] === false && classes.legend_item_hidden])
});
})
})), tooltip && /*#__PURE__*/(0, _jsxRuntime.jsx)(Append, _objectSpread({
open: true,
offset: [16, 16],
padding: [14, 14],
element: /*#__PURE__*/(0, _jsxRuntime.jsx)("div", {
className: (0, _styleReact.classNames)([(0, _utils2.staticClassName)('Chart', theme) && ['onesy-Chart-append-wrapper'], classes.append_wrapper]),
style: _objectSpread({}, refs.appendStyle.current),
children: /*#__PURE__*/(0, _jsxRuntime.jsx)(Grow, {
in: append === null || append === void 0 ? void 0 : append.open,
onAdded: () => {
refs.appendStyle.current = {
transition: theme.methods.transitions.make('transform', {
duration: 150
})
};
},
onEnter: () => {
refs.appendStyle.current = {
transition: theme.methods.transitions.make('transform', {
duration: 150
})
};
},
onExited: () => {
refs.appendStyle.current = {};
},
add: true,
children: (append === null || append === void 0 ? void 0 : append.element) || /*#__PURE__*/(0, _jsxRuntime.jsxs)(Line, {
tonal: tonal,
color: color,
elevation: 1,
gap: 0.4,
direction: "column",
Component: Surface,
className: (0, _styleReact.classNames)([(0, _utils2.staticClassName)('Chart', theme) && ['onesy-Chart-append'], classes.append]),
children: [/*#__PURE__*/(0, _jsxRuntime.jsxs)(Line, {
gap: 1,
direction: "row",
align: "center",
children: [/*#__PURE__*/(0, _jsxRuntime.jsx)(Type, {
version: "b3",
style: {
fontWeight: 600
},
children: (names === null || names === void 0 ? void 0 : names.y) || 'y'
}), /*#__PURE__*/(0, _jsxRuntime.jsx)(Type, {
version: "b3",
children: (0, _utils.is)('function', labelResolve) ? labelResolve(append === null || append === void 0 || (_append$values = append.values) === null || _append$values === void 0 ? void 0 : _append$values[1], 'y', append, 'individual') : append === null || append === void 0 || (_append$values2 = append.values) === null || _append$values2 === void 0 ? void 0 : _append$values2[1]
})]
}), /*#__PURE__*/(0, _jsxRuntime.jsxs)(Line, {
gap: 1,
direction: "row",
align: "center",
children: [/*#__PURE__*/(0, _jsxRuntime.jsx)(Type, {
version: "b3",
style: {
fontWeight: 600
},
children: (names === null || names === void 0 ? void 0 : names.x) || 'x'
}), /*#__PURE__*/(0, _jsxRuntime.jsx)(Type, {
version: "b3",
children: (0, _utils.is)('function', labelResolve) ? labelResolve(append === null || append === void 0 || (_append$values3 = append.values) === null || _append$values3 === void 0 ? void 0 : _append$values3[0], 'x', append, 'individual') : append === null || append === void 0 || (_append$values4 = append.values) === null || _append$values4 === void 0 ? void 0 : _append$values4[0]
})]
})]
})
})
}),
anchor: append === null || append === void 0 ? void 0 : append.rect,
portal: true,
alignment: "center",
position: "top"
}, AppendProps))]
}));
};
Chart.displayName = 'onesy-Chart';
var _default = exports.default = Chart;