tsichart-core 1.0.0

package/dist/ChartComponent-DnKLTxWe.js

@@ -0,0 +1,302 @@
+import { _ as __extends, d as __spreadArray } from './_tslib-5_9pMg1F.js';
+import { U as Utils, G as GRIDCONTAINERCLASS, T as TooltipMeasureFormat, D as DataTypes, S as ShiftTypes } from './Utils-C_j8IgZh.js';
+import { C as Component } from './Component-CofgyEw0.js';
+import { C as ChartComponentData, G as Grid } from './Grid-DfFAkeeV.js';
+import * as d3 from 'd3';
+import Split from 'split.js';
+import { E as EllipsisMenu } from './EllipsisMenu-30FNqoIv.js';
+
+var ChartComponent = /** @class */ (function (_super) {
+    __extends(ChartComponent, _super);
+    function ChartComponent(renderTarget) {
+        var _this = _super.call(this, renderTarget) || this;
+        _this.MINWIDTH = 350;
+        _this.MINHEIGHT = 150;
+        _this.CONTROLSWIDTH = 200;
+        _this.GUTTERWIDTH = 6;
+        _this.chartControlsPanel = null;
+        _this.ellipsisContainer = null;
+        _this.ellipsisMenu = null;
+        _this.svgSelection = null;
+        _this.legendWidth = _this.CONTROLSWIDTH;
+        _this.downloadAsCSV = function (isScatterPlot) {
+            if (isScatterPlot === void 0) { isScatterPlot = false; }
+            Utils.downloadCSV(_this.chartComponentData.generateCSVString(_this.chartOptions.offset, _this.chartOptions.dateLocale, isScatterPlot ? _this.chartOptions.spMeasures : null));
+        };
+        _this.chartComponentData = new ChartComponentData();
+        return _this;
+    }
+    ChartComponent.prototype.showGrid = function () {
+        Grid.showGrid(this.renderTarget, this.chartOptions, this.aggregateExpressionOptions, this.chartComponentData);
+    };
+    ChartComponent.prototype.gatedShowGrid = function () {
+        if (this.isGridVisible()) {
+            this.showGrid();
+        }
+    };
+    ChartComponent.prototype.hideGrid = function () {
+        Grid.hideGrid(this.renderTarget);
+    };
+    ChartComponent.prototype.isGridVisible = function () {
+        return !d3.select(this.renderTarget).selectAll(".".concat(GRIDCONTAINERCLASS)).empty();
+    };
+    ChartComponent.prototype.drawEllipsisMenu = function (additionalEllipsisItems) {
+        var _this = this;
+        if (additionalEllipsisItems === void 0) { additionalEllipsisItems = []; }
+        if (this.chartOptions.canDownload || this.chartOptions.grid || (this.chartOptions.ellipsisItems && this.chartOptions.ellipsisItems.length > 0) || additionalEllipsisItems.length > 0) {
+            if (this.ellipsisContainer === null) {
+                this.ellipsisContainer = this.chartControlsPanel.append("div")
+                    .attr("class", "tsi-ellipsisContainerDiv");
+            }
+            if (this.ellipsisMenu === null) {
+                this.ellipsisMenu = new EllipsisMenu(this.ellipsisContainer.node());
+            }
+            var ellipsisItems = [];
+            if (this.chartOptions.grid) {
+                ellipsisItems.push(Grid.createGridEllipsisOption(this.renderTarget, this.chartOptions, this.aggregateExpressionOptions, this.chartComponentData, this.getString("Display Grid")));
+            }
+            if (this.chartOptions.canDownload) {
+                ellipsisItems.push(Utils.createDownloadEllipsisOption(function () { return _this.chartComponentData.generateCSVString(_this.chartOptions.offset, _this.chartOptions.dateLocale); }, function () { return Utils.focusOnEllipsisButton(_this.renderTarget); }, this.getString("Download as CSV")));
+            }
+            if (this.chartOptions.ellipsisItems) {
+                ellipsisItems = ellipsisItems.concat(this.chartOptions.ellipsisItems);
+            }
+            this.ellipsisMenu.render(ellipsisItems.concat(additionalEllipsisItems), { theme: this.chartOptions.theme });
+        }
+    };
+    ChartComponent.prototype.removeControlPanel = function () {
+        if (this.chartControlsPanel) {
+            this.chartControlsPanel.remove();
+        }
+        this.chartControlsPanel = null;
+        this.ellipsisContainer = null;
+        this.ellipsisMenu = null;
+    };
+    ChartComponent.prototype.removeEllipsisMenu = function () {
+        if (this.ellipsisContainer) {
+            this.ellipsisContainer.remove();
+        }
+        this.ellipsisContainer = null;
+        this.ellipsisMenu = null;
+    };
+    ChartComponent.prototype.getWidth = function () {
+        return Math.max(d3.select(this.renderTarget).node().clientWidth, this.MINWIDTH);
+    };
+    ChartComponent.prototype.getVisibilityState = function () {
+        return this.chartComponentData.getVisibilityState();
+    };
+    ChartComponent.prototype.ellipsisItemsExist = function () {
+        return (this.chartOptions.canDownload || this.chartOptions.ellipsisItems.length > 0 || this.chartOptions.grid);
+    };
+    ChartComponent.prototype.getDataType = function (aggKey) {
+        return this.chartComponentData.getDataType(aggKey);
+    };
+    ChartComponent.prototype.getCDOFromAggKey = function (aggKey) {
+        var matches = this.aggregateExpressionOptions.filter(function (cDO) {
+            return cDO.aggKey === aggKey;
+        });
+        if (matches.length === 1) {
+            return matches[0];
+        }
+        return {};
+    };
+    ChartComponent.prototype.getFilteredMeasures = function (measureList, visibleMeasure, measureFormat, xyrMeasures) {
+        if (xyrMeasures === void 0) { xyrMeasures = null; }
+        var justVisibleMeasure = [visibleMeasure];
+        switch (measureFormat) {
+            case TooltipMeasureFormat.SingleValue:
+                return justVisibleMeasure;
+            case TooltipMeasureFormat.Scatter:
+                return xyrMeasures;
+            default:
+                if (measureList.length !== 3) {
+                    return justVisibleMeasure;
+                }
+                var isAvgMinMax_1 = true;
+                measureList.forEach(function (measure) {
+                    if (!(measure === 'avg' || measure === 'min' || measure === 'max')) {
+                        isAvgMinMax_1 = false;
+                    }
+                });
+                return isAvgMinMax_1 ? measureList.sort(function (m) { return m === 'min' ? -1 : (m === 'avg' ? 0 : 1); }) : justVisibleMeasure;
+        }
+    };
+    // to get alignment for data points between other types and linechart for tooltip formatting
+    ChartComponent.prototype.convertToTimeValueFormat = function (d) {
+        var measuresObject = {};
+        var measureType = d.measureType ? d.measureType : this.chartComponentData.displayState[d.aggKey].splitBys[d.splitBy].visibleType;
+        measuresObject[measureType] = d.val;
+        return {
+            aggregateKey: d.aggKey,
+            splitBy: d.splitBy,
+            aggregateName: this.chartComponentData.displayState[d.aggKey].name,
+            measures: measuresObject
+        };
+    };
+    ChartComponent.prototype.formatDate = function (date, shiftMillis) {
+        return Utils.timeFormat(this.chartComponentData.usesSeconds, this.chartComponentData.usesMillis, this.chartOptions.offset, this.chartOptions.is24HourTime, shiftMillis, null, this.chartOptions.dateLocale)(date);
+    };
+    ChartComponent.prototype.tooltipFormat = function (d, text, measureFormat, xyrMeasures) {
+        var _this = this;
+        if (xyrMeasures === void 0) { xyrMeasures = null; }
+        var dataType = this.getDataType(d.aggregateKey);
+        d.aggregateName;
+        var cDO = this.getCDOFromAggKey(d.aggregateKey);
+        var shiftMillis = this.chartComponentData.getTemporalShiftMillis(d.aggregateKey);
+        var formatDate = function (date) { return _this.formatDate(date, shiftMillis); };
+        var titleGroup = text.append("div")
+            .attr("class", "tsi-tooltipTitleGroup");
+        this.createTooltipSeriesInfo(d, titleGroup, cDO);
+        if (dataType === DataTypes.Categorical) {
+            titleGroup.append('h4')
+                .attr('class', 'tsi-tooltipSubtitle tsi-tooltipTimeStamp')
+                .text(formatDate(d.dateTime) + ' - ' + formatDate(d.endDate));
+        }
+        if (dataType === DataTypes.Events) {
+            titleGroup.append('h4')
+                .attr('class', 'tsi-tooltipSubtitle tsi-tooltipTimeStamp')
+                .text(formatDate(d.dateTime));
+        }
+        var tooltipAttrs = cDO.tooltipAttributes;
+        if (shiftMillis !== 0 && tooltipAttrs) {
+            var shiftTuple = this.chartComponentData.getTemporalShiftStringTuple(d.aggregateKey);
+            if (shiftTuple !== null) {
+                var keyString = this.getString(shiftTuple[0]);
+                var valueString = (keyString === ShiftTypes.startAt) ? this.formatDate(new Date(shiftTuple[1]), 0) : shiftTuple[1];
+                tooltipAttrs = __spreadArray(__spreadArray([], tooltipAttrs, true), [[keyString, valueString]], false);
+            }
+        }
+        if (tooltipAttrs && tooltipAttrs.length > 0) {
+            var attrsGroup_1 = text.append('div')
+                .attr('class', 'tsi-tooltipAttributeContainer tsi-tooltipFlexyBox');
+            tooltipAttrs.forEach(function (attrTuple, i) {
+                var timeShiftRow = attrsGroup_1.append('div')
+                    .attr('class', 'tsi-tooltipAttribute tsi-tooltipFlexyItem');
+                timeShiftRow.append('div')
+                    .attr('class', 'tsi-tooltipAttrTitle')
+                    .text(attrTuple[0]);
+                timeShiftRow.append('div')
+                    .attr('class', 'tsi-tooltipAttrValue')
+                    .text(attrTuple[1]);
+            });
+        }
+        if (d.measures && Object.keys(d.measures).length) {
+            var formatValue_1 = (dataType === DataTypes.Events ? function (d) { return d; } : Utils.formatYAxisNumber);
+            if (dataType !== DataTypes.Numeric) {
+                var valueGroup_1 = text.append('table')
+                    .attr('class', 'tsi-tooltipValues tsi-tooltipTable');
+                Object.keys(d.measures).forEach(function (measureType, i) {
+                    if (!(dataType === DataTypes.Categorical) || d.measures[measureType] !== 0) {
+                        valueGroup_1.append('tr').classed('tsi-tableSpacer', true);
+                        var tr = valueGroup_1.append('tr')
+                            .classed('tsi-visibleValue', (dataType === DataTypes.Numeric && (measureType === _this.chartComponentData.getVisibleMeasure(d.aggregateKey, d.splitBy))))
+                            .style('border-left-color', Utils.getColorForValue(cDO, measureType));
+                        tr.append('td')
+                            .attr('class', 'tsi-valueLabel')
+                            .text(measureType);
+                        tr.append('td')
+                            .attr('class', 'tsi-valueCell')
+                            .text(formatValue_1(d.measures[measureType]));
+                    }
+                });
+            }
+            else {
+                var valueGroup_2 = text.append('div')
+                    .attr('class', 'tsi-tooltipFlexyBox');
+                var filteredMeasures = this.getFilteredMeasures(Object.keys(d.measures), this.chartComponentData.getVisibleMeasure(d.aggregateKey, d.splitBy), measureFormat, xyrMeasures);
+                filteredMeasures.forEach(function (measureType, i) {
+                    var valueItem = valueGroup_2.append('div')
+                        .attr('class', 'tsi-tooltipFlexyItem')
+                        .classed('tsi-visibleValue', (dataType === DataTypes.Numeric &&
+                        (measureType === _this.chartComponentData.getVisibleMeasure(d.aggregateKey, d.splitBy)) &&
+                        (measureFormat !== TooltipMeasureFormat.Scatter)));
+                    var measureTitle = valueItem.append('div')
+                        .attr('class', 'tsi-tooltipMeasureTitle');
+                    Utils.appendFormattedElementsFromString(measureTitle, measureType);
+                    valueItem.append('div')
+                        .attr('class', 'tsi-tooltipMeasureValue')
+                        .text(formatValue_1(d.measures[measureType]));
+                });
+            }
+        }
+    };
+    ChartComponent.prototype.getSVGWidth = function () {
+        return this.chartWidth + this.chartMargins.left + this.chartMargins.right;
+    };
+    ChartComponent.prototype.getChartWidth = function (legendWidth) {
+        if (legendWidth === void 0) { legendWidth = this.CONTROLSWIDTH; }
+        legendWidth = this.legendWidth; // + this.GUTTERWIDTH;
+        return Math.max(1, this.width - this.chartMargins.left - this.chartMargins.right - (this.chartOptions.legend === "shown" ? legendWidth : 0));
+    };
+    ChartComponent.prototype.calcSVGWidth = function () {
+        return this.svgSelection.node().getBoundingClientRect().width;
+    };
+    ChartComponent.prototype.setControlsPanelWidth = function () {
+        if (!this.chartOptions.hideChartControlPanel && this.chartControlsPanel !== null) {
+            //either calculate expected or just use svg if it's in the DOM
+            var controlPanelWidth = this.svgSelection && this.svgSelection.node() ?
+                this.calcSVGWidth() :
+                this.getWidth() - (this.chartOptions.legend === 'shown' ? (this.legendWidth + this.GUTTERWIDTH) : 0);
+            this.chartControlsPanel.style("width", controlPanelWidth + "px");
+        }
+    };
+    ChartComponent.prototype.legendPostRenderProcess = function (legendState, chartElement, shouldSetControlsWidth, splitLegendOnDrag) {
+        if (splitLegendOnDrag === void 0) { splitLegendOnDrag = undefined; }
+        if (legendState === 'shown') {
+            this.splitLegendAndSVG(chartElement.node(), splitLegendOnDrag);
+            if (shouldSetControlsWidth) {
+                this.setControlsPanelWidth();
+            }
+        }
+        else {
+            d3.select(this.renderTarget).select('.tsi-resizeGutter').remove();
+        }
+    };
+    ChartComponent.prototype.splitLegendAndSVG = function (chartElement, onDrag) {
+        var _this = this;
+        if (onDrag === void 0) { onDrag = function () { }; }
+        var svgWidth = this.getSVGWidth();
+        var legendWidth = this.width - svgWidth;
+        d3.select(this.renderTarget).select('.tsi-resizeGutter').remove();
+        var legend = this.legendObject.legendElement;
+        Split([this.legendObject.legendElement.node(), chartElement], {
+            sizes: [legendWidth / this.width * 100, svgWidth / this.width * 100],
+            gutterSize: 2,
+            minSize: [200, 0],
+            snapOffset: 0,
+            cursor: 'e-resize',
+            onDragEnd: function (sizes) {
+                var legendWidth = _this.width * (sizes[0] / 100);
+                _this.legendWidth = legendWidth;
+                _this.chartWidth = _this.getChartWidth();
+                _this.draw(true);
+                legend.style('width', _this.legendWidth + 'px');
+                d3.select(_this.renderTarget).select('.tsi-resizeGutter')
+                    .classed('tsi-isDragging', false);
+            },
+            onDragStart: function () {
+                d3.select(_this.renderTarget).select('.tsi-resizeGutter')
+                    .classed('tsi-isDragging', true);
+            },
+            onDrag: function () {
+                if (!_this.chartOptions.hideChartControlPanel && _this.chartControlsPanel !== null) {
+                    var svgLeftOffset = _this.calcSVGWidth();
+                    _this.chartControlsPanel.style("width", Math.max(svgLeftOffset, _this.chartMargins.left + 8) + "px"); //8px to account for the width of the icon
+                }
+                onDrag();
+            },
+            gutter: function (index, direction) {
+                var gutter = document.createElement('div');
+                gutter.className = "gutter tsi-resizeGutter";
+                return gutter;
+            },
+            direction: 'horizontal'
+        });
+        // explicitly set the width of the legend to a pixel value
+        var calcedLegendWidth = legend.node().getBoundingClientRect().width;
+        legend.style("width", calcedLegendWidth + "px");
+    };
+    return ChartComponent;
+}(Component));
+
+export { ChartComponent as C };

