pagamio-frontend-commons-lib/lib/dashboard-visuals/components/ChartDetailsModal.js

Pagamio library for Frontend reusable components like the form engine and table container

import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
import { Modal } from 'flowbite-react';
import { Tab } from '../../components';
import Analytics from './molecules/Analytics';
import DataGrid from './molecules/DataGrid';
import VisualChart from './molecules/VisualChart';
const ChartDetailsModal = ({ error, isEmpty, loading, refresh, isOpen, onClose, title, itemMetricsData, valueMetricsData, averageMetricsData, distributionMetricsData, data, columns, chartData, top5PerformingItems, bottom5NonPerformingItems, valueKey, searchKey, dataGridQuery, renderDetailsChart, searchInputPlaceHolder, detailsTableTitle, topFivePerformingChartTitle, bottomFivePerformingChartTitle, }) => {
    const tabs = [
        {
            id: 1,
            title: 'Visual Chart',
            content: (_jsx(VisualChart, { loading: loading, error: error, isEmpty: isEmpty, refresh: refresh, chartData: chartData, top5PerformingItems: top5PerformingItems, bottom5NonPerformingItems: bottom5NonPerformingItems, renderChart: renderDetailsChart, topFivePerformingChartTitle: topFivePerformingChartTitle, bottomFivePerformingChartTitle: bottomFivePerformingChartTitle })),
        },
        {
            id: 2,
            title: 'Data Table',
            content: (_jsx(DataGrid, { dataGridQuery: dataGridQuery, columns: columns, searchInputPlaceHolder: searchInputPlaceHolder, searchKey: searchKey, title: detailsTableTitle })),
        },
        {
            id: 3,
            title: 'Analytics',
            content: (_jsx(Analytics, { data: data, valueKey: valueKey, itemMetricsData: itemMetricsData, valueMetricsData: valueMetricsData, averageMetricsData: averageMetricsData, distributionMetricsData: distributionMetricsData })),
        },
    ];
    return (_jsxs(Modal, { show: isOpen, onClose: onClose, size: "7xl", children: [_jsx(Modal.Header, { children: _jsx("div", { className: "flex justify-between items-center w-full", children: _jsxs("h3", { className: "text-xl font-semibold", children: [title, " - Detailed Analysis"] }) }) }), _jsx(Modal.Body, { children: _jsx(Tab, { tabs: tabs, defaultTab: 0 }) })] }));
};
export default ChartDetailsModal;