Small improvements

README.md

@@ -1,8 +1,10 @@
 [![Build Status](https://travis-ci.org/bluebirrrrd/deals-diagram.svg?branch=master)](https://travis-ci.org/bluebirrrrd/deals-diagram)
 
-# deals-diagram
+# Deals diagram
 
-> Deals chart
+Vue.js component for task duration visualisation.
+
+![screenshot](/screenshot.png)
 
 ## Build Setup
 

package.json

@@ -1,6 +1,6 @@
 {
   "name": "deals-diagram",
-  "version": "1.0.4",
+  "version": "1.1.4",
   "description": "Deals chart",
   "author": "Anna Kurylo <[email protected]>",
   "repository": {

src/Deal.vue

@@ -1,17 +1,17 @@
 <template>
-<li class="deal">
-  <div class="deal-data">
-    <span class="deal-name">{{ deal.name }}</span>
-    <div class="deal-status">
-      {{ deal.status }}<br>
-      {{ currentStatus }}
+  <li class="deal">
+    <div class="deal-data">
+      <span class="deal-name">{{ deal.name }}</span>
+      <div class="deal-status">
+        {{ deal.status }}<br>
+        {{ currentStatus }}
+      </div>
     </div>
-  </div>
-  <div class="progress-container" :title="dateString">
-    <div class="timeline"></div>
-    <div class="deal-progress" :style="progressStyles"></div>
-  </div>
-</li>
+    <div class="progress-container" :title="dateString">
+      <div class="timeline"></div>
+      <div class="deal-progress" :style="progressStyles"></div>
+    </div>
+  </li>
 </template>
 
 <script>
@@ -34,38 +34,33 @@ export default {
     },
   },
   computed: {
-    currentStatus: function currentStatus() {
+    currentStatus() {
       const today = DateTime.local().setZone('utc').set({ hour: 0, minute: 0, second: 0, millisecond: 0 })
-      
-      if (this.deal.closingDate) return 'Выполнено'
-      if (this.deal.startDate > today) return 'Планируется'
-      if (this.deal.endDate >= today) return 'В работе'
+
+      if (this.deal.endDateActual) return 'Finished'
+      if (this.deal.startDate > today) return 'Scheduled'
+      if (this.deal.endDate >= today) return 'In progress'
       if (this.deal.endDate < today && !this.deal.endDateActual) {
-        return `Просрочено на ${this.calculateDelay(today, this.deal.endDate)} дней`
-      }
-      if (+this.deal.endDateActual === +today && !this.deal.closingDate) {
-        return `Ожидается закрытие актов`
-      }
-      if (this.deal.endDateActual && !this.deal.closingDate) {
-        return `Акты просрочены на ${this.calculateDelay(today, this.deal.endDateActual)} дней`
+        return `${this.calculateDelay(today, this.deal.endDate)} days overdue`
       }
+
       return ''
     },
-    emptyBeforeWidth: function emptyBeforeWidth() {
+    emptyBeforeWidth() {
       return this.calculateWidthPercentageFromDates(this.minDate,
       this.deal.startDate, this.duration)
     },
-    progressWidth: function progressWidth() {
+    progressWidth() {
       return this.calculateWidthPercentageFromDates(this.deal.startDate,
         this.deal.endDate, this.duration)
     },
-    progressStyles: function progressStyles() {
+    progressStyles() {
       return {
         left: `${this.emptyBeforeWidth}%`,
         width: `${this.progressWidth}%`,
       }
     },
-    dateString: function dateString() {
+    dateString() {
       return `${this.deal.startDate.setLocale('en-gb').toLocaleString()}–${this.deal.endDate.setLocale('en-gb').toLocaleString()}`
     },
   },
@@ -143,4 +138,4 @@ export default {
   flex-grow: 1;
   text-align: right;
 }
-</style>
+</style>

src/DealsDiagram.vue

@@ -22,18 +22,18 @@ export default {
     Deal,
   },
   computed: {
-    sortedDeals: function sortedDeals() {
+    sortedDeals() {
       return this.deals
       .map(deal => this.transformDealDates(deal))
       .sort(
         (deal1, deal2) => deal2.priority - deal1.priority ||
           deal1.startDate.diff(deal2.startDate).milliseconds,
       )
     },
-    dates: function dates() {
+    dates() {
       let maxDate = 0
       let minDate = Infinity
-      
+
       for (let deal of this.sortedDeals) {
         let startDate = deal.startDate.valueOf()
         let endDate = deal.endDate.valueOf()
@@ -52,13 +52,13 @@ export default {
         maxDate: DateTime.fromMillis(maxDate, { zone: 'utc' })
       }
     },
-    minDate: function minDate() {
+    minDate() {
       return this.dates.minDate
     },
-    maxDate: function maxDate() {
+    maxDate() {
       return this.dates.maxDate
     },
-    duration: function duration() {
+    duration() {
       if (this.sortedDeals.length) {
         return this.maxDate.diff(this.minDate)
       }
@@ -76,17 +76,12 @@ export default {
         newDeal.endDateActual = DateTime.fromISO(newDeal.endDateActual, { zone: 'utc' })
       }
 
-      if (newDeal.closingDate) {
-        newDeal.closingDate = DateTime.fromISO(newDeal.closingDate, { zone: 'utc' })
-      }
-
       return newDeal
     },
   },
 }
 </script>
 
-<!-- Add "scoped" attribute to limit CSS to this component only -->
 <style scoped>
 .diagram ul {
   list-style-type: none;

test/unit/specs/Deal.spec.js

@@ -11,9 +11,7 @@ function transformDealDates(deal) {
   if (resultingDeal.endDateActual) {
     resultingDeal.endDateActual = DateTime.fromISO(resultingDeal.endDateActual, { zone: 'utc' })
   }
-  if (resultingDeal.closingDate) {
-    resultingDeal.closingDate = DateTime.fromISO(resultingDeal.closingDate, { zone: 'utc' })
-  }
+
   return resultingDeal
 }
 
@@ -41,73 +39,50 @@ describe('Deal.vue', () => {
   })
 
   describe('should set the status to ', () => {
-    it('Выполнено', (done) => {
+    it('Finished', (done) => {
       testDeal.endDate = yesterday
       testDeal.endDateActual = yesterday
       testDeal.closingDate = yesterday
       vm.deal = testDeal
       Vue.nextTick(() => {
-        expect(vm.currentStatus).to.equal('Выполнено')
+        expect(vm.currentStatus).to.equal('Finished')
         done()
       })
     })
 
-    it('Просрочено на 1 день', (done) => {
+    it('1 days overdue', (done) => {
       testDeal.endDate = yesterday
       testDeal.endDateActual = null
       testDeal.closingDate = null
       vm.deal = testDeal
       Vue.nextTick(() => {
-        expect(vm.currentStatus).to.equal('Просрочено на 1 дней')
+        expect(vm.currentStatus).to.equal('1 days overdue')
         done()
       })
     })
 
-    it('В работе', (done) => {
+    it('In progress', (done) => {
       testDeal.endDate = today
       testDeal.endDateActual = null
       testDeal.closingDate = null
       vm.deal = testDeal
       Vue.nextTick(() => {
-        expect(vm.currentStatus).to.equal('В работе')
+        expect(vm.currentStatus).to.equal('In progress')
         done()
       })
     })
 
-    it('Планируется', (done) => {
+    it('Scheduled', (done) => {
       testDeal.startDate = tomorrow
       testDeal.endDate = tomorrow.plus({ days: 1 })
       testDeal.endDateActual = null
       testDeal.closingDate = null
       vm.deal = testDeal
       Vue.nextTick(() => {
-        expect(vm.currentStatus).to.equal('Планируется')
-        done()
-      })
-    })
-
-    it('Ожидается закрытие актов', (done) => {
-      testDeal.startDate = yesterday.minus({ days: 1 })
-      testDeal.endDate = yesterday
-      testDeal.endDateActual = today
-      testDeal.closingDate = null
-      vm.deal = testDeal
-      Vue.nextTick(() => {
-        expect(vm.currentStatus).to.equal('Ожидается закрытие актов')
+        expect(vm.currentStatus).to.equal('Scheduled')
         done()
       })
     })
 
-    it('Акты просрочены на 1 день', (done) => {
-      testDeal.startDate = yesterday.minus({ days: 1 })
-      testDeal.endDate = yesterday
-      testDeal.endDateActual = yesterday
-      testDeal.closingDate = null
-      vm.deal = testDeal
-      Vue.nextTick(() => {
-        expect(vm.currentStatus).to.equal('Акты просрочены на 1 дней')
-        done()
-      })
-    })
   })
 })