package/dist/ChartComponentData-D5wuQmmZ.d.ts

@@ -0,0 +1,47 @@
+declare class ChartComponentData {
+    data: any;
+    displayState: any;
+    timeArrays: any;
+    visibleTSCount: number;
+    visibleTAs: any;
+    allValues: any;
+    allNumericValues: any;
+    filteredAggregates: any;
+    usesSeconds: boolean;
+    usesMillis: boolean;
+    fromMillis: number;
+    toMillis: number;
+    stickiedKey: any;
+    allTimestampsArray: any;
+    isFromHeatmap: boolean;
+    constructor();
+    protected getSwimlane: (aggKey: any) => any;
+    protected setAllTimestampsArray(): void;
+    getDataType(aggKey: any): any;
+    private fillColors;
+    private getVisibleType;
+    mergeDataToDisplayStateAndTimeArrays(data: any, aggregateExpressionOptions?: any): void;
+    private determineMeasureTypes;
+    getTemporalShiftStringTuple(aggKey: any): any[];
+    getTemporalShiftMillis(aggKey: any): number;
+    doesTimeArrayUseSeconds(timeArray: any): any;
+    doesTimeArrayUseMillis(timeArray: any): any;
+    setAllValuesAndVisibleTAs(): Date[];
+    findLastTimestampWithValue(aggKey: any, splitBy: any): any;
+    private findFirstBucket;
+    private getNumberOfPaddedBuckets;
+    convertAggregateToArray(agg: any, aggKey: string, aggName: string, splitBy: string, from: Date, to: Date, bucketSize: number, shiftValue: number): Array<any>;
+    isSplitByVisible(aggI: string, splitBy: string): any;
+    isPossibleEnvelope(aggKey: string, splitBy: string): boolean;
+    getVisibleMeasure(aggI: string, splitBy: string): any;
+    getAggVisible(aggKey: any): boolean;
+    getSplitByVisible(aggKey: any, splitBy: any): any;
+    aggHasVisibleSplitBys(aggKey: any): boolean;
+    valueAtTS(aggKey: any, splitByName: any, ts: any): any;
+    setFilteredAggregates(): void;
+    private guessValueType;
+    generateCSVString(offset?: number, dateLocale?: string, spMeasures?: any): string;
+    getVisibilityState(): any[];
+}
+
+export { ChartComponentData as C };

