Is it possible to use the panel trend indicator (pn.indicators.Trend) without the plot at the bottom? I would like something similar to the number indicator (pn.indicators.Number) but with the added information of whether the metric is up or down from the last date.
Is there also any way to format the number (e.g. with commas rather than scientific notation for large numbers) in the trend indicator?
Ideally I would get something looking somewhat like this
I can’t find anything on these questions in the documentation so I figured I’d ask here. I suppose my other option would be to do the calculation myself and create a 2nd number indicator to display the information on whether the metric is up or down.
I don’t believe those features are supported. If you would like them supported please add a feature request.
You can build your own indicator cards relatively easy using chat gpt.
I gave ChatGPT4 the question:
Hi. A user of HoloViz Panel ask how to create an indicator or kpi card. On the top a title string should be displayed. Then a number with a larger font size than the title. The number should use , as thousand seperator and not display decimals. The on the third line and up or down symbol should be shown. Up would be a green triangle and down a red triangle. Finally on the same line a percentage change should be shown. The sign of the percentage change determines which up or down symbol is shown. How would a python function taking the title, value, percentage_change and generating the html look?
I got a working answer very close to
import panel as pn
pn.extension()
def kpi_card(title, value, percentage_change, styles=None):
# Format the value with commas and no decimals
formatted_value = f"{value:,.0f}"
# Determine the symbol and color based on the percentage change
if percentage_change > 0:
symbol = "▲" # Triangle pointing up
color = "green"
else:
symbol = "▼" # Triangle pointing down
color = "red"
# Format the percentage change as a string with a sign
formatted_percentage = f"{percentage_change:+.2f}%"
# Construct the HTML
html = f"""
<div style='text-align: center;'>
<h2>{title}</h2>
<h1 style='font-size: 2em;'>{formatted_value}</h1>
<span style='color: {color}; font-size: 1.5em;'>
{symbol} {formatted_percentage}
</span>
</div>
"""
return pn.pane.HTML(html, width=200, height=150, styles=styles)
# Example usage:
kpi_widget = kpi_card("Sales This Month", 123456, -5.25, styles={"border": "1px solid black"})
kpi_widget.servable()
You can iterate on the answer with chat gpt to improve the styling etc.
That’s really cool - I didn’t realise we could define our own indicator cards, and that’s a great tip to use ChatGPT to help with at least getting the initial code.
