@antv/t8/es/charts/association/index.js

T8 is a text visualization solution for unstructured data within the AntV technology stack, and it is a declarative T8 markdown syntax that can be used to describe the content of data interpretation reports.

import { getElementFontSize } from '../../utils/getElementFontSize.js';
import '../utils/selection.js';
import { scaleLinear } from '../utils/scales.js';
import { arrow } from '../utils/paths.js';
import { createSvg } from '../utils/createSvg.js';
import { extent } from '../utils/data.js';
import { linearRegression } from '../utils/linearRegression.js';
import { LINE_STROKE_COLOR, ARROW_FILL_COLOR, HIGHLIGHT_COLOR, SCALE_ADJUST } from '../utils/const.js';

var renderAssociationChart = function (container, config, paragraphType, themeSeedToken) {
    var _a = config.data, data = _a === void 0 ? [] : _a;
    if (!data.length)
        return;
    if (data.length < 2)
        throw new Error('data must contain at least 2 points');
    var chartSize = getElementFontSize(paragraphType, themeSeedToken);
    var height = chartSize;
    var width = chartSize * 2;
    var svg = createSvg(container, width, height);
    var xValueExtent = extent(data.map(function (d) { return d.x; }));
    var yValueExtent = extent(data.map(function (d) { return d.y; }));
    var xValueDomain = [
        xValueExtent[0] > 0 ? 0 : xValueExtent[0],
        xValueExtent[1] < 0 ? 0 : xValueExtent[1],
    ];
    var yValueDomain = [
        yValueExtent[0] > 0 ? 0 : yValueExtent[0],
        yValueExtent[1] < 0 ? 0 : yValueExtent[1],
    ];
    var xScale = scaleLinear(xValueDomain, [SCALE_ADJUST, width - SCALE_ADJUST]);
    var yScale = scaleLinear(yValueDomain, [height - SCALE_ADJUST, SCALE_ADJUST]);
    var zeroXPosition = xScale(0);
    var zeroYPosition = yScale(0);
    var linearRegressionResult = linearRegression(data);
    var tagData = data.map(function (d) {
        var tag = linearRegressionResult.k * d.x + linearRegressionResult.b;
        return {
            x: d.x,
            y: tag,
        };
    });
    svg
        .append('line')
        .attr('x1', zeroXPosition)
        .attr('y1', 0)
        .attr('x2', zeroXPosition)
        .attr('y2', height)
        .attr('stroke', LINE_STROKE_COLOR);
    svg
        .append('line')
        .attr('x1', 0)
        .attr('y1', zeroYPosition)
        .attr('x2', width)
        .attr('y2', zeroYPosition)
        .attr('stroke', LINE_STROKE_COLOR);
    var arrowPath = arrow(xScale, yScale);
    svg
        .append('path')
        .attr('d', arrowPath({ index: tagData[0].x, value: tagData[0].y }, { index: tagData[tagData.length - 1].x, value: tagData[tagData.length - 1].y }))
        .attr('stroke', ARROW_FILL_COLOR)
        .attr('fill', ARROW_FILL_COLOR);
    data.forEach(function (d) {
        svg.append('circle').attr('cx', xScale(d.x)).attr('cy', yScale(d.y)).attr('r', 1).attr('fill', HIGHLIGHT_COLOR);
    });
};

export { renderAssociationChart };
//# sourceMappingURL=index.js.map