bigb-vue

Vue 3 components for bigb-django: interactive grid dashboards (drag/resize), query rendering (table, number, Chart.js), or injecting the SVG rendered server-side.

Screenshots

Dashboard (table, number, line, bar, pie, backend SVG)	Standalone query result

Installation

npm install bigb-vue

import { createBigbClient, BigbDashboard, BigbQueryResult } from "bigb-vue";

const client = createBigbClient({ baseURL: "/bigb" });

<!-- a full dashboard, read-only -->
<BigbDashboard :client="client" slug="sales" />

<!-- the same dashboard, with layout editing (drag/resize) enabled -->
<BigbDashboard :client="client" slug="sales" editable />

<!-- a single query, outside of any dashboard -->
<BigbQueryResult :client="client" slug="paid-orders" render-type="bar" />

Components

• BigbDashboard: interactive grid (grid-layout-plus), loads the dashboard and its tiles, PATCHes positions in editable mode.
• BigbTile: a single tile, dispatches to the right renderer based on render_type/render_target.
• BigbQueryResult: a single query (named via slug, or ad hoc via spec), outside of any dashboard.
• Renderers (also exported individually if needed directly): TableRenderer, NumberRenderer, ChartRenderer (line/bar/pie via Chart.js), SvgRenderer (injects the SVG rendered server-side).

Chart options

ChartRenderer (prop options), BigbQueryResult (prop chartOptions) and dashboard tiles (options.chart) accept optional chart options -- without them a chart renders exactly as before:

{
  xAxis: "time",               // x values are dates, placed proportionally
  step: true,                  // each value holds until the next one
  unit: "%",                   // axis, tooltip and table values
  color: "var(--chart-line)",  // CSS color or variable, resolved at render time
  table: true,                 // the values as a table under the chart
}

A single series then gets no legend (its title names it), a 2px line and a 10% area wash (hex colors); the tooltip follows the nearest x.

<BigbQueryResult
  :client="client"
  :spec="{ model: 'reports.ReportMetric', fields: ['at', 'value'], order_by: ['at'] }"
  render-type="line"
  :chart-options="{ xAxis: 'time', step: true, unit: '%' }"
/>

Composables

• useQuery(fetcher, { immediate }): generic reactive wrapper (data/loading/error/refresh) around any call returning a QueryResult.
• useDashboard(client, slug): loads a dashboard and exposes updateTileLayout().

Development

Requires Node.js (verified with Node 22).

npm install
npm run dev     # local demo (index.html + dev/App.vue), VITE_BIGB_BASE_URL for the API
npm run build   # vite build && vue-tsc -b (library mode + .d.ts declarations)
npm run lint    # eslint

npm audit reports 4 moderate/dev-only vulnerabilities (esbuild's dev server, postcss-selector-parser via eslint-plugin-vue) -- none affect the published code in dist/. npm audit fix --force would fix them but bumps vite to v8 and eslint-plugin-vue to v10 (breaking changes); left to Renovate rather than a forced bump here.