133 lines
13 KiB
XML
133 lines
13 KiB
XML
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 1280 720" width="1280" height="720">
|
|
<!--
|
|
Waterfall Chart Template
|
|
Purpose: Variance analysis, financial breakdown
|
|
Use cases: Profit bridges, budget variance, revenue decomposition
|
|
Feature: Mathematically connected pillars, Tailwind gradients, dashboard summary
|
|
-->
|
|
<defs>
|
|
<!-- Increase (Emerald) -->
|
|
<linearGradient id="increaseGrad" x1="0%" y1="0%" x2="0%" y2="100%">
|
|
<stop offset="0%" stop-color="#34D399"/>
|
|
<stop offset="100%" stop-color="#10B981"/>
|
|
</linearGradient>
|
|
<!-- Decrease (Rose) -->
|
|
<linearGradient id="decreaseGrad" x1="0%" y1="0%" x2="0%" y2="100%">
|
|
<stop offset="0%" stop-color="#FB7185"/>
|
|
<stop offset="100%" stop-color="#F43F5E"/>
|
|
</linearGradient>
|
|
<!-- Base / Total (Slate) -->
|
|
<linearGradient id="totalGrad" x1="0%" y1="0%" x2="0%" y2="100%">
|
|
<stop offset="0%" stop-color="#475569"/>
|
|
<stop offset="100%" stop-color="#1E293B"/>
|
|
</linearGradient>
|
|
<!-- Soft Shadow for Pillars -->
|
|
<filter id="barShadow" x="-20%" y="-10%" width="140%" height="120%">
|
|
<feGaussianBlur in="SourceAlpha" stdDeviation="3"/>
|
|
<feOffset dx="0" dy="2" result="offsetblur"/>
|
|
<feFlood flood-color="#0F172A" flood-opacity="0.12" result="shadowColor"/>
|
|
<feComposite in="shadowColor" in2="offsetblur" operator="in" result="shadow"/>
|
|
<feMerge>
|
|
<feMergeNode in="shadow"/>
|
|
<feMergeNode in="SourceGraphic"/>
|
|
</feMerge>
|
|
</filter>
|
|
</defs>
|
|
<!-- Background -->
|
|
<rect width="1280" height="720" fill="#FAFBFC"/>
|
|
<!-- ==================== Header ==================== -->
|
|
<text x="60" y="70" font-family="-apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif" font-size="32" font-weight="800" fill="#0F172A">Annual Profit Waterfall Analysis</text>
|
|
<text x="60" y="100" font-family="-apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif" font-size="14" font-weight="700" fill="#64748B" letter-spacing="1">2024 VS 2025 · IN MILLIONS (USD)</text>
|
|
<!-- ==================== Legend ==================== -->
|
|
<g id="legend" transform="translate(860, 60)">
|
|
<rect x="0" y="0" width="340" height="40" rx="20" fill="#FFFFFF" stroke="#E2E8F0" stroke-width="1.5" filter="url(#barShadow)"/>
|
|
<circle cx="30" cy="20" r="6" fill="#1E293B"/>
|
|
<text x="44" y="25" font-family="-apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif" font-size="14" font-weight="700" fill="#475569">Start / End</text>
|
|
<circle cx="140" cy="20" r="6" fill="#10B981"/>
|
|
<text x="154" y="25" font-family="-apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif" font-size="14" font-weight="700" fill="#475569">Increase</text>
|
|
<circle cx="240" cy="20" r="6" fill="#F43F5E"/>
|
|
<text x="254" y="25" font-family="-apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif" font-size="14" font-weight="700" fill="#475569">Decrease</text>
|
|
</g>
|
|
<!-- ==================== Chart Area ==================== -->
|
|
<g id="chartArea">
|
|
<!-- Y-Axis Grid Lines (Spacing = 80px per 100M) -->
|
|
<line x1="140" y1="560" x2="1200" y2="560" stroke="#E2E8F0" stroke-width="2"/>
|
|
<line x1="140" y1="480" x2="1200" y2="480" stroke="#F1F5F9" stroke-width="2" stroke-dasharray="6,6"/>
|
|
<line x1="140" y1="400" x2="1200" y2="400" stroke="#F1F5F9" stroke-width="2" stroke-dasharray="6,6"/>
|
|
<line x1="140" y1="320" x2="1200" y2="320" stroke="#F1F5F9" stroke-width="2" stroke-dasharray="6,6"/>
|
|
<line x1="140" y1="240" x2="1200" y2="240" stroke="#F1F5F9" stroke-width="2" stroke-dasharray="6,6"/>
|
|
<line x1="140" y1="160" x2="1200" y2="160" stroke="#F1F5F9" stroke-width="2" stroke-dasharray="6,6"/>
|
|
<!-- Y-Axis Labels -->
|
|
<text x="120" y="565" font-family="-apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif" font-size="14" font-weight="600" fill="#94A3B8" text-anchor="end">0</text>
|
|
<text x="120" y="485" font-family="-apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif" font-size="14" font-weight="600" fill="#94A3B8" text-anchor="end">100</text>
|
|
<text x="120" y="405" font-family="-apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif" font-size="14" font-weight="600" fill="#94A3B8" text-anchor="end">200</text>
|
|
<text x="120" y="325" font-family="-apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif" font-size="14" font-weight="600" fill="#94A3B8" text-anchor="end">300</text>
|
|
<text x="120" y="245" font-family="-apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif" font-size="14" font-weight="600" fill="#94A3B8" text-anchor="end">400</text>
|
|
<text x="120" y="165" font-family="-apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif" font-size="14" font-weight="600" fill="#94A3B8" text-anchor="end">500</text>
|
|
<!-- Y-Axis Vertical Line -->
|
|
<line x1="140" y1="130" x2="140" y2="560" stroke="#CBD5E1" stroke-width="2"/>
|
|
<!-- chart-plot-area: 140,130,1200,560 -->
|
|
<!-- Connection Lines -->
|
|
<line x1="265" y1="336" x2="305" y2="336" stroke="#94A3B8" stroke-width="2" stroke-dasharray="4,4"/>
|
|
<line x1="395" y1="240" x2="435" y2="240" stroke="#94A3B8" stroke-width="2" stroke-dasharray="4,4"/>
|
|
<line x1="525" y1="188" x2="565" y2="188" stroke="#94A3B8" stroke-width="2" stroke-dasharray="4,4"/>
|
|
<line x1="655" y1="224" x2="695" y2="224" stroke="#94A3B8" stroke-width="2" stroke-dasharray="4,4"/>
|
|
<line x1="785" y1="252" x2="825" y2="252" stroke="#94A3B8" stroke-width="2" stroke-dasharray="4,4"/>
|
|
<line x1="915" y1="272" x2="955" y2="272" stroke="#94A3B8" stroke-width="2" stroke-dasharray="4,4"/>
|
|
<line x1="1045" y1="240" x2="1085" y2="240" stroke="#94A3B8" stroke-width="2" stroke-dasharray="4,4"/>
|
|
<!-- 1. 2024 Profit (280) -->
|
|
<rect x="175" y="336" width="90" height="224" rx="6" fill="url(#totalGrad)" filter="url(#barShadow)"/>
|
|
<text x="220" y="320" font-family="-apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif" font-size="16" font-weight="800" fill="#0F172A" text-anchor="middle">280</text>
|
|
<text x="220" y="590" font-family="-apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif" font-size="13" font-weight="700" fill="#475569" text-anchor="middle">2024</text>
|
|
<text x="220" y="610" font-family="-apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif" font-size="13" font-weight="600" fill="#64748B" text-anchor="middle">Profit</text>
|
|
<!-- 2. Revenue Growth (+120) -->
|
|
<rect x="305" y="240" width="90" height="96" rx="6" fill="url(#increaseGrad)" filter="url(#barShadow)"/>
|
|
<text x="350" y="224" font-family="-apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif" font-size="16" font-weight="800" fill="#059669" text-anchor="middle">+120</text>
|
|
<text x="350" y="590" font-family="-apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif" font-size="13" font-weight="700" fill="#475569" text-anchor="middle">Revenue</text>
|
|
<text x="350" y="610" font-family="-apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif" font-size="13" font-weight="600" fill="#64748B" text-anchor="middle">Growth</text>
|
|
<!-- 3. New Products (+65) -->
|
|
<rect x="435" y="188" width="90" height="52" rx="6" fill="url(#increaseGrad)" filter="url(#barShadow)"/>
|
|
<text x="480" y="172" font-family="-apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif" font-size="16" font-weight="800" fill="#059669" text-anchor="middle">+65</text>
|
|
<text x="480" y="590" font-family="-apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif" font-size="13" font-weight="700" fill="#475569" text-anchor="middle">New</text>
|
|
<text x="480" y="610" font-family="-apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif" font-size="13" font-weight="600" fill="#64748B" text-anchor="middle">Products</text>
|
|
<!-- 4. Material Costs (-45) -->
|
|
<rect x="565" y="188" width="90" height="36" rx="6" fill="url(#decreaseGrad)" filter="url(#barShadow)"/>
|
|
<text x="610" y="244" font-family="-apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif" font-size="16" font-weight="800" fill="#BE123C" text-anchor="middle">-45</text>
|
|
<text x="610" y="590" font-family="-apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif" font-size="13" font-weight="700" fill="#475569" text-anchor="middle">Material</text>
|
|
<text x="610" y="610" font-family="-apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif" font-size="13" font-weight="600" fill="#64748B" text-anchor="middle">Costs</text>
|
|
<!-- 5. Labor Costs (-35) -->
|
|
<rect x="695" y="224" width="90" height="28" rx="6" fill="url(#decreaseGrad)" filter="url(#barShadow)"/>
|
|
<text x="740" y="272" font-family="-apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif" font-size="16" font-weight="800" fill="#BE123C" text-anchor="middle">-35</text>
|
|
<text x="740" y="590" font-family="-apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif" font-size="13" font-weight="700" fill="#475569" text-anchor="middle">Labor</text>
|
|
<text x="740" y="610" font-family="-apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif" font-size="13" font-weight="600" fill="#64748B" text-anchor="middle">Costs</text>
|
|
<!-- 6. Marketing (-25) -->
|
|
<rect x="825" y="252" width="90" height="20" rx="6" fill="url(#decreaseGrad)" filter="url(#barShadow)"/>
|
|
<text x="870" y="292" font-family="-apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif" font-size="16" font-weight="800" fill="#BE123C" text-anchor="middle">-25</text>
|
|
<text x="870" y="590" font-family="-apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif" font-size="13" font-weight="700" fill="#475569" text-anchor="middle">Marketing</text>
|
|
<text x="870" y="610" font-family="-apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif" font-size="13" font-weight="600" fill="#64748B" text-anchor="middle">Spend</text>
|
|
<!-- 7. Ops Efficiency (+40) -->
|
|
<rect x="955" y="240" width="90" height="32" rx="6" fill="url(#increaseGrad)" filter="url(#barShadow)"/>
|
|
<text x="1000" y="224" font-family="-apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif" font-size="16" font-weight="800" fill="#059669" text-anchor="middle">+40</text>
|
|
<text x="1000" y="590" font-family="-apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif" font-size="13" font-weight="700" fill="#475569" text-anchor="middle">Ops</text>
|
|
<text x="1000" y="610" font-family="-apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif" font-size="13" font-weight="600" fill="#64748B" text-anchor="middle">Efficiency</text>
|
|
<!-- 8. 2025 Profit (400) -->
|
|
<rect x="1085" y="240" width="90" height="320" rx="6" fill="url(#totalGrad)" filter="url(#barShadow)"/>
|
|
<text x="1130" y="224" font-family="-apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif" font-size="16" font-weight="800" fill="#0F172A" text-anchor="middle">400</text>
|
|
<text x="1130" y="590" font-family="-apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif" font-size="13" font-weight="700" fill="#475569" text-anchor="middle">2025</text>
|
|
<text x="1130" y="610" font-family="-apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif" font-size="13" font-weight="600" fill="#64748B" text-anchor="middle">Profit</text>
|
|
</g>
|
|
<!-- ==================== Summary Dashboard ==================== -->
|
|
<g id="summaryCard" transform="translate(140, 630)">
|
|
<rect x="0" y="0" width="1060" height="60" rx="12" fill="#FFFFFF" stroke="#E2E8F0" stroke-width="1.5" filter="url(#barShadow)"/>
|
|
<rect x="20" y="15" width="4" height="30" rx="2" fill="#10B981"/>
|
|
<text x="40" y="36" font-family="-apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif" font-size="15" font-weight="800" fill="#0F172A">ANNUAL PROFIT GROWTH</text>
|
|
<rect x="260" y="12" width="100" height="36" rx="18" fill="#ECFDF5"/>
|
|
<text x="310" y="36" font-family="-apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif" font-size="16" font-weight="800" fill="#059669" text-anchor="middle">+$120M</text>
|
|
<text x="400" y="35" font-family="-apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif" font-size="14" font-weight="600" fill="#64748B">
|
|
Total Increases: <tspan fill="#10B981">+$225M</tspan> · Total Decreases: <tspan fill="#F43F5E">-$105M</tspan> · Net Growth: <tspan fill="#10B981" font-weight="800">+$120M (+42.9%)</tspan>
|
|
</text>
|
|
</g>
|
|
<!-- ==================== Footer ==================== -->
|
|
<text x="1200" y="710" font-family="-apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif" font-size="13" font-weight="600" fill="#94A3B8" text-anchor="end">Data Source: Finance Department</text>
|
|
</svg>
|