[feat] Add test date to title

- Remove test date from Charts
- Update font sizes

dashboard/assets/packages/report/src/App/App.tsx

@@ -21,7 +21,7 @@ interface AppProps {
 export default function App({ digest }: AppProps) {
   return (
     <Flex as="main" className={toClassName(theme, styles.main)} direction="column" gap={4}>
-      <Header />
+      <Header digest={digest} />
 
       {digest.config.tabs.map((tab) => (
         <Tab key={tab.id} tab={tab} digest={digest} />

dashboard/assets/packages/report/src/components/Chart/Chart.css.ts

@@ -2,7 +2,7 @@
 //
 // SPDX-License-Identifier: AGPL-3.0-only
 
-import { globalStyle, style } from "@vanilla-extract/css"
+import { style } from "@vanilla-extract/css"
 
 import { vars } from "theme"
 
@@ -12,20 +12,10 @@ export const uplot = style({
 
 export const title = style({
   color: vars.colors.text.secondary,
-  fontSize: vars.fontSizes.size5,
   fontWeight: vars.fontWeights.weight500
 })
 
 export const chart = style({
   marginTop: vars.sizes.size1,
   marginBottom: vars.sizes.size1
 })
-
-globalStyle(`${uplot} > .u-title`, {
-  fontSize: vars.fontSizes.size6,
-  fontWeight: `${vars.fontWeights.weight300} !important`
-})
-
-globalStyle(`${uplot} .u-label`, {
-  fontWeight: `${vars.fontWeights.weight300} !important`
-})

dashboard/assets/packages/report/src/components/Chart/Chart.tsx

@@ -34,7 +34,7 @@ export default function Chart({ panel, digest }: ChartProps) {
 
   return (
     <div ref={ref} className={styles.chart}>
-      <h3 className={styles.title}>{panel.title}</h3>
+      <h4 className={styles.title}>{panel.title}</h4>
       <UplotReact options={options} data={plot.data as AlignedData} />
     </div>
   )

dashboard/assets/packages/report/src/components/Chart/Chart.utils.ts

@@ -1,14 +1,26 @@
 import uPlot, { type Axis, type Options, type Series } from "uplot"
 import { type UnitType } from "@xk6-dashboard/model"
-import { dateFormats, format, tooltipPlugin, type SeriesPlot } from "@xk6-dashboard/view"
+import { format, tooltipPlugin, type SeriesPlot } from "@xk6-dashboard/view"
 
 import { common, grey } from "theme/colors.css"
 
+import * as styles from "./Chart.css"
+
 const AXIS_SIDE = 1
 const AXIS_SIZE = 70
 
 const sync = uPlot.sync("chart")
 
+const dateFormats = [
+  [3600 * 24 * 365, null, null, null, null, null, null, null, 1],
+  [3600 * 24 * 28, null, null, null, null, null, null, null, 1],
+  [3600 * 24, null, null, null, null, null, null, null, 1],
+  [3600, "{HH}", null, null, null, null, null, null, 1],
+  [60, "{HH}:{mm}", null, null, null, null, null, null, 1],
+  [1, ":{ss}", null, null, null, null, null, null, 1],
+  [0.001, ":{ss}.{fff}", null, null, null, null, null, null, 1]
+]
+
 const getAxisValues = (unit: UnitType, index: number) => {
   if (index === 0) {
     return dateFormats
@@ -49,6 +61,7 @@ export const createOptions = ({ plot, width }: CreateOptionsProps): Options => {
   const axes = units.map(createAxis(units.length))
 
   return {
+    class: styles.uplot,
     width: width,
     height: 250,
     cursor: { sync: { key: sync.key } },

dashboard/assets/packages/report/src/components/Grid/Grid.css.ts

@@ -19,7 +19,7 @@ export const containerBase = style({
 const containerProperties = defineProperties({
   properties: {
     gap: {
-      1: vars.sizes.size000,
+      1: vars.sizes.size1,
       2: vars.sizes.size2,
       3: vars.sizes.size6,
       4: vars.sizes.size11

dashboard/assets/packages/report/src/components/Header/Header.css.ts

@@ -0,0 +1,10 @@
+import { style } from "@vanilla-extract/css"
+import { vars } from "theme"
+
+export const heading = style({
+  fontSize: vars.fontSizes.sizeFluid
+})
+
+export const date = style({
+  color: vars.colors.text.secondary
+})

dashboard/assets/packages/report/src/components/Header/Header.tsx

@@ -0,0 +1,29 @@
+// SPDX-FileCopyrightText: 2023 Raintank, Inc. dba Grafana Labs
+//
+// SPDX-License-Identifier: AGPL-3.0-only
+
+import React from "react"
+import { Digest } from "@xk6-dashboard/model"
+
+import "theme/global.css"
+import { Flex } from "components/Flex"
+import { ReactComponent as LogoIcon } from "assets/icons/logo.svg"
+
+import { toDate } from "./Header.utils"
+import * as styles from "./Header.css"
+
+interface HeaderProps {
+  digest: Digest
+}
+
+export function Header({ digest }: HeaderProps) {
+  console.log(digest.start, typeof digest.start)
+  return (
+    <Flex as="header" align="center">
+      <LogoIcon />
+      <Flex className={styles.heading} as="h1" grow={1} justify="center">
+        Report: <span className={styles.date}>{toDate(digest.start)}</span>
+      </Flex>
+    </Flex>
+  )
+}

dashboard/assets/packages/report/src/components/Header/Header.utils.ts

@@ -0,0 +1,12 @@
+const dateTimeFormatter = new Intl.DateTimeFormat("en-GB", {
+  year: "numeric",
+  month: "short",
+  day: "numeric",
+  hour: "numeric",
+  minute: "2-digit",
+  hour12: false
+})
+
+export const toDate = (date?: Date) => {
+  return date && dateTimeFormatter.format(new Date(date))
+}

dashboard/assets/packages/report/src/components/Header/index.ts

@@ -0,0 +1 @@
+export * from "./Header"

dashboard/assets/packages/report/src/components/Section/Section.css.ts

@@ -12,6 +12,11 @@ export const header = style({
   marginBottom: vars.sizes.size8
 })
 
+export const icon = style({
+  position: "relative",
+  top: "-1px"
+})
+
 export const panel = style({
   "@media": {
     [`(min-width: ${sizes.lg})`]: {

dashboard/assets/packages/report/src/components/Section/Section.tsx

@@ -32,9 +32,7 @@ export function Section({ section, digest }: SectionProps) {
     <section>
       {section.title && (
         <Flex className={styles.header} align="baseline" gap={2}>
-          <div>
-            <CircleIcon color={vars.colors.primary.dark} width="15px" height="15px" />
-          </div>
+          <CircleIcon className={styles.icon} color={vars.colors.primary.dark} width="15px" height="15px" />
           <Flex direction="column">
             <h3>{section.title}</h3>
             <p>{section.summary}</p>
@@ -43,7 +41,7 @@ export function Section({ section, digest }: SectionProps) {
       )}
 
       <div className={styles.panel}>
-        <Grid key={section.id + "row"}>
+        <Grid key={section.id + "row"} gap={4}>
           {panelsExcludingStats.map((panel) => (
             <Grid.Column key={panel.id + "col"} {...getColumnSizes(panel, digest)}>
               <Panel key={panel.id} panel={panel} digest={digest} />

dashboard/assets/packages/report/src/theme/global.css.ts

@@ -51,19 +51,23 @@ globalStyle("h1, h2, h3, h4, h5, h6", {
 })
 
 globalStyle("h1", {
-  fontSize: fontSizes.size9
+  fontSize: fontSizes.size10
 })
 
 globalStyle("h2", {
-  fontSize: fontSizes.size8
+  fontSize: fontSizes.size9
 })
 
 globalStyle("h3", {
+  fontSize: fontSizes.size7
+})
+
+globalStyle("h4", {
   fontSize: fontSizes.size6
 })
 
 globalStyle("p", {
-  fontSize: fontSizes.size4
+  fontSize: fontSizes.size5
 })
 
 globalStyle("#root", {

dashboard/assets/packages/report/src/theme/sizes.css.ts

@@ -3,8 +3,6 @@
 // SPDX-License-Identifier: AGPL-3.0-only
 
 export const sizes = {
-  size000: ".5rem",
-  size00: ".25rem",
   size1: ".25rem",
   size2: ".5rem",
   size3: ".75rem",

dashboard/assets/packages/report/src/theme/typography.css.ts

@@ -18,7 +18,9 @@ export const fontSizes = {
   size6: "2rem",
   size7: "2.5rem",
   size8: "3rem",
-  size9: "3.5rem"
+  size9: "3.5rem",
+  size10: "4rem",
+  sizeFluid: "clamp(2rem, 4vw, 4rem)"
 }
 
 export const fontWeights = {