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');
}

limscoder

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

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

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

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

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

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

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

// defines a path for a single hexagon.
const h = Math.sqrt(3) / 2;
const r = 30;
const x = 0;
const y = 0;
const hexPath = d3.line()
  .x(d => d.x)
  .y(d => d.y)
  .curve(d3.curveCardinalClosed.tension('0.8'))([
    { x: r + x, y },

limscoder

// html:
// <ul>
//   <li></li>
//   <li></li>
// </ul>

const users = [{
  id: 1,
  name: 'Nancy',
  role: 'person'

limscoder

// change the color of all .app-user elements 
d3.select('.app-user-list')
  .selectAll('.app-user')
  .style('color', 'green');

limscoder

const userList = d3.select('ul.app-user-list');
const userSelection = userList.selectAll('li.app-user')
  .data(users);

const updateUsers = userSelection;
const enterUsers = userSelection.enter();
const exitUsers = userSelection.exit();

// blend from old color to new color
updateUsers.transition()