@chartbuddy.io/embed 1.7.52

package/vue.d.ts

@@ -0,0 +1,108 @@
+/**
+ * Type declarations for `@chartbuddy.io/embed/vue`.
+ *
+ * `vue` is a peer dependency — install it yourself. Vue 3.
+ */
+
+import type { DefineComponent, Ref, ShallowRef } from 'vue';
+import type {
+  ChartData,
+  ChartDataInput,
+  EmbedMode,
+  Insight,
+  InsightOptions,
+} from './chartbuddy-embed';
+
+/** A value the composable accepts as either a plain value, a ref, or a getter. */
+export type MaybeReactive<T> = T | Ref<T> | (() => T);
+
+export interface UseInsightOptions extends Omit<InsightOptions, 'chartData'> {
+  /**
+   * Chart config to render. Compared **by identity**, not deeply: assign a new
+   * object to trigger an `update()` on the live instance. Mutating a nested
+   * property in place will not be picked up.
+   */
+  chartData?: MaybeReactive<ChartDataInput | undefined>;
+  /** Called once the insight has finished booting. */
+  onReady?: (insight: Insight) => void;
+  /** Called after any meaningful config change, including live edits. */
+  onChange?: (chartData: ChartData | null) => void;
+  /** Called when the insight switches between view and edit. */
+  onModeChange?: (mode: EmbedMode) => void;
+}
+
+export interface UseInsightResult {
+  /** Bind to the element that should hold the chart. Size it yourself. */
+  containerRef: Ref<HTMLElement | null>;
+  /** The live instance, or null before mount / after unmount. */
+  insight: ShallowRef<Insight | null>;
+  /** True once `insight.ready` has resolved. */
+  ready: Ref<boolean>;
+  /**
+   * The last validation or boot failure, or null. Invalid `chartData` surfaces
+   * here as a `ChartDataValidationError` — read `error.issues` for the paths.
+   */
+  error: Ref<Error | null>;
+}
+
+/**
+ * Mount an Insight and keep it alive for the component's lifetime.
+ *
+ * Changing `instanceId`, `editable`, `toolbar`, `persist`, `assetBase`, or
+ * `hostOverrides` remounts the chart; changing `chartData` patches it in place.
+ *
+ * @example
+ * const chartData = ref({ chartType: 'line', seriesData: grid });
+ * const { containerRef, insight, ready } = useInsight({ chartData });
+ * // <div ref="containerRef" style="height: 400px" />
+ */
+export function useInsight(options?: UseInsightOptions): UseInsightResult;
+
+export interface InsightChartProps {
+  chartData?: ChartDataInput;
+  instanceId?: string;
+  editable?: boolean;
+  toolbar?: boolean;
+  persist?: boolean;
+  assetBase?: string;
+  hostOverrides?: InsightOptions['hostOverrides'];
+}
+
+export interface InsightChartSlotProps {
+  insight: Insight | null;
+  ready: boolean;
+  error: Error | null;
+}
+
+/**
+ * Declarative single-div wrapper around `useInsight`.
+ *
+ * Emits `ready`, `change`, `mode`, and `error`. Exposes `{ insight, ready, error }`
+ * via a template ref.
+ *
+ * @example
+ * <InsightChart
+ *   :chart-data="chartData"
+ *   editable
+ *   style="height: 400px"
+ *   @change="onChange"
+ *   @error="onError"
+ * />
+ */
+export declare const InsightChart: DefineComponent<
+  InsightChartProps,
+  { insight: ShallowRef<Insight | null>; ready: Ref<boolean>; error: Ref<Error | null> },
+  {},
+  {},
+  {},
+  {},
+  {},
+  {
+    ready: (insight: Insight) => void;
+    change: (chartData: ChartData | null) => void;
+    mode: (mode: EmbedMode) => void;
+    error: (error: Error) => void;
+  }
+>;
+
+export default InsightChart;

package/vue.mjs

