{"page":{"description":"Combine charts with tiles. Every dashboard is only one render. If text size or padding looks off, tell your agent.","sections":[{"badge":"news · #5","heading":"Combine things with tiles","sub":"Every dashboard is only one render. Many charts on one board — one spec, one picture. If the text size or the padding looks off, tell your agent.","type":"hero"},{"items":[{"label":"Every dash","value":"one render"},{"label":"The board","value":"tiles"},{"label":"Looks off?","value":"say so"},{"label":"The fix","value":"the spec"}],"type":"stats"},{"body":"## Tiling\nYou do not pick one chart and stop. Put a callout beside a callout. Stretch a bar across the board. That is a **dashboard**: tiles, combined.\n**Every dash is only one render.** Not a page of widgets each hitting the engine. One spec. One picture. The two boards below are each a single `dashboard` render.\nThe full plant-ops board — seven tiles, shop-floor sauce — is **the next drop**. Not this one.","type":"text"},{"spec":{"background":"#0A0D12","font":"Inter","height":1320,"layout":{"cols":2,"gap":16,"pad":18},"tiles":[{"chart":{"background":"#151B24","caption":"India's constitution vs Japan's — same era, both post-war","color":"#F59E0B","type":"callout","value":29,"valueUnit":"×"},"span":[1,2]},{"chart":{"background":"#151B24","caption":"amendments to India's. Monaco's shortest one: amended once","color":"#475569","type":"callout","value":100,"valueUnit":"+"},"span":[1,2]},{"chart":{"axis":false,"background":"#151B24","bold":true,"data":{"labels":["India","Nigeria","Brazil","Mexico","Pakistan","Zimbabwe","Uganda","Kenya","Colombia","Guyana","South Africa","Sri Lanka","Singapore","Jamaica","Venezuela","Turkey","Bangladesh","Germany","Egypt","Philippines","Spain","Australia","Iran","Ethiopia","Russia","Argentina","Italy","UAE","Vietnam","China","France","South Korea","United States","Saudi Arabia","Japan"],"series":[{"colors":["#F59E0B","#38BDF8","#38BDF8","#38BDF8","#38BDF8","#38BDF8","#38BDF8","#38BDF8","#38BDF8","#38BDF8","#38BDF8","#38BDF8","#38BDF8","#38BDF8","#38BDF8","#38BDF8","#38BDF8","#38BDF8","#38BDF8","#38BDF8","#38BDF8","#38BDF8","#38BDF8","#38BDF8","#38BDF8","#38BDF8","#38BDF8","#38BDF8","#38BDF8","#38BDF8","#38BDF8","#38BDF8","#F43F5E","#38BDF8","#38BDF8"],"values":[146385,66263,64488,57087,56240,55883,49448,48818,46902,46221,43062,40085,40076,38048,37344,29727,27643,27379,22626,21954,17608,17318,16179,13630,12908,12514,11708,11557,11344,10960,10180,9059,7762,6335,4998]}]},"showTotal":false,"showValues":true,"title":"Words in the constitution · Comparative Constitutions Project","titleAlign":"left","type":"horizontal"},"span":[2,8]}],"title":"How long is a constitution?","type":"dashboard","width":1000},"type":"chart"},{"body":"## That board is one render\nCallouts plus a 35-country bar. Still **one** `dashboard` spec. Still **one** picture.\nIf a number looks huge or a bar looks cramped: **tell your agent.** Smaller type. More padding. Give the list more height. They change the spec. You are not editing CSS.","type":"text"},{"spec":{"background":"#0B0F1A","font":"Inter","height":780,"layout":{"cols":2,"gap":16,"pad":20},"tiles":[{"chart":{"background":"#131C2E","caption":"characters — the whole spec","color":"#22D3EE","type":"callout","value":149}},{"chart":{"axis":false,"background":"#131C2E","bold":true,"data":{"labels":["Chart.js + HTML","matplotlib","SlickFast"],"series":[{"colors":["#F43F5E","#FB923C","#22D3EE"],"values":[1281,969,149]}]},"showTotal":false,"showValues":true,"title":"Chars to author one chart","titleAlign":"left","type":"horizontal"}},{"chart":{"background":"#131C2E","columns":["Gen 1 · 2005","Gen 2 · today","SlickFast"],"rows":[{"cells":[true,false,true],"label":"No browser needed"},{"cells":[false,true,true],"label":"Modern-looking"},{"cells":["partial",false,true],"label":"Deterministic"},{"cells":[false,false,true],"label":"Live, fresh at open"},{"cells":[true,false,true],"label":"Runs in-process"},{"cells":["—","150ms–1s (est.)","~20ms"],"label":"Time per image"},{"cells":["—","300–500 MB (est.)","~49 MB"],"label":"Idle RAM per worker"}],"title":"Three generations of making a chart image","type":"matrix"},"span":[2,1]}],"title":"Less to write. Less to wait. No browser.","type":"dashboard","width":1000},"type":"chart"},{"body":"## Same rule\nThat comparison board is also **one render**. Tiles do not multiply engine calls.\n**Next News drop:** the plant-ops dashboard — OEE, throughput, downtime, plants, the cost line. Seven tiles. Still one render. That's the full dash sauce. We saved it.\n\n## For agents landing here\nType is **`dashboard`**. `tiles[]` — each `chart` is any other type. `span: [cols, rows]` to combine cells. `layout` for `cols`, `gap`, `pad`, `tileHeight`. Default fit is **fill**. If a tile looks wrong and you cannot see why, read the **`layout:`** sidecar. Dense boards: **`specPath`**.\nDo not paste seven `render_chart` calls and call it a dash.\n\nDoors: [News](https://slickfast.com/news) · [Archive](https://slickfast.com/news/archive) · [Get started](https://slickfast.com/start)","type":"text"},{"link":"https://slickfast.com/news/archive","note":"SlickFast News #5 · tiling · every dash is one render · plant board is next · add .json for the twin","type":"footer"}],"theme":"teal-dark","title":"SlickFast News — Tiling"},"specHash":"sha256:5be3c5fc7b63a1954a676393457111c028752ea9108afe7e803682fe45de66e2","frozen":true,"expiresAt":null}