feat(Chart): showing cart

.eslintrc

@@ -162,7 +162,7 @@
     "one-var": [1, "never"], // allow just one var statement per function (off by default)
     "operator-assignment": [1, "never"], // require assignment operator shorthand where possible or prohibit it entirely (off by default)
     "padded-blocks": [1, "never"], // enforce padding within blocks (off by default)
-    "quote-props": [1, "as-needed"], // require quotes around object literal property names (off by default)
+    "quote-props": [1, "as-needed",  { "numbers": true }], // require quotes around object literal property names (off by default)
     "quotes": [1, "single"], // specify whether double or single quotes should be used
     # "semi": [1, "always"], // require or disallow use of semicolons instead of ASI
     "semi-spacing": [1, {"before": false, "after": true}], // enforce spacing before and after semicolons

.flowconfig

@@ -1,5 +1,12 @@
+[ignore]
+node_modules/immutable/.*
+
+[include]
+app
+
 [libs]
-./interfaces/global.js
+interfaces/global.js
+interfaces/immutable.js
 
 [options]
 module.name_mapper='.*\(.css\|.ttf\)' -> 'CSSModule'

app/js/actions/constants.js

@@ -32,3 +32,5 @@ export const FILTER_SEARCH_RESULT: string = 'FILTER_SEARCH_RESULT'
 export const CLEAR_TIMESTAMP: string = 'CLEAR_TIMESTAMP'
 
 export const SET_RANGE: string = 'SET_RANGE'
+
+export const CHANGE_VISIBLE_CHART: string = 'CHANGE_VISIBLE_CHART'

app/js/actions/filter-component.js

@@ -1,9 +1,6 @@
 /* @flow */
 'use strict'
 
