updates to chart with form data

cagrimmett · Dec 6, 2019 · b682a4d · b682a4d
1 parent 562ad65
commit b682a4d
Show file tree

Hide file tree

Showing 3 changed files with 40 additions and 18 deletions.
diff --git a/app/pods/calendar/component.js b/app/pods/calendar/component.js
@@ -42,11 +42,10 @@ let data = [
 function sortDateAscending(a, b) {
   return new Date(a.start) - new Date(b.start);
 }
-
-data = data.sort(sortDateAscending);
-let lastItem = data.length - 1;
-
+let sortedData, lastItem;
 function drawChart() {
+  sortedData = data.sort(sortDateAscending);
+  lastItem = sortedData.length - 1;
   let margin = { top: 30, right: 0, bottom: 10, left: 30 };
   let height = data.length * 25 + margin.top + margin.bottom;
   let svg = select("#calendar-container")
@@ -59,16 +58,16 @@ function drawChart() {
 
   let x = scaleTime()
     .domain([
-      timeDay.offset(new Date(data[0].start), -15),
+      timeDay.offset(new Date(data.sort(sortDateAscending)[0].start), -15),
       timeDay.offset(
-        new Date(data[lastItem].start),
-        data[lastItem].daysToMaturity + 15
+        new Date(data.sort(sortDateAscending)[lastItem].start),
+        data.sort(sortDateAscending)[lastItem].daysToMaturity + 15
       )
     ])
     .range([10, width - 10]);
 
   let y = scaleBand()
-    .domain(data.map(d => d.name))
+    .domain(data.sort(sortDateAscending).map(d => d.name))
     .range([margin.top, height - margin.bottom])
     .padding(0.1);
 
@@ -82,7 +81,7 @@ function drawChart() {
   svg
     .append("g")
     .selectAll("rect")
-    .data(data)
+    .data(data.sort(sortDateAscending))
     .join("rect")
     .attr("x", d => x(new Date(d.start)))
     .attr("height", y.bandwidth())
@@ -102,7 +101,7 @@ function drawChart() {
     .attr("text-anchor", "middle")
     .style("font", "12px sans-serif")
     .selectAll("text")
-    .data(data)
+    .data(data.sort(sortDateAscending))
     .join("text")
     .attr(
       "x",
@@ -127,6 +126,19 @@ export default class Calendar extends Component {
     this.set("showForm", true);
   }
 
+  @action
+  addToChart() {
+    let object = {
+      start: this.startDate,
+      daysToMaturity: Number(this.daysToMaturity),
+      name: this.name,
+      color: "#A6D785"
+    };
+    data.push(object);
+    selectAll("svg").remove();
+    drawChart();
+  }
+
   didInsertElement() {
     drawChart();
 

diff --git a/app/pods/calendar/template.hbs b/app/pods/calendar/template.hbs
@@ -9,28 +9,29 @@
 {{/if}}
 
 {{#if this.showForm}}
-  <UIForm class="bg-white shadow-md rounded px-8 pt-6 pb-8 mb-4" as |Form|>
+  <UIForm class="bg-white shadow-md rounded px-8 pt-6 pb-8 mb-4" onSubmit={{this.addToChart}} as |Form|>
     <Form.label>
       Name
     </Form.label>
-    <Form.input placeholder="Name" type="text" />
+    <Form.input placeholder="Name" type="text" @value={{mut this.name}}/>
 
     <Form.label>
       Days to Maturity
     </Form.label>
-    <Form.input placeholder="56" type="number" />
+    <Form.input placeholder="56" type="number" @value={{mut this.daysToMaturity}}/>
 
     <Form.label>
       Plant date
     </Form.label>
-    <Form.input placeholder={{this.today}} type="date" />
+    <Form.input placeholder={{this.today}} type="date" @value={{mut this.startDate}}/>
 
     <Form.label>
       Color
     </Form.label>
 
-    <ColorPicker value={{this.value}} default="#A6D785" format="hexa" />
+    <ColorPicker value={{this.color}} default="#A6D785" format="hexa" @value={{mut this.color}} />
 
-    <Form.submit>Save</Form.submit>
+    <Form.submit type="submit">Save</Form.submit>
   </UIForm>
-{{/if}}
+{{/if}}
+
diff --git a/app/pods/ui-form/component.js b/app/pods/ui-form/component.js
@@ -1,3 +1,12 @@
 import Component from "@ember/component";
+import { tagName } from "@ember-decorators/component";
 
-export default class Form extends Component {}
+@tagName("form")
+export default class Form extends Component {
+  onSubmit() {}
+
+  submit(event) {
+    event.preventDefault();
+    this.get("onSubmit")();
+  }
+}