package/dist/ChartDataOptions-DBS28b1-.d.ts

@@ -0,0 +1,38 @@
+import { H as HorizontalMarker } from './Interfaces-BKRQ685G.js';
+
+declare class ChartDataOptions {
+    searchSpan: any;
+    color: string | Function;
+    alias: string;
+    contextMenu: any;
+    measureTypes: Array<string>;
+    interpolationFunction: string;
+    yExtent: any;
+    includeEnvelope: boolean;
+    includeDots: boolean;
+    visibilityState: Array<any>;
+    timeShift: string;
+    startAt: string;
+    dataType: string;
+    valueMapping: any;
+    height: number;
+    onElementClick: any;
+    eventElementType: any;
+    rollupCategoricalValues: boolean;
+    tooltipAttributes: Array<any>;
+    positionX: number;
+    positionY: number;
+    swimLane: number;
+    variableAlias: any;
+    connectPoints: boolean;
+    pointConnectionMeasure: string;
+    positionXVariableName: string;
+    positionYVariableName: string;
+    image: string;
+    isRawData: boolean;
+    isVariableAliasShownOnTooltip: boolean;
+    horizontalMarkers: Array<HorizontalMarker>;
+    constructor(optionsObject: Object);
+}
+
+export { ChartDataOptions as C };

