Allow for as many segments as needed

[vuillaut]

This PR allows as many segments as desired in the radar.

The number of segments in determined in the config.json. Then the angles and display is automatically calculated to fit these segments in the radar.

The segment descriptions have been moved to a regular grid below the radar. This allows for more flexibility in their number while keeping a nice-looking radar and avoiding display nightmares.
The segment titles have been added around the circle for clarity.

The demo here is tested with 18 segments:

Fixes #2

[Copilot]

Pull Request Overview

This PR enhances the radar component to support a dynamic number of segments, renders segment titles around the circle, and relocates segment details into a responsive grid layout.

• Added midAngle metadata and augment segment data in the build script
• Introduced SVG-based segment labels via renderSegmentLabels
• Refactored CSS to use grid layout for labels and updated configuration for up to 18 segments

Reviewed Changes

Copilot reviewed 22 out of 22 changed files in this pull request and generated 3 comments.

Show a summary per file

File	Description
src/lib/types.ts	Added optional midAngle property to Segment type
src/components/Tags/Tags.module.css	Adjusted margins for tag container
src/components/Radar/Radar.tsx	Inserted labels container below the chart
src/components/Radar/Radar.module.css	Expanded padding and defined .labels grid
src/components/Radar/Label.module.css	Removed absolute positioning for label elements
src/components/Radar/Chart.tsx	Implemented renderSegmentLabels to draw titles
scripts/buildData.ts	Extended segment limit, computed angles, and output
data/config.json	Populated a full list of up to 18 segments

Comments suppressed due to low confidence (3)

src/components/Radar/Chart.tsx:172

• There are no unit tests covering renderSegmentLabels; consider adding tests to verify correct angle calculations and SVG anchor assignments.

  const renderSegmentLabels = () => {

src/lib/types.ts:47

• Add a brief comment explaining how midAngle is used (e.g., for label positioning) to aid future maintainers.

  midAngle?: number;

scripts/buildData.ts:23

• The name field duplicates title and isn’t used downstream; removing it would simplify the mapping.

  name: s.title,

[Copilot]

Consider removing or making the hard-coded maximum (18) configurable so new segment counts don’t require code changes.

[vuillaut]

Note to myself: the flags have disappeared, needs to be fixed

• New in this version
• Recently changed
• Unchanged

EDIT: it disappeared from the official v5. I'll come back to it once it's fixed.