Monitoring: Update monitoring charts to get colors from color studio

[matt-west]

Fixes https://github.com/Automattic/dotcom-forge/issues/9474

Proposed Changes

• Update the color used by the charts on the Monitoring page to use our latest color palette.
• Pull colors from the color-studio package so they are kept in-sync with future color updates.
• Uses the chroma package to automatically generate transparent colors, future-proofing against future changes to the color-studio package.

Left: Before | Right: After

Why are these changes being made?

• To ensure colors used on the Monitoring page match our brand palette.

Testing Instructions

• Go to /site-monitoring/[domain]

[github-actions]

Calypso Live (direct link)

https://calypso.live?image=registry.a8c.com/calypso/app:build-122345

Jetpack Cloud live (direct link)

https://calypso.live?image=registry.a8c.com/calypso/app:build-122345&env=jetpack

Automattic for Agencies live (direct link)

https://calypso.live?image=registry.a8c.com/calypso/app:build-122345&env=a8c-for-agencies

[matticbot]

This PR modifies the release build for the following Calypso Apps:

For info about this notification, see here: PCYsg-OT6-p2

• blaze-dashboard
• command-palette-wp-admin
• help-center
• notifications
• odyssey-stats
• whats-new

To test WordPress.com changes, run install-plugin.sh $pluginSlug fix/monitoring-chart-colors on your sandbox.

[matticbot]

Here is how your PR affects size of JS and CSS bundles shipped to the user's browser:

Sections (~14102 bytes added 📈 [gzipped])

name             parsed_size           gzip_size
site-monitoring     +34428 B  (+2.4%)   +14102 B  (+3.4%)
site-logs           +34428 B  (+2.4%)   +14102 B  (+3.4%)

Sections contain code specific for a given set of routes. Is downloaded and parsed only when a particular route is navigated to.

Legend

What is parsed and gzip size?

Parsed Size: Uncompressed size of the JS and CSS files. This much code needs to be parsed and stored in memory.
Gzip Size: Compressed size of the JS and CSS files. This much data needs to be downloaded over network.

Generated by performance advisor bot at iscalypsofastyet.com.

[wojtekn]

The change looks clear, and works as expected.

[sejas]

I confirm I see the new colors.
I'm unsure of using chroma-js, it adds ~14102 bytes added 📈 [gzipped] to the loaded JS .

@matt-west, what do you think about using regular constants for those colors?

If we decide that loading that library is worth it for this use case, then we should move it to dependencies in pacakge.json.

[sejas]

I'm seeing chroma-js is imported as devDependencies. They only other place it's used is in NodeJS:

wp-calypso/bin/audit-svg-colors.js

Line 18 in a54137c

const chroma = require( 'chroma-js' );

[sejas]

We can consider creating a follow-up PR and undoing the changes about chroma-js.

[matt-west]

@sejas I decided to use chroma-js here so that we can continue to pull colors from the colour-studio package. I’d rather not hard-code them as it’s easy for them to get outdated again.

Ideally we’d have a function in the colour-studio package itself to generate alpha hex codes, but we’re not quite there yet.

I'll create a follow-up that uses a different approach.

[matt-west]

@sejas I’ve opened #95614 to remove chroma-js.