CngxChartPanel

ComponentPrimaryOnPushNo encapsulationv0.1.0WCAG AA

projects/ui/chart-panel/chart-panel.component.ts

Import#

import { CngxChartPanel } from '@cngx/ui/chart-panel'

Description#

Dashboard housing for a chart: a titled, footer-capable region that frames whatever cngx-chart or preset the consumer projects into it.

What it deliberately does not do. cngx-chart already owns the data-level async envelope - its own [state], its skeleton / empty / error slots, its SR data table. The panel never duplicates that machine. Reproducing it here would put two managers on one state (Pillar 1) and turn the panel into a God-component (Pillar 3). The chart stays the authority on what the body shows; the panel only frames it.

What the panel does own is the chrome a bare chart cannot express: a title that names the region for assistive tech, a subtitle, a header action cluster, and a footer. role="group" plus aria-labelledby pointing at the projected title means a screen reader announces "Revenue by quarter, group" instead of dropping the user into an unlabelled SVG (Pillar 2).

Panel-level busy marks the header, never the group. An aria-busy on the region would hold back the projected chart's own live announcements and tell AT that a perfectly stable chart is updating - the same boundary violation in the a11y layer that duplicating its view switch would be in the state layer. A hidden status region (outside the busy header) announces the configured ariaLabels.busy string while the panel-level operation runs.

<cngx-chart-panel>
  <h3 cngxChartPanelTitle>Revenue by quarter</h3>
  <span cngxChartPanelSubtitle>EUR, net</span>
  <button cngxChartPanelActions type="button">Refresh</button>

  <cngx-chart [data]="series" [state]="revenue">
    <svg:g cngxLine [data]="series"></svg:g>
  </cngx-chart>

  <small cngxChartPanelFooter>Source: finance warehouse</small>
</cngx-chart-panel>

https://cngxjs.github.io/cngx/examples/#/ui/chart-panel/basic/titled-panel-with-legend https://cngxjs.github.io/cngx/examples/#/ui/chart-panel/async/panel-chrome-vs-chart-state https://cngxjs.github.io/cngx/examples/#/ui/chart-panel/slots/actions-and-footer

Metadata#

Selector: cngx-chart-panel
Change detection: ChangeDetectionStrategy.OnPush
Encapsulation: ViewEncapsulation.None
Style URLs: ./chart-panel.component.css
Implements: CngxChartPanelRegistry
Imports: CngxLiveRegion

Host#

Class: cngx-chart-panel
Static attributes: rolegroup
[attr.aria-labelledby]labelledBy()
[attr.data-legend]legendPosition()
Bound classes: cngx-chart-panel--busy ← panelBusy

Providers#

CNGX_CHART_PANEL: useExisting CngxChartPanel

Relationships

Depends on2

CngxLiveRegionAttribute directive

CNGX_CHART_PANELservice

Index#

Inputs#

legendPosition#CngxChartPanelLegendPosition

input()

Where the projected cngx-chart-legend sits. 'none' hides it. Matches the bare cngx-chart-legend tag; a legend wrapped in an element of your own lands in the body slot instead.

default this.config.legendPosition ?? 'bottom',

state# CngxAsyncState | undefined, CngxAsyncState | '' | undefined

Panel-level async envelope - the one driving the header chrome, not the chart's data. Bind the chart's own [state] to the chart; bind a range-switch or export operation here. Optional per the bridge-input rule.

default undefined, { transform: (v) => (typeof v === 'string' ? undefined : v) }

Methods#

registerTitle#void

registerTitle(id: string)

{@inheritDoc CngxChartPanelRegistry.registerTitle}

@paramidstring

unregisterTitle#void

unregisterTitle(id: string)

{@inheritDoc CngxChartPanelRegistry.unregisterTitle}