@automattic/jetpack-components 0.41.1 → 0.41.2

package/CHANGELOG.md

@@ -2,6 +2,17 @@
 
 ### This is a list detailing changes for the Jetpack RNA Components package releases.
 
+## [0.41.2] - 2023-08-28
+### Added
+- Add uPlot library and boost score graph component [#32016]
+
+### Changed
+- UI: Improve discount elements for pricing section [#32545]
+- Updated package dependencies. [#32016]
+
+### Fixed
+- BoostScoreGraph: add mock module to avoid the mobile editor importing incompatible web dependencies. [#32672]
+
 ## [0.41.1] - 2023-08-09
 ### Changed
 - Updated package dependencies. [#32166]
@@ -783,6 +794,7 @@
 ### Changed
 - Update node version requirement to 14.16.1
 
+[0.41.2]: https://github.com/Automattic/jetpack-components/compare/0.41.1...0.41.2
 [0.41.1]: https://github.com/Automattic/jetpack-components/compare/0.41.0...0.41.1
 [0.41.0]: https://github.com/Automattic/jetpack-components/compare/0.40.4...0.41.0
 [0.40.4]: https://github.com/Automattic/jetpack-components/compare/0.40.3...0.40.4

package/components/boost-score-graph/day-highlight-plugin.ts

@@ -0,0 +1,82 @@
+import uPlot from 'uplot';
+
+/**
+ * Definition of the column highlight plugin.
+ *
+ * @returns {object} The uPlot plugin object with hooks.
+ */
+export function dayHighlightPlugin() {
+	let overEl, highlightEl;
+
+	/**
+	 * Initialize the plugin
+	 *
+	 * @param {uPlot} u - The uPlot instance.
+	 */
+	function init( u: uPlot ) {
+		overEl = u.over;
+
+		highlightEl = document.createElement( 'div' );
+
+		highlightEl.classList.add( 'day-highlighter' );
+
+		uPlot.assign( highlightEl.style, {
+			pointerEvents: 'none',
+			display: 'none',
+			position: 'absolute',
+			left: 0,
+			top: 0,
+			height: '100%',
+			backgroundColor: 'rgba(0,0,0,0.04)',
+		} );
+
+		overEl.appendChild( highlightEl );
+
+		// show/hide highlight on enter/exit
+		overEl.addEventListener( 'mouseenter', () => {
+			highlightEl.style.display = null;
+		} );
+		overEl.addEventListener( 'mouseleave', () => {
+			highlightEl.style.display = 'none';
+		} );
+	}
+
+	/**
+	 * On update
+	 *
+	 * @param {uPlot} u - The uPlot instance.
+	 */
+	function update( u ) {
+		const { idx } = u.cursor;
+
+		// Timestamp of the cursor position
+		const timestamp = u.data[ 0 ][ idx ];
+
+		// Find start and end of day for the cursor position
+		const startOfDay = timestamp - ( timestamp % 86400 );
+		const endOfDay = startOfDay + 86400;
+
+		// Find the left position, and width of the box, bounded by the range of the graph
+		const boxLeft = u.valToPos( Math.max( startOfDay, u.scales.x.min ), 'x' );
+		const boxWidth = u.valToPos( Math.min( endOfDay, u.scales.x.max ), 'x' ) - boxLeft;
+
+		// Update the highlight box
+		highlightEl.style.transform = 'translateX(' + Math.round( boxLeft ) + 'px)';
+		highlightEl.style.width = Math.round( boxWidth ) + 'px';
+	}
+
+	return {
+		opts: ( u, opts ) => {
+			uPlot.assign( opts, {
+				cursor: {
+					x: false,
+					y: false,
+				},
+			} );
+		},
+		hooks: {
+			init: init,
+			setCursor: update,
+		},
+	};
+}

package/components/boost-score-graph/get-date-format.ts

@@ -0,0 +1,59 @@
+// because 'en' defaults to the OS variant - replace numeric month with short month to avoid ambiguity
+const MONTH_FORMAT = 'short';
+
+/**
+ * Returns a formatted date based on the provided template and locale.
+ *
+ * @param {string} template - The template used to format the date.
+ * @param {Date} date - The date object to be formatted.
+ * @param {string} [locale='en'] - The locale code specifying the language and region to be used for formatting. Default 'en'.
+ * @returns {string} The formatted date as a string.
+ */
+export default function getDateFormat( template: string, date: Date, locale = 'en' ): string {
+	let newDayMonthFormat;
+	let newYearFormat;
+
+	switch ( template ) {
+		case '{M}/{D}':
+			// only show day and month in a local format.
+			return date.toLocaleDateString( locale, { month: MONTH_FORMAT, day: 'numeric' } );
+		case '{M}/{D}\n{YYYY}':
+			// Show day, month and a year in local format.
+			newDayMonthFormat = date.toLocaleDateString( locale, {
+				month: MONTH_FORMAT,
+				day: 'numeric',
+			} );
+
+			newYearFormat = date.toLocaleDateString( locale, {
+				year: 'numeric',
+			} );
+
+			// add new line to match the format
+			return `${ newDayMonthFormat }\n${ newYearFormat }`;
+		case '{MMM}':
+			// only month
+			return date.toLocaleDateString( locale, {
+				month: MONTH_FORMAT,
+			} );
+		case '{MMM}\n{YYYY}':
+			// month and year
+			newDayMonthFormat = date.toLocaleDateString( locale, {
+				month: MONTH_FORMAT,
+			} );
+
+			newYearFormat = date.toLocaleDateString( locale, {
+				year: 'numeric',
+			} );
+
+			// add new line to match the format
+			return `${ newDayMonthFormat }\n${ newYearFormat }`;
+		case '{h}{aa}':
+			return '';
+		default:
+			// only show day and month in a local format.
+			return date.toLocaleDateString( locale, { month: MONTH_FORMAT, day: 'numeric' } );
+	}
+
+	// fallback that shouldn't happen.
+	return date.toLocaleDateString( locale );
+}

package/components/boost-score-graph/index.native.js

@@ -0,0 +1 @@
+export default () => null;

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

@@ -0,0 +1,68 @@
+import React, { type FunctionComponent } from 'react';
+import uPlot from 'uplot';
+import Text from '../text';
+import UplotLineChart from './uplot-line-chart';
+import { useBoostScoreTransform } from './use-boost-score-transform';
+
+export interface Period {
+	timestamp: number;
+	dimensions: {
+		desktop_overall_score: number;
+		desktop_lcp: number;
+		desktop_cls: number;
+		desktop_tbt: number;
+		mobile_overall_score: number;
+		mobile_lcp: number;
+		mobile_cls: number;
+		mobile_tbt: number;
+	};
+}
+export interface BoostScoreGraphProps {
+	periods: Period[];
+	startDate: number;
+	endDate: number;
+	title?: string;
+	isLoading?: boolean;
+}
+
+/**
+ * BoostScoreGraph component composed by the chart and the legend.
+ *
+ * @param {BoostScoreGraphProps} props - The props object for the BoostScoreGraph component.
+ * @param {uPlot.AlignedData} props.data - The data used to render the uPlotLineChart.
+ * @param {string} props.title - Title for the chart.
+ * @param {boolean} [props.isLoading=false] - Whether the component is in a loading state.
+ * @returns {React.ReactElement} The JSX element representing the BoostScoreGraph component, or null if loading.
+ */
+export const BoostScoreGraph: FunctionComponent< BoostScoreGraphProps > = ( {
+	periods,
+	startDate,
+	endDate,
+	title,
+	isLoading = false,
+} ) => {
+	// Sort periods by timestamp
+	periods.sort( ( a, b ) => a.timestamp - b.timestamp );
+
+	// @todo Remove this once we have a proper date range picker
+	const dayBeforeEndDate = endDate - 24 * 60 * 60 * 1000;
+	// Adjust the start date based on available data
+	if ( periods.length > 0 ) {
+		startDate = Math.min( periods[ 0 ].timestamp - 12 * 60 * 60 * 1000, dayBeforeEndDate );
+	} else {
+		startDate = dayBeforeEndDate;
+	}
+
+	const data = useBoostScoreTransform( periods );
+	if ( isLoading || ! data?.length ) {
+		return null;
+	}
+	return (
+		<div className="jb-score-graph">
+			{ title && <Text variant="title-medium">{ title }</Text> }
+			<UplotLineChart data={ data } periods={ periods } range={ { startDate, endDate } } />
+		</div>
+	);
+};
+
+export default BoostScoreGraph;

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

@@ -0,0 +1,187 @@
+import { BoostScoreGraph } from '..';
+import type { Meta } from '@storybook/react';
+
+const exampleRawResponse = {
+	data: {
+		_meta: {
+			start: 1689772803000,
+			end: 1690647000000,
+		},
+		periods: [
+			{
+				timestamp: 1690636803000,
+				dimensions: {
+					desktop_overall_score: 86,
+					mobile_overall_score: 52,
+					desktop_cls: 0.088,
+					desktop_lcp: 3.2,
+					desktop_tbt: 0,
+					mobile_cls: 0.088,
+					mobile_lcp: 3.2,
+					mobile_tbt: 0,
+				},
+			},
+			{
+				timestamp: 1689772803000,
+				dimensions: {
+					desktop_overall_score: 75,
+					mobile_overall_score: 52,
+					desktop_cls: 0.088,
+					desktop_lcp: 3.2,
+					desktop_tbt: 0,
+					mobile_cls: 0.088,
+					mobile_lcp: 3.2,
+					mobile_tbt: 0,
+				},
+			},
+			{
+				timestamp: 1689859203000,
+				dimensions: {
+					desktop_overall_score: 72,
+					mobile_overall_score: 49,
+					desktop_cls: 0.088,
+					desktop_lcp: 3.2,
+					desktop_tbt: 0,
+					mobile_cls: 0.088,
+					mobile_lcp: 3.2,
+					mobile_tbt: 0,
+				},
+			},
+			{
+				timestamp: 1689945603000,
+				dimensions: {
+					desktop_overall_score: 20,
+					mobile_overall_score: 30,
+					desktop_cls: 0.088,
+					desktop_lcp: 3.2,
+					desktop_tbt: 0,
+					mobile_cls: 0.088,
+					mobile_lcp: 3.2,
+					mobile_tbt: 0,
+				},
+			},
+			{
+				timestamp: 1690032003000,
+				dimensions: {
+					desktop_overall_score: 72,
+					mobile_overall_score: 40,
+					desktop_cls: 0.088,
+					desktop_lcp: 3.2,
+					desktop_tbt: 0,
+					mobile_cls: 0.088,
+					mobile_lcp: 3.2,
+					mobile_tbt: 0,
+				},
+			},
+			{
+				timestamp: 1690118403000,
+				dimensions: {
+					desktop_overall_score: 55,
+					mobile_overall_score: 45,
+					desktop_cls: 0.088,
+					desktop_lcp: 3.2,
+					desktop_tbt: 0,
+					mobile_cls: 0.088,
+					mobile_lcp: 3.2,
+					mobile_tbt: 0,
+				},
+			},
+			{
+				timestamp: 1690204803000,
+				dimensions: {
+					desktop_overall_score: 75,
+					mobile_overall_score: 52,
+					desktop_cls: 0.088,
+					desktop_lcp: 3.2,
+					desktop_tbt: 0,
+					mobile_cls: 0.088,
+					mobile_lcp: 3.2,
+					mobile_tbt: 0,
+				},
+			},
+			{
+				timestamp: 1690291203000,
+				dimensions: {
+					desktop_overall_score: 70,
+					mobile_overall_score: 50,
+					desktop_cls: 0.088,
+					desktop_lcp: 3.2,
+					desktop_tbt: 0,
+					mobile_cls: 0.088,
+					mobile_lcp: 3.2,
+					mobile_tbt: 0,
+				},
+			},
+			{
+				timestamp: 1690377603000,
+				dimensions: {
+					desktop_overall_score: 75,
+					mobile_overall_score: 90,
+					desktop_cls: 0.088,
+					desktop_lcp: 3.2,
+					desktop_tbt: 0,
+					mobile_cls: 0.088,
+					mobile_lcp: 3.2,
+					mobile_tbt: 0,
+				},
+			},
+			{
+				timestamp: 1690464003000,
+				dimensions: {
+					desktop_overall_score: 80,
+					mobile_overall_score: 60,
+					desktop_cls: 0.088,
+					desktop_lcp: 3.2,
+					desktop_tbt: 0,
+					mobile_cls: 0.088,
+					mobile_lcp: 3.2,
+					mobile_tbt: 0,
+				},
+			},
+			{
+				timestamp: 1690550403000,
+				dimensions: {
+					desktop_overall_score: 85,
+					mobile_overall_score: 60,
+					desktop_cls: 0.088,
+					desktop_lcp: 3.2,
+					desktop_tbt: 0,
+					mobile_cls: 0.088,
+					mobile_lcp: 3.2,
+					mobile_tbt: 0,
+				},
+			},
+		],
+	},
+};
+
+const meta: Meta< typeof BoostScoreGraph > = {
+	title: 'JS Packages/Components/Boost Score Graph',
+	component: BoostScoreGraph,
+	argTypes: {
+		startDate: { control: 'date' },
+		endDate: { control: 'date' },
+		title: { control: 'string', defaultValue: 'Title' },
+		isLoading: { control: 'boolean', defaultValue: false },
+	},
+	decorators: [
+		Story => (
+			<div style={ { width: '80%', maxWidth: '1320px', margin: '200px auto', fontSize: '16px' } }>
+				<Story />
+			</div>
+		),
+	],
+};
+
+const defaultValues = {
+	startDate: exampleRawResponse.data._meta.start,
+	endDate: exampleRawResponse.data._meta.end,
+	periods: exampleRawResponse.data.periods,
+	isLoading: false,
+};
+
+export default meta;
+
+const Template = args => <BoostScoreGraph { ...args } />;
+export const _default = Template.bind( {} );
+_default.args = defaultValues;

package/components/boost-score-graph/stories/tooltip.stories.tsx

@@ -0,0 +1,41 @@
+import { Tooltip } from '../tooltip';
+import type { Meta } from '@storybook/react';
+
+const meta: Meta< typeof Tooltip > = {
+	title: 'JS Packages/Components/Boost Score Tooltip',
+	component: Tooltip,
+	argTypes: {
+		period: {
+			control: 'object',
+		},
+	},
+	decorators: [
+		Story => (
+			<div style={ { width: '300px', margin: '200px auto', fontSize: '16px' } }>
+				<Story />
+			</div>
+		),
+	],
+};
+
+export default meta;
+
+const Template = args => {
+	return <Tooltip { ...args } />;
+};
+export const _default = Template.bind( {} );
+_default.args = {
+	period: {
+		timestamp: 1689772803000,
+		dimensions: {
+			desktop_overall_score: 75,
+			mobile_overall_score: 52,
+			desktop_cls: 0.088,
+			desktop_lcp: 3.2,
+			desktop_tbt: 0,
+			mobile_cls: 0.088,
+			mobile_lcp: 3.2,
+			mobile_tbt: 0,
+		},
+	},
+};

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

@@ -0,0 +1,52 @@
+$grey: #8e8e8e;
+$black: #101517;
+$white: #ffffff;
+
+.jb-score-tooltip {
+    background-color: $black;
+    color: $white;
+    width: fit-content;
+    padding: 16px 24px;
+    border-radius: 4px;
+    font-size: 14px;
+    width: 20em;
+    position: relative;
+    box-shadow: 0px 1px 2px 0px rgba(0, 0, 0, 0.05);
+
+    hr {
+        border-top: 1px solid $grey;
+        border-bottom: none;
+        border-left: none;
+        border-right: none;
+    }
+
+    &__date {
+        font-size: 1em;
+        font-weight: 600;
+        line-height: 1.6em;
+    }
+
+    &__row {
+        display: flex;
+        flex-direction: row;
+        justify-content: space-between;
+        margin: 0.9em 0;
+
+        &--secondary {
+            color: $grey;
+            margin-left: 1em;
+        }
+    }
+
+    &__pointer {
+        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%);
+    }
+}

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

@@ -0,0 +1,5 @@
+/*
+This is a bit of a cheating. The content are copied from node_modules/uplot/dist/uPlot.min.css.
+This is because if the css file imports directly from the css file sass-loader is not loading it. And if we import it from the js file, it breaks jest.
+*/
+.uplot, .uplot *, .uplot *::before, .uplot *::after {box-sizing: border-box;}.uplot {font-family: system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial, "Noto Sans", sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", "Noto Color Emoji";line-height: 1.5;width: min-content;}.u-title {text-align: center;font-size: 18px;font-weight: bold;}.u-wrap {position: relative;user-select: none;}.u-over, .u-under {position: absolute;}.u-under {overflow: hidden;}.uplot canvas {display: block;position: relative;width: 100%;height: 100%;}.u-axis {position: absolute;}.u-legend {font-size: 14px;margin: auto;text-align: center;}.u-inline {display: block;}.u-inline * {display: inline-block;}.u-inline tr {margin-right: 16px;}.u-legend th {font-weight: 600;}.u-legend th > * {vertical-align: middle;display: inline-block;}.u-legend .u-marker {width: 1em;height: 1em;margin-right: 4px;background-clip: padding-box !important;}.u-inline.u-live th::after {content: ":";vertical-align: middle;}.u-inline:not(.u-live) .u-value {display: none;}.u-series > * {padding: 4px;}.u-series th {cursor: pointer;}.u-legend .u-off > * {opacity: 0.3;}.u-select {background: rgba(0,0,0,0.07);position: absolute;pointer-events: none;}.u-cursor-x, .u-cursor-y {position: absolute;left: 0;top: 0;pointer-events: none;will-change: transform;z-index: 100;}.u-hz .u-cursor-x, .u-vt .u-cursor-y {height: 100%;border-right: 1px dashed #607D8B;}.u-hz .u-cursor-y, .u-vt .u-cursor-x {width: 100%;border-bottom: 1px dashed #607D8B;}.u-cursor-pt {position: absolute;top: 0;left: 0;border-radius: 50%;border: 0 solid;pointer-events: none;will-change: transform;z-index: 100;/*this has to be !important since we set inline "background" shorthand */background-clip: padding-box !important;}.u-axis.u-off, .u-select.u-off, .u-cursor-x.u-off, .u-cursor-y.u-off, .u-cursor-pt.u-off {display: none;}

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

@@ -0,0 +1,87 @@
+import { getScoreLetter } from '@automattic/jetpack-boost-score-api';
+import { dateI18n } from '@wordpress/date';
+import { __, sprintf } from '@wordpress/i18n';
+import { type FunctionComponent } from 'react';
+import './style-tooltip.scss';
+import { Period } from '.';
+
+export const Tooltip: FunctionComponent = ( { period }: { period: Period } ) => {
+	if ( ! period || ! period.dimensions || ! period.timestamp ) {
+		return null;
+	}
+	const {
+		mobile_overall_score,
+		desktop_overall_score,
+		desktop_cls,
+		desktop_lcp,
+		desktop_tbt,
+		mobile_cls,
+		mobile_lcp,
+		mobile_tbt,
+	} = period.dimensions;
+	const scoreLetter = getScoreLetter( mobile_overall_score, desktop_overall_score );
+	const date = dateI18n( 'F j, Y', new Date( period.timestamp ), false );
+
+	return (
+		<div className="jb-score-tooltip">
+			<div className="jb-score-tooltip__date">{ date }</div>
+			<div className="jb-score-tooltip__row">
+				<div className="jb-score-tooltip__column">{ __( 'Overall score', 'jetpack' ) }</div>
+				<div className="jb-score-tooltip__column">{ scoreLetter }</div>
+			</div>
+			<hr />
+			<div className="jb-score-tooltip__row">
+				<div className="jb-score-tooltip__column">{ __( 'Desktop score', 'jetpack' ) }</div>
+				<div className="jb-score-tooltip__column">
+					{
+						/* translators: %d is the score */
+						sprintf( __( '%d / 100', 'jetpack' ), desktop_overall_score )
+					}
+				</div>
+			</div>
+			<div className="jb-score-tooltip__row jb-score-tooltip__row--secondary">
+				<div className="jb-score-tooltip__column">
+					{ __( 'Largest Contentful Paint', 'jetpack' ) }
+				</div>
+				<div className="jb-score-tooltip__column">{ sprintf( '%0.2fs', desktop_lcp ) }</div>
+			</div>
+			<div className="jb-score-tooltip__row jb-score-tooltip__row--secondary">
+				<div className="jb-score-tooltip__column">{ __( 'Total Blocking Time', 'jetpack' ) }</div>
+				<div className="jb-score-tooltip__column">{ sprintf( '%0.2fs', desktop_tbt ) }</div>
+			</div>
+			<div className="jb-score-tooltip__row jb-score-tooltip__row--secondary">
+				<div className="jb-score-tooltip__column">
+					{ __( 'Cumulative Layout Shift', 'jetpack' ) }
+				</div>
+				<div className="jb-score-tooltip__column">{ sprintf( '%0.2f', desktop_cls ) }</div>
+			</div>
+			<hr />
+			<div className="jb-score-tooltip__row">
+				<div className="jb-score-tooltip__column">{ __( 'Mobile score', 'jetpack' ) }</div>
+				<div className="jb-score-tooltip__column">
+					{
+						/* translators: %d is the score */
+						sprintf( __( '%d / 100', 'jetpack' ), mobile_overall_score )
+					}
+				</div>
+			</div>
+			<div className="jb-score-tooltip__row jb-score-tooltip__row--secondary">
+				<div className="jb-score-tooltip__column">
+					{ __( 'Largest Contentful Paint', 'jetpack' ) }
+				</div>
+				<div className="jb-score-tooltip__column">{ sprintf( '%0.2fs', mobile_lcp ) }</div>
+			</div>
+			<div className="jb-score-tooltip__row jb-score-tooltip__row--secondary">
+				<div className="jb-score-tooltip__column">{ __( 'Total Blocking Time', 'jetpack' ) }</div>
+				<div className="jb-score-tooltip__column">{ sprintf( '%0.2fs', mobile_tbt ) }</div>
+			</div>
+			<div className="jb-score-tooltip__row jb-score-tooltip__row--secondary">
+				<div className="jb-score-tooltip__column">
+					{ __( 'Cumulative Layout Shift', 'jetpack' ) }
+				</div>
+				<div className="jb-score-tooltip__column">{ sprintf( '%0.2f', mobile_cls ) }</div>
+			</div>
+			<div className="jb-score-tooltip__pointer"></div>
+		</div>
+	);
+};

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

@@ -0,0 +1,98 @@
+import ReactDOM from 'react-dom/client';
+import uPlot from 'uplot';
+import { Tooltip } from './tooltip';
+import { Period } from '.';
+
+/**
+ * Custom tooltips plugin for uPlot.
+ *
+ * @param {Period[]} periods - The periods to display in the tooltip.
+ * @returns {object} The uPlot plugin object with hooks.
+ */
+export function tooltipsPlugin( periods ) {
+	const reactRoot = document.createElement( 'div' );
+	let reactDom;
+
+	/**
+	 * Initializes the tooltips plugin.
+	 *
+	 * @param {uPlot} u - The uPlot instance.
+	 * @param {object} _opts - Options for the uPlot instance.
+	 */
+	function init( u, _opts ) {
+		const over = u.over;
+		reactDom = ReactDOM.createRoot( reactRoot );
+		reactRoot.style.position = 'absolute';
+		reactRoot.style.bottom = -20 + 'px';
+		reactRoot.style.translate = '-50% calc( 100% - 20px )';
+
+		over.appendChild( reactRoot );
+
+		/**
+		 * Hides all tooltips.
+		 */
+		function hideTips() {
+			reactRoot.style.display = 'none';
+		}
+
+		/**
+		 * Shows all tooltips.
+		 */
+		function showTips() {
+			reactRoot.style.display = null;
+		}
+
+		over.addEventListener( 'mouseleave', () => {
+			if ( ! u.cursor._lock ) {
+				hideTips();
+			}
+		} );
+
+		over.addEventListener( 'mouseenter', () => {
+			showTips();
+		} );
+
+		if ( u.cursor.left < 0 ) {
+			hideTips();
+		} else {
+			showTips();
+		}
+	}
+
+	/**
+	 * Sets the cursor for tooltips.
+	 *
+	 * @param {uPlot} u - The uPlot instance.
+	 */
+	function setCursor( u ) {
+		const { idx } = u.cursor;
+
+		const period = periods[ idx ];
+
+		// Timestamp of the cursor position
+		const timestamp = u.data[ 0 ][ idx ];
+
+		// Find start and end of day for the cursor position
+		const startOfDay = timestamp - ( timestamp % 86400 );
+		const endOfDay = startOfDay + 86400;
+
+		// Find the left position, and width of the box, bounded by the range of the graph
+		const boxLeft = u.valToPos( Math.max( startOfDay, u.scales.x.min ), 'x' );
+		const boxWidth = u.valToPos( Math.min( endOfDay, u.scales.x.max ), 'x' ) - boxLeft;
+		const boxCenter = boxLeft + boxWidth / 2;
+
+		reactRoot.style.left = boxCenter + 'px';
+		reactDom.render(
+			Tooltip( {
+				period,
+			} )
+		);
+	}
+
+	return {
+		hooks: {
+			init,
+			setCursor,
+		},
+	};
+}

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

@@ -0,0 +1,187 @@
+import { __ } from '@wordpress/i18n';
+import React, { useMemo, useRef, useCallback } from 'react';
+import uPlot from 'uplot';
+import UplotReact from 'uplot-react';
+import { getUserLocale } from '../../lib/locale';
+import numberFormat from '../number-format';
+import { dayHighlightPlugin } from './day-highlight-plugin';
+import getDateFormat from './get-date-format';
+import { tooltipsPlugin } from './tooltips-plugin';
+import useResize from './use-resize';
+import { Period } from '.';
+
+import './style-uplot.scss';
+
+const DEFAULT_DIMENSIONS = {
+	height: 300,
+	width: 600,
+};
+
+interface UplotChartProps {
+	data: uPlot.AlignedData;
+	periods: Period[];
+	options?: Partial< uPlot.Options >;
+	legendContainer?: React.RefObject< HTMLDivElement >;
+	solidFill?: boolean;
+	period?: string;
+	range?: { startDate: number; endDate: number };
+}
+
+/**
+ * Creates a series information object for uPlot based on the label and color.
+ *
+ * @param {string} label - The label for the series.
+ * @param {number} score - The last score for the series.
+ * @returns {object} The series information object.
+ */
+function createSerieInfo( label: string, score ) {
+	const { spline } = uPlot.paths;
+	return {
+		label: label,
+		stroke: getColor( score ),
+		fill: u => {
+			const gradient = u.ctx.createLinearGradient( 0, 0, 0, DEFAULT_DIMENSIONS.height );
+			gradient.addColorStop( 0, getColor( score, '44' ) );
+			gradient.addColorStop( 1, getColor( score, '11' ) );
+
+			return gradient;
+		}, // use the gradient as fill for the series
+		width: 2,
+		paths: ( u, seriesIdx, idx0, idx1 ) => {
+			return spline?.()( u, seriesIdx, idx0, idx1 ) || null;
+		},
+		points: {
+			show: true,
+		},
+		value: ( self: uPlot, rawValue: number ) => {
+			if ( ! rawValue ) {
+				return '-';
+			}
+
+			return numberFormat( rawValue );
+		},
+	};
+}
+
+/**
+ * Get the color value based on the score.
+ *
+ * @param {number} score - The score to get the color for.
+ * @param {string} opacity - Whether to return a transparent color.
+ * @returns {string} The color value.
+ */
+function getColor( score: number, opacity = 'FF' ) {
+	let color = '#D63638'; // bad
+
+	if ( score > 70 ) {
+		color = '#069e08'; // good
+	} else if ( score > 50 ) {
+		color = '#faa754'; //mediocre
+	}
+
+	return `${ color }${ opacity }`;
+}
+
+/**
+ * UplotLineChart component.
+ *
+ * @param {object} props - The props object for the UplotLineChart component.
+ * @param {uPlot.AlignedData} props.data - The data for the uPlot chart.
+ * @param {{ startDate: number, endDate: number }} props.range - The date range of the chart.
+ * @param {Period[]} props.periods - The periods to display in the chart.
+ * @returns {React.Element} The JSX element representing the UplotLineChart component.
+ */
+export default function UplotLineChart( { data, range, periods }: UplotChartProps ) {
+	const uplot = useRef< uPlot | null >( null );
+	const uplotContainer = useRef( null );
+
+	const lastDesktopScore = data[ 1 ][ data[ 1 ].length - 1 ];
+	const lastMobileScore = data[ 2 ][ data[ 2 ].length - 1 ];
+
+	const options: uPlot.Options = useMemo( () => {
+		const defaultOptions: uPlot.Options = {
+			class: 'boost-score-graph',
+			...DEFAULT_DIMENSIONS,
+			tzDate: ts => uPlot.tzDate( new Date( ts * 1e3 ), 'Etc/UTC' ),
+			fmtDate: ( chartDateStringTemplate: string ) => {
+				return date => getDateFormat( chartDateStringTemplate, date, getUserLocale() );
+			},
+			padding: [ 17, 0, 17, 0 ],
+			axes: [
+				{
+					// x-axis
+					grid: {
+						show: false,
+					},
+					ticks: {
+						stroke: '#50575E',
+						width: 1,
+						size: 3,
+					},
+				},
+				{
+					// y-axis
+					side: 1,
+					gap: 8,
+					space: 100,
+					size: 30,
+					grid: {
+						stroke: 'rgba(220, 220, 222, 0.5)', // #DCDCDE with 0.5 opacity
+						width: 1,
+					},
+					ticks: {
+						show: false,
+					},
+				},
+			],
+			cursor: {
+				x: false,
+				y: false,
+			},
+			series: [
+				{
+					label: __( 'Date', 'jetpack' ),
+					value: ( self: uPlot, rawValue: number ) => {
+						// outputs legend content - value available when mouse is hovering the chart
+						if ( ! rawValue ) {
+							return '-';
+						}
+						const date = new Date( rawValue );
+						return date.toLocaleDateString( getUserLocale() );
+					},
+				},
+				createSerieInfo( __( 'Desktop', 'jetpack' ), lastDesktopScore ),
+				createSerieInfo( __( 'Mobile', 'jetpack' ), lastMobileScore ),
+			],
+			scales: {
+				x: {
+					time: true,
+					auto: false,
+					range: [ range.startDate / 1000, range.endDate / 1000 ],
+				},
+				y: {
+					range: [ 0, 100 ],
+					auto: false,
+				},
+			},
+			legend: {
+				show: false,
+			},
+			plugins: [ tooltipsPlugin( periods ), dayHighlightPlugin() ],
+		};
+		return {
+			...defaultOptions,
+		};
+	}, [ lastDesktopScore, lastMobileScore, periods, range.endDate, range.startDate ] );
+
+	useResize( uplot, uplotContainer );
+	const onCreate = useCallback( chart => {
+		return ( uplot.current = chart );
+	}, [] );
+
+	return (
+		<div ref={ uplotContainer }>
+			<UplotReact data={ data } onCreate={ onCreate } options={ options } />
+		</div>
+	);
+}

package/components/boost-score-graph/use-boost-score-transform.ts

@@ -0,0 +1,33 @@
+import { useMemo } from 'react';
+import uPlot from 'uplot';
+import { Period } from './index';
+
+/**
+ * Transforms an array of periods into an array of arrays, where the first array is the timestamps, and the rest are the values for each key
+ *
+ * @param {Period[]} periods - Array of periods to transform
+ * @param {string[]} [keysToExtract = [ 'desktop_overall_score', 'mobile_overall_score' ]] - Array of keys to extract from each period
+ * @returns {uPlot.AlignedData} - Array of arrays, where the first array is the timestamps, and the rest are the values for each key
+ */
+export function useBoostScoreTransform(
+	periods,
+	keysToExtract = [ 'desktop_overall_score', 'mobile_overall_score' ]
+): uPlot.AlignedData {
+	return useMemo( () => {
+		if ( ! periods?.length || ! periods[ 0 ].dimensions ) {
+			return [];
+		}
+		const timestamps = periods.map( ( { timestamp } ) => timestamp / 1000 );
+
+		const valueArray = [];
+		for ( const key of keysToExtract ) {
+			valueArray.push(
+				periods.map( ( { dimensions } ) => {
+					return dimensions[ key ];
+				} )
+			);
+		}
+
+		return [ timestamps, ...valueArray ];
+	}, [ keysToExtract, periods ] );
+}

package/components/boost-score-graph/use-resize.ts

@@ -0,0 +1,40 @@
+import { throttle } from '@wordpress/compose';
+import React, { useEffect } from 'react';
+import uPlot from 'uplot';
+
+const THROTTLE_DURATION = 400; // in ms
+
+/**
+ * Custom hook to handle resizing of uPlot charts.
+ *
+ * @param {React.RefObject<uPlot>} uplotRef - The ref object for the uPlot instance.
+ * @param {React.RefObject<HTMLDivElement>} containerRef - The ref object for the container div.
+ */
+export default function useResize(
+	uplotRef: React.RefObject< uPlot >,
+	containerRef: React.RefObject< HTMLDivElement >
+) {
+	useEffect( () => {
+		if ( ! uplotRef.current || ! containerRef.current ) {
+			return;
+		}
+
+		const resizeChart = throttle( () => {
+			// Repeat the check since resize can happen much later than event registration.
+			if ( ! uplotRef.current || ! containerRef.current ) {
+				return;
+			}
+
+			// Only update width, not height.
+			uplotRef.current.setSize( {
+				height: uplotRef.current.height,
+				width: containerRef.current.clientWidth,
+			} );
+		}, THROTTLE_DURATION );
+		resizeChart();
+		window.addEventListener( 'resize', resizeChart );
+
+		// Cleanup on unmount.
+		return () => window.removeEventListener( 'resize', resizeChart );
+	}, [ uplotRef, containerRef ] );
+}

package/components/product-price/index.tsx

@@ -63,6 +63,11 @@ const ProductPrice: React.FC< ProductPriceProps > = ( {
 							hidePriceFraction={ hidePriceFraction }
 						/>
 					) }
+					{ discountElt && (
+						<Text className={ classnames( styles[ 'promo-label' ], 'product-price_promo_label' ) }>
+							{ discountElt }
+						</Text>
+					) }
 				</div>
 			</div>
 			<div className={ styles.footer }>
@@ -76,11 +81,6 @@ const ProductPrice: React.FC< ProductPriceProps > = ( {
 						{ promoLabel }
 					</Text>
 				) }
-				{ discountElt && (
-					<Text className={ classnames( styles[ 'promo-label' ], 'product-price_promo_label' ) }>
-						{ discountElt }
-					</Text>
-				) }
 			</div>
 		</>
 	);

package/components/product-price/style.module.scss

@@ -6,14 +6,21 @@
 }
 
 .price-container {
+	display: flex;
+    align-items: flex-start;
 	flex-grow: 2;
 	flex-basis: 0;
+
+	.promo-label {
+		margin-left: auto;
+	}
 }
 
 .price {
 	display: inline-flex;
 	align-items: flex-start;
 	position: relative;
+	flex: 0 0 auto;
 
 	&:first-child {
 		margin-right: calc( var( --spacing-base ) * 2 );
@@ -66,4 +73,4 @@
 
 .symbol {
 	font-weight: 400;
-}
+}

package/index.ts

@@ -54,6 +54,7 @@ export {
 	PricingTableItem,
 } from './components/pricing-table';
 export { default as BoostScoreBar } from './components/boost-score-bar';
+export { default as BoostScoreGraph } from './components/boost-score-graph';
 export { default as ProductPrice } from './components/product-price';
 export { default as ProductOffer, IconsCard } from './components/product-offer';
 export { default as Dialog } from './components/dialog';

package/package.json

@@ -1,6 +1,6 @@
 {
 	"name": "@automattic/jetpack-components",
-	"version": "0.41.1",
+	"version": "0.41.2",
 	"description": "Jetpack Components Package",
 	"author": "Automattic",
 	"license": "GPL-2.0-or-later",
@@ -15,6 +15,7 @@
 	},
 	"dependencies": {
 		"@automattic/format-currency": "1.0.1",
+		"@automattic/jetpack-boost-score-api": "^0.1.7",
 		"@babel/runtime": "^7",
 		"@wordpress/browserslist-config": "5.21.0",
 		"@wordpress/components": "25.4.0",
@@ -27,10 +28,12 @@
 		"classnames": "2.3.2",
 		"prop-types": "^15.7.2",
 		"qrcode.react": "3.1.0",
-		"react-slider": "2.0.5"
+		"react-slider": "2.0.5",
+		"uplot": "1.6.24",
+		"uplot-react": "1.1.4"
 	},
 	"devDependencies": {
-		"@automattic/jetpack-base-styles": "^0.6.5",
+		"@automattic/jetpack-base-styles": "^0.6.6",
 		"@babel/core": "7.22.9",
 		"@babel/preset-react": "7.22.5",
 		"@jest/globals": "29.4.3",