Getting Started

Everything lives in one npm package. Install it once; which subpath you import from picks your framework.

bash 
npm install @datastripes/dashboard

Package layout

ImportContentsNeeds
@datastripes/dashboardCore engine: schema, query engine, grid engine, store, widget logic, licensingnothing
@datastripes/dashboard/react<DatastripesDashboard> component, toolbar, widget wizard, settingsreact, react-dom ^19
@datastripes/dashboard/vueDatastripesDashboard SFCvue ^3.4
@datastripes/dashboard/angularDatastripesDashboardComponent@angular/core, @angular/common ^18 || ^19
@datastripes/dashboard/elements<datastripes-dashboard> custom elementnothing

The UI frameworks are optional peer dependencies — installing the package never pulls one in. Every entry shares one copy of the core engine at runtime.

The core-only example

Everything a framework wrapper does — querying, filtering, grid layout, licensing — is just calls into the core. You can use it with no UI at all, e.g. to pre-compute a dashboard's results server-side before hydrating a framework component with them.

ts 
import {
  DashboardStore,
  JsQueryEngine,
  parseDashboardConfig
} from '@datastripes/dashboard';

const config = parseDashboardConfig({
  version: '1.0.0',
  settings: { title: 'Sales', layout: { columns: 12, rowHeight: 60, gutter: 16 } },
  globalFilters: [],
  calculatedFields: [],
  columnLabels: {},
  widgets: [
    {
      id: 'kpi_revenue',
      type: 'kpi_card',
      title: 'Total Revenue',
      grid: { x: 0, y: 0, w: 3, h: 2 },
      dataQuery: { metrics: [{ field: 'amount', aggregation: 'sum', alias: 'amount' }] },
      renderConfig: { format: 'currency' }
    }
  ]
});

const store = new DashboardStore({
  config,
  data: myRows, // Array>
  engine: new JsQueryEngine()
});

console.log(store.getState().results.kpi_revenue);
// { rows: [{ amount: 48213 }], total: 1 }

Where to go next