pagamio-frontend-commons-lib
Version:
Pagamio library for Frontend reusable components like the form engine and table container
9 lines (8 loc) • 2.12 kB
JavaScript
import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
import ReactECharts from 'echarts-for-react';
import Card from '../CardWrapper';
import ChartWrapper from '../ChartWrapper';
const VisualChart = ({ topFivePerformingChartTitle, bottomFivePerformingChartTitle, isEmpty, loading, refresh, error, chartData, top5PerformingItems, bottom5NonPerformingItems, renderChart, }) => {
return (_jsx(_Fragment, { children: renderChart ? (_jsx(ChartWrapper, { loading: loading, error: error, isEmpty: isEmpty, onRetry: refresh, children: _jsx("div", { className: "w-full overflow-x-auto overflow-y-auto rounded-lg shadow-lg bg-white p-4", children: _jsx("div", { className: "min-w-[600px] w-full h-[400px]", children: _jsx(ReactECharts, { option: chartData, style: { height: '100%', width: '100%' }, className: "w-full h-full" }) }) }) })) : (_jsxs("div", { className: "flex gap-5 mb-5", children: [_jsx("div", { className: "w-1/2", children: _jsx(Card, { title: topFivePerformingChartTitle ?? 'Top 5 Performing Items', children: _jsx(ChartWrapper, { loading: loading, error: error, isEmpty: isEmpty, onRetry: refresh, children: _jsx("div", { className: "w-full overflow-x-auto overflow-y-auto rounded-lg shadow-lg bg-white p-4", children: _jsx("div", { className: "min-w-[600px] w-full h-[400px]", children: _jsx(ReactECharts, { option: top5PerformingItems, style: { height: '100%', width: '100%' }, className: "w-full h-full", opts: { renderer: 'canvas' }, notMerge: true }) }) }) }) }) }), _jsx("div", { className: "w-1/2", children: _jsx(Card, { title: bottomFivePerformingChartTitle ?? 'Bottom 5 Performing Items', children: _jsx(ChartWrapper, { loading: loading, error: error, isEmpty: isEmpty, onRetry: refresh, children: _jsx("div", { className: "w-full overflow-x-auto overflow-y-auto rounded-lg shadow-lg bg-white p-4", children: _jsx("div", { className: "min-w-[600px] w-full h-[400px]", children: _jsx(ReactECharts, { option: bottom5NonPerformingItems, style: { height: '100%', width: '100%' }, className: "w-full h-full" }) }) }) }) }) })] })) }));
};
export default VisualChart;