Movatterモバイル変換


[0]ホーム

URL:


Skip to content

Navigation Menu

Sign in
Appearance settings

Search code, repositories, users, issues, pull requests...

Provide feedback

We read every piece of feedback, and take your input very seriously.

Saved searches

Use saved searches to filter your results more quickly

Sign up
Appearance settings

Feature: new charts & Refactor: simplification and better unity#58

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to ourterms of service andprivacy statement. We’ll occasionally send you account related emails.

Already on GitHub?Sign in to your account

Open
Maxenceee wants to merge118 commits intoGouvernementFR:dev
base:dev
Choose a base branch
Loading
fromMaxenceee:refactor/charts-implementation

Conversation

@Maxenceee
Copy link

@MaxenceeeMaxenceee commentedOct 25, 2025
edited
Loading

Bonjour,

Dans le cadre d'un projet porté par la DINUM, nous avons dû utiliser la librairiedsfr-chart.
Cependant, nous avons constaté de nombreuses limites dans l'implémentation actuelle, d'autant plus que la librairiechart.js, utilisée comme base, est très complète.

Pour cette raison, nous avons apporté un certain nombre d'ajouts, effectué quelques améliorations et simplifié le code.

Le travail étant déjà réalisé et la librairie ouverte aux contributions, je propose donc cette PR.

Cette PR refond l'implémentation des visualisations et introduit plusieurs nouveaux composants réutilisables. L'objectif est de clarifier l'architecture des composants graphiques, factoriser le code commun (couleurs, parsing des props, plugins et mixins Chart.js, info-bulles externes), et faciliter la maintenance ainsi que l'ajout de nouveaux types de graphiques.

