<div class="row justify-content-center">
    <div class="col-md-8">
        <div class="card">
            <div class="card-header">Dashboard</div>
            <div class="card-body">
                <p>Welcome to your dashboard.</p>
            </div>
        </div>
    </div>    
    <div class="container">
        <div class="row row-cols-1 row-cols-sm-2 row-cols-md-3">
            @foreach($charts as $chart)
            @if($chart->chart_type=='area')
            <div class="col">
                <livewire:charts.area-chart :chartData="$chart"/>
            </div>
            @endif
            @if($chart->chart_type=='column')
            <div class="col">
                <livewire:charts.column-chart :chartData="$chart"/>
            </div>
            @endif
            @if($chart->chart_type=='line')
            <div class="col">
                <livewire:charts.line-chart :chartData="$chart" />
            </div>
            @endif
            @if($chart->chart_type=='pie')
            <div class="col">
                <livewire:charts.pie-chart :chartData="$chart" />
            </div>
            @endif
            @if($chart->chart_type=='scatter')
            <div class="col">
                <livewire:charts.scatter-chart :chartData="$chart" />
            </div>
            @endif
            @endforeach
        </div>
    </div>
</div>