Custom chart plugin in angular #6815

stuchlajz created one year ago

ABP Framework version: v8.0.1 UI Type: Angular Database System: EF Core (PostgreSQL.) Tiered (for MVC) or Auth Server Separated (for Angular): yes Exception message and full stack trace: Steps to reproduce the issue: Hello, I'd like to ask for your support. According to the documentation on https://docs.abp.io/en/abp/8.0/UI/Angular/Chart-Component I have created a sample chart. It is plotted correctly. However, if I define my own plugin according to https://www.chartjs.org/docs/latest/api/interfaces/Plugin.html, none of the methods are called.

import { Component } from '@angular/core';

@Component({
  selector: 'app-chart-demo',
  template: `
    &lt;abp-chart
      type=&quot;bar&quot;
      [data]=&quot;data&quot;
      width=&quot;400px&quot;
      height=&quot;400px&quot;
      [plugins]=&quot;plugins&quot;
    &gt;&lt;/abp-chart&gt;
  `,
})
export class BarChartComponent {
  data = {
    labels: ['January', 'February', 'March', 'April', 'May', 'June', 'July'],
    datasets: [
      {
        label: 'First dataset',
        backgroundColor: '#42A5F5',
        data: [65, 59, 80, 81, 56, 55, 40],
      },
      {
        label: 'Second dataset',
        backgroundColor: '#FFA726',
        data: [28, 48, 40, 19, 86, 27, 90],
      },
    ],
  };

  helloWorldPlugin = {
    id: 'helloWorld',
    beforeInit: (chart, args, options) => {
      console.log(chart);
    },
    afterInit: (chart, args, options) => {
      console.log(chart);
    },
    afterRender: (chart, args, options) => {
      console.log(chart);
    },
    beforeDraw: chart => {
      console.log(chart);
    },
    afterDraw: (chart, args, options) => {
      console.log(chart);
    },
  };

  plugins = [this.helloWorldPlugin];
}

Thank you in advance

sinan created one year ago

Angular Developer

Hi, It might be related with version of chart.js.

in @abp/ng.component its installed version 3.9.1. So i wonder can you try to change your plugin according to version 3.9.1 of chart.js

stuchlajz created one year ago

I apologize for the longer response time. I tried to modify the plugin according to the documentation https://www.chartjs.org/docs/3.9.1/developers/plugins.html, unfortunately without success. I am unable to trigger any events. Could you please provide an example of a plugin where, for instance, beforeDraw: (chart, args, options) => { console.log(chart); } is executed? Thank you

sinan created one year ago

Angular Developer

Hi stuchlajz, i have update the version of chart.js and make plugins work in abp. you can follow the pr https://github.com/abpframework/abp/pull/19314

By the way you have the change your plugin as follow;

helloWorldPlugin = [
{
  beforeInit: (chart, args, options) => {
    console.log('asd');
  },
  afterInit: (chart, args, options) => {
    console.log('after init');
  },
  afterRender: (chart, args, options) => {
    console.log('after render');
  },
  beforeDraw: chart => {
    console.log('before Draw');
  },
  afterDraw: (chart, args, options) => {
    console.log('afterDRaw');
  },
},
];

<abp-chart
    type="bar"
    [data]="data"
    width="400px"
    height="400px"
    [plugins]="helloWorldPlugin"
></abp-chart>

It will be available in version 8.1 and i have refundend your question credit.