Commit 9c004a0b authored by Kevin Yumang's avatar Kevin Yumang

SERV-2286 - barchart element WIP

parent 1b96c614
This diff is collapsed.
<div class="chart-container">
<div class="chart has-fixed-height LimitlessLineChart"
charts="{{ $charts }}"
titles="{{ json_encode($titles) }}"
colors="{{ json_encode($colors) }}"
point-values="{{ $pointValues }}"
boundary-gap="{{ $boundaryGap }}"
inverted="{{ $inverted }}"
data-zoom="{{ $dataZoom }}"
stacked="{{ $stacked }}"
is-area="{{ $isArea }}"
animation-duration="{{ $animationDuration }}"
@if($yAxisLabelValueFormat != null) y-axis-label-value-format="{{ $yAxisLabelValueFormat }}" @endif
@if($markLine != null) mark-line="{{ $markLine }}" @endif
categories="{{ json_encode($categories) }}"
series="{{ json_encode($series) }}"
raw="{{ $raw }}"
>
</div>
</div>
\ No newline at end of file
<?php
/*
|------------------------------------------------------------------------------------------------
| Information
|------------------------------------------------------------------------------------------------
|
| This file is beautified by the command "sidekick:CodebeautifierCommand" of the ceetrox
| sidekick package.
|
| Author: Kevin Almond Roe Yumang <kevin.yumang@itmax.email>
| Update: 2022-07-21 01:27:31
|
*/
namespace Ceetrox\Sidekick\Views\Limitless\Barchart;
/*
|------------------------------------------------------------------------------------------------
| Dependencies
|------------------------------------------------------------------------------------------------
*/
use View;
/*
|------------------------------------------------------------------------------------------------
| Class "Config"
|------------------------------------------------------------------------------------------------
*/
class Config
{
public $methodAllocation = [
'Limitless::BarChart' => 'barChart'
];
public $assetAllocation;
/*
|--------------------------------------------------------------------------------------------
| Method "__construct"
|--------------------------------------------------------------------------------------------
*/
public function __construct()
{
$this->assetAllocation = [
'Limitless::LineChart' => [
'Attachments/barchart.init.js',
secure_url('/ceetrox/sidekick/resource/public/Webdesigns/design-limitless/Template/global_assets/js/plugins/visualization/echarts/echarts.min.js'),
]
];
}
/*
|--------------------------------------------------------------------------------------------
| Method "barChart"
|--------------------------------------------------------------------------------------------
*/
public function barChart($parameters)
{
return View('Limitless::Barchart.barChart')
->withCharts($parameters['charts'] ?? 1)
->withTitles($parameters['titles'] ?? null)
->withColors($parameters['colors'] ?? null)
->withPointValues($parameters['point-values'] ?? false)
->withBoundaryGap($parameters['boundary-gap'] ?? true)
->withInverted($parameters['inverted'] ?? false)
->withDataZoom($parameters['data-zoom'] ?? false)
->withStacked($parameters['stacked'] ?? false)
->withIsArea($parameters['is-area'] ?? false)
->withAnimationDuration($parameters['animation-duration'] ?? 750)
->withYAxisLabelValueFormat($parameters['y-axis-label-value-format'] ?? null)
->withMarkLine($parameters['mark-line'] ?? null)
->withCategories($parameters['categories'] ?? null)
->withSeries($parameters['series'] ?? null)
->withRaw($parameters['raw'] ?? null);
}
}
{{-- 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); on what chart index to add.
$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' => "Basic Setup", 'icon' => 'icon-info22' ] )
@Limitless::LineChart([
'categories' => $categories,
'series' => $seriesData,
])
@Limitless::CardStop
@Limitless::CardStart(['title' => "Chart 2 (raw)", 'icon' => 'icon-info22' ] )
@Limitless::LineChart([
'raw' => $rawData
])
@Limitless::CardStop
{{-- @Limitless::CardStart(['title' => "Chart 3", 'icon' => 'icon-info22' ] )--}}
{{-- @Limitless::LineChartStart--}}
{{-- @Limitless::LineChartStop--}}
{{-- @Limitless::CardStop--}}
@stop
......@@ -9,8 +9,8 @@
| 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
| Author: Kevin Almond Roe Yumang <kevin.yumang@itmax.email>
| Update: 2022-07-21 01:24:33
|
*/
namespace Ceetrox\Sidekick\Views\Limitless\Linechart;
......@@ -29,22 +29,29 @@
| Class "Config"
|------------------------------------------------------------------------------------------------
*/
class Config
class Config
{
public $methodAllocation = [
'Limitless::LineChart' => 'lineChart'
'Limitless::LineChart' => 'lineChart'
];
public $assetAllocation;
/*
|--------------------------------------------------------------------------------------------
| Method "__construct"
|--------------------------------------------------------------------------------------------
*/
public function __construct()
{
$this->assetAllocation = [
'Limitless::LineChart' => [
'Attachments/linechart.init.js',
secure_url('/ceetrox/sidekick/resource/public/Webdesigns/design-limitless/Template/global_assets/js/plugins/visualization/echarts/echarts.min.js'),
]
'Limitless::LineChart' => [
'Attachments/linechart.init.js',
secure_url('/ceetrox/sidekick/resource/public/Webdesigns/design-limitless/Template/global_assets/js/plugins/visualization/echarts/echarts.min.js'),
]
];
}
......@@ -56,21 +63,21 @@
public function lineChart($parameters)
{
return View('Limitless::Linechart.LineChart')
->withCharts($parameters['charts'] ?? 1)
->withTitles($parameters['titles'] ?? null)
->withColors($parameters['colors'] ?? null)
->withPointValues($parameters['point-values'] ?? false)
->withBoundaryGap($parameters['boundary-gap'] ?? true)
->withInverted($parameters['inverted'] ?? false)
->withDataZoom($parameters['data-zoom'] ?? false)
->withStacked($parameters['stacked'] ?? false)
->withIsArea($parameters['is-area'] ?? false)
->withAnimationDuration($parameters['animation-duration'] ?? 750)
->withYAxisLabelValueFormat($parameters['y-axis-label-value-format'] ?? null)
->withMarkLine($parameters['mark-line'] ?? null)
->withCategories($parameters['categories'] ?? null)
->withSeries($parameters['series'] ?? null)
->withRaw($parameters['raw'] ?? null);
->withCharts($parameters['charts'] ?? 1)
->withTitles($parameters['titles'] ?? null)
->withColors($parameters['colors'] ?? null)
->withPointValues($parameters['point-values'] ?? false)
->withBoundaryGap($parameters['boundary-gap'] ?? true)
->withInverted($parameters['inverted'] ?? false)
->withDataZoom($parameters['data-zoom'] ?? false)
->withStacked($parameters['stacked'] ?? false)
->withIsArea($parameters['is-area'] ?? false)
->withAnimationDuration($parameters['animation-duration'] ?? 750)
->withYAxisLabelValueFormat($parameters['y-axis-label-value-format'] ?? null)
->withMarkLine($parameters['mark-line'] ?? null)
->withCategories($parameters['categories'] ?? null)
->withSeries($parameters['series'] ?? null)
->withRaw($parameters['raw'] ?? null);
}
......
Markdown is supported
0% or
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment