[refactor] Update type naming

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

@@ -9,7 +9,6 @@ import uPlot, { AlignedData, Options, Series } from "uplot"
 import UplotReact from "uplot-react"
 import { tooltipPlugin, format, dateFormats, Panel, SeriesPlot } from "@xk6-dashboard/view"
 
-import { ColorParams } from "types/theme"
 import { useDigest } from "store/digest"
 
 import "./Chart.css"
@@ -39,7 +38,7 @@ export default function Chart({ panel }: ChartProps) {
     return () => window.removeEventListener("resize", updateWidth)
   })
 
-  const plot = new SeriesPlot(digest, panel, theme.palette.color as Required<ColorParams>[])
+  const plot = new SeriesPlot(digest, panel, theme.palette.color)
 
   if (plot.empty) {
     return <div ref={ref} />

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

@@ -5,15 +5,15 @@
 import React, { useContext } from "react"
 import { Button, IconButton, AppBar, Typography, Toolbar, useTheme } from "@mui/material"
 
-import { DigestConfig } from "types/config"
+import { UIConfig } from "types/config"
 import { ColorModeContext } from "components/Themed/Themed"
 import { ReactComponent as DarkModeIcon } from "assets/icons/dark_mode.svg"
 import { ReactComponent as LightModeIcon } from "assets/icons/light_mode.svg"
 
 import "./Header.css"
 
 interface HeaderProps {
-  config: DigestConfig
+  config: UIConfig
 }
 
 export default function Header({ config }: HeaderProps) {

dashboard/assets/packages/ui/src/components/Panel.tsx

@@ -4,14 +4,14 @@
 
 import React from "react"
 
-import { PanelKind, Panel as ViewPanel } from "@xk6-dashboard/view"
+import { PanelKind, Panel as PanelClass } from "@xk6-dashboard/view"
 
 import Chart from "components/Chart"
 import Stat from "components/Stat"
 import Summary from "components/Summary"
 
 interface PanelProps {
-  panel: ViewPanel
+  panel: PanelClass
 }
 
 export default function Panel({ panel }: PanelProps) {

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

@@ -4,7 +4,7 @@
 
 import React, { useState } from "react"
 import { Box, Collapse, Typography, Grid } from "@mui/material"
-import { isEmptySection, Section as ViewSection } from "@xk6-dashboard/view"
+import { isEmptySection, Section as SectionClass } from "@xk6-dashboard/view"
 
 import { useDigest } from "store/digest"
 import { ReactComponent as ExpandLessIcon } from "assets/icons/expand_less.svg"
@@ -13,7 +13,7 @@ import { ReactComponent as ExpandMoreIcon } from "assets/icons/expand_more.svg"
 import Panel from "./Panel"
 
 interface SectionBodyProps {
-  section: ViewSection
+  section: SectionClass
 }
 
 function SectionBody({ section }: SectionBodyProps) {
@@ -27,7 +27,7 @@ function SectionBody({ section }: SectionBodyProps) {
 }
 
 interface SectionProps {
-  section: ViewSection
+  section: SectionClass
 }
 
 export default function Section({ section }: SectionProps) {

dashboard/assets/packages/ui/src/components/Stat/Stat.tsx

@@ -9,7 +9,6 @@ import { AlignedData, Options, Series } from "uplot"
 import UplotReact from "uplot-react"
 import { format, Panel, SeriesPlot } from "@xk6-dashboard/view"
 
-import { ColorParams } from "types/theme"
 import { useDigest } from "store/digest"
 
 import "./Stat.css"
@@ -39,7 +38,7 @@ export default function Stat({ panel }: StatProps) {
 
   const query = panel.series[0].query
 
-  const plot = new SeriesPlot(digest, panel, theme.palette.color as Required<ColorParams>[])
+  const plot = new SeriesPlot(digest, panel, theme.palette.color)
 
   if (plot.empty) {
     return <div ref={ref} />

dashboard/assets/packages/ui/src/components/Themed/Themed.tsx

@@ -27,13 +27,13 @@ import {
   blueGrey
 } from "@mui/material/colors"
 
-import { Color } from "types/theme"
+import { Colors, VectorAttrs } from "types/theme"
 
 import "./Themed.css"
 
 export const ColorModeContext = createContext({ toggleColorMode: () => {} })
 
-const colors: Record<string, Color> = {
+const colorMap: Record<string, Colors & Partial<VectorAttrs>> = {
   red,
   pink,
   purple,
@@ -95,17 +95,17 @@ export default function Themed({ children }: ThemedProps) {
   )
 
   const theme = useMemo(() => {
-    const extra = []
+    const vectorAttrsArr = []
 
     for (let i = 0; i < order.length; i++) {
       const name = order[i]
-      const color = {
-        stroke: mode == "dark" ? colors[name][500] : colors[name][800],
-        fill: (mode == "dark" ? colors[name][300] : colors[name][600]) + "20"
+      const vectorAttrs = {
+        stroke: mode == "dark" ? colorMap[name][500] : colorMap[name][800],
+        fill: (mode == "dark" ? colorMap[name][300] : colorMap[name][600]) + "20"
       }
 
-      colors[name].stroke = mode ? "dark" : colors[name][500]
-      extra.push(color)
+      colorMap[name].stroke = mode ? "dark" : colorMap[name][500]
+      vectorAttrsArr.push(vectorAttrs)
     }
 
     const theme = createTheme({
@@ -117,7 +117,7 @@ export default function Themed({ children }: ThemedProps) {
         secondary: {
           main: "#A47D4F"
         },
-        color: extra
+        color: vectorAttrsArr
       }
     })
 

dashboard/assets/packages/ui/src/types/config.ts

@@ -8,11 +8,11 @@ export interface Tab {
   title?: string
   id?: string
   summary?: string
-  report: boolean
+  report?: boolean
   sections: Section[]
 }
 
-export interface DigestConfig {
-  title?: string
+export interface UIConfig {
+  title: string
   tabs: Tab[]
 }

dashboard/assets/packages/ui/src/types/theme.ts

@@ -2,12 +2,12 @@
 //
 // SPDX-License-Identifier: AGPL-3.0-only
 
-export interface ColorParams {
-  fill?: string | undefined
-  stroke?: string | undefined
+export interface VectorAttrs {
+  fill: string
+  stroke: string
 }
 
-export interface Color extends ColorParams {
+export interface Colors {
   50: string
   100: string
   200: string

dashboard/assets/packages/ui/src/typings/mui.d.ts

@@ -3,14 +3,14 @@
 // SPDX-License-Identifier: AGPL-3.0-only
 
 import "@mui/material"
-import { ColorParams } from "types/theme"
+import { VectorAttrs } from "types/theme"
 
 declare module "@mui/material/styles" {
   interface Palette {
-    color: ColorParams[]
+    color: VectorAttrs[]
   }
 
   interface PaletteOptions {
-    color?: ColorParams[]
+    color?: VectorAttrs[]
   }
 }

dashboard/assets/packages/ui/src/typings/xk6-dashboard-model.d.ts

@@ -4,12 +4,12 @@
 
 import "@xk6-dashboard/model"
 
-import { DigestConfig } from "types/config"
+import { UIConfig } from "types/config"
 
 declare module "@xk6-dashboard/model" {
-  interface Config extends DigestConfig {}
+  interface Config extends UIConfig {}
 
   interface Digest {
-    config?: DigestConfig
+    config?: UIConfig
   }
 }