pagamio-frontend-commons-lib/lib/dashboard-visuals/visuals/Tile.js

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

import { jsx as _jsx } from "react/jsx-runtime";
import { formatPrice } from '../../helpers';
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, currency: propCurrency, currencyDisplaySymbol, ...props }) => {
    const { data, error, loading, isEmpty, refresh } = useChartData(url, query);
    // Safe default values
    const value = data?.[valueKey] ?? 0;
    const currency = propCurrency || data?.additionalData?.currency || undefined;
    return (_jsx(Card, { title: title, children: _jsx(ChartWrapper, { loading: loading && !data, error: error, isEmpty: isEmpty, onRetry: refresh, children: _jsx("div", { className: "flex justify-between", style: { height: '50px' }, children: _jsx("div", { className: "text-xl font-400", children: currency
                        ? formatPrice(Number(value.toFixed(2)), currency, 2, undefined, currencyDisplaySymbol)
                        : formatValue(Number(value.toFixed(2)), 'number') }) }) }) }));
};
export default Tile;