Flesh out D3 time series charts (#657)

* Reindent TimeSeries classes

* Fix spacing in time series tests

* Remove trend tests where current is nil

I think if we've gotten this far with a nil value for current, there's a data integrity problem.

If we allow this, we'll have to be very defensive in our code. Best to raise and fix early.

* Reindent Money class

* Refactor TimeSeries artifacts

* Use as_json in TimeSeries

* Bring back tests for trends where current is nil

* Bring back trend test

* Correctly enumerate trend test

* Use favorable_direction for trend_styles helper

* Make trend public in TimeSeries::Value

* Allow nil current values in trends

I think I might've gotten it wrong before, nils might appear in trends if values are unavailable for snapshots

* Clean up TimeSeries::Trend

* Skip trend values same class validations if any values are nil

* Refactor Money

* Remove object parsing in TimeSeries::Value

We're only every passing hashes

* Refactor trendline chart controller into a time series chart controller

* Replace trendline controller

* Implement empty state

* Port line-chart controller into time-series-chart

* Split out methods

* Group similar time series chart functionality

* Fix indicator color

* Fix empty state in time series chart

* Replace line-chart controller with time-series-chart controller

* Draw empty time series chart if less than 2 data points

* Fix favorable direction serialization

* Handle integers as well as money

* Fix favorable direction serialization

* Replace chart types with optional elements

* Prevent double-renders when displaying turbo caches of time series charts

* Remove ambiguities between time series and series data

* Improve time series chart property names

* Clean up tooltip template

* Match tooltip designs

* Apply trendline gradient

* Implement trendline split behavior

* Use same stroke width on all trend lines

* Sort time series data by date

* Support percentages

* Use data color for guideline circles

* Revert "Use data color for guideline circles"

This reverts commit f239a1e00f84ae28e32f48315d67cf990e541a8a.

* Use expected defaults for time series chart

* Include day in time-series chart x-axis labels

* favorableDirection -> favorable_direction

* data -> datum where appropriate

* Hide change data in tooltip for percentages

app/views/pages/dashboard.html.erb

@@ -43,10 +43,11 @@
           } %>
         </div>
         <div
-          data-controller="trendline"
+          id="incomeChart"
           class="h-full w-2/5"
-          data-trendline-series-value="<%= @income_series.to_json %>"
-          data-trendline-classification-value="asset"></div>
+          data-controller="time-series-chart"
+          data-time-series-chart-data-value="<%= @income_series.to_json %>"
+          data-time-series-chart-use-labels-value="false"></div>
       </div>
     </div>
     <div class="bg-white p-4 border border-alpha-black-25 shadow-xs rounded-xl">
@@ -60,10 +61,11 @@
           } %>
         </div>
         <div
-          data-controller="trendline"
+          id="spendingChart"
           class="h-full w-2/5"
-          data-trendline-series-value="<%= @spending_series.to_json %>"
-          data-trendline-classification-value="asset"></div>
+          data-controller="time-series-chart"
+          data-time-series-chart-data-value="<%= @spending_series.to_json %>"
+          data-time-series-chart-use-labels-value="false"></div>
       </div>
     </div>
     <div class="bg-white p-4 border border-alpha-black-25 shadow-xs rounded-xl">
@@ -78,10 +80,11 @@
           } %>
         </div>
         <div
-          data-controller="trendline"
+          id="savingsRateChart"
           class="h-full w-2/5"
-          data-trendline-series-value="<%= @savings_rate_series.to_json %>"
-          data-trendline-classification-value="asset"></div>
+          data-controller="time-series-chart"
+          data-time-series-chart-data-value="<%= @savings_rate_series.to_json %>"
+          data-time-series-chart-use-labels-value="false"></div>
       </div>
     </div>
     <div class="bg-white p-4 border border-alpha-black-25 shadow-xs rounded-xl">
@@ -95,10 +98,11 @@
           } %>
         </div>
         <div
-          data-controller="trendline"
+          id="investingChart"
           class="h-full w-2/5"
-          data-trendline-series-value="<%= @investing_series.to_json %>"
-          data-trendline-classification-value="asset"></div>
+          data-controller="time-series-chart"
+          data-time-series-chart-data-value="<%= @investing_series.to_json %>"
+          data-time-series-chart-use-labels-value="false"></div>
       </div>
     </div>
   </section>