function queryConstructor(customFilters = {}) {
  let filters = document.querySelectorAll(".filter");
  let queryObject = {};

  Object.assign(queryObject, customFilters);

  filters.forEach((filter) => {
    const filterId = filter.filterId;
    const filterValue = filter.value;
    queryObject[filterId] = filterValue;
  });

  let queryString = `query=${JSON.stringify(queryObject)}`;

  return queryString;
}

function dispatchDropdownEvent(selectElement, filterId, filterTargets) {
  const event = new CustomEvent('filterChange', {
    detail: {
      filterId: filterId,
      filterValue: selectElement.value,
      filterActions: ["refresh"],
      filterTargets: filterTargets
    }
  });
  document.dispatchEvent(event);
}

function dropDownFilter(domId, filterId, filterTargets, options, defaultKey) {
  domFilter = document.getElementById(domId);
  domFilter.filterId = filterId;
  for (const [key, value] of Object.entries(options)) {
    const option = document.createElement('option');
    option.value = value;
    option.textContent = key;
    domFilter.appendChild(option);
    if (key == defaultKey) {
      option.selected = true;
    }
  }
  dispatchDropdownEvent(domFilter, filterId, filterTargets)
  domFilter.addEventListener('change', () => dispatchDropdownEvent(domFilter, filterId, filterTargets));
}

function nFormatter(value, digits) {
  const lookup = [
    { value: 1, symbol: "" },
    { value: 1e3, symbol: "k" },
    { value: 1e6, symbol: "M" },
    { value: 1e9, symbol: "G" },
    { value: 1e12, symbol: "T" },
    { value: 1e15, symbol: "P" },
    { value: 1e18, symbol: "E" },
  ];
  const rx = /\.0+$|(\.[0-9]*[1-9])0+$/;
  const item = lookup
    .slice()
    .reverse()
    .find((item) => value >= item.value);
  return item
    ? (value / item.value).toFixed(digits).replace(rx, "$1") + item.symbol
    : "0";
}