Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Jump to bottom

[Bug] incorrect crosshair display position when axis value is small #2492

Closed
purpose233 opened this issue Mar 28, 2024 · 0 comments
Closed

[Bug] incorrect crosshair display position when axis value is small #2492

purpose233 opened this issue Mar 28, 2024 · 0 comments
Assignees
@zamhown
Labels
bug Something isn't working online biz

Comments

@purpose233
Copy link
Contributor

Version

1.10.2

Link to Minimal Reproduction

null

Steps to Reproduce

// 图表配置
const spec = {
    "type": "common",
    "title": {
        "text": "Account log10(Overkill Rate)-log10(Prevalence Rate)"
    },
    "series": [
        {
            "type": "scatter",
            "xField": "X_value",
            "yField": "Y_value",
            "seriesField": "secondaryLine",
            "shapeField": "dataType",
            "shape": {
                "type": "ordinal",
                "range": [
                    "circle",
                    "star"
                ]
            },
            "point": {
                "style": {
                    "cursor": "pointer",
                    "innerBorder": {
                        "strokeOpacity": 1
                    }
                },
                "state": {
                    "hover_other_series_reverse": {
                        "style": {
                            "opacity": 0.2
                        }
                    },
                    hover_symbol: {
                    },
                    unhover_symbol: {
                    }
                }
            },
            "stack": false
        }
    ],
    "label": {
        "visible": true,
        "syncState": true,
        "style": {
            "fontSize": 12,
            visible: function(datum) {
              if (datum.isLatest) {
                return true
              }
              return false
            }
        },
        state: {
          hover_symbol: {
            fillOpacity: 1,
          },
          unhover_symbol: {
            fillOpacity: 0.3,
          }
        },
        "overlap": {
            "hideOnHit": false,
            "avoidBaseMark": true,
            "strategy": [
                {
                    "type": "position",
                    "position": [
                        "top",
                        "top-right",
                        "top-left",
                        "left",
                        "right",
                        "bottom",
                        "bottom-right",
                        "bottom-left"
                    ]
                },
                {
                    "type": "moveY",
                    "offset": [
                        10,
                        -10,
                        -15,
                        15,
                        -30,
                        30
                    ]
                },
                {
                    "type": "moveX",
                    "offset": [
                        10,
                        -10,
                        -15,
                        15,
                        -30,
                        30
                    ]
                }
            ]
        }
    },
    "data": [
        {
            "id": "data",
            "values": [
                {
                    "week_num": "0",
                    "weekStr": "2024-W03",
                    "isLatest": false,
                    "startDate": "0113",
                    "endDate": "0119",
                    "color": "#562A8E",
                    "X_value": "0.00001",
                    "primaryLine": "Account",
                    "secondaryLine": "Fake Accounts",
                    "xAxesTitle": "Overkill Rate",
                    "yAxesTitle": "Prevalence Rate",
                    "dataType": 1,
                    "Y_value": "8.23",
                    "X_real_value": "0"
                },
                {
                    "week_num": "1",
                    "weekStr": "2024-W04",
                    "isLatest": false,
                    "startDate": "0120",
                    "endDate": "0126",
                    "color": "#562A8E",
                    "X_value": "0.00001",
                    "primaryLine": "Account",
                    "secondaryLine": "Fake Accounts",
                    "xAxesTitle": "Overkill Rate",
                    "yAxesTitle": "Prevalence Rate",
                    "dataType": 1,
                    "Y_value": "8.44",
                    "X_real_value": "0"
                },
                {
                    "week_num": "2",
                    "weekStr": "2024-W05",
                    "isLatest": false,
                    "startDate": "0127",
                    "endDate": "0202",
                    "color": "#562A8E",
                    "Y_value": "8.59",
                    "primaryLine": "Account",
                    "secondaryLine": "Fake Accounts",
                    "xAxesTitle": "Overkill Rate",
                    "yAxesTitle": "Prevalence Rate",
                    "dataType": 1,
                    "X_value": "0.001"
                },
                {
                    "week_num": "3",
                    "weekStr": "2024-W06",
                    "isLatest": false,
                    "startDate": "0203",
                    "endDate": "0209",
                    "color": "#562A8E",
                    "Y_value": "7.14",
                    "primaryLine": "Account",
                    "secondaryLine": "Fake Accounts",
                    "xAxesTitle": "Overkill Rate",
                    "yAxesTitle": "Prevalence Rate",
                    "dataType": 1,
                    "X_value": "0.001"
                },
                {
                    "week_num": "4",
                    "weekStr": "2024-W07",
                    "isLatest": false,
                    "startDate": "0210",
                    "endDate": "0216",
                    "color": "#562A8E",
                    "Y_value": "7.27",
                    "primaryLine": "Account",
                    "secondaryLine": "Fake Accounts",
                    "xAxesTitle": "Overkill Rate",
                    "yAxesTitle": "Prevalence Rate",
                    "dataType": 1,
                    "X_value": "0.00001",
                    "X_real_value": "0"
                },
                {
                    "week_num": "5",
                    "weekStr": "2024-W08",
                    "isLatest": false,
                    "startDate": "0217",
                    "endDate": "0223",
                    "color": "#562A8E",
                    "X_value": "0.00001",
                    "primaryLine": "Account",
                    "secondaryLine": "Fake Accounts",
                    "xAxesTitle": "Overkill Rate",
                    "yAxesTitle": "Prevalence Rate",
                    "dataType": 1,
                    "Y_value": "6.74",
                    "X_real_value": "0"
                },
                {
                    "week_num": "6",
                    "weekStr": "2024-W09",
                    "isLatest": false,
                    "startDate": "0224",
                    "endDate": "0301",
                    "color": "#562A8E",
                    "Y_value": "7.38",
                    "primaryLine": "Account",
                    "secondaryLine": "Fake Accounts",
                    "xAxesTitle": "Overkill Rate",
                    "yAxesTitle": "Prevalence Rate",
                    "dataType": 1,
                    "X_value": "0.00001",
                    "X_real_value": "0"
                },
                {
                    "week_num": "7",
                    "weekStr": "2024-W10",
                    "isLatest": false,
                    "startDate": "0302",
                    "endDate": "0308",
                    "color": "#562A8E",
                    "Y_value": "7.53",
                    "primaryLine": "Account",
                    "secondaryLine": "Fake Accounts",
                    "xAxesTitle": "Overkill Rate",
                    "yAxesTitle": "Prevalence Rate",
                    "dataType": 1,
                    "X_value": "0.00001",
                    "X_real_value": "0"
                },
                {
                    "week_num": "8",
                    "weekStr": "2024-W11",
                    "isLatest": false,
                    "startDate": "0309",
                    "endDate": "0315",
                    "color": "#562A8E",
                    "Y_value": "7.17",
                    "primaryLine": "Account",
                    "secondaryLine": "Fake Accounts",
                    "xAxesTitle": "Overkill Rate",
                    "yAxesTitle": "Prevalence Rate",
                    "dataType": 1,
                    "X_value": "0.00001",
                    "X_real_value": "0"
                },
                {
                    "week_num": "9",
                    "weekStr": "2024-W12",
                    "isLatest": true,
                    "startDate": "0316",
                    "endDate": "0322",
                    "color": "#562A8E",
                    "X_value": "0.00001",
                    "primaryLine": "Account",
                    "secondaryLine": "Fake Accounts",
                    "xAxesTitle": "Overkill Rate",
                    "yAxesTitle": "Prevalence Rate",
                    "dataType": 1,
                    "Y_value": "8.80",
                    "X_real_value": "0"
                },
                {
                    "week_num": "",
                    "weekStr": "",
                    "startDate": "",
                    "endDate": "",
                    "isLatest": false,
                    "X_value": "0.01",
                    "Y_value": "7.00",
                    "X_real_value": "0.01",
                    "Y_real_value": "7.00",
                    "primaryLine": "Account",
                    "secondaryLine": "Fake Accounts",
                    "color": "#562A8E",
                    "xAxesTitle": "Overkill Rate",
                    "yAxesTitle": "Prevalence Rate",
                    "dataType": 2
                },
                {
                    "week_num": "0",
                    "weekStr": "2024-W03",
                    "isLatest": false,
                    "startDate": "0113",
                    "endDate": "0119",
                    "color": "#0F7450",
                    "Y_value": "0.40",
                    "primaryLine": "Account",
                    "secondaryLine": "Targeted Abuse",
                    "xAxesTitle": "Overkill Rate",
                    "yAxesTitle": "Prevalence Rate",
                    "dataType": 1,
                    "X_value": "0.002"
                },
                {
                    "week_num": "1",
                    "weekStr": "2024-W04",
                    "isLatest": false,
                    "startDate": "0120",
                    "endDate": "0126",
                    "color": "#0F7450",
                    "Y_value": "0.52",
                    "primaryLine": "Account",
                    "secondaryLine": "Targeted Abuse",
                    "xAxesTitle": "Overkill Rate",
                    "yAxesTitle": "Prevalence Rate",
                    "dataType": 1,
                    "X_value": "0.003"
                },
                {
                    "week_num": "2",
                    "weekStr": "2024-W05",
                    "isLatest": false,
                    "startDate": "0127",
                    "endDate": "0202",
                    "color": "#0F7450",
                    "Y_value": "0.69",
                    "primaryLine": "Account",
                    "secondaryLine": "Targeted Abuse",
                    "xAxesTitle": "Overkill Rate",
                    "yAxesTitle": "Prevalence Rate",
                    "dataType": 1,
                    "X_value": "0.003"
                },
                {
                    "week_num": "3",
                    "weekStr": "2024-W06",
                    "isLatest": false,
                    "startDate": "0203",
                    "endDate": "0209",
                    "color": "#0F7450",
                    "X_value": "0.002",
                    "primaryLine": "Account",
                    "secondaryLine": "Targeted Abuse",
                    "xAxesTitle": "Overkill Rate",
                    "yAxesTitle": "Prevalence Rate",
                    "dataType": 1,
                    "Y_value": "0.49"
                },
                {
                    "week_num": "4",
                    "weekStr": "2024-W07",
                    "isLatest": false,
                    "startDate": "0210",
                    "endDate": "0216",
                    "color": "#0F7450",
                    "X_value": "0.002",
                    "primaryLine": "Account",
                    "secondaryLine": "Targeted Abuse",
                    "xAxesTitle": "Overkill Rate",
                    "yAxesTitle": "Prevalence Rate",
                    "dataType": 1,
                    "Y_value": "0.50"
                },
                {
                    "week_num": "5",
                    "weekStr": "2024-W08",
                    "isLatest": false,
                    "startDate": "0217",
                    "endDate": "0223",
                    "color": "#0F7450",
                    "Y_value": "0.54",
                    "primaryLine": "Account",
                    "secondaryLine": "Targeted Abuse",
                    "xAxesTitle": "Overkill Rate",
                    "yAxesTitle": "Prevalence Rate",
                    "dataType": 1,
                    "X_value": "0.003"
                },
                {
                    "week_num": "6",
                    "weekStr": "2024-W09",
                    "isLatest": false,
                    "startDate": "0224",
                    "endDate": "0301",
                    "color": "#0F7450",
                    "X_value": "0.004",
                    "primaryLine": "Account",
                    "secondaryLine": "Targeted Abuse",
                    "xAxesTitle": "Overkill Rate",
                    "yAxesTitle": "Prevalence Rate",
                    "dataType": 1,
                    "Y_value": "0.50"
                },
                {
                    "week_num": "7",
                    "weekStr": "2024-W10",
                    "isLatest": false,
                    "startDate": "0302",
                    "endDate": "0308",
                    "color": "#0F7450",
                    "Y_value": "0.47",
                    "primaryLine": "Account",
                    "secondaryLine": "Targeted Abuse",
                    "xAxesTitle": "Overkill Rate",
                    "yAxesTitle": "Prevalence Rate",
                    "dataType": 1,
                    "X_value": "0.006"
                },
                {
                    "week_num": "8",
                    "weekStr": "2024-W11",
                    "isLatest": false,
                    "startDate": "0309",
                    "endDate": "0315",
                    "color": "#0F7450",
                    "X_value": "0.006",
                    "primaryLine": "Account",
                    "secondaryLine": "Targeted Abuse",
                    "xAxesTitle": "Overkill Rate",
                    "yAxesTitle": "Prevalence Rate",
                    "dataType": 1,
                    "Y_value": "0.55"
                },
                {
                    "week_num": "9",
                    "weekStr": "2024-W12",
                    "isLatest": true,
                    "startDate": "0316",
                    "endDate": "0322",
                    "color": "#0F7450",
                    "Y_value": "0.55",
                    "primaryLine": "Account",
                    "secondaryLine": "Targeted Abuse",
                    "xAxesTitle": "Overkill Rate",
                    "yAxesTitle": "Prevalence Rate",
                    "dataType": 1,
                    "X_value": "0.004"
                },
                {
                    "week_num": "",
                    "weekStr": "",
                    "startDate": "",
                    "endDate": "",
                    "isLatest": false,
                    "X_value": "0.01",
                    "Y_value": "1.00",
                    "X_real_value": "0.01",
                    "Y_real_value": "1.00",
                    "primaryLine": "Account",
                    "secondaryLine": "Targeted Abuse",
                    "color": "#0F7450",
                    "xAxesTitle": "Overkill Rate",
                    "yAxesTitle": "Prevalence Rate",
                    "dataType": 2
                }
            ]
        }
    ],
    "axes": [
        {
            "orient": "left",
            "type": "log",
            "base": 10,
            "range": {
                "min": 0.27999999999999997,
                "max": 12.32
            },
            "title": {
                "visible": true,
                "text": "Prevalence Rate"
            },
            "domainLine": {
                "visible": true
            },
            "label": {},
            "tick": {
                "visible": true,
                "forceTickCount": 5,
                "tickMode": "d3"
            }
        },
        {
            "orient": "bottom",
            "type": "log",
            "base": 10,
            "range": {
                "min": 0.000007,
                "max": 0.013999999999999999
            },
            "title": {
                "visible": true,
                "text": "Overkill Rate"
            },
            "domainLine": {
                "visible": true
            },
            "label": {},
            "grid": {
                "visible": true
            },
            "tick": {
                "visible": true,
                "forceTickCount": 5,
                "tickMode": "d3"
            }
        }
    ],
    "legends": [
        {
            "visible": true,
            "orient": "bottom",
            "item": {
                "shape": {}
            }
        }
    ],
    "tooltip": {
        "visible": true,
        "activeType": "mark",
        "mark": {
            "visible": true,
            "title": {}
        }
    },
    "crosshair": {
        "yField": {
            "visible": true,
            "line": {
                "visible": true,
                "type": "line"
            },
            "label": {
                "visible": true
            }
        },
        "xField": {
            "visible": true,
            "line": {
                "visible": true,
                "type": "line"
            },
            "label": {
                "visible": true
            }
        }
    }
}

