mirror of
https://github.com/MinaSaad1/pbi-cli
synced 2026-04-21 13:37:19 +00:00
fix: redesign chat-demo-report SVG to match Claude Code terminal mockup style
This commit is contained in:
MinaSaad1
parent
2d730f72f6
commit
98c9a23df3
1 changed files with 51 additions and 39 deletions
|
|
@ -1,51 +1,63 @@
|
|||
<svg xmlns="http://www.w3.org/2000/svg" width="850" height="400" viewBox="0 0 850 400">
|
||||
<svg xmlns="http://www.w3.org/2000/svg" width="850" height="520" viewBox="0 0 850 520">
|
||||
<rect width="100%" height="100%" fill="#0d1117" rx="8"/>
|
||||
|
||||
<!-- Title -->
|
||||
<text x="425" y="28" font-family="'Segoe UI', Arial, sans-serif" font-size="20" fill="#06d6a0" text-anchor="middle" font-weight="bold">Just Ask Claude -- Report Layer</text>
|
||||
<text x="425" y="48" font-family="'Segoe UI', Arial, sans-serif" font-size="13" fill="#8b949e" text-anchor="middle">Claude picks the right skill and runs the commands for you</text>
|
||||
<text x="425" y="32" font-family="'Segoe UI', Arial, sans-serif" font-size="18" fill="#06d6a0" text-anchor="middle" font-weight="bold">Just Ask Claude -- Report Layer</text>
|
||||
<text x="425" y="50" font-family="'Segoe UI', Arial, sans-serif" font-size="13" fill="#8b949e" text-anchor="middle">Describe the report you want, Claude builds it</text>
|
||||
|
||||
<!-- Chat bubble: User -->
|
||||
<rect x="320" y="68" width="500" height="42" rx="12" fill="#1c3a5e"/>
|
||||
<polygon points="316,82 330,76 330,88" fill="#1c3a5e"/>
|
||||
<text x="340" y="85" font-family="'Segoe UI', Arial, sans-serif" font-size="13" fill="#e6edf3" font-weight="600">You:</text>
|
||||
<text x="380" y="85" font-family="'Segoe UI', Arial, sans-serif" font-size="13" fill="#e6edf3">Add a bar chart showing revenue by region to the</text>
|
||||
<text x="380" y="101" font-family="'Segoe UI', Arial, sans-serif" font-size="13" fill="#e6edf3">overview page, and apply our corporate theme</text>
|
||||
<!-- Chat container -->
|
||||
<rect x="40" y="65" width="770" height="420" rx="8" fill="#161b22" stroke="#30363d" stroke-width="1"/>
|
||||
|
||||
<!-- Chat bubble: Claude thinking -->
|
||||
<rect x="30" y="125" width="420" height="34" rx="12" fill="#161b22" stroke="#d97757" stroke-width="1"/>
|
||||
<text x="50" y="147" font-family="'Segoe UI', Arial, sans-serif" font-size="12" fill="#d97757">Claude uses</text>
|
||||
<rect x="148" y="134" width="110" height="20" rx="10" fill="#d97757" fill-opacity="0.15"/>
|
||||
<text x="203" y="149" font-family="'Segoe UI', Arial, sans-serif" font-size="11" fill="#d97757" text-anchor="middle" font-weight="bold">power-bi-visuals</text>
|
||||
<text x="266" y="147" font-family="'Segoe UI', Arial, sans-serif" font-size="12" fill="#8b949e">and</text>
|
||||
<rect x="290" y="134" width="110" height="20" rx="10" fill="#F2C811" fill-opacity="0.15"/>
|
||||
<text x="345" y="149" font-family="'Segoe UI', Arial, sans-serif" font-size="11" fill="#F2C811" text-anchor="middle" font-weight="bold">power-bi-themes</text>
|
||||
<!-- Header bar -->
|
||||
<rect x="40" y="65" width="770" height="30" rx="8" fill="#21262d"/>
|
||||
<rect x="40" y="87" width="770" height="8" fill="#21262d"/>
|
||||
<!-- Traffic lights -->
|
||||
<circle cx="62" cy="80" r="5" fill="#ff5f57"/>
|
||||
<circle cx="78" cy="80" r="5" fill="#febc2e"/>
|
||||
<circle cx="94" cy="80" r="5" fill="#28c840"/>
|
||||
<text x="116" y="84" font-family="'Segoe UI', Arial, sans-serif" font-size="13" fill="#d97757" font-weight="bold">Claude Code</text>
|
||||
<text x="205" y="84" font-family="'Segoe UI', Arial, sans-serif" font-size="12" fill="#8b949e">pbi-cli report session</text>
|
||||
|
||||
<!-- Chat bubble: Claude commands -->
|
||||
<rect x="30" y="172" width="790" height="180" rx="12" fill="#161b22" stroke="#d97757" stroke-width="1"/>
|
||||
<!-- User message 1 -->
|
||||
<rect x="240" y="110" width="550" height="48" rx="12" fill="#1a3a5c" stroke="#264d73" stroke-width="1"/>
|
||||
<text x="260" y="131" font-family="'Segoe UI', Arial, sans-serif" font-size="12" fill="#e2e8f0">Add a bar chart showing revenue by region to the overview</text>
|
||||
<text x="260" y="148" font-family="'Segoe UI', Arial, sans-serif" font-size="12" fill="#e2e8f0">page, and apply our corporate brand theme</text>
|
||||
|
||||
<!-- Terminal header -->
|
||||
<circle cx="52" cy="190" r="5" fill="#ff6b6b"/>
|
||||
<circle cx="68" cy="190" r="5" fill="#F2C811"/>
|
||||
<circle cx="84" cy="190" r="5" fill="#06d6a0"/>
|
||||
<text x="110" y="194" font-family="'Segoe UI', Arial, sans-serif" font-size="11" fill="#8b949e">Claude runs these commands:</text>
|
||||
<!-- Claude response 1: creates visual -->
|
||||
<rect x="60" y="170" width="520" height="50" rx="12" fill="#1c1c1c" stroke="#30363d" stroke-width="1"/>
|
||||
<text x="78" y="189" font-family="'Segoe UI', Arial, sans-serif" font-size="13" fill="#8b949e">Running:</text>
|
||||
<text x="130" y="189" font-family="'Courier New', Courier, monospace" font-size="12" fill="#58a6ff">pbi visual add --page overview --type bar --name revenue_chart</text>
|
||||
<text x="78" y="210" font-family="'Segoe UI', Arial, sans-serif" font-size="12" fill="#06d6a0">✓ Created barChart visual on page overview</text>
|
||||
|
||||
<!-- Commands with step numbers -->
|
||||
<text x="50" y="220" font-family="'Segoe UI', Arial, sans-serif" font-size="11" fill="#06d6a0" font-weight="bold">Step 1</text>
|
||||
<text x="100" y="220" font-family="'Segoe UI', Arial, sans-serif" font-size="11" fill="#8b949e">Add the visual</text>
|
||||
<text x="50" y="237" font-family="'Courier New', Courier, monospace" font-size="12" fill="#58a6ff">$ pbi visual add --page overview --type bar --name revenue_by_region</text>
|
||||
<!-- Claude response 2: binds data -->
|
||||
<rect x="60" y="230" width="580" height="50" rx="12" fill="#1c1c1c" stroke="#30363d" stroke-width="1"/>
|
||||
<text x="78" y="249" font-family="'Segoe UI', Arial, sans-serif" font-size="13" fill="#8b949e">Running:</text>
|
||||
<text x="130" y="249" font-family="'Courier New', Courier, monospace" font-size="12" fill="#58a6ff">pbi visual bind revenue_chart --category "Geo[Region]" --value "Sales[Revenue]"</text>
|
||||
<text x="78" y="270" font-family="'Segoe UI', Arial, sans-serif" font-size="12" fill="#06d6a0">✓ Bound Category=Geo[Region], Y=Sales[Revenue]</text>
|
||||
|
||||
<text x="50" y="260" font-family="'Segoe UI', Arial, sans-serif" font-size="11" fill="#06d6a0" font-weight="bold">Step 2</text>
|
||||
<text x="100" y="260" font-family="'Segoe UI', Arial, sans-serif" font-size="11" fill="#8b949e">Bind data fields</text>
|
||||
<text x="50" y="277" font-family="'Courier New', Courier, monospace" font-size="12" fill="#58a6ff">$ pbi visual bind revenue_by_region --page overview \</text>
|
||||
<text x="50" y="293" font-family="'Courier New', Courier, monospace" font-size="12" fill="#58a6ff"> --category "Geography[Region]" --value "Sales[Revenue]"</text>
|
||||
<!-- Claude response 3: applies theme -->
|
||||
<rect x="60" y="290" width="460" height="50" rx="12" fill="#1c1c1c" stroke="#30363d" stroke-width="1"/>
|
||||
<text x="78" y="309" font-family="'Segoe UI', Arial, sans-serif" font-size="13" fill="#8b949e">Running:</text>
|
||||
<text x="130" y="309" font-family="'Courier New', Courier, monospace" font-size="12" fill="#58a6ff">pbi report set-theme --file corporate-brand.json</text>
|
||||
<text x="78" y="330" font-family="'Segoe UI', Arial, sans-serif" font-size="12" fill="#06d6a0">✓ Theme applied: Corporate Brand</text>
|
||||
|
||||
<text x="50" y="316" font-family="'Segoe UI', Arial, sans-serif" font-size="11" fill="#06d6a0" font-weight="bold">Step 3</text>
|
||||
<text x="100" y="316" font-family="'Segoe UI', Arial, sans-serif" font-size="11" fill="#8b949e">Apply theme</text>
|
||||
<text x="50" y="333" font-family="'Courier New', Courier, monospace" font-size="12" fill="#58a6ff">$ pbi report set-theme --file corporate-brand.json</text>
|
||||
<!-- Desktop sync message -->
|
||||
<rect x="60" y="350" width="400" height="28" rx="8" fill="#06d6a0" fill-opacity="0.06" stroke="#06d6a0" stroke-width="1" stroke-opacity="0.3"/>
|
||||
<text x="78" y="369" font-family="'Segoe UI', Arial, sans-serif" font-size="12" fill="#06d6a0">↻ Desktop synced: Power BI reopened with changes</text>
|
||||
|
||||
<!-- Result message -->
|
||||
<rect x="30" y="362" width="790" height="30" rx="8" fill="#06d6a0" fill-opacity="0.08" stroke="#06d6a0" stroke-width="1" stroke-opacity="0.3"/>
|
||||
<text x="50" y="382" font-family="'Segoe UI', Arial, sans-serif" font-size="12" fill="#06d6a0" font-weight="600">Done!</text>
|
||||
<text x="92" y="382" font-family="'Segoe UI', Arial, sans-serif" font-size="12" fill="#8b949e">Bar chart created, data bound, and theme applied. Desktop auto-synced.</text>
|
||||
<!-- User message 2 -->
|
||||
<rect x="380" y="390" width="410" height="32" rx="12" fill="#1a3a5c" stroke="#264d73" stroke-width="1"/>
|
||||
<text x="400" y="411" font-family="'Segoe UI', Arial, sans-serif" font-size="12" fill="#e2e8f0">Now filter it to show only the top 10 regions</text>
|
||||
|
||||
<!-- Claude response 4: adds filter -->
|
||||
<rect x="60" y="432" width="540" height="32" rx="12" fill="#1c1c1c" stroke="#30363d" stroke-width="1"/>
|
||||
<text x="78" y="453" font-family="'Segoe UI', Arial, sans-serif" font-size="13" fill="#8b949e">Running:</text>
|
||||
<text x="130" y="453" font-family="'Courier New', Courier, monospace" font-size="12" fill="#58a6ff">pbi filters add-topn --page overview --n 10 --order-by Revenue</text>
|
||||
|
||||
<!-- Input bar at bottom -->
|
||||
<rect x="60" y="454" width="730" height="26" rx="13" fill="#0d1117" stroke="#484f58" stroke-width="1"/>
|
||||
<text x="82" y="472" font-family="'Segoe UI', Arial, sans-serif" font-size="13" fill="#484f58">Ask Claude to modify your report...</text>
|
||||
|
||||
<!-- Footer -->
|
||||
<text x="425" y="508" font-family="'Segoe UI', Arial, sans-serif" font-size="13" fill="#8b949e" text-anchor="middle">No drag-and-drop. No manual binding. Just describe what you want on the page.</text>
|
||||
</svg>
|
||||
|
|
|
|||
|
Before Width: | Height: | Size: 4.3 KiB After Width: | Height: | Size: 4.9 KiB |
Loading…
Reference in a new issue