feat: Add customizable styles for line and bar series in data browser graph

[mtrezza]

New Pull Request Checklist

• I am not disclosing a vulnerability.
• I am creating this PR in reference to an issue.

Summary by CodeRabbit

Release Notes

New Features

• Enhanced chart styling: apply custom line styles (solid, dashed, or dotted) and bar patterns (outlined or striped) to better differentiate and emphasize individual datasets in your charts
• Secondary Y-axis control: assign an independent chart type (bar or line) to secondary axis datasets, enabling mixed chart types within a single graph for better data comparison

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

[parse-github-assistant]

🚀 Thanks for opening this pull request! We appreciate your effort in improving the project. Please let us know once your pull request is ready for review.

[coderabbitai]

Warning

Rate limit exceeded

@mtrezza has exceeded the limit for the number of commits that can be reviewed per hour. Please wait 1 minutes and 47 seconds before requesting another review.

⌛ How to resolve this issue?

After the wait time has elapsed, a review can be triggered using the @coderabbitai review command as a PR comment. Alternatively, push new commits to this PR.

We recommend that you space out your commits to avoid hitting the rate limit.

🚦 How do rate limits work?

CodeRabbit enforces hourly rate limits for each developer per organization.

Our paid plans have higher rate limits than the trial, open-source and free plans. In all cases, we re-allow further reviews after a brief timeout.

Please see our FAQ for further information.

📥 Commits

Reviewing files that changed from the base of the PR and between 08ff1d6 and 964770a.

📒 Files selected for processing (2)

• src/components/GraphPanel/GraphPanel.react.js
• src/dashboard/Data/Browser/GraphDialog.react.js

📝 Walkthrough

Walkthrough

The PR adds support for secondary Y-axis chart type configuration and introduces per-dataset styling options (line and bar styles) across graph configuration components. Styling properties are translated into Chart.js-compatible attributes, and styling information is propagated through the data processing pipeline.

Changes

Cohort / File(s)	Summary
GraphPanel dataset styling translation src/components/GraphPanel/GraphPanel.react.js	Added handling for secondaryYAxisType config property. Implements styling translations: lineStyle (solid/dashed/dotted) → Chart.js borderDash values; barStyle (outlined/striped) → transparent/lighter fills with border adjustments. Conditionally applies secondary axis type to datasets on y1 axis.
GraphDialog configuration UI src/dashboard/Data/Browser/GraphDialog.react.js	Introduced LINE_STYLES and BAR_STYLES module-level constants. Added secondaryYAxisType state field. Rendered conditional UI controls: Line Style dropdown for line charts, Bar Style dropdown for bar charts on calculated value rows, and Secondary Y-Axis Chart Type field (Bar/Line/Same as chart type) when applicable.
GraphDataUtils calculated value styling src/lib/GraphDataUtils.js	Created calcValueLineStyleMap and calcValueBarStyleMap to track styling per calculated value. Extended dataset generation to apply lineStyle and barStyle properties when present in calculated value definitions.

Sequence Diagram(s)

sequenceDiagram
    actor User
    participant GraphDialog as GraphDialog UI
    participant GraphPanel as GraphPanel
    participant DataUtils as GraphDataUtils
    participant ChartJS as Chart.js

    User->>GraphDialog: Configure chart type, secondary axis type,<br/>line/bar styles per dataset
    GraphDialog->>GraphDialog: Store secondaryYAxisType,<br/>lineStyle, barStyle in state
    GraphDialog->>GraphPanel: Pass graphConfig with new properties
    GraphPanel->>DataUtils: Process calculated values with<br/>styling metadata
    DataUtils->>DataUtils: Create styleMap entries for<br/>lineStyle/barStyle
    DataUtils->>GraphPanel: Return datasets with styling props
    GraphPanel->>GraphPanel: Translate lineStyle → borderDash,<br/>barStyle → fill/border patterns
    GraphPanel->>GraphPanel: Apply secondaryYAxisType to y1 datasets
    GraphPanel->>ChartJS: Render with styled datasets
    ChartJS->>User: Display chart with secondary axis<br/>and applied line/bar styles

Loading

Estimated code review effort

🎯 4 (Complex) | ⏱️ ~70 minutes

🚥 Pre-merge checks | ✅ 2 | ❌ 1

❌ Failed checks (1 warning)

Check name	Status	Explanation	Resolution
Description check	⚠️ Warning	The description is incomplete. While the contributor checklist is filled out, critical sections like 'Issue Description' and 'Approach' are missing, and the required TODOs section is not addressed.	Complete the 'Issue Description' section with issue reference (Closes: #XXXX), describe the implementation approach, and document any TODOs before merging.

✅ Passed checks (2 passed)

Check name	Status	Explanation
Title check	✅ Passed	The title accurately summarizes the main change: adding customizable styles for line and bar series in the data browser graph.
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 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.}

[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]

Actionable comments posted: 2

🤖 Fix all issues with AI agents

In `@src/components/GraphPanel/GraphPanel.react.js`:
- Around line 159-227: The dataset styling uses global
chartType/secondaryYAxisType and can misapply styles when a dataset has its own
type; compute the dataset's effective type and base decisions on that. In the
mappings that set isLineDataset/isBarDataset (the result.datasets.map blocks
that currently use chartType and (dataset.yAxisID === 'y1' &&
secondaryYAxisType)), determine effectiveType = dataset.type || (dataset.yAxisID
=== 'y1' ? secondaryYAxisType : chartType) and then use effectiveType === 'line'
or effectiveType === 'bar' when applying borderDash/barStyle logic so
dataset.type overrides global defaults.

In `@src/dashboard/Data/Browser/GraphDialog.react.js`:
- Around line 563-600: Compute the effective series type for each series (e.g.,
const effectiveType = calc.useSecondaryYAxis ? this.state.secondaryYAxisType :
this.state.chartType) and use it to gate the style controls instead of the
current mixed conditionals; replace occurrences like (this.state.chartType ===
'line' || (calc.useSecondaryYAxis && this.state.secondaryYAxisType === 'line'))
and the similar bar check with (effectiveType === 'line') and (effectiveType ===
'bar') respectively so only the relevant Dropdown (LINE_STYLES or BAR_STYLES) is
rendered for the series in render (where calc, this.state.chartType,
this.state.secondaryYAxisType, updateCalculatedValue, LINE_STYLES and BAR_STYLES
are referenced).

[parseplatformorg]

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