mariusmuntean / ChartJs.Blazor

Brings Chart.js charts to Blazor
https://www.iheartblazor.com/
MIT License
687 stars 152 forks source link

Incremental updates #48

Closed pekspro closed 4 years ago

pekspro commented 4 years ago

First of all, thank you for this project! This makes it amazingly easy to add charts. I’ve done this so far with JavaScript and it is really time consuming. This will be a huge time saver for me :-)

Describe the feature request

After the chart has been rendered the first time, I would like to be able to add data to the chart without redrawing the whole chart again. Click on Add Data on this page to see the expected behavior:

https://www.chartjs.org/samples/latest/charts/bar/vertical.html

Which charts does this feature request apply to?

All charts.

Describe the solution you'd like

If I'm working with a PieDataset for instance, it would be nice to just being able to add data to this object and then the system figures out how to dynamically. Maybe this is crazy hard to do, I don’t know. But I can see that the javascript library seems to be able to figure deltas in a smart way.

Describe alternatives you've considered

Another way could be to have some delta functions we could call instead, that then calls into the JavaScript library. So, when we want to do incremental updates, we use these functions instead.

Additional context

I can’t say this is an important feature for me, but I think it’s worth mentioning. Also, I think this is an interesting problem :-)

Thanks again for all this amazing work!

mariusmuntean commented 4 years ago

I totally agree with you!

The Javascript introp layer to Chartjs always bugged me so now I started writing it in Typescript (branch here: https://github.com/mariusmuntean/ChartJs.Blazor.git)

It turns out that Typescript is just awesome and I could improve the interop layer a lot. The incremental updates to a chart is one of those improvements.

Expect to see a new release, which addresses this issue, soon 😎

mariusmuntean commented 4 years ago

IncrementalUpdate

pekspro commented 4 years ago

@mariusmuntean, nice work! It looks really promising .

By the way, I totally agree with you about TypeScript. It makes JavaScript descent :-) But when it comes to productivity nothing beats Blazor, it’s simply amazing :-)

SeppPenner commented 4 years ago

@mariusmuntean Wow, you did get Typescript to work with Chart.Js. I already tried that before but failed :D

And this example looks really promising.

mariusmuntean commented 4 years ago

I think I should revive the WiKi as well. There I can describe how to get it going and what my experience was. In short, you either use VisualStudio for the normal Blazor development and VSCode for the Typescript files OR you use Jetbrains Rider for both.

SeppPenner commented 4 years ago

Ah, okay. I tried to integrate the TypeScript part into VS as well and it didn't work as expected.

mariusmuntean commented 4 years ago

I think this issue can be closed. Please have a look at the attached pre-release NuGet package below (after you download it, just remove the additional .zip extension - GitHub limitation :D) and let me know if this is what you imagined.

I also extended the PieChart sample to showcase the new behavior.

ChartJs.Blazor.1.0.2.nupkg.zip

mariusmuntean commented 4 years ago

There is a NuGet package that contains these changes: https://www.nuget.org/packages/ChartJs.Blazor/1.0.2