gui: work in progress

apps/web/src/utils/cn.ts

@@ -0,0 +1,6 @@
+import { clsx, type ClassValue } from "clsx"
+import { twMerge } from "tailwind-merge"
+
+export function cn(...inputs: ClassValue[]) {
+  return twMerge(clsx(inputs))
+}

apps/web/src/utils/object.ts

@@ -0,0 +1,16 @@
+
+export function toDots(obj: Record<string, unknown>, path = ''): Record<string, number | string | boolean> {
+  return Object.entries(obj).reduce((acc, [key, value]) => {
+    if(typeof value === 'object' && value !== null) {
+      return {
+        ...acc,
+        ...toDots(value as Record<string, unknown>, `${path}${key}.`)
+      }
+    }
+
+    return {
+      ...acc,
+      [`${path}${key}`]: value,
+    }
+  }, {})
+}

apps/web/src/utils/theme.ts

@@ -0,0 +1,13 @@
+import resolveConfig from "tailwindcss/resolveConfig";
+import tailwinConfig from "../../tailwind.config.js";
+const config = resolveConfig(tailwinConfig);
+
+export const theme = config.theme as any;
+
+export function getChartColor(index: number): string {
+  const chartColors: string[] = Object.keys(theme?.colors ?? {})
+    .filter((key) => key.startsWith("chart-"))
+    .map((key) => theme.colors[key] as string);
+
+  return chartColors[index % chartColors.length]!;
+}

apps/web/src/utils/validation.ts

@@ -0,0 +1,25 @@
+import { z } from "zod";
+
+export const zChartEvent = z.object({
+  id: z.string(),
+  name: z.string(),
+  displayName: z.string(),
+  filters: z.array(
+    z.object({
+      id: z.string(),
+      name: z.string(),
+      value: z.string(),
+    }),
+  ),
+});
+export const zChartBreakdown = z.object({
+  id: z.string(),
+  name: z.string(),
+});
+
+export const zChartEvents = z.array(zChartEvent);
+export const zChartBreakdowns = z.array(zChartBreakdown);
+
+export const zChartType = z.enum(["bar", "linear"]);
+
+export const zTimeInterval = z.enum(["day", "hour", "month"]);