DataRoom Documentation

DataRoom is an open-source, all-in-one solution for designing, previewing, and publishing large screens (dashboards) and web pages. It provides a complete workflow: from connecting data sources and performing data cleaning to designing layouts and deploying them.

Key features include:

• Dual Design Modes: A Page Designer using a grid layout for low-code responsive web pages, and a Large Screen Designer using absolute positioning for flexible, high-fidelity dashboard layouts.
• AI-Powered Creation: Supports creating screens and pages via conversational AI using the MCP (Model Context Protocol) and SKILL.
• Extensive Data Support: Connects to 20+ data sources including traditional databases (MySQL, PostgreSQL, Oracle, etc.), NoSQL (MongoDB, ElasticSearch), real-time streams (MQTT, WebSocket), and file formats (Excel, CSV).
• Dataset Management: Create custom datasets using JSON, SQL, HTTP, ES, Excel, or WebSocket.
• Asset Management: A centralized library for images, videos, and 3D models with support for S3-compatible storage (MinIO, Ceph, etc.).
• Security & Integration: Includes user/role/permission management, access logs, and support for Single Sign-On (SSO) with frameworks like RuoYi.

The transformChartData function allows designers to write custom JavaScript logic to process dataset data before it is rendered by a chart component. This is configured via the script property within the chart.dataset object.

When a script is provided, it is executed within a specialized bep (Business Execution Platform) context. This context provides access to the chart configuration, the raw data, component parameters, and global variables.

Key features of the bep context:

• bep.data: The raw dataset received from the API.
• bep.params: An object containing the current component parameters.
• bep.globals: An interface to interact with global variables via .get(name) and .set(name, value).
• bep.chart: The current ChartConfig.
• bep.canvasInst: The canvas instance for low-level interactions.

If the script is empty, the original data is returned. If the script fails or does not return a value, the function returns an empty array [] and logs a warning or error.

// Example of a transformation script
const region = bep.globals.get('region')
return bep.data
  .filter(item => item.region === region)
  .map(item => ({
    time: item.month,
    value: Number(item.amount),
    year: bep.params.year,
  }))

When executing a processing script, a single bep object is injected into the scope. This object provides access to the component's environment, similar to high-code component event interactions.

bep Object Structure:

• canvasInst: The current canvas instance.
• chart: The current component configuration (including the script itself).
• data: The dataset results.
  • In normal refresh scenarios, this is the normalized data from run4Chart.
  • In real-time subscription scenarios, this is the data pushed by the server before it reaches the component.
• params: The parameters used for the current data request or subscription (retrieved via canvasInst.fillDatasetParams(chart)).
• globals: An object for interacting with global variables:
  • get(name: string): unknown: Reads a global variable.
  • set(name: string, value: string): void: Updates a static global variable.

{
  canvasInst,
  chart,
  data,
  params,
  globals: {
    get(name: string): unknown,
    set(name: string, value: string): void
  }
}

To support realtime data updates that require chart-specific transformations, you must modify the use-realtime-dataset hook to track chart state (configuration and parameters) rather than just chart IDs. This allows the system to apply transformChartData to incoming realtime socket messages before scheduling updates.

Implementation Steps

1. Update Data Structures: Replace the datasetChartMap (which maps dataset codes to chart IDs) with datasetChartStateMap, which maps dataset codes to an array of DatasetChartState objects. Each DatasetChartState must contain the chart configuration and its specific paramMap.

2. Update Subscription Logic: During the buildDatasetIndex and walkCharts process, ensure that for every chart associated with a dataset, both the chart config and the paramMap (generated via canvasInst.fillDatasetParams(chart)) are stored in the datasetChartStateMap.

3. Transform Realtime Data: Modify the dispatchDatasetData function to be async. Instead of iterating over IDs, iterate over the DatasetChartState objects. For each state, call await transformChartData using the stored chart, canvasInst, normalizedData, and paramMap. Finally, call scheduleChartUpdate with the resulting transformedData.

const dispatchDatasetData = async (datasetCode: string, data: unknown) => {
  const chartStates = datasetChartStateMap.get(datasetCode) || []
  const normalizedData = normalizeDatasetData(data)

  for (const chartState of chartStates) {
    const transformedData = await transformChartData({
      chart: chartState.chart,
      canvasInst,
      data: normalizedData,
      params: chartState.paramMap,
    })
    scheduleChartUpdate(chartState.chart.id, transformedData)
  }
}