Versions Compared

Old Version 2

changes.mady.by.user GE-DevDoc-Bot

Saved on

compared with

New Version Current

changes.mady.by.user GE-DevDoc-Bot

Saved on

Key

  • This line was added.
  • This line was removed.
  • Formatting was changed.

(this page was created automatically. In case of formatting issues, please visit the official Wiki Page)

Histogram Chart

Link to Figma: tba

Overview

  • The Dynamic Histogram Chart displays data distribution across categories or bins.
  • It helps show frequency distributions, density, and data patterns.
  • The component works with different data sources and supports mock data.
  • It offers configuration options for bars, axes, legends, and filtering.
  • Common use cases include age distribution, transaction sizes, time analysis, and data quality checks.

...

  • visibilityPolicySetId – Determines the visibility of the component based on user permissions and policy sets. For example, setting to "marketingTeamPolicy" restricts the histogram to users with marketing team privileges.
  • Figma: tba
  • Live style guide: https://e1-dev.k8s.myapp.de/live-style-guide/other-components/histogram

Guidelines

Usage

  • Use when you need to visualize a distribution across bins/categories backed by a simple data shape; provide items with category and value and label axes with argumentAxisTitle and valueAxisTitle.
  • Keep the authoring surface understandable via displayName.
  • Hide the chart when prerequisites aren’t met using displayConditions.
  • Show or hide the legend as needed with showLegend.

Sizing & Layout

  • Control density with barWidth and separation with barPadding (0–1).
  • Add outer whitespace using paddingClass.
  • Skip null/empty buckets with ignoreEmptyPoints.

States & Feedback

  • Clarify or declutter by toggling showLegend.
  • Reduce noise in sparse datasets with ignoreEmptyPoints.

Data-Driven / Conditional Behavior

  • Gate rendering based on context with displayConditions.
  • Improve visual stability by enabling ignoreEmptyPoints.

Visibility & Authorization

  • Restrict visibility with visibilityPolicySetId.
  • Combine permissions and context via visibilityPolicySetId + displayConditions.

Content & Localization

  • Write short, descriptive axis titles with argumentAxisTitle and valueAxisTitle.
  • Use a clear author-facing name via displayName.

Dos & Don’ts

DoDon’tArticle setting(s)
Provide concise axis titles to establish meaning and scale.Leave axes unlabeled or ambiguous.argumentAxisTitle, valueAxisTitle
Adjust barWidth/barPadding so bars are distinct without excessive gaps.Use extremes that cause overlapping bars or excessive whitespace.barWidth, barPadding
Omit null buckets to avoid noise in sparse datasets.Plot zero-height bars for missing data.ignoreEmptyPoints
Show the legend only when the series label adds value.Always show a legend that repeats obvious information.showLegend
Drive the chart from a defined source and nested path if needed.Assume data is top-level or hardcode sample values for production.dataSourceId, dataPathExpression
Add HTTP params at init for deterministic requests.Build ad-hoc query strings on click without lifecycle control.getEntityCollectionHttpRequestParametersMap, ON_INIT
Hide the chart when preconditions aren’t satisfied.Render an empty frame waiting for context.displayConditions
Name the instance clearly for authors and tests.Use default names that hinder maintenance.displayName, dataTestId, id
Use mock data only for design/playback.Ship with mock data enabled in production.useMockData
Release subscriptions/timers on teardown.Leave listeners running after navigation.ON_DESTROY

...