@j2inn/fin5-ui-utils 8.1.1-beta.4 → 8.1.1-beta.6

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

@@ -1,94 +1,94 @@
-import * as am5 from '@amcharts/amcharts5';
-import * as am5percent from '@amcharts/amcharts5/percent';
-import React from 'react';
-export 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 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.
+     * 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>;

package/dist/react/components/charts/pie/PieChart.js

@@ -1,205 +1,205 @@
-"use strict";
-/*
- * Copyright (c) 2023, J2 Innovations. All Rights Reserved
- */
-var __createBinding = (this && this.__createBinding) || (Object.create ? (function(o, m, k, k2) {
-    if (k2 === undefined) k2 = k;
-    var desc = Object.getOwnPropertyDescriptor(m, k);
-    if (!desc || ("get" in desc ? !m.__esModule : desc.writable || desc.configurable)) {
-      desc = { enumerable: true, get: function() { return m[k]; } };
-    }
-    Object.defineProperty(o, k2, desc);
-}) : (function(o, m, k, k2) {
-    if (k2 === undefined) k2 = k;
-    o[k2] = m[k];
-}));
-var __setModuleDefault = (this && this.__setModuleDefault) || (Object.create ? (function(o, v) {
-    Object.defineProperty(o, "default", { enumerable: true, value: v });
-}) : function(o, v) {
-    o["default"] = v;
-});
-var __importStar = (this && this.__importStar) || function (mod) {
-    if (mod && mod.__esModule) return mod;
-    var result = {};
-    if (mod != null) for (var k in mod) if (k !== "default" && Object.prototype.hasOwnProperty.call(mod, k)) __createBinding(result, mod, k);
-    __setModuleDefault(result, mod);
-    return result;
-};
-Object.defineProperty(exports, "__esModule", { value: true });
-exports.PieChart = void 0;
-const am5 = __importStar(require("@amcharts/amcharts5"));
-const am5percent = __importStar(require("@amcharts/amcharts5/percent"));
-const react_1 = __importStar(require("react"));
-const react_jss_1 = require("react-jss");
-const useStyles = (0, react_jss_1.createUseStyles)({
-    root: {
-        width: '100%',
-        height: '100%',
-    },
-});
-/**
- * Returns a color palette selecting some colors from the theme.
- * @param theme The theme
- * @returns An array of colors
- */
-const getDefaultChartColors = (theme) => {
-    return {
-        interfaceColors: {
-            text: theme.textColor,
-        },
-        series: [
-            theme.palette.lime,
-            theme.palette.cyan,
-            theme.palette.red,
-            theme.palette.volcano,
-            theme.palette.orange,
-            theme.palette.gold,
-            theme.palette.yellow,
-            theme.palette.green,
-            theme.palette.purple,
-            theme.palette.magenta,
-            theme.palette.blue,
-            theme.palette.grey,
-        ],
-    };
-};
-/**
- * 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
- */
-const PieChart = ({ DOMtargetId, data, colorPalette, numberFormat, chartThemes, chartSettingsProvider, legendSettingsProvider, legendLabelsSettings, legendValueLabelsSettings, legendMarkersSettings, seriesSettings, seriesLabelsSettings, centerLabelSettings, slicesSettings, sliceAdapters, }) => {
-    // Colors configuration
-    const theme = (0, react_jss_1.useTheme)();
-    const colors = { ...getDefaultChartColors(theme), ...colorPalette };
-    // Chart lifecycle
-    const [id, setId] = (0, react_1.useState)(DOMtargetId ?? `amchart-${Math.random()}`);
-    const rootRef = (0, react_1.useRef)(null);
-    const chartRef = (0, react_1.useRef)(null);
-    const legendRef = (0, react_1.useRef)(null);
-    (0, react_1.useEffect)(() => {
-        if (DOMtargetId && DOMtargetId !== id) {
-            setId(DOMtargetId);
-        }
-    }, [DOMtargetId]);
-    // Chart setup
-    (0, react_1.useLayoutEffect)(() => {
-        const root = am5.Root.new(id);
-        // Setup amcharts theme
-        if (chartThemes) {
-            root.setThemes(chartThemes.map((t) => t.new(root)));
-        }
-        // Setup interface colors, see https://www.amcharts.com/docs/v5/concepts/colors-gradients-and-patterns/#Interface_colors
-        if (colors.interfaceColors) {
-            // Remap settings to use amcharts Color objects
-            for (const setting in colors.interfaceColors) {
-                const color = colors.interfaceColors[setting];
-                // Apply defined interfaceColor on the chart
-                root.interfaceColors.set(setting, am5.color(color));
-            }
-        }
-        // Setup chart settings
-        const chart = root.container.children.push(am5percent.PieChart.new(root, {
-            layout: root.verticalLayout,
-            ...chartSettingsProvider?.(root),
-        }));
-        // Setup legend
-        const legend = chart.children.push(am5.Legend.new(root, {
-            layout: root.horizontalLayout,
-            ...legendSettingsProvider?.(root),
-        }));
-        if (legendLabelsSettings) {
-            legend.labels.template.setAll(legendLabelsSettings);
-        }
-        if (legendValueLabelsSettings) {
-            legend.valueLabels.template.setAll(legendValueLabelsSettings);
-        }
-        if (legendMarkersSettings) {
-            legend.markers.template.setAll(legendMarkersSettings);
-        }
-        rootRef.current = root;
-        chartRef.current = chart;
-        legendRef.current = legend;
-        // clean up before component removal from the DOM
-        return () => {
-            legendRef.current?.dispose();
-            legendRef.current = null;
-            chartRef.current?.dispose();
-            chartRef.current = null;
-            root?.dispose();
-            rootRef.current = null;
-        };
-    }, [
-        id,
-        colors,
-        chartThemes,
-        chartSettingsProvider,
-        legendSettingsProvider,
-        legendValueLabelsSettings,
-        legendMarkersSettings,
-    ]);
-    // Set data
-    (0, react_1.useEffect)(() => {
-        const root = rootRef.current;
-        const chart = chartRef.current;
-        if (chart && root) {
-            chart.series.clear();
-            if (data?.length) {
-                // Setup series
-                const series = chart.series.push(am5percent.PieSeries.new(root, {
-                    valueField: 'value',
-                    categoryField: 'category',
-                    ...seriesSettings,
-                }));
-                // Setup series labels
-                if (seriesLabelsSettings) {
-                    series.labels.template.setAll(seriesLabelsSettings);
-                }
-                // Setup center label
-                if (centerLabelSettings) {
-                    series.children.push(am5.Label.new(root, {
-                        ...centerLabelSettings,
-                    }));
-                }
-                // Setup series slices
-                if (slicesSettings) {
-                    series.slices.template.setAll(slicesSettings);
-                }
-                // Setup slice adapters
-                if (sliceAdapters) {
-                    sliceAdapters.forEach(([key, callbackMaker]) => series.slices.template.adapters.add(key, callbackMaker({
-                        root: root,
-                        chart: chart,
-                        series,
-                    })));
-                }
-                // Setup series colors
-                if (colors?.series) {
-                    series.get('colors')?.set('colors', colors.series.map((c) => am5.color(c)));
-                }
-                series.data.setAll(data);
-                legendRef.current?.data.setAll(series.dataItems);
-            }
-        }
-    }, [
-        data,
-        chartRef.current,
-        colors?.series,
-        seriesSettings,
-        slicesSettings,
-        seriesLabelsSettings,
-        sliceAdapters,
-    ]);
-    (0, react_1.useEffect)(() => {
-        if (numberFormat) {
-            rootRef.current?.numberFormatter.set('numberFormat', numberFormat);
-        }
-    }, [rootRef.current, numberFormat]);
-    const classes = useStyles();
-    return typeof id === 'string' ? (react_1.default.createElement("div", { id: id, className: classes.root })) : (
-    // If the DOM target is an HTML element, do not render another div. The chart will be attached to the existing element.
-    react_1.default.createElement(react_1.default.Fragment, null));
-};
-exports.PieChart = PieChart;
+"use strict";
+/*
+ * Copyright (c) 2023, J2 Innovations. All Rights Reserved
+ */
+var __createBinding = (this && this.__createBinding) || (Object.create ? (function(o, m, k, k2) {
+    if (k2 === undefined) k2 = k;
+    var desc = Object.getOwnPropertyDescriptor(m, k);
+    if (!desc || ("get" in desc ? !m.__esModule : desc.writable || desc.configurable)) {
+      desc = { enumerable: true, get: function() { return m[k]; } };
+    }
+    Object.defineProperty(o, k2, desc);
+}) : (function(o, m, k, k2) {
+    if (k2 === undefined) k2 = k;
+    o[k2] = m[k];
+}));
+var __setModuleDefault = (this && this.__setModuleDefault) || (Object.create ? (function(o, v) {
+    Object.defineProperty(o, "default", { enumerable: true, value: v });
+}) : function(o, v) {
+    o["default"] = v;
+});
+var __importStar = (this && this.__importStar) || function (mod) {
+    if (mod && mod.__esModule) return mod;
+    var result = {};
+    if (mod != null) for (var k in mod) if (k !== "default" && Object.prototype.hasOwnProperty.call(mod, k)) __createBinding(result, mod, k);
+    __setModuleDefault(result, mod);
+    return result;
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.PieChart = void 0;
+const am5 = __importStar(require("@amcharts/amcharts5"));
+const am5percent = __importStar(require("@amcharts/amcharts5/percent"));
+const react_1 = __importStar(require("react"));
+const react_jss_1 = require("react-jss");
+const useStyles = (0, react_jss_1.createUseStyles)({
+    root: {
+        width: '100%',
+        height: '100%',
+    },
+});
+/**
+ * Returns a color palette selecting some colors from the theme.
+ * @param theme The theme
+ * @returns An array of colors
+ */
+const getDefaultChartColors = (theme) => {
+    return {
+        interfaceColors: {
+            text: theme.textColor,
+        },
+        series: [
+            theme.palette.lime,
+            theme.palette.cyan,
+            theme.palette.red,
+            theme.palette.volcano,
+            theme.palette.orange,
+            theme.palette.gold,
+            theme.palette.yellow,
+            theme.palette.green,
+            theme.palette.purple,
+            theme.palette.magenta,
+            theme.palette.blue,
+            theme.palette.grey,
+        ],
+    };
+};
+/**
+ * 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
+ */
+const PieChart = ({ DOMtargetId, data, colorPalette, numberFormat, chartThemes, chartSettingsProvider, legendSettingsProvider, legendLabelsSettings, legendValueLabelsSettings, legendMarkersSettings, seriesSettings, seriesLabelsSettings, centerLabelSettings, slicesSettings, sliceAdapters, }) => {
+    // Colors configuration
+    const theme = (0, react_jss_1.useTheme)();
+    const colors = { ...getDefaultChartColors(theme), ...colorPalette };
+    // Chart lifecycle
+    const [id, setId] = (0, react_1.useState)(DOMtargetId ?? `amchart-${Math.random()}`);
+    const rootRef = (0, react_1.useRef)(null);
+    const chartRef = (0, react_1.useRef)(null);
+    const legendRef = (0, react_1.useRef)(null);
+    (0, react_1.useEffect)(() => {
+        if (DOMtargetId && DOMtargetId !== id) {
+            setId(DOMtargetId);
+        }
+    }, [DOMtargetId]);
+    // Chart setup
+    (0, react_1.useLayoutEffect)(() => {
+        const root = am5.Root.new(id);
+        // Setup amcharts theme
+        if (chartThemes) {
+            root.setThemes(chartThemes.map((t) => t.new(root)));
+        }
+        // Setup interface colors, see https://www.amcharts.com/docs/v5/concepts/colors-gradients-and-patterns/#Interface_colors
+        if (colors.interfaceColors) {
+            // Remap settings to use amcharts Color objects
+            for (const setting in colors.interfaceColors) {
+                const color = colors.interfaceColors[setting];
+                // Apply defined interfaceColor on the chart
+                root.interfaceColors.set(setting, am5.color(color));
+            }
+        }
+        // Setup chart settings
+        const chart = root.container.children.push(am5percent.PieChart.new(root, {
+            layout: root.verticalLayout,
+            ...chartSettingsProvider?.(root),
+        }));
+        // Setup legend
+        const legend = chart.children.push(am5.Legend.new(root, {
+            layout: root.horizontalLayout,
+            ...legendSettingsProvider?.(root),
+        }));
+        if (legendLabelsSettings) {
+            legend.labels.template.setAll(legendLabelsSettings);
+        }
+        if (legendValueLabelsSettings) {
+            legend.valueLabels.template.setAll(legendValueLabelsSettings);
+        }
+        if (legendMarkersSettings) {
+            legend.markers.template.setAll(legendMarkersSettings);
+        }
+        rootRef.current = root;
+        chartRef.current = chart;
+        legendRef.current = legend;
+        // clean up before component removal from the DOM
+        return () => {
+            legendRef.current?.dispose();
+            legendRef.current = null;
+            chartRef.current?.dispose();
+            chartRef.current = null;
+            root?.dispose();
+            rootRef.current = null;
+        };
+    }, [
+        id,
+        colors,
+        chartThemes,
+        chartSettingsProvider,
+        legendSettingsProvider,
+        legendValueLabelsSettings,
+        legendMarkersSettings,
+    ]);
+    // Set data
+    (0, react_1.useEffect)(() => {
+        const root = rootRef.current;
+        const chart = chartRef.current;
+        if (chart && root) {
+            chart.series.clear();
+            if (data?.length) {
+                // Setup series
+                const series = chart.series.push(am5percent.PieSeries.new(root, {
+                    valueField: 'value',
+                    categoryField: 'category',
+                    ...seriesSettings,
+                }));
+                // Setup series labels
+                if (seriesLabelsSettings) {
+                    series.labels.template.setAll(seriesLabelsSettings);
+                }
+                // Setup center label
+                if (centerLabelSettings) {
+                    series.children.push(am5.Label.new(root, {
+                        ...centerLabelSettings,
+                    }));
+                }
+                // Setup series slices
+                if (slicesSettings) {
+                    series.slices.template.setAll(slicesSettings);
+                }
+                // Setup slice adapters
+                if (sliceAdapters) {
+                    sliceAdapters.forEach(([key, callbackMaker]) => series.slices.template.adapters.add(key, callbackMaker({
+                        root: root,
+                        chart: chart,
+                        series,
+                    })));
+                }
+                // Setup series colors
+                if (colors?.series) {
+                    series.get('colors')?.set('colors', colors.series.map((c) => am5.color(c)));
+                }
+                series.data.setAll(data);
+                legendRef.current?.data.setAll(series.dataItems);
+            }
+        }
+    }, [
+        data,
+        chartRef.current,
+        colors?.series,
+        seriesSettings,
+        slicesSettings,
+        seriesLabelsSettings,
+        sliceAdapters,
+    ]);
+    (0, react_1.useEffect)(() => {
+        if (numberFormat) {
+            rootRef.current?.numberFormatter.set('numberFormat', numberFormat);
+        }
+    }, [rootRef.current, numberFormat]);
+    const classes = useStyles();
+    return typeof id === 'string' ? (react_1.default.createElement("div", { id: id, className: classes.root })) : (
+    // If the DOM target is an HTML element, do not render another div. The chart will be attached to the existing element.
+    react_1.default.createElement(react_1.default.Fragment, null));
+};
+exports.PieChart = PieChart;
 //# sourceMappingURL=PieChart.js.map

package/dist/react/components/charts/pie/SimplePieChart.d.ts

@@ -1,21 +1,21 @@
-import React from 'react';
-import { PieChartColorPalette, PieChartSliceData } from './PieChart';
-export interface SimplePieChartProps {
-    data: PieChartSliceData[];
-    donut?: boolean;
-    animated?: boolean;
-    colorPalette?: Partial<PieChartColorPalette>;
-    tooltipFormat?: string;
-    numberFormat?: Intl.NumberFormatOptions;
-    hideLabels?: boolean;
-    /**
-     * 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;
-}
-/**
- * Simplified version of the pie chart for quick usage and easy configuration.
- * Serves also as an example of how to use the underlying PieChart component.
- */
-export declare const SimplePieChart: React.FC<SimplePieChartProps>;
+import React from 'react';
+import { PieChartColorPalette, PieChartSliceData } from './PieChart';
+export interface SimplePieChartProps {
+    data: PieChartSliceData[];
+    donut?: boolean;
+    animated?: boolean;
+    colorPalette?: Partial<PieChartColorPalette>;
+    tooltipFormat?: string;
+    numberFormat?: Intl.NumberFormatOptions;
+    hideLabels?: boolean;
+    /**
+     * 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;
+}
+/**
+ * Simplified version of the pie chart for quick usage and easy configuration.
+ * Serves also as an example of how to use the underlying PieChart component.
+ */
+export declare const SimplePieChart: React.FC<SimplePieChartProps>;