/**
* @namespace flexygo.ui.wc
*/
var flexygo;
(function (flexygo) {
var ui;
(function (ui) {
var wc;
(function (wc) {
/**
* Library for the flx-chartElement web component.
*
* @class FlxChartElement
* @constructor
* @return {FlxChartElement} .
*/
class FlxChartElement extends HTMLElement {
constructor() {
super();
/**
* Set when component is attached to DOM
* @property connected {boolean}
*/
this.connected = false;
this.moduleName = null;
this.additionalWhere = '';
this.data = null;
}
/**
* Fires when element is attached to DOM
* @method connectedCallback
*/
connectedCallback() {
let element = $(this);
this.connected = true;
this.moduleName = element.attr("modulename");
this.data = element.attr('value');
this.additionalWhere = element.attr('additionalwhere');
if (element.attr('manualInit') != 'true') {
this.init();
}
}
/**
* Array of observed attributes.
* @property observedAttributes {Array}
*/
static get observedAttributes() {
return ['modulename', 'value', 'additionalwhere'];
}
/**
* Fires when the attribute value of the element is changed.
* @method attributeChangedCallback
*/
attributeChangedCallback(attrName, oldVal, newVal) {
if (!this.connected) {
return;
}
if (attrName.toLowerCase() == 'modulename' && newVal && newVal != '') {
this.moduleName = newVal;
if (this.moduleName) {
this.refresh();
}
}
if (attrName.toLowerCase() == 'value' && newVal && newVal != '') {
this.data = newVal;
if (this.data) {
this.refresh();
}
}
if (attrName.toLowerCase() == 'additionalwhere' && newVal && newVal != '') {
this.additionalWhere = newVal;
this.refresh();
}
}
/**
* Refresh de webcomponent.
* @method refresh
*/
refresh() {
let me = $(this);
let params = {
ObjectName: (me.attr('ObjectName') ? me.attr('ObjectName') : null),
ObjectWhere: (me.attr('ObjectWhere') ? me.attr('ObjectWhere') : null),
AdditionalWhere: this.additionalWhere,
ModuleName: me.attr('ModuleName'),
PageName: flexygo.history.getPageName(me)
};
flexygo.storage.cache.remove('chart', params);
if ($(this).attr('manualInit') != 'true') {
this.init();
}
}
/**
* Init the webcomponent.
* @method init
*/
init() {
let me = $(this);
let width = 0;
let height = 0;
me.removeAttr('manualInit');
let parentModule = me.closest('flx-module');
let wcModule = parentModule[0];
if (parentModule && wcModule) {
wcModule.moduleLoaded(this);
}
if (me.attr('width') && me.attr('width') != '') {
width = parseInt(me.attr('width'));
}
if (me.attr('height') && me.attr('height') != '') {
height = parseInt(me.attr('height'));
}
me.html('<div><canvas height=' + height + ' width=' + width + ' position:absolute;"></canvas></div>');
let params = {
ObjectName: (me.attr('ObjectName') ? me.attr('ObjectName') : null),
ObjectWhere: (me.attr('ObjectWhere') ? me.attr('ObjectWhere') : null),
AdditionalWhere: this.additionalWhere,
ModuleName: me.attr('ModuleName'),
PageName: flexygo.history.getPageName(me)
};
/** Read Cache **/
let cacheResponse = flexygo.storage.cache.get('chart', params);
/** If Cache use cache**/
if (cacheResponse) {
this.preRender(cacheResponse.response);
}
else {
flexygo.ajax.post('~/api/Chart', 'GetHTML', params, (response) => {
if (response) {
flexygo.storage.cache.add('chart', params, response, response.Cache);
this.preRender(response);
}
}, null, () => { this.stopLoading(); }, () => { this.startLoading(); });
}
}
/**
* prepares chart for render based on response saved in session o received from post
* @method preRender
*/
preRender(response) {
let me = $(this);
if (response) {
this.data = response.Values[0];
if (!this.data || this.data.length == 0) {
me.html('<div class="box-info"><i class="flx-icon icon-information-2 icon-lg icon-margin-right"></i><span><strong>Info!</strong> ' + flexygo.localization.translate('flxlist.noentriesfound') + '</span></div>');
return;
}
this.dataColum = response.Values[1];
this.settings = response.Settings;
if (response.Options) {
this.options = JSON.parse(response.Options);
}
this.Title = response.Title;
this.Labels = response.Labels;
this.Series = response.Series;
this.Values = response.Value;
this.Params = response.Params;
this.type = response.ChartType;
this.Background = response.ChartBackground;
this.Border = response.ChartBorder;
this.render();
}
}
/**
* Renders the chart
* @method render
*/
render() {
let me = $(this);
let name = '';
if (me.attr('type') && me.attr('type') != '') {
this.type = me.attr('type');
}
if (me.attr('name') && me.attr('name') != '') {
name = me.attr('name');
}
if (me.attr('data') && me.attr('data') != '') {
var dataJSON = me.attr('data');
}
if (me.attr('options') && me.attr('options') != '') {
var optionsJSON = me.attr('options');
}
let options = {
Showlabels: this.settings.ShowLabels,
ShowLegend: this.settings.ShowLegend,
ShowTitle: this.settings.ShowTitle,
LegendPos: this.settings.LegendPos.toLowerCase(),
ToolTipBackgroundColor: this.settings.ToolTipBackgroundColor,
Title: this.Title,
TitleFontSize: this.settings.TitleFontSize,
TitleFontColor: this.settings.TitleFontColor,
TitlePosition: this.settings.TitlePosition.toLowerCase(),
TitleFontStyle: this.settings.TitleFontStyle,
Responsive: this.settings.Responsive,
AnimationDuration: 100,
Colors: this.settings.Colors.split("|"),
ColorsBackground: this.settings.BorderColors.split("|"),
MinXAxes: this.settings.MinXAxes,
MinYAxes: this.settings.MinYAxes,
};
//var JSONoptions = JSON.stringify(options);
//if (ctx.params) {
// JSONoptions = JSONoptions.substring(0, JSONoptions.length - 1);
// JSONoptions += "," + ctx.params + "}";
// options = JSON.parse(JSONoptions);
//}
var dataBar = {
labels: ["January", "February", "March", "April", "May", "June", "July"],
datasets: [{
label: 'Dataset 1',
backgroundColor: "rgba(220,220,220,0.5)",
yAxisID: "y-axis-1",
data: [66, 87, 40, 39, 87, 70, 65]
}, {
label: 'Dataset 2',
backgroundColor: "rgba(151,187,205,0.5)",
yAxisID: "y-axis-2",
data: [50, 57, 70, 35, 76, 87, 58]
}, {
label: 'Dataset 3',
backgroundColor: 'rgba(151,187,205,1)',
yAxisID: "y-axis-1",
data: [70, 66, 78, 40, 85, 70, 45]
}]
};
var dataforLineEx = {
labels: ['Data 1', 'Data 2', 'Data 3', 'Data 4',
'Data 5', 'Data 6', 'Data 7'],
datasets: [{
fillColor: 'rgba(0,0,0,0)',
backgroundColor: 'rgba(151,187,205,0.5)',
borderColor: 'rgba(151,187,205,0.5)',
data: [60, 10, 40, 30, 80, 30, 20]
}, {
fillColor: 'rgba(0,0,0,0)',
backgroundColor: "rgba(220,220,220,0.7)",
borderColor: "rgba(220,220,220,0.7)",
data: [20, 30, 80, 20, 40, 10, 60]
}]
};
var dataBubbleEx = {
datasets: [
{
label: 'Bubble Chart',
data: [
{
x: 20,
y: 30,
r: 5
},
{
x: 30,
y: 20,
r: 15
},
{
x: 33,
y: 19,
r: 5
},
{
x: 25,
y: 18,
r: 20
},
{
x: 40,
y: 10,
r: 10
}
],
backgroundColor: 'rgba(151,187,205,1)',
hoverBackgroundColor: 'rgba(151,187,205,1)',
}
]
};
var dataforDoughnutEx = {
labels: [
"Blue",
"Red",
"Grey"
],
datasets: [
{
data: [300, 50, 100],
backgroundColor: [
'rgba(151,187,205,1)',
"rgb(153, 38, 0)",
"rgba(220,220,220,0.5)"
],
hoverBackgroundColor: [
'rgba(151,187,205,1)',
"rgb(153, 38, 0)",
"rgba(220,220,220,0.5)"
]
}
]
};
var dataRadar = {
labels: ["Eating", "Drinking", "Sleeping", "Designing", "Coding", "Cycling", "Running"],
datasets: [
{
label: "Radar data",
backgroundColor: "rgba(151,187,205,0.5)",
borderColor: "rgba(151,187,205,0.5)",
data: [65, 59, 90, 81, 56, 55, 40]
},
{
label: "Radar data 2",
backgroundColor: "rgba(220,220,220,0.7)",
borderColor: "rgba(220,220,220,0.7)",
data: [28, 48, 40, 19, 96, 27, 100]
}
]
};
var dataPolarArea = {
datasets: [{
data: [
11,
16,
15
],
backgroundColor: [
"rgba(151,187,205,0.5)",
"rgba(220,220,220,0.7)",
"rgba(153,0,0,0.45)"
],
borderColor: [
"rgba(151,187,205,0.5)",
"rgba(220,220,220,0.7)",
"rgba(153,0,0,0.1)"
],
label: 'PolarArea chart' // for legend
}],
labels: [
"Red",
"Green",
"Yellow",
"Grey",
"Blue"
]
};
let original = Chart.defaults.global.legend.onClick;
var optionsBubble = {
responsive: options.Responsive,
hoverMode: 'label',
hoverAnimationDuration: 400,
stacked: false,
title: {
display: options.ShowTitle,
position: options.TitlePosition,
fontColor: options.TitleFontColor,
fontFamily: options.TitleFontStyle,
fontSize: options.TitleFontSize,
text: options.Title
},
animation: {
animateScale: options.animateScale !== "False",
animateRotate: options.animateRotate !== "False",
duration: options.AnimationDuration
},
legend: {
position: options.LegendPos,
display: options.ShowLegend,
onClick: (e, p) => {
let original = Chart.defaults.global.legend.onClick;
let allPageCharts = me.closest('main').find('flx-chart[link-group="' + me.attr('link-group') + '"]');
if (this.options.GroupName) {
allPageCharts.each((i, e) => {
if (!$(e).is(me)) {
e.toggleLabel(p.text, null, this.options.GroupName);
}
});
}
else {
original.call(this, e, p);
}
}
},
elements: {
points: {
borderWidth: 1,
borderColor: 'rgb(0, 0, 0)'
}
},
scales: {
xAxes: [{
ticks: {
callback: function (value, index, values) {
return 'value is ' + value;
},
display: options.Showlabels
}
}],
yAxes: [{
ticks: {
callback: function (value, index, values) {
return 'value is ' + value;
},
display: options.Showlabels
}
}]
},
tooltips: {
backgroundColor: options.ToolTipBackgroundColor
}
};
var klkl;
var optionsLine = {
responsive: options.Responsive,
hoverMode: 'label',
hoverAnimationDuration: 400,
stacked: false,
title: {
display: options.ShowTitle,
position: options.TitlePosition,
fontColor: options.TitleFontColor,
fontFamily: options.TitleFontStyle,
fontSize: options.TitleFontSize,
text: options.Title
},
animation: {
animateScale: options.animateScale !== "False",
animateRotate: options.animateRotate !== "False",
duration: options.AnimationDuration
},
legend: {
position: options.LegendPos,
display: options.ShowLegend,
onClick: (e, p) => {
original.call(this, e, p);
var allPageCharts = me.closest('main').find('flx-chart');
if (this.options.GroupName) {
allPageCharts.each((i, e) => {
if (!$(e).is(me)) {
e.toggleLabel(p.text, null, this.options.GroupName);
}
});
}
}
},
scales: {
xAxes: [{
display: true,
ticks: {
display: options.Showlabels
}
}],
yAxes: [{
display: true,
ticks: {
display: options.Showlabels
}
}]
},
tooltips: {
backgroundColor: options.ToolTipBackgroundColor
},
pointDotRadius: 10,
bezierCurve: false,
scaleShowVerticalLines: false,
scaleGridLineColor: 'black'
};
var optionsDoughnut = {
responsive: options.Responsive,
hoverMode: 'label',
hoverAnimationDuration: 400,
stacked: false,
title: {
display: options.ShowTitle,
position: options.TitlePosition,
fontColor: options.TitleFontColor,
fontFamily: options.TitleFontStyle,
fontSize: options.TitleFontSize,
text: options.Title
},
animation: {
animateScale: options.animateScale !== "False",
animateRotate: options.animateRotate !== "False",
duration: options.AnimationDuration
},
legend: {
position: options.LegendPos,
display: options.ShowLegend,
onClick: (e, p) => {
original.call(this, e, p);
var allPageCharts = me.closest('main').find('flx-chart[link-group="' + me.attr('link-group') + '"]');
if (this.options.GroupName) {
allPageCharts.each((i, e) => {
if (!$(e).is(me)) {
e.toggleLabel(p.text, null, this.options.GroupName);
}
});
}
}
},
tooltips: {
backgroundColor: options.ToolTipBackgroundColor
},
};
var optionsPie = {
responsive: options.Responsive,
hoverMode: 'label',
hoverAnimationDuration: 400,
stacked: false,
title: {
display: options.ShowTitle,
position: options.TitlePosition,
fontColor: options.TitleFontColor,
fontFamily: options.TitleFontStyle,
fontSize: options.TitleFontSize,
text: options.Title
},
animation: {
animateScale: options.animateScale !== "False",
animateRotate: options.animateRotate !== "False",
duration: options.AnimationDuration
},
legend: {
position: options.LegendPos,
display: options.ShowLegend,
onClick: (e, p) => {
original.call(this, e, p);
var allPageCharts = me.closest('main').find('flx-chart[link-group="' + me.attr('link-group') + '"]');
if (this.options.GroupName) {
allPageCharts.each((i, e) => {
if (!$(e).is(me)) {
e.toggleLabel(p.text, null, this.options.GroupName);
}
});
}
}
},
tooltips: {
backgroundColor: options.ToolTipBackgroundColor
},
cutoutPercentage: 0,
};
var optionsBar = {
responsive: options.Responsive,
hoverMode: 'label',
hoverAnimationDuration: 400,
stacked: false,
title: {
display: options.ShowTitle,
position: options.TitlePosition,
fontColor: options.TitleFontColor,
fontFamily: options.TitleFontStyle,
fontSize: options.TitleFontSize,
text: options.Title
},
animation: {
animateScale: options.animateScale !== "False",
animateRotate: options.animateRotate !== "False",
duration: options.AnimationDuration
},
legend: {
position: options.LegendPos,
display: options.ShowLegend,
onClick: (e, p) => {
original.call(this, e, p);
var allPageCharts = me.closest('main').find('flx-chart[link-group="' + me.attr('link-group') + '"]');
if (this.options.GroupName) {
allPageCharts.each((i, e) => {
if (!$(e).is(me)) {
e.toggleLabel(p.text, null, this.options.GroupName);
}
});
}
}
},
scales: {
xAxes: [{
ticks: {
min: options.MinXAxes,
display: options.Showlabels
}
}],
yAxes: [{
ticks: {
min: options.MinYAxes,
display: options.Showlabels
}
}]
},
tooltips: {
backgroundColor: options.ToolTipBackgroundColor
},
};
var optionsRadar = {
responsive: options.Responsive,
hoverMode: 'label',
hoverAnimationDuration: 400,
stacked: false,
title: {
display: options.ShowTitle,
position: options.TitlePosition,
fontColor: options.TitleFontColor,
fontFamily: options.TitleFontStyle,
fontSize: options.TitleFontSize,
text: options.Title
},
animation: {
animateScale: options.animateScale !== "False",
animateRotate: options.animateRotate !== "False",
duration: options.AnimationDuration
},
legend: {
position: options.LegendPos,
display: options.ShowLegend,
onClick: (e, p) => {
original.call(this, e, p);
var allPageCharts = me.closest('main').find('flx-chart[link-group="' + me.attr('link-group') + '"]');
if (this.options.GroupName) {
allPageCharts.each((i, e) => {
if (!$(e).is(me)) {
e.toggleLabel(p.text, null, this.options.GroupName);
}
});
}
}
},
scale: {
reverse: false,
ticks: {
beginAtZero: true
}
},
tooltips: {
backgroundColor: options.ToolTipBackgroundColor
},
};
var optionsPolarArea = {
responsive: options.Responsive,
hoverMode: 'label',
hoverAnimationDuration: 400,
stacked: false,
title: {
display: options.ShowTitle,
position: options.TitlePosition,
fontColor: options.TitleFontColor,
fontFamily: options.TitleFontStyle,
fontSize: options.TitleFontSize,
text: options.Title
},
animation: {
animateScale: options.animateScale !== "False",
animateRotate: options.animateRotate !== "False",
duration: options.AnimationDuration
},
legend: {
position: options.LegendPos,
display: options.ShowLegend,
onClick: (e, p) => {
original.call(this, e, p);
var allPageCharts = me.closest('main').find('flx-chart[link-group="' + me.attr('link-group') + '"]');
if (this.options.GroupName) {
allPageCharts.each((i, e) => {
if (!$(e).is(me)) {
e.toggleLabel(p.text, null, this.options.GroupName);
}
});
}
}
},
tooltips: {
backgroundColor: options.ToolTipBackgroundColor
},
elements: {
arc: {
borderColor: "#000000"
}
},
};
var ctxx = me.find('canvas');
var series = [];
var Datas = [];
var Background = [];
var Border = [];
var Label = [];
var inLa = 0, inSe = 1, inDa = null, inBa = 0, inBo = 0;
var Data = [];
var datasets = [];
try {
inLa = this.dataColum.indexOf(this.Labels);
inSe = this.dataColum.indexOf(this.Series);
inDa = this.dataColum.indexOf(this.Values);
inBa = this.dataColum.indexOf(this.Background);
inBo = this.dataColum.indexOf(this.Border);
}
catch (e) { }
for (let i in this.data) {
if (inLa >= 0) {
if (Label.indexOf(this.data[i][inLa]) == -1) {
Label.push(this.data[i][inLa]);
}
}
}
for (let i in this.data) {
if (inSe >= 0) {
if (series.indexOf(this.data[i][inSe]) == -1) {
series.push(this.data[i][inSe]);
}
}
}
for (let i in this.data) {
if (inBa >= 0) {
if (Background.indexOf(this.data[i][inBa]) == -1) {
Background.push(this.data[i][inBa]);
}
}
}
for (let i in this.data) {
if (inBo >= 0) {
if (Border.indexOf(this.data[i][inBo]) == -1) {
Border.push(this.data[i][inBo]);
}
}
}
if (Background.length > 0) {
options.ColorsBackground = Background;
}
if (Border.length > 0) {
options.Colors = Border;
}
for (let iu in series) {
Datas[iu] = [];
}
for (let u in this.data) {
var ind = series.indexOf(this.data[u][inSe]);
Datas[ind].push([this.data[u][inDa], this.data[u][inLa]]);
}
let Datasets = [];
let type = this.type;
switch (type) {
case 'line':
for (let o in series) {
let res = [Label.length];
for (let l in Label) {
res[l] = 0;
if (!Label[l]) {
Label[l] = '(Empty)';
}
}
let index = -1;
for (let h in Datas[o]) {
let nom = Datas[o][h][1];
let sum = ($.isNumeric(Datas[o][h][0])) ? parseFloat(Datas[o][h][0]) : 0;
index = Label.indexOf(nom);
res[index] = res[index] + sum;
}
let dataAux = {
label: series[o],
backgroundColor: options.ColorsBackground[o],
borderColor: options.Colors[o],
data: res
};
Datasets.push(dataAux);
}
if (Label[0]) {
dataforLineEx.labels = Label;
}
if (Datasets[0]) {
dataforLineEx.datasets = Datasets;
}
let linedata = dataforLineEx;
let lineoptions = optionsLine;
if (typeof dataJSON != 'undefined') {
let data = JSON.parse(dataJSON);
}
if (typeof optionsJSON != 'undefined') {
let options = JSON.parse(optionsJSON);
}
this.chart = new Chart(ctxx, {
type: type,
data: linedata,
options: lineoptions
});
break;
case 'bubble':
let bubbledata = dataBubbleEx;
let bubbleoptions = optionsBubble;
bubbledata.datasets[0].backgroundColor = options.ColorsBackground;
if (typeof dataJSON != 'undefined') {
let data = JSON.parse(dataJSON);
}
if (typeof optionsJSON != 'undefined') {
let options = JSON.parse(optionsJSON);
}
this.chart = new Chart(ctxx, {
type: type,
data: bubbledata,
options: bubbleoptions
});
break;
case 'doughnut':
for (let o in series) {
let res = [Label.length];
for (let l in Label) {
res[l] = 0;
if (!Label[l]) {
Label[l] = '(Empty)';
}
}
let index = -1;
for (let h in Datas[o]) {
let nom = Datas[o][h][1];
let sum = ($.isNumeric(Datas[o][h][0])) ? parseFloat(Datas[o][h][0]) : 0;
index = Label.indexOf(nom);
res[index] = res[index] + sum;
}
let dataAux = {
label: series[o],
backgroundColor: options.ColorsBackground,
borderColor: options.Colors,
data: res
};
Datasets.push(dataAux);
}
if (Label[0])
dataforDoughnutEx.labels = Label;
if (Datasets[0])
dataforDoughnutEx.datasets = Datasets;
let doughnutdata = dataforDoughnutEx;
let doughnutoptions = optionsDoughnut;
if (typeof dataJSON != 'undefined') {
let data = JSON.parse(dataJSON);
}
if (typeof optionsJSON != 'undefined') {
let options = JSON.parse(optionsJSON);
}
this.chart = new Chart(ctxx, {
type: type,
data: doughnutdata,
options: doughnutoptions
});
break;
case 'radar':
for (let o in series) {
let res = [Label.length];
for (let l in Label) {
res[l] = 0;
if (!Label[l]) {
Label[l] = '(Empty)';
}
}
let index = -1;
for (let h in Datas[o]) {
let nom = Datas[o][h][1];
let sum = ($.isNumeric(Datas[o][h][0])) ? parseFloat(Datas[o][h][0]) : 0;
index = Label.indexOf(nom);
res[index] = res[index] + sum;
}
let dataAux = {
label: series[o],
backgroundColor: options.ColorsBackground[o],
borderColor: options.Colors[o],
data: res
};
Datasets.push(dataAux);
}
if (Label[0])
dataRadar.labels = Label;
if (Datasets[0])
dataRadar.datasets = Datasets;
let radardata = dataRadar;
let radaroptions = optionsRadar;
if (typeof dataJSON != 'undefined') {
let data = JSON.parse(dataJSON);
}
if (typeof optionsJSON != 'undefined') {
let options = JSON.parse(optionsJSON);
}
this.chart = new Chart(ctxx, {
type: type,
data: radardata,
options: radaroptions
});
break;
case 'polarArea':
for (let o in series) {
let res = [Label.length];
for (let l in Label) {
res[l] = 0;
if (!Label[l]) {
Label[l] = '(Empty)';
}
}
let index = -1;
for (let h in Datas[o]) {
let nom = Datas[o][h][1];
let sum = ($.isNumeric(Datas[o][h][0])) ? parseFloat(Datas[o][h][0]) : 0;
index = Label.indexOf(nom);
res[index] = res[index] + sum;
}
let dataAux = {
label: series[o],
backgroundColor: options.ColorsBackground,
borderColor: options.Colors,
data: res
};
Datasets.push(dataAux);
}
if (Label[0])
dataPolarArea.labels = Label;
if (Datasets[0])
dataPolarArea.datasets = Datasets;
let polarAreadata = dataPolarArea;
let polarAreaoptions = optionsPolarArea;
if (typeof dataJSON != 'undefined') {
let data = JSON.parse(dataJSON);
}
if (typeof optionsJSON != 'undefined') {
let options = JSON.parse(optionsJSON);
}
this.chart = new Chart(ctxx, {
type: type,
data: polarAreadata,
options: polarAreaoptions
});
break;
case 'bar':
case 'horizontalBar':
for (let o in series) {
let res = [Label.length];
for (let l in Label) {
res[l] = 0;
if (!Label[l]) {
Label[l] = '(Empty)';
}
}
let index = -1;
for (let h in Datas[o]) {
let nom = Datas[o][h][1];
let sum = ($.isNumeric(Datas[o][h][0])) ? parseFloat(Datas[o][h][0]) : 0;
index = Label.indexOf(nom);
res[index] = res[index] + sum;
}
let dataAux = {
label: series[o],
backgroundColor: options.ColorsBackground[o],
borderColor: options.Colors[o],
data: res
};
Datasets.push(dataAux);
}
if (Label[0])
dataBar.labels = Label;
if (Datasets[0])
dataBar.datasets = Datasets;
let bardata = dataBar;
let baroptions = optionsBar;
if (typeof dataJSON != 'undefined') {
let data = JSON.parse(dataJSON);
}
if (typeof optionsJSON != 'undefined') {
let options = JSON.parse(optionsJSON);
}
this.chart = new Chart(ctxx, {
type: type,
data: bardata,
options: baroptions
});
break;
case 'pie':
for (let o in series) {
let res = [Label.length];
for (let l in Label) {
res[l] = 0;
if (!Label[l]) {
Label[l] = '(Empty)';
}
}
let index = -1;
for (let h in Datas[o]) {
let nom = Datas[o][h][1];
let sum = ($.isNumeric(Datas[o][h][0])) ? parseFloat(Datas[o][h][0]) : 0;
index = Label.indexOf(nom);
res[index] = res[index] + sum;
}
let dataAux = {
label: series[o],
backgroundColor: options.ColorsBackground,
borderColor: options.Colors,
data: res
};
Datasets.push(dataAux);
}
if (Label[0])
dataforDoughnutEx.labels = Label;
if (Datasets[0])
dataforDoughnutEx.datasets = Datasets;
let piedata = dataforDoughnutEx;
let pieoptions = optionsPie;
if (typeof dataJSON != 'undefined') {
let data = JSON.parse(dataJSON);
}
if (typeof optionsJSON != 'undefined') {
let options = JSON.parse(optionsJSON);
}
this.chart = new Chart(ctxx, {
type: type,
data: piedata,
options: pieoptions
});
break;
default:
break;
}
}
toggleLabel(nom, boo, GroupName, ctxx) {
let ci = this.chart;
let found;
let nombres = [];
for (let k in ci.data.datasets) {
nombres.push(ci.data.datasets[k].label);
}
let index = nombres.indexOf(nom);
if (index >= 0 && boo === true) {
let meta = ci.getDatasetMeta(index);
meta.hidden = null;
ci.update();
}
else if (index >= 0 && boo === false) {
let meta = ci.getDatasetMeta(index);
meta.hidden = !ci.data.datasets[index].hidden;
ci.update();
}
else if (index >= 0 && boo === null && this.options.GroupName == GroupName && GroupName != null) {
var meta = ci.getDatasetMeta(index);
meta.hidden = meta.hidden === null ? !ci.data.datasets[index].hidden : null;
ci.update();
}
}
/**
* Translate a string
* @method translate
* @param {string} str - The string to translate.
*/
translate(str) {
return flexygo.localization.translate(str);
}
/**
* Start loading
* @method startLoading
*/
startLoading() {
if ($(this).parents('flx-module').length > 0) {
$(this).parents('flx-module')[0].startLoading();
}
}
/**
* Stop loading
* @method stopLoading
*/
stopLoading() {
if ($(this).parents('flx-module').length > 0) {
$(this).parents('flx-module')[0].stopLoading();
}
}
}
wc.FlxChartElement = FlxChartElement;
})(wc = ui.wc || (ui.wc = {}));
})(ui = flexygo.ui || (flexygo.ui = {}));
})(flexygo || (flexygo = {}));
window.customElements.define('flx-chart', flexygo.ui.wc.FlxChartElement);
//# sourceMappingURL=flx-chart.js.map