SERV-2286 - line chart element. WIP

src/Views/Limitless/Help/Layout/Master.blade.php

@@ -41,6 +41,10 @@
             @Limitless::SideNavMenuItem(['url' => '?page=Modal', 'target' => '_self', 'icon' => 'icon-stack', 'title' => 'Modal'])
             @Limitless::SideNavMenuItem(['url' => '?page=Element.RandomSelect', 'target' => '_self', 'icon' => 'icon-shuffle', 'title' => 'Random Select'])
 
+            @Limitless::SideNavMenuSectionTitle(['title' => 'Charts'])
+            @Limitless::SideNavMenuItem(['url' => '?page=Linechart', 'target' => '_self', 'icon' => 'icon-statistics', 'title' => 'Line chart'])
+            @Limitless::SideNavMenuItem(['url' => '?page=Areachart', 'target' => '_self', 'icon' => 'icon-chart', 'title' => 'Area chart'])
+
             @Limitless::SideNavMenuSectionTitle(['title' => 'Navigations'])
             @Limitless::SideNavMenuItem(['url' => '?page=Sidenav', 'target' => '_self', 'icon' => 'icon-sort', 'title' => 'Side Navigation'])
             @Limitless::SideNavMenuItem(['url' => '?page=Topnav', 'target' => '_self', 'icon' => 'icon-transmission', 'title' => 'Top Navigation'])

src/Views/Limitless/Linechart/Attachments/linechart.init.js

+function init_line_chart() {
+
+    if (typeof echarts == 'undefined') {
+        console.warn('Warning - echarts.min.js is not loaded.');
+        return;
+    }
+
+    // Define element
+    let lineChartElement = document.getElementById('line_chart');
+
+    if(lineChartElement) {
+
+        let lineChart = echarts.init(lineChartElement);
+
+        // variables (this will be set by user)
+        let title = 'Usage';
+        let color = ['#5470c6', '#91cc75', '#fac858', '#ee6666', '#73c0de', '#3ba272', '#fc8452', '#9a60b4', '#ea7ccc', '#a1887f'];
+        let animationDuration = 750;
+        let legendData = ['ONC', 'APR', 'SPR', 'PHX', 'SIG', 'BRG', 'MNT', 'SDK', 'OCT'];
+        let xAxisData = ['Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat', 'Sun'];
+        let yAxisLabelValueFormat = '{value}'; // ex '{value} users'  - https://echarts.apache.org/en/option.html#yAxis.axisLabel.formatter
+        let showPointValues = false;
+        let inverted = false;
+        let showDataZoom = true;
+        let stacked = false;
+        let markLine = 'average'; // min | max | average
+        let series = [];
+
+
+        legendData.forEach(function (val, idx,arr) {
+            series.push(setLineChartSeries(val, [
+                    Math.floor(Math.random() * 100),
+                    Math.floor(Math.random() * 100),
+                    Math.floor(Math.random() * 100),
+                    Math.floor(Math.random() * 100),
+                    Math.floor(Math.random() * 100),
+                    Math.floor(Math.random() * 100),
+                    Math.floor(Math.random() * 100),
+            ], showPointValues, markLine, stacked));
+        });
+
+
+
+        // Options
+        lineChart.setOption({
+
+            // Chart title
+            title: setTitle(title),
+
+            // Define colors
+            color: color,
+
+            // Global text styles
+            textStyle: setGlobalTextStyle(),
+
+            // Chart animation duration
+            animationDuration: animationDuration,
+
+            // Setup grid
+            grid: setGrid(showDataZoom),
+
+            // Add legend
+            legend: setLegend(legendData),
+
+            // Add tooltip
+            tooltip: setTooltip(),
+
+            // Horizontal axis
+            xAxis: inverted ? setYAxis(yAxisLabelValueFormat) : setXAxis(xAxisData),
+
+            // Vertical axis
+            yAxis: inverted ? setXAxis(xAxisData) : setYAxis(yAxisLabelValueFormat),
+
+            // Axis pointer
+            axisPointer: setAxisPointer(),
+
+            // Zoom control
+            dataZoom: setDataZoom(showDataZoom),
+
+            // Add series
+            series: series
+        });
+
+        setResizeEvent(lineChartElement, lineChart);
+    }
+}
+
+function setLineChartSeries(name, data = [], showPointValues  = false, markLineDataType = null, stack = false) {
+
+    return {
+        name: name,
+        type: 'line',
+        data: data,
+        stack: stack,
+        smooth: true,
+        symbol: 'circle',
+        symbolSize: 7,
+        label: {
+            normal: {
+                show: showPointValues
+            }
+        },
+        markLine: {
+            data: [{
+                type: markLineDataType,
+                name: markLineDataType !== null ? (markLineDataType[0].toUpperCase() + markLineDataType.substring(1)) : null,
+            }]
+        },
+        itemStyle: {
+            normal: {
+                borderWidth: 2
+            }
+        }
+    }
+}
+
+function setXAxis(xAxisData) {
+    return [{
+        type: 'category',
+        boundaryGap: true,
+        data: xAxisData,
+        axisLabel: {
+            color: '#fff'
+        },
+        axisLine: {
+            lineStyle: {
+                color: 'rgba(255,255,255,0.25)'
+            }
+        },
+        splitLine: {
+            lineStyle: {
+                color: 'rgba(255,255,255,0.1)'
+            }
+        }
+    }]
+}
+
+function setYAxis(yAxisLabelValueFormat) {
+    return [{
+        type: 'value',
+        axisLabel: {
+            formatter: yAxisLabelValueFormat,
+            color: '#fff'
+        },
+        axisLine: {
+            lineStyle: {
+                color: 'rgba(255,255,255,0.25)'
+            }
+        },
+        splitLine: {
+            lineStyle: {
+                color: 'rgba(255,255,255,0.1)'
+            }
+        },
+        splitArea: {
+            show: true,
+            areaStyle: {
+                color: ['rgba(255,255,255,0.01)', 'rgba(0,0,0,0.01)']
+            }
+        }
+    }]
+}
+
+function setLegend(legendData) {
+    return {
+        data: legendData,
+        itemHeight: 8,
+        itemGap: 20,
+        textStyle: {
+            color: '#fff'
+        }
+    }
+}
+
+function setTitle(title) {
+    return {
+        text: title,
+        textStyle: {
+            color: '#fff'
+        }
+    }
+}
+
+function setDataZoom(show) {
+    return [
+        {
+            type: 'inside',
+            start: 30,
+            end: 70
+        },
+        {
+            show: show,
+            type: 'slider',
+            start: 30,
+            end: 70,
+            height: 40,
+            bottom: 0,
+            borderColor: 'rgba(255,255,255,0.1)',
+            fillerColor: 'rgba(0,0,0,0.1)',
+            handleStyle: {
+                color: '#585f63'
+            },
+            textStyle: {
+                color: '#fff'
+            },
+            handleStyle: {
+                color: '#8893a9'
+            },
+            dataBackground: {
+                areaStyle: {
+                    color: 'rgba(0,0,0,0.5)'
+                }
+            }
+        }
+    ]
+}
+
+function setTooltip() {
+    return {
+        trigger: 'axis',
+        backgroundColor: 'rgba(255,255,255,0.9)',
+        padding: [10, 15],
+        textStyle: {
+            color: '#222',
+            fontSize: 13,
+            fontFamily: 'Roboto, sans-serif'
+        }
+    }
+}
+
+function setGrid(showDataZoom) {
+    return {
+        left: 0,
+        right: 40,
+        top: 50,
+        bottom: showDataZoom ? 60 : 0,
+        containLabel: true
+    };
+}
+
+function setGlobalTextStyle() {
+    return {
+        fontFamily: 'Roboto, Arial, Verdana, sans-serif',
+        fontSize: 13
+    };
+}
+
+function setAxisPointer() {
+    return [{
+        lineStyle: {
+            color: 'rgba(255,255,255,0.25)'
+        }
+    }];
+}
+
+function setResizeEvent(lineChartElement, lineChart) {
+    // Resize function
+    let triggerChartResize = function() {
+        lineChartElement && lineChart.resize();
+    };
+
+    // On sidebar width change
+    let sidebarToggle = document.querySelector('.sidebar-control');
+    sidebarToggle && sidebarToggle.addEventListener('click', triggerChartResize);
+
+    // On window resize
+    let resizeCharts;
+    window.addEventListener('resize', function() {
+        clearTimeout(resizeCharts);
+        resizeCharts = setTimeout(function () {
+            triggerChartResize();
+        }, 200);
+    });
+}
+
+$(document).ready(init_line_chart);
\ No newline at end of file

