Skip to content

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

SERV-2286 - bar chart element configuration WIP

parent b1e2d700
Hide whitespace changes
Inline Side-by-side
Showing with 108 additions and 258 deletions
src/Views/Limitless/Barchart/Attachments/barchart.init.js
View file @ d3e301af
......@@ -3,11 +3,11 @@ function set_chart() {
let chartCounter = 0;
$('.LimitlessLineChart').each(function() {
$('.LimitlessBarChart').each(function() {
chartCounter++;
let elementChart = $(this);
elementChart.attr('id', 'LimitlessLineChart' + chartCounter);
elementChart.attr('id', 'LimitlessBarChart' + chartCounter);
init_chart(elementChart[0].id);
......@@ -23,8 +23,6 @@ function init_chart(chartId) {
if (lineChartElement) {
let elementObject = $(lineChartElement);
let numberOfCharts = elementObject.attr('charts') ?? 1;
set_chart_height(numberOfCharts, lineChartElement)
let lineChart = echarts.init(lineChartElement);
......@@ -36,7 +34,7 @@ function init_chart(chartId) {
fontSize: 15
});
set_data(elementObject, numberOfCharts, function(options) {
set_data(elementObject, function(options) {
lineChart.hideLoading();
lineChart.setOption(options);
setResizeEvent(lineChartElement, lineChart);
......@@ -44,26 +42,22 @@ function init_chart(chartId) {
}
}
function set_data(elementObject, numberOfCharts, callback) {
function set_data(elementObject, callback) {
setTimeout(function() {
// lightcolors = ['#8dd3c7', '#ffffb3', '#bebada', '#fb8072', '#80b1d3', '#fdb462', '#b3de69', '#fccde5', '#d9d9d9', '#bc80bd', '#ccebc5', '#ffed6f'];
const defaultColors = ['#a6cee3', '#1f78b4', '#b2df8a', '#33a02c', '#fb9a99', '#e31a1c', '#fdbf6f', '#ff7f00', '#cab2d6', '#6a3d9a', '#ffff99', '#b15928'];;
const defaultColors = ['#a6cee3', '#1f78b4', '#b2df8a', '#33a02c', '#fb9a99', '#e31a1c', '#fdbf6f', '#ff7f00', '#cab2d6', '#6a3d9a', '#ffff99', '#b15928'];
let options;
let rawData = elementObject.attr('raw') ? JSON.parse(elementObject.attr('raw')) : null;
if(rawData == null) {
let multichart = (numberOfCharts > 1);
// variables (this will be set by user)
let titles = JSON.parse(elementObject.attr('titles')) ?? [];
let title = elementObject.attr('title') ?? null;
let colors = JSON.parse(elementObject.attr('colors')) ?? defaultColors;
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 animationDuration = elementObject.attr('animation-duration') ?? 750;
// ex '{value} users' - https://echarts.apache.org/en/option.html#yAxis.axisLabel.formatter
......@@ -78,7 +72,7 @@ function set_data(elementObject, numberOfCharts, callback) {
options = {
// Chart title
title: setTitles(titles, numberOfCharts),
title: setTitle(title),
// Define colors
color: colors,
......@@ -90,31 +84,24 @@ function set_data(elementObject, numberOfCharts, callback) {
animationDuration: animationDuration,
// Setup grid
grid: setGrid(showDataZoom, numberOfCharts),
grid: setGrid(),
// Add legend
legend: setLegend(seriesNames, multichart),
legend: setLegend(seriesNames),
// Add tooltip
tooltip: setTooltip(),
// Horizontal axis
xAxis: inverted ? setYAxis(yAxisLabelValueFormat, numberOfCharts) : setXAxis(categories, boundaryGap, numberOfCharts),
xAxis: inverted ? setYAxis(yAxisLabelValueFormat) : setXAxis(categories),
// Vertical axis
yAxis: inverted ? setXAxis(categories, boundaryGap, numberOfCharts) : setYAxis(yAxisLabelValueFormat, numberOfCharts),
// Axis pointer
axisPointer: setAxisPointer(multichart),
yAxis: inverted ? setXAxis(categories) : setYAxis(yAxisLabelValueFormat),
// Add series
series: seriesObject
};
if(showDataZoom == true) {
options.dataZoom = setDataZoom(showDataZoom, multichart);
}
} else {
options = rawData;
}
......@@ -124,17 +111,6 @@ function set_data(elementObject, numberOfCharts, callback) {
}, 1000);
}
function set_chart_height(numberOfCharts, lineChartElement) {
// adjust container height before initialising the chart.
if (numberOfCharts > 1) {
let height = (numberOfCharts * 240); // (chart height = 160 | charts spacing = 80)
lineChartElement.style.height = height + 'px';
}
return lineChartElement;
}
//#endregion
//#region FUNCTIONS FOR OPTIONS
......@@ -145,37 +121,31 @@ function setSeries(seriesData, elementObject) {
if(!seriesData || seriesData.length == 0) return [];
let showPointValues = (elementObject.attr('point-values') == 'true' || elementObject.attr('point-values') == true) ?? false;
let showBarValues = (elementObject.attr('bar-values') == 'true' || elementObject.attr('bar-values') == true) ?? false;
let stacked = (elementObject.attr('stacked') == 'true' || elementObject.attr('stacked') == true) ?? false;
let isArea = (elementObject.attr('is-area') == 'true' || elementObject.attr('is-area') == true) ?? false;
let markLine = elementObject.attr('mark-line') ?? null; // min | max | average
for(let i = 0; i < seriesData.length; i++) {
let series = {
name: seriesData[i].name,
type: seriesData[i].type ?? 'line',
type: seriesData[i].type ?? 'bar',
data: seriesData[i].data,
stack: seriesData[i].stacked ?? stacked,
smooth: true,
symbol: 'circle',
symbolSize: 7,
label: {
normal: {
show: seriesData[i].showPointValues ?? showPointValues
}
},
itemStyle: {
normal: {
borderWidth: 2
label: {
show: seriesData[i].showBarValues ?? showBarValues,
position: 'top',
textStyle: {
fontWeight: 500
}
}
}
},
xAxisIndex: seriesData[i].index ?? 0,
yAxisIndex: seriesData[i].index ?? 0
}
setMarkLine(series, seriesData[i], markLine);
setArea(series, seriesData[i], isArea);
seriesArray.push(series);
......@@ -184,81 +154,63 @@ function setSeries(seriesData, elementObject) {
return seriesArray;
}
function setXAxis(categories, boundaryGap = true, numberOfCharts = 1) {
let xAxisArray = [];
for (let i = 0; i < numberOfCharts; i++) {
function setXAxis(categories) {
let x = {
type: 'category',
boundaryGap: boundaryGap,
axisLabel: {
color: '#fff'
},
axisLine: {
lineStyle: {
color: 'rgba(255,255,255,0.25)'
}
},
splitLine: {
lineStyle: {
color: 'rgba(255,255,255,0.1)'
}
},
gridIndex: i
};
if(categories != null) {
x.data = categories;
let x = {
type: 'category',
axisLabel: {
color: '#fff'
},
axisLine: {
lineStyle: {
color: 'rgba(255,255,255,0.25)'
}
},
splitLine: {
show: true,
lineStyle: {
color: 'rgba(255,255,255,0.1)',
type: 'dashed'
}
}
};
xAxisArray.push(x);
if(categories != null) {
x.data = categories;
}
console.log('xaxisarray', xAxisArray);
return xAxisArray;
return x;
}
function setYAxis(yAxisLabelValueFormat, numberOfCharts = 1) {
function setYAxis(yAxisLabelValueFormat) {
let yAxisArray = [];
for (let i = 0; i < numberOfCharts; i++) {
let y = {
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,
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)']
}
},
gridIndex: i
};
yAxisArray.push(y);
}
return yAxisArray;
color: ['rgba(255,255,255,0.01)', 'rgba(0,0,0,0.01)']
}
}
};
}
// disabled when multichart is true
function setLegend(legendData, multichart = false) {
return multichart ? null : {
function setLegend(legendData) {
return {
data: legendData,
itemHeight: 8,
itemGap: 20,
......@@ -268,79 +220,17 @@ function setLegend(legendData, multichart = false) {
}
}
function setTitles(titles, numberOfCharts = 1) {
function setTitle(title) {
// if not array.
if(!Array.isArray(titles)) {
let temp = titles;
titles = [];
titles.push(temp);
}
let arrayTitles = [];
if(title == null) return null;
for(i = 0; i < numberOfCharts; i++) {
let title = {
text: titles[i],
};
// if single else multichart
if(i == 0 && numberOfCharts == 1) {
title.textStyle = {
color: '#fff'
};
} else {
title.textStyle = {
fontSize: 15,
fontWeight: 500,
color: '#fff'
};
title.left = 'center';
title.top = 240 * i; // (chart height = 160 | charts spacing = 80) * index
return {
text: title,
textStyle: {
color: '#fff'
}
arrayTitles.push(title);
}
console.log('titles', arrayTitles);
return arrayTitles;
}
// disabled when multichart is true
function setDataZoom(show, multichart = false) {
return multichart ? null : [
{
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() {
......@@ -352,37 +242,25 @@ function setTooltip() {
color: '#222',
fontSize: 13,
fontFamily: 'Roboto, sans-serif'
},
axisPointer: {
type: 'shadow',
shadowStyle: {
color: 'rgba(255,255,255,0.1)'
}
}
}
}
function setGrid(showDataZoom = false, numberOfCharts = 1) {
function setGrid() {
let arrayGrids = [];
for (let i = 0; i < numberOfCharts; i++) {
let grid = {
left: 0,
containLabel: true
};
// if single else multichart
if(i == 0 && numberOfCharts == 1) {
grid.right = 40;
grid.top = 50;
grid.bottom = showDataZoom ? 60 : 0;
} else {
grid.right = 20;
grid.top = (i == 0) ? 40 : (arrayGrids[i-1].top + 240); // previous top + chart height = 160 + charts spacing = 80
grid.height = 160;
}
arrayGrids.push(grid);
}
console.log('grids', arrayGrids);
return {
left: 0,
right: 40,
top: 50,
containLabel: true
};
return arrayGrids;
}
function setGlobalTextStyle() {
......@@ -391,22 +269,6 @@ function setGlobalTextStyle() {
fontSize: 13
};
}
function setAxisPointer(multichart = false) {
let pointer = {
lineStyle: {
color: 'rgba(255,255,255,0.25)'
}
};
if(multichart) {
pointer.link = {
xAxisIndex: 'all'
};
}
return pointer;
}
//#endregion
//#region SUB FUNCTIONS FOR SERIES
......@@ -431,16 +293,6 @@ function setMarkLine(series, seriesData, markLine) {
}
}
function setArea(series, seriesData, isArea) {
let area = seriesData.isArea ?? isArea;
if(area == true) {
series.areaStyle = {};
}
}
//#endregion
function setResizeEvent(lineChartElement, lineChart) {
......
src/Views/Limitless/Barchart/BarChart.blade.php
View file @ d3e301af
<div class="chart-container">
<div class="chart has-fixed-height LimitlessLineChart"
charts="{{ $charts }}"
titles="{{ json_encode($titles) }}"
<div class="chart has-fixed-height LimitlessBarChart"
title="{{ $title }}"
colors="{{ json_encode($colors) }}"
point-values="{{ $pointValues }}"
boundary-gap="{{ $boundaryGap }}"
bar-values="{{ $barValues }}"
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 }}"
raw="{{ json_encode(json_decode($raw)) }}"
>
</div>
</div>
\ No newline at end of file
src/Views/Limitless/Barchart/Config.php
View file @ d3e301af
......@@ -63,16 +63,12 @@
*/
public function barChart($parameters)
{
return View('Limitless::Barchart.barChart')
->withCharts($parameters['charts'] ?? 1)
->withTitles($parameters['titles'] ?? null)
return View('Limitless::Barchart.BarChart')
->withTitle($parameters['title'] ?? null)
->withColors($parameters['colors'] ?? null)
->withPointValues($parameters['point-values'] ?? false)
->withBoundaryGap($parameters['boundary-gap'] ?? true)
->withBarValues($parameters['bar-values'] ?? false)
->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)
......
src/Views/Limitless/Barchart/Documentation/Index.blade.php
View file @ d3e301af
......@@ -7,7 +7,7 @@
// 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'];
$series = ['ONC', 'APR', 'PHX', 'BRG'];
$seriesData = [];
foreach ($series as $s) {
......@@ -43,21 +43,27 @@
@endphp
@Limitless::CardStart(['title' => "Basic Setup", 'icon' => 'icon-info22' ] )
@Limitless::LineChart([
@Limitless::BarChart([
'mark-line' => 'average',
'categories' => $categories,
'series' => $seriesData,
])
@Limitless::CardStop
@Limitless::CardStart(['title' => "Chart 2 (raw)", 'icon' => 'icon-info22' ] )
@Limitless::LineChart([
'raw' => $rawData
@Limitless::CardStart(['title' => "Stacked Setup", 'icon' => 'icon-info22' ] )
@Limitless::BarChart([
'stacked' => true,
'categories' => $categories,
'series' => $seriesData,
])
@Limitless::CardStop
{{-- @Limitless::CardStart(['title' => "Chart 3", 'icon' => 'icon-info22' ] )--}}
{{-- @Limitless::LineChartStart--}}
{{-- @Limitless::LineChartStop--}}
{{-- @Limitless::CardStop--}}
@Limitless::CardStart(['title' => "Stacked Setup", 'icon' => 'icon-info22' ] )
@Limitless::BarChart([
'stacked' => true,
'categories' => $categories,
'series' => $seriesData,
])
@Limitless::CardStop
@stop
src/Views/Limitless/Linechart/Documentation/Index.blade.php
View file @ d3e301af
......@@ -144,7 +144,7 @@
])
@Limitless::CardStop
@Limitless::CardStart(['title' => "Area Setup", 'icon' => 'icon-info22' ] )
@Limitless::CardStart(['title' => "Stacked Area Setup", 'icon' => 'icon-info22' ] )
@Limitless::LineChart([
'is-area' => true,
'stacked' => true,
......
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