@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.
33 lines (30 loc) • 1.37 kB
JavaScript
import { jsxs, jsx } from 'preact/jsx-runtime';
import { getArcPath } from './getArcPath.js';
import { useSvgWrapper } from '../hooks/useSvgWrapper.js';
// Background color for the unfilled portion of the circle
var PROPORTION_SHADOW_COLOR = '#CDDDFD';
// Fill color for the proportion segment
var PROPORTION_FILL_COLOR = '#3471F9';
/**
* Proportion Component
*
* Visualizes a proportion/percentage as a filled segment of a circle
* Similar to a simplified pie chart with two segments (filled and unfilled)
* If proportion is 1 (100%), it renders a fully filled circle
*
* @param data - Proportion value between 0 and 1 (e.g., 0.75 for 75%)
*/
var Proportion = 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 radius from size
var r = size / 2;
return (jsxs(Svg, { width: size, height: size, children: [jsx("circle", { cx: r, cy: r, r: r, fill: PROPORTION_SHADOW_COLOR }), data >= 1 ? (
// For 100% or more, draw a full circle
jsx("circle", { cx: r, cy: r, r: r, fill: PROPORTION_FILL_COLOR })) : (
// For less than 100%, draw an arc segment
jsx("path", { d: getArcPath(size, data), fill: PROPORTION_FILL_COLOR }))] }));
};
export { Proportion };
//# sourceMappingURL=index.js.map