@principal-ai/principal-view-react 0.14.14 → 0.14.15

package/src/stories/dashboard/DashboardRenderer.stories.tsx

@@ -0,0 +1,263 @@
+/**
+ * DashboardRenderer Stories
+ *
+ * Storybook stories for testing and iterating on dashboard rendering.
+ */
+
+import type { Meta, StoryObj } from '@storybook/react';
+import { ThemeProvider, defaultEditorTheme } from '@principal-ade/industry-theme';
+import { DashboardRenderer } from '../../components/dashboard';
+import activityFeedDashboard from './sample-dashboards/activity-feed-analytics.dashboard.json';
+import type { DashboardDefinition } from '../../components/dashboard';
+
+const meta: Meta<typeof DashboardRenderer> = {
+  title: 'Dashboard/DashboardRenderer',
+  component: DashboardRenderer,
+  parameters: {
+    layout: 'fullscreen',
+  },
+  decorators: [
+    (Story) => (
+      <ThemeProvider theme={defaultEditorTheme}>
+        <div style={{ minHeight: '100vh' }}>
+          <Story />
+        </div>
+      </ThemeProvider>
+    ),
+  ],
+};
+
+export default meta;
+type Story = StoryObj<typeof DashboardRenderer>;
+
+/**
+ * Activity Feed Analytics Dashboard
+ *
+ * Full dashboard example based on the web-ade activity feed use case.
+ * Shows mobile vs desktop view percentages, traffic trends, and engagement metrics.
+ */
+export const ActivityFeedAnalytics: Story = {
+  args: {
+    dashboard: activityFeedDashboard as DashboardDefinition,
+  },
+};
+
+/**
+ * With Metric Click Handler
+ *
+ * Demonstrates handling metric clicks - useful for drill-down navigation.
+ */
+export const WithClickHandlers: Story = {
+  args: {
+    dashboard: activityFeedDashboard as DashboardDefinition,
+    onMetricClick: (metricId) => {
+      alert(`Clicked metric: ${metricId}`);
+    },
+    onSourceClick: (source) => {
+      alert(`Navigate to: ${source.storyboard}/${source.workflow}`);
+    },
+  },
+};
+
+/**
+ * Minimal Dashboard
+ *
+ * A simple dashboard with just a few metrics.
+ */
+export const MinimalDashboard: Story = {
+  args: {
+    dashboard: {
+      id: 'minimal',
+      name: 'Minimal Dashboard',
+      description: 'A simple dashboard with basic metrics',
+      metrics: [
+        {
+          id: 'total-requests',
+          name: 'Total Requests',
+          type: 'counter',
+          unit: 'requests',
+          sources: [{ storyboard: 'api', workflow: 'request-handler' }],
+          query: { derivation: 'count', window: '1h' },
+          _mockData: { current: 145892, previous: 132456, trend: 'up' },
+        },
+        {
+          id: 'error-rate',
+          name: 'Error Rate',
+          type: 'gauge',
+          unit: '%',
+          sources: [{ storyboard: 'api', workflow: 'request-handler' }],
+          query: { derivation: 'error_rate', window: '1h' },
+          thresholds: { warning: 1.0, critical: 5.0 },
+          _mockData: { current: 0.3, previous: 0.5, trend: 'down' },
+        },
+        {
+          id: 'p99-latency',
+          name: 'P99 Latency',
+          type: 'histogram',
+          unit: 'ms',
+          sources: [{ storyboard: 'api', workflow: 'request-handler' }],
+          query: { derivation: 'p99' },
+          _mockData: { current: 245, previous: 312, trend: 'down' },
+        },
+      ],
+      layout: {
+        rows: [
+          {
+            title: 'Key Metrics',
+            panels: [
+              { id: 'total-requests', span: 4 },
+              { id: 'error-rate', span: 4 },
+              { id: 'p99-latency', span: 4 },
+            ],
+          },
+        ],
+      },
+    } as DashboardDefinition,
+  },
+};
+
+/**
+ * Time Series Focus
+ *
+ * Dashboard focused on time series visualizations.
+ */
+export const TimeSeriesFocus: Story = {
+  args: {
+    dashboard: {
+      id: 'time-series',
+      name: 'Time Series Dashboard',
+      description: 'Focus on time-based trends',
+      metrics: [
+        {
+          id: 'hourly-requests',
+          name: 'Hourly Requests',
+          type: 'counter',
+          unit: 'requests',
+          sources: [{ storyboard: 'api', workflow: 'handler' }],
+          query: { derivation: 'count', timeGroup: 'hour' },
+          display: { component: 'LineChart', size: 'large' },
+          _mockData: {
+            series: [
+              { date: '00:00', value: 1200 },
+              { date: '04:00', value: 800 },
+              { date: '08:00', value: 2400 },
+              { date: '12:00', value: 3200 },
+              { date: '16:00', value: 2800 },
+              { date: '20:00', value: 1800 },
+            ],
+          },
+        },
+        {
+          id: 'requests-by-status',
+          name: 'Requests by Status',
+          type: 'counter',
+          unit: 'requests',
+          sources: [{ storyboard: 'api', workflow: 'handler' }],
+          query: { derivation: 'count', groupBy: ['status'], timeGroup: 'hour' },
+          display: { component: 'StackedBarChart', size: 'large' },
+          _mockData: {
+            series: [
+              { date: '00:00', success: 1150, error: 50 },
+              { date: '04:00', success: 780, error: 20 },
+              { date: '08:00', success: 2300, error: 100 },
+              { date: '12:00', success: 3050, error: 150 },
+              { date: '16:00', success: 2650, error: 150 },
+              { date: '20:00', success: 1720, error: 80 },
+            ],
+          },
+        },
+      ],
+      layout: {
+        rows: [
+          {
+            title: 'Traffic Over Time',
+            panels: [{ id: 'hourly-requests', span: 12 }],
+          },
+          {
+            title: 'Status Breakdown',
+            panels: [{ id: 'requests-by-status', span: 12 }],
+          },
+        ],
+      },
+    } as DashboardDefinition,
+  },
+};
+
+/**
+ * With Thresholds
+ *
+ * Shows metrics with warning and critical thresholds.
+ */
+export const WithThresholds: Story = {
+  args: {
+    dashboard: {
+      id: 'thresholds',
+      name: 'SLO Dashboard',
+      description: 'Service level objectives with thresholds',
+      metrics: [
+        {
+          id: 'availability',
+          name: 'Availability',
+          type: 'gauge',
+          unit: '%',
+          sources: [{ storyboard: 'infra', workflow: 'health-check' }],
+          query: { derivation: 'success_rate' },
+          thresholds: { warning: 99.9, critical: 99.0 },
+          _mockData: { current: 99.95, trend: 'flat' },
+        },
+        {
+          id: 'error-budget',
+          name: 'Error Budget Remaining',
+          type: 'gauge',
+          unit: '%',
+          sources: [{ storyboard: 'infra', workflow: 'slo-tracker' }],
+          query: { derivation: 'percentage' },
+          thresholds: { warning: 25, critical: 10 },
+          _mockData: { current: 67.3, previous: 72.1, trend: 'down' },
+        },
+        {
+          id: 'latency-slo',
+          name: 'Latency SLO',
+          type: 'gauge',
+          unit: '%',
+          description: 'Percentage of requests under 200ms',
+          sources: [{ storyboard: 'api', workflow: 'handler' }],
+          query: { derivation: 'percentage', filter: 'duration < 200' },
+          thresholds: { warning: 95, critical: 90 },
+          _mockData: { current: 97.2, previous: 96.8, trend: 'up' },
+        },
+      ],
+      layout: {
+        rows: [
+          {
+            title: 'Service Level Objectives',
+            panels: [
+              { id: 'availability', span: 4 },
+              { id: 'error-budget', span: 4 },
+              { id: 'latency-slo', span: 4 },
+            ],
+          },
+        ],
+      },
+    } as DashboardDefinition,
+  },
+};
+
+/**
+ * Empty Dashboard
+ *
+ * Edge case: dashboard with no metrics.
+ */
+export const EmptyDashboard: Story = {
+  args: {
+    dashboard: {
+      id: 'empty',
+      name: 'Empty Dashboard',
+      description: 'This dashboard has no metrics configured yet',
+      metrics: [],
+      layout: {
+        rows: [],
+      },
+    } as DashboardDefinition,
+  },
+};

