@antv/t8/lib/charts/proportion/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 getArcPath = require('./getArcPath.js');
var useSvgWrapper = require('../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.useSvgWrapper(), Svg = _b[0], size = _b[1];
    // Calculate radius from size
    var r = size / 2;
    return (jsxRuntime.jsxs(Svg, { width: size, height: size, children: [jsxRuntime.jsx("circle", { cx: r, cy: r, r: r, fill: PROPORTION_SHADOW_COLOR }), data >= 1 ? (
            // For 100% or more, draw a full circle
            jsxRuntime.jsx("circle", { cx: r, cy: r, r: r, fill: PROPORTION_FILL_COLOR })) : (
            // For less than 100%, draw an arc segment
            jsxRuntime.jsx("path", { d: getArcPath.getArcPath(size, data), fill: PROPORTION_FILL_COLOR }))] }));
};

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