landing_page/qdrant-landing/themes/qdrant-2024/layouts/partials/benchmark_chart.html

<div class="benchmark__plot-wrapper" id="benchmark-plot-wrapper-{{ .Params.id }}">
  <div class="row mb-2 small">
    <div class="col-3">
      <label for="datasets-selector-{{ .Params.id }}" class="mb-1">Dataset:</label>
      <select
        class="form-select form-select-sm"
        name="datasets"
        id="datasets-selector-{{ .Params.id }}"
        onchange="renderSelected('{{ .Params.id }}')"
      ></select>
    </div>
    <div class="col-3">
      <label for="parallel-selector-{{ .Params.id }}" class="mb-1">Search threads:</label>
      <select
        class="form-select form-select-sm"
        disabled
        name="parallel"
        id="parallel-selector-{{ .Params.id }}"
        onchange="renderSelected('{{ .Params.id }}')"
      ></select>
    </div>
    <div class="col-12 col-lg-6">
      <label class="mb-2">Plot values:</label>

      <!-- Radio button group to select values to render -->
      <div class="benchmark__plot-labels benchmark__plot-labels_stretch">
        <label class="benchmark__plot-label">
          <input
            type="radio"
            name="plot-value-{{ .Params.id }}"
            value="rps"
            onclick="document.getElementById('parallel-selector-{{ .Params.id }}').value = 100; renderSelected('{{ .Params.id }}', this.value)"
          />
          RPS
        </label>

        <label class="benchmark__plot-label">
          <input
            type="radio"
            name="plot-value-{{ .Params.id }}"
            value="mean_time"
            onclick="document.getElementById('parallel-selector-{{ .Params.id }}').value = 1; renderSelected('{{ .Params.id }}', this.value)"
          />
          Latency
        </label>

        <label class="benchmark__plot-label">
          <input
            type="radio"
            name="plot-value-{{ .Params.id }}"
            value="p95_time"
            onclick="document.getElementById('parallel-selector-{{ .Params.id }}').value = 1; renderSelected('{{ .Params.id }}', this.value)"
          />
          p95 latency
        </label>

        <label class="benchmark__plot-label">
          <input
            type="radio"
            name="plot-value-{{ .Params.id }}"
            value="total_upload_time"
            onclick="document.getElementById('parallel-selector-{{ .Params.id }}').value = 100; renderSelected('{{ .Params.id }}', this.value)"
          />
          Index time
        </label>
      </div>
    </div>
  </div>

  <canvas id="chart-{{ .Params.id }}"></canvas>

  <div class="form-group" style="margin-left: 5%; margin-right: 1%;">
    <input
      type="range"
      class="custom-range form-range"
      id="precision-selector-{{ .Params.id }}"
      onchange="updateLine('{{ .Params.id }}', this.value)"
    />
  </div>

  <div id="table-{{ .Params.id }}"></div>

  <i> Download raw data: <a href="{{ .Params.data }}">here</a> </i>
</div>

<!--<script type="module" src="/benchmark.js"></script>-->
<script type="module">
  let url = "{{ .Params.data }}";

  let datasetSelector = document.getElementById("datasets-selector-{{ .Params.id }}");

  let parallelSelector = document.getElementById("parallel-selector-{{ .Params.id }}");

  let precisionSelector = document.getElementById("precision-selector-{{ .Params.id }}");

  let metricRadioSelector = document.getElementsByName("plot-value-{{ .Params.id }}");

  const config = {
    type: 'line',
    data: {
      datasets: []
    },
    options: {
      responsive: true,
      interaction: {
        intersect: false,
      },
      scales: {
        x: {
          type: 'linear',
          title: {
            display: true,
            text: 'Precision'
          },
        },
        y: {
          type: 'linear',
          title: {
            display: true,
            text: ''
          },
        }
      },
      plugins: {
        tooltip: {
          callbacks: {
            label: function (tooltipItem) {
              return [
                " - " + tooltipItem.parsed.setup_name,
                JSON.stringify(tooltipItem.parsed.engine_params)
              ];
            },
            title: function (tooltipItem) {
              return "Precision: " + tooltipItem[0].parsed.x + ", y: " + tooltipItem[0].parsed.y;
            }
          }
        },
      }
    }
  };

  const chart = new Chart(
    document.getElementById('chart-{{ .Params.id }}'),
    config
  );

  fetch(url)
    .then(res => res.json())
    .then(data => {
      const datasets = getDatasetsList(data);
      updataDropdown(datasetSelector, datasets);

      // reverse parallels list to have the highest number of parallel threads first
      const parallels = getParallelOptions(data).reverse();

      updataDropdown(parallelSelector, parallels);

      let parallelsInt = parseInt(parallels[0]);

      for (const row in data) {
        for (const column in columnMultiplyFactor) {
          if (column in data[row]) {
            data[row][column] *= columnMultiplyFactor[column];
          }
        }
      }

      let selectedData = filterData(data, {
        "dataset_name": datasets[0],
        "parallel": parallelsInt
      });

      window.datasets = { "{{ .Params.id }}": data, ...window.datasets }
      window.charts = { "{{ .Params.id }}": chart, ...window.charts }

      let plotValueRadioBtns = document.getElementsByName("plot-value-{{ .Params.id }}");
      plotValueRadioBtns.forEach(btn => {
        if (btn.value === '{{ .Params.metric }}') {
          btn.checked = true;
        }
      });

      renderSelected("{{ .Params.id }}");

      // Chart js set min x value

    });
</script>