- Notifications
You must be signed in to change notification settings - Fork15
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:devChoose a base branch fromMaxenceee:refactor/charts-implementation
base:dev
Could not load branches
Branch not found:{{ refName }}
Loading
Could not load tags
Nothing to show
Loading
Are you sure you want to change the base?
Some commits from the old base branch may be removed from the timeline, and old review comments may become outdated.
Open
Feature: new charts & Refactor: simplification and better unity#58
Maxenceee wants to merge118 commits intoGouvernementFR:devfromMaxenceee:refactor/charts-implementation
Uh oh!
There was an error while loading.Please reload this page.
Conversation
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.Learn more about bidirectional Unicode characters
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.
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.
Sync from datalma refacto charts
…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.
netlifybot commentedOct 25, 2025 • edited
Loading Uh oh!
There was an error while loading.Please reload this page.
edited
Uh oh!
There was an error while loading.Please reload this page.
✅ Deploy Preview fordsfr-chart ready!
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
Add this suggestion to a batch that can be applied as a single commit.This suggestion is invalid because no changes were made to the code.Suggestions cannot be applied while the pull request is closed.Suggestions cannot be applied while viewing a subset of changes.Only one suggestion per line can be applied in a batch.Add this suggestion to a batch that can be applied as a single commit.Applying suggestions on deleted lines is not supported.You must change the existing code in this line in order to create a valid suggestion.Outdated suggestions cannot be applied.This suggestion has been applied or marked resolved.Suggestions cannot be applied from pending reviews.Suggestions cannot be applied on multi-line comments.Suggestions cannot be applied while the pull request is queued to merge.Suggestion cannot be applied right now. Please check back later.
Uh oh!
There was an error while loading.Please reload this page.
Bonjour,
Dans le cadre d'un projet porté par la DINUM, nous avons dû utiliser la librairie
dsfr-chart.Cependant, nous avons constaté de nombreuses limites dans l'implémentation actuelle, d'autant plus que la librairie
chart.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
ChartShell/ mixins) pour réduire les duplications.Détails des changements
Ajouts
Nouveaux composants Vue dédiés aux graphiques
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).
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.
Associe un tableau et un graphique à barres, facilitant la lecture des données tout en permettant une comparaison visuelle immédiate des valeurs.
ChartShell :
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
ChartShelletchart-mixins.colors,propParsers,plugins).Centralisation des couleurs
utils/colors.jspour garantir la conformité avec les codes DSFR.Normalisation du parsing des props
propParsers.js.Plugins et mixins
Stories
Refactorisation des utilitaires
Couleurs (
utils/colors.js)getColor(key),getPalette(name),mapValuesToPalette(values, palette).Parsing (
utils/propParsers.js)Mixins (
utils/chart-mixins.js)initChart(),updateChart(),destroyChart().data/optionsavec throttling/dé-bounce si nécessaire.Plugins (
utils/plugins.js)Info-bulles externes (
utils/externalTooltip.js)Voici quelques exemples des ajouts/modifications :
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 ;)