Digest summary image

Product runs this on a weekly usage digest. The email needs a summary image: three stat tiles and a small trend bar row. The numbers have to match what people see in the product. The digest goes out on a cadence. The image has to be remade each week from that week’s numbers.

Export does not fetch anything. Someone writes the numbers to a local JSON file first. The file has to exist before you run the command. What you export is what is in that file. This case stays in the catalog only because that write happens first.

The job is one digest PNG per week. You write { stats: [{ label, value, delta }] } to a file. You export. The tiles and the trend row read that file. Next week is a new file and the same component. The layout does not change. The stats do.

Give Lerret a React component under .lerret/ and a local data file. export writes a PNG. Same component, data swapped. There is no live fetch during the run. There is no batch product, no queue, no orchestrator.

The component is .lerret/email/digest-summary.jsx. It draws three stat tiles and a small trend bar row. The tiles are the same components the in-app dashboard uses, so the email and the app agree. The dashboard is the user’s product, not a Lerret screen.

The data is { stats: [{ label, value, delta }] } from a locally written JSON file. Each tile gets a label, a value, and a delta. The array is the row of tiles. Three entries is three tiles. The file is local. Export reads it. Export does not fetch. Weekly means a new file each week, not a new component. That is bulk pattern 1 if you keep a file per week and re-run --data.

The image is a PNG at 2× email width. Email width is the width of the digest. 2× is the file you attach so it stays sharp.

The stat tiles are the same components the in-app dashboard uses, so the email and the app agree. If a tile in the product shows a label, a value, and a delta, the digest image shows the same three. The numbers must be written to a file first.

npx @lerret/cli@latest export

Start a project with npx create-lerret@latest. More in the use cases index.