@onesy/ui-react/Chart/Chart.js

UI for React

"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 || Number.MAX_SAFE_INTEGER,
        y: minY || Number.MAX_SAFE_INTEGER
      },
      max: {
        x: maxX || Number.MIN_SAFE_INTEGER,
        y: 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-Cha