Range picker histograms
The only GUI filter component that does not have any statistics is currently the range/date picker. For these we could show a histogram above the range that would dynamically update according to the current query.
InputDateRangeinto one component:
Create custom plotting tools that are needed for the histogram. These histograms are highly dynamic and customized, which makes
plotlya bad choice for this task.
d3-jsis also a bit of a poor choice: it is hard to break into reusable and testable components, and mixing MUI componets with SVG is a bit of a mess. The plot components should instead be implemented by using meaningful react components:
PlotAxis.js: Used to create plot axes.
PlotLabel.js: Represents the labels shown within axes.
PlotTick.js: Represents the ticks shown for axis labels.
PlotBar.js: Represents a single bar within a bar plot.
PloHistogram.js: Histogram plot.
Add support for discretized histograms: values that are discretized (e.g. integer numbers,
n_elements) require a completely different histogram mode where each bar represents a single discrete value, and the label for that value is shown at the center of the bin. The histograms are built using the discrete step as a binning interval.
Add support for continuous histograms: values that are continuous (e.g. floating-point numbers,
band_gap.value) require a 'regular' histogram mode where the continuous range is split into a fixed number of buckets and labels do not have to be connected to bins.
Add support for timestamp histograms: the min/max fields use KeyboardDateTimePicker instead of a simple text field.
plotting/common.jsfor automatically determining meaningful, human-readable ticks for a given interval, with a specific
dtypeand using the given spacing as a hard max limit.
d3-scalehas utilities for this, but unfortunately, they can produce overlapping ticks, as the returned number of ticks can be larger than the requested number of ticks. Creating meaningful ticks for timestamps is especially tricky, but
date-fnshas some great utilities for this.
Add API support for building histograms with a fixed number of buckets.
API first determines the range with
The interval is calculated by dividing the range into the requested number of buckets. For floating point numbers the interval needs to be increased slightly in order to avoid 'extra' buckets due to floating point inaccuracies. The interval for integer fields needs to be rounded to the next largest integer in order to procuce an interval that captures all values and provides meaningful buckets. If the range is zero (min = max), we simply return one bucket with the only value, and the interval is not reported in the API response.
Add API support for
ES feature for histograms): This allows the GUI to request a custom histogram interval (e.g. whenever users specify a range that is outside the min/max range of that field for the specified query). These extended bounds also need to be take into account when calculating the interval.
Add support for switching between simple and advanced mode: simple mode uses min/max
InputTextfields and a single
Slider: bounds are determined with a
min_maxaggregation. The advanced mode additionally displays the interactive histogram which is built using a
FilterRegistrysupport for specifying several different types of aggregations per filter:
InputRangeneeds to use both
histogramaggregations for a single filter.