Laravel 8 ConsoleTvs 7 - 通过 advanceDataset 方法的额外参数应用数据集配置

Question

我使用内置后端方法将数据发送到 ConsoleTvs 7 Chartisan 图表的前端advancedDataset。作为第三个参数，我决定以数组数据类型发送额外的数据集配置：

// 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;
}

此额外值不会应用于数据集配置。事实上，如果我删除该方法，图表将呈现其默认条形图ChartisanHooks.datasets(...[ configurations ]...)。

如何将额外的数据集配置应用到前端，而不必进行双重工作？是否有我缺少的设置或者如何访问该extra参数？

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

Answer 1

最后我在不那么晦涩难懂的Chartisan 文档中找到了答案。前端实例的方法
包含3个钩子参数，即：custom()const hooks = new ChartisanHooks()

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
})

恰当命名的server键包含datasets一个由一组对象组成的键，其中一个键被命名为extraie

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

万岁！

因此，要访问这个extra键：值，我将它们传递给前端hooks.custom()方法data.datasets[0]对象或创建新的，例如

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
            }
          }
        }
      });
    }),
});

当然，这是非常粗糙的，需要检查客户端是否支持其中一些方法。此外server.datasets[i].extra !== null，object[key] !== undefined还需要进行诸如此类的检查。

这当然使得后端更加动态。问题是，ConsoleTvs 包作为后端安全的 Laravel 包是否已经死亡？它是否仍然受到开发人员的支持。