stories/data-graphics/GLAM/GenericQuantileView.svelte (149 lines of code) (raw):

<script> import QuantileExplorerView from '../../../src/components/explore/QuantileExplorerView.svelte'; import SCALAR_UINT_BUILD_ID from './scalar_uint_build_id.json'; import SCALAR_UINT_VERSION from './scalar_uint_version.json'; import EXPONENTIAL_HISTOGRAM_BUILD_ID from './exponential_histogram_build_id.json'; import EXPONENTIAL_HISTOGRAM_VERSION from './exponential_histogram_version.json'; import { transformAPIResponse } from '../../../src/utils/transform-data'; import { firefoxVersionMarkers } from '../../../src/state/product-versions'; let which = 0; let aggregationLevel = 'build_id'; let buildID01 = transformAPIResponse.quantile( EXPONENTIAL_HISTOGRAM_BUILD_ID.response.map((di) => ({ ...di })).slice(-1), 'build_id' ); let version01 = transformAPIResponse.quantile( EXPONENTIAL_HISTOGRAM_VERSION.response.map((di) => ({ ...di })).slice(-1), 'version' ); let buildID02 = transformAPIResponse.quantile( EXPONENTIAL_HISTOGRAM_BUILD_ID.response.map((di) => ({ ...di })).slice(-2), 'build_id' ); let version02 = transformAPIResponse.quantile( EXPONENTIAL_HISTOGRAM_VERSION.response.map((di) => ({ ...di })).slice(-2), 'version' ); let probes = [ { name: 'Scalar (uint)', build_id: transformAPIResponse.quantile( SCALAR_UINT_BUILD_ID.response, 'build_id' ), version: transformAPIResponse.quantile( SCALAR_UINT_VERSION.response, 'version' ), probeType: 'scalar', }, { name: 'Exponential Histogram', build_id: transformAPIResponse.quantile( EXPONENTIAL_HISTOGRAM_BUILD_ID.response, 'build_id' ), version: transformAPIResponse.quantile( EXPONENTIAL_HISTOGRAM_VERSION.response, 'version' ), probeType: 'histogram-exponential', }, { name: 'Exponential Histogram (2 pts)', build_id: buildID02, version: version02, probeType: 'histogram-exponential', }, { name: 'Exponential Histogram (1 pt)', build_id: buildID01, version: version01, probeType: 'histogram-exponential', }, ]; let timeHorizon = 'MONTH'; let percentiles = [95, 75, 50, 25, 5]; let aggregationOptions = [ { name: 'By Build ID', key: 'build_id' }, { name: 'By Version', key: 'version' }, ]; function handleSelection(event) { const { selection, type } = event.detail; if (type === 'timeHorizon') timeHorizon = selection; if (type === 'percentiles') percentiles = selection; } </script> <style> .story { position: relative; } .explorer-view { margin: auto; } .view-header { display: grid; grid-template-columns: auto max-content max-content; grid-column-gap: var(--space-2x); font-family: var(--main-mono-font); border-bottom: 3px solid var(--cool-gray-200); margin-bottom: var(--space-4x); } .view-header h1 { font-weight: normal; margin: 0px; } .selectors { position: relative; width: max-content; font-size: var(--text-02); font-family: var(--main-mono-font); margin-bottom: var(--space-4x); padding: var(--space-4x); border-radius: var(--space-base); box-shadow: var(--depth-tiny); z-index: 1000; background-color: white; color: var(--blue-slate-600); } </style> <div class="story"> <div style="width: 900px;" class="explorer-view"> <div class="view-header"> <h1>Quantile Explorer</h1> <div class="selectors"> {#each aggregationOptions as { name, key }, i} <label> <input type="radio" bind:group={aggregationLevel} value={key} /> {name} </label> {/each} </div> <div class="selectors"> {#each probes as { name, data }, i} <label> <input type="radio" bind:group={which} value={i} /> {name} </label> {/each} </div> </div> <h1 class="story__title"> probe / <span class="probe-head">{probes[which].name}</span> </h1> {#each probes as probe, i (probe.name + aggregationLevel)} {#if which === i} <QuantileExplorerView probeType={probe.probeType} data={probe[aggregationLevel]} {timeHorizon} {percentiles} markers={$firefoxVersionMarkers} on:selection={handleSelection} {aggregationLevel} /> {/if} {/each} </div> </div>