8000 enh(echarts): Support custom ticklabel formatter by hoxbro · Pull Request #7940 · holoviz/panel · GitHub
[go: up one dir, main page]
More Web Proxy on the site http://driver.im/
Skip to content

enh(echarts): Support custom ticklabel formatter #7940

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
Draft
wants to merge 2 commits into
base: main
Choose a base branch
from
Draft

enh(echarts): Support custom ticklabel formatter #7940

wants to merge 2 commits into from

Conversation

hoxbro
Copy link
Member
@hoxbro hoxbro commented May 22, 2025

Resolves #7936

This could be generalized to a custom model. Currently, this is hardcoded to this one instance.

image

Details 
import panel as pn
pn.extension("echarts")


code_js = """
(value) => {
   if (value === -180) {
     return '';
   }
   return value + '';
}
"""

w1 = pn.indicators.Gauge(
    name="Roll",
    value=0,
    start_angle=-90,
    end_angle=270,
    bounds=(-180, 180),
    format="{value} Degs",
    colors=[(0.25, "red"), (0.75, "green"), (1, "red")],
    custom_opts={
        "splitNumber": 12,
        "axisLabel": {"formatter": code_js},
    },
)

code_js = """
(value) => {
   if (value === 360) {
     return '';
   }
   return value + '';
}
"""
w2 = pn.indicators.Gauge(
    name="Heading",
    value=0,
    start_angle=90,
    end_angle=-270,
    bounds=(0, 360),
    format="{value} Degs",
    custom_opts={
        "splitNumber": 12,
        "labelLayout": {"hideOverlap": True},
        "axisLabel": {"formatter": code_js},
    },
)


pn.Row(w1, w2).servable()

@codecov Codecov
Copy link
codecov bot commented May 22, 2025 •
edited
Loading

Codecov Report

All modified and coverable lines are covered by tests ✅

Project coverage is 86.09%. Comparing base (dec3707) to head (5f1be8e).

Additional details and impacted files 
@@            Coverage Diff             @@
##             main    #7940      +/-   ##
==========================================
- Coverage   87.12%   86.09%   -1.03%     
==========================================
  Files         346      346              
  Lines       53225    53225              
==========================================
- Hits        46372    45826     -546     
- Misses       6853     7399     +546

☔ View full report in Codecov by Sentry.
📢 Have feedback on the report? Share it here.

🚀 New features to boost your workflow:
  • ❄️ Test Analytics: Detect flaky tests, report on failures, and find test suite problems.
  • 📦 JS Bundle Analysis: Save yourself from yourself by tracking and limiting bundle sizes in JS merges.
8000

MarcSkovMadsen
MarcSkovMadsen reviewed May 25, 2025
View reviewed changes
panel/models/echarts.ts
@@ -89,6 +89,11 @@ export class EChartsView extends HTMLBoxView {
if ((window as any).echarts == null) {
return
}
const series = this.model.data.series[0]
Copy link
Collaborator

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Documentation should be added :-)

MarcSkovMadsen
MarcSkovMadsen reviewed May 25, 2025
View reviewed changes
panel/models/echarts.ts
@@ -89,6 +89,11 @@ export class EChartsView extends HTMLBoxView {
if ((window as any).echarts == null) {
return
}
const series = this.model.data.series[0]
if (typeof series.axisLabel.formatter === "string") {
Copy link
Collaborator
@MarcSkovMadsen MarcSkovMadsen May 25, 2025 •
edited
Loading

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Its a general problem with our echarts implementation that we cannot use a js function. See #2634.

Would be nice with a general solution.

Copy link
Collaborator

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

See pyecharts might even support/ work with python functions.

https://github.com/pyecharts/pyecharts-javascripthon

Copy link
Collaborator

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

PyEcharts provides JSCode utility class for supporting js functions.

https://github.com/pyecharts/pyecharts/blob/5228492426e7f7bd6d701af8ae1b130d5c14145c/pyecharts/commons/utils.py#L6

Copy link
Member Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Its a general problem with our echarts implementation that we cannot use a js function

I will go even further, as each of these escape hatches with static configurations has this problem, another example is tabulator.

So I agree we should have a general solution for this. I need to look into how this can be done, as it needs to be done much earlier than here, likely with a custom model.

This was mainly a POC I pushed (and still a draft) to check if I could do it for this requested instance.

Copy link
Member

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

The obvious solution would be to build on bokeh's CustomJS support.

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Reviewers

@philippjfr philippjfr philippjfr left review comments

@MarcSkovMadsen MarcSkovMadsen MarcSkovMadsen left review comments

At least 1 approving review is required to merge this pull request.

Assignees
No one assigned
Labels
None yet
Projects
None yet
Milestone
No milestone
Development

Successfully merging this pull request may close these issues.

Overlapping end ticks on full circle panel gauges
3 participants
@hoxbro @philippjfr @MarcSkovMadsen
0