{{-- 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"
           },
           "title":{
              "text":"Projects",
              "subtext":"itmax projects",
              "textStyle": {
                "color": "#fff"
              }
           },
           "tooltip":{
              "trigger":"axis",
              "axisPointer":{
                 "type":"cross"
              }
           },
           "xAxis":{
              "type":"category",
              "boundaryGap":false,
              "data":["Mon","Tue","Wed","Thu","Fri","Sat","Sun"]
           },
           "yAxis":{
              "type":"value",
              "axisLabel":{
                 "formatter":"{value} users"
              },
              "axisPointer":{
                 "snap":true
              }
           },
           "visualMap":{
              "show":false,
              "dimension":0,
              "pieces":[
                 {
                    "lte":6,
                    "color":"green"
                 },
                 {
                    "gt":6,
                    "lte":8,
                    "color":"red"
                 },
                 {
                    "gt":8,
                    "lte":14,
                    "color":"green"
                 },
                 {
                    "gt":14,
                    "lte":17,
                    "color":"red"
                 },
                 {
                    "gt":17,
                    "color":"green"
                 }
              ]
           },
           "series":[
              {
                 "name":"Usage",
                 "type":"line",
                 "smooth":true,
                 "data":[300,280,250,260,270,300,550,500,400,390,380,390,400,500,600,750,800,700,600,400],
                 "markArea":{
                    "itemStyle":{
                       "color":"rgba(255, 173, 177, 0.4)"
                    },
                    "data":[
                       [
                          {
                             "name":"Peak",
                             "xAxis":"Mon"
                          },
                          {
                             "xAxis":"Tue"
                          }
                       ],
                       [
                          {
                             "name":"Peak",
                             "xAxis":"Thu"
                          },
                          {
                             "xAxis":"Fri"
                          }
                       ]
                    ]
                 }
              }
           ]
        }';

    @endphp

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

    @Limitless::CardStart(['title' => "Stacked 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
