Laravel 8 ConsoleTvs 7 - Apply dataset configuration through extra argument of advancedDataset method

Question

I am sending my data to the front-end of ConsoleTvs 7 Chartisan chart using the built in back-end advancedDataset method. As the third parameter I decided to send extra dataset configurations in array data type:

// Example of extra info data that forms part of chartData return
$data['extra'] = ['type' => 'line', 'fill' => false, 'borderColor' => '#FF6F6F', 'backgroundColor' => '#FF6F6F', 'hidden' => true,
                                'datalabels' => ['display' => true], 'borderDash' => [5, 5]];

//--> within handler method
public function handler(Request $request): Chartisan
{
    $data = $this->chartData($request);  // Trait method chartData return

    $chart = Chartisan::build()
        ->labels($data["labels"]);
    
    foreach ($data['dataset'] as $key => $values) {
        $chart->advancedDataset($values['legend'], $values['data'], $values['extra']);
     //                                                                    ^
     //-----------------------------  -------------------------------------| extra arg
    }

    return $chart;
}

This extra values are not applied to the datasets configuration. In fact the chart renders its default bar chart if I remove the ChartisanHooks.datasets(...[ configurations ]...) method.

How can I apply the extra dataset configs to the front-end without having to resort to double work? Is there a setting I am missing or how do I access the extra argument?

Laravel 8
Chart.js v2.9.4
chartjs-plugin-datalabels v1.0.0

Hmerman6006 · Accepted Answer · 2021-10-29T10:53:00.967

At last I found the answer in the not so obscure Chartisan documentation.
The custom() method of the front-end const hooks = new ChartisanHooks() instance contains 3 hook parameters namely :

hooks.custom(({ data, merge, server }) => {
  // data ->   Contains the current chart configuration
  //           data that will be passed to the chart instance.
  // merge ->  Contains a function that can be called to merge
  //           two javascript objects and returns its merge.
  // server -> Contains the server information in case you need
  //           to acces the raw information provided by the server.
  //           This is mostly used to access the `extra` field.

  // ...

  // The function must always return the new chart configuration.
  return data
})

The aptly named server key contains a datasets key that consists of an array of objects where one key is named extra i.e.

server.datasets[0].extra // all array key : values passed from server

Hoorah!

So to access this extra key : values I pass them to the front-end hooks.custom() method data.datasets[0] object or create new ones e.g.

const chart = new Chartisan({
  el: '#test_chart',
  hooks: new ChartisanHooks()
    .colors()
    .custom(function({ data, merge, server }) { // server param

     //---> loop through extra from server
     for (let i = 0; i < server.datasets.length; i++) {
         const extras = server.datasets[i].extra; // extra object
         for (const [key, value] of Object.entries(extras)) { // loop through extras
             data.data.datasets[i][key] = value; // add extras to data
         }
                    
     }
      return merge(data, { // merge data
        options: {
          layout: {
            padding: {
              left: 0,
              right: 0,
              top: 50,
              bottom: 0
            },
          },
          aspectRatio: 1,
          maintainAspectRatio: false,
          responsive: true,
          legend: {
            display: true,
            position: 'top',
            labels: {
              usePointStyle: true,
              fontSize: 12,
            },
          },
          elements: {
            point: {
              pointStyle: 'circle',
            }
          },
          scales: {
            xAxes: [{
              maxBarThickness: 120,
              scaleLabel: {
                display: true,
                labelString: "xAxes_label"
              },
              gridLines: {
                display: false
              },
              ticks: {
                fontSize: 10,
                maxRotation: 80,
                minRotation: 80,
                padding: 2
              },
            }],
            yAxes: [{
              scaleLabel: {
                display: true,
                labelString: "yAxes_label"
              },
              gridLines: {
                display: false,
                drawBorder: false
              },
              ticks: {
                display: true,
                fontSize: 10,
                suggestedMin: 0
              },
            }],
          },
          plugins: {
            datalabels: {
              color: '#ff0a6c',
              labels: {
                title: {
                  font: {
                    weight: 'bold',
                    size: 11,
                  }
                },
                value: {
                  color: 'green'
                }
              },
              formatter: function(value, context) {
                return (value != '' && value !== undefined) ? Math.round(value * 100) / 100 : value;
              },
              anchor: 'end',
              align: 'start',
              display: 'auto',
              clamp: false
            }
          }
        }
      });
    }),
});

Of course this is very rough and needs checking if client side supports some of these methods. Also server.datasets[i].extra !== null, object[key] !== undefined etcetera checks is also needed.

This of course makes this more dynamic from back-end. The question is, is ConsoleTvs package dead as a back-end safe Laravel package and is it still supported by its developer.

Laravel 8 ConsoleTvs 7 - Apply dataset configuration through extra argument of advancedDataset method

1 Answers1