diagrams/diagram_loading.svg

<?xml version="1.0" encoding="UTF-8"?>
<!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd">
<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" version="1.1" width="806px" height="706px" viewBox="-0.5 -0.5 806 706" content="&lt;mxfile host=&quot;app.diagrams.net&quot; modified=&quot;2021-04-17T21:54:59.494Z&quot; agent=&quot;5.0 (Windows NT 10.0; Win64; x64) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/90.0.4430.72 Safari/537.36&quot; etag=&quot;12Rr6Eu74sxjApMhtu7S&quot; version=&quot;14.2.9&quot; type=&quot;github&quot;&gt;&lt;diagram id=&quot;49yf4LfgyrDuGLiYq-_j&quot; name=&quot;Page-1&quot;&gt;3VrbcqM4EP0aV80+TArExfaj41w2VTO7qU2qZrJvMijAjkCsELG9X7+SkcxFcsJkfMF5sVFLAqn7nO5Ww8iZp6tbCvP4KwkRHgErXI2cqxEA/tTmv0KwlgLXrQQRTcJKZNeCh+Q/JIWWlJZJiIrWQEYIZkneFgYky1DAWjJIKVm2hz0T3H5qDiOkCR4CiHXptyRkcSWdeFYt/x0lUayebFuyJ4VqsBQUMQzJsiFyrkfOnBLCqqt0NUdY6E7ppZp3s6N3uzCKMtZnwpR+u/n7KozL5f1fvhM52fMN+Czv8gJxKTf8hcAwySKh5xjx31mey/WztVIKQyv+yMuYpZgLbH5ZMEp+oDnBhHJJRjI+8vI5wbgjgjiJMt4M+KIRl1++IMoSru6Z7EiTMBSPuVzGCUMPOQzEM5ccW1xGSZmFSOzHErcnGZOAAb5qy0UatKO2yh+IVg2R1NYtIilidM2HyF5XGm7dbi5rGGxRGjcgoOwNJfKi7Y1r4/ALaZ+fsJWv2UozDAo5eGWTUBaTiGQQX9fSjgrrMV8IyaUt/0GMraViYclI29INrdseb+9UdEFKGqBX9iOXzyCNEHtlnHQYYm+vmo0iDFny0ibu3q0AjIzhkkcKswIGLCFZITwNJSn/u0koWsACbVwUxmjTzxufCq57JOYtxNqvIBNDuKvjzBD8+02zbW05ewc93mOld9MBeDofbNfAB9s+FCHGp8A/WiXsu5h+4cnWk7yZuL5aNRtr1cj4dr83G0/1HUSznrZpqXn745rbk2vesLimk+28XV5fM9jTQdnBNfg8rju+PhjEwvVtPJ90bQNzW8Dz2n5rbPBbjsFvjQ/ltqYfDNReT1BPBoVpT7PCLV99K4xXcRmOnNkI+FhkvAvKryK2UVclEWps2c7/tySq43OxUTCfbtkgX9Wd6i53PAHgy/dhKoiQLQrx9wdMkUE85ylCRMTOta4qe5jrq5ylHCbMMONxnSM1nKuv2kV7Z829DozTjtvmtG3KRfxjctrWD1LnTepJ30hlDYrVkx2srsnTBfddMMCg5WkA93SAWwaA+wcDuPPBAK6A+zbCwb4Rvpk6oxSuGwNykmSsaNz5XghqSIw7kHBsr2PU6o61ibdL+wWrW5rV5xRVZ9V2oHyECyyklCwHxyZ/0oNNpqPr4djknjl5zrN2o5bdgPMsFDUYlSdZXGWiUEMpKnKSyUJoUabGHJDL/3y+ywKSoh2d16tclHNYSQ0jgiomJUiUi75CcZ769ANV+V21xAEWgbqnKUPmBSxPp9LhqkDgJFw6zzKQ3fespu6456CnRTUPtPHkeh2YVCuVszpI2UOAA8MsqtdIqcHx1MKGGSlHQIY9Pg4ynPH4oo0N3z0uNmy9RNAue9WHClXt1136wPy3yhq3fDNVw4DBf08OlgqNd8RkFVgtmIlmK5TyOM0gLoanXqsDWeNLEoN6D1aYAB/u3Dbt66iG9S5DrbthiAeuyK7TkI4k5tBAVCWkmCxRwdTki8HB3vZ6eBVTjf1gXgWc5t3gyRO87TcybyZ4e2eHOYz77hsJXrUlLYjr9Y9u5Dp2pqhXeOcQByWuqiGNXOAeUfF5i/iwaGhE7abbzsQU/o9ZCQHTkxDVeHpTPW+c3uyTkbv36W3vr9p2cNLvcLLrz3eQe2+c3PUS78zK/V3fZqTlUcv9KlifiJbNksqWomZa7jw6d2g6founv8DL3i/LhpWSAv1t2ba634hndwylg6NMN5J5lumkdVTKDO6ktfkq9v2wdkDfcDMoVKtlN+xwhZ5hidmmqJCX4l9+b5mII9cjCeF6eADvvLMCBnybPj+e/jy+ebP+DL2KzfW3/M71/w==&lt;/diagram&gt;&lt;/mxfile&gt;" style="background-color: rgb(255, 255, 255);"><defs/><g><rect x="10" y="15" width="210" height="20" fill="none" stroke="none" pointer-events="all"/><g transform="translate(-0.5 -0.5)"><switch><foreignObject style="overflow: visible; text-align: left;" pointer-events="none" width="100%" height="100%" requiredFeatures="http://www.w3.org/TR/SVG11/feature#Extensibility"><div xmlns="http://www.w3.org/1999/xhtml" style="display: flex; align-items: unsafe center; justify-content: unsafe center; width: 208px; height: 1px; padding-top: 25px; margin-left: 11px;"><div style="box-sizing: border-box; font-size: 0; text-align: center; "><div style="display: inline-block; font-size: 26px; font-family: Helvetica; color: #000000; line-height: 1.2; pointer-events: all; font-weight: bold; white-space: normal; word-wrap: normal; ">Loading the App</div></div></div></foreignObject><text x="115" y="33" fill="#000000" font-family="Helvetica" font-size="26px" text-anchor="middle" font-weight="bold">Loading the App</text></switch></g><path d="M 150 280 L 218.63 280" fill="none" stroke="#000000" stroke-miterlimit="10" pointer-events="stroke"/><path d="M 223.88 280 L 216.88 283.5 L 218.63 280 L 216.88 276.5 Z" fill="#000000" stroke="#000000" stroke-miterlimit="10" pointer-events="all"/><rect x="10" y="225" width="140" height="110" rx="16.5" ry="16.5" fill="#ffffff" stroke="#000000" pointer-events="all"/><g transform="translate(-0.5 -0.5)"><switch><foreignObject style="overflow: visible; text-align: left;" pointer-events="none" width="100%" height="100%" requiredFeatures="http://www.w3.org/TR/SVG11/feature#Extensibility"><div xmlns="http://www.w3.org/1999/xhtml" style="display: flex; align-items: unsafe center; justify-content: unsafe center; width: 138px; height: 1px; padding-top: 280px; margin-left: 11px;"><div style="box-sizing: border-box; font-size: 0; text-align: center; "><div style="display: inline-block; font-size: 15px; font-family: Helvetica; color: #000000; line-height: 1.2; pointer-events: all; white-space: normal; word-wrap: normal; ">Load Transactions from Firebase collection (sorted by Date descending)</div></div></div></foreignObject><text x="80" y="285" fill="#000000" font-family="Helvetica" font-size="15px" text-anchor="middle">Load Transactions f...</text></switch></g><path d="M 290 245 L 290 160 L 308.63 160" fill="none" stroke="#000000" stroke-miterlimit="10" pointer-events="stroke"/><path d="M 313.88 160 L 306.88 163.5 L 308.63 160 L 306.88 156.5 Z" fill="#000000" stroke="#000000" stroke-miterlimit="10" pointer-events="all"/><path d="M 290 315 L 290 380 L 190 380 L 190 438.63" fill="none" stroke="#000000" stroke-miterlimit="10" pointer-events="stroke"/><path d="M 190 443.88 L 186.5 436.88 L 190 438.63 L 193.5 436.88 Z" fill="#000000" stroke="#000000" stroke-miterlimit="10" pointer-events="all"/><rect x="225" y="245" width="130" height="70" rx="10.5" ry="10.5" fill="#ffffff" stroke="#000000" pointer-events="all"/><g transform="translate(-0.5 -0.5)"><switch><foreignObject style="overflow: visible; text-align: left;" pointer-events="none" width="100%" height="100%" requiredFeatures="http://www.w3.org/TR/SVG11/feature#Extensibility"><div xmlns="http://www.w3.org/1999/xhtml" style="display: flex; align-items: unsafe center; justify-content: unsafe center; width: 128px; height: 1px; padding-top: 280px; margin-left: 226px;"><div style="box-sizing: border-box; font-size: 0; text-align: center; "><div style="display: inline-block; font-size: 15px; font-family: Helvetica; color: #000000; line-height: 1.2; pointer-events: all; white-space: normal; word-wrap: normal; ">Loop each Tansacction</div></div></div></foreignObject><text x="290" y="285" fill="#000000" font-family="Helvetica" font-size="15px" text-anchor="middle">Loop each Tansacc...</text></switch></g><path d="M 475 160 L 508.63 160" fill="none" stroke="#000000" stroke-miterlimit="10" pointer-events="stroke"/><path d="M 513.88 160 L 506.88 163.5 L 508.63 160 L 506.88 156.5 Z" fill="#000000" stroke="#000000" stroke-miterlimit="10" pointer-events="all"/><rect x="315" y="125" width="160" height="70" rx="10.5" ry="10.5" fill="#ffffff" stroke="#000000" pointer-events="all"/><g transform="translate(-0.5 -0.5)"><switch><foreignObject style="overflow: visible; text-align: left;" pointer-events="none" width="100%" height="100%" requiredFeatures="http://www.w3.org/TR/SVG11/feature#Extensibility"><div xmlns="http://www.w3.org/1999/xhtml" style="display: flex; align-items: unsafe center; justify-content: unsafe center; width: 158px; height: 1px; padding-top: 160px; margin-left: 316px;"><div style="box-sizing: border-box; font-size: 0; text-align: center; "><div style="display: inline-block; font-size: 15px; font-family: Helvetica; color: #000000; line-height: 1.2; pointer-events: all; white-space: normal; word-wrap: normal; ">Get Transaction Data:<br /><font style="font-size: 12px">Id, Name, Category, Date,<br />Amount, Type</font><br /></div></div></div></foreignObject><text x="395" y="165" fill="#000000" font-family="Helvetica" font-size="15px" text-anchor="middle">Get Transaction Data:...</text></switch></g><path d="M 615 160 L 648.63 160" fill="none" stroke="#000000" stroke-miterlimit="10" pointer-events="stroke"/><path d="M 653.88 160 L 646.88 163.5 L 648.63 160 L 646.88 156.5 Z" fill="#000000" stroke="#000000" stroke-miterlimit="10" pointer-events="all"/><rect x="515" y="130" width="100" height="60" rx="9" ry="9" fill="#ffffff" stroke="#000000" pointer-events="all"/><g transform="translate(-0.5 -0.5)"><switch><foreignObject style="overflow: visible; text-align: left;" pointer-events="none" width="100%" height="100%" requiredFeatures="http://www.w3.org/TR/SVG11/feature#Extensibility"><div xmlns="http://www.w3.org/1999/xhtml" style="display: flex; align-items: unsafe center; justify-content: unsafe center; width: 98px; height: 1px; padding-top: 160px; margin-left: 516px;"><div style="box-sizing: border-box; font-size: 0; text-align: center; "><div style="display: inline-block; font-size: 15px; font-family: Helvetica; color: #000000; line-height: 1.2; pointer-events: all; white-space: normal; word-wrap: normal; ">Get Category<br />Icon</div></div></div></foreignObject><text x="565" y="165" fill="#000000" font-family="Helvetica" font-size="15px" text-anchor="middle">Get Category...</text></switch></g><path d="M 715 190 L 715 290 L 636.37 290" fill="none" stroke="#000000" stroke-miterlimit="10" pointer-events="stroke"/><path d="M 631.12 290 L 638.12 286.5 L 636.37 290 L 638.12 293.5 Z" fill="#000000" stroke="#000000" stroke-miterlimit="10" pointer-events="all"/><rect x="655" y="130" width="140" height="60" rx="9" ry="9" fill="#ffffff" stroke="#000000" pointer-events="all"/><g transform="translate(-0.5 -0.5)"><switch><foreignObject style="overflow: visible; text-align: left;" pointer-events="none" width="100%" height="100%" requiredFeatures="http://www.w3.org/TR/SVG11/feature#Extensibility"><div xmlns="http://www.w3.org/1999/xhtml" style="display: flex; align-items: unsafe center; justify-content: unsafe center; width: 138px; height: 1px; padding-top: 160px; margin-left: 656px;"><div style="box-sizing: border-box; font-size: 0; text-align: center; "><div style="display: inline-block; font-size: 15px; font-family: Helvetica; color: #000000; line-height: 1.2; pointer-events: all; white-space: normal; word-wrap: normal; ">Create Transaction Table row</div></div></div></foreignObject><text x="725" y="165" fill="#000000" font-family="Helvetica" font-size="15px" text-anchor="middle">Create Transaction...</text></switch></g><path d="M 425 280 L 361.37 280" fill="none" stroke="#000000" stroke-miterlimit="10" pointer-events="stroke"/><path d="M 356.12 280 L 363.12 276.5 L 361.37 280 L 363.12 283.5 Z" fill="#000000" stroke="#000000" stroke-miterlimit="10" pointer-events="all"/><rect x="425" y="225" width="205" height="110" rx="16.5" ry="16.5" fill="#ffffff" stroke="#000000" pointer-events="all"/><g transform="translate(-0.5 -0.5)"><switch><foreignObject style="overflow: visible; text-align: left;" pointer-events="none" width="100%" height="100%" requiredFeatures="http://www.w3.org/TR/SVG11/feature#Extensibility"><div xmlns="http://www.w3.org/1999/xhtml" style="display: flex; align-items: unsafe center; justify-content: unsafe center; width: 203px; height: 1px; padding-top: 280px; margin-left: 426px;"><div style="box-sizing: border-box; font-size: 0; text-align: center; "><div style="display: inline-block; font-size: 15px; font-family: Helvetica; color: #000000; line-height: 1.2; pointer-events: all; white-space: normal; word-wrap: normal; ">Add Amount to corresponding sum:<br />sumOfIncome<br />sumOfExpenditure<br />categories Map (key, value)</div></div></div></foreignObject><text x="528" y="285" fill="#000000" font-family="Helvetica" font-size="15px" text-anchor="middle">Add Amount to corresponding...</text></switch></g><path d="M 347.5 445 L 347.5 385 L 488.63 385" fill="none" stroke="#000000" stroke-miterlimit="10" pointer-events="stroke"/><path d="M 493.88 385 L 486.88 388.5 L 488.63 385 L 486.88 381.5 Z" fill="#000000" stroke="#000000" stroke-miterlimit="10" pointer-events="all"/><path d="M 347.5 525 L 347.5 618.63" fill="none" stroke="#000000" stroke-miterlimit="10" pointer-events="stroke"/><path d="M 347.5 623.88 L 344 616.88 L 347.5 618.63 L 351 616.88 Z" fill="#000000" stroke="#000000" stroke-miterlimit="10" pointer-events="all"/><rect x="285" y="445" width="125" height="80" rx="12" ry="12" fill="#ffffff" stroke="#000000" pointer-events="all"/><g transform="translate(-0.5 -0.5)"><switch><foreignObject style="overflow: visible; text-align: left;" pointer-events="none" width="100%" height="100%" requiredFeatures="http://www.w3.org/TR/SVG11/feature#Extensibility"><div xmlns="http://www.w3.org/1999/xhtml" style="display: flex; align-items: unsafe center; justify-content: unsafe center; width: 123px; height: 1px; padding-top: 485px; margin-left: 286px;"><div style="box-sizing: border-box; font-size: 0; text-align: center; "><div style="display: inline-block; font-size: 15px; font-family: Helvetica; color: #000000; line-height: 1.2; pointer-events: all; white-space: normal; word-wrap: normal; ">Loop each Category from categories Map</div></div></div></foreignObject><text x="348" y="490" fill="#000000" font-family="Helvetica" font-size="15px" text-anchor="middle">Loop each Categor...</text></switch></g><rect x="275" y="625" width="145" height="70" rx="10.5" ry="10.5" fill="#ffffff" stroke="#000000" pointer-events="all"/><g transform="translate(-0.5 -0.5)"><switch><foreignObject style="overflow: visible; text-align: left;" pointer-events="none" width="100%" height="100%" requiredFeatures="http://www.w3.org/TR/SVG11/feature#Extensibility"><div xmlns="http://www.w3.org/1999/xhtml" style="display: flex; align-items: unsafe center; justify-content: unsafe center; width: 143px; height: 1px; padding-top: 660px; margin-left: 276px;"><div style="box-sizing: border-box; font-size: 0; text-align: center; "><div style="display: inline-block; font-size: 15px; font-family: Helvetica; color: #000000; line-height: 1.2; pointer-events: all; white-space: normal; word-wrap: normal; ">Add Income and Expenditure totals</div></div></div></foreignObject><text x="348" y="665" fill="#000000" font-family="Helvetica" font-size="15px" text-anchor="middle">Add Income and Expe...</text></switch></g><path d="M 255 485 L 275 485 L 265 485 L 278.63 485" fill="none" stroke="#000000" stroke-miterlimit="10" pointer-events="stroke"/><path d="M 283.88 485 L 276.88 488.5 L 278.63 485 L 276.88 481.5 Z" fill="#000000" stroke="#000000" stroke-miterlimit="10" pointer-events="all"/><rect x="125" y="445" width="130" height="80" rx="12" ry="12" fill="#ffffff" stroke="#000000" pointer-events="all"/><g transform="translate(-0.5 -0.5)"><switch><foreignObject style="overflow: visible; text-align: left;" pointer-events="none" width="100%" height="100%" requiredFeatures="http://www.w3.org/TR/SVG11/feature#Extensibility"><div xmlns="http://www.w3.org/1999/xhtml" style="display: flex; align-items: unsafe center; justify-content: unsafe center; width: 128px; height: 1px; padding-top: 485px; margin-left: 126px;"><div style="box-sizing: border-box; font-size: 0; text-align: center; "><div style="display: inline-block; font-size: 15px; font-family: Helvetica; color: #000000; line-height: 1.2; pointer-events: all; white-space: normal; word-wrap: normal; ">Sort categories from higher to lowest value.</div></div></div></foreignObject><text x="190" y="490" fill="#000000" font-family="Helvetica" font-size="15px" text-anchor="middle">Sort categories f...</text></switch></g><path d="M 615 385 L 678.63 385" fill="none" stroke="#000000" stroke-miterlimit="10" pointer-events="stroke"/><path d="M 683.88 385 L 676.88 388.5 L 678.63 385 L 676.88 381.5 Z" fill="#000000" stroke="#000000" stroke-miterlimit="10" pointer-events="all"/><rect x="495" y="355" width="120" height="60" rx="9" ry="9" fill="#ffffff" stroke="#000000" pointer-events="all"/><g transform="translate(-0.5 -0.5)"><switch><foreignObject style="overflow: visible; text-align: left;" pointer-events="none" width="100%" height="100%" requiredFeatures="http://www.w3.org/TR/SVG11/feature#Extensibility"><div xmlns="http://www.w3.org/1999/xhtml" style="display: flex; align-items: unsafe center; justify-content: unsafe center; width: 118px; height: 1px; padding-top: 385px; margin-left: 496px;"><div style="box-sizing: border-box; font-size: 0; text-align: center; "><div style="display: inline-block; font-size: 15px; font-family: Helvetica; color: #000000; line-height: 1.2; pointer-events: all; white-space: normal; word-wrap: normal; ">Calculate Category Percentage</div></div></div></foreignObject><text x="555" y="390" fill="#000000" font-family="Helvetica" font-size="15px" text-anchor="middle">Calculate Catego...</text></switch></g><path d="M 735 415 L 735 505 L 641.37 505" fill="none" stroke="#000000" stroke-miterlimit="10" pointer-events="stroke"/><path d="M 636.12 505 L 643.12 501.5 L 641.37 505 L 643.12 508.5 Z" fill="#000000" stroke="#000000" stroke-miterlimit="10" pointer-events="all"/><rect x="685" y="355" width="100" height="60" rx="9" ry="9" fill="#ffffff" stroke="#000000" pointer-events="all"/><g transform="translate(-0.5 -0.5)"><switch><foreignObject style="overflow: visible; text-align: left;" pointer-events="none" width="100%" height="100%" requiredFeatures="http://www.w3.org/TR/SVG11/feature#Extensibility"><div xmlns="http://www.w3.org/1999/xhtml" style="display: flex; align-items: unsafe center; justify-content: unsafe center; width: 98px; height: 1px; padding-top: 385px; margin-left: 686px;"><div style="box-sizing: border-box; font-size: 0; text-align: center; "><div style="display: inline-block; font-size: 15px; font-family: Helvetica; color: #000000; line-height: 1.2; pointer-events: all; white-space: normal; word-wrap: normal; ">Get Category<br />Icon</div></div></div></foreignObject><text x="735" y="390" fill="#000000" font-family="Helvetica" font-size="15px" text-anchor="middle">Get Category...</text></switch></g><path d="M 495 505 L 416.37 505" fill="none" stroke="#000000" stroke-miterlimit="10" pointer-events="stroke"/><path d="M 411.12 505 L 418.12 501.5 L 416.37 505 L 418.12 508.5 Z" fill="#000000" stroke="#000000" stroke-miterlimit="10" pointer-events="all"/><rect x="495" y="475" width="140" height="60" rx="9" ry="9" fill="#ffffff" stroke="#000000" pointer-events="all"/><g transform="translate(-0.5 -0.5)"><switch><foreignObject style="overflow: visible; text-align: left;" pointer-events="none" width="100%" height="100%" requiredFeatures="http://www.w3.org/TR/SVG11/feature#Extensibility"><div xmlns="http://www.w3.org/1999/xhtml" style="display: flex; align-items: unsafe center; justify-content: unsafe center; width: 138px; height: 1px; padding-top: 505px; margin-left: 496px;"><div style="box-sizing: border-box; font-size: 0; text-align: center; "><div style="display: inline-block; font-size: 15px; font-family: Helvetica; color: #000000; line-height: 1.2; pointer-events: all; white-space: normal; word-wrap: normal; ">Create Category Item</div></div></div></foreignObject><text x="565" y="510" fill="#000000" font-family="Helvetica" font-size="15px" text-anchor="middle">Create Category Item</text></switch></g><path d="M 80 185 L 80 218.63" fill="none" stroke="#000000" stroke-miterlimit="10" pointer-events="stroke"/><path d="M 80 223.88 L 76.5 216.88 L 80 218.63 L 83.5 216.88 Z" fill="#000000" stroke="#000000" stroke-miterlimit="10" pointer-events="all"/><rect x="25" y="95" width="110" height="90" rx="13.5" ry="13.5" fill="#ffffff" stroke="#000000" pointer-events="all"/><g transform="translate(-0.5 -0.5)"><switch><foreignObject style="overflow: visible; text-align: left;" pointer-events="none" width="100%" height="100%" requiredFeatures="http://www.w3.org/TR/SVG11/feature#Extensibility"><div xmlns="http://www.w3.org/1999/xhtml" style="display: flex; align-items: unsafe center; justify-content: unsafe center; width: 108px; height: 1px; padding-top: 140px; margin-left: 26px;"><div style="box-sizing: border-box; font-size: 0; text-align: center; "><div style="display: inline-block; font-size: 15px; font-family: Helvetica; color: #000000; line-height: 1.2; pointer-events: all; white-space: normal; word-wrap: normal; ">Default Input Date is Today</div></div></div></foreignObject><text x="80" y="145" fill="#000000" font-family="Helvetica" font-size="15px" text-anchor="middle">Default Input D...</text></switch></g></g><switch><g requiredFeatures="http://www.w3.org/TR/SVG11/feature#Extensibility"/><a transform="translate(0,-5)" xlink:href="https://www.diagrams.net/doc/faq/svg-export-text-problems" target="_blank"><text text-anchor="middle" font-size="10px" x="50%" y="100%">Viewer does not support full SVG 1.1</text></a></switch></svg>