Create PBCRenderer.js component for Individuals and MR charts together

[ClaudiaGivan]

No description provided.

[Copilot]

Pull Request Overview

This PR introduces a new PBCRenderer component to render paired individuals (control) and moving range charts, along with related styling and defaults updates.

• Added PBCRenderer to orchestrate control and moving range charts in one component
• Switched default timeScale from linear to logarithmic in both renderers
• Updated tooltip styles (background and metric colors) and adjusted base renderer dimensions

Reviewed Changes

Copilot reviewed 6 out of 6 changed files in this pull request and generated 1 comment.

Show a summary per file

File	Description
src/index.js	Imported and exported the new PBCRenderer
src/graphs/tooltipStyles.module.css	Changed tooltip background and metric color values
src/graphs/pbc/PBCRenderer.js	Added new PBCRenderer class to render PBC and MR charts together
src/graphs/moving-range/MovingRangeRenderer.js	Updated default timeScale from linear to logarithmic
src/graphs/control-chart/ControlRenderer.js	Updated default timeScale from linear to logarithmic
src/graphs/Renderer.js	Adjusted height and focusHeight constants for layout

Comments suppressed due to low confidence (4)

src/graphs/pbc/PBCRenderer.js:11

• [nitpick] Inconsistent casing: default chartName is lowercase 'pbc' while chartType is uppercase 'PBC'. Consider aligning casing conventions for clarity.

    this.chartType = 'PBC';

src/graphs/moving-range/MovingRangeRenderer.js:6

• Default timeScale was changed from 'linear' to 'logarithmic'. Ensure existing tests cover both scales and verify that downstream behavior remains correct.

  timeScale = 'logarithmic';

src/graphs/control-chart/ControlRenderer.js:6

• Default timeScale was updated from 'linear' to 'logarithmic'. Add or update tests to validate chart rendering with the new default scale.

  timeScale = 'logarithmic';

src/graphs/tooltipStyles.module.css:47

• Mismatch between the color value 'yellow' and comment 'orange'. Update the comment to match the actual color or revert to the original hex code for clarity.

  color: yellow; /* orange */