Charts

MultiChart

The MultiChart component provides a unified way to visualize multiple datasets in various chart formats.

Currently the following formats are supported:

• Line
• Area
• Bar
• Table

1. Preparing the Data

Before utilizing the MultiChart component, it's essential to transform your API response into the desired dataset format. The helper functions provided can take care of this transformation for you if you're using any "pool"-like API requests like vmpool.info, hostpool.info vmpool.showback and so on...

Transforming API Response:

This is a snippet from an example response from the vmpool.showback API request:

{
  "id": 200,
  "message": "OK",
  "data": {
    "SHOWBACK_RECORDS": {
      "SHOWBACK": [
        {
          "VMID": "0",
          "VMNAME": "oneVm",
          "UID": "0",
          "GID": "0",
          "UNAME": "oneadmin",
          "GNAME": "oneadmin",
          "YEAR": "2023",
          "MONTH": "1",
          "CPU_COST": "1000",
          "MEMORY_COST": "0",
          "DISK_COST": "0",
          "TOTAL_COST": "1000",
          "HOURS": "100",
          "RHOURS": "100"
        },

To convert your API response into the desired dataset format, use the transformApiResponseToDataset function:

import { transformApiResponseToDataset } from 'client/components/Charts/MultiChart/helpers/scripts'
import { useGetShowbackPoolQuery } from 'client/features/OneApi/vm'

const keyMap = {
  VMID: 'OID',
  VMNAME: 'NAME',
  UNAME: 'UNAME',
  GNAME: 'GNAME',
  YEAR: 'YEAR',
  MONTH: 'MONTH',
  CPU_COST: 'cpuCost',
  MEMORY_COST: 'memoryCost',
  DISK_COST: 'diskCost',
  TOTAL_COST: 'totalCost',
  HOURS: 'hours',
  RHOURS: 'rHours',
}

const metricKeys = ['cpuCost', 'memoryCost', 'diskCost']

const labelingFunc = (record) => `${record.YEAR}-${record.MONTH}`

const filter = 0
const startMonth = -1
const startYear = -1
const endMonth = -1
const endYear = -1

const apiResponse =  useGetShowbackPoolQuery({
    filter,
    startMonth,
    startYear,
    endMonth,
    endYear,
  })

const dataset = transformApiResponseToDataset(apiResponse, keyMap, metricKeys, labelingFunction);

Here's a breakdown of the different parameters passed to the function:

• apiResponse: This is the raw data you get from your API call.
• keyMap: An object that maps the keys in the API response to the desired output keys.
• metricKeys: An array of keys that you want to aggregate for the metrics.
• labelingFunction: A function that generates a label for the dataset.

Splitting the dataset

Currently the entire API response is being input to the MultiChart component, if you want to split the dataset into smaller subsets you can use the filterDataset helper function:

import { filterDataset } from 'client/components/Charts/MultiChart/helpers/scripts'

...
const dataset = transformApiResponseToDataset(apiResponse, keyMap, metricKeys, labelingFunction);

const subset =  filterDataset(
    processedApiData,
    (record) => record.cpuCost > 10 && record.UNAME === 'oneadmin',
    labelingFunc
  )

This will split the dataset into a separate subset based on the filtering function, in this case it will only return those records where cpuCost is more than 10 and the UNAME is equal to 'oneadmin'.

2. Implementing the MultiChart component

Once your data is ready you can pass it to the MultiChart component:

      <MultiChart
        datasets={[dataset]}
        chartType={'bar'}
        ItemsPerPage={7}
        groupBy={'MONTH'}
      />

This will now successfully render your data in a bar chart view, grouping the data by the month.

The dataset(s) passed to the component must always be in an array.

3. Advanced customization

Here's a breakdown of the parameters that can be passed to the MultiChart component to further customize it's behavior:

1. visibleDatasets:

• Type: Array of numbers
• Description:
  • Specifies which datasets should be visible on the chart.
  • An array of dataset IDs.
  • If not provided, all datasets will be visible by default.

2. xAxisLabels:

• Type: Array of strings
• Description:
  • An array of unique names for the X-axis labels.
  • If not provided, labels are derived from datasets using the groupBy key.

3. selectedMetrics:

• Type: Object
• Description:
  • Contains the metric keys and a boolean to toggle the visibility on/off
  • E.g., for metrics "cpuHours" and "memoryUsage", if only "cpuHours" is visualized: { cpuHours: true }.

4. error:

• Type: String (optional)
• Description:
  • Contains error message if any issues arise.

5. tableColumns:

• Type: Array of objects
• Description:
  • Defines the configuration of table columns if chartType is 'table'.
  • Each object represents a column's configuration.
  • Example:

    const tableColumns = [
      { field: 'MONTH', headerName: 'Month', flex: 1 },
      { field: 'totalCost', headerName: 'Total Cost', flex: 1, type: 'number' },
    ]

6. customChartDefs:

• Type: Function
• Description:
  • Returns custom chart definitions.
  • Allows advanced customizations of the char, like grid, coloring, gradients etc...

7. metricNames:

• Type: Object (optional)
• Description:
  • Maps metric keys to human-readable names.
  • E.g., for a metric key "cpuHours" displayed as "CPU Hours": { cpuHours: "CPU Hours" }.

8. metricHues:

• Type: Object (optional)
• Description:
  • Contains hue values for different metrics.
  • Used to color-code metrics on the chart.
  • E.g., for "cpuHours" displayed in blue, hue value might be 240.
  • This will be derived internally by the component if it's not passed.

---