Charts Widget

Charts using entities

These charts use the entities by their respective schema selection. The data to be projected on the charts greatly varies on the fields the schema has.

Interfaces

The chart uses single schema by its relation and added single or multiple fields of the resulting entity to draw contents.

indexAxis: determines whether to draw on "x" or "y" axis without requiring any changes to the data. axisLabel: label to be shown on the determined axis. The default value is "{{item.name}}". datasets.data: field to be used in the entities. datasets.label: summarizes what the dataset represents on the table datasets.color: color code or string to represent the dataset.

export interface ICustomPluginChart {
  displayType: "chart";
  variant: "line" | "steppedLine" | "bar" | "stackedBar";
  schema: string;
  options: {
    indexAxis?: "x" | "y";
    axisLabel?: string;
    datasets: ICustomPluginChartDataset[];
  };
  sort?: IDataFlexibilitySort;
  filters?: IDataFlexibilityFilterCondition[];
  dateRange?: ICustomPluginDateRange;
}

interface ICustomPluginChartDataset {
  data: string;
  label?: string;
  color?: string;
}

Examples

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",
    "schema": "<relation_path_to_schema>",
    "options": {
      "datasets": [
        {
          "data": "{{ item.accruedCosts }}",
          "label": "Accrued Cost",
          "color": "orange"
        },
        {
          "data": "{{ item.priorPeriodCosts }}",
          "label": "Prior Period Cost",
          "color": "red"
        }
      ],
      "axisLabel": "{{ item.name }}"
    },
    "dateRange": {
      "enabled": true
    }
  }
]

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

[
    {
      "displayType": "chart",
      "variant": "stackedBar",
      "schema": "<relation_path_to_schema>",
      "options": {
        "datasets": [
          {
            "data": "{{ item.DORACFR }}",
            "label": "DORALTC",
            "color": "orange"
          },
          {
            "data": "{{ item.DORADF }}",
            "label": "DORADF",
            "color": "darkorange"
          },
          {
            "data": "{{ item.DORALTC }}",
            "label": "DORALTC",
            "color": "red"
          },
          {
            "data": "{{ item.DORAMTTR }}",
            "label": "DORAMTTR",
            "color": "purple"
          }
        ],
        "axisLabel": "{{ item.name }}",
        "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.

Interfaces

indexAxis: determines whether to draw on "x" or "y" axis without requiring any changes to the data. axisLabel: label to be shown on the determined axis. The default value is "{{item.value}}". datasets.data: field to be used in the entities. datasets.label: summarizes what the dataset represents on the table datasets.color: color code or string to represent the dataset. datasets.schema: schema relation to get the aggregated data for this dataset. datasets.aggregate.field: entity field to be used to aggregate. datasets.aggregate.modifier: if the entity field is a date, modifiers can be used for variety.

export interface ICustomPluginChartAggregate {
  displayType: "aggregateChart";
  variant: "line" | "steppedLine" | "bar" | "stackedBar";
  options: {
    indexAxis?: "x" | "y";
    axisLabel?: string;
    datasets: ICustomPluginChartAggregateDataset[];
  };
  dateRange?: ICustomPluginDateRange;
}

interface ICustomPluginChartAggregateDataset {
  data?: string;
  label?: string;
  color?: string;
  schema: string;
  aggregate: {
    field: string;
    modifier?: "by_hour" | "by_date" | "by_week" | "by_month";
  };
  filters?: IDataFlexibilityFilterCondition[];
  sort?: IDataFlexibilitySort;
}

Examples

Here are example usages of the charts with aggregated data.

Line Chart with resources cost by operation

[
  {
    "displayType": "aggregateChart",
    "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": "aggregateChart",
    "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": "aggregateChart",
    "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"
          }
        }
      ]
    }
  }
]

Last updated

Copyright © 2023 configure8, Inc. All rights reserved.