Day 11!

After some frustrating trial and error and searching through docs with lots of words I don’t quite understand, Dave Wasmer kindly helped me figure out how to get Ember Objects (the results of Ember data queries) in a format I’m used to working with: Something that looks like a regular array of objects, or “POJO” as Dave said.

The solution ended up being calling the map method on the array-but-not-really-array and toJSON on each item in that. Then I get something back that looks like [{name: ..., startDate:...}, {...}]

model.plants.map(c => c.toJSON()); 

This allowed me to render the charts with Ember Data stored in Firebase.

Tomorrow: Digging back in to D3’s update pattern and getting the chart automatically updating when adding a new plant. Dave’s helpful suggestion was to look into the “data down, action up” pattern.

Thanks, Dave!

Day 10!

I had a conversation on Twitter with Sam Selikoff and Ilya Radchenko, then later on Slack with Ilya and Dave Wasmer about using Firebase + EmberFire + Ember Data vs GraphQL + Hasura (Sam’s suggestion) vs GraphQL + Fauna (Ilya’s suggestion) for my data needs. I appreciate their inputs and arguments, but I ultimately went with Firebase + EmberFire for two reasons:

1. I don’t want to set up and maintain an API server for this project. That knocks out Hasura.
2. Fauna looks cool, but I don’t know either Ember Data or GraphQL that well, so I’ll have to learn one. Firebase + EmberFire + Ember Data is a little more battle tested and there is more documentation and search results for it vs Fauna, so I’m going to stick with that. I don’t want to be stuck in the dark on this project or constantly bug Ilya or Dave about stuff I don’t know. I do that enough at work.

So that means I set up Firebase and EmberFire today. It was surprisingly easy! The quickstart guide was solid. I was saving Ember Data to Firebase and retrieving it in my routes in no time.

I modified my Add a Garden form to save to Firebase, then transitioned to the Edit route where I passed along the ID of the garden I just created an retrieved the garden record’s data in the route. Then I read the Ember Data relationships docs and was able to both save and retrieve a garden’s related plants.

Then I got stuck: I tried to pass the plant data to the calendar component to render the chart and I can’t get it to work. The data isn’t coming through as I expect. I assume it has something to do with relationships in Ember data as promises, but haven’t quite figured the solution out yet. So that will be tomorrow’s project.

I feel like I’m making progress, though! It was super satisfying to see my collections and documents appear in Firebase.

Day 9!

• My problems with yesterday’s ember data store not being recognized magically disappeared when deleting node_modules and running yarn to install them again. Node, man. So good, but so frustrating sometimes.
• I got plants and gardens showing up in the ember data store after form submissions, which I verified with the Ember Inspector plugin.
• I added a form for creating gardens.

I thought I’d be able to get it all working locally before setting up EmberFire and Firebase, but after seeing that IDs for Ember Data are usually assigned on the server and having a talk with with Dave Wasmer and Ilya Radchenko, it sounds like I might be better off setting up Firebase now instead of trying to get Mirage to work. That is a little more than I have time for today, so that will be tomorrow’s goal.

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: 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!

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

Day 4!

Today’s progress

• Sorted vegetables by start date
• Updated the data model to calculate the harvest date by the days to maturity
• Changed the scale to start 15 days before the first planting and end 15 days after the last harvest to save space on screen. This also allows things to start before January and end after December.
• Made the chart responsive

Making the chart responsive took me down a weird rabbit hole. I tried using a computed property and then a bunch of different addons, but none of that worked. So I went the old-school route and wrapped the chart drawing in a function and then added an event listener to remove the chart and redraw it. There is probably a more elegant way to handle it, but I don’t know what it is.

window.addEventListener('resize', function() {   selectAll('svg').remove();   drawChart(); }); 

Today’s commits:

1. change tick format to months and sort data
2. move to relative scales
3. responsive chart

Tomorrow’s goal:

• Add a form to add new elements and update the chart

Day 3!

Today’s progress

• set up pods because that is what I’m used to working with at Crash
• configured Tailwind in Ember
• successfully rendered yesterday’s D3 mock inside a component
• Talked to my first user (my wife!) and got feedback about the chart. She says vegetables should be sorted by when you plant them by default, not when you added them to the chart.

Resources that helped me:

• A guide to using Tailwind v1.0 and Purge CSS with EmberJS by chrism
• EmberMap’s Using D3 with Ember
• ember-template-component-import
• Ember Project Layouts to learn how to set up pods

Today’s commits:

1. configure tailwind, move to pods
2. add calendar component and add D3 mock to it

Tomorrow’s goal:

• change the calendar component to be responsive
• sort the vegetables
• Change the data to be closer to user-input data (plant date and duration, not just plant and harvest dates
• watch more embermap videos to learn how to update with changes to user input data

Day 2! I woke up excited to work on this and spent an hour on it before work.

Today’s progress

Figured out the basics of the D3 implementation for Plant Gantt:

• Learned how to use Observable
• The week-based X axis
• Stacking each plant similar to a horizontal bar chart and starting the bar at the correct start date
• Lining the labels up correctly

Here is the Observable notebook.

Tomorrow’s goal

Get back into Ember land and figure out how to incorporate a chart with mocked out data in an Ember component.