Stats: Add line chart for real-time stats prototype

client/my-sites/stats/components/line-chart/index.tsx

@@ -0,0 +1,95 @@
+import { LineChart, ThemeProvider } from '@automattic/charts';
+import { useTranslate } from 'i18n-calypso';
+import { Moment } from 'moment';
+import { useEffect, useState } from 'react';
+import { withLocalizedMoment } from 'calypso/components/localized-moment';
+import StatsEmptyState from '../../stats-empty-state';
+
+const fixtureData = [
+	{
+		label: 'Views',
+		options: {
+			stroke: '#069e08',
+		},
+		data: [] as Array< { date: Date; value: number } >,
+	},
+];
+
+function StatsLineChart( {
+	chartData = null,
+	height = 400,
+	moment,
+	EmptyState = StatsEmptyState,
+}: {
+	chartData: Array< {
+		label: string;
+		options: object;
+		data: Array< { date: Date; value: number } >;
+	} > | null;
+	height?: number;
+	moment: Moment;
+	EmptyState: typeof StatsEmptyState;
+} ) {
+	const [ data, setData ] = useState( () => chartData || fixtureData );
+	const formatTime = ( value: number ) => {
+		const date = new Date( value );
+		return new Date( date ).toLocaleTimeString( moment.locale(), {
+			hour: '2-digit',
+			minute: '2-digit',
+			hour12: true,
+		} );
+	};
+	const translate = useTranslate();
+
+	useEffect( () => {
+		const intervalId = setInterval( () => {
+			if ( fixtureData[ 0 ].data.length > 30 ) {
+				fixtureData[ 0 ].data.pop();
+			}
+
+			const date = new Date();
+			fixtureData[ 0 ].data.unshift( { date, value: Math.round( Math.random() * 60 ) } );
+			setData( [ ...fixtureData ] );
+		}, 60 * 1000 );
+		return () => clearInterval( intervalId );
+	}, [] );
+
+	return (
+		<div className="stats-line-chart">
+			{ data?.[ 0 ]?.data?.length === 0 && (
+				<EmptyState
+					headingText={ translate( 'Real-time views' ) }
+					infoText={ translate( 'Collecting data… auto-refreshing in a minute…' ) }
+				/>
+			) }
+			<ThemeProvider
+				theme={ {
+					backgroundColor: '#FFFFFF', // chart background color
+					labelBackgroundColor: '#FFFFFF', // label background color
+					colors: [ '#069E08', '#E68B28', '#98C8DF', '#006DAB', '#A6DC80', '#1F9828', '#FF8C8F' ], //colors for series
+					gridStyles: {
+						stroke: '#DCDCDE',
+						strokeWidth: 1,
+					},
+					tickLength: 4,
+					gridColor: '',
+					gridColorDark: '',
+					xTickLineStyles: { stroke: 'black' },
+					xAxisLineStyles: { stroke: '#DCDCDE', strokeWidth: 1 },
+				} }
+			>
+				<LineChart
+					data={ data }
+					withTooltips
+					withGradientFill
+					height={ height }
+					/** naturalCurve sometime goes off the grid :( */
+					margin={ { left: 15, top: 30 } }
+					options={ { axis: { x: { tickFormat: formatTime }, y: { orientation: 'right' } } } }
+				/>
+			</ThemeProvider>
+		</div>
+	);
+}
+
+export default withLocalizedMoment( StatsLineChart );

client/my-sites/stats/pages/realtime/index.jsx

@@ -3,6 +3,7 @@ import { useTranslate } from 'i18n-calypso';
 import { useSelector } from 'react-redux';
 import StatsNavigation from 'calypso/blocks/stats-navigation';
 import { navItems } from 'calypso/blocks/stats-navigation/constants';
+import AsyncLoad from 'calypso/components/async-load';
 import DocumentHead from 'calypso/components/data/document-head';
 import JetpackColophon from 'calypso/components/jetpack-colophon';
 import Main from 'calypso/components/main';
@@ -12,8 +13,11 @@ import { getSelectedSiteId, getSelectedSiteSlug } from 'calypso/state/ui/selecto
 import AnnualHighlightsSection from '../../sections/annual-highlights-section';
 import PageViewTracker from '../../stats-page-view-tracker';
 import statsStrings from '../../stats-strings';
+import PageLoading from '../shared/page-loading';
 import StatsModuleListing from '../shared/stats-module-listing';
 
+import './style.scss';
+
 function StatsRealtime() {
 	const siteId = useSelector( ( state ) => getSelectedSiteId( state ) );
 	const siteSlug = useSelector( ( state ) => getSelectedSiteSlug( state, siteId ) );
@@ -53,7 +57,11 @@ function StatsRealtime() {
 				></NavigationHeader>
 				<StatsNavigation selectedItem="realtime" siteId={ siteId } slug={ siteSlug } />
 				<AnnualHighlightsSection siteId={ siteId } />
-
+				<AsyncLoad
+					require="calypso/my-sites/stats/components/line-chart"
+					height={ 425 }
+					placeholder={ PageLoading }
+				/>
 				<StatsModuleListing className="stats__module-list--insights" siteId={ siteId }>
 					<StatsModuleTopPosts
 						moduleStrings={ moduleStrings.posts }

client/my-sites/stats/pages/realtime/style.scss

@@ -0,0 +1,18 @@
+.stats-line-chart {
+	position: relative;
+	margin: 32px 0;
+
+	.line-chart {
+		background-color: var(--studio-white);
+		border: 1px solid var(--studio-gray-5);
+		border-radius: 4px;
+	}
+
+	.stats__empty-state {
+		max-width: 75%;
+		position: absolute;
+		top: 30%;
+		left: 50%;
+		transform: translate(-50%, 0);
+	}
+}

package.json

@@ -149,6 +149,7 @@
 		"@automattic/calypso-products": "workspace:^",
 		"@automattic/calypso-razorpay": "workspace:^",
 		"@automattic/calypso-router": "workspace:^",
+		"@automattic/charts": "^0.7.1",
 		"@automattic/color-studio": "^3.0.1",
 		"@automattic/command-palette": "workspace:^",
 		"@automattic/components": "workspace:^",