refactored code to meet naming conventions

.eslintrc.yaml

@@ -77,6 +77,7 @@ rules:
   indent:
     - error
     - 2
+    - SwitchCase: 1
 
   key-spacing:
     - error

package.json

@@ -20,7 +20,7 @@
     "staticPath": "static"
   },
   "dependencies": {
-    "@sndcds/mvc": "^0.0.38"
+    "@sndcds/mvc": "^0.0.43"
   },
   "devDependencies": {
     "@parcel/config-default": "^2.9.3",

src/app.js

@@ -20,7 +20,7 @@ export default class App extends Controller {
     }
 
     if (data === null) {
-      this.fetchData(url)
+      this.fetchJsonData(url)
     }
     else {
       this.onDataChanged(data)
@@ -69,16 +69,19 @@ export default class App extends Controller {
 
     let barOffset = 0
     items.forEach((item) => {
-      const c = this.componentById(item.id)
+      const c = this.getComponentById(item.id)
+
       if (c !== undefined) {
         const d = this.valueByPath(item.path)
         const percentage = d / sum * 100
+
         c.setProperties(
           {
             value: this.formatNumber(d),
             percentage: this.formatNumber(percentage),
             barOffset
           })
+
         barOffset += percentage
       }
     })
@@ -92,22 +95,27 @@ export default class App extends Controller {
     ]
 
     let sum = 0
+
     items.forEach((item) => {
       sum += this.valueByPath(item.path)
     })
 
     let barOffset = 0
+
     items.forEach((item) => {
-      const c = this.componentById(item.id)
+      const c = this.getComponentById(item.id)
+
       if (c !== undefined) {
         const d = this.valueByPath(item.path)
         const percentage = d / sum * 100
+
         c.setProperties(
           {
             value: this.formatNumber(d),
             percentage: this.formatNumber(percentage),
             barOffset
           })
+
         barOffset += percentage
       }
     })
@@ -124,14 +132,16 @@ export default class App extends Controller {
     this.setProperties('births-total', { value: this.formatNumber(birthsTotal) })
     this.setProperties('births-rate', { value: this.formatNumber(birthRate) })
 
-    const c = this.componentById('births-chart')
+    const c = this.getComponentById('births-chart')
+
     if (c !== undefined) {
       c.setProperties({ values: this.model.birthsInDistrictsArray() })
     }
   }
 
   updateSectionAgeRatio() {
     const ageRatio = this.valueByPath(['age_ratio'])
+
     this.setProperties('age-ratio', { value: this.formatNumber(ageRatio) })
   }
 
@@ -146,9 +156,13 @@ export default class App extends Controller {
 
     this.setProperties('residents-migration-background', { value: this.formatNumber(total) })
     this.setProperties('residents-migration-background-percent', { value: this.formatNumber(percent) })
+
     let barOffset = 0
+
     this.setProperties('german-citizenship', { value: this.formatNumber(german), percentage: this.formatNumber(germanPercent), barOffset })
+
     barOffset = germanPercent
+
     this.setProperties('foreign-citizenship', { value: this.formatNumber(foreign), percentage: this.formatNumber(foreignPercent), barOffset })
   }
 
@@ -161,9 +175,12 @@ export default class App extends Controller {
     const unemployedPercent = unemployed / residentsInDestrict * 100
 
     let barOffset = 0
+
     this.setProperties('employed-residents', { value: this.formatNumber(employed), percentage: this.formatNumber(employedPercent), barOffset })
     this.setProperties('employed-rate', { value: this.formatNumber(employedRate) })
+
     barOffset = employedPercent
+
     this.setProperties('unemployed-residents', { value: this.formatNumber(unemployed), percentage: this.formatNumber(unemployedPercent), barOffset })
 
     const settings = [
@@ -198,23 +215,8 @@ export default class App extends Controller {
     ]
 
     const total = this.setPropertyValue(settings)
-    this.setProperties('housing-assistance-total', { value: this.formatNumber(total) })
-  }
-
-
-  onDataChanged(data) {
-    this.model.setDataObject(data)
-    this.model.setDistrictData(this.model.districtId)
-
-    this.model.districtCount = data.length
-
-    const d = { data: this.model.data.data, districtId: this.model.districtId }
-    const c = this.componentById('district-select')
-    if (c !== undefined) {
-      c.setWithData(d)
-    }
 
-    this.updateView()
+    this.setProperties('housing-assistance-total', { value: this.formatNumber(total) })
   }
 
   /**
@@ -229,35 +231,37 @@ export default class App extends Controller {
    */
   setPropertyValue(settings) {
     let total = 0
+
     settings.forEach((item, i) => {
       let value = this.valueByPath(item.path)
+
       if (value === null || value === undefined) {
         value = item.default
       }
+
       this.setProperties(item.id, { value: this.formatNumber(value) })
+
       total += value
     })
 
     return total
   }
 
+  onDataChanged(data) {
+    this.model.setDataObject(data)
+    this.model.setDistrictData(this.model.districtId)
+
+    this.sendMessageToComponent('district-select', { setByModel: this.model })
+    this.updateView()
+  }
+
   onDistrictChanged(id) {
     this.model.setDistrictId(id)
     this.model.setDistrictData(id)
 
     this.sendMessageToComponent('district-select', { value: id })
-    this.sendMessageToComponent('district-map', { colors: { all: '#d1e4fd' } })
-    this.sendMessageToComponent('district-map', { colors: { [`path-${id}`]: '#0069f6' } })
+    this.sendMessageToComponent('district-map', { selectPath: id })
 
     this.updateView()
   }
-
-  static floatToString(value, decimals) {
-    // TODO: Check! Is there a better/faster method?
-    // TODO: Rename and move to controller
-    if (decimals === undefined) {
-      decimals = 2
-    }
-    return parseFloat(value.toFixed(decimals))
-  }
 }

src/appModel.js

@@ -4,7 +4,8 @@ import { Model, DataObject } from '@sndcds/mvc'
 export default class AppModel extends Model {
   constructor() {
     super()
-    this.data = null
+
+    this.dataObject = null
     this.districtCount = 0
     this.districtNames = null
     this.districtData = null
@@ -16,20 +17,22 @@ export default class AppModel extends Model {
   }
 
   setDataObject(data) {
-    this.data = new DataObject(data)
+    this.dataObject = new DataObject(data)
     this.districtCount = data.length
     this.districtNames = data.detail.map((item) => item.district_name)
+
     this.setStorage('data', data)
   }
 
   setDistrictId(districtId) {
     this.districtId = districtId
+
     this.setStorage('districtId', districtId)
   }
 
   setDistrictData(districtId) {
     const condition = (district) => district.district_id === districtId
-    const items = this.data.data.detail.filter(condition)
+    const items = this.dataObject.data.detail.filter(condition)
 
     if (items.length > 0) {
       this.districtData = new DataObject(items[0])
@@ -44,27 +47,22 @@ export default class AppModel extends Model {
     if (districtId === undefined) {
       districtId = this.districtId
     }
+
     return this.districtNames[districtId - 1]
   }
 
   /**
    * Get number of residents total for a specific year.
    */
   residentsTotal(...params) {
-    // TODO: Use year
-    // TODO: Check! Get value from data?
-    return this.data.data.summary.sum_residents
+    return this.dataObject.data.summary.sum_residents
   }
 
   residentsInDistrictsArray(...params) {
-    // TODO: Use year
-    // TODO: Check!
-    return this.data.data.detail.map((item) => item.residents)
+    return this.dataObject.data.detail.map((item) => item.residents)
   }
 
   birthsTotal(...params) {
-    // TODO: Use year
-    // TODO: Check! Get value from data?
     const values = this.birthsInDistrictsArray()
     let sum = 0
 
@@ -76,8 +74,6 @@ export default class AppModel extends Model {
   }
 
   birthsInDistrictsArray(...params) {
-    // TODO: Use year
-    // TODO: Check!
-    return this.data.data.detail.map((item) => item.births)
+    return this.dataObject.data.detail.map((item) => item.births)
   }
 }

src/components/button.js

@@ -5,16 +5,14 @@ export default class Button extends Component {
     super(parent, id, setupData)
 
     this.label = 'Button'
-    this.events = null
 
     this.setProperties(setupData)
   }
 
-  propertyNames() {
-    const names = [
-      'label', 'events'
-    ]
-    return super.propertyNames(names)
+  getPropertyNames() {
+    const names = ['label']
+
+    return super.getPropertyNames(names)
   }
 
   propertiesChanged() {
@@ -26,13 +24,5 @@ export default class Button extends Component {
   build() {
     this.e = this.addDomElement('button')
     this.e.innerText = this.label
-
-    if (this.events !== null) {
-      this.events.forEach((item) => {
-        this.e.addEventListener(item.event, () => item.handler(this))
-      })
-    }
-
-    this.buildChilds()
   }
 }