diff --git a/frontend/src/app/components/address-graph/address-graph.component.ts b/frontend/src/app/components/address-graph/address-graph.component.ts index 2bbfd5e34..005c64e9f 100644 --- a/frontend/src/app/components/address-graph/address-graph.component.ts +++ b/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, }, diff --git a/frontend/src/app/components/custom-dashboard/custom-dashboard.component.html b/frontend/src/app/components/custom-dashboard/custom-dashboard.component.html index 8ca1a5ac4..defb7c068 100644 --- a/frontend/src/app/components/custom-dashboard/custom-dashboard.component.html +++ b/frontend/src/app/components/custom-dashboard/custom-dashboard.component.html @@ -238,7 +238,7 @@   - + @@ -272,7 +272,7 @@   - + diff --git a/frontend/src/app/graphs/echarts.ts b/frontend/src/app/graphs/echarts.ts index 67ed7e3b8..36a0517e4 100644 --- a/frontend/src/app/graphs/echarts.ts +++ b/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 }; \ No newline at end of file