@j2inn/fin5-ui-utils 6.0.3 → 6.0.5-beta.0

package/dist_es/react/components/LoadingSpinner.js

@@ -1,21 +1,21 @@
-/*
- * Copyright (c) 2022, J2 Innovations. All Rights Reserved
- */
-import { Spin } from '@j2inn/ui';
-import React from 'react';
-import { createUseStyles } from 'react-jss';
-const useStyles = createUseStyles({
-    container: {
-        display: 'flex',
-        alignItems: 'center',
-        justifyContent: 'center',
-        height: '100%',
-        width: '100%',
-    },
-});
-export const LoadingSpinner = () => {
-    const classes = useStyles();
-    return (React.createElement("div", { className: classes.container },
-        React.createElement(Spin, { size: 'large' })));
-};
+/*
+ * Copyright (c) 2022, J2 Innovations. All Rights Reserved
+ */
+import { Spin } from '@j2inn/ui';
+import React from 'react';
+import { createUseStyles } from 'react-jss';
+const useStyles = createUseStyles({
+    container: {
+        display: 'flex',
+        alignItems: 'center',
+        justifyContent: 'center',
+        height: '100%',
+        width: '100%',
+    },
+});
+export const LoadingSpinner = () => {
+    const classes = useStyles();
+    return (React.createElement("div", { className: classes.container },
+        React.createElement(Spin, { size: 'large' })));
+};
 //# sourceMappingURL=LoadingSpinner.js.map

package/dist_es/react/components/LoadingSpinner.jsx

@@ -0,0 +1,22 @@
+/*
+ * Copyright (c) 2022, J2 Innovations. All Rights Reserved
+ */
+import { Spin } from '@j2inn/ui';
+import React from 'react';
+import { createUseStyles } from 'react-jss';
+const useStyles = createUseStyles({
+    container: {
+        display: 'flex',
+        alignItems: 'center',
+        justifyContent: 'center',
+        height: '100%',
+        width: '100%',
+    },
+});
+export const LoadingSpinner = () => {
+    const classes = useStyles();
+    return (<div className={classes.container}>
+			<Spin size='large'></Spin>
+		</div>);
+};
+//# sourceMappingURL=LoadingSpinner.jsx.map

package/dist_es/react/components/LoadingSpinner.jsx.map

@@ -0,0 +1 @@
+{"version":3,"file":"LoadingSpinner.jsx","sourceRoot":"","sources":["../../../src/react/components/LoadingSpinner.tsx"],"names":[],"mappings":"AAAA;;GAEG;AAEH,OAAO,EAAE,IAAI,EAAE,MAAM,WAAW,CAAA;AAChC,OAAO,KAAK,MAAM,OAAO,CAAA;AACzB,OAAO,EAAE,eAAe,EAAE,MAAM,WAAW,CAAA;AAE3C,MAAM,SAAS,GAAG,eAAe,CAAC;IACjC,SAAS,EAAE;QACV,OAAO,EAAE,MAAM;QACf,UAAU,EAAE,QAAQ;QACpB,cAAc,EAAE,QAAQ;QACxB,MAAM,EAAE,MAAM;QACd,KAAK,EAAE,MAAM;KACb;CACD,CAAC,CAAA;AAEF,MAAM,CAAC,MAAM,cAAc,GAAa,GAAG,EAAE;IAC5C,MAAM,OAAO,GAAG,SAAS,EAAE,CAAA;IAC3B,OAAO,CACN,CAAC,GAAG,CAAC,SAAS,CAAC,CAAC,OAAO,CAAC,SAAS,CAAC,CACjC;GAAA,CAAC,IAAI,CAAC,IAAI,CAAC,OAAO,CAAC,EAAE,IAAI,CAC1B;EAAA,EAAE,GAAG,CAAC,CACN,CAAA;AACF,CAAC,CAAA"}

package/dist_es/react/components/RecordImage.d.ts

