nogaxeh-resources-graph
v3.0.2
Published
>
Downloads
6
Readme
nogaxeh-resources-graph
Install
npm install --save nogaxeh-resources-graph
Usage
import HexagonChart, { mockDataGenerator, DefaultDefs } from 'nogaxeh-resources-graph';
// ...
// in your component...
const mockElements = mockDataGenerator(48)
const mostCommonProps = {
activeElements: [],
lockedElements: [],
expandedKeys: [
{ label: 'HOST NAME', key: 'name' },
{ label: 'MODEL', key: 'model' },
{ label: 'IP ADDRESS', key: 'ip-address' }
],
sortBy: 'none',
highlight: [
// { key: 'model', value: 'PA-220' },
// { key: 'severity', value: 'critical' }
],
onMouseOver: (element)=>{},
onMouseOut: (element)=>{},
onClick: (element)=>{},
height: '30vh',
elements: mockElements
}
const defaultProps = {
activeElements: [],
lockedElements: [],
dragAndZoom: true,
gridHeight: null,
graphicAttribute: 'severity',
expandedKeys: [
{ label: 'HOST NAME', key: 'name' },
{ label: 'MODEL', key: 'model' },
{ label: 'IP ADDRESS', key: 'ip-address' }
],
sortBy: 'none',
highlight: [],
height: '40vh',
onMouseOver: (element)=>{},
onMouseOut: (element)=>{},
onClick: (element)=>{},
defaultZoom: 1,
elementSize: 55,
defs: (<DefaultDefs/>),
elements: [],
assets: [
{
key: 'critical',
value: {
base: { img: '#hexagon-red', offset: { x:0, y: 0 }, scale: 1 },
expanded: { img: '#expanded-hexagon-red', offset: { x:0, y: 0 }, scale: 1 }
}
},
{
key: 'warning',
value: {
base: { img: '#hexagon-yellow', offset: { x:0, y: 0 }, scale: 1 },
expanded: { img: '#expanded-hexagon-yellow', offset: { x:0, y: 0 }, scale: 1 }
}
},
{
key: 'nodata',
value: {
base: { img: '#hexagon-blue', offset: { x:0, y: 0 }, scale: 1 },
expanded: { img: '#expanded-hexagon-blue', offset: { x:0, y: 0 }, scale: 1 }
}
},
{
key: 'healthy',
value: {
base: { img: '#hexagon-green', offset: { x:0, y: 0 }, scale: 1 },
expanded: { img: '#expanded-hexagon-green', offset: { x:0, y: 0 }, scale: 1 }
}
}
]
}