-import filter from 'lodash/filter'
-import uniq from 'lodash/uniq'
-
 import { getDataByType } from '../selectors'
 
 import {
@@ -15,25 +12,11 @@ import {
 } from './constants'
 
 export function setSearchFilterValues(type: string, value: string, state) {
-  // we need to store here the previous value we enetered
-  // and compare the new and old one
-  // so we can figure out if we need to remove the old one
-  // or add the old one from the filter
-
-  const results = getDataByType(type, state).filter((item) => {
-    // console.log(item)
-    // console.log(item.get(1))
-    return item.get(1).toLowerCase().indexOf(value.toLowerCase()) !== -1
-  })
-
-  // const result = uniq(filter(getDataByType(type, state), (item) =>{
-  //   console.log(item)
-  //   item[1].toLowerCase().startsWith(value.toLowerCase())
-  //   })
-  // )
-
-  // perform fuse search here
-
+  const results = getDataByType(type, state).filter((item) =>
+                    item.get(1)
+                        .toLowerCase()
+                        .indexOf(value.toLowerCase()) !== -1
+                    )
   return {
     type: FILTER_SEARCH_RESULT,
     payload: {
@@ -44,27 +27,27 @@ export function setSearchFilterValues(type: string, value: string, state) {
   }
 }
 
-export function closeFilterMenu() {
+export function closeFilterMenu(): Object {
   return {
     type: CLOSE_FILTER_COMPONENT,
   }
 }
 
-export function selectFilterMenu(type: string) {
+export function selectFilterMenu(type: string): Object {
   return {
     type: SET_FILTER_COMPONENT_MENU_STATE,
     payload: type,
   }
 }
 
-export function openFilterMenu() {
+export function openFilterMenu(): Object {
   return {
     type: SET_FILTER_COMPONENT_OPEN_STATUS,
     payload: true,
   }
 }
 
-export function filterComponentBack() {
+export function filterComponentBack(): Object {
   return {
     type: RESET_FILTER_COMPONENT_STATE,
   }

app/js/actions/index.js

@@ -1,6 +1,4 @@
 export * from './constants'
-// export * from './form.js'
-export * from './app.js'
 export * from './types'
 export * from './sort'
 export * from './filter-component'

app/js/actions/range.js

@@ -6,40 +6,81 @@ import moment from 'moment'
 import cloneDeep from 'lodash/cloneDeep'
 import { SET_RANGE } from '../actions/constants'
 
-function getActionAccordingToButtonPressed(buttonType, payload) {
+function getActionAccordingToButtonPressed(buttonType: string, payload) {
   const action = {
     type: SET_RANGE,
     payload: {
       range: 'set',
+      from: 0,
+      to: 0,
     },
   }
   if (typeof payload.from === 'number') {
     if (buttonType === 'previous') {
-      action.payload.from = +moment(payload.from).startOf('day').subtract(7, 'days').format('x')
+      action.payload.from = +moment(payload.from)
+                              .startOf('day')
+                              .subtract(7, 'days')
+                              .format('x')
       action.payload.to = payload.from
     } else {
-      action.payload.from = +moment(payload.from).startOf('day').add(7, 'days').format('x')
-      action.payload.to = +moment(payload.from).startOf('day').add(14, 'days').format('x')
+      action.payload.from = +moment(payload.from)
+                              .startOf('day')
+                              .add(7, 'days')
+                              .format('x')
+      action.payload.to = +moment(payload.from)
+                            .startOf('day')
+                            .add(14, 'days')
+                            .format('x')
     }
   } else {
     if (buttonType === 'previous') {
-      action.payload.from = +moment(payload.to).startOf('day').subtract(14, 'days').format('x')
-      action.payload.to = +moment(payload.to).startOf('day').subtract(7, 'days').format('x')
+      action.payload.from = +moment(payload.to)
+                              .startOf('day')
+                              .subtract(14, 'days')
+                              .format('x')
+      action.payload.to = +moment(payload.to)
+                            .startOf('day')
+                            .subtract(7, 'days')
+                            .format('x')
     } else {
       action.payload.from = payload.to
-      action.payload.to = +moment(payload.to).startOf('day').add(7, 'days').format('x')
+      action.payload.to = +moment(payload.to)
+                            .startOf('day')
+                            .add(7, 'days')
+                            .format('x')
     }
   }
   // const now = moment()
   const to = action.payload.to
   if (to > +moment().startOf('day').format('x')) {
-    action.payload.from = +moment().startOf('day').subtract(7, 'days').format('x')
-    action.payload.to = +moment().startOf('day').format('x')
+    action.payload.from = +moment()
+                            .startOf('day')
+                            .subtract(7, 'days')
+                            .format('x')
+    action.payload.to = +moment()
+                          .startOf('day')
+                          .format('x')
   }
   return action
 }
 
-export function setRange(pl) {
+type setRangeActionSet = {
+  type: string,
+  payload: {
+    range: string,
+    from: number,
+    to: number,
+  }
+}
+
+type setRangeActionAll = {
+  type: string,
+  payload: {
+    range: string,
+  }
+}
+
+export function setRange(pl: Object): setRangeActionSet | setRangeActionAll {
   const type = SET_RANGE
 
   const payload = cloneDeep(pl)
@@ -62,15 +103,13 @@ export function setRange(pl) {
     const now = moment().startOf('day')
     const buttonType = payload.type
     if (typeof payload.from !== 'number') {
-      if ( +now.format('x') <= payload.to ) {
+      if (+now.format('x') <= payload.to) {
         if ( buttonType === 'next' || buttonType === 'previous') {
           return getActionAccordingToButtonPressed(buttonType, payload)
         } else {
           payload.to = +now.format('x')
           payload.from = +now.subtract(7, 'days')
         }
-
-
       }
       if ( buttonType === 'next' || buttonType === 'previous') {
         return getActionAccordingToButtonPressed(buttonType, payload)
@@ -79,15 +118,15 @@ export function setRange(pl) {
       }
     } else {
       const from = +now.subtract(7, 'days').format('x')
-      if ( from < payload.from ) {
-        if ( buttonType === 'next' || buttonType === 'previous') {
+      if (from < payload.from) {
+        if (buttonType === 'next' || buttonType === 'previous') {
           return getActionAccordingToButtonPressed(buttonType, payload)
         } else {
           payload.from = from
           payload.to = +now.format('x')
         }
       }
-      if ( buttonType === 'next' || buttonType === 'previous') {
+      if (buttonType === 'next' || buttonType === 'previous') {
         return getActionAccordingToButtonPressed(buttonType, payload)
       } else {
         payload.to = +moment(payload.from).add(7, 'days').format('x')

app/js/actions/sort.js

@@ -3,9 +3,9 @@
 
 import { SET_SORT } from './constants'
 
-export function setSort(type: string, state) {
-  if (!type) {
-    throw new Error('Missing sort type')
+export function setSort(type: string, state: Object): Object {
+  if (!type || (typeof type !== 'string')) {
+    throw new Error('incorrect sort type')
   }
 
   return {

app/js/components/Charts/chart-styles.scss

@@ -1,5 +1,5 @@
 .innerContainer {
   position: absolute;
-  height: 100%;
-  width: 100%;
+  height: 80%;
+  width: 80%;
 }

app/js/components/Graph/style.scss

@@ -29,4 +29,9 @@
   position: relative;
   background: white;
   flex-grow: 1;
+
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  flex-direction: row;
 }

app/js/containers/Charts.js

@@ -5,6 +5,10 @@ import m from 'mithril'
 import f from 'flyd'
 import moment from 'moment'
 
+import {
+  List,
+} from 'immutable'
+
 import isEqual from 'lodash/isEqual'
 import isEmpty from 'lodash/isEmpty'
 
@@ -24,23 +28,25 @@ import { getChartData } from '../selectors/'
 
 const ChartContainer = {
   oninit(vnode) {
-    const state = vnode.attrs.store.getState()
+    // const state = vnode.attrs.store.getState()
     vnode.state.chartData = [
       {
         date: moment().format('DD/MM/YY'),
-        total: 5,
+        payingCustomersData: 5,
+        openIssuesData: 10,
       }
     ]
   },
   onupdate(vnode) {
     if (!vnode.state.chart) return false
 
     const state = vnode.attrs.store.getState()
+    // const types = List.of('payingCustomersData')
     const newData = getChartData(state).toJS()
 
     if (vnode.state.chart) {
       if (newData) {
-        if (!isEqual(newData, vnode.state.chartData)) {
+        if (!isEqual(vnode.state.chartData, newData)) {
           const length = newData.length
           // const len = vnode.state.chartData.length
           // vnode.state.chartData.concat(newData)
@@ -69,7 +75,6 @@ const ChartContainer = {
     const state = vnode.attrs.store.getState()
 
     vnode.state.chart = AmCharts.makeChart(vnode.dom, generateChart(state, vnode.state.chartData))
-
   },
   view(vnode) {
     return m(`.${styles.innerContainer}`, m(''))

app/js/helpers/moment/index.js

@@ -0,0 +1,13 @@
+/* @flow */
+'use strict'
+
+import moment from 'moment'
+import { List } from 'immutable'
+
+export function formatDate(date: string): number {
+  return +moment(date, 'YY/MM/DD').format('x')
+}
+
+export function reverseDateStrings(months: List<string>): List<string> {
+  return months.map((date) => moment(date, 'YY/MM/DD').format('DD/MM/YY'))
+}

app/js/helpers/transformators.js

@@ -47,19 +47,19 @@ function transformTimestamp(timestamp: number) {
   return moment(timestamp).format('DD/MM/YY')
 }
 
-function transformEmployeeName(name: string) {
+function transformEmployeeName(name: string): string {
   return map(name.split(' '), (part) => `${upper(first(part))}.`).join('')
 }
 
-function transformOpenStatus(value) {
+function transformOpenStatus(value): string {
   return (value === 'true' || value === true) ? 'open' : 'closed'
 }
 
 function transformLocation(value: string) {
   return `${value.substr(0, 2)}${value.substr(-2, 2)}`.toUpperCase()
 }
 
-export function transformItem(type: string, value: string|number): string|number {
+export function transformItem(type: string, value: number | string): string | number {
   switch (type) {
   case NAME_TYPE:
     return transformName(value)