Monitoring: Update monitoring charts to get colors from color studio (#…

…95550)

client/hosting/monitoring/components/site-monitoring.tsx

@@ -1,4 +1,6 @@
+import colorStudio from '@automattic/color-studio';
 import { useI18n } from '@wordpress/react-i18n';
+import chroma from 'chroma-js';
 import { translate } from 'i18n-calypso';
 import { useMemo, useState } from 'react';
 import { useSelector } from 'react-redux';
@@ -229,35 +231,39 @@ export interface HTTPCodeSerie {
 	showInTooltip?: boolean;
 }
 
+function colorToAlpha( color: keyof typeof colorStudio.colors, alpha: number ) {
+	return chroma( colorStudio.colors[ color ] ).alpha( alpha ).hex();
+}
+
 const seriesDefaultProps = {
-	fill: 'rgba(196, 196, 196, 0.1)',
-	stroke: 'rgba(196, 196, 196, 1)',
+	fill: colorToAlpha( 'Gray 10', 0.1 ),
+	stroke: colorStudio.colors[ 'Gray 10' ],
 };
 
 const useSuccessHttpCodeSeries = () => {
 	const { __ } = useI18n();
 	const series: HTTPCodeSerie[] = [
 		{
 			statusCode: 200,
-			fill: 'rgba(104, 179, 232, 0.1)',
+			fill: colorToAlpha( 'WordPress Blue 30', 0.1 ),
 			label: __( '200: OK Response' ),
-			stroke: 'rgba(104, 179, 232, 1)',
+			stroke: colorStudio.colors[ 'WordPress Blue 30' ],
 			showInLegend: true,
 			showInTooltip: true,
 		},
 		{
 			statusCode: 301,
-			fill: 'rgba(235, 101, 148, 0.2)',
+			fill: colorToAlpha( 'Pink 30', 0.2 ),
 			label: __( '301: Moved Permanently' ),
-			stroke: 'rgba(235, 101, 148, 1)',
+			stroke: colorStudio.colors[ 'Pink 30' ],
 			showInLegend: true,
 			showInTooltip: true,
 		},
 		{
 			statusCode: 302,
-			fill: 'rgba(9, 181, 133, 0.1)',
+			fill: colorToAlpha( 'Celadon 30', 0.1 ),
 			label: __( '302: Moved Temporarily' ),
-			stroke: 'rgba(9, 181, 133, 1)',
+			stroke: colorStudio.colors[ 'Celadon 30' ],
 			showInLegend: true,
 			showInTooltip: true,
 		},
@@ -272,42 +278,42 @@ const useErrorHttpCodeSeries = () => {
 		// most common 4xx errors
 		{
 			statusCode: 400,
-			fill: 'rgba(242, 215, 107, 0.1)',
+			fill: colorToAlpha( 'Yellow 10', 0.1 ),
 			label: __( '400: Bad Request' ),
-			stroke: 'rgba(242, 215, 107, 1)',
+			stroke: colorStudio.colors[ 'Yellow 10' ],
 			showInLegend: true,
 			showInTooltip: true,
 		},
 		{
 			statusCode: 401,
-			fill: 'rgba(140, 143, 148, 0.1)',
+			fill: colorToAlpha( 'Gray 20', 0.1 ),
 			label: __( '401: Unauthorized' ),
-			stroke: 'rgba(140, 143, 148, 1)',
+			stroke: colorStudio.colors[ 'Gray 20' ],
 			showInLegend: true,
 			showInTooltip: true,
 		},
 		{
 			statusCode: 403,
-			fill: 'rgba(104, 179, 232, 0.1)',
+			fill: colorToAlpha( 'WordPress Blue 30', 0.1 ),
 			label: __( '403: Forbidden' ),
-			stroke: 'rgba(104, 179, 232, 1)',
+			stroke: colorStudio.colors[ 'WordPress Blue 30' ],
 			showInLegend: true,
 			showInTooltip: true,
 		},
 		{
 			statusCode: 404,
-			fill: 'rgba(9, 181, 133, 0.1)',
+			fill: colorToAlpha( 'Celadon 30', 0.1 ),
 			label: __( '404: Not Found' ),
-			stroke: 'rgba(9, 181, 133, 1)',
+			stroke: colorStudio.colors[ 'Celadon 30' ],
 			showInLegend: true,
 			showInTooltip: true,
 		},
 		// most common 5xx errors
 		{
 			statusCode: 500,
-			fill: 'rgba(235, 101, 148, 0.1)',
+			fill: colorToAlpha( 'Pink 30', 0.1 ),
 			label: __( '500: Internal Server Error' ),
-			stroke: 'rgba(235, 101, 148, 1)',
+			stroke: colorStudio.colors[ 'Pink 30' ],
 			showInLegend: true,
 			showInTooltip: true,
 		},
@@ -567,14 +573,14 @@ export const SiteMonitoring = () => {
 				data={ formattedData as uPlot.AlignedData }
 				series={ [
 					{
-						fill: 'rgba(6, 117, 196, 0.1)',
+						fill: colorToAlpha( 'WordPress Blue 50', 0.1 ),
 						label: __( 'Requests per minute' ),
-						stroke: '#0675C4',
+						stroke: colorStudio.colors[ 'WordPress Blue 50' ],
 					},
 					{
-						fill: 'rgba(222, 177, 0, 0.2)',
+						fill: colorToAlpha( 'Yellow 30', 0.2 ),
 						label: __( 'Average response time (ms)' ),
-						stroke: 'rgba(222, 177, 0, 1)',
+						stroke: colorStudio.colors[ 'Yellow 30' ],
 						scale: 'average-response-time',
 						unit: 'ms',
 					},

client/hosting/monitoring/components/style.scss

@@ -187,30 +187,30 @@ div.is-section-site-monitoring:not(.is-global-sidebar-visible) {
 .site-monitoring-http-verbs-pie-chart {
 	.pie-chart__chart-section-verb-post,
 	.pie-chart__legend-sample-verb-post {
-		fill: var(--studio-blue-60);
+		fill: var(--studio-wordpress-blue-60);
 	}
 	.pie-chart__chart-section-verb-get,
 	.pie-chart__legend-sample-verb-get {
-		fill: var(--studio-blue-30);
+		fill: var(--studio-wordpress-blue-30);
 	}
 	.pie-chart__chart-section-verb-delete,
 	.pie-chart__legend-sample-verb-delete {
 		fill: var(--studio-red-10);
 	}
 	.pie-chart__chart-section-verb-head,
 	.pie-chart__legend-sample-verb-head {
-		fill: var(--studio-blue-5);
+		fill: var(--studio-wordpress-blue-10);
 	}
 }
 
 .site-monitoring-php-static-pie-chart {
 	.pie-chart__chart-section-dynamic,
 	.pie-chart__legend-sample-dynamic {
-		fill: #09b585;
+		fill: var(--studio-celadon-30);
 	}
 	.pie-chart__chart-section-static,
 	.pie-chart__legend-sample-static {
-		fill: var(--studio-green-5);
+		fill: var(--studio-celadon-5);
 	}
 }
 

package.json

@@ -248,6 +248,7 @@
 		"@storybook/react": "^7.6.19",
 		"@tanstack/eslint-plugin-query": "^5.14.6",
 		"@testing-library/jest-dom": "^6.4.5",
+		"@types/chroma-js": "^2.4.4",
 		"@types/dompurify": "^3.0.5",
 		"@types/gtag.js": "^0.0.19",
 		"@types/superagent": "^4.1.24",
@@ -260,7 +261,7 @@
 		"bunyan": "^1.8.15",
 		"chalk": "^4.1.2",
 		"check-node-version": "^4.0.2",
-		"chroma-js": "^2.1.2",
+		"chroma-js": "^2.6.0",
 		"css-loader": "^6.11.0",
 		"doctrine": "^3.0.0",
 		"dotenv-webpack": "^8.1.0",

yarn.lock

@@ -7960,6 +7960,13 @@ __metadata:
   languageName: node
   linkType: hard
 
+"@types/chroma-js@npm:^2.4.4":
+  version: 2.4.4
+  resolution: "@types/chroma-js@npm:2.4.4"
+  checksum: 8acd341c523fc960686ed9e60f23ae643da35bddf012b4b18cb0d941ee3bf82087262245ffa8c886ea31571cd5dc6eb553e849fab3c0509ea2c3a045a246178c
+  languageName: node
+  linkType: hard
+
 "@types/color-name@npm:^1.1.1":
   version: 1.1.1
   resolution: "@types/color-name@npm:1.1.1"
@@ -13530,12 +13537,10 @@ __metadata:
   languageName: node
   linkType: hard
 
-"chroma-js@npm:^2.1.2":
-  version: 2.1.2
-  resolution: "chroma-js@npm:2.1.2"
-  dependencies:
-    cross-env: "npm:^6.0.3"
-  checksum: f3760059b76240bab7387f335c798bbf55a4edf937534be7bc5c16ecad9b358dcfd891ca4fffa2c34742f45d5c3e96c8927c6a9906a13905da2bfa4c9ad30418
+"chroma-js@npm:^2.6.0":
+  version: 2.6.0
+  resolution: "chroma-js@npm:2.6.0"
+  checksum: 6e17f43246f9b3eba8a9db67f5ee9a2d0ef1360077211887da09ec1f0934bb98a358eefaf021003c0bd47cbab540f573a373f362d6b2ba04d0e80ab7677e1640
   languageName: node
   linkType: hard
 
@@ -14737,18 +14742,6 @@ __metadata:
   languageName: node
   linkType: hard
 
-"cross-env@npm:^6.0.3":
-  version: 6.0.3
-  resolution: "cross-env@npm:6.0.3"
-  dependencies:
-    cross-spawn: "npm:^7.0.0"
-  bin:
-    cross-env: src/bin/cross-env.js
-    cross-env-shell: src/bin/cross-env-shell.js
-  checksum: 0d176b91c730abb08589431970a59771148f8fbf338959f5e3aa71b866d38ba390fc67f5330306d0a37d7cb74675224d0f23086f291661b944abbf5a00bd7080
-  languageName: node
-  linkType: hard
-
 "cross-env@npm:^7.0.3":
   version: 7.0.3
   resolution: "cross-env@npm:7.0.3"
@@ -34622,6 +34615,7 @@ __metadata:
     "@storybook/react": "npm:^7.6.19"
     "@tanstack/eslint-plugin-query": "npm:^5.14.6"
     "@testing-library/jest-dom": "npm:^6.4.5"
+    "@types/chroma-js": "npm:^2.4.4"
     "@types/cookie": "npm:^0.4.1"
     "@types/debug": "npm:^4.1.7"
     "@types/dompurify": "npm:^3.0.5"
@@ -34671,7 +34665,7 @@ __metadata:
     calypso-codemods: "workspace:^"
     chalk: "npm:^4.1.2"
     check-node-version: "npm:^4.0.2"
-    chroma-js: "npm:^2.1.2"
+    chroma-js: "npm:^2.6.0"
     cmdk: "npm:^0.2.0"
     config: "npm:^3.3.6"
     css-loader: "npm:^6.11.0"