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

<div class="benchmark-wrapper">

  <label for="datasets-selector-{{ .Params.id }}">Dataset:</label>
  <select name="datasets" id="datasets-selector-{{ .Params.id }}" onchange="renderSelected('{{ .Params.id }}')">

  </select>

  <label for="parallel-selector-{{ .Params.id }}">Search threads:</label>
  <select name="parallel" id="parallel-selector-{{ .Params.id }}" onchange="renderSelected('{{ .Params.id }}')">
  </select>

  Plot values:

  <!-- Radio button group to select values to render -->
  <label>
    <input checked type="radio" name="plot-value-{{ .Params.id }}" value="rps" onclick="renderSelected('{{ .Params.id }}', this.value)"/>
    RPS
  </label> |

  <label>
    <input type="radio" name="plot-value-{{ .Params.id }}" value="mean_time"  onclick="renderSelected('{{ .Params.id }}', this.value)"/>
    Latency
  </label> |

  <label>
    <input type="radio" name="plot-value-{{ .Params.id }}" value="p95_time"  onclick="renderSelected('{{ .Params.id }}', this.value)"/>
    p95 latency
  </label> |

  <label>
    <input type="radio" name="plot-value-{{ .Params.id }}" value="total_upload_time"  onclick="renderSelected('{{ .Params.id }}', this.value)"/>
    Index time
  </label>


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

  <div class="form-group" style="margin-left: 5%; margin-right: 1%;">
    <input type="range" class="custom-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 }}");

  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]);

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

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

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

      // Chart js set min x value

    });
</script>