ui-stats

Summary

ui-stats is a series of polymer components which allow you to quickly and easily create a statusboard to track whatever it is you need to track. Data can be loaded explicitly, programmatically, or more commonly via URL. Different components can generate different types of tiles for displaying different types of data.

Check out the demo

Installation and Usage

Import polymer and the ui-stats component, easiest to use the shared instance, but locally is fine too.

<link rel="import" href="https://services.glgresearch.com/ui-toolkit/polymer.html">
<link rel="import" href="https://services.glgresearch.com/ui-toolkit/node_modules/ui-stats/src/ui-stats.html">

Due to a bug in polymer libraries, if you don't have a <script> tag in your document's <head> you'll need to add one, though it can be empty. Here's a starting template that puts it all together.

<!DOCTYPE html>
<html>
  <head>
    <script><!-- work around polymer bug, that requires a script tag in head --></script>
    <link rel="import" href="https://services.glgresearch.com/ui-toolkit/polymer.html">
    <link rel="import" href="https://services.glgresearch.com/ui-toolkit/node_modules/ui-stats/src/ui-stats.html">
  </head>

  <body>
    <ui-stats-timeline label="CM Acceptance Percentage" units="%" groupBy="week" valueProperty="accept_rate"
      src="https://services.glgresearch.com/epiquery/councilApplicant/getStats.mustache">
    </ui-stats-timeline>
  </body>

</html>

ui-stats-timeline

Display a value and its changes over time, with optional grouping by month, day, or hour. You can pass property formatted JSON data via the data attribute, but the typical usage is to use the src attribute to specify the URL of query that returns an array of JSON objects, and use the dateProperty and valueProperty attributes to select your X and Y columns.

The body of the tag is interpreted as descriptive comment and will appear under the title.

<ui-stats-timeline label="Avg Daily CM Applications" groupBy="day" limit="30"
  src="https://services.glgresearch.com/epiquery/councilApplicant/getStats.mustache"
  valueProperty="applied">
</ui-stats-timeline>

label

The name of the metric you are displaying

src

dateProperty

The name of the data property that holds the X-axis value. Must be a valid date. Defaults to date.

datePattern

The moment.js date formatting pattern to use when parsing date values. Defaults to YYYY-MM-DD

valueProperty

The name of the data property that holds the Y-axis value. Must be a number. Defaults to all item properties excep the date property

valueProperties

An array of data properties for the Y-axis values. Will generate multi-series data with a legend. You can specify an actual array of strings, or a comma separated list which will be parsed into an array. If you specify multiple properties here, the reduction attribute will be applied to each series first, and then to the collection of resulting values. Rolling up the roll ups as it were. If you want to hide the primary metric, set the reduction attribute to none.

You can derive properties by using simple javascript expressions referencing other properties. For example in this case accepted, paid and applied are properties in the return json and we are calculating the ratio.

<ui-stats-timeline label="Derived Value with Trendline (smoothed)" units="%" groupBy="day" smooth="true"
  src="https://services.glgresearch.com/epiquery/councilApplicant/getStats.mustache" limit="30" trendline="true"
  labels="Accept Rate, Paid Rate"
  valueProperties="pct_accepted=accepted / applied, pct_paid=paid / applied">
</ui-stats-timeline>

limit

The number of rows to keep (after applying any grouping), taken from the end of the list. Defaults to MAX_INT

groupBy

Grouping by date. One of either hour, day, week, or month which groups all the data by the start of the time period, using your first date column as the key. Simply sums all the other property fields. Defaults to group by day.

groupByFunction

Sets the reduction function to apply when aggregating groupbed values. The default value is sum. Possible values are: first, last, sum, average, min, max, and count.

includePartialGroups

if true, will keep incomplete groups - hours, days, weeks, etc.

reduction

Sets the reduction function to apply the data values to create the primary metric. The default value is last, unless you have a trendline, and then it is trend. Possible values are: first, last, sum, average, min, max, count, trend and none. The value of none hides the metric area, just showing the graph.

