Добавьте значения в зависимости от критериев выбора

Question

Я хочу добавить случайные значения в зависимости от критерия, например, если я выберу «Ссуды», а во втором критерии «Неделя» я хотел бы, чтобы общие суммированные значения отображались в таблице за неделю, то есть 7 дней, то же самое, если бы выбранный критерий был 1 месяц, общие значения были бы за 31 день. Значения случайны, потому что этого нет в базе данных.

const sampleData = {
  "0": [30, 2, 18, 6],
  "1": [435, 234, 38, 84],
  "2": [464, 34, 49, 33],
  "3": [342, 96, 60, 74],
};

const setValues = () => {
  const val = document.getElementById("selection").value;

  document.getElementById("approved").textContent = sampleData[val][0];
  document.getElementById("rejected").textContent = sampleData[val][1];
};

// setting values initially
setValues();
//const time = {
//"0": [435, 234, 38, 84],
// "1": [55, 35, 30, 15],
// "2": [22, 18, 15, 6],
// "3": [12, 10, 10, 2],
//  "4": [8, 8, 7, 1],
// "5": [4, 3, 2, 0]
//};

//const setValues = () => {
//const val = document.getElementById("selection").value;

//document.getElementById("day").textContent = time[val][0];
//document.getElementById("week").textContent = time[val][1];
//document.getElementById("month").textContent = time[val][2];
//};

// setting values initially
//setValues();

<link
  rel="stylesheet"
  href="https://stackpath.bootstrapcdn.com/bootstrap/4.5.0/css/bootstrap.min.css"
  integrity="sha384-9aIt2nRpC12Uk9gS9baDl411NQApFmC26EwAOH8WgZl5MYYxFfc+NcPb1dKGj7Sk"
  crossorigin="anonymous"
/>
<script
  src="https://code.jquery.com/jquery-3.5.1.slim.min.js"
  integrity="sha384-DfXdz2htPH0lsSSs5nCTpuj/zy4C+OGpamoFVy38MVBnE+IbbVYUew+OrCXaRkfj"
  crossorigin="anonymous"
></script>
<div class="row">
  <div class="ml-auto">
    <select class="custom-select" id="selection" onchange="setValues()">
      <option value="0" selected>Loans</option>
      <option value="1">Home appliances</option>
      <option value="2">Cable tv</option>
      <option value="3">Internet</option>
    </select>
    <select class="custom-select" id="time" onchange="setValues()">
      <option value="0" selected>day</option>
      <option value="1">week</option>
      <option value="2">Month</option>
    </select>
  </div>
</div>
<div class="row">
  <!-- column -->

  <!-- column -->
  <div class="col-xs-4">
    <div class="card bg-success text-white card-hover">
      <div class="card-body">
        <h3 class="card-title m-b-0">Approved</h3>
        <div class="align-items-center">
          <div class="p-t-20 text-center">
            <span class="display-4 d-block font-medium" id="approved">86</span>
          </div>
        </div>
      </div>
    </div>
  </div>
  <div class="col-xs-4">
    <div class="card bg-danger text-white card-hover">
      <div class="card-body">
        <h3 class="card-title m-b-0">Rejected</h3>
        <div class="align-items-center">
          <div class="p-t-20 text-center">
            <span class="display-4 d-block font-medium" id="rejected">25</span>
          </div>
        </div>
      </div>
    </div>
  </div>
</div>