Skip to content

S
sidekick
Commit 31812e33 authored by Kevin Yumang's avatar Kevin Yumang
Browse files
Options

SERV-2286 - added new parameter for passing raw option data.

parent 33c13cf4
Hide whitespace changes
Inline Side-by-side
Showing with 105 additions and 68 deletions
src/Views/Limitless/Linechart/Attachments/linechart.init.js
View file @ 31812e33
......@@ -26,6 +26,10 @@ function init_chart(chartId) {
let numberOfCharts = elementObject.attr('charts') ?? 1;
let multichart = (numberOfCharts > 1);
let rawData = elementObject.attr('raw') ? JSON.parse(elementObject.attr('raw')) : null;
console.log('raw', rawData);
console.log(numberOfCharts);
console.log(multichart);
......@@ -46,7 +50,7 @@ function init_chart(chartId) {
fontSize: 15
});
set_data(elementObject, multichart, numberOfCharts, function(options) {
set_data(elementObject, multichart, numberOfCharts, rawData, function(options) {
lineChart.hideLoading();
lineChart.setOption(options);
setResizeEvent(lineChartElement, lineChart);
......@@ -54,90 +58,98 @@ function init_chart(chartId) {
}
}
function set_data(elementObject, multichart, numberOfCharts, callback) {
function set_data(elementObject, multichart, numberOfCharts, rawData, callback) {
setTimeout(function() {
let options;
const defaultColors = ['#5470c6', '#91cc75', '#fac858', '#ee6666', '#73c0de', '#3ba272', '#fc8452', '#9a60b4', '#ea7ccc', '#a1887f'];
// variables (this will be set by user)
let titles = JSON.parse(elementObject.attr('titles')) ?? [];
let colors = JSON.parse(elementObject.attr('colors')) ?? defaultColors;
if(rawData == null) {
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
// variables (this will be set by user)
let titles = JSON.parse(elementObject.attr('titles')) ?? [];
let colors = JSON.parse(elementObject.attr('colors')) ?? defaultColors;
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 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 series = JSON.parse(elementObject.attr('series')) ?? null;
let seriesNames = series && series.map(function(item){ return item.name });
let seriesObject = setSeries(series, showPointValues, markLine, stacked);
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;
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);
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, numberOfCharts),
// Options
options = {
// Define colors
color: colors,
// Chart title
title: setTitles(titles, numberOfCharts),
// Global text styles
textStyle: setGlobalTextStyle(),
// Define colors
color: colors,
// Chart animation duration
animationDuration: animationDuration,
// Global text styles
textStyle: setGlobalTextStyle(),
// Setup grid
grid: setGrid(showDataZoom, numberOfCharts),
// Chart animation duration
animationDuration: animationDuration,
// Add legend
legend: setLegend(seriesNames, multichart),
// Setup grid
grid: setGrid(showDataZoom, numberOfCharts),
// Add tooltip
tooltip: setTooltip(),
// Add legend
legend: setLegend(seriesNames, multichart),
// Horizontal axis
xAxis: inverted ? setYAxis(yAxisLabelValueFormat, numberOfCharts) : setXAxis(categories, boundaryGap, numberOfCharts),
// Add tooltip
tooltip: setTooltip(),
// Vertical axis
yAxis: inverted ? setXAxis(categories, boundaryGap, numberOfCharts) : setYAxis(yAxisLabelValueFormat, numberOfCharts),
// Horizontal axis
xAxis: inverted ? setYAxis(yAxisLabelValueFormat, numberOfCharts) : setXAxis(categories, boundaryGap, numberOfCharts),
// Axis pointer
axisPointer: setAxisPointer(multichart),
// Vertical axis
yAxis: inverted ? setXAxis(categories, boundaryGap, numberOfCharts) : setYAxis(yAxisLabelValueFormat, numberOfCharts),
// Add series
series: seriesObject
};
// Axis pointer
axisPointer: setAxisPointer(multichart),
// Add series
series: seriesObject
};
if(showDataZoom == true) {
options.dataZoom = setDataZoom(showDataZoom, multichart);
}
if(showDataZoom == true) {
options.dataZoom = setDataZoom(showDataZoom, multichart);
} else {
options = rawData;
}
callback(options);
}, 1000);
......@@ -148,8 +160,10 @@ function set_data(elementObject, multichart, numberOfCharts, callback) {
function setSeries(seriesData, showPointValues = false, markLineDataType = null, stack = false) {
// uses series options if available else use global options.
let seriesArray = [];
if(!seriesData || seriesData.length == 0) return [];
for(let i = 0; i < seriesData.length; i++) {
let series = {
......
src/Views/Limitless/Linechart/Chart.blade.php
View file @ 31812e33
......@@ -13,4 +13,5 @@
@if($markLine != null) mark-line="{{ $markLine }}" @endif
categories="{{ json_encode($categories) }}"
series="{{ json_encode($series) }}"
raw="{{ $raw }}"
>
src/Views/Limitless/Linechart/Config.php
View file @ 31812e33
......@@ -68,7 +68,8 @@
->withYAxisLabelValueFormat($parameters['y-axis-label-value-format'] ?? null)
->withMarkLine($parameters['mark-line'] ?? null)
->withCategories($parameters['categories'] ?? null)
->withSeries($parameters['series'] ?? null);;
->withSeries($parameters['series'] ?? null)
->withRaw($parameters['raw'] ?? null);
}
......
src/Views/Limitless/Linechart/Documentation/Index.blade.php
View file @ 31812e33
......@@ -21,6 +21,25 @@
$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
......@@ -31,20 +50,22 @@
'colors' => ['#5470c6', '#91cc75', '#fac858', '#ee6666', '#73c0de', '#3ba272', '#fc8452', '#9a60b4', '#ea7ccc', '#a1887f'],
'point-values' => true,
'boundary-gap' => true,
'inverted' => true,
'inverted' => false,
'data-zoom' => true,
'stacked' => true,
'stacked' => false,
'animation-duration' => 1000,
'y-axis-label-value-format' => '{value} users',
'mark-line' => 'average',
'categories' => $categories,
'series' => $seriesData
'series' => $seriesData,
])
@Limitless::CardStop
{{-- @Limitless::CardStart(['title' => "Chart 2", 'icon' => 'icon-info22' ] )--}}
{{-- @Limitless::Chart--}}
{{-- @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--}}
......
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