wani-graf 0.1.0

package/LICENSE

@@ -0,0 +1,21 @@
+MIT License
+
+Copyright (c) 2025 WaniGraf
+
+Permission is hereby granted, free of charge, to any person obtaining a copy
+of this software and associated documentation files (the "Software"), to deal
+in the Software without restriction, including without limitation the rights
+to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
+copies of the Software, and to permit persons to whom the Software is
+furnished to do so, subject to the following conditions:
+
+The above copyright notice and this permission notice shall be included in all
+copies or substantial portions of the Software.
+
+THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
+IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
+FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
+AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
+LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
+OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
+SOFTWARE.

package/README.md

@@ -0,0 +1,80 @@
+# wani-graf
+
+Embeddable chart web component powered by [WaniGraf](https://wanigraf.com). Drop a live, AI-generated chart anywhere with a single HTML tag — no API key required.
+
+## Install
+
+```bash
+npm install wani-graf
+```
+
+or via CDN:
+
+```html
+<script src="https://cdn.jsdelivr.net/npm/wani-graf/wani-graf.js"></script>
+```
+
+## Usage
+
+### Render a saved chart by key
+
+```html
+<wani-graf chart-key="abc123"></wani-graf>
+```
+
+Create a chart at [wanigraf.com](https://wanigraf.com), copy the 10-char key from the share menu, done.
+
+### Feed live external data into a saved chart
+
+```html
+<wani-graf chart-key="abc123" api-url="https://api.example.com/data"></wani-graf>
+<wani-graf chart-key="abc123" data='[{"month":"Jan","revenue":1200}]'></wani-graf>
+```
+
+### Generate a chart on-the-fly from raw data (no saved chart needed)
+
+```html
+<wani-graf data='[{"month":"Jan","revenue":1200}]'></wani-graf>
+<wani-graf api-url="https://api.example.com/data" chart-hint="bar"></wani-graf>
+```
+
+## Attributes
+
+| Attribute | Description |
+|---|---|
+| `chart-key` | Chart ID from wanigraf.com (10-char code) |
+| `data` | JSON string of an array of objects |
+| `api-url` | URL to fetch JSON data from (proxied server-side, CORS-safe) |
+| `chart-hint` | Preferred chart type for data-only mode: `line` \| `bar` \| `pie` |
+| `height` | Height in px (default: `400`) |
+| `base-url` | Override wanigraf.com base URL (for self-hosted / dev) |
+
+## React
+
+```jsx
+import 'wani-graf'
+
+export default function Chart() {
+  return <wani-graf chart-key="abc123" height="300" />
+}
+```
+
+On React 18 and below, use a ref if attributes don't apply:
+
+```jsx
+import { useEffect, useRef } from 'react'
+import 'wani-graf'
+
+export default function Chart() {
+  const ref = useRef()
+  useEffect(() => {
+    ref.current.setAttribute('chart-key', 'abc123')
+    ref.current.setAttribute('height', '300')
+  }, [])
+  return <wani-graf ref={ref} />
+}
+```
+
+## License
+
+MIT

package/package.json

@@ -0,0 +1,32 @@
+{
+  "name": "wani-graf",
+  "version": "0.1.0",
+  "description": "Embeddable chart web component powered by WaniGraf AI",
+  "main": "wani-graf.js",
+  "module": "wani-graf.js",
+  "type": "module",
+  "exports": {
+    ".": "./wani-graf.js"
+  },
+  "files": [
+    "wani-graf.js",
+    "README.md",
+    "LICENSE"
+  ],
+  "bugs": {
+    "url": "https://github.com/wanigraf/wani-graf/issues"
+  },
+  "keywords": [
+    "chart",
+    "web-component",
+    "custom-element",
+    "data-visualization",
+    "wanigraf"
+  ],
+  "license": "MIT",
+  "repository": {
+    "type": "git",
+    "url": "https://github.com/wanigraf/wani-graf"
+  },
+  "homepage": "https://wanigraf.com"
+}

package/wani-graf.js

@@ -0,0 +1,380 @@
+/**
+ * <wani-graf> — WaniGraf embeddable chart web component
+ *
+ * Usage:
+ *   <!-- Render a saved chart by key -->
+ *   <wani-graf chart-key="abc123"></wani-graf>
+ *
+ *   <!-- Render a saved chart but feed it live external data (data bridge) -->
+ *   <wani-graf chart-key="abc123" api-url="https://api.example.com/data"></wani-graf>
+ *   <wani-graf chart-key="abc123" data='[{"month":"Jan","revenue":1200}]'></wani-graf>
+ *
+ *   <!-- Generate a chart on-the-fly from raw data (no saved chart needed) -->
+ *   <wani-graf data='[{"month":"Jan","revenue":1200}]'></wani-graf>
+ *   <wani-graf api-url="https://api.example.com/data" chart-hint="bar"></wani-graf>
+ *
+ * Attributes:
+ *   chart-key   — The chart ID from wanigraf.com (10-char code)
+ *   data        — JSON string of an array of objects
+ *   api-url     — URL to fetch JSON data from (server-side CORS-safe fetch via our proxy)
+ *   chart-hint  — Preferred chart type hint for data-only mode: "line" | "bar" | "pie"
+ *   height      — Height in px (default: 400)
+ *   base-url    — Override wanigraf.com base URL (for self-hosted / dev)
+ *
+ * Install:
+ *   npm install wani-graf
+ *   import 'wani-graf'
+ *
+ *   or via CDN:
+ *   <script src="https://cdn.jsdelivr.net/npm/wani-graf/wani-graf.js"></script>
+ */
+
+(function () {
+  'use strict'
+
+  // Capture the script's own origin at load time (works because this IIFE runs synchronously).
+  // This means: when served from localhost:3000/wani-graf.js → base is localhost:3000.
+  //             when served from wanigraf.com/wani-graf.js  → base is wanigraf.com.
+  //             when loaded from CDN (jsdelivr, etc.)       → falls back to wanigraf.com.
+  const DEFAULT_BASE = (() => {
+    try {
+      const src = document.currentScript?.src
+      if (src) {
+        const origin = new URL(src).origin
+        // Don't use CDN origins as base — they don't host the API
+        if (!origin.includes('jsdelivr') && !origin.includes('unpkg') && !origin.includes('cdn')) {
+          return origin
+        }
+      }
+    } catch {}
+    return 'https://wanigraf.com'
+  })()
+
+  const CSS = `
+    :host {
+      display: block;
+      width: 100%;
+      height: var(--wg-height, 400px);
+      font-family: system-ui, -apple-system, sans-serif;
+    }
+    .wg-wrap {
+      width: 100%;
+      height: 100%;
+      position: relative;
+      border-radius: 8px;
+      overflow: hidden;
+      background: #1a1a2e;
+    }
+    iframe {
+      width: 100%;
+      height: 100%;
+      border: none;
+      display: block;
+    }
+    .wg-state {
+      display: flex;
+      flex-direction: column;
+      align-items: center;
+      justify-content: center;
+      width: 100%;
+      height: 100%;
+      gap: 12px;
+      font-size: 13px;
+      color: #888;
+    }
+    .wg-spinner {
+      width: 28px;
+      height: 28px;
+      border: 3px solid rgba(255,255,255,0.08);
+      border-top-color: #7d6eff;
+      border-radius: 50%;
+      animation: wg-spin 0.75s linear infinite;
+    }
+    @keyframes wg-spin { to { transform: rotate(360deg); } }
+    .wg-error { color: #f87171; text-align: center; padding: 0 16px; }
+    .wg-error-icon { font-size: 22px; }
+  `
+
+  class WaniGraf extends HTMLElement {
+    static get observedAttributes() {
+      return ['chart-key', 'data', 'api-url', 'chart-hint', 'height', 'base-url', 'site-key']
+    }
+
+    constructor() {
+      super()
+      this._shadow = this.attachShadow({ mode: 'open' })
+      this._msgHandler = null
+      this._iframe = null
+      this._pending = null
+      this._initialized = false
+      this._resizeObserver = null
+      this._wrap = null
+    }
+
+    connectedCallback() {
+      this._render()
+      this._init()
+      this._initialized = true
+    }
+
+    disconnectedCallback() {
+      if (this._msgHandler) {
+        window.removeEventListener('message', this._msgHandler)
+        this._msgHandler = null
+      }
+      if (this._resizeObserver) {
+        this._resizeObserver.disconnect()
+        this._resizeObserver = null
+      }
+    }
+
+    attributeChangedCallback() {
+      if (this._initialized) this._init()
+    }
+
+    // ─── Internal ───────────────────────────────────────────────────────────
+
+    _render() {
+      const height = this.getAttribute('height') || '400'
+      this._shadow.innerHTML = `
+        <style>${CSS}</style>
+        <div class="wg-wrap" style="--wg-height:${parseInt(height, 10)}px">
+          <div class="wg-state">
+            <div class="wg-spinner"></div>
+            <span>Loading…</span>
+          </div>
+        </div>
+      `
+      this._wrap = this._shadow.querySelector('.wg-wrap')
+    }
+
+    // Returns the current pixel dimensions of the wrapper div
+    _wrapSize() {
+      if (!this._wrap) return { w: 0, h: 0 }
+      const r = this._wrap.getBoundingClientRect()
+      return { w: Math.round(r.width), h: Math.round(r.height) }
+    }
+
+    // Observe wrap size and forward changes to the iframe
+    _startResizeObserver() {
+      if (this._resizeObserver) this._resizeObserver.disconnect()
+      if (typeof ResizeObserver === 'undefined') return
+      this._resizeObserver = new ResizeObserver(() => {
+        if (!this._iframe?.contentWindow) return
+        const { w, h } = this._wrapSize()
+        if (w && h) {
+          this._iframe.contentWindow.postMessage(
+            { type: 'wanigraf:resize', width: w, height: h }, '*'
+          )
+        }
+      })
+      this._resizeObserver.observe(this._wrap)
+    }
+
+    async _init() {
+      // Clean up previous listeners / observers
+      if (this._msgHandler) {
+        window.removeEventListener('message', this._msgHandler)
+        this._msgHandler = null
+      }
+      if (this._resizeObserver) {
+        this._resizeObserver.disconnect()
+        this._resizeObserver = null
+      }
+      this._pending = null
+      this._iframe = null
+
+      this._showLoading()
+
+      const base = (this.getAttribute('base-url') || DEFAULT_BASE).replace(/\/$/, '')
+      const chartKey = this.getAttribute('chart-key') || ''
+      const dataAttr = this.getAttribute('data') || ''
+      const apiUrl = this.getAttribute('api-url') || ''
+      const hint = this.getAttribute('chart-hint') || ''
+      const siteKey = this.getAttribute('site-key') || ''
+
+      // Resolve external data if needed
+      let data = null
+      if (apiUrl) {
+        data = await this._fetchApiData(base, apiUrl)
+        if (data === null) return // error already shown
+      } else if (dataAttr) {
+        try {
+          data = JSON.parse(dataAttr)
+          if (!Array.isArray(data)) throw new Error()
+        } catch {
+          this._showError('Invalid JSON in <code>data</code> attribute — must be an array.')
+          return
+        }
+      }
+
+      if (chartKey && !data) {
+        // ── Mode 1: Key only — plain iframe embed ──────────────────────────
+        this._mountIframe(`${base}/embed/${chartKey}`)
+
+      } else if (chartKey && data) {
+        // ── Mode 2: Key + data — data bridge ──────────────────────────────
+        let translator = null
+        try {
+          const body = { key: chartKey, data }
+          if (siteKey) body.siteKey = siteKey
+          const res = await this._post(`${base}/api/public/bridge`, body)
+          translator = res.translator ?? null
+        } catch (e) {
+          this._showError(`Bridge error: ${e.message}`)
+          return
+        }
+        this._pending = { type: 'wanigraf:inject', data, translator }
+        this._mountIframe(`${base}/embed/${chartKey}`, true)
+
+      } else if (data) {
+        // ── Mode 3: Data only — AI-generated ephemeral chart ───────────────
+        // Check localStorage cache first (same data → skip AI)
+        const dataHash = await this._hashData(data)
+        const cacheKey = `wg:${dataHash}:${hint}`
+        const cached = this._readCache(cacheKey)
+        if (cached) {
+          this._pending = { type: 'wanigraf:config', chartType: cached.chartType, chartData: cached.chartData }
+          this._mountIframe(`${base}/embed/preview`, true)
+          return
+        }
+
+        let config
+        try {
+          const body = { data, hint: hint || undefined, dataHash }
+          if (siteKey) body.siteKey = siteKey
+          config = await this._post(`${base}/api/public/chart-from-data`, body)
+        } catch (e) {
+          this._showError(`Chart generation failed: ${e.message}`)
+          return
+        }
+        // Cache the result so repeat renders skip the AI call
+        this._writeCache(cacheKey, { chartType: config.chartType, chartData: config.chartData })
+        this._pending = { type: 'wanigraf:config', chartType: config.chartType, chartData: config.chartData }
+        this._mountIframe(`${base}/embed/preview`, true)
+
+      } else {
+        this._showError('Provide at least one of: <code>chart-key</code>, <code>data</code>, or <code>api-url</code>.')
+      }
+    }
+
+    async _fetchApiData(base, apiUrl) {
+      // Route through our server-side proxy to avoid browser CORS issues
+      try {
+        const res = await fetch(`${base}/api/fetch-json`, {
+          method: 'POST',
+          headers: { 'Content-Type': 'application/json' },
+          body: JSON.stringify({ url: apiUrl }),
+        })
+        if (!res.ok) throw new Error(`HTTP ${res.status}`)
+        const json = await res.json()
+        // Normalize: if root is an object with an array inside, try to unwrap
+        if (Array.isArray(json)) return json
+        // Try common wrapper keys
+        for (const key of ['data', 'results', 'items', 'rows', 'records']) {
+          if (Array.isArray(json[key])) return json[key]
+        }
+        return [json] // fallback: wrap single object
+      } catch (e) {
+        this._showError(`Failed to fetch api-url: ${e.message}`)
+        return null
+      }
+    }
+
+    _mountIframe(src, awaitReady = false) {
+      // Append current dimensions to the URL so the embed page has them immediately
+      const { w, h } = this._wrapSize()
+      const url = new URL(src, location.href)
+      if (w) url.searchParams.set('w', w)
+      if (h) url.searchParams.set('h', h)
+
+      const iframe = document.createElement('iframe')
+      iframe.src = url.toString()
+      iframe.setAttribute('scrolling', 'no')
+      iframe.setAttribute('allowtransparency', 'true')
+      iframe.setAttribute('loading', 'lazy')
+      this._iframe = iframe
+
+      if (awaitReady && this._pending) {
+        const pending = this._pending
+        this._msgHandler = (e) => {
+          if (e.source !== iframe.contentWindow) return
+          if (e.data?.type === 'wanigraf:ready') {
+            iframe.contentWindow.postMessage(pending, '*')
+          }
+        }
+        window.addEventListener('message', this._msgHandler)
+      }
+
+      this._wrap.innerHTML = ''
+      this._wrap.appendChild(iframe)
+
+      // Start forwarding resize events to the iframe
+      this._startResizeObserver()
+    }
+
+    // ─── Caching helpers ─────────────────────────────────────────────────────
+
+    async _hashData(data) {
+      try {
+        const str = JSON.stringify(data)
+        const buf = await crypto.subtle.digest('SHA-256', new TextEncoder().encode(str))
+        return Array.from(new Uint8Array(buf)).map(b => b.toString(16).padStart(2, '0')).join('').slice(0, 16)
+      } catch {
+        // Fallback: simple string hash
+        const str = JSON.stringify(data)
+        let h = 0
+        for (let i = 0; i < str.length; i++) h = Math.imul(31, h) + str.charCodeAt(i) | 0
+        return (h >>> 0).toString(16)
+      }
+    }
+
+    _readCache(key) {
+      try {
+        const raw = localStorage.getItem(key)
+        if (!raw) return null
+        const { v, ts } = JSON.parse(raw)
+        // Cache TTL: 24 hours
+        if (Date.now() - ts > 86_400_000) { localStorage.removeItem(key); return null }
+        return v
+      } catch { return null }
+    }
+
+    _writeCache(key, value) {
+      try { localStorage.setItem(key, JSON.stringify({ v: value, ts: Date.now() })) } catch {}
+    }
+
+    async _post(url, body) {
+      const res = await fetch(url, {
+        method: 'POST',
+        headers: { 'Content-Type': 'application/json' },
+        body: JSON.stringify(body),
+      })
+      const json = await res.json()
+      if (!res.ok) throw new Error(json.statusMessage || json.message || `HTTP ${res.status}`)
+      return json
+    }
+
+    _showLoading() {
+      this._wrap.innerHTML = `
+        <div class="wg-state">
+          <div class="wg-spinner"></div>
+          <span>Loading…</span>
+        </div>
+      `
+    }
+
+    _showError(msg) {
+      this._wrap.innerHTML = `
+        <div class="wg-state">
+          <span class="wg-error-icon">⚠️</span>
+          <span class="wg-error">${msg}</span>
+        </div>
+      `
+    }
+  }
+
+  if (!customElements.get('wani-graf')) {
+    customElements.define('wani-graf', WaniGraf)
+  }
+})()