Feature Request: Grafana-like Stat Panel Component

[necatibektass]

A new StatPanel component, similar to Grafana’s stat visualization, to display summary data in a visually partitioned grid layout.

Use Case & Motivation:
In enterprise dashboards, especially in monitoring, alerting, or KPI-driven environments, it is critical to quickly visualize numeric/statistical values like totals, percentages, or statuses. We propose a Vue Data UI component that:
• Dynamically renders square (or rectangular) cells for each value in a given dataset.
• Distributes values evenly across the grid, regardless of row count.
• Supports thresholds and coloring, optionally reacting to value ranges (e.g. green for healthy, red for critical).
• Mimics the stat panel of Grafana, but with full customization through Vue slots and props.

Optional Enhancements
• Animations when values change (e.g. smooth transition, highlight flash).
• Custom label slots per value.
• Responsive layout that auto-fits to container width/height.
• Compact/Expanded view modes for embedding in tight panels.

https://grafana.com/docs/grafana/latest/panels-visualizations/visualizations/stat/

Thanks for your great work on Vue Data UI

[graphieros]

Hi @necatibektass

Thanks for the request, this looks interesting.

It seems to me that this type of higher level component can already be built with the current set of components available (VueUiKpi, with VueUiSparkline in a slot, for example, can be a building block for a grid item).

Having that kind of component ready to use is nice, though.

I've been thinking of a section of the docs website (or an entirely separate website) where components like the one you propose could be showcased. For now it's limited to this section of the docs website, and it does feel a bit lost in there.

I'm currently adding final touches to a new world map component, after which I'll have the bandwidth to think about all this.

Cheers, and thanks for the inspiration !

[necatibektass]

Yes, you’re right — using VueUiSparkline allows you to build a grid-like item, but in our case, we often need to display string values instead of just numeric or visual indicators. This is where a stat panel becomes really useful.

For example, when the incoming value is 1, we want to display “No Access”, and when it’s 2, we want to display “Access Granted”, all within a single grid item. While I could technically build this using custom components, integrating such custom logic inside VueUiDashboard has proven to be problematic.

So the ability to render conditional string values cleanly within the dashboard structure is the key challenge I’m facing. A more flexible or natively supported way to handle this would be very helpful.

[graphieros]

@necatibektass

If I understand correctly, the real issue is that it is not currently possible to include custom components inside VueUiDashboard ?

This is an easy fix I can provide for VueUiDashboard:

• allow passing custom components in the dataset, for example:

const dynamicString = ref('Dynamic string content');

const comps = computed(() => [
  {
    id: 1,
    width: 20,
    height: 50,
    left: 44,
    top: 4,
    component: "VueUiGauge",
    props: { config: { userOptions: { show: false } }, dataset: gaugeDataset },
  },
  {
    id: 2,
    width: 20,
    height: 60,
    left: 44,
    top: 50,
    component: markRaw(MyCustomComponent),
    props: { str: dynamicString.value },
  },
]);

This would allow you to include any custom component inside VueUiDashboard. What do you think ?

[necatibektass]

Yes, this seems like a simple and extensible solution.

Being able to pass markRaw(MyCustomComponent) through the dataset would allow us to use custom visualizations or business-specific components inside VueUiDashboard. I’d be happy to test it once the feature is implemented. Thank you for considering it.

[graphieros]

Ok, you can try out v2.8.1 which adds support for custom components in VueUiDashboard.