MetricsGraphics React Component

A react component thats wraps the popular visualization library, MetricsGraphics.js

Demo & Examples

Live demo: cf.github.io/react-metrics-graphics

Installation

The easiest way to use react-metrics-graphics is to install it from NPM and include it in your own React build process (using Browserify, Webpack, etc).

npm install react-metrics-graphics --save

You can also use the standalone build by including dist/react-metrics-graphics.js in your page. If you use this, make sure you have already included React, and it is available as a global variable.

Also ensure to include the standard MetricsGraphics.js stylesheet to the head of your HTML doc

<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/metrics-graphics/2.11.0/metricsgraphics.min.css">

Usage

Simply add the react component MetricsGraphics, and pass it any number of the standard MetricGraphics.js options as component attributes

import MetricsGraphics from 'react-metrics-graphics';

<MetricsGraphics
	title="Downloads"
	description="This graphic shows a time-series of downloads."
	data={ [{'date':new Date('2014-11-01'),'value':12}, {'date':new Date('2014-11-02'),'value':18}] }
	width={600}
	height={250}
	x_accessor="date"
	y_accessor="value"
/>

Properties

axes_not_compact - determines whether to draw compact or non-compact axes
european_clock - determines whether to show labels using a 24-hour clock
inflator - a multiplier for inflating max_x and max_y
max_x - the maximum x-value
max_y - the maximum y-value
min_x - the minimum x-value
min_y - the minimum y-value
min_y_from_data - starts y-axis at data's minimum value
missing_text - The text to display for missing graphics
show_missing_background - Displays a background for missing graphics
show_year_markers - determines whether to show year markers along the x-axis
show_years (deprecated) - determines whether to show years along the x-axis
show_secondary_x_label - determines whether to show years along the x-axis
small_text (deprecated) - coerces small text regardless of graphic size
xax_count - the number of x-axis ticks
xax_format - a function that formats the x-axis' labels
x_axis - determines whether to display the x-axis
x_extended_ticks - determines whether to extend the x-axis ticks across the chart
x_label - the label to show below the x-axis
x_scale_type - the x-axis scale type
xax_start_at_min (deprecated) - starts the x-axis from the left-most edge
xax_tick_length - the x-axis' tick length in pixels
xax_units - a prefix symbol to be shown alongside the x-axis' labels
y_axis - determines whether to display the y-axis
y_extended_ticks - determines whether to extend the y-axis ticks across the chart
y_label - the label to show beside the y-axis
y_scale_type - the y-axis scale type
yax_count - the number of y-axis ticks
yax_format - a function that formats the y-axis' labels
yax_tick_length - the y-axis' tick length in pixels
yax_units - a prefix symbol to be shown alongside the y-axis' labels
yax_units_append - determines whether to append rather than prepend units
aggregate_rollover - links the lines in a multi-line graphic
animate_on_load - determines whether lines are transitioned on first-load
area - determines whether to fill the area below the line
baselines - horizontal lines that indicate, say, goals.
chart_type - {line, histogram, point, missing-data}
custom_line_color_map - maps an arbitrary set of lines to colors
decimals - the number of decimals to show in a rollover
error - does the graphic have an error that we want to communicate to users
format - the format of the data object (count or percentage)
full_height - sets height to that of the parent, adjusts dimensions on window resize
full_width - sets width to that of the parent, adjusts dimensions on window resize
interpolate - the interpolation function to use for rendering lines
interpolate_tension - increase the tension to fix artifacts when your data is irregular
legend - an array of literals used to label lines
legend_target - the DOM element to insert the legend in
linked - used to link multiple graphics together
linked_format - specifies the format of linked rollovers
list - automatically maps the data to x and y accessors
markers - vertical lines that indicate, say, milestones
max_data_size - for use with custom_line_color_map
mouseover - custom rollover function
mousemove - custom rollover function
mouseout - custom rollover function
point_size - the radius of the dot that appears over an active data point
rollover_callback (deprecated) - custom rollover function
show_confidence_band - determines whether to show a confidence band
show_rollover_text - determines whether to show text for a data point on rollover
show_tooltips - determines whether to display descriptions in tooltips
target - the DOM element to insert the graphic in
transition_on_update - gracefully transitions the lines on data change
x_rollover_format - a function or string that formats the y accessor's rollover text
x_rug - show a rug plot along the x-axis
y_rollover_format - a function or string that formats the y accessor's rollover text
y_rug - show a rug plot along the y-axis
data - the data object
missing_is_zero - assume missing observations are zero
missing_is_hidden - show missing observations as missing line segments
missing_is_hidden_accessor - the accessor for identifying observations as missing
utc_time - determines whether to use a UTC or local time scale
x_accessor - the data element that's the x-accessor
x_sort - determines whether to sort the x-axis' values
y_accessor - the data element that's the y-accessor
buffer - the padding around the graphic
bottom - the size of the bottom margin
center_title_full_width - center title over entire graph
height - the graphic's height
left - the size of the left margin
right - the size of the right margin
small_height_threshold - maximum height for a small graphic
small_width_threshold - maximum width for a small graphic
top - the size of the top margin
width - the graphic's width
color_accessor - the data element to use to map points to colors
color_range - the range used to color different groups of points
color_type - specifies whether the color scale is quantitative or qualitative
point_size - the radius of the dots in the scatterplot
size_accessor - should point sizes be mapped to data
size_range - the range of point sizes
lowess - specifies whether to show a lowess line of best-fit
ls - specifies whether to show a least-squares line of best-fit
bar_margin - the margin between bars
binned - specifies whether the histogram data is already binned
bins - the number of bins to use
bar_height - bar height in pixels
bar_orientation - determines whether to show a vertical or horizontal barplot
baseline_accessor - the data element to map the baseline component to
binned - determines whether the data is already binned
dodge_accessor - the data element to map the dodge component to
outer_padding_percentage
padding_percentage
predictor_accessor - the data element to map the predictor component to
truncate_x_labels
truncate_y_labels
rotate_x_labels - The number of degrees to rotate the x-axis' labels.
rotate_y_labels - The number of degrees to rotate the y-axis' labels.

Notes

Make sure to include the MetricsGraphics css file in your react app:

<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/metrics-graphics/2.11.0/metricsgraphics.min.css">

Demo & Examples

To build the examples locally, run:

npm install
npm start

Then open localhost:8000 in a browser.

Development (`src`, `lib` and the build process)

NOTE: The source code for the component is in src. A transpiled CommonJS version (generated with Babel) is available in lib for use with node.js, browserify and webpack. A UMD bundle is also built to dist, which can be included without the need for any build system.

To build, watch and serve the examples (which will also watch the component source), run npm start. If you just want to watch changes to src and rebuild lib, run npm run watch (this is useful if you are working with npm link).

License

Permission is hereby granted, free of charge, to any person obtaining a copy of this software and associated documentation files (the "Software"), to deal in the Software without restriction, including without limitation the rights to use, copy, modify, merge, publish, distribute, sublicense, and/or sell copies of the Software, and to permit persons to whom the Software is furnished to do so, subject to the following conditions:

The above copyright notice and this permission notice shall be included in all copies or substantial portions of the Software.

THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY, FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM, OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE SOFTWARE.

ethul/react-metrics-graphics

MetricsGraphics React Component

Demo & Examples

Installation

Usage

Properties

Notes

Demo & Examples

Development (src, lib and the build process)

License

Development (`src`, `lib` and the build process)