0

I have implemented a pie chart using ngx-charts-pie-chart. This chart shows statistics about order statuses in an e-commerce site. The legend is automatically populated by an API, with status of order and quantity of orders for each status. Actually, it seems to have a link, but I can't figure how to add a real link to my orders list, filtering by the order status selected in the legend.

I have searched for something similar here and on Google, but it seems noone needed to change page by clicking on the Legend label...

Does anyone knows how can I do it?

This is my code:

HTML:

<ngx-charts-pie-chart *fuseIfOnDom (select)="onSelect($event)" [scheme]="chartOrderState.scheme" [results]="chartOrderState.analytics" [doughnut]="true" [legend]="true" [legendPosition]="below" [legendTitle]="' '">
</ngx-charts-pie-chart>

TS:


  chartOrderState = {
    scheme: {
      domain: []
    },
    analytics: []
  };

  populateOrderStateAnalytics() {
    this.orderService.getOrderStateAnalitycs().subscribe(analytics => {
      analytics.map(analytic => {
        this.chartOrderState.analytics.push(
          {
            stateId: analytic.description,
            name: this.translateService.instant('OD_STATES.' + analytic.description) + ' - ' + analytic.percentage,
            value: analytic.percentage
          });
        this.chartOrderState.scheme.domain.push(
          analytic.color);
      });
      console.log('home.component: orderState:', analytics);
    }, err => {
      console.log('home.component: orderState:', err);
      this.appResponseHandler.failure(err);
    });
  }


  onSelect(data): void {
    // Here I would need to redirect to the Orders List page, filtering by Order Status
    console.log(data);
  }

I tried to modify the attribute "name" on chartOrderState.analytics, in order to add the html attribute, but it dosn't convert it on a link, and I obtain a plain text label instead of a link.

Any ideas?

Many thanks in advance!

Laura

laurarana
  • 3
  • 2
  • Maybe some more insights here: https://stackoverflow.com/questions/54079031/angular-ngx-charts-using-a-custom-legend – iLuvLogix Jan 23 '23 at 15:15
  • Thanks iLuvLogix, but I have already checked this post and it didn't help me :-( – laurarana Jan 23 '23 at 15:49
  • You could add a link programatically by directly manipulating the DOM object and its siblings/childs via innerHTML, appendChild or similar once the page/legend has been rendered.. It's a bit of a hack but definitely possible. -> look for __ or its parent DOM and add a link to it.. – iLuvLogix Jan 23 '23 at 16:27
  • you could also use _replace_ -> https://www.w3schools.com/jsref/met_node_replacechild.asp – iLuvLogix Jan 23 '23 at 16:33

0 Answers0