Add plot style guides back

[MarcSkovMadsen]

Closes #5002

The guides for styling altair, matplotlib, plotly and vega were lost when upgrading to Panel 1.0.

This adds the key material back as markdown files.

Todo

• Get Review
• Philipp should upload and replace assets.
• Build docs and test this will work with pyodide. Can be done after merge.

Assets

Its probably better to download from the links in the markdown files than these.

ECharts Styles

echarts-styles.mp4

Created using

import panel as pn

THEME = "default"

ECHARTS_THEMES = {
    "infographic": "https://fastly.jsdelivr.net/npm/echarts/theme/infographic.js?_v_=20200710_1",
    "macarons": "https://fastly.jsdelivr.net/npm/echarts/theme/macarons.js?_v_=20200710_1",
    "roma": "https://fastly.jsdelivr.net/npm/echarts/theme/roma.js?_v_=20200710_1",
    "shine": "https://fastly.jsdelivr.net/npm/echarts/theme/shine.js?_v_=20200710_1",
    "vintage": "https://fastly.jsdelivr.net/npm/echarts/theme/vintage.js?_v_=20200710_1",
}

pn.pane.ECharts.param.theme.objects = pn.pane.ECharts.param.theme.objects + list(
    ECHARTS_THEMES
)

pn.extension("echarts", js_files=ECHARTS_THEMES)

echart_bar = {
    "title": {"text": "ECharts Example"},
    "tooltip": {},
    "legend": {"data": ["Sales"]},
    "xAxis": {"data": ["shirt", "cardign", "chiffon shirt", "pants", "heels", "socks"]},
    "yAxis": {},
    "series": [{"name": "Sales", "type": "bar", "data": [5, 20, 36, 10, 10, 20]}],
}

plot = pn.pane.ECharts(
    echart_bar,
    height=500,
    sizing_mode="stretch_width",
    theme=THEME,
)
component=pn.Column(plot.param.theme, plot, sizing_mode="stretch_width")
pn.template.FastListTemplate(
    logo="https://panel.holoviz.org/_static/logo_horizontal_dark_theme.png",
    title="ECharts Themes", accent="black",
    main=[component], main_layout=None,
).servable()

[codecov]

Codecov Report

All modified and coverable lines are covered by tests ✅

Comparison is base (e3fdd48) 84.15% compared to head (95669c6) 84.20%.
Report is 11 commits behind head on main.

❗ Current head 95669c6 differs from pull request most recent head e809499. Consider uploading reports for the commit e809499 to get more accurate results

Additional details and impacted files

@@            Coverage Diff             @@
##             main    #5919      +/-   ##
==========================================
+ Coverage   84.15%   84.20%   +0.04%     
==========================================
  Files         291      291              
  Lines       42786    42907     +121     
==========================================
+ Hits        36007    36128     +121     
  Misses       6779     6779              

Flag	Coverage Δ
ui-tests	40.84% <0.00%> (-0.09%)	⬇️
unitexamples-tests	72.50% <100.00%> (+0.07%)	⬆️

Flags with carried forward coverage won't be shown. Click here to find out more.

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

[MarcSkovMadsen]

Please check if this will work when rendered for all the .md files.

I have not been able to find links from docs to reference guides in the existing documentation, so I don't know if this will work.

[philippjfr]

Docs are building now.

[philippjfr]

Issues

• Altair
  • Reference doc link does not work (should drop the .ipynb extension)
  • Plot has zero height (height="container" will not work here unless the container has height)
• ECharts
  • GIF missing
• Matplotlib
  • Plot has no height (scale_height is not appropriate here)
• Vega
  • Plot has zero height (height="container" will not work here unless the container has height)

[MarcSkovMadsen]

Extra Issue

• Logo Files not used on index page for ECharts, Matplotlib and Plotly.

[MarcSkovMadsen]

I'll try to fix the issues I can fix now.

[MarcSkovMadsen]

I can see that the issue with the logos is that when the documentation is built it no longer uses the relative paths to images. It puts them all into an _images folder. I think this could cause lots of issues @philippjfr .

For now I will rename the logo images be appending a -logo to the name.

[MarcSkovMadsen]

I've started a new docs build in https://github.com/holoviz/panel/actions/runs/7009397100

[philippjfr]

I can see that the issue with the logos is that when the documentation is built it no longer uses the relative paths to images. It puts them all into an _images folder. I think this could cause lots of issues @philippjfr .

Indeed, this is default Sphinx behavior I think, will see if we can override that.

[MarcSkovMadsen]

Issues

[x] The logos will need some comenality too

[MarcSkovMadsen]

Restarted docs build. Expect the Echarts missing gif to be only issue outstanding.

[MarcSkovMadsen]

All issues solved except the ECharts gif is missing. Will leave that for you @philippjfr .