Add search functionality for ease graph

This commit is contained in:
Henrik Giesel 2021-01-08 17:16:52 +01:00
parent 0e98bd7db2
commit f1c8879830
2 changed files with 17 additions and 2 deletions

View file

@ -26,7 +26,7 @@
<div class="subtitle">{subtitle}</div> <div class="subtitle">{subtitle}</div>
<HistogramGraph data={histogramData} {i18n} /> <HistogramGraph data={histogramData} {i18n} on:search />
<TableData {i18n} {tableData} /> <TableData {i18n} {tableData} />
</div> </div>

View file

@ -61,6 +61,21 @@ export function prepareData(
}); });
} }
function makeQuery(data: HistogramData, binIdx: number): string {
const bin = data.bins[binIdx];
const start = bin.x0!;
const end = (bin.x1! - 1);
if (start === end) {
return `"prop:ease=${start / 100}"`;
}
const fromQuery = `"prop:ease>=${start / 100}"`;
const tillQuery = `"prop:ease<${end / 100}"`;
return `${fromQuery} AND ${tillQuery}`;
}
const xTickFormat = (num: number): string => `${num.toFixed(0)}%`; const xTickFormat = (num: number): string => `${num.toFixed(0)}%`;
const tableData = [ const tableData = [
{ {
@ -70,7 +85,7 @@ export function prepareData(
]; ];
return [ return [
{ scale, bins, total, hoverText, colourScale, showArea: false, xTickFormat }, { scale, bins, total, hoverText, makeQuery, colourScale, showArea: false, xTickFormat },
tableData, tableData,
]; ];
} }