Oluwarufus/header.php

## header.php
<?php
/**
 * The header for our theme
 *
 * This is the template that displays all of the <head> section and everything up until <div id="content">
 *
 * @link https://developer.wordpress.org/themes/basics/template-files/#template-partials
 *
 * @package WIN_SH_Research_2021
 */

?>
<!doctype html>
<html <?php language_attributes(); ?>>
<head>
	<meta charset="<?php bloginfo( 'charset' ); ?>">
	<meta name="viewport" content="width=device-width, initial-scale=1">
	<link rel="profile" href="https://gmpg.org/xfn/11">

  <script src="https://kit.fontawesome.com/3e5a6f4e7c.js" crossorigin="anonymous"></script>
  <link rel="stylesheet" href="https://fonts.googleapis.com/css2?family=Material+Symbols+Outlined:opsz,wght,FILL,GRAD@20..48,100..700,0..1,-50..200" />


	<link rel="stylesheet" media="all" href="<?php echo get_template_directory_uri(); ?>/style-ltr.css">

	<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.1.0/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-KyZXEAg3QhqLMpG8r+8fhAXLRk2vvoC2f3B09zVXn8CA5QIVfZOJ3BCsw2P0p/We" crossorigin="anonymous">

  <link rel="stylesheet" href="https://fonts.googleapis.com/icon?family=Material+Icons">


  <!-- Global site tag (gtag.js) - Google Analytics -->
	<script async src="https://www.googletagmanager.com/gtag/js?id=G-4GCG61JCWG"></script>
	<script>
	  window.dataLayer = window.dataLayer || [];
	  function gtag(){dataLayer.push(arguments);}
	  gtag('js', new Date());
	  gtag('config', 'G-4GCG61JCWG');
	</script>

  <script type="text/javascript">
    window.scriptPath = '<?php echo get_template_directory_uri(); ?>';
  </script>

	<?php wp_head(); ?>
</head>

<body <?php body_class(); ?>>
<?php wp_body_open(); ?>
<div id="page" class="site">
	<a class="skip-link screen-reader-text" href="#primary"><?php esc_html_e( 'Skip to content', 'win-sh-research-2021' ); ?></a>


  <div class="back-button">
        <button class="btn btn-blue d-flex align-items-center btn-sm d-md-none" onclick="history.back()">
          <i style="margin-right:" class="fa-regular fa-arrow-left"></i> BACK
        </button>
        <button class="btn btn-darkBlue align-items-center btn-sm d-none d-md-flex"  onclick="history.back()">
          <i style="margin-right:" class="fa-regular fa-arrow-left"></i> BACK
        </button>
      </div>

      <div class="to-top-button">
        <button class="btn btn-light d-flex align-items-center">
        <i class="fa-regular fa-arrow-up"></i>
        </button>
      </div>

      <div id="top-of-site-pixel-anchor"></div>


	<nav class="navbar fixed-top navbar-dark shadow" id="my-nav">
          <div class="container-fluid w-100">
              <a class="navbar-brand" href="https://sexualharassment.womeninnews.org/en/">
                <img src="<?php echo get_template_directory_uri(); ?>/assets/logo-white.svg" alt="Women In News"/>
              </a>
              <div>
                  <?php echo do_shortcode('[language-switcher]') ?>

                  <button class="btn text-white" id="navbar-toggler">
                    <i class="fa-sharp fa-regular fa-bars"></i>
                  </button>
              </div>
          </div>


          <!-- !nav bar open -->
          <div class="text-end" id="nav-open">
            <div class="container-fluid d-flex justify-content-between">

              <a id="menu-open-brand" class="navbar-brand" href="https://sexualharassment.womeninnews.org/en/">
                <img src="<?php echo get_template_directory_uri(); ?>/assets/logo-white.svg" alt="Women In News"/>
              </a>

              <button class="btn text-white" id="close-btn">
                <i class="fa-sharp fa-regular fa-xmark"></i>
              </button>
            </div>

            <div class="navbar-nav text-white text-start d-flex justify-content-center align-items-center mx-2">
                  <div class="content row px-1 px-xxl-5 m-xxl-5">
                    <div class="col-sm-12 col-md-6 col-xxl-4 offset-xxl-2">
                      <div class="red-block"></div>
                      <a href="https://sexualharassment.womeninnews.org/en/facts/what-is-sexual-harassment"><h1>What Is Sexual Harassment</h1></a>
                      <a href="https://sexualharassment.womeninnews.org/en/facts/chapter/chapter_1/0">Data</a>
                      <a href="https://sexualharassment.womeninnews.org/en/facts/chapter/chapter_2/0">What Counts As Sexual Harassment</a>
                      <a href="https://sexualharassment.womeninnews.org/en/facts/chapter/chapter_3/0">Costs</a>
                      <div class="red-block"></div>
                      <a href="https://sexualharassment.womeninnews.org/en/scenes"><h1>How To Deal With Sexual Harassment</h1></a>
                    </div>
                    <div class="col-sm-12 col-md-6 col-xxl-4">
                      <div class="red-block"></div>
                      <a href="<?php echo get_permalink( get_page_by_path('sexual-harassment-research-2021')) ?>"><h1>Sexual Harassment Research 2021</h1></a>
                      <a href="<?php echo get_permalink( get_page_by_path('data-breakdown')) ?>">Data Breakdown</a>
                      <a href="<?php echo get_permalink( get_page_by_path('articles')) ?>">What to take away from the data</a>
                      <a href="<?php echo get_permalink( get_page_by_path('pdf-reports')) ?>">Get the PDF</a>
                    </div>
                    <div class="col-sm-10 col-md-12 col-lg-10 offset-xxl-2 lasties">
                        <a href="https://sexualharassment.womeninnews.org/en/resources">Resources</a>
                        <a href="https://sexualharassment.womeninnews.org/en/testimonies">Testimonials</a>
                        <a href="https://sexualharassment.womeninnews.org/en/support-directory">Support Directory</a>
                        <a href="https://sexualharassment.womeninnews.org/en/glossary">Glossary</a>
                        <a href="https://sexualharassment.womeninnews.org/en/about-us">About Us</a>
                    </div>
                  </div>
            </div>

                <div class="fixtures row nav-end d-flex justify-content-between m-0 m-xxl-2">
                  <!-- *social media icons -->
                  <div class="social-feed text-start col-1 d-flex align-items-end
                  ">
                    <div>
                    <a href="https://www.facebook.com/WINatWAN" target="_blank"
                    ><img src="<?php echo get_template_directory_uri(); ?>/assets/facebook.svg" alt="facebook-share"
                  /></a>
                  <a href="https://twitter.com/WomenInNews" target="_blank"
                    ><img src="<?php echo get_template_directory_uri(); ?>/assets/twitter.svg" alt="twitter-share"
                  /></a>
                    </div>
                  </div>
                  <!-- *get in touch -->
                  <div class="col-8 nav-contact-top text-end d-flex align-items-end justify-content-end">
                    <a href="https://sexualharassment.womeninnews.org/en/contact" class="nav-item">Get In Touch</a>
                  </div>
                </div>

            </div>


          </div>
        </div>
    </nav>

