function changeOrientation()

in src/index.js [175:287]

• 100 lines of code
• 18 McCabe index (conditional complexity)

function changeOrientation () {
  if (d3.select('#main_svg') != undefined){
    chart_instance.this_chart().interrupt();
  }
  if (d3.select('#selector_div') != undefined) {
    carousel_instance.this_carousel().interrupt();
  }

  globals.log_message = { 
    "TimeStamp": new Date().valueOf(),
    "user_id": globals.userID, 
    "Event": "changeOrientation",
    "Width": window.innerWidth, 
    "Height": window.innerHeight
  };
  
  console.log("changeOrientation", globals.log_message);
  appInsights.trackEvent("changeOrientation", globals.log_message);

  height = window.innerHeight;
  width = window.innerWidth;
  svg_dim = d3.min([height,width]) - 2;
  inner_padding = svg_dim * 0.1;
  chart_dim = svg_dim * 0.8;
  globals.selection_tilt_array = [];
  globals.time_tilt_array = [];

  d3.selectAll('.toolbar')
  .style('position','absolute')
  .style('top', height < width ? '0px' : (svg_dim) + 'px')
  .style('right', height < width ? '0px' : 'unset')
  .style('width', height < width ? (height / 7) + 'px'  : width + 'px')
  .style('height',  height < width ? height + 'px' : (width / 7) + 'px');

  d3.selectAll('.img_btn_enabled')
  .style('margin', height < width ? '0px' : '2px')
  .style('height', height < width ? (height / 7 - 6) + 'px' : (width / 7 - 6) + 'px')
  .style('width', width < height ? (width / 7 - 6) + 'px' : (height / 7 - 6) + 'px'); 

  d3.selectAll(".country_btn_enabled")
  .style('height', function(){
    if (height < width) {
      return ((height / 8) - 4) + 'px';
    }
    else {
      var num_rows = all_data.length / 8;
      var menubar_height = (width / 7);
      var remaining_height = height - svg_dim - menubar_height - 10; 
      return (remaining_height / num_rows - 4) + 'px';
    }
  })
  .style('width', function(){
    if (height < width) {
      var num_cols = all_data.length / 8;
      var menubar_width = (height / 7);
      var remaining_width = width - svg_dim - menubar_width; 
      return (remaining_width / num_cols - 4) + 'px';
    }
    else {        
      return ((width / 8) - 4) + 'px';
    }      
  });

  d3.select('#selector_div')
  .style('height', function(){
    if (height < width) {
      d3.select('#annotation_div').style('height',( - 20) + 'px');
      return (height) + 'px';
    }
    else {
      var menubar_height = non_interactive ? (width / 7) : 0;
      var remaining_height = height - svg_dim - menubar_height - 10; 
      d3.select('#annotation_div').style('height',(remaining_height - 20) + 'px');
      return (remaining_height) + 'px';
    }
  })
  .style('width', function(){
    if (height < width) {
      var menubar_width = non_interactive ? (height / 7) : 0;
      var remaining_width = width - svg_dim - menubar_width; 
      d3.select('#annotation_div').style('width',(remaining_width - 20) + 'px');
      return (remaining_width) + 'px';
    }
    else {        
      d3.select('#annotation_div').style('width',(width - 20) + 'px');
      return (width) + 'px';
    }      
  })
  .style('float', (height < width) ? 'right' : 'inherit')
  .style('left', (height < width) ? (svg_dim) + 'px' : '0px')  
  .style('position', 'absolute');

  d3.selectAll('.carousel_item').style('display','none');

  d3.select('#carousel_svg').style('width',d3.select('#selector_div').style('width'));
  d3.select('#carousel_svg').style('height',d3.select('#selector_div').style('height'));

  chart_g.call(chart_instance); 
  carousel_g.call(carousel_instance);            

  globals.log_message = { 
    "TimeStamp": new Date().valueOf(),
    "user_id": globals.userID, 
    "Event": "Resized",
    "Width": window.innerWidth, 
    "Height": window.innerHeight,
    "Orientation": 'portrait'
  };
  
  console.log("Resized", globals.log_message);
  appInsights.trackEvent("Resized", globals.log_message);

}