AI-Built Dashboards with Copilot & Claude

What we look at, in order

• Executive Overview — export value, volume MT, weighted USD/MT, market count, filtered row count, plus the monthly value trend, top destinations, top reporters, and product mix.
• Products — composition by value and by volume, then the top markets and reporters for whichever product you select.
• Markets — top destination markets, which reporters supply the market you pick, its product mix, and the annual trend.
• Trade Routes — a Sankey diagram of reporter → destination flows, with link width by export value.
• Data Explorer — the underlying rows with search and pagination, so any number on any chart can be traced back to source.

The three things worth noticing

• Global filters — reporter, destination market, product, and year apply across every page at once. Change one, and all five pages recalculate.
• Import Excel — click it, pick refined_sugar_data_aug.xlsx, and the whole dashboard rebuilds on the new data: filters repopulate, visuals refresh, filename and row count update. The file is the tool; the data is swappable.
• Export Filtered CSV — whatever you have filtered down to goes out as a CSV, so the dashboard feeds the next piece of work instead of being a dead end.

Why a single HTML file

• HTML, CSS, and JavaScript all live in one file that opens directly in any browser — no server, no install, no IT ticket.
• Easy to send by email or Teams, or park in a SharePoint folder where the link never changes.
• Small enough that AI can regenerate or revise the whole thing in one pass.

Anatomy of a dashboard prompt

1. The data contract — which sheet, and the exact column names to use. Never let AI guess your headers.
2. The controls — the buttons you want visible, and precisely what each one must do.
3. The calculations — spelled out as formulas, including unit conversion. This is where silent errors hide.
4. The exact labels — product and category names written out in full, so nothing gets paraphrased.
5. The filters — which fields are global and apply across every page.
6. The pages — each page named, with its visuals listed underneath.
7. Styling and output — the look you want, and the format you want back.

1 · The data contract

2 · The controls, with behaviour

3 · The calculations, as formulas

Note that this is a weighted average, not an average of averages — say so, or you will quietly get the wrong number.

4 · The exact labels

5–6 · Filters and pages

7 · Styling, validation, and output

Round 1 · Get something on screen

Keep the first prompt small. You want a layout to react to, not a finished product.

Round 2 · Fix what is wrong before adding anything

Resist the urge to pile on features. Correct the numbers first — everything downstream inherits them.

Round 3 · Add one capability at a time

Round 4 · Make it reusable, not single-use

Round 5 · Then polish

How to give good feedback

• Point at the specific thing. "The Top Destinations chart is showing partner codes instead of country names" beats "the charts look wrong".
• Say what it should be, not just that it is broken. Describe the correct output and you skip a round trip.
• Change one area per round. Fixing five things at once makes it hard to tell which instruction caused a regression.
• Check against source. Pick a filter combination, read the number off the dashboard, and verify it in Excel before you trust the rest.
• Keep the versions. Save each working file as v1, v2, v3 — when a round makes things worse you want somewhere to fall back to.

When to stop iterating