## perp.js
// unversal switches
let invisibleGender = []; //"m"
let invisibleType = []; //"physical"

// data
let full, filtered, inputs
let allTable = []

// ! graph specific variables
let key = [
  'Fellow employee',
  'Direct supervisor',
  'Higher management',
  'News source',
  'Other',
];
const table = document.querySelector('#canvas_vi_table')
const canvas = document.querySelector('.canvas_vi')
const switches = allSwitches[3].querySelectorAll('.form-check-input')
const uniqueID = '#who-perp-div'

// const dataPath = '../wp-content/themes/win-sh-research-2021/data/perpetrator.csv'
// console.log(window.scriptPath, window.scriptPath + '/data/perpetrator.csv', '>>>>>>>>>>>> here');
const dataPath = window.scriptPath + '/data/perpetrator.csv';

canvasSize(canvas, key)

// * horizontal bar chart requirement: get the length of the longest string to serve as the margin of the graph
let keyTranslated = key.map(item => switchName(item))
var longest = Longest(keyTranslated)


// !-------------------------------graph

const dims = createDimsHorizontal(canvas, longest)
const color = blendedColorScale(key)
const graphWidth = getGraphWidthHorizontal(dims)
const graphHeight = dims.height - dims.marginTop * 2
const svg = createSvg(canvas, dims)
const graph = createGraph(svg, dims)
const xAxisGroup = graph.append('g').attr('transform', `translate(0, ${graphHeight})`);
const yAxisGroup = graph.append('g').attr("class", "y axis");

table.style.margin  = `0px ${dims.marginRight/2}px 0px ${dims.marginRight/2}px`
table.style.width = `${graphWidth + dims.marginRight}px`

// scales
const scales = createScalesHorizontal(graphHeight, graphWidth)
const y = scales.y
const x = scales.x

const axes = createAxes(x, y, 5, 4)
const yAxis = axes.yAxis
const xAxis = axes.xAxis

// * setting up tooltips for graph


// *calling data
d3.csv(dataPath)
  .then((data) => {
    full = data;
  })
  .then(() => {
    filtered = filterData(full, invisibleGender, invisibleType, switches);
    let inputs = finalFilter(filtered, key, uniqueID, invisibleType, keyTranslated);
    updateHorizontal(inputs.newData, graph, x, y, xAxis, yAxis, xAxisGroup, yAxisGroup, graphWidth, graphHeight, dims, color, table );
  });