src/Views/Limitless/Linechart/Config.php

+<?php
+
+
+    /*
+    |------------------------------------------------------------------------------------------------
+    | Information
+    |------------------------------------------------------------------------------------------------
+    |
+    | This file is beautified by the command "sidekick:CodebeautifierCommand" of the ceetrox
+    | sidekick package.
+    |
+    | Author: Marco Schmiedel <marco.schmiedel@itmax.email>
+    | Update: 2022-06-15 10:07:09
+    |
+    */
+    namespace Ceetrox\Sidekick\Views\Limitless\Linechart;
+
+
+    /*
+    |------------------------------------------------------------------------------------------------
+    | Dependencies
+    |------------------------------------------------------------------------------------------------
+    */
+    use View;
+
+
+    /*
+    |------------------------------------------------------------------------------------------------
+    | Class "Config"
+    |------------------------------------------------------------------------------------------------
+    */
+    class Config
+    {
+        public $methodAllocation = [
+            'Limitless::LineChartStart' => 'lineChartStart',
+            'Limitless::LineChartStop' => 'LineChartStop',
+        ];
+
+        public $assetAllocation;
+
+        public function __construct()
+        {
+            $this->assetAllocation = [
+                'Limitless::LineChartStart' => [
+                    'Attachments/linechart.init.js',
+                    secure_url('/ceetrox/sidekick/resource/public/Webdesigns/design-limitless/Template/global_assets/js/plugins/visualization/echarts/echarts.min.js'),
+                ]
+            ];
+        }
+
+
+        /*
+        |--------------------------------------------------------------------------------------------
+        | Method "lineChartStart"
+        |--------------------------------------------------------------------------------------------
+        */
+        public function lineChartStart($parameters)
+        {
+            return View('Limitless::Linechart.Start');
+
+        }
+
+
+        /*
+        |--------------------------------------------------------------------------------------------
+        | Method "LineChartStop"
+        |--------------------------------------------------------------------------------------------
+        */
+        public function LineChartStop($parameters)
+        {
+            return View('Limitless::Linechart.Stop');
+
+        }
+
+    }
+
+
+

src/Views/Limitless/Linechart/Documentation/Index.blade.php

+{{-- Layout Reference --}}
+@extends('Limitless::Help.Layout.Master')
+
+@section('Limitless::Content')
+
+    @Limitless::CardStart(['title' => "Description", 'icon' => 'icon-info22' ] )
+        @Limitless::LineChartStart
+    @Limitless::CardStop
+
+@stop

src/Views/Limitless/Linechart/Start.blade.php

+<div class="chart-container">
+    <div class="chart has-fixed-height" id="line_chart"></div>
+</div>
\ No newline at end of file