Choose a nice set or sets of Colours for up to 16 series

[bobbingwide]

Over a number of Slack conversations with @AndrewMLeonard we created 4 different colour themes ( or palettes) to use in the charts.

• Initially I've named them based on the source of the colours called these: Gutenberg, Chart, Chartist or Tertiary, and Visualizer.
• They have varying numbers of colours.
• The Chart theme has different opacities for the border and background
• This is obvious in the bar chart but not in the line chart when filled.
• I've also noted that Chart.js comes with a predefined set of colours.

Here's a screen capture showing examples of each chart type currently implemented and each colour palette.

Requirements

• Ability to choose the colour palette to use per chart
• Ability to define your own colours
• Ability to set the opacity for the chart
• Ability to use the Chart.js default colours for the chart palette.
• Better names for the palettes
• Same colours to be used in the editor as in the server rendered charts.

Proposed solution

• Investigate a few more chart color options: Google charts, Excel
• Implement as many palettes as deemed necessary
• Allow the user to set a start index
• Allow the user to define the opacity
• Display the palette colours in a Palette panel body

[bobbingwide]

There are a couple of colours in the Gutenberg palette which are no good on a white background. These are very-light-gray ( #EEEEEE ) and white. Get rid of these and a one or two more. Initially I just want to be able to see all the lines in Slog compare with 13 lines - base and the top 12 plugins.

[bobbingwide]

Now that I've implemented palette.json it should now be possible to define different "themes" simply by adding the new theme's colors to the JSON file and rebuilding the block.

I can try this with Rainbow: Violet, Indigo, Blue Green Yellow Orange Red. and the new WordPress admin colours.

[bobbingwide]

With the upgrade to Chartjs v3.1.0, and the change to defining the color palettes in a JSON file, it's now necessary to implement a control to allow the user to set the opacity. Whether or not we need a separate opacity for borders and lines needs to be investigated.

Screenshot from v2.9.4

Screenshot from v3.1.0 with opacity 1

Screenshot from v3.1.0 with opacity 0.5

[bobbingwide]

In order to implement the opacity parameter I needed to be able to apply the alpha value to the original hex value obtained from palettes.json.

Gutenberg uses a function called rgba(), which is implemented in
https://github.com/WordPress/gutenberg/blob/trunk/packages/components/src/utils/colors.js

But I don't know how to use it. I failed to import rgba from @wordpress/components

import { rgba } from '@wordpress/components';

So I copied the code and tried to import tinycolor from the tinycolor2 NPM package.

import { tinycolor } from 'tinycolor2';

Same result. The block crashes with Uncaught TypeError: Object(...) is not a function

const { r, g, b } = tinycolor( hexValue ).toRgb();

The pragmatic solution was to set the r,g,b values like this:

const r = parseInt(hexValue.slice(1, 3), 16);
const g = parseInt(hexValue.slice(3, 5), 16);
const b = parseInt(hexValue.slice(5, 7), 16);

It would be nice to be able to find out how to use tinycolor2 since it's less picky about the format of the hex number. This code expects it to be #rrggbb.

[bobbingwide]

So I copied the code and tried to import tinycolor from the tinycolor2 NPM package.

I used npm install tinycolor2 --save.

This updated package.json, adding

"tinycolor2": "^1.4.2"

to dependencies.

In Gutenberg's package.json it's different

"@types/tinycolor2": "1.4.2",

in devDependencies.

I tried npm install @types/tinycolor2 --save-dev but that didn't work either.

Stumped again.

[bobbingwide]

Some improvements to colour palette selection

1. Change the label from Theme to Color palette ( US English )
2. Update the logic to set the default to the first palette found in palette.json.
3. Check the colours to ensure similar colours are not adjacent. eg. In Chart and Gutenberg similar colours are adjacent a couple of times.

Also consider changing the names of the colour palettes: Gutenberg, Chart, Visualizer and Tertiary

[bobbingwide]

I've implemented a single opacity RangeControl to set the opacity between 0 and 1.0. Note: For some chart types, such as Pie, it's a bit silly setting the opacity to anything less than 0.1

[bobbingwide]

Current version on wordpress.org is v0.4.1