StatsPlotCard PR

I contributed a StatsPlotCard PR to Panel. See https://github.com/holoviz/panel/pull/1895

The StatsPlotCard enables the user to display a Dashboard KPI Card with

  • Title: The name or a short title
  • Value: Primary Value to display. For example an absolute value.
  • Value2: A secondary value. For example a percentage change.
  • Plot: A plot. One of “line”, “step”, “area”, "bar

The card can be layout out as

  • a column (text and plot on top of each other) or
  • a row (text and plot after each other)

The card enables performant streaming.
The text section is responsive and resizes on window resize.

4 Likes

Thanks Marc, this will come handy in my company :clap:

2 Likes

Thanks @hyamanieu

As I write in the PR I basically see 3 types of stats card primitives

  • StatsTextCard: Value and Text
  • StatsPlotCard: Value and Plot (like above)
  • StatsProgressCard: Value and Progress indicator

They can then be arranged as a column or row

I have not fully figured out yet if this is really true and also how they should look so feel free to throw in some pictures or description of stats cards that would be nice to have in Panel.

I am also thinking wether the StatsCards are what is needed or if its more easy to use primitives for streaming like the stackline plots in the example above.

@nghenzi2019 and @ea42gh are also working on streaming or indicators so check out their posts as well

1 Like

What do you mean by “if this is true”?
I’m not really an ace at front end designing, but I can see a usage for the one shown above. It’s only lacking units on the plot, but I can see the difficulty is to show enough information without cluttering.
Units could be indicated outside of the Card if several cards are there (e.g. indicating that each bar represents an hour), like a legend. Or the purpose is to show a trend, but there is always the question “where is the zero?” (something journalists use a lot to make sensational minimal changes).

I like the Echarts, however I failed at using them last time (I believe I posted or commented an issue).

I

  • Added green/ red triangles to indicate positive/ negative change
  • Implemented the row layout.
1 Like

nice work ! I do not know if it is possible to use gradient colors in the fill color of the corresponding plots.

1 Like

Hi @nghenzi2019. Could you say a little bit more about that comment. What is it that you would like to have?

It is only a detail, but it would be nice to define a gradient of color like in this image

maybe it is possible, but I only do not know how.

1 Like