-
Notifications
You must be signed in to change notification settings - Fork 434
Commit
This commit does not belong to any branch on this repository, and may belong to a fork outside of the repository.
(BIDS-2495) refactor income charts (#2565)
- Loading branch information
1 parent
a0a6efb
commit 30c4c56
Showing
7 changed files
with
198 additions
and
316 deletions.
There are no files selected for viewing
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,132 @@ | ||
| function getIncomeChartOptions(incomeHistory, executionIncomeHistory, title, height, currency) { | ||
| return { | ||
| colors: ["#90ed7d", "#7cb5ec"], | ||
| exporting: { | ||
| scale: 1, | ||
| }, | ||
| rangeSelector: { | ||
| enabled: false, | ||
| }, | ||
| chart: { | ||
| type: "column", | ||
| height: `${height}px"`, | ||
| pointInterval: 24 * 3600 * 1000, | ||
| events: { | ||
| load: function () { | ||
| $("#load-income-btn").removeClass("d-none") | ||
| }, | ||
| }, | ||
| }, | ||
| title: { | ||
| text: title, | ||
| }, | ||
| credits: { | ||
| enabled: false, | ||
| }, | ||
| legend: { | ||
| enabled: true, | ||
| }, | ||
| plotOptions: { | ||
| column: { | ||
| stacking: "stacked", | ||
| dataLabels: { | ||
| enabled: false, | ||
| }, | ||
| pointInterval: 24 * 3600 * 1000, | ||
| }, | ||
| series: { | ||
| turboThreshold: 10000, | ||
| }, | ||
| }, | ||
| xAxis: { | ||
| type: "datetime", | ||
| range: 31 * 24 * 60 * 60 * 1000, | ||
| labels: { | ||
| formatter: function () { | ||
| var epoch = timeToEpoch(this.value) | ||
| var orig = this.axis.defaultLabelFormatter.call(this) | ||
| return `${orig}<br/>Epoch ${epoch}` | ||
| }, | ||
| }, | ||
| }, | ||
| yAxis: [ | ||
| { | ||
| title: { | ||
| text: `Income [${currency}]`, | ||
| }, | ||
| opposite: false, | ||
| labels: { | ||
| formatter: function () { | ||
| return currency === "ETH" ? trimToken(this.value) : trimCurrency(this.value) | ||
| }, | ||
| }, | ||
| }, | ||
| ], | ||
| series: [ | ||
| { | ||
| name: "Execution Income", | ||
| data: executionIncomeHistory, | ||
| showInNavigator: false, | ||
| dataGrouping: { | ||
| enabled: false, | ||
| }, | ||
| }, | ||
| { | ||
| name: "Consensus Income", | ||
| data: incomeHistory, | ||
| showInNavigator: true, | ||
| dataGrouping: { | ||
| enabled: false, | ||
| }, | ||
| }, | ||
| ], | ||
| tooltip: { | ||
| split: false, | ||
| shared: true, | ||
| formatter: (tooltip) => { | ||
| var text = `` | ||
| var total = 0 | ||
|
|
||
| // time range for hovered point | ||
| const ts = tooltip.chart.hoverPoints[0].x | ||
| const startEpoch = timeToEpoch(ts) | ||
| const timeForOneDay = 24 * 60 * 60 * 1000 | ||
| const endEpoch = timeToEpoch(ts + timeForOneDay) - 1 | ||
| const startDate = luxon.DateTime.fromMillis(ts) | ||
| const endDate = luxon.DateTime.fromMillis(epochToTime(endEpoch + 1)) | ||
| text += `${startDate.toFormat("MMM-dd-yyyy HH:mm:ss")} - ${endDate.toFormat("MMM-dd-yyyy HH:mm:ss")}<br> Epochs ${startEpoch} - ${endEpoch}<br/>` | ||
|
|
||
| // income | ||
| for (var i = 0; i < tooltip.chart.hoverPoints.length; i++) { | ||
| const value = tooltip.chart.hoverPoints[i].y | ||
| text += `<span style="color:${tooltip.chart.hoverPoints[i].series.color}">\u25CF</span> <b>${tooltip.chart.hoverPoints[i].series.name}:</b> ${getIncomeChartValueString(value, currency)}<br/>` | ||
| total += value | ||
| } | ||
|
|
||
| // add total if hovered point contains rewards for both EL and CL | ||
| if (tooltip.chart.hoverPoints.length > 1) { | ||
| text += `<b>Total:</b> ${getIncomeChartValueString(total, currency)}` | ||
| } | ||
|
|
||
| return text | ||
| }, | ||
| }, | ||
| responsive: { | ||
| rules: [ | ||
| { | ||
| condition: { | ||
| callback: function () { | ||
| return window.innerWidth >= 820 | ||
| }, | ||
| }, | ||
| chartOptions: { | ||
| legend: { | ||
| itemMarginTop: 7, | ||
| itemMarginBottom: -7, | ||
| }, | ||
| }, | ||
| }, | ||
| ], | ||
| }, | ||
| } | ||
| } |
Oops, something went wrong.