@antv/t8
Version:
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.
28 lines (25 loc) • 1.51 kB
JavaScript
import { jsxs, jsx } from 'preact/jsx-runtime';
import { useSvgWrapper } from '../hooks/useSvgWrapper.js';
import { useLineCompute } from './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(), Svg = _b[0], size = _b[1];
// Calculate all the line paths and dimensions
var _c = useLineCompute(size, data), width = _c.width, height = _c.height, linePath = _c.linePath, polygonPath = _c.polygonPath;
return (jsxs(Svg, { height: height, width: width, children: [jsx("defs", { children: jsxs("linearGradient", { id: LINEAR_FILL_COLOR_ID, x1: "50%", x2: "50%", y1: "0%", y2: "122.389541%", children: [jsx("stop", { offset: "0%", "stop-color": LINE_STROKE_COLOR }), jsx("stop", { offset: "100%", "stop-color": "#FFFFFF", stopOpacity: "0" })] }) }), linePath && jsx("path", { d: linePath, stroke: LINE_STROKE_COLOR, fill: "transparent" }), polygonPath && jsx("polygon", { points: polygonPath, fill: "url(#".concat(LINEAR_FILL_COLOR_ID, ")") })] }));
};
export { SingleLine };
//# sourceMappingURL=index.js.map