@alfalab/core-components 20.4.0 → 20.7.1

package/chart/components/CustomizedLabel.js

@@ -0,0 +1,18 @@
+Object.defineProperty(exports, '__esModule', { value: true });
+
+var React = require('react');
+require('../hooks/usePathBar/utils/getRadius.js');
+var hooks_usePathBar_index = require('../hooks/usePathBar/index.js');
+
+function _interopDefaultLegacy (e) { return e && typeof e === 'object' && 'default' in e ? e : { 'default': e }; }
+
+var React__default = /*#__PURE__*/_interopDefaultLegacy(React);
+
+var CustomizedLabel = function (_a) {
+    var x = _a.x, y = _a.y, value = _a.value, offset = _a.offset, radius = _a.radius, height = _a.height, width = _a.width, formatter = _a.formatter;
+    var initHeight = hooks_usePathBar_index.usePathBar({ radius: radius, height: height })[0];
+    return (React__default['default'].createElement("text", { x: x + width / 2, y: y + height - (initHeight + offset), width: width, height: initHeight, textAnchor: 'middle' },
+        React__default['default'].createElement("tspan", { x: x + width / 2 }, formatter ? formatter(value) : value)));
+};
+
+exports.CustomizedLabel = CustomizedLabel;

package/chart/components/Dot/index.css

