Provide users with an easy way of comparing time intervals

[amandahmeng]

• Need easier and more intuitive exploration of a country/region/ASN signals over longer periods of time in order to contrast baseline behavior with values during a suspected outage.
• Allow for the ability to quickly examine IODA signals by jumping forward/backward over adjacent time intervals.

[arvinpoddar]

Overview

Per conversation with Akash, we will be transitioning away from Canvasjs to Apache Echarts. Right now, the aim is to implement a mini-view of a longer time series than the main focused range, similar to Yahoo Finance. See an example here: https://echarts.apache.org/examples/en/editor.html?c=area-simple.

Subtasks

For a smooth rollout, we'll split this task into two subtasks:

1. Port over the existing charting functionality to Apache ECharts, exactly as currently implemented. The aim is for this change to be invisible for users, matching the current user experience.
2. After a successful port, introduce the longer mini-view of the time series below the existing chart. Let x be the date range covered by the primary chart. The mini-view's range should cover min(2x, 3 months).

[arvinpoddar]

Phase 1 is currently underway, and the graph is cosmetically the same. There are some functionalities that need to be improved. For the next sprint, the immediate action items are:

• Fix the Google sub-series toggle behavior bug (advanced mode)
• Add the secondary y-axis on advanced mode
• Figure out why telescoping series does not appear in non-normalized mode
• Increase the marker size for all series
• Fix the time format on the x-axis for hour granularity. If AM/PM is not possible, use 24H.
• Engage zoom mode by default
  • See if icons can be easily changed

[arvinpoddar]

In attempt to resolve issues from last week, I ported the chart to react-apexcharts. While this permits for the multiple data shadows to appear, it suffers from some performance issues (likely due to the many DOM elements). My research has only shown me two libraries capable of showing multiple data shadows.

Apache Echarts has not responded to the feature request I've made for having multiple data shadows: https://github.com/apache/echarts/issues/18227.

[arvinpoddar]

While react-apexcharts was able to display multiple series in the data shadow, it suffered from severe performance issues during use. As such, I've begun the process of porting the chart library (again) to highcharts, which has major Fortune 500 support and demonstrates the ability to effectively handle hundreds of thousands of points from initial experiments. I've begun the initial porting with promising results, but there are a few features/bugs that are currently in progress:

• A reset zoom button
• Proper font exporting for image exports
• Resolve series disappearance in advanced mode
• Add bottom padding to navigator chart series

[arvinpoddar]

Current issues with highcharts implementation: [x] Bug: Shadow range automatically changes when new series is added (sub-google) [x] Change z-axis of navigator labels (or consider tooltip on navigator)

• https://api.highcharts.com/highstock/navigator.xAxis.labels [x] Bug: Telescope series disappears in advanced mode (non-normalized) when toggling series [ ] Potentially disable navigator in advanced mode (for faster prod rollout) [x] Pull in double the alerts data (matching the range for time-series pulling)

[arvinpoddar]

By default, Highcharts uses server side exporting. I have switched this to client-side exporting. Will aim to resolve faulty font issue.

[arvinpoddar]

When removing all series and attempting to re-add them, the primary series doesn't update.

[arvinpoddar]

We are implementing an axis partitioning method to display series on different axes based on the maximum values in that series. This will help to better see fluctuations in values.