package/src/stories/dashboard/sample-dashboards/activity-feed-analytics.dashboard.json

@@ -0,0 +1,300 @@
+{
+  "$schema": "https://principal.ai/schemas/dashboard.v1.json",
+  "id": "activity-feed-analytics",
+  "name": "Activity Feed Analytics",
+  "description": "User engagement metrics for the activity feed home page",
+  "owner": "web-ade-team",
+
+  "externalLinks": {
+    "grafana": "https://grafana.internal/d/activity-feed",
+    "runbook": "https://wiki.internal/runbooks/activity-feed"
+  },
+
+  "metrics": [
+    {
+      "id": "mobile-view-percentage",
+      "name": "Mobile View %",
+      "description": "Percentage of activity feed loads on mobile devices",
+      "type": "gauge",
+      "unit": "%",
+
+      "sources": [{
+        "storyboard": "activity-feed",
+        "workflow": "feed-load",
+        "nodes": ["init-started"],
+        "event": "activity-feed.init.started"
+      }],
+
+      "query": {
+        "derivation": "percentage",
+        "filter": "isMobile = true",
+        "window": "1h"
+      },
+
+      "display": {
+        "component": "MetricCard",
+        "size": "medium",
+        "showTrend": true,
+        "showSparkline": true
+      },
+
+      "_mockData": {
+        "current": 34.2,
+        "previous": 31.8,
+        "trend": "up",
+        "series": [
+          { "date": "2024-03-27T00:00", "value": 31.2 },
+          { "date": "2024-03-27T01:00", "value": 32.1 },
+          { "date": "2024-03-27T02:00", "value": 33.0 },
+          { "date": "2024-03-27T03:00", "value": 32.5 },
+          { "date": "2024-03-27T04:00", "value": 33.8 },
+          { "date": "2024-03-27T05:00", "value": 34.2 }
+        ]
+      }
+    },
+    {
+      "id": "total-page-views",
+      "name": "Total Page Views",
+      "description": "Total home page views in the last hour",
+      "type": "counter",
+      "unit": "views",
+
+      "sources": [{
+        "storyboard": "activity-feed",
+        "workflow": "feed-load",
+        "event": "activity-feed.init.started"
+      }],
+
+      "query": {
+        "derivation": "count",
+        "window": "1h"
+      },
+
+      "display": {
+        "component": "MetricCard",
+        "size": "medium",
+        "showSparkline": true
+      },
+
+      "_mockData": {
+        "current": 28493,
+        "previous": 26102,
+        "trend": "up",
+        "series": [
+          { "date": "2024-03-27T00:00", "value": 25102 },
+          { "date": "2024-03-27T01:00", "value": 26234 },
+          { "date": "2024-03-27T02:00", "value": 25890 },
+          { "date": "2024-03-27T03:00", "value": 27102 },
+          { "date": "2024-03-27T04:00", "value": 28100 },
+          { "date": "2024-03-27T05:00", "value": 28493 }
+        ]
+      }
+    },
+    {
+      "id": "error-rate",
+      "name": "Error Rate",
+      "description": "Percentage of feed loads that resulted in errors",
+      "type": "gauge",
+      "unit": "%",
+
+      "sources": [{
+        "storyboard": "activity-feed",
+        "workflow": "feed-load",
+        "nodes": ["init-error"]
+      }],
+
+      "query": {
+        "derivation": "error_rate",
+        "window": "1h"
+      },
+
+      "thresholds": {
+        "warning": 2.0,
+        "critical": 5.0
+      },
+
+      "display": {
+        "component": "MetricCard",
+        "size": "medium",
+        "showTrend": true,
+        "showSparkline": true
+      },
+
+      "_mockData": {
+        "current": 0.8,
+        "previous": 1.2,
+        "trend": "down",
+        "series": [
+          { "date": "2024-03-27T00:00", "value": 1.4 },
+          { "date": "2024-03-27T01:00", "value": 1.2 },
+          { "date": "2024-03-27T02:00", "value": 1.1 },
+          { "date": "2024-03-27T03:00", "value": 0.9 },
+          { "date": "2024-03-27T04:00", "value": 0.85 },
+          { "date": "2024-03-27T05:00", "value": 0.8 }
+        ]
+      }
+    },
+    {
+      "id": "daily-home-page-views",
+      "name": "Daily Page Views",
+      "description": "Home page views per day for the last 7 days",
+      "type": "counter",
+      "unit": "views",
+
+      "sources": [{
+        "storyboard": "activity-feed",
+        "workflow": "feed-load",
+        "event": "activity-feed.init.started"
+      }],
+
+      "query": {
+        "derivation": "count",
+        "timeGroup": "day"
+      },
+
+      "display": {
+        "component": "LineChart",
+        "size": "large"
+      },
+
+      "_mockData": {
+        "series": [
+          { "date": "2024-03-21", "value": 28493 },
+          { "date": "2024-03-22", "value": 31247 },
+          { "date": "2024-03-23", "value": 29102 },
+          { "date": "2024-03-24", "value": 27856 },
+          { "date": "2024-03-25", "value": 30421 },
+          { "date": "2024-03-26", "value": 32109 },
+          { "date": "2024-03-27", "value": 29876 }
+        ]
+      }
+    },
+    {
+      "id": "views-by-viewport",
+      "name": "Views by Viewport",
+      "description": "Daily page views split by mobile vs desktop",
+      "type": "counter",
+      "unit": "views",
+
+      "sources": [{
+        "storyboard": "activity-feed",
+        "workflow": "feed-load",
+        "event": "activity-feed.init.started"
+      }],
+
+      "query": {
+        "derivation": "count",
+        "groupBy": ["isMobile"],
+        "timeGroup": "day"
+      },
+
+      "display": {
+        "component": "StackedBarChart",
+        "size": "large"
+      },
+
+      "_mockData": {
+        "series": [
+          { "date": "2024-03-21", "mobile": 9847, "desktop": 18646 },
+          { "date": "2024-03-22", "mobile": 11023, "desktop": 20224 },
+          { "date": "2024-03-23", "mobile": 10156, "desktop": 18946 },
+          { "date": "2024-03-24", "mobile": 9234, "desktop": 18622 },
+          { "date": "2024-03-25", "mobile": 10567, "desktop": 19854 },
+          { "date": "2024-03-26", "mobile": 11234, "desktop": 20875 },
+          { "date": "2024-03-27", "mobile": 10423, "desktop": 19453 }
+        ]
+      }
+    },
+    {
+      "id": "mobile-interaction-rate",
+      "name": "Mobile Interactions/Session",
+      "description": "Average number of interactions per mobile session",
+      "type": "gauge",
+      "unit": "interactions",
+
+      "sources": [{
+        "storyboard": "activity-feed",
+        "workflow": "mobile-interaction",
+        "nodes": ["card-swipe", "commit-browse"]
+      }],
+
+      "query": {
+        "derivation": "avg",
+        "window": "1h"
+      },
+
+      "display": {
+        "component": "MetricCard",
+        "size": "medium"
+      },
+
+      "_mockData": {
+        "current": 4.7,
+        "previous": 4.2,
+        "trend": "up"
+      }
+    },
+    {
+      "id": "desktop-search-usage",
+      "name": "Search Usage Rate",
+      "description": "Percentage of desktop sessions that use search",
+      "type": "gauge",
+      "unit": "%",
+
+      "sources": [{
+        "storyboard": "activity-feed",
+        "workflow": "desktop-interaction",
+        "nodes": ["search-and-select"]
+      }],
+
+      "query": {
+        "derivation": "percentage",
+        "window": "1h"
+      },
+
+      "display": {
+        "component": "MetricCard",
+        "size": "medium"
+      },
+
+      "_mockData": {
+        "current": 23.4,
+        "previous": 21.8,
+        "trend": "up"
+      }
+    }
+  ],
+
+  "layout": {
+    "columns": 12,
+    "gap": 16,
+    "breakpoints": {
+      "mobile": 768,
+      "tablet": 1024
+    },
+    "rows": [
+      {
+        "title": "Overview",
+        "panels": [
+          { "id": "mobile-view-percentage", "span": 4, "spanMobile": 12 },
+          { "id": "total-page-views", "span": 4, "spanMobile": 12 },
+          { "id": "error-rate", "span": 4, "spanMobile": 12 }
+        ]
+      },
+      {
+        "title": "Traffic Trends",
+        "panels": [
+          { "id": "daily-home-page-views", "span": 6, "spanMobile": 12, "minHeight": 280 },
+          { "id": "views-by-viewport", "span": 6, "spanMobile": 12, "minHeight": 280 }
+        ]
+      },
+      {
+        "title": "Engagement",
+        "panels": [
+          { "id": "mobile-interaction-rate", "span": 6, "spanMobile": 12 },
+          { "id": "desktop-search-usage", "span": 6, "spanMobile": 12 }
+        ]
+      }
+    ]
+  }
+}