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 {
private ?string $rawData;
private ?bool $isStacked;
private ?bool $markLine;
private ?string $markLine;
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
function set_chart() {
if (typeof echarts == 'undefined') {
console.warn('Warning - echarts.min.js is not loaded.');
return;
}
if(chartManager.isModuleSet() == false) return;
let chartCounter = 0;
......@@ -19,7 +18,6 @@ function set_chart() {
});
}
function init_chart(chartId) {
// Define element
......@@ -31,34 +29,19 @@ function init_chart(chartId) {
let chartInstance = echarts.init(chartElement);
chartInstance.showLoading({
text: 'LADE DATEN',
maskColor: '#353f53',
color: '#fff',
textColor: '#fff',
fontSize: 15
});
chartInstance.showLoading(chartManager.defaultLoadingOptions);
set_data(elementObject, function(options) {
chartInstance.hideLoading();
chartInstance.setOption(options);
setResizeEvent(chartElement, chartInstance);
chartManager.setResizeEvent(chartElement, chartInstance);
})
}
}
function set_data(elementObject, callback) {
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 objectData = elementObject.attr('data') ? JSON.parse(elementObject.attr('data')) : null;
......@@ -73,16 +56,13 @@ function set_data(elementObject, callback) {
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 colors = objectData?.colors ?? (JSON.parse(elementObject.attr('colors')) ?? defaultColors);
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 yAxisLabelValueFormat = chartManager.getYAxisLabelValueFormat(objectData, elementObject);
let stacked = objectData?.stacked ?? ((elementObject.attr('stacked') == 'true' || elementObject.attr('stacked') == true) ?? false); // series data option
let markLine = objectData?.markLine ?? (elementObject.attr('mark-line') ?? null); // min | max | average - series data option
let stacked = chartManager.getSeriesStacked(objectData, elementObject);
let markLine = chartManager.getSeriesMarkLine(objectData, elementObject);
let categories = objectData?.categories ?? (JSON.parse(elementObject.attr('categories')) ?? null);
let series = objectData?.series ?? (JSON.parse(elementObject.attr('series')) ?? null);
let categories = chartManager.getChartCategories(objectData, elementObject);
let series = chartManager.getChartSeries(objectData, elementObject);
let seriesNames = series && series.map(function(item){ return item.name });
let seriesObject = setSeries(series, stacked, markLine, showBarValues, horizontal);
......@@ -94,13 +74,13 @@ function set_data(elementObject, callback) {
title: setTitle(title),
// Define colors
color: colors,
color: chartManager.getColors(objectData, elementObject),
// Global text styles
textStyle: setGlobalTextStyle(),
textStyle: chartManager.defaultGlobalTextStyle,
// Chart animation duration
animationDuration: animationDuration,
animationDuration: chartManager.getAnimationDuration(objectData, elementObject),
// Setup grid
grid: setGrid(),
......@@ -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);
......@@ -168,7 +148,6 @@ function setSeries(seriesData, stacked, markLine, showBarValues, horizontal = fa
return seriesArray;
}
function setXAxis(categories) {
let x = {
......@@ -196,7 +175,6 @@ function setXAxis(categories) {
return x;
}
function setYAxis(yAxisLabelValueFormat) {
return {
......@@ -223,7 +201,6 @@ function setYAxis(yAxisLabelValueFormat) {
}
};
}
function setLegend(legendData) {
return {
data: legendData,
......@@ -234,7 +211,6 @@ function setLegend(legendData) {
}
}
}
function setTitle(title) {
if(title == null) return null;
......@@ -247,7 +223,6 @@ function setTitle(title) {
}
}
function setTooltip() {
return {
trigger: 'axis',
......@@ -266,7 +241,6 @@ function setTooltip() {
}
}
}
function setGrid() {
return {
......@@ -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
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(); });
\ No newline at end of file
src/Views/Limitless/Barchart/Config.php
View file @ 91dd48ef
......@@ -48,6 +48,7 @@
{
$this->assetAllocation = [
'Limitless::BarChart' => [
'../../../Managers/ChartManager/ChartManager.js',
'Attachments/barchart.init.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
function set_chart() {
if (typeof echarts == 'undefined') {
console.warn('Warning - echarts.min.js is not loaded.');
return;
}
if(chartManager.isModuleSet() == false) return;
let chartCounter = 0;
......@@ -19,7 +18,6 @@ function set_chart() {
});
}
function init_chart(chartId) {
// Define element
......@@ -37,34 +35,20 @@ function init_chart(chartId) {
let chartInstance = echarts.init(chartElement);
chartInstance.showLoading({
text: 'LADE DATEN',
maskColor: '#353f53',
color: '#fff',
textColor: '#fff',
fontSize: 15
});
chartInstance.showLoading(chartManager.defaultLoadingOptions);
set_data(objectData, elementObject, numberOfCharts, function(options) {
chartInstance.hideLoading();
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) {
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 = [
'#2ec7c9','#b6a2de','#5ab1ef','#ffb980','#d87a80',
'#8d98b3','#e5cf0d','#97b552','#95706d','#dc69aa',
'#07a2a4','#9a7fd1','#588dd5','#f5994e','#c05050',
'#59678c','#c9ab00','#7eb00a','#6f5553','#c14089',
'#66bb6a'
];
setTimeout(function() {
let options;
let rawData = objectData?.rawData ?? (elementObject.attr('raw') ? JSON.parse(elementObject.attr('raw')) : null);
......@@ -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 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 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 yAxisLabelValueFormat = chartManager.getYAxisLabelValueFormat(objectData, elementObject);
let stacked = objectData?.stacked ?? ((elementObject.attr('stacked') == 'true' || elementObject.attr('stacked') == true) ?? false); // series data options
let markLine = objectData?.markLine ?? (elementObject.attr('mark-line') ?? null); // min | max | average - series data options
let stacked = chartManager.getSeriesStacked(objectData, elementObject);
let markLine = chartManager.getSeriesMarkLine(objectData, elementObject);
let categories = objectData?.categories ?? (JSON.parse(elementObject.attr('categories')) ?? null);
let series = objectData?.series ?? (JSON.parse(elementObject.attr('series')) ?? null);
let categories = chartManager.getChartCategories(objectData, elementObject);
let series = chartManager.getChartSeries(objectData, elementObject);
let seriesNames = series && series.map(function(item){ return item.name });
let seriesObject = setSeries(series, stacked, markLine, showPointValues, isArea);
......@@ -104,13 +85,13 @@ function set_data(objectData, elementObject, numberOfCharts, callback) {
title: setTitles(titles, numberOfCharts),
// Define colors
color: colors,
color: chartManager.getColors(objectData, elementObject),
// Global text styles
textStyle: setGlobalTextStyle(),
textStyle: chartManager.defaultGlobalTextStyle,
// Chart animation duration
animationDuration: animationDuration,
animationDuration: chartManager.getAnimationDuration(objectData, elementObject),
// Setup grid
grid: setGrid(showDataZoom, numberOfCharts),
......@@ -147,7 +128,6 @@ function set_data(objectData, elementObject, numberOfCharts, callback) {
}, 1000);
}
function set_chart_height(numberOfCharts, chartElement) {
// adjust container height before initialising the chart.
......@@ -161,7 +141,6 @@ function set_chart_height(numberOfCharts, chartElement) {
//#endregion
//#region FUNCTIONS FOR OPTIONS
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.
......@@ -195,8 +174,8 @@ function setSeries(seriesData, stacked, markLine, showPointValues, isArea) {
yAxisIndex: seriesData[i].index ?? 0
}
setMarkLine(series, seriesData[i], markLine);
setArea(series, seriesData[i], isArea);
chartManager.setSeriesMarkLine(series, seriesData[i], markLine);
setSeriesArea(series, seriesData[i], isArea);
seriesArray.push(series);
......@@ -204,7 +183,6 @@ function setSeries(seriesData, stacked, markLine, showPointValues, isArea) {
return seriesArray;
}
function setXAxis(categories, boundaryGap = true, numberOfCharts = 1) {
let xAxisArray = [];
......@@ -238,7 +216,6 @@ function setXAxis(categories, boundaryGap = true, numberOfCharts = 1) {
return xAxisArray;
}
function setYAxis(yAxisLabelValueFormat, numberOfCharts = 1) {
let yAxisArray = [];
......@@ -274,9 +251,10 @@ function setYAxis(yAxisLabelValueFormat, numberOfCharts = 1) {
return yAxisArray;
}
// disabled when multichart is true
function setLegend(legendData, multichart = false) {
// disabled when multichart is true
return multichart ? null : {
data: legendData,
itemHeight: 8,
......@@ -286,7 +264,6 @@ function setLegend(legendData, multichart = false) {
}
}
}
function setTitles(titles, numberOfCharts = 1) {
// if not array.
......@@ -324,9 +301,10 @@ function setTitles(titles, numberOfCharts = 1) {
return arrayTitles;
}
// disabled when multichart is true
function setDataZoom(show, multichart = false) {
// disabled when multichart is true
return multichart ? null : [
{
type: 'inside',
......@@ -356,7 +334,6 @@ function setDataZoom(show, multichart = false) {
}
]
}
function setTooltip() {
return {
trigger: 'axis',
......@@ -369,7 +346,6 @@ function setTooltip() {
}
}
}
function setGrid(showDataZoom = false, numberOfCharts = 1) {
let arrayGrids = [];
......@@ -396,14 +372,6 @@ function setGrid(showDataZoom = false, numberOfCharts = 1) {
return arrayGrids;
}
function setGlobalTextStyle() {
return {
fontFamily: 'Roboto, Arial, Verdana, sans-serif',
fontSize: 13
};
}
function setAxisPointer(multichart = false) {
let pointer = {
lineStyle: {
......@@ -419,32 +387,7 @@ function setAxisPointer(multichart = false) {
return pointer;
}
//#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),
}]
};
}
}
function setArea(series, seriesData, isArea) {
function setSeriesArea(series, seriesData, isArea) {
let area = seriesData.isArea ?? isArea;
......@@ -455,24 +398,4 @@ function setArea(series, seriesData, isArea) {
}
//#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(); });
\ No newline at end of file
src/Views/Limitless/Linechart/Config.php
View file @ 91dd48ef
......@@ -47,6 +47,7 @@
{
$this->assetAllocation = [
'Limitless::LineChart' => [
'../../../Managers/ChartManager/ChartManager.js',
'Attachments/linechart.init.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 @@
$chartDataManager = SidekickLineChartDataManager::getInstance();
// or $chartDataManager = new SidekickLineChartDataManager();
$chartDataManager->setMarkLine('average');
// accepts string or array.
$chartDataManager->addCategories('Mon');
$chartDataManager->addCategories(['Tue', 'Wed', 'Thu', 'Fri']);
......
src/Views/Limitless/Piechart/Attachments/piechart.init.js
View file @ 91dd48ef
let chartManager = new ChartManager();
//#region MAIN FUNCTIONS
function set_chart() {
if (typeof echarts == 'undefined') {
console.warn('Warning - echarts.min.js is not loaded.');
return;
}
if(chartManager.isModuleSet() == false) return;
let chartCounter = 0;
......@@ -19,7 +18,6 @@ function set_chart() {
});
}
function init_chart(chartId) {
// Define element
......@@ -30,34 +28,19 @@ function init_chart(chartId) {
let elementObject = $(chartElement);
let chartInstance = echarts.init(chartElement);
chartInstance.showLoading({
text: 'LADE DATEN',
maskColor: '#353f53',
color: '#fff',
textColor: '#fff',
fontSize: 15
});
chartInstance.showLoading(chartManager.defaultLoadingOptions);
set_data(elementObject, function(options) {
chartInstance.hideLoading();
chartInstance.setOption(options);
setResizeEvent(chartElement, chartInstance);
chartManager.setResizeEvent(chartElement, chartInstance);
})
}
}
function set_data(elementObject, callback) {
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 objectData = elementObject.attr('data') ? JSON.parse(elementObject.attr('data')) : null;
......@@ -72,12 +55,9 @@ function set_data(elementObject, callback) {
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 colors = objectData?.colors ?? (JSON.parse(elementObject.attr('colors')) ?? defaultColors);
let animationDuration = objectData?.animationDuration ?? (elementObject.attr('animation-duration') ?? 750);
let series = objectData?.series ?? (JSON.parse(elementObject.attr('series')) ?? null);
let series = chartManager.getChartSeries(objectData, elementObject);
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
let seriesNames = setSeriesNames(series, nested);
......@@ -90,13 +70,13 @@ function set_data(elementObject, callback) {
title: setTitle(title, subtitle),
// Define colors
color: colors,
color: chartManager.getColors(objectData, elementObject),
// Global text styles
textStyle: setGlobalTextStyle(),
textStyle: chartManager.defaultGlobalTextStyle,
// Chart animation duration
animationDuration: animationDuration,
animationDuration: chartManager.getAnimationDuration(objectData, elementObject),
// Add legend
legend: setLegend(seriesNames),
......@@ -117,7 +97,6 @@ function set_data(elementObject, callback) {
}, 1000);
}
//#endregion
//#region FUNCTIONS FOR OPTIONS
......@@ -159,7 +138,6 @@ function setSeries(series, pieType, showLabel, labelOnEmphasis) {
return data;
}
function setNestedSeries(series, showLabel, labelOnEmphasis) {
if(!series || series.length == 0) return [];
......@@ -212,7 +190,6 @@ function setNestedSeries(series, showLabel, labelOnEmphasis) {
return data;
}
function setSeriesNames(series, nested) {
if(series.length == 0) return null;
......@@ -230,7 +207,6 @@ function setSeriesNames(series, nested) {
return series.data.map(function(item){ return item.name });
}
}
function setLegend(legendData) {
return {
orient: 'vertical',
......@@ -244,7 +220,6 @@ function setLegend(legendData) {
}
}
}
function setTitle(title, subtitle) {
if(title == null) return null;
......@@ -265,7 +240,6 @@ function setTitle(title, subtitle) {
}
}
function setTooltip() {
return {
trigger: 'item',
......@@ -279,34 +253,6 @@ function setTooltip() {
formatter: "{a} <br/>{b}: {c} ({d}%)"
}
}
function setGlobalTextStyle() {
return {
fontFamily: 'Roboto, Arial, Verdana, sans-serif',
fontSize: 13
};
}
//#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(); });
\ No newline at end of file
src/Views/Limitless/Piechart/Config.php
View file @ 91dd48ef
......@@ -47,6 +47,7 @@
{
$this->assetAllocation = [
'Limitless::PieChart' => [
'../../../Managers/ChartManager/ChartManager.js',
'Attachments/piechart.init.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 @@
<div class="row">
<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([
'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