Versions Compared

Old Version 3

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)

Line Chart

Link to Figma: tba

Overview

  • The Dynamic Line Chart component displays data as lines on a chart.
  • It is designed to visualize trends over time or relationships between data points.
  • The chart supports multiple data series with customizable styling and configuration.
  • Data can come from various sources, including APIs or mock data for testing.
  • Custom axes, panes, and labels provide context for the information displayed.

...

  • visibilityPolicySetId – Determines whether the chart is displayed based on a policy set. This allows showing the chart only to users with specific permissions. Example: "dashboardViewerPolicy".
  • Figma: tba
  • Live style guide: https://e1-dev.k8s.myapp.de/live-style-guide/other-components/line-chart

Guidelines

Usage

  • Use for continuous trends or sequential categories configured via chartConfiguration (maps the X-axis argument and Y-series).
  • Display multiple metrics in one view; distinguish them by naming each series in chartConfiguration.series[].name and enabling showLegend.
  • Separate signals with different units/scales by defining vertical panes with chartPanesConfiguration.
  • For demos or development, simulate data with useMockData.

...

DoDon’tArticle setting(s)
Label axes with purpose and units (e.g., “Date”, “Sales (USD)”).Leave axes unlabeled or rely on external context.argumentAxisTitle, valueAxisTitle
Turn on the legend for multi-series charts and name each series.Show multiple colored lines without labels or a legend.showLegend, chartConfiguration.series[].name
Separate metrics with different scales into vertical panes.Overlay vastly different ranges on one pane.chartPanesConfiguration, chartConfiguration.series[]
Bind the X argument and Y values explicitly.Depend on implicit or positional fields.chartConfiguration.argumentField, chartConfiguration.series[].valueField
Point to the nested array before binding fields.Bind to parent objects and get an empty chart.chartConfiguration.dataPathExpression
Render only when data is ready.Display an empty frame that looks broken.displayConditions
Use mock data for demos/dev; disable it for production.Ship with mock data enabled.useMockDataParameterize requests to fetch only needed data.Pull entire datasets without constraints.getEntityCollectionHttpRequestParametersMap, dataSourceId
Expose stable test selectors.Select elements by volatile text.dataTestId, id
Clean up on unmount.Leave intervals/listeners running.events.ON_DESTROY

...