@sme.up/ketchup 9.2.0 → 9.3.0

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

@@ -8,1092 +8,1092 @@ import { KupDebugCategory } from "../../managers/kup-debug/kup-debug-declaration
 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);
+    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';
     }
-  }
-  /*-------------------------------------------------*/
-  /*           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);
+    /*-------------------------------------------------*/
+    /*                  W a t c h e r s                */
+    /*-------------------------------------------------*/
+    identifyRows() {
+        if (this.data) {
+            identify(this.data.rows);
         }
-        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;
+    /*-------------------------------------------------*/
+    /*           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);
     }
-    if (this.legend && this.legend !== 'none') {
-      opts.legend = {
-        position: this.legend,
-        textStyle: { color: this.themeText },
-      };
+    /**
+     * This method is used to trigger a new render of the component.
+     */
+    async refresh() {
+        forceUpdate(this);
     }
-    else {
-      opts.legend = {
-        position: 'none',
-      };
+    /**
+     * 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);
     }
-    if (this.stacked &&
-      (ChartType.ColumnChart === this.getMainChartType() ||
-        ChartType.Unk === this.getMainChartType() ||
-        ChartType.Hbar === this.getMainChartType() ||
-        ChartType.Vbar === this.getMainChartType())) {
-      opts.isStacked = true;
+    /**
+     * 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);
     }
-    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;
-      }
+    /*-------------------------------------------------*/
+    /*           P r i v a t e   M e t h o d s         */
+    /*-------------------------------------------------*/
+    loadGoogleChart() {
+        google.charts.setOnLoadCallback(this.createChart.bind(this));
     }
-    // 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';
+    createGoogleChart() {
+        if (this.isComboChart()) {
+            return new google.visualization.ComboChart(this.chartContainer);
         }
-        let idx = '';
-        if ((this.vAxes && this.vAxes.length > 0) ||
-          (this.hAxes && this.hAxes.length > 0)) {
-          idx = index.toString();
+        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);
+            }
         }
-        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',
-        });
-      }
+    getMainChartType() {
+        if (this.types.length > 0) {
+            return this.types[0];
+        }
+        return ChartType.Unk;
     }
-    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));
+    isComboChart() {
+        return this.types.length > 1;
     }
-    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;
+    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 {
-          return;
+            opts.colors = this.themeColors;
         }
-      }
-      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;
+        if (this.legend && this.legend !== 'none') {
+            opts.legend = {
+                position: this.legend,
+                textStyle: { color: this.themeText },
+            };
         }
         else {
-          event.column = getColumnByName(this.data.columns, this.series[0].code);
-          event.colindex = 0;
+            opts.legend = {
+                position: 'none',
+            };
         }
-      }
-      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",
-              "id": "src/components/kup-chart/kup-chart-declarations.ts::ChartAspect"
+        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;
             }
-          }
-        },
-        "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",
-              "id": "src/components/kup-chart/kup-chart-declarations.ts::ChartTitle"
+            else {
+                opts.titleTextStyle.color = this.themeText;
             }
-          }
-        },
-        "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",
-              "id": "src/managers/kup-data/kup-data-declarations.ts::KupDataDataset"
+            if (this.chartTitle.size) {
+                opts.titleTextStyle.fontSize = this.chartTitle.size;
             }
-          }
-        },
-        "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",
-              "id": "src/components/kup-chart/kup-chart-declarations.ts::ChartAxis"
+        // 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]),
+                    },
+                });
             }
-          }
-        },
-        "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",
-              "id": "src/components/kup-chart/kup-chart-declarations.ts::ChartAxis"
+        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',
+                });
             }
-          }
-        },
-        "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",
-              "id": "src/components/kup-chart/kup-chart-declarations.ts::ChartOfflineMode"
+        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;
+                }
             }
-          }
-        },
-        "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",
-              "id": "src/components/kup-chart/kup-chart-declarations.ts::ChartSerie"
+            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;
+                }
             }
-          }
-        },
-        "required": false,
-        "optional": false,
-        "docs": {
-          "tags": [{
-              "name": "default",
-              "text": "undefined"
-            }],
-          "text": "The data series to be displayed. They must be of the same type."
+            this.kupChartClick.emit(event);
         }
-      },
-      "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",
-              "id": "src/components/kup-chart/kup-chart-declarations.ts::KupChartSort"
-            }
-          }
-        },
-        "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",
-              "id": "src/components/kup-chart/kup-chart-declarations.ts::ChartType"
+    }
+    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);
             }
-          }
-        },
-        "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",
-              "id": "src/components/kup-chart/kup-chart-declarations.ts::ChartAxis"
+            catch (e) {
+                ints[i++] = null;
             }
-          }
-        },
-        "required": false,
-        "optional": false,
-        "docs": {
-          "tags": [],
-          "text": "Customize the vAxes for multiple-chart."
+        });
+        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]);
         }
