@j2inn/fin5-ui-utils 5.2.2-beta.8 → 6.0.0

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

@@ -1,53 +1,54 @@
-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',
+        },
+    },
+});
+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 })));
+};
+export default QRCode;
 //# sourceMappingURL=QRCode.js.map

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

@@ -1 +1 @@
-{"version":3,"file":"QRCode.js","sourceRoot":"","sources":["../../../../src/react/components/charts/QRCode.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAE,UAAU,EAAE,UAAU,EAAE,MAAM,WAAW,CAAA;AAClD,OAAO,EAAE,MAAM,YAAY,CAAA;AAC3B,OAAO,MAAM,MAAM,QAAQ,CAAA;AAC3B,OAAO,KAAK,EAAE,EACb,WAAW,EACX,SAAS,EACT,eAAe,EACf,MAAM,EACN,QAAQ,GACR,MAAM,OAAO,CAAA;AACd,OAAO,EAAE,eAAe,EAAE,MAAM,WAAW,CAAA;AAE3C,MAAM,SAAS,GAAG,eAAe,CAAC;IACjC,MAAM,EAAE;QACP,OAAO,EAAE,MAAM;QACf,aAAa,EAAE,QAAQ;QACvB,CAAC,MAAM,UAAU,aAAa,CAAC,EAAE;YAChC,SAAS,EAAE,QAAQ;YACnB,aAAa,EAAE,OAAO;SACtB;KACD;CACD,CAAC,CAAA;AAyBF,MAAM,CAAC,MAAM,MAAM,GAA0B,CAAC,EAC7C,KAAK,EACL,IAAI,GAAG,GAAG,EACV,QAAQ,GAAG,IAAI,EACf,QAAQ,GAAG,2BAA2B,EACtC,SAAS,GACT,EAAE,EAAE;IACJ,MAAM,OAAO,GAAG,SAAS,EAAE,CAAA;IAC3B,MAAM,SAAS,GAAG,MAAM,CAAoB,IAAI,CAAC,CAAA;IACjD,MAAM,CAAC,MAAM,EAAE,SAAS,CAAC,GAAG,QAAQ,EAAiB,CAAA;IAErD,eAAe,CAAC,GAAG,EAAE;QACpB,IAAI,SAAS,CAAC,OAAO,EAAE;YACtB,SAAS,CACR,IAAI,MAAM,CAAC;gBACV,OAAO,EAAE,SAAS,CAAC,OAAO;gBAC1B,KAAK;gBACL,IAAI;aACJ,CAAC,CACF,CAAA;SACD;IACF,CAAC,EAAE,CAAC,KAAK,EAAE,SAAS,CAAC,OAAO,CAAC,CAAC,CAAA;IAE9B,SAAS,CAAC,GAAG,EAAE;QACd,IAAI,MAAM,IAAI,MAAM,CAAC,IAAI,KAAK,IAAI,EAAE;YACnC,MAAM,CAAC,IAAI,GAAG,IAAI,CAAA;SAClB;IACF,CAAC,EAAE,CAAC,IAAI,CAAC,CAAC,CAAA;IAEV,MAAM,qBAAqB,GAAG,WAAW,CAAC,KAAK,IAAI,EAAE;QACpD,IAAI,SAAS,CAAC,OAAO,EAAE;YACtB,MAAM,SAAS,CAAC,OAAO,CAAC,MAAM,CAAC,CAAC,IAAI,EAAE,EAAE;gBACvC,IAAI,IAAI,EAAE;oBACT,SAAS,CAAC,SAAS,CAAC,KAAK,CAAC;wBACzB,IAAI,aAAa,CAAC;4BACjB,WAAW,EAAE,IAAI;yBACjB,CAAC;qBACF,CAAC,CAAA;iBACF;YACF,CAAC,CAAC,CAAA;SACF;IACF,CAAC,EAAE,CAAC,SAAS,CAAC,OAAO,CAAC,CAAC,CAAA;IAEvB,OAAO,CACN,6BAAK,SAAS,EAAE,EAAE,CAAC,SAAS,EAAE,OAAO,CAAC,MAAM,CAAC;QAC3C,QAAQ,IAAI,CACZ,oBAAC,UAAU,CAAC,IAAI,IACf,QAAQ,EAAE;gBACT,MAAM,EAAE,GAAG,EAAE,CAAC,qBAAqB,EAAE;aACrC,IACA,QAAQ,CACQ,CAClB;QACD,gCAAQ,GAAG,EAAE,SAAS,GAAW,CAC5B,CACN,CAAA;AACF,CAAC,CAAA"}
+{"version":3,"file":"QRCode.js","sourceRoot":"","sources":["../../../../src/react/components/charts/QRCode.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAE,UAAU,EAAE,UAAU,EAAE,MAAM,WAAW,CAAA;AAClD,OAAO,EAAE,MAAM,YAAY,CAAA;AAC3B,OAAO,MAAM,MAAM,QAAQ,CAAA;AAC3B,OAAO,KAAK,EAAE,EACb,WAAW,EACX,SAAS,EACT,eAAe,EACf,MAAM,EACN,QAAQ,GACR,MAAM,OAAO,CAAA;AACd,OAAO,EAAE,eAAe,EAAE,MAAM,WAAW,CAAA;AAE3C,MAAM,SAAS,GAAG,eAAe,CAAC;IACjC,MAAM,EAAE;QACP,OAAO,EAAE,MAAM;QACf,aAAa,EAAE,QAAQ;QACvB,CAAC,MAAM,UAAU,aAAa,CAAC,EAAE;YAChC,SAAS,EAAE,QAAQ;YACnB,aAAa,EAAE,OAAO;SACtB;KACD;CACD,CAAC,CAAA;AAyBF,MAAM,MAAM,GAA0B,CAAC,EACtC,KAAK,EACL,IAAI,GAAG,GAAG,EACV,QAAQ,GAAG,IAAI,EACf,QAAQ,GAAG,2BAA2B,EACtC,SAAS,GACT,EAAE,EAAE;IACJ,MAAM,OAAO,GAAG,SAAS,EAAE,CAAA;IAC3B,MAAM,SAAS,GAAG,MAAM,CAAoB,IAAI,CAAC,CAAA;IACjD,MAAM,CAAC,MAAM,EAAE,SAAS,CAAC,GAAG,QAAQ,EAAiB,CAAA;IAErD,eAAe,CAAC,GAAG,EAAE;QACpB,IAAI,SAAS,CAAC,OAAO,EAAE;YACtB,SAAS,CACR,IAAI,MAAM,CAAC;gBACV,OAAO,EAAE,SAAS,CAAC,OAAO;gBAC1B,KAAK;gBACL,IAAI;aACJ,CAAC,CACF,CAAA;SACD;IACF,CAAC,EAAE,CAAC,KAAK,EAAE,SAAS,CAAC,OAAO,CAAC,CAAC,CAAA;IAE9B,SAAS,CAAC,GAAG,EAAE;QACd,IAAI,MAAM,IAAI,MAAM,CAAC,IAAI,KAAK,IAAI,EAAE;YACnC,MAAM,CAAC,IAAI,GAAG,IAAI,CAAA;SAClB;IACF,CAAC,EAAE,CAAC,IAAI,CAAC,CAAC,CAAA;IAEV,MAAM,qBAAqB,GAAG,WAAW,CAAC,KAAK,IAAI,EAAE;QACpD,IAAI,SAAS,CAAC,OAAO,EAAE;YACtB,MAAM,SAAS,CAAC,OAAO,CAAC,MAAM,CAAC,CAAC,IAAI,EAAE,EAAE;gBACvC,IAAI,IAAI,EAAE;oBACT,SAAS,CAAC,SAAS,CAAC,KAAK,CAAC;wBACzB,IAAI,aAAa,CAAC;4BACjB,WAAW,EAAE,IAAI;yBACjB,CAAC;qBACF,CAAC,CAAA;iBACF;YACF,CAAC,CAAC,CAAA;SACF;IACF,CAAC,EAAE,CAAC,SAAS,CAAC,OAAO,CAAC,CAAC,CAAA;IAEvB,OAAO,CACN,6BAAK,SAAS,EAAE,EAAE,CAAC,SAAS,EAAE,OAAO,CAAC,MAAM,CAAC;QAC3C,QAAQ,IAAI,CACZ,oBAAC,UAAU,CAAC,IAAI,IACf,QAAQ,EAAE;gBACT,MAAM,EAAE,GAAG,EAAE,CAAC,qBAAqB,EAAE;aACrC,IACA,QAAQ,CACQ,CAClB;QACD,gCAAQ,GAAG,EAAE,SAAS,GAAW,CAC5B,CACN,CAAA;AACF,CAAC,CAAA;AAED,eAAe,MAAM,CAAA"}

package/dist_es/react/components/charts/pie/PieChart.d.ts

@@ -1,94 +1,93 @@
-import * as am5 from '@amcharts/amcharts5';
-import * as am5percent from '@amcharts/amcharts5/percent';
-import React from 'react';
-export declare type PieChartInterfaceColors = {
-    [Property in keyof am5.IInterfaceColorsSettings]: string;
-};
-export interface PieChartColorPalette {
-    interfaceColors?: Partial<PieChartInterfaceColors>;
-    series?: string[];
-}
-export interface PieChartSliceData {
-    value: number;
-    category: string;
-}
-export interface PieChartProps {
-    /**
-     * Data used to populate the chart
-     */
-    data: PieChartSliceData[];
-    /**
-     * 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<PieChartColorPalette>;
-    /**
-     * 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/piechart/#Settings
-     * The function accepts the chart root as a parameter to allow layout configuration.
-     */
-    chartSettingsProvider?: (root: am5.Root) => am5percent.IPieChartSettings;
-    /**
-     * Function to get settings for legend customization @see https://www.amcharts.com/docs/v5/reference/legend/#Settings
-     * The function accepts the chart root as a parameter to allow layout configuration.
-     */
-    legendSettingsProvider?: (root: am5.Root) => am5.ILegendSettings;
-    /**
-     * Settings for legend labels customization @see https://www.amcharts.com/docs/v5/reference/label/#Settings
-     */
-    legendLabelsSettings?: Partial<am5.ILabelSettings>;
-    /**
-     * Settings for legend value labels customization @see https://www.amcharts.com/docs/v5/reference/label/#Settings
-     */
-    legendValueLabelsSettings?: Partial<am5.ILabelSettings>;
-    /**
-     * Settings for legend markers customization @see https://www.amcharts.com/docs/v5/reference/label/#Settings
-     */
-    legendMarkersSettings?: Partial<am5.ILabelSettings>;
-    /**
-     * Settings for chart series customization @see https://www.amcharts.com/docs/v5/reference/pieseries/#Settings
-     */
-    seriesSettings?: am5percent.IPieSeriesSettings;
-    /**
-     * Settings for series labels customization @see https://www.amcharts.com/docs/v5/reference/pieseries/#Settings
-     */
-    seriesLabelsSettings?: Partial<am5.IRadialLabelSettings>;
-    /**
-     * Settings for central label customization, useful for donut charts, if not specified no center label will be shown @see https://www.amcharts.com/docs/v5/reference/radiallabel/#Settings
-     */
-    centerLabelSettings?: am5.ILabelSettings;
-    /**
-     * Settings for pie slices customization @see https://www.amcharts.com/docs/v5/reference/slice/#Settings
-     */
-    slicesSettings?: Partial<am5.ISliceSettings>;
-    /**
-     * List of adapters to be applied to the slices @see https://www.amcharts.com/docs/v5/concepts/settings/adapters
-     */
-    sliceAdapters?: SliceAdapter[];
-    /**
-     * 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;
-}
-export declare type SliceAdapter<T extends keyof am5.ISliceSettings = keyof am5.ISliceSettings> = [
-    T,
-    (context: {
-        root: am5.Root;
-        chart: am5percent.PieChart;
-        series: am5percent.PieSeries;
-    }) => (value: am5.ISliceSettings[T], target: am5.Slice, key: T) => am5.ISliceSettings[T]
-];
-/**
- * Highly customizable pie chart component based on amcharts5
- * @see https://www.amcharts.com/docs/v5/charts/percent-charts/pie-chart/
- *
- * This component wraps some of the chart configuration trying to make it more react-friendly
- */
-export declare const PieChart: React.FC<PieChartProps>;
+import * as am5 from '@amcharts/amcharts5';
+import * as am5percent from '@amcharts/amcharts5/percent';
+import React from 'react';
+export declare type PieChartInterfaceColors = {
+    [Property in keyof am5.IInterfaceColorsSettings]: string;
+};
+export interface PieChartColorPalette {
+    interfaceColors?: Partial<PieChartInterfaceColors>;
+    series?: string[];
+}
+export interface PieChartSliceData {
+    value: number;
+    category: string;
+}
+export interface PieChartProps {
+    /**
+     * Data used to populate the chart
+     */
+    data: PieChartSliceData[];
+    /**
+     * 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<PieChartColorPalette>;
+    /**
+     * 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/piechart/#Settings
+     * The function accepts the chart root as a parameter to allow layout configuration.
+     */
+    chartSettingsProvider?: (root: am5.Root) => am5percent.IPieChartSettings;
+    /**
+     * Function to get settings for legend customization @see https://www.amcharts.com/docs/v5/reference/legend/#Settings
+     * The function accepts the chart root as a parameter to allow layout configuration.
+     */
+    legendSettingsProvider?: (root: am5.Root) => am5.ILegendSettings;
+    /**
+     * Settings for legend labels customization @see https://www.amcharts.com/docs/v5/reference/label/#Settings
+     */
+    legendLabelsSettings?: Partial<am5.ILabelSettings>;
+    /**
+     * Settings for legend value labels customization @see https://www.amcharts.com/docs/v5/reference/label/#Settings
+     */
+    legendValueLabelsSettings?: Partial<am5.ILabelSettings>;
+    /**
+     * Settings for legend markers customization @see https://www.amcharts.com/docs/v5/reference/label/#Settings
+     */
+    legendMarkersSettings?: Partial<am5.ILabelSettings>;
+    /**
+     * Settings for chart series customization @see https://www.amcharts.com/docs/v5/reference/pieseries/#Settings
+     */
+    seriesSettings?: am5percent.IPieSeriesSettings;
+    /**
+     * Settings for series labels customization @see https://www.amcharts.com/docs/v5/reference/pieseries/#Settings
+     */
+    seriesLabelsSettings?: Partial<am5.IRadialLabelSettings>;
+    /**
+     * Settings for central label customization, useful for donut charts, if not specified no center label will be shown @see https://www.amcharts.com/docs/v5/reference/radiallabel/#Settings
+     */
+    centerLabelSettings?: am5.ILabelSettings;
+    /**
+     * Settings for pie slices customization @see https://www.amcharts.com/docs/v5/reference/slice/#Settings
+     */
+    slicesSettings?: Partial<am5.ISliceSettings>;
+    /**
+     * List of adapters to be applied to the slices @see https://www.amcharts.com/docs/v5/concepts/settings/adapters
+     */
+    sliceAdapters?: SliceAdapter[];
+    /**
+     * Optional DOM id for the chart container, if not specified it will be automatically generated
+     */
+    DOMtargetId?: string;
+}
+export declare type SliceAdapter<T extends keyof am5.ISliceSettings = keyof am5.ISliceSettings> = [
+    T,
+    (context: {
+        root: am5.Root;
+        chart: am5percent.PieChart;
+        series: am5percent.PieSeries;
+    }) => (value: am5.ISliceSettings[T], target: am5.Slice, key: T) => am5.ISliceSettings[T]
+];
+/**
+ * Highly customizable pie chart component based on amcharts5
+ * @see https://www.amcharts.com/docs/v5/charts/percent-charts/pie-chart/
+ *
+ * This component wraps some of the chart configuration trying to make it more react-friendly
+ */
+export declare const PieChart: React.FC<PieChartProps>;