{"id":13559211,"url":"https://github.com/co-demos/apiviz-frontend","last_synced_at":"2025-04-03T14:31:48.783Z","repository":{"id":40467412,"uuid":"186170964","full_name":"co-demos/apiviz-frontend","owner":"co-demos","description":"apiviz frontend as pure SPA / nuxt project","archived":false,"fork":false,"pushed_at":"2023-01-09T22:38:08.000Z","size":64149,"stargazers_count":7,"open_issues_count":51,"forks_count":3,"subscribers_count":2,"default_branch":"master","last_synced_at":"2024-08-02T12:52:10.716Z","etag":null,"topics":["apiviz","apiviz-frontend","axios","bulma","datavisualisation-website","javascript","mapbox-gl","nuxt","vuejs"],"latest_commit_sha":null,"homepage":"https://co-demos.github.io/apiviz-frontend/","language":"Vue","has_issues":true,"has_wiki":null,"has_pages":null,"mirror_url":null,"source_name":null,"license":"mit","status":null,"scm":"git","pull_requests_enabled":true,"icon_url":"https://github.com/co-demos.png","metadata":{"files":{"readme":"README.md","changelog":null,"contributing":null,"funding":".github/FUNDING.yml","license":"LICENSE","code_of_conduct":null,"threat_model":null,"audit":null,"citation":null,"codeowners":null,"security":null,"support":null},"funding":{"open_collective":"co-demos"}},"created_at":"2019-05-11T18:56:29.000Z","updated_at":"2023-10-26T20:48:05.000Z","dependencies_parsed_at":"2023-02-08T15:15:36.818Z","dependency_job_id":null,"html_url":"https://github.com/co-demos/apiviz-frontend","commit_stats":null,"previous_names":[],"tags_count":0,"template":false,"template_full_name":null,"repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/co-demos%2Fapiviz-frontend","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/co-demos%2Fapiviz-frontend/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/co-demos%2Fapiviz-frontend/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/co-demos%2Fapiviz-frontend/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/co-demos","download_url":"https://codeload.github.com/co-demos/apiviz-frontend/tar.gz/refs/heads/master","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":222978371,"owners_count":17067512,"icon_url":"https://github.com/github.png","version":null,"created_at":"2022-05-30T11:31:42.601Z","updated_at":"2022-07-04T15:15:14.044Z","host_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub","repositories_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories","repository_names_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repository_names","owners_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners"}},"keywords":["apiviz","apiviz-frontend","axios","bulma","datavisualisation-website","javascript","mapbox-gl","nuxt","vuejs"],"created_at":"2024-08-01T12:05:25.898Z","updated_at":"2024-11-04T10:31:18.889Z","avatar_url":"https://github.com/co-demos.png","language":"Vue","funding_links":["https://opencollective.com/co-demos"],"categories":["Vue","javascript"],"sub_categories":[],"readme":"\n\n## FRONTEND\n\n![APIVIZ-BRAND](./static/logos/logo_apiviz_15.png)\n\n-------\n\n[![GitHub license](https://img.shields.io/github/license/co-demos/apiviz-frontend)](https://github.com/co-demos/apiviz-frontend/blob/master/LICENSE) [![JavaScript Style Guide](https://img.shields.io/badge/code_style-standard-brightgreen.svg)](https://standardjs.com) ![GitHub package.json version](https://img.shields.io/github/package-json/v/co-demos/apiviz-frontend)\n\n## PRESENTATION\n\nVisualize data coming from an API in a CMS-like app : in short we aim to develop a Wordpress for data-visualisation.\n\nIf your data is stored somewhere and accessible via an API, ApiViz can transform it into a full website to show it at its best.\n\nApiViz includes \"out-the-box\" a back-office to fully configure/customize an original datavisualisation website\n\n--------\n\n#### WARNINGS : \n\n**apiviz-frontend** is only the frontend of the APIVIZ application, it only works if (and only) if a **[apiviz-backend](https://github.com/co-demos/apiviz-backend)** is correctly installed first or is serving configurations to the frontend.\n\nTo fully enjoy Apiviz frontend's features if you're not using Solidata's API, ***your own API Rest might propose all or some of the following parameters***, or equivalent when querying a dataset : \n\n- ***for the research navbar :***\n  - `query` : full text searrch\n  - `search_filter` : to filter out your results given a field name and a value. For instance querying all items in a 'my-data' dataset in which the field 'category' has the value 'categ01' could be similar to : `https://my-api.com/my-data?search_filter=category__categ01`\n\n- ***for detail view :*** \n  - `item_id` : to search an item by its id inside a dataset\n\n- ***for table and list views :***\n  - `page_number` : the page number\n  - `results_per_page` : the number of items per page\n  - `sort_by` : field to sort your result by\n  - `sort_order` : sorting order\n  - `shuffle_seed` (optionnal) : if you want to shuffle the results\n\n- ***for the map view :***\n  - `results_for_map` : getting all the results in a condensed format, like `{ id : \u003citem_id\u003e, lat: \u003clatittude\u003e, lng: \u003clongitude\u003e}`\n  - `fields_to_return` : to return additional fields, for instance when using `results_for_map=true` if you need another field(s) to link an item to a choropleth layer \n\n--------\n\n#### DEPLOYED WEBSITES : \n\nMain apiviz demo website : \n- [Apiviz.io](https://apiviz.io) : [![Netlify Status](https://api.netlify.com/api/v1/badges/851f6ce8-91bb-43e6-b6c6-80b66c9328cd/deploy-status)](https://app.netlify.com/sites/apiviz-demo-site/deploys)\n\nOfficial websites : \n- [PiNG - carto](https://tierslieux.cartes.pingbase.net) : [![Netlify Status](https://api.netlify.com/api/v1/badges/23e061dc-c6f6-4b8b-bd03-a3cd4dd622a1/deploy-status)](https://app.netlify.com/sites/ping-carto/deploys)\n- [CONUMM - carto](https://conumm.netlify.app) : [![Netlify Status](https://api.netlify.com/api/v1/badges/a60524d7-bfe3-478f-9537-344f5830f70b/deploy-status)](https://app.netlify.com/sites/conumm/deploys)\n- [Décider ensemble - ressources](https://decider-ensemble.netlify.app) : [![Netlify Status](https://api.netlify.com/api/v1/badges/f39c62de-075d-4f52-ad43-41cfd23b46ff/deploy-status)](https://app.netlify.com/sites/decider-ensemble/deploys)\n- [Covid-initiatives](https://covid-initiatives.org) : [![Netlify Status](https://api.netlify.com/api/v1/badges/653aa511-7abc-4a74-ab71-6ba9f5d599a0/deploy-status)](https://app.netlify.com/sites/covid-initiatives/deploys)\n- [TERNUM](https://bfc-carto.netlify.app/) : [![Netlify Status](https://api.netlify.com/api/v1/badges/cbd34edb-344d-4b16-9782-079050650128/deploy-status)](https://app.netlify.com/sites/bfc-carto/deploys)\n- [RHINOCC](https://rhinocc-carto-preprod.netlify.app/) : [![Netlify Status](https://api.netlify.com/api/v1/badges/1a3ff1c0-e803-43c8-86e2-613c9e676689/deploy-status)](https://app.netlify.com/sites/rhinocc-carto-preprod/deploys)\n\nMain Apiviz instances with public data : \n- [France Tiers-Lieux - carto](https://tiers-lieux-dataviz.netlify.app/recherche/carte) : [![Netlify Status](https://api.netlify.com/api/v1/badges/7fc48ec3-148f-46a9-9151-6f78996cfd37/deploy-status)](https://app.netlify.com/sites/tiers-lieux-dataviz/deploys)\n- [Codes Etalab](https://etalab-codes.netlify.app/) : [![Netlify Status](https://api.netlify.com/api/v1/badges/c0a9ad0c-6969-403c-80bb-2e4f262d7703/deploy-status)](https://app.netlify.com/sites/etalab-codes/deploys)\n- [Inventaire des orgues](https://orgues-apiviz.netlify.app/) : [![Netlify Status](https://api.netlify.com/api/v1/badges/e91ca7c3-3426-4467-b92c-1e371d8b038c/deploy-status)](https://app.netlify.com/sites/orgues-apiviz/deploys)\n- [sonum-preprod](https://apiviz-preprod-sonum.netlify.app/sonum-carto/carte) : [![Netlify Status](https://api.netlify.com/api/v1/badges/1e4ddb5c-9df8-4903-a100-6f8ba054b4e8/deploy-status)](https://app.netlify.com/sites/apiviz-preprod-sonum/deploys)\n\n\nTest websites : \n- [OpenCompaniesData - OpenCompaniesData branch](https://opencompaniesdata.netlify.app/) : [![Netlify Status](https://api.netlify.com/api/v1/badges/cef36329-5ed1-49a6-b567-d3dfd79d9fe8/deploy-status)](https://app.netlify.com/sites/opencompaniesdata/deploys)\n- [apcis-preprod](https://apiviz-preprod-cis.netlify.app/recherche/carte) : [![Netlify Status](https://api.netlify.com/api/v1/badges/abb54fbc-01c6-4c48-9f1b-8ff5b9ef00b1/deploy-status)](https://app.netlify.com/sites/apiviz-preprod-cis/deploys)\n- [apcis-preprod (CIS migration )](https://carrefour-innovations-sociales.fr/recherche) : [![Netlify Status](https://api.netlify.com/api/v1/badges/f5ff305b-52c1-4fb1-be79-17a7494705ac/deploy-status)](https://app.netlify.com/sites/apiviz-preprod-apcis-url-migration/deploys)\n\n\n--------\n\n## DOCUMENTATION \n\nCheck out our brand new Apiviz presentation website : https://apiviz.io\n\nCheck out our brand new documentation website on Github pages : https://co-demos.github.io/apiviz-frontend/\n\n[![DOC_SITE](./documentation/documentation_website.png)](https://co-demos.github.io/apiviz-frontend/)\n\u003c!-- -------- --\u003e\n\n\u003c!-- ![MAP VIEW](./documentation/screenshots/map-view-sonum-03.png) --\u003e\n\n--------\n\n## THE APIVIZ ECOSYSTEM\n\nApiViz is designed to **agnosticaly display data** and provide an engine to deploy a **datavisualisation website** without (too much) pain, not regarding to the service(s) serving and storing the data. \n\nNevertheless to do so an instance of ApiViz must be connected to several external services : one for authentication, one for serving the data, one for storing the static contents (html pages, images...).\n\nThe goal of ApiViz is to **work with any external service** fulfilling those roles, but we developed an **eco-system of open source applications** allowing a complete and free way to deploy such a datavisualisation service. \n\n\u003cbr\u003e\n\n| logo | the open source eco-system ( aka TADATA! ) |\n|    :----:   |          :--- |\n| \u003cimg src=\"./static/logos/logo_apiviz_icon_15.png\" height=\"33\"\u003e | **[Apiviz](https://github.com/co-demos/ApiViz)** as the high-level app for visualisation, a sort of open source CMS for data-visualisation ;   |\n| \u003cimg src=\"./static/logos/logo_solidata.png\" height=\"33\"\u003e | **[Solidata](https://github.com/entrepreneur-interet-general/solidata_frontend)** to \"API-fy\" your data and manage open data projects ; |\n| \u003cimg src=\"./static/logos/logo_auth_microservice.png\" height=\"33\"\u003e | **[TokTok](https://github.com/co-demos/toktok)** for a dedicated authentication service to manage users, JWT, and roles.  |\n| \u003cimg src=\"./static/logos/logo_openscraper_01.png\" height=\"33\"\u003e | **[OpenScraper](https://github.com/entrepreneur-interet-general/OpenScraper)** is a generic web scraper serving the results of the scraping via its API  |\n\n\n--------\n\n## DEVELOPERS\n\nPlease check out our *[guidelines](./GUIDELINES_DEV.md)*\n\nYou can also check the *[development roadmap for future features](https://github.com/co-demos/apiviz-frontend/projects/1)*\n\n--------\n\n## INSTALLATION WALKTHROUGH \n\n--------\n\nBefore anything, if you want to use the whole Apiviz stack as a stand-alone app you need to install **[Apiviz-backend](https://github.com/co-demos/apiviz-backend)** to serve your configuration to the frontend.\n\nOtherwise, if you just want to run Apiviz frontend and plya with it, you just need to add a `.env` file at the root of your cloned repo. The `.env`file must contain the following : \n\n```env\n\n### ENV VARIABLES FOR APIVIZ FRONTEND ### \n### - - - - - - - - - - - - - - - - - ### \n\nAPIVIZ_REPO=/apiviz-frontend/\nDEPLOY_ENV=NETLIFY\n\n### Apiviz backend's preprod server to serrve configs\nNUXT_BACKEND_MODE=preprod\n\n### Apiviz's distant preprod auth server to deal with login and auth\nNUXT_AUTH_MODE=distant_preprod\n\n### Apiviz's UUID to retrieve the corresponding configuration elements \n\n### you can comment / de-comment the pair of following vars of your choice \n### so you'll get the corresponding instance's specific configuration\n\nNUXT_APP_CONFIG_NAME=DEMO_APIVIZ\nNUXT_APIVIZ_UUID=89edbf7d-8b63-4088-ad14-ae6779d7698f\n\n# NUXT_APP_CONFIG_NAME=SONUM\n# NUXT_APIVIZ_UUID=c5efafab-1733-4ad1-9eb8-d529bc87c481\n\n# NUXT_APP_CONFIG_NAME=APCIS\n# NUXT_APIVIZ_UUID=f0a482da-28be-4929-a443-f22ecb03ee68\n\n# NUXT_APP_CONFIG_NAME=TIERS_LIEUX\n# NUXT_APIVIZ_UUID=fd9d4302-bddb-4fb1-8f13-d64dfdb66b91\n\n# NUXT_APP_CONFIG_NAME=PING_CARTO\n# NUXT_APIVIZ_UUID=0278419c-558e-43d5-a4d6-c836afd10445\n\n# NUXT_APP_CONFIG_NAME=CONUMM\n# NUXT_APIVIZ_UUID=2f658fb8-f00a-4b1a-ab73-7064433c98bc\n\n# NUXT_APP_CONFIG_NAME=DECIDER_ENSEMBLE\n# NUXT_APIVIZ_UUID=b8b52f0c-e66f-4018-bc0b-9ec7d17f8ccc\n\n# NUXT_APP_CONFIG_NAME=BFC_TERNUM\n# NUXT_APIVIZ_UUID=e8aff5a7-64b1-46b0-942a-8b16ac53aa3b\n\n# NUXT_APP_CONFIG_NAME=COVID\n# NUXT_APIVIZ_UUID=ebd7910d-5c98-4701-883a-6003a288b37d\n\n# NUXT_APP_CONFIG_NAME=ETALAB_CODES\n# NUXT_APIVIZ_UUID=a44de08d-12a1-4182-a06e-78058928c1e1\n\n# NUXT_APP_CONFIG_NAME=ASSO_ORGUES\n# NUXT_APIVIZ_UUID=3f3fd562-5202-427f-8ba3-f58d5660aabf\n\n# NUXT_APP_CONFIG_NAME=OPEN_CORPORATE_FACTS\n# NUXT_APIVIZ_UUID=305ab50d-c976-44d7-a8f2-a7594155c292\n\n```\n\n## Build setup (with Nuxt)\n\n``` bash\n# install dependencies\n$ npm install\n\n# serve with hot reload at localhost:3001\n# note : gets env vars from .env file\n$ npm run dev\n```\n... then check in your browser : [`localhost:3001`](localhost:3001) (see the `nuxt.config.js` file to know more)\n\u003cbr\u003e\n\nYou can also use those other commands\n``` bash\n# overwrites .env file with env vars from script in package.json\n$ npm run dev-test\n\n# get env vars from .env file but overwrites NUXT_BACKEND_MODE as local backend served with Docker\n$ npm run dev-docker\n\n# build for production and launch server\n$ npm run build\n$ npm start\n\n# generate static project\n$ npm run generate\n```\n\n\n## Build setup (with Docker)\n\n``` bash\n# install / stop / restart\n\n$ make up # run app with Docker\n$ make restart # restart app with Docker\n$ make down # stop app with Docker\n```\n\n... then check in your browser : [`localhost:3333`](localhost:3333)\n\n---------\n\n### Linting\n\n[![JavaScript Style Guide](https://cdn.rawgit.com/standard/standard/master/badge.svg)](https://github.com/standard/standard)\n\nRun dev with Standard lint messages :\n\n```\nnpm run dev-lint\n```\n\n\nLint what could be automatically linted \n\n```\nnpx standard --fix\n```\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fco-demos%2Fapiviz-frontend","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fco-demos%2Fapiviz-frontend","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fco-demos%2Fapiviz-frontend/lists"}