Added an Alert Level Change Quad Plot Widget

2026-07-21 16:07:59 -07:00
parent ccfbb15434
commit 9ee41c9b8a
3 changed files with 168 additions and 0 deletions
@@ -0,0 +1,73 @@
+import React from 'react';
+import { Box } from '@chakra-ui/react';
+import { http, HttpResponse } from 'msw'; // Import MSW
+import LlmAlChangesQuadPlot from './LlmAlChangesQuadPlot';
+
+export default {
+    title: 'Dashboard Widgets/LLM AL Changes Quad Plot',
+    component: LlmAlChangesQuadPlot,
+    decorators: [
+        (Story) => (
+            <Box
+                w="100%" maxW="1800px" h="400px"
+                border="2px dashed" borderColor="gray.600" p={2}
+                resize="both" overflow="auto"
+            >
+                <Story />
+            </Box>
+        ),
+    ],
+};
+
+const mockData = [
+    { tp: 50 },
+    { tn: 250 },
+    { fp: 10 },
+    { fn: 5 },
+    { tot_count: 315}
+];
+
+// Scenario LIVE: call our API for real
+export const LivePopulated = {};
+
+// Scenario 1: Successful API Call
+export const Populated = {
+    parameters: {
+        msw: {
+            handlers: [
+                // Intercept the exact URL your component is trying to fetch
+                http.get('*/api/v2/llm_quadrant_plot', () => {
+                    // Return a 200 OK with the mock JSON
+                    return HttpResponse.json(mockData);
+                }),
+            ],
+        },
+    },
+};
+
+// Scenario 2: The 500 Server Crash
+export const ServerCrash = {
+    parameters: {
+        msw: {
+            handlers: [
+                http.get('*/api/v2/llm_quad_plot', () => {
+                    // Return a 500 Error
+                    return new HttpResponse(null, { status: 500 });
+                }),
+            ],
+        },
+    },
+};
+
+// Scenario 3: Empty State (API works, but no data returned)
+export const EmptyData = {
+    parameters: {
+        msw: {
+            handlers: [
+                http.get('*/api/v2/llm_quad_plot', () => {
+                    return HttpResponse.json([]);
+                }),
+            ],
+        },
+    },
+};