Mock Data

This page provides information about the mock data system for the Reeflow Core SDK.

Mock Data System

When developing or testing your application, you can use the built-in mock data system by setting the mock attribute on the <reeflow-provider> component.

Overview

The mock data system provides intelligent sample data based on an e-commerce scenario with 20 orders from 2024. Unlike static mock data, the Reeflow SDK’s mock system:

Automatically aggregates data for chart queries
Supports time-based grouping with different granularities
Handles filtering and pagination for table queries
Returns properly formatted results matching real API responses

Data Schema

The mock dataset represents e-commerce orders with the following columns:

Column	Type	Description	Example Values
`order_id`	integer	Unique order identifier	1, 2, 3…
`order_date`	date	Order date (YYYY-MM-DD)	2024-01-15, 2024-03-22
`customer_name`	text	Customer full name	Alice Johnson, Bob Smith
`product_category`	text	Product category	Electronics, Clothing, Books
`product_name`	text	Product name	Laptop Pro 15”, Winter Jacket
`total_amount`	real	Order total in USD	1299.99, 89.99
`status`	text	Order status	completed, shipped, processing, pending

Product Categories

The dataset includes orders from 6 product categories:

Electronics - Laptop Pro 15”, Wireless Mouse, 4K Monitor, USB-C Hub, Mechanical Keyboard
Clothing - Winter Jacket, Running Shoes, Denim Jeans
Books - TypeScript Guide, Design Patterns, Clean Code
Home & Garden - Coffee Maker, LED Lamp, Plant Pot
Sports - Yoga Mat, Dumbbells Set, Water Bottle
Toys - Building Blocks, Board Game

Complete Dataset

The mock dataset contains 20 orders spanning from January to October 2024:

#	Date	Customer	Category	Product	Amount	Status
1	2024-01-15	Alice Johnson	Electronics	Laptop Pro 15”	$1,299.99	completed
2	2024-01-18	Bob Smith	Clothing	Winter Jacket	$89.99	completed
3	2024-02-03	Charlie Brown	Books	TypeScript Guide	$34.99	completed
4	2024-02-14	Diana Prince	Electronics	Wireless Mouse	$29.99	shipped
5	2024-03-05	Ethan Hunt	Home & Garden	Coffee Maker	$79.99	completed
6	2024-03-22	Fiona Green	Sports	Yoga Mat	$24.99	completed
7	2024-04-10	George Wilson	Toys	Building Blocks	$49.99	completed
8	2024-04-25	Hannah Moore	Electronics	4K Monitor	$349.99	shipped
9	2024-05-08	Ian Taylor	Clothing	Running Shoes	$119.99	completed
10	2024-05-30	Julia Roberts	Books	Design Patterns	$44.99	completed
11	2024-06-12	Alice Johnson	Electronics	USB-C Hub	$39.99	processing
12	2024-06-28	Bob Smith	Home & Garden	LED Lamp	$19.99	shipped
13	2024-07-05	Charlie Brown	Sports	Dumbbells Set	$89.99	completed
14	2024-07-19	Diana Prince	Toys	Board Game	$34.99	completed
15	2024-08-02	Ethan Hunt	Electronics	Mechanical Keyboard	$159.99	processing
16	2024-08-16	Fiona Green	Clothing	Denim Jeans	$59.99	shipped
17	2024-09-01	George Wilson	Books	Clean Code	$39.99	completed
18	2024-09-14	Hannah Moore	Home & Garden	Plant Pot	$14.99	pending
19	2024-10-03	Ian Taylor	Sports	Water Bottle	$12.99	processing
20	2024-10-15	Julia Roberts	Electronics	Wireless Mouse	$29.99	pending

Total Revenue: $2,537.87

Aggregate Queries

When you use an aggregate query, the mock system automatically groups and aggregates the data.

Example: Revenue by Category

Query:

{
  "type": "aggregate",
  "measures": [{ "column": "orders.total_amount", "type": "sum" }],
  "dimensions": [{ "column": "orders.product_category", "type": "categorical" }]
}

Result: 6 rows (automatically aggregated and sorted by revenue):

product_category	total_amount
Electronics	$1,819.96
Clothing	$269.97
Books	$119.97
Home & Garden	$114.97
Sports	$127.97
Toys	$84.98

Time-Based Aggregations

Time dimensions support multiple granularities:

Example: Monthly Revenue

Query:

{
  "type": "aggregate",
  "measures": [{ "column": "orders.total_amount", "type": "sum" }],
  "dimensions": [
    {
      "column": "orders.order_date",
      "type": "time",
      "granularity": "month"
    }
  ]
}

Result: 10 rows (one per month):

order_date	total_amount
2024-01	$1,389.98
2024-02	$64.98
2024-03	$104.98
2024-04	$399.98
2024-05	$164.98
2024-06	$59.98
2024-07	$124.98
2024-08	$219.98
2024-09	$39.99
2024-10	$42.98

Supported Granularities

day - Group by individual days (2024-01-15, 2024-01-18, …)
week - Group by week within month (2024-01-W3, 2024-02-W1, …)
month - Group by month (2024-01, 2024-02, …)
quarter - Group by quarter (2024-Q1, 2024-Q2, …)
year - Group by year (2024)

