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