Principaux points

  • Ajout de nouveaux composants Vue pour chaque type de graphique (composants modernisés et découplés).
  • Refactorisation importante des utilitaires partagés : couleurs, parseurs de props, mixins, plugins, info-bulles externes.
  • Migration de la logique Chart.js vers un conteneur commun (ChartShell / mixins) pour réduire les duplications.
  • Mise à jour des stories Storybook et des tests visuels (captures d'écran).

Détails des changements

Ajouts

  • Nouveaux composants Vue dédiés aux graphiques

    • TreemapChart :
      Permet de visualiser des données hiérarchiques sous forme de rectangles imbriqués, idéal pour représenter des proportions (ex : répartition budgétaire, structure organisationnelle).
    • AreaLineChart :
      Combine les avantages des graphiques en aire et en ligne, offrant une visualisation claire des tendances et des évolutions temporelles. Parfait pour comparer plusieurs séries de données.
    • TableBarChart :
      Associe un tableau et un graphique à barres, facilitant la lecture des données tout en permettant une comparaison visuelle immédiate des valeurs.
  • ChartShell :

    • Conteneur central pour initialiser et configurer un graphique Chart.js.
    • Permet d’appliquer globalement mixins/plugins et d’uniformiser la gestion des info-bulles, légendes et responsivité.
  • Nouveaux utilitaires / aides

    • utils/colors.js : centralisation des palettes et des codes couleurs DSFR.
    • utils/propParsers.js : parseurs pour normaliser les props (ex : conversion de jeux de données, formatage d’échelles, normalisation des couleurs).
    • utils/chart-mixins.js : mixins partagés pour la création, la réinitialisation et la mise à jour des graphiques, ainsi que pour l’écoute des événements.
    • utils/plugins.js : implémentation et export de plugins Chart.js réutilisables (ex : annotations légères, plugin de labels, adaptation DSFR).
    • utils/externalTooltip.js : gestion des info-bulles externes (structure et rendu HTML/CSS).
    • utils/labels.js,utils/global.js,utils/constants.js, etc. : aides auxiliaires restructurées.

Modifications

  • Refactorisation des anciens composants graphiques

    • Extraction de la logique Chart.js et déplacement dansChartShell etchart-mixins.
    • Remplacement des implémentations internes par des appels aux nouveaux utilitaires (colors,propParsers,plugins).
  • Centralisation des couleurs

    • Les couleurs étaient auparavant dispersées ; elles sont maintenant centralisées dansutils/colors.js pour garantir la conformité avec les codes DSFR.
    • Les composants consomment ces couleurs via les parseurs (possibilité de surcharges locales).
  • Normalisation du parsing des props

    • Les règles de parsing (jeux de données, format des dates, ticks, légendes) ont été consolidées danspropParsers.js.
    • Les composants reçoivent désormais des props "haut niveau" et délèguent la normalisation aux parseurs.
  • Plugins et mixins

    • Les plugins Chart.js spécifiques (ex : gestion des labels, mode "empilé" personnalisé) ont été transformés en modules réutilisables.
    • Les mixins implémentent les cycles de vie pour initialiser, mettre à jour et détruire correctement les graphiques sans fuite mémoire.
  • Stories

    • Mise à jour / ajout de stories Storybook pour les nouveaux composants.

Refactorisation des utilitaires

  • Couleurs (utils/colors.js)

    • API simple :getColor(key),getPalette(name),mapValuesToPalette(values, palette).
    • Permet d’utiliser soit les codes DSFR, soit des surcharges locales.
  • Parsing (utils/propParsers.js)

    • Fonctions pour : normaliser les jeux de données, convertir les types (string → date/number), créer des options d’échelle, configurer l’affichage des ticks et labels.
    • Réduit la logique répétée dans chaque composant.
  • Mixins (utils/chart-mixins.js)

    • Fonctions cycle de vie :initChart(),updateChart(),destroyChart().
    • Gestion centralisée des observateurs surdata/options avec throttling/dé-bounce si nécessaire.
  • Plugins (utils/plugins.js)

    • Implémentation modulaire des plugins Chart.js (labels, contextualisation DSFR).
    • Export facile pour tests et réutilisation.
  • Info-bulles externes (utils/externalTooltip.js)

    • Gestion uniforme du rendu HTML/CSS des info-bulles, séparée de la logique Chart.js.

Voici quelques exemples des ajouts/modifications :

Capture d’écran 2025-10-25 à 16 02 57Capture d’écran 2025-10-25 à 16 03 09Capture d’écran 2025-10-25 à 16 03 47Capture d’écran 2025-10-25 à 16 05 02Capture d’écran 2025-10-25 à 16 05 52

Il y a beaucoup de choses, le développement a été un peu précipité et tout a été fait en même temps.

De plus les commits n'ayant tous un nom très explicite et étant donné qu'il y en a beaucoup je suggère de les 'squash' lors du merge pour ne pas polluer l'historique.

J'espère que ces ajouts vous paraîtront utiles ;)

Upgraded multiple development dependencies including eslint, chart.js, vite, and related packages to their latest versions for improved stability and security.
Introduces a new build pipeline for DSFR CSS assets, including scripts to copy and patch DSFR CSS from node_modules and generate TypeScript code from CSS. Adds supporting utility scripts and tools for CSS parsing and conversion. Updates .gitignore for new build outputs, adds build:dsfr npm script, and configures TypeScript compiler options. Also adds new dependencies for CSS and TypeScript tooling.
Added DSFR-related paths to .gitignore for better exclusion of generated files. Expanded comments in build.mjs to clarify the need for CommonJS settings due to project module configuration and ts-node limitations.
Moved DSFR color utilities from src/utils/dsfr-colors.js to src/fr/colors.js and updated references to use the new fr.colors export. Removed unused typography generation and related build logic. Changed build outputs from .ts to .js files for generated color, spacing, breakpoint, and classNames modules. Updated chartData to use fr.colors. Added type definitions and fr module entry point in src/fr.
Introduces a 'colors' prop to all chart components and updates color utility functions to support custom color arrays. This allows charts to use explicitly defined colors from data sources, improving flexibility and consistency in chart rendering.
Refactored BarLineChart.vue and related data structures to handle multiple line datasets instead of a single line. Updated props, parsing logic, tooltip, legend, and color handling to support arrays for line data and names. Adjusted data.js and colors.js accordingly. Removed debug logs from LineChart.vue.
Updated BarLineChart.vue and related data structures to support multiple bar datasets and colors, enabling grouped/stacked bar charts. Adjusted props, parsing logic, color handling, and chart rendering to accommodate arrays for bars and lines. Updated data.js and colors.js to match new structure.
Introduces the AreaLineChart.vue component for combined area and line chart visualizations. Updates chartData and chartExamples to support and demonstrate the new chart type, and adds color generation logic for area/line charts in colors.js.
Introduces a new 'showLabels' prop to LineChart.vue, allowing selective display of point labels based on index array or preset options ('all', 'edges', 'minmax'). Updates chartData to utilize this feature for improved label control.
Chart data props in data.js are now consistently arrays instead of JSON strings. Chart components (AreaLineChart, BarChart, BarLineChart, LineChart) now validate that x, y, yBars, yLines, etc. are arrays of arrays and log errors for legacy string usage. AreaLineChart and colors.js add support for separate area border colors. This improves data consistency and error handling for chart rendering.
Deleted DSFR build scripts, TypeScript config files, and related tooling from the scripts and src/fr directories. Cleaned up .gitignore and package.json to remove DSFR build references and unused dependencies. This simplifies the project by removing custom DSFR build logic and associated code.
Changed the example custom element registration from 'bar-line-chart' to 'new-chart-name' in CONTRIBUTING.md for clarity and consistency with naming conventions.
Maxenceeeand others added28 commitsOctober 9, 2025 17:03
Extracted chart plugin logic and label index calculation into reusable utility modules (plugins.js and labels.js). Updated AreaLineChart, BarLineChart, LineChart, and ScatterChart components to use these utilities, improving code maintainability and reducing duplication.
Moved the tick label formatting logic into a reusable ticksCallback function in labels.js and updated all chart components to use it. This reduces code duplication and centralizes tick formatting for easier maintenance.
…ractionReplaces repetitive chart registration code with a new chart-factory utility, simplifying all chart entrypoints to a single line. Introduces BaseChart.vue as a shared abstraction for chart components, and adds new mixins and color services for maintainability. Updates BarChart, LineChart, MapChart, and related components to use the new architecture. Adds example and utility files for color and mixin services, and provides refactored/simplified chart component examples. This change reduces code duplication, centralizes configuration, and improves extensibility for future chart types.
Unified the :disabled and :to logic for Teleport in all chart components to use a consistent and simplified condition. In DataBox.vue, replaced the complex actions parsing logic with a direct JSON.parse when actions is a string, assuming a JSON array format. Updated chartData to store actions as a stringified array for compatibility.
Introduces ChartShell.vue to unify chart layout and legend rendering for all chart components. Replaces duplicated external tooltip logic with a shared externalTooltip.js utility. Updates AreaLineChart, BarChart, LineChart, and PieChart to use ChartShell and the shared tooltip handler, simplifying templates and improving maintainability.
Replaces Teleport-based chart rendering with the new ChartShell component for BarLineChart, RadarChart, ScatterChart, and TreemapChart. Refactors tooltip logic to use a shared externalTooltip utility, improving maintainability and consistency. Also updates theme listener setup and legend rendering for all affected chart components.
Replaces manual and repetitive JSON parsing logic in chart components with reusable helpers from a new src/utils/propParsers.js module. This improves code clarity, error handling, and consistency for props that may be passed as JSON strings or arrays, and centralizes legacy support for prop formats.
Chart data structure was normalized and color arrays removed in favor of palette selection. Chart components were updated for better color handling, axis configuration, and code formatting. Documentation and example code were improved for clarity and maintainability.
Deleted src/utils/chart-colors-service.js and its usage example in src/examples/chart-colors-service-usage.js. Also removed src/charts/chart-factory.js. Cleaned up chart components by eliminating comments and legacy code referencing the removed color service, simplifying data parsing and color handling logic.
Eliminated the databoxId, databoxType, databoxSource, and date props from AreaLineChart, BarChart, BarLineChart, LineChart, PieChart, RadarChart, ScatterChart, and TreemapChart components. These props were not being used, simplifying the component interfaces.
The evt package and its related dependencies (minimal-polyfills, run-exclusive, tsafe) have been removed from package.json and package-lock.json. This reduces unused dev dependencies and streamlines the project.
@netlify
Copy link

netlifybot commentedOct 25, 2025
edited
Loading

Deploy Preview fordsfr-chart ready!

NameLink
🔨 Latest commit15329e7
🔍 Latest deploy loghttps://app.netlify.com/projects/dsfr-chart/deploys/68fcdb053d896f0008a020e1
😎 Deploy Previewhttps://deploy-preview-58--dsfr-chart.netlify.app
📱 Preview on mobile
Toggle QR Code...

QR Code

Use your smartphone camera to open QR code link.

To edit notification comments on pull requests, go to yourNetlify project configuration.

Sign up for freeto join this conversation on GitHub. Already have an account?Sign in to comment

Reviewers

No reviews

Assignees

No one assigned

Labels

None yet

Projects

None yet

Milestone

No milestone

Development

Successfully merging this pull request may close these issues.

2 participants

@Maxenceee@PlugNPush

[8]ページ先頭

©2009-2025 Movatter.jp