@@ -1,19 +1,19 @@
-/* hash: 1pu5t */
-.chart__dotUnfocused_1pu5t {
+/* hash: 1wctd */
+.chart__dotUnfocused_1wctd {
     opacity: 0.3;
 }
 
-.chart__dot_1pu5t,
-.chart__dotItem_1pu5t,
-.chart__dotWrap_1pu5t {
+.chart__dot_1wctd,
+.chart__dotItem_1wctd,
+.chart__dotWrap_1wctd {
     transition: all 0.2s ease;
 }
 
-.chart__dot_1pu5t {
-    animation: chart__showDot_1pu5t 0.5s ease;
+.chart__dot_1wctd {
+    animation: chart__showDot_1wctd 0.5s ease;
 }
 
-@keyframes chart__showDot_1pu5t {
+@keyframes chart__showDot_1wctd {
     from {
         opacity: 0;
     }

package/chart/components/Dot/index.js

@@ -9,7 +9,7 @@ function _interopDefaultLegacy (e) { return e && typeof e === 'object' && 'defau
 var React__default = /*#__PURE__*/_interopDefaultLegacy(React);
 var cn__default = /*#__PURE__*/_interopDefaultLegacy(cn);
 
-var styles = {"dotUnfocused":"chart__dotUnfocused_1pu5t","dot":"chart__dot_1pu5t","dotItem":"chart__dotItem_1pu5t","dotWrap":"chart__dotWrap_1pu5t","showDot":"chart__showDot_1pu5t"};
+var styles = {"dotUnfocused":"chart__dotUnfocused_1wctd","dot":"chart__dot_1wctd","dotItem":"chart__dotItem_1wctd","dotWrap":"chart__dotWrap_1wctd","showDot":"chart__showDot_1wctd"};
 require('./index.css');
 
 var Dot = React__default['default'].forwardRef(function (_a, ref) {

package/chart/components/Legends/index.css

@@ -1,4 +1,4 @@
-/* hash: hkiwp */
+/* hash: zwswg */
 :root {
 
     /* Hard */
@@ -10,31 +10,31 @@
 :root {
     --gap-2xl: 32px;
 }
-.chart__legendContent_hkiwp {
+.chart__legendContent_zwswg {
     display: flex;
     align-items: center;
     flex-wrap: wrap;
 }
-.chart__legendWrap_hkiwp {
+.chart__legendWrap_zwswg {
     width: 100%;
     margin: 0;
     padding: 0;
 }
-.chart__legendItem_hkiwp {
+.chart__legendItem_zwswg {
     margin-right: var(--gap-2xl);
     cursor: pointer;
     display: inline-block;
 }
-.chart__legendItem_hkiwp:last-child {
+.chart__legendItem_zwswg:last-child {
     margin-right: 0;
 }
-.chart__legendUnactive_hkiwp {
+.chart__legendUnactive_zwswg {
     opacity: 0.3;
 }
-.chart__legendIcon_hkiwp {
+.chart__legendIcon_zwswg {
     margin-right: 13px;
     display: flex;
 }
-.chart__legendValue_hkiwp {
+.chart__legendValue_zwswg {
     text-transform: capitalize;
 }

package/chart/components/Legends/index.js

@@ -13,7 +13,7 @@ function _interopDefaultLegacy (e) { return e && typeof e === 'object' && 'defau
 var React__default = /*#__PURE__*/_interopDefaultLegacy(React);
 var cn__default = /*#__PURE__*/_interopDefaultLegacy(cn);
 
-var styles = {"legendContent":"chart__legendContent_hkiwp","legendWrap":"chart__legendWrap_hkiwp","legendItem":"chart__legendItem_hkiwp","legendUnactive":"chart__legendUnactive_hkiwp","legendIcon":"chart__legendIcon_hkiwp","legendValue":"chart__legendValue_hkiwp"};
+var styles = {"legendContent":"chart__legendContent_zwswg","legendWrap":"chart__legendWrap_zwswg","legendItem":"chart__legendItem_zwswg","legendUnactive":"chart__legendUnactive_zwswg","legendIcon":"chart__legendIcon_zwswg","legendValue":"chart__legendValue_zwswg"};
 require('./index.css');
 
 var icons = {

package/chart/components/RectBar.d.ts

@@ -0,0 +1,4 @@
+/// <reference types="react" />
+import React from 'react';
+declare const _default: React.MemoExoticComponent<({ fill, x, y, width, height, radius, background }: any) => JSX.Element>;
+export { _default as default };

package/chart/components/RectBar.js

@@ -0,0 +1,30 @@
+var React = require('react');
+require('../hooks/usePathBar/utils/getRadius.js');
+var hooks_usePathBar_index = require('../hooks/usePathBar/index.js');
+
+function _interopDefaultLegacy (e) { return e && typeof e === 'object' && 'default' in e ? e : { 'default': e }; }
+
+var React__default = /*#__PURE__*/_interopDefaultLegacy(React);
+
+// eslint-disable-next-line complexity
+var getPath = function (x, width, height, initHeight, topRadius, bottomRadius, initY) {
+    return "\n        M" + (x + ((height !== 0 && bottomRadius) || 0)) + " " + (initY + initHeight || 0) + "\n        Q" + x + " " + (initY + initHeight) + " " + x + " " + (initY +
+        initHeight -
+        ((height !== 0 && bottomRadius) || 0)) + "\n        L" + x + " " + (initY + ((height !== 0 && topRadius) || 0)) + "\n        Q" + x + " " + initY + " " + (x + ((height !== 0 && topRadius) || 0)) + " " + initY + "\n        L" + (x + width - ((height !== 0 && topRadius) || 0)) + " " + initY + "\n        Q" + (x + width) + " " + initY + " " + (x + width) + " " + (initY + (topRadius || 0)) + "\n        L" + (x + width) + " " + (initY + initHeight - ((height !== 0 && bottomRadius) || 0)) + "\n        Q" + (x + width) + " " + (initY + initHeight) + " " + (x +
+        width -
+        ((height !== 0 && bottomRadius) || 0)) + " " + (initY + initHeight) + "\n        Z\n    ";
+};
+var RectBar = function (_a) {
+    var fill = _a.fill, x = _a.x, y = _a.y, width = _a.width, height = _a.height, radius = _a.radius, background = _a.background;
+    var _b = hooks_usePathBar_index.usePathBar({
+        radius: radius,
+        height: height,
+        background: background,
+        y: y,
+    }), initHeight = _b[0], topRadius = _b[1], bottomRadius = _b[2], initY = _b[3];
+    var path = React.useMemo(function () { return (React__default['default'].createElement("path", { d: getPath(x, width, height, initHeight, topRadius, bottomRadius, initY), stroke: 'none', fill: fill })); }, [x, width, height, initHeight, topRadius, bottomRadius, initY, fill]);
+    return React__default['default'].createElement(React__default['default'].Fragment, null, path);
+};
+var RectBar$1 = React__default['default'].memo(RectBar);
+
+module.exports = RectBar$1;

package/chart/components/Tick/index.css

@@ -1,4 +1,4 @@
-/* hash: 11yg1 */
+/* hash: 1vfd9 */
 :root {
     --color-dark-bg-primary: #0b1f35;
     --color-light-text-primary: #0b1f35;
@@ -11,17 +11,17 @@
 
     /* Hard up */
 }
-.chart__tickText_11yg1 {
+.chart__tickText_1vfd9 {
     fill: var(--color-light-text-primary);
     font-size: 16px;
     line-height: 24px;
     font-weight: 400;
 }
-.chart__circle_11yg1 {
+.chart__circle_1vfd9 {
     opacity: 0.3;
     fill: var(--color-dark-bg-primary);
 }
-.chart__circle_11yg1 {
+.chart__circle_1vfd9 {
     opacity: 0.3;
     fill: var(--color-dark-bg-primary);
 }

package/chart/components/Tick/index.js

@@ -8,7 +8,7 @@ function _interopDefaultLegacy (e) { return e && typeof e === 'object' && 'defau
 var React__default = /*#__PURE__*/_interopDefaultLegacy(React);
 var cn__default = /*#__PURE__*/_interopDefaultLegacy(cn);
 
-var styles = {"tickText":"chart__tickText_11yg1","circle":"chart__circle_11yg1"};
+var styles = {"tickText":"chart__tickText_1vfd9","circle":"chart__circle_1vfd9"};
 require('./index.css');
 
 var Tick = function (_a) {

package/chart/components/TooltipContent/index.css

@@ -1,4 +1,4 @@
-/* hash: jgpwn */
+/* hash: 1b2rk */
 :root {
     --color-light-bg-primary: #fff;
     --color-light-border-primary: #dbdee1;
@@ -19,7 +19,7 @@
 :root {
     --border-radius-m: 8px;
 }
-.chart__tooltip_jgpwn {
+.chart__tooltip_1b2rk {
     background-color: var(--color-light-bg-primary);
     border: 1px solid var(--color-light-border-primary);
     box-shadow: var(--shadow-l);
@@ -28,17 +28,17 @@
     pointer-events: none;
     position: relative;
 }
-.chart__tooltipList_jgpwn {
+.chart__tooltipList_1b2rk {
     position: relative;
     z-index: 5;
     list-style-type: none;
     padding: 0;
     margin: 0;
 }
-.chart__tooltipItem_jgpwn {
+.chart__tooltipItem_1b2rk {
     margin-bottom: 10px;
 }
-.chart__tooltipArrow_jgpwn {
+.chart__tooltipArrow_1b2rk {
     position: absolute;
     left: 0;
     top: 50%;
@@ -48,7 +48,7 @@
     border: 1px solid var(--color-light-border-primary);
     background-color: var(--color-light-bg-primary);
 }
-.chart__tooltipArrow_jgpwn:before {
+.chart__tooltipArrow_1b2rk:before {
     content: '';
     position: absolute;
     left: -2px;
@@ -59,7 +59,7 @@
     border-width: 0 24px 24px 0;
     border-color: transparent var(--color-light-bg-primary) transparent transparent;
 }
-.chart__tooltipArrowRight_jgpwn {
+.chart__tooltipArrowRight_1b2rk {
     left: 100%;
     transform: translate(-50%, -50%) scale(-1, 1) rotate(45deg);
 }

package/chart/components/TooltipContent/index.js

@@ -9,7 +9,7 @@ function _interopDefaultLegacy (e) { return e && typeof e === 'object' && 'defau
 var React__default = /*#__PURE__*/_interopDefaultLegacy(React);
 var cn__default = /*#__PURE__*/_interopDefaultLegacy(cn);
 
-var styles = {"tooltip":"chart__tooltip_jgpwn","tooltipList":"chart__tooltipList_jgpwn","tooltipItem":"chart__tooltipItem_jgpwn","tooltipArrow":"chart__tooltipArrow_jgpwn","tooltipArrowRight":"chart__tooltipArrowRight_jgpwn"};
+var styles = {"tooltip":"chart__tooltip_1b2rk","tooltipList":"chart__tooltipList_1b2rk","tooltipItem":"chart__tooltipItem_1b2rk","tooltipArrow":"chart__tooltipArrow_1b2rk","tooltipArrowRight":"chart__tooltipArrowRight_1b2rk"};
 require('./index.css');
 
 var TooltipContent = function (_a) {

package/chart/cssm/Component.js

@@ -19,6 +19,10 @@ require('./hooks/useSettings/utils/setGradientCharts.js');
 require('./hooks/useSettings/utils/setLegendMargin.js');
 require('./hooks/useSettings/utils/sortByIndex.js');
 var hooks_useSettings_index = require('./hooks/useSettings/index.js');
+require('./hooks/usePathBar/utils/getRadius.js');
+require('./hooks/usePathBar/index.js');
+var components_CustomizedLabel = require('./components/CustomizedLabel.js');
+var components_RectBar = require('./components/RectBar.js');
 require('./components/Tick/index.module.css');
 var components_Tick_index = require('./components/Tick/index.js');
 require('./components/TooltipContent/index.module.css');
@@ -153,17 +157,19 @@ var Chart = function (props) {
         if (!state || !charts)
             return null;
         return state.series.map(function (item) {
-            var chart = item.chart, properties = item.properties;
+            var chart = item.chart, properties = item.properties, radius = item.radius, labelList = item.labelList;
             var show = charts["" + properties.dataKey];
             switch (chart) {
                 case 'bar':
-                    return show && !(item === null || item === void 0 ? void 0 : item.hide) ? (React__default['default'].createElement(recharts.Bar, tslib_es6.__assign({ key: state.id + "-" + properties.dataKey }, properties), data.map(function (_, index) {
-                        var key = state.id + "-" + properties.dataKey + "-" + index;
-                        return (React__default['default'].createElement(recharts.Cell, { key: key, className: cn__default['default'](styles__default['default'].bar, typeof activeDotsState.active === 'number' &&
-                                activeDotsState.active !== index
-                                ? styles__default['default'].unfocused
-                                : '') }));
-                    }))) : null;
+                    return show && !(item === null || item === void 0 ? void 0 : item.hide) ? (React__default['default'].createElement(recharts.Bar, tslib_es6.__assign({ key: state.id + "-" + properties.dataKey }, properties, { shape: React__default['default'].createElement(components_RectBar, { radius: radius }) }),
+                        labelList && (React__default['default'].createElement(recharts.LabelList, tslib_es6.__assign({ dataKey: properties.dataKey.toString() }, labelList, { content: React__default['default'].createElement(components_CustomizedLabel.CustomizedLabel, { radius: radius }) }))),
+                        data.map(function (_, index) {
+                            var key = state.id + "-" + properties.dataKey + "-" + index;
+                            return (React__default['default'].createElement(recharts.Cell, { key: key, className: cn__default['default'](styles__default['default'].bar, typeof activeDotsState.active === 'number' &&
+                                    activeDotsState.active !== index
+                                    ? styles__default['default'].unfocused
+                                    : '') }));
+                        }))) : null;
                 case 'area':
                 case 'line':
                     return show && !(item === null || item === void 0 ? void 0 : item.hide) ? (React__default['default'].createElement(recharts.Line, tslib_es6.__assign({ key: state.id + "-" + properties.dataKey }, properties, { dot: properties.dot && properties.dotSettings
@@ -246,11 +252,15 @@ var Chart = function (props) {
         }
     };
     var mouseMove = function (e) {
+        if (!(state === null || state === void 0 ? void 0 : state.tooltip))
+            return;
         arrowTooltipEvent(e.activeCoordinate);
         hoverEvent(e.isTooltipActive, e.activeTooltipIndex);
         leaveEvent(e.isTooltipActive);
     };
     var mouseLeave = function (e) {
+        if (!(state === null || state === void 0 ? void 0 : state.tooltip))
+            return;
         leaveEvent(e.isTooltipActive);
     };
     if (!data || !charts || !state)

package/chart/cssm/components/CustomizedLabel.d.ts

@@ -0,0 +1,4 @@
+/// <reference types="react" />
+import React from 'react';
+declare const CustomizedLabel: React.FC<any>;
+export { CustomizedLabel };

package/chart/cssm/components/CustomizedLabel.js

@@ -0,0 +1,18 @@
+Object.defineProperty(exports, '__esModule', { value: true });
+
+var React = require('react');
+require('../hooks/usePathBar/utils/getRadius.js');
+var hooks_usePathBar_index = require('../hooks/usePathBar/index.js');
+
+function _interopDefaultLegacy (e) { return e && typeof e === 'object' && 'default' in e ? e : { 'default': e }; }
+
+var React__default = /*#__PURE__*/_interopDefaultLegacy(React);
+
+var CustomizedLabel = function (_a) {
+    var x = _a.x, y = _a.y, value = _a.value, offset = _a.offset, radius = _a.radius, height = _a.height, width = _a.width, formatter = _a.formatter;
+    var initHeight = hooks_usePathBar_index.usePathBar({ radius: radius, height: height })[0];
+    return (React__default['default'].createElement("text", { x: x + width / 2, y: y + height - (initHeight + offset), width: width, height: initHeight, textAnchor: 'middle' },
+        React__default['default'].createElement("tspan", { x: x + width / 2 }, formatter ? formatter(value) : value)));
+};
+
+exports.CustomizedLabel = CustomizedLabel;

package/chart/cssm/components/RectBar.d.ts

@@ -0,0 +1,4 @@
+/// <reference types="react" />
+import React from 'react';
+declare const _default: React.MemoExoticComponent<({ fill, x, y, width, height, radius, background }: any) => JSX.Element>;
+export { _default as default };

package/chart/cssm/components/RectBar.js

@@ -0,0 +1,30 @@
+var React = require('react');
+require('../hooks/usePathBar/utils/getRadius.js');
+var hooks_usePathBar_index = require('../hooks/usePathBar/index.js');
+
+function _interopDefaultLegacy (e) { return e && typeof e === 'object' && 'default' in e ? e : { 'default': e }; }
+
+var React__default = /*#__PURE__*/_interopDefaultLegacy(React);
+
+// eslint-disable-next-line complexity
+var getPath = function (x, width, height, initHeight, topRadius, bottomRadius, initY) {
+    return "\n        M" + (x + ((height !== 0 && bottomRadius) || 0)) + " " + (initY + initHeight || 0) + "\n        Q" + x + " " + (initY + initHeight) + " " + x + " " + (initY +
+        initHeight -
+        ((height !== 0 && bottomRadius) || 0)) + "\n        L" + x + " " + (initY + ((height !== 0 && topRadius) || 0)) + "\n        Q" + x + " " + initY + " " + (x + ((height !== 0 && topRadius) || 0)) + " " + initY + "\n        L" + (x + width - ((height !== 0 && topRadius) || 0)) + " " + initY + "\n        Q" + (x + width) + " " + initY + " " + (x + width) + " " + (initY + (topRadius || 0)) + "\n        L" + (x + width) + " " + (initY + initHeight - ((height !== 0 && bottomRadius) || 0)) + "\n        Q" + (x + width) + " " + (initY + initHeight) + " " + (x +
+        width -
+        ((height !== 0 && bottomRadius) || 0)) + " " + (initY + initHeight) + "\n        Z\n    ";
+};
+var RectBar = function (_a) {
+    var fill = _a.fill, x = _a.x, y = _a.y, width = _a.width, height = _a.height, radius = _a.radius, background = _a.background;
+    var _b = hooks_usePathBar_index.usePathBar({
+        radius: radius,
+        height: height,
+        background: background,
+        y: y,
+    }), initHeight = _b[0], topRadius = _b[1], bottomRadius = _b[2], initY = _b[3];
+    var path = React.useMemo(function () { return (React__default['default'].createElement("path", { d: getPath(x, width, height, initHeight, topRadius, bottomRadius, initY), stroke: 'none', fill: fill })); }, [x, width, height, initHeight, topRadius, bottomRadius, initY, fill]);
+    return React__default['default'].createElement(React__default['default'].Fragment, null, path);
+};
+var RectBar$1 = React__default['default'].memo(RectBar);
+
+module.exports = RectBar$1;

package/chart/cssm/hooks/usePathBar/index.d.ts

@@ -0,0 +1,14 @@
+import { RadiusProp } from "../../types/seria.types";
+type usePathBarProps = {
+    radius?: RadiusProp;
+    height: number;
+    background?: {
+        x: number;
+        y: number;
+        height: number;
+        width: number;
+    };
+    y?: number;
+};
+declare const usePathBar: (props: usePathBarProps) => number[];
+export { usePathBarProps, usePathBar };

package/chart/cssm/hooks/usePathBar/index.js

@@ -0,0 +1,39 @@
+Object.defineProperty(exports, '__esModule', { value: true });
+
+var React = require('react');
+var hooks_usePathBar_utils_getRadius = require('./utils/getRadius.js');
+
+var usePathBar = function (props) {
+    var _a = React.useState(0), topRadius = _a[0], setTopRadius = _a[1];
+    var _b = React.useState(0), bottomRadius = _b[0], setBottomRadius = _b[1];
+    var _c = React.useState(0), initHeight = _c[0], setInitHeight = _c[1];
+    var _d = React.useState(0), initY = _d[0], setInitY = _d[1];
+    React.useEffect(function () {
+        var radius = props.radius, height = props.height, background = props.background, y = props.y;
+        var radiusTop = (radius === null || radius === void 0 ? void 0 : radius.top) ? hooks_usePathBar_utils_getRadius.getRadius(height, radius.top) : 0;
+        var radiusBottom = (radius === null || radius === void 0 ? void 0 : radius.bottom) ? hooks_usePathBar_utils_getRadius.getRadius(height, radius.bottom) : 0;
+        var heightCheck = (radius && height !== 0 && height / 2 < ((radius === null || radius === void 0 ? void 0 : radius.top) || 0)) ||
+            height / 2 < ((radius === null || radius === void 0 ? void 0 : radius.bottom) || 0);
+        // eslint-disable-next-line no-nested-ternary
+        var heightInit = heightCheck
+            ? (radiusTop || radiusBottom) && radiusTop + radiusBottom
+            : height > 0 && height < 2
+                ? 2
+                : height;
+        if (background && y) {
+            var yInit = heightCheck
+                ? background.height + background.y - (radiusTop + radiusBottom)
+                : y;
+            setInitY(yInit);
+        }
+        if (radiusTop !== 0)
+            setTopRadius(radiusTop);
+        if (radiusBottom !== 0)
+            setBottomRadius(radiusBottom);
+        if (heightInit !== 0)
+            setInitHeight(heightInit);
+    }, [props]);
+    return [initHeight, topRadius, bottomRadius, initY];
+};
+
+exports.usePathBar = usePathBar;

package/chart/cssm/hooks/usePathBar/utils/getRadius.d.ts

@@ -0,0 +1,2 @@
+declare const getRadius: (height: number, radius: number) => number;
+export { getRadius };

package/chart/cssm/hooks/usePathBar/utils/getRadius.js

@@ -0,0 +1,8 @@
+Object.defineProperty(exports, '__esModule', { value: true });
+
+var getRadius = function (height, radius) {
+    var result = radius && height / 2 < radius ? Math.ceil(height / 2) : radius || 0;
+    return result;
+};
+
+exports.getRadius = getRadius;

package/chart/cssm/hooks/useSettings/index.js

@@ -1,6 +1,6 @@
 Object.defineProperty(exports, '__esModule', { value: true });
 
-require('../../tslib.es6-2be2aee7.js');
+var tslib_es6 = require('../../tslib.es6-2be2aee7.js');
 var React = require('react');
 var hooks_useSettings_utils_setComposedChartsMargin = require('./utils/setComposedChartsMargin.js');
 var hooks_useSettings_utils_setDatas = require('./utils/setDatas.js');
@@ -15,7 +15,7 @@ var useSettings = function (options) {
     var _d = React.useState(0), filterCount = _d[0], setFilterCount = _d[1];
     React.useEffect(function () {
         var _a;
-        var settings = JSON.parse(JSON.stringify(options));
+        var settings = tslib_es6.__assign({}, options);
         var brush = settings.brush, legend = settings.legend, series = settings.series, labels = settings.labels, composeChart = settings.composeChart, xAxis = settings.xAxis;
         if (((_a = settings.legend) === null || _a === void 0 ? void 0 : _a.margin) && brush && legend)
             settings.legend.margin.top = hooks_useSettings_utils_setLegendMargin.setLegendMargin(brush, legend);

package/chart/cssm/icons/Circle.js

@@ -8,7 +8,7 @@ var React__default = /*#__PURE__*/_interopDefaultLegacy(React);
 
 var CircleIcon = function (_a) {
     var _b = _a.fill, fill = _b === void 0 ? '#FF5C5C' : _b, _c = _a.height, height = _c === void 0 ? 16 : _c;
-    return (React__default['default'].createElement("svg", { xmlns: 'http://www.w3.org/2000/svg', width: 'auto', height: height, viewBox: '0 0 16 16', fill: 'none' },
+    return (React__default['default'].createElement("svg", { xmlns: 'http://www.w3.org/2000/svg', height: height, viewBox: '0 0 16 16', fill: 'none' },
         React__default['default'].createElement("circle", { cx: '8', cy: '8', r: '8', fill: fill })));
 };
 

package/chart/cssm/icons/CircleLine.js

@@ -8,7 +8,7 @@ var React__default = /*#__PURE__*/_interopDefaultLegacy(React);
 
 var CircleLineIcon = function (_a) {
     var _b = _a.fill, fill = _b === void 0 ? '#FF5C5C' : _b, _c = _a.height, height = _c === void 0 ? 16 : _c;
-    return (React__default['default'].createElement("svg", { xmlns: 'http://www.w3.org/2000/svg', width: 'auto', height: height, viewBox: '0 0 22 12', fill: 'none' },
+    return (React__default['default'].createElement("svg", { xmlns: 'http://www.w3.org/2000/svg', height: height, viewBox: '0 0 22 12', fill: 'none' },
         React__default['default'].createElement("circle", { cx: '11', cy: '6', r: '6', fill: fill }),
         React__default['default'].createElement("rect", { y: '5', width: '22', height: '2', fill: fill })));
 };

package/chart/cssm/icons/StrokeCircle.js

@@ -8,7 +8,7 @@ var React__default = /*#__PURE__*/_interopDefaultLegacy(React);
 
 var StrokeCircleIcon = function (_a) {
     var _b = _a.fill, fill = _b === void 0 ? '#5A8ECF' : _b, _c = _a.height, height = _c === void 0 ? 16 : _c;
-    return (React__default['default'].createElement("svg", { xmlns: 'http://www.w3.org/2000/svg', width: 'auto', height: height, viewBox: '0 0 22 22', fill: 'none' },
+    return (React__default['default'].createElement("svg", { xmlns: 'http://www.w3.org/2000/svg', height: height, viewBox: '0 0 22 22', fill: 'none' },
         React__default['default'].createElement("circle", { cx: '11', cy: '11', r: '10', stroke: fill, strokeWidth: '2', strokeDasharray: '8 8' })));
 };
 

package/chart/cssm/index.js

@@ -20,6 +20,10 @@ require('./hooks/useSettings/utils/setGradientCharts.js');
 require('./hooks/useSettings/utils/setLegendMargin.js');
 require('./hooks/useSettings/utils/sortByIndex.js');
 require('./hooks/useSettings/index.js');
+require('./hooks/usePathBar/utils/getRadius.js');
+require('./hooks/usePathBar/index.js');
+require('./components/CustomizedLabel.js');
+require('./components/RectBar.js');
 require('./components/Tick/index.module.css');
 require('./components/Tick/index.js');
 require('./components/TooltipContent/index.module.css');

package/chart/cssm/types/labelList.types.d.ts

@@ -0,0 +1,5 @@
+interface LabelListProps {
+    formatter: Function;
+    ofsset: number;
+}
+export { LabelListProps };

package/chart/cssm/types/labelList.types.js

@@ -0,0 +1 @@
+

package/chart/cssm/types/seria.types.d.ts

@@ -1,6 +1,11 @@
 import { ChartProps } from "./chart.types";
+import { LabelListProps } from "./labelList.types";
 import { DataProps } from "./utils/data.types";
 import { GradientProps } from "./utils/gradient.types";
+type RadiusProp = {
+    top?: number;
+    bottom?: number;
+};
 interface SeriaProps {
     /**
      * Скрыть график
@@ -22,6 +27,10 @@ interface SeriaProps {
      * Тип графика
      */
     chart: 'line' | 'area' | 'bar' | 'gradient';
+    /**
+     * Радиус закругления углов графика типа bar
+     */
+    radius?: RadiusProp;
     /**
      * Тип иконки для графика
      */
@@ -47,6 +56,10 @@ interface SeriaProps {
          */
         points: GradientProps[];
     };
+    /**
+     * Параметры labels для графика типа bar
+     */
+    labelList?: LabelListProps;
     /**
      * Параметры графика
      */
@@ -56,4 +69,4 @@ interface SeriaProps {
      */
     data: DataProps[];
 }
-export { SeriaProps };
+export { RadiusProp, SeriaProps };

package/chart/esm/Component.js

@@ -1,7 +1,7 @@
-import { _ as __assign } from './tslib.es6-defbba9d.js';
+import { _ as __assign } from './tslib.es6-a3fbf5e6.js';
 import React, { useState, useRef, useMemo, useCallback, useEffect } from 'react';
 import cn from 'classnames';
-import { Legend, CartesianGrid, XAxis, YAxis, Brush, Tooltip, Area, Line, Bar, Cell, ResponsiveContainer, ComposedChart } from 'recharts';
+import { Legend, CartesianGrid, XAxis, YAxis, Brush, Tooltip, Area, Line, Bar, LabelList, Cell, ResponsiveContainer, ComposedChart } from 'recharts';
 import { LinearGradient } from './components/LinearGradient.js';
 import '../../typography/esm';
 import './icons/Circle.js';
@@ -17,6 +17,10 @@ import './hooks/useSettings/utils/setGradientCharts.js';
 import './hooks/useSettings/utils/setLegendMargin.js';
 import './hooks/useSettings/utils/sortByIndex.js';
 import { useSettings } from './hooks/useSettings/index.js';
+import './hooks/usePathBar/utils/getRadius.js';
+import './hooks/usePathBar/index.js';
+import { CustomizedLabel } from './components/CustomizedLabel.js';
+import RectBar$1 from './components/RectBar.js';
 import { Tick } from './components/Tick/index.js';
 import { TooltipContent } from './components/TooltipContent/index.js';
 
@@ -27,7 +31,7 @@ var CustomizedHOC = function (Component, options) {
     return NewComponent;
 };
 
-var styles = {"coreChart":"chart__coreChart_y5qhn","bar":"chart__bar_y5qhn","unfocused":"chart__unfocused_y5qhn"};
+var styles = {"coreChart":"chart__coreChart_ftghw","bar":"chart__bar_ftghw","unfocused":"chart__unfocused_ftghw"};
 require('./index.css');
 
 var Chart = function (props) {
@@ -145,17 +149,19 @@ var Chart = function (props) {
         if (!state || !charts)
             return null;
         return state.series.map(function (item) {
-            var chart = item.chart, properties = item.properties;
+            var chart = item.chart, properties = item.properties, radius = item.radius, labelList = item.labelList;
             var show = charts["" + properties.dataKey];
             switch (chart) {
                 case 'bar':
-                    return show && !(item === null || item === void 0 ? void 0 : item.hide) ? (React.createElement(Bar, __assign({ key: state.id + "-" + properties.dataKey }, properties), data.map(function (_, index) {
-                        var key = state.id + "-" + properties.dataKey + "-" + index;
-                        return (React.createElement(Cell, { key: key, className: cn(styles.bar, typeof activeDotsState.active === 'number' &&
-                                activeDotsState.active !== index
-                                ? styles.unfocused
-                                : '') }));
-                    }))) : null;
+                    return show && !(item === null || item === void 0 ? void 0 : item.hide) ? (React.createElement(Bar, __assign({ key: state.id + "-" + properties.dataKey }, properties, { shape: React.createElement(RectBar$1, { radius: radius }) }),
+                        labelList && (React.createElement(LabelList, __assign({ dataKey: properties.dataKey.toString() }, labelList, { content: React.createElement(CustomizedLabel, { radius: radius }) }))),
+                        data.map(function (_, index) {
+                            var key = state.id + "-" + properties.dataKey + "-" + index;
+                            return (React.createElement(Cell, { key: key, className: cn(styles.bar, typeof activeDotsState.active === 'number' &&
+                                    activeDotsState.active !== index
+                                    ? styles.unfocused
+                                    : '') }));
+                        }))) : null;
                 case 'area':
                 case 'line':
                     return show && !(item === null || item === void 0 ? void 0 : item.hide) ? (React.createElement(Line, __assign({ key: state.id + "-" + properties.dataKey }, properties, { dot: properties.dot && properties.dotSettings
@@ -238,11 +244,15 @@ var Chart = function (props) {
         }
     };
     var mouseMove = function (e) {
+        if (!(state === null || state === void 0 ? void 0 : state.tooltip))
+            return;
         arrowTooltipEvent(e.activeCoordinate);
         hoverEvent(e.isTooltipActive, e.activeTooltipIndex);
         leaveEvent(e.isTooltipActive);
     };
     var mouseLeave = function (e) {
+        if (!(state === null || state === void 0 ? void 0 : state.tooltip))
+            return;
         leaveEvent(e.isTooltipActive);
     };
     if (!data || !charts || !state)