limscoder

export default class Hexagons extends Component {
  constructor(props) {
    super(props);
    
    // initialize array of hexData in state
    this.state = { hexData: hexData() };
  }

  componentDidMount() {
    // draw grid of hexagons with D3

limscoder

// toggles the color of a hexagon and all of it's surrounding hexagons.
function toggleHex(target, hex) {
  const firstColIdx = target.row % 2 ? 0 : -1;
  const secondColIdx = target.row % 2 ? 1 : 0;
  const isNeighbor =
    (hex.col === target.col && hex.row === target.row) || // target
    (hex.row === target.row - 1 && (hex.col === target.col + firstColIdx || hex.col === target.col + secondColIdx)) || // above row
    (hex.row === target.row && (hex.col === target.col - 1 || hex.col === target.col + 1)) || // same row
    (hex.row === target.row + 1 && (hex.col === target.col + firstColIdx || hex.col === target.col + secondColIdx)); // below row
  if (isNeighbor) {

limscoder

type Hexagon = {
  active: bool,
  col: number,
  row: number
};

type Props = {
  hexData: Array<Hexagon>,
  onClick: (Array<Hexagon>) => void
};

limscoder

      initContainers:
      - name: init-config
        image: quay.io/prometheus/alertmanager:v0.12.0
        env:
        - name: SMTP_AUTH_USERNAME
          valueFrom:
            secretKeyRef:
              name: alert-email-secret
              key: username
        - name: SMTP_AUTH_PASSWORD

limscoder

link(scope, elem) {
  this.elem = elem;
  setTimeout(() => {
    this.resizePanel();
    this.renderViewBox();
  }, 50);
}

resizePanel() {
  // set height and width of panel

limscoder

updateHeight(height = 500 // dynamically calculated height) {
    const rowHeight = GRID_CELL_HEIGHT + GRID_CELL_VMARGIN;
    this.panel.updateGridPos({
      ...this.panel.gridPos,
      h: Math.ceil(height / rowHeight)
    });
    this.dashboard.events.emit('row-expanded');
}