hkang1 / hermes Goto Github PK

The filters getting returned are the references to the same object, instead copies of them should get returned so they don't accidentally get changed, and also the frameworks that are dependent on the object references will properly handle the changes.

allowing the chart to setup and render with dimension and options first and setting data at a later time to improve usability

1. no padding, data lines up to the extreme ends
2. some arbitrary pixel padding
3. nearest nice number beyond data min/max

when logBase != 10, the tick labels have lots of decimals. Would be nice to format them as logBase^1, logBase^2, logBase^3....

• dimension label => grab
• dimension label (while dragging) => grabbing
• existing filter => grab
• existing filter (while dragging) => grabbing
• existing filter edges (for resize) => ns-resize (isHorizontal) | ew-resize (!isHorizontal)
• axis hover (filter creation) => crosshair
• default => default

Currently, hovering over filters won't change the axis to the hover state, and vice versus. Same with click events.

Connect the two so the visual styles can be connected, which makes more sense from a UX standpoint.

In NiceScale when setting Min/Max values, in the case of creating a range from a single value, it uses Math.log2 to find the nearest based 2 value and uses that as the range values. It fails when the single value is a negative value.

• also add support for setting filters after chart has instantiated

To avoid the chart from breaking, start by filtering out NaN, Inf and -Inf series (any data series that contain any of these values).

@hkang1

you need to size the canvas width/height for physical pixels (also make sure to round those dimensions), and then set the css style to logical pixels. you'll also need to adjust the font size from logical to physical before setting it on the ctx.

so for a requested width of 1000 your canvas.style.width should be 1000 but canvas.width should be Math.round(1000 * devicePixelRatio).

you can verify if it works as expected by zooming the browser and refreshing (without adjusting dpi settings on your display)

• Add support for benchmarking
  • performance timeline
  • render time
• Add the following to README:
  • benchmark methods
  • benchmark results

turns out the layout logic was not quite correct especially with the padding

The use case of being able to change the color or line properties for each individual series, as opposed to painting them according to a single color or a color scale.

For horizontal charts, the filter values (p0 > p1 and value0 > value1) are reversed.

particularly all the config.style options

currently the vertical axis go from min to max from a top down layout, but the more common case is the reverse. Add support to default to the reverse layout and config option to be able to reverse it back when needed, on a per axis basis.

Implementation notes

• auto-segment the filters
• auto scale the filter
• to better support filter toggling
• still support drag and resize but will auto segment them upon release
• outline style for selectable filters (will have their own normal, hover and active states)

Key motivations

• optimize experiment to easily toggle on and off filters
• distinguish categorical scale from gradient scales (linear and log)

Downsides

• clearing out all the selected categorical filters will be selecting all of the previously turned on filters (intuitively this is probably an edge case)

could be good to make the edge ticks always visible (not just during hover) when there are no intermediate ticks.

if the target element is 0 for width or height, the chart gets into an infinite loop of constantly setting the size of the inner canvas and then triggering the element to grow due to the inner canvas "filling out".

primarily for the truncated labels but possibly usable for other labels if needed in the future

for on-white theme, dark semi-transparent background with white text
can consider other styles for dark mode in the future

The dragging of the axis to create a filter dynamically filters when the filter is created in a positive direction (top to bottom for horizontally configured chart, left to right for vertically configured chart), but not in the reverse direction.

The logic of when and where to shift the dragged dimension is not as responsive. The logic currently depends on an incremental change in positioning, which is really not guaranteed with throttled mousemove. Update to be able to accurately reflect the dragged dimension position regardless of where the mouse position is.

@hkang1

this upsets me 🤣

you can probably get away with something much cheaper ;)

https://github.com/leeoniya/uPlot/blob/852829eced8a2bc52c58646636f4daa9b42e68cc/src/utils.js#L345-L406

assign() here does a deep copying merge, with an Array.slice() optimization for arrays of plain values.

(no support for Date, Regex, Map, Set, or other fancy stuff though)

Approach:

• detect if data contains Inf, -Inf and NaN
• draw Inf marker on the top of the dimension axis
• draw -Inf marker on the bottom of the dimension axis
• draw NaN marker below the -Inf marker on the dimension axis
• all or nothing approach for drawing Inf, -Inf, NaN markers, where if any of the dimensions has Inf/-Inf data, draw the Inf and -Inf markers on all of the dimension axes. Same with NaN, but it is possible to just have NaN or just Inf/-Inf axes.

To minimize performance issues with having a lot of charts with multiple event listeners, the first step is to add support for temporarily removing event listeners and adding them back later when needed. In the future, based on whether the chart is in visible viewport or not, the chart can dynamically disable and enable event listeners.

case in point global_batch_size