feat: Replace graph fields with graph series for more customization

[mtrezza]

Pull Request

• Report security issues confidentially.
• Any contribution is under this license.

Summary by CodeRabbit

• New Features

  • Multi-series charts with per-series options (title, fields, aggregation, chart type, color, styles) and calculated-value items
  • Add/remove series and calculated-value editors; color presets + custom HEX
  • Line stroke-width override in graph settings; dropdown auto-scroll; custom inline styles for text inputs

• Breaking Changes

  • Chart configs now use a series-based model instead of a single value field; saved graph configs must be updated

• Tests

  • Graph utilities tests updated for series-based inputs

_{✏️ Tip: You can customize this high-level summary in your review settings.}

[parse-github-assistant]

🚀 Thanks for opening this pull request!

[parseplatformorg]

✅ Snyk checks have passed. No issues have been found so far.

Status	Scanner	Critical	High	Medium	Low	Total (0)
✅	Open Source Security	0	0	0	0	0 issues

💻 Catch issues earlier using the plugins for VS Code, JetBrains IDEs, Visual Studio, and Eclipse.

[coderabbitai]

📝 Walkthrough

Walkthrough

Replaces the single valueColumn chart model with a multi-series model (per-series fields, styling, and calculated values), adds strokeWidthOverride for line charts, updates data processing/validation, and makes small UI tweaks in Dropdown (menuRef + auto-scroll) and TextInput (style prop).

Changes

