Merge pull request #3 from oklabflensburg/feature/library

merge feature/library into main

package.json

@@ -5,10 +5,12 @@
   "source": "src/index.html",
   "browserslist": "> 0.5%, last 2 versions, not dead",
   "scripts": {
-    "start": "parcel serve --no-cache",
-    "build": "parcel build --public-url '.' --no-cache",
+    "clean": "rm -r dist .parcel-cache",
+    "start": "pnpm run clean && parcel serve --no-cache",
+    "build": "pnpm run clean && parcel build --public-url '.'",
     "htmlhint": "htmlhint \"**/*.html\" --ignore \"dist/**/*.html\" --format unix",
     "prettier": "npm:@yuhr/prettier",
+    "preinstall": "cp scripts/* .git/hooks",
     "lint:js": "pnpm exec eslint src",
     "lint:html": "pnpm run htmlhint",
     "lint:css": "pnpm exec stylelint \"**/*.css\" && pnpm exec prettier --check \"**/*.css\"",
@@ -18,7 +20,7 @@
     "staticPath": "static"
   },
   "dependencies": {
-    "@sndcds/mvc": "^0.0.31"
+    "@sndcds/mvc": "^0.0.33"
   },
   "devDependencies": {
     "@parcel/config-default": "^2.9.3",

scripts/pre-push

@@ -0,0 +1,26 @@
+#!/bin/bash 
+
+CMD="pnpm run install && pnpm run build" # Command that runs your tests
+protected_branch='main'
+
+# Check if we actually have commits to push
+commits=`git log @{u}..`
+
+if [ -z "$commits" ]; then
+    exit 0
+fi
+
+current_branch=$(git symbolic-ref HEAD | sed -e 's,.*/\(.*\),\1,')
+
+if [[ $current_branch = $protected_branch ]]; then
+    $CMD
+
+    RESULT=$?
+
+    if [ $RESULT -ne 0 ]; then 
+        echo "failed $CMD"
+        exit 1
+    fi
+fi
+
+exit 0

src/app.js

@@ -1,8 +1,7 @@
-import { View, Controller } from '@sndcds/mvc'
+import { Controller, Component } from '@sndcds/mvc'
 
 
 export default class App extends Controller {
-  /* eslint no-useless-constructor: 0 */
   constructor(model, view) {
     super(model, view)
 
@@ -28,7 +27,27 @@ export default class App extends Controller {
     }
   }
 
-  renderAgeSection() {
+  updateView() {
+    this.setProperties('text-distict-details', { 'html': `<h1>Stadtteil: <strong>${this.model.districtName()}</strong></h1>` })
+
+    const residentsInDestrict = this.model.districtData.valueByPath(['district_detail', '2021', 'residents'])
+    const residentsTotal = this.model.residentsTotal()
+    const percent = residentsInDestrict / residentsTotal * 100 // TODO
+
+    this.setProperties('residents-in-destrict', { 'value': this.formatNumber(residentsInDestrict) })
+    this.setProperties('residents-percent-in-destrict', { 'value': this.formatNumber(percent) })
+    this.setProperties('residents-total', { 'value': this.formatNumber(residentsTotal) })
+
+    this.updateViewAgeSection()
+    this.updateViewAgeSection2()
+    this.updateSectionBirths()
+
+
+    const c = this.componentById('svg')
+    c.setProperties({ 'values': this.model.residentsInDistrictsArray() })
+  }
+
+  updateViewAgeSection() {
     const items = [
       { 'id': 'age-view-1', 'path': ['district_detail', '2021', 'age_groups', 'age_to_under_18'] },
       { 'id': 'age-view-2', 'path': ['district_detail', '2021', 'age_groups', 'age_18_to_under_30'] },
@@ -42,13 +61,40 @@ export default class App extends Controller {
 
     let sum = 0
     items.forEach((item) => {
-      sum += this.getNestedValue(this.model.districtObject, item.path)
+      sum += this.model.districtData.valueByPath(item.path)
+    })
+
+    let barOffset = 0
+    items.forEach((item) => {
+      const c = this.componentById(item.id)
+      const d = this.model.districtData.valueByPath(item.path)
+      const percentage = d / sum * 100
+      c.setProperties(
+        {
+          'value': this.formatNumber(d),
+          'percentage': this.formatNumber(percentage),
+          barOffset
+        })
+      barOffset += percentage
+    })
+  }
+
+  updateViewAgeSection2() {
+    const items = [
+      { 'id': 'residents-0-18', 'path': ['district_detail', '2021', 'age_groups', 'age_to_under_18'] },
+      { 'id': 'residents-18-65', 'path': ['district_detail', '2021', 'age_groups', 'age_18_to_under_65'] },
+      { 'id': 'residents-65-above', 'path': ['district_detail', '2021', 'age_groups', 'age_65_and_above'] }
+    ]
+
+    let sum = 0
+    items.forEach((item) => {
+      sum += this.model.districtData.valueByPath(item.path)
     })
 
     let barOffset = 0
     items.forEach((item) => {
       const c = this.componentById(item.id)
-      const d = this.getNestedValue(this.model.districtObject, item.path)
+      const d = this.model.districtData.valueByPath(item.path)
       const percentage = d / sum * 100
       c.setProperties(
         {
@@ -60,34 +106,39 @@ export default class App extends Controller {
     })
   }
 
+  updateSectionBirths() {
+    const births = this.model.districtData.valueByPath(['district_detail', '2021', 'births'])
+    const birthsTotal = this.model.birthsTotal()
+    const percent = births / birthsTotal * 100
+
+    this.setProperties('births', { 'value': this.formatNumber(births) })
+    this.setProperties('births-percent', { 'value': this.formatNumber(percent) })
+    this.setProperties('births-total', { 'value': this.formatNumber(birthsTotal) })
+    this.setProperties('births-rate', { 'value': this.formatNumber(0) })  // TODO: Use the correct value from data
+
+
+    const c = this.componentById('births-chart')
+    c.setProperties({ 'values': this.model.birthsInDistrictsArray() })
+  }
+
   onDataChanged(data) {
     this.model.setDataObject(data)
-    this.model.setDistrictObject(this.model.districtId)
+    this.model.setDistrictData(this.model.districtId)
+
+    this.model.districtCount = data.length
 
-    const d = { 'data': this.model.data, 'districtId': this.model.districtId }
+    const d = { 'data': this.model.data.data, 'districtId': this.model.districtId }
     const c = this.componentById('district-select')
     c.setWithData(d)
     c.bindDistrictChanged(this.onDistrictChanged)
 
-    this.renderAgeSection()
+    this.updateView()
   }
 
   onDistrictChanged(id) {
     this.model.setDistrictId(id + 1)
-    this.model.setDistrictObject(id + 1)
-
-    this.renderAgeSection()
-  }
+    this.model.setDistrictData(id + 1)
 
-  /**
-     * Generates a random RGB color.
-     *
-     * @returns {string} A random RGB color string.
-     */
-  static randomColor() {
-    const red = Math.floor(Math.random() * 256)
-    const green = Math.floor(Math.random() * 256)
-    const blue = Math.floor(Math.random() * 256)
-    return `rgb(${red}, ${green}, ${blue})`
+    this.updateView()
   }
 }

src/appModel.js

@@ -1,12 +1,13 @@
-import { Model } from '@sndcds/mvc'
+import { Model, DataObject } from '@sndcds/mvc'
 
 
 export default class AppModel extends Model {
   constructor() {
     super()
     this.data = null
+    this.districtCount = 0
     this.districtNames = null
-    this.districtObject = null
+    this.districtData = null
     this.districtId = null
   }
 
@@ -15,8 +16,9 @@ export default class AppModel extends Model {
   }
 
   setDataObject(data) {
-    this.data = data
-    this.districtNames = data.map((item) => item.district_name)
+    this.data = new DataObject(data)
+    this.districtCount = data.length
+    this.districtNames = data.detail.map((item) => item.district_name)
     this.setStorage('data', data)
   }
 
@@ -25,13 +27,64 @@ export default class AppModel extends Model {
     this.setStorage('districtId', districtId)
   }
 
-  setDistrictObject(districtId) {
+  setDistrictData(districtId) {
     const condition = (district) => district.district_id === districtId
-    const items = this.data.filter(condition)
+    const items = this.data.data.detail.filter(condition)
 
     if (items.length > 0) {
-      this.districtObject = items[0]
-      this.setStorage('districtObject', items[0])
+      this.districtData = new DataObject(items[0])
+      this.setStorage('districtData', items[0])
     }
   }
+
+  /**
+   * Get district name.
+   */
+  districtName(districtId) {
+    if (districtId === undefined) {
+      districtId = this.districtId
+    }
+    return this.districtNames[districtId - 1]
+  }
+
+  /**
+   * Get number of residents total for a specific year.
+   */
+  residentsTotal(year) {
+    // TODO: Use year
+    // TODO: Check! Get value from data?
+    const values = this.residentsInDistrictsArray()
+    let sum = 0
+
+    values.forEach((v) => {
+      sum += v
+    })
+
+    return sum
+  }
+
+  residentsInDistrictsArray(year) {
+    // TODO: Use year
+    // TODO: Check!
+    return this.data.data.detail.map((item) => item.residents)
+  }
+
+  birthsTotal(year) {
+    // TODO: Use year
+    // TODO: Check! Get value from data?
+    const values = this.birthsInDistrictsArray()
+    let sum = 0
+
+    values.forEach((v) => {
+      sum += v
+    })
+
+    return sum
+  }
+
+  birthsInDistrictsArray(year) {
+    // TODO: Use year
+    // TODO: Check!
+    return this.data.data.detail.map((item) => item.births)
+  }
 }

src/components/button.js

@@ -1,6 +1,5 @@
 import { Component } from '@sndcds/mvc'
 
-
 export default class Button extends Component {
   constructor(parent, id, setupData) {
     super(parent, id, setupData)