@@ -1,20 +1,20 @@
-import { HRef } from 'haystack-core';
-import React from 'react';
-export interface RecordImageProps {
-    /**
-     * Ref of the image bin record.
-     */
-    imageRef?: HRef;
-    /**
-     * Fallback component to be displayed if the imageRef is not valid or the image is not found.
-     */
-    fallbackComponent?: React.ReactElement;
-    /**
-     * Props for img customization
-     */
-    imgProps?: Omit<React.DetailedHTMLProps<React.ImgHTMLAttributes<HTMLImageElement>, HTMLImageElement>, 'src'>;
-}
-/**
- * Displays an image from a bin record or a fallback if the given imageRef is not valid or if the image can't be found.
- */
-export declare const RecordImage: ({ imageRef, fallbackComponent, imgProps, }: RecordImageProps) => JSX.Element;
+import { HRef } from 'haystack-core';
+import React from 'react';
+export interface RecordImageProps {
+    /**
+     * Ref of the image bin record.
+     */
+    imageRef?: HRef;
+    /**
+     * Fallback component to be displayed if the imageRef is not valid or the image is not found.
+     */
+    fallbackComponent?: React.ReactElement;
+    /**
+     * Props for img customization
+     */
+    imgProps?: Omit<React.DetailedHTMLProps<React.ImgHTMLAttributes<HTMLImageElement>, HTMLImageElement>, 'src'>;
+}
+/**
+ * Displays an image from a bin record or a fallback if the given imageRef is not valid or if the image can't be found.
+ */
+export declare const RecordImage: ({ imageRef, fallbackComponent, imgProps, }: RecordImageProps) => JSX.Element;

package/dist_es/react/components/RecordImage.js

@@ -1,25 +1,25 @@
-/*
- * Copyright (c) 2023, J2 Innovations. All Rights Reserved
- */
-import React, { useState } from 'react';
-import { useFin5BinUrl } from '../hooks/useFin5BinUrl';
-/**
- * Displays an image from a bin record or a fallback if the given imageRef is not valid or if the image can't be found.
- */
-export const RecordImage = ({ imageRef, fallbackComponent, imgProps, }) => {
-    const imgUrl = useFin5BinUrl(imageRef);
-    // State used to identify whether there is an error in loading the image, to display the fallback component if necessary
-    const [hasImage, setHasImage] = useState(true);
-    const shouldDisplayFallback = !!fallbackComponent && (!hasImage || !imgUrl);
-    if (shouldDisplayFallback) {
-        return fallbackComponent;
-    }
-    else {
-        return (React.createElement("img", { ...imgProps, onError: (event) => {
-                // This will happen if the resource is not found for some reason
-                setHasImage(false);
-                imgProps?.onError?.(event);
-            }, src: imgUrl }));
-    }
-};
+/*
+ * Copyright (c) 2023, J2 Innovations. All Rights Reserved
+ */
+import React, { useState } from 'react';
+import { useFin5BinUrl } from '../hooks/useFin5BinUrl';
+/**
+ * Displays an image from a bin record or a fallback if the given imageRef is not valid or if the image can't be found.
+ */
+export const RecordImage = ({ imageRef, fallbackComponent, imgProps, }) => {
+    const imgUrl = useFin5BinUrl(imageRef);
+    // State used to identify whether there is an error in loading the image, to display the fallback component if necessary
+    const [hasImage, setHasImage] = useState(true);
+    const shouldDisplayFallback = !!fallbackComponent && (!hasImage || !imgUrl);
+    if (shouldDisplayFallback) {
+        return fallbackComponent;
+    }
+    else {
+        return (React.createElement("img", { ...imgProps, onError: (event) => {
+                // This will happen if the resource is not found for some reason
+                setHasImage(false);
+                imgProps?.onError?.(event);
+            }, src: imgUrl }));
+    }
+};
 //# sourceMappingURL=RecordImage.js.map

package/dist_es/react/components/charts/QRCode.d.ts

@@ -1,25 +1,25 @@
-import React from 'react';
-interface QRCodeProps {
-    /**
-     * The value the QR code holds (can be an URI or a plain string)
-     */
-    value: string;
-    /**
-     * True to show a link to copy QR code to clipboard, false otherwise.
-     * @default true
-     */
-    copyable?: boolean;
-    /**
-     * The text of the link to copy the QR code to clipboard.
-     * @default 'Copy QR code to clipboard'
-     */
-    copyText?: string;
-    /**
-     * The size of the QR code in pixels.
-     * @default 350
-     */
-    size?: number;
-    className?: string;
-}
-export declare const QRCode: React.FC<QRCodeProps>;
-export {};
+import React from 'react';
+interface QRCodeProps {
+    /**
+     * The value the QR code holds (can be an URI or a plain string)
+     */
+    value: string;
+    /**
+     * True to show a link to copy QR code to clipboard, false otherwise.
+     * @default true
+     */
+    copyable?: boolean;
+    /**
+     * The text of the link to copy the QR code to clipboard.
+     * @default 'Copy QR code to clipboard'
+     */
+    copyText?: string;
+    /**
+     * The size of the QR code in pixels.
+     * @default 350
+     */
+    size?: number;
+    className?: string;
+}
+export declare const QRCode: React.FC<QRCodeProps>;
+export {};

