Feature/charts (#1906)

* WIP: Project usage + charts.

* Tweaked usage page

* next: updated deps

* next: updated shad and fixed errors

* Fixed sheet css

* Fixed stack card title overflow

* updated charts

* linting

Author: niemyjski

.vscode/settings.json

@@ -30,6 +30,7 @@
         "haserror",
         "iconify",
         "keyof",
+        "layerchart",
         "LDAP",
         "legos",
         "lucene",

src/Exceptionless.Web/ClientApp/README.md

@@ -26,5 +26,5 @@ You can preview the production build with `npm run preview`.
 You can upgrade [shadcn-svelte components](https://www.shadcn-svelte.com/) by running the following command
 
 ```bash
-npx shadcn-svelte@next update
+npx shadcn-svelte@latest update
 ```

src/Exceptionless.Web/ClientApp/package-lock.json

@@ -26,69 +26,72 @@
     },
     "devDependencies": {
         "@chromatic-com/storybook": "^4.0.0",
-        "@eslint/compat": "^1.2.9",
-        "@eslint/js": "^9.28.0",
-        "@iconify-json/lucide": "^1.2.47",
-        "@playwright/test": "^1.52.0",
-        "@storybook/addon-a11y": "^9.0.6",
-        "@storybook/addon-docs": "^9.0.6",
+        "@eslint/compat": "^1.3.0",
+        "@eslint/js": "^9.29.0",
+        "@iconify-json/lucide": "^1.2.48",
+        "@playwright/test": "^1.53.0",
+        "@storybook/addon-a11y": "^9.0.9",
+        "@storybook/addon-docs": "^9.0.9",
         "@storybook/addon-svelte-csf": "^5.0.3",
-        "@storybook/sveltekit": "^9.0.6",
+        "@storybook/sveltekit": "^9.0.9",
         "@sveltejs/adapter-static": "^3.0.8",
-        "@sveltejs/kit": "^2.21.2",
+        "@sveltejs/kit": "^2.21.5",
         "@sveltejs/vite-plugin-svelte": "^5.1.0",
-        "@tailwindcss/vite": "^4.1.8",
+        "@tailwindcss/vite": "^4.1.10",
         "@testing-library/jest-dom": "^6.6.3",
         "@testing-library/svelte": "^5.2.8",
         "@types/eslint": "^9.6.1",
-        "@types/node": "^22.15.30",
+        "@types/node": "^24.0.1",
         "@types/throttle-debounce": "^5.0.2",
         "cross-env": "^7.0.3",
-        "eslint": "^9.28.0",
+        "eslint": "^9.29.0",
         "eslint-config-prettier": "^10.1.5",
         "eslint-plugin-perfectionist": "^4.14.0",
-        "eslint-plugin-storybook": "^9.0.6",
-        "eslint-plugin-svelte": "^3.9.1",
+        "eslint-plugin-storybook": "^9.0.9",
+        "eslint-plugin-svelte": "^3.9.2",
         "jsdom": "^26.1.0",
         "prettier": "^3.5.3",
         "prettier-plugin-svelte": "^3.4.0",
         "prettier-plugin-tailwindcss": "^0.6.12",
-        "storybook": "^9.0.6",
-        "svelte": "^5.33.18",
+        "storybook": "^9.0.9",
+        "svelte": "^5.34.1",
         "svelte-check": "^4.2.1",
         "swagger-typescript-api": "^13.2.1",
         "tslib": "^2.8.1",
         "typescript": "^5.8.3",
-        "typescript-eslint": "^8.33.1",
+        "typescript-eslint": "^8.34.0",
         "vite": "^6.3.5",
-        "vitest": "3.2.2"
+        "vitest": "3.2.3"
     },
     "dependencies": {
         "@exceptionless/browser": "^3.1.0",
         "@exceptionless/fetchclient": "^0.42.0",
-        "@lucide/svelte": "^0.513.0",
+        "@lucide/svelte": "^0.515.0",
         "@tanstack/svelte-query": "https://pkg.pr.new/@tanstack/svelte-query@8c9ce9",
         "@tanstack/svelte-query-devtools": "https://pkg.pr.new/@tanstack/svelte-query-devtools@8c9ce9",
         "@tanstack/svelte-table": "^9.0.0-alpha.10",
+        "@types/d3-scale": "^4.0.9",
+        "@types/d3-shape": "^3.1.7",
         "@typeschema/class-validator": "^0.3.0",
-        "bits-ui": "^2.5.0",
+        "bits-ui": "^2.7.0",
         "class-validator": "^0.14.2",
         "clsx": "^2.1.1",
+        "d3-scale": "^4.0.2",
         "dompurify": "^3.2.6",
         "formsnap": "^2.0.1",
         "kit-query-params": "^0.0.26",
-        "layerchart": "^2.0.0-next.17",
-        "mode-watcher": "^1.0.7",
+        "layerchart": "^2.0.0-next.21",
+        "mode-watcher": "^1.0.8",
         "oidc-client-ts": "^3.2.1",
         "pretty-ms": "^9.2.0",
         "runed": "^0.28.0",
         "shiki": "^3.6.0",
-        "svelte-sonner": "^1.0.4",
+        "svelte-sonner": "^1.0.5",
         "svelte-time": "^2.0.1",
         "sveltekit-superforms": "^2.26.1",
-        "tailwind-merge": "^3.3.0",
+        "tailwind-merge": "^3.3.1",
         "tailwind-variants": "^1.0.0",
-        "tailwindcss": "^4.1.8",
+        "tailwindcss": "^4.1.10",
         "throttle-debounce": "^5.0.2",
         "tw-animate-css": "^1.3.4"
     },

src/Exceptionless.Web/ClientApp/package.json

@@ -62,6 +62,13 @@
     --sidebar-accent-foreground: var(--accent-foreground);
     --sidebar-border: var(--border);
     --sidebar-ring: var(--ring);
+
+    --chart-1: #7bb662; /* Total (green, light) */
+    --chart-2: #56b4e9; /* Blocked (blue, light) */
+    --chart-3: #d47a00; /* Discarded – hsl(32 100% 42%) */
+    --chart-4: #ffd64d; /* Too Big  – hsl(46 100% 65%) */
+    --chart-5: #d9d9d9; /* Total in Organization (magenta, light) */
+    --chart-6: #c62828; /* material-red-700: deep red for light mode */
 }
 
 .dark {
@@ -102,6 +109,13 @@
     --sidebar-accent-foreground: var(--accent-foreground);
     --sidebar-border: var(--border);
     --sidebar-ring: var(--ring);
+
+    --chart-1: #a4d56f; /* Total (green, dark) */
+    --chart-2: #8fdbff; /* Blocked (blue, dark) */
+    --chart-3: #ff9e3d; /* Discarded – hsl(30 100% 62%) */
+    --chart-4: #ffea70; /* Too Big  – hsl(48 100% 70%) */
+    --chart-5: #5a5a5a; /* Total in Organization (magenta, dark) */
+    --chart-6: #ff5c5c; /* hsl(0 100% 66%): bright red for dark mode */
 }
 
 @theme inline {

src/Exceptionless.Web/ClientApp/src/app.css

@@ -10,7 +10,8 @@ import type { ViewOrganization } from './models';
 export async function invalidateOrganizationQueries(queryClient: QueryClient, message: WebSocketMessageValue<'OrganizationChanged'>) {
     const { id } = message;
     if (id) {
-        await queryClient.invalidateQueries({ queryKey: queryKeys.id(id) });
+        await queryClient.invalidateQueries({ queryKey: queryKeys.id(id, undefined) });
+        await queryClient.invalidateQueries({ queryKey: queryKeys.id(id, 'stats') });
 
         // Invalidate regardless of mode
         await queryClient.invalidateQueries({ queryKey: queryKeys.list(undefined) });
@@ -20,25 +21,63 @@ export async function invalidateOrganizationQueries(queryClient: QueryClient, me
 }
 
 export const queryKeys = {
-    id: (id: string | undefined) => [...queryKeys.type, id] as const,
+    id: (id: string | undefined, mode: 'stats' | undefined) => (mode ? ([...queryKeys.type, id, { mode }] as const) : ([...queryKeys.type, id] as const)),
     list: (mode: 'stats' | undefined) => (mode ? ([...queryKeys.type, 'list', { mode }] as const) : ([...queryKeys.type, 'list'] as const)),
     type: ['Organization'] as const
 };
 
+export interface GetOrganizationRequest {
+    params?: {
+        mode: 'stats' | undefined;
+    };
+    route: {
+        id: string | undefined;
+    };
+}
+
 export interface GetOrganizationsRequest {
     params?: {
-        mode: 'stats' | null;
+        mode: 'stats' | undefined;
     };
 }
 
-export function getOrganizationQuery(request: GetOrganizationsRequest) {
+export function getOrganizationQuery(request: GetOrganizationRequest) {
+    const queryClient = useQueryClient();
+
+    return createQuery<ViewOrganization, ProblemDetails>(() => ({
+        enabled: () => !!accessToken.current && !!request.route.id,
+        onSuccess: (data: ViewOrganization) => {
+            if (request.params?.mode) {
+                queryClient.setQueryData(queryKeys.id(request.route.id, request.params.mode), data);
+            }
+
+            queryClient.setQueryData(queryKeys.id(request.route.id!, undefined), data);
+        },
+        queryClient,
+        queryFn: async ({ signal }: { signal: AbortSignal }) => {
+            const client = useFetchClient();
+            const response = await client.getJSON<ViewOrganization>(`organizations/${request.route.id}`, {
+                signal
+            });
+
+            return response.data!;
+        },
+        queryKey: queryKeys.id(request.route.id, request.params?.mode)
+    }));
+}
+
+export function getOrganizationsQuery(request: GetOrganizationsRequest) {
     const queryClient = useQueryClient();
 
     return createQuery<ViewOrganization[], ProblemDetails>(() => ({
         enabled: () => !!accessToken.current,
         onSuccess: (data: ViewOrganization[]) => {
             data.forEach((organization) => {
-                queryClient.setQueryData(queryKeys.id(organization.id!), organization);
+                if (request.params?.mode) {
+                    queryClient.setQueryData(queryKeys.id(organization.id!, request.params.mode), organization);
+                }
+
+                queryClient.setQueryData(queryKeys.id(organization.id!, undefined), organization);
             });
         },
         queryClient,

src/Exceptionless.Web/ClientApp/src/lib/features/organizations/api.svelte.ts

@@ -0,0 +1,32 @@
+import { isSameUtcMonth } from '$features/shared/dates';
+
+import type { ViewOrganization } from './models';
+
+export function getNextBillingDateUtc(organization?: ViewOrganization): Date {
+    if (organization?.subscribe_date) {
+        console.log('Organization subscribe date for next billing date:', organization.subscribe_date);
+    }
+
+    const now = new Date();
+    return new Date(Date.UTC(now.getUTCFullYear(), now.getUTCMonth() + 1, 1));
+}
+
+export function getRemainingEventLimit(organization?: ViewOrganization): number {
+    if (!organization?.max_events_per_month) {
+        return 0;
+    }
+
+    const now = new Date();
+    const bonusEvents = organization.bonus_expiration && new Date(organization.bonus_expiration) > now ? organization.bonus_events_per_month : 0;
+
+    const usage = organization.usage && organization.usage[organization.usage.length - 1];
+    if (usage) {
+        const usageDate = new Date(usage.date);
+        if (isSameUtcMonth(usageDate, now)) {
+            const remaining = usage.limit - usage.total;
+            return remaining > 0 ? remaining : 0;
+        }
+    }
+
+    return organization.max_events_per_month + bonusEvents;
+}

src/Exceptionless.Web/ClientApp/src/lib/features/organizations/utils.ts

@@ -26,6 +26,7 @@
     let theme = $derived(mode.current === 'light' ? 'github-light' : 'github-dark');
     const jsEngine = createJavaScriptRegexEngine();
 
+    // TODO: https://shiki.style/guide/dual-themes
     const highlighter = createHighlighterCoreSync({
         engine: jsEngine,
         langs: [csharpLanguage, javaScriptLanguage, jsonLanguage, powershellLanguage, shellScriptLanguage, xmlLanguage],

src/Exceptionless.Web/ClientApp/src/lib/features/shared/components/typography/code-block.svelte

@@ -7,31 +7,30 @@
 		config ? Object.entries(config).filter(([, config]) => config.theme || config.color) : null
 	);
 
-	const styleOpen = ">elyts<".split("").reverse().join("");
-	const styleClose = ">elyts/<".split("").reverse().join("");
-</script>
+	const themeContents = $derived.by(() => {
+		if (!colorConfig || !colorConfig.length) return;
+
+		const themeContents = [];
+		for (let [_theme, prefix] of Object.entries(THEMES)) {
+			let content = `${prefix} [data-chart=${id}] {\n`;
+			const color = colorConfig.map(([key, itemConfig]) => {
+				const theme = _theme as keyof typeof itemConfig.theme;
+				const color = itemConfig.theme?.[theme] || itemConfig.color;
+				return color ? `\t--color-${key}: ${color};` : null;
+			});
+
+			content += color.join("\n") + "\n}";
 
-{#if colorConfig && colorConfig.length}
-	{@const themeContents = Object.entries(THEMES)
-		.map(
-			([theme, prefix]) => `
-${prefix} [data-chart=${id}] {
-${colorConfig
-	.map(([key, itemConfig]) => {
-		const color =
-			itemConfig.theme?.[theme as keyof typeof itemConfig.theme] || itemConfig.color;
-		return color ? `  --color-${key}: ${color};` : null;
-	})
-	.join("\n")}
-}
-`
-		)
-		.join("\n")}
+			themeContents.push(content);
+		}
+
+		return themeContents.join("\n");
+	});
+</script>
 
+{#if themeContents}
 	{#key id}
 		<!-- eslint-disable-next-line svelte/no-at-html-tags -->
-		{@html `${styleOpen}
-		${themeContents}
-	${styleClose}`}
+		{@html `<style>${themeContents}</style>`}
 	{/key}
 {/if}

src/Exceptionless.Web/ClientApp/src/lib/features/shared/components/ui/chart/chart-style.svelte

@@ -56,12 +56,12 @@
 		const [item] = tooltipCtx.payload;
 		const key = labelKey || item?.label || item?.name || "value";
 
-		const itemConfig = getPayloadConfigFromPayload(chart.config, item, key);
+		const itemConfig = item ? getPayloadConfigFromPayload(chart.config, item, key) : undefined;
 
 		const value =
 			!labelKey && typeof label === "string"
 				? chart.config[label as keyof typeof chart.config]?.label || label
-				: (itemConfig?.label ?? item.label);
+				: (itemConfig?.label ?? item?.label);
 
 		if (!value) return null;
 		if (!labelFormatter) return value;

src/Exceptionless.Web/ClientApp/src/lib/features/shared/components/ui/chart/chart-tooltip.svelte

@@ -14,6 +14,6 @@
 	bind:ref
 	data-slot="sidebar-separator"
 	data-sidebar="separator"
-	class={cn("bg-sidebar-border mx-2 w-auto", className)}
+	class={cn("bg-sidebar-border", className)}
 	{...restProps}
 />

src/Exceptionless.Web/ClientApp/src/lib/features/shared/components/ui/sidebar/sidebar-separator.svelte

@@ -1,3 +1,19 @@
+export function formatDateLabel(value: Date): string {
+    return value.toLocaleDateString(undefined, {
+        day: 'numeric',
+        month: 'long',
+        year: 'numeric'
+    });
+}
+
+export function formatLongDate(value: Date): string {
+    return value.toLocaleDateString(undefined, {
+        day: 'numeric',
+        month: 'long',
+        year: 'numeric'
+    });
+}
+
 export function getDifferenceInSeconds(value: Date | string): number {
     return (new Date().getTime() - new Date(value).getTime()) / 1000;
 }
@@ -44,3 +60,7 @@ export function getSetIntervalTime(value: Date | string): number {
             return day * 1000; // update every day
     }
 }
+
+export function isSameUtcMonth(date: Date, other: Date = new Date()): boolean {
+    return date.getUTCFullYear() === other.getUTCFullYear() && date.getUTCMonth() === other.getUTCMonth();
+}

src/Exceptionless.Web/ClientApp/src/lib/features/shared/dates.ts

@@ -78,13 +78,13 @@
     <Card.Root>
         <Card.Header>
             <Card.Title class="flex flex-row items-center justify-between text-lg font-semibold">
-                <span class="mb-2 flex flex-col lg:mb-0">
-                    <div class="flex items-center">
-                        <EventsFacetedFilter.StringTrigger changed={filterChanged} class="mr-2" term="stack" value={stack.id} />
-                        <span class="truncate">{stack.title}</span>
+                <div class="mb-2 flex w-0 min-w-0 flex-1 flex-col lg:mb-0">
+                    <div class="flex min-w-0 items-center">
+                        <EventsFacetedFilter.StringTrigger changed={filterChanged} class="mr-2 shrink-0" term="stack" value={stack.id} />
+                        <span class="block max-w-full min-w-0 truncate" title={stack.title}>{stack.title}</span>
                     </div>
-                </span>
-                <div class="flex items-center space-x-2">
+                </div>
+                <div class="ml-2 flex shrink-0 items-center space-x-2">
                     <StackStatusDropdownMenu {stack} />
                     <StackOptionsDropdownMenu {stack} />
                 </div>