@antv/t8/lib/charts/line/index.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.

'use strict';

var jsxRuntime = require('preact/jsx-runtime');
var useSvgWrapper = require('../hooks/useSvgWrapper.js');
var useLineCompute = require('./useLineCompute.js');

// ID for the gradient fill effect
var LINEAR_FILL_COLOR_ID = 'wsc-line-fill';
// Color for the line stroke
var LINE_STROKE_COLOR = '#5B8FF9';
/**
 * SingleLineChart Component
 *
 * Renders a simple line chart with a filled area below the line
 * The chart automatically adjusts to the font size of its container
 *
 * @param data - Array of numeric values to display as a line chart
 */
var SingleLine = function (_a) {
    var data = _a.data;
    // Get SVG wrapper and calculated size based on font
    var _b = useSvgWrapper.useSvgWrapper(), Svg = _b[0], size = _b[1];
    // Calculate all the line paths and dimensions
    var _c = useLineCompute.useLineCompute(size, data), width = _c.width, height = _c.height, linePath = _c.linePath, polygonPath = _c.polygonPath;
    return (jsxRuntime.jsxs(Svg, { height: height, width: width, children: [jsxRuntime.jsx("defs", { children: jsxRuntime.jsxs("linearGradient", { id: LINEAR_FILL_COLOR_ID, x1: "50%", x2: "50%", y1: "0%", y2: "122.389541%", children: [jsxRuntime.jsx("stop", { offset: "0%", "stop-color": LINE_STROKE_COLOR }), jsxRuntime.jsx("stop", { offset: "100%", "stop-color": "#FFFFFF", stopOpacity: "0" })] }) }), linePath && jsxRuntime.jsx("path", { d: linePath, stroke: LINE_STROKE_COLOR, fill: "transparent" }), polygonPath && jsxRuntime.jsx("polygon", { points: polygonPath, fill: "url(#".concat(LINEAR_FILL_COLOR_ID, ")") })] }));
};

exports.SingleLine = SingleLine;
//# sourceMappingURL=index.js.map