Cohort / File(s)	Summary
Dropdown Component src/components/Dropdown/Dropdown.react.js	Added menuRef field and componentDidUpdate to auto-scroll the selected item when opening; attach ref to menu container; mark option buttons with data-selected; guard against null children.
TextInput Component src/components/TextInput/TextInput.react.js	Added style prop (PropTypes.object) and apply/merge inline styles for single-line and multiline inputs.
Graph Dialog UI (Browser) src/dashboard/Data/Browser/GraphDialog.react.js	Replaced single valueColumn with multi-series; added state/UI/API to add/remove/update/toggle series and calculated values; color presets and hex validation; per-series options (title, fields, aggregation, chartType, color, lineStyle, strokeWidth, barStyle, useSecondaryYAxis); updated confirm payload shape.
Custom Dashboard Config & Element src/dashboard/Data/CustomDashboard/elements/GraphConfigDialog.react.js, src/dashboard/Data/CustomDashboard/elements/GraphElement.react.js	Added strokeWidthOverride UI/state (STROKE_WIDTHS) and persist/pass strokeWidthOverride in graphConfig; show option only when a line chart/series exists.
Graph Rendering Panel src/components/GraphPanel/GraphPanel.react.js	Switched to series input (replacing valueColumn); removed aggregationType/secondaryYAxisType props; added strokeWidthOverride handling and apply to line datasets; derive effective dataset type from `dataset.type
Graph Data Utilities & Tests src/lib/GraphDataUtils.js, src/lib/tests/GraphDataUtils.test.js	Removed groupAndAggregate; rewrote processPieData and processBarLineData to accept series arrays (fields, titles, styles); added getSeriesLabel helper; per‑series aggregation & styling; updated validateGraphConfig to expect series; adapted tests to new signatures and shapes.

Sequence Diagram(s)

mermaid
sequenceDiagram
participant User as User
participant Dialog as GraphDialog.react
participant Element as GraphElement.react
participant Panel as GraphPanel.react
participant Utils as GraphDataUtils.js
participant Chart as ChartRenderer
User->>Dialog: configure series / calculated values / strokeWidthOverride
Dialog->>Element: save graphConfig (series, calculatedValues, strokeWidthOverride)
Element->>Panel: render(graphConfig)
Panel->>Utils: process*Data(data, graphConfig.series, graphConfig.calculatedValues, ...)
Utils-->>Panel: datasets, labels, options
Panel->>Chart: render(datasets, labels, options including strokeWidthOverride)
Chart-->>User: visualized chart

Estimated code review effort

🎯 5 (Critical) | ⏱️ ~120 minutes

Possibly related PRs

• feat: Add graph panel for data visualization #3110: Modifies the same graphing subsystem (GraphPanel, GraphDialog, GraphDataUtils) — overlaps series/config changes.
• fix: Data browser graph requires value field even when calculated value is defined #3127: Alters graph validation and processing around value/series and calculated values — closely related to the series migration.
• feat: Add formula-based calculated value to data browser graph #3129: Extends formula-based calculated values and evaluation used by GraphDialog and GraphDataUtils.

🚥 Pre-merge checks | ✅ 2 | ❌ 1

❌ Failed checks (1 warning)

Check name	Status	Explanation	Resolution
Description check	⚠️ Warning	The PR description is incomplete. It includes the template boilerplate but is missing the Issue link, Approach section explaining the changes, and Tasks checklist—all required sections from the repository template.	Complete the PR description by filling in: (1) the Issue link under 'Closes:', (2) a detailed Approach section explaining the series-based changes, and (3) the Tasks checklist indicating whether tests and documentation updates were included.

✅ Passed checks (2 passed)

Check name	Status	Explanation
Title check	✅ Passed	The title accurately describes the main change: replacing graph fields with graph series for enhanced customization, which is the primary structural change across multiple files.
Docstring Coverage	✅ Passed	Docstring coverage is 100.00% which is sufficient. The required threshold is 80.00%.

_{✏️ Tip: You can configure your own custom pre-merge checks in the settings.}

✨ Finishing touches

• 📝 Generate docstrings

🧪 Generate unit tests (beta)

• Create PR with unit tests
• Post copyable unit tests in a comment

---

Thanks for using CodeRabbit! It's free for OSS, and your support helps us grow. If you like it, consider giving us a shout-out.

❤️ Share

• X
• Mastodon
• Reddit
• LinkedIn

_{Comment @coderabbitai help to get the list of available commands and usage tips.}

[coderabbitai]

Actionable comments posted: 3

🤖 Fix all issues with AI agents

In `@src/components/TextInput/TextInput.react.js`:
- Around line 67-68: The multiline branch in the TextInput component is ignoring
this.props.style: update the textarea rendering path (where a <textarea> is
returned) to merge style the same way as the <input> path (e.g., style={{
height: this.props.height || 80, ...this.props.style }}), ensuring the
placeholder and other props remain unchanged; modify the render method/JSX where
the textarea is created so both single-line (input) and multiline (textarea) use
the same merged style logic.

In `@src/dashboard/Data/CustomDashboard/elements/GraphConfigDialog.react.js`:
- Around line 69-75: The linter flags single-line if statements in the
isLineChart useMemo; update the conditional branches inside isLineChart (the
checks on selectedGraph and selectedGraph.chartType) to use braces for their
bodies: add { ... } around the return false and return true statements and
ensure the function still computes hasMixedLine from (selectedGraph.series ||
[]) and (selectedGraph.calculatedValues || []). This affects the isLineChart
useMemo closure and its internal if blocks referencing selectedGraph.

In `@src/lib/GraphDataUtils.js`:
- Around line 408-415: Change mutable declarations to const where values are not
reassigned (e.g., replace let aggregatedData = {} with const aggregatedData =
{}) and add braces for single-line conditional bodies inside the series loops to
satisfy the brace rule; specifically update the seriesArray.forEach callback(s)
that declare const fields = s.fields || [] and replace lone "if (fields.length
=== 0) return;" (and the other similar single-line if/else blocks in the same
loops) with a braced form (e.g., if (fields.length === 0) { return; }) so
prefer-const and brace-style lint rules are satisfied for the blocks that
reference aggregatedData, seriesArray.forEach, s/idx, and fields.

🧹 Nitpick comments (1)

src/dashboard/Data/Browser/GraphDialog.react.js (1)

55-61: Consider centralizing STROKE_WIDTHS to avoid drift.

This constant is duplicated in GraphConfigDialog.react.js; extracting it to a shared module will keep the options in sync.

[coderabbitai]

Actionable comments posted: 3

🤖 Fix all issues with AI agents

In `@src/dashboard/Data/CustomDashboard/elements/GraphConfigDialog.react.js`:
- Around line 39-40: Normalize strokeWidthOverride to a numeric type everywhere:
initialize the state using Number(initialConfig?.strokeWidthOverride) (or
null/undefined -> '' as desired), convert the Dropdown/change handler to
setStrokeWidthOverride(Number(value)) instead of raw string, and before saving
the config (e.g., in the component's save/submit handler such as
handleSave/onSave) coerce strokeWidthOverride to a number
(Number(strokeWidthOverride) or parseInt) so the saved config and Dropdown use
the same numeric type and borderWidth is numeric; apply this to the
initialization, change handlers, and save logic for strokeWidthOverride
referenced in this file.

In `@src/lib/GraphDataUtils.js`:
- Around line 1005-1007: The code currently treats strokeWidth truthily (e.g.,
if (s.strokeWidth) and using || to default), which drops valid 0 values; update
all such checks in GraphDataUtils.js (including where seriesStrokeWidthMap is
set and the blocks around the referenced ranges) to use explicit null/undefined
checks or the nullish coalescing operator so zero is preserved — e.g., replace
if (s.strokeWidth) with if (s.strokeWidth !== undefined && s.strokeWidth !==
null) and replace usages of value || defaultValue with value ?? defaultValue (or
equivalent !== undefined checks) for any variables or map assignments handling
strokeWidth.
- Around line 445-450: The group label generation can collide with
calculated-value labels when groupByColumn is used with exactly one series and
one calculated value: update the labelKey logic in the block that iterates
Object.keys(groups) so it accounts for presence of calculated values (e.g.,
check a calculatedValues/aggregates array or the computedValues count) and use a
more specific label when necessary — for example change the condition to
something like "if seriesArray.length > 1 || hasCalculatedValues then
`${seriesLabel} (${groupKey})` else groupKey" and use that same disambiguation
approach in the other similar block (the one around the second occurrence you
noted) so aggregatedData keys (and calls to aggregateValues(groups[groupKey],
s.aggregationType || 'count')) do not overwrite calculated-value labels.

🧹 Nitpick comments (1)

src/dashboard/Data/CustomDashboard/elements/GraphConfigDialog.react.js (1)

17-22: Consider reusing a shared STROKE_WIDTHS constant to avoid drift.
The same list exists in src/dashboard/Data/Browser/GraphDialog.react.js; extracting to a shared constants module would prevent mismatches as options evolve.

[parseplatformorg]

🎉 This change has been released in version 8.3.0-alpha.34

[coderabbitai]

Actionable comments posted: 1

🤖 Fix all issues with AI agents

In `@src/lib/GraphDataUtils.js`:
- Around line 689-713: Labels for grouped pies include a " (Group)" suffix so
exact lookups in seriesStyleMap and calcValueColorMap miss configured colors;
update the color resolution in the labels.map block (where colors is built) to
fall back to the base label by stripping the group suffix before lookups:
compute baseLabel = label.split(' (')[0] (or similar) and if
seriesStyleMap.get(label) is falsy try seriesStyleMap.get(baseLabel), likewise
check calcValueColorMap.has(baseLabel) / get(baseLabel) before falling back to
defaultColors[index]; keep existing generateColors, seriesStyleMap and
calcValueColorMap logic but add this base-label fallback for both series and
calculated-value checks.

[coderabbitai]

⚠️ Potential issue | 🟠 Major

Custom colors are dropped for grouped pie/doughnut labels.
When groupByColumn is set, labels become SeriesLabel (Group) or CalcName (Group), but the color lookup only checks exact label keys, so configured series/calc colors are ignored. This breaks customization for grouped pies.

🛠️ Suggested fix (base-label fallback)

-  const colors = labels.map((label, index) => {
-    // Check series style map first
-    const seriesStyle = seriesStyleMap.get(label);
-    if (seriesStyle && seriesStyle.color) {
-      return seriesStyle.color;
-    }
-    // Check calculated value color
-    if (calcValueColorMap.has(label)) {
-      return calcValueColorMap.get(label);
-    }
-    return defaultColors[index];
-  });
+  const colors = labels.map((label, index) => {
+    const baseLabel =
+      label.includes(' (') && label.endsWith(')')
+        ? label.slice(0, label.lastIndexOf(' ('))
+        : label;
+    // Check series style map first
+    const seriesStyle = seriesStyleMap.get(label) || seriesStyleMap.get(baseLabel);
+    if (seriesStyle && seriesStyle.color) {
+      return seriesStyle.color;
+    }
+    // Check calculated value color
+    if (calcValueColorMap.has(label)) {
+      return calcValueColorMap.get(label);
+    }
+    if (calcValueColorMap.has(baseLabel)) {
+      return calcValueColorMap.get(baseLabel);
+    }
+    return defaultColors[index];
+  });

🤖 Prompt for AI Agents

In `@src/lib/GraphDataUtils.js` around lines 689 - 713, Labels for grouped pies
include a " (Group)" suffix so exact lookups in seriesStyleMap and
calcValueColorMap miss configured colors; update the color resolution in the
labels.map block (where colors is built) to fall back to the base label by
stripping the group suffix before lookups: compute baseLabel = label.split('
(')[0] (or similar) and if seriesStyleMap.get(label) is falsy try
seriesStyleMap.get(baseLabel), likewise check calcValueColorMap.has(baseLabel) /
get(baseLabel) before falling back to defaultColors[index]; keep existing
generateColors, seriesStyleMap and calcValueColorMap logic but add this
base-label fallback for both series and calculated-value checks.