package/dist/ChartDataOptions-DRd8NHra.js

@@ -0,0 +1,49 @@
+import { I as InterpolationFunctions, U as Utils, D as DataTypes, E as EventElementTypes } from './Utils-C_j8IgZh.js';
+
+var DEFAULT_HEIGHT = 40;
+// Represents an expression that is suitable for use as the expression options parameter in a chart component
+var ChartDataOptions = /** @class */ (function () {
+    function ChartDataOptions(optionsObject) {
+        this.interpolationFunction = InterpolationFunctions.None;
+        this.yExtent = null;
+        this.includeEnvelope = false;
+        this.includeDots = false;
+        this.visibilityState = null;
+        this.connectPoints = false;
+        this.pointConnectionMeasure = '';
+        this.searchSpan = Utils.getValueOrDefault(optionsObject, 'searchSpan');
+        this.measureTypes = Utils.getValueOrDefault(optionsObject, 'measureTypes');
+        this.color = Utils.getValueOrDefault(optionsObject, 'color');
+        this.alias = Utils.getValueOrDefault(optionsObject, 'alias');
+        this.contextMenu = Utils.getValueOrDefault(optionsObject, 'contextMenu', []);
+        this.interpolationFunction = Utils.getValueOrDefault(optionsObject, 'interpolationFunction', InterpolationFunctions.None);
+        this.includeEnvelope = Utils.getValueOrDefault(optionsObject, 'includeEnvelope', false);
+        this.includeDots = Utils.getValueOrDefault(optionsObject, 'includeDots', false);
+        this.visibilityState = Utils.getValueOrDefault(optionsObject, 'visibilityState');
+        this.yExtent = Utils.getValueOrDefault(optionsObject, 'yExtent');
+        this.timeShift = Utils.getValueOrDefault(optionsObject, 'timeShift', '');
+        this.dataType = Utils.getValueOrDefault(optionsObject, 'dataType', DataTypes.Numeric);
+        this.valueMapping = Utils.getValueOrDefault(optionsObject, 'valueMapping', {});
+        this.height = Utils.getValueOrDefault(optionsObject, 'height', DEFAULT_HEIGHT);
+        this.onElementClick = Utils.getValueOrDefault(optionsObject, 'onElementClick', null);
+        this.eventElementType = Utils.getValueOrDefault(optionsObject, 'eventElementType', EventElementTypes.Diamond);
+        this.rollupCategoricalValues = Utils.getValueOrDefault(optionsObject, 'rollupCategoricalValues', false);
+        this.tooltipAttributes = Utils.getValueOrDefault(optionsObject, 'tooltipAttributes', []);
+        this.positionX = Utils.getValueOrDefault(optionsObject, 'positionX', 0);
+        this.positionY = Utils.getValueOrDefault(optionsObject, 'positionY', 0);
+        this.swimLane = Utils.getValueOrDefault(optionsObject, 'swimLane', null);
+        this.variableAlias = Utils.getValueOrDefault(optionsObject, 'variableAlias', null);
+        this.connectPoints = Utils.getValueOrDefault(optionsObject, "connectPoints", false);
+        this.pointConnectionMeasure = Utils.getValueOrDefault(optionsObject, 'pointConnectionMeasure', '');
+        this.positionXVariableName = Utils.getValueOrDefault(optionsObject, 'positionXVariableName', null);
+        this.positionYVariableName = Utils.getValueOrDefault(optionsObject, 'positionYVariableName', null);
+        this.image = Utils.getValueOrDefault(optionsObject, 'image', null);
+        this.startAt = Utils.getValueOrDefault(optionsObject, 'startAt', null);
+        this.isRawData = Utils.getValueOrDefault(optionsObject, 'isRawData', false);
+        this.isVariableAliasShownOnTooltip = Utils.getValueOrDefault(optionsObject, 'isVariableAliasShownOnTooltip', true);
+        this.horizontalMarkers = Utils.getValueOrDefault(optionsObject, 'horizontalMarkers', []);
+    }
+    return ChartDataOptions;
+}());
+
+export { ChartDataOptions as C };

