1.7.0-1.7.1 - Enhancement: Add Routing Fees History chart to bkpr

[johngribbin]

Closes #131

Adds new component, RoutingFeesHistory, a line-chart to track routing fees over time.

Other notes about PR:

• Adds Dropdown component (toggle between channels)
• Adds Slider component (select time range on the chart)
• Adds Channel type

[lnbc1QWFyb24]

Also I like the idea of creating a unique colour for each account based on the hash of the value, but some of the colours end up being too pale or clash with the UI, so I wonder if we can constrain the range of colours or maybe go a different approach? Maybe we could have a list of predefined colours that we assign to each channel and then just loop through if there are more channels than colours?

[lnbc1QWFyb24]

It would also be interesting if there was an option to see all of the channels data (multiple lines) at the same time.

[johngribbin]

It would also be interesting if there was an option to see all of the channels data (multiple lines) at the same time.

I had the chart this way initially, but it looked weird with 100 channel lines. maybe user can toggle which channels they want to compare, so each time they click on a channel it adds/removes it from the chart

[johngribbin]

Some changes requested in there to fix some bugs.

I am also wondering if we should go a slightly different approach on this as all the data is getting recomputed every time a new date selection or channel selection is being made.

Maybe instead we could take all of the income data and transform it in to date data and show a loading spinner while it is being computed. We could use a reduce function to format the date data like this:

// Mapping of date -> (account -> total routed on that date)
  type DateData = Record<string, Record<string, string>>

  // List of account routes sorted by date
  type SortedDateData = Record<string, string>[]

  $: routingDates = formatRoutesByDate(routingEvents)

  function formatRoutesByDate(events: IncomeEvent[]): SortedDateData {
    const dateMap = events.reduce((acc, { timestamp, credit_msat, account }) => {
      const dateString = new Date(timestamp * 1000).toDateString()
      const currentVal = acc[dateString] || {}
      const currentAccountTotal = currentVal[account] || '0'
      const updatedAccountTotal = BigInt(currentAccountTotal) + BigInt(credit_msat)

      acc[dateString] = { ...currentVal, [account]: updatedAccountTotal.toString() }

      return acc
    }, {} as DateData)

    return Object.keys(dateMap)
      // sort the date keys
      .sort((a, b) => new Date(b).getMilliseconds() - new Date(a).getMilliseconds())
      .map((date) => ({ date, ...dateMap[date] }))
  }

That will result in a sorted list of dates with all routing amounts for each account on that date.

Then instead of pre-selectable date ranges that all end with todays date, we could use a range slider input which allows for setting a start and end date. Something like this library could be nice. You can take the date from the first item in the computed data and the date from the last item and that can be your range. When the date range is changed, you just slice the data array between those dates and pass it to the chart. This approach makes the graph more powerful and means that you could "zoom" in on a particular date range say a week in November last year.

Another thing to consider is that we need to use BigInt when doing math on msat values. We have a Big.js installed, but I think we should start moving to native BigInt since it is widely supported and Lnmessage uses it as well.

gotcha. I figured only calculating for the previous week would be less intensive initially. but happy to implement this and see how it goes for people

I do like the slider idea!