pagamio-frontend-commons-lib
Version:
Pagamio library for Frontend reusable components like the form engine and table container
15 lines (14 loc) • 1.35 kB
JavaScript
import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
import Card from '../components/CardWrapper';
import ChartWrapper from '../components/ChartWrapper';
import { useChartData } from '../hooks/useChartData';
import { DashboardPaths, formatValue } from '../utils';
const Tile = ({ query, title, format, url = DashboardPaths.METRICS, details, valueKey, previousValueKey, changeKey, ...props }) => {
const { data, error, loading, isEmpty, refresh } = useChartData(url, query);
// Safe default values
const value = data?.[valueKey] ?? 0;
const previousValue = data?.[previousValueKey];
const change = data?.[changeKey];
return (_jsx(Card, { title: title, children: _jsx(ChartWrapper, { loading: loading && !data, error: error, isEmpty: isEmpty, onRetry: refresh, children: _jsxs("div", { className: "flex justify-between", style: { height: '50px' }, children: [_jsxs("div", { children: [_jsx("div", { className: "text-xl font-400", children: formatValue(value, format) }), previousValue !== undefined && (_jsxs("div", { className: "text-gray-400 text-sm", children: ["Prev: ", formatValue(previousValue, format)] }))] }), change !== undefined && (_jsxs("div", { className: `text-lg ${change >= 0 ? 'text-green-500' : 'text-red-500'}`, children: [change >= 0 ? '+' : '', change, "%"] }))] }) }) }));
};
export default Tile;