1 files changed, 24 insertions, 8 deletions
diff --git a/gui/src/components/histogram/Histogram.tsx b/gui/src/components/histogram/Histogram.tsx
index 3a8309b..1dd8c65 100644
--- a/gui/src/components/histogram/Histogram.tsx
+++ b/gui/src/components/histogram/Histogram.tsx
@@ -1,5 +1,7 @@
 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) {
@@ -14,6 +16,8 @@ function Histogram({ categories }: Props) {
     category.balanceToBudgetRatio = balanceToBudgetRatioNormaliser(category.balanceToBudgetRatio);
   }
 
+  const groups = [...groupCategories(categories)];
+
   return (
     <table>
       <thead>
@@ -23,18 +27,26 @@ function Histogram({ categories }: Props) {
           <th>Balance</th>
         </tr>
       </thead>
-
-      <tbody>
-        {
-          categories
-            .sort((c1, c2) => BalanceToBudgetRatio.compare(c1.balanceToBudgetRatio, c2.balanceToBudgetRatio))
-            .map((category) => Row({ category }))
-        }
-      </tbody>
+      {
+        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>
@@ -57,6 +69,10 @@ type Props = {
   categories: Category[] | null,
 };
 
+type GroupProps = {
+  group: Group;
+}
+
 type RowProps = {
   category: Category,
 };