formater
efferd-/formaterFreeComponent
Formater utilities.
Live preview
live · rendered by the registry
Rendered by efferd on their own page — this is the component running, not a screenshot of it.Install it
npx shadcn@latest add http://efferd.com/r/formater.jsonSource
1/** Shared locale for dashboard (charts, KPIs, tables). */2export const DASHBOARD_LOCALE = "en-US";34/** Noon anchor avoids off-by-one labels around timezone boundaries for ISO date strings. */5export function parseIsoCalendarDate(isoDate: string): Date {6 return new Date(`${isoDate}T12:00:00`);7}89export type DashboardDateStyle = "month" | "day-month" | "full";1011export function formatDate(isoDate: string, style: DashboardDateStyle): string {12 const date = parseIsoCalendarDate(isoDate);13 if (style === "month") {14 return date.toLocaleDateString(DASHBOARD_LOCALE, { month: "short" });15 }16 if (style === "day-month") {17 return date.toLocaleDateString(DASHBOARD_LOCALE, {18 day: "numeric",19 month: "short",20 });21 }22 return date.toLocaleDateString(DASHBOARD_LOCALE, {23 day: "numeric",24 month: "short",25 year: "numeric",26 });27}2829/** X-axis for range charts: weekday when showing ~a week, otherwise month + day. */30export function formatChartAxisTick(31 isoDate: string,32 periodDays: number33): string {34 const date = parseIsoCalendarDate(isoDate);35 if (periodDays <= 7) {36 return date.toLocaleDateString(DASHBOARD_LOCALE, { weekday: "short" });37 }38 return formatDate(isoDate, "day-month");39}4041export type ChartTooltipWeekdayStyle = "short" | "long";4243/** Tooltip label for a chart point (weekday + month + day). */44export function formatChartTooltipDate(45 isoDate: string,46 weekdayStyle: ChartTooltipWeekdayStyle = "short"47): string {48 const date = parseIsoCalendarDate(isoDate);49 return date.toLocaleDateString(DASHBOARD_LOCALE, {50 weekday: weekdayStyle,51 day: "numeric",52 month: "short",53 });54}5556export function formatCompactCurrency(57 value: number,58 options?: { maximumFractionDigits?: number }59) {60 const { maximumFractionDigits = 0 } = options ?? {};61 return new Intl.NumberFormat(DASHBOARD_LOCALE, {62 currency: "USD",63 maximumFractionDigits,64 notation: "compact",65 style: "currency",66 }).format(value);67}6869/** Full-precision USD (e.g. average order value). */70export function formatFullCurrency(value: number) {71 return new Intl.NumberFormat(DASHBOARD_LOCALE, {72 currency: "USD",73 minimumFractionDigits: 2,74 maximumFractionDigits: 2,75 style: "currency",76 }).format(value);77}7879export function formatCompactNumber(value: number) {80 return new Intl.NumberFormat(DASHBOARD_LOCALE, {81 maximumFractionDigits: 1,82 notation: "compact",83 }).format(value);84}8586/** Whole numbers with grouping (visits, sessions, counts). */87export function formatInteger(value: number) {88// … truncated
Files it writes
More from efferd
All 201 items| Component | Registry | Kind | Access | Installs | Command |
|---|---|---|---|---|---|
| apple-iconapple-icon | efferd | Components | Free | no deps | |
| auth-dividerauth-divider | efferd | Components | Free | no deps | |
| copy-buttoncopy-button | efferd | Components | Free | no deps | |
| decor-icondecor-icon | efferd | Components | Free | no deps | |
| discord-icondiscord-icon | efferd | Components | Free | no deps | |
| facebook-iconfacebook-icon | efferd | Components | Free | no deps | |
| figma-iconfigma-icon | efferd | Components | Free | no deps | |
| framer-iconframer-icon | efferd | Components | Free | no deps |
