mirror of
https://github.com/MinaSaad1/pbi-cli
synced 2026-04-21 13:37:19 +00:00
fix: redesign report-layer SVG with large visual icons instead of heavy text
This commit is contained in:
MinaSaad1
parent
136f4d77f7
commit
2e85c4f15e
1 changed files with 102 additions and 68 deletions
|
|
@ -1,92 +1,126 @@
|
|||
<svg xmlns="http://www.w3.org/2000/svg" width="850" height="380" viewBox="0 0 850 380">
|
||||
<svg xmlns="http://www.w3.org/2000/svg" width="850" height="350" viewBox="0 0 850 350">
|
||||
<defs>
|
||||
<linearGradient id="rl-glow" x1="0%" y1="0%" x2="100%" y2="0%">
|
||||
<stop offset="0%" stop-color="#06d6a0" stop-opacity="0"/>
|
||||
<stop offset="50%" stop-color="#06d6a0" stop-opacity="0.12"/>
|
||||
<stop offset="100%" stop-color="#06d6a0" stop-opacity="0"/>
|
||||
</linearGradient>
|
||||
</defs>
|
||||
|
||||
<rect width="100%" height="100%" fill="#0d1117" rx="8"/>
|
||||
|
||||
<!-- Title -->
|
||||
<text x="425" y="28" font-family="'Segoe UI', Arial, sans-serif" font-size="18" fill="#06d6a0" text-anchor="middle" font-weight="bold">Report Layer: Build Entire Reports from CLI</text>
|
||||
<text x="425" y="48" font-family="'Segoe UI', Arial, sans-serif" font-size="13" fill="#8b949e" text-anchor="middle">No connection needed. Works with .pbip projects. Auto-syncs with Desktop.</text>
|
||||
<text x="425" y="30" font-family="'Segoe UI', Arial, sans-serif" font-size="20" fill="#06d6a0" text-anchor="middle" font-weight="bold">Report Layer</text>
|
||||
<text x="425" y="50" font-family="'Segoe UI', Arial, sans-serif" font-size="13" fill="#8b949e" text-anchor="middle">Build entire Power BI reports from the command line</text>
|
||||
|
||||
<!-- 2x2 grid layout instead of 4 narrow columns -->
|
||||
<!-- Card size: 390 x 140, gap 20 -->
|
||||
<!-- Glow line -->
|
||||
<rect x="100" y="60" width="650" height="1" fill="url(#rl-glow)"/>
|
||||
|
||||
<!-- ============ Card 1: Visuals (top-left) ============ -->
|
||||
<rect x="20" y="65" width="395" height="135" rx="8" fill="#161b22" stroke="#d97757" stroke-width="1.5"/>
|
||||
<text x="40" y="90" font-family="'Segoe UI', Arial, sans-serif" font-size="16" fill="#d97757" font-weight="bold">Visuals</text>
|
||||
<text x="130" y="90" font-family="'Segoe UI', Arial, sans-serif" font-size="12" fill="#8b949e">32 types with data binding</text>
|
||||
<!-- ============ 4 visual cards with large icons ============ -->
|
||||
|
||||
<!-- Mini chart icons -->
|
||||
<g transform="translate(320, 72)">
|
||||
<rect x="0" y="8" width="7" height="14" rx="1" fill="#d97757" opacity="0.5"/>
|
||||
<rect x="9" y="3" width="7" height="19" rx="1" fill="#d97757" opacity="0.7"/>
|
||||
<rect x="18" y="0" width="7" height="22" rx="1" fill="#d97757"/>
|
||||
<circle cx="40" cy="14" r="3" fill="#d97757" opacity="0.5"/>
|
||||
<circle cx="50" cy="6" r="3" fill="#d97757" opacity="0.7"/>
|
||||
<circle cx="58" cy="10" r="3" fill="#d97757"/>
|
||||
<!-- Card 1: Visuals -->
|
||||
<rect x="30" y="78" width="185" height="200" rx="10" fill="#161b22" stroke="#d97757" stroke-width="1.5"/>
|
||||
|
||||
<!-- Large bar chart icon -->
|
||||
<g transform="translate(62, 95)">
|
||||
<rect x="0" y="50" width="20" height="35" rx="3" fill="#d97757" opacity="0.4"/>
|
||||
<rect x="28" y="30" width="20" height="55" rx="3" fill="#d97757" opacity="0.6"/>
|
||||
<rect x="56" y="10" width="20" height="75" rx="3" fill="#d97757" opacity="0.8"/>
|
||||
<rect x="84" y="0" width="20" height="85" rx="3" fill="#d97757"/>
|
||||
<!-- Axis lines -->
|
||||
<line x1="-5" y1="86" x2="110" y2="86" stroke="#d97757" stroke-width="1" stroke-opacity="0.3"/>
|
||||
<line x1="-5" y1="0" x2="-5" y2="86" stroke="#d97757" stroke-width="1" stroke-opacity="0.3"/>
|
||||
</g>
|
||||
|
||||
<text x="40" y="114" font-family="'Courier New', Courier, monospace" font-size="12" fill="#58a6ff">pbi visual add --type bar --name chart1</text>
|
||||
<text x="40" y="131" font-family="'Courier New', Courier, monospace" font-size="12" fill="#58a6ff">pbi visual bind chart1 --category --value</text>
|
||||
<text x="40" y="148" font-family="'Courier New', Courier, monospace" font-size="12" fill="#58a6ff">pbi visual bulk-update --type kpi --width 250</text>
|
||||
<text x="122" y="210" font-family="'Segoe UI', Arial, sans-serif" font-size="16" fill="#d97757" text-anchor="middle" font-weight="bold">32 Visual Types</text>
|
||||
<text x="122" y="228" font-family="'Segoe UI', Arial, sans-serif" font-size="11" fill="#8b949e" text-anchor="middle">Charts, cards, KPIs,</text>
|
||||
<text x="122" y="243" font-family="'Segoe UI', Arial, sans-serif" font-size="11" fill="#8b949e" text-anchor="middle">tables, slicers, maps</text>
|
||||
<text x="122" y="265" font-family="'Courier New', Courier, monospace" font-size="11" fill="#58a6ff" text-anchor="middle">pbi visual add</text>
|
||||
|
||||
<text x="40" y="172" font-family="'Segoe UI', Arial, sans-serif" font-size="11" fill="#8b949e">bar, line, card, KPI, gauge, scatter, combo, table, matrix,</text>
|
||||
<text x="40" y="188" font-family="'Segoe UI', Arial, sans-serif" font-size="11" fill="#8b949e">slicer, map, treemap, funnel, waterfall, and 18 more</text>
|
||||
<!-- Card 2: Data Binding -->
|
||||
<rect x="232" y="78" width="185" height="200" rx="10" fill="#161b22" stroke="#58a6ff" stroke-width="1.5"/>
|
||||
|
||||
<!-- ============ Card 2: Pages (top-right) ============ -->
|
||||
<rect x="435" y="65" width="395" height="135" rx="8" fill="#161b22" stroke="#58a6ff" stroke-width="1.5"/>
|
||||
<text x="455" y="90" font-family="'Segoe UI', Arial, sans-serif" font-size="16" fill="#58a6ff" font-weight="bold">Pages</text>
|
||||
<text x="525" y="90" font-family="'Segoe UI', Arial, sans-serif" font-size="12" fill="#8b949e">Layout, bookmarks, drillthrough</text>
|
||||
<!-- Binding icon: table arrow to chart -->
|
||||
<g transform="translate(267, 100)">
|
||||
<!-- Table icon -->
|
||||
<rect x="0" y="10" width="40" height="50" rx="4" fill="none" stroke="#58a6ff" stroke-width="1.5"/>
|
||||
<line x1="0" y1="24" x2="40" y2="24" stroke="#58a6ff" stroke-width="1" stroke-opacity="0.5"/>
|
||||
<line x1="0" y1="38" x2="40" y2="38" stroke="#58a6ff" stroke-width="1" stroke-opacity="0.5"/>
|
||||
<line x1="16" y1="10" x2="16" y2="60" stroke="#58a6ff" stroke-width="1" stroke-opacity="0.3"/>
|
||||
<text x="20" y="8" font-family="'Segoe UI', Arial, sans-serif" font-size="8" fill="#58a6ff" text-anchor="middle">Table[Col]</text>
|
||||
|
||||
<!-- Page icon -->
|
||||
<g transform="translate(780, 72)">
|
||||
<rect x="0" y="0" width="24" height="22" rx="2" fill="none" stroke="#58a6ff" stroke-width="1.2" opacity="0.4"/>
|
||||
<rect x="6" y="3" width="24" height="22" rx="2" fill="none" stroke="#58a6ff" stroke-width="1.2" opacity="0.7"/>
|
||||
<rect x="12" y="6" width="24" height="22" rx="2" fill="none" stroke="#58a6ff" stroke-width="1.2"/>
|
||||
<!-- Arrow -->
|
||||
<line x1="48" y1="35" x2="68" y2="35" stroke="#F2C811" stroke-width="2" stroke-dasharray="3,2"/>
|
||||
<polygon points="72,35 66,30 66,40" fill="#F2C811"/>
|
||||
|
||||
<!-- Chart icon -->
|
||||
<rect x="76" y="10" width="40" height="50" rx="4" fill="none" stroke="#d97757" stroke-width="1.5"/>
|
||||
<rect x="82" y="36" width="8" height="18" rx="1" fill="#d97757" opacity="0.5"/>
|
||||
<rect x="92" y="26" width="8" height="28" rx="1" fill="#d97757" opacity="0.7"/>
|
||||
<rect x="102" y="18" width="8" height="36" rx="1" fill="#d97757"/>
|
||||
</g>
|
||||
|
||||
<text x="455" y="114" font-family="'Courier New', Courier, monospace" font-size="12" fill="#58a6ff">pbi report add-page --display-name "Sales"</text>
|
||||
<text x="455" y="131" font-family="'Courier New', Courier, monospace" font-size="12" fill="#58a6ff">pbi report set-background --color "#F5F5F5"</text>
|
||||
<text x="455" y="148" font-family="'Courier New', Courier, monospace" font-size="12" fill="#58a6ff">pbi bookmarks add "Executive View"</text>
|
||||
<text x="324" y="210" font-family="'Segoe UI', Arial, sans-serif" font-size="16" fill="#58a6ff" text-anchor="middle" font-weight="bold">Data Binding</text>
|
||||
<text x="324" y="228" font-family="'Segoe UI', Arial, sans-serif" font-size="11" fill="#8b949e" text-anchor="middle">Connect model fields</text>
|
||||
<text x="324" y="243" font-family="'Segoe UI', Arial, sans-serif" font-size="11" fill="#8b949e" text-anchor="middle">to visual roles</text>
|
||||
<text x="324" y="265" font-family="'Courier New', Courier, monospace" font-size="11" fill="#58a6ff" text-anchor="middle">pbi visual bind</text>
|
||||
|
||||
<text x="455" y="172" font-family="'Segoe UI', Arial, sans-serif" font-size="11" fill="#8b949e">Add, remove, configure pages. Set background colours.</text>
|
||||
<text x="455" y="188" font-family="'Segoe UI', Arial, sans-serif" font-size="11" fill="#8b949e">Hide pages, manage bookmarks, custom canvas sizes.</text>
|
||||
<!-- Card 3: Themes -->
|
||||
<rect x="434" y="78" width="185" height="200" rx="10" fill="#161b22" stroke="#F2C811" stroke-width="1.5"/>
|
||||
|
||||
<!-- ============ Card 3: Themes (bottom-left) ============ -->
|
||||
<rect x="20" y="215" width="395" height="135" rx="8" fill="#161b22" stroke="#F2C811" stroke-width="1.5"/>
|
||||
<text x="40" y="240" font-family="'Segoe UI', Arial, sans-serif" font-size="16" fill="#F2C811" font-weight="bold">Themes</text>
|
||||
<text x="120" y="240" font-family="'Segoe UI', Arial, sans-serif" font-size="12" fill="#8b949e">Branding and conditional formatting</text>
|
||||
|
||||
<!-- Color palette -->
|
||||
<g transform="translate(345, 226)">
|
||||
<circle cx="0" cy="8" r="6" fill="#0078D4"/>
|
||||
<circle cx="15" cy="8" r="6" fill="#00BCF2"/>
|
||||
<circle cx="30" cy="8" r="6" fill="#FFB900"/>
|
||||
<circle cx="45" cy="8" r="6" fill="#D83B01"/>
|
||||
<!-- Large colour palette icon -->
|
||||
<g transform="translate(472, 100)">
|
||||
<!-- Palette shape -->
|
||||
<ellipse cx="55" cy="35" rx="50" ry="35" fill="none" stroke="#F2C811" stroke-width="1.2" stroke-opacity="0.3"/>
|
||||
<!-- Colour dots -->
|
||||
<circle cx="25" cy="20" r="10" fill="#0078D4"/>
|
||||
<circle cx="50" cy="14" r="10" fill="#00BCF2"/>
|
||||
<circle cx="75" cy="18" r="10" fill="#FFB900"/>
|
||||
<circle cx="85" cy="40" r="10" fill="#D83B01"/>
|
||||
<circle cx="68" cy="52" r="10" fill="#8661C5"/>
|
||||
<circle cx="38" cy="52" r="10" fill="#00B294"/>
|
||||
</g>
|
||||
|
||||
<text x="40" y="264" font-family="'Courier New', Courier, monospace" font-size="12" fill="#58a6ff">pbi report set-theme --file brand.json</text>
|
||||
<text x="40" y="281" font-family="'Courier New', Courier, monospace" font-size="12" fill="#58a6ff">pbi report diff-theme --file proposed.json</text>
|
||||
<text x="40" y="298" font-family="'Courier New', Courier, monospace" font-size="12" fill="#58a6ff">pbi format background-gradient --min --max</text>
|
||||
<text x="526" y="210" font-family="'Segoe UI', Arial, sans-serif" font-size="16" fill="#F2C811" text-anchor="middle" font-weight="bold">Themes</text>
|
||||
<text x="526" y="228" font-family="'Segoe UI', Arial, sans-serif" font-size="11" fill="#8b949e" text-anchor="middle">Brand colours, formatting</text>
|
||||
<text x="526" y="243" font-family="'Segoe UI', Arial, sans-serif" font-size="11" fill="#8b949e" text-anchor="middle">rules, diff before apply</text>
|
||||
<text x="526" y="265" font-family="'Courier New', Courier, monospace" font-size="11" fill="#58a6ff" text-anchor="middle">pbi report set-theme</text>
|
||||
|
||||
<text x="40" y="322" font-family="'Segoe UI', Arial, sans-serif" font-size="11" fill="#8b949e">Apply corporate themes. Compare before applying.</text>
|
||||
<text x="40" y="338" font-family="'Segoe UI', Arial, sans-serif" font-size="11" fill="#8b949e">Gradient, rules-based, and measure-driven formatting.</text>
|
||||
<!-- Card 4: Filters -->
|
||||
<rect x="636" y="78" width="185" height="200" rx="10" fill="#161b22" stroke="#ff6b6b" stroke-width="1.5"/>
|
||||
|
||||
<!-- ============ Card 4: Filters (bottom-right) ============ -->
|
||||
<rect x="435" y="215" width="395" height="135" rx="8" fill="#161b22" stroke="#ff6b6b" stroke-width="1.5"/>
|
||||
<text x="455" y="240" font-family="'Segoe UI', Arial, sans-serif" font-size="16" fill="#ff6b6b" font-weight="bold">Filters</text>
|
||||
<text x="520" y="240" font-family="'Segoe UI', Arial, sans-serif" font-size="12" fill="#8b949e">Page and visual filters</text>
|
||||
|
||||
<!-- Funnel icon -->
|
||||
<g transform="translate(790, 224)">
|
||||
<polygon points="0,0 40,0 30,12 10,12" fill="none" stroke="#ff6b6b" stroke-width="1.2" opacity="0.6"/>
|
||||
<polygon points="10,12 30,12 25,22 15,22" fill="none" stroke="#ff6b6b" stroke-width="1.2"/>
|
||||
<!-- Large funnel icon -->
|
||||
<g transform="translate(680, 96)">
|
||||
<polygon points="0,0 90,0 68,28 22,28" fill="none" stroke="#ff6b6b" stroke-width="1.8" opacity="0.4"/>
|
||||
<polygon points="22,28 68,28 58,50 32,50" fill="none" stroke="#ff6b6b" stroke-width="1.8" opacity="0.7"/>
|
||||
<polygon points="32,50 58,50 52,68 38,68" fill="none" stroke="#ff6b6b" stroke-width="1.8"/>
|
||||
<!-- Data dots being filtered -->
|
||||
<circle cx="15" cy="-8" r="3" fill="#ff6b6b" opacity="0.3"/>
|
||||
<circle cx="30" cy="-10" r="3" fill="#ff6b6b" opacity="0.4"/>
|
||||
<circle cx="45" cy="-7" r="3" fill="#ff6b6b" opacity="0.5"/>
|
||||
<circle cx="60" cy="-9" r="3" fill="#ff6b6b" opacity="0.4"/>
|
||||
<circle cx="75" cy="-8" r="3" fill="#ff6b6b" opacity="0.3"/>
|
||||
<!-- Output dot -->
|
||||
<circle cx="45" cy="78" r="4" fill="#06d6a0"/>
|
||||
</g>
|
||||
|
||||
<text x="455" y="264" font-family="'Courier New', Courier, monospace" font-size="12" fill="#58a6ff">pbi filters add-topn --n 10 --order-by Revenue</text>
|
||||
<text x="455" y="281" font-family="'Courier New', Courier, monospace" font-size="12" fill="#58a6ff">pbi filters add-relative-date --period months</text>
|
||||
<text x="455" y="298" font-family="'Courier New', Courier, monospace" font-size="12" fill="#58a6ff">pbi filters add-categorical --value "East"</text>
|
||||
<text x="728" y="210" font-family="'Segoe UI', Arial, sans-serif" font-size="16" fill="#ff6b6b" text-anchor="middle" font-weight="bold">Filters</text>
|
||||
<text x="728" y="228" font-family="'Segoe UI', Arial, sans-serif" font-size="11" fill="#8b949e" text-anchor="middle">TopN, date range,</text>
|
||||
<text x="728" y="243" font-family="'Segoe UI', Arial, sans-serif" font-size="11" fill="#8b949e" text-anchor="middle">categorical filters</text>
|
||||
<text x="728" y="265" font-family="'Courier New', Courier, monospace" font-size="11" fill="#58a6ff" text-anchor="middle">pbi filters add-topn</text>
|
||||
|
||||
<text x="455" y="322" font-family="'Segoe UI', Arial, sans-serif" font-size="11" fill="#8b949e">TopN, relative date, and categorical filters.</text>
|
||||
<text x="455" y="338" font-family="'Segoe UI', Arial, sans-serif" font-size="11" fill="#8b949e">Page-level or visual-level. Integer literals for Desktop.</text>
|
||||
<!-- ============ Bottom bar: key capabilities ============ -->
|
||||
<rect x="30" y="295" width="790" height="40" rx="8" fill="#161b22" stroke="#06d6a0" stroke-width="1" stroke-opacity="0.3"/>
|
||||
|
||||
<!-- Footer -->
|
||||
<text x="425" y="372" font-family="'Segoe UI', Arial, sans-serif" font-size="13" fill="#8b949e" text-anchor="middle">Auto-syncs with Desktop after every write -- no manual close/reopen needed</text>
|
||||
<circle cx="70" cy="315" r="4" fill="#06d6a0"/>
|
||||
<text x="82" y="319" font-family="'Segoe UI', Arial, sans-serif" font-size="12" fill="#e6edf3">No connection needed</text>
|
||||
|
||||
<circle cx="260" cy="315" r="4" fill="#06d6a0"/>
|
||||
<text x="272" y="319" font-family="'Segoe UI', Arial, sans-serif" font-size="12" fill="#e6edf3">Auto-syncs with Desktop</text>
|
||||
|
||||
<circle cx="470" cy="315" r="4" fill="#06d6a0"/>
|
||||
<text x="482" y="319" font-family="'Segoe UI', Arial, sans-serif" font-size="12" fill="#e6edf3">Bulk operations</text>
|
||||
|
||||
<circle cx="630" cy="315" r="4" fill="#06d6a0"/>
|
||||
<text x="642" y="319" font-family="'Segoe UI', Arial, sans-serif" font-size="12" fill="#e6edf3">Git-friendly PBIR</text>
|
||||
</svg>
|
||||
|
|
|
|||
|
Before Width: | Height: | Size: 7 KiB After Width: | Height: | Size: 7.8 KiB |
Loading…
Reference in a new issue