Tidemark — an analytics dashboard that charts itself

Follow these steps in the Beetler builder to reproduce this exact app. Button and chip names are written the way they appear on screen.

1. Pick the build type.
   On the home screen, under “What are you building?”, click the Web app chip.
   
2. Describe one row, not the dashboard.
   The instinct is to describe the tiles you want. Describe the record instead — the month, the revenue, the active accounts, the churn rate, the signups and a note — and let Beetler derive the tiles. One entity with six honest fields beats four invented KPI entities that never agree with each other.
3. Choose a tone.
   Under “App personality”, click Editorial. Analytics tools default to dense monospaced grids; Editorial gives hairline rules, airy spacing and Playfair Display numerals, so the figures read like a printed report. Same data, completely different room.
   
4. Click Build It — then take the AI path.
   If a stock template is matched and built instantly, click Use AI instead so the pipeline reads your paragraph and produces the Month entity.
   
5. Watch it lay out the dashboard.
   Four pages — Dashboard, Months, Month and About. Beetler picks the stat tiles from the field types: it sums the money, averages the rate and shows it as a percentage, and counts the rows.
6. Fill it with eighteen months.
   Click Data then Generate Data. Set Month to 18 and add three assertions:

   Eighteen consecutive months from January 2025 to June 2026, the month field written like January 2025
   Monthly recurring revenue grows from about 48000 to about 214000 pounds but not every month goes up — two or three months dip
   Churn rate stays between 1.8 and 5.4 percent, new signups between 40 and 320

   The dip in the second assertion is deliberate: a chart where every bar is taller than the last looks fake. Click Generate, then Accept & Save.
7. Set currency & region.
   Click Locale, set Currency to GBP and Date format to UK / Europe, then Apply Locale Settings.
8. Build the revenue chart.
   Open Widgets and describe it: a column chart of the last twelve months of recurring revenue, one bar per month, the latest figure and its change against the previous month in the header, CSS variables for every colour. Say explicitly that it reads a data prop and takes data.months — that is what makes the chart follow the records instead of numbers you invented.
9. Iterate until the axis is readable.
   Ours came back with twelve month labels overlapping into a smear, then squeezed into the middle of its box. Both were fixed by describing the geometry: a fixed viewBox of 0 0 720 260, the svg at width 100%, one column slot per month, each label centred under its bar at font-size 11. Then Publish.
10. Place it and rebuild.
    Back in the app, place the widget on the Dashboard, then My Apps → Rebuild → Just Rebuild. The chart now draws itself from the eighteen months you generated.
11. Publish or export.
    Open My Apps and click Publish for a shareable link with a QR code, or Source to take the standalone React project away as a zip.