shadcn.io is not affiliated with official shadcn/ui
Cloud Cost Anomaly Monitoring Block for Vue
Thirty days of daily cloud spend as columns over an expected range, numbered anomalies with a likely cause, a month forecast against the budget and a split by service, for two accounts.
Installation
Overview
Catch the day a bill moved and see where the month is heading, with this cost monitor for Vue with Ark UI. It is Spendlark, a cloud cost anomaly monitor (made up) that reads the cost report of an AWS account. A hairline frame with a plus mark on each corner holds thirty daily columns over a band of what to expect: the highest and lowest spend on the same weekday over the four weeks before, with $10 of slack. A column outside the band is outlined and numbered, and the same numbers head a list of anomalies with the service, the amount over the band and a likely cause. Choosing an anomaly marks its column and reads it. A second band sets the October budget against the spend so far and the typical weekday for the days that remain, and says the day the forecast passes the budget; a side cell splits the month by service. A native select switches between two accounts. Guides draw the frame and its bands; the entrance is CSS only. For finance and platform teams, budget reviews and any account with a cost alert.
FAQ
How do I use my own cost data?
Replace the two objects at the top of the file. Each account has base, the typical spend for Sunday to Saturday, a seed that adds a small steady wobble, its events (the days that cost more, with the service and the likely cause), the monthly budget and the services weights. In the demo the daily series is generated from those; in your app feed 58 daily totals (28 for the band, 30 to show) from your cost report and keep everything else.
How is the expected band worked out?
For each of the thirty days it takes the same weekday over the previous four weeks, then widens the lowest and highest of those four by SLACK ($10). A day outside that band is an anomaly. Weekends are cheaper than weekdays, so Saturday is compared with Saturdays, not with Fridays.
What does the forecast assume?
That each remaining day of the month costs what that weekday typically costs, the mean of its last four occurrences. The spend so far plus those days is the forecast, and the first day the running total passes the budget is the crossing date in the sentence. It is a forecast from a pattern, not a prediction of a spike.
What is real here and what is typed?
All of it is typed: the series, the causes, the budget and the service split are examples, and nothing is read from a bill. AWS is named once because the slug names it; no figure or behaviour is claimed about the real service. The service shares are split to whole dollars so they add up to the month so far.