package/dist_es/react/components/charts/QRCode.js

@@ -1,53 +1,53 @@
-import { Typography, ant_prefix } from '@j2inn/ui';
-import cn from 'classnames';
-import QRious from 'qrious';
-import React, { useCallback, useEffect, useLayoutEffect, useRef, useState, } from 'react';
-import { createUseStyles } from 'react-jss';
-const useStyles = createUseStyles({
-    qrCode: {
-        display: 'flex',
-        flexDirection: 'column',
-        [`& .${ant_prefix}-typography`]: {
-            textAlign: 'center',
-            paddingBottom: '0.5em',
-        },
-    },
-});
-export const QRCode = ({ value, size = 350, copyable = true, copyText = 'Copy QR code to clipboard', className, }) => {
-    const classes = useStyles();
-    const canvasRef = useRef(null);
-    const [qrCode, setQrCode] = useState();
-    useLayoutEffect(() => {
-        if (canvasRef.current) {
-            setQrCode(new QRious({
-                element: canvasRef.current,
-                value,
-                size,
-            }));
-        }
-    }, [value, canvasRef.current]);
-    useEffect(() => {
-        if (qrCode && qrCode.size !== size) {
-            qrCode.size = size;
-        }
-    }, [size]);
-    const copyQrCodeToClipboard = useCallback(async () => {
-        if (canvasRef.current) {
-            await canvasRef.current.toBlob((blob) => {
-                if (blob) {
-                    navigator.clipboard.write([
-                        new ClipboardItem({
-                            'image/png': blob,
-                        }),
-                    ]);
-                }
-            });
-        }
-    }, [canvasRef.current]);
-    return (React.createElement("div", { className: cn(className, classes.qrCode) },
-        copyable && (React.createElement(Typography.Text, { copyable: {
-                onCopy: () => copyQrCodeToClipboard(),
-            } }, copyText)),
-        React.createElement("canvas", { ref: canvasRef })));
-};
+import { Typography, ant_prefix } from '@j2inn/ui';
+import cn from 'classnames';
+import QRious from 'qrious';
+import React, { useCallback, useEffect, useLayoutEffect, useRef, useState, } from 'react';
+import { createUseStyles } from 'react-jss';
+const useStyles = createUseStyles({
+    qrCode: {
+        display: 'flex',
+        flexDirection: 'column',
+        [`& .${ant_prefix}-typography`]: {
+            textAlign: 'center',
+            paddingBottom: '0.5em',
+        },
+    },
+});
+export const QRCode = ({ value, size = 350, copyable = true, copyText = 'Copy QR code to clipboard', className, }) => {
+    const classes = useStyles();
+    const canvasRef = useRef(null);
+    const [qrCode, setQrCode] = useState();
+    useLayoutEffect(() => {
+        if (canvasRef.current) {
+            setQrCode(new QRious({
+                element: canvasRef.current,
+                value,
+                size,
+            }));
+        }
+    }, [value, canvasRef.current]);
+    useEffect(() => {
+        if (qrCode && qrCode.size !== size) {
+            qrCode.size = size;
+        }
+    }, [size]);
+    const copyQrCodeToClipboard = useCallback(async () => {
+        if (canvasRef.current) {
+            await canvasRef.current.toBlob((blob) => {
+                if (blob) {
+                    navigator.clipboard.write([
+                        new ClipboardItem({
+                            'image/png': blob,
+                        }),
+                    ]);
+                }
+            });
+        }
+    }, [canvasRef.current]);
+    return (React.createElement("div", { className: cn(className, classes.qrCode) },
+        copyable && (React.createElement(Typography.Text, { copyable: {
+                onCopy: () => copyQrCodeToClipboard(),
+            } }, copyText)),
+        React.createElement("canvas", { ref: canvasRef })));
+};
 //# sourceMappingURL=QRCode.js.map

package/dist_es/react/components/charts/line-bar/Chart.d.ts

