Add options to control the chart display in the editor and front end

[bobbingwide]

For a Minimum Viable Product we need to add a number of options to control the display of the charts.

• [x] Chart height
• [x] stacked line or bar chart
• [x] begin y Axis at 0 ?
• [x] area chart
• [x] Toolbar icons to choose the chart type
• [ ] Option to disable redraw while entering data.

Proposed solution

Implement options as attributes in both the editor and the server side rendering logic.

Attribute	Option setting	Value	Purpose
beginAtZero	scales.yAxes.ticks.beginAtZero	true	Start the axis from 0
stacked	scales.yAxes.stacked & scales.xAxes.stacked	true	Show a stacked line / bar chart.
maintainAspectRatio	maintainAspectRatio	bool	false to allow the height to be set

Other attributes

Attribute	Value	Purpose
height	nnnpx	Set the chart height on the ` tag.
fill	bool	Convert line chart to area when true.

For documentation see:

https://www.chartjs.org/docs/latest/charts/line.html?h=stacked

Chart height

According to the documentation of chart.js you need CSS like this if you want limit the chart height in a responsive display. You also need to set maintainAspectRatio: false.

.chartjs { width: 90%; position: relative; height: 250px;}

Workaround With v0.0.3 I used custom CSS defined using oik-css's CSS block.

This CSS will no longer be necessary once this has been implemented. It appears that it's not necessary to set the aspectRatio when maintainAspectRatio is false.

[bobbingwide]

If you only set stacked on the Y-axis then you get something like this.

[bobbingwide]

Aside - TIL - Note to self

I've just realised that when a block is being rendered for display on the front-end that it's not going through the same logic as for Server Side Rendering. Therefore the block can contain attributes that the server end doesn't know anything about. I'd not noticed this when I added myChartId. The server doesn't use this value; it creates its own. There could be multiple posts each trying to multiple display charts.

But it was when I added stacked I was surprised that there wasn't a complaint. But that's for the reason above...The block isn't server side rendered in the editor.

Well, not yet. But it might be if and when I add support for server based content from an URL (/file) or attached media or other content type ( eg Tablepress table ).

[bobbingwide]

Option to disable redraw while entering data.

There's currently a Refresh button that's disabled. Can this be changed to a toggle to enable/disable refresh while content is being updated?

[bobbingwide]

The logic that uses <ToolbarGroup> to display the chart style needs to be improved. In my first attempt to display icons for the different chart types I copied and cobbled the <ToolBarGroup> code that's used for Alignment. There are a couple of problems illustrated in this screen capture.

1. When there's no chart data then it's possible to deselect the chart type. This causes the menuitemradio icon to be displayed. What does that mean? Well, it doesn't really matter when there's no content.

2. But when there is content ( labels and at least one value) then the block crashes with `Uncaught Error: "undefined" is not a chart type.

   at tn.buildOrUpdateControllers (Chart.min.js:7)
   at tn.update (Chart.min.js:7)
   at tn.construct (Chart.min.js:7)
   at new tn (Chart.min.js:7)
   at SB_chart_block.showChart (index.js:7843)
   at SB_chart_block.runChart (index.js:7874)
   ...

   How do we stop the <ToolbarGroup> from allowing the user to deselect the currently selected option, effectively choosing undefined?

3. Can I use the ToolbarGroup to display the items horizontally inside the toolbar? Like the bold, italic and link icons for Rich text?

[bobbingwide]

TIL: If you let PhpStorm default a function in React code it can cause a loop.

I was adding the "Begin Y-axis at 0" toggle and let PhpStorm complete the value for the onChange attribute to the ToggleControl. It inserted onChangeBeginYAxisAt0(). This is a function invocation, not a function reference... or whatever JavaScript uses for callback. Each of the charts redrew themselves constantly. When I clicked on a Chart block that block crashed.

The code should have been

<ToggleControl
    label={ __( 'Begin Y-axis at 0', 'sb-chart-block' ) }
    checked={ !! attributes.beginYAxisAt0 }
    onChange={ onChangeBeginYAxisAt0 }
/>

[bobbingwide]

Option to disable redraw while entering data.

Instead of doing this I've implemented a Refresh button for when the Time line chart is broken due to invalid dates. When the Time unit is changed a Refresh is attempted automatically.