@visactor/vtable/es/state/spark-line/index.js

canvas table width high performance

import { createLine, createSymbol } from "./../../vrender";

import { TABLE_EVENT_TYPE } from "../../core/TABLE_EVENT_TYPE";

export function clearChartHover(col, row, table) {
    const sparkline = table.scenegraph.getCell(col, row).getChildByName("sparkline"), highlightLine = null == sparkline ? void 0 : sparkline.getChildByName("highlight-line"), highlightSymbol = null == sparkline ? void 0 : sparkline.getChildByName("highlight-symbol");
    highlightLine && highlightLine.setAttributes({
        visible: !1,
        pickable: !1
    }), highlightSymbol && highlightSymbol.setAttributes({
        visible: !1,
        pickable: !1
    }), table.scenegraph.updateNextFrame();
}

export function updateChartHover(col, row, x, y, table) {
    var _a, _b;
    const sparkline = table.scenegraph.getCell(col, row).getChildByName("sparkline"), line = null == sparkline ? void 0 : sparkline.getChildByName("sparkline-line"), symbol = null == sparkline ? void 0 : sparkline.getChildByName("sparkline-symbol-group");
    if (!line) return !1;
    const bandwidth = line.bandwidth, min = line.min, max = line.max, points = line.attribute.points;
    let chartPoint;
    x -= sparkline.globalAABBBounds.x1, sparkline.globalAABBBounds.y1;
    for (let i = 0; i < points.length; i++) {
        const {x: pointX, y: pointY, defined: defined, rawData: rawData} = points[i];
        if (Math.abs(x - pointX) < bandwidth / 2 && (chartPoint = {
            point: points[i],
            points: points,
            pointsBandWidth: bandwidth,
            pointData: rawData
        }, defined)) {
            const highlightLine = sparkline.getChildByName("highlight-line");
            if (highlightLine) highlightLine.setAttributes({
                points: [ {
                    x: pointX,
                    y: max
                }, {
                    x: pointX,
                    y: min
                } ],
                visible: !0,
                pickable: !0
            }); else {
                const highlightLine = createLine({
                    points: [ {
                        x: pointX,
                        y: max
                    }, {
                        x: pointX,
                        y: min
                    } ],
                    lineWidth: null === (_a = line.hover) || void 0 === _a ? void 0 : _a.strokeWidth,
                    stroke: null === (_b = line.hover) || void 0 === _b ? void 0 : _b.stroke
                });
                highlightLine.name = "highlight-line", sparkline.addChild(highlightLine);
            }
            const highlightSymbol = sparkline.getChildByName("highlight-symbol");
            if (highlightSymbol) highlightSymbol.setAttributes({
                x: pointX,
                y: pointY,
                visible: !0,
                pickable: !0
            }); else {
                const highlightSymbol = createSymbol({
                    x: pointX,
                    y: pointY,
                    stroke: symbol.hover.stroke,
                    lineWidth: symbol.hover.strokeWidth,
                    fill: symbol.hover.fill,
                    size: 2 * symbol.hover.size,
                    symbolType: "circle"
                });
                highlightSymbol.name = "highlight-symbol", sparkline.addChild(highlightSymbol);
            }
            break;
        }
    }
    if (table.scenegraph.updateNextFrame(), chartPoint) {
        const eventInfo = {
            col: col,
            row: row,
            field: table.getHeaderField(col, row),
            value: table.getCellValue(col, row),
            dataValue: table.getCellOriginValue(col, row),
            cellHeaderPaths: table.internalProps.layoutMap.getCellHeaderPaths(col, row),
            title: table.getBodyColumnDefine(col, row).title,
            cellRange: table.getCellRelativeRect(col, row),
            sparkline: {
                pointData: chartPoint.pointData
            },
            scaleRatio: table.canvas.getBoundingClientRect().width / table.canvas.offsetWidth
        };
        table.fireListeners(TABLE_EVENT_TYPE.MOUSEOVER_CHART_SYMBOL, eventInfo);
    }
    return !0;
}
//# sourceMappingURL=index.js.map