-      },
-      "vAxis": {
-        "type": "unknown",
-        "mutable": false,
-        "complexType": {
-          "original": "ChartAxis",
-          "resolved": "ChartAxis",
-          "references": {
-            "ChartAxis": {
-              "location": "import",
-              "path": "./kup-chart-declarations",
-              "id": "src/components/kup-chart/kup-chart-declarations.ts::ChartAxis"
+        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));
             }
-          }
-        },
-        "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",
-              "id": "src/components/kup-chart/kup-chart-declarations.ts::KupChartTrendlines"
+        catch (error) {
+            if (!this.offlineMode) {
+                this.kupManager.debug.logMessage(this, 'Chart colors setup failed!', KupDebugCategory.WARNING);
             }
-          }
-        },
-        "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",
-              "id": "src/components/kup-chart/kup-chart-declarations.ts::KupChartClickEvent"
-            }
-          }
+        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;
         }
-      }];
-  }
-  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",
-              "id": "global::Promise"
-            },
-            "GenericObject": {
-              "location": "import",
-              "path": "../../types/GenericTypes",
-              "id": "src/types/GenericTypes.ts::GenericObject"
+        // 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();
             }
-          },
-          "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",
-              "id": "global::Promise"
+            catch (err) {
+                console.error(err);
             }
-          },
-          "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",
-              "id": "global::Promise"
+        else {
+            try {
+                this.loadOfflineChart();
             }
-          },
-          "return": "Promise<void>"
-        },
-        "docs": {
-          "text": "This method is invoked by KupManager whenever the component changes size.",
-          "tags": []
+            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();
         }
-      },
-      "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",
-              "id": "global::Promise"
+    }
+    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",
+                            "id": "src/components/kup-chart/kup-chart-declarations.ts::ChartAspect"
+                        }
+                    }
+                },
+                "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",
+                            "id": "src/components/kup-chart/kup-chart-declarations.ts::ChartTitle"
+                        }
+                    }
+                },
+                "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",
+                            "id": "src/managers/kup-data/kup-data-declarations.ts::KupDataDataset"
+                        }
+                    }
+                },
+                "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",
+                            "id": "src/components/kup-chart/kup-chart-declarations.ts::ChartAxis"
+                        }
+                    }
+                },
+                "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",
+                            "id": "src/components/kup-chart/kup-chart-declarations.ts::ChartAxis"
+                        }
+                    }
+                },
+                "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",
+                            "id": "src/components/kup-chart/kup-chart-declarations.ts::ChartOfflineMode"
+                        }
+                    }
+                },
+                "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",
+                            "id": "src/components/kup-chart/kup-chart-declarations.ts::ChartSerie"
+                        }
+                    }
+                },
+                "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",
+                            "id": "src/components/kup-chart/kup-chart-declarations.ts::KupChartSort"
+                        }
+                    }
+                },
+                "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"
             },
-            "GenericObject": {
-              "location": "import",
-              "path": "../../types/GenericTypes",
-              "id": "src/types/GenericTypes.ts::GenericObject"
+            "types": {
+                "type": "unknown",
+                "mutable": false,
+                "complexType": {
+                    "original": "ChartType[]",
+                    "resolved": "ChartType[]",
+                    "references": {
+                        "ChartType": {
+                            "location": "import",
+                            "path": "./kup-chart-declarations",
+                            "id": "src/components/kup-chart/kup-chart-declarations.ts::ChartType"
+                        }
+                    }
+                },
+                "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",
+                            "id": "src/components/kup-chart/kup-chart-declarations.ts::ChartAxis"
+                        }
+                    }
+                },
+                "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",
+                            "id": "src/components/kup-chart/kup-chart-declarations.ts::ChartAxis"
+                        }
+                    }
+                },
+                "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",
+                            "id": "src/components/kup-chart/kup-chart-declarations.ts::KupChartTrendlines"
+                        }
+                    }
+                },
+                "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'"
             }
-          },
-          "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"
-      }];
-  }
+        };
+    }
+    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",
+                            "id": "src/components/kup-chart/kup-chart-declarations.ts::KupChartClickEvent"
+                        }
+                    }
+                }
+            }];
+    }
+    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",
+                            "id": "global::Promise"
+                        },
+                        "GenericObject": {
+                            "location": "import",
+                            "path": "../../types/GenericTypes",
+                            "id": "src/types/GenericTypes.ts::GenericObject"
+                        }
+                    },
+                    "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",
+                            "id": "global::Promise"
+                        }
+                    },
+                    "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",
+                            "id": "global::Promise"
+                        }
+                    },
+                    "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",
+                            "id": "global::Promise"
+                        },
+                        "GenericObject": {
+                            "location": "import",
+                            "path": "../../types/GenericTypes",
+                            "id": "src/types/GenericTypes.ts::GenericObject"
+                        }
+                    },
+                    "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"
+            }];
+    }
 }