UNPKG

@antv/t8

Version:

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

70 lines (66 loc) 2.39 kB
'use strict'; require('../utils/selection.js'); var scales = require('../utils/scales.js'); require('tslib'); var createSvg = require('../utils/createSvg.js'); var getElementFontSize = require('../../utils/getElementFontSize.js'); // Chart colors var BAR_FILL_COLOR = '#5B8FF9'; var SCALE_ADJUST = 2; /** * Get the gap between bars * @param data - The data array * @returns The gap between bars */ var getGap = function (data) { if (data.length < 3) return 4; else if (data.length >= 3 && data.length < 5) return 2; else return 1; }; /** * Renders a rank chart with bars * @param container - The container element * @param config - The rank chart configuration * @param drawSvgCallback - A callback function to draw the SVG on the chart */ var renderRankChart = function (container, config, paragraphType, themeSeedToken) { var _a = config.data, data = _a === void 0 ? [] : _a, drawSvgCallback = config.drawSvgCallback; if (!data.length) return; var chartSize = getElementFontSize.getElementFontSize(paragraphType, themeSeedToken); // Clear existing content container.innerHTML = ''; // Get dimensions var height = chartSize; var width = chartSize * 2; // If there are more than 5 bars, reduce the gap between bars to 1px var gap = getGap(data); var barWidth = (width - gap * (data.length - 1)) / data.length; // Create SVG var svg = createSvg.createSvg(container, width, height); // Create scales var xScale = scales.scaleLinear([0, data.length - 1], [0, width - barWidth]); var maxValue = Math.max.apply(Math, data); var minValue = Math.min.apply(Math, data); var yScale = scales.scaleLinear([minValue, maxValue], [height - SCALE_ADJUST, SCALE_ADJUST]); // Draw bars data.forEach(function (value, index) { var x = xScale(index); var y = yScale(value); svg .append('rect') .attr('class', 'bar') .attr('x', x) .attr('y', y) .attr('width', barWidth) .attr('height', height - y) .attr('fill', BAR_FILL_COLOR) .style('cursor', 'pointer'); }); drawSvgCallback === null || drawSvgCallback === void 0 ? void 0 : drawSvgCallback(svg, xScale, yScale); }; exports.renderRankChart = renderRankChart; //# sourceMappingURL=index.js.map