Hedwig is a component library for graphing monitoring data for Rackspace.

It is based on web components, so it can fit inside of any web UI application.

To get started simply install Hedwig into your application

Install using npm

npm install rackspace/hedwig

How To Use

Hedwig uses web components so it is quite easy to use.

Just add a component tag to your page and add any data-* attributes for configuration

<hedwig-graph data-unit="percent" data-height="200" data-width="400" data-graph='[someBoundData]' ></hedwig-graph>

This will render the graph, taking in the data and mapping according to the components perscribed data format.

data-graph(required)
This is required for the graph to render, this is the set of data that will include the datapoints related to the x & y coordinates.

data-unit
This is the value to be passed along to the graph to determine what symbol or word to show along side the y ticks.

data-title
Use to Set title of graph.

Grouping & MultiLine Graphs

One of the features Hedwig has is the ability to create multiline graphs. This can be relevant for when more than one device or other category is wanting to be displayed in a graph or more than one monitor for a specific device.

For displaying a multiline graph be sure to specify the key in the JSON data that will be used to group the metrics. Consider the following data:

        
          [
  {
    "data": {
      "tenant": "hybrid:5454",
      "metricName": "CPU_total",
      "tags": {
        "accountType": "MANAGED_HOSTING",
        "metricGroup": "network",
        "monitoring_system": "ZENOSS",
        "resource": "5454",
        "resource_account_id": "4876373",
        "resource_cmdb_source": "CORE",
        "system_device": "80244",
        "system_key": "Devices/802836",
        "unit": "percent"
      },
      "values": {
        "2021-06-29T21:00:10Z": 54.127630767822266,
        "2021-06-29T21:20:10Z": 87.447630767822266,
        "2021-06-29T23:55:10Z": 33.67766128540039,
        "2021-06-30T02:05:10Z": 29.23769943237305,
        "2021-06-30T02:30:10Z": 31.547718505859375,
        "2021-06-30T06:40:10Z": 67.127779541015625,
        "2021-06-30T08:30:10Z": 93.3510779098510742,
        "2021-06-30T09:15:10Z": 14.61779861450195,
        "2021-06-30T09:25:10Z": 37.11779861450195,
        "2021-06-30T10:55:10Z": 65.871787109375,
        "2021-06-30T14:50:10Z": 89.23795883178711,
        "2021-06-30T16:00:10Z": 41.00217199707
      }
    },
    "metadata": {
      "aggregator": "raw",
      "startTime": "2021-06-29T16:01:46.684752Z",
      "endTime": "2021-06-30T16:01:46.684777Z"
    }
  },
  {
    "data": {
      "tenant": "hybrid:4876373",
      "metricName": "CPU_total",
      "tags": {
        "accountType": "MANAGED_HOSTING",
        "metricGroup": "network",
        "monitoring_system": "ZENOSS",
        "resource": "80277",
        "resource_account_id": "4876373",
        "resource_cmdb_source": "CORE",
        "system_device": "80277",
        "system_key": "Devices/802835",
        "unit": "percent"
      },
      "values": {
        "2021-06-29T21:00:10Z": 24.127630767822266,
        "2021-06-29T21:20:10Z": 77.447630767822266,
        "2021-06-29T23:55:10Z": 53.67766128540039,
        "2021-06-30T02:05:10Z": 19.23769943237305,
        "2021-06-30T02:30:10Z": 81.547718505859375,
        "2021-06-30T06:40:10Z": 97.127779541015625,
        "2021-06-30T08:30:10Z": 33.3510779098510742,
        "2021-06-30T09:15:10Z": 24.61779861450195,
        "2021-06-30T09:25:10Z": 37.11779861450195,
        "2021-06-30T10:55:10Z": 65.871787109375,
        "2021-06-30T14:50:10Z": 69.23795883178711,
        "2021-06-30T16:00:10Z": 21.00217199707
      }
    },
    "metadata": {
      "aggregator": "raw",
      "startTime": "2021-06-29T16:01:46.684752Z",
      "endTime": "2021-06-30T16:01:46.684777Z"
    }
  }
]
        
      

If you're wanting to graph this data in a multiline format where tags.system_key is the grouping qualifier, you'd then add the data-group attribute and enter the value of the key being used for grouping.

<hedwig-graph data-title="CPU" data-field="CPU_total" data-group="tags.system" data-height="200" data-width="400" data='[someBoundData]' ></hedwig-graph>

This will render the graph, with multiline capabilities