@gilles/bigb-vue (0.2.0-dev.102)
Installation
@gilles:registry=npm config set @gilles:registry=npm install @gilles/bigb-vue@0.2.0-dev.102"@gilles/bigb-vue": "0.2.0-dev.102"About this package
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 ineditablemode.BigbTile: a single tile, dispatches to the right renderer based onrender_type/render_target.BigbQueryResult: a single query (named viaslug, or ad hoc viaspec), 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 aQueryResult.useDashboard(client, slug): loads a dashboard and exposesupdateTileLayout().
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.
Dependencies
Dependencies
| ID | Version |
|---|---|
| axios | ^1.7.7 |
| chart.js | ^4.4.4 |
| grid-layout-plus | ^1.0.5 |
Development dependencies
| ID | Version |
|---|---|
| @typescript-eslint/parser | ^8.71.1 |
| @vitejs/plugin-vue | ^6.0.0 |
| @vue/tsconfig | ^0.9.0 |
| eslint | ^10.0.0 |
| eslint-plugin-vue | ^10.0.0 |
| typescript | ^6.0.0 |
| vite | ^8.0.0 |
| vitest | ^5.0.5 |
| vue | ^3.5.0 |
| vue-eslint-parser | ^10.4.1 |
| vue-tsc | ^3.0.0 |
Peer dependencies
| ID | Version |
|---|---|
| vue | ^3.5.0 |