search

bobbingwide / sb-chart-block

Chart block for Gutenberg
GNU General Public License v3.0
6 stars 0 forks source link

Implement a Chart block using chart.js #1

Closed bobbingwide closed 3 years ago

bobbingwide commented 3 years ago

In https://github.com/wppompey/pompey-chart we've developed a generic [chart] shortcode using chartist.js. But there are were couple of problems with it. I want to be able to deliver a Chart block, as a Single Block plugin.

Requirements

Proposed solution

Chart types to be supported: see https://www.chartjs.org/samples/latest/

Type Subtypes Support
Line Stacked, Area, Dots only With multiple series
Bar Stacked With multiple series
Horizontal bar Stacked With multiple series - obviously
Pie Donut Multiple series - optional
bobbingwide commented 3 years ago

In the prototyped implementation, if oik-css is activated, it's necessary to "Disable automatic paragraph creation" otherwise the <script> tag gets wrapped in an unwanted <p> tag.

bobbingwide commented 3 years ago

We need to account for trailing commas in the CSV file. Extra commas can cause Notices to be produced

Notice: Undefined offset: 3 in C:\apache\htdocs\wordpress\wp-content\plugins\sb-chart-block\libs\class-sb-chart-block.php on line 219

[chartjs type=Pie]Plugin,Downloaded,Active
oik,170324,5000
oik-nivo-slider,92008,500
oik-privacy-policy,61040,5000
cookie-cat,27157,2000
oik-weightcountry-shipping,47204,2000
oik-weight-zone-shipping,11895,2000,
[/chartjs]

In the case of a pie chart, this produces an extra level of the pie chart. image

Things to do here:

  1. Implement backgroundColor and backgroundBorder colour series
  2. Lose the chart axes
  3. Consider what to do with multiple series
bobbingwide commented 3 years ago

For the Chart block I'm raising a separate issue. I've already developed a Server Side Rendered block but now want to reproduce the logic in the editor. See #4, where I've started with the handcranked version and am converting it one bit at a time.

bobbingwide commented 3 years ago

I've now delivered v0.0.3 to cwiccer.com and bobbingwide.com.

In bobbingwide.com, I've published a number of charts showing the figures at the beginning of the year. See. https://top-10-wp-plugins.com/2021/01/10/top-12-charts-january-2021/

See the new issue #5 which I'll use to implement the options enabling stacked charts, area charts and other options to satisfy a Minimim Viable Product ( MVP ).