@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
JavaScript
;
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