Charts Widget

Interfaces

indexAxis: determines whether to draw on "x" or "y" axis without requiring any changes to the data. datasets.schema: schema relation path to get the aggregated data for this dataset. Uses theorigin schema if set to empty string "". datasets.aggregate.field: optional entity field to be used to aggregate. Ex. name datasets.aggregate.modifier: if the entity field is a date, modifiers can be used for further grouping. Ex. by_date -> 17 May 2024 datasets.data: data field to be used in the entities. It should be numerical. If aggregation is used, default is {{item.count}}. datasets.axisLabel: label field to be used to in the entities and shown on the determined axis. If aggregation is used default is {{item.value}}. datasets.label: summarizes what the dataset represents on the table as a static context. Ex. Incidents datasets.color: color code or string to represent the dataset. datasets.maxItems: page size for the query to fetch the data. This may increase load times if there are too many items in the schema. Default 50 items.

export interface ICustomPluginChart {
  displayType: "chart";
  variant: "line" | "steppedLine" | "bar" | "stackedBar" | "doughnut";
  options: ICustomPluginChartOptions;
  dateRange?: ICustomPluginDateRange;
}

export interface ICustomPluginChartOptions {
  indexAxis?: "x" | "y";
  datasets: ICustomPluginChartOptionsDataset[];
}

export interface ICustomPluginChartOptionsDataset {
  schema: string;
  aggregate?: ICustomPluginChartOptionAggregate;
  data?: string;
  axisLabel?: string;
  label?: string;
  color?: string; // string[] (if variant is doughnut);
  filters?: IDataFlexibilityFilterCondition[];
  sort?: IDataFlexibilitySort;
  maxItems?: number;
}

interface ICustomPluginChartOptionAggregate {
  field: string;
  modifier?: "by_hour" | "by_date" | "by_week" | "by_month";
}

Examples

Charts using entities

Here are example usages of the charts.

Bar chart of child services with their accrued and prior period cost and date range

[
  {
    "displayType": "chart",
    "variant": "bar",
    "options": {
      "datasets": [
        {
          "schema": "<relation_path_to_schema>",
          "data": "{{ item.accruedCosts }}",
          "axisLabel": "{{ item.name }}",
          "label": "Accrued Cost",
          "color": "orange",
          "maxItems": 50,
        },
        {
          "schema": "<relation_path_to_schema>",
          "data": "{{ item.priorPeriodCosts }}",
          "axisLabel": "{{ item.name }}",
          "label": "Prior Period Cost",
          "color": "red",
          "maxItems": 50,
        }
      ]
    },
    "dateRange": {
      "enabled": true
    }
  }
]

Horizontal Stacked Bar chart of child services with their metrics and date range

[
  {
    "displayType": "chart",
    "variant": "stackedBar",
    "options": {
      "datasets": [
        {
          "schema": "",
          "axisLabel": "{{ item.name }}",
          "data": "{{ item.DORACFR }}",
          "label": "DORALTC",
          "color": "orange"
        },
        {
          "schema": "",
          "axisLabel": "{{ item.name }}",
          "data": "{{ item.DORADF }}",
          "label": "DORADF",
          "color": "darkorange"
        },
        {
          "schema": "",
          "axisLabel": "{{ item.name }}",
          "data": "{{ item.DORALTC }}",
          "label": "DORALTC",
          "color": "red"
        },
        {
          "schema": "",
          "axisLabel": "{{ item.name }}",
          "data": "{{ item.DORAMTTR }}",
          "label": "DORAMTTR",
          "color": "purple"
        }
      ],
      "indexAxis": "y"
    },
    "dateRange": {
      "enabled": true
    }
  }
]

Charts using aggregated data

In most cases using aggregated data results in more summarized information to track in your entity pages. In these charts, you can define multiple datasets with each having their own schemas as data sources.

Line Chart with resources cost by operation

[
  {
    "displayType": "chart",
    "variant": "line",
    "options": {
      "datasets": [
        {
          "schema": "environments.services.resources.childResources.costs",
          "label": "Child Resources Costs",
          "color": "purple",
          "aggregate": {
            "field": "operation"
          }
        }
      ]
    },
    "dateRange": {
      "enabled": true
    }
  }
]

Stepped Line Chart with deploy and incidents count aggregated by their start time

[
  {
    "displayType": "chart",
    "variant": "steppedLine",
    "options": {
      "datasets": [
        {
          "label": "Incidents",
          "color": "red",
          "schema": "ServiceIncidents",
          "aggregate": {
            "field": "Start",
            "modifier": "by_date"
          },
          "sort": {
            "direction": "ASC",
            "field": "value"
          }
        },
        {
          "label": "Deploys",
          "color": "orange",
          "schema": "DeploysServices",
          "aggregate": {
            "field": "Start",
            "modifier": "by_date"
          },
          "sort": {
            "direction": "ASC",
            "field": "value"
          }
        }
      ]
    }
  }
]

Line Chart with average duration of deploys and incidents

This example utilizes DF functionality to get the average values via their schema definition.

Both schemas Data Model JSON

[
  {
    "hidden": false,
    "name": "Duration",
    "columnName": "Duration(s)",
    "calc": {
      "type": "FUNCTION",
      "aggregation": "AVG",
      "path": "details.Duration"
    }
  }
]

Custom plugin configuration

[
  {
    "displayType": "chart",
    "variant": "line",
    "options": {
      "datasets": [
        {
          "label": "Deploys",
          "color": "orange",
          "schema": "DeploysServices",
          "aggregate": {
            "field": "Start",
            "modifier": "by_date"
          },
          "data": "{{item.Duration}}",
          "sort": {
            "direction": "ASC",
            "field": "value"
          }
        },
        {
          "label": "Incidents",
          "color": "red",
          "schema": "ServiceIncidents",
          "aggregate": {
            "field": "Start",
            "modifier": "by_date"
          },
          "data": "{{item.Duration}}",
          "sort": {
            "direction": "ASC",
            "field": "value"
          }
        }
      ]
    }
  }
]

Doughnut Chart with scorecard metric result passing

[
  {
    "displayType": "chart",
    "variant": "doughnut",
    "options": {
      "datasets": [
        {
          "schema": "scorecardMetricResultsServices",
          "aggregate": {
            "field": "pass"
          },
          "sort": {
            "direction": "ASC",
            "field": "value"
          },
          "color": [
            "#F2A15F",
            "#8CC572"
          ],
          "label": "checks result passing"
        }
      ]
    }
  }
]