react-chartjs-2 icon indicating copy to clipboard operation
react-chartjs-2 copied to clipboard

In the chart mix how to pass API request values constant into the afterDraw plugin

Open adameverson opened this issue 4 years ago • 0 comments

The problem is getting the value read by the request made to the API, but I've already used the value in options normally, only when it arrives at the plugin it takes a value as if I haven't received anything from the API, as if it weren't a sequential program, apparently it is running the constant plugin even before requesting the API or better without the API request code part, because the API request occurs periodically

    const options = {
        responsive: true,
        labels: ['Janeiro(' + acumuladoJaneiro + ')(' + this.state.janeiroF + ')', 'Fevereiro(' + acumuladoFevereiro + ')(' + acumuladoFevereiroF + ')', 'Marco(' + acumuladoMarco + ')(' + acumuladoMarcoF + ')', 'Abril(' + acumuladoAbril + ')(' + acumuladoAbrilF + ')', 'Maio(' + acumuladoMaio + ')(' + acumuladoMaioF + ')', 'Junho(' + acumuladoJunho + ')(' + acumuladoJunhoF + ')', 'Jullho(' + acumuladoJulho + ')(' + acumuladoJulhoF + ')', 'Agosto(' + acumuladoAgosto + ')(' + acumuladoAgostoF + ')', 'Setembro(' + acumuladoSetembro + ')(' + acumuladoSetembroF + ')', 'Outubro(' + acumuladoOutubro + ')(' + acumuladoOutubroF + ')', 'Novembro(' + acumuladoNovembro + ')(' + acumuladoNovembroF + ')', 'Dezembro(' + acumuladoDezembro + ')(' + acumuladoDezembroF + ')'],
        tooltips: {
            mode: 'label'
        },
        elements: {
            line: {
                fill: false
            }
        },
        scales: {
            xAxes: [
                {
                    display: true,
                    gridLines: {
                        display: false
                    },

                    labels: ['Janeiro(' + acumuladoJaneiro + ')(' + this.state.janeiroF + ')', 'Fevereiro(' + acumuladoFevereiro + ')(' + acumuladoFevereiroF + ')', 'Marco(' + acumuladoMarco + ')(' + acumuladoMarcoF + ')', 'Abril(' + acumuladoAbril + ')(' + acumuladoAbrilF + ')', 'Maio(' + acumuladoMaio + ')(' + acumuladoMaioF + ')', 'Junho(' + acumuladoJunho + ')(' + acumuladoJunhoF + ')', 'Jullho(' + acumuladoJulho + ')(' + acumuladoJulhoF + ')', 'Agosto(' + acumuladoAgosto + ')(' + acumuladoAgostoF + ')', 'Setembro(' + acumuladoSetembro + ')(' + acumuladoSetembroF + ')', 'Outubro(' + acumuladoOutubro + ')(' + acumuladoOutubroF + ')', 'Novembro(' + acumuladoNovembro + ')(' + acumuladoNovembroF + ')', 'Dezembro(' + acumuladoDezembro + ')(' + acumuladoDezembroF + ')']
                }
            ],
            yAxes: [
                {
                    type: 'linear',
                    display: true,
                    position: 'left',
                    id: 'y-axis-1',
                    gridLines: {
                        display: false
                    },
                    labels: {
                        show: true
                    }
                },
                {
                    type: 'linear',
                    display: true,
                    position: 'right',
                    id: 'y-axis-2',
                    gridLines: {
                        display: false
                    },
                    labels: {
                        show: true
                    }
                }
            ]
        }
    };

    const exempleConst = Math.round(this.state.fevereiro)
    const exempleConst2 = exempleConst + 2
    const percentagemJaneiro = Math.round(((this.state.janeiroF + (acumuladoJaneiro ? 0 : 1)) / (acumuladoJaneiro ? acumuladoJaneiro : 1)) * 100)
    const percentagemMarco = Math.round(((acumuladoMarcoF + (acumuladoMarco ? 0 : 1)) / (acumuladoMarco ? acumuladoMarco : 1)) * 100)

    const plugins = [
        {
            afterDraw: (chartInstance, easing) => {
                const { ctx } = chartInstance.chart;
                ctx.fillText(exempleConst2, 300, 500);
                ctx.fillText(percentagemJaneiro - 100 + "%", 75, 500);
                ctx.fillText(acumuladoMarco + "%", 500, 100);
            }
        }
    ];

adameverson avatar Aug 06 '20 14:08 adameverson