Advent of Code, Day 5: Form Components

December 5, 2019
Category: Development

Day 5! I didn’t think I’d make this much progress today, but I’m happy I did.

Today’s progress

  • Built reusable form components (button, input, form, label) with the help of EmberMap
  • Updated the chart
  • Integrated a color picker addon ember-pickr
  • Discovered and fixed a bug with the way I was calculating the scale.
  • I didn’t realize how much stuff I thought was just regular Ember in our app is actually addons. A bunch of things I use at Crash every day didn’t work at first in plant-gantt until I tracked it back to an addon. For example: ember-truth-helpers and ember-decorators

The scale bug: the scale bug You see here that blueberries are going off the right side. This is because I was calculating the scale based on the last plant in the list, which isn’t always the one that will be harvested last, only the one that will be planted last.

Instead, I had to use d3.max and offset to create a custom function to look at all of the plants and see which one would be harvested last:

let lastToHarvest = maxIndex(sortedData, d =>
  timeDay.offset(new Date(d.start), d.daysToMaturity)
);

Today’s commits:

  1. upgrade ember, add form components, add some helpers
  2. updates to chart with form data
  3. get the color picker working
  4. fixed end data calculation bug

Here’s how it works so far!

plant gantt with forms

Tomorrow’s goal:

  • Improve the form UI
  • Use D3’s update() to update the chart instead of destroying and redrawing it
  • Show a different screen on the first time you land instead of showing the mocked out chart
  • Break the components apart

Find this post useful?

Buy me a coffeeBuy me a coffee