ivt/dist/dash/index.mjs

Ivt Components Library

import React__default from 'react';
import { c as cn } from '../chunks/utils-BDcRwQMd.mjs';
import { f as formatNegative } from '../chunks/styles-lQyUmHf7.mjs';
import { C as Card, a as CardHeader, c as CardTitle, f as CardContent, b as CardFooter } from '../chunks/card-CEohNEru.mjs';
import { T as TooltipIndicator } from '../chunks/TooltipIndicator-o_ekzuQD.mjs';
import { S as Skeleton } from '../chunks/skeleton-LDpPNYvq.mjs';
import { T as TriangleAlert } from '../chunks/triangle-alert-B_tQGpT4.mjs';
import { f as formatDateToBrazilian } from '../chunks/date-Dqmv8Nr4.mjs';
import { a as formatNumberWithComma, f as formatMoney } from '../chunks/format-numbers-LmnBEQr0.mjs';
import { c as TooltipProvider, T as Tooltip, a as TooltipTrigger, b as TooltipContent } from '../chunks/tooltip-njN_ok-r.mjs';
import '../chunks/bundle-mjs-CXmmFvYo.mjs';
import '../chunks/createLucideIcon-C11Tr46U.mjs';
import '../chunks/format-8qs-kXlN.mjs';
import '../chunks/index-Dsw02Eup.mjs';
import 'react-dom';
import '@radix-ui/react-slot';
import 'react/jsx-runtime';
import '../chunks/index-D4jPaBZ2.mjs';
import '../chunks/index-4NpeUekv.mjs';
import '../chunks/index-DC-gAYjS.mjs';
import '../chunks/index-gX0V59dZ.mjs';
import '../chunks/index-C8u7IIcP.mjs';
import '../chunks/index-B87m6Bfb.mjs';
import '../chunks/index-DAa5gqEY.mjs';
import '../chunks/index-BksCjWh6.mjs';
import '../chunks/index-DfeRLazC.mjs';
import '../chunks/index-1toTCGyr.mjs';
import '../chunks/index-BJrVyyCQ.mjs';

function DashCard({ title, tooltip, value, footer, valueFormatter = (v)=>v, className, valueClassName, isLoading }) {
    return /*#__PURE__*/ React__default.createElement(Card, {
        className: cn("h-full gap-2", className)
    }, /*#__PURE__*/ React__default.createElement(CardHeader, {
        className: "gap-0"
    }, /*#__PURE__*/ React__default.createElement(CardTitle, {
        className: "flex flex-wrap items-center gap-2 text-sm font-medium"
    }, title, tooltip && /*#__PURE__*/ React__default.createElement(TooltipIndicator, null, tooltip))), /*#__PURE__*/ React__default.createElement(CardContent, null, isLoading ? /*#__PURE__*/ React__default.createElement(Skeleton, {
        className: cn("h-10 w-32 rounded-md", valueClassName)
    }) : /*#__PURE__*/ React__default.createElement("p", {
        className: cn("text-3xl font-bold", typeof value === "number" && formatNegative(+value), valueClassName)
    }, valueFormatter(value))), footer && /*#__PURE__*/ React__default.createElement(CardFooter, null, isLoading ? /*#__PURE__*/ React__default.createElement(Skeleton, {
        className: "h-4 w-20"
    }) : footer));
}

function DashCardList({ title, tooltip, footer, content, className, valueClassName, isLoading }) {
    return /*#__PURE__*/ React__default.createElement(Card, {
        className: cn("h-full gap-2", className)
    }, /*#__PURE__*/ React__default.createElement(CardHeader, {
        className: "gap-0"
    }, /*#__PURE__*/ React__default.createElement(CardTitle, {
        className: "flex flex-wrap items-center gap-2 text-sm font-medium"
    }, title, tooltip && /*#__PURE__*/ React__default.createElement(TooltipIndicator, null, tooltip))), /*#__PURE__*/ React__default.createElement(CardContent, null, isLoading ? /*#__PURE__*/ React__default.createElement(Skeleton, {
        className: cn("h-10 w-32 rounded-md", valueClassName)
    }) : content), footer && /*#__PURE__*/ React__default.createElement(CardFooter, null, isLoading ? /*#__PURE__*/ React__default.createElement(Skeleton, {
        className: "h-4 w-20"
    }) : footer));
}

const ErrorMessageDashCard = ({ children, className, shouldIcon = true, ...props })=>{
    return /*#__PURE__*/ React__default.createElement("div", {
        className: cn("text-destructive flex flex-wrap items-center gap-1 text-sm", className),
        ...props
    }, shouldIcon && /*#__PURE__*/ React__default.createElement(TriangleAlert, {
        className: "h-4 w-4"
    }), /*#__PURE__*/ React__default.createElement("span", null, children ?? "Erro ao carregar os dados"));
};

const ValuePercentage = ({ percentage, prevStartDate, prevEndDate, startDate, endDate, prevValue, value, valueMaxFractionDigits = 2, valueMinFractionDigits = 2, showText = true, text = "desde o último mês", formatAsMoney = false })=>{
    const cellCSS = percentage === 0 ? "text-muted-foreground" : percentage < 0 ? "text-destructive" : "text-positive";
    const iconValue = percentage < 0 ? "▼" : "▲";
    const formatValue = (val)=>{
        const options = {
            value: val,
            minimumFractionDigits: valueMinFractionDigits,
            maximumFractionDigits: valueMaxFractionDigits
        };
        return formatAsMoney ? formatMoney({
            value: options.value,
            minimumFractionDigits: options.minimumFractionDigits,
            maximumFractionDigits: options.maximumFractionDigits,
            currency: "BRL"
        }) : formatNumberWithComma(options);
    };
    return /*#__PURE__*/ React__default.createElement(TooltipProvider, null, /*#__PURE__*/ React__default.createElement(Tooltip, null, /*#__PURE__*/ React__default.createElement(TooltipTrigger, {
        asChild: true
    }, /*#__PURE__*/ React__default.createElement("div", {
        className: cn("text-xs", cellCSS)
    }, /*#__PURE__*/ React__default.createElement("span", {
        className: "mr-1"
    }, iconValue), /*#__PURE__*/ React__default.createElement("span", null, formatNumberWithComma({
        value: percentage,
        minimumFractionDigits: 0,
        maximumFractionDigits: 2
    }), "%"), " ", showText && /*#__PURE__*/ React__default.createElement("span", {
        className: "text-muted-foreground"
    }, text))), prevStartDate && startDate && /*#__PURE__*/ React__default.createElement(TooltipContent, {
        side: "bottom",
        className: "bg-secondary flex flex-col"
    }, /*#__PURE__*/ React__default.createElement("span", null, formatDateToBrazilian(prevStartDate), " ", prevEndDate && `- ${formatDateToBrazilian(prevEndDate)}`, ":", " ", formatValue(prevValue ?? 0)), /*#__PURE__*/ React__default.createElement("span", null, formatDateToBrazilian(startDate), " ", endDate && `- ${formatDateToBrazilian(endDate)}`, ":", " ", formatValue(value ?? 0)))));
};

export { DashCard, DashCardList, ErrorMessageDashCard, ValuePercentage };
//# sourceMappingURL=index.mjs.map