@automattic/jetpack-components 0.48.1 → 0.48.3

package/CHANGELOG.md

@@ -2,6 +2,14 @@
 
 ### This is a list detailing changes for the Jetpack RNA Components package releases.
 
+## [0.48.3] - 2024-02-19
+### Added
+- Added support for annotations in graph [#34978]
+
+## [0.48.2] - 2024-02-13
+### Changed
+- Updated package dependencies. [#35608]
+
 ## [0.48.1] - 2024-02-05
 ### Changed
 - Update clicking an icon tooltip to cause the tooltip to show/hide instead of always showing. [#35312]
@@ -937,6 +945,8 @@
 ### Changed
 - Update node version requirement to 14.16.1
 
+[0.48.3]: https://github.com/Automattic/jetpack-components/compare/0.48.2...0.48.3
+[0.48.2]: https://github.com/Automattic/jetpack-components/compare/0.48.1...0.48.2
 [0.48.1]: https://github.com/Automattic/jetpack-components/compare/0.48.0...0.48.1
 [0.48.0]: https://github.com/Automattic/jetpack-components/compare/0.47.0...0.48.0
 [0.47.0]: https://github.com/Automattic/jetpack-components/compare/0.46.0...0.47.0

package/components/boost-score-graph/annotations-plugin.ts

@@ -0,0 +1,70 @@
+import uPlot from 'uplot';
+import { Annotation } from '.';
+
+import './style-annotation.scss';
+
+// eslint-disable-next-line jsdoc/require-returns
+/**
+ * Custom tooltips plugin for uPlot.
+ *
+ * @param {Annotation[]} annotations - The periods to display in the tooltip.
+ */
+export function annotationsPlugin( annotations: Annotation[] ) {
+	let containerEl, annotationsContainer;
+
+	/**
+	 * Initialize the plugin
+	 *
+	 * @param {uPlot} u - The uPlot instance.
+	 */
+	function init( u: uPlot ) {
+		containerEl = u.under;
+
+		annotationsContainer = document.createElement( 'div' );
+
+		annotationsContainer.classList.add( 'jb-graph-annotations' );
+
+		const annotationEl = document.createElement( 'div' );
+		annotationEl.classList.add( 'jb-graph-annotations__annotation' );
+
+		annotations.forEach( annotation => {
+			const lineEl = document.createElement( 'div' );
+			lineEl.classList.add( 'jb-graph-annotations__line' );
+			lineEl.addEventListener( 'mouseenter', () => {
+				annotationEl.innerHTML = annotation.text;
+				annotationEl.style.display = 'block';
+				annotationEl.style.left = u.valToPos( annotation.timestamp / 1000, 'x' ) + 'px';
+			} );
+			lineEl.addEventListener( 'mouseleave', () => {
+				annotationEl.style.display = 'none';
+			} );
+
+			annotation.line = lineEl;
+			annotationsContainer.appendChild( lineEl );
+		} );
+
+		containerEl.appendChild( annotationsContainer );
+		u.over.appendChild( annotationEl );
+	}
+
+	/**
+	 * Called when the chart is resized.
+	 * @param {uPlot} u - The uPlot instance.
+	 */
+	function setSize( u: uPlot ) {
+		annotations.forEach( annotation => {
+			const annotationEl = annotation.line;
+
+			uPlot.assign( annotationEl.style, {
+				left: u.valToPos( annotation.timestamp / 1000, 'x' ) + 'px',
+			} );
+		} );
+	}
+
+	return {
+		hooks: {
+			init,
+			setSize,
+		},
+	};
+}

package/components/boost-score-graph/index.tsx

@@ -17,8 +17,14 @@ export interface Period {
 		mobile_tbt: number;
 	};
 }
+export interface Annotation {
+	timestamp: number;
+	text: string;
+	line?: HTMLElement;
+}
 export interface BoostScoreGraphProps {
 	periods?: Period[];
+	annotations?: Annotation[];
 	startDate?: number;
 	endDate?: number;
 	title?: string;
@@ -42,6 +48,7 @@ export type ScoreGraphAlignedData = [
  */
 export const BoostScoreGraph: FunctionComponent< BoostScoreGraphProps > = ( {
 	periods = [],
+	annotations = [],
 	startDate = 0,
 	endDate = 0,
 	title,
@@ -80,7 +87,11 @@ export const BoostScoreGraph: FunctionComponent< BoostScoreGraphProps > = ( {
 					<Background />
 				</div>
 			) : (
-				<UplotLineChart periods={ periods } range={ { startDate, endDate } } />
+				<UplotLineChart
+					periods={ periods }
+					annotations={ annotations }
+					range={ { startDate, endDate } }
+				/>
 			) }
 		</div>
 	);

package/components/boost-score-graph/style-annotation.scss

@@ -0,0 +1,70 @@
+$black: #101517;
+$white: #ffffff;
+
+.jb-graph-annotations {
+	pointer-events: none;
+	position: relative;
+	left: 0;
+	top: 0;
+	height: 100%;
+	width: 100%;
+	overflow: visible;
+
+	&__line {
+		position: absolute;
+		width: 10px;
+		height: 100%;
+		transform: translateX(-50%);
+		pointer-events: all;
+		width: 10px;
+		z-index: 1;
+
+		/*
+		 * The actual line is a pseudo element because we want to give a bigger hover area.
+		 */
+		&::after {
+			position: absolute;
+			content: '';
+			display: block;
+			width: 2px;
+			height: 100%;
+			background: rgba(146, 175, 215, 0.5);
+			left: calc(50% - 1px);
+		}
+
+		&:hover {
+			&::after {
+				background: rgba(146, 175, 215, 1);
+			}
+		}
+	}
+
+	&__annotation {
+		&::after {
+			content: '';
+			width: 0;
+			height: 0;
+			border-left: 8px solid transparent;
+			border-right: 8px solid transparent;
+			border-bottom: 8px solid $black;
+			position: absolute;
+			top: -7px;
+			left: 50%;
+			transform: translateX(-50%);
+		}
+
+		display: none;
+		top: 100%;
+		background-color: $black;
+		color: $white;
+		width: fit-content;
+		padding: 16px 24px;
+		border-radius: 4px;
+		font-size: 14px;
+		position: relative;
+		box-shadow: 0px 1px 2px 0px rgba(0, 0, 0, 0.05);
+		text-align: center;
+		transform: translateX(-50%);
+		z-index: 2;
+	}
+}

package/components/boost-score-graph/tooltips-plugin.ts

@@ -20,13 +20,14 @@ export function tooltipsPlugin( periods ) {
 	 * @param {object} _opts - Options for the uPlot instance.
 	 */
 	function init( u, _opts ) {
-		const over = u.over;
+		const container = u.over;
 		reactDom = ReactDOM.createRoot( reactRoot );
 		reactRoot.style.position = 'absolute';
 		reactRoot.style.bottom = -20 + 'px';
 		reactRoot.style.translate = '-50% calc( 100% - 20px )';
+		reactRoot.style.zIndex = '1000';
 
-		over.appendChild( reactRoot );
+		container.appendChild( reactRoot );
 
 		/**
 		 * Hides all tooltips.
@@ -42,21 +43,15 @@ export function tooltipsPlugin( periods ) {
 			reactRoot.style.display = null;
 		}
 
-		over.addEventListener( 'mouseleave', () => {
+		container.addEventListener( 'mouseleave', () => {
 			if ( ! u.cursor._lock ) {
 				hideTips();
 			}
 		} );
 
-		over.addEventListener( 'mouseenter', () => {
+		container.addEventListener( 'mouseenter', () => {
 			showTips();
 		} );
-
-		if ( u.cursor.left < 0 ) {
-			hideTips();
-		} else {
-			showTips();
-		}
 	}
 
 	/**

package/components/boost-score-graph/uplot-line-chart.tsx

@@ -4,13 +4,13 @@ import uPlot from 'uplot';
 import UplotReact from 'uplot-react';
 import { getUserLocale } from '../../lib/locale';
 import numberFormat from '../number-format';
+import { annotationsPlugin } from './annotations-plugin';
 import { dayHighlightPlugin } from './day-highlight-plugin';
 import getDateFormat from './get-date-format';
 import { tooltipsPlugin } from './tooltips-plugin';
 import { useBoostScoreTransform } from './use-boost-score-transform';
 import useResize from './use-resize';
-import { Period } from '.';
-
+import { type Annotation, Period } from '.';
 import './style-uplot.scss';
 
 const DEFAULT_DIMENSIONS = {
@@ -20,6 +20,7 @@ const DEFAULT_DIMENSIONS = {
 
 interface UplotChartProps {
 	periods: Period[];
+	annotations?: Annotation[];
 	options?: Partial< uPlot.Options >;
 	legendContainer?: React.RefObject< HTMLDivElement >;
 	solidFill?: boolean;
@@ -88,9 +89,10 @@ function getColor( score: number, opacity = 'FF' ) {
  * @param {object} props - The props object for the UplotLineChart component.
  * @param {{ startDate: number, endDate: number }} props.range - The date range of the chart.
  * @param {Period[]} props.periods - The periods to display in the chart.
+ * @param {Annotation[]} props.annotations - The annotations to display in the chart.
  * @returns {React.Element} The JSX element representing the UplotLineChart component.
  */
-export default function UplotLineChart( { range, periods }: UplotChartProps ) {
+export default function UplotLineChart( { range, periods, annotations = [] }: UplotChartProps ) {
 	const uplot = useRef< uPlot | null >( null );
 	const uplotContainer = useRef( null );
 
@@ -176,12 +178,24 @@ export default function UplotLineChart( { range, periods }: UplotChartProps ) {
 			legend: {
 				show: false,
 			},
-			plugins: [ tooltipsPlugin( periods ), dayHighlightPlugin() ],
+			plugins: [
+				annotationsPlugin( annotations ),
+				tooltipsPlugin( periods ),
+				dayHighlightPlugin(),
+			],
 		};
 		return {
 			...defaultOptions,
 		};
-	}, [ width, lastDesktopScore, lastMobileScore, periods, range.endDate, range.startDate ] );
+	}, [
+		width,
+		lastDesktopScore,
+		lastMobileScore,
+		range.startDate,
+		range.endDate,
+		periods,
+		annotations,
+	] );
 
 	useResize( uplot, uplotContainer );
 	const onCreate = useCallback( chart => {

package/package.json

@@ -1,6 +1,6 @@
 {
 	"name": "@automattic/jetpack-components",
-	"version": "0.48.1",
+	"version": "0.48.3",
 	"description": "Jetpack Components Package",
 	"author": "Automattic",
 	"license": "GPL-2.0-or-later",
@@ -15,16 +15,16 @@
 	},
 	"dependencies": {
 		"@automattic/format-currency": "1.0.1",
-		"@automattic/jetpack-boost-score-api": "^0.1.21",
+		"@automattic/jetpack-boost-score-api": "^0.1.23",
 		"@babel/runtime": "^7",
-		"@wordpress/browserslist-config": "5.33.0",
-		"@wordpress/components": "25.16.0",
-		"@wordpress/compose": "6.27.0",
-		"@wordpress/data": "9.20.0",
-		"@wordpress/date": "4.50.0",
-		"@wordpress/element": "5.27.0",
-		"@wordpress/i18n": "4.50.0",
-		"@wordpress/icons": "9.41.0",
+		"@wordpress/browserslist-config": "5.34.0",
+		"@wordpress/components": "26.0.0",
+		"@wordpress/compose": "6.28.0",
+		"@wordpress/data": "9.21.0",
+		"@wordpress/date": "4.51.0",
+		"@wordpress/element": "5.28.0",
+		"@wordpress/i18n": "4.51.0",
+		"@wordpress/icons": "9.42.0",
 		"classnames": "2.3.2",
 		"prop-types": "^15.7.2",
 		"qrcode.react": "3.1.0",
@@ -34,7 +34,7 @@
 		"uplot-react": "1.1.4"
 	},
 	"devDependencies": {
-		"@automattic/jetpack-base-styles": "^0.6.16",
+		"@automattic/jetpack-base-styles": "^0.6.17",
 		"@babel/core": "7.23.5",
 		"@babel/preset-react": "7.23.3",
 		"@jest/globals": "29.4.3",