tsiclient
Version:
--- [//]: <> (This content is similar to https://github.com/MicrosoftDocs/azure-docs/edit/main/includes/tsi-retirement.md)
303 lines (300 loc) • 16.3 kB
JavaScript
import { a as __extends, d as __spreadArray } from './tslib.es6-f952ba6f.js';
import { G as GRIDCONTAINERCLASS, U as Utils, T as TooltipMeasureFormat, D as DataTypes, S as ShiftTypes } from './Utils-38a0872e.js';
import { select } from 'd3';
import { C as Component } from './Component-5173b5ea.js';
import { G as Grid, C as ChartComponentData } from './Grid-170eaa9c.js';
import { E as EllipsisMenu } from './EllipsisMenu-7faacf35.js';
import Split from 'split.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 !select(this.renderTarget).selectAll("." + 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(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);
var title = 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), [[keyString, valueString]]);
}
}
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 {
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;
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');
select(_this.renderTarget).select('.tsi-resizeGutter')
.classed('tsi-isDragging', false);
},
onDragStart: function () {
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 };