Table of Contents

• What rb-cube-renderer Does
• Minimal Embed
• Attributes
• Events
• Composing with Other rb-* Components
• Authentication and CORS

What rb-cube-renderer Does

<rb-cube-renderer> is a custom web element that:

1. Loads a cube definition from your DataPallas backend
2. Presents the user with a list of dimensions, measures, segments, and hierarchies
3. As the user ticks fields, generates and runs the SQL against the cube's database connection
4. Renders the result inline (table by default; can pipe into <rb-chart> or <rb-pivot-table> — see Composing)

Because the component talks to the DataPallas backend (not the database directly), the credentials and the schema validation stay server-side. The browser only ever sees the cube's shape, never the connection's password.

📷 Screenshot placeholder: 200_25_cube-embed-snippet.png — The Usage tab inside the Cube modal showing the copy-paste <rb-cube-renderer> HTML snippet.

Minimal Embed

Drop this in any HTML page:

<!-- 1. Load the DataPallas web-components bundle -->
<script type="module"
        src="http://localhost:9090/api/web-components/rb-components.esm.js"></script>
 
<!-- 2. Embed the cube -->
<rb-cube-renderer
  cube-id="orders_overview"
  api-base-url="http://localhost:9090/api">
</rb-cube-renderer>

The component fetches the cube definition by cube-id, fetches data from the backend as the user picks fields, and renders the result in place.

📷 Screenshot placeholder: 200_30_cube-embed-running.png — A simple host page with <rb-cube-renderer> running, showing dimension/measure checkboxes on the left and a result table on the right.

Attributes

Events

The component dispatches standard DOM events you can hook with addEventListener:

<rb-cube-renderer cube-id="orders_overview" api-base-url="..."></rb-cube-renderer>
 
<script>
  const cube = document.querySelector('rb-cube-renderer');
  cube.addEventListener('selectionChanged', (e) => {
    console.log('User picked:', e.detail);
  });
  cube.addEventListener('dataLoaded', (e) => {
    console.log('Generated SQL:', e.detail.sql);
  });
</script>

Composing with Other rb-* Components

A cube provides the data; you can choose the visualization separately. Pipe dataLoaded into a chart or pivot table:

<rb-cube-renderer
  id="cube"
  cube-id="orders_overview"
  api-base-url="..."
  default-fields="order_date,revenue"
  read-only>
</rb-cube-renderer>
 
<rb-chart id="chart" type="line" api-base-url="..."></rb-chart>
 
<script>
  const cube = document.getElementById('cube');
  const chart = document.getElementById('chart');
  cube.addEventListener('dataLoaded', (e) => {
    chart.data = e.detail.rows;
  });
</script>

This pattern — interactive cube renderer feeding a fixed chart — is the foundation of self-service dashboards. End users change the cube selection; the chart updates without a page reload.

See the related component pages for full attribute references:

• rb-chart
• rb-pivot-table
• rb-tabulator

Authentication and CORS

<rb-cube-renderer> calls the DataPallas REST API directly. If your host page is on a different origin from DataPallas:

• CORS — DataPallas serves with permissive CORS by default for the embed endpoints. Tighten this in production by setting allowed origins in config/_internal/settings.xml (see API docs).
• API key — for production embeds, pass an API key as a query string or header so the backend can rate-limit per consumer. The exact mechanism is the same as for <rb-chart> and friends — see API docs.
• Local dev — when DataPallas is running on localhost:9090 and your app is on localhost:3000, the default CORS allows both. No configuration needed.

📷 Screenshot placeholder: 200_35_cube-feeding-dashboard.png (optional) — A dashboard page showing one <rb-cube-renderer> driving a <rb-chart> and a <rb-pivot-table> simultaneously.