package/dist/ChartVisualizationComponent-CG7e5xlc.js

@@ -0,0 +1,23 @@
+import { _ as __extends } from './_tslib-5_9pMg1F.js';
+import { U as Utils } from './Utils-C_j8IgZh.js';
+import { C as ChartComponent } from './ChartComponent-DnKLTxWe.js';
+import { C as ChartDataOptions } from './ChartDataOptions-DRd8NHra.js';
+
+var ChartVisualizationComponent = /** @class */ (function (_super) {
+    __extends(ChartVisualizationComponent, _super);
+    function ChartVisualizationComponent(renderTarget) {
+        return _super.call(this, renderTarget) || this;
+    }
+    ChartVisualizationComponent.prototype.render = function (data, options, aggregateExpressionOptions) {
+        this.data = Utils.standardizeTSStrings(data);
+        this.chartOptions.setOptions(options);
+        this.aggregateExpressionOptions = data.map(function (d, i) {
+            return Object.assign(d, aggregateExpressionOptions && i in aggregateExpressionOptions ?
+                new ChartDataOptions(aggregateExpressionOptions[i]) :
+                new ChartDataOptions({}));
+        });
+    };
+    return ChartVisualizationComponent;
+}(ChartComponent));
+
+export { ChartVisualizationComponent as C };

