const fontScale = 0.8;

const backgroundColor = "#f9f9f9";
const tooltipBgColor = "#e7e7f5";
const textColor = "#373841";

const textStyleMain = {
  fontFamily: "sans-serif",
  fontSize: 12 * fontScale,
  color: textColor,
};

const tooltip = {
  borderColor: textColor,
  backgroundColor: tooltipBgColor,
  order: "seriesDesc",
  textStyle: textStyleMain,
  trigger: "axis",
};

const toolboxParams = {
  itemSize: 16 * fontScale,
  showTitle: true,
  top: "-1%",
  right: "20%",
  iconStyle: {
    borderColor: textColor,
    borderWidth: 2,
  },
  feature: {
    dataZoom: {
      yAxisIndex: "none",
    },
    dataView: {},
    saveAsImage: {
      pixelRatio: 2,
    },
  },
};

const axisLabel = {
  fontSize: 12 * fontScale,
  color: textColor,
  margin: 10,
};

const axisLine = {
  show: true,
  lineStyle: {
    color: textColor,
    width: 2,
  },
};

const axisTick = { show: true };

const grid = {
  bottom: 30,
  top: 10,
  left: 15,
  containLabel: true,
};

const yaxisTextStyle = {
  fontSize: 12 * fontScale,
  padding: [0, 0, 10, 0],
  color: textColor,
};

const yaxisTextStyle2 = {
  fontSize: 12 * fontScale,
  padding: [50, 0, 0, 0],
  color: textColor,
};

function dataZoom() {
  const dataZoom = [
    {
      type: "inside",
    },
  ];

  return dataZoom;
}

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";
}

function periodDropdown(periods, defaultIndex = 0) {
  const modifiers = document.getElementById("chart-modifiers");
  const dropdownContainer = document.createElement("div");
  const dropdown = document.createElement("select");
  const textNode = document.createTextNode("Select period: ");

  dropdownContainer.id = "dropdown-container";
  dropdown.id = "select-period-dropdown";
  dropdownContainer.appendChild(textNode);
  dropdownContainer.appendChild(dropdown);
  modifiers.appendChild(dropdownContainer);

  periods.forEach((period, index) => {
    const option = document.createElement("option");
    if (index === defaultIndex) {
      option.selected = true;
    }
    option.value = period;
    option.textContent = period;
    dropdown.appendChild(option);
  });
}

function getPeriodFromDropdown() {
  let dropdown = document.getElementById("select-period-dropdown");
  let selectedIndex = dropdown.selectedIndex;
  return dropdown.options[selectedIndex].value;
}

window.addEventListener("resize", function () {
  if (myChart != null && myChart != undefined) {
    myChart.resize();
  }
});