Getting Started
First, install the ui-attributes-graphs library:
npm i @leverege/ui-attributes-graphs
Next, define UI Attributes for the data that you are hoping to graph. For instance, the below example defines three attributes for a fictitious 'test.history' data type. If you are using Molten, you may already have a number of UI Attributes defined for you based on your Imagine project's blueprints:
Plugins.add( 'Attribute', {
name : 'name',
displayName : 'Name',
valueType : 'string',
objectType : 'test.history',
placement : {
group : [ ]
},
get : ( obj ) => {
return obj?.name
}
} )
Plugins.add( 'Attribute', {
name : 'test.history.time',
displayName : 'Time',
valueType : 'timestamp',
objectType : 'test.history',
placement : {
group : [ ]
},
get : ( obj ) => {
const time = obj && obj.time
return time == null ? null : new Date( time )
}
} )
Plugins.add( 'Attribute', {
name : 'test.history.temperature',
displayName : 'Temperature',
valueType : 'temperature',
objectType : 'test.history',
baseUnit : 'degC',
placement : {
group : [ ]
},
get : ( obj ) => {
const temp = obj?.data?.temperature
return temp == null ? null : {
type : 'temperature',
value : temp,
unit : 'degC'
}
}
} )
In this case, time and temperature will be the two data points that we will be graphing against one another. Name is (in this case) a unique identifier for the objects that these data represent and will be used to key the data into series to facilitate graphing.
Using the useSeriesData
hook or the withSeriesData
HOC exported by this library, prepare your data for graphing. The hook/HOC expect to be passed an array of data that you want to be graphed, an attribute name that will be used to chunk that data, and an options object with possible properties of obejctType and sortAttribute. The hook/HOC will transform and memoize this data into an object keyed on the values of the chunk attribute that you have passed. If you pass an objectType in the options, it will be used to help disambiguate the chunk and sort attributes rather than using the first attribute registered with that particular name. If you pass a sortAttribute in the options, it will be used to sort the data in your series.
Example¶
const dataArray = [
{
"type": "test.history",
"id": "1",
"data": {
"time": 1642444110759,
"name": "Device 1",
"data": {
"temperature": 45.7891
}
}
},
{
"type": "test.history",
"id": "2",
"data": {
"time": 1642461033498,
"name": "Device 1",
"data": {
"temperature": 40.7705
}
}
},
{
"type": "test.history",
"id": "3",
"data": {
"time": 1642411955689,
"name": "Device 1",
"data": {
"temperature": 48.7092
}
}
},
{
"type": "test.history",
"id": "7",
"data": {
"time": 1642474048199,
"name": "Device 2",
"data": {
"temperature": 12.299
}
}
},
{
"type": "test.history",
"id": "8",
"data": {
"time": 1642407220379,
"name": "Device 2",
"data": {
"temperature": 5.4862
}
}
},
{
"type": "test.history",
"id": "9",
"data": {
"time": 1642478679300,
"name": "Device 2",
"data": {
"temperature": 4.5652
}
}
}
]
const seriesData = useSeriesData( dataArray, 'name', { sortAttribute : 'test.time' } )
/*
seriesData => {
"Device 2": [
{
"type": "test.history",
"id": "8",
"data": {
"time": 1642407220379,
"name": "Device 2",
"data": {
"temperature": 5.4862
}
}
},
{
"type": "test.history",
"id": "7",
"data": {
"time": 1642474048199,
"name": "Device 2",
"data": {
"temperature": 12.299
}
}
},
{
"type": "test.history",
"id": "9",
"data": {
"time": 1642478679300,
"name": "Device 2",
"data": {
"temperature": 4.5652
}
}
}
],
"Device 1": [
{
"type": "test.history",
"id": "3",
"data": {
"time": 1642411955689,
"name": "Device 1",
"data": {
"temperature": 48.7092
}
}
},
{
"type": "test.history",
"id": "1",
"data": {
"time": 1642444110759,
"name": "Device 1",
"data": {
"temperature": 45.7891
}
}
},
{
"type": "test.history",
"id": "2",
"data": {
"time": 1642461033498,
"name": "Device 1",
"data": {
"temperature": 40.7705
}
}
}
]
}
*/
import { XYChartModel, XYChartRenderer, useSeriesData } from '@leverege/ui-attributes-graphs'
const [ model, setModel ] = useState( XYChartModel.create() )
const seriesData = useSeriesData( myUnformattedData, 'name', { sortAttribute : 'test.time' } )
return (
<XYChartRenderer
data={seriesData}
objectType="test.history"
model={model} />
)