chartjs / Chart.js

Simple HTML5 Charts using the <canvas> tag
https://www.chartjs.org/
MIT License
63.9k stars 11.88k forks source link

Provide an API using composition DP to build graphs #11763

Open denis-migdal opened 1 month ago

denis-migdal commented 1 month ago

Feature Proposal

Hi,

I wonder if it could be possible to provide an API using composition DP to build graphs in order to improve code extensibility, reuse, and readability.

For example :

class MyCurve extends ??? {
     attach(chart) {
        chart.data.datasets.push({...});
        // ... potentially changes other options.
     }
     detach() {
        //...
     }
}

mychart.addCurve( new MyCurve() ); // call MyCurve.attach(mychart)
mychart.addAxis( new AxisLabelWhatever('x', ['Toto', 'titi']) );

Indeed, in big graphs, configurations can quickly become a big chunk, hard to read. Providing an API using composition DP would enable to better split big chunks of configurations, and facilitate code reusing/extensibility.

This would also enable to easily move curves (or other elements) from one graph to another, e.g. for a GUI graph editor or whatever.

Possible Implementation

In a project I started (a PoC for an HTML binding of Chart.js), I use compositions DP with HTML elements : https://github.com/denis-migdal/ChartsHTML

The JS code behind uses a composition DP, so this is a PoC for a possible implementation.