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

package/components/charts/AreaChart.js

@@ -1,40 +1,27 @@
 import { __rest } from "tslib";
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 import { createElement as _createElement } from "react";
-import React from 'react';
-import { AreaChart as RechartsAreaChart, Area as RechartsArea, Legend as RechartsLegend, XAxis, YAxis, Brush, Tooltip as RechartsTooltip, CartesianGrid, ResponsiveContainer, } from 'recharts';
+// @ts-ignore-next-line importsNotUsedAsValues
+import 'react';
+import { AreaChart as RechartsAreaChart, Area as RechartsArea, XAxis, YAxis, Brush, CartesianGrid, ResponsiveContainer, } from 'recharts';
+import isObject from 'lodash/fp/isObject';
 import { getColor, mapGridOptions } from './chartHelper';
-import AreaGradient from './AreaGradient';
+import AreaGradient, { DEFAULT_ARIA_GRADIENT_ID } from './AreaGradient';
 import ChartTooltip from './ChartTooltip';
-const AreaChart = props => {
-    const { width, height, data, dataUnit, dataKey, gradients, areas, xAxisOptions, yAxisOptions, gridOptions, showXAxis, showYAxis, showGrid, legend, brush, tooltip } = props, remainingProps = __rest(props, ["width", "height", "data", "dataUnit", "dataKey", "gradients", "areas", "xAxisOptions", "yAxisOptions", "gridOptions", "showXAxis", "showYAxis", "showGrid", "legend", "brush", "tooltip"]);
+import Legend from './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 = __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 = __rest(_a, ["strokeColor"]);
         const gradientId = area.key;
         const stroke = getColor(strokeColor);
         return {
             area: _createElement(RechartsArea, Object.assign({}, remainingAreaProps, { key: area.key, stroke: stroke, fill: `url(#${gradientId})` })),
-            gradient: _jsx(AreaGradient, { id: gradientId, color: strokeColor }, area.key),
+            gradient: _jsx(AreaGradient, { id: gradientId || DEFAULT_ARIA_GRADIENT_ID, color: strokeColor }, area.key),
         };
     });
