# Chart Behavior

### Charts are whack.
As we refactor emphasis level, it is important to understand how charts utilize emphasis level withing the d3 code to render different styles and aspects of the chart. This will serve as a guide to chart specific behavior.

#### Chart specific features:
- emphasis level
- handling of single data points
- rendering of unobserved data (chart holes)
- benchmarks
- labels
- minor/major tick marks
- hover behavior

As we refactor charts to use the new data strcuture, it is important to understand their current behavior in order to preserve as much as possible during the refactor.

### 1) Line chart
- Emphasis Level: currently used to dictate what lines and associated labels are present when the chart first renders.
**-Parent:** lines and labels are always present when the chart renders; represented by dotted line

"path.line": {
  stroke: theme.chart.labelGray,
  strokeWidth: "2.5px",
  strokeDasharray: "5 4",
  }

**-Focal:** lines and labels are always present when the chart renders; represented by solid #005472 colored line
**-Highlighted:** lines and labels are always present when the chart renders; represented by solid #78cce1 colored line
**-Background:** lines and labels are not present when the chart renders; represented by lines with an opacity of `0.35`

"path.line": {
  strokeWidth: "1.5px",
  strokeOpacity: 0.35,
},

**- Single Data Points:** DataSeries with an array of dataItems of length 1 have specific behavior. They DataSeries renders the single point in the corresponding color of the emphasis level. When the user hovers on the data point, the point's radius grows from `.attr("r", 3)` to `.attr("r", 5)`.
**- Minor/Major Tick marks:** x-axis tick marks are categorized as major and minor to avoid axis crowding. Minor ticks are determined through the use of `getClutteredElements()` and removed from the axis. When the user hovers over the point on the line corresponding to the minor tick mark, it transitions in and is shown on the x-axis.
**- Labels:** Labels are truncated in order to ensure the chart canvas takes up the largest porportion of the screen. When labels take up > 1/6 of the available canvas width, they are trucnated with ellipsis. On hover, the extended labels are shown.
**- Hover Behavior:** When hovering over a line, the whole line will be brought to the front (ie opacity of 1) with all other lines sent to the back with lowering of their opacity. The label to the line will appear on hover. Not all values of the points will be shown unless directly hovering over a point in which the point and value will appear. The corresponding tick mark on the x-axis will become bold if it is a major tick mark or appear if it is a minor tick mark.

#### Proposed Changes
- Emphasis Level
- Single Data Point Behavior
- Remove the value pointer concept