Skip to content

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

SERV-2286 - refactor chart js files

parent 7c542a8c
Hide whitespace changes
Inline Side-by-side
Showing with 156 additions and 258 deletions
src/Managers/ChartManager/ChartDataManager.php
View file @ 91dd48ef
...@@ -13,7 +13,7 @@ Class ChartDataManager { ...@@ -13,7 +13,7 @@ Class ChartDataManager {
private ?string $rawData; private ?string $rawData;
private ?bool $isStacked; private ?bool $isStacked;
private ?bool $markLine; private ?string $markLine;
public function __construct() public function __construct()
{ {
......
src/Managers/ChartManager/ChartManager.js 0 → 100644
View file @ 91dd48ef
class ChartManager {
defaultColors = [
'#2ec7c9','#b6a2de','#5ab1ef','#ffb980','#d87a80',
'#8d98b3','#e5cf0d','#97b552','#95706d','#dc69aa',
'#07a2a4','#9a7fd1','#588dd5','#f5994e','#c05050',
'#59678c','#c9ab00','#7eb00a','#6f5553','#c14089',
'#66bb6a'
];
defaultLoadingOptions = {
text: 'LADE DATEN',
maskColor: '#353f53',
color: '#fff',
textColor: '#fff',
fontSize: 15
};
defaultGlobalTextStyle = {
fontFamily: 'Roboto, Arial, Verdana, sans-serif',
fontSize: 13
};
isModuleSet() {
let isset = (typeof echarts != 'undefined');
if (isset == false) console.warn('Warning - echarts.min.js is not loaded.');
return isset;
}
getColors(objectData, elementObject) {
return objectData?.colors ?? (JSON.parse(elementObject.attr('colors')) ?? chartManager.defaultColors)
}
getAnimationDuration(objectData, elementObject) {
return objectData?.animationDuration ?? (elementObject.attr('animation-duration') ?? 750);
}
getYAxisLabelValueFormat(objectData, elementObject) {
// ex '{value} users' - https://echarts.apache.org/en/option.html#yAxis.axisLabel.formatter
return objectData?.yAxisLabelValueFormat ?? (elementObject.attr('y-axis-label-value-format') ?? null);
}
getSeriesStacked(objectData, elementObject) {
return objectData?.stacked ?? ((elementObject.attr('stacked') == 'true' || elementObject.attr('stacked') == true) ?? false);
}
getSeriesMarkLine(objectData, elementObject) {
// min | max | average
return objectData?.markLine ?? (elementObject.attr('mark-line') ?? null);
}
getChartCategories(objectData, elementObject) {
return objectData?.categories ?? (JSON.parse(elementObject.attr('categories')) ?? null);
}
getChartSeries(objectData, elementObject) {
return objectData?.series ?? (JSON.parse(elementObject.attr('series')) ?? null);
}
setSeriesMarkLine(series, seriesData, markLine) {
if(seriesData.markLine !== undefined && ['min', 'max', 'average'].includes(markLine)) {
series.markLine = {
data: [{
type: seriesData.markLine,
name: seriesData.markLine[0].toUpperCase() + seriesData.markLine.substring(1),
}]
};
} else if(markLine != null && ['min', 'max', 'average'].includes(markLine)) {
series.markLine = {
data: [{
type: markLine,
name: markLine[0].toUpperCase() + markLine.substring(1),
}]
};
}
}
setResizeEvent(chartElement, chartInstance) {
// Resize function
let triggerChartResize = function() {
chartElement && chartInstance.resize();
};
// On sidebar width change
let sidebarToggle = document.querySelector('.sidebar-control');
sidebarToggle && sidebarToggle.addEventListener('click', triggerChartResize);
// On window resize
let resizeCharts;
window.addEventListener('resize', function() {
clearTimeout(resizeCharts);
resizeCharts = setTimeout(function () {
triggerChartResize();
}, 200);
});
}
}
\ No newline at end of file
src/Views/Limitless/Barchart/Attachments/barchart.init.js
View file @ 91dd48ef
let chartManager = new ChartManager();
//#region MAIN FUNCTIONS //#region MAIN FUNCTIONS
function set_chart() { function set_chart() {
if (typeof echarts == 'undefined') { if(chartManager.isModuleSet() == false) return;
console.warn('Warning - echarts.min.js is not loaded.');
return;
}
let chartCounter = 0; let chartCounter = 0;
...@@ -19,7 +18,6 @@ function set_chart() { ...@@ -19,7 +18,6 @@ function set_chart() {
}); });
} }
function init_chart(chartId) { function init_chart(chartId) {
// Define element // Define element
...@@ -31,34 +29,19 @@ function init_chart(chartId) { ...@@ -31,34 +29,19 @@ function init_chart(chartId) {
let chartInstance = echarts.init(chartElement); let chartInstance = echarts.init(chartElement);
chartInstance.showLoading({ chartInstance.showLoading(chartManager.defaultLoadingOptions);
text: 'LADE DATEN',
maskColor: '#353f53',
color: '#fff',
textColor: '#fff',
fontSize: 15
});
set_data(elementObject, function(options) { set_data(elementObject, function(options) {
chartInstance.hideLoading(); chartInstance.hideLoading();
chartInstance.setOption(options); chartInstance.setOption(options);
setResizeEvent(chartElement, chartInstance); chartManager.setResizeEvent(chartElement, chartInstance);
}) })
} }
} }
function set_data(elementObject, callback) { function set_data(elementObject, callback) {
setTimeout(function() { setTimeout(function() {
const defaultColors = [
'#2ec7c9','#b6a2de','#5ab1ef','#ffb980','#d87a80',
'#8d98b3','#e5cf0d','#97b552','#95706d','#dc69aa',
'#07a2a4','#9a7fd1','#588dd5','#f5994e','#c05050',
'#59678c','#c9ab00','#7eb00a','#6f5553','#c14089',
'#66bb6a'
];
let options; let options;
let objectData = elementObject.attr('data') ? JSON.parse(elementObject.attr('data')) : null; let objectData = elementObject.attr('data') ? JSON.parse(elementObject.attr('data')) : null;
...@@ -73,16 +56,13 @@ function set_data(elementObject, callback) { ...@@ -73,16 +56,13 @@ function set_data(elementObject, callback) {
let horizontal = objectData?.horizontal ?? (elementObject.attr('horizontal') == 'true' || elementObject.attr('horizontal') == true); // default false let horizontal = objectData?.horizontal ?? (elementObject.attr('horizontal') == 'true' || elementObject.attr('horizontal') == true); // default false
let showBarValues = objectData?.barValues ?? ((elementObject.attr('bar-values') == 'true' || elementObject.attr('bar-values') == true) ?? false); // series data option let showBarValues = objectData?.barValues ?? ((elementObject.attr('bar-values') == 'true' || elementObject.attr('bar-values') == true) ?? false); // series data option
let colors = objectData?.colors ?? (JSON.parse(elementObject.attr('colors')) ?? defaultColors); let yAxisLabelValueFormat = chartManager.getYAxisLabelValueFormat(objectData, elementObject);
let animationDuration = objectData?.animationDuration ?? (elementObject.attr('animation-duration') ?? 750);
// ex '{value} users' - https://echarts.apache.org/en/option.html#yAxis.axisLabel.formatter
let yAxisLabelValueFormat = objectData?.yAxisLabelValueFormat ?? (elementObject.attr('y-axis-label-value-format') ?? null);
let stacked = objectData?.stacked ?? ((elementObject.attr('stacked') == 'true' || elementObject.attr('stacked') == true) ?? false); // series data option let stacked = chartManager.getSeriesStacked(objectData, elementObject);
let markLine = objectData?.markLine ?? (elementObject.attr('mark-line') ?? null); // min | max | average - series data option let markLine = chartManager.getSeriesMarkLine(objectData, elementObject);
let categories = objectData?.categories ?? (JSON.parse(elementObject.attr('categories')) ?? null); let categories = chartManager.getChartCategories(objectData, elementObject);
let series = objectData?.series ?? (JSON.parse(elementObject.attr('series')) ?? null); let series = chartManager.getChartSeries(objectData, elementObject);
let seriesNames = series && series.map(function(item){ return item.name }); let seriesNames = series && series.map(function(item){ return item.name });
let seriesObject = setSeries(series, stacked, markLine, showBarValues, horizontal); let seriesObject = setSeries(series, stacked, markLine, showBarValues, horizontal);
...@@ -94,13 +74,13 @@ function set_data(elementObject, callback) { ...@@ -94,13 +74,13 @@ function set_data(elementObject, callback) {
title: setTitle(title), title: setTitle(title),
// Define colors // Define colors
color: colors, color: chartManager.getColors(objectData, elementObject),
// Global text styles // Global text styles
textStyle: setGlobalTextStyle(), textStyle: chartManager.defaultGlobalTextStyle,
// Chart animation duration // Chart animation duration
animationDuration: animationDuration, animationDuration: chartManager.getAnimationDuration(objectData, elementObject),
// Setup grid // Setup grid
grid: setGrid(), grid: setGrid(),
...@@ -160,7 +140,7 @@ function setSeries(seriesData, stacked, markLine, showBarValues, horizontal = fa ...@@ -160,7 +140,7 @@ function setSeries(seriesData, stacked, markLine, showBarValues, horizontal = fa
}, },
} }
setMarkLine(series, seriesData[i], markLine); chartManager.setSeriesMarkLine(series, seriesData[i], markLine);
seriesArray.push(series); seriesArray.push(series);
...@@ -168,7 +148,6 @@ function setSeries(seriesData, stacked, markLine, showBarValues, horizontal = fa ...@@ -168,7 +148,6 @@ function setSeries(seriesData, stacked, markLine, showBarValues, horizontal = fa
return seriesArray; return seriesArray;
} }
function setXAxis(categories) { function setXAxis(categories) {
let x = { let x = {
...@@ -196,7 +175,6 @@ function setXAxis(categories) { ...@@ -196,7 +175,6 @@ function setXAxis(categories) {
return x; return x;
} }
function setYAxis(yAxisLabelValueFormat) { function setYAxis(yAxisLabelValueFormat) {
return { return {
...@@ -223,7 +201,6 @@ function setYAxis(yAxisLabelValueFormat) { ...@@ -223,7 +201,6 @@ function setYAxis(yAxisLabelValueFormat) {
} }
}; };
} }
function setLegend(legendData) { function setLegend(legendData) {
return { return {
data: legendData, data: legendData,
...@@ -234,7 +211,6 @@ function setLegend(legendData) { ...@@ -234,7 +211,6 @@ function setLegend(legendData) {
} }
} }
} }
function setTitle(title) { function setTitle(title) {
if(title == null) return null; if(title == null) return null;
...@@ -247,7 +223,6 @@ function setTitle(title) { ...@@ -247,7 +223,6 @@ function setTitle(title) {
} }
} }
function setTooltip() { function setTooltip() {
return { return {
trigger: 'axis', trigger: 'axis',
...@@ -266,7 +241,6 @@ function setTooltip() { ...@@ -266,7 +241,6 @@ function setTooltip() {
} }
} }
} }
function setGrid() { function setGrid() {
return { return {
...@@ -277,57 +251,6 @@ function setGrid() { ...@@ -277,57 +251,6 @@ function setGrid() {
}; };
} }
function setGlobalTextStyle() {
return {
fontFamily: 'Roboto, Arial, Verdana, sans-serif',
fontSize: 13
};
}
//#endregion
//#region SUB FUNCTIONS FOR SERIES
function setMarkLine(series, seriesData, markLine) {
if(seriesData.markLine !== undefined && ['min', 'max', 'average'].includes(markLine)) {
series.markLine = {
data: [{
type: seriesData.markLine,
name: seriesData.markLine[0].toUpperCase() + seriesData.markLine.substring(1),
}]
};
} else if(markLine != null && ['min', 'max', 'average'].includes(markLine)) {
series.markLine = {
data: [{
type: markLine,
name: markLine[0].toUpperCase() + markLine.substring(1),
}]
};
}
}
//#endregion //#endregion
function setResizeEvent(chartElement, chartInstance) {
// Resize function
let triggerChartResize = function() {
chartElement && chartInstance.resize();
};
// On sidebar width change
let sidebarToggle = document.querySelector('.sidebar-control');
sidebarToggle && sidebarToggle.addEventListener('click', triggerChartResize);
// On window resize
let resizeCharts;
window.addEventListener('resize', function() {
clearTimeout(resizeCharts);
resizeCharts = setTimeout(function () {
triggerChartResize();
}, 200);
});
}
$(document).ready(function() { set_chart(); }); $(document).ready(function() { set_chart(); });
\ No newline at end of file
src/Views/Limitless/Barchart/Config.php
View file @ 91dd48ef
...@@ -48,6 +48,7 @@ ...@@ -48,6 +48,7 @@
{ {
$this->assetAllocation = [ $this->assetAllocation = [
'Limitless::BarChart' => [ 'Limitless::BarChart' => [
'../../../Managers/ChartManager/ChartManager.js',
'Attachments/barchart.init.js', 'Attachments/barchart.init.js',
secure_url('/ceetrox/sidekick/resource/public/Webdesigns/design-limitless/Template/global_assets/js/plugins/visualization/echarts/echarts.min.js'), secure_url('/ceetrox/sidekick/resource/public/Webdesigns/design-limitless/Template/global_assets/js/plugins/visualization/echarts/echarts.min.js'),
] ]
......
src/Views/Limitless/Linechart/Attachments/linechart.init.js
View file @ 91dd48ef
let chartManager = new ChartManager();
//#region MAIN FUNCTIONS //#region MAIN FUNCTIONS
function set_chart() { function set_chart() {
if (typeof echarts == 'undefined') { if(chartManager.isModuleSet() == false) return;
console.warn('Warning - echarts.min.js is not loaded.');
return;
}
let chartCounter = 0; let chartCounter = 0;
...@@ -19,7 +18,6 @@ function set_chart() { ...@@ -19,7 +18,6 @@ function set_chart() {
}); });
} }
function init_chart(chartId) { function init_chart(chartId) {
// Define element // Define element
...@@ -37,34 +35,20 @@ function init_chart(chartId) { ...@@ -37,34 +35,20 @@ function init_chart(chartId) {
let chartInstance = echarts.init(chartElement); let chartInstance = echarts.init(chartElement);
chartInstance.showLoading({ chartInstance.showLoading(chartManager.defaultLoadingOptions);
text: 'LADE DATEN',
maskColor: '#353f53',
color: '#fff',
textColor: '#fff',
fontSize: 15
});
set_data(objectData, elementObject, numberOfCharts, function(options) { set_data(objectData, elementObject, numberOfCharts, function(options) {
chartInstance.hideLoading(); chartInstance.hideLoading();
chartInstance.setOption(options); chartInstance.setOption(options);
setResizeEvent(chartElement, chartInstance); chartManager.setResizeEvent(chartElement, chartInstance);
}) })
} }
} }
// setting the data first checks for the data chart manager object and if specific attributes are not set then will use the chart element parameters. else defaults.
function set_data(objectData, elementObject, numberOfCharts, callback) { function set_data(objectData, elementObject, numberOfCharts, callback) {
setTimeout(function() { // setting the data first checks for the data chart manager object and if specific attributes are not set then will use the chart element parameters. else defaults.
const defaultColors = [ setTimeout(function() {
'#2ec7c9','#b6a2de','#5ab1ef','#ffb980','#d87a80',
'#8d98b3','#e5cf0d','#97b552','#95706d','#dc69aa',
'#07a2a4','#9a7fd1','#588dd5','#f5994e','#c05050',
'#59678c','#c9ab00','#7eb00a','#6f5553','#c14089',
'#66bb6a'
];
let options; let options;
let rawData = objectData?.rawData ?? (elementObject.attr('raw') ? JSON.parse(elementObject.attr('raw')) : null); let rawData = objectData?.rawData ?? (elementObject.attr('raw') ? JSON.parse(elementObject.attr('raw')) : null);
...@@ -83,16 +67,13 @@ function set_data(objectData, elementObject, numberOfCharts, callback) { ...@@ -83,16 +67,13 @@ function set_data(objectData, elementObject, numberOfCharts, callback) {
let showPointValues = objectData?.pointValues ?? ((elementObject.attr('point-values') == 'true' || elementObject.attr('point-values') == true) ?? false); // series data option let showPointValues = objectData?.pointValues ?? ((elementObject.attr('point-values') == 'true' || elementObject.attr('point-values') == true) ?? false); // series data option
let isArea = objectData?.isArea ?? ((elementObject.attr('is-area') == 'true' || elementObject.attr('is-area') == true) ?? false); // series data options let isArea = objectData?.isArea ?? ((elementObject.attr('is-area') == 'true' || elementObject.attr('is-area') == true) ?? false); // series data options
let colors = objectData?.colors ?? (JSON.parse(elementObject.attr('colors')) ?? defaultColors); let yAxisLabelValueFormat = chartManager.getYAxisLabelValueFormat(objectData, elementObject);
let animationDuration = objectData?.animationDuration ?? (elementObject.attr('animation-duration') ?? 750);
// ex '{value} users' - https://echarts.apache.org/en/option.html#yAxis.axisLabel.formatter
let yAxisLabelValueFormat = objectData?.yAxisLabelValueFormat ?? (elementObject.attr('y-axis-label-value-format') ?? null);
let stacked = objectData?.stacked ?? ((elementObject.attr('stacked') == 'true' || elementObject.attr('stacked') == true) ?? false); // series data options let stacked = chartManager.getSeriesStacked(objectData, elementObject);
let markLine = objectData?.markLine ?? (elementObject.attr('mark-line') ?? null); // min | max | average - series data options let markLine = chartManager.getSeriesMarkLine(objectData, elementObject);
let categories = objectData?.categories ?? (JSON.parse(elementObject.attr('categories')) ?? null); let categories = chartManager.getChartCategories(objectData, elementObject);
let series = objectData?.series ?? (JSON.parse(elementObject.attr('series')) ?? null); let series = chartManager.getChartSeries(objectData, elementObject);
let seriesNames = series && series.map(function(item){ return item.name }); let seriesNames = series && series.map(function(item){ return item.name });
let seriesObject = setSeries(series, stacked, markLine, showPointValues, isArea); let seriesObject = setSeries(series, stacked, markLine, showPointValues, isArea);
...@@ -104,13 +85,13 @@ function set_data(objectData, elementObject, numberOfCharts, callback) { ...@@ -104,13 +85,13 @@ function set_data(objectData, elementObject, numberOfCharts, callback) {
title: setTitles(titles, numberOfCharts), title: setTitles(titles, numberOfCharts),
// Define colors // Define colors
color: colors, color: chartManager.getColors(objectData, elementObject),
// Global text styles // Global text styles
textStyle: setGlobalTextStyle(), textStyle: chartManager.defaultGlobalTextStyle,
// Chart animation duration // Chart animation duration
animationDuration: animationDuration, animationDuration: chartManager.getAnimationDuration(objectData, elementObject),
// Setup grid // Setup grid
grid: setGrid(showDataZoom, numberOfCharts), grid: setGrid(showDataZoom, numberOfCharts),
...@@ -147,7 +128,6 @@ function set_data(objectData, elementObject, numberOfCharts, callback) { ...@@ -147,7 +128,6 @@ function set_data(objectData, elementObject, numberOfCharts, callback) {
}, 1000); }, 1000);
} }
function set_chart_height(numberOfCharts, chartElement) { function set_chart_height(numberOfCharts, chartElement) {
// adjust container height before initialising the chart. // adjust container height before initialising the chart.
...@@ -161,7 +141,6 @@ function set_chart_height(numberOfCharts, chartElement) { ...@@ -161,7 +141,6 @@ function set_chart_height(numberOfCharts, chartElement) {
//#endregion //#endregion
//#region FUNCTIONS FOR OPTIONS //#region FUNCTIONS FOR OPTIONS
function setSeries(seriesData, stacked, markLine, showPointValues, isArea) { function setSeries(seriesData, stacked, markLine, showPointValues, isArea) {
// setting the data first checks for the data chart manager object and if specific attributes are not set then will use the chart element parameters. else defaults. // setting the data first checks for the data chart manager object and if specific attributes are not set then will use the chart element parameters. else defaults.
...@@ -195,8 +174,8 @@ function setSeries(seriesData, stacked, markLine, showPointValues, isArea) { ...@@ -195,8 +174,8 @@ function setSeries(seriesData, stacked, markLine, showPointValues, isArea) {
yAxisIndex: seriesData[i].index ?? 0 yAxisIndex: seriesData[i].index ?? 0
} }
setMarkLine(series, seriesData[i], markLine); chartManager.setSeriesMarkLine(series, seriesData[i], markLine);
setArea(series, seriesData[i], isArea); setSeriesArea(series, seriesData[i], isArea);
seriesArray.push(series); seriesArray.push(series);
...@@ -204,7 +183,6 @@ function setSeries(seriesData, stacked, markLine, showPointValues, isArea) { ...@@ -204,7 +183,6 @@ function setSeries(seriesData, stacked, markLine, showPointValues, isArea) {
return seriesArray; return seriesArray;
} }
function setXAxis(categories, boundaryGap = true, numberOfCharts = 1) { function setXAxis(categories, boundaryGap = true, numberOfCharts = 1) {
let xAxisArray = []; let xAxisArray = [];
...@@ -238,7 +216,6 @@ function setXAxis(categories, boundaryGap = true, numberOfCharts = 1) { ...@@ -238,7 +216,6 @@ function setXAxis(categories, boundaryGap = true, numberOfCharts = 1) {
return xAxisArray; return xAxisArray;
} }
function setYAxis(yAxisLabelValueFormat, numberOfCharts = 1) { function setYAxis(yAxisLabelValueFormat, numberOfCharts = 1) {
let yAxisArray = []; let yAxisArray = [];
...@@ -274,9 +251,10 @@ function setYAxis(yAxisLabelValueFormat, numberOfCharts = 1) { ...@@ -274,9 +251,10 @@ function setYAxis(yAxisLabelValueFormat, numberOfCharts = 1) {
return yAxisArray; return yAxisArray;
} }
// disabled when multichart is true
function setLegend(legendData, multichart = false) { function setLegend(legendData, multichart = false) {
// disabled when multichart is true
return multichart ? null : { return multichart ? null : {
data: legendData, data: legendData,
itemHeight: 8, itemHeight: 8,
...@@ -286,7 +264,6 @@ function setLegend(legendData, multichart = false) { ...@@ -286,7 +264,6 @@ function setLegend(legendData, multichart = false) {
} }
} }
} }
function setTitles(titles, numberOfCharts = 1) { function setTitles(titles, numberOfCharts = 1) {
// if not array. // if not array.
...@@ -324,9 +301,10 @@ function setTitles(titles, numberOfCharts = 1) { ...@@ -324,9 +301,10 @@ function setTitles(titles, numberOfCharts = 1) {
return arrayTitles; return arrayTitles;
} }
// disabled when multichart is true
function setDataZoom(show, multichart = false) { function setDataZoom(show, multichart = false) {
// disabled when multichart is true
return multichart ? null : [ return multichart ? null : [
{ {
type: 'inside', type: 'inside',
...@@ -356,7 +334,6 @@ function setDataZoom(show, multichart = false) { ...@@ -356,7 +334,6 @@ function setDataZoom(show, multichart = false) {
} }
] ]
} }
function setTooltip() { function setTooltip() {
return { return {
trigger: 'axis', trigger: 'axis',
...@@ -369,7 +346,6 @@ function setTooltip() { ...@@ -369,7 +346,6 @@ function setTooltip() {
} }
} }
} }
function setGrid(showDataZoom = false, numberOfCharts = 1) { function setGrid(showDataZoom = false, numberOfCharts = 1) {
let arrayGrids = []; let arrayGrids = [];
...@@ -396,14 +372,6 @@ function setGrid(showDataZoom = false, numberOfCharts = 1) { ...@@ -396,14 +372,6 @@ function setGrid(showDataZoom = false, numberOfCharts = 1) {
return arrayGrids; return arrayGrids;
} }
function setGlobalTextStyle() {
return {
fontFamily: 'Roboto, Arial, Verdana, sans-serif',
fontSize: 13
};
}
function setAxisPointer(multichart = false) { function setAxisPointer(multichart = false) {
let pointer = { let pointer = {
lineStyle: { lineStyle: {
...@@ -419,32 +387,7 @@ function setAxisPointer(multichart = false) { ...@@ -419,32 +387,7 @@ function setAxisPointer(multichart = false) {
return pointer; return pointer;
} }
//#endregion function setSeriesArea(series, seriesData, isArea) {
//#region SUB FUNCTIONS FOR SERIES
function setMarkLine(series, seriesData, markLine) {
if(seriesData.markLine !== undefined && ['min', 'max', 'average'].includes(markLine)) {
series.markLine = {
data: [{
type: seriesData.markLine,
name: seriesData.markLine[0].toUpperCase() + seriesData.markLine.substring(1),
}]
};
} else if(markLine != null && ['min', 'max', 'average'].includes(markLine)) {
series.markLine = {
data: [{
type: markLine,
name: markLine[0].toUpperCase() + markLine.substring(1),
}]
};
}
}
function setArea(series, seriesData, isArea) {
let area = seriesData.isArea ?? isArea; let area = seriesData.isArea ?? isArea;
...@@ -455,24 +398,4 @@ function setArea(series, seriesData, isArea) { ...@@ -455,24 +398,4 @@ function setArea(series, seriesData, isArea) {
} }
//#endregion //#endregion
function setResizeEvent(chartElement, chartInstance) {
// Resize function
let triggerChartResize = function() {
chartElement && chartInstance.resize();
};
// On sidebar width change
let sidebarToggle = document.querySelector('.sidebar-control');
sidebarToggle && sidebarToggle.addEventListener('click', triggerChartResize);
// On window resize
let resizeCharts;
window.addEventListener('resize', function() {
clearTimeout(resizeCharts);
resizeCharts = setTimeout(function () {
triggerChartResize();
}, 200);
});
}
$(document).ready(function() { set_chart(); }); $(document).ready(function() { set_chart(); });
\ No newline at end of file
src/Views/Limitless/Linechart/Config.php
View file @ 91dd48ef
...@@ -47,6 +47,7 @@ ...@@ -47,6 +47,7 @@
{ {
$this->assetAllocation = [ $this->assetAllocation = [
'Limitless::LineChart' => [ 'Limitless::LineChart' => [
'../../../Managers/ChartManager/ChartManager.js',
'Attachments/linechart.init.js', 'Attachments/linechart.init.js',
secure_url('/ceetrox/sidekick/resource/public/Webdesigns/design-limitless/Template/global_assets/js/plugins/visualization/echarts/echarts.min.js'), secure_url('/ceetrox/sidekick/resource/public/Webdesigns/design-limitless/Template/global_assets/js/plugins/visualization/echarts/echarts.min.js'),
] ]
......
src/Views/Limitless/Linechart/Documentation/Index.blade.php
View file @ 91dd48ef
...@@ -8,6 +8,8 @@ ...@@ -8,6 +8,8 @@
$chartDataManager = SidekickLineChartDataManager::getInstance(); $chartDataManager = SidekickLineChartDataManager::getInstance();
// or $chartDataManager = new SidekickLineChartDataManager(); // or $chartDataManager = new SidekickLineChartDataManager();
$chartDataManager->setMarkLine('average');
// accepts string or array. // accepts string or array.
$chartDataManager->addCategories('Mon'); $chartDataManager->addCategories('Mon');
$chartDataManager->addCategories(['Tue', 'Wed', 'Thu', 'Fri']); $chartDataManager->addCategories(['Tue', 'Wed', 'Thu', 'Fri']);
......
src/Views/Limitless/Piechart/Attachments/piechart.init.js
View file @ 91dd48ef
let chartManager = new ChartManager();
//#region MAIN FUNCTIONS //#region MAIN FUNCTIONS
function set_chart() { function set_chart() {
if (typeof echarts == 'undefined') { if(chartManager.isModuleSet() == false) return;
console.warn('Warning - echarts.min.js is not loaded.');
return;
}
let chartCounter = 0; let chartCounter = 0;
...@@ -19,7 +18,6 @@ function set_chart() { ...@@ -19,7 +18,6 @@ function set_chart() {
}); });
} }
function init_chart(chartId) { function init_chart(chartId) {
// Define element // Define element
...@@ -30,34 +28,19 @@ function init_chart(chartId) { ...@@ -30,34 +28,19 @@ function init_chart(chartId) {
let elementObject = $(chartElement); let elementObject = $(chartElement);
let chartInstance = echarts.init(chartElement); let chartInstance = echarts.init(chartElement);
chartInstance.showLoading({ chartInstance.showLoading(chartManager.defaultLoadingOptions);
text: 'LADE DATEN',
maskColor: '#353f53',
color: '#fff',
textColor: '#fff',
fontSize: 15
});
set_data(elementObject, function(options) { set_data(elementObject, function(options) {
chartInstance.hideLoading(); chartInstance.hideLoading();
chartInstance.setOption(options); chartInstance.setOption(options);
setResizeEvent(chartElement, chartInstance); chartManager.setResizeEvent(chartElement, chartInstance);
}) })
} }
} }
function set_data(elementObject, callback) { function set_data(elementObject, callback) {
setTimeout(function() { setTimeout(function() {
const defaultColors = [
'#2ec7c9','#b6a2de','#5ab1ef','#ffb980','#d87a80',
'#8d98b3','#e5cf0d','#97b552','#95706d','#dc69aa',
'#07a2a4','#9a7fd1','#588dd5','#f5994e','#c05050',
'#59678c','#c9ab00','#7eb00a','#6f5553','#c14089',
'#66bb6a'
];
let options; let options;
let objectData = elementObject.attr('data') ? JSON.parse(elementObject.attr('data')) : null; let objectData = elementObject.attr('data') ? JSON.parse(elementObject.attr('data')) : null;
...@@ -72,12 +55,9 @@ function set_data(elementObject, callback) { ...@@ -72,12 +55,9 @@ function set_data(elementObject, callback) {
let showLabel = objectData?.label ?? ((elementObject.attr('label') == 'true' || elementObject.attr('label') == true)); let showLabel = objectData?.label ?? ((elementObject.attr('label') == 'true' || elementObject.attr('label') == true));
let labelOnEmphasis = objectData?.labelOnEmphasis ?? ((elementObject.attr('emphasis-label') == 'true' || elementObject.attr('emphasis-label') == true)); let labelOnEmphasis = objectData?.labelOnEmphasis ?? ((elementObject.attr('emphasis-label') == 'true' || elementObject.attr('emphasis-label') == true));
let colors = objectData?.colors ?? (JSON.parse(elementObject.attr('colors')) ?? defaultColors); let series = chartManager.getChartSeries(objectData, elementObject);
let animationDuration = objectData?.animationDuration ?? (elementObject.attr('animation-duration') ?? 750);
let series = objectData?.series ?? (JSON.parse(elementObject.attr('series')) ?? null);
let nested = (Array.isArray(series) && series.length > 1) ?? false; let nested = (Array.isArray(series) && series.length > 1) ?? false;
if(Array.isArray(series) && series.length == 1) series = series[0]; // if series is array and has only one object then set first if(Array.isArray(series) && series.length == 1) series = series[0]; // if series is array and has only one object then set first
let seriesNames = setSeriesNames(series, nested); let seriesNames = setSeriesNames(series, nested);
...@@ -90,13 +70,13 @@ function set_data(elementObject, callback) { ...@@ -90,13 +70,13 @@ function set_data(elementObject, callback) {
title: setTitle(title, subtitle), title: setTitle(title, subtitle),
// Define colors // Define colors
color: colors, color: chartManager.getColors(objectData, elementObject),
// Global text styles // Global text styles
textStyle: setGlobalTextStyle(), textStyle: chartManager.defaultGlobalTextStyle,
// Chart animation duration // Chart animation duration
animationDuration: animationDuration, animationDuration: chartManager.getAnimationDuration(objectData, elementObject),
// Add legend // Add legend
legend: setLegend(seriesNames), legend: setLegend(seriesNames),
...@@ -117,7 +97,6 @@ function set_data(elementObject, callback) { ...@@ -117,7 +97,6 @@ function set_data(elementObject, callback) {
}, 1000); }, 1000);
} }
//#endregion //#endregion
//#region FUNCTIONS FOR OPTIONS //#region FUNCTIONS FOR OPTIONS
...@@ -159,7 +138,6 @@ function setSeries(series, pieType, showLabel, labelOnEmphasis) { ...@@ -159,7 +138,6 @@ function setSeries(series, pieType, showLabel, labelOnEmphasis) {
return data; return data;
} }
function setNestedSeries(series, showLabel, labelOnEmphasis) { function setNestedSeries(series, showLabel, labelOnEmphasis) {
if(!series || series.length == 0) return []; if(!series || series.length == 0) return [];
...@@ -212,7 +190,6 @@ function setNestedSeries(series, showLabel, labelOnEmphasis) { ...@@ -212,7 +190,6 @@ function setNestedSeries(series, showLabel, labelOnEmphasis) {
return data; return data;
} }
function setSeriesNames(series, nested) { function setSeriesNames(series, nested) {
if(series.length == 0) return null; if(series.length == 0) return null;
...@@ -230,7 +207,6 @@ function setSeriesNames(series, nested) { ...@@ -230,7 +207,6 @@ function setSeriesNames(series, nested) {
return series.data.map(function(item){ return item.name }); return series.data.map(function(item){ return item.name });
} }
} }
function setLegend(legendData) { function setLegend(legendData) {
return { return {
orient: 'vertical', orient: 'vertical',
...@@ -244,7 +220,6 @@ function setLegend(legendData) { ...@@ -244,7 +220,6 @@ function setLegend(legendData) {
} }
} }
} }
function setTitle(title, subtitle) { function setTitle(title, subtitle) {
if(title == null) return null; if(title == null) return null;
...@@ -265,7 +240,6 @@ function setTitle(title, subtitle) { ...@@ -265,7 +240,6 @@ function setTitle(title, subtitle) {
} }
} }
function setTooltip() { function setTooltip() {
return { return {
trigger: 'item', trigger: 'item',
...@@ -279,34 +253,6 @@ function setTooltip() { ...@@ -279,34 +253,6 @@ function setTooltip() {
formatter: "{a} <br/>{b}: {c} ({d}%)" formatter: "{a} <br/>{b}: {c} ({d}%)"
} }
} }
function setGlobalTextStyle() {
return {
fontFamily: 'Roboto, Arial, Verdana, sans-serif',
fontSize: 13
};
}
//#endregion //#endregion
function setResizeEvent(chartElement, chartInstance) {
// Resize function
let triggerChartResize = function() {
chartElement && chartInstance.resize();
};
// On sidebar width change
let sidebarToggle = document.querySelector('.sidebar-control');
sidebarToggle && sidebarToggle.addEventListener('click', triggerChartResize);
// On window resize
let resizeCharts;
window.addEventListener('resize', function() {
clearTimeout(resizeCharts);
resizeCharts = setTimeout(function () {
triggerChartResize();
}, 200);
});
}
$(document).ready(function() { set_chart(); }); $(document).ready(function() { set_chart(); });
\ No newline at end of file
src/Views/Limitless/Piechart/Config.php
View file @ 91dd48ef
...@@ -47,6 +47,7 @@ ...@@ -47,6 +47,7 @@
{ {
$this->assetAllocation = [ $this->assetAllocation = [
'Limitless::PieChart' => [ 'Limitless::PieChart' => [
'../../../Managers/ChartManager/ChartManager.js',
'Attachments/piechart.init.js', 'Attachments/piechart.init.js',
secure_url('/ceetrox/sidekick/resource/public/Webdesigns/design-limitless/Template/global_assets/js/plugins/visualization/echarts/echarts.min.js'), secure_url('/ceetrox/sidekick/resource/public/Webdesigns/design-limitless/Template/global_assets/js/plugins/visualization/echarts/echarts.min.js'),
] ]
......
src/Views/Limitless/Piechart/Documentation/Index.blade.php
View file @ 91dd48ef
...@@ -154,7 +154,7 @@ ...@@ -154,7 +154,7 @@
<div class="row"> <div class="row">
<div class="col-xl-6"> <div class="col-xl-6">
@Limitless::CardStart(['title' => "Basic Pie Setup", 'icon' => 'icon-info22' ] ) @Limitless::CardStart(['title' => "Basic Pie Setup using Chart Manager Object", 'icon' => 'icon-info22' ] )
@Limitless::PieChart([ @Limitless::PieChart([
'data' => $dataObject 'data' => $dataObject
]) ])
......
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