[income statement] use second level breakdown on tooltips

src/lib/income_statement.ts

@@ -1,5 +1,12 @@
 import * as d3 from "d3";
-import { formatCurrency, formatCurrencyCrude, tooltip, type IncomeStatement, rem } from "./utils";
+import {
+  formatCurrency,
+  formatCurrencyCrude,
+  tooltip,
+  type IncomeStatement,
+  rem,
+  firstNames
+} from "./utils";
 import COLORS from "./colors";
 import _ from "lodash";
 import { iconGlyph, iconify } from "./icon";
@@ -204,8 +211,15 @@ export function renderIncomeStatement(element: Element) {
       .attr("fill", (d) => d.color)
       .attr("fill-opacity", 0.5)
       .attr("data-tippy-content", (d) => {
+        const secondLevelBreakdown = _.chain(d.breakdown)
+          .toPairs()
+          .groupBy((pair) => firstNames(pair[0], 2))
+          .map((pairs, label) => [label, _.sumBy(pairs, (pair) => pair[1])])
+          .fromPairs()
+          .value();
+
         return tooltip(
-          _.map(d.breakdown, (value, label) => [
+          _.map(secondLevelBreakdown, (value, label) => [
             iconify(label),
             [formatCurrency(value * d.multiplier), "has-text-right has-text-weight-bold"]
           ]),

src/lib/utils.ts

@@ -1010,6 +1010,10 @@ export function secondName(account: string) {
   return account.split(":")[1];
 }
 
+export function firstNames(account: string, n: number) {
+  return _.take(account.split(":"), n).join(":");
+}
+
 export function restName(account: string) {
   return _.drop(account.split(":")).join(":");
 }