pagamio-frontend-commons-lib
Version:
Pagamio library for Frontend reusable components like the form engine and table container
10 lines (9 loc) • 2.2 kB
JavaScript
import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
import ReactECharts from 'echarts-for-react';
import MetricSummaryCard from '../../visuals/MetricSummaryCard';
import Card from '../CardWrapper';
import ChartWrapper from '../ChartWrapper';
const Analytics = ({ data, valueKey, itemMetricsData, valueMetricsData, averageMetricsData, distributionMetricsData, }) => {
return (_jsx("div", { className: "w-full h-[60vh]", children: _jsxs("div", { className: "p-4", children: [_jsx("h4", { className: "text-lg font-semibold mb-2", children: "Summary Statistics" }), _jsxs("div", { className: "grid grid-cols-1 md:grid-cols-3 gap-2", children: [_jsx(MetricSummaryCard, { title: itemMetricsData.title, format: itemMetricsData.format, value: itemMetricsData.value, previousValue: itemMetricsData.previousValue, isEmpty: itemMetricsData.isEmpty, loading: itemMetricsData.loading, currency: itemMetricsData.currency, error: itemMetricsData.error, refresh: itemMetricsData.refresh }), _jsx(MetricSummaryCard, { title: valueMetricsData.title, format: valueMetricsData.format, value: valueMetricsData.value, previousValue: valueMetricsData.previousValue, isEmpty: valueMetricsData.isEmpty, loading: valueMetricsData.loading, currency: valueMetricsData.currency, error: valueMetricsData.error, refresh: valueMetricsData.refresh }), _jsx(MetricSummaryCard, { title: averageMetricsData.title, format: averageMetricsData.format, value: averageMetricsData.value, previousValue: averageMetricsData.previousValue, isEmpty: averageMetricsData.isEmpty, loading: averageMetricsData.loading, currency: valueMetricsData.currency, error: averageMetricsData.error, refresh: averageMetricsData.refresh })] }), _jsx("div", { className: "mt-5", children: _jsx(Card, { title: 'Distribution', children: _jsx(ChartWrapper, { loading: distributionMetricsData.loading, error: distributionMetricsData.error, isEmpty: distributionMetricsData.isEmpty, onRetry: distributionMetricsData.refresh, children: _jsx("div", { className: "mt-[19px]", children: _jsx(ReactECharts, { option: distributionMetricsData.data, style: { height: '350px' }, opts: { renderer: 'canvas' } }) }) }) }) })] }) }));
};
export default Analytics;