@antv/t8/lib/charts/line/index.js

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.

'use strict';

var getElementFontSize = require('../../utils/getElementFontSize.js');
require('../utils/selection.js');
var scales = require('../utils/scales.js');
var paths = require('../utils/paths.js');
var createSvg = require('../utils/createSvg.js');

var LINE_STROKE_COLOR = '#5B8FF9';
var LINE_FILL_COLOR = '#5B8FF9';
var LINEAR_FILL_COLOR_ID = 'wsc-line-fill';
var SCALE_ADJUST = 2;
/**
 * Renders a line chart with optional gradient fill area
 */
var renderLineChart = function (container, config, paragraphType, themeSeedToken) {
    var _a = config.data, data = _a === void 0 ? [] : _a;
    if (!data.length)
        return;
    var chartSize = getElementFontSize.getElementFontSize(paragraphType, themeSeedToken);
    var height = chartSize;
    var width = Math.max(chartSize * 2, data.length * 2);
    var svg = createSvg.createSvg(container, width, height);
    var xScale = scales.scaleLinear([0, (data === null || data === void 0 ? void 0 : data.length) - 1], [0, width]);
    // Find min and max values in data for Y-axis scaling
    var _b = [Math.min.apply(Math, data), Math.max.apply(Math, data)], min = _b[0], max = _b[1];
    // Create scale for Y-axis with slight padding (SCALE_ADJUST)
    var yScale = scales.scaleLinear([min, max], [SCALE_ADJUST, height - SCALE_ADJUST]);
    // Create gradient
    var defs = svg.append('defs');
    var gradient = defs
        .append('linearGradient')
        .attr('id', LINEAR_FILL_COLOR_ID)
        .attr('x1', '50%')
        .attr('x2', '50%')
        .attr('y1', '0%')
        .attr('y2', '122.389541%');
    gradient.append('stop').attr('offset', '0%').attr('stop-color', LINE_FILL_COLOR);
    gradient.append('stop').attr('offset', '100%').attr('stop-color', '#FFFFFF').attr('stop-opacity', '0');
    // Draw line
    var linePath = paths.line(xScale, yScale, height)(data);
    if (linePath) {
        svg.append('path').attr('d', linePath).attr('stroke', LINE_STROKE_COLOR).attr('fill', 'transparent');
    }
    // Draw area
    var areaPath = paths.area(xScale, yScale, height)(data);
    if (areaPath) {
        svg.append('path').attr('d', areaPath).attr('fill', "url(#".concat(LINEAR_FILL_COLOR_ID, ")"));
    }
};

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