@@ -0,0 +1,253 @@
+/**
+ * @chartbuddy.io/embed/vue — Vue 3 bindings for the imperative Insight API.
+ *
+ * Same job as the React bindings: `new Insight()` owns a DOM node and lives
+ * across renders, so consumers should not each rewrite the same lifecycle —
+ * mounting once, patching on data changes instead of remounting, keeping
+ * handlers stable, and destroying on unmount.
+ *
+ * Vue's reactivity makes most of this simpler than React (no StrictMode double
+ * mount, no dependency arrays), so this file is mostly `watch` wiring.
+ *
+ * Written without SFC/JSX so the package ships no build step and no bundler
+ * assumptions. `vue` is a peer dependency, imported here and never bundled.
+ *
+ * @example
+ * <script setup>
+ * import { InsightChart } from '@chartbuddy.io/embed/vue';
+ * const chartData = { chartType: 'clusteredBar', seriesData: grid };
+ * </script>
+ *
+ * <template>
+ *   <InsightChart :chart-data="chartData" editable style="height: 400px" />
+ * </template>
+ */
+
+import {
+  defineComponent,
+  h,
+  onBeforeUnmount,
+  onMounted,
+  ref,
+  shallowRef,
+  toRaw,
+  watch,
+} from 'vue';
+import { Insight } from './chartbuddy-embed.api.mjs';
+
+/** Options consumed at construction time; changing one requires a remount. */
+const CONSTRUCTION_KEYS = [
+  'instanceId',
+  'editable',
+  'toolbar',
+  'persist',
+  'assetBase',
+  'hostOverrides',
+];
+
+/**
+ * Unwrap a value that may be a ref, so options accept both plain values and
+ * refs — `useInsight({ chartData })` works with either.
+ */
+function read(value) {
+  return value && typeof value === 'object' && 'value' in value && value.__v_isRef
+    ? value.value
+    : value;
+}
+
+/** Pick just the construction options out of the caller's option bag. */
+function constructionOptions(options) {
+  const out = {};
+  for (const key of CONSTRUCTION_KEYS) {
+    const value = read(options[key]);
+    if (value !== undefined) out[key] = value;
+  }
+  return out;
+}
+
+/** Shallow-compare construction options so unrelated changes never remount. */
+function sameConstructionOptions(a, b) {
+  for (const key of CONSTRUCTION_KEYS) {
+    if (a[key] !== b[key]) return false;
+  }
+  return true;
+}
+
+/**
+ * Mount an Insight into a template ref and keep it alive for the component's life.
+ *
+ * Returns `{ containerRef, insight, ready, error }`. Bind `containerRef` to an
+ * element you have sized; `insight` is a `shallowRef` holding null until mount
+ * resolves, so guard imperative calls on it.
+ *
+ * `chartData` may be a plain object, a ref, or a getter. Whenever it changes the
+ * hook calls `update()` on the live instance rather than remounting. Comparison
+ * is by identity — assign a new object to trigger an update.
+ */
+export function useInsight(options = {}) {
+  const containerRef = ref(null);
+  const insight = shallowRef(null);
+  const ready = ref(false);
+  const error = ref(null);
+
+  let current = null;
+  let openedWith;
+  let disposed = false;
+  const stops = [];
+
+  const readChartData = () =>
+    typeof options.chartData === 'function' ? options.chartData() : read(options.chartData);
+
+  function teardown() {
+    stops.splice(0).forEach((stop) => stop());
+    ready.value = false;
+    insight.value = null;
+    if (current) {
+      current.destroy();
+      current = null;
+    }
+  }
+
+  function mount() {
+    const container = containerRef.value;
+    if (!container) return;
+
+    teardown();
+
+    const chartData = readChartData();
+    let instance;
+    try {
+      instance = new Insight(container, {
+        ...constructionOptions(options),
+        // toRaw so the engine never receives a reactive proxy of the config.
+        chartData: chartData === undefined ? undefined : toRaw(chartData),
+      });
+    } catch (err) {
+      // Invalid chartData throws synchronously (ChartDataValidationError).
+      error.value = err instanceof Error ? err : new Error(String(err));
+      return;
+    }
+
+    current = instance;
+    openedWith = chartData;
+    insight.value = instance;
+    error.value = null;
+
+    stops.push(
+      instance.on('change', (cd) => options.onChange?.(cd)),
+      instance.on('mode', (mode) => options.onModeChange?.(mode)),
+    );
+
+    instance.ready.then(
+      () => {
+        // The component may have unmounted, or remounted onto a new instance,
+        // before this resolved.
+        if (disposed || current !== instance) return;
+        ready.value = true;
+        options.onReady?.(instance);
+      },
+      (err) => {
+        if (disposed || current !== instance) return;
+        error.value = err instanceof Error ? err : new Error(String(err));
+      },
+    );
+  }
+
+  onMounted(mount);
+
+  onBeforeUnmount(() => {
+    disposed = true;
+    teardown();
+  });
+
+  // Data changes patch the live instance. Skipped when the value is the one the
+  // instance already opened with, so mounting does not also fire an update.
+  watch(readChartData, (chartData) => {
+    if (!current || chartData === undefined || chartData === openedWith) return;
+    openedWith = chartData;
+    try {
+      current.update(toRaw(chartData));
+      error.value = null;
+    } catch (err) {
+      error.value = err instanceof Error ? err : new Error(String(err));
+    }
+  });
+
+  // A real construction-option change does need a fresh mount.
+  watch(
+    () => constructionOptions(options),
+    (next, prev) => {
+      if (!current || sameConstructionOptions(next, prev)) return;
+      mount();
+    },
+    { deep: false },
+  );
+
+  return { containerRef, insight, ready, error };
+}
+
+/**
+ * Declarative wrapper around `useInsight`.
+ *
+ * Renders a single div. Size it via `style` / `class` — the chart fills its
+ * container, so a container with no height renders nothing visible.
+ *
+ * Emits `ready`, `change`, `mode`, and `error`. The default slot receives
+ * `{ insight, ready, error }` for overlay content.
+ */
+export const InsightChart = defineComponent({
+  name: 'InsightChart',
+  props: {
+    chartData: { type: Object, default: undefined },
+    instanceId: { type: String, default: undefined },
+    editable: { type: Boolean, default: undefined },
+    toolbar: { type: Boolean, default: undefined },
+    persist: { type: Boolean, default: undefined },
+    assetBase: { type: String, default: undefined },
+    hostOverrides: { type: Object, default: undefined },
+  },
+  emits: ['ready', 'change', 'mode', 'error'],
+  setup(props, { emit, slots, expose }) {
+    const { containerRef, insight, ready, error } = useInsight({
+      // Getters, so the composable tracks prop changes reactively.
+      chartData: () => props.chartData,
+      get instanceId() {
+        return props.instanceId;
+      },
+      get editable() {
+        return props.editable;
+      },
+      get toolbar() {
+        return props.toolbar;
+      },
+      get persist() {
+        return props.persist;
+      },
+      get assetBase() {
+        return props.assetBase;
+      },
+      get hostOverrides() {
+        return props.hostOverrides;
+      },
+      onReady: (instance) => emit('ready', instance),
+      onChange: (cd) => emit('change', cd),
+      onModeChange: (mode) => emit('mode', mode),
+    });
+
+    watch(error, (err) => {
+      if (err) emit('error', err);
+    });
+
+    // Parent components can reach the instance via a template ref.
+    expose({ insight, ready, error });
+
+    return () =>
+      h('div', { ref: containerRef }, slots.default?.({
+        insight: insight.value,
+        ready: ready.value,
+        error: error.value,
+      }));
+  },
+});
+
+export default InsightChart;

