Merge pull request #5794 from mempool/mononaut/balance-chart-label

Add configurable label to balance widget

frontend/src/app/components/address-graph/address-graph.component.ts

@@ -44,6 +44,7 @@ export class AddressGraphComponent implements OnChanges, OnDestroy {
   @Input() right: number | string = 10;
   @Input() left: number | string = 70;
   @Input() widget: boolean = false;
+  @Input() label: string = '';
   @Input() defaultFiat: boolean = false;
   @Input() showLegend: boolean = true;
   @Input() showYAxis: boolean = true;
@@ -55,6 +56,7 @@ export class AddressGraphComponent implements OnChanges, OnDestroy {
   hoverData: any[] = [];
   conversions: any;
   allowZoom: boolean = false;
+  labelGraphic: any;
 
   selected = { [$localize`:@@7e69426bd97a606d8ae6026762858e6e7c86a1fd:Balance`]: true, 'Fiat': false };
 
@@ -85,6 +87,18 @@ export class AddressGraphComponent implements OnChanges, OnDestroy {
 
   ngOnChanges(changes: SimpleChanges): void {
     this.isLoading = true;
+    this.labelGraphic = this.label ? {
+      type: 'text',
+      right: '36px',
+      bottom: '36px',
+      z: 100,
+      silent: true,
+      style: {
+        fill: '#fff',
+        text: this.label,
+        font: '24px sans-serif'
+      }
+    } : undefined;
     if (!this.addressSummary$ && (!this.address || !this.stats)) {
       return;
     }
@@ -205,6 +219,10 @@ export class AddressGraphComponent implements OnChanges, OnDestroy {
         right: this.adjustedRight,
         left: this.adjustedLeft,
       },
+      graphic: this.labelGraphic ? [{
+        ...this.labelGraphic,
+        right: this.adjustedRight + 22 + 'px',
+      }] : undefined,
       legend: (this.showLegend && !this.stateService.isAnyTestnet()) ? {
         data: [
           {
@@ -443,6 +461,10 @@ export class AddressGraphComponent implements OnChanges, OnDestroy {
         right: this.adjustedRight,
         left: this.adjustedLeft,
       },
+      graphic: this.labelGraphic ? [{
+        ...this.labelGraphic,
+        right: this.adjustedRight + 22 + 'px',
+      }] : undefined,
       legend: {
         selected: this.selected,
       },

frontend/src/app/components/custom-dashboard/custom-dashboard.component.html

@@ -238,7 +238,7 @@
                   <span>&nbsp;</span>
                   <fa-icon [icon]="['fas', 'external-link-alt']" [fixedWidth]="true" style="vertical-align: text-top; font-size: 13px; color: var(--title-fg)"></fa-icon>
                 </a>
-                <app-address-graph [address]="widget.props.address" [addressSummary$]="addressSummary$" [period]="widget.props.period || 'all'" [stats]="address ? address.chain_stats : null" [widget]="true" [defaultFiat]="true" [height]="graphHeight"></app-address-graph>
+                <app-address-graph [address]="widget.props.address" [addressSummary$]="addressSummary$" [period]="widget.props.period || 'all'" [stats]="address ? address.chain_stats : null" [widget]="true" [defaultFiat]="true" [height]="graphHeight" [label]="widget.props.label"></app-address-graph>
               </div>
             </div>
           </div>
@@ -272,7 +272,7 @@
                   <span>&nbsp;</span>
                   <fa-icon [icon]="['fas', 'external-link-alt']" [fixedWidth]="true" style="vertical-align: text-top; font-size: 13px; color: var(--title-fg)"></fa-icon>
                 </a>
-                <app-address-graph [addressSummary$]="walletSummary$" [period]="widget.props.period || 'all'" [widget]="true" [height]="graphHeight"></app-address-graph>
+                <app-address-graph [addressSummary$]="walletSummary$" [period]="widget.props.period || 'all'" [widget]="true" [height]="graphHeight" [label]="widget.props.label"></app-address-graph>
               </div>
             </div>
           </div>

frontend/src/app/graphs/echarts.ts

@@ -1,7 +1,7 @@
 // Import tree-shakeable echarts
 import * as echarts from 'echarts/core';
 import { LineChart, LinesChart, BarChart, TreemapChart, PieChart, ScatterChart, GaugeChart, CustomChart } from 'echarts/charts';
-import { TitleComponent, TooltipComponent, GridComponent, LegendComponent, GeoComponent, DataZoomComponent, VisualMapComponent, MarkLineComponent } from 'echarts/components';
+import { TitleComponent, TooltipComponent, GridComponent, LegendComponent, GeoComponent, DataZoomComponent, VisualMapComponent, MarkLineComponent, GraphicComponent } from 'echarts/components';
 import { SVGRenderer, CanvasRenderer } from 'echarts/renderers';
 // Typescript interfaces
 import { EChartsOption, TreemapSeriesOption, LineSeriesOption, PieSeriesOption } from 'echarts';
@@ -13,6 +13,6 @@ echarts.use([
   LegendComponent, GeoComponent, DataZoomComponent,
   VisualMapComponent, MarkLineComponent,
   LineChart, LinesChart, BarChart, TreemapChart, PieChart, ScatterChart, GaugeChart,
-  CustomChart,
+  CustomChart, GraphicComponent
 ]);
 export { echarts, EChartsOption, TreemapSeriesOption, LineSeriesOption, PieSeriesOption };