@onesy/ui-react 1.0.130 → 1.0.131

package/AreaChartItem/AreaChartItem.js

@@ -1,249 +1,337 @@
 "use strict";
-var __rest = (this && this.__rest) || function (s, e) {
-    var t = {};
-    for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p) && e.indexOf(p) < 0)
-        t[p] = s[p];
-    if (s != null && typeof Object.getOwnPropertySymbols === "function")
-        for (var i = 0, p = Object.getOwnPropertySymbols(s); i < p.length; i++) {
-            if (e.indexOf(p[i]) < 0 && Object.prototype.propertyIsEnumerable.call(s, p[i]))
-                t[p[i]] = s[p[i]];
-        }
-    return t;
-};
-var __importDefault = (this && this.__importDefault) || function (mod) {
-    return (mod && mod.__esModule) ? mod : { "default": mod };
-};
-Object.defineProperty(exports, "__esModule", { value: true });
-const jsx_runtime_1 = require("react/jsx-runtime");
-const react_1 = __importDefault(require("react"));
-const utils_1 = require("@onesy/utils");
-const style_react_1 = require("@onesy/style-react");
-const Path_1 = __importDefault(require("../Path"));
-const Line_1 = __importDefault(require("../Line"));
-const Type_1 = __importDefault(require("../Type"));
-const useMediaQuery_1 = __importDefault(require("../useMediaQuery"));
-const utils_2 = require("../utils");
-const useStyle = (0, style_react_1.style)(theme => ({
-    root: {},
-    legend_item: {
-        userSelect: 'none'
-    },
-    legend_icon: {
-        width: '14px',
-        position: 'relative',
-        background: 'transparent',
-        borderTop: '2px solid currentColor',
-        borderRadius: 'unset',
-        height: 'unset',
-        '&::before': {
-            content: "''",
-            position: 'absolute',
-            top: '0',
-            left: '0',
-            height: '4px',
-            width: '100%',
-            background: 'currentColor',
-            opacity: '0.14'
-        }
+
+var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.default = void 0;
+var _extends2 = _interopRequireDefault(require("@babel/runtime/helpers/extends"));
+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 _Path = _interopRequireDefault(require("../Path"));
+var _Line = _interopRequireDefault(require("../Line"));
+var _Type = _interopRequireDefault(require("../Type"));
+var _useMediaQuery = _interopRequireDefault(require("../useMediaQuery"));
+var _utils2 = require("../utils");
+const _excluded = ["tonal", "color", "name", "values", "refs", "rects", "updateDefs", "updateLegend", "minMax", "animate", "animateTimeout", "smooth", "smoothRatio", "linearGradient", "PathProps", "BackgroundProps", "BorderProps", "LegendItemProps", "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: {},
+  legend_item: {
+    userSelect: 'none'
+  },
+  legend_icon: {
+    width: '14px',
+    position: 'relative',
+    background: 'transparent',
+    borderTop: '2px solid currentColor',
+    borderRadius: 'unset',
+    height: 'unset',
+    '&::before': {
+      content: "''",
+      position: 'absolute',
+      top: '0',
+      left: '0',
+      height: '4px',
+      width: '100%',
+      background: 'currentColor',
+      opacity: '0.14'
     }
-}), { name: 'onesy-AreaChartItem' });
-const AreaChartItem = react_1.default.forwardRef((props_, ref) => {
-    const theme = (0, style_react_1.useOnesyTheme)();
-    const props = react_1.default.useMemo(() => { var _a, _b, _c, _d, _e, _f, _g, _h; return (Object.assign(Object.assign(Object.assign({}, (_d = (_c = (_b = (_a = theme === null || theme === void 0 ? void 0 : theme.ui) === null || _a === void 0 ? void 0 : _a.elements) === null || _b === void 0 ? void 0 : _b.all) === null || _c === void 0 ? void 0 : _c.props) === null || _d === void 0 ? void 0 : _d.default), (_h = (_g = (_f = (_e = theme === null || theme === void 0 ? void 0 : theme.ui) === null || _e === void 0 ? void 0 : _e.elements) === null || _f === void 0 ? void 0 : _f.onesyAreaChartItem) === null || _g === void 0 ? void 0 : _g.props) === null || _h === void 0 ? void 0 : _h.default), props_)); }, [props_]);
-    const Path = react_1.default.useMemo(() => { var _a; return ((_a = theme === null || theme === void 0 ? void 0 : theme.elements) === null || _a === void 0 ? void 0 : _a.Path) || Path_1.default; }, [theme]);
-    const Line = react_1.default.useMemo(() => { var _a; return ((_a = theme === null || theme === void 0 ? void 0 : theme.elements) === null || _a === void 0 ? void 0 : _a.Line) || Line_1.default; }, [theme]);
-    const Type = react_1.default.useMemo(() => { var _a; return ((_a = theme === null || theme === void 0 ? void 0 : theme.elements) === null || _a === void 0 ? void 0 : _a.Type) || Type_1.default; }, [theme]);
-    const { tonal = true, color = 'primary', name, values, refs: refs_, rects, updateDefs, updateLegend, minMax, animate: animate_, animateTimeout: animateTimeout_, smooth = true, smoothRatio = 0.14, linearGradient = true, PathProps, BackgroundProps, BorderProps, LegendItemProps, className } = props, other = __rest(props, ["tonal", "color", "name", "values", "refs", "rects", "updateDefs", "updateLegend", "minMax", "animate", "animateTimeout", "smooth", "smoothRatio", "linearGradient", "PathProps", "BackgroundProps", "BorderProps", "LegendItemProps", "className"]);
-    const [value, setValue] = react_1.default.useState();
-    const [init, setInit] = react_1.default.useState();
-    const { classes } = useStyle();
-    const refs = {
-        minMax: react_1.default.useRef(null),
-        smooth: react_1.default.useRef(null),
-        theme: react_1.default.useRef(null),
-        path: react_1.default.useRef(null),
-        pathBackground: react_1.default.useRef(null),
-        pathStyle: react_1.default.useRef({}),
-        animate: react_1.default.useRef(null),
-        animateTimeout: react_1.default.useRef(null),
-        init: react_1.default.useRef(null)
-    };
-    const keys = react_1.default.useMemo(() => {
-        const result = [];
-        const items = [animate_, animateTimeout_];
-        items.forEach(item => {
-            if ((0, utils_1.is)('object', item))
-                Object.keys(item).filter(key => theme.breakpoints.media[key]).forEach(key => result.push(key));
-        });
-        return (0, utils_1.unique)(result);
-    }, [animate_, animateTimeout_]);
-    const breakpoints = {};
-    keys.forEach(key => {
-        breakpoints[key] = (0, useMediaQuery_1.default)(theme.breakpoints.media[key], { element: refs.path.current });
+  }
+}), {
+  name: 'onesy-AreaChartItem'
+});
+const AreaChartItem = /*#__PURE__*/_react.default.forwardRef((props_, ref) => {
+  const theme = (0, _styleReact.useOnesyTheme)();
+  const props = _react.default.useMemo(() => {
+    var _theme$ui, _theme$ui2;
+    return _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.onesyAreaChartItem) === null || _theme$ui2 === void 0 || (_theme$ui2 = _theme$ui2.props) === null || _theme$ui2 === void 0 ? void 0 : _theme$ui2.default), props_);
+  }, [props_]);
+  const Path = _react.default.useMemo(() => {
+    var _theme$elements;
+    return (theme === null || theme === void 0 || (_theme$elements = theme.elements) === null || _theme$elements === void 0 ? void 0 : _theme$elements.Path) || _Path.default;
+  }, [theme]);
+  const Line = _react.default.useMemo(() => {
+    var _theme$elements2;
+    return (theme === null || theme === void 0 || (_theme$elements2 = theme.elements) === null || _theme$elements2 === void 0 ? void 0 : _theme$elements2.Line) || _Line.default;
+  }, [theme]);
+  const Type = _react.default.useMemo(() => {
+    var _theme$elements3;
+    return (theme === null || theme === void 0 || (_theme$elements3 = theme.elements) === null || _theme$elements3 === void 0 ? void 0 : _theme$elements3.Type) || _Type.default;
+  }, [theme]);
+  const {
+      tonal = true,
+      color = 'primary',
+      name,
+      values,
+      refs: refs_,
+      rects,
+      updateDefs,
+      updateLegend,
+      minMax,
+      animate: animate_,
+      animateTimeout: animateTimeout_,
+      smooth = true,
+      smoothRatio = 0.14,
+      linearGradient = true,
+      PathProps,
+      BackgroundProps,
+      BorderProps,
+      LegendItemProps,
+      className
+    } = props,
+    other = (0, _objectWithoutProperties2.default)(props, _excluded);
+  const [value, setValue] = _react.default.useState();
+  const [init, setInit] = _react.default.useState();
+  const {
+    classes
+  } = useStyle();
+  const refs = {
+    minMax: _react.default.useRef(null),
+    smooth: _react.default.useRef(null),
+    theme: _react.default.useRef(null),
+    path: _react.default.useRef(null),
+    pathBackground: _react.default.useRef(null),
+    pathStyle: _react.default.useRef({}),
+    animate: _react.default.useRef(null),
+    animateTimeout: _react.default.useRef(null),
+    init: _react.default.useRef(null)
+  };
+  const keys = _react.default.useMemo(() => {
+    const result = [];
+    const items = [animate_, animateTimeout_];
+    items.forEach(item => {
+      if ((0, _utils.is)('object', item)) Object.keys(item).filter(key => theme.breakpoints.media[key]).forEach(key => result.push(key));
     });
-    const animate = (0, utils_2.valueBreakpoints)(animate_, true, breakpoints, theme);
-    const animateTimeout = (0, utils_2.valueBreakpoints)(animateTimeout_, 140, breakpoints, theme);
-    refs.theme.current = theme;
-    refs.smooth.current = smooth;
-    refs.animate.current = animate;
-    refs.animateTimeout.current = animateTimeout;
-    refs.init.current = init;
-    const LegendItem = react_1.default.useCallback((legendItemProps) => {
-        return ((0, jsx_runtime_1.jsxs)(Line, Object.assign({ gap: 1, direction: 'row', align: 'center' }, legendItemProps, LegendItemProps, { className: (0, style_react_1.classNames)([
-                (0, utils_2.staticClassName)('AreaChartItem', theme) && [
-                    'onesy-AreaChartItem-legend-item'
-                ],
-                legendItemProps === null || legendItemProps === void 0 ? void 0 : legendItemProps.className,
-                LegendItemProps === null || LegendItemProps === void 0 ? void 0 : LegendItemProps.className,
-                classes.legend_item
-            ]) }, { children: [(0, jsx_runtime_1.jsx)("span", { className: (0, style_react_1.classNames)([
-                        (0, utils_2.staticClassName)('AreaChartItem', theme) && [
-                            'onesy-AreaChartItem-legend-icon'
-                        ],
-                        classes.legend_icon
-                    ]), style: {
-                        color: !refs.theme.current.palette.color[color] ? color : refs.theme.current.palette.color[color].main
-                    } }), (0, jsx_runtime_1.jsx)(Type, Object.assign({ version: 'b3' }, { children: name }))] })));
-    }, [theme]);
-    const LinearGradient = react_1.default.useCallback(() => {
-        return ((0, jsx_runtime_1.jsxs)("linearGradient", Object.assign({ id: `areaChartItem_id_${name}`, x1: '0%', x2: '0%', y1: '0%', y2: '100%' }, { children: [(0, jsx_runtime_1.jsx)("stop", { offset: '0%', stopColor: !refs.theme.current.palette.color[color] ? color : refs.theme.current.palette.color[color]['main'], stopOpacity: '0.54' }), (0, jsx_runtime_1.jsx)("stop", { offset: '74%', stopColor: refs.theme.current.palette.background.default.primary, stopOpacity: '0' })] })));
-    }, [theme]);
-    const make = () => {
-        // Make values into x, y, coordinates
-        // normalized in rect width, height values
-        // invert y so 0, 0 is at bottom left
-        if ((rects === null || rects === void 0 ? void 0 : rects.wrapper) && values) {
-            const { width, height } = rects.wrapper;
-            const values_ = values
-                // Sort for x from smallest to largest
-                .sort((a, b) => a[0] - b[0])
-                .map(item_ => {
-                const [x, y] = item_;
-                const values__ = {
-                    x: (0, utils_1.percentageFromValueWithinRange)(x, minMax.min.x, minMax.max.x),
-                    y: (0, utils_1.percentageFromValueWithinRange)(y, minMax.min.y, minMax.max.y)
-                };
-                values__.x = (0, utils_1.valueFromPercentageWithinRange)(values__.x, 0, width);
-                values__.y = (0, utils_1.valueFromPercentageWithinRange)(values__.y, 0, height);
-                return [values__.x, height - values__.y].map(item__ => Math.abs(item__));
-            });
-            const d = {
-                border: '',
-                background: ''
-            };
-            let lastX = 0;
-            if (!refs.smooth.current) {
-                d.border = values_.reduce((result, item_, index) => {
-                    const [x, y] = item_;
-                    // Move
-                    if (index === 0)
-                        return result += `M ${x} ${y}`;
-                    return result += `L ${x} ${y}`;
-                }, '');
-                d.background = values_.reduce((result, item_, index) => {
-                    const [x, y] = item_;
-                    // Move
-                    if (index === 0)
-                        return result += `M ${x} ${height} L ${x} ${y}`;
-                    if (index === values_.length - 1)
-                        lastX = x;
-                    return result += `L ${x} ${y}`;
-                }, '');
-                d.background += `L ${lastX} ${height} Z`;
-            }
-            else {
-                d.border = values_.reduce((result, item_, index, array) => {
-                    const [x, y] = item_;
-                    // Move
-                    if (index === 0)
-                        return result += `M ${x} ${y}`;
-                    const [x1, y1] = (0, utils_2.controlPoint)(array[index - 1], array[index - 2], item_, false, smoothRatio);
-                    const [x2, y2] = (0, utils_2.controlPoint)(item_, array[index - 1], array[index + 1], true, smoothRatio);
-                    return result += `C ${x1} ${y1} ${x2} ${y2} ${x} ${y}`;
-                }, '');
-                d.background = values_.reduce((result, item_, index, array) => {
-                    const [x, y] = item_;
-                    // Move
-                    if (index === 0)
-                        return result += `M ${x} ${height} L ${x} ${y}`;
-                    if (index === values_.length - 1)
-                        lastX = x;
-                    const [x1, y1] = (0, utils_2.controlPoint)(array[index - 1], array[index - 2], item_, false, smoothRatio);
-                    const [x2, y2] = (0, utils_2.controlPoint)(item_, array[index - 1], array[index + 1], true, smoothRatio);
-                    return result += `C ${x1} ${y1} ${x2} ${y2} ${x} ${y}`;
-                }, '');
-                d.background += `L ${lastX} ${height} Z`;
-            }
-            const element = ((0, jsx_runtime_1.jsxs)("g", { children: [(0, jsx_runtime_1.jsx)(Path, Object.assign({ ref: refs.pathBackground, d: d.background, fill: linearGradient ? `url('#areaChartItem_id_${name}` : refs.theme.current.methods.palette.color.colorToRgb(!refs.theme.current.palette.color[color] ? color : refs.theme.current.palette.color[color].main, 0.14), stroke: 'none' }, PathProps, BackgroundProps, { style: Object.assign(Object.assign(Object.assign(Object.assign(Object.assign({}, PathProps === null || PathProps === void 0 ? void 0 : PathProps.style), BackgroundProps === null || BackgroundProps === void 0 ? void 0 : BackgroundProps.style), { transition: theme.methods.transitions.make('opacity', { duration: 2400, timing_function: 'decelerated' }) }), ((refs.animate.current && refs.init.current !== 'animated') && {
-                            opacity: 0
-                        })), ((refs.animate.current && refs.init.current === 'animated') && {
-                            opacity: 1
-                        })) })), (0, jsx_runtime_1.jsx)(Path, Object.assign({ ref: refs.path, d: d.border, fill: 'none', stroke: !refs.theme.current.palette.color[color] ? color : refs.theme.current.palette.color[color].main, strokeWidth: '2px' }, PathProps, BorderProps, { style: Object.assign(Object.assign(Object.assign(Object.assign(Object.assign({}, PathProps === null || PathProps === void 0 ? void 0 : PathProps.style), BorderProps === null || BorderProps === void 0 ? void 0 : BorderProps.style), { transition: theme.methods.transitions.make('stroke-dashoffset', { duration: 2400, timing_function: 'decelerated' }) }), ((refs.animate.current && refs.init.current !== 'animated') && {
-                            opacity: 0
-                        })), refs.pathStyle.current) }))] }));
-            // Defs
-            if (refs_.defs) {
-                const linearGradientElement = refs_.defs.querySelector(`#areaChartItem_id_${name}`);
-                if (!linearGradientElement) {
-                    updateDefs(previous => {
-                        return [...(previous || []), (0, jsx_runtime_1.jsx)(LinearGradient, {})];
-                    });
-                }
-                else {
-                    linearGradientElement.children[0].setAttribute('stop-color', !refs.theme.current.palette.color[color] ? color : refs.theme.current.palette.color[color]['main']);
-                    linearGradientElement.children[1].setAttribute('stop-color', refs.theme.current.palette.background.default.primary);
-                }
-            }
-            // Legend item
-            if ((0, utils_1.is)('function', updateLegend)) {
-                updateLegend(previous => {
-                    const newValues = [...(previous || [])];
-                    if (!newValues.find(itemLegend => { var _a; return ((_a = itemLegend.item) === null || _a === void 0 ? void 0 : _a.name) === name; })) {
-                        newValues.push({
-                            item: {
-                                name,
-                                values
-                            },
-                            element: (0, jsx_runtime_1.jsx)(LegendItem, {})
-                        });
-                    }
-                    return newValues;
-                });
-            }
-            // Value
-            setValue(element);
-        }
-    };
-    const initMethod = react_1.default.useCallback(() => {
-        if (animate) {
-            if (!init && refs.path.current) {
-                const total = refs.path.current.getTotalLength();
-                refs.pathStyle.current = {
-                    strokeDasharray: total,
-                    strokeDashoffset: total
-                };
-                setInit(true);
-                setTimeout(() => {
-                    refs.pathStyle.current = Object.assign(Object.assign({}, refs.pathStyle.current), { opacity: 1, strokeDashoffset: 0 });
-                    setInit('animated');
-                }, refs.animateTimeout.current);
-            }
+    return (0, _utils.unique)(result);
+  }, [animate_, animateTimeout_]);
+  const breakpoints = {};
+  keys.forEach(key => {
+    breakpoints[key] = (0, _useMediaQuery.default)(theme.breakpoints.media[key], {
+      element: refs.path.current
+    });
+  });
+  const animate = (0, _utils2.valueBreakpoints)(animate_, true, breakpoints, theme);
+  const animateTimeout = (0, _utils2.valueBreakpoints)(animateTimeout_, 140, breakpoints, theme);
+  refs.theme.current = theme;
+  refs.smooth.current = smooth;
+  refs.animate.current = animate;
+  refs.animateTimeout.current = animateTimeout;
+  refs.init.current = init;
+  const LegendItem = _react.default.useCallback(legendItemProps => {
+    return /*#__PURE__*/_react.default.createElement(Line, (0, _extends2.default)({
+      gap: 1,
+      direction: "row",
+      align: "center"
+    }, legendItemProps, LegendItemProps, {
+      className: (0, _styleReact.classNames)([(0, _utils2.staticClassName)('AreaChartItem', theme) && ['onesy-AreaChartItem-legend-item'], legendItemProps === null || legendItemProps === void 0 ? void 0 : legendItemProps.className, LegendItemProps === null || LegendItemProps === void 0 ? void 0 : LegendItemProps.className, classes.legend_item])
+    }), /*#__PURE__*/_react.default.createElement("span", {
+      className: (0, _styleReact.classNames)([(0, _utils2.staticClassName)('AreaChartItem', theme) && ['onesy-AreaChartItem-legend-icon'], classes.legend_icon]),
+      style: {
+        color: !refs.theme.current.palette.color[color] ? color : refs.theme.current.palette.color[color].main
+      }
+    }), /*#__PURE__*/_react.default.createElement(Type, {
+      version: "b3"
+    }, name));
+  }, [theme]);
+  const LinearGradient = _react.default.useCallback(() => {
+    return /*#__PURE__*/_react.default.createElement("linearGradient", {
+      id: `areaChartItem_id_${name}`,
+      x1: "0%",
+      x2: "0%",
+      y1: "0%",
+      y2: "100%"
+    }, /*#__PURE__*/_react.default.createElement("stop", {
+      offset: "0%",
+      stopColor: !refs.theme.current.palette.color[color] ? color : refs.theme.current.palette.color[color]['main'],
+      stopOpacity: "0.54"
+    }), /*#__PURE__*/_react.default.createElement("stop", {
+      offset: "74%",
+      stopColor: refs.theme.current.palette.background.default.primary,
+      stopOpacity: "0"
+    }));
+  }, [theme]);
+  const make = () => {
+    // Make values into x, y, coordinates
+    // normalized in rect width, height values
+
+    // invert y so 0, 0 is at bottom left
+    if (rects !== null && rects !== void 0 && rects.wrapper && values) {
+      const {
+        width,
+        height
+      } = rects.wrapper;
+      const values_ = values
+      // Sort for x from smallest to largest
+      .sort((a, b) => a[0] - b[0]).map(item_ => {
+        const [x, y] = item_;
+        const values__ = {
+          x: (0, _utils.percentageFromValueWithinRange)(x, minMax.min.x, minMax.max.x),
+          y: (0, _utils.percentageFromValueWithinRange)(y, minMax.min.y, minMax.max.y)
+        };
+        values__.x = (0, _utils.valueFromPercentageWithinRange)(values__.x, 0, width);
+        values__.y = (0, _utils.valueFromPercentageWithinRange)(values__.y, 0, height);
+        return [values__.x, height - values__.y].map(item__ => Math.abs(item__));
+      });
+      const d = {
+        border: '',
+        background: ''
+      };
+      let lastX = 0;
+      if (!refs.smooth.current) {
+        d.border = values_.reduce((result, item_, index) => {
+          const [x, y] = item_;
+
+          // Move
+          if (index === 0) return result += `M ${x} ${y}`;
+          return result += `L ${x} ${y}`;
+        }, '');
+        d.background = values_.reduce((result, item_, index) => {
+          const [x, y] = item_;
+
+          // Move
+          if (index === 0) return result += `M ${x} ${height} L ${x} ${y}`;
+          if (index === values_.length - 1) lastX = x;
+          return result += `L ${x} ${y}`;
+        }, '');
+        d.background += `L ${lastX} ${height} Z`;
+      } else {
+        d.border = values_.reduce((result, item_, index, array) => {
+          const [x, y] = item_;
+
+          // Move
+          if (index === 0) return result += `M ${x} ${y}`;
+          const [x1, y1] = (0, _utils2.controlPoint)(array[index - 1], array[index - 2], item_, false, smoothRatio);
+          const [x2, y2] = (0, _utils2.controlPoint)(item_, array[index - 1], array[index + 1], true, smoothRatio);
+          return result += `C ${x1} ${y1} ${x2} ${y2} ${x} ${y}`;
+        }, '');
+        d.background = values_.reduce((result, item_, index, array) => {
+          const [x, y] = item_;
+
+          // Move
+          if (index === 0) return result += `M ${x} ${height} L ${x} ${y}`;
+          if (index === values_.length - 1) lastX = x;
+          const [x1, y1] = (0, _utils2.controlPoint)(array[index - 1], array[index - 2], item_, false, smoothRatio);
+          const [x2, y2] = (0, _utils2.controlPoint)(item_, array[index - 1], array[index + 1], true, smoothRatio);
+          return result += `C ${x1} ${y1} ${x2} ${y2} ${x} ${y}`;
+        }, '');
+        d.background += `L ${lastX} ${height} Z`;
+      }
+      const element = /*#__PURE__*/_react.default.createElement("g", null, /*#__PURE__*/_react.default.createElement(Path, (0, _extends2.default)({
+        ref: refs.pathBackground,
+        d: d.background,
+        fill: linearGradient ? `url('#areaChartItem_id_${name}` : refs.theme.current.methods.palette.color.colorToRgb(!refs.theme.current.palette.color[color] ? color : refs.theme.current.palette.color[color].main, 0.14),
+        stroke: "none"
+      }, PathProps, BackgroundProps, {
+        style: _objectSpread(_objectSpread(_objectSpread(_objectSpread({}, PathProps === null || PathProps === void 0 ? void 0 : PathProps.style), BackgroundProps === null || BackgroundProps === void 0 ? void 0 : BackgroundProps.style), {}, {
+          transition: theme.methods.transitions.make('opacity', {
+            duration: 2400,
+            timing_function: 'decelerated'
+          })
+        }, refs.animate.current && refs.init.current !== 'animated' && {
+          opacity: 0
+        }), refs.animate.current && refs.init.current === 'animated' && {
+          opacity: 1
+        })
+      })), /*#__PURE__*/_react.default.createElement(Path, (0, _extends2.default)({
+        ref: refs.path,
+        d: d.border,
+        fill: "none",
+        stroke: !refs.theme.current.palette.color[color] ? color : refs.theme.current.palette.color[color].main,
+        strokeWidth: "2px"
+      }, PathProps, BorderProps, {
+        style: _objectSpread(_objectSpread(_objectSpread(_objectSpread({}, PathProps === null || PathProps === void 0 ? void 0 : PathProps.style), BorderProps === null || BorderProps === void 0 ? void 0 : BorderProps.style), {}, {
+          transition: theme.methods.transitions.make('stroke-dashoffset', {
+            duration: 2400,
+            timing_function: 'decelerated'
+          })
+        }, refs.animate.current && refs.init.current !== 'animated' && {
+          opacity: 0
+        }), refs.pathStyle.current)
+      })));
+
+      // Defs
+      if (refs_.defs) {
+        const linearGradientElement = refs_.defs.querySelector(`#areaChartItem_id_${name}`);
+        if (!linearGradientElement) {
+          updateDefs(previous => {
+            return [...(previous || []), /*#__PURE__*/_react.default.createElement(LinearGradient, null)];
+          });
+        } else {
+          linearGradientElement.children[0].setAttribute('stop-color', !refs.theme.current.palette.color[color] ? color : refs.theme.current.palette.color[color]['main']);
+          linearGradientElement.children[1].setAttribute('stop-color', refs.theme.current.palette.background.default.primary);
         }
-    }, [init, animate]);
-    react_1.default.useEffect(() => {
-        make();
-        initMethod();
-    }, [values, theme, animate, init, !!(refs.path.current && refs.pathBackground.current)]);
-    react_1.default.useEffect(() => {
-        make();
-    }, [rects === null || rects === void 0 ? void 0 : rects.wrapper]);
-    return (value && react_1.default.cloneElement(value, Object.assign({ className }, other)));
+      }
+
+      // Legend item
+      if ((0, _utils.is)('function', updateLegend)) {
+        updateLegend(previous => {
+          const newValues = [...(previous || [])];
+          if (!newValues.find(itemLegend => {
+            var _itemLegend$item;
+            return ((_itemLegend$item = itemLegend.item) === null || _itemLegend$item === void 0 ? void 0 : _itemLegend$item.name) === name;
+          })) {
+            newValues.push({
+              item: {
+                name,
+                values
+              },
+              element: /*#__PURE__*/_react.default.createElement(LegendItem, null)
+            });
+          }
+          return newValues;
+        });
+      }
+
+      // Value
+      setValue(element);
+    }
+  };
+  const initMethod = _react.default.useCallback(() => {
+    if (animate) {
+      if (!init && refs.path.current) {
+        const total = refs.path.current.getTotalLength();
+        refs.pathStyle.current = {
+          strokeDasharray: total,
+          strokeDashoffset: total
+        };
+        setInit(true);
+        setTimeout(() => {
+          refs.pathStyle.current = _objectSpread(_objectSpread({}, refs.pathStyle.current), {}, {
+            opacity: 1,
+            strokeDashoffset: 0
+          });
+          setInit('animated');
+        }, refs.animateTimeout.current);
+      }
+    }
+  }, [init, animate]);
+  _react.default.useEffect(() => {
+    make();
+    initMethod();
+  }, [values, theme, animate, init, !!(refs.path.current && refs.pathBackground.current)]);
+  _react.default.useEffect(() => {
+    make();
+  }, [rects === null || rects === void 0 ? void 0 : rects.wrapper]);
+  return value && /*#__PURE__*/_react.default.cloneElement(value, _objectSpread({
+    className
+  }, other));
 });
+
 // Parts of the logic done thanks to
 // https://francoisromain.medium.com/smooth-a-svg-path-with-cubic-bezier-curves-e37b49d46c74
+
 // Copyright (c) 2022 by François Romain (https://codepen.io/francoisromain/pen/YxyEQL)
+
 // Permission is hereby granted, free of charge, to any person obtaining a copy of this software and associated documentation files (the "Software"), to deal in the Software without restriction, including without limitation the rights to use, copy, modify, merge, publish, distribute, sublicense, and/or sell copies of the Software, and to permit persons to whom the Software is furnished to do so, subject to the following conditions:
+
 // The above copyright notice and this permission notice shall be included in all copies or substantial portions of the Software.
+
 // THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY, FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM, OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE SOFTWARE.
+
 AreaChartItem.displayName = 'onesy-AreaChartItem';
-exports.default = AreaChartItem;
+var _default = exports.default = AreaChartItem;

package/AreaChartItem/index.js

@@ -1,8 +1,13 @@
 "use strict";
-var __importDefault = (this && this.__importDefault) || function (mod) {
-    return (mod && mod.__esModule) ? mod : { "default": mod };
-};
-Object.defineProperty(exports, "__esModule", { value: true });
-exports.default = void 0;
-var AreaChartItem_1 = require("./AreaChartItem");
-Object.defineProperty(exports, "default", { enumerable: true, get: function () { return __importDefault(AreaChartItem_1).default; } });
+
+var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+Object.defineProperty(exports, "default", {
+  enumerable: true,
+  get: function () {
+    return _AreaChartItem.default;
+  }
+});
+var _AreaChartItem = _interopRequireDefault(require("./AreaChartItem"));