package/webapp-entry.css

@@ -0,0 +1,2 @@
+.tippy-box[data-animation=fade][data-state=hidden]{opacity:0}[data-tippy-root]{max-width:calc(100vw - 10px)}.tippy-box{position:relative;background-color:#333;color:#fff;border-radius:4px;font-size:14px;line-height:1.4;outline:0;transition-property:transform,visibility,opacity}.tippy-box[data-placement^=top]>.tippy-arrow{bottom:0}.tippy-box[data-placement^=top]>.tippy-arrow:before{bottom:-7px;left:0;border-width:8px 8px 0;border-top-color:initial;transform-origin:center top}.tippy-box[data-placement^=bottom]>.tippy-arrow{top:0}.tippy-box[data-placement^=bottom]>.tippy-arrow:before{top:-7px;left:0;border-width:0 8px 8px;border-bottom-color:initial;transform-origin:center bottom}.tippy-box[data-placement^=left]>.tippy-arrow{right:0}.tippy-box[data-placement^=left]>.tippy-arrow:before{border-width:8px 0 8px 8px;border-left-color:initial;right:-7px;transform-origin:center left}.tippy-box[data-placement^=right]>.tippy-arrow{left:0}.tippy-box[data-placement^=right]>.tippy-arrow:before{left:-7px;border-width:8px 8px 8px 0;border-right-color:initial;transform-origin:center right}.tippy-box[data-inertia][data-state=visible]{transition-timing-function:cubic-bezier(.54,1.5,.38,1.11)}.tippy-arrow{width:16px;height:16px;color:#333}.tippy-arrow:before{content:"";position:absolute;border-color:transparent;border-style:solid}.tippy-content{position:relative;padding:5px 9px;z-index:1}
+/*# sourceMappingURL=webapp-entry.css.map */