@sme.up/ketchup 8.0.2 → 8.2.0

package/dist/collection/components/kup-chart/kup-chart.js

@@ -1,1080 +1,1080 @@
-import { forceUpdate, h, Host, } from '@stencil/core';
-import { ChartType, ChartAspect, KupChartProps, } from './kup-chart-declarations';
-import { convertColumns, convertRows, getSerieDecode, } from './kup-chart-builder';
-import { kupManagerInstance, } from '../../managers/kup-manager/kup-manager';
-import { getProps, identify, setProps } from '../../utils/utils';
-import { getColumnByName } from '../../utils/cell-utils';
-import { KupDebugCategory } from '../../managers/kup-debug/kup-debug-declarations';
-import { KupThemeColorValues } from '../../managers/kup-theme/kup-theme-declarations';
-import { componentWrapperId } from '../../variables/GenericVariables';
-export class KupChart {
-  constructor() {
-    /**
-     * Instance of the KupManager class.
-     */
-    this.kupManager = kupManagerInstance();
-    this.elStyle = undefined;
-    this.themeColors = null;
-    this.themeText = null;
-    this.asp = undefined;
-    this.axis = undefined;
-    this.chartTitle = undefined;
-    this.colors = [];
-    this.customStyle = '';
-    this.data = undefined;
-    this.hAxis = undefined;
-    this.hAxes = undefined;
-    this.legend = 'right';
-    this.offlineMode = undefined;
-    this.series = undefined;
-    this.showMarks = false;
-    this.sizeX = '100%';
-    this.sizeY = '100%';
-    this.sorting = null;
-    this.stacked = false;
-    this.types = [ChartType.Hbar];
-    this.vAxes = undefined;
-    this.vAxis = undefined;
-    this.trendlines = undefined;
-    this.version = '45.2';
-  }
-  /*-------------------------------------------------*/
-  /*                  W a t c h e r s                */
-  /*-------------------------------------------------*/
-  identifyRows() {
-    if (this.data) {
-      identify(this.data.rows);
-    }
-  }
-  /*-------------------------------------------------*/
-  /*           P u b l i c   M e t h o d s           */
-  /*-------------------------------------------------*/
-  /**
-   * Used to retrieve component's props values.
-   * @param {boolean} descriptions - When provided and true, the result will be the list of props with their description.
-   * @returns {Promise<GenericObject>} List of props as object, each key will be a prop.
-   */
-  async getProps(descriptions) {
-    return getProps(this, KupChartProps, descriptions);
-  }
-  /**
-   * This method is used to trigger a new render of the component.
-   */
-  async refresh() {
-    forceUpdate(this);
-  }
-  /**
-   * This method is invoked by KupManager whenever the component changes size.
-   */
-  async resizeCallback() {
-    window.clearTimeout(this.resizeTimeout);
-    this.resizeTimeout = window.setTimeout(() => {
-      if (!this.offlineMode) {
-        const options = this.createGoogleChartOptions();
-        try {
-          this.gChart.draw(this.gChartView, options);
-        }
-        catch (error) { }
-      }
-      else {
-        this.loadOfflineChart();
-      }
-    }, 300);
-  }
-  /**
-   * Sets the props to the component.
-   * @param {GenericObject} props - Object containing props that will be set to the component.
-   */
-  async setProps(props) {
-    setProps(this, KupChartProps, props);
-  }
-  /*-------------------------------------------------*/
-  /*           P r i v a t e   M e t h o d s         */
-  /*-------------------------------------------------*/
-  loadGoogleChart() {
-    google.charts.setOnLoadCallback(this.createChart.bind(this));
-  }
-  createGoogleChart() {
-    if (this.isComboChart()) {
-      return new google.visualization.ComboChart(this.chartContainer);
-    }
-    else if (this.types.length === 1) {
-      switch (this.types[0]) {
-        case ChartType.Area:
-          return new google.visualization.AreaChart(this.chartContainer);
-        case ChartType.Bubble:
-          return new google.visualization.BubbleChart(this.chartContainer);
-        case ChartType.Cal:
-          return new google.visualization.Calendar(this.chartContainer);
-        case ChartType.Candlestick:
-          return new google.visualization.CandlestickChart(this.chartContainer);
-        case ChartType.Geo:
-          return new google.visualization.GeoChart(this.chartContainer);
-        case ChartType.Hbar:
-          return new google.visualization.BarChart(this.chartContainer);
-        case ChartType.Line:
-          return new google.visualization.LineChart(this.chartContainer);
-        case ChartType.Pie:
-          return new google.visualization.PieChart(this.chartContainer);
-        case ChartType.Sankey:
-          return new google.visualization.Sankey(this.chartContainer);
-        case ChartType.Scatter:
-          return new google.visualization.ScatterChart(this.chartContainer);
-        default:
-          return new google.visualization.ColumnChart(this.chartContainer);
-      }
-    }
-  }
-  getMainChartType() {
-    if (this.types.length > 0) {
-      return this.types[0];
-    }
-    return ChartType.Unk;
-  }
-  isComboChart() {
-    return this.types.length > 1;
-  }
-  createGoogleChartOptions() {
-    const opts = {
-      backgroundColor: 'transparent',
-      is3D: ChartAspect.D3 === this.asp,
-    };
-    if (this.trendlines)
-      opts.trendlines = this.trendlines;
-    if (this.colors && this.colors.length > 0) {
-      opts.colors = this.colors;
-    }
-    else {
-      opts.colors = this.themeColors;
-    }
-    if (this.legend && this.legend !== 'none') {
-      opts.legend = {
-        position: this.legend,
-        textStyle: { color: this.themeText },
-      };
-    }
-    else {
-      opts.legend = {
-        position: 'none',
-      };
-    }
-    if (this.stacked &&
-      (ChartType.ColumnChart === this.getMainChartType() ||
-        ChartType.Unk === this.getMainChartType() ||
-        ChartType.Hbar === this.getMainChartType() ||
-        ChartType.Vbar === this.getMainChartType())) {
-      opts.isStacked = true;
-    }
-    if (this.chartTitle) {
-      opts.title = this.chartTitle.value;
-      opts.titleTextStyle = {};
-      if (this.chartTitle.color) {
-        opts.titleTextStyle.color = this.chartTitle.color;
-      }
-      else {
-        opts.titleTextStyle.color = this.themeText;
-      }
-      if (this.chartTitle.size) {
-        opts.titleTextStyle.fontSize = this.chartTitle.size;
-      }
-    }
-    // series for combo chart
-    if (this.isComboChart()) {
-      opts.series = {};
-      this.types.forEach((type, index) => {
-        let serieType = 'bars';
-        if (ChartType.Line === type) {
-          serieType = 'line';
-        }
-        else if (ChartType.Area === type) {
-          serieType = 'area';
-        }
-        let idx = '';
-        if ((this.vAxes && this.vAxes.length > 0) ||
-          (this.hAxes && this.hAxes.length > 0)) {
-          idx = index.toString();
-        }
-        opts.series[index.toString()] = {
-          type: serieType,
-          targetAxisIndex: idx,
-        };
-      });
-    }
-    if (this.vAxes) {
-      opts.vAxes = {};
-      this.vAxes.forEach((vAxe, index) => {
-        opts.vAxes[index.toString()] = vAxe;
-      });
-    }
-    if (this.vAxis) {
-      opts.vAxis = this.vAxis;
-      opts.vAxis['textStyle'] = { color: this.themeText };
-    }
-    else {
-      opts.vAxis = { textStyle: { color: this.themeText } };
-    }
-    if (this.hAxes) {
-      opts.hAxes = {};
-      this.hAxes.forEach((hAxe, index) => {
-        opts.hAxes[index.toString()] = hAxe;
-      });
-    }
-    if (this.hAxis) {
-      opts.hAxis = this.hAxis;
-      opts.hAxis['textStyle'] = { color: this.themeText };
-    }
-    else {
-      opts.hAxis = { textStyle: { color: this.themeText } };
-    }
-    if (this.types[0] === 'Pie') {
-      opts.slices = [];
-      for (let index = 0; index < opts.colors.length; index++) {
-        opts.slices.push({
-          textStyle: {
-            color: this.kupManager.theme.colorContrast(opts.colors[index]),
-          },
-        });
-      }
-    }
-    return opts;
-  }
-  createChart() {
-    const tableColumns = convertColumns(this.data, {
-      axis: this.axis,
-      series: this.series,
-    });
-    const tableRows = convertRows(this.data, tableColumns, this.showMarks);
-    const dataTableColumns = [];
-    for (let i = 0; i < tableColumns.length; i++) {
-      const c = tableColumns[i];
-      dataTableColumns.push({
-        label: getSerieDecode(c.name, this.data.columns),
-      });
-      if (i > 0 && this.showMarks) {
-        dataTableColumns.push({
-          type: 'string',
-          role: 'annotation',
-        });
-      }
-    }
-    this.gChartDataTable = new google.visualization.arrayToDataTable([
-      dataTableColumns,
-      ...tableRows,
-    ]);
-    this.gChartView = new google.visualization.DataView(this.gChartDataTable);
-    if (this.sorting && this.sorting.length > 0) {
-      this.gChartView.setRows(this.gChartView.getSortedRows(this.sorting));
-    }
-    this.gChart = this.createGoogleChart();
-    const options = this.createGoogleChartOptions();
-    this.gChart.draw(this.gChartView, options);
-    google.visualization.events.addListener(this.gChart, 'select', this.onChartSelect.bind(this));
-  }
-  onChartSelect() {
-    const selectedItem = this.gChart.getSelection()[0];
-    if (selectedItem) {
-      const event = {
-        comp: this,
-        id: this.rootElement.id,
-      };
-      if (selectedItem.date) {
-        // calendar chart
-        event.datetime = selectedItem.date;
-        if (selectedItem.row || selectedItem.row == 0) {
-          const rowIndex = this.gChartView.getTableRowIndex(selectedItem.row);
-          event.row = this.data.rows[rowIndex];
-          event.rowindex = rowIndex;
-        }
-        else {
-          return;
-        }
-      }
-      else {
-        // any other chart
-        const rowIndex = selectedItem.row;
-        const colIndex = selectedItem.column;
-        const originalRowIndex = this.gChartView.getTableRowIndex(rowIndex != null ? rowIndex : 0);
-        event.row = this.data.rows[originalRowIndex];
-        event.rowindex = originalRowIndex;
-        if (this.series.length > 1) {
-          let originalColIndex = this.gChartView.getTableColumnIndex(colIndex != null ? colIndex : 0);
-          // checking if col is annotation
-          if ('annotation' ===
-            this.gChartDataTable.getColumnProperty(originalColIndex, 'role')) {
-            --originalColIndex;
-          }
-          event.column = getColumnByName(this.data.columns, this.series[originalColIndex - 1].code);
-          event.colindex = originalColIndex;
-        }
-        else {
-          event.column = getColumnByName(this.data.columns, this.series[0].code);
-          event.colindex = 0;
-        }
-      }
-      this.kupChartClick.emit(event);
-    }
-  }
-  loadOfflineChart() {
-    if (!this.offlineMode.value || this.offlineMode.value == '') {
-      this.kupManager.debug.logMessage(this, "Incorrect or incomplete data, can't render chart in offline mode!", KupDebugCategory.WARNING);
-      return;
-    }
-    let valueAsArray = this.offlineMode.value.split(';');
-    let colors = undefined;
-    var options = {
-      height: this.rootElement.clientHeight,
-      width: this.rootElement.clientWidth,
-    };
-    if (this.colors && this.colors.length > 0) {
-      colors = this.colors;
-    }
-    else {
-      colors = this.themeColors;
-    }
-    switch (this.offlineMode.shape) {
-      case 'box':
-        options['type'] = 'box';
-        break;
-      case 'bul':
-      case 'bullet':
-        options['type'] = 'bullet';
-        options['targetWidth'] = this.rootElement.clientWidth / 20;
-        break;
-      case 'dis':
-      case 'discrete':
-        options['type'] = 'discrete';
-        options['lineColor'] = colors[0];
-        break;
-      case 'lin':
-      case 'line':
-        options['type'] = 'line';
-        options['lineColor'] = colors[0];
-        options['fillColor'] = colors[1];
-        break;
-      case 'pie':
-        options['type'] = 'pie';
-        options['sliceColors'] = colors;
-        break;
-      case 'tri':
-      case 'tristate':
-        options['type'] = 'tristate';
-        options['barWidth'] =
-          this.rootElement.clientWidth / valueAsArray.length;
-        break;
-      default:
-        options['type'] = 'bar';
-        options['barColor'] = colors[0];
-        options['negBarColor'] = colors[1];
-        options['zeroBarColor'] = colors[2];
-        options['barWidth'] =
-          this.rootElement.clientWidth / valueAsArray.length;
-    }
-    $(this.chartContainer).sparkline(this.complianceCheck(valueAsArray), options);
-  }
-  complianceCheck(valueAsArray) {
-    let ints = [valueAsArray.length];
-    let i = 0;
-    valueAsArray.forEach((element) => {
-      try {
-        element = element.replace(',', '.');
-        ints[i++] = parseFloat(element);
-      }
-      catch (e) {
-        ints[i++] = null;
-      }
-    });
-    return ints;
-  }
-  fetchThemeColors() {
-    const colorArray = [];
-    const key = '--kup-chart-color-';
-    for (let index = 1; this.kupManager.theme.cssVars[key + index]; index++) {
-      colorArray.push(this.kupManager.theme.cssVars[key + index]);
-    }
-    this.themeText =
-      this.kupManager.theme.cssVars[KupThemeColorValues.TEXT];
-    try {
-      for (let index = 0; index < this.data.rows.length ||
-        index < this.data.columns.length; index++) {
-        colorArray.push(this.kupManager.theme.randomColor(25));
-      }
-    }
-    catch (error) {
-      if (!this.offlineMode) {
-        this.kupManager.debug.logMessage(this, 'Chart colors setup failed!', KupDebugCategory.WARNING);
-      }
-    }
-    this.themeColors = colorArray;
-  }
-  /*-------------------------------------------------*/
-  /*          L i f e c y c l e   H o o k s          */
-  /*-------------------------------------------------*/
-  componentWillLoad() {
-    this.kupManager.debug.logLoad(this, false);
-    this.kupManager.theme.register(this);
-    this.identifyRows();
-  }
-  componentDidLoad() {
-    this.kupManager.resize.observe(this.rootElement);
-    if (!this.offlineMode && (!this.axis || !this.series)) {
-      return;
-    }
-    // loading charts
-    if (google && !this.offlineMode) {
-      // getting google charts css from main document
-      document
-        .querySelectorAll(`link[href^="https://www.gstatic.com/charts/${this.version}/css"]`)
-        .forEach((node) => this.rootElement.shadowRoot.appendChild(node.cloneNode()));
-      try {
-        this.loadGoogleChart();
-      }
-      catch (err) {
-        console.error(err);
-      }
-    }
-    else {
-      try {
-        this.loadOfflineChart();
-      }
-      catch (err) {
-        console.error(err);
-      }
-    }
-    this.kupManager.debug.logLoad(this, true);
-  }
-  componentWillRender() {
-    this.kupManager.debug.logRender(this, false);
-    this.fetchThemeColors();
-  }
-  componentDidRender() {
-    this.kupManager.debug.logRender(this, true);
-  }
-  componentWillUpdate() {
-    if (this.gChart) {
-      this.gChart.clearChart();
-    }
-  }
-  componentDidUpdate() {
-    if (!this.offlineMode) {
-      this.loadGoogleChart();
-    }
-    else {
-      this.loadOfflineChart();
-    }
-  }
-  render() {
-    this.elStyle = undefined;
-    this.elStyle = {
-      height: this.sizeY,
-      minHeight: this.sizeY,
-      width: this.sizeX,
-      minWidth: this.sizeX,
-    };
-    return (h(Host, { style: this.elStyle }, h("style", null, this.kupManager.theme.setKupStyle(this.rootElement)), h("div", { id: componentWrapperId, ref: (chartContainer) => (this.chartContainer = chartContainer) })));
-  }
-  disconnectedCallback() {
-    this.kupManager.theme.unregister(this);
-    this.kupManager.resize.unobserve(this.rootElement);
-  }
-  static get is() { return "kup-chart"; }
-  static get encapsulation() { return "shadow"; }
-  static get originalStyleUrls() {
-    return {
-      "$": ["kup-chart.scss"]
-    };
-  }
-  static get styleUrls() {
-    return {
-      "$": ["kup-chart.css"]
-    };
-  }
-  static get properties() {
-    return {
-      "asp": {
-        "type": "string",
-        "mutable": false,
-        "complexType": {
-          "original": "ChartAspect",
-          "resolved": "ChartAspect.D2 | ChartAspect.D3",
-          "references": {
-            "ChartAspect": {
-              "location": "import",
-              "path": "./kup-chart-declarations"
-            }
-          }
-        },
-        "required": false,
-        "optional": false,
-        "docs": {
-          "tags": [{
-              "name": "default",
-              "text": "undefined"
-            }],
-          "text": "Sets the chart to a 2D or 3D aspect. 3D only works for Pie graphs."
-        },
-        "attribute": "asp",
-        "reflect": false
-      },
-      "axis": {
-        "type": "string",
-        "mutable": false,
-        "complexType": {
-          "original": "string",
-          "resolved": "string",
-          "references": {}
-        },
-        "required": false,
-        "optional": false,
-        "docs": {
-          "tags": [{
-              "name": "default",
-              "text": "undefined"
-            }],
-          "text": "Sets the axis of the chart."
-        },
-        "attribute": "axis",
-        "reflect": false
-      },
-      "chartTitle": {
-        "type": "unknown",
-        "mutable": false,
-        "complexType": {
-          "original": "ChartTitle",
-          "resolved": "ChartTitle",
-          "references": {
-            "ChartTitle": {
-              "location": "import",
-              "path": "./kup-chart-declarations"
-            }
-          }
-        },
-        "required": false,
-        "optional": false,
-        "docs": {
-          "tags": [{
-              "name": "default",
-              "text": "undefined"
-            }],
-          "text": "Title of the graph."
-        }
-      },
-      "colors": {
-        "type": "unknown",
-        "mutable": false,
-        "complexType": {
-          "original": "string[]",
-          "resolved": "string[]",
-          "references": {}
-        },
-        "required": false,
-        "optional": false,
-        "docs": {
-          "tags": [{
-              "name": "default",
-              "text": "[]"
-            }],
-          "text": "Colors of the chart."
-        },
-        "defaultValue": "[]"
-      },
-      "customStyle": {
-        "type": "string",
-        "mutable": false,
-        "complexType": {
-          "original": "string",
-          "resolved": "string",
-          "references": {}
-        },
-        "required": false,
-        "optional": false,
-        "docs": {
-          "tags": [{
-              "name": "default",
-              "text": "\"\""
-            }, {
-              "name": "see",
-              "text": "https://ketchup.smeup.com/ketchup-showcase/#/customization"
-            }],
-          "text": "Custom style of the component."
-        },
-        "attribute": "custom-style",
-        "reflect": false,
-        "defaultValue": "''"
-      },
-      "data": {
-        "type": "unknown",
-        "mutable": false,
-        "complexType": {
-          "original": "KupDataDataset",
-          "resolved": "KupDataDataset",
-          "references": {
-            "KupDataDataset": {
-              "location": "import",
-              "path": "../../managers/kup-data/kup-data-declarations"
-            }
-          }
-        },
-        "required": false,
-        "optional": false,
-        "docs": {
-          "tags": [{
-              "name": "default",
-              "text": "undefined"
-            }],
-          "text": "The actual data of the chart."
-        }
-      },
-      "hAxis": {
-        "type": "unknown",
-        "mutable": false,
-        "complexType": {
-          "original": "ChartAxis",
-          "resolved": "ChartAxis",
-          "references": {
-            "ChartAxis": {
-              "location": "import",
-              "path": "./kup-chart-declarations"
-            }
-          }
-        },
-        "required": false,
-        "optional": false,
-        "docs": {
-          "tags": [{
-              "name": "default",
-              "text": "undefined"
-            }],
-          "text": "Customize the hAxis."
-        }
-      },
-      "hAxes": {
-        "type": "unknown",
-        "mutable": false,
-        "complexType": {
-          "original": "ChartAxis[]",
-          "resolved": "ChartAxis[]",
-          "references": {
-            "ChartAxis": {
-              "location": "import",
-              "path": "./kup-chart-declarations"
-            }
-          }
-        },
-        "required": false,
-        "optional": false,
-        "docs": {
-          "tags": [],
-          "text": "Customize the hAxes for multiple-chart."
-        }
-      },
-      "legend": {
-        "type": "string",
-        "mutable": false,
-        "complexType": {
-          "original": "string",
-          "resolved": "string",
-          "references": {}
-        },
-        "required": false,
-        "optional": false,
-        "docs": {
-          "tags": [{
-              "name": "default",
-              "text": "\"right\""
-            }],
-          "text": "Sets the position of the legend. Supported values: bottom, labeled, left, none, right, top. Keep in mind that legend types are tied to chart types, some combinations might not work."
-        },
-        "attribute": "legend",
-        "reflect": false,
-        "defaultValue": "'right'"
-      },
-      "offlineMode": {
-        "type": "unknown",
-        "mutable": false,
-        "complexType": {
-          "original": "ChartOfflineMode",
-          "resolved": "ChartOfflineMode",
-          "references": {
-            "ChartOfflineMode": {
-              "location": "import",
-              "path": "./kup-chart-declarations"
-            }
-          }
-        },
-        "required": false,
-        "optional": false,
-        "docs": {
-          "tags": [{
-              "name": "default",
-              "text": "undefined"
-            }],
-          "text": "Renders charts without the Google API and using jQuery Sparkline."
-        },
-        "defaultValue": "undefined"
-      },
-      "series": {
-        "type": "unknown",
-        "mutable": false,
-        "complexType": {
-          "original": "ChartSerie[]",
-          "resolved": "ChartSerie[]",
-          "references": {
-            "ChartSerie": {
-              "location": "import",
-              "path": "./kup-chart-declarations"
-            }
-          }
-        },
-        "required": false,
-        "optional": false,
-        "docs": {
-          "tags": [{
-              "name": "default",
-              "text": "undefined"
-            }],
-          "text": "The data series to be displayed. They must be of the same type."
-        }
-      },
-      "showMarks": {
-        "type": "boolean",
-        "mutable": false,
-        "complexType": {
-          "original": "boolean",
-          "resolved": "boolean",
-          "references": {}
-        },
-        "required": false,
-        "optional": false,
-        "docs": {
-          "tags": [{
-              "name": "default",
-              "text": "false"
-            }],
-          "text": "Displays the numerical values."
-        },
-        "attribute": "show-marks",
-        "reflect": false,
-        "defaultValue": "false"
-      },
-      "sizeX": {
-        "type": "string",
-        "mutable": false,
-        "complexType": {
-          "original": "string",
-          "resolved": "string",
-          "references": {}
-        },
-        "required": false,
-        "optional": false,
-        "docs": {
-          "tags": [{
-              "name": "default",
-              "text": "\"100%\""
-            }],
-          "text": "The width of the chart, defaults to 100%. Accepts any valid CSS format (px, %, vw, etc.)."
-        },
-        "attribute": "size-x",
-        "reflect": false,
-        "defaultValue": "'100%'"
-      },
-      "sizeY": {
-        "type": "string",
-        "mutable": false,
-        "complexType": {
-          "original": "string",
-          "resolved": "string",
-          "references": {}
-        },
-        "required": false,
-        "optional": false,
-        "docs": {
-          "tags": [{
-              "name": "default",
-              "text": "\"100%\""
-            }],
-          "text": "The height of the chart, defaults to 100%. Accepts any valid CSS format (px, %, vh, etc.)."
-        },
-        "attribute": "size-y",
-        "reflect": false,
-        "defaultValue": "'100%'"
-      },
-      "sorting": {
-        "type": "unknown",
-        "mutable": false,
-        "complexType": {
-          "original": "KupChartSort[]",
-          "resolved": "KupChartSort[]",
-          "references": {
-            "KupChartSort": {
-              "location": "import",
-              "path": "./kup-chart-declarations"
-            }
-          }
-        },
-        "required": false,
-        "optional": false,
-        "docs": {
-          "tags": [{
-              "name": "default",
-              "text": "null"
-            }],
-          "text": "Used to sort series."
-        },
-        "defaultValue": "null"
-      },
-      "stacked": {
-        "type": "boolean",
-        "mutable": false,
-        "complexType": {
-          "original": "boolean",
-          "resolved": "boolean",
-          "references": {}
-        },
-        "required": false,
-        "optional": false,
-        "docs": {
-          "tags": [],
-          "text": "Displays the data columns of an object on top of each other."
-        },
-        "attribute": "stacked",
-        "reflect": false,
-        "defaultValue": "false"
-      },
-      "types": {
-        "type": "unknown",
-        "mutable": false,
-        "complexType": {
-          "original": "ChartType[]",
-          "resolved": "ChartType[]",
-          "references": {
-            "ChartType": {
-              "location": "import",
-              "path": "./kup-chart-declarations"
-            }
-          }
-        },
-        "required": false,
-        "optional": false,
-        "docs": {
-          "tags": [{
-              "name": "default",
-              "text": "[ChartType.Hbar]"
-            }],
-          "text": "The type of the chart. Supported formats: Area, Bubble, Cal, Candlestick, Combo, Geo, Hbar, Line, Ohlc, Pie, Sankey, Scatter, Unk, Vbar."
-        },
-        "defaultValue": "[ChartType.Hbar]"
-      },
-      "vAxes": {
-        "type": "unknown",
-        "mutable": false,
-        "complexType": {
-          "original": "ChartAxis[]",
-          "resolved": "ChartAxis[]",
-          "references": {
-            "ChartAxis": {
-              "location": "import",
-              "path": "./kup-chart-declarations"
-            }
-          }
-        },
-        "required": false,
-        "optional": false,
-        "docs": {
-          "tags": [],
-          "text": "Customize the vAxes for multiple-chart."
-        }
-      },
-      "vAxis": {
-        "type": "unknown",
-        "mutable": false,
-        "complexType": {
-          "original": "ChartAxis",
-          "resolved": "ChartAxis",
-          "references": {
-            "ChartAxis": {
-              "location": "import",
-              "path": "./kup-chart-declarations"
-            }
-          }
-        },
-        "required": false,
-        "optional": false,
-        "docs": {
-          "tags": [{
-              "name": "default",
-              "text": "undefined"
-            }],
-          "text": "Customize the vAxis."
-        }
-      },
-      "trendlines": {
-        "type": "unknown",
-        "mutable": false,
-        "complexType": {
-          "original": "KupChartTrendlines",
-          "resolved": "KupChartTrendlines",
-          "references": {
-            "KupChartTrendlines": {
-              "location": "import",
-              "path": "./kup-chart-declarations"
-            }
-          }
-        },
-        "required": false,
-        "optional": false,
-        "docs": {
-          "tags": [],
-          "text": "KupChartTrendlines."
-        }
-      },
-      "version": {
-        "type": "string",
-        "mutable": false,
-        "complexType": {
-          "original": "string",
-          "resolved": "string",
-          "references": {}
-        },
-        "required": false,
-        "optional": false,
-        "docs": {
-          "tags": [{
-              "name": "default",
-              "text": "\"45.2\""
-            }],
-          "text": "Google chart version to load"
-        },
-        "attribute": "version",
-        "reflect": false,
-        "defaultValue": "'45.2'"
-      }
-    };
-  }
-  static get events() {
-    return [{
-        "method": "kupChartClick",
-        "name": "kup-chart-click",
-        "bubbles": true,
-        "cancelable": false,
-        "composed": true,
-        "docs": {
-          "tags": [],
-          "text": "Triggered when a chart serie is clicked"
-        },
-        "complexType": {
-          "original": "KupChartClickEvent",
-          "resolved": "KupChartClickEvent",
-          "references": {
-            "KupChartClickEvent": {
-              "location": "import",
-              "path": "./kup-chart-declarations"
-            }
-          }
-        }
-      }];
-  }
-  static get methods() {
-    return {
-      "getProps": {
-        "complexType": {
-          "signature": "(descriptions?: boolean) => Promise<GenericObject>",
-          "parameters": [{
-              "tags": [{
-                  "name": "param",
-                  "text": "descriptions - When provided and true, the result will be the list of props with their description."
-                }],
-              "text": "- When provided and true, the result will be the list of props with their description."
-            }],
-          "references": {
-            "Promise": {
-              "location": "global"
-            },
-            "GenericObject": {
-              "location": "import",
-              "path": "../../types/GenericTypes"
-            }
-          },
-          "return": "Promise<GenericObject>"
-        },
-        "docs": {
-          "text": "Used to retrieve component's props values.",
-          "tags": [{
-              "name": "param",
-              "text": "descriptions - When provided and true, the result will be the list of props with their description."
-            }, {
-              "name": "returns",
-              "text": "List of props as object, each key will be a prop."
-            }]
-        }
-      },
-      "refresh": {
-        "complexType": {
-          "signature": "() => Promise<void>",
-          "parameters": [],
-          "references": {
-            "Promise": {
-              "location": "global"
-            }
-          },
-          "return": "Promise<void>"
-        },
-        "docs": {
-          "text": "This method is used to trigger a new render of the component.",
-          "tags": []
-        }
-      },
-      "resizeCallback": {
-        "complexType": {
-          "signature": "() => Promise<void>",
-          "parameters": [],
-          "references": {
-            "Promise": {
-              "location": "global"
-            }
-          },
-          "return": "Promise<void>"
-        },
-        "docs": {
-          "text": "This method is invoked by KupManager whenever the component changes size.",
-          "tags": []
-        }
-      },
-      "setProps": {
-        "complexType": {
-          "signature": "(props: GenericObject) => Promise<void>",
-          "parameters": [{
-              "tags": [{
-                  "name": "param",
-                  "text": "props - Object containing props that will be set to the component."
-                }],
-              "text": "- Object containing props that will be set to the component."
-            }],
-          "references": {
-            "Promise": {
-              "location": "global"
-            },
-            "GenericObject": {
-              "location": "import",
-              "path": "../../types/GenericTypes"
-            }
-          },
-          "return": "Promise<void>"
-        },
-        "docs": {
-          "text": "Sets the props to the component.",
-          "tags": [{
-              "name": "param",
-              "text": "props - Object containing props that will be set to the component."
-            }]
-        }
-      }
-    };
-  }
-  static get elementRef() { return "rootElement"; }
-  static get watchers() {
-    return [{
-        "propName": "data",
-        "methodName": "identifyRows"
-      }];
-  }
-}
+import { forceUpdate, h, Host, } from '@stencil/core';
+import { ChartType, ChartAspect, KupChartProps, } from './kup-chart-declarations';
+import { convertColumns, convertRows, getSerieDecode, } from './kup-chart-builder';
+import { kupManagerInstance, } from '../../managers/kup-manager/kup-manager';
+import { getProps, identify, setProps } from '../../utils/utils';
+import { getColumnByName } from '../../utils/cell-utils';
+import { KupDebugCategory } from '../../managers/kup-debug/kup-debug-declarations';
+import { KupThemeColorValues } from '../../managers/kup-theme/kup-theme-declarations';
+import { componentWrapperId } from '../../variables/GenericVariables';
+export class KupChart {
+  constructor() {
+    /**
+     * Instance of the KupManager class.
+     */
+    this.kupManager = kupManagerInstance();
+    this.elStyle = undefined;
+    this.themeColors = null;
+    this.themeText = null;
+    this.asp = undefined;
+    this.axis = undefined;
+    this.chartTitle = undefined;
+    this.colors = [];
+    this.customStyle = '';
+    this.data = undefined;
+    this.hAxis = undefined;
+    this.hAxes = undefined;
+    this.legend = 'right';
+    this.offlineMode = undefined;
+    this.series = undefined;
+    this.showMarks = false;
+    this.sizeX = '100%';
+    this.sizeY = '100%';
+    this.sorting = null;
+    this.stacked = false;
+    this.types = [ChartType.Hbar];
+    this.vAxes = undefined;
+    this.vAxis = undefined;
+    this.trendlines = undefined;
+    this.version = '45.2';
+  }
+  /*-------------------------------------------------*/
+  /*                  W a t c h e r s                */
+  /*-------------------------------------------------*/
+  identifyRows() {
+    if (this.data) {
+      identify(this.data.rows);
+    }
+  }
+  /*-------------------------------------------------*/
+  /*           P u b l i c   M e t h o d s           */
+  /*-------------------------------------------------*/
+  /**
+   * Used to retrieve component's props values.
+   * @param {boolean} descriptions - When provided and true, the result will be the list of props with their description.
+   * @returns {Promise<GenericObject>} List of props as object, each key will be a prop.
+   */
+  async getProps(descriptions) {
+    return getProps(this, KupChartProps, descriptions);
+  }
+  /**
+   * This method is used to trigger a new render of the component.
+   */
+  async refresh() {
+    forceUpdate(this);
+  }
+  /**
+   * This method is invoked by KupManager whenever the component changes size.
+   */
+  async resizeCallback() {
+    window.clearTimeout(this.resizeTimeout);
+    this.resizeTimeout = window.setTimeout(() => {
+      if (!this.offlineMode) {
+        const options = this.createGoogleChartOptions();
+        try {
+          this.gChart.draw(this.gChartView, options);
+        }
+        catch (error) { }
+      }
+      else {
+        this.loadOfflineChart();
+      }
+    }, 300);
+  }
+  /**
+   * Sets the props to the component.
+   * @param {GenericObject} props - Object containing props that will be set to the component.
+   */
+  async setProps(props) {
+    setProps(this, KupChartProps, props);
+  }
+  /*-------------------------------------------------*/
+  /*           P r i v a t e   M e t h o d s         */
+  /*-------------------------------------------------*/
+  loadGoogleChart() {
+    google.charts.setOnLoadCallback(this.createChart.bind(this));
+  }
+  createGoogleChart() {
+    if (this.isComboChart()) {
+      return new google.visualization.ComboChart(this.chartContainer);
+    }
+    else if (this.types.length === 1) {
+      switch (this.types[0]) {
+        case ChartType.Area:
+          return new google.visualization.AreaChart(this.chartContainer);
+        case ChartType.Bubble:
+          return new google.visualization.BubbleChart(this.chartContainer);
+        case ChartType.Cal:
+          return new google.visualization.Calendar(this.chartContainer);
+        case ChartType.Candlestick:
+          return new google.visualization.CandlestickChart(this.chartContainer);
+        case ChartType.Geo:
+          return new google.visualization.GeoChart(this.chartContainer);
+        case ChartType.Hbar:
+          return new google.visualization.BarChart(this.chartContainer);
+        case ChartType.Line:
+          return new google.visualization.LineChart(this.chartContainer);
+        case ChartType.Pie:
+          return new google.visualization.PieChart(this.chartContainer);
+        case ChartType.Sankey:
+          return new google.visualization.Sankey(this.chartContainer);
+        case ChartType.Scatter:
+          return new google.visualization.ScatterChart(this.chartContainer);
+        default:
+          return new google.visualization.ColumnChart(this.chartContainer);
+      }
+    }
+  }
+  getMainChartType() {
+    if (this.types.length > 0) {
+      return this.types[0];
+    }
+    return ChartType.Unk;
+  }
+  isComboChart() {
+    return this.types.length > 1;
+  }
+  createGoogleChartOptions() {
+    const opts = {
+      backgroundColor: 'transparent',
+      is3D: ChartAspect.D3 === this.asp,
+    };
+    if (this.trendlines)
+      opts.trendlines = this.trendlines;
+    if (this.colors && this.colors.length > 0) {
+      opts.colors = this.colors;
+    }
+    else {
+      opts.colors = this.themeColors;
+    }
+    if (this.legend && this.legend !== 'none') {
+      opts.legend = {
+        position: this.legend,
+        textStyle: { color: this.themeText },
+      };
+    }
+    else {
+      opts.legend = {
+        position: 'none',
+      };
+    }
+    if (this.stacked &&
+      (ChartType.ColumnChart === this.getMainChartType() ||
+        ChartType.Unk === this.getMainChartType() ||
+        ChartType.Hbar === this.getMainChartType() ||
+        ChartType.Vbar === this.getMainChartType())) {
+      opts.isStacked = true;
+    }
+    if (this.chartTitle) {
+      opts.title = this.chartTitle.value;
+      opts.titleTextStyle = {};
+      if (this.chartTitle.color) {
+        opts.titleTextStyle.color = this.chartTitle.color;
+      }
+      else {
+        opts.titleTextStyle.color = this.themeText;
+      }
+      if (this.chartTitle.size) {
+        opts.titleTextStyle.fontSize = this.chartTitle.size;
+      }
+    }
+    // series for combo chart
+    if (this.isComboChart()) {
+      opts.series = {};
+      this.types.forEach((type, index) => {
+        let serieType = 'bars';
+        if (ChartType.Line === type) {
+          serieType = 'line';
+        }
+        else if (ChartType.Area === type) {
+          serieType = 'area';
+        }
+        let idx = '';
+        if ((this.vAxes && this.vAxes.length > 0) ||
+          (this.hAxes && this.hAxes.length > 0)) {
+          idx = index.toString();
+        }
+        opts.series[index.toString()] = {
+          type: serieType,
+          targetAxisIndex: idx,
+        };
+      });
+    }
+    if (this.vAxes) {
+      opts.vAxes = {};
+      this.vAxes.forEach((vAxe, index) => {
+        opts.vAxes[index.toString()] = vAxe;
+      });
+    }
+    if (this.vAxis) {
+      opts.vAxis = this.vAxis;
+      opts.vAxis['textStyle'] = { color: this.themeText };
+    }
+    else {
+      opts.vAxis = { textStyle: { color: this.themeText } };
+    }
+    if (this.hAxes) {
+      opts.hAxes = {};
+      this.hAxes.forEach((hAxe, index) => {
+        opts.hAxes[index.toString()] = hAxe;
+      });
+    }
+    if (this.hAxis) {
+      opts.hAxis = this.hAxis;
+      opts.hAxis['textStyle'] = { color: this.themeText };
+    }
+    else {
+      opts.hAxis = { textStyle: { color: this.themeText } };
+    }
+    if (this.types[0] === 'Pie') {
+      opts.slices = [];
+      for (let index = 0; index < opts.colors.length; index++) {
+        opts.slices.push({
+          textStyle: {
+            color: this.kupManager.theme.colorContrast(opts.colors[index]),
+          },
+        });
+      }
+    }
+    return opts;
+  }
+  createChart() {
+    const tableColumns = convertColumns(this.data, {
+      axis: this.axis,
+      series: this.series,
+    });
+    const tableRows = convertRows(this.data, tableColumns, this.showMarks);
+    const dataTableColumns = [];
+    for (let i = 0; i < tableColumns.length; i++) {
+      const c = tableColumns[i];
+      dataTableColumns.push({
+        label: getSerieDecode(c.name, this.data.columns),
+      });
+      if (i > 0 && this.showMarks) {
+        dataTableColumns.push({
+          type: 'string',
+          role: 'annotation',
+        });
+      }
+    }
+    this.gChartDataTable = new google.visualization.arrayToDataTable([
+      dataTableColumns,
+      ...tableRows,
+    ]);
+    this.gChartView = new google.visualization.DataView(this.gChartDataTable);
+    if (this.sorting && this.sorting.length > 0) {
+      this.gChartView.setRows(this.gChartView.getSortedRows(this.sorting));
+    }
+    this.gChart = this.createGoogleChart();
+    const options = this.createGoogleChartOptions();
+    this.gChart.draw(this.gChartView, options);
+    google.visualization.events.addListener(this.gChart, 'select', this.onChartSelect.bind(this));
+  }
+  onChartSelect() {
+    const selectedItem = this.gChart.getSelection()[0];
+    if (selectedItem) {
+      const event = {
+        comp: this,
+        id: this.rootElement.id,
+      };
+      if (selectedItem.date) {
+        // calendar chart
+        event.datetime = selectedItem.date;
+        if (selectedItem.row || selectedItem.row == 0) {
+          const rowIndex = this.gChartView.getTableRowIndex(selectedItem.row);
+          event.row = this.data.rows[rowIndex];
+          event.rowindex = rowIndex;
+        }
+        else {
+          return;
+        }
+      }
+      else {
+        // any other chart
+        const rowIndex = selectedItem.row;
+        const colIndex = selectedItem.column;
+        const originalRowIndex = this.gChartView.getTableRowIndex(rowIndex != null ? rowIndex : 0);
+        event.row = this.data.rows[originalRowIndex];
+        event.rowindex = originalRowIndex;
+        if (this.series.length > 1) {
+          let originalColIndex = this.gChartView.getTableColumnIndex(colIndex != null ? colIndex : 0);
+          // checking if col is annotation
+          if ('annotation' ===
+            this.gChartDataTable.getColumnProperty(originalColIndex, 'role')) {
+            --originalColIndex;
+          }
+          event.column = getColumnByName(this.data.columns, this.series[originalColIndex - 1].code);
+          event.colindex = originalColIndex;
+        }
+        else {
+          event.column = getColumnByName(this.data.columns, this.series[0].code);
+          event.colindex = 0;
+        }
+      }
+      this.kupChartClick.emit(event);
+    }
+  }
+  loadOfflineChart() {
+    if (!this.offlineMode.value || this.offlineMode.value == '') {
+      this.kupManager.debug.logMessage(this, "Incorrect or incomplete data, can't render chart in offline mode!", KupDebugCategory.WARNING);
+      return;
+    }
+    let valueAsArray = this.offlineMode.value.split(';');
+    let colors = undefined;
+    var options = {
+      height: this.rootElement.clientHeight,
+      width: this.rootElement.clientWidth,
+    };
+    if (this.colors && this.colors.length > 0) {
+      colors = this.colors;
+    }
+    else {
+      colors = this.themeColors;
+    }
+    switch (this.offlineMode.shape) {
+      case 'box':
+        options['type'] = 'box';
+        break;
+      case 'bul':
+      case 'bullet':
+        options['type'] = 'bullet';
+        options['targetWidth'] = this.rootElement.clientWidth / 20;
+        break;
+      case 'dis':
+      case 'discrete':
+        options['type'] = 'discrete';
+        options['lineColor'] = colors[0];
+        break;
+      case 'lin':
+      case 'line':
+        options['type'] = 'line';
+        options['lineColor'] = colors[0];
+        options['fillColor'] = colors[1];
+        break;
+      case 'pie':
+        options['type'] = 'pie';
+        options['sliceColors'] = colors;
+        break;
+      case 'tri':
+      case 'tristate':
+        options['type'] = 'tristate';
+        options['barWidth'] =
+          this.rootElement.clientWidth / valueAsArray.length;
+        break;
+      default:
+        options['type'] = 'bar';
+        options['barColor'] = colors[0];
+        options['negBarColor'] = colors[1];
+        options['zeroBarColor'] = colors[2];
+        options['barWidth'] =
+          this.rootElement.clientWidth / valueAsArray.length;
+    }
+    $(this.chartContainer).sparkline(this.complianceCheck(valueAsArray), options);
+  }
+  complianceCheck(valueAsArray) {
+    let ints = [valueAsArray.length];
+    let i = 0;
+    valueAsArray.forEach((element) => {
+      try {
+        element = element.replace(',', '.');
+        ints[i++] = parseFloat(element);
+      }
+      catch (e) {
+        ints[i++] = null;
+      }
+    });
+    return ints;
+  }
+  fetchThemeColors() {
+    const colorArray = [];
+    const key = '--kup-chart-color-';
+    for (let index = 1; this.kupManager.theme.cssVars[key + index]; index++) {
+      colorArray.push(this.kupManager.theme.cssVars[key + index]);
+    }
+    this.themeText =
+      this.kupManager.theme.cssVars[KupThemeColorValues.TEXT];
+    try {
+      for (let index = 0; index < this.data.rows.length ||
+        index < this.data.columns.length; index++) {
+        colorArray.push(this.kupManager.theme.randomColor(25));
+      }
+    }
+    catch (error) {
+      if (!this.offlineMode) {
+        this.kupManager.debug.logMessage(this, 'Chart colors setup failed!', KupDebugCategory.WARNING);
+      }
+    }
+    this.themeColors = colorArray;
+  }
+  /*-------------------------------------------------*/
+  /*          L i f e c y c l e   H o o k s          */
+  /*-------------------------------------------------*/
+  componentWillLoad() {
+    this.kupManager.debug.logLoad(this, false);
+    this.kupManager.theme.register(this);
+    this.identifyRows();
+  }
+  componentDidLoad() {
+    this.kupManager.resize.observe(this.rootElement);
+    if (!this.offlineMode && (!this.axis || !this.series)) {
+      return;
+    }
+    // loading charts
+    if (google && !this.offlineMode) {
+      // getting google charts css from main document
+      document
+        .querySelectorAll(`link[href^="https://www.gstatic.com/charts/${this.version}/css"]`)
+        .forEach((node) => this.rootElement.shadowRoot.appendChild(node.cloneNode()));
+      try {
+        this.loadGoogleChart();
+      }
+      catch (err) {
+        console.error(err);
+      }
+    }
+    else {
+      try {
+        this.loadOfflineChart();
+      }
+      catch (err) {
+        console.error(err);
+      }
+    }
+    this.kupManager.debug.logLoad(this, true);
+  }
+  componentWillRender() {
+    this.kupManager.debug.logRender(this, false);
+    this.fetchThemeColors();
+  }
+  componentDidRender() {
+    this.kupManager.debug.logRender(this, true);
+  }
+  componentWillUpdate() {
+    if (this.gChart) {
+      this.gChart.clearChart();
+    }
+  }
+  componentDidUpdate() {
+    if (!this.offlineMode) {
+      this.loadGoogleChart();
+    }
+    else {
+      this.loadOfflineChart();
+    }
+  }
+  render() {
+    this.elStyle = undefined;
+    this.elStyle = {
+      height: this.sizeY,
+      minHeight: this.sizeY,
+      width: this.sizeX,
+      minWidth: this.sizeX,
+    };
+    return (h(Host, { style: this.elStyle }, h("style", null, this.kupManager.theme.setKupStyle(this.rootElement)), h("div", { id: componentWrapperId, ref: (chartContainer) => (this.chartContainer = chartContainer) })));
+  }
+  disconnectedCallback() {
+    this.kupManager.theme.unregister(this);
+    this.kupManager.resize.unobserve(this.rootElement);
+  }
+  static get is() { return "kup-chart"; }
+  static get encapsulation() { return "shadow"; }
+  static get originalStyleUrls() {
+    return {
+      "$": ["kup-chart.scss"]
+    };
+  }
+  static get styleUrls() {
+    return {
+      "$": ["kup-chart.css"]
+    };
+  }
+  static get properties() {
+    return {
+      "asp": {
+        "type": "string",
+        "mutable": false,
+        "complexType": {
+          "original": "ChartAspect",
+          "resolved": "ChartAspect.D2 | ChartAspect.D3",
+          "references": {
+            "ChartAspect": {
+              "location": "import",
+              "path": "./kup-chart-declarations"
+            }
+          }
+        },
+        "required": false,
+        "optional": false,
+        "docs": {
+          "tags": [{
+              "name": "default",
+              "text": "undefined"
+            }],
+          "text": "Sets the chart to a 2D or 3D aspect. 3D only works for Pie graphs."
+        },
+        "attribute": "asp",
+        "reflect": false
+      },
+      "axis": {
+        "type": "string",
+        "mutable": false,
+        "complexType": {
+          "original": "string",
+          "resolved": "string",
+          "references": {}
+        },
+        "required": false,
+        "optional": false,
+        "docs": {
+          "tags": [{
+              "name": "default",
+              "text": "undefined"
+            }],
+          "text": "Sets the axis of the chart."
+        },
+        "attribute": "axis",
+        "reflect": false
+      },
+      "chartTitle": {
+        "type": "unknown",
+        "mutable": false,
+        "complexType": {
+          "original": "ChartTitle",
+          "resolved": "ChartTitle",
+          "references": {
+            "ChartTitle": {
+              "location": "import",
+              "path": "./kup-chart-declarations"
+            }
+          }
+        },
+        "required": false,
+        "optional": false,
+        "docs": {
+          "tags": [{
+              "name": "default",
+              "text": "undefined"
+            }],
+          "text": "Title of the graph."
+        }
+      },
+      "colors": {
+        "type": "unknown",
+        "mutable": false,
+        "complexType": {
+          "original": "string[]",
+          "resolved": "string[]",
+          "references": {}
+        },
+        "required": false,
+        "optional": false,
+        "docs": {
+          "tags": [{
+              "name": "default",
+              "text": "[]"
+            }],
+          "text": "Colors of the chart."
+        },
+        "defaultValue": "[]"
+      },
+      "customStyle": {
+        "type": "string",
+        "mutable": false,
+        "complexType": {
+          "original": "string",
+          "resolved": "string",
+          "references": {}
+        },
+        "required": false,
+        "optional": false,
+        "docs": {
+          "tags": [{
+              "name": "default",
+              "text": "\"\""
+            }, {
+              "name": "see",
+              "text": "https://ketchup.smeup.com/ketchup-showcase/#/customization"
+            }],
+          "text": "Custom style of the component."
+        },
+        "attribute": "custom-style",
+        "reflect": false,
+        "defaultValue": "''"
+      },
+      "data": {
+        "type": "unknown",
+        "mutable": false,
+        "complexType": {
+          "original": "KupDataDataset",
+          "resolved": "KupDataDataset",
+          "references": {
+            "KupDataDataset": {
+              "location": "import",
+              "path": "../../managers/kup-data/kup-data-declarations"
+            }
+          }
+        },
+        "required": false,
+        "optional": false,
+        "docs": {
+          "tags": [{
+              "name": "default",
+              "text": "undefined"
+            }],
+          "text": "The actual data of the chart."
+        }
+      },
+      "hAxis": {
+        "type": "unknown",
+        "mutable": false,
+        "complexType": {
+          "original": "ChartAxis",
+          "resolved": "ChartAxis",
+          "references": {
+            "ChartAxis": {
+              "location": "import",
+              "path": "./kup-chart-declarations"
+            }
+          }
+        },
+        "required": false,
+        "optional": false,
+        "docs": {
+          "tags": [{
+              "name": "default",
+              "text": "undefined"
+            }],
+          "text": "Customize the hAxis."
+        }
+      },
+      "hAxes": {
+        "type": "unknown",
+        "mutable": false,
+        "complexType": {
+          "original": "ChartAxis[]",
+          "resolved": "ChartAxis[]",
+          "references": {
+            "ChartAxis": {
+              "location": "import",
+              "path": "./kup-chart-declarations"
+            }
+          }
+        },
+        "required": false,
+        "optional": false,
+        "docs": {
+          "tags": [],
+          "text": "Customize the hAxes for multiple-chart."
+        }
+      },
+      "legend": {
+        "type": "string",
+        "mutable": false,
+        "complexType": {
+          "original": "string",
+          "resolved": "string",
+          "references": {}
+        },
+        "required": false,
+        "optional": false,
+        "docs": {
+          "tags": [{
+              "name": "default",
+              "text": "\"right\""
+            }],
+          "text": "Sets the position of the legend. Supported values: bottom, labeled, left, none, right, top. Keep in mind that legend types are tied to chart types, some combinations might not work."
+        },
+        "attribute": "legend",
+        "reflect": false,
+        "defaultValue": "'right'"
+      },
+      "offlineMode": {
+        "type": "unknown",
+        "mutable": false,
+        "complexType": {
+          "original": "ChartOfflineMode",
+          "resolved": "ChartOfflineMode",
+          "references": {
+            "ChartOfflineMode": {
+              "location": "import",
+              "path": "./kup-chart-declarations"
+            }
+          }
+        },
+        "required": false,
+        "optional": false,
+        "docs": {
+          "tags": [{
+              "name": "default",
+              "text": "undefined"
+            }],
+          "text": "Renders charts without the Google API and using jQuery Sparkline."
+        },
+        "defaultValue": "undefined"
+      },
+      "series": {
+        "type": "unknown",
+        "mutable": false,
+        "complexType": {
+          "original": "ChartSerie[]",
+          "resolved": "ChartSerie[]",
+          "references": {
+            "ChartSerie": {
+              "location": "import",
+              "path": "./kup-chart-declarations"
+            }
+          }
+        },
+        "required": false,
+        "optional": false,
+        "docs": {
+          "tags": [{
+              "name": "default",
+              "text": "undefined"
+            }],
+          "text": "The data series to be displayed. They must be of the same type."
+        }
+      },
+      "showMarks": {
+        "type": "boolean",
+        "mutable": false,
+        "complexType": {
+          "original": "boolean",
+          "resolved": "boolean",
+          "references": {}
+        },
+        "required": false,
+        "optional": false,
+        "docs": {
+          "tags": [{
+              "name": "default",
+              "text": "false"
+            }],
+          "text": "Displays the numerical values."
+        },
+        "attribute": "show-marks",
+        "reflect": false,
+        "defaultValue": "false"
+      },
+      "sizeX": {
+        "type": "string",
+        "mutable": false,
+        "complexType": {
+          "original": "string",
+          "resolved": "string",
+          "references": {}
+        },
+        "required": false,
+        "optional": false,
+        "docs": {
+          "tags": [{
+              "name": "default",
+              "text": "\"100%\""
+            }],
+          "text": "The width of the chart, defaults to 100%. Accepts any valid CSS format (px, %, vw, etc.)."
+        },
+        "attribute": "size-x",
+        "reflect": false,
+        "defaultValue": "'100%'"
+      },
+      "sizeY": {
+        "type": "string",
+        "mutable": false,
+        "complexType": {
+          "original": "string",
+          "resolved": "string",
+          "references": {}
+        },
+        "required": false,
+        "optional": false,
+        "docs": {
+          "tags": [{
+              "name": "default",
+              "text": "\"100%\""
+            }],
+          "text": "The height of the chart, defaults to 100%. Accepts any valid CSS format (px, %, vh, etc.)."
+        },
+        "attribute": "size-y",
+        "reflect": false,
+        "defaultValue": "'100%'"
+      },
+      "sorting": {
+        "type": "unknown",
+        "mutable": false,
+        "complexType": {
+          "original": "KupChartSort[]",
+          "resolved": "KupChartSort[]",
+          "references": {
+            "KupChartSort": {
+              "location": "import",
+              "path": "./kup-chart-declarations"
+            }
+          }
+        },
+        "required": false,
+        "optional": false,
+        "docs": {
+          "tags": [{
+              "name": "default",
+              "text": "null"
+            }],
+          "text": "Used to sort series."
+        },
+        "defaultValue": "null"
+      },
+      "stacked": {
+        "type": "boolean",
+        "mutable": false,
+        "complexType": {
+          "original": "boolean",
+          "resolved": "boolean",
+          "references": {}
+        },
+        "required": false,
+        "optional": false,
+        "docs": {
+          "tags": [],
+          "text": "Displays the data columns of an object on top of each other."
+        },
+        "attribute": "stacked",
+        "reflect": false,
+        "defaultValue": "false"
+      },
+      "types": {
+        "type": "unknown",
+        "mutable": false,
+        "complexType": {
+          "original": "ChartType[]",
+          "resolved": "ChartType[]",
+          "references": {
+            "ChartType": {
+              "location": "import",
+              "path": "./kup-chart-declarations"
+            }
+          }
+        },
+        "required": false,
+        "optional": false,
+        "docs": {
+          "tags": [{
+              "name": "default",
+              "text": "[ChartType.Hbar]"
+            }],
+          "text": "The type of the chart. Supported formats: Area, Bubble, Cal, Candlestick, Combo, Geo, Hbar, Line, Ohlc, Pie, Sankey, Scatter, Unk, Vbar."
+        },
+        "defaultValue": "[ChartType.Hbar]"
+      },
+      "vAxes": {
+        "type": "unknown",
+        "mutable": false,
+        "complexType": {
+          "original": "ChartAxis[]",
+          "resolved": "ChartAxis[]",
+          "references": {
+            "ChartAxis": {
+              "location": "import",
+              "path": "./kup-chart-declarations"
+            }
+          }
+        },
+        "required": false,
+        "optional": false,
+        "docs": {
+          "tags": [],
+          "text": "Customize the vAxes for multiple-chart."
+        }
+      },
+      "vAxis": {
+        "type": "unknown",
+        "mutable": false,
+        "complexType": {
+          "original": "ChartAxis",
+          "resolved": "ChartAxis",
+          "references": {
+            "ChartAxis": {
+              "location": "import",
+              "path": "./kup-chart-declarations"
+            }
+          }
+        },
+        "required": false,
+        "optional": false,
+        "docs": {
+          "tags": [{
+              "name": "default",
+              "text": "undefined"
+            }],
+          "text": "Customize the vAxis."
+        }
+      },
+      "trendlines": {
+        "type": "unknown",
+        "mutable": false,
+        "complexType": {
+          "original": "KupChartTrendlines",
+          "resolved": "KupChartTrendlines",
+          "references": {
+            "KupChartTrendlines": {
+              "location": "import",
+              "path": "./kup-chart-declarations"
+            }
+          }
+        },
+        "required": false,
+        "optional": false,
+        "docs": {
+          "tags": [],
+          "text": "KupChartTrendlines."
+        }
+      },
+      "version": {
+        "type": "string",
+        "mutable": false,
+        "complexType": {
+          "original": "string",
+          "resolved": "string",
+          "references": {}
+        },
+        "required": false,
+        "optional": false,
+        "docs": {
+          "tags": [{
+              "name": "default",
+              "text": "\"45.2\""
+            }],
+          "text": "Google chart version to load"
+        },
+        "attribute": "version",
+        "reflect": false,
+        "defaultValue": "'45.2'"
+      }
+    };
+  }
+  static get events() {
+    return [{
+        "method": "kupChartClick",
+        "name": "kup-chart-click",
+        "bubbles": true,
+        "cancelable": false,
+        "composed": true,
+        "docs": {
+          "tags": [],
+          "text": "Triggered when a chart serie is clicked"
+        },
+        "complexType": {
+          "original": "KupChartClickEvent",
+          "resolved": "KupChartClickEvent",
+          "references": {
+            "KupChartClickEvent": {
+              "location": "import",
+              "path": "./kup-chart-declarations"
+            }
+          }
+        }
+      }];
+  }
+  static get methods() {
+    return {
+      "getProps": {
+        "complexType": {
+          "signature": "(descriptions?: boolean) => Promise<GenericObject>",
+          "parameters": [{
+              "tags": [{
+                  "name": "param",
+                  "text": "descriptions - When provided and true, the result will be the list of props with their description."
+                }],
+              "text": "- When provided and true, the result will be the list of props with their description."
+            }],
+          "references": {
+            "Promise": {
+              "location": "global"
+            },
+            "GenericObject": {
+              "location": "import",
+              "path": "../../types/GenericTypes"
+            }
+          },
+          "return": "Promise<GenericObject>"
+        },
+        "docs": {
+          "text": "Used to retrieve component's props values.",
+          "tags": [{
+              "name": "param",
+              "text": "descriptions - When provided and true, the result will be the list of props with their description."
+            }, {
+              "name": "returns",
+              "text": "List of props as object, each key will be a prop."
+            }]
+        }
+      },
+      "refresh": {
+        "complexType": {
+          "signature": "() => Promise<void>",
+          "parameters": [],
+          "references": {
+            "Promise": {
+              "location": "global"
+            }
+          },
+          "return": "Promise<void>"
+        },
+        "docs": {
+          "text": "This method is used to trigger a new render of the component.",
+          "tags": []
+        }
+      },
+      "resizeCallback": {
+        "complexType": {
+          "signature": "() => Promise<void>",
+          "parameters": [],
+          "references": {
+            "Promise": {
+              "location": "global"
+            }
+          },
+          "return": "Promise<void>"
+        },
+        "docs": {
+          "text": "This method is invoked by KupManager whenever the component changes size.",
+          "tags": []
+        }
+      },
+      "setProps": {
+        "complexType": {
+          "signature": "(props: GenericObject) => Promise<void>",
+          "parameters": [{
+              "tags": [{
+                  "name": "param",
+                  "text": "props - Object containing props that will be set to the component."
+                }],
+              "text": "- Object containing props that will be set to the component."
+            }],
+          "references": {
+            "Promise": {
+              "location": "global"
+            },
+            "GenericObject": {
+              "location": "import",
+              "path": "../../types/GenericTypes"
+            }
+          },
+          "return": "Promise<void>"
+        },
+        "docs": {
+          "text": "Sets the props to the component.",
+          "tags": [{
+              "name": "param",
+              "text": "props - Object containing props that will be set to the component."
+            }]
+        }
+      }
+    };
+  }
+  static get elementRef() { return "rootElement"; }
+  static get watchers() {
+    return [{
+        "propName": "data",
+        "methodName": "identifyRows"
+      }];
+  }
+}