Add the ability to pick the number of buckets in the histogram.
Test: Tested locally.
Change-Id: I37d04652084656232c0f07c11a0ae57ae5812cd6
diff --git a/development/plot-benchmarks/src/lib/Chart.svelte b/development/plot-benchmarks/src/lib/Chart.svelte
index 9a224e2..de2616e 100644
--- a/development/plot-benchmarks/src/lib/Chart.svelte
+++ b/development/plot-benchmarks/src/lib/Chart.svelte
@@ -1,16 +1,18 @@
<script lang="ts">
import type { ChartType, LegendItem } from "chart.js";
import { Chart } from "chart.js/auto";
- import { onMount } from "svelte";
+ import { createEventDispatcher, onMount } from "svelte";
import { writable, type Writable } from "svelte/store";
import type { Data } from "../types/chart.js";
import { LegendPlugin } from "../plugins.js";
import Legend from "./Legend.svelte";
import { saveToClipboard as save } from "../clipboard.js";
+ import type { Controls, ControlsEvent } from "../types/events.js";
export let data: Data;
export let chartType: ChartType = "line";
export let isExperimental: boolean = false;
+ export let showHistogramControls: boolean = false;
$: {
if ($chart) {
@@ -20,7 +22,9 @@
}
// State
+ let controlsDispatcher = createEventDispatcher<ControlsEvent>();
let element: HTMLCanvasElement;
+ let buckets: Writable<number> = writable(100);
let chart: Writable<Chart | null> = writable(null);
let items: Writable<LegendItem[] | null> = writable(null);
@@ -56,6 +60,18 @@
await save($chart);
}
}
+
+ function onHistogramChanged(event: Event) {
+ const element = event.target as EventTarget & HTMLInputElement;
+ const oldValue = $buckets;
+ $buckets = parseInt(element.value, 10);
+ if (oldValue != $buckets) {
+ let controls: Controls = {
+ buckets: $buckets,
+ };
+ controlsDispatcher("controls", controls);
+ }
+ }
</script>
<article>
@@ -69,6 +85,24 @@
</button>
</div>
<canvas class="chart" bind:this={element} />
+ {#if showHistogramControls}
+ <div class="controls">
+ <label for="buckets">
+ Histogram
+ <input
+ type="range"
+ data-tooltip={$buckets}
+ data-placement="right"
+ min="10"
+ max="250"
+ value={$buckets}
+ id="buckets"
+ name="buckets"
+ on:change={onHistogramChanged}
+ />
+ </label>
+ </div>
+ {/if}
{#if isExperimental}
<footer class="slim">
<section class="experimental">
@@ -92,19 +126,20 @@
flex-direction: row;
justify-content: flex-end;
}
-
.toolbar .btn {
width: auto;
height: auto;
border: none;
padding: 5px;
}
-
+ .controls {
+ margin-top: 20px;
+ width: 100%;
+ }
.slim {
margin-bottom: 0px;
padding: 0;
}
-
.experimental {
display: flex;
flex-direction: row;
