@rio-cloud/rio-uikit 0.16.4-beta.7 → 1.0.0

package/lib/es/components/calendarStripe/CalendarStripe.js

@@ -3,9 +3,9 @@ Object.defineProperty(exports, "__esModule", { value: true });
 const tslib_1 = require("tslib");
 const jsx_runtime_1 = require("react/jsx-runtime");
 const react_1 = tslib_1.__importStar(require("react"));
-const prop_types_1 = tslib_1.__importDefault(require("prop-types"));
 const classnames_1 = tslib_1.__importDefault(require("classnames"));
 const framer_motion_1 = require("framer-motion");
+const noop_1 = tslib_1.__importDefault(require("lodash/noop"));
 const useAfterMount_1 = tslib_1.__importDefault(require("../../hooks/useAfterMount"));
 const useElementSize_1 = tslib_1.__importDefault(require("../../hooks/useElementSize"));
 const usePrevious_1 = tslib_1.__importDefault(require("../../hooks/usePrevious"));
@@ -17,34 +17,34 @@ const ANIMATION_NEXT = 'page';
 const ANIMATION_BACK = 'pageBack';
 const ITEM_NAME = 'ColumnItem';
 const variants = {
-    pageEnter: pageDirection => {
-        return {
-            x: pageDirection === ANIMATION_NEXT ? '60%' : '-60%',
-            opacity: 0,
-        };
-    },
-    pageCenter: () => {
-        return {
-            x: 0,
-            opacity: 1,
-        };
-    },
+    pageEnter: (pageDirection) => ({
+        x: pageDirection === ANIMATION_NEXT ? '60%' : '-60%',
+        opacity: 0,
+    }),
+    pageCenter: () => ({ x: 0, opacity: 1 }),
 };
