Skip to content

S
sidekick
Commit 3a926a8f authored by Kevin Yumang's avatar Kevin Yumang
Browse files
Options

SERV-2286 - linked backend/frontend data to js file. (parameters) WIP

parent ef8a4d9e
Hide whitespace changes
Inline Side-by-side
Showing with 205 additions and 108 deletions
src/Views/Limitless/Linechart/Attachments/linechart.init.js
View file @ 3a926a8f
......@@ -22,13 +22,16 @@ function init_chart(chartId) {
if (lineChartElement) {
let titles = ['A', 'B', 'C'];
let multichart = (titles && titles.length > 1);
let numberOfCharts = titles ? titles.length : 1;
let elementObject = $(lineChartElement);
let numberOfCharts = elementObject.attr('charts') ?? 1;
let multichart = (numberOfCharts > 1);
console.log(numberOfCharts);
console.log(multichart);
// adjust container height before initialising the chart.
if (multichart) {
let height = (titles.length * 240); // (chart height = 160 | charts spacing = 80)
let height = (numberOfCharts * 240); // (chart height = 160 | charts spacing = 80)
lineChartElement.style.height = height + 'px';
console.log('adjusted container height', height + 'px');
}
......@@ -43,7 +46,7 @@ function init_chart(chartId) {
fontSize: 15
});
set_data(titles, multichart, numberOfCharts, function(options) {
set_data(elementObject, multichart, numberOfCharts, function(options) {
lineChart.hideLoading();
lineChart.setOption(options);
setResizeEvent(lineChartElement, lineChart);
......@@ -51,47 +54,57 @@ function init_chart(chartId) {
}
}
function set_data(titles, multichart, numberOfCharts, callback) {
function set_data(elementObject, multichart, numberOfCharts, callback) {
setTimeout(function() {
const defaultColors = ['#5470c6', '#91cc75', '#fac858', '#ee6666', '#73c0de', '#3ba272', '#fc8452', '#9a60b4', '#ea7ccc', '#a1887f'];
// variables (this will be set by user)
let color = ['#5470c6', '#91cc75', '#fac858', '#ee6666', '#73c0de', '#3ba272', '#fc8452', '#9a60b4', '#ea7ccc', '#a1887f'];
let animationDuration = 750;
let seriesNames = ['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 boundaryGap = true;
let inverted = false;
let showDataZoom = true;
let stacked = false;
let markLine = 'average'; // min | max | average
let series = [];
seriesNames.forEach(function (val, idx, arr) {
let chartindex = Math.floor(Math.random() * titles.length);
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, chartindex));
});
let titles = JSON.parse(elementObject.attr('titles')) ?? [];
let colors = JSON.parse(elementObject.attr('colors')) ?? defaultColors;
let showPointValues = (elementObject.attr('point-values') == 'true' || elementObject.attr('point-values') == true); // default false
let boundaryGap = (elementObject.attr('boundary-gap') == 'true' || elementObject.attr('boundary-gap') == true); // default true
let inverted = (elementObject.attr('inverted') == 'true' || elementObject.attr('inverted') == true); // default false
let showDataZoom = (elementObject.attr('data-zoom') == 'true' || elementObject.attr('data-zoom') == true); // default false
let stacked = (elementObject.attr('stacked') == 'true' || elementObject.attr('stacked') == true); // default false
let animationDuration = elementObject.attr('animation-duration') ?? 750;
// ex '{value} users' - https://echarts.apache.org/en/option.html#yAxis.axisLabel.formatter
let yAxisLabelValueFormat = elementObject.attr('y-axis-label-value-format') ?? '{value}';
// min | max | average
let markLine = elementObject.attr('mark-line') ?? null;
let categories = JSON.parse(elementObject.attr('categories')) ?? null;
let series = JSON.parse(elementObject.attr('series')) ?? null;
let seriesNames = series && series.map(function(item){ return item.name });
let seriesObject = setSeries(series, showPointValues, markLine, stacked);
console.log('titles', titles);
console.log('colors', colors);
console.log('point-values', showPointValues);
console.log('boundary-gap', boundaryGap);
console.log('inverted', inverted);
console.log('data-zoom', showDataZoom);
console.log('stacked', stacked);
console.log('animation-duration', animationDuration);
console.log('y-axis-label-value-format', yAxisLabelValueFormat);
console.log('mark-line', markLine);
console.log('categories', categories);
console.log('series', series);
console.log('series names', seriesNames);
console.log('series object', seriesObject);
// Options
let options = {
// Chart title
title: setTitles(titles),
title: setTitles(titles, numberOfCharts),
// Define colors
color: color,
color: colors,
// Global text styles
textStyle: setGlobalTextStyle(),
......@@ -109,21 +122,22 @@ function set_data(titles, multichart, numberOfCharts, callback) {
tooltip: setTooltip(),
// Horizontal axis
xAxis: inverted ? setYAxis(yAxisLabelValueFormat, numberOfCharts) : setXAxis(xAxisData, boundaryGap, numberOfCharts),
xAxis: inverted ? setYAxis(yAxisLabelValueFormat, numberOfCharts) : setXAxis(categories, boundaryGap, numberOfCharts),
// Vertical axis
yAxis: inverted ? setXAxis(xAxisData, boundaryGap, numberOfCharts) : setYAxis(yAxisLabelValueFormat, numberOfCharts),
yAxis: inverted ? setXAxis(categories, boundaryGap, numberOfCharts) : setYAxis(yAxisLabelValueFormat, numberOfCharts),
// Axis pointer
axisPointer: setAxisPointer(multichart),
// Zoom control
dataZoom: setDataZoom(showDataZoom, multichart),
// Add series
series: series
series: seriesObject
};
if(showDataZoom == true) {
options.dataZoom = setDataZoom(showDataZoom, multichart);
}
callback(options);
}, 1000);
......@@ -131,40 +145,63 @@ function set_data(titles, multichart, numberOfCharts, callback) {
}
// sub functions
function setLineChartSeries(name, data = [], showPointValues = false, markLineDataType = null, stack = false, index = 0) {
let series = {
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
}
},
xAxisIndex: index,
yAxisIndex: index
function setSeries(seriesData, showPointValues = false, markLineDataType = null, stack = false) {
// uses series options if available else use global options.
let seriesArray = [];
for(let i = 0; i < seriesData.length; i++) {
let series = {
name: seriesData[i].name,
type: seriesData[i].type ?? 'line',
data: seriesData[i].data,
stack: seriesData[i].stack ?? stack,
smooth: true,
symbol: 'circle',
symbolSize: 7,
label: {
normal: {
show: seriesData[i].showPointValues ?? showPointValues
}
},
itemStyle: {
normal: {
borderWidth: 2
}
},
xAxisIndex: seriesData[i].index ?? 0,
yAxisIndex: seriesData[i].index ?? 0
}
if(seriesData[i].markline != undefined && ['min', 'max', 'average'].includes(markLineDataType)) {
series.markLine = {
data: [{
type: seriesData[i].markline,
name: seriesData[i].markline[0].toUpperCase() + seriesData[i].markline.substring(1),
}]
};
} else if(markLineDataType != null && ['min', 'max', 'average'].includes(markLineDataType)) {
series.markLine = {
data: [{
type: markLineDataType,
name: markLineDataType[0].toUpperCase() + markLineDataType.substring(1),
}]
};
}
seriesArray.push(series);
}
return series;
return seriesArray;
}
function setXAxis(xAxisData, boundaryGap = true, numberOfCharts = 1) {
function setXAxis(categories, boundaryGap = true, numberOfCharts = 1) {
let xAxisArray = [];
for (let i = 0; i < numberOfCharts; i++) {
......@@ -172,7 +209,6 @@ function setXAxis(xAxisData, boundaryGap = true, numberOfCharts = 1) {
let x = {
type: 'category',
boundaryGap: boundaryGap,
data: xAxisData,
axisLabel: {
color: '#fff'
},
......@@ -189,9 +225,15 @@ function setXAxis(xAxisData, boundaryGap = true, numberOfCharts = 1) {
gridIndex: i
};
if(categories != null) {
x.data = categories;
}
xAxisArray.push(x);
}
console.log('xaxisarray', xAxisArray);
return xAxisArray;
}
......@@ -243,17 +285,25 @@ function setLegend(legendData, multichart = false) {
}
}
function setTitles(titles) {
function setTitles(titles, numberOfCharts = 1) {
// if not array.
if(!Array.isArray(titles)) {
let temp = titles;
titles = [];
titles.push(temp);
}
let arrayTitles = [];
titles.forEach(function(val, idx, arr) {
for(i = 0; i < numberOfCharts; i++) {
let title = {
text: val,
text: titles[i],
};
// if single else multichart
if(idx == 0 && arr.length == 1) {
if(i == 0 && numberOfCharts == 1) {
title.textStyle = {
color: '#fff'
};
......@@ -264,11 +314,11 @@ function setTitles(titles) {
color: '#fff'
};
title.left = 'center';
title.top = 240 * idx; // (chart height = 160 | charts spacing = 80) * index
title.top = 240 * i; // (chart height = 160 | charts spacing = 80) * index
}
arrayTitles.push(title);
});
}
console.log('titles', arrayTitles);
......
src/Views/Limitless/Linechart/Chart.blade.php 0 → 100644
View file @ 3a926a8f
<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 }}"
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) }}"
>
src/Views/Limitless/Linechart/Config.php
View file @ 3a926a8f
......@@ -32,8 +32,7 @@
class Config
{
public $methodAllocation = [
'Limitless::LineChartStart' => 'lineChartStart',
'Limitless::LineChartStop' => 'LineChartStop',
'Limitless::Chart' => 'chart'
];
public $assetAllocation;
......@@ -41,7 +40,7 @@
public function __construct()
{
$this->assetAllocation = [
'Limitless::LineChartStart' => [
'Limitless::Chart' => [
'Attachments/linechart.init.js',
secure_url('/ceetrox/sidekick/resource/public/Webdesigns/design-limitless/Template/global_assets/js/plugins/visualization/echarts/echarts.min.js'),
]
......@@ -51,24 +50,25 @@
/*
|--------------------------------------------------------------------------------------------
| Method "lineChartStart"
| Method "chart"
|--------------------------------------------------------------------------------------------
*/
public function lineChartStart($parameters)
public function chart($parameters)
{
return View('Limitless::Linechart.Start');
}
/*
|--------------------------------------------------------------------------------------------
| Method "LineChartStop"
|--------------------------------------------------------------------------------------------
*/
public function LineChartStop($parameters)
{
return View('Limitless::Linechart.Stop');
return View('Limitless::Linechart.Chart')
->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)
->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);;
}
......
src/Views/Limitless/Linechart/Documentation/Index.blade.php
View file @ 3a926a8f
......@@ -3,16 +3,52 @@
@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;
}
@endphp
@Limitless::CardStart(['title' => "Description", 'icon' => 'icon-info22' ] )
@Limitless::LineChartStart
@Limitless::Chart([
'titles' => 'Sample 1',
'charts' => 1,
'colors' => ['#5470c6', '#91cc75', '#fac858', '#ee6666', '#73c0de', '#3ba272', '#fc8452', '#9a60b4', '#ea7ccc', '#a1887f'],
'point-values' => true,
'boundary-gap' => true,
'inverted' => true,
'data-zoom' => true,
'stacked' => true,
'animation-duration' => 1000,
'y-axis-label-value-format' => '{value} users',
'mark-line' => 'average',
'categories' => $categories,
'series' => $seriesData
])
@Limitless::CardStop
@Limitless::CardStart(['title' => "Chart 2", 'icon' => 'icon-info22' ] )
@Limitless::LineChartStart
@Limitless::CardStop
{{-- @Limitless::CardStart(['title' => "Chart 2", 'icon' => 'icon-info22' ] )--}}
{{-- @Limitless::Chart--}}
{{-- @Limitless::CardStop--}}
@Limitless::CardStart(['title' => "Chart 3", 'icon' => 'icon-info22' ] )
@Limitless::LineChartStart
@Limitless::CardStop
{{-- @Limitless::CardStart(['title' => "Chart 3", 'icon' => 'icon-info22' ] )--}}
{{-- @Limitless::LineChartStart--}}
{{-- @Limitless::LineChartStop--}}
{{-- @Limitless::CardStop--}}
@stop
src/Views/Limitless/Linechart/Start.blade.php deleted 100644 → 0
View file @ ef8a4d9e
<div class="chart-container">
<div class="chart has-fixed-height LimitlessLineChart">
</div>
</div>
\ No newline at end of file
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