KLineChart icon indicating copy to clipboard operation
KLineChart copied to clipboard

[Feature] Auto Shape Points and Mouse Pointer onEnter

Open olablt opened this issue 3 years ago • 1 comments

Feature Description

Not sure if it is implemented. Checked the source code but can not figure this out.

I am creating Long / Short Shapes where I place one point p0 on the chart and other points p1, p2, p3 are placed automatically (totalStep is 2) and can be edited later:

image

Everything is working good but the problem is when I want to restore the shape from JSON object

chart.createShape({
    "name":"Long",
    "points":[
        {"timestamp":1660244400000,"value":23479.64023722628,"dataIndex":715},
        {"value":23479.64023722628,"dataIndex":735},
        {"value":23279.64023722628,"dataIndex":715},
        {"value":23679.64023722628,"dataIndex":715}
    ],
    onMouseEnter: function ({ id, event }) { 
        $("canvas").css("cursor", "pointer");
    },
    onMouseLeave: function ({ id, event }) { 
        $("canvas").css("cursor", "default");
    },
    onRemove: function ({ id }) {
        $("canvas").css("cursor", "default");
    },
}); 

To Do

shape Long :

chart.addShapeTemplate({
    name: 'Long',
    // totalStep: 5,
    totalStep: 2,
    checkEventCoordinateOnShape: ({ type, dataSource, eventCoordinate }) => {
        return checkCoordinateInRect(dataSource[0], dataSource[2], eventCoordinate)
    },
    createShapeDataSource: ({ step, mode, points, coordinates, viewport, precision, xAxis, yAxis }) => {
        let greenPolygons = []
        let redPolygons = []
        let lines = []
        let texts = []
        if (points.length == 1) {
            // 3
            // 0 1
            // 2
            p0 = points[0]
            points.push({value: p0.value, dataIndex: p0.dataIndex+20}) // p1
            points.push({value: p0.value-100, dataIndex: p0.dataIndex}) // p2
            points.push({value: p0.value+200, dataIndex: p0.dataIndex}) // p3

            // coordinates.push({x:xAxis.convertToPixel(points[1].dataIndex), y:yAxis.convertToPixel(points[1].value)})
            // coordinates.push({x:xAxis.convertToPixel(points[2].dataIndex), y:yAxis.convertToPixel(points[2].value)})
            // coordinates.push({x:xAxis.convertToPixel(points[3].dataIndex), y:yAxis.convertToPixel(points[3].value)})
        }

        if (coordinates.length > 1) {

            greenPolygons.push([
                { x: coordinates[0].x, y: coordinates[3].y},
                { x: coordinates[1].x, y: coordinates[3].y},
                { x: coordinates[1].x, y: coordinates[0].y},
                { x: coordinates[0].x, y: coordinates[0].y}, 
            ]);
            redPolygons.push([
                { x: coordinates[0].x, y: coordinates[0].y}, 
                { x: coordinates[1].x, y: coordinates[0].y},
                { x: coordinates[1].x, y: coordinates[2].y},
                { x: coordinates[0].x, y: coordinates[2].y},
            ]);

            // entry line
            lines.push([{ x: coordinates[0].x, y: coordinates[0].y }, { x: coordinates[1].x, y: coordinates[1].y }])

        }
        return [
            {
                type: 'line',
                isDraw: true,// Whether you want to draw, you can default, draw by default
                isCheck: false,// Whether to check whether it is on the graph, it can be defaulted, not checked by default
                dataSource: lines
            }, 
            {
                type: 'text',
                isDraw: true,
                isCheck: false,
                dataSource: texts
            }, 
            {
                type: 'polygon',
                isDraw: true,
                isCheck: true,
                dataSource: greenPolygons,
                styles: { style: 'fill', fill: { color: 'rgba(8, 153, 129, 0.2)' } },
            }, {
                type: 'polygon',
                isDraw: true,
                isCheck: true,
                dataSource: redPolygons,
                styles: { style: 'fill', fill: { color: 'rgba(242, 54, 69, 0.2)' } },
            }

        ]

    }
});

my questions are:

  1. is this possible
  2. is my solution right for mouse cursor change onEnter

olablt avatar Aug 12 '22 11:08 olablt

doesn't work?

liihuu avatar Sep 08 '22 17:09 liihuu