How to pass an array to the Blade component?

I

Ilya Loopashko2021-05-14 07:57:04

Laravel

Ilya Loopashko, 2021-05-14 07:57:04

I have a component (code for plotting). How can I pass an array of data into it?

Component controller:

<?php

namespace App\View\Components;

use Illuminate\View\Component;

class Chart extends Component
{
    public $name = [];
    public $weight;

    public function __construct($name, $weight)
    {
        $this->name = $name;
        $this->weight = $weight;
    }

    public function render()
    {
        return view('components.chart');
    }
}

Component view:

<div class="container">
    <canvas id="myChart"></canvas>
</div>

<script>
    massPopChart = new Chart(myChart, {
    type: 'bar', // bar, horizontalBar, pie, line, doughnut, radar, polarArea
    data: {
        labels: [
           Здесь должны быть данные, через запятую, которые передаются из переменной $name. Например:
'a', 'b', 'c'
        ],
        datasets: [{
            label: 'Заполнение',
            data: [{{ $weight }}],
            //backgroundColor:'green',
            backgroundColor: [
                'rgba(255, 99, 132, 0.6)',
                'rgba(54, 162, 235, 0.6)',
                'rgba(255, 206, 86, 0.6)',
                'rgba(75, 192, 192, 0.6)',
                'rgba(153, 102, 255, 0.6)',
                'rgba(255, 159, 64, 0.6)',
                'rgba(255, 99, 132, 0.6)'
            ],
            borderWidth: 1,
            borderColor: '#777',
            hoverBorderWidth: 3,
            hoverBorderColor: '#000'
        }]
    },
    options: {
        title: {
            display: true,
            text: 'Заполнение бочек углем',
            fontSize: 25
        },
        legend: {
            display: true,
            position: 'right',
            labels: {
                fontColor: '#000'
            }
        },
        layout: {
            padding: {
                left: 50,
                right: 0,
                bottom: 0,
                top: 0
            }
        },
        tooltips: {
            enabled: true
        }
    }
});
</script>

View:

<!DOCTYPE html>
<html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Chart</title>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/Chart.js/2.6.0/Chart.min.js"></script>
    <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css">
    <link href="style.css" rel="stylesheet">
</head>

<body>
    <x-chart name="{{$arr = ['a', 'b', 'c']}}" weight="1000"/>
    <script src="https://code.jquery.com/jquery-3.5.1.min.js"></script>
    <script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/umd/popper.min.js"></script>
    <script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/js/bootstrap.min.js"></script>
    <script src="script.js"></script>
</body>
</html>

Reply

Answer the question

In order to leave comments, you need to log in

1 answer(s)

I

Ilya Loopashko, 2021-05-14
@deadloop

I implemented it like this:
I pass the component to the component view
@json($name)
in the view itself, I call the component like this:

<x-chart canvas="canvas1" :name="['a', 'b']" :weight="['617594', '181045']"/>