Creating pages

[agile-daljit]

Could you give me a quick example for creating a store page? or any other page which uses, say, charts plugin?

[baorv]

It's so easy.
This package provides a layout for your blade view.
So you can create new blade view named: store.blade.php

@extends('tabler::layouts.main')
@section('content')
<form method="POST" action="/profile">
    @csrf
    <div class="row">
          <div class="col-md-12">
               <div class="form-group">
                    <label class="form-label">Password</label>
                    <input type="password" class="form-control" name="example-password-input" placeholder="Password.." />
               </div>
         </div>
    </div>
</form>
@stop

[agile-daljit]

Thanks - How do I set the path if I were to use a plugin? E.g. if you look at first chart on charts page of Tabler - you will find the code below.

In my app, after installing this package, the c3 files is at this location public/admin/assets/plugins/charts-c3/js/c3.min.js

Do I need to update the path in the require block below to match the above to get it working?

                    <script>
                        require(['c3', 'jquery'], function(c3, $) {
                            $(document).ready(function(){
                                var chart = c3.generate({
......
.....

Full code here

@extends('tabler::layouts.main')
@section('content')

    <div class="my-3 my-md-5">
        <div class="container">
            <div class="page-header">
                <h1 class="page-title">
                    Charts
                </h1>
            </div>
            <div class="row row-cards">
                <div class="col-lg-6 col-xl-4">
                    <div class="card">
                        <div class="card-header">
                            <h3 class="card-title">Employment Growth</h3>
                        </div>
                        <div class="card-body">
                            <div id="chart-employment" style="height: 16rem"></div>
                        </div>
                    </div>
                    <script>
                        require(['assets/plugins/charts-c3/js/c3.min.js', 'jquery'], function(c3, $) {
                            $(document).ready(function(){
                                var chart = c3.generate({
                                    bindto: '#chart-employment', // id of chart wrapper
                                    data: {
                                        columns: [
                                            // each columns data
                                            ['data1', 2, 8, 6, 7, 14, 11],
                                            ['data2', 5, 15, 11, 15, 21, 25],
                                            ['data3', 17, 18, 21, 20, 30, 29]
                                        ],
                                        type: 'line', // default type of chart
                                        colors: {
                                            'data1': tabler.colors["orange"],
                                            'data2': tabler.colors["blue"],
                                            'data3': tabler.colors["green"]
                                        },
                                        names: {
                                            // name of each serie
                                            'data1': 'Development',
                                            'data2': 'Marketing',
                                            'data3': 'Sales'
                                        }
                                    },
                                    axis: {
                                        x: {
                                            type: 'category',
                                            // name of each category
                                            categories: ['2013', '2014', '2015', '2016', '2017', '2018']
                                        },
                                    },
                                    legend: {
                                        show: false, //hide legend
                                    },
                                    padding: {
                                        bottom: 0,
                                        top: 0
                                    },
                                });
                            });
                        });
                    </script>
                </div>
            </div>
        </div>
    </div>
@stop

[baorv]

I created two stacks

@stack('styles')
@stack('scripts')

You can read more from here.
So chart should be

@extends('tabler::layouts.main')
@push('scripts')
    <script src="{{ asset('admin/assets/plugins/charts-c3/plugin.js') }}"></script>
    <script>
			require(['c3', 'jquery'], function (c3, $) {
				$(document).ready(function () {
					var chart = c3.generate({
						bindto: '#chart-employment', // id of chart wrapper
						data: {
							columns: [
								// each columns data
								['data1', 2, 8, 6, 7, 14, 11],
								['data2', 5, 15, 11, 15, 21, 25],
								['data3', 17, 18, 21, 20, 30, 29]
							],
							type: 'line', // default type of chart
							colors: {
								'data1': tabler.colors["orange"],
								'data2': tabler.colors["blue"],
								'data3': tabler.colors["green"]
							},
							names: {
								// name of each serie
								'data1': 'Development',
								'data2': 'Marketing',
								'data3': 'Sales'
							}
						},
						axis: {
							x: {
								type: 'category',
								// name of each category
								categories: ['2013', '2014', '2015', '2016', '2017', '2018']
							},
						},
						legend: {
							show: false, //hide legend
						},
						padding: {
							bottom: 0,
							top: 0
						},
					});
				});
			});
    </script>
@endpush
@push('styles')
    <link href="{{ asset('admin/assets/plugins/charts-c3/plugin.css') }}" rel="stylesheet"/>
@endpush
@section('content')

    <div class="my-3 my-md-5">
        <div class="container">
            <div class="page-header">
                <h1 class="page-title">
                    Charts
                </h1>
            </div>
            <div class="row row-cards">
                <div class="col-lg-6 col-xl-4">
                    <div class="card">
                        <div class="card-header">
                            <h3 class="card-title">Employment Growth</h3>
                        </div>
                        <div class="card-body">
                            <div id="chart-employment" style="height: 16rem"></div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>
@stop

[agile-daljit]

Yes that makes sense! Thank you.

[baorv]

You are welcome!