nogaxeh-resources-graph

3.0.2 • Public • Published

nogaxeh-resources-graph

NPM JavaScript Style Guide

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 }
      }
    }
  ]
}

License

MIT ©

Readme

Keywords

none

Package Sidebar

Install

npm i nogaxeh-resources-graph

Weekly Downloads

2

Version

3.0.2

License

MIT

Unpacked Size

294 kB

Total Files

8

Last publish

Collaborators

  • panw-design