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.

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

[Bug] style config does not work on brush. #976

Closed
da730 opened this issue Sep 18, 2023 · 0 comments · Fixed by #1051
Closed

[Bug] style config does not work on brush. #976

da730 opened this issue Sep 18, 2023 · 0 comments · Fixed by #1051
Assignees
Labels
bp bug Something isn't working
Milestone

Comments

@da730
Copy link
Contributor

da730 commented Sep 18, 2023

Version

1.3.1

Link to Minimal Reproduction

null

Steps to Reproduce

const spec = {
    "type": "bar",
    "xField": [
        "230918113555014",
        "10001"
    ],
    "yField": [
        "10002"
    ],
    "direction": "vertical",
    "sortDataByAxis": true,
    "seriesField": "20001",
    "padding": 0,
    "labelLayout": "region",
    "data": [
        {
            "id": "data",
            "values": [
                {
                    "10001": "销售额",
                    "10002": "1303124.5089645386",
                    "10003": "230918113555017",
                    "20001": "销售额",
                    "230918113555014": "西南",
                    "230918113555017": "1303124.5089645386"
                },
                {
                    "10001": "折扣",
                    "10002": "134.2000020891428",
                    "10003": "230918113555020",
                    "20001": "折扣",
                    "230918113555014": "西南",
                    "230918113555020": "134.2000020891428"
                },
                {
                    "10001": "销售额",
                    "10002": "4137415.0951108932",
                    "10003": "230918113555017",
                    "20001": "销售额",
                    "230918113555014": "中南",
                    "230918113555017": "4137415.0951108932"
                },
                {
                    "10001": "折扣",
                    "10002": "232.15000347048044",
                    "10003": "230918113555020",
                    "20001": "折扣",
                    "230918113555014": "中南",
                    "230918113555020": "232.15000347048044"
                },
                {
                    "10001": "销售额",
                    "10002": "2447301.0141382217",
                    "10003": "230918113555017",
                    "20001": "销售额",
                    "230918113555014": "华北",
                    "230918113555017": "2447301.0141382217"
                },
                {
                    "10001": "折扣",
                    "10002": "74.10000109672546",
                    "10003": "230918113555020",
                    "20001": "折扣",
                    "230918113555014": "华北",
                    "230918113555020": "74.10000109672546"
                },
                {
                    "10001": "销售额",
                    "10002": "4684506.442247391",
                    "10003": "230918113555017",
                    "20001": "销售额",
                    "230918113555014": "华东",
                    "230918113555017": "4684506.442247391"
                },
                {
                    "10001": "折扣",
                    "10002": "331.10000520944595",
                    "10003": "230918113555020",
                    "20001": "折扣",
                    "230918113555014": "华东",
                    "230918113555020": "331.10000520944595"
                },
                {
                    "10001": "销售额",
                    "10002": "815039.5979347229",
                    "10003": "230918113555017",
                    "20001": "销售额",
                    "230918113555014": "西北",
                    "230918113555017": "815039.5979347229"
                },
                {
                    "10001": "折扣",
                    "10002": "53.40000084042549",
                    "10003": "230918113555020",
                    "20001": "折扣",
                    "230918113555014": "西北",
                    "230918113555020": "53.40000084042549"
                },
                {
                    "10001": "销售额",
                    "10002": "2681567.4745378494",
                    "10003": "230918113555017",
                    "20001": "销售额",
                    "230918113555014": "地区-dongbei",
                    "230918113555017": "2681567.4745378494"
                },
                {
                    "10001": "折扣",
                    "10002": "234.75000359117985",
                    "10003": "230918113555020",
                    "20001": "折扣",
                    "230918113555014": "地区-dongbei",
                    "230918113555020": "234.75000359117985"
                }
            ],
            "fields": {
                "10001": {
                    "alias": "指标名称 "
                },
                "10002": {
                    "alias": "指标值 "
                },
                "20001": {
                    "alias": "图例项 ",
                    "domain": [
                        "销售额",
                        "折扣"
                    ],
                    "sortIndex": 0,
                    "lockStatisticsByDomain": true
                },
                "230918113555014": {
                    "alias": "地区",
                    "domain": [
                        "地区-dongbei",
                        "华北",
                        "华东",
                        "西北",
                        "西南",
                        "中南"
                    ],
                    "sortIndex": 0,
                    "lockStatisticsByDomain": true
                },
                "230918113555017": {
                    "alias": "销售额"
                },
                "230918113555020": {
                    "alias": "折扣"
                }
            }
        }
    ],
    "axes": [
        {
            "type": "band",
            "tick": {
                "visible": false
            },
            "grid": {
                "visible": false,
                "style": {
                    "zIndex": 150,
                    "stroke": "#DADCDD",
                    "lineWidth": 1,
                    "lineDash": [
                        4,
                        2
                    ]
                }
            },
            "orient": "bottom",
            "visible": true,
            "domainLine": {
                "visible": true,
                "style": {
                    "lineWidth": 1,
                    "stroke": "#989999"
                }
            },
            "title": {
                "visible": false,
                "space": 5,
                "text": "地区",
                "style": {
                    "fontSize": 12,
                    "fill": "#363839",
                    "fontWeight": "normal"
                }
            },
            "sampling": false,
            "zIndex": 200,
            "label": {
                "visible": true,
                "space": 4,
                "style": {
                    "fontSize": 12,
                    "fill": "#6F6F6F",
                    "angle": 0,
                    "fontWeight": "normal",
                    "direction": "horizontal"
                },
                "autoHide": true,
                "autoHideMethod": "greedy",
                "flush": true
            },
            "hover": true,
            "background": {
                "visible": false,
                "state": {
                    "hover": {
                        "fillOpacity": 0.08,
                        "fill": "#141414"
                    }
                }
            },
            "paddingInner": [
                0.15,
                0.1
            ],
            "paddingOuter": [
                0.075,
                0.075
            ]
        },
        {
            "type": "linear",
            "tick": {
                "visible": false,
                "style": {
                    "stroke": "rgba(255, 255, 255, 0)"
                }
            },
            "niceType": "accurateFirst",
            "zIndex": 200,
            "grid": {
                "visible": true,
                "style": {
                    "zIndex": 150,
                    "stroke": "#DADCDD",
                    "lineWidth": 1,
                    "lineDash": [
                        4,
                        2
                    ]
                }
            },
            "orient": "left",
            "visible": true,
            "domainLine": {
                "visible": true,
                "style": {
                    "lineWidth": 1,
                    "stroke": "rgba(255, 255, 255, 0)"
                }
            },
            "title": {
                "visible": false,
                "text": "销售额",
                "space": 8,
                "style": {
                    "fontSize": 12,
                    "fill": "#363839",
                    "fontWeight": "normal"
                }
            },
            "sampling": false,
            "label": {
                "visible": true,
                "space": 6,
                "flush": true,
                "padding": 0,
                "style": {
                    "fontSize": 12,
                    "maxLineWidth": 174,
                    "fill": "#6F6F6F",
                    "angle": 0,
                    "fontWeight": "normal",
                    "dy": -1,
                    "direction": "horizontal"
                },
                "autoHide": true,
                "autoHideMethod": "greedy"
            },
            "hover": true,
            "background": {
                "visible": true,
                "state": {
                    "hover": {
                        "fillOpacity": 0.08,
                        "fill": "#141414"
                    }
                }
            },
            "zero": true,
            "nice": true
        }
    ],
    "color": {
        "field": "20001",
        "type": "ordinal",
        "range": [
            "#2E62F1",
            "#4DC36A"
        ],
        "specified": {},
        "domain": [
            "销售额",
            "折扣"
        ]
    },
    "legends": [
        {
            "type": "discrete",
            "id": "legend",
            "orient": "right",
            "position": "start",
            "layoutType": "normal",
            "visible": true,
            "maxCol": 1,
            "title": {
                "textStyle": {
                    "fontSize": 12,
                    "fill": "#6F6F6F"
                }
            },
            "layoutLevel": 60,
            "item": {
                "focus": true,
                "focusIconStyle": {
                    "size": 14
                },
                "maxWidth": 361,
                "spaceRow": 0,
                "spaceCol": 0,
                "padding": {
                    "top": 1,
                    "bottom": 2,
                    "left": 3,
                    "right": 2
                },
                "background": {
                    "visible": false,
                    "style": {
                        "fillOpacity": 0.001
                    }
                },
                "label": {
                    "style": {
                        "fontSize": 12,
                        "fill": "#6F6F6F"
                    }
                },
                "shape": {
                    "style": {
                        "lineWidth": 0,
                        "symbolType": "square"
                    }
                }
            },
            "pager": {
                "layout": "horizontal",
                "padding": {
                    "left": -18
                },
                "textStyle": {},
                "space": 0,
                "handler": {
                    "preShape": "triangleLeft",
                    "nextShape": "triangleRight",
                    "style": {},
                    "state": {
                        "disable": {}
                    }
                }
            },
            "padding": {
                "top": 0,
                "bottom": 0,
                "left": 16,
                "right": 0
            }
        }
    ],
    "label": {
        "visible": false,
        "overlap": {
            "hideOnHit": true,
            "avoidBaseMark": false,
            "strategy": [
                {
                    "type": "moveY",
                    "offset": [
                        -20,
                        -19,
                        -18,
                        -17,
                        -16,
                        -15,
                        -14,
                        -13,
                        -12,
                        -11,
                        -10,
                        -9,
                        -8,
                        -7,
                        -6,
                        -5,
                        -4,
                        -3,
                        -2,
                        -1,
                        0,
                        1,
                        2,
                        3,
                        4,
                        5,
                        6,
                        7,
                        8,
                        9,
                        10,
                        11,
                        12,
                        13,
                        14,
                        15,
                        16,
                        17,
                        18,
                        19,
                        20
                    ]
                },
                {
                    "type": "moveX",
                    "offset": [
                        -20,
                        -19,
                        -18,
                        -17,
                        -16,
                        -15,
                        -14,
                        -13,
                        -12,
                        -11,
                        -10,
                        -9,
                        -8,
                        -7,
                        -6,
                        -5,
                        -4,
                        -3,
                        -2,
                        -1,
                        0,
                        1,
                        2,
                        3,
                        4,
                        5,
                        6,
                        7,
                        8,
                        9,
                        10,
                        11,
                        12,
                        13,
                        14,
                        15,
                        16,
                        17,
                        18,
                        19,
                        20
                    ]
                }
            ],
            "clampForce": true
        },
        "style": {
            "fontSize": 12,
            "fontWeight": "normal",
            "zIndex": 100,
            "fill": null,
            "strokeOpacity": 1
        },
        "position": "inside",
        "smartInvert": {
            "fillStrategy": "invertBase",
            "strokeStrategy": "similarBase"
        }
    },
    "tooltip": {
        "handler": {}
    },
    "hover": {
        "enable": true
    },
    "select": {
        "enable": true
    },
    "bar": {
        "state": {
            "hover": {
                "cursor": "pointer",
                "fillOpacity": 0.8,
                "stroke": "#58595B",
                "lineWidth": 1,
                "zIndex": 500
            },
            "selected": {
                "cursor": "pointer",
                "fillOpacity": 1,
                "stroke": "#58595B",
                "lineWidth": 1
            },
            "selected_reverse": {
                "fillOpacity": 0.3,
                "strokeWidth": 0.3
            }
        }
    },
    "region": [
        {
            "clip": true
        }
    ],
    "background": "rgba(255, 255, 255, 0)",
    "animation": false,
    "brush": {
      visible:true,
        "inBrush": {
            "style": {
              fill:'red',
                "fillOpacity": 1,
                "stroke": "#58595B",
                "lineWidth": 1
            }
        },
        "outOfBrush": {
            "style": {
                "fillOpacity": 0.3,
                "strokeWidth": 0.3
            }
        }
    },
    "hash": "09e54e5c59898110e815cd4e41e27f9a"
}

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

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

Current Behavior

image
style configuration does not work when the bars are inside the brush rectangle.

Expected Behavior

style configuration can be applyed to marks correctly when brush the marks.

Environment

- OS:
- Browser:
- Framework:

Any additional comments?

No response

@da730 da730 added the bug Something isn't working label Sep 18, 2023
@da730 da730 added the bp label Sep 18, 2023
@da730 da730 added this to the v1.4.0 milestone Sep 18, 2023
@kkxxkk2019 kkxxkk2019 assigned skie1997 and unassigned kkxxkk2019 Sep 18, 2023
@kkxxkk2019 kkxxkk2019 modified the milestones: v1.4.0, v1.4.1 Sep 21, 2023
@skie1997 skie1997 mentioned this issue Sep 22, 2023
20 tasks
@kkxxkk2019 kkxxkk2019 modified the milestones: v1.4.1, v1.4.0 Sep 22, 2023
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
bp bug Something isn't working
Projects
None yet
Development

Successfully merging a pull request may close this issue.

3 participants