Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

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

Merged
merged 4 commits into from
Oct 23, 2024
Merged

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

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
4 commits
Select commit Hold shift + click to select a range
a5cfec7
Update monitoring charts to get colors from color studio.
matt-west Oct 21, 2024
1caae49
Use chroma to generate transparent colors
matt-west Oct 21, 2024
e381d4d
Updated chroma and added type definitions.
matt-west Oct 21, 2024
a54137c
Refactor color transforms into a helper function.
matt-west Oct 21, 2024
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
50 changes: 28 additions & 22 deletions client/hosting/monitoring/components/site-monitoring.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -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';
Expand Down Expand Up @@ -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,
},
Expand All @@ -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,
},
Expand Down Expand Up @@ -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',
},
Expand Down
10 changes: 5 additions & 5 deletions client/hosting/monitoring/components/style.scss
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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);
}
}

Expand Down
3 changes: 2 additions & 1 deletion package.json
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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",
Expand All @@ -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",
Copy link
Member

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

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' );

"css-loader": "^6.11.0",
"doctrine": "^3.0.0",
"dotenv-webpack": "^8.1.0",
Expand Down
32 changes: 13 additions & 19 deletions yarn.lock
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -7951,6 +7951,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"
Expand Down Expand Up @@ -13514,12 +13521,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

Expand Down Expand Up @@ -14721,18 +14726,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"
Expand Down Expand Up @@ -34606,6 +34599,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"
Expand Down Expand Up @@ -34655,7 +34649,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"
Expand Down
Loading