// * updating data on location change
window.addEventListener('storage', () => {
  filtered = filterData(full, invisibleGender, invisibleType, switches);
  let inputs = finalFilter(filtered, key, uniqueID, invisibleType, keyTranslated);
  updateHorizontal(inputs.newData, graph, x, y, xAxis, yAxis, xAxisGroup, yAxisGroup, graphWidth, graphHeight, dims, color, table );
})

// document.querySelector("#reasons-not > dv:nth-child(2) > label > input[type=checkbox]")

// * dealing with the switches to update the types/genders to be exclued
switches.forEach((input) => {
  input.addEventListener('click', () => {
    if (input.name === 'type') {
      invisibleType = filterArray(input, invisibleType);
    }
    if (input.name === 'gender') {
      invisibleGender = filterArray(input, invisibleGender);
    }
    switchesCheck(input, switches, invisibleGender, invisibleType)
    filtered = filterData(full, invisibleGender, invisibleType, switches);
    let inputs = finalFilter(filtered, key, uniqueID, invisibleType, keyTranslated);
    updateHorizontal(inputs.newData, graph, x, y, xAxis, yAxis, xAxisGroup, yAxisGroup, graphWidth, graphHeight, dims, color, table );
  });
});
	// unversal switches
	let invisibleGender = []; //"m"
	let invisibleType = []; //"physical"

	// data
	let full, filtered, inputs
	let allTable = []

	// ! graph specific variables
	let key = [
	'Fellow employee',
	'Direct supervisor',
	'Higher management',
	'News source',
	'Other',
	];
	const table = document.querySelector('#canvas_vi_table')
	const canvas = document.querySelector('.canvas_vi')
	const switches = allSwitches[3].querySelectorAll('.form-check-input')
	const uniqueID = '#who-perp-div'

	// const dataPath = '../wp-content/themes/win-sh-research-2021/data/perpetrator.csv'
	// console.log(window.scriptPath, window.scriptPath + '/data/perpetrator.csv', '>>>>>>>>>>>> here');
	const dataPath = window.scriptPath + '/data/perpetrator.csv';

	canvasSize(canvas, key)

	// * horizontal bar chart requirement: get the length of the longest string to serve as the margin of the graph
	let keyTranslated = key.map(item => switchName(item))
	var longest = Longest(keyTranslated)


	// !-------------------------------graph

	const dims = createDimsHorizontal(canvas, longest)
	const color = blendedColorScale(key)
	const graphWidth = getGraphWidthHorizontal(dims)
	const graphHeight = dims.height - dims.marginTop * 2
	const svg = createSvg(canvas, dims)
	const graph = createGraph(svg, dims)
	const xAxisGroup = graph.append('g').attr('transform', `translate(0, ${graphHeight})`);
	const yAxisGroup = graph.append('g').attr("class", "y axis");

	table.style.margin = `0px ${dims.marginRight/2}px 0px ${dims.marginRight/2}px`
	table.style.width = `${graphWidth + dims.marginRight}px`

	// scales
	const scales = createScalesHorizontal(graphHeight, graphWidth)
	const y = scales.y
	const x = scales.x

	const axes = createAxes(x, y, 5, 4)
	const yAxis = axes.yAxis
	const xAxis = axes.xAxis

	// * setting up tooltips for graph



	// *calling data
	d3.csv(dataPath)
	.then((data) => {
	full = data;
	})
	.then(() => {
	filtered = filterData(full, invisibleGender, invisibleType, switches);
	let inputs = finalFilter(filtered, key, uniqueID, invisibleType, keyTranslated);
	updateHorizontal(inputs.newData, graph, x, y, xAxis, yAxis, xAxisGroup, yAxisGroup, graphWidth, graphHeight, dims, color, table );
	});

	// * updating data on location change
	window.addEventListener('storage', () => {
	filtered = filterData(full, invisibleGender, invisibleType, switches);
	let inputs = finalFilter(filtered, key, uniqueID, invisibleType, keyTranslated);
	updateHorizontal(inputs.newData, graph, x, y, xAxis, yAxis, xAxisGroup, yAxisGroup, graphWidth, graphHeight, dims, color, table );
	})

	// document.querySelector("#reasons-not > dv:nth-child(2) > label > input[type=checkbox]")

	// * dealing with the switches to update the types/genders to be exclued
	switches.forEach((input) => {
	input.addEventListener('click', () => {
	if (input.name === 'type') {
	invisibleType = filterArray(input, invisibleType);
	}
	if (input.name === 'gender') {
	invisibleGender = filterArray(input, invisibleGender);
	}
	switchesCheck(input, switches, invisibleGender, invisibleType)
	filtered = filterData(full, invisibleGender, invisibleType, switches);
	let inputs = finalFilter(filtered, key, uniqueID, invisibleType, keyTranslated);
	updateHorizontal(inputs.newData, graph, x, y, xAxis, yAxis, xAxisGroup, yAxisGroup, graphWidth, graphHeight, dims, color, table );
	});
	});