package/dist/ChartVisualizationComponent-DBjiqR1n.d.ts

@@ -0,0 +1,8 @@
+import { C as ChartComponent } from './ChartComponent-DTcc6aED.js';
+
+declare class ChartVisualizationComponent extends ChartComponent {
+    constructor(renderTarget: Element);
+    render(data: any, options: any, aggregateExpressionOptions: any): void;
+}
+
+export { ChartVisualizationComponent as C };

package/dist/ColorPicker-CH__K8xm.js

@@ -0,0 +1,120 @@
+import { _ as __extends } from './_tslib-5_9pMg1F.js';
+import * as d3 from 'd3';
+import { C as Component } from './Component-CofgyEw0.js';
+import { U as Utils, K as KeyCodes } from './Utils-C_j8IgZh.js';
+
+var ColorPicker = /** @class */ (function (_super) {
+    __extends(ColorPicker, _super);
+    function ColorPicker(renderTarget, componentId) {
+        if (componentId === void 0) { componentId = Utils.guid(); }
+        var _this = _super.call(this, renderTarget) || this;
+        _this.getSelectedColorValue = function () {
+            return _this.selectedColor;
+        };
+        _this.showColorGrid = function () {
+            _this.colorPickerElem.select(".tsi-colorGrid").style("display", "flex");
+            _this.isColorGridVisible = true;
+            _this.colorPickerElem.selectAll(".tsi-colorItem").nodes()[0].focus();
+            _this.colorPickerElem.select(".tsi-colorPickerButton").attr("aria-expanded", true);
+        };
+        _this.hideColorGrid = function (withFocusBackToPickerButton) {
+            if (withFocusBackToPickerButton === void 0) { withFocusBackToPickerButton = false; }
+            _this.colorPickerElem.select(".tsi-colorGrid").style("display", "none");
+            _this.isColorGridVisible = false;
+            _this.colorPickerElem.select(".tsi-colorPickerButton").attr("aria-expanded", false);
+            if (withFocusBackToPickerButton) {
+                _this.colorPickerElem.select(".tsi-colorPickerButton").node().focus();
+            }
+        };
+        _this.setSelectedColor = function (cStr, gridItem) {
+            _this.colorPickerElem.select(".tsi-selectedColor").classed("tsi-noColor", false);
+            _this.colorPickerElem.select(".tsi-selectedColor").style("background-color", cStr);
+            _this.colorPickerElem.select(".tsi-selectedColorValue").text(cStr);
+            _this.colorPickerElem.select(".tsi-colorItem.tsi-selected").classed("tsi-selected", false);
+            _this.colorPickerElem.select(".tsi-colorItem.tsi-selected").attr("aria-selected", false);
+            _this.colorPickerElem.select(".tsi-colorPickerButton").attr("aria-label", (_this.selectedColor ? _this.selectedColor : _this.getString('No color')) + ' ' + _this.getString('Select color'));
+            gridItem.classed("tsi-selected", true);
+            gridItem.attr("aria-selected", true);
+            _this.selectedColor = cStr;
+        };
+        _this.getColorPickerElem = function () {
+            return _this.colorPickerElem;
+        };
+        _this.componentId = componentId;
+        return _this;
+    }
+    ColorPicker.prototype.render = function (options) {
+        var _this = this;
+        if (options === void 0) { options = {}; }
+        this.chartOptions.setOptions(options);
+        this.selectedColor = this.chartOptions.defaultColor;
+        if (this.chartOptions.colors.indexOf(this.selectedColor) === -1) {
+            this.chartOptions.colors.push(this.selectedColor);
+        }
+        this.colorPickerElem = d3.select(this.renderTarget).classed("tsi-colorPicker", true);
+        this.colorPickerElem.text('');
+        _super.prototype.themify.call(this, this.colorPickerElem, this.chartOptions.theme);
+        // color selection button
+        var colorPickerButton = this.colorPickerElem.append('button').classed("tsi-colorPickerButton", true)
+            .attr("title", this.getString('Select color'))
+            .attr("aria-label", (this.selectedColor ? this.selectedColor : this.getString('No color')) + ' ' + this.getString('Select color'))
+            .attr("aria-controls", "tsi-colorGrid_".concat(this.componentId))
+            .on('click', function (event) {
+            if (_this.isColorGridVisible) {
+                _this.hideColorGrid(true);
+            }
+            else {
+                _this.chartOptions.onClick(event);
+                _this.showColorGrid();
+            }
+        });
+        if (this.selectedColor) {
+            colorPickerButton.append('div').classed("tsi-selectedColor", true).style("background-color", this.selectedColor);
+        }
+        else {
+            colorPickerButton.append('div').classed("tsi-selectedColor", true).classed("tsi-noColor", true);
+        }
+        colorPickerButton.append('span').classed("tsi-selectedColorValue", true).classed("hidden", this.chartOptions.isColorValueHidden)
+            .attr("id", "tsi-selectedColorValue_".concat(this.componentId))
+            .text(this.selectedColor ? this.selectedColor : this.getString('No color'));
+        // color grid
+        var colorGridElem = this.colorPickerElem.append('div').classed("tsi-colorGrid", true).attr("id", "tsi-colorGrid_".concat(this.componentId)).attr("role", "grid");
+        var colorGridRowElem = colorGridElem.append('div').classed("tsi-colorGridRow", true).attr("role", "row");
+        this.chartOptions.colors.forEach(function (c, idx) {
+            var gridItem = colorGridRowElem.append('div').classed("tsi-colorItem", true).classed("tsi-selected", c === _this.selectedColor)
+                .attr("tabindex", 0)
+                .attr("role", "gridcell")
+                .attr("aria-label", c)
+                .attr("aria-selected", c === _this.selectedColor)
+                .style("background-color", c)
+                .on('click', function (event) {
+                event.preventDefault();
+                event.stopPropagation();
+                _this.chartOptions.onSelect(c);
+                _this.hideColorGrid(true);
+                _this.setSelectedColor(c, gridItem);
+            })
+                .on('keydown', function (event) {
+                if (event.keyCode === KeyCodes.Tab && !event.shiftKey && idx === _this.chartOptions.colors.length - 1) { // tab
+                    event.preventDefault();
+                    _this.colorPickerElem.selectAll(".tsi-colorItem").nodes()[0].focus();
+                }
+                else if (event.keyCode === KeyCodes.Enter) {
+                    event.preventDefault();
+                    event.stopPropagation();
+                    _this.chartOptions.onSelect(c);
+                    _this.hideColorGrid(true);
+                    _this.setSelectedColor(c, gridItem);
+                }
+                else if (event.keyCode === KeyCodes.Esc) {
+                    event.preventDefault();
+                    event.stopPropagation();
+                    _this.hideColorGrid(true);
+                }
+            });
+        });
+    };
+    return ColorPicker;
+}(Component));
+
+export { ColorPicker as C };

