Docs
🚀 ⏐ Getting Started
Data Shapes

Data Shapes

In REAVIZ, most charts use a data property to render their visuals. This data adheres to a generic ChartDataShape which can take on two different formats depending on the type of chart you are using.

Chart Data Formats

  • ChartShallowDataShape: Used for single-series charts like simple Bar Charts or Area Charts.
  • ChartNestedDataShape: Used for multi-series charts like Stacked Area Charts, Grouped Bar Charts, etc.

Each of these data types defines a key and data property. The data property can either be a raw data type or a nested shape, depending on the chart. The raw data types, known as ChartDataTypes, include:

type ChartDataTypes = number | string | Date | bigInt.BigInteger;

For more details, you can refer to the source code (opens in a new tab).

ChartShallowDataShape

The ChartShallowDataShape is used for single-series charts. This format includes a straightforward key-value pair, along with optional metadata.

interface ChartShallowDataShape {
  // The key for the data point. Typically this might be a x-axis value.
  key: ChartDataTypes;
 
  // The data to render. Typically this might be a y-axis value.
  data: ChartDataTypes;
 
  // Additional metadata to pass to be used for tooltips/etc
  metadata?: any;
}

Example: Single-Series BarChart

To use this data shape in a BarChart, your data might look like this:

const data = [
  { key: 'DLP', data: 13 },
  { key: 'SIEM', data: 2 },
  { key: 'Endpoint', data: 7 }
]

This data structure is simple, with each object representing a bar in the chart.

ChartNestedDataShape

The ChartNestedDataShape is designed for multi-series charts. Here, the data property is a nested array of ChartShallowDataShape items, allowing for more complex data representations.

export interface ChartNestedDataShape {
  // The key for the data point. Typically used as the x-axis value.
  key: ChartDataTypes;
 
  // A series of data to render. Typically used as the x+y axis values.
  data: ChartShallowDataShape<ChartDataTypes>[];
 
  // Additional metadata to pass to be used for tooltips/etc
  metadata?: any;
}

Example: Multi-Series BarChart

For a multi-series BarChart, your data might look like this:

const data = [
  {
    key: 'Lateral Movement',
    data: [
      {
        key: 'XML',
        data: 100
      },
      {
        key: 'JSON',
        data: 120
      }
    ]
  },
  {
    key: 'Discovery',
    data: [
      {
        key: 'XML',
        data: 100
      },
      {
        key: 'JSON',
        data: 120
      }
    ]
  }
]

In this example, our x-axis would show Lateral Movement and Discovery and then a group of bar would contain XML and JSON with their respective values.

Explanation

  • Single-Series Charts: Ideal for charts with one set of data points (e.g., Bar Chart with one bar per category).
  • Multi-Series Charts: Used when you have multiple data series per category (e.g., Stacked Bar Chart with multiple bars per category).

Using these data shapes correctly ensures that your charts are rendered accurately and effectively.

DevelopingColors