@easyquery/ui 7.2.3-rc03 → 7.2.4-beta03

package/dist/lib/widgets/charts/chart_widget.js

@@ -1,383 +1,385 @@
-var __extends = (this && this.__extends) || (function () {
-    var extendStatics = function (d, b) {
-        extendStatics = Object.setPrototypeOf ||
-            ({ __proto__: [] } instanceof Array && function (d, b) { d.__proto__ = b; }) ||
-            function (d, b) { for (var p in b) if (b.hasOwnProperty(p)) d[p] = b[p]; };
-        return extendStatics(d, b);
-    };
-    return function (d, b) {
-        extendStatics(d, b);
-        function __() { this.constructor = d; }
-        d.prototype = b === null ? Object.create(b) : (__.prototype = b.prototype, new __());
-    };
-})();
-import { Widget, WidgetGroup, } from '@easyquery/core';
-import { i18n, utils as dataUtils } from '@easydata/core';
-import { addCssClass, showElement, hideElement, toggleVisibility, isVisible } from '@easydata/ui';
-import { ChartType } from './chart_type';
-var ChartWidget = /** @class */ (function (_super) {
-    __extends(ChartWidget, _super);
-    /**
-     * The default constructor.
-     * @param slot The html element.
-     * @param provider The provider.
-     */
-    function ChartWidget(slot) {
-        var _this = _super.call(this, slot) || this;
-        _this.chartType = ChartType.Pie;
-        _this.supportedChartTypes = [];
-        _this.dataTable = null;
-        _this.potentialLabelColumns = [];
-        _this.potentialDataColumns = [];
-        _this.labelColumn = -1;
-        _this.dataColumns = [];
-        _this.options = {
-            chartType: ChartType.Pie,
-            showOnPaging: false,
-            hideSettings: false,
-            legend: {
-                show: false,
-                position: 'right'
-            }
-        };
-        _this.element = slot;
-        _this.group = WidgetGroup.Result;
-        return _this;
-    }
-    Object.defineProperty(ChartWidget.prototype, "cssPrefix", {
-        get: function () {
-            return 'eqjs-chart';
-        },
-        enumerable: true,
-        configurable: true
-    });
-    /**
-     * Initialize widget.
-     * @param context The context.
-     * @param options The options.
-     */
-    ChartWidget.prototype.init = function (context, options) {
-        _super.prototype.init.call(this, context, options);
-        this.dataTable = context.resultTable;
-        this.setOptions(options);
-    };
-    /**
-     * Checks, if widget has data.
-     * @returns `true` if has data, otherwise - `false`.
-     */
-    ChartWidget.prototype.hasData = function () {
-        var result = this.dataTable != null;
-        if (result) {
-            result = this.dataTable.getCachedCount() > 0;
-        }
-        return result;
-    };
-    /**
-     * Checks, if there ara colums for chart
-     * @returns `true` if there are columns, otherwise - `false`.
-     */
-    ChartWidget.prototype.hasColumnsForChart = function () {
-        return this.potentialLabelColumns.length > 0 && this.potentialDataColumns.length > 0;
-    };
-    /**
-     * Refresh widget implementation
-     */
-    ChartWidget.prototype.refreshCore = function () {
-        this.prepareChartData();
-        this.render();
-    };
-    ChartWidget.prototype.setOptions = function (options) {
-        dataUtils.assignDeep(this.options, options);
-        this.supportedChartTypes = this.getSupportedChartTypes();
-        if (this.supportedChartTypes.length == 0) {
-            throw Error("Chart widget should support at least one chart type");
-        }
-        if (options.chartType && this.supportedChartTypes.indexOf(options.chartType) >= 0) {
-            this.chartType = options.chartType;
-        }
-        else {
-            this.chartType = this.supportedChartTypes[0];
-        }
-    };
-    ChartWidget.prototype.getOptions = function () {
-        return this.options;
-    };
-    ChartWidget.prototype.getChartTypeName = function (ct) {
-        switch (ct) {
-            case ChartType.Area:
-                return i18n.getText('ChartType', 'Area');
-            case ChartType.Bar:
-                return i18n.getText('ChartType', 'Bar');
-            case ChartType.Column:
-                return i18n.getText('ChartType', 'Column');
-            case ChartType.Combo:
-                return i18n.getText('ChartType', 'Combo');
-            case ChartType.Doughnut:
-                return i18n.getText('ChartType', 'Doughnut');
-            case ChartType.Polar:
-                return i18n.getText('ChartType', 'Polar');
-            case ChartType.Radar:
-                return i18n.getText('ChartType', 'Radar');
-            case ChartType.Histogram:
-                return i18n.getText('ChartType', 'Histogram');
-            case ChartType.Line:
-                return i18n.getText('ChartType', 'Line');
-            case ChartType.SteppedLine:
-                return i18n.getText('ChartType', 'SteppedLine');
-            default:
-                return i18n.getText('ChartType', 'Pie');
-        }
-    };
-    ChartWidget.prototype.updateSettings = function (settings, updateColumns) {
-        if (updateColumns === void 0) { updateColumns = true; }
-        if (typeof settings.showLegend !== 'undefined') {
-            this.options.legend = this.options.legend || {};
-            this.options.legend.show = settings.showLegend;
-        }
-        this.chartType = settings.type;
-        this.labelColumn = settings.labelColumn;
-        this.dataColumns[0] = settings.dataColumn;
-        if (updateColumns)
-            this.updateChartColumns();
-    };
-    /**
-     * Prepares data for chart.
-     */
-    ChartWidget.prototype.prepareChartData = function () {
-        var _this = this;
-        if (this.dataTable) {
-            this.potentialLabelColumns = [];
-            this.potentialDataColumns = [];
-            var colNum = this.dataTable.columns.count;
-            for (var i = 0; i < colNum; i++) {
-                var column = this.dataTable.columns.get(i);
-                var colType = column.type;
-                var colLabel = column.label;
-                this.potentialLabelColumns.push({ idx: i, label: colLabel });
-                if (dataUtils.isNumericType(colType)) {
-                    this.potentialDataColumns.push({ idx: i, label: colLabel });
-                }
-            }
-            ;
-            if (this.labelColumn != -1) {
-                if (!this.potentialLabelColumns
-                    .filter(function (c) { return c.idx == _this.labelColumn; })
-                    .length) {
-                    this.labelColumn = -1;
-                }
-            }
-            else {
-                this.labelColumn = (this.potentialLabelColumns.length > 0)
-                    ? this.potentialLabelColumns[0].idx : -1;
-            }
-            if (this.dataColumns.length) {
-                var ids_1 = this.potentialDataColumns.map(function (d) { return d.idx; });
-                this.dataColumns = this.dataColumns.filter(function (v) { return ids_1.indexOf(v) >= 0; });
-                if (!this.dataColumns.length) {
-                    this.dataColumns = (this.potentialDataColumns.length > 0)
-                        ? [].concat(this.potentialDataColumns[0].idx)
-                        : [];
-                }
-            }
-            else {
-                this.dataColumns = (this.potentialDataColumns.length > 0)
-                    ? [].concat(this.potentialDataColumns[0].idx)
-                    : [];
-            }
-            this.initChart();
-        }
-    };
-    ChartWidget.prototype.getSupportedChartTypes = function () {
-        var _this = this;
-        var chartTypes = this.options.supportedChartTypes
-            ? this.options.supportedChartTypes
-            : Object.keys(ChartType).map(function (key) { return ChartType[key]; });
-        return chartTypes.filter(function (type) { return _this.hasChartTypes.indexOf(type) >= 0; });
-    };
-    ChartWidget.prototype.getCurrentChartType = function () {
-        return this.chartType;
-    };
-    ChartWidget.prototype.render = function () {
-        var _this = this;
-        this.clear();
-        if (this.hasData() && this.hasColumnsForChart()
-            && (this.context.resultTable.getTotal()
-                == this.context.resultTable.getCachedCount())) {
-            var headerDiv = document.createElement('div');
-            addCssClass(headerDiv, this.cssPrefix + "-header");
-            var mainDiv = document.createElement('div');
-            addCssClass(mainDiv, this.cssPrefix + "-main");
-            if (this.canDraw()) {
-                var chartTypeSelector = document.createElement('select');
-                for (var _i = 0, _a = this.supportedChartTypes; _i < _a.length; _i++) {
-                    var ct = _a[_i];
-                    var sopt = document.createElement('option');
-                    sopt.value = ct.toString();
-                    sopt.text = this.getChartTypeName(ct);
-                    chartTypeSelector.appendChild(sopt);
-                }
-                chartTypeSelector.value = this.chartType.toString();
-                headerDiv.appendChild(chartTypeSelector);
-                chartTypeSelector.addEventListener('change', function (ev) {
-                    var ctkey = ev.target.value;
-                    _this.chartType = parseInt(ctkey);
-                    _this.refresh();
-                });
-                this.settingsDiv = document.createElement('div');
-                addCssClass(this.settingsDiv, this.cssPrefix + "-settings");
-                hideElement(this.settingsDiv);
-                mainDiv.appendChild(this.settingsDiv);
-                this.chartDiv = document.createElement('div');
-                addCssClass(this.chartDiv, this.cssPrefix + "-content");
-                hideElement(this.chartDiv);
-                mainDiv.appendChild(this.chartDiv);
-                this.initSettingsDiv();
-                var chartSettingsBtn = document.createElement('div');
-                addCssClass(chartSettingsBtn, this.cssPrefix + "-settings-icon");
-                chartSettingsBtn.title = "Settings";
-                headerDiv.appendChild(chartSettingsBtn);
-                chartSettingsBtn.addEventListener('click', function (ev) {
-                    _this.toggleSettings();
-                });
-                this.drawChart(100);
-            }
-            else {
-                this.addContentDiv(mainDiv, 'Unable to render  the chart. None of the supported chart libraries (ChartJS, Google Charts, etc) is found.');
-            }
-            if (!this.options.hideSettings) {
-                this.element.appendChild(headerDiv);
-            }
-            this.element.appendChild(mainDiv);
-            this.element.style.display = "";
-        }
-        else {
-            this.element.style.display = "none";
-        }
-    };
-    ChartWidget.prototype.addContentDiv = function (mainDiv, text) {
-        var contentDiv = document.createElement('div');
-        addCssClass(contentDiv, this.cssPrefix + "-no-data");
-        contentDiv.innerText = text;
-        mainDiv.appendChild(contentDiv);
-    };
-    /**
-     * Clears the chart.
-     */
-    ChartWidget.prototype.clear = function () {
-        this.element.innerHTML = '';
-    };
-    /**
-     * Draws chart with a delay.
-     * @param delay The delay.
-     */
-    ChartWidget.prototype.drawChart = function (delay) {
-        var _this = this;
-        showElement(this.chartDiv);
-        if (delay > 0) {
-            setTimeout(function () { return _this.drawCore(); }, delay);
-        }
-        else {
-            this.drawCore();
-        }
-    };
-    /**
-     * Inititializes the settings div.
-     */
-    ChartWidget.prototype.initSettingsDiv = function () {
-        var _this = this;
-        var settingsHeader = document.createElement('div');
-        settingsHeader.textContent = 'SETTINGS';
-        addCssClass(settingsHeader, this.cssPrefix + "-settings-header");
-        this.settingsDiv.appendChild(settingsHeader);
-        // Label column
-        var labelDiv = document.createElement('div');
-        addCssClass(labelDiv, this.cssPrefix + "-settings-single");
-        this.settingsDiv.appendChild(labelDiv);
-        var labelColumnSelectorCaption = document.createElement('span');
-        showElement(labelColumnSelectorCaption);
-        labelColumnSelectorCaption.textContent = 'Label column';
-        labelDiv.appendChild(labelColumnSelectorCaption);
-        var labelColumnSelector = document.createElement('select');
-        showElement(labelColumnSelector);
-        labelDiv.appendChild(labelColumnSelector);
-        for (var _i = 0, _a = this.potentialLabelColumns; _i < _a.length; _i++) {
-            var col = _a[_i];
-            var sopt = document.createElement('option');
-            sopt.value = col.idx.toString();
-            sopt.text = col.label;
-            labelColumnSelector.appendChild(sopt);
-        }
-        if (this.labelColumn >= 0) {
-            labelColumnSelector.value = this.labelColumn.toString();
-        }
-        labelColumnSelector.addEventListener('change', function (ev) {
-            _this.labelColumn = parseInt(ev.target.value);
-            _this.updateChartColumns();
-            _this.toggleSettings(function () {
-                _this.drawChart(100);
-            });
-        });
-        // Data column
-        var dataDiv = document.createElement('div');
-        addCssClass(dataDiv, this.cssPrefix + "-settings-single");
-        this.settingsDiv.appendChild(dataDiv);
-        var dataColumnSelectorCaption = document.createElement('span');
-        showElement(dataColumnSelectorCaption);
-        dataColumnSelectorCaption.textContent = 'Data column';
-        dataDiv.appendChild(dataColumnSelectorCaption);
-        var dataColumnSelector = document.createElement('select');
-        showElement(dataColumnSelector);
-        dataDiv.appendChild(dataColumnSelector);
-        for (var _b = 0, _c = this.potentialDataColumns; _b < _c.length; _b++) {
-            var col = _c[_b];
-            var sopt = document.createElement('option');
-            sopt.value = col.idx.toString();
-            sopt.text = col.label;
-            dataColumnSelector.appendChild(sopt);
-        }
-        if (this.dataColumns.length > 0 && this.dataColumns[0] >= 0) {
-            dataColumnSelector.value = this.dataColumns[0].toString();
-        }
-        dataColumnSelector.addEventListener('change', function (ev) {
-            _this.dataColumns[0] = parseInt(ev.target.value);
-            _this.updateChartColumns();
-            _this.toggleSettings(function () {
-                _this.drawChart(100);
-            });
-        });
-    };
-    ChartWidget.prototype.getPotentialLabelColumns = function () {
-        return this.potentialLabelColumns;
-    };
-    ChartWidget.prototype.getPotentialDataColumns = function () {
-        return this.potentialDataColumns;
-    };
-    ChartWidget.prototype.getLabelColumnIndex = function () {
-        return this.labelColumn;
-    };
-    ChartWidget.prototype.getDataColumnIndex = function () {
-        return this.dataColumns[0];
-    };
-    /**
-     * Toggles settings.
-     * @param callback The callback.
-     */
-    ChartWidget.prototype.toggleSettings = function (callback) {
-        var first;
-        var second;
-        if (isVisible(this.chartDiv)) {
-            first = this.chartDiv;
-            second = this.settingsDiv;
-        }
-        else {
-            first = this.settingsDiv;
-            second = this.chartDiv;
-        }
-        toggleVisibility(first, second, {
-            complete: callback
-        });
-    };
-    return ChartWidget;
-}(Widget));
-export { ChartWidget };
+var __extends = (this && this.__extends) || (function () {
+    var extendStatics = function (d, b) {
+        extendStatics = Object.setPrototypeOf ||
+            ({ __proto__: [] } instanceof Array && function (d, b) { d.__proto__ = b; }) ||
+            function (d, b) { for (var p in b) if (Object.prototype.hasOwnProperty.call(b, p)) d[p] = b[p]; };
+        return extendStatics(d, b);
+    };
+    return function (d, b) {
+        if (typeof b !== "function" && b !== null)
+            throw new TypeError("Class extends value " + String(b) + " is not a constructor or null");
+        extendStatics(d, b);
+        function __() { this.constructor = d; }
+        d.prototype = b === null ? Object.create(b) : (__.prototype = b.prototype, new __());
+    };
+})();
+import { Widget, WidgetGroup, } from '@easyquery/core';
+import { i18n, utils as dataUtils } from '@easydata/core';
+import { addCssClass, showElement, hideElement, toggleVisibility, isVisible } from '@easydata/ui';
+import { ChartType } from './chart_type';
+var ChartWidget = /** @class */ (function (_super) {
+    __extends(ChartWidget, _super);
+    /**
+     * The default constructor.
+     * @param slot The html element.
+     * @param provider The provider.
+     */
+    function ChartWidget(slot) {
+        var _this = _super.call(this, slot) || this;
+        _this.chartType = ChartType.Pie;
+        _this.supportedChartTypes = [];
+        _this.dataTable = null;
+        _this.potentialLabelColumns = [];
+        _this.potentialDataColumns = [];
+        _this.labelColumn = -1;
+        _this.dataColumns = [];
+        _this.options = {
+            chartType: ChartType.Pie,
+            showOnPaging: false,
+            hideSettings: false,
+            legend: {
+                show: false,
+                position: 'right'
+            }
+        };
+        _this.element = slot;
+        _this.group = WidgetGroup.Result;
+        return _this;
+    }
+    Object.defineProperty(ChartWidget.prototype, "cssPrefix", {
+        get: function () {
+            return 'eqjs-chart';
+        },
+        enumerable: false,
+        configurable: true
+    });
+    /**
+     * Initialize widget.
+     * @param context The context.
+     * @param options The options.
+     */
+    ChartWidget.prototype.init = function (context, options) {
+        _super.prototype.init.call(this, context, options);
+        this.dataTable = context.resultTable;
+        this.setOptions(options);
+    };
+    /**
+     * Checks, if widget has data.
+     * @returns `true` if has data, otherwise - `false`.
+     */
+    ChartWidget.prototype.hasData = function () {
+        var result = this.dataTable != null;
+        if (result) {
+            result = this.dataTable.getCachedCount() > 0;
+        }
+        return result;
+    };
+    /**
+     * Checks, if there ara colums for chart
+     * @returns `true` if there are columns, otherwise - `false`.
+     */
+    ChartWidget.prototype.hasColumnsForChart = function () {
+        return this.potentialLabelColumns.length > 0 && this.potentialDataColumns.length > 0;
+    };
+    /**
+     * Refresh widget implementation
+     */
+    ChartWidget.prototype.refreshCore = function () {
+        this.prepareChartData();
+        this.render();
+    };
+    ChartWidget.prototype.setOptions = function (options) {
+        dataUtils.assignDeep(this.options, options);
+        this.supportedChartTypes = this.getSupportedChartTypes();
+        if (this.supportedChartTypes.length == 0) {
+            throw Error("Chart widget should support at least one chart type");
+        }
+        if (options.chartType && this.supportedChartTypes.indexOf(options.chartType) >= 0) {
+            this.chartType = options.chartType;
+        }
+        else {
+            this.chartType = this.supportedChartTypes[0];
+        }
+    };
+    ChartWidget.prototype.getOptions = function () {
+        return this.options;
+    };
+    ChartWidget.prototype.getChartTypeName = function (ct) {
+        switch (ct) {
+            case ChartType.Area:
+                return i18n.getText('ChartType', 'Area');
+            case ChartType.Bar:
+                return i18n.getText('ChartType', 'Bar');
+            case ChartType.Column:
+                return i18n.getText('ChartType', 'Column');
+            case ChartType.Combo:
+                return i18n.getText('ChartType', 'Combo');
+            case ChartType.Doughnut:
+                return i18n.getText('ChartType', 'Doughnut');
+            case ChartType.Polar:
+                return i18n.getText('ChartType', 'Polar');
+            case ChartType.Radar:
+                return i18n.getText('ChartType', 'Radar');
+            case ChartType.Histogram:
+                return i18n.getText('ChartType', 'Histogram');
+            case ChartType.Line:
+                return i18n.getText('ChartType', 'Line');
+            case ChartType.SteppedLine:
+                return i18n.getText('ChartType', 'SteppedLine');
+            default:
+                return i18n.getText('ChartType', 'Pie');
+        }
+    };
+    ChartWidget.prototype.updateSettings = function (settings, updateColumns) {
+        if (updateColumns === void 0) { updateColumns = true; }
+        if (typeof settings.showLegend !== 'undefined') {
+            this.options.legend = this.options.legend || {};
+            this.options.legend.show = settings.showLegend;
+        }
+        this.chartType = settings.type;
+        this.labelColumn = settings.labelColumn;
+        this.dataColumns[0] = settings.dataColumn;
+        if (updateColumns)
+            this.updateChartColumns();
+    };
+    /**
+     * Prepares data for chart.
+     */
+    ChartWidget.prototype.prepareChartData = function () {
+        var _this = this;
+        if (this.dataTable) {
+            this.potentialLabelColumns = [];
+            this.potentialDataColumns = [];
+            var colNum = this.dataTable.columns.count;
+            for (var i = 0; i < colNum; i++) {
+                var column = this.dataTable.columns.get(i);
+                var colType = column.type;
+                var colLabel = column.label;
+                this.potentialLabelColumns.push({ idx: i, label: colLabel });
+                if (dataUtils.isNumericType(colType)) {
+                    this.potentialDataColumns.push({ idx: i, label: colLabel });
+                }
+            }
+            ;
+            if (this.labelColumn != -1) {
+                if (!this.potentialLabelColumns
+                    .filter(function (c) { return c.idx == _this.labelColumn; })
+                    .length) {
+                    this.labelColumn = -1;
+                }
+            }
+            else {
+                this.labelColumn = (this.potentialLabelColumns.length > 0)
+                    ? this.potentialLabelColumns[0].idx : -1;
+            }
+            if (this.dataColumns.length) {
+                var ids_1 = this.potentialDataColumns.map(function (d) { return d.idx; });
+                this.dataColumns = this.dataColumns.filter(function (v) { return ids_1.indexOf(v) >= 0; });
+                if (!this.dataColumns.length) {
+                    this.dataColumns = (this.potentialDataColumns.length > 0)
+                        ? [].concat(this.potentialDataColumns[0].idx)
+                        : [];
+                }
+            }
+            else {
+                this.dataColumns = (this.potentialDataColumns.length > 0)
+                    ? [].concat(this.potentialDataColumns[0].idx)
+                    : [];
+            }
+            this.initChart();
+        }
+    };
+    ChartWidget.prototype.getSupportedChartTypes = function () {
+        var _this = this;
+        var chartTypes = this.options.supportedChartTypes
+            ? this.options.supportedChartTypes
+            : Object.keys(ChartType).map(function (key) { return ChartType[key]; });
+        return chartTypes.filter(function (type) { return _this.hasChartTypes.indexOf(type) >= 0; });
+    };
+    ChartWidget.prototype.getCurrentChartType = function () {
+        return this.chartType;
+    };
+    ChartWidget.prototype.render = function () {
+        var _this = this;
+        this.clear();
+        if (this.hasData() && this.hasColumnsForChart()
+            && (this.context.resultTable.getTotal()
+                == this.context.resultTable.getCachedCount())) {
+            var headerDiv = document.createElement('div');
+            addCssClass(headerDiv, "".concat(this.cssPrefix, "-header"));
+            var mainDiv = document.createElement('div');
+            addCssClass(mainDiv, "".concat(this.cssPrefix, "-main"));
+            if (this.canDraw()) {
+                var chartTypeSelector = document.createElement('select');
+                for (var _i = 0, _a = this.supportedChartTypes; _i < _a.length; _i++) {
+                    var ct = _a[_i];
+                    var sopt = document.createElement('option');
+                    sopt.value = ct.toString();
+                    sopt.text = this.getChartTypeName(ct);
+                    chartTypeSelector.appendChild(sopt);
+                }
+                chartTypeSelector.value = this.chartType.toString();
+                headerDiv.appendChild(chartTypeSelector);
+                chartTypeSelector.addEventListener('change', function (ev) {
+                    var ctkey = ev.target.value;
+                    _this.chartType = parseInt(ctkey);
+                    _this.refresh();
+                });
+                this.settingsDiv = document.createElement('div');
+                addCssClass(this.settingsDiv, "".concat(this.cssPrefix, "-settings"));
+                hideElement(this.settingsDiv);
+                mainDiv.appendChild(this.settingsDiv);
+                this.chartDiv = document.createElement('div');
+                addCssClass(this.chartDiv, "".concat(this.cssPrefix, "-content"));
+                hideElement(this.chartDiv);
+                mainDiv.appendChild(this.chartDiv);
+                this.initSettingsDiv();
+                var chartSettingsBtn = document.createElement('div');
+                addCssClass(chartSettingsBtn, "".concat(this.cssPrefix, "-settings-icon"));
+                chartSettingsBtn.title = "Settings";
+                headerDiv.appendChild(chartSettingsBtn);
+                chartSettingsBtn.addEventListener('click', function (ev) {
+                    _this.toggleSettings();
+                });
+                this.drawChart(100);
+            }
+            else {
+                this.addContentDiv(mainDiv, 'Unable to render  the chart. None of the supported chart libraries (ChartJS, Google Charts, etc) is found.');
+            }
+            if (!this.options.hideSettings) {
+                this.element.appendChild(headerDiv);
+            }
+            this.element.appendChild(mainDiv);
+            this.element.style.display = "";
+        }
+        else {
+            this.element.style.display = "none";
+        }
+    };
+    ChartWidget.prototype.addContentDiv = function (mainDiv, text) {
+        var contentDiv = document.createElement('div');
+        addCssClass(contentDiv, "".concat(this.cssPrefix, "-no-data"));
+        contentDiv.innerText = text;
+        mainDiv.appendChild(contentDiv);
+    };
+    /**
+     * Clears the chart.
+     */
+    ChartWidget.prototype.clear = function () {
+        this.element.innerHTML = '';
+    };
+    /**
+     * Draws chart with a delay.
+     * @param delay The delay.
+     */
+    ChartWidget.prototype.drawChart = function (delay) {
+        var _this = this;
+        showElement(this.chartDiv);
+        if (delay > 0) {
+            setTimeout(function () { return _this.drawCore(); }, delay);
+        }
+        else {
+            this.drawCore();
+        }
+    };
+    /**
+     * Inititializes the settings div.
+     */
+    ChartWidget.prototype.initSettingsDiv = function () {
+        var _this = this;
+        var settingsHeader = document.createElement('div');
+        settingsHeader.textContent = 'SETTINGS';
+        addCssClass(settingsHeader, "".concat(this.cssPrefix, "-settings-header"));
+        this.settingsDiv.appendChild(settingsHeader);
+        // Label column
+        var labelDiv = document.createElement('div');
+        addCssClass(labelDiv, "".concat(this.cssPrefix, "-settings-single"));
+        this.settingsDiv.appendChild(labelDiv);
+        var labelColumnSelectorCaption = document.createElement('span');
+        showElement(labelColumnSelectorCaption);
+        labelColumnSelectorCaption.textContent = 'Label column';
+        labelDiv.appendChild(labelColumnSelectorCaption);
+        var labelColumnSelector = document.createElement('select');
+        showElement(labelColumnSelector);
+        labelDiv.appendChild(labelColumnSelector);
+        for (var _i = 0, _a = this.potentialLabelColumns; _i < _a.length; _i++) {
+            var col = _a[_i];
+            var sopt = document.createElement('option');
+            sopt.value = col.idx.toString();
+            sopt.text = col.label;
+            labelColumnSelector.appendChild(sopt);
+        }
+        if (this.labelColumn >= 0) {
+            labelColumnSelector.value = this.labelColumn.toString();
+        }
+        labelColumnSelector.addEventListener('change', function (ev) {
+            _this.labelColumn = parseInt(ev.target.value);
+            _this.updateChartColumns();
+            _this.toggleSettings(function () {
+                _this.drawChart(100);
+            });
+        });
+        // Data column
+        var dataDiv = document.createElement('div');
+        addCssClass(dataDiv, "".concat(this.cssPrefix, "-settings-single"));
+        this.settingsDiv.appendChild(dataDiv);
+        var dataColumnSelectorCaption = document.createElement('span');
+        showElement(dataColumnSelectorCaption);
+        dataColumnSelectorCaption.textContent = 'Data column';
+        dataDiv.appendChild(dataColumnSelectorCaption);
+        var dataColumnSelector = document.createElement('select');
+        showElement(dataColumnSelector);
+        dataDiv.appendChild(dataColumnSelector);
+        for (var _b = 0, _c = this.potentialDataColumns; _b < _c.length; _b++) {
+            var col = _c[_b];
+            var sopt = document.createElement('option');
+            sopt.value = col.idx.toString();
+            sopt.text = col.label;
+            dataColumnSelector.appendChild(sopt);
+        }
+        if (this.dataColumns.length > 0 && this.dataColumns[0] >= 0) {
+            dataColumnSelector.value = this.dataColumns[0].toString();
+        }
+        dataColumnSelector.addEventListener('change', function (ev) {
+            _this.dataColumns[0] = parseInt(ev.target.value);
+            _this.updateChartColumns();
+            _this.toggleSettings(function () {
+                _this.drawChart(100);
+            });
+        });
+    };
+    ChartWidget.prototype.getPotentialLabelColumns = function () {
+        return this.potentialLabelColumns;
+    };
+    ChartWidget.prototype.getPotentialDataColumns = function () {
+        return this.potentialDataColumns;
+    };
+    ChartWidget.prototype.getLabelColumnIndex = function () {
+        return this.labelColumn;
+    };
+    ChartWidget.prototype.getDataColumnIndex = function () {
+        return this.dataColumns[0];
+    };
+    /**
+     * Toggles settings.
+     * @param callback The callback.
+     */
+    ChartWidget.prototype.toggleSettings = function (callback) {
+        var first;
+        var second;
+        if (isVisible(this.chartDiv)) {
+            first = this.chartDiv;
+            second = this.settingsDiv;
+        }
+        else {
+            first = this.settingsDiv;
+            second = this.chartDiv;
+        }
+        toggleVisibility(first, second, {
+            complete: callback
+        });
+    };
+    return ChartWidget;
+}(Widget));
+export { ChartWidget };
 //# sourceMappingURL=chart_widget.js.map