package/dist/ColorPicker.d.ts

@@ -0,0 +1,28 @@
+import { C as Component } from './Component-Rp30sSAW.js';
+import './Enums-ChUuTtHV.js';
+import './Interfaces-BKRQ685G.js';
+
+interface ColorPickerOptions {
+    theme?: string;
+    numberOfColors?: number;
+    colors?: Array<string>;
+    defaultColor?: string;
+    isColorValueHidden?: boolean;
+    onSelect?: (colorHex: string) => void;
+    onClick?: (event: any) => void;
+}
+declare class ColorPicker extends Component {
+    private colorPickerElem;
+    private selectedColor;
+    private isColorGridVisible;
+    private componentId;
+    constructor(renderTarget: Element, componentId?: string);
+    render(options?: ColorPickerOptions): void;
+    getSelectedColorValue: () => string;
+    private showColorGrid;
+    hideColorGrid: (withFocusBackToPickerButton?: boolean) => void;
+    private setSelectedColor;
+    getColorPickerElem: () => any;
+}
+
+export { ColorPicker as default };

package/dist/ColorPicker.js

@@ -0,0 +1,6 @@
+export { C as default } from './ColorPicker-CH__K8xm.js';
+import './_tslib-5_9pMg1F.js';
+import 'd3';
+import './Component-CofgyEw0.js';
+import './Utils-C_j8IgZh.js';
+import 'moment-timezone';