-    return (_jsx(ResponsiveContainer, Object.assign({ width: '100%', height: '100%' }, { children: _jsxs(RechartsAreaChart, Object.assign({ width: width, height: height, data: data, margin: { top: 15, right: 15, left: 15, bottom: 15 } }, remainingProps, { children: [_jsxs("defs", { children: [gradients, areasWithGradient.map(areaWithGradient => areaWithGradient.gradient)] }), showGrid && _jsx(CartesianGrid, Object.assign({ strokeDasharray: '3 3' }, mapGridOptions(gridOptions))), _jsx(XAxis, Object.assign({ hide: !showXAxis, dataKey: dataKey }, xAxisOptions)), _jsx(YAxis, Object.assign({ hide: !showYAxis, unit: dataUnit }, yAxisOptions)), tooltip && _jsx(RechartsTooltip, Object.assign({}, tooltip.props)), legend && (_jsx(RechartsLegend, Object.assign({ wrapperStyle: legend.props.verticalAlign === 'bottom' ? { bottom: 0 } : legend.props.wrapperStyle }, legend.props))), areasWithGradient.map(areaWithGradient => areaWithGradient.area), brush && _jsx(Brush, { stroke: 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: _jsx(ChartTooltip, {}),
+    const tooltipProps = isObject(tooltip) ? tooltip.props : {};
+    const legendProps = isObject(legend) ? legend.props : {};
+    return (_jsx(ResponsiveContainer, Object.assign({}, containerOptions, { children: _jsxs(RechartsAreaChart, Object.assign({ width: width, height: height, data: data, margin: { top: 15, right: 15, left: 15, bottom: 15 } }, remainingProps, { children: [_jsxs("defs", { children: [gradients, areasWithGradient.map(areaWithGradient => areaWithGradient.gradient)] }), showGrid && _jsx(CartesianGrid, Object.assign({ strokeDasharray: '3 3' }, mapGridOptions(gridOptions))), _jsx(XAxis, Object.assign({ hide: !showXAxis, dataKey: dataKey }, xAxisOptions)), _jsx(YAxis, Object.assign({ hide: !showYAxis, unit: dataUnit }, yAxisOptions)), tooltip && _jsx(ChartTooltip, Object.assign({}, tooltipProps)), legend && _jsx(Legend, Object.assign({}, legendProps)), areasWithGradient.map(areaWithGradient => areaWithGradient.area), brush && _jsx(Brush, { stroke: getColor('gray') })] })) })));
 };
 export default AreaChart;

package/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/components/charts/AreaGradient.js

@@ -1,9 +1,9 @@
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
-import React from 'react';
+import 'react';
 import { getColor } from './chartHelper';
-const AreaGradient = ({ id, color }) => (_jsxs("linearGradient", Object.assign({ id: id, x1: '0', y1: '0', x2: '0', y2: '1' }, { children: [_jsx("stop", { offset: '5%', stopColor: getColor(color), stopOpacity: 0.8 }), _jsx("stop", { offset: '95%', stopColor: getColor(color), stopOpacity: 0 })] }), id));
-AreaGradient.defaultProps = {
-    id: 'areaGradient',
-    color: 'color-coldplay-fountain',
+export const DEFAULT_ARIA_GRADIENT_ID = 'areaGradient';
+const AreaGradient = (props) => {
+    const { id = DEFAULT_ARIA_GRADIENT_ID, color = 'color-coldplay-fountain' } = props;
+    return (_jsxs("linearGradient", Object.assign({ id: id, x1: '0', y1: '0', x2: '0', y2: '1' }, { children: [_jsx("stop", { offset: '5%', stopColor: getColor(color), stopOpacity: 0.8 }), _jsx("stop", { offset: '95%', stopColor: getColor(color), stopOpacity: 0 })] }), id));
 };
 export default AreaGradient;

package/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/components/charts/Bar.js

@@ -1,8 +1,8 @@
 const Bar = () => null;
 Bar.defaultProps = {
-    isAnimationActive: true,
     dataKey: 'value',
-    dataUnit: '',
+    unit: '',
     color: 'color-coldplay-fountain',
+    isAnimationActive: true,
 };
 export default Bar;

package/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/components/charts/BarChart.js

@@ -1,43 +1,32 @@
 import { __rest } from "tslib";
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
-import React from 'react';
-import { BarChart as RechartsBarChart, XAxis, YAxis, Legend as RechartsLegend, Bar as RechartsBar, Brush, Cell, Tooltip as RechartsTooltip, CartesianGrid, ResponsiveContainer, } from 'recharts';
+// @ts-ignore-next-line importsNotUsedAsValues
+import 'react';
+import { BarChart as RechartsBarChart, Bar as RechartsBar, XAxis, YAxis, Brush, Cell, CartesianGrid, ResponsiveContainer, } from 'recharts';
+import isFunction from 'lodash/fp/isFunction';
+import isObject from 'lodash/fp/isObject';
 import { getFromDefaultColors, getColor, mapGridOptions, CURSOR_BACKGROUND_COLOR } from './chartHelper';
 import ChartTooltip from './ChartTooltip';
-const BarChart = props => {
-    const { width, height, data, dataUnit, dataKey, layout, legend, bars, xAxisOptions, yAxisOptions, gridOptions, showGrid, showXAxis, showYAxis, useDataColors, brush, tooltip } = props, remainingProps = __rest(props, ["width", "height", "data", "dataUnit", "dataKey", "layout", "legend", "bars", "xAxisOptions", "yAxisOptions", "gridOptions", "showGrid", "showXAxis", "showYAxis", "useDataColors", "brush", "tooltip"]);
-    return (_jsx(ResponsiveContainer, { children: _jsxs(RechartsBarChart, Object.assign({ layout: layout, width: width, height: height, data: data }, remainingProps, { children: [showGrid && _jsx(CartesianGrid, Object.assign({ strokeDasharray: '3 3' }, mapGridOptions(gridOptions))), _jsx(XAxis, Object.assign({ hide: !showXAxis, dataKey: dataKey }, xAxisOptions)), _jsx(YAxis, Object.assign({ hide: !showYAxis, unit: dataUnit }, yAxisOptions)), legend && (_jsx(RechartsLegend, Object.assign({ payload: useDataColors &&
-                        data.map((entry, index) => {
-                            const legendColor = getColor(entry.color) || getFromDefaultColors(index);
-                            return Object.assign(Object.assign({}, entry), { type: 'square', color: legendColor });
-                        }) }, legend.props))), tooltip && _jsx(RechartsTooltip, Object.assign({ cursor: { fill: CURSOR_BACKGROUND_COLOR } }, tooltip.props)), bars.map(bar => {
-                    const _a = bar.props, { dataUnit, color } = _a, remainingBarProps = __rest(_a, ["dataUnit", "color"]);
+import Legend from './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 = __rest(props, ["width", "height", "data", "dataUnit", "dataKey", "layout", "legend", "bars", "xAxisOptions", "yAxisOptions", "gridOptions", "containerOptions", "showGrid", "showXAxis", "showYAxis", "useDataColors", "brush", "tooltip"]);
+    const tooltipProps = isObject(tooltip) ? tooltip.props : {};
+    const legendProps = isObject(legend) ? legend.props : {};
+    let legendPayload;
+    if (useDataColors) {
+        legendPayload = data.map((entry, index) => {
+            const legendColor = getColor(entry.color) || getFromDefaultColors(index);
+            return Object.assign(Object.assign({}, entry), { value: isFunction(dataKey) ? dataKey(entry) : entry[dataKey], color: legendColor });
+        });
+    }
+    return (_jsx(ResponsiveContainer, Object.assign({}, containerOptions, { children: _jsxs(RechartsBarChart, Object.assign({ layout: layout, width: width, height: height, data: data }, remainingProps, { children: [showGrid && _jsx(CartesianGrid, Object.assign({ strokeDasharray: '3 3' }, mapGridOptions(gridOptions))), _jsx(XAxis, Object.assign({ hide: !showXAxis, dataKey: dataKey }, xAxisOptions)), _jsx(YAxis, Object.assign({ hide: !showYAxis, unit: dataUnit }, yAxisOptions)), legend && _jsx(Legend, Object.assign({}, legendProps, { payload: legendPayload })), tooltip && _jsx(ChartTooltip, Object.assign({ cursor: { fill: CURSOR_BACKGROUND_COLOR } }, tooltipProps)), bars.map(bar => {
+                    const _a = bar.props, { color } = _a, remainingBarProps = __rest(_a, ["color"]);
                     const cellColor = color && getColor(color);
                     return (_jsx(RechartsBar, Object.assign({ unit: dataUnit }, remainingBarProps, { fill: cellColor }, { children: useDataColors &&
                             data.map((entry, index) => {
-                                const cellColor = getColor(entry.color) || getFromDefaultColors(index);
-                                return _jsx(Cell, { fill: cellColor }, `cell-${index}`);
+                                const entryCellColor = getColor(entry.color) || getFromDefaultColors(index);
+                                return _jsx(Cell, { fill: entryCellColor }, `cell-${index}`);
                             }) }), bar.key));
-                }), brush && _jsx(Brush, { stroke: 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: _jsx(ChartTooltip, {}),
-    legend: false,
+                }), brush && _jsx(Brush, { stroke: getColor('gray') })] })) })));
 };
 export default BarChart;

package/components/charts/ChartGrid.d.ts

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

package/components/charts/ChartGrid.js

@@ -0,0 +1 @@
+import 'react';

package/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/components/charts/ChartNeedle.js

@@ -1,18 +1,9 @@
 import { jsx as _jsx } from "react/jsx-runtime";
-import React from 'react';
-const ChartNeedle = props => {
-    const { width, height, x, y, rotation, className, style } = props;
+import '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 (_jsx("div", Object.assign({ className: 'position-relative' }, { children: _jsx("div", { className: `position-absolute bg-dark ${className}`, style: needleStyle }) })));
 };
-ChartNeedle.defaultProps = {
-    width: '5px',
-    height: '65px',
-    x: '-50%',
-    y: '-100%',
-    rotation: 0,
-    className: '',
-    // style
-};
 export default ChartNeedle;

package/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/components/charts/ChartTooltip.js

@@ -1,3 +1,5 @@
-const ChartTooltip = () => null;
-ChartTooltip.defaultProps = {};
+import { Tooltip as RechartsTooltip } from 'recharts';
+const ChartTooltip = RechartsTooltip;
+// biome-ignore lint/suspicious/noExplicitAny: <explanation>
+export const defaultFormatter = (dataUnit) => (value) => `${value} ${dataUnit}`;
 export default ChartTooltip;

package/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/components/charts/Legend.js

@@ -1,7 +1,18 @@
-const Legend = () => null;
+import { jsx as _jsx } from "react/jsx-runtime";
+// @ts-ignore-next-line importsNotUsedAsValues
+import 'react';
+import { Legend as RechartsLegend } from 'recharts';
+const Legend = (props) => {
+    const { verticalAlign, wrapperStyle } = props;
+    return (_jsx(RechartsLegend
+    // 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/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/components/charts/Line.js

@@ -1,7 +1,7 @@
 const Line = () => null;
 Line.defaultProps = {
     dataKey: 'value',
-    dataUnit: '',
+    unit: '',
     strokeColor: 'color-coldplay-fountain',
     legendType: 'square',
     type: 'monotone',

package/components/charts/LineChart.d.ts

@@ -1,16 +1,28 @@
+import React from 'react';
+import { LineChart as RechartsLineChart, type XAxisProps, type YAxisProps } from 'recharts';
+import { ChartTooltipProps } from './ChartTooltip';
+import { type LegendProps } from './Legend';
+import type { LineProps } from './Line';
+import type { GridProps } from './ChartGrid';
+import type { ResponsiveContainerProps } from './ResponsiveContainer';
+type RechartsLineChartProps = React.ComponentProps<typeof RechartsLineChart>;
+export type LineChartProps<T extends object> = Omit<RechartsLineChartProps, 'data'> & {
+    width?: number;
+    height?: number;
+    data: T[];
+    dataUnit?: string;
+    dataKey?: string | number | ((obj: T) => any);
+    lines: React.ReactElement<LineProps>[];
+    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 LineChart: <T extends object>(props: LineChartProps<T>) => import("react/jsx-runtime").JSX.Element;
 export default LineChart;
-declare function LineChart(props: any): import("react/jsx-runtime").JSX.Element;
-declare namespace LineChart {
-    namespace defaultProps {
-        const width: number;
-        const height: number;
-        const data: never[];
-        const dataUnit: string;
-        const lines: never[];
-        const showXAxis: boolean;
-        const showYAxis: boolean;
-        const showGrid: boolean;
-        const brush: boolean;
-        const tooltip: import("react/jsx-runtime").JSX.Element;
-    }
-}

package/components/charts/LineChart.js

@@ -1,31 +1,20 @@
 import { __rest } from "tslib";
+import { createElement as _createElement } from "react";
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
-import React from 'react';
-import { LineChart as RechartsLineChart, Line as RechartsLine, Legend as RechartsLegend, XAxis, YAxis, Brush, Tooltip as RechartsTooltip, CartesianGrid, ResponsiveContainer, } from 'recharts';
+// @ts-ignore-next-line importsNotUsedAsValues
+import 'react';
+import { LineChart as RechartsLineChart, Line as RechartsLine, XAxis, YAxis, Brush, CartesianGrid, ResponsiveContainer, } from 'recharts';
+import isObject from 'lodash/fp/isObject';
 import { getColor, mapGridOptions } from './chartHelper';
 import ChartTooltip from './ChartTooltip';
-const LineChart = props => {
-    const { width, height, data, dataUnit, dataKey, lines, xAxisOptions, yAxisOptions, gridOptions, showXAxis, showYAxis, showGrid, legend, tooltip, brush } = props, remainingProps = __rest(props, ["width", "height", "data", "dataUnit", "dataKey", "lines", "xAxisOptions", "yAxisOptions", "gridOptions", "showXAxis", "showYAxis", "showGrid", "legend", "tooltip", "brush"]);
-    return (_jsx(ResponsiveContainer, Object.assign({ width: '100%', height: '100%' }, { children: _jsxs(RechartsLineChart, Object.assign({ width: width, height: height, data: data, margin: { top: 15, right: 15, left: 15, bottom: 15 } }, remainingProps, { children: [showGrid && _jsx(CartesianGrid, Object.assign({ strokeDasharray: '3 3' }, mapGridOptions(gridOptions))), _jsx(XAxis, Object.assign({ hide: !showXAxis, dataKey: dataKey }, xAxisOptions)), _jsx(YAxis, Object.assign({ hide: !showYAxis, unit: dataUnit }, yAxisOptions)), tooltip && _jsx(RechartsTooltip, Object.assign({}, tooltip.props)), legend && (_jsx(RechartsLegend, Object.assign({ wrapperStyle: legend.props.verticalAlign === 'bottom' ? { bottom: 0 } : legend.props.wrapperStyle }, legend.props))), lines.map(line => {
+import Legend from './Legend';
+const LineChart = (props) => {
+    const { width, height, data = [], dataUnit = '', dataKey = 'value', lines = [], xAxisOptions, yAxisOptions, gridOptions, containerOptions, showXAxis = true, showYAxis = false, showGrid = false, legend, brush = false, tooltip = true } = props, remainingProps = __rest(props, ["width", "height", "data", "dataUnit", "dataKey", "lines", "xAxisOptions", "yAxisOptions", "gridOptions", "containerOptions", "showXAxis", "showYAxis", "showGrid", "legend", "brush", "tooltip"]);
+    const tooltipProps = isObject(tooltip) ? tooltip.props : {};
+    const legendProps = isObject(legend) ? legend.props : {};
+    return (_jsx(ResponsiveContainer, Object.assign({}, containerOptions, { children: _jsxs(RechartsLineChart, Object.assign({ width: width, height: height, data: data, margin: { top: 15, right: 15, left: 15, bottom: 15 } }, remainingProps, { children: [showGrid && _jsx(CartesianGrid, Object.assign({ strokeDasharray: '3 3' }, mapGridOptions(gridOptions))), _jsx(XAxis, Object.assign({ hide: !showXAxis, dataKey: dataKey }, xAxisOptions)), _jsx(YAxis, Object.assign({ hide: !showYAxis, unit: dataUnit }, yAxisOptions)), tooltip && _jsx(ChartTooltip, Object.assign({}, tooltipProps)), legend && _jsx(Legend, Object.assign({}, legendProps)), lines.map(line => {
                     const _a = line.props, { strokeColor } = _a, remainingLineProps = __rest(_a, ["strokeColor"]);
-                    return _jsx(RechartsLine, Object.assign({ stroke: getColor(strokeColor) }, remainingLineProps), line.key);
+                    return _createElement(RechartsLine, Object.assign({}, remainingLineProps, { key: line.key, stroke: getColor(strokeColor) }));
                 }), brush && _jsx(Brush, { stroke: getColor('gray') })] })) })));
 };
-LineChart.defaultProps = {
-    width: 480,
-    height: 200,
-    data: [],
-    dataUnit: '',
-    // dataKey,
-    lines: [],
-    // xAxisOptions,
-    // yAxisOptions,
-    // gridOptions,
-    showXAxis: true,
-    showYAxis: false,
-    showGrid: false,
-    brush: false,
-    tooltip: _jsx(ChartTooltip, {}),
-    // legend,
-};
 export default LineChart;

package/components/charts/PieChart.d.ts

@@ -1,20 +1,30 @@
+import React from 'react';
+import { PieChart as RechartsPieChart, type PieProps as RechartPieProps } from 'recharts';
+import { type DataType } from './chartHelper';
+import { type LegendProps } from './Legend';
+import { type ChartTooltipProps } from './ChartTooltip';
+import type { ResponsiveContainerProps } from './ResponsiveContainer';
+export type PieChartDataType = DataType;
+export type PieProps = Omit<Partial<RechartPieProps>, 'ref'> & {};
+type RechartsPieChartProps = React.ComponentProps<typeof RechartsPieChart>;
+export type PieChartProps<T extends DataType> = Omit<RechartsPieChartProps, 'data'> & {
+    width?: number | string;
+    height?: number | string;
+    innerRadius?: number | string;
+    outerRadius?: number | string;
+    data: T[];
+    dataKey?: string | number | ((obj: T) => any);
+    dataUnit?: string;
+    nameKey?: string;
+    color?: string | ((obj: T) => any);
+    filled?: boolean;
+    labels?: boolean;
+    innerLabels?: boolean;
+    paddingAngle?: number;
+    legend?: React.ReactElement<LegendProps> | boolean;
+    tooltip?: React.ReactElement<ChartTooltipProps> | boolean;
+    pieOptions?: PieProps;
+    containerOptions?: ResponsiveContainerProps;
+};
+declare const PieChart: <T extends DataType>(props: PieChartProps<T>) => import("react/jsx-runtime").JSX.Element;
 export default PieChart;
-declare function PieChart(props: any): import("react/jsx-runtime").JSX.Element;
-declare namespace PieChart {
-    namespace defaultProps {
-        const width: string;
-        const height: number;
-        const innerRadius: number;
-        const outerRadius: number;
-        const data: never[];
-        const dataKey: string;
-        const dataUnit: string;
-        const nameKey: string;
-        const filled: boolean;
-        const labels: boolean;
-        const innerLabels: boolean;
-        const paddingAngle: number;
-        const legend: import("react/jsx-runtime").JSX.Element;
-        const tooltip: import("react/jsx-runtime").JSX.Element;
-    }
-}

package/components/charts/PieChart.js

@@ -1,48 +1,33 @@
 import { __rest } from "tslib";
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
-import React from 'react';
-import { PieChart as RechartsPieChart, Pie, Legend as RechartsLegend, Cell, Tooltip as RechartsTooltip, ResponsiveContainer, } from 'recharts';
+// @ts-ignore-next-line importsNotUsedAsValues
+import 'react';
+import { PieChart as RechartsPieChart, Pie, Cell, ResponsiveContainer, } from 'recharts';
 import isFunction from 'lodash/fp/isFunction';
+import isObject from 'lodash/fp/isObject';
 import { getFromDefaultColors, getColor } from './chartHelper';
 import Legend from './Legend';
-import ChartTooltip from './ChartTooltip';
+import ChartTooltip, { defaultFormatter } from './ChartTooltip';
 const RADIAN = Math.PI / 180;
-const PieChart = props => {
-    const { width, height, innerRadius, outerRadius, data, dataKey, dataUnit, nameKey, color, filled, labels, innerLabels, paddingAngle, legend, tooltip, pieOptions } = props, remainingProps = __rest(props, ["width", "height", "innerRadius", "outerRadius", "data", "dataKey", "dataUnit", "nameKey", "color", "filled", "labels", "innerLabels", "paddingAngle", "legend", "tooltip", "pieOptions"]);
-    const renderInnerLabel = ({ cx, cy, midAngle, innerRadius, outerRadius, percent, index, value }) => {
-        const radius = innerRadius + (outerRadius - innerRadius) * 0.5;
-        const x = cx + radius * Math.cos(-midAngle * RADIAN);
-        const y = cy + radius * Math.sin(-midAngle * RADIAN);
-        return (_jsx("text", Object.assign({ x: x, y: y, fill: 'white', textAnchor: x > cx ? 'start' : 'end', dominantBaseline: 'central' }, { children: `${value} ${dataUnit}` })));
-    };
-    const renderLabels = entry => {
-        return `${isFunction(dataKey) ? dataKey(entry) : entry[dataKey]} ${dataUnit}`;
-    };
-    const pieLabel = labels && (innerLabels ? renderInnerLabel : renderLabels);
-    return (_jsx(ResponsiveContainer, Object.assign({ width: width, height: height }, { children: _jsxs(RechartsPieChart, Object.assign({}, remainingProps, { children: [legend && (_jsx(RechartsLegend, Object.assign({ formatter: (value, entry) => _jsx("span", Object.assign({ className: 'text-color-darker' }, { children: value })) }, legend.props))), _jsx(Pie, Object.assign({ data: data, isAnimationActive: true, nameKey: nameKey, dataKey: dataKey, label: pieLabel, 
+const renderCustomInnerLabel = (dataUnit) => ({ cx, cy, midAngle, innerRadius, outerRadius, value }) => {
+    const radius = innerRadius + (outerRadius - innerRadius) * 0.5;
+    const x = cx + radius * Math.cos(-midAngle * RADIAN);
+    const y = cy + radius * Math.sin(-midAngle * RADIAN);
+    return (_jsx("text", Object.assign({ x: x, y: y, fill: 'white', textAnchor: x > cx ? 'start' : 'end', dominantBaseline: 'central' }, { children: `${value} ${dataUnit}` })));
+};
+const PieChart = (props) => {
+    const { width, height, innerRadius, outerRadius, data = [], dataKey = 'value', dataUnit = '', nameKey = 'name', color, filled = false, labels = true, innerLabels = false, paddingAngle = 3, legend = _jsx(Legend, {}), tooltip = true, pieOptions, containerOptions } = props, remainingProps = __rest(props, ["width", "height", "innerRadius", "outerRadius", "data", "dataKey", "dataUnit", "nameKey", "color", "filled", "labels", "innerLabels", "paddingAngle", "legend", "tooltip", "pieOptions", "containerOptions"]);
+    // biome-ignore lint/suspicious/noExplicitAny:
+    const renderLabels = (entry) => `${isFunction(dataKey) ? dataKey(entry) : entry[dataKey]} ${dataUnit}`;
+    const pieLabel = labels && (innerLabels ? renderCustomInnerLabel(dataUnit) : renderLabels);
+    const tooltipProps = isObject(tooltip) ? tooltip.props : {};
+    const legendProps = isObject(legend) ? legend.props : {};
+    return (_jsx(ResponsiveContainer, Object.assign({}, containerOptions, { children: _jsxs(RechartsPieChart, Object.assign({ width: width, height: height }, remainingProps, { children: [legend && (_jsx(Legend, Object.assign({ formatter: (value, entry) => (_jsx("span", Object.assign({ className: 'text-color-darker' }, { children: value }))) }, legendProps))), _jsx(Pie, Object.assign({ data: data, isAnimationActive: true, nameKey: nameKey, dataKey: dataKey, label: pieLabel, 
                     // cx={Math.max(outerRadius, width / 3)}
                     // cy={height / 2}
                     innerRadius: filled ? 0 : innerRadius, outerRadius: outerRadius, paddingAngle: filled ? 0 : paddingAngle, labelLine: !innerLabels }, pieOptions, { children: data.map((entry, index) => {
                         const cellColor = getColor(entry.color) || getFromDefaultColors(index);
-                        return (_jsx(Cell, { fill: isFunction(color) ? getColor(color(entry, index)) : cellColor }, `cell-${index}`));
-                    }) })), tooltip && _jsx(RechartsTooltip, Object.assign({ formatter: value => `${value} ${dataUnit}` }, tooltip.props))] })) })));
-};
-PieChart.defaultProps = {
-    width: '100%',
-    height: 250,
-    innerRadius: 60,
-    outerRadius: 80,
-    data: [],
-    dataKey: 'value',
-    dataUnit: '',
-    nameKey: 'name',
-    // color,
-    filled: false,
-    labels: true,
-    innerLabels: false,
-    paddingAngle: 3,
-    // pieOptions,
-    legend: _jsx(Legend, {}),
-    tooltip: _jsx(ChartTooltip, {}),
+                        return (_jsx(Cell, { fill: isFunction(color) ? getColor(color(entry)) : cellColor }, `cell-${index}`));
+                    }) })), tooltip && _jsx(ChartTooltip, Object.assign({ formatter: defaultFormatter(dataUnit) }, tooltipProps))] })) })));
 };
 export default PieChart;