@syncfusion/ej2-charts/src/smithchart/series/datalabel.js

Feature-rich chart control with built-in support for over 25 chart types, technical indictors, trendline, zooming, tooltip, selection, crosshair and trackball.

import { createElement } from '@syncfusion/ej2-base';
import { measureText } from '../../smithchart/utils/helper';
import { getTemplateFunction, convertElementFromLabel, PathOption } from '../../smithchart/utils/helper';
import { SmithchartLabelPosition } from '../../smithchart/utils/utils';
import { LabelOption } from '../../smithchart/utils/utils';
var DataLabel = /** @class */ (function () {
    function DataLabel() {
        this.textOptions = [];
        this.labelOptions = [];
        this.allPoints = [];
    }
    DataLabel.prototype.drawDataLabel = function (smithchart, seriesindex, groupElement, pointsRegion, bounds) {
        this.textOptions = [];
        this.allPoints = [];
        var margin = smithchart.margin;
        var pointIndex;
        var marker = smithchart.series[seriesindex].marker;
        var region;
        var labelPosition;
        var labelText;
        var textSize;
        var dataLabel = marker.dataLabel;
        var font = dataLabel.textStyle;
        var count = pointsRegion.length;
        for (var i = 0; i < count; i++) {
            labelText = smithchart.series[seriesindex].points[i].reactance.toString();
            textSize = measureText(labelText, font, smithchart.themeStyle.dataLabelFont);
            region = pointsRegion[i]['point'];
            var xPos = region.x - textSize.width / 2;
            var yPos = region.y - (textSize.height + marker['height'] + (margin.top));
            var width = textSize.width + (margin.left / 2) + (margin.right / 2);
            var height = textSize.height + (margin.top / 2) + (margin.bottom / 2);
            font.fontFamily = font.fontFamily ? font.fontFamily : smithchart.themeStyle.dataLabelFont.fontFamily;
            pointIndex = i;
            labelPosition = new SmithchartLabelPosition();
            labelPosition = { textX: xPos + (margin.left / 2), textY: yPos + (height / 2) + margin.top / 2, x: xPos, y: yPos };
            this.textOptions[i] = {
                id: smithchart.element.id + '_Series' + seriesindex + '_Points' + pointIndex + '_dataLabel' + '_displayText' + i,
                x: labelPosition['textX'],
                y: labelPosition['textY'],
                fill: 'black',
                text: labelText,
                font: font,
                xPosition: xPos,
                yPosition: yPos,
                width: width,
                height: height,
                location: region,
                labelOptions: labelPosition,
                visible: true,
                connectorFlag: null
            };
        }
        var labelOption = new LabelOption();
        labelOption.textOptions = this.textOptions;
        this.labelOptions.push(labelOption);
        this.drawDatalabelSymbol(smithchart, seriesindex, dataLabel, groupElement, bounds, pointsRegion);
    };
    DataLabel.prototype.calculateSmartLabels = function (points, seriesIndex) {
        var length = points['textOptions'].length;
        var count = 0;
        for (var k = 0; k < length; k++) {
            this.allPoints[this.allPoints.length] = points['textOptions'][k];
            this.connectorFlag = false;
            this.compareDataLabels(k, points, count, seriesIndex);
            this.labelOptions[seriesIndex]['textOptions'][k] = points['textOptions'][k];
            this.labelOptions[seriesIndex]['textOptions'][k].connectorFlag = this.connectorFlag;
        }
    };
    DataLabel.prototype.compareDataLabels = function (i, points, count, m) {
        var length = this.allPoints.length;
        var padding = 10;
        var collide;
        var currentLabel;
        var prevLabel;
        for (var j = 0; j < length; j++) {
            prevLabel = this.allPoints[j];
            currentLabel = this.allPoints[length - 1];
            collide = this.isCollide(prevLabel, currentLabel);
            if (collide) {
                this.connectorFlag = true;
                switch (count) {
                    case 0:
                        // Right
                        this.resetValues(currentLabel);
                        this.prevLabel = prevLabel;
                        currentLabel['xPosition'] = this.prevLabel['xPosition'] + (this.prevLabel['width'] / 2 +
                            currentLabel['width'] / 2 + padding);
                        currentLabel['x'] = currentLabel['xPosition'] + padding / 2;
                        count += 1;
                        this.compareDataLabels(i, points, count, m);
                        break;
                    case 1:
                        // Right Bottom
                        this.resetValues(currentLabel);
                        currentLabel['xPosition'] = this.prevLabel['xPosition'] + this.prevLabel['width'] / 2 +
                            currentLabel['width'] / 2 + padding;
                        currentLabel['x'] = currentLabel['xPosition'] + padding / 2;
                        currentLabel['yPosition'] = currentLabel['location'].y + currentLabel['height'] / 2 + padding / 2;
                        currentLabel['y'] = currentLabel['yPosition'] + ((currentLabel['height'] / 2)) + padding / 2;
                        count += 1;
                        this.compareDataLabels(i, points, count, m);
                        break;
                    case 2:
                        // Bottom
                        this.resetValues(currentLabel);
                        currentLabel['yPosition'] = currentLabel['location'].y + currentLabel['height'] / 2 + padding / 2;
                        currentLabel['y'] = currentLabel['yPosition'] + (currentLabel['height'] / 2) + padding / 2;
                        count += 1;
                        this.compareDataLabels(i, points, count, m);
                        break;
                    case 3:
                        // Left Bottom
                        this.resetValues(currentLabel);
                        currentLabel['xPosition'] = this.prevLabel['xPosition'] - this.prevLabel['width'] / 2
                            - currentLabel['width'] / 2 - padding;
                        currentLabel['x'] = currentLabel['xPosition'] + padding / 2;
                        currentLabel['yPosition'] = currentLabel['height'] / 2 + currentLabel['location'].y + padding / 2;
                        currentLabel['y'] = currentLabel['yPosition'] + ((currentLabel['height'] / 2)) + padding / 2;
                        count += 1;
                        this.compareDataLabels(i, points, count, m);
                        break;
                    case 4:
                        // Left
                        this.resetValues(currentLabel);
                        currentLabel['xPosition'] = (this.prevLabel['xPosition'] - this.prevLabel['width'] / 2 -
                            currentLabel['width'] / 2 - padding);
                        currentLabel['x'] = currentLabel['xPosition'] + padding / 2;
                        count += 1;
                        this.compareDataLabels(i, points, count, m);
                        break;
                    case 5:
                        //Left Top
                        this.resetValues(currentLabel);
                        currentLabel['xPosition'] = this.prevLabel['xPosition'] - this.prevLabel['width'] / 2 -
                            currentLabel['width'] / 2 - padding;
                        currentLabel['x'] = currentLabel['xPosition'] + padding / 2;
                        currentLabel['yPosition'] = this.prevLabel['yPosition'] - currentLabel['height'] - padding;
                        currentLabel['y'] = currentLabel['yPosition'] + currentLabel['height'] / 2 + padding / 2;
                        count += 1;
                        this.compareDataLabels(i, points, count, m);
                        break;
                    case 6:
                        // Top
                        this.resetValues(currentLabel);
                        currentLabel['yPosition'] = (this.prevLabel['yPosition']) - (currentLabel['height'] + padding);
                        currentLabel['y'] = currentLabel['yPosition'] + (currentLabel['height'] / 2) + padding / 2;
                        count += 1;
                        this.compareDataLabels(i, points, count, m);
                        break;
                    case 7:
                        // Right Top
                        this.resetValues(currentLabel);
                        currentLabel['xPosition'] = this.prevLabel['xPosition'] + this.prevLabel['width'] / 2 +
                            currentLabel['width'] / 2 + padding;
                        currentLabel['x'] = currentLabel['xPosition'] + padding / 2;
                        currentLabel['yPosition'] = this.prevLabel['yPosition'] - currentLabel['height'] - padding;
                        currentLabel['y'] = currentLabel['yPosition'] + (currentLabel['height'] / 2) + padding / 2;
                        count += 1;
                        this.compareDataLabels(i, points, count, m);
                        break;
                    case 8:
                        count = 0;
                        this.compareDataLabels(i, points, count, m);
                        break;
                }
            }
        }
    };
    DataLabel.prototype.isCollide = function (dataLabel1, dataLabel2) {
        var state = false;
        if (dataLabel1 !== dataLabel2) {
            state = !( // to compare data labels
            ((dataLabel1['y'] + dataLabel1['height']) < (dataLabel2['y'])) ||
                (dataLabel1['y'] > (dataLabel2['y'] + dataLabel2['height'])) ||
                ((dataLabel1['x'] + dataLabel1['width'] / 2) < dataLabel2['x'] - dataLabel2['width'] / 2) ||
                (dataLabel1['x'] - dataLabel1['width'] / 2 > (dataLabel2['x'] + dataLabel2['width'] / 2)));
        }
        return state;
    };
    DataLabel.prototype.resetValues = function (currentPoint) {
        currentPoint['xPosition'] = currentPoint['labelOptions']['x'];
        currentPoint['yPosition'] = currentPoint['labelOptions']['y'];
        currentPoint['x'] = currentPoint['labelOptions']['textX'];
        currentPoint['y'] = currentPoint['labelOptions']['textY'];
    };
    DataLabel.prototype.drawConnectorLines = function (smithchart, seriesIndex, index, currentPoint, groupElement) {
        var location = currentPoint['location'];
        var endY;
        if (location.y > currentPoint['y']) {
            endY = (currentPoint['y']);
        }
        else {
            endY = (currentPoint['y'] - currentPoint['height'] / 2); // bottom
        }
        var connectorDirection = 'M' + ' ' + (location.x) + ' ' + (location.y) + ' ' + 'L' + ' ' +
            (currentPoint['x']) + ' ' + (endY);
        var connectorLineValues = smithchart.series[seriesIndex].
            marker.dataLabel.connectorLine;
        var stroke = connectorLineValues.color ? connectorLineValues.color :
            (smithchart.series[seriesIndex].fill ||
                smithchart.seriesColors[seriesIndex % smithchart.seriesColors.length]);
        var options = new PathOption(smithchart.element.id + '_dataLabelConnectorLine' + '_series' + seriesIndex + '_point' + index, 'none', connectorLineValues.width, stroke, 1, 'none', connectorDirection);
        var element = smithchart.renderer.drawPath(options);
        groupElement.appendChild(element);
    };
    DataLabel.prototype.drawDatalabelSymbol = function (smithchart, seriesindex, dataLabel, groupElement, bounds, pointsRegion) {
        for (var i = 0; i < smithchart.series[seriesindex].points.length; i++) {
            if (dataLabel.template) {
                var labelTemplateElement = createElement('div', {
                    id: smithchart.element.id + '_seriesIndex_' + seriesindex + '_Label_Template_Group',
                    className: 'template',
                    styles: 'position: absolute;'
                    /* 'top:' + bounds['x'] + 'px;' +
                'left:' + bounds['y'] + 'px;' +
                'height:' + smithchart.availableSize.height + 'px;' +
                'width:' + smithchart.availableSize.width + 'px;'*/
                });
                document.getElementById(smithchart.element.id + '_Secondary_Element').appendChild(labelTemplateElement);
                var id = dataLabel.template + '_seriesIndex' + seriesindex + '_pointIndex' + i + smithchart.element.id;
                var data = { point: smithchart.series[seriesindex].points[i].reactance };
                var templateFn = getTemplateFunction(dataLabel.template);
                var templateElement = templateFn(smithchart);
                var labelElement = convertElementFromLabel(templateElement, id, data);
                labelTemplateElement.appendChild(labelElement);
                labelElement.style.left = pointsRegion[i].point.x - labelElement.offsetWidth / 2 + 'px';
                labelElement.style.top = pointsRegion[i].point.y - labelElement.offsetHeight -
                    smithchart.series[seriesindex].marker.height / 2 + 'px';
                var left = parseInt(labelElement.style.left, 10);
                var top_1 = parseInt(labelElement.style.top, 10);
                var width = labelElement.offsetWidth;
                var height = labelElement.offsetHeight;
                var region = pointsRegion[i]['point'];
                var labelPosition = { textX: left, textY: top_1,
                    x: left, y: top_1 };
                this.labelOptions[seriesindex]['textOptions'][i] = {
                    id: id,
                    x: left,
                    y: top_1,
                    fill: 'black',
                    text: '',
                    font: dataLabel.textStyle,
                    xPosition: left,
                    yPosition: top_1,
                    width: width,
                    height: height,
                    location: region,
                    labelOptions: labelPosition,
                    visible: true,
                    connectorFlag: null
                };
            }
        }
    };
    return DataLabel;
}());
export { DataLabel };