I truncate

islands/BudgetCard.tsx

@@ -3,6 +3,7 @@ import { Budget } from '../models.ts'
 import { Currency } from '../components/Currency.tsx'
 import { Percentage } from '../components/Percentage.tsx'
 import { Component } from 'https://esm.sh/stable/preact@10.19.6/denonext/preact.mjs'
+import { truncate } from '../mod.ts'
 
 function BudgetCardLit(
 	{ budget, ...props }:
@@ -69,20 +70,21 @@ export function BudgetCard(
 		& { budget: Budget }
 		& JSX.HTMLAttributes<HTMLDivElement>,
 ) {
-	const remainingRatio = 1.0 - (budget.spent / budget.target)
-	const bgClass = (remainingRatio < 0 ? 'bg-red' : 'bg-green') + ' opacity-10'
+	const spentRatio = budget.spent / budget.target
+	const remainingRatio = 1.0 - spentRatio
+	const bgClass = (spentRatio > 1.0 ? 'bg-red' : 'bg-green') + ' opacity-10'
 	const accentTextClass = remainingRatio < 0 ? 'text-red' : 'text-green'
 
 	return (
 		<ProgressBarCard
-			heading={budget.name}
+			heading={truncate(budget.name, 20)}
 			bgClass={bgClass}
 			accentTextClass={accentTextClass}
-			ratio={remainingRatio}
+			fillRatio={remainingRatio < 0 ? 1 : remainingRatio}
 			subheading={
 				<>
 					<Currency amount={Math.abs(budget.target - budget.spent)} />
-					{remainingRatio >= 0 ? ` left ` : ` over `}
+					{spentRatio >= 0 ? ` left ` : ` over `}
 				</>
 			}
 			{...props}
@@ -91,7 +93,7 @@ export function BudgetCard(
 				<Currency amount={budget.spent} /> of{' '}
 				<Currency amount={budget.target} />
 				{' spent '}
-				(<Percentage ratio={remainingRatio} /> remaining)
+				(<Percentage ratio={1.0 - spentRatio} /> remaining)
 			</small>
 		</ProgressBarCard>
 	)
@@ -102,13 +104,22 @@ interface ProgressBarCardProps {
 	subheading: JSX.Element
 	bgClass: string
 	accentTextClass: string
-	ratio: number
+	fillRatio: number
 }
 export function ProgressBarCard(
-	{ heading, subheading, bgClass, accentTextClass, ratio, children, ...props }:
+	{
+		heading,
+		subheading,
+		bgClass,
+		accentTextClass,
+		fillRatio,
+		children,
+		...props
+	}:
 		& ProgressBarCardProps
 		& JSX.HTMLAttributes<HTMLDivElement>,
 ) {
+	console.log({ fillRatio })
 	return (
 		<div
 			class='bg-surface0 rounded shadow hover:bg-surface1 transition-colors flex justify-between relative z-0 cursor-pointer'
@@ -116,7 +127,7 @@ export function ProgressBarCard(
 		>
 			<div
 				class={`rounded absolute top-0 bottom-0 left-0 ${bgClass} z-[-1]`}
-				style={`right: ${ratio * 100}%;`}
+				style={`right: ${Math.abs(fillRatio - 1.0) * 100}%;`}
 			/>
 			<h2
 				class={`py-2 px-3 text-2xl flex flex-none max-w-xs items-center ${accentTextClass} truncate`}

islands/Dashboard.tsx

@@ -1,7 +1,8 @@
 import { useSignal } from 'https://esm.sh/v135/@preact/signals@1.2.2/X-ZS8q/dist/signals.js'
 import { Budget } from '../models.ts'
-import { BudgetCard } from './BudgetCard.tsx'
+import { BudgetCard, ProgressBarCard } from './BudgetCard.tsx'
 import { IconButton } from '../components/IconButton.tsx'
+import { Currency } from '../components/Currency.tsx'
 
 export default function Dashboard() {
 	const activeNavItemIndex = useSignal(0)
@@ -93,6 +94,8 @@ export default function Dashboard() {
 		},
 	]
 
+	const uncategorizedSpend = 851.22
+
 	return (
 		<div class='h-[100vh] flex flex-col max-w-full'>
 			<header class='bg-mantle'>
@@ -102,6 +105,21 @@ export default function Dashboard() {
 				<main class='p-2 sm:pr-0 flex flex-col gap-2 max-w-full'>
 					{/*<h1>Budgets Overview</h1>*/}
 					<section class='flex flex-col gap-2 max-w-full'>
+						{uncategorizedSpend <= 0 ? '' : (
+							<ProgressBarCard
+								heading='Uncategorized'
+								bgClass='bg-yellow opacity-20'
+								accentTextClass='text-yellow'
+								fillRatio={1.0}
+								subheading={
+									<>
+										<Currency amount={uncategorizedSpend} />
+									</>
+								}
+							>
+								<small>You should categorize these!</small>
+							</ProgressBarCard>
+						)}
 						{budgets.map((budget, _i) => <BudgetCard budget={budget} />)}
 					</section>
 				</main>

mod.ts

@@ -1,5 +1,7 @@
-console.log('Hello, world!')
-
-if (true) {
-	console.log('Truth!')
+export function truncate(s: string, len: number): string {
+	if (s.length >= len) {
+		return s.substring(0, len - 3) + '...'
+	} else {
+		return s
+	}
 }