• API Docs for Version:

    • APIs

    Show:

    Source\flexygo\Proyectos\FlexyGo\FlexyGo\js\flexygo\ui\wc\flx-chart.js File

    1. /**
    2.  * @namespace flexygo.ui.wc
    3.  */
    4. var flexygo;
    5. (function (flexygo) {
    6.     var ui;
    7.     (function (ui) {
    8.         var wc;
    9.         (function (wc) {
    10.             /**
    11.            * Library for the flx-chartElement web component.
    12.            *
    13.            * @class FlxChartElement
    14.            * @constructor
    15.            * @return {FlxChartElement} .
    16.            */
    17.             class FlxChartElement extends HTMLElement {
    18.                 constructor() {
    19.                     super();
    20.                     /**
    21.                    * Set when component is attached to DOM
    22.                    * @property connected {boolean}
    23.                    */
    24.                     this.connected = false;
    25.                     this.data = null;
    26.                 }
    27.                 /**
    28.                 * Fires when element is attached to DOM
    29.                 * @method connectedCallback
    30.                 */
    31.                 connectedCallback() {
    32.                     let element = $(this);
    33.                     this.connected = true;
    34.                     this.moduleName = element.attr("ModuleName");
    35.                     this.data = element.attr('value');
    36.                     this.AdditionalWhere = element.attr('additionalwhere');
    37.                     if (element.attr('manualInit') != 'true') {
    38.                         this.init();
    39.                     }
    40.                 }
    41.                 /**
    42.                 * Array of observed attributes.
    43.                 * @property observedAttributes {Array}
    44.                 */
    45.                 static get observedAttributes() {
    46.                     return ['ObjectName', 'ObjectWhere', 'modulename', 'value', 'additionalwhere'];
    47.                 }
    48.                 /**
    49.                 * Fires when the attribute value of the element is changed.
    50.                 * @method attributeChangedCallback
    51.                 */
    52.                 attributeChangedCallback(attrName, oldVal, newVal) {
    53.                     if (!this.connected) {
    54.                         return;
    55.                     }
    56.                     if (attrName.toLowerCase() == 'modulename' && newVal && newVal != '') {
    57.                         this.moduleName = newVal;
    58.                         if (this.moduleName) {
    59.                             this.refresh();
    60.                         }
    61.                     }
    62.                     if (attrName.toLowerCase() == 'value' && newVal && newVal != '') {
    63.                         this.data = newVal;
    64.                         if (this.data) {
    65.                             this.refresh();
    66.                         }
    67.                     }
    68.                     if (attrName.toLowerCase() == 'additionalwhere' && newVal && newVal != '') {
    69.                         this.AdditionalWhere = newVal;
    70.                         this.refresh();
    71.                     }
    72.                 }
    73.                 /**
    74.                 * Refresh de webcomponent.
    75.                 * @method refresh
    76.                 */
    77.                 refresh() {
    78.                     let me = $(this);
    79.                     let params = {
    80.                         ObjectName: (me.attr('ObjectName') ? me.attr('ObjectName') : null),
    81.                         ObjectWhere: (me.attr('ObjectWhere') ? me.attr('ObjectWhere') : null),
    82.                         AdditionalWhere: (this.AdditionalWhere ? this.AdditionalWhere : null),
    83.                         ModuleName: me.attr('ModuleName'),
    84.                         PageName: flexygo.history.getPageName(me)
    85.                     };
    86.                     flexygo.storage.cache.remove('chart', params);
    87.                     if ($(this).attr('manualInit') != 'true') {
    88.                         this.init();
    89.                     }
    90.                 }
    91.                 /**
    92.                * Init the webcomponent.
    93.                * @method init
    94.                */
    95.                 init() {
    96.                     let me = $(this);
    97.                     me.removeAttr('manualInit');
    98.                     let parentModule = me.closest('flx-module');
    99.                     let wcModule = parentModule[0];
    100.                     if (parentModule && wcModule) {
    101.                         wcModule.moduleLoaded(this);
    102.                     }
    103.                     me.html('<div><canvas></canvas></div>');
    104.                     if (parentModule.attr("type") != 'flx-list') {
    105.                         let params = {
    106.                             ObjectName: (me.attr('ObjectName') ? me.attr('ObjectName') : null),
    107.                             ObjectWhere: (me.attr('ObjectWhere') ? me.attr('ObjectWhere') : null),
    108.                             AdditionalWhere: (this.AdditionalWhere ? this.AdditionalWhere : null),
    109.                             ModuleName: me.attr('ModuleName'),
    110.                             PageName: flexygo.history.getPageName(me)
    111.                         };
    112.                         /** Read Cache **/
    113.                         let cacheResponse = flexygo.storage.cache.get('chart', params);
    114.                         /** If Cache use cache**/
    115.                         if (cacheResponse) {
    116.                             this.data = cacheResponse.response.Values;
    117.                             this.settings = cacheResponse.response.Settings;
    118.                             this.options = cacheResponse.response.Options;
    119.                             this.Title = cacheResponse.response.Title;
    120.                             this.Labels = cacheResponse.response.Labels;
    121.                             this.Series = cacheResponse.response.Series;
    122.                             this.Values = cacheResponse.response.Value;
    123.                             this.Params = cacheResponse.response.Params;
    124.                             this.type = cacheResponse.response.ChartType;
    125.                             this.Background = cacheResponse.response.ChartBackground;
    126.                             this.Border = cacheResponse.response.ChartBorder;
    127.                             this.MixedChartLabels = cacheResponse.response.MixedChartLabels;
    128.                             this.MixedChartTypes = cacheResponse.response.MixedChartTypes;
    129.                             this.ChartLineBorderDash = cacheResponse.response.ChartLineBorderDash;
    130.                             this.ChartLineFill = cacheResponse.response.ChartLineFill;
    131.                             this.render();
    132.                         }
    133.                         else {
    134.                             flexygo.ajax.post('~/api/Chart', 'GetHTML', params, (response) => {
    135.                                 if (response) {
    136.                                     flexygo.storage.cache.add('chart', params, response, response.Cache);
    137.                                     this.data = response.Values;
    138.                                     this.settings = response.Settings;
    139.                                     this.options = response.Options;
    140.                                     this.Title = response.Title;
    141.                                     this.Labels = response.Labels;
    142.                                     this.Series = response.Series;
    143.                                     this.Values = response.Value;
    144.                                     this.Params = response.Params;
    145.                                     this.type = response.ChartType;
    146.                                     this.Background = response.ChartBackground;
    147.                                     this.Border = response.ChartBorder;
    148.                                     this.MixedChartLabels = response.MixedChartLabels;
    149.                                     this.MixedChartTypes = response.MixedChartTypes;
    150.                                     this.ChartLineBorderDash = response.ChartLineBorderDash;
    151.                                     this.ChartLineFill = response.ChartLineFill;
    152.                                     this.render();
    153.                                 }
    154.                             }, null, () => { this.stopLoading(); }, () => { this.startLoading(); });
    155.                         }
    156.                     }
    157.                     else {
    158.                         let params = {
    159.                             ChartSettingName: me.attr("chartsetting") ? me.attr("chartsetting") : "syscs-default-legendandlabels"
    160.                         };
    161.                         flexygo.ajax.post('~/api/Chart', 'GetSettings', params, (response) => {
    162.                             if (response) {
    163.                                 this.settings = response.Settings;
    164.                                 this.render();
    165.                             }
    166.                         }, null, () => { this.stopLoading(); }, () => { this.startLoading(); });
    167.                     }
    168.                 }
    169.                 /**
    170.                 * Renders the chart
    171.                 * @method render
    172.                 */
    173.                 render() {
    174.                     let me = $(this);
    175.                     let name = '';
    176.                     let listModule = me.closest('flx-list');
    177.                     let wcListModule = listModule[0];
    178.                     if (me.attr('type') && me.attr('type') != '') {
    179.                         this.type = me.attr('type');
    180.                     }
    181.                     if (me.attr('options') && me.attr('options') != '') {
    182.                         this.options = me.attr('options');
    183.                     }
    184.                     if (me.attr('series') && me.attr('series') != '') {
    185.                         this.Series = me.attr('series');
    186.                     }
    187.                     if (me.attr('labels') && me.attr('labels') != '') {
    188.                         this.Labels = me.attr('labels');
    189.                     }
    190.                     if (me.attr('value') && me.attr('value') != '') {
    191.                         this.Values = me.attr('value');
    192.                     }
    193.                     if (me.attr('borderdash') && me.attr('borderdash') != '') {
    194.                         this.ChartLineBorderDash = Boolean(me.attr('borderdash'));
    195.                     }
    196.                     if (me.attr('linefill') && me.attr('linefill') != '') {
    197.                         this.ChartLineFill = Boolean(me.attr('linefill'));
    198.                     }
    199.                     if (listModule.attr("mode") === 'list') {
    200.                         this.data = wcListModule.data.length > 0 ? wcListModule.data.map(s => ({ serie: s[this.Series], label: s[this.Labels], value: s[this.Values] })) : wcListModule.data;
    201.                     }
    202.                     if (this.data.length > 0) {
    203.                         let options = {
    204.                             Showlabels: this.settings.ShowLabels,
    205.                             ShowLegend: this.settings.ShowLegend,
    206.                             ShowTitle: this.settings.ShowTitle,
    207.                             LegendPos: this.settings.LegendPos.toLowerCase(),
    208.                             ToolTipBackgroundColor: this.settings.ToolTipBackgroundColor,
    209.                             Title: this.Title,
    210.                             TitleFontSize: this.settings.TitleFontSize,
    211.                             TitleFontColor: this.settings.TitleFontColor,
    212.                             TitlePosition: this.settings.TitlePosition.toLowerCase(),
    213.                             TitleFontStyle: this.settings.TitleFontStyle,
    214.                             Responsive: this.settings.Responsive,
    215.                             AnimationDuration: this.settings.AnimationDuration,
    216.                             AnimationStyle: this.settings.AnimationStyle,
    217.                             BackgroundColor: this.settings.Colors.split("|"),
    218.                             BorderColor: this.settings.BorderColors.split("|"),
    219.                             MinXAxes: this.settings.MinXAxes,
    220.                             MinYAxes: this.settings.MinYAxes,
    221.                         };
    222.                         let defaultOptions = {
    223.                             responsive: options.Responsive,
    224.                             responsiveAnimationDuration: 0,
    225.                             maintainAspectRatio: true,
    226.                             aspectRatio: 2,
    227.                             onResize: null,
    228.                             onHover: null,
    229.                             onClick: null,
    230.                             hover: {
    231.                                 mode: 'nearest',
    232.                                 intersect: true,
    233.                                 animationDuration: 400,
    234.                             },
    235.                             events: ['mousemove', 'mouseout', 'click', 'touchstart', 'touchmove'],
    236.                             animation: {
    237.                                 duration: options.AnimationDuration,
    238.                                 onProgress: null,
    239.                                 onComplete: null,
    240.                                 easing: options.AnimationStyle ? options.AnimationStyle : 'easeOutBounce'
    241.                             },
    242.                             legend: {
    243.                                 display: options.ShowLegend,
    244.                                 position: options.LegendPos,
    245.                                 align: 'center',
    246.                                 fullWidth: true,
    247.                                 onHover: null,
    248.                                 onClick: (e, p) => {
    249.                                     let original = Chart.defaults.global.legend.onClick;
    250.                                     let allPageCharts = me.closest('main').find('flx-chart[link-group="' + me.attr('link-group') + '"]');
    251.                                     if (this.options && !flexygo.utils.isBlank(this.options.GroupName)) {
    252.                                         allPageCharts.each((i, e) => {
    253.                                             if (!$(e).is(me)) {
    254.                                                 e.toggleLabel(p.text, null, this.options.GroupName);
    255.                                             }
    256.                                         });
    257.                                     }
    258.                                     else {
    259.                                         original.call(this, e, p);
    260.                                     }
    261.                                 },
    262.                                 onLeave: null,
    263.                                 labels: {
    264.                                     boxWidth: 40,
    265.                                     fontSize: 12,
    266.                                     fontStyle: 'normal',
    267.                                     fontColor: '#666',
    268.                                     fontFamily: "'Helvetica Neue', 'Helvetica', 'Arial', sans-serif",
    269.                                     padding: 10,
    270.                                     legendCallback: null,
    271.                                     filter: null,
    272.                                     usePointStyle: false
    273.                                 }
    274.                             },
    275.                             title: {
    276.                                 display: options.ShowTitle,
    277.                                 position: options.TitlePosition,
    278.                                 fontColor: options.TitleFontColor,
    279.                                 fontFamily: options.TitleFontStyle,
    280.                                 fontSize: options.TitleFontSize,
    281.                                 text: options.Title,
    282.                                 fontStyle: 'bold',
    283.                                 padding: 10,
    284.                                 lineHeight: 1.2
    285.                             },
    286.                             tooltips: {
    287.                                 enabled: true,
    288.                                 mode: 'point',
    289.                                 intersect: true,
    290.                                 backgroundColor: options.ToolTipBackgroundColor,
    291.                                 titleFontFamily: "'Helvetica Neue', 'Helvetica', 'Arial', sans-serif",
    292.                                 titleFontSize: 12,
    293.                                 titleFontStyle: 'bold',
    294.                                 titleFontColor: '#fff',
    295.                                 titleAlign: 'left',
    296.                                 titleSpacing: 2,
    297.                                 titleMarginBottom: 6,
    298.                                 bodyFontFamily: "'Helvetica Neue', 'Helvetica', 'Arial', sans-serif",
    299.                                 bodyFontSize: 12,
    300.                                 bodyFontStyle: 'normal',
    301.                                 bodyFontColor: '#fff',
    302.                                 bodyAlign: 'left',
    303.                                 bodySpacing: 2,
    304.                                 footerFontFamily: "'Helvetica Neue', 'Helvetica', 'Arial', sans-serif",
    305.                                 footerFontSize: 12,
    306.                                 footerFontStyle: 'bold',
    307.                                 footerFontColor: '#fff',
    308.                                 footerAlign: 'left',
    309.                                 footerSpacing: 2,
    310.                                 footerMarginTop: 6,
    311.                                 xPadding: 6,
    312.                                 yPadding: 6,
    313.                                 caretPadding: 2,
    314.                                 caretSize: 5,
    315.                                 cornerRadius: 6,
    316.                                 multiKeyBackground: '#fff',
    317.                                 displayColors: true,
    318.                                 borderColor: 'rgba(0, 0, 0, 0)',
    319.                                 borderWidth: 0,
    320.                                 rtl: true,
    321.                                 textDirection: 'rtl'
    322.                             },
    323.                             stacked: false,
    324.                             elements: {
    325.                                 point: {
    326.                                     radius: 5,
    327.                                     pointStyle: 'circle',
    328.                                     rotation: 0,
    329.                                     backgroundColor: 'rgba(0, 0, 0, 0.1)',
    330.                                     borderWidth: 1,
    331.                                     borderColor: 'rgba(0, 0, 0, 0.1)',
    332.                                     hitRadius: 1,
    333.                                     hoverRadius: 6,
    334.                                     hoverBorderWidth: 1
    335.                                 },
    336.                                 line: {
    337.                                     tension: 0.4,
    338.                                     backgroundColor: 'rgba(0, 0, 0, 0.1)',
    339.                                     borderWidth: 3,
    340.                                     borderColor: 'rgba(0, 0, 0, 0.1)',
    341.                                     borderCapStyle: 'butt',
    342.                                     borderDash: [],
    343.                                     borderDashOffset: 0.0,
    344.                                     borderJoinStyle: 'miter',
    345.                                     capBezierPoints: true,
    346.                                     cubicInterpolationMode: 'default',
    347.                                     fill: false,
    348.                                     stepped: false
    349.                                 },
    350.                                 rectangle: {
    351.                                     backgroundColor: 'rgba(0, 0, 0, 0.1)',
    352.                                     borderWidth: 0,
    353.                                     borderColor: 'rgba(0, 0, 0, 0.1)',
    354.                                     borderSkipped: 'bottom'
    355.                                 },
    356.                                 arc: {
    357.                                     backgroundColor: 'rgba(0, 0, 0, 0.1)',
    358.                                     borderAlign: 'center',
    359.                                     borderColor: '#fff',
    360.                                     borderWidth: 2
    361.                                 }
    362.                             },
    363.                         };
    364.                         let original = Chart.defaults.global.legend.onClick;
    365.                         var ctxx = me.find('canvas');
    366.                         let label = [], serie = [], series = [], value = [], mixedLabels = [], backgroundColors = [], borderColor = [], hoverBackgroundColor = [], Datasets = [];
    367.                         for (let i = 0; i < this.data.length; i++) {
    368.                             //Meto todos los labels y las series distintas
    369.                             if (label.indexOf(this.data[i].label) == -1) {
    370.                                 label.push(this.data[i].label);
    371.                             }
    372.                             if (serie.indexOf(this.data[i].serie) == -1) {
    373.                                 serie.push(this.data[i].serie);
    374.                             }
    375.                             if (mixedLabels.indexOf(this.data[i].chartLabel) == -1) {
    376.                                 mixedLabels.push(this.data[i].chartLabel);
    377.                             }
    378.                             if (!this.checkValue(series, this.data[i].serie, this.data[i].chartLabel)) {
    379.                                 series.push({ serial: this.data[i].serie, chartLabel: this.data[i].chartLabel, backgroundColor: this.data[i].backgroundColor, borderColor: this.data[i].borderColor });
    380.                             }
    381.                         }
    382.                         switch (this.type) {
    383.                             case 'line':
    384.                                 //Para cada serie y label sus valores correspondientes
    385.                                 for (let z = 0; z < series.length; z++) {
    386.                                     value = [];
    387.                                     for (let i = 0; i < label.length; i++) {
    388.                                         let valor;
    389.                                         for (let x = 0; x < this.data.length; x++) {
    390.                                             if (label[i] == this.data[x].label && serie[z] == this.data[x].serie) {
    391.                                                 valor = parseFloat(this.data[x].value.toString().replace(',', '.'));
    392.                                             }
    393.                                         }
    394.                                         if (!valor) {
    395.                                             valor = 0;
    396.                                         }
    397.                                         value.push(valor);
    398.                                     }
    399.                                     Datasets.push({ label: serie[z], fill: this.ChartLineFill, borderDash: this.ChartLineBorderDash ? [5, 5] : [0, 0], backgroundColor: flexygo.utils.isBlank(series[z]["backgroundColor"]) ? options.BackgroundColor[z] : series[z]["backgroundColor"], borderColor: flexygo.utils.isBlank(series[z]["borderColor"]) ? options.BorderColor[z] : series[z]["borderColor"], data: value });
    400.                                 }
    401.                                 var optionsLine = {
    402.                                     scales: {
    403.                                         xAxes: [{
    404.                                                 display: true,
    405.                                                 scaleLabel: {
    406.                                                     display: true,
    407.                                                     labelString: this.Labels
    408.                                                 }
    409.                                             }],
    410.                                         yAxes: [{
    411.                                                 display: true,
    412.                                                 stacked: false,
    413.                                                 scaleLabel: {
    414.                                                     display: true,
    415.                                                     labelString: this.Values
    416.                                                 }
    417.                                             }]
    418.                                     }
    419.                                 };
    420.                                 let overwriteOptionsLine = Object.assign({}, defaultOptions, optionsLine);
    421.                                 !flexygo.utils.isBlank(this.options) ? overwriteOptionsLine = Object.assign({}, overwriteOptionsLine, JSON.parse(this.options)) : overwriteOptionsLine;
    422.                                 this.chart = new Chart(ctxx, {
    423.                                     type: this.type,
    424.                                     data: {
    425.                                         labels: label,
    426.                                         datasets: Datasets
    427.                                     },
    428.                                     options: overwriteOptionsLine
    429.                                 });
    430.                                 break;
    431.                             case 'bubble':
    432.                                 //Para cada serie y label sus valores correspondientes
    433.                                 for (let z = 0; z < series.length; z++) {
    434.                                     value = [];
    435.                                     for (let i = 0; i < label.length; i++) {
    436.                                         let valor;
    437.                                         for (let x = 0; x < this.data.length; x++) {
    438.                                             if (label[i] == this.data[x].label && serie[z] == this.data[x].serie) {
    439.                                                 valor = parseFloat(this.data[x].value.toString().replace(',', '.'));
    440.                                             }
    441.                                         }
    442.                                         if (!valor) {
    443.                                             valor = 0;
    444.                                         }
    445.                                         value.push({ x: parseFloat(label[i]), y: parseFloat(valor), r: this.getRadiusBubble(parseFloat(valor), Math.max.apply(null, this.data.map(d => d.value)), Math.min.apply(null, this.data.map(d => d.value))) });
    446.                                     }
    447.                                     Datasets.push({ label: serie[z], backgroundColor: flexygo.utils.isBlank(series[z]["backgroundColor"]) ? options.BackgroundColor[z] : series[z]["backgroundColor"], borderColor: flexygo.utils.isBlank(series[z]["borderColor"]) ? options.BorderColor[z] : series[z]["borderColor"], hoverBackgroundColor: flexygo.utils.isBlank(series[z]["borderColor"]) ? options.BorderColor[z] : series[z]["borderColor"], hoverRadius: 0, data: value });
    448.                                 }
    449.                                 var optionsBubble = {
    450.                                     responsive: options.Responsive,
    451.                                     hoverMode: 'label',
    452.                                     hoverAnimationDuration: 400,
    453.                                     stacked: false,
    454.                                     title: {
    455.                                         display: options.ShowTitle,
    456.                                         position: options.TitlePosition,
    457.                                         fontColor: options.TitleFontColor,
    458.                                         fontFamily: options.TitleFontStyle,
    459.                                         fontSize: options.TitleFontSize,
    460.                                         text: options.Title
    461.                                     },
    462.                                     legend: {
    463.                                         position: options.LegendPos,
    464.                                         display: options.ShowLegend,
    465.                                         onClick: (e, p) => {
    466.                                             let original = Chart.defaults.global.legend.onClick;
    467.                                             let allPageCharts = me.closest('main').find('flx-chart[link-group="' + me.attr('link-group') + '"]');
    468.                                             if (this.options && !flexygo.utils.isBlank(this.options.GroupName)) {
    469.                                                 allPageCharts.each((i, e) => {
    470.                                                     if (!$(e).is(me)) {
    471.                                                         e.toggleLabel(p.text, null, this.options.GroupName);
    472.                                                     }
    473.                                                 });
    474.                                             }
    475.                                             else {
    476.                                                 original.call(this, e, p);
    477.                                             }
    478.                                         }
    479.                                     },
    480.                                     elements: {
    481.                                         points: {
    482.                                             borderWidth: 1,
    483.                                             borderColor: 'rgb(0, 0, 0)'
    484.                                         }
    485.                                     },
    486.                                     scales: {
    487.                                         xAxes: [{
    488.                                                 scaleLabel: {
    489.                                                     display: true,
    490.                                                     labelString: this.Labels
    491.                                                 },
    492.                                                 ticks: {
    493.                                                     display: options.Showlabels
    494.                                                 }
    495.                                             }],
    496.                                         yAxes: [{
    497.                                                 scaleLabel: {
    498.                                                     display: true,
    499.                                                     labelString: this.Values
    500.                                                 },
    501.                                                 ticks: {
    502.                                                     display: options.Showlabels
    503.                                                 }
    504.                                             }]
    505.                                     },
    506.                                     tooltips: {
    507.                                         backgroundColor: options.ToolTipBackgroundColor
    508.                                     }
    509.                                 };
    510.                                 let overwriteOptionsBubble = Object.assign({}, defaultOptions, optionsBubble);
    511.                                 !flexygo.utils.isBlank(this.options) ? overwriteOptionsBubble = Object.assign({}, overwriteOptionsBubble, JSON.parse(this.options)) : overwriteOptionsBubble;
    512.                                 this.chart = new Chart(ctxx, {
    513.                                     type: this.type,
    514.                                     data: {
    515.                                         datasets: Datasets
    516.                                     },
    517.                                     options: overwriteOptionsBubble
    518.                                 });
    519.                                 break;
    520.                             case 'doughnut':
    521.                             case 'semidoughnut':
    522.                                 //Para cada serie y label sus valores correspondientes
    523.                                 value = [];
    524.                                 for (let z = 0; z < series.length; z++) {
    525.                                     //for (let i = 0; i < label.length; i++) {
    526.                                     let valor;
    527.                                     for (let x = 0; x < this.data.length; x++) {
    528.                                         if (series[z]["serial"] == this.data[x].serie) {
    529.                                             valor = parseFloat(this.data[x].value.toString().replace(',', '.'));
    530.                                         }
    531.                                     }
    532.                                     if (!valor) {
    533.                                         valor = 0;
    534.                                     }
    535.                                     value.push(valor);
    536.                                     // }
    537.                                     backgroundColors.push(flexygo.utils.isBlank(series[z]["backgroundColor"]) ? options.BackgroundColor[z] : series[z]["backgroundColor"]);
    538.                                     borderColor.push(flexygo.utils.isBlank(series[z]["borderColor"]) ? options.BorderColor[z] : series[z]["borderColor"]);
    539.                                     hoverBackgroundColor.push(flexygo.utils.isBlank(series[z]["borderColor"]) ? options.BorderColor[z] : series[z]["borderColor"]);
    540.                                     //, label: series[z]["serial"]
    541.                                 }
    542.                                 Datasets.push({ data: value, backgroundColor: backgroundColors, borderColor: borderColor, hoverBackgroundColor: hoverBackgroundColor });
    543.                                 var optionsDoughnut = {
    544.                                     circumference: this.type == 'doughnut' ? 2 * Math.PI : Math.PI,
    545.                                     rotation: this.type == 'doughnut' ? -Math.PI / 2 : -Math.PI,
    546.                                     legend: {
    547.                                         position: options.LegendPos,
    548.                                         display: options.ShowLegend,
    549.                                         onClick: (e, p) => {
    550.                                             original = Chart.defaults.doughnut.legend.onClick;
    551.                                             original.call(this, e, p);
    552.                                             var allPageCharts = me.closest('main').find('flx-chart[link-group="' + me.attr('link-group') + '"]');
    553.                                             if (this.options && !flexygo.utils.isBlank(this.options.GroupName)) {
    554.                                                 allPageCharts.each((i, e) => {
    555.                                                     if (!$(e).is(me)) {
    556.                                                         e.toggleLabel(p.text, null, this.options.GroupName);
    557.                                                     }
    558.                                                 });
    559.                                             }
    560.                                         }
    561.                                     }
    562.                                 };
    563.                                 let overwriteOptionsDoughnut = Object.assign({}, defaultOptions, optionsDoughnut);
    564.                                 !flexygo.utils.isBlank(this.options) ? overwriteOptionsDoughnut = Object.assign({}, overwriteOptionsDoughnut, JSON.parse(this.options)) : overwriteOptionsDoughnut;
    565.                                 this.chart = new Chart(ctxx, {
    566.                                     type: 'doughnut',
    567.                                     data: {
    568.                                         labels: serie,
    569.                                         datasets: Datasets
    570.                                     },
    571.                                     options: overwriteOptionsDoughnut
    572.                                 });
    573.                                 break;
    574.                             case 'radar':
    575.                                 //Para cada serie y label sus valores correspondientes
    576.                                 for (let z = 0; z < series.length; z++) {
    577.                                     value = [];
    578.                                     for (let i = 0; i < label.length; i++) {
    579.                                         let valor;
    580.                                         for (let x = 0; x < this.data.length; x++) {
    581.                                             if (label[i] == this.data[x].label && serie[z] == this.data[x].serie) {
    582.                                                 valor = parseFloat(this.data[x].value.toString().replace(',', '.'));
    583.                                             }
    584.                                         }
    585.                                         if (!valor) {
    586.                                             valor = 0;
    587.                                         }
    588.                                         value.push(valor);
    589.                                     }
    590.                                     Datasets.push({ label: serie[z], backgroundColor: flexygo.utils.isBlank(series[z]["backgroundColor"]) ? options.BackgroundColor[z] : series[z]["backgroundColor"], borderColor: flexygo.utils.isBlank(series[z]["borderColor"]) ? options.BorderColor[z] : series[z]["borderColor"], data: value });
    591.                                 }
    592.                                 var optionsRadar = {
    593.                                     responsive: options.Responsive,
    594.                                     hoverMode: 'label',
    595.                                     hoverAnimationDuration: 400,
    596.                                     stacked: false,
    597.                                     title: {
    598.                                         display: options.ShowTitle,
    599.                                         position: options.TitlePosition,
    600.                                         fontColor: options.TitleFontColor,
    601.                                         fontFamily: options.TitleFontStyle,
    602.                                         fontSize: options.TitleFontSize,
    603.                                         text: options.Title
    604.                                     },
    605.                                     animation: {
    606.                                         animateScale: options.animateScale !== "False",
    607.                                         animateRotate: options.animateRotate !== "False",
    608.                                         duration: options.AnimationDuration
    609.                                     },
    610.                                     legend: {
    611.                                         position: options.LegendPos,
    612.                                         display: options.ShowLegend,
    613.                                         onClick: (e, p) => {
    614.                                             original.call(this, e, p);
    615.                                             var allPageCharts = me.closest('main').find('flx-chart[link-group="' + me.attr('link-group') + '"]');
    616.                                             if (this.options && !flexygo.utils.isBlank(this.options.GroupName)) {
    617.                                                 allPageCharts.each((i, e) => {
    618.                                                     if (!$(e).is(me)) {
    619.                                                         e.toggleLabel(p.text, null, this.options.GroupName);
    620.                                                     }
    621.                                                 });
    622.                                             }
    623.                                         }
    624.                                     },
    625.                                     scale: {
    626.                                         reverse: false,
    627.                                         ticks: {
    628.                                             beginAtZero: true
    629.                                         }
    630.                                     },
    631.                                     tooltips: {
    632.                                         backgroundColor: options.ToolTipBackgroundColor
    633.                                     },
    634.                                 };
    635.                                 let overwriteOptionsRadar = Object.assign({}, defaultOptions, optionsRadar);
    636.                                 !flexygo.utils.isBlank(this.options) ? overwriteOptionsRadar = Object.assign({}, overwriteOptionsRadar, JSON.parse(this.options)) : overwriteOptionsRadar;
    637.                                 this.chart = new Chart(ctxx, {
    638.                                     type: this.type,
    639.                                     data: {
    640.                                         labels: label,
    641.                                         datasets: Datasets
    642.                                     },
    643.                                     options: overwriteOptionsRadar
    644.                                 });
    645.                                 break;
    646.                             case 'polarArea':
    647.                             case 'polararea':
    648.                                 //Para cada serie y label sus valores correspondientes
    649.                                 value = [];
    650.                                 for (let z = 0; z < series.length; z++) {
    651.                                     //for (let i = 0; i < label.length; i++) {
    652.                                     let valor;
    653.                                     for (let x = 0; x < this.data.length; x++) {
    654.                                         if (series[z]["serial"] == this.data[x].serie) {
    655.                                             valor = parseFloat(this.data[x].value.toString().replace(',', '.'));
    656.                                         }
    657.                                     }
    658.                                     if (!valor) {
    659.                                         valor = 0;
    660.                                     }
    661.                                     value.push(valor);
    662.                                     backgroundColors.push(flexygo.utils.isBlank(series[z]["backgroundColor"]) ? options.BackgroundColor[z] : series[z]["backgroundColor"]);
    663.                                     borderColor.push(flexygo.utils.isBlank(series[z]["borderColor"]) ? options.BorderColor[z] : series[z]["borderColor"]);
    664.                                     hoverBackgroundColor.push(flexygo.utils.isBlank(series[z]["borderColor"]) ? options.BorderColor[z] : series[z]["borderColor"]);
    665.                                     //}
    666.                                 }
    667.                                 Datasets.push({ data: value, backgroundColor: backgroundColors, borderColor: borderColor, hoverBackgroundColor: hoverBackgroundColor });
    668.                                 var optionsPolarArea = {
    669.                                     legend: {
    670.                                         position: options.LegendPos,
    671.                                         display: options.ShowLegend,
    672.                                         onClick: (e, p) => {
    673.                                             original = Chart.defaults.polarArea.legend.onClick;
    674.                                             original.call(this, e, p);
    675.                                             var allPageCharts = me.closest('main').find('flx-chart[link-group="' + me.attr('link-group') + '"]');
    676.                                             if (this.options && !flexygo.utils.isBlank(this.options.GroupName)) {
    677.                                                 allPageCharts.each((i, e) => {
    678.                                                     if (!$(e).is(me)) {
    679.                                                         e.toggleLabel(p.text, null, this.options.GroupName);
    680.                                                     }
    681.                                                 });
    682.                                             }
    683.                                         }
    684.                                     },
    685.                                     elements: {
    686.                                         arc: {
    687.                                             borderColor: "#000000"
    688.                                         }
    689.                                     },
    690.                                 };
    691.                                 let overwritePolarArea = Object.assign({}, defaultOptions, optionsPolarArea);
    692.                                 !flexygo.utils.isBlank(this.options) ? overwritePolarArea = Object.assign({}, overwritePolarArea, JSON.parse(this.options)) : overwritePolarArea;
    693.                                 this.chart = new Chart(ctxx, {
    694.                                     type: 'polarArea',
    695.                                     data: {
    696.                                         labels: serie,
    697.                                         datasets: Datasets
    698.                                     },
    699.                                     options: overwritePolarArea
    700.                                 });
    701.                                 break;
    702.                             case 'mixed':
    703.                                 //Para cada serie y label sus valores correspondientes
    704.                                 for (let z = 0; z < series.length; z++) {
    705.                                     //Por cada mixedLabel del dataset
    706.                                     //for (let y = 0; y < mixedLabels.length; y++) {
    707.                                     value = [];
    708.                                     let mixedChartType = "";
    709.                                     for (let i = 0; i < label.length; i++) {
    710.                                         let valor;
    711.                                         for (let x = 0; x < this.data.length; x++) {
    712.                                             if (label[i] == this.data[x].label && series[z]["chartLabel"] == this.data[x].chartLabel && series[z]["serial"] == this.data[x].serie) {
    713.                                                 valor = parseFloat(this.data[x].value.toString().replace(',', '.'));
    714.                                                 mixedChartType = this.data[x].chartType;
    715.                                             }
    716.                                         }
    717.                                         if (!valor) {
    718.                                             valor = 0;
    719.                                         }
    720.                                         value.push(valor);
    721.                                     }
    722.                                     Datasets.push({ label: series[z]["serial"] + ' - ' + series[z]["chartLabel"], type: mixedChartType, backgroundColor: flexygo.utils.isBlank(series[z]["backgroundColor"]) ? options.BackgroundColor[z] : series[z]["backgroundColor"], borderColor: flexygo.utils.isBlank(series[z]["borderColor"]) ? options.BorderColor[z] : series[z]["borderColor"], hoverBackgroundColor: flexygo.utils.isBlank(series[z]["borderColor"]) ? options.BorderColor[z] : series[z]["borderColor"], borderWidth: 1, data: value });
    723.                                     //}
    724.                                 }
    725.                                 this.chart = new Chart(ctxx, {
    726.                                     type: this.data[0].chartType,
    727.                                     data: {
    728.                                         labels: label,
    729.                                         datasets: Datasets
    730.                                     },
    731.                                     options: defaultOptions
    732.                                 });
    733.                                 break;
    734.                             case 'bar':
    735.                             case 'horizontalBar':
    736.                             case 'horizontalbar':
    737.                                 //Para cada serie y label sus valores correspondientes
    738.                                 for (let z = 0; z < series.length; z++) {
    739.                                     value = [];
    740.                                     for (let i = 0; i < label.length; i++) {
    741.                                         let valor;
    742.                                         for (let x = 0; x < this.data.length; x++) {
    743.                                             if (label[i] == this.data[x].label && series[z].serial == this.data[x].serie) {
    744.                                                 valor = parseFloat(this.data[x].value.toString().replace(',', '.'));
    745.                                             }
    746.                                         }
    747.                                         if (!valor) {
    748.                                             valor = 0;
    749.                                         }
    750.                                         value.push(valor);
    751.                                     }
    752.                                     Datasets.push({ label: series[z].serial, backgroundColor: flexygo.utils.isBlank(series[z]["backgroundColor"]) ? options.BackgroundColor[z] : series[z]["backgroundColor"], borderColor: flexygo.utils.isBlank(series[z]["borderColor"]) ? options.BorderColor[z] : series[z]["borderColor"], hoverBackgroundColor: flexygo.utils.isBlank(series[z]["borderColor"]) ? options.BorderColor[z] : series[z]["borderColor"], borderWidth: 1, data: value });
    753.                                 }
    754.                                 let overwriteBar = defaultOptions;
    755.                                 !flexygo.utils.isBlank(this.options) ? overwriteBar = Object.assign({}, overwriteBar, JSON.parse(this.options)) : overwriteBar;
    756.                                 this.chart = new Chart(ctxx, {
    757.                                     type: this.type.toLowerCase() === 'horizontalbar' ? 'horizontalBar' : this.type,
    758.                                     data: {
    759.                                         labels: label,
    760.                                         datasets: Datasets
    761.                                     },
    762.                                     options: overwriteBar
    763.                                 });
    764.                                 break;
    765.                             case 'pie':
    766.                                 //Para cada serie y label sus valores correspondientes
    767.                                 value = [];
    768.                                 for (let z = 0; z < series.length; z++) {
    769.                                     let valor;
    770.                                     for (let x = 0; x < this.data.length; x++) {
    771.                                         if (series[z]["serial"] == this.data[x].serie) {
    772.                                             valor = parseFloat(this.data[x].value.toString().replace(',', '.'));
    773.                                         }
    774.                                     }
    775.                                     if (!valor) {
    776.                                         valor = 0;
    777.                                     }
    778.                                     value.push(valor);
    779.                                     backgroundColors.push(flexygo.utils.isBlank(series[z]["backgroundColor"]) ? options.BackgroundColor[z] : series[z]["backgroundColor"]);
    780.                                     borderColor.push(flexygo.utils.isBlank(series[z]["borderColor"]) ? options.BorderColor[z] : series[z]["borderColor"]);
    781.                                     hoverBackgroundColor.push(flexygo.utils.isBlank(series[z]["borderColor"]) ? options.BorderColor[z] : series[z]["borderColor"]);
    782.                                 }
    783.                                 Datasets.push({ data: value, backgroundColor: backgroundColors, borderColor: borderColor, hoverBackgroundColor: hoverBackgroundColor });
    784.                                 var optionsPie = {
    785.                                     legend: {
    786.                                         position: options.LegendPos,
    787.                                         display: options.ShowLegend,
    788.                                         onClick: (e, p) => {
    789.                                             original = Chart.defaults.pie.legend.onClick;
    790.                                             original.call(this, e, p);
    791.                                             var allPageCharts = me.closest('main').find('flx-chart[link-group="' + me.attr('link-group') + '"]');
    792.                                             if (this.options && !flexygo.utils.isBlank(this.options.GroupName)) {
    793.                                                 allPageCharts.each((i, e) => {
    794.                                                     if (!$(e).is(me)) {
    795.                                                         e.toggleLabel(p.text, null, this.options.GroupName);
    796.                                                     }
    797.                                                 });
    798.                                             }
    799.                                         }
    800.                                     },
    801.                                     cutoutPercentage: 0,
    802.                                 };
    803.                                 let overwritePie = Object.assign({}, defaultOptions, optionsPie);
    804.                                 !flexygo.utils.isBlank(this.options) ? overwritePie = Object.assign({}, overwritePie, JSON.parse(this.options)) : overwritePie;
    805.                                 this.chart = new Chart(ctxx, {
    806.                                     type: this.type,
    807.                                     data: {
    808.                                         labels: serie,
    809.                                         datasets: Datasets
    810.                                     },
    811.                                     options: overwritePie
    812.                                 });
    813.                                 break;
    814.                             default:
    815.                                 break;
    816.                         }
    817.                     }
    818.                     else {
    819.                         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>');
    820.                     }
    821.                 }
    822.                 checkValue(array, value, chartLabel) {
    823.                     let exists = false;
    824.                     for (var i = 0; i < array.length; i++) {
    825.                         if (array[i].serial === value && array[i].chartLabel === chartLabel) {
    826.                             exists = true;
    827.                             break;
    828.                         }
    829.                     }
    830.                     return exists;
    831.                 }
    832.                 getRadiusBubble(value, max, min) {
    833.                     let rMin = 5;
    834.                     let rMax = 30;
    835.                     let percentage = (value - min) / (max - min) * 100;
    836.                     let r = this.getRadius(percentage, rMin, rMax);
    837.                     if (r < rMin) {
    838.                         r = rMin;
    839.                     }
    840.                     if (r > rMax) {
    841.                         r = rMax;
    842.                     }
    843.                     return r;
    844.                 }
    845.                 getRadius(percent, min, max) {
    846.                     return min + (max - min) * percent / 100;
    847.                 }
    848.                 toggleLabel(nom, boo, GroupName, ctxx) {
    849.                     let ci = this.chart;
    850.                     let found;
    851.                     let nombres = [];
    852.                     for (let k in ci.data.datasets) {
    853.                         nombres.push(ci.data.datasets[k].label);
    854.                     }
    855.                     let index = nombres.indexOf(nom);
    856.                     if (index >= 0 && boo === true) {
    857.                         let meta = ci.getDatasetMeta(index);
    858.                         meta.hidden = null;
    859.                         ci.update();
    860.                     }
    861.                     else if (index >= 0 && boo === false) {
    862.                         let meta = ci.getDatasetMeta(index);
    863.                         meta.hidden = !ci.data.datasets[index].hidden;
    864.                         ci.update();
    865.                     }
    866.                     else if (index >= 0 && boo === null && this.options.GroupName == GroupName && GroupName != null) {
    867.                         var meta = ci.getDatasetMeta(index);
    868.                         meta.hidden = meta.hidden === null ? !ci.data.datasets[index].hidden : null;
    869.                         ci.update();
    870.                     }
    871.                 }
    872.                 /**
    873.                * Start loading
    874.                * @method startLoading
    875.                */
    876.                 startLoading() {
    877.                     if ($(this).parents('flx-module').length > 0) {
    878.                         $(this).parents('flx-module')[0].startLoading();
    879.                     }
    880.                 }
    881.                 /**
    882.               * Stop loading
    883.               * @method stopLoading
    884.               */
    885.                 stopLoading() {
    886.                     if ($(this).parents('flx-module').length > 0) {
    887.                         $(this).parents('flx-module')[0].stopLoading();
    888.                     }
    889.                 }
    890.             }
    891.             wc.FlxChartElement = FlxChartElement;
    892.         })(wc = ui.wc || (ui.wc = {}));
    893.     })(ui = flexygo.ui || (flexygo.ui = {}));
    894. })(flexygo || (flexygo = {}));
    895. window.customElements.define('flx-chart', flexygo.ui.wc.FlxChartElement);
    896. //# sourceMappingURL=flx-chart.js.map
    897.