@@ -1,166 +1,166 @@
-import * as am5 from '@amcharts/amcharts5';
-import { ITimeInterval } from '@amcharts/amcharts5/.internal/core/util/Time';
-import * as am5xy from '@amcharts/amcharts5/xy';
-import React from 'react';
-export declare type StackedColumnChartInterfaceColors = {
-    [Property in keyof am5.IInterfaceColorsSettings]: string;
-};
-export interface StackedColumnChartColorPalette {
-    interfaceColors?: Partial<StackedColumnChartInterfaceColors>;
-    series?: string[];
-}
-export declare enum UnitPlacement {
-    none = "none",
-    top = "top",
-    axis = "axis"
-}
-export declare enum AxisPlacement {
-    left = "left",
-    right = "right"
-}
-export declare enum LegendPlacement {
-    top = "top",
-    bottom = "bottom",
-    left = "left",
-    right = "right",
-    hidden = "hidden"
-}
-interface BaseChartSeriesProps {
-    seriesName: string;
-    dis?: string;
-    unit?: string;
-    axisPlacement?: AxisPlacement;
-    hideAxis?: boolean;
-}
-export interface BarChartSeriesData extends BaseChartSeriesProps {
-    stroke?: am5.Color;
-    data: LineChartSeriesPoint[];
-}
-export interface LineChartSeriesPoint {
-    ts: number;
-    value: number | undefined | null;
-}
-export interface LineChartSeriesData extends BaseChartSeriesProps {
-    strokeSettings?: {
-        stroke?: am5.Color;
-        strokeDasharray?: number[];
-        strokeWidth?: number;
-    };
-    data: LineChartSeriesPoint[];
-}
-export interface ChartAxisRangeData {
-    startValue?: number;
-    endValue?: number;
-    foreground?: am5.Color;
-    color?: am5.Color;
-    opacity?: number;
-    text?: string;
-    html?: string;
-    tooltip?: string;
-    showText?: boolean;
-    placeBelow?: boolean;
-}
-export interface ChartProps {
-    /**
-     * Data used to populate the chart with columns
-     */
-    barSeriesData?: BarChartSeriesData[];
-    /**
-     * Data used to populate the chart with stacked columns
-     */
-    stackedBarSeriesData?: BarChartSeriesData[];
-    /**
-     * Data used to populate the chart with line series
-     */
-    lineSeriesData?: LineChartSeriesData[];
-    rangesData?: ChartAxisRangeData[];
-    /**
-     * The name of the prop in the data that contains the timestamp
-     */
-    dateField: string;
-    /**
-     * True to activate the cursor
-     */
-    cursor?: boolean;
-    /**
-     * The time interval for the Date Axis @see https://www.amcharts.com/docs/v5/charts/xy-chart/axes/date-axis/#data-granularity
-     */
-    baseInterval: ITimeInterval;
-    /**
-     * Color palette for the chart slices and interface colors @see https://www.amcharts.com/docs/v5/concepts/colors-gradients-and-patterns/#Interface_colors
-     */
-    colorPalette?: Partial<StackedColumnChartColorPalette>;
-    /**
-     * Number formatting options @see https://www.amcharts.com/docs/v5/tutorials/formatting-date-time-and-numbers-using-intl-object/#Formatting_numbers
-     */
-    numberFormat?: Intl.NumberFormatOptions;
-    /**
-     * amcharts5 theme classes to be used by the chart @see https://www.amcharts.com/docs/v5/concepts/themes/
-     */
-    chartThemes?: typeof am5.Theme[];
-    /**
-     * Settings for chart customization @see https://www.amcharts.com/docs/v5/reference/xychart/#Settings
-     */
-    chartSettings?: am5xy.IXYChartSettings;
-    /**
-     * Settings for legend customization @see https://www.amcharts.com/docs/v5/reference/legend/#Settings
-     */
-    legendSettings?: am5.ILegendSettings;
-    /**
-     * Settings for legend labels customization @see https://www.amcharts.com/docs/v5/concepts/legend/#labels
-     */
-    legendLabelsSettings?: am5.ILabelSettings;
-    /**
-     * Settings for legend markers customization @see https://www.amcharts.com/docs/v5/concepts/legend/#labels
-     */
-    legendMarkersSettings?: am5.ILabelSettings & {
-        rounded?: boolean;
-    };
-    /**
-     * Settings for date axis @see https://www.amcharts.com/docs/v5/reference/dateaxis/#Settings
-     */
-    dateAxisSettings?: Omit<am5xy.IDateAxisSettings<am5xy.AxisRenderer>, 'baseInterval' | 'renderer'>;
-    /**
-     * Settings for date axis renderer @see https://www.amcharts.com/docs/v5/reference/iaxisrendererxsettings/
-     */
-    dateAxisRendererSettings?: am5xy.IAxisRendererXSettings;
-    /**
-     * Settings for category axis @see https://www.amcharts.com/docs/v5/reference/valueaxis/#Settings
-     */
-    valueAxisSettings?: Omit<am5xy.IValueAxisSettings<am5xy.AxisRenderer>, 'renderer'>;
-    /**
-     * Settings for chart series customization @see https://www.amcharts.com/docs/v5/reference/grid/#Settings
-     */
-    gridSettings?: Partial<am5xy.IGridSettings>;
-    /**
-     * Settings for chart column series customization @see https://www.amcharts.com/docs/v5/reference/columnseries/#Settings
-     */
-    barSeriesSettings?: am5xy.IColumnSeriesSettings;
-    /**
-     * Settings for chart line series customization @see https://www.amcharts.com/docs/v5/reference/lineseries/#Settings
-     */
-    lineSeriesSettings?: Partial<am5xy.ILineSeriesSettings>;
-    /**
-     * Settings for series column customization @see https://www.amcharts.com/docs/v5/reference/roundedrectangle/#Settings
-     */
-    columnSettings?: Partial<am5.IRoundedRectangleSettings>;
-    /**
-     * Settings for tooltips label customization @see https://www.amcharts.com/docs/v5/reference/ilabelsettings/
-     */
-    tooltipSettings?: Partial<am5.ILabelSettings>;
-    unitPlacement?: UnitPlacement;
-    legendPlacement?: LegendPlacement;
-    translateLabel?: (name: string) => string;
-    /**
-     * Optional DOM id for the chart container, if not specified it will be automatically generated.
-     * It can also be an HTMLElement, in that case the element will be used as a parent.
-     */
-    DOMtargetId?: string | HTMLElement;
-}
-/**
- * Customizable stacked column and line chart component based on amcharts5
- *
- * This component wraps some of the chart configuration trying to make it more react-friendly
- */
-export declare const Chart: React.FC<ChartProps>;
-export {};
+import * as am5 from '@amcharts/amcharts5';
+import { ITimeInterval } from '@amcharts/amcharts5/.internal/core/util/Time';
+import * as am5xy from '@amcharts/amcharts5/xy';
+import React from 'react';
+export declare type StackedColumnChartInterfaceColors = {
+    [Property in keyof am5.IInterfaceColorsSettings]: string;
+};
+export interface StackedColumnChartColorPalette {
+    interfaceColors?: Partial<StackedColumnChartInterfaceColors>;
+    series?: string[];
+}
+export declare enum UnitPlacement {
+    none = "none",
+    top = "top",
+    axis = "axis"
+}
+export declare enum AxisPlacement {
+    left = "left",
+    right = "right"
+}
+export declare enum LegendPlacement {
+    top = "top",
+    bottom = "bottom",
+    left = "left",
+    right = "right",
+    hidden = "hidden"
+}
+interface BaseChartSeriesProps {
+    seriesName: string;
+    dis?: string;
+    unit?: string;
+    axisPlacement?: AxisPlacement;
+    hideAxis?: boolean;
+}
+export interface BarChartSeriesData extends BaseChartSeriesProps {
+    stroke?: am5.Color;
+    data: LineChartSeriesPoint[];
+}
+export interface LineChartSeriesPoint {
+    ts: number;
+    value: number | undefined | null;
+}
+export interface LineChartSeriesData extends BaseChartSeriesProps {
+    strokeSettings?: {
+        stroke?: am5.Color;
+        strokeDasharray?: number[];
+        strokeWidth?: number;
+    };
+    data: LineChartSeriesPoint[];
+}
+export interface ChartAxisRangeData {
+    startValue?: number;
+    endValue?: number;
+    foreground?: am5.Color;
+    color?: am5.Color;
+    opacity?: number;
+    text?: string;
+    html?: string;
+    tooltip?: string;
+    showText?: boolean;
+    placeBelow?: boolean;
+}
+export interface ChartProps {
+    /**
+     * Data used to populate the chart with columns
+     */
+    barSeriesData?: BarChartSeriesData[];
+    /**
+     * Data used to populate the chart with stacked columns
+     */
+    stackedBarSeriesData?: BarChartSeriesData[];
+    /**
+     * Data used to populate the chart with line series
+     */
+    lineSeriesData?: LineChartSeriesData[];
+    rangesData?: ChartAxisRangeData[];
+    /**
+     * The name of the prop in the data that contains the timestamp
+     */
+    dateField: string;
+    /**
+     * True to activate the cursor
+     */
+    cursor?: boolean;
+    /**
+     * The time interval for the Date Axis @see https://www.amcharts.com/docs/v5/charts/xy-chart/axes/date-axis/#data-granularity
+     */
+    baseInterval: ITimeInterval;
+    /**
+     * Color palette for the chart slices and interface colors @see https://www.amcharts.com/docs/v5/concepts/colors-gradients-and-patterns/#Interface_colors
+     */
+    colorPalette?: Partial<StackedColumnChartColorPalette>;
+    /**
+     * Number formatting options @see https://www.amcharts.com/docs/v5/tutorials/formatting-date-time-and-numbers-using-intl-object/#Formatting_numbers
+     */
+    numberFormat?: Intl.NumberFormatOptions;
+    /**
+     * amcharts5 theme classes to be used by the chart @see https://www.amcharts.com/docs/v5/concepts/themes/
+     */
+    chartThemes?: typeof am5.Theme[];
+    /**
+     * Settings for chart customization @see https://www.amcharts.com/docs/v5/reference/xychart/#Settings
+     */
+    chartSettings?: am5xy.IXYChartSettings;
+    /**
+     * Settings for legend customization @see https://www.amcharts.com/docs/v5/reference/legend/#Settings
+     */
+    legendSettings?: am5.ILegendSettings;
+    /**
+     * Settings for legend labels customization @see https://www.amcharts.com/docs/v5/concepts/legend/#labels
+     */
+    legendLabelsSettings?: am5.ILabelSettings;
+    /**
+     * Settings for legend markers customization @see https://www.amcharts.com/docs/v5/concepts/legend/#labels
+     */
+    legendMarkersSettings?: am5.ILabelSettings & {
+        rounded?: boolean;
+    };
+    /**
+     * Settings for date axis @see https://www.amcharts.com/docs/v5/reference/dateaxis/#Settings
+     */
+    dateAxisSettings?: Omit<am5xy.IDateAxisSettings<am5xy.AxisRenderer>, 'baseInterval' | 'renderer'>;
+    /**
+     * Settings for date axis renderer @see https://www.amcharts.com/docs/v5/reference/iaxisrendererxsettings/
+     */
+    dateAxisRendererSettings?: am5xy.IAxisRendererXSettings;
+    /**
+     * Settings for category axis @see https://www.amcharts.com/docs/v5/reference/valueaxis/#Settings
+     */
+    valueAxisSettings?: Omit<am5xy.IValueAxisSettings<am5xy.AxisRenderer>, 'renderer'>;
+    /**
+     * Settings for chart series customization @see https://www.amcharts.com/docs/v5/reference/grid/#Settings
+     */
+    gridSettings?: Partial<am5xy.IGridSettings>;
+    /**
+     * Settings for chart column series customization @see https://www.amcharts.com/docs/v5/reference/columnseries/#Settings
+     */
+    barSeriesSettings?: am5xy.IColumnSeriesSettings;
+    /**
+     * Settings for chart line series customization @see https://www.amcharts.com/docs/v5/reference/lineseries/#Settings
+     */
+    lineSeriesSettings?: Partial<am5xy.ILineSeriesSettings>;
+    /**
+     * Settings for series column customization @see https://www.amcharts.com/docs/v5/reference/roundedrectangle/#Settings
+     */
+    columnSettings?: Partial<am5.IRoundedRectangleSettings>;
+    /**
+     * Settings for tooltips label customization @see https://www.amcharts.com/docs/v5/reference/ilabelsettings/
+     */
+    tooltipSettings?: Partial<am5.ILabelSettings>;
+    unitPlacement?: UnitPlacement;
+    legendPlacement?: LegendPlacement;
+    translateLabel?: (name: string) => string;
+    /**
+     * Optional DOM id for the chart container, if not specified it will be automatically generated.
+     * It can also be an HTMLElement, in that case the element will be used as a parent.
+     */
+    DOMtargetId?: string | HTMLElement;
+}
+/**
+ * Customizable stacked column and line chart component based on amcharts5
+ *
+ * This component wraps some of the chart configuration trying to make it more react-friendly
+ */
+export declare const Chart: React.FC<ChartProps>;
+export {};