const vchart = new VChart(spec, { dom: CONTAINER_ID });
vchart.renderSync();

vchart.on('pointerover', { level: 'mark' }, ({ datum, mark }) => {
  console.log(datum, mark);
  if (mark?.name === "point" && datum) {
    const xValue = datum.X_value;
    const yValue = datum.Y_value;
    const seriesValue = datum.secondaryLine;
    vchart.updateState({
      hover_symbol: {
        filter: datum => datum.X_value === xValue && datum.Y_value === yValue && datum.secondaryLine === seriesValue
      },
      unhover_symbol: {
        filter: datum => !(datum.X_value === xValue && datum.Y_value === yValue && datum.secondaryLine === seriesValue)
      }
    });
  }
});

vchart.on('pointerout', { level: 'mark' }, ({ datum, mark }) => {
  if (mark?.name === "point" && datum) {
    vchart.updateState({
      hover_symbol: {
        filter: () => false
      },
      unhover_symbol: {
        filter: () => false
      }
    });
  }
});

// Just for the convenience of console debugging, DO NOT COPY!
window.vchart = vchart;

Current Behavior

20240328165321_rec_

Expected Behavior

correct crosshair position

Environment

- OS:
- Browser:
- Framework:

Any additional comments?

No response
@purpose233 purpose233 added the bug Something isn't working label Mar 28, 2024
@kkxxkk2019 kkxxkk2019 added the online biz label Mar 29, 2024
@zamhown zamhown mentioned this issue Apr 1, 2024
Merged
20 tasks
@zamhown zamhown closed this as completed Apr 3, 2024
@github-actions github-actions bot mentioned this issue Apr 3, 2024
Merged
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Assignees

@zamhown zamhown

Labels
bug Something isn't working online biz
Projects
None yet
Milestone
No milestone
Development

No branches or pull requests
3 participants
@purpose233 @zamhown @kkxxkk2019