Export and Embedding

+-----------------------------------------------------------+
|  Export Trigger                                            |
|  [Export button] [Keyboard shortcut] [Scheduled job]       |
+-----------------------------------------------------------+
         |                    |                    |
         v                    v                    v
  +-------------+    +----------------+    +--------------+
  | Client-side |    | Server-side    |    | Scheduled    |
  | Export      |    | Render Service |    | Export       |
  | (browser)   |    | (Node.js 8098) |    | (cron)       |
  +-------------+    +----------------+    +--------------+
         |                    |                    |
         v                    v                    v
  +-------------+    +----------------+    +--------------+
  | Download    |    | Download or    |    | Email / S3 / |
  | to browser  |    | store in S3    |    | Webhook      |
  +-------------+    +----------------+    +--------------+

+-----------------------------------------------------------+
|  Export Dashboard: Q4 Revenue Analysis                     |
+-----------------------------------------------------------+
|                                                            |
|  Format:                                                   |
|  [x] PDF    [ ] PNG    [ ] CSV    [ ] Excel               |
|                                                            |
|  Options:                                                  |
|  Page size:       [A4 Landscape    v]                      |
|  Quality:         [High            v]                      |
|  Include filters: [x]                                      |
|  Include title:   [x]                                      |
|  Include timestamp: [x]                                    |
|                                                            |
|  Preview:                                                  |
|  +---------------------------------------------------+    |
|  | [Thumbnail preview of exported content]            |    |
|  +---------------------------------------------------+    |
|                                                            |
|  [Cancel]                                    [Export]      |
+-----------------------------------------------------------+

interface ExportOptions {
  target: string;             // CSS selector of element to capture
  filename?: string;          // Output filename (without extension)
  format?: 'pdf' | 'png' | 'csv' | 'xlsx' | 'json';
  options?: {
    orientation?: 'portrait' | 'landscape';
    pageSize?: 'A4' | 'A3' | 'Letter' | 'Legal';
    quality?: 'low' | 'medium' | 'high';
    margin?: { top: number; right: number; bottom: number; left: number };
    includeFilters?: boolean;
    includeTimestamp?: boolean;
    scale?: number;           // Pixel ratio for PNG (1x, 2x, 3x)
  };
}
 
export function useExport() {
  const [isExporting, setIsExporting] = useState(false);
  const [progress, setProgress] = useState(0);
 
  const exportToPdf = useCallback(async (options: ExportOptions) => { /* ... */ }, []);
  const exportToPng = useCallback(async (options: ExportOptions) => { /* ... */ }, []);
  const exportToCsv = useCallback(async (data: CsvExportData) => { /* ... */ }, []);
  const exportToExcel = useCallback(async (data: ExcelExportData) => { /* ... */ }, []);
  const exportToJson = useCallback(async (data: unknown, filename: string) => { /* ... */ }, []);
 
  return { isExporting, progress, exportToPdf, exportToPng, exportToCsv, exportToExcel, exportToJson };
}

1. User clicks Export PDF
        |
        v
2. html2canvas captures the target element as a canvas
   - Respects CSS transforms, shadows, and gradients
   - Handles cross-origin images via proxy
   - Applies scale factor for print quality (2x default)
        |
        v
3. Canvas is converted to PNG data URL
        |
        v
4. jspdf creates a PDF document
   - Sets page orientation and size
   - Adds margins
   - Splits content across pages if needed
   - Adds header (title, timestamp) and footer (page numbers)
        |
        v
5. PDF is saved to the browser download

POST /render/v1/dashboard/{dashboardId}/pdf
POST /render/v1/dashboard/{dashboardId}/png
POST /render/v1/chart/{chartId}/png
POST /render/v1/chart/{chartId}/svg
POST /render/v1/report/generate

{
  "dashboardId": "dash-123",
  "format": "pdf",
  "options": {
    "width": 1920,
    "height": 1080,
    "scale": 2,
    "orientation": "landscape",
    "pageSize": "A4",
    "includeFilters": true,
    "filterValues": {
      "region": "Western",
      "dateRange": "last_30_days"
    },
    "waitForSelector": ".chart-rendered",
    "timeout": 30000
  }
}

<!-- Embed a MATIH dashboard -->
<iframe
  src="https://platform.matih.ai/embed/dashboards/dash-123?token=eyJ..."
  width="100%"
  height="600"
  frameborder="0"
  allow="fullscreen"
  sandbox="allow-scripts allow-same-origin allow-popups"
></iframe>

+-----------------------------------------------------------+
|  Schedule Report: Weekly Revenue Summary                   |
+-----------------------------------------------------------+
|                                                            |
|  Dashboard: [Q4 Revenue Analysis   v]                      |
|                                                            |
|  Schedule:                                                 |
|  Frequency:  [Weekly             v]                        |
|  Day:        [Monday             v]                        |
|  Time:       [08:00 AM           v]                        |
|  Timezone:   [America/New_York   v]                        |
|                                                            |
|  Format:     [x] PDF  [ ] PNG  [ ] CSV                    |
|                                                            |
|  Filters:                                                  |
|  Region:     [Dynamic: user's region v]                    |
|  Date range: [Rolling: last 7 days   v]                    |
|                                                            |
|  Delivery:                                                 |
|  [x] Email to: [team@company.com, ceo@company.com]       |
|  [ ] Upload to S3: [s3://reports/weekly/]                 |
|  [ ] Webhook: [https://hooks.slack.com/...]               |
|                                                            |
|  [Cancel]                              [Schedule Report]   |
+-----------------------------------------------------------+

1. Scheduler triggers at configured time (cron)
        |
        v
2. Report Service retrieves dashboard configuration
        |
        v
3. Dynamic filter values are resolved
   (e.g., "last 7 days" calculated from current date)
        |
        v
4. Render Service generates the export
   - Renders dashboard with resolved filters
   - Produces PDF/PNG/CSV
        |
        v
5. Delivery Service distributes the report
   - Sends emails with attachments
   - Uploads to cloud storage
   - Triggers webhooks
        |
        v
6. Delivery confirmation logged in audit trail

// Generate a shareable link
const shareLink = await biService.createShareLink({
  dashboardId: 'dash-123',
  type: 'signed',
  expiresIn: '7d',
  permissions: {
    canFilter: true,
    canDrillDown: true,
    canExport: false,
  },
  filterValues: {
    region: 'Western',
  },
});
 
// Returns: https://platform.matih.ai/share/dash-123?token=eyJ...