-const getDateString = date => date.toISOString().split('T').at(0);
-const getFirstColumnItem = node => {
+const getDateString = (date) => date.toISOString().split('T').at(0);
+const getFirstColumnItem = (node) => {
     if ([...node.classList].includes(ITEM_NAME)) {
         return node;
     }
     return getFirstColumnItem(node.children[0]);
 };
 const CalendarStripe = (0, react_1.forwardRef)((props, ref) => {
-    const { minDayWith = DEFAULT_MIN_WITH, minDays = DEFAULT_MIN_DAYS, maxDays = DEFAULT_MAX_DAYS, render, skipWeekends, startDate = new Date(), onNextClick, onPreviousClick, buttonClassName, className, } = props;
+    const { minDayWith = DEFAULT_MIN_WITH, minDays = DEFAULT_MIN_DAYS, maxDays = DEFAULT_MAX_DAYS, render, renderDay, skipWeekends = false, startDate = new Date(), onNextClick = noop_1.default, onPreviousClick = noop_1.default, buttonClassName = '', className = '', } = props;
+    if (render) {
+        console.warn('CalendarStripe has set the "render" prop deprecated. This will be removed in the upcoming releases,' +
+            ' Please use the "renderDay" prop instead.');
+    }
+    if (!render && !renderDay) {
+        console.error('CalendarStripe component is missing the required "renderDay" prop');
+    }
     const [firstDate, setFirstDate] = (0, react_1.useState)(startDate);
     const [amountOfDaysToShow, setAmountOfDaysToShow] = (0, react_1.useState)(1);
     const [enableInitialAnimation, setEnableInitialAnimation] = (0, react_1.useState)(false);
     // The base for reacting on changing width of the wrapping element.
     // It uses a ResizeObserver under the hood.
-    const columnWrapperRef = (0, react_1.useRef)();
+    const columnWrapperRef = (0, react_1.useRef)(null);
     const [columnWrapperWidth] = (0, useElementSize_1.default)(columnWrapperRef);
     const previous = (0, usePrevious_1.default)(getDateString(firstDate));
     const animationDirection = getDateString(firstDate) > previous ? ANIMATION_NEXT : ANIMATION_BACK;
@@ -56,7 +56,7 @@ const CalendarStripe = (0, react_1.forwardRef)((props, ref) => {
     }
     (0, useAfterMount_1.default)(() => {
         setEnableInitialAnimation(true);
-    });
+    }, []);
     (0, react_1.useLayoutEffect)(() => {
         if (!columnWrapperRef.current) {
             return;
@@ -119,30 +119,6 @@ const CalendarStripe = (0, react_1.forwardRef)((props, ref) => {
     }
     const wrapperClassName = (0, classnames_1.default)('CalenderStripe', 'display-flex', 'align-items-center', 'overflow-hidden', 'bg-white', 'border', 'rounded', className);
     const baseButtonClassName = (0, classnames_1.default)('align-items-center', 'align-self-stretch', 'display-flex', 'hover-scale-105', 'hover-text-color-darkest', 'padding-10', 'cursor-pointer', 'text-color-darker', 'text-size-12', buttonClassName);
-    return ((0, jsx_runtime_1.jsxs)("div", Object.assign({ ref: ref, className: wrapperClassName }, { children: [(0, jsx_runtime_1.jsx)("div", Object.assign({ className: baseButtonClassName, onClick: handlePrev }, { children: (0, jsx_runtime_1.jsx)("span", { className: 'rioglyph rioglyph-chevron-left' }) })), (0, jsx_runtime_1.jsx)("div", Object.assign({ className: 'flex-1-1 overflow-hidden', ref: columnWrapperRef }, { children: (0, jsx_runtime_1.jsx)(framer_motion_1.AnimatePresence, Object.assign({ exitBeforeEnter: true, custom: animationDirection }, { children: (0, jsx_runtime_1.jsx)(framer_motion_1.motion.div, Object.assign({ variants: variants, initial: enableInitialAnimation ? 'pageEnter' : false, animate: 'pageCenter', custom: animationDirection, transition: { duration: ANIMATION_DURATION } }, { children: (0, jsx_runtime_1.jsx)("div", Object.assign({ className: 'ColumnWrapper display-flex space-x--1 user-select-none' }, { children: dates.map(date => ((0, jsx_runtime_1.jsx)("div", Object.assign({ className: `${ITEM_NAME} flex-1-1` }, { children: react_1.default.cloneElement(render, {
-                                    date,
-                                }) }), `${getDateString(date)}`))) })) }), getDateString(firstDate)) })) })), (0, jsx_runtime_1.jsx)("div", Object.assign({ className: baseButtonClassName, onClick: handleNext }, { children: (0, jsx_runtime_1.jsx)("span", { className: 'rioglyph rioglyph-chevron-right' }) }))] })));
+    return ((0, jsx_runtime_1.jsxs)("div", Object.assign({ ref: ref, className: wrapperClassName }, { children: [(0, jsx_runtime_1.jsx)("div", Object.assign({ className: baseButtonClassName, onClick: handlePrev }, { children: (0, jsx_runtime_1.jsx)("span", { className: 'rioglyph rioglyph-chevron-left' }) })), (0, jsx_runtime_1.jsx)("div", Object.assign({ className: 'flex-1-1 overflow-hidden', ref: columnWrapperRef }, { children: (0, jsx_runtime_1.jsx)(framer_motion_1.AnimatePresence, Object.assign({ exitBeforeEnter: true, custom: animationDirection }, { children: (0, jsx_runtime_1.jsx)(framer_motion_1.motion.div, Object.assign({ variants: variants, initial: enableInitialAnimation ? 'pageEnter' : false, animate: 'pageCenter', custom: animationDirection, transition: { duration: ANIMATION_DURATION } }, { children: (0, jsx_runtime_1.jsx)("div", Object.assign({ className: 'ColumnWrapper display-flex space-x--1 user-select-none' }, { children: dates.map(date => ((0, jsx_runtime_1.jsxs)("div", Object.assign({ className: `${ITEM_NAME} flex-1-1` }, { children: [renderDay ? renderDay(date) : null, render && react_1.default.cloneElement((0, jsx_runtime_1.jsx)(jsx_runtime_1.Fragment, { children: render }), { date })] }), `${getDateString(date)}`))) })) }), getDateString(firstDate)) })) })), (0, jsx_runtime_1.jsx)("div", Object.assign({ className: baseButtonClassName, onClick: handleNext }, { children: (0, jsx_runtime_1.jsx)("span", { className: 'rioglyph rioglyph-chevron-right' }) }))] })));
 });
-CalendarStripe.defaultProps = {
-    minDayWith: DEFAULT_MIN_WITH,
-    minDays: DEFAULT_MIN_DAYS,
-    maxDays: DEFAULT_MAX_DAYS,
-    skipWeekends: false,
-    onNextClick: () => { },
-    onPreviousClick: () => { },
-    buttonClassName: '',
-    className: '',
-};
-CalendarStripe.propTypes = {
-    minDayWith: prop_types_1.default.number,
-    minDays: prop_types_1.default.number,
-    maxDays: prop_types_1.default.number,
-    render: prop_types_1.default.node.isRequired,
-    skipWeekends: prop_types_1.default.bool,
-    startDate: prop_types_1.default.instanceOf(Date),
-    onNextClick: prop_types_1.default.func,
-    onPreviousClick: prop_types_1.default.func,
-    buttonClassName: prop_types_1.default.string,
-    className: prop_types_1.default.string,
-};
 exports.default = CalendarStripe;

package/lib/es/components/carousel/Carousel.d.ts

@@ -1,2 +1,8 @@
-export { _Carousel as default };
-import { default as _Carousel } from "react-bootstrap/Carousel";
+declare const Carousel: import("react-bootstrap/esm/helpers").BsPrefixRefForwardingComponent<"div", import("react-bootstrap/Carousel").CarouselProps> & {
+    Caption: import("react-bootstrap/esm/helpers").BsPrefixRefForwardingComponent<"div", unknown>;
+    Item: import("react-bootstrap/esm/CarouselItem").default;
+} & {
+    PREV: 'prev';
+    NEXT: 'next';
+};
+export default Carousel;

package/lib/es/components/carousel/Carousel.js

@@ -1,13 +1,8 @@
 "use strict";
 Object.defineProperty(exports, "__esModule", { value: true });
-exports.default = void 0;
 const tslib_1 = require("tslib");
-const react_1 = tslib_1.__importDefault(require("react"));
-// import { default as BSCarousel } from 'react-bootstrap/Carousel';
-// import { default as _Carousel } from 'react-bootstrap/Carousel';
-// const Carousel = props => {
-//     return <_Carousel {...props} />;
-// };
-// export default Carousel;
 const Carousel_1 = tslib_1.__importDefault(require("react-bootstrap/Carousel"));
-Object.defineProperty(exports, "default", { enumerable: true, get: function () { return Carousel_1.default; } });
+const Carousel = Carousel_1.default;
+Carousel.PREV = 'prev';
+Carousel.NEXT = 'next';
+exports.default = Carousel;

package/lib/es/components/charts/Area.d.ts

@@ -1,13 +1,7 @@
+/// <reference types="react" />
+import type { AreaProps as RechartsAreaProps } from 'recharts';
+export type AreaProps = Omit<RechartsAreaProps, 'ref'> & {
+    strokeColor?: string;
+};
+declare const Area: React.FC<AreaProps>;
 export default Area;
-declare function Area(): null;
-declare namespace Area {
-    namespace defaultProps {
-        const dataKey: string;
-        const dataUnit: string;
-        const strokeColor: string;
-        const gradientId: string;
-        const legendType: string;
-        const type: string;
-        const isAnimationActive: boolean;
-    }
-}

package/lib/es/components/charts/Area.js

@@ -3,9 +3,8 @@ Object.defineProperty(exports, "__esModule", { value: true });
 const Area = () => null;
 Area.defaultProps = {
     dataKey: 'value',
-    dataUnit: '',
+    unit: '',
     strokeColor: 'color-coldplay-fountain',
-    gradientId: 'areaGradient',
     legendType: 'square',
     type: 'monotone',
     isAnimationActive: true,

package/lib/es/components/charts/AreaChart.d.ts

@@ -1,17 +1,30 @@
+import React from 'react';
+import { AreaChart as RechartsAreaChart, type XAxisProps, type YAxisProps } from 'recharts';
+import { type AreaGradientProps } from './AreaGradient';
+import { type ChartTooltipProps } from './ChartTooltip';
+import { type LegendProps } from './Legend';
+import type { AreaProps } from './Area';
+import type { GridProps } from './ChartGrid';
+import type { ResponsiveContainerProps } from './ResponsiveContainer';
+type RechartsAreaChartProps = React.ComponentProps<typeof RechartsAreaChart>;
+export type AreaChartProps<T extends object> = Omit<RechartsAreaChartProps, 'data'> & {
+    width?: number;
+    height?: number;
+    data: T[];
+    dataUnit?: string;
+    dataKey?: string | number | ((obj: T) => any);
+    gradients?: React.ReactElement<AreaGradientProps>[];
+    areas: React.ReactElement<AreaProps>[];
+    xAxisOptions?: XAxisProps;
+    yAxisOptions?: YAxisProps;
+    gridOptions?: GridProps;
+    containerOptions?: ResponsiveContainerProps;
+    showXAxis?: boolean;
+    showYAxis?: boolean;
+    showGrid?: boolean;
+    legend?: React.ReactElement<LegendProps> | boolean;
+    tooltip?: React.ReactElement<ChartTooltipProps> | boolean;
+    brush?: boolean;
+};
+declare const AreaChart: <T extends object>(props: AreaChartProps<T>) => import("react/jsx-runtime").JSX.Element;
 export default AreaChart;
-declare function AreaChart(props: any): import("react/jsx-runtime").JSX.Element;
-declare namespace AreaChart {
-    namespace defaultProps {
-        const width: number;
-        const height: number;
-        const data: never[];
-        const dataUnit: string;
-        const gradients: never[];
-        const areas: never[];
-        const showXAxis: boolean;
-        const showYAxis: boolean;
-        const showGrid: boolean;
-        const brush: boolean;
-        const tooltip: import("react/jsx-runtime").JSX.Element;
-    }
-}

package/lib/es/components/charts/AreaChart.js

@@ -3,40 +3,27 @@ Object.defineProperty(exports, "__esModule", { value: true });
 const tslib_1 = require("tslib");
 const jsx_runtime_1 = require("react/jsx-runtime");
 const react_1 = require("react");
-const react_2 = tslib_1.__importDefault(require("react"));
+// @ts-ignore-next-line importsNotUsedAsValues
+require("react");
 const recharts_1 = require("recharts");
+const isObject_1 = tslib_1.__importDefault(require("lodash/fp/isObject"));
 const chartHelper_1 = require("./chartHelper");
-const AreaGradient_1 = tslib_1.__importDefault(require("./AreaGradient"));
+const AreaGradient_1 = tslib_1.__importStar(require("./AreaGradient"));
 const ChartTooltip_1 = tslib_1.__importDefault(require("./ChartTooltip"));
-const AreaChart = props => {
-    const { width, height, data, dataUnit, dataKey, gradients, areas, xAxisOptions, yAxisOptions, gridOptions, showXAxis, showYAxis, showGrid, legend, brush, tooltip } = props, remainingProps = tslib_1.__rest(props, ["width", "height", "data", "dataUnit", "dataKey", "gradients", "areas", "xAxisOptions", "yAxisOptions", "gridOptions", "showXAxis", "showYAxis", "showGrid", "legend", "brush", "tooltip"]);
+const Legend_1 = tslib_1.__importDefault(require("./Legend"));
+const AreaChart = (props) => {
+    const { width, height, data = [], dataUnit = '', dataKey = 'value', gradients = [], areas = [], xAxisOptions, yAxisOptions, gridOptions, containerOptions, showXAxis = true, showYAxis = false, showGrid = false, legend, brush = false, tooltip = true } = props, remainingProps = tslib_1.__rest(props, ["width", "height", "data", "dataUnit", "dataKey", "gradients", "areas", "xAxisOptions", "yAxisOptions", "gridOptions", "containerOptions", "showXAxis", "showYAxis", "showGrid", "legend", "brush", "tooltip"]);
     const areasWithGradient = areas.map(area => {
         const _a = area.props, { strokeColor } = _a, remainingAreaProps = tslib_1.__rest(_a, ["strokeColor"]);
         const gradientId = area.key;
         const stroke = (0, chartHelper_1.getColor)(strokeColor);
         return {
             area: (0, react_1.createElement)(recharts_1.Area, Object.assign({}, remainingAreaProps, { key: area.key, stroke: stroke, fill: `url(#${gradientId})` })),
-            gradient: (0, jsx_runtime_1.jsx)(AreaGradient_1.default, { id: gradientId, color: strokeColor }, area.key),
+            gradient: (0, jsx_runtime_1.jsx)(AreaGradient_1.default, { id: gradientId || AreaGradient_1.DEFAULT_ARIA_GRADIENT_ID, color: strokeColor }, area.key),
         };
     });
-    return ((0, jsx_runtime_1.jsx)(recharts_1.ResponsiveContainer, Object.assign({ width: '100%', height: '100%' }, { children: (0, jsx_runtime_1.jsxs)(recharts_1.AreaChart, Object.assign({ width: width, height: height, data: data, margin: { top: 15, right: 15, left: 15, bottom: 15 } }, remainingProps, { children: [(0, jsx_runtime_1.jsxs)("defs", { children: [gradients, areasWithGradient.map(areaWithGradient => areaWithGradient.gradient)] }), showGrid && (0, jsx_runtime_1.jsx)(recharts_1.CartesianGrid, Object.assign({ strokeDasharray: '3 3' }, (0, chartHelper_1.mapGridOptions)(gridOptions))), (0, jsx_runtime_1.jsx)(recharts_1.XAxis, Object.assign({ hide: !showXAxis, dataKey: dataKey }, xAxisOptions)), (0, jsx_runtime_1.jsx)(recharts_1.YAxis, Object.assign({ hide: !showYAxis, unit: dataUnit }, yAxisOptions)), tooltip && (0, jsx_runtime_1.jsx)(recharts_1.Tooltip, Object.assign({}, tooltip.props)), legend && ((0, jsx_runtime_1.jsx)(recharts_1.Legend, Object.assign({ wrapperStyle: legend.props.verticalAlign === 'bottom' ? { bottom: 0 } : legend.props.wrapperStyle }, legend.props))), areasWithGradient.map(areaWithGradient => areaWithGradient.area), brush && (0, jsx_runtime_1.jsx)(recharts_1.Brush, { stroke: (0, chartHelper_1.getColor)('gray') })] })) })));
-};
-AreaChart.defaultProps = {
-    width: 480,
-    height: 200,
-    data: [],
-    dataUnit: '',
-    // dataKey,
-    gradients: [],
-    areas: [],
-    // xAxisOptions,
-    // yAxisOptions,
-    // gridOptions,
-    showXAxis: true,
-    showYAxis: false,
-    showGrid: false,
-    // legend,
-    brush: false,
-    tooltip: (0, jsx_runtime_1.jsx)(ChartTooltip_1.default, {}),
+    const tooltipProps = (0, isObject_1.default)(tooltip) ? tooltip.props : {};
+    const legendProps = (0, isObject_1.default)(legend) ? legend.props : {};
+    return ((0, jsx_runtime_1.jsx)(recharts_1.ResponsiveContainer, Object.assign({}, containerOptions, { children: (0, jsx_runtime_1.jsxs)(recharts_1.AreaChart, Object.assign({ width: width, height: height, data: data, margin: { top: 15, right: 15, left: 15, bottom: 15 } }, remainingProps, { children: [(0, jsx_runtime_1.jsxs)("defs", { children: [gradients, areasWithGradient.map(areaWithGradient => areaWithGradient.gradient)] }), showGrid && (0, jsx_runtime_1.jsx)(recharts_1.CartesianGrid, Object.assign({ strokeDasharray: '3 3' }, (0, chartHelper_1.mapGridOptions)(gridOptions))), (0, jsx_runtime_1.jsx)(recharts_1.XAxis, Object.assign({ hide: !showXAxis, dataKey: dataKey }, xAxisOptions)), (0, jsx_runtime_1.jsx)(recharts_1.YAxis, Object.assign({ hide: !showYAxis, unit: dataUnit }, yAxisOptions)), tooltip && (0, jsx_runtime_1.jsx)(ChartTooltip_1.default, Object.assign({}, tooltipProps)), legend && (0, jsx_runtime_1.jsx)(Legend_1.default, Object.assign({}, legendProps)), areasWithGradient.map(areaWithGradient => areaWithGradient.area), brush && (0, jsx_runtime_1.jsx)(recharts_1.Brush, { stroke: (0, chartHelper_1.getColor)('gray') })] })) })));
 };
 exports.default = AreaChart;

package/lib/es/components/charts/AreaGradient.d.ts

@@ -1,11 +1,7 @@
+export declare const DEFAULT_ARIA_GRADIENT_ID = "areaGradient";
+export type AreaGradientProps = {
+    id?: string;
+    color?: string;
+};
+declare const AreaGradient: (props: AreaGradientProps) => import("react/jsx-runtime").JSX.Element;
 export default AreaGradient;
-declare function AreaGradient({ id, color }: {
-    id: any;
-    color: any;
-}): import("react/jsx-runtime").JSX.Element;
-declare namespace AreaGradient {
-    namespace defaultProps {
-        const id: string;
-        const color: string;
-    }
-}

package/lib/es/components/charts/AreaGradient.js

@@ -1,12 +1,12 @@
 "use strict";
 Object.defineProperty(exports, "__esModule", { value: true });
-const tslib_1 = require("tslib");
+exports.DEFAULT_ARIA_GRADIENT_ID = void 0;
 const jsx_runtime_1 = require("react/jsx-runtime");
-const react_1 = tslib_1.__importDefault(require("react"));
+require("react");
 const chartHelper_1 = require("./chartHelper");
-const AreaGradient = ({ id, color }) => ((0, jsx_runtime_1.jsxs)("linearGradient", Object.assign({ id: id, x1: '0', y1: '0', x2: '0', y2: '1' }, { children: [(0, jsx_runtime_1.jsx)("stop", { offset: '5%', stopColor: (0, chartHelper_1.getColor)(color), stopOpacity: 0.8 }), (0, jsx_runtime_1.jsx)("stop", { offset: '95%', stopColor: (0, chartHelper_1.getColor)(color), stopOpacity: 0 })] }), id));
-AreaGradient.defaultProps = {
-    id: 'areaGradient',
-    color: 'color-coldplay-fountain',
+exports.DEFAULT_ARIA_GRADIENT_ID = 'areaGradient';
+const AreaGradient = (props) => {
+    const { id = exports.DEFAULT_ARIA_GRADIENT_ID, color = 'color-coldplay-fountain' } = props;
+    return ((0, jsx_runtime_1.jsxs)("linearGradient", Object.assign({ id: id, x1: '0', y1: '0', x2: '0', y2: '1' }, { children: [(0, jsx_runtime_1.jsx)("stop", { offset: '5%', stopColor: (0, chartHelper_1.getColor)(color), stopOpacity: 0.8 }), (0, jsx_runtime_1.jsx)("stop", { offset: '95%', stopColor: (0, chartHelper_1.getColor)(color), stopOpacity: 0 })] }), id));
 };
 exports.default = AreaGradient;

package/lib/es/components/charts/Bar.d.ts

@@ -1,10 +1,5 @@
+/// <reference types="react" />
+import type { BarProps as RechartsBarProps } from 'recharts';
+export type BarProps = Omit<RechartsBarProps, 'ref'> & {};
+declare const Bar: React.FC<BarProps>;
 export default Bar;
-declare function Bar(): null;
-declare namespace Bar {
-    namespace defaultProps {
-        const isAnimationActive: boolean;
-        const dataKey: string;
-        const dataUnit: string;
-        const color: string;
-    }
-}

package/lib/es/components/charts/Bar.js

@@ -2,9 +2,9 @@
 Object.defineProperty(exports, "__esModule", { value: true });
 const Bar = () => null;
 Bar.defaultProps = {
-    isAnimationActive: true,
     dataKey: 'value',
-    dataUnit: '',
+    unit: '',
     color: 'color-coldplay-fountain',
+    isAnimationActive: true,
 };
 exports.default = Bar;

package/lib/es/components/charts/BarChart.d.ts

@@ -1,18 +1,32 @@
+import React from 'react';
+import { BarChart as RechartsBarChart, type XAxisProps, type YAxisProps } from 'recharts';
+import { type DataType } from './chartHelper';
+import { type ChartTooltipProps } from './ChartTooltip';
+import { type LegendProps } from './Legend';
+import type { BarProps } from './Bar';
+import type { GridProps } from './ChartGrid';
+import type { ResponsiveContainerProps } from './ResponsiveContainer';
+export type BarChartDataType = DataType;
+type RechartsBarChartProps = React.ComponentProps<typeof RechartsBarChart>;
+type withoutBaseProps = 'data' | 'layout' | 'bars' | 'legend';
+export type BarChartProps<T extends DataType> = Omit<RechartsBarChartProps, withoutBaseProps> & {
+    width?: number;
+    height?: number;
+    data: T[];
+    dataUnit?: string;
+    layout?: 'vertical' | 'horizontal';
+    bars: React.ReactElement<BarProps>[];
+    showGrid?: boolean;
+    showXAxis?: boolean;
+    showYAxis?: boolean;
+    useDataColors?: boolean;
+    xAxisOptions?: XAxisProps;
+    yAxisOptions?: YAxisProps;
+    gridOptions?: GridProps;
+    containerOptions?: ResponsiveContainerProps;
+    legend?: React.ReactElement<LegendProps> | boolean;
+    tooltip?: React.ReactElement<ChartTooltipProps> | boolean;
+    brush?: boolean;
+};
+declare const BarChart: <T extends DataType>(props: BarChartProps<T>) => import("react/jsx-runtime").JSX.Element;
 export default BarChart;
-declare function BarChart(props: any): import("react/jsx-runtime").JSX.Element;
-declare namespace BarChart {
-    namespace defaultProps {
-        const width: number;
-        const height: number;
-        const data: never[];
-        const layout: string;
-        const bars: never[];
-        const showGrid: boolean;
-        const showXAxis: boolean;
-        const showYAxis: boolean;
-        const useDataColors: boolean;
-        const brush: boolean;
-        const tooltip: import("react/jsx-runtime").JSX.Element;
-        const legend: boolean;
-    }
-}

package/lib/es/components/charts/BarChart.js

@@ -2,44 +2,33 @@
 Object.defineProperty(exports, "__esModule", { value: true });
 const tslib_1 = require("tslib");
 const jsx_runtime_1 = require("react/jsx-runtime");
-const react_1 = tslib_1.__importDefault(require("react"));
+// @ts-ignore-next-line importsNotUsedAsValues
+require("react");
 const recharts_1 = require("recharts");
+const isFunction_1 = tslib_1.__importDefault(require("lodash/fp/isFunction"));
+const isObject_1 = tslib_1.__importDefault(require("lodash/fp/isObject"));
 const chartHelper_1 = require("./chartHelper");
 const ChartTooltip_1 = tslib_1.__importDefault(require("./ChartTooltip"));
-const BarChart = props => {
-    const { width, height, data, dataUnit, dataKey, layout, legend, bars, xAxisOptions, yAxisOptions, gridOptions, showGrid, showXAxis, showYAxis, useDataColors, brush, tooltip } = props, remainingProps = tslib_1.__rest(props, ["width", "height", "data", "dataUnit", "dataKey", "layout", "legend", "bars", "xAxisOptions", "yAxisOptions", "gridOptions", "showGrid", "showXAxis", "showYAxis", "useDataColors", "brush", "tooltip"]);
-    return ((0, jsx_runtime_1.jsx)(recharts_1.ResponsiveContainer, { children: (0, jsx_runtime_1.jsxs)(recharts_1.BarChart, Object.assign({ layout: layout, width: width, height: height, data: data }, remainingProps, { children: [showGrid && (0, jsx_runtime_1.jsx)(recharts_1.CartesianGrid, Object.assign({ strokeDasharray: '3 3' }, (0, chartHelper_1.mapGridOptions)(gridOptions))), (0, jsx_runtime_1.jsx)(recharts_1.XAxis, Object.assign({ hide: !showXAxis, dataKey: dataKey }, xAxisOptions)), (0, jsx_runtime_1.jsx)(recharts_1.YAxis, Object.assign({ hide: !showYAxis, unit: dataUnit }, yAxisOptions)), legend && ((0, jsx_runtime_1.jsx)(recharts_1.Legend, Object.assign({ payload: useDataColors &&
-                        data.map((entry, index) => {
-                            const legendColor = (0, chartHelper_1.getColor)(entry.color) || (0, chartHelper_1.getFromDefaultColors)(index);
-                            return Object.assign(Object.assign({}, entry), { type: 'square', color: legendColor });
-                        }) }, legend.props))), tooltip && (0, jsx_runtime_1.jsx)(recharts_1.Tooltip, Object.assign({ cursor: { fill: chartHelper_1.CURSOR_BACKGROUND_COLOR } }, tooltip.props)), bars.map(bar => {
-                    const _a = bar.props, { dataUnit, color } = _a, remainingBarProps = tslib_1.__rest(_a, ["dataUnit", "color"]);
+const Legend_1 = tslib_1.__importDefault(require("./Legend"));
+const BarChart = (props) => {
+    const { width, height, data = [], dataUnit, dataKey = 'value', layout = 'horizontal', legend = false, bars = [], xAxisOptions, yAxisOptions, gridOptions, containerOptions, showGrid = false, showXAxis = true, showYAxis = true, useDataColors = false, brush = false, tooltip = true } = props, remainingProps = tslib_1.__rest(props, ["width", "height", "data", "dataUnit", "dataKey", "layout", "legend", "bars", "xAxisOptions", "yAxisOptions", "gridOptions", "containerOptions", "showGrid", "showXAxis", "showYAxis", "useDataColors", "brush", "tooltip"]);
+    const tooltipProps = (0, isObject_1.default)(tooltip) ? tooltip.props : {};
+    const legendProps = (0, isObject_1.default)(legend) ? legend.props : {};
+    let legendPayload;
+    if (useDataColors) {
+        legendPayload = data.map((entry, index) => {
+            const legendColor = (0, chartHelper_1.getColor)(entry.color) || (0, chartHelper_1.getFromDefaultColors)(index);
+            return Object.assign(Object.assign({}, entry), { value: (0, isFunction_1.default)(dataKey) ? dataKey(entry) : entry[dataKey], color: legendColor });
+        });
+    }
+    return ((0, jsx_runtime_1.jsx)(recharts_1.ResponsiveContainer, Object.assign({}, containerOptions, { children: (0, jsx_runtime_1.jsxs)(recharts_1.BarChart, Object.assign({ layout: layout, width: width, height: height, data: data }, remainingProps, { children: [showGrid && (0, jsx_runtime_1.jsx)(recharts_1.CartesianGrid, Object.assign({ strokeDasharray: '3 3' }, (0, chartHelper_1.mapGridOptions)(gridOptions))), (0, jsx_runtime_1.jsx)(recharts_1.XAxis, Object.assign({ hide: !showXAxis, dataKey: dataKey }, xAxisOptions)), (0, jsx_runtime_1.jsx)(recharts_1.YAxis, Object.assign({ hide: !showYAxis, unit: dataUnit }, yAxisOptions)), legend && (0, jsx_runtime_1.jsx)(Legend_1.default, Object.assign({}, legendProps, { payload: legendPayload })), tooltip && (0, jsx_runtime_1.jsx)(ChartTooltip_1.default, Object.assign({ cursor: { fill: chartHelper_1.CURSOR_BACKGROUND_COLOR } }, tooltipProps)), bars.map(bar => {
+                    const _a = bar.props, { color } = _a, remainingBarProps = tslib_1.__rest(_a, ["color"]);
                     const cellColor = color && (0, chartHelper_1.getColor)(color);
                     return ((0, jsx_runtime_1.jsx)(recharts_1.Bar, Object.assign({ unit: dataUnit }, remainingBarProps, { fill: cellColor }, { children: useDataColors &&
                             data.map((entry, index) => {
-                                const cellColor = (0, chartHelper_1.getColor)(entry.color) || (0, chartHelper_1.getFromDefaultColors)(index);
-                                return (0, jsx_runtime_1.jsx)(recharts_1.Cell, { fill: cellColor }, `cell-${index}`);
+                                const entryCellColor = (0, chartHelper_1.getColor)(entry.color) || (0, chartHelper_1.getFromDefaultColors)(index);
+                                return (0, jsx_runtime_1.jsx)(recharts_1.Cell, { fill: entryCellColor }, `cell-${index}`);
                             }) }), bar.key));
-                }), brush && (0, jsx_runtime_1.jsx)(recharts_1.Brush, { stroke: (0, chartHelper_1.getColor)('gray') })] })) }));
-};
-BarChart.defaultProps = {
-    width: 480,
-    height: 200,
-    data: [],
-    // dataUnit,
-    // dataKey,
-    layout: 'horizontal',
-    // legend,
-    bars: [],
-    // xAxisOptions,
-    // yAxisOptions,
-    // gridOptions,
-    showGrid: false,
-    showXAxis: true,
-    showYAxis: true,
-    useDataColors: false,
-    brush: false,
-    tooltip: (0, jsx_runtime_1.jsx)(ChartTooltip_1.default, {}),
-    legend: false,
+                }), brush && (0, jsx_runtime_1.jsx)(recharts_1.Brush, { stroke: (0, chartHelper_1.getColor)('gray') })] })) })));
 };
 exports.default = BarChart;

package/lib/es/components/charts/ChartGrid.d.ts

@@ -0,0 +1,2 @@
+import type { CartesianGridProps } from 'recharts';
+export type GridProps = Omit<CartesianGridProps, 'ref'> & {};

package/lib/es/components/charts/ChartGrid.js

@@ -0,0 +1,3 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+require("react");

package/lib/es/components/charts/ChartNeedle.d.ts

@@ -1,12 +1,11 @@
+export type ChartNeedleProps = {
+    width?: string;
+    height?: string;
+    x?: string;
+    y?: string;
+    rotation?: number;
+    className?: string;
+    style?: object;
+};
+declare const ChartNeedle: (props: ChartNeedleProps) => import("react/jsx-runtime").JSX.Element;
 export default ChartNeedle;
-declare function ChartNeedle(props: any): import("react/jsx-runtime").JSX.Element;
-declare namespace ChartNeedle {
-    namespace defaultProps {
-        const width: string;
-        const height: string;
-        const x: string;
-        const y: string;
-        const rotation: number;
-        const className: string;
-    }
-}

package/lib/es/components/charts/ChartNeedle.js

@@ -1,21 +1,11 @@
 "use strict";
 Object.defineProperty(exports, "__esModule", { value: true });
-const tslib_1 = require("tslib");
 const jsx_runtime_1 = require("react/jsx-runtime");
-const react_1 = tslib_1.__importDefault(require("react"));
-const ChartNeedle = props => {
-    const { width, height, x, y, rotation, className, style } = props;
+require("react");
+const ChartNeedle = (props) => {
+    const { width = '5px', height = '65px', x = '-50%', y = '-100%', rotation = 0, className = '', style } = props;
     const needleStyle = Object.assign({ width,
         height, transformOrigin: 'bottom', transform: `translate(${x}, ${y}) rotate(${rotation}deg)`, borderBottomLeftRadius: '4px', borderBottomRightRadius: '4px', borderTopLeftRadius: '100%', borderTopRightRadius: '100%', display: 'inline-block' }, style);
     return ((0, jsx_runtime_1.jsx)("div", Object.assign({ className: 'position-relative' }, { children: (0, jsx_runtime_1.jsx)("div", { className: `position-absolute bg-dark ${className}`, style: needleStyle }) })));
 };
-ChartNeedle.defaultProps = {
-    width: '5px',
-    height: '65px',
-    x: '-50%',
-    y: '-100%',
-    rotation: 0,
-    className: '',
-    // style
-};
 exports.default = ChartNeedle;

package/lib/es/components/charts/ChartTooltip.d.ts

@@ -1,5 +1,5 @@
+import { Tooltip as RechartsTooltip } from 'recharts';
+export type ChartTooltipProps = typeof RechartsTooltip;
+declare const ChartTooltip: typeof RechartsTooltip;
+export declare const defaultFormatter: (dataUnit: string) => (value: any) => string;
 export default ChartTooltip;
-declare function ChartTooltip(): null;
-declare namespace ChartTooltip {
-    const defaultProps: {};
-}

package/lib/es/components/charts/ChartTooltip.js

@@ -1,5 +1,9 @@
 "use strict";
 Object.defineProperty(exports, "__esModule", { value: true });
-const ChartTooltip = () => null;
-ChartTooltip.defaultProps = {};
+exports.defaultFormatter = void 0;
+const recharts_1 = require("recharts");
+const ChartTooltip = recharts_1.Tooltip;
+// biome-ignore lint/suspicious/noExplicitAny: <explanation>
+const defaultFormatter = (dataUnit) => (value) => `${value} ${dataUnit}`;
+exports.defaultFormatter = defaultFormatter;
 exports.default = ChartTooltip;

package/lib/es/components/charts/Legend.d.ts

@@ -1,11 +1,18 @@
+import { type LegendProps as RechartsLegendProps } from 'recharts';
+import type { Formatter, Payload } from 'recharts/types/component/DefaultLegendContent';
+export type LegendFormatter = Formatter;
+export type LegendPayload = Payload;
+export type LegendProps = Omit<RechartsLegendProps, 'ref' | 'formatter'> & {
+    formatter?: (value: any, entry: any, index: number) => void;
+};
+declare const Legend: {
+    (props: LegendProps): import("react/jsx-runtime").JSX.Element;
+    defaultProps: {
+        iconType: string;
+        iconSize: number;
+        layout: string;
+        align: string;
+        verticalAlign: string;
+    };
+};
 export default Legend;
-declare function Legend(): null;
-declare namespace Legend {
-    namespace defaultProps {
-        const iconType: string;
-        const iconSize: string;
-        const layout: string;
-        const align: string;
-        const verticalAlign: string;
-    }
-}

package/lib/es/components/charts/Legend.js

@@ -1,9 +1,20 @@
 "use strict";
 Object.defineProperty(exports, "__esModule", { value: true });
-const Legend = () => null;
+const jsx_runtime_1 = require("react/jsx-runtime");
+// @ts-ignore-next-line importsNotUsedAsValues
+require("react");
+const recharts_1 = require("recharts");
+const Legend = (props) => {
+    const { verticalAlign, wrapperStyle } = props;
+    return ((0, jsx_runtime_1.jsx)(recharts_1.Legend
+    // biome-ignore lint/suspicious/noExplicitAny: <explanation>
+    , Object.assign({ 
+        // biome-ignore lint/suspicious/noExplicitAny: <explanation>
+        formatter: props.formatter, wrapperStyle: verticalAlign === 'bottom' ? { bottom: 0 } : wrapperStyle }, props)));
+};
 Legend.defaultProps = {
-    iconType: 'square',
-    iconSize: '12',
+    iconType: 'circle',
+    iconSize: 12,
     layout: 'vertical',
     align: 'right',
     verticalAlign: 'top',

package/lib/es/components/charts/Line.d.ts

@@ -1,12 +1,7 @@
+/// <reference types="react" />
+import type { LineProps as RechartsLineProps } from 'recharts';
+export type LineProps = Omit<RechartsLineProps, 'ref'> & {
+    strokeColor?: string;
+};
+declare const Line: React.FC<LineProps>;
 export default Line;
-declare function Line(): null;
-declare namespace Line {
-    namespace defaultProps {
-        const dataKey: string;
-        const dataUnit: string;
-        const strokeColor: string;
-        const legendType: string;
-        const type: string;
-        const isAnimationActive: boolean;
-    }
-}

package/lib/es/components/charts/Line.js

@@ -3,7 +3,7 @@ Object.defineProperty(exports, "__esModule", { value: true });
 const Line = () => null;
 Line.defaultProps = {
     dataKey: 'value',
-    dataUnit: '',
+    unit: '',
     strokeColor: 'color-coldplay-fountain',
     legendType: 'square',
     type: 'monotone',