Table Queries

Table queries return raw data with optional column filtering and pagination.

Example: Recent Orders

Query:

{
  "type": "table",
  "columns": [
    { "name": "orders.order_id" },
    { "name": "orders.order_date" },
    { "name": "orders.customer_name" },
    { "name": "orders.total_amount" }
  ],
  "limit": 5,
  "offset": 0
}

Result: First 5 orders with selected columns only.

Supported Aggregation Types

The mock system supports all standard aggregation types:

sum - Sum of values
avg - Average of values
count - Count of rows
min - Minimum value
max - Maximum value
count_distinct - Count of unique values

Example Queries

import { ReeflowBarChart } from '@reeflow/react';

<ReeflowBarChart
  title="Revenue by Status"
  query={{
    type: 'aggregate',
    measures: [{ column: 'total_amount', type: 'sum' }],
    dimensions: [{ column: 'status', type: 'categorical' }],
  }}
/>;

<reeflow-bar-chart title="Revenue by Status">
  <script type="application/json" slot="query">
    {
      "type": "aggregate",
      "measures": [{"column": "total_amount", "type": "sum"}],
      "dimensions": [{"column": "status", "type": "categorical"}]
    }
  </script>
</reeflow-bar-chart>

Line Chart - Order Count Over Time

React
Vanilla JS / HTML

import { ReeflowLineChart } from '@reeflow/react';

<ReeflowLineChart
  title="Orders Per Month"
  query={{
    type: 'aggregate',
    measures: [{ column: 'order_id', type: 'count' }],
    dimensions: [
      {
        column: 'order_date',
        type: 'time',
        granularity: 'month',
      },
    ],
  }}
/>;

<reeflow-line-chart title="Orders Per Month">
  <script type="application/json" slot="query">
    {
      "type": "aggregate",
      "measures": [{"column": "order_id", "type": "count"}],
      "dimensions": [{
        "column": "order_date",
        "type": "time",
        "granularity": "month"
      }]
    }
  </script>
</reeflow-line-chart>

Pie Chart - Category Distribution

React
Vanilla JS / HTML

import { ReeflowPieChart } from '@reeflow/react';

<ReeflowPieChart
  title="Revenue by Category"
  query={{
    type: 'aggregate',
    measures: [{ column: 'total_amount', type: 'sum' }],
    dimensions: [{ column: 'product_category', type: 'categorical' }],
  }}
/>;

<reeflow-pie-chart title="Revenue by Category">
  <script type="application/json" slot="query">
    {
      "type": "aggregate",
      "measures": [{"column": "total_amount", "type": "sum"}],
      "dimensions": [{"column": "product_category", "type": "categorical"}]
    }
  </script>
</reeflow-pie-chart>

Limitations

The mock data system is designed for development and testing purposes. It has the following limitations:

Fixed dataset - Always returns the same 20 orders
No filtering support - Filters in queries are ignored
No joins - Join clauses are ignored
Simple sorting - Results are sorted by the first measure in descending order
No data persistence - Data cannot be modified

For production use, connect to a real Reeflow workspace using an embed token.

Mock Workbook Data

When using the <reeflow-workbook> component in mock mode, a sample workbook is returned with a complete multi-page dashboard structure.

Workbook Structure

The mock workbook is called “Sample Analytics Dashboard” and includes 2 pages.

Page 1: Overview

Main dashboard overview with key metrics using a 12-column grid layout (24px row height):

Component	Type	Position	Size	Description
Recent Orders	Table	(0, 0)	12×8	Displays columns: `customer_id`, `total_amount`, `id`
Sales by Date	Bar Chart	(0, 8)	12×11	Sum of `total_amount` grouped by `order_date`

Page 2: Detailed Analysis

Detailed breakdown with a 12-column grid layout (10px row height):

Component	Type	Position	Size	Description
All Data	Table	(0, 0)	12×28	Full table view with all available columns

Component Configuration

The workbook handles pagination, sorting, and rendering of all component types automatically.

Example Usage

React
Vanilla JS / HTML

import { ReeflowProvider, ReeflowWorkbook } from '@reeflow/react';

<ReeflowProvider mock>
  <ReeflowWorkbook workbookId="any-id" />
</ReeflowProvider>;

<reeflow-provider mock>
  <reeflow-workbook workbook-id="any-id"></reeflow-workbook>
</reeflow-provider>

In mock mode, any workbook ID will return the same sample dashboard. For real workbooks, use a valid embed token and workbook ID from your Reeflow Console.

Custom Mock Data

You can provide your own mock data function when configuring the provider:

import { ReeflowProvider } from '@reeflow/core-sdk';
import type { JSONQLQuery, QueryResult } from '@reeflow/core-sdk';

async function myMockData(query: JSONQLQuery): Promise<QueryResult> {
  // Your custom logic here
  return {
    rows: [...],
    columns: [...],
    row_count: 0,
    execution_time_ms: 0,
  };
}

const provider = new ReeflowProvider({
  authToken: 'token',
  mockData: myMockData
});

See the Provider documentation for more details on custom mock data.