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

Box Plot Chart

Overview

[NO DATA AVAILABLE]

Specs

[NO DATA AVAILABLE]

Guidelines

[NO DATA AVAILABLE]

Accessibility

• The Dynamic Box Plot Chart visualizes statistical data with box plot diagrams.
• It lets users analyze distributions, outliers, and summary statistics.
• It supports both mock and real data sources.
• It is customizable in behavior and visuals, including a custom tooltip template.
• It can render child dynamic elements such as overlays or annotations.

Image Added

Specs

Tokens

Structure

(Configured in General Properties)

• elements - contains child dynamic elements to be rendered within the chart component. This allows for extensibility, such as adding overlays or annotations.
• displayName - Sets the display name of the component shown in the structure panel. For example, “Monthly Sales Box Plot” allows for easy identification of the chart’s purpose in the component structure.

Datasource

(Configured in Data Source Properties)

• chartConfiguration - configures the box plot chart’s settings, such as axis, series, and constant lines. This property is required and should match the expected configuration model.
  Example:

  {
    "dataPathExpression": "seriesData",
    "constantLinesExpression": "constantLines",
    "constantLines": [
      { "label": { "text": "Median" }, "value": 50 }
    ]
  }

• useMockData - determines whether the chart displays mock data or fetches real data from a data source.
• dataSourceId - specifies the ID of the data source from which the chart fetches its data. This should match a configured data source in your system.
• getEntityCollectionHttpRequestParametersMap - configures HTTP request parameters for fetching data from the data source. This allows mapping of query, path, or body parameters as needed by the backend API.
• The chart expects an array of box plot series data, each with fields for name, high, low, median, q1, and q3.
  Example data:

  [
    {
      "name": "Q1",
      "high": 100,
      "low": 20,
      "median": 60,
      "q1": 40,
      "q3": 80
    },
    {
      "name": "Q2",
      "high": 120,
      "low": 30,
      "median": 70,
      "q1": 50,
      "q3": 90
    }
  ]

Styling

(Configured in Visual Properties)

• customTooltipTemplate - Enables a custom tooltip template for the chart. When set to true, you can provide a custom Angular component to display additional information on hover.

(Configured in Layout)

• paddingClass - Configures spacing around the form using CSS classes. For example, “p-4” adds medium padding on all sides of the form container.

Actions

(Configured in Event Actions)

• events - Configures the events that the component can trigger. Supported events include:
• ON_INIT - Triggered when the chart is initialized.
• ON_DESTROY - Triggered when the chart is destroyed.
  Example:

{
"ON_INIT": [{ "action": "log", "params": { "message": "Chart initialized" } }],
"ON_DESTROY": [{ "action": "cleanup" }]
}

Tests

(Configured in Testing hooks)

• id - Specifies a unique identifier for the component.
• dataTestId - Sets the testing hook ID for automated testing. For example, setting to "submit-order-btn" allows test scripts to reliably locate and interact with this button during automated testing.

Authorization

(Configured in Authorization)

• visibilityPolicySetId - Determines the visibility of the component based on specified policy sets.

Visibility

(Configured in Visibility)

• displayConditions - Defines conditions for displaying the component.

Links

• Figma: tba
• Live style guide: https://e1-dev.k8s.myapp.de/live-style-guide/other-components/box-plot

Guidelines

Usage

• Use the chart to visualize distribution summaries (min/low, Q1, median, Q3, high) when your data conforms to the expected shap.
• Add reference lines with labels (e.g., targets, medians) using chartConfiguration.constantLines[].label.text.
• Render contextual overlays/annotations inside the chart area by adding child dynamic elements.

Sizing & Layout

• Apply spacing with paddingClass.
• Name the instance clearly for authors using displayName (structure-panel only).
• Apply additional colors sparingly, distinct from brand/primary action colors. Aim for strong contrast as indicated in the theme guidance.

Tooltips

• Enable a custom tooltip with customTooltipTemplate for concise, supplemental details (e.g., exact quartile values); keep critical context visible in-plot (e.g., via constantLines).
• Keep tooltip content short and driven by the same data path to avoid mismatches.

Visibility & Authorization

• Gate visibility with visibilityPolicySetId for restricted data.
• Control runtime show/hide rules with displayConditions.

Content & Localization

• Surface user-facing copy inside the chart using elements; localize those elements per their own capabilities.
• If using a custom tooltip, localize any strings within that template; enable via customTooltipTemplate.

Dos & Don’ts

Accessibility

• Provide textual labels for reference lines to avoid color-only meaning (chartConfiguration.constantLines[].label.text).
• Offer supplemental numeric details on hover via a custom tooltip (customTooltipTemplate).
• When data is absent, show a concise, explanatory overlay within the chart (elements).
• Expose stable handles for audits and automated checks (dataTestId, id).
• Prevent focus/attention flicker by delaying render until inputs are ready (displayConditions).

...