diff options
| author | Joe Carstairs <me@joeac.net> | 2024-12-12 08:26:53 +0000 |
|---|---|---|
| committer | Joe Carstairs <me@joeac.net> | 2024-12-12 08:26:53 +0000 |
| commit | 8a30bcbdf9264d235bf93da3df8e170cfde53d02 (patch) | |
| tree | 5f9b6fe956c72b89a89cc936ab86ec1bffc271f5 /gui/src/components | |
| parent | 51711fb42a44b452cdf1b4fd6a716d0251f23dda (diff) | |
Removes web GUI
Diffstat (limited to 'gui/src/components')
4 files changed, 0 insertions, 201 deletions
diff --git a/gui/src/components/BudgetUpdatesTable/BudgetUpdatesTable.css b/gui/src/components/BudgetUpdatesTable/BudgetUpdatesTable.css deleted file mode 100644 index 8b13789..0000000 --- a/gui/src/components/BudgetUpdatesTable/BudgetUpdatesTable.css +++ /dev/null @@ -1 +0,0 @@ - diff --git a/gui/src/components/BudgetUpdatesTable/BudgetUpdatesTable.tsx b/gui/src/components/BudgetUpdatesTable/BudgetUpdatesTable.tsx deleted file mode 100644 index 479d69f..0000000 --- a/gui/src/components/BudgetUpdatesTable/BudgetUpdatesTable.tsx +++ /dev/null @@ -1,36 +0,0 @@ -import { BudgetUpdate } from '../../types/budgetUpdate'; -import './BudgetUpdatesTable.css'; - -function BudgetUpdatesTable({ budgetUpdates }: Props) { - return ( - <table> - <thead> - <tr> - <td>Date</td> - <td>Quantity</td> - <td>Period</td> - </tr> - </thead> - - <tbody> - { budgetUpdates.map(Row) } - </tbody> - </table> - ); -} - -function Row(budgetUpdate: BudgetUpdate) { - return ( - <tr> - <td>{budgetUpdate.date.format("DD Mm YYYY")}</td> - <td>{budgetUpdate.newQuantity.toString()}</td> - <td>{budgetUpdate.newPeriod}</td> - </tr> - ) -} - -type Props = { - budgetUpdates: BudgetUpdate[]; -} - -export { BudgetUpdatesTable }; diff --git a/gui/src/components/histogram/Histogram.scss b/gui/src/components/histogram/Histogram.scss deleted file mode 100644 index e3f4604..0000000 --- a/gui/src/components/histogram/Histogram.scss +++ /dev/null @@ -1,84 +0,0 @@ -table { - border-collapse: collapse; -} - -:is(thead, .ratio__text) { - opacity: 0; - height: 0; - width: 0; -} - -tr { - display: grid; - gap: 0.3rem; - grid-template-columns: 10rem 1fr min-content; - justify-content: start; -} - -td.name { - text-align: right; -} - -td.ratio { - width: 10rem; - display: grid; - grid-template-columns: 5rem 5rem; - grid-template-rows: 1fr; - align-items: center; - - &::before { - content: ''; - display: block; - height: 100%; - grid-row: 1 / 2; - z-index: -1; - } - - &:is(.ratio--save, .ratio--spend)::before { - grid-column: 1 / 2; - border-right: 1px dashed white; - position: relative; - right: -1px; - } - - &.ratio--arrears::before { - grid-column: 2 / 3; - border-left: 1px dashed white; - left: -1px; - } -} - -.ratio__bar { - display: block; - width: calc(3rem * var(--normal-abs-ratio) + 1px); - height: 33%; - background-color: var(--category-highlight-color); - grid-row: 1 / 2; - - :is(.ratio--save, .ratio--spend) & { - grid-column: 2 / 3; - } - - .ratio--arrears & { - grid-column: 1 / 2; - position: relative; - right: -1px; - justify-self: end; - } -} - -td.balance { - color: var(--category-highlight-color); -} - -.ratio--arrears { - --category-highlight-color: crimson; -} - -.ratio--save { - --category-highlight-color: white; -} - -.ratio--spend { - --category-highlight-color: dodgerblue; -} diff --git a/gui/src/components/histogram/Histogram.tsx b/gui/src/components/histogram/Histogram.tsx deleted file mode 100644 index 1dd8c65..0000000 --- a/gui/src/components/histogram/Histogram.tsx +++ /dev/null @@ -1,80 +0,0 @@ -import { BalanceToBudgetRatio } from "../../types/balanceToBudgetRatio"; -import { Category } from "../../types/category"; -import { Group } from "../../types/group"; -import { groupCategories } from "../../util/groupCategories"; -import './Histogram.scss'; - -function Histogram({ categories }: Props) { - if (categories === null) { - return ( - <p>No categories to show</p> - ); - } - - const balanceToBudgetRatioNormaliser = BalanceToBudgetRatio.makeNormaliser(...categories.map(c => c.balanceToBudgetRatio)); - for (const category of categories) { - category.balanceToBudgetRatio = balanceToBudgetRatioNormaliser(category.balanceToBudgetRatio); - } - - const groups = [...groupCategories(categories)]; - - return ( - <table> - <thead> - <tr> - <th>Category</th> - <th>Balance-to-Budget Ratio</th> - <th>Balance</th> - </tr> - </thead> - { - groups.map(g => <RowGroup group={g} />) - } - </table> - ); -} - -function RowGroup({ group }: GroupProps) { - return ( - <tbody> - <tr role="heading" aria-level="3">{group.name}</tr> - { - group.categories - .sort((c1, c2) => BalanceToBudgetRatio.compare(c1.balanceToBudgetRatio, c2.balanceToBudgetRatio)) - .map((category) => Row({ category })) - } - </tbody> - ); -} - -function Row({ category }: RowProps) { - return ( - <tr> - <td class="name">{category.name}</td> - <td - class={`ratio ratio--${category.balanceToBudgetRatio?.recommendedAction ?? ''}`} - style={`--normal-abs-ratio: ${Math.abs(category.balanceToBudgetRatio?.normalisedRatio ?? 0)};`} - > - <span class="ratio__text"> - {category.balanceToBudgetRatio?.toString() ?? ''} - </span> - <span class="ratio__bar"></span> - </td> - <td class="balance">{category.currentBalance.toString()}</td> - </tr> - ); -} - -type Props = { - categories: Category[] | null, -}; - -type GroupProps = { - group: Group; -} - -type RowProps = { - category: Category, -}; - -export default Histogram; |
