{{-- Layout Reference --}}
@extends('Limitless::Help.Layout.Master')

@section('Limitless::Content')

    @php

        // sample backend data
        $categories = ['Jan', 'Feb', 'Mar', 'Apr', 'May', 'Jun', 'July', 'Aug', 'Sep', 'Oct', 'Nov', 'Dec'];
        $series = ['ONC', 'APR', 'SPR', 'PHX'];

        $seriesData = [];
        $multichartSeriesData = [];
        foreach ($series as $s) {
            $data['name'] = $multiData['name'] = $s;
            $dataArray = [];
            foreach ($categories as $c) {
               $dataArray[] = rand(1,100);
            }
            $data['data'] = $multiData['data'] = $dataArray;
            $data['index'] = 0; //rand(0,1); on what chart index to add.
            $multiData['index'] = rand(0,1);

            $seriesData[] = $data;
            $multichartSeriesData[] = $multiData;
        }

        // json string data should be valid else it will return null
        $rawData = '{
           "color":["#8dd3c7", "#ffffb3"],
           "textStyle":{
                "color":"#fff"
           },
           "xAxis":{
              "type":"category",
              "boundaryGap":false,
              "data":["Mon","Tue","Wed","Thu","Fri","Sat","Sun"]
           },
           "yAxis":{
              "type":"value"
           },
           "series":[
              {
                 "data":[820,932,901,934,1290,1330,1320],
                 "type":"line",
                 "areaStyle":{}
              }
           ]
        }';

    @endphp

    @Limitless::CardStart(['title' => "Basic Setup", 'icon' => 'icon-info22' ] )
        @Limitless::LineChart([
            'categories' => $categories,
            'series' => $seriesData,
        ])
    @Limitless::CardStop

    @Limitless::CardStart(['title' => "Area Setup", 'icon' => 'icon-info22' ] )
        @Limitless::LineChart([
            'is-area' => true,
            'stacked' => true,
            'categories' => $categories,
            'series' => $seriesData,
        ])
    @Limitless::CardStop

    @Limitless::CardStart(['title' => "Inverted Setup", 'icon' => 'icon-info22' ] )
        @Limitless::LineChart([
            'inverted' => true,
            'categories' => $categories,
            'series' => $seriesData,
        ])
    @Limitless::CardStop

    @Limitless::CardStart(['title' => "Multi Chart Setup", 'icon' => 'icon-info22' ] )
        @Limitless::LineChart([
            'titles' => ['Chart 1', 'Chart 2'],
            'charts' => 2,
            'categories' => $categories,
            'series' => $multichartSeriesData,
        ])
    @Limitless::CardStop

    @Limitless::CardStart(['title' => "Advanced Setup", 'icon' => 'icon-info22' ] )
        @Limitless::LineChart([
            'titles' => 'Chart 1',
            'show-values' => true,
            'y-axis-label-value-format' => '{value} users',
            'data-zoom' => true,
            'boundary-gap' => false,
            'point-values' => true,
            'animation-duration' => 2000,
            'colors' => ['#8dd3c7', '#ffffb3', '#bebada', '#fb8072', '#80b1d3', '#fdb462', '#b3de69', '#fccde5', '#d9d9d9', '#bc80bd', '#ccebc5', '#ffed6f'],
            'categories' => $categories,
            'series' => $seriesData,
        ])
    @Limitless::CardStop

    @Limitless::CardStart(['title' => "Raw Setup", 'icon' => 'icon-info22' ] )
        @Limitless::LineChart([
            'raw' => $rawData
        ])
    @Limitless::CardStop

@stop
