{{-- 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', 'SIG', 'BRG', 'MNT', 'SDK', 'OCT'];

        $seriesData = [];
        foreach ($series as $s) {
            $data['name'] = $s;
            $dataArray = [];
            foreach ($categories as $c) {
               $dataArray[] =  rand(1,100);
            }
            $data['data'] = $dataArray;
            $data['index'] = 0; //rand(0,1);
            $seriesData[] = $data;
        }

        // json string data should be valid else it will return null
        $rawData = '{
           "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' => "Description", 'icon' => 'icon-info22' ] )
        @Limitless::Chart([
            'titles' => 'Sample 1',
            'charts' => 1,
            'colors' => ['#5470c6', '#91cc75', '#fac858', '#ee6666', '#73c0de', '#3ba272', '#fc8452', '#9a60b4', '#a1887f', '#ffb980', '#2ec7c9','#b6a2de','#5ab1ef', '#d87a80', '#ea7ccc'],
            'point-values' => true,
            'boundary-gap' => false,
            'inverted' => false,
            'data-zoom' => true,
            'stacked' => false,
            'is-area' => true,
            'animation-duration' => 500,
            'y-axis-label-value-format' => '{value} users',
            'mark-line' => 'average',
            'categories' => $categories,
            'series' => $seriesData,
        ])
    @Limitless::CardStop

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

{{--    @Limitless::CardStart(['title' => "Chart 3", 'icon' => 'icon-info22' ] )--}}
{{--        @Limitless::LineChartStart--}}
{{--        @Limitless::LineChartStop--}}
{{--    @Limitless::CardStop--}}

@stop
