@antv/t8/es/charts/line/useLineCompute.js

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

import { __spreadArray } from 'tslib';
import { useState, useEffect } from 'preact/hooks';
import { scaleLinear } from './scaleLinear.js';
import { DEFAULT_FONT_SIZE } from '../hooks/getElementFontSize.js';

// Adjust value to create padding around the line chart for better visibility
var SCALE_ADJUST = 2;
/**
 * Line class handles the calculation and generation of line chart paths
 * It computes the dimensions, scales, and point coordinates for rendering
 */
var Line = /** @class */ (function () {
    /**
     * Create a new Line chart instance
     * @param size - Base size for the chart (typically derived from font size)
     * @param data - Array of numeric values to visualize
     */
    function Line(size, data) {
        // Array of data points to be visualized
        this.data = [];
        // Base size determined by font size
        this.size = DEFAULT_FONT_SIZE;
        // Height of the chart (defaults to size)
        this.height = this.size;
        // Width of the chart (calculated based on data length)
        this.width = this.getWidth();
        // Array of [x,y] coordinates for each data point
        this.points = [];
        this.size = size;
        this.data = data;
        this.compute();
    }
    /**
     * Calculate the width of the chart based on size and data length
     * @returns Width in pixels
     */
    Line.prototype.getWidth = function () {
        var _a;
        return Math.max(this.size * 2, ((_a = this.data) === null || _a === void 0 ? void 0 : _a.length) * 2);
    };
    /**
     * Compute all necessary values for rendering the line chart
     * Sets up scales, dimensions, and point coordinates
     */
    Line.prototype.compute = function () {
        var _this = this;
        var _a;
        if (!this.data)
            return;
        this.height = this.size;
        this.width = this.getWidth();
        // Create scale for X-axis mapping chart width to data indices
        this.xScale = scaleLinear([0, this.width], [0, ((_a = this.data) === null || _a === void 0 ? void 0 : _a.length) - 1]);
        // Find min and max values in data for Y-axis scaling
        var _b = [Math.min.apply(Math, this.data), Math.max.apply(Math, this.data)], min = _b[0], max = _b[1];
        // Create scale for Y-axis with slight padding (SCALE_ADJUST)
        this.yScale = scaleLinear([SCALE_ADJUST, this.height - SCALE_ADJUST], [min, max]);
        // Convert data points to [x,y] coordinates
        // Note: Y coordinates are inverted (this.height - ...) because SVG coordinates
        // start from top-left corner (0,0) and go down and right
        this.points = this.data.map(function (item, index) { var _a, _b; return [(_a = _this.xScale) === null || _a === void 0 ? void 0 : _a.call(_this, index), _this.height - ((_b = _this.yScale) === null || _b === void 0 ? void 0 : _b.call(_this, item))]; });
    };
    /**
     * Generate SVG path string for the line
     * @returns SVG path data string or null if no data
     */
    Line.prototype.getLinePath = function () {
        var _a;
        if (!((_a = this.data) === null || _a === void 0 ? void 0 : _a.length) || !this.xScale || !this.yScale)
            return null;
        var path = this.points.reduce(function (prev, _a, index) {
            var x = _a[0], y = _a[1];
            if (index === 0)
                return "M".concat(x, " ").concat(y); // Move to first point
            return "".concat(prev, " L ").concat(x, " ").concat(y); // Draw line to subsequent points
        }, '');
        return path;
    };
    /**
     * Generate SVG polygon points for area under the line
     * Creates a closed shape by adding points along the bottom
     * @returns SVG polygon points string or null if no data
     */
    Line.prototype.getPolygonPath = function () {
        var _a;
        if (!((_a = this.data) === null || _a === void 0 ? void 0 : _a.length) || !this.xScale || !this.yScale)
            return null;
        var polygonPoints = __spreadArray([], this.points, true);
        var last = this.points[this.points.length - 1];
        // Add bottom-right corner
        polygonPoints.push([last[0], this.height]);
        // Add bottom-left corner
        polygonPoints.push([0, this.height]);
        // Add first point to close the shape
        var startPoint = this.points[0];
        polygonPoints.push(startPoint);
        // Convert points array to SVG polygon points format
        var path = polygonPoints.reduce(function (prev, _a) {
            var x = _a[0], y = _a[1];
            return "".concat(prev, " ").concat(x, ",").concat(y);
        }, '');
        return path;
    };
    /**
     * Get width and height of the chart container
     * @returns [width, height] array
     */
    Line.prototype.getContainer = function () {
        return [this.width, this.height];
    };
    return Line;
}());
/**
 * React hook for line chart computation
 * Creates and updates a Line instance when size or data changes
 *
 * @param size - Base size of the chart (typically derived from font size)
 * @param data - Array of numeric values to visualize
 * @returns Object containing dimensions and path data for rendering
 */
var useLineCompute = function (size, data) {
    var _a = useState(new Line(size, data)), line = _a[0], setLine = _a[1];
    // Re-compute when size or data changes
    useEffect(function () {
        setLine(new Line(size, data));
    }, [size, data]);
    return {
        width: line.getContainer()[0],
        height: line.getContainer()[1],
        linePath: line.getLinePath(),
        polygonPath: line.getPolygonPath(),
    };
};

export { useLineCompute };
//# sourceMappingURL=useLineCompute.js.map