summaryrefslogtreecommitdiff
path: root/gui/src/components/histogram/Histogram.tsx
diff options
context:
space:
mode:
authorJoe Carstairs <me@joeac.net>2024-12-12 08:26:53 +0000
committerJoe Carstairs <me@joeac.net>2024-12-12 08:26:53 +0000
commit8a30bcbdf9264d235bf93da3df8e170cfde53d02 (patch)
tree5f9b6fe956c72b89a89cc936ab86ec1bffc271f5 /gui/src/components/histogram/Histogram.tsx
parent51711fb42a44b452cdf1b4fd6a716d0251f23dda (diff)
Removes web GUI
Diffstat (limited to 'gui/src/components/histogram/Histogram.tsx')
-rw-r--r--gui/src/components/histogram/Histogram.tsx80
1 files changed, 0 insertions, 80 deletions
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;