units

The units, for example % (between 0 and 1), ms, or some arbitrary string. Defaults to empty. Note that the percentage symbol triggers % formatting.

smooth

If false disables simple graphic smoothing.

transform

Possible values are movingAverage, weightedMovingAverage, cumulative or none, defaults to none. You can set the size of the sliding window for moving averages in parentheses. For example movingAverage(3), defaults to 7

data

Explicitely set the object array of data, rather than loading it from a URL

type

Type of chart, defaults to line. Useful values are column and area

method

GET or POST, defaults to GET, applied only if src is specified

trendline

If true, show a trendline

showChange

If false, hide the change indicators, defaults to true

absoluteChange

If true, show the change as an absolute value rather than a percentage, defaults to false

invertChange

If true, treat a decrease in value as an improvement, rather than a decline (ex. response time)

since

If specified, ignore values before this date string (uses dateFormat). Supports relatives in the format -30d or +30d, where you can use days, hours, weeks. months, or years. Any limit is applied after date range filtering

until

If specified, ignore values after this date string (uses dateFormat). Supports relatives in the format -30d or +30d, where you can use days, hours, weeks. months, or years. Any limit is applied after date range filtering

onLoad

Optional function (name) called after loading from src. You are passed the JSON from the server, and should return new JSON. Designed to allow you to customize the data returned client side. For example:

  var custom = function (json) {
    for (var i=0; i < json.length; i++) {
      row = json[i];
      for (var property in row) {
        if (typeof row[property] == 'number')
          row[property] = row[property] * 2
      }
    }
    return json;
  }

labels

Optional list of labels to use for the valueProperties. Defaults to property name.

ui-stats-number

The Number tile is focused on the display of a metric that can be represented by a single number, along with associated secondary metrics, such as a comparison to the previous value or a sparkline. For example:

Data can be provided in one of several ways:

Via the value attribute, which specifies a single value:
```
<ui-stats-number value="55">
</ui-stats>
```

Via the data attribute, which takes an array of values:

<ui-stats-number data="[5, 10, 15, 20, 25]">
</ui-stats>

Or an array of quoted JSON objects, which requires use of the property attribute to specify which property is your primary metric.

<ui-stats-number property="count" data="[{'date':'2014-03-01', 'count':10}, {'date':'2014-03-02', 'count':15}, {'date':'2014-03-03', 'count':11}]">
</ui-stats>

Via the src attribute, passing in the URL to a resource containing an array of data, in JSON format. This option also requires the property attribute. JSON is loaded from the URL and assigned to the data attribute. Note that this is a client side call, and requires CORS if it's not hitting the same server. This is intended to be the the primary use case.
```
<ui-stats-number property="count" src="http://example.com/data.json">
</ui-stats>
```

The layout of the tile is automatically configured by the type of data you pass into it, with the following behaviors.

If you set the value attribute to a single value, that value will be used as the primary display metric, overriding any other ways of setting that value, such as loading the data from a URL.
If you set the data attribute to a single value, it is the same as setting the value attribute.
If you set the data attribute to exactly two values, the first value will be used as the primary metric, and the second value will be considered the previous value for that metric. A percent change will automatically be shown in this case. If you want to display the previous value, rather than the change, set the absolute attribute to true.
If you set the data attribute to three or more values, a primary metric will be displayed and a sparkline of the values will be generated. By default the sum of the array will be the primary metric, but this can be controlled via the reduction attribute. If you only want to consider a subset of the values, set the limit attribute to truncate the list to the last limit elements. For example, the following URL returns 365 days of data in JSON format, but we only care about the last 7 days, and the "applied" property.
```
<ui-stats-number name="CM Applications (7 days)"
  src="https://services.glgresearch.com/epiquery/councilApplicant/getStats.mustache"
  property="applied" limit="7">
</ui-stats>
```

Attributes

src

<URL>

URL containing data to populate data. Must be CORS accessible. Should return an array of JSON objects. Requires the property value to specify which object property to use for the Y axis value.

property

<string>

Name of the property value to use for the Y axis when loading data via the src attribute

value

<integer>

Shortcut for assigning a single value, equivalent to passing a single value array to data

data

<Array>

Array of values, will be truncated to the last limit elements. If it contains two elements, you get change indicators, if three or more elements you get a sparkline.

limit

<integer>

Number of elements (from the end of the array) to use from data

reduction

<string>

Sets the reduction function to apply the data values to create the primary metric. The default values is last if there are two or less values and sum if there are more than two values. Possible values are: first, last, sum, average, min, max, count

name

<string>

Name of the stat, appears in the title bar.

absolute

<boolean>

When there are exactly 2 values present, show the absolute change in value, rather than a percentage change.

smooth

<boolean>

If true, applies smoothing to the sparkline.

prefix

<string>

String prepended to the metrics, for example $ or ms.

method

GET or POST, defaults to GET, applied only if src is specified

ui-stats-chart

Simplified wrapper around Google Charts designed to display charts from JSON data.

Attributes

src

<URL>

URL containing data to populate data. Must be CORS accessible. Should return an array of JSON objects. Requires the cols value to specify which object property or properties to use for the Y axis value(s).

data

<Array>

Array of values, will be truncated to the last limit elements. Data can be an array of numbers, or objects, if you specify the cols attribute to describe the data.

limit

<integer>

Number of elements (from the end of the array) to use from data

name

<string>

Name of the stat, appears in the title bar.

smooth

<boolean>

If true, applies smoothing to the sparkline.

cols

<Array>

JSON array describing the columns in the data. Uses the following properties. Columns are considered ordered and you are expected to put dates in column 0 if generating a timeline chart.

id, property name
type, one of date, string, or number
label, name (defaults to id value)
pattern, only applies to dates, pattern for date parser, defaults to YYYY-MM-DD

type

<string>

Type of chart to draw. Can be one of pie, bar, column, line, 'scatter', 'area'

groupBy

<string>

Grouping by date. One of either hour, day, week, or month which groups all the data by the start of the time period, using your first date column as the key. Simply sums all the other property fields.

width

Width of the nested chart element. Defaults to 26em

method

GET or POST, defaults to GET, applied only if src is specified

minValue

Moves the min value of the horizontal axis to the specified value for bar charts

onLoad

Optional function (name) called after loading from src. You are passed the JSON from the server, and should return new JSON. Designed to allow you to customize the data returned client side. For example:

  var custom = function (json) {
    for (var i=0; i < json.length; i++) {
      row = json[i];
      for (var property in row) {
        if (typeof row[property] == 'number')
          row[property] = row[property] * 2
      }
    }
    return json;
  }

Name		Name	Last commit message	Last commit date
Latest commit History 183 Commits
bower_components		bower_components
core-shared-lib		core-shared-lib
google-apis		google-apis
google-chart		google-chart
images		images
node_modules		node_modules
src		src
.gitignore		.gitignore
README.md		README.md
bower.json		bower.json
demo.html		demo.html
index.html		index.html
package.json		package.json

Folders and files

Latest commit

History

Repository files navigation

ui-stats

Summary

Installation and Usage

ui-stats-timeline

label

src

dateProperty

datePattern

valueProperty

valueProperties

limit

groupBy

groupByFunction

includePartialGroups

reduction

units

smooth

transform

data

type

method

trendline

showChange

absoluteChange

invertChange

since

until

onLoad

labels

ui-stats-number

Attributes

src

property

value

data

limit

reduction

name

absolute

smooth

prefix

method

ui-stats-chart

Attributes

src

data

limit

name

smooth

cols

type

groupBy

width

method

minValue

onLoad

About

Resources

Uh oh!

Stars

Watchers

Forks

Releases

Packages 0

Uh oh!

Uh oh!

Contributors

Uh oh!

Languages

Packages