import HexagonChart, { mockDataGenerator, DefaultDefs } from 'hexagon-resources-graph';

// ...

// in your component...
const elements = mockDataGenerator(48)

this.state.hexagonChartProps = {  // default props
  UIState: {
    activeElements: [],
    lockedElements: [],  
  },
  configuration: {
    graphicAttribute: 'severity'
  },
  filterSettings: {
    sortBy: 'none',
    healthStatusHighlight: []
  },
  interactionCallbacks: {
    elementHover: (id)=>{
      this.state.hexagonChartProps.UIState.activeElements = []
      this.state.hexagonChartProps.UIState.activeElements.push(id)
      this.setState({
        hexagonChartProps: this.state.hexagonChartProps
      })          
    },
    elementClick: (id)=>{
      this.state.hexagonChartProps.UIState.lockedElements.push(id)
      this.setState({
        hexagonChartProps: this.state.hexagonChartProps
      })
    }
  },
  svgAttributes: {
    width: 1500,
    height: 1500 / 3.5,
    defaultZoom: 1,
    elementSize: 55,
    defs: (<DefaultDefs/>)
  },
  elements: 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 }
      } 
    }
  ]
}