Merge pull request #45 from g0v-it/mef-dev

Mef dev

.gitignore

@@ -1,10 +1,12 @@
 .DS_Store
 node_modules
 /dist
+.env
 
 # local env files
 .env.local
 .env.*.local
+.env
 
 # Log files
 npm-debug.log*
@@ -22,6 +24,7 @@ yarn-error.log*
 
 # Configuration
 public/config.js
+public/config.json
 public/version.json
 .project
 .settings/

LICENSE

@@ -1,6 +1,6 @@
 MIT License
 
-Copyright (c) 2018 LinkedData.Center
+Copyright (c) 2018 Copernicani it
 
 Permission is hereby granted, free of charge, to any person obtaining a copy
 of this software and associated documentation files (the "Software"), to deal
@@ -19,3 +19,26 @@ AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
 LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
 OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
 SOFTWARE.
+
+
+--------------- 
+Contains code Copyright (c) 2018 by [LinkedData.Center](http://LinkedData.Center/)
+
+Permission is hereby granted, free of charge, to any person obtaining a copy
+of this software and associated documentation files (the "Software"), to deal
+in the Software without restriction, including without limitation the rights
+to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
+copies of the Software, and to permit persons to whom the Software is
+furnished to do so, subject to the following conditions:
+
+The above copyright notice and this permission notice shall be included in all
+copies or substantial portions of the Software.
+
+THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
+IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
+FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
+AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
+LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
+OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
+SOFTWARE.
+

README.md

@@ -2,32 +2,50 @@
 
 # web-budget
 
-An interactive web application that visualizes the Italian Government budget data.
+An interactive web application that visualizes government financial reports.
 
 This application is inspired by similar applications developed by the [g0v community](http://gov.asia/) in [Taiwan](https://github.com/g0v/twbudget) and [Taipey](https://github.com/tony1223/tw-budget-platform)
 
-g0v is a decentralized civic tech community to advocate transparency of information and build tech solutions 
+g0v is a decentralized civic tech community to advocate transparency of information and build tech solutions
 for citizens to participate in public affairs from the bottom up. The g0v community was born in Taiwan thanks to [Audrey Tang](https://de.wikipedia.org/wiki/Audrey_Tang), [Chia-liang Kao](https://github.com/clkao) and many others.
 
+## Who is using it
+
+As we know, this code is used to:
+
+- visualize the Italian Budget (Legge di bilancio), see https://budget.g0v.it/
+- visualize the public Financial Reports of INPS, see https://inps.g0v.it/
+
 
 ## Docker
 
-### run docker image
+### run local docker image
 
-Docker images are published to dockerhub (https://hub.docker.com/r/copernicani/web-budget/). 
-In the following example the container will be configured with the  api endpoint https://data.budget.g0v.it/api/v1 and listening on port 9999:
+The webapp requires to connect to a platform that provides the data, e.g:
 
+```bash
+git clone https://github.com/g0v-it/data-inps.git ../testdata
+cd ../testdata; docker-compose up -d
+#take note of the api container port, e.g.
+APIPORT=29322
+```
 
-```$bash
-docker run -i -t --rm \
-    -p 9990:8080 \
-    -e G0V_API_ENDPOINT=https://data.budget.g0v.it/api/v1 \
-    copernicani/web-budget:0.1.0
+Than you are ready to build and run webapp container:
+
+```bash
+docker build -t webapp .
+docker run -d --name webapp -p 29313:8080 -e G0V_API_ENDPOINT=http://localhost:$APIPORT webapp
 ```
 
+Try it pointing your browser to http://localhost:29313
+
+Remove the container with `docker rm -f webapp`
+
 
 You can use the following environment variables with the container image:
 
+- `G0V_CONFIG_URL` -> is the URL to the application JSON configuration (if not passed in a json file is generated from the other environment variables and put in `/config.json`)
+- `G0V_STRING_URL` -> is the URL to the application JSON strings (if not passed the default `/strings/mef.json` is used)
 - `G0V_LOCALE` -> `locale` (the application Locale)
 - `G0V_AMOUNT_FORMAT` -> `amountFormat` (the format for currency values)
 - `G0V_RATE_FORMAT` -> `rateFormat` (the format for percentages)
@@ -36,11 +54,11 @@ You can use the following environment variables with the container image:
 - `G0V_APP_HASHTAG` -> `appHashtag` (the application hashtag)
 - `G0V_APP_HASHTAG` -> `appHashtag` (the application hashtag)
 - `G0V_SHOW_MEF_LOGO` -> `showMefLogo` (whether to show the MEF logo)
-- `G0V_MEF_LOGO_URL` -> `mefLogoUrl` (where to link the MEF logo)
 - `G0V_G0V_LOGO_URL` -> `g0vLogoUrl` (where to link the g0v logo)
 
 
-### build docker image 
+
+### build docker image
 
 the project contains a `Dockerfile` which uses a two-stages build process: it first creates an image with the full node.js environment where the `npm build` step is run and then it creates an image containing only the compiled application files and the nginx server to serv them.
 
@@ -50,16 +68,15 @@ whoever runs the image to customize the application configuration simply by pass
 The `docker` directory contains the nginx configuration and the command run by the image.
 
 To build the image a `Makefile` is provided that builds and tags the image:
- 
+
 ```$bash
 make build
-``` 
+```
 
-The `NAME` and `VERSION` variables in the `Makefile` set the docker image name and tag (look at the file to see the details).  
+The `NAME` and `VERSION` variables in the `Makefile` set the docker image name and tag (look at the file to see the details).
 
 The image exposes the web server on port `8080`.
 
-
 ## Project setup
 ```
 npm install
@@ -77,36 +94,37 @@ npm run build
 
 ### Configuration
 
-To customize the settings add a `config.js` file in the `public` directory 
-with this content and customize the parameters:
+To customize the settings add a `config.js` file in the `public` directory with this content:
 
 ```
-(function (window) {
-
-    window.__settings = window.__settings || {};
-
-    // Application Locale
-    window.__settings.locale = 'it',
-
-    // Format for currency values
-    window.__settings.amountFormat = '$ 0,0. ',
+(function(window) {
+  window.__configurationUrl = "/config.json";
+  window.__stringUrl = "/strings/inps.json";
+})(this);
 
-    // Format for percentages
-    window.__settings.rateFormat = '0.0 %',
-
-    // API base endpoint
-    window.__settings.apiEndpoint = 'http://data.budget.g0v.it/api/v1';
+```
 
+And a `config.json` file to the `public` directory with this content and customize the parameters:
 
-}(this));
+```
+{
+  "locale": "it",
+  "amountFormat": "$ 0,0 ",
+  "rateFormat": "0.0 %",
+  "tweetsUrl": "",
+  "appHashtag": "",
+  "apiEndpoint": "http://data.budget.g0v.it/api/v1",
+  "showMefLogo": true,
+  "g0vLogoUrl": "https://copernicani.it/g0v"
+}
 ```
 
 The configuration is read on page load and exposed in the object exported from `utils/configuration.js`
 
 ```
 import Configuration from './utils/configuration'
 
-let settings = Configuration();
+let settings = Configuration;
 let apiEndpoint = settings.current().apiEndpoint;
 ```
 
@@ -127,7 +145,7 @@ For answers you may not find in here or in the Wiki, avoid posting issues. Feel
 ## Credits
 
 - [Miah Mohd Ehtesham](https://github.com/miahmohd), [Leonardo Longhi](https://github.com/LeonardoLonghi) and [Luca Mearelli](https://github.com/luca) for the webapp code design.
-- [Enrico Fagnoni](https://github.com/ecow), [Yassine Ouahidi](https://github.com/YassineOuahidi) and [LinkedData.Center](http://linkeddata.center) for the smart data management platform 
+- [Enrico Fagnoni](https://github.com/ecow), [Yassine Ouahidi](https://github.com/YassineOuahidi) and [LinkedData.Center](http://linkeddata.center) for the smart data management platform
 - [Mike Bostock](https://bost.ocks.org/mike/) for the [D3.js library](https://d3js.org/)
 - [Evan You](http://evanyou.me/) and he [Vue community](https://vuejs.org) for the great framework
 
@@ -136,5 +154,3 @@ Thanks to all project contributors, to the [Copernicani community](https://coper
 ## License
 
 The MIT License (MIT). Please see License File for more information.
-
-

docker-compose.yml

@@ -0,0 +1,12 @@
+version: '3'
+services:
+  webapp:
+    environment:
+      - G0V_API_ENDPOINT=http://194.177.121.230:29322
+      - G0V_STRING_URL=/strings/mef.json
+      - G0V_TWEETS_URL=https://docs.google.com/spreadsheets/d/1IKb7W6MwpWODE4j2UOSti9tmOw3oh676sEXjlpECvQI/edit?usp=sharing
+      - G0V_APP_HASHTAG=g0vit
+      - G0V_SHOW_MEF_LOGO=0
+    build: .
+    ports:
+      - "29323:8080"

docker/run_server.sh

@@ -1,64 +1,87 @@
 #!/bin/sh
 
-# Generate the config file from ENV
+# Generate the bootstrap config file from ENV
+
+if [ "$G0V_CONFIG_URL" != "" ]
+then
+    G0V_CONFIG_URL="window.__configurationUrl = \"$G0V_CONFIG_URL\";"
+else
+    G0V_CONFIG_URL="window.__configurationUrl = \"/config.json\";"
+fi
+
+if [ "$G0V_STRING_URL" != "" ]
+then
+    G0V_STRING_URL="window.__stringUrl = \"$G0V_STRING_URL\";"
+else
+    G0V_STRING_URL="window.__stringUrl = \"/strings/mef.json\";"
+fi
+
+cat > /usr/share/nginx/html/config.js <<CONF
+
+(function (window) {
+    $G0V_CONFIG_URL
+    $G0V_STRING_URL
+}(this));
+
+CONF
+
+# Generate the JSON config file from ENV
 
 if [ "$G0V_DEBUG" != "" ]
 then
-    G0V_DEBUG="window.__settings.debug = $G0V_DEBUG;"
+    G0V_DEBUG="\"debug\": $G0V_DEBUG"
+else
+    G0V_DEBUG="\"debug\": false"
 fi
 
 if [ "$G0V_LOCALE" != "" ]
 then
-    G0V_LOCALE="window.__settings.locale = \"$G0V_LOCALE\";"
+    G0V_LOCALE="\"locale\": \"$G0V_LOCALE\","
 fi
 
 if [ "$G0V_AMOUNT_FORMAT" != "" ]
 then
-    G0V_AMOUNT_FORMAT="window.__settings.amountFormat = \"$G0V_AMOUNT_FORMAT\";"
+    G0V_AMOUNT_FORMAT="\"amountFormat\": \"$G0V_AMOUNT_FORMAT\","
 fi
 
 if [ "$G0V_RATE_FORMAT" != "" ]
 then
-    G0V_RATE_FORMAT="window.__settings.rateFormat = \"$G0V_RATE_FORMAT\";"
+    G0V_RATE_FORMAT="\"rateFormat\": \"$G0V_RATE_FORMAT\","
 fi
 
 if [ "$G0V_API_ENDPOINT" != "" ]
 then
-    G0V_API_ENDPOINT="window.__settings.apiEndpoint = \"$G0V_API_ENDPOINT\";"
+    G0V_API_ENDPOINT="\"apiEndpoint\": \"$G0V_API_ENDPOINT\","
 fi
 
 if [ "$G0V_TWEETS_URL" != "" ]
 then
-    G0V_TWEETS_URL="window.__settings.tweetsUrl = \"$G0V_TWEETS_URL\";"
+    G0V_TWEETS_URL="\"tweetsUrl\": \"$G0V_TWEETS_URL\","
 fi
 
 if [ "$G0V_APP_HASHTAG" != "" ]
 then
-    G0V_APP_HASHTAG="window.__settings.appHashtag = \"$G0V_APP_HASHTAG\";"
+    G0V_APP_HASHTAG="\"appHashtag\": \"$G0V_APP_HASHTAG\","
 fi
 
 if [ "$G0V_SHOW_MEF_LOGO" != "" ]
 then
-    G0V_SHOW_MEF_LOGO="window.__settings.showMefLogo = $G0V_SHOW_MEF_LOGO;"
+    G0V_SHOW_MEF_LOGO="\"showMefLogo\": $G0V_SHOW_MEF_LOGO,"
 fi
 
 if [ "$G0V_MEF_LOGO_URL" != "" ]
 then
-    G0V_MEF_LOGO_URL="window.__settings.mefLogoUrl = \"$G0V_MEF_LOGO_URL\";"
+    G0V_MEF_LOGO_URL="\"mefLogoUrl\": \"$G0V_MEF_LOGO_URL\","
 fi
 
 if [ "$G0V_G0V_LOGO_URL" != "" ]
 then
-    G0V_G0V_LOGO_URL="window.__settings.g0vLogoUrl = \"$G0V_G0V_LOGO_URL\";"
+    G0V_G0V_LOGO_URL="\"g0vLogoUrl\": \"$G0V_G0V_LOGO_URL\","
 fi
 
-cat > /usr/share/nginx/html/config.js <<CONF
-
-(function (window) {
-
-    window.__settings = window.__settings || {};
+cat > /usr/share/nginx/html/config.json <<CONF
+{
 
-    $G0V_DEBUG
     $G0V_LOCALE
     $G0V_AMOUNT_FORMAT
     $G0V_RATE_FORMAT
@@ -68,8 +91,9 @@ cat > /usr/share/nginx/html/config.js <<CONF
     $G0V_SHOW_MEF_LOGO
     $G0V_MEF_LOGO_URL
     $G0V_G0V_LOGO_URL
+    $G0V_DEBUG
 
-}(this));
+}
 
 CONF