Skip to content

Latest commit

 

History

History
executable file
·
270 lines (174 loc) · 8.1 KB

README.md

File metadata and controls

executable file
·
270 lines (174 loc) · 8.1 KB
Raw

ODAMAP

...stands for "Open-Dashboard-And-MAP"

A generic and customizable map/dashboard solution for open data visualisation

Documentation

Check our brand new documentation website :

https://etalab.github.io/dashboard-aides-entreprises/

Version : v.2.xxx (beta)

Co-authors :

  • Julien Paris
  • Alexandre Bulté
  • Geoffrey Aldebert

Sites

Build Setup

# install dependencies
npm install

# serve with hot reload at localhost:3000
npm run dev

# build for production and launch server
npm run build
npm run start

# generate static project
npm run generate

For detailed explanation on how things work, check out Nuxt.js docs.

Linting


Linting avec standard

Vous pouvez lancer standard pour simplement vérifier les erreurs :

npx standard

pour corriger ce qui peut l'être

npx standard --fix

Linting avec lint

Vous pouvez lancer lint pour simplement vérifier les erreurs :

npm run lint

ou lintfix pour corriger ce qui peut l'être

npm run lintfix

Déploiement sur Netlify

Build settings

  • Repository : github.com/etalab/dashboard-aides-entreprises
  • Build command : npm run build
  • Publish directory : dist

Deploy contexts

  • Production branch : master
  • ( ou : Production branch : preprod )

Environment variables

  • NUXT_ENV_RUN_MODE = prod (ou preprod pour avoir les logs dans la console)
  • voir également les autres variables possibles en regardant le fichier d'exemple .envExample

Configuration de l'application ODAMAP

Variables d'environnement :

  • éditer/créer un fichier .env sur le modèle du fichier .envExample

configuration de l'app / UI-UX / routes / navbar ...:

configuration de l'app / data:

configuration de l'app / carte:

configuration de l'app / vues données :

langues :

  • voir le dossier /locales pour les fichiers de traduction

ce qu’il n’y a pas encore :

  • afficher les départements dépendants d’une région et uniquement eux ;
  • minivues pour les dom-tom en dessous ou à côté de la carte principale ;
  • settings pour connexion à une API de backend, mais sketché pour quand même ;
  • footer “officiel” + liens ;
  • meilleure gestion du zoom et des largeurs de cercles en fonction de l’altitude ;
  • ...

ce qu’il y a dedans :

  • responsive a minima (chart puis carte sur mobile) ;
  • interaction avec les régions et/ou les départements -> change les chiffres dans les autres composants ;
  • chargement des données json et geojson, ventilées soit dans le store soit uniquement dans la carte.. ;
  • bouton de switch ‘calques’ pour intéragir soit avec le calque région ou le calque départements (pas destiné à rester obligatoirement) ;
  • totaux par région/departement (et au lancement au niveau national) du montant des aides et du nombre d’aides ;
  • design a minima avec des couleurs piquées chez Jérôme ;
  • code le plus factorisé et générique possible (enfin autant que j’ai pu) pour pouvoir ajouter / dupliquer des composants et/ou changer des sources, ... j’ai tenté de faire une “souche” qui pourrait servir autant aux données DVF qu’aux aides aux entreprises qu’aux fonds de carte écolos...
  • le mapping des données avec les variables de l’appli se font via les différents fichiers de configuration dans le dossier /config
  • switch de la carte en 1er + chiffres clés en version mobile ;
  • wording et CSS ;
  • tiles Etalab (bug relou de mon wrapper mapbox pour charger le style ?!!!) ;
  • repasse sur l’UX (notamment sur l’usage de la barre de gauche par exemple) ;
  • pages/url de textes statiques pour afficher des infos ;
  • scrolling uniquement sur la colonne de gauche pour pouvoir ajouter d’autres charts en dessous de la première ;
  • revenir aux chiffres nationaux (réinitialiser) ;

stack :

  • vuejs / nuxt / axios / dotenv /
  • vuetify / fontawesome / material Design
  • i18n /
  • mapboxGL.js / vue-mapbox / Apexcharts / vue-apexCharts / turf déploiement : SPA mais plusieurs urls possibles pour afficher des pages / netlify (sur mon compte Netlify pour le moment mais assez simple à déployer)

Variables de configuration remarquables

fichier : appConfigMap.js

Pour le composant MapboxGL :

  • settingsIds[-].map.clicEvents[-].functions : (array)
    • liste des fonctions à déclencher lors d'un événement sur un élément de la carte

  • settingsIds[-].map.clicEvents[-].functions[-].funcName : (string)
    • choix :
      • goToPolygon : zoom sur polygon target
      • updateDisplayedData : mise à jour de données du store
      • setChildrenPolygons : ( non codé )
      • updateQuery : (non codé )

  • settingsIds[-].map.clicEvents[-].functions[-].funcParams.zoomRange : object)
    • minZoom : fonction inactive en deçà
    • maxZoom : fonction inactive au-delà

  • settingsIds[-].map.clicEvents[-].functions[-].funcParams.propName :
    • propriété de la feature à récupérer comme valeur à passer dans la fonction

  • settingsIds[-].map.clicEvents[-].functions[-].funcParams.targets : array
    • liste des références des données à mettre à jour et des données cibles

fichier : appConfigGlobalButtons.js

Pour le composant GlobalButton :

  • settingsIds[-].componentButtons.functions[-] : (array)
    • liste des fonctions à déclencher lors d'un clic sur le bouton

  • settingsIds[-].componentButtons.functions[-].funcName : (string)
    • choix :
      • resetStore : reinitiélisation du store
      • resetMapZoom : reinitialisation du zoom du/des composants