{
"deck_id": "deck-demo",
"title": "Deck Demo + Chart Gallery",
"summary": "Unified reference-and-validation deck for page styles, block styles, charting examples, diagrams, and all creator-intent controls.",
"author": "OVES Deck System",
"version": "0.3.0",
"status": "draft",
"visibility": "internal",
"asset_type": "react",
"source_system": "oves-decks",
"owner": "OVES Product Team",
"launch_url": "/decks/deck-demo",
"updated_at": "2026-06-05T06:58:00.638Z",
"tags": [
"audience:internal",
"use:technical-explainer",
"collection:internal-training",
"state:featured"
],
"pages": [
{
"page_id": "P1.cover",
"page_style": "hero",
"variant": "dark",
"title": "Deck Demo",
"description": "Unified reference-and-validation deck for page styles, block styles, charting examples, and diagrams.",
"content": {
"subtitle": "Unified reference-and-validation deck for page styles, block styles, charting examples, and diagrams."
}
},
{
"page_id": "P2.coverage_map",
"page_style": "single-block",
"variant": "basic",
"title": "Coverage Map",
"description": "High-level inventory of what this deck validates.",
"blocks": [
{
"address": "1/1",
"block_style": "bullet-list",
"title": "What This Deck Covers",
"items": [
"Page styles: cover, single-block, two-column, two-column callout, and matrix layouts.",
"Block styles: bullet list, numbered list, callout, stat cards, key-value table, comparison table, image gallery, and media bullet list.",
"Charting examples: schedule/gantt-style timeline and radar/spider comparison.",
"Diagram examples: Venn overlap and directed flow architecture."
]
}
]
},
{
"page_id": "P3.single_block",
"page_style": "single-block",
"variant": "basic",
"title": "Page Style: Single Block",
"description": "Baseline single-message layout.",
"blocks": [
{
"address": "1/1",
"block_style": "callout",
"title": "Single-Block Baseline",
"tone": "info",
"content": "Use the single-block page when the slide has one dominant message and should not compete with layout logic. This is the simplest reference page for typography, spacing, and callout treatment."
}
]
},
{
"page_id": "P4.two_column",
"page_style": "two-column",
"variant": "basic",
"title": "Page Style: Two Column",
"description": "Standard left/right narrative-and-structure layout.",
"blocks": [
{
"address": "1/1",
"block_style": "bullet-list",
"title": "Left Narrative Column",
"items": [
"Left side carries framing, guidance, or reader orientation.",
"This layout is useful when the right side needs a denser visual or structured block.",
"It remains the default comparison page style in the current deck system."
]
},
{
"address": "1/2",
"block_style": "comparison-table",
"title": "Right Structured Column",
"columns": [
"Item",
"Value"
],
"rows": [
{
"cells": [
"Best use",
"Comparison, narrative + evidence, framing + visual pairing."
]
},
{
"cells": [
"Strength",
"Balanced reading flow with explicit separation between message and proof."
]
},
{
"cells": [
"Risk",
"Fails when both columns are equally dense and visually noisy."
]
}
]
}
]
},
{
"page_id": "P5.two_column_callout",
"page_style": "two-column-callout",
"variant": "basic",
"title": "Page Style: Two Column With Callout",
"description": "Comparison page plus a reinforced bottom takeaway.",
"blocks": [
{
"address": "1/1",
"block_style": "media-bullet-list",
"eyebrow": "Visual pairing",
"title": "Media Bullet List",
"image_src": "/images/e3-comparison/e3pro-slide04-img03.png",
"image_alt": "E3 product example",
"content": [
"Combines explanatory bullets with a visual reference.",
"Useful for product profile, before/after, or feature walkthrough pages.",
"The image should support the bullets instead of competing with them."
]
},
{
"address": "1/2",
"block_style": "comparison-table",
"title": "Compact Comparison",
"columns": [
"Trait",
"Use it when",
"Avoid it when"
],
"header_tones": [
"default",
"primary",
"accent"
],
"rows": [
{
"cells": [
"Two-column + callout",
"You need both comparison and a strong takeaway.",
"The bottom callout would just restate obvious content."
]
},
{
"cells": [
"Best fit",
"Decision pages, tradeoff pages, training recommendations.",
"Dense technical pages with no single takeaway."
]
}
]
},
{
"address": "footer",
"block_style": "callout",
"title": "Callout Rule",
"tone": "warning",
"content": "Reserve the bottom callout for the one decision, warning, or takeaway the presenter should repeat aloud."
}
]
},
{
"page_id": "P6.matrix",
"page_style": "four-block-matrix",
"variant": "basic",
"title": "Page Style: Matrix Layout",
"description": "Four equally weighted content regions under one page title.",
"blocks": [
{
"address": "1/1",
"block_style": "bullet-list",
"title": "Quadrant A",
"items": [
"Use the matrix when all quadrants matter.",
"Do not force matrix layout onto weak content.",
"Each quadrant should stay independently readable."
]
},
{
"address": "1/2",
"block_style": "numbered-list",
"title": "Quadrant B",
"items": [
"Define the role of each quadrant.",
"Keep text volume balanced.",
"Treat the page as one composed system."
]
},
{
"address": "2/1",
"block_style": "venn-chart",
"title": "Quadrant C",
"content": [
"Page style",
"Block style",
"Content data"
]
},
{
"address": "2/2",
"block_style": "comparison-table",
"title": "Quadrant D",
"columns": [
"Item",
"Value"
],
"rows": [
{
"cells": [
"Best use",
"Taxonomies, framework maps, grouped evidence."
]
},
{
"cells": [
"Common failure",
"One quadrant becomes the real page and the others become filler."
]
}
]
}
]
},
{
"page_id": "P7.text_metrics",
"page_style": "four-block-matrix",
"variant": "basic",
"title": "Block Styles: Text And Metrics",
"description": "Reusable blocks for narrative, sequence, emphasis, and KPI-style content.",
"blocks": [
{
"address": "1/1",
"block_style": "bullet-list",
"title": "Bullet List",
"items": [
"Fast scannable points",
"Works for framing and summary",
"Avoid overlong bullets"
]
},
{
"address": "1/2",
"block_style": "numbered-list",
"title": "Numbered List",
"items": [
"Use when order matters",
"Procedures read better as sequence",
"Do not fake sequence when none exists"
]
},
{
"address": "2/1",
"block_style": "callout",
"title": "Callout",
"tone": "success",
"content": "Callouts are for one strong note, warning, or recommendation. They lose value when used as generic body text containers."
},
{
"address": "2/2",
"block_style": "comparison-table",
"title": "Metric Snapshot",
"columns": [
"Signal",
"Value"
],
"rows": [
{
"cells": [
"Blocks shown",
"4"
]
},
{
"cells": [
"Primary use",
"Text + KPI"
]
},
{
"cells": [
"Promotion status",
"Reusable"
]
}
]
}
]
},
{
"page_id": "P8.tables_comparison",
"page_style": "two-column",
"variant": "basic",
"title": "Block Styles: Tables And Comparison",
"description": "Structured data blocks for lookup and side-by-side judgment.",
"blocks": [
{
"address": "1/1",
"block_style": "comparison-table",
"title": "Key-Value Table Shape",
"columns": [
"Key",
"Value"
],
"rows": [
{
"cells": [
"Role",
"Compact field/value reference."
]
},
{
"cells": [
"Best use",
"Definitions, structured metadata, implementation facts."
]
},
{
"cells": [
"Risk",
"Too many rows becomes spreadsheet-like and slow to present."
]
}
]
},
{
"address": "1/2",
"block_style": "comparison-table",
"title": "Comparison Table",
"columns": [
"Block",
"Strength",
"Weakness"
],
"header_tones": [
"default",
"primary",
"accent"
],
"rows": [
{
"cells": [
"Key-value table",
"Precise lookup surface",
"Weak for tradeoff storytelling"
]
},
{
"cells": [
"Comparison table",
"Good for tradeoffs and side-by-side judgment",
"Needs disciplined cell length"
]
},
{
"cells": [
"Metric cards",
"Fast signal for KPIs",
"Not enough for nuanced explanation"
]
}
]
}
]
},
{
"page_id": "P9.visual_content",
"page_style": "two-column",
"variant": "basic",
"title": "Block Styles: Visual Content",
"description": "Image-driven reference blocks.",
"blocks": [
{
"address": "1/1",
"block_style": "image-gallery",
"title": "Image Gallery",
"lead": "Gallery blocks work when the page is primarily about visual comparison or visual proof.",
"images": [
{
"src": "/images/e3-comparison/e3pro-slide04-img03.png",
"alt": "Gallery image 1"
},
{
"src": "/images/e3-comparison/e3pro-slide04-img04.png",
"alt": "Gallery image 2"
},
{
"src": "/images/e3-comparison/e3pro-slide05-img02.jpg",
"alt": "Gallery image 3"
},
{
"src": "/images/e3-comparison/e3pro-slide06-img02.jpg",
"alt": "Gallery image 4"
}
],
"columns": 2
},
{
"address": "1/2",
"block_style": "media-bullet-list",
"eyebrow": "Block pairing",
"title": "Media Bullet List",
"image_src": "/images/e3-comparison/e3h-pro.png",
"image_alt": "Media bullet list example",
"content": [
"Pairs one image with a readable list of takeaways.",
"Useful for feature explanation, product framing, and visual walkthroughs.",
"More focused than a gallery and easier to narrate live."
]
}
]
},
{
"page_id": "P10.diagrams",
"page_style": "two-column",
"variant": "basic",
"title": "Diagram Examples: Venn And Flow",
"description": "Reusable diagram patterns for overlap and directed architecture views.",
"blocks": [
{
"address": "1/1",
"block_style": "venn-chart",
"title": "Venn Overlap",
"content": [
"Page style",
"Block style",
"Content data"
]
},
{
"address": "1/2",
"block_style": "flow-diagram",
"title": "Promotion Flow",
"layout": "horizontal",
"footer_note": "The unified demo deck exists to prove patterns and show the canonical examples after they stabilize.",
"width": 760,
"height": 380,
"nodes": [
{
"id": "idea",
"label": "Idea",
"kind": "default",
"row": 1
},
{
"id": "demo",
"label": "Deck Demo",
"kind": "primary",
"row": 1
},
{
"id": "promote",
"label": "Reusable Layer",
"kind": "accent",
"row": 2
},
{
"id": "ship",
"label": "Production Deck",
"kind": "output",
"row": 2
}
],
"edges": [
{
"from": "idea",
"to": "demo",
"kind": "signal"
},
{
"from": "demo",
"to": "promote",
"label": "Validate",
"kind": "integrated"
},
{
"from": "promote",
"to": "ship",
"label": "Adopt",
"kind": "mechanical"
}
]
}
]
},
{
"page_id": "P11.line-chart",
"page_style": "single-block",
"variant": "dark",
"title": "Chart Demo: Line Chart",
"description": "Reusable line chart block powered by Recharts. Demonstrates multi-series line chart with custom colors.",
"blocks": [
{
"address": "1/1",
"block_style": "line-chart",
"title": "Multi-Series Line Chart",
"description": "Page views and revenue over 5 months.",
"data": [
{
"name": "Jan",
"pv": 4000,
"amt": 2400
},
{
"name": "Feb",
"pv": 3000,
"amt": 1398
},
{
"name": "Mar",
"pv": 2000,
"amt": 9800
},
{
"name": "Apr",
"pv": 2780,
"amt": 3908
},
{
"name": "May",
"pv": 1890,
"amt": 4800
}
],
"xAxisKey": "name",
"lines": [
{
"dataKey": "pv",
"name": "Page Views",
"color": "#667eea"
},
{
"dataKey": "amt",
"name": "Revenue ($)",
"color": "#ff6b6b"
}
],
"height": 600,
"variant": "dark"
}
]
},
{
"page_id": "P12.bar-chart",
"page_style": "single-block",
"variant": "dark",
"title": "Chart Demo: Bar Chart",
"description": "Reusable bar chart block. Supports vertical/horizontal layout and multi-series grouping.",
"blocks": [
{
"address": "1/1",
"block_style": "bar-chart",
"title": "Horizontal Bar Chart",
"description": "Revenue by product category.",
"data": [
{
"name": "Product A",
"revenue": 4000
},
{
"name": "Product B",
"revenue": 3000
},
{
"name": "Product C",
"revenue": 2000
},
{
"name": "Product D",
"revenue": 2780
},
{
"name": "Product E",
"revenue": 1890
}
],
"xAxisKey": "name",
"bars": [
{
"dataKey": "revenue",
"name": "Revenue ($)",
"color": "#4CAF50"
}
],
"layout": "horizontal",
"height": 600,
"variant": "dark"
}
]
},
{
"page_id": "P13.pie-chart",
"page_style": "single-block",
"variant": "dark",
"title": "Chart Demo: Pie Chart",
"description": "Reusable pie chart block. Supports custom colors, inner radius (donut), and dark variant.",
"blocks": [
{
"address": "1/1",
"block_style": "pie-chart",
"title": "Market Share",
"description": "Simulated market share by vendor.",
"data": [
{
"name": "Vendor A",
"value": 400
},
{
"name": "Vendor B",
"value": 300
},
{
"name": "Vendor C",
"value": 200
},
{
"name": "Vendor D",
"value": 100
}
],
"colors": [
"#667eea",
"#ff6b6b",
"#4CAF50",
"#ffa726"
],
"innerRadius": 40,
"outerRadius": 100,
"height": 600,
"variant": "dark"
}
]
},
{
"page_id": "P14.area-chart",
"page_style": "single-block",
"variant": "dark",
"title": "Chart Demo: Area Chart",
"description": "Reusable area chart block. Supports stacked areas and gradient fills.",
"blocks": [
{
"address": "1/1",
"block_style": "area-chart",
"title": "Stacked Area Chart",
"description": "Revenue streams over 5 months.",
"data": [
{
"name": "Jan",
"streamA": 4000,
"streamB": 2400
},
{
"name": "Feb",
"streamA": 3000,
"streamB": 1398
},
{
"name": "Mar",
"streamA": 2000,
"streamB": 9800
},
{
"name": "Apr",
"streamA": 2780,
"streamB": 3908
},
{
"name": "May",
"streamA": 1890,
"streamB": 4800
}
],
"xAxisKey": "name",
"areas": [
{
"dataKey": "streamA",
"name": "Stream A",
"color": "#667eea",
"fillOpacity": 0.6
},
{
"dataKey": "streamB",
"name": "Stream B",
"color": "#ff6b6b",
"fillOpacity": 0.6
}
],
"stacked": true,
"height": 600,
"variant": "dark"
}
]
},
{
"page_id": "P15.scatter-chart",
"page_style": "single-block",
"variant": "dark",
"title": "Chart Demo: Scatter Chart",
"description": "Reusable scatter chart block. Supports multiple series and axis labeling.",
"blocks": [
{
"address": "1/1",
"block_style": "scatter-chart",
"title": "Scatter Plot: X vs Y",
"description": "Simulated scatter data with two series.",
"data": [
{
"x": 10,
"y": 20,
"z": 5
},
{
"x": 30,
"y": 40,
"z": 10
},
{
"x": 50,
"y": 60,
"z": 15
},
{
"x": 70,
"y": 80,
"z": 20
},
{
"x": 90,
"y": 100,
"z": 25
}
],
"xAxisKey": "x",
"yAxisKey": "y",
"series": [
{
"dataKey": "z",
"name": "Size (z)",
"color": "#667eea"
}
],
"height": 600,
"variant": "dark"
}
]
},
{
"page_id": "P16.radar-chart",
"page_style": "single-block",
"variant": "dark",
"title": "Chart Demo: Radar Chart",
"description": "Reusable radar (spider) chart block. Compares multiple series across axes.",
"blocks": [
{
"address": "1/1",
"block_style": "radar-chart",
"title": "Product Comparison: Radar Chart",
"description": "Comparing Product A vs Product B across 6 metrics.",
"data": [
{
"metric": "Speed",
"A": 80,
"B": 90
},
{
"metric": "Power",
"A": 90,
"B": 70
},
{
"metric": "Range",
"A": 70,
"B": 85
},
{
"metric": "Efficiency",
"A": 85,
"B": 75
},
{
"metric": "Cost",
"A": 60,
"B": 80
},
{
"metric": "Reliability",
"A": 90,
"B": 70
}
],
"metrics": [
"Speed",
"Power",
"Range",
"Efficiency",
"Cost",
"Reliability"
],
"radars": [
{
"dataKey": "A",
"name": "Product A",
"color": "#667eea"
},
{
"dataKey": "B",
"name": "Product B",
"color": "#ff6b6b"
}
],
"height": 600,
"variant": "dark"
}
]
},
{
"page_id": "P17.venn-chart",
"page_style": "single-block",
"variant": "dark",
"title": "Chart Demo: Venn Chart",
"description": "Reusable Venn diagram block. Supports 2-set and 3-set overlap.",
"blocks": [
{
"address": "1/1",
"block_style": "venn-chart",
"title": "3-Set Venn Diagram",
"height": 600,
"content": [
"Electric 2/3 Wheeler",
"Battery Swap Infrastructure",
"Off-Grid C&I Power"
]
}
]
},
{
"page_id": "P18.gantt-chart",
"page_style": "single-block",
"variant": "dark",
"title": "Diagram Demo: Gantt Chart (PlantUML)",
"description": "Project schedule rendered as a Gantt chart via PlantUML @startgantt.",
"blocks": [
{
"address": "1/1",
"block_style": "plantuml",
"title": "2026 Product Launch Schedule",
"height": 500,
"code": "@startgantt\nskinparam svgDimensionStyle false\nskinparam backgroundColor #1e293b\nskinparam defaultFontColor #f1f5f9\nskinparam defaultFontSize 10\nskinparam defaultTextAlignment left\nskinparam noteBackgroundColor #334155\nskinparam noteBorderColor #475569\nskinparam noteFontColor #e2e8f0\nskinparam timeline {\n BackgroundColor #0f172a\n FontColor #94a3b8\n ForegroundColor #475569\n}\n\nLabel on first column and left aligned\n\nProject starts 2020-09-01\n\n[taskA] as [tA1] starts 2020-09-01 and requires 2 days\n[tA1] is colored in Green\n[ ] as [tA2] starts at [tA1]'s end and requires 1 day\n[tA2] is colored in Red\n[tA2] displays on same row as [tA1]\n\n[taskB] as [tB1] starts 2020-09-10 and requires 2 days\n[tB1] is colored in Green\n[ ] as [tB2] starts at [tB1]'s end and requires 1 day\n[tB2] is colored in Red\n[tB2] displays on same row as [tB1]\n\n[task01] as [t01a] starts 2020-09-05 and requires 2 days\n[t01a] is colored in Green\n[ ] as [t01b] starts at [t01a]'s end and requires 2 days\n[t01b] is colored in Red\n[t01b] displays on same row as [t01a]\n\n[task02] as [t02a] starts at [t01b]'s end and requires 4 days\n[t02a] is colored in Green\n[ ] as [t02b] starts at [t02a]'s end and requires 4 days\n[t02b] is colored in Red\n[t02b] displays on same row as [t02a]\n\n[task03] as [t03a] starts at [t02b]'s end and requires 4 days\n[t03a] is colored in Green\n[ ] as [t03b] starts at [t03a]'s end and requires 3 days\n[t03b] is colored in Red\n[t03b] displays on same row as [t03a]\n\n-- separator --\n\n[taskC] as [tC1] starts 2020-09-02 and requires 3 days\n[tC1] is colored in Green\n[ ] as [tC2] starts at [tC1]'s end and requires 2 days\n[tC2] is colored in Red\n[tC2] displays on same row as [tC1]\n\n[taskD] as [tD1] starts 2020-09-09 and requires 3 days\n[tD1] is colored in Green\n[ ] as [tD2] starts at [tD1]'s end and requires 2 days\n[tD2] is colored in Red\n[tD2] displays on same row as [tD1]\n\n[task 10] as [t10a] starts 2020-09-05 and requires 3 days\n[t10a] is colored in Green\n[ ] as [t10b] starts at [t10a]'s end and requires 2 days\n[t10b] is colored in Red\n[t10b] displays on same row as [t10a]\n\n[task 11] as [t11a] starts at [t10b]'s end and requires 3 days\n[t11a] is colored in Green\n[ ] as [t11b] starts at [t11a]'s end and requires 2 days\n[t11b] is colored in Red\n[t11b] displays on same row as [t11a]\n@endgantt"
}
]
},
{
"page_id": "P19.plantuml-workflow",
"page_style": "single-block",
"variant": "dark",
"title": "Diagram Demo: Intent-to-Render Workflow",
"description": "PlantUML-driven workflow: intent (.puml script) -> scaffold (encode -> SVG) -> embed into page.",
"blocks": [
{
"address": "1/1",
"block_style": "plantuml",
"title": "Intent -> Scaffold -> Render Pipeline",
"description": "Intent-first workflow codified as UML sequence diagram.",
"code": "@startuml\n!theme plain\nskinparam backgroundColor transparent\nskinparam defaultFontSize 16\nskinparam defaultFontColor #f8fafc\nskinparam ArrowColor #94a3b8\nskinparam ActorBorderColor #667eea\nskinparam ActorBackgroundColor #1e293b\nskinparam ParticipantBorderColor #667eea\nskinparam ParticipantBackgroundColor #0f172a\n\nactor \"Content Creator\" as Creator\nparticipant \"Intent Doc (.md/.puml)\" as Intent\nparticipant \"Scaffold Script (scaffold-*.js)\" as Scaffold\nparticipant \"PlantUML JAR (local)\" as Jar\ndatabase \"Deck Output (.tsx+SVG)\" as Output\n\nCreator -> Intent : Write .puml script\\n(defines workflow visually)\nIntent -> Scaffold : Read intent JSON\\n(includes plantuml block)\nScaffold -> Jar : Run java -jar plantuml.jar\\n(generate SVG locally)\nJar --> Scaffold : Return SVG file\nScaffold -> Output : Embed SVG into TSX\\n(into generated page)\nOutput --> Creator : Rendered in browser\\n(local SVG, no server)\n\nnote right of Jar\n Local PlantUML JAR\\n generates SVG from .puml\\n no external server needed\nend note\n@enduml",
"height": 500,
"variant": "dark"
}
]
},
{
"page_id": "P20.funnel-chart",
"page_style": "single-block",
"variant": "dark",
"title": "Chart Demo: Funnel Chart",
"description": "Reusable funnel chart block powered by Recharts. Ideal for conversion funnels, pipeline stages, and drop-off analysis.",
"blocks": [
{
"address": "1/1",
"block_style": "funnel-chart",
"title": "Sales Conversion Funnel",
"description": "Lead-to-customer conversion stages with drop-off rates.",
"data": [
{
"name": "Website Visitors",
"value": 10000
},
{
"name": "Free Trial Signups",
"value": 2500
},
{
"name": "Active Users",
"value": 1200
},
{
"name": "Paid Subscriptions",
"value": 480
},
{
"name": "Enterprise Plans",
"value": 95
}
],
"height": 600,
"variant": "dark"
}
]
},
{
"page_id": "P21.bubble-chart",
"page_style": "single-block",
"variant": "dark",
"title": "Chart Demo: Bubble Chart",
"description": "Reusable bubble chart block. X=Market Penetration, Y=Customer Satisfaction, bubble size=Fleet Size.",
"blocks": [
{
"address": "1/1",
"block_style": "bubble-chart",
"title": "Africa EV Motorcycle Brands — Market Positioning",
"description": "Bubble size = estimated fleet size. Per-brand colours.",
"data": [
{
"x": 85,
"y": 88,
"z": 22000,
"name": "Spiro",
"fill": "#667eea"
},
{
"x": 75,
"y": 78,
"z": 2000,
"name": "Roam Motors",
"fill": "#4CAF50"
},
{
"x": 70,
"y": 82,
"z": 1700,
"name": "Ampersand",
"fill": "#ffa726"
},
{
"x": 60,
"y": 80,
"z": 2000,
"name": "Zembo",
"fill": "#ff6b6b"
},
{
"x": 55,
"y": 70,
"z": 1000,
"name": "ARC Ride",
"fill": "#ab47bc"
},
{
"x": 50,
"y": 75,
"z": 800,
"name": "Gogo Electric",
"fill": "#26c6da"
},
{
"x": 40,
"y": 72,
"z": 500,
"name": "Kiri EV",
"fill": "#ef5350"
},
{
"x": 45,
"y": 85,
"z": 600,
"name": "SolarTaxi",
"fill": "#66bb8a"
},
{
"x": 35,
"y": 65,
"z": 300,
"name": "eWAKA",
"fill": "#8d6e63"
},
{
"x": 30,
"y": 60,
"z": 200,
"name": "TYCORUN",
"fill": "#78909c"
}
],
"height": 600,
"variant": "dark",
"zRange": [
80,
500
]
}
]
},
{
"page_id": "P22.treemap",
"page_style": "single-block",
"variant": "dark",
"title": "Chart Demo: Treemap",
"description": "Reusable treemap block. Rectangle area proportional to market size.",
"blocks": [
{
"address": "1/1",
"block_style": "treemap",
"title": "Africa EV Motorcycle Market — Top 10 Brands",
"description": "Treemap heatmap. Area = market size. Colour intensity = dominance. Labels show brand + market share %.",
"data": [
{
"name": "Spiro",
"value": 32
},
{
"name": "Roam Motors",
"value": 20
},
{
"name": "Ampersand",
"value": 14
},
{
"name": "Zembo",
"value": 10
},
{
"name": "ARC Ride",
"value": 7
},
{
"name": "SolarTaxi",
"value": 5
},
{
"name": "Gogo Electric",
"value": 4
},
{
"name": "Kiri EV",
"value": 3.5
},
{
"name": "eWAKA",
"value": 2.5
},
{
"name": "TYCORUN",
"value": 2
}
],
"height": 600,
"variant": "dark"
}
]
},
{
"page_id": "P23.waterfall-chart",
"page_style": "single-block",
"variant": "dark",
"title": "Chart Demo: Waterfall Chart",
"description": "Waterfall chart showing cumulative changes from starting value to final total.",
"blocks": [
{
"address": "1/1",
"block_style": "waterfall-chart",
"title": "Q4 Financial Performance",
"data": [
{
"name": "Q3 Revenue",
"value": 1000000,
"color": "#667eea"
},
{
"name": "New Contracts",
"value": 350000
},
{
"name": "Price Increase",
"value": 120000
},
{
"name": "Churn Loss",
"value": -180000
},
{
"name": "Operational Costs",
"value": -220000
},
{
"name": "Refunds",
"value": -50000
}
],
"totalLabel": "Q4 Total",
"height": 600,
"variant": "dark",
"showTotal": true
}
]
},
{
"page_id": "P24.bullet-chart",
"page_style": "single-block",
"variant": "dark",
"title": "Chart Demo: Bullet Chart",
"description": "Bullet chart for KPI visualization with actual vs target and qualitative ranges.",
"blocks": [
{
"address": "1/1",
"block_style": "bullet-chart",
"title": "Q4 KPI Performance",
"data": [
{
"label": "Revenue",
"value": 1.2,
"target": 1,
"ranges": [
0.6,
0.8,
1.2
]
},
{
"label": "Customer Satisfaction",
"value": 4.2,
"target": 4.5,
"ranges": [
3,
4,
4.5
]
},
{
"label": "Market Share",
"value": 18,
"target": 20,
"ranges": [
10,
15,
20
]
},
{
"label": "Employee Retention",
"value": 92,
"target": 90,
"ranges": [
80,
85,
95
]
},
{
"label": "Innovation Index",
"value": 75,
"target": 80,
"ranges": [
60,
70,
85
]
}
],
"height": 600,
"variant": "dark",
"orientation": "horizontal",
"showTarget": true
}
]
},
{
"page_id": "P25.timeline",
"page_style": "single-block",
"variant": "dark",
"title": "Chart Demo: Timeline",
"description": "Timeline visualization for milestones, roadmaps, and project plans.",
"blocks": [
{
"address": "1/1",
"block_style": "timeline",
"title": "2026 Product Roadmap",
"data": [
{
"date": "Q1 2026",
"title": "MVP Launch",
"description": "Core features released to beta users",
"status": "completed",
"icon": "🚀"
},
{
"date": "Q2 2026",
"title": "Mobile App",
"description": "iOS and Android native apps",
"status": "in-progress",
"icon": "📱"
},
{
"date": "Q3 2026",
"title": "AI Features",
"description": "ML-powered recommendations",
"status": "upcoming",
"icon": "🤖"
},
{
"date": "Q4 2026",
"title": "Global Expansion",
"description": "Enter European markets",
"status": "upcoming",
"icon": "🌍"
},
{
"date": "Q1 2027",
"title": "IP0 Ready",
"description": "Financial audit and compliance",
"status": "upcoming",
"icon": "📈"
}
],
"height": 600,
"variant": "dark",
"orientation": "horizontal",
"showDates": true
}
]
}
]
}