[feat] Add vanilla extract and restyle UI

dashboard/assets/packages/report/package.json

@@ -13,10 +13,12 @@
     "lint": "yarn lint:eslint && yarn lint:types && yarn lint:format"
   },
   "dependencies": {
+    "@vanilla-extract/css": "^1.13.0",
+    "@vanilla-extract/dynamic": "^2.0.3",
+    "@vanilla-extract/sprinkles": "^1.6.1",
     "@xk6-dashboard/config": "0.0.1",
     "@xk6-dashboard/model": "0.0.1",
     "@xk6-dashboard/view": "0.0.1",
-    "bootstrap": "^5.3.2",
     "preact": "^10.16.0",
     "react": "npm:@preact/compat",
     "react-dom": "npm:@preact/compat",
@@ -28,6 +30,7 @@
     "@preact/preset-vite": "^2.5.0",
     "@typescript-eslint/eslint-plugin": "^6.7.5",
     "@typescript-eslint/parser": "^6.7.5",
+    "@vanilla-extract/vite-plugin": "^3.9.0",
     "eslint": "^8.51.0",
     "eslint-config-prettier": "^9.0.0",
     "eslint-plugin-prettier": "^5.0.1",

dashboard/assets/packages/report/src/App/App.css.ts

@@ -0,0 +1,22 @@
+// SPDX-FileCopyrightText: 2023 Raintank, Inc. dba Grafana Labs
+//
+// SPDX-License-Identifier: AGPL-3.0-only
+
+import { style } from "@vanilla-extract/css"
+
+import { vars } from "theme"
+import { sizes } from "theme/sizes.css"
+
+export const main = style({
+  padding: vars.sizes.size5,
+  "@media": {
+    [`(min-width: ${sizes.lg})`]: {
+      padding: vars.sizes.size11
+    }
+  }
+})
+
+export const usage = style({
+  color: vars.colors.text.secondary,
+  fontStyle: "italic"
+})

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

@@ -1,33 +1,38 @@
-// SPDX-FileCopyrightText: 2023 Iván Szkiba
 // SPDX-FileCopyrightText: 2023 Raintank, Inc. dba Grafana Labs
 //
 // SPDX-License-Identifier: AGPL-3.0-only
-// SPDX-License-Identifier: MIT
 
 import React from "react"
 import { Digest } from "@xk6-dashboard/model"
 
-import Tab from "components/Tab"
-import "./App.css"
+import "theme/global.css"
+import { theme } from "theme"
+import { toClassName } from "utils"
+import { Flex } from "components/Flex"
+import { Header } from "components/Header"
+import { Tab } from "components/Tab/Tab"
+
+import * as styles from "./App.css"
 
 interface AppProps {
   digest: Digest
 }
 
 export default function App({ digest }: AppProps) {
   return (
-    <article className="container-fluid report">
-      <h1>k6 report</h1>
+    <Flex as="main" className={toClassName(theme, styles.main)} direction="column" gap={4}>
+      <Header digest={digest} />
 
       {digest.config.tabs.map((tab) => (
-        <Tab tab={tab} digest={digest} key={tab.id} />
+        <Tab key={tab.id} tab={tab} digest={digest} />
       ))}
-      <section className="usage">
+
+      <section>
         <hr />
-        <p className="usage">
+        <p className={styles.usage}>
           Select a time interval by holding down the mouse on any graph to zoom. To cancel zoom, double click on any graph.
         </p>
       </section>
-    </article>
+    </Flex>
   )
 }

dashboard/assets/packages/report/src/assets/icons/circle.svg.license

@@ -0,0 +1,3 @@
+SPDX-FileCopyrightText: 2023 Raintank, Inc. dba Grafana Labs
+
+SPDX-License-Identifier: AGPL-3.0-only

dashboard/assets/packages/report/src/assets/icons/logo.svg.license

@@ -0,0 +1,3 @@
+SPDX-FileCopyrightText: 2023 Raintank, Inc. dba Grafana Labs
+
+SPDX-License-Identifier: AGPL-3.0-only

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

@@ -0,0 +1,21 @@
+// SPDX-FileCopyrightText: 2023 Raintank, Inc. dba Grafana Labs
+//
+// SPDX-License-Identifier: AGPL-3.0-only
+
+import { style } from "@vanilla-extract/css"
+
+import { vars } from "theme"
+
+export const uplot = style({
+  breakInside: "avoid"
+})
+
+export const title = style({
+  color: vars.colors.text.secondary,
+  fontWeight: vars.fontWeights.weight500
+})
+
+export const chart = style({
+  marginTop: vars.sizes.size1,
+  marginBottom: vars.sizes.size1
+})

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

@@ -0,0 +1,23 @@
+import { useLayoutEffect, useState } from "preact/hooks"
+
+type Width = number
+
+export const useElementWidth = <T extends HTMLElement = HTMLDivElement>(): [(node: T | null) => void, Width] => {
+  const [ref, setRef] = useState<T | null>(null)
+  const [width, setWidth] = useState(0)
+
+  useLayoutEffect(() => {
+    const updateWidth = () => {
+      if (ref) {
+        setWidth(ref.offsetWidth)
+      }
+    }
+
+    updateWidth()
+    window.addEventListener("resize", updateWidth)
+
+    return () => window.removeEventListener("resize", updateWidth)
+  })
+
+  return [setRef, width]
+}

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

@@ -2,20 +2,20 @@
 //
 // SPDX-License-Identifier: AGPL-3.0-only
 
-import React, { Ref } from "react"
-import { useRef, useState, useLayoutEffect } from "preact/hooks"
+import React from "react"
 
 import "uplot/dist/uPlot.min.css"
 import UplotReact from "uplot-react"
-import uPlot, { AlignedData, Options, Series } from "uplot"
+import { AlignedData } from "uplot"
 
 import { Digest } from "@xk6-dashboard/model"
-import { Panel, SeriesPlot, tooltipPlugin, dateFormats, format } from "@xk6-dashboard/view"
+import { Panel, SeriesPlot } from "@xk6-dashboard/view"
 
-import colors from "utils/colors"
-import "./Chart.css"
+import { colors } from "utils"
 
-const sync = uPlot.sync("chart")
+import { createOptions } from "./Chart.utils"
+import { useElementWidth } from "./Chart.hooks"
+import * as styles from "./Chart.css"
 
 interface ChartProps {
   panel: Panel
@@ -24,58 +24,17 @@ interface ChartProps {
 
 export default function Chart({ panel, digest }: ChartProps) {
   const plot = new SeriesPlot(digest, panel, colors)
-  const ref = useRef<HTMLSpanElement | HTMLDivElement>(null)
-
-  const [width, setWidth] = useState(0)
-
-  useLayoutEffect(() => {
-    const updateWidth = () => {
-      if (ref.current) {
-        setWidth(ref.current.offsetWidth)
-      }
-    }
-
-    updateWidth()
-    window.addEventListener("resize", updateWidth)
-
-    return () => window.removeEventListener("resize", updateWidth)
-  })
+  const [ref, width] = useElementWidth()
 
   if (plot.empty) {
-    return <span ref={ref} />
+    return null
   }
 
-  const options: Options = {
-    width: width,
-    height: 250,
-    title: panel.title,
-    cursor: { sync: { key: sync.key } },
-    legend: { live: false },
-    series: plot.series as Series[],
-    axes: [{}],
-    plugins: [tooltipPlugin("#fafafa")]
-  }
-
-  options.axes = plot.samples.units.map((unit) => {
-    return {
-      stroke: "#808080",
-      grid: { stroke: "#f0f0f0" },
-      ticks: { stroke: "#f0f0f0" },
-      values: (_, ticks) => ticks.map((val) => format(unit, val)),
-      size: 70,
-      scale: unit
-    }
-  })
-
-  delete options.axes[0].size
-  options.axes[0].values = dateFormats
-
-  if (options.axes.length > 2) {
-    options.axes[2].side = 1
-  }
+  const options = createOptions({ plot, width })
 
   return (
-    <div ref={ref as Ref<HTMLDivElement>} className="chart panel">
+    <div ref={ref} className={styles.chart}>
+      <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

@@ -0,0 +1,73 @@
+import uPlot, { type Axis, type Options, type Series } from "uplot"
+import { type UnitType } from "@xk6-dashboard/model"
+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
+  }
+
+  return (_: uPlot, ticks: number[]) => ticks.map((val) => format(unit, val))
+}
+
+const createAxis = (length: number) => {
+  return (unit: UnitType, index: number) => {
+    const axis: Axis = {
+      stroke: common.black,
+      grid: { stroke: grey[100] },
+      ticks: { stroke: grey[100] },
+      values: getAxisValues(unit, index),
+      scale: unit
+    }
+
+    if (index === 2 && length > 2) {
+      axis.side = AXIS_SIDE
+    }
+
+    if (index !== 0) {
+      axis.size = AXIS_SIZE
+    }
+
+    return axis
+  }
+}
+
+interface CreateOptionsProps {
+  plot: SeriesPlot
+  width: number
+}
+
+export const createOptions = ({ plot, width }: CreateOptionsProps): Options => {
+  const units = plot.samples.units
+  const axes = units.map(createAxis(units.length))
+
+  return {
+    class: styles.uplot,
+    width: width,
+    height: 250,
+    cursor: { sync: { key: sync.key } },
+    legend: { live: false },
+    series: plot.series as Series[],
+    axes: axes,
+    plugins: [tooltipPlugin(common.white)]
+  }
+}