| 1 | <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 1280 720" width="1280" height="720" |
| 2 | font-family="Arial, -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif" |
| 3 | font-size="12"> |
| 4 | <!-- Generic grouped table with indentation, subtotals and a grand total. --> |
| 5 | <rect width="1280" height="720" fill="#FFFFFF"/> |
| 6 | |
| 7 | <g id="header" data-pptx-bounds="60 35 1160 80"> |
| 8 | <text x="80" y="72" font-size="32" font-weight="700" fill="#0F172A">Hierarchical Table</text> |
| 9 | <text x="80" y="102" font-size="14" fill="#64748B">Groups, indented items, subtotals and a grand total across stable measure columns</text> |
| 10 | </g> |
| 11 | |
| 12 | <g id="hierarchical-table" |
| 13 | data-pptx-bounds="80 145 1120 500" |
| 14 | data-pptx-replace-with="table"> |
| 15 | <metadata type="application/json"> |
| 16 | { |
| 17 | "name": "hierarchical-table", |
| 18 | "x": 80, |
| 19 | "y": 145, |
| 20 | "width": 1120, |
| 21 | "height": 500, |
| 22 | "strict_grid": true, |
| 23 | "column_widths": [400, 180, 180, 180, 180], |
| 24 | "row_heights": [50, 50, 50, 50, 50, 50, 50, 50, 50, 50], |
| 25 | "style": { |
| 26 | "font_family": "Arial", |
| 27 | "font_size": 15, |
| 28 | "header_font_size": 13, |
| 29 | "header_fill": "#E2E8F0", |
| 30 | "header_text": "#334155", |
| 31 | "body_fill": "#FFFFFF", |
| 32 | "body_text": "#0F172A", |
| 33 | "band_row": false, |
| 34 | "border_color": "#CBD5E1", |
| 35 | "border_width": 1, |
| 36 | "padding": {"left": 12, "right": 12, "top": 5, "bottom": 5}, |
| 37 | "valign": "middle" |
| 38 | }, |
| 39 | "columns": [ |
| 40 | {"text": "ITEM", "bold": true}, |
| 41 | {"text": "PERIOD 1", "align": "r", "bold": true}, |
| 42 | {"text": "PERIOD 2", "align": "r", "bold": true}, |
| 43 | {"text": "TOTAL", "align": "r", "bold": true}, |
| 44 | {"text": "CHANGE", "align": "r", "bold": true} |
| 45 | ], |
| 46 | "rows": [ |
| 47 | [ |
| 48 | {"text": "Group A", "bold": true, "fill": "#F8FAFC"}, |
| 49 | {"text": "", "fill": "#F8FAFC"}, |
| 50 | {"text": "", "fill": "#F8FAFC"}, |
| 51 | {"text": "", "fill": "#F8FAFC"}, |
| 52 | {"text": "", "fill": "#F8FAFC"} |
| 53 | ], |
| 54 | [ |
| 55 | {"text": "Item A1", "color": "#475569", "padding": {"left": 36, "right": 12, "top": 5, "bottom": 5}}, |
| 56 | {"text": "120", "align": "r"}, |
| 57 | {"text": "138", "align": "r"}, |
| 58 | {"text": "258", "align": "r", "bold": true}, |
| 59 | {"text": "+15%", "align": "r", "color": "#059669", "bold": true} |
| 60 | ], |
| 61 | [ |
| 62 | {"text": "Item A2", "color": "#475569", "padding": {"left": 36, "right": 12, "top": 5, "bottom": 5}}, |
| 63 | {"text": "80", "align": "r"}, |
| 64 | {"text": "92", "align": "r"}, |
| 65 | {"text": "172", "align": "r", "bold": true}, |
| 66 | {"text": "+15%", "align": "r", "color": "#059669", "bold": true} |
| 67 | ], |
| 68 | [ |
| 69 | {"text": "Subtotal A", "bold": true, "fill": "#EFF6FF", "color": "#1D4ED8"}, |
| 70 | {"text": "200", "align": "r", "bold": true, "fill": "#EFF6FF", "color": "#1D4ED8"}, |
| 71 | {"text": "230", "align": "r", "bold": true, "fill": "#EFF6FF", "color": "#1D4ED8"}, |
| 72 | {"text": "430", "align": "r", "bold": true, "fill": "#EFF6FF", "color": "#1D4ED8"}, |
| 73 | {"text": "+15%", "align": "r", "bold": true, "fill": "#EFF6FF", "color": "#059669"} |
| 74 | ], |
| 75 | [ |
| 76 | {"text": "Group B", "bold": true, "fill": "#F8FAFC"}, |
| 77 | {"text": "", "fill": "#F8FAFC"}, |
| 78 | {"text": "", "fill": "#F8FAFC"}, |
| 79 | {"text": "", "fill": "#F8FAFC"}, |
| 80 | {"text": "", "fill": "#F8FAFC"} |
| 81 | ], |
| 82 | [ |
| 83 | {"text": "Item B1", "color": "#475569", "padding": {"left": 36, "right": 12, "top": 5, "bottom": 5}}, |
| 84 | {"text": "140", "align": "r"}, |
| 85 | {"text": "126", "align": "r"}, |
| 86 | {"text": "266", "align": "r", "bold": true}, |
| 87 | {"text": "-10%", "align": "r", "color": "#E11D48", "bold": true} |
| 88 | ], |
| 89 | [ |
| 90 | {"text": "Item B2", "color": "#475569", "padding": {"left": 36, "right": 12, "top": 5, "bottom": 5}}, |
| 91 | {"text": "60", "align": "r"}, |
| 92 | {"text": "72", "align": "r"}, |
| 93 | {"text": "132", "align": "r", "bold": true}, |
| 94 | {"text": "+20%", "align": "r", "color": "#059669", "bold": true} |
| 95 | ], |
| 96 | [ |
| 97 | {"text": "Subtotal B", "bold": true, "fill": "#EFF6FF", "color": "#1D4ED8"}, |
| 98 | {"text": "200", "align": "r", "bold": true, "fill": "#EFF6FF", "color": "#1D4ED8"}, |
| 99 | {"text": "198", "align": "r", "bold": true, "fill": "#EFF6FF", "color": "#1D4ED8"}, |
| 100 | {"text": "398", "align": "r", "bold": true, "fill": "#EFF6FF", "color": "#1D4ED8"}, |
| 101 | {"text": "-1%", "align": "r", "bold": true, "fill": "#EFF6FF", "color": "#E11D48"} |
| 102 | ], |
| 103 | [ |
| 104 | {"text": "Grand Total", "bold": true, "fill": "#2563EB", "color": "#FFFFFF"}, |
| 105 | {"text": "400", "align": "r", "bold": true, "fill": "#2563EB", "color": "#FFFFFF"}, |
| 106 | {"text": "428", "align": "r", "bold": true, "fill": "#2563EB", "color": "#FFFFFF"}, |
| 107 | {"text": "828", "align": "r", "bold": true, "fill": "#2563EB", "color": "#FFFFFF"}, |
| 108 | {"text": "+7%", "align": "r", "bold": true, "fill": "#2563EB", "color": "#FFFFFF"} |
| 109 | ] |
| 110 | ] |
| 111 | } |
| 112 | </metadata> |
| 113 | |
| 114 | <!-- Row treatments. --> |
| 115 | <rect x="80" y="145" width="1120" height="50" fill="#E2E8F0"/> |
| 116 | <rect x="80" y="195" width="1120" height="50" fill="#F8FAFC"/> |
| 117 | <rect x="80" y="345" width="1120" height="50" fill="#EFF6FF"/> |
| 118 | <rect x="80" y="395" width="1120" height="50" fill="#F8FAFC"/> |
| 119 | <rect x="80" y="545" width="1120" height="50" fill="#EFF6FF"/> |
| 120 | <rect x="80" y="595" width="1120" height="50" fill="#2563EB"/> |
| 121 | |
| 122 | <!-- Stable grid. --> |
| 123 | <rect x="80" y="145" width="1120" height="500" fill="none" stroke="#CBD5E1" stroke-width="1.5"/> |
| 124 | <g stroke="#CBD5E1" stroke-width="1"> |
| 125 | <line x1="480" y1="145" x2="480" y2="645"/> |
| 126 | <line x1="660" y1="145" x2="660" y2="645"/> |
| 127 | <line x1="840" y1="145" x2="840" y2="645"/> |
| 128 | <line x1="1020" y1="145" x2="1020" y2="645"/> |
| 129 | <line x1="80" y1="195" x2="1200" y2="195"/> |
| 130 | <line x1="80" y1="245" x2="1200" y2="245"/> |
| 131 | <line x1="80" y1="295" x2="1200" y2="295"/> |
| 132 | <line x1="80" y1="345" x2="1200" y2="345"/> |
| 133 | <line x1="80" y1="395" x2="1200" y2="395"/> |
| 134 | <line x1="80" y1="445" x2="1200" y2="445"/> |
| 135 | <line x1="80" y1="495" x2="1200" y2="495"/> |
| 136 | <line x1="80" y1="545" x2="1200" y2="545"/> |
| 137 | <line x1="80" y1="595" x2="1200" y2="595"/> |
| 138 | </g> |
| 139 | |
| 140 | <!-- Column headers. --> |
| 141 | <g font-size="13" font-weight="700" fill="#334155"> |
| 142 | <text x="100" y="177">ITEM</text> |
| 143 | <text x="640" y="177" text-anchor="end">PERIOD 1</text> |
| 144 | <text x="820" y="177" text-anchor="end">PERIOD 2</text> |
| 145 | <text x="1000" y="177" text-anchor="end">TOTAL</text> |
| 146 | <text x="1180" y="177" text-anchor="end">CHANGE</text> |
| 147 | </g> |
| 148 | |
| 149 | <!-- Group A. --> |
| 150 | <g font-size="15"> |
| 151 | <text x="100" y="227" font-weight="700" fill="#0F172A">Group A</text> |
| 152 | <text x="130" y="277" fill="#475569">Item A1</text> |
| 153 | <text x="640" y="277" text-anchor="end">120</text> |
| 154 | <text x="820" y="277" text-anchor="end">138</text> |
| 155 | <text x="1000" y="277" text-anchor="end" font-weight="700">258</text> |
| 156 | <text x="1180" y="277" text-anchor="end" font-weight="700" fill="#059669">+15%</text> |
| 157 | <text x="130" y="327" fill="#475569">Item A2</text> |
| 158 | <text x="640" y="327" text-anchor="end">80</text> |
| 159 | <text x="820" y="327" text-anchor="end">92</text> |
| 160 | <text x="1000" y="327" text-anchor="end" font-weight="700">172</text> |
| 161 | <text x="1180" y="327" text-anchor="end" font-weight="700" fill="#059669">+15%</text> |
| 162 | <g font-weight="700" fill="#1D4ED8"> |
| 163 | <text x="100" y="377">Subtotal A</text> |
| 164 | <text x="640" y="377" text-anchor="end">200</text> |
| 165 | <text x="820" y="377" text-anchor="end">230</text> |
| 166 | <text x="1000" y="377" text-anchor="end">430</text> |
| 167 | <text x="1180" y="377" text-anchor="end" fill="#059669">+15%</text> |
| 168 | </g> |
| 169 | </g> |
| 170 | |
| 171 | <!-- Group B. --> |
| 172 | <g font-size="15"> |
| 173 | <text x="100" y="427" font-weight="700" fill="#0F172A">Group B</text> |
| 174 | <text x="130" y="477" fill="#475569">Item B1</text> |
| 175 | <text x="640" y="477" text-anchor="end">140</text> |
| 176 | <text x="820" y="477" text-anchor="end">126</text> |
| 177 | <text x="1000" y="477" text-anchor="end" font-weight="700">266</text> |
| 178 | <text x="1180" y="477" text-anchor="end" font-weight="700" fill="#E11D48">-10%</text> |
| 179 | <text x="130" y="527" fill="#475569">Item B2</text> |
| 180 | <text x="640" y="527" text-anchor="end">60</text> |
| 181 | <text x="820" y="527" text-anchor="end">72</text> |
| 182 | <text x="1000" y="527" text-anchor="end" font-weight="700">132</text> |
| 183 | <text x="1180" y="527" text-anchor="end" font-weight="700" fill="#059669">+20%</text> |
| 184 | <g font-weight="700" fill="#1D4ED8"> |
| 185 | <text x="100" y="577">Subtotal B</text> |
| 186 | <text x="640" y="577" text-anchor="end">200</text> |
| 187 | <text x="820" y="577" text-anchor="end">198</text> |
| 188 | <text x="1000" y="577" text-anchor="end">398</text> |
| 189 | <text x="1180" y="577" text-anchor="end" fill="#E11D48">-1%</text> |
| 190 | </g> |
| 191 | </g> |
| 192 | |
| 193 | <!-- Grand total. --> |
| 194 | <g font-size="16" font-weight="700" fill="#FFFFFF"> |
| 195 | <text x="100" y="627">Grand Total</text> |
| 196 | <text x="640" y="627" text-anchor="end">400</text> |
| 197 | <text x="820" y="627" text-anchor="end">428</text> |
| 198 | <text x="1000" y="627" text-anchor="end">828</text> |
| 199 | <text x="1180" y="627" text-anchor="end">+7%</text> |
| 200 | </g> |
| 201 | </g> |
| 202 | </svg> |
| 203 |