Navigation

Dashboard Card and Table Visuals

Every dashboard visual is an ApexCharts chart — VisualType runs from Area to Treemap — bound to a dataset through one query of an x column and aggregated series (dashboard data binding). The two visuals a report is most often opened for are missing: the number ("412 responses", "average rating 4.3") and the exact values behind a chart. In Power BI those are the Card — a measure's value as a large callout with its label — and the Table — rows and columns with headers and a totals row, for "reviewing and comparing detailed data and exact values rather than visual representations".

What it adds

VisualType gains Card and Table, listed first in the visual picker since they are the plainest. Neither is an ApexCharts chart, so each renders through its own component while keeping everything else a visual has: its grid layout item, its dataset binding and snapshot on publish, its per-visual refresh, its loading and error states and the row-cap warning.

  • Card — one number, large, with its label under it. Bound, it reads the query's first series (a column and an aggregation — count, sum, average, minimum, maximum) over every row, ignoring the x column, since a card has no category axis; the label defaults to "aggregation of column" and is editable. Unbound, it shows the demo value, as an unbound chart shows demo data. Numbers format through the app's number formatter with the same compact form (12K) Power BI's display units default to.
  • Table — the query's grouped result as a UiDataTable: the x column's values as rows, one column per series, sortable by header, with a totals row that sums a series whose aggregation is count or sum (and leaves an average or extreme blank, since a total of averages is not an average). It is the same aggregation the chart visuals already compute on the client, so a Table beside a Bar over the same binding shows the Bar's exact values.
  • Chart options do not apply. The visual's edit dialog hides the chart settings for these two kinds and shows only the label (Card) or nothing extra (Table); the chart-interaction features (dashboard chart interaction) stay chart-only.
flowchart LR
  BIND["Visual.dataset — reference + query"] --> READ[dataset.readDataset or snapshot]
  READ --> AGG[client aggregation]
  AGG -->|chart types| APEX[ApexCharts]
  AGG -->|Card: first series over all rows| CARD[one number + label]
  AGG -->|Table: grouped by x| TABLE[UiDataTable + totals]

What is deliberately not in it

  • No multi-card, categories, callout images or conditional formatting (the modern Power BI card's layout options). One number per Card; a second number is a second Card on the grid.
  • No matrix (pivot) visual. A Table grouped by one column covers the exact-values need; a pivot is the Sheet's job.
  • No cross-highlighting from a Table row. Linked highlighting belongs to the charts.

Key files

FileRole after the change
apps/web/shared/models/dashboard/data/VisualType.tsgains Card and Table
apps/web/app/components/Dashboard/Visual/Index.vuedispatches the two non-chart kinds to their components
apps/web/app/services/dashboard/VisualTypeItemCategoryDefinitions.tsthe picker's entries, the two plainest first
apps/web/app/services/dashboard/dataset/VisualTypeDatasetShapeMap.tsa shape for each, so computeDatasetVisualPropsData hands them the grouped result
apps/web/app/services/dashboard/chart/VisualTypeChartTypesMap.tsthe two kinds take no chart type
apps/web/app/services/dashboard/demo/VisualTypeDemoDataMap.tsthe demo value and demo rows an unbound Card and Table show
apps/web/app/services/dashboard/demo/VisualTypeDemoIconMap.tsan icon for each, until the live canvas retires the map
apps/web/app/components/Dashboard/Visual/Preview/EditFormDialog.vuehides the chart type and chart settings for the two kinds, shows the Card's label

Sources

Details

Command palette

Keyboard shortcuts