Skip to content

Refactor visualization layout to single-column design#2

Merged
benbel merged 1 commit intomainfrom
claude/clean-chart-display-KqgpE
Jan 24, 2026
Merged

Refactor visualization layout to single-column design#2
benbel merged 1 commit intomainfrom
claude/clean-chart-display-KqgpE

Conversation

@benbel
Copy link
Copy Markdown
Owner

@benbel benbel commented Jan 24, 2026

Summary

This PR significantly refactors the visualization layout from a multi-column grid to a single-column design, removing header/footer sections and simplifying the overall UI while improving interactivity.

Key Changes

Layout & Structure

  • Changed charts grid from multi-column responsive layout to single-column flex layout
  • Removed header section with title and subtitle
  • Removed footer with metadata and links
  • Removed statistics cards display
  • Changed container max-width from 1400px to 100%

Chart Rendering

  • Increased chart width from 280px to 800px to utilize full container width
  • Reduced chart height from 180px to 120px for more compact display
  • Significantly reduced margins (from 10-40px to 5px) for better space efficiency
  • Removed chart subtitles showing modification count
  • Simplified chart header to only show title

Interactivity Improvements

  • Made controls bar sticky (position: sticky, top: 0, z-index: 100)
  • Added tooltip pinning functionality - users can click points to pin tooltips
  • Changed tooltip pointer-events from none to auto for better interaction
  • Added click handler to close pinned tooltips when clicking elsewhere
  • Improved point hover states with visual feedback

Scale Management

  • Renamed display mode from "brut/net" to "per-code/common" scale modes
  • Removed net mode (solde) calculation entirely
  • Simplified to only show additions and deletions separately
  • Added ability to toggle between per-code and common scales
  • Sorted codes by modification score (descending) for better visibility

Code Simplification

  • Removed axis rendering (no visible axes in new compact design)
  • Removed net mode rendering logic
  • Removed stats display functions
  • Simplified tooltip content and links
  • Removed legend dynamic updates for mode switching

Responsive Design

  • Updated mobile breakpoint to adjust padding and font sizes
  • Made controls flex-direction column on mobile
  • Reduced chart padding on mobile devices

Implementation Details

  • Charts now use per-code scales by default, with option to switch to common scales
  • Tooltip pinning uses a global tooltipPinned flag to manage state
  • Codes are sorted by total modification score for better prioritization
  • Removed all axis-related CSS classes and rendering code
  • Simplified data transformation by removing net mode calculations

- Suppression de l'entête et des statistiques globales
- Suppression du mode net, conservation du mode brut uniquement
- Suppression des axes X et Y pour un affichage épuré
- Ajout du bouton échelle commune / échelle par code
- Tri des codes par somme des modifications (plus actifs en premier)
- Mise en page une seule colonne pleine largeur
- Tooltip qui reste en place au clic pour permettre l'interaction
- Renommage des liens: "Voir sur git.tricoteuses.fr" et "Voir sur Légifrance"
@benbel benbel merged commit ae2d624 into main Jan 24, 2026
@benbel benbel deleted the claude/clean-chart-display-KqgpE branch January 24, 2026 18:54
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Labels

None yet

Projects

None yet

Development

Successfully merging this pull request may close these issues.

2 participants