@meniga/graphs

@meniga/graphs

Getting started

Meniga’s React charting components depend on @meniga/d3 to generate visually rich D3 graphs

Charting components

There are six pre-defined charting components available: Area, Bar, Pie, Column, Scatter and StackedColumn. Each component can take in four props: data, settings, options, listeners.

It is also possible to use the general Graph component, which then requires one additional prop called "type". This component is useful when you want to have a single charting component that can easily change type.

Settings (optional)

Each charting component can take in an optional settings object, which controls d3 charting behaviors. If no settings props is defined, a general default configuration will be used. You can decide to omit this prop and use the default settings, use your own settings object, or you can also use one of the default configuration settings that are available for each type of charting component, which can be found under @cosmic/graphs/lib/configs.

To use those, you should import them like so:

import areaConfig from '@meniga/graphs/lib/configs/areaGraph';

<Area
    settings={ areaConfig }
}/>

Options (required)

Chart options is an object that defines the height of the chart, the x and y positions of where the chart should be drawn on the SVG canvas, and whether or not to show a legend or send back data that can be used to show a tooltip. Height, x and y are required fields, showLegend and showTooltip are optional.

Example:

{
	height: 375,
	x: 100,
	y: 30
}

Data (required)

The chart data should be a JSON object in the following format:

{
	seriesIndex: index,
	timeResolution: [Day|Week|Month|Year],
	statistics: {},
	values: [
		{
			x: [amount|date],
			y: [date|amount],
			seriesIndex: index,
			text: "some text"
		}
	]
}

If you use data from the /Transactions/Series API, you can use the "prepareData" method from the /src/utils/SeriesHelper utility to create your chart data.

Listeners

Listeners should be a JSON object that defines what functions should be called when certain events are triggered. Available events are: handleHoverOut, handleHoverOver

Example:

{
    handleHoverOut: this.hideTooltip(),
    handleHoverOver: this.showTooltip()
}

Type

The type of a chart is a predefined string, that can be found in @meniga/d3

Example:

import { GraphTypes } from '@meniga/d3';

<Graph
    type={ GraphTypes.AREA_GRAPH }
    { ...props }
}/>

Usage

Bar

// ES6
import Bar from '@meniga/graphs/Bar';

// ES5
var Bar = require('@meniga/graphs/Bar');

<Bar
    data={ Array#series }
    settings={ Object }
    options={
    	height: 375,
    	showLegend: true,
    	x: 100,
    	y: 30
}/>

Pie

// ES6
import Pie from '@meniga/graphs/Pie';

// ES5
var Pie = require('@meniga/graphs/Pie');

<Pie
    data={ Array#series }
    settings={ Object }
    options={
    	height: 500,
    	x: 100,
    	y: 100
}/>

Graph

// ES6
import Graph from '@meniga/graphs/Graph';
import { GraphTypes } from '@meniga/d3';

// ES5
var Graph = require('@meniga/graphs/Graph');
var GraphTypes = require('@meniga/d3/lib/constants/GraphTypes');

<Graph
    type={ GraphTypes.AREA_GRAPH }
    data={ Array#series }
    settings={ Object }
    options={
    	height: 500,
    	x: 100,
    	y: 100
}/>