{"id":46405146,"url":"https://github.com/visualize-admin/visualization-tool","last_synced_at":"2026-03-05T12:02:03.191Z","repository":{"id":37764335,"uuid":"212521978","full_name":"visualize-admin/visualization-tool","owner":"visualize-admin","description":"The tool for visualizing Swiss Open Government Data. Project ownership: Federal Office for the Environment FOEN","archived":false,"fork":false,"pushed_at":"2026-03-03T13:48:46.000Z","size":190793,"stargazers_count":39,"open_issues_count":109,"forks_count":5,"subscribers_count":4,"default_branch":"main","last_synced_at":"2026-03-03T14:28:41.082Z","etag":null,"topics":["data","data-visualization","linked-data","open-data","open-government","visualization"],"latest_commit_sha":null,"homepage":"https://visualize.admin.ch","language":"TypeScript","has_issues":true,"has_wiki":null,"has_pages":null,"mirror_url":null,"source_name":null,"license":"bsd-3-clause","status":null,"scm":"git","pull_requests_enabled":true,"icon_url":"https://github.com/visualize-admin.png","metadata":{"files":{"readme":"README.md","changelog":"CHANGELOG.md","contributing":null,"funding":null,"license":"LICENSE","code_of_conduct":null,"threat_model":null,"audit":null,"citation":null,"codeowners":null,"security":null,"support":null,"governance":null,"roadmap":null,"authors":null,"dei":null,"publiccode":null,"codemeta":null,"zenodo":null,"notice":null,"maintainers":null,"copyright":null,"agents":null,"dco":null,"cla":null}},"created_at":"2019-10-03T07:37:51.000Z","updated_at":"2026-03-03T13:48:49.000Z","dependencies_parsed_at":"2023-09-29T07:01:44.346Z","dependency_job_id":"e524e931-2b7b-4e98-ac49-4284d67a1be9","html_url":"https://github.com/visualize-admin/visualization-tool","commit_stats":null,"previous_names":[],"tags_count":199,"template":false,"template_full_name":null,"purl":"pkg:github/visualize-admin/visualization-tool","repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/visualize-admin%2Fvisualization-tool","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/visualize-admin%2Fvisualization-tool/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/visualize-admin%2Fvisualization-tool/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/visualize-admin%2Fvisualization-tool/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/visualize-admin","download_url":"https://codeload.github.com/visualize-admin/visualization-tool/tar.gz/refs/heads/main","sbom_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/visualize-admin%2Fvisualization-tool/sbom","scorecard":null,"host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":286080680,"owners_count":30123729,"icon_url":"https://github.com/github.png","version":null,"created_at":"2022-05-30T11:31:42.601Z","updated_at":"2026-03-05T11:11:57.947Z","status":"ssl_error","status_checked_at":"2026-03-05T11:11:29.001Z","response_time":93,"last_error":"SSL_connect returned=1 errno=0 peeraddr=140.82.121.6:443 state=error: unexpected eof while reading","robots_txt_status":"success","robots_txt_updated_at":"2025-07-24T06:49:26.215Z","robots_txt_url":"https://github.com/robots.txt","online":false,"can_crawl_api":true,"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":["data","data-visualization","linked-data","open-data","open-government","visualization"],"created_at":"2026-03-05T12:02:00.629Z","updated_at":"2026-03-05T12:02:03.182Z","avatar_url":"https://github.com/visualize-admin.png","language":"TypeScript","readme":"# Visualization Tool\n\n\u003c!-- vscode-markdown-toc --\u003e\n\n- 1. [Documentation](#Documentation)\n- 2. [Development Environment](#DevelopmentEnvironment)\n  - 2.1. [Setting up the dev environment](#Settingupthedevenvironment)\n  - 2.2. [Dev server](#Devserver)\n  - 2.3.\n    [Building the Embed script `/dist/embed.js`](#BuildingtheEmbedscriptdistembed.js)\n  - 2.4. [Database migrations](#Databasemigrations)\n- 3. [Versioning](#Versioning)\n- 4. [Developing GitHub Actions](#DevelopingGitHubActions)\n- 5. [E2E tests](#E2Etests)\n- 6. [Visual regression tests](#Visualregressiontests)\n- 7. [GraphQL performance tests](#GraphQLperformancetests)\n  - 7.1. [Automation](#Automation)\n  - 7.2. [How to add or modify the tests](#Howtoaddormodifythetests)\n- 8. [Load tests](#Loadtests)\n  - 8.1. [Automation](#Automation-1)\n  - 8.2. [Local setup](#Localsetup)\n  - 8.3. [Running the tests locally](#Runningthetestslocally)\n  - 8.4.\n    [Recording the tests using Playwright](#RecordingthetestsusingPlaywright)\n- 9. [Authentication](#Authentication)\n  - 9.1. [Locally](#Locally)\n- 10. [Translations](#Translations)\n\n\u003c!-- vscode-markdown-toc-config\n\tnumbering=true\n\tautoSave=true\n\t/vscode-markdown-toc-config --\u003e\n\u003c!-- /vscode-markdown-toc --\u003e\n\n\n## 1. \u003ca name='Documentation'\u003e\u003c/a\u003eDocumentation\n\nPublic documentation is available at https://visualize.admin.ch/docs/.\n\n## 2. \u003ca name='DevelopmentEnvironment'\u003e\u003c/a\u003eDevelopment Environment\n\nTo start the development environment locally, you need a Postgres database.\nThere's a [docker-compose.yaml](./docker-compose.yaml) for this if you have e.g.\n[Docker Desktop](https://www.docker.com/products/docker-desktop) installed.\n\nIn addition, you need to run a [Node.js](https://nodejs.org/) server on your\nmachine or use [Nix](https://nixos.org) with the [shell.nix](./shell.nix) in\nthis directory.\n\n### 2.1. \u003ca name='Settingupthedevenvironment'\u003e\u003c/a\u003eSetting up the dev environment\n\n1. Make sure Docker is running\n2. Start the Postgres database with `docker-compose up`\n3. Run the setup script:\n\n```sh\nyarn setup:dev\n```\n\n### 2.2. \u003ca name='Devserver'\u003e\u003c/a\u003eDev server\n\nOnce the application's set up, you can start the development server with\n\n```sh\nyarn dev\nyarn dev:ssl # If you are working with the login process\n```\n\n\u003e ℹ️ When using the authentication, you need to use https otherwise you'll\n\u003e experience an SSL error when the authentication provider redirects you back to\n\u003e the app after login. You can either remove the trailing 's' in the URL after\n\u003e the redirection, or use the `yarn dev:ssl` command to use HTTPS for the\n\u003e development server. Also, make sure to set the `NEXTAUTH_URL` environment\n\u003e variable to `https://localhost:3000` in your `.env.local` file. If you'd like\n\u003e to use `yarn e2e:ui:ssl` or `yarn e2e:dev:ssl` in order to run tests locally\n\u003e on pages that are protected by authentication please add `E2E_ENV=true` to\n\u003e your environment.\n\n\u003e 👉 In [Visual Studio Code](https://code.visualstudio.com/), you can also run\n\u003e the **default build task** (CMD-SHIFT-B) to start the dev server, database\n\u003e server, and TypeScript checker (you'll need [Nix](https://nixos.org) for that\n\u003e to work).\n\nTo run the application with debugging enabled through VSCode, make sure the dev\nserver is running and then click the \"Run and Debug\" button in the sidebar\n(CMD-SHIFT-D). Then select the \"Launch Chrome\" configuration. This will open a\nnew Chrome window with the dev tools open. You can now set breakpoints in the\ncode and they will be hit.\n\n### 2.3. \u003ca name='BuildingtheEmbedscriptdistembed.js'\u003e\u003c/a\u003eBuilding the Embed script `/dist/embed.js`\n\nCurrently, the embed script is not automatically built when the dev server\nstarts.\n\nRun the following command when you're changing the source file in\n`embed/index.ts`.\n\n```sh\nyarn dev:rollup\n```\n\n\u003e Currently, this only bundles and initializes\n\u003e [iframe-resizer](https://github.com/davidjbradshaw/iframe-resizer) but could\n\u003e be used to render charts without iframes (using\n\u003e [custom elements](https://developers.google.com/web/fundamentals/web-components/customelements)\n\u003e or render to a generic DOM element) in the future.\n\n### 2.4. \u003ca name='Databasemigrations'\u003e\u003c/a\u003eDatabase migrations\n\nDatabase migrations are run automatically when a production build of the app\nstarts. In _development_, you'll have to run them manually:\n\n```sh\nyarn db:migrate:dev\n```\n\n\u003e [!WARNING]\n\u003e\n\u003e On Vercel environments like \"preview\" and \"production\", database migrations\n\u003e are executed. Since all environments are sharing the same database, it means\n\u003e that a database migration executing on 1 database could be disruptive to other\n\u003e preview deployments. For example adding a column to the schema would be\n\u003e disruptive, since other preview deployments would try to remove it (since the\n\u003e column is not yet in the schema).\n\u003e\n\u003e To prevent any problems on preview deployments, we suggest setting up a\n\u003e second, dedicated database for development if you are working on a branch that\n\u003e brings in database changes. If you are using a service like Vercel, you can\n\u003e configure this in the corresponding environment variables. Take care of\n\u003e scoping the new environment variables to the preview branch you are working\n\u003e on. After merging the branch, you can delete the environment variables scoped\n\u003e to the branch.\n\n## 3. \u003ca name='Versioning'\u003e\u003c/a\u003eVersioning\n\nNew versions of `package.json` are built on GitLab CI into a separate image that\nwill be deployed to the integration env.\n\n```sh\nyarn version\n```\n\nThis will prompt for a new version. The `postversion` script will automatically\ntry to push the created version tag to the origin repository.\n\n## 4. \u003ca name='DevelopingGitHubActions'\u003e\u003c/a\u003eDeveloping GitHub Actions\n\nSeveral checks are run on different types of events that happen within the\nrepository, including E2E or GraphQL performance tests. In order to be able to\nbuild and test the actions locally, we use [act](https://github.com/nektos/act),\nwith example mocked event payloads defined in\n[this folder](https://github.com/visualize-admin/visualization-tool/tree/main/act).\n\nAfter [installing](https://nektosact.com/installation/index.html) the library,\nyou can run a given action like e.g.\n`act deployment_status -W \".github/workflows/performance-tests-pr.yml\" -e act/deployment_status.json`,\nmodifying the event payload or adding a new one as needed.\n\n## 5. \u003ca name='E2Etests'\u003e\u003c/a\u003eE2E tests\n\nPlaywright is run on every successful deployment of a branch. Screenshots are\nmade with Percy and sent directly to their cloud service for diffing.\n\nA special [test page](http://localhost:3000/en/__test) shows all the charts that\nare screenshotted. Those charts configurations are kept in the repository.\n\n## 6. \u003ca name='Visualregressiontests'\u003e\u003c/a\u003eVisual regression tests\n\nIt's sometimes useful to run visual regression tests, especially when modifying\nchart configurator or chart config schemas. To make sure that the changes don't\nbreak the existing charts, we implemented a way to do a baseline vs. comparison\ntests.\n\nTo run the tests, you should check out the instruction in\n[e2e/all-charts.spec.ts](https://github.com/visualize-admin/visualization-tool/blob/main/e2e/all-charts.spec.ts)\nfile.\n\n## 7. \u003ca name='GraphQLperformancetests'\u003e\u003c/a\u003eGraphQL performance tests\n\nThe project uses a combination of [k6](https://k6.io) and\n[Grafana](https://grafana.com) with\n[Prometheus](https://k6.io/docs/results-output/real-time/prometheus-remote-write/)\nfor GraphQL performance testing.\n\n### 7.1. \u003ca name='Automation'\u003e\u003c/a\u003eAutomation\n\nTo ensure constant monitoring of the performance of selected GraphQL queries,\nthe performance tests are run\n[once an hour](https://github.com/visualize-admin/visualization-tool/blob/main/.github/workflows/performance-tests.yml)\nagainst each environment of the application. The results are then sent to the\ngovernmental Grafana dashboards.\n\n### 7.2. \u003ca name='Howtoaddormodifythetests'\u003e\u003c/a\u003eHow to add or modify the tests\n\nTo add or modify the performance tests, go to the\n[k6/performance-tests](https://github.com/visualize-admin/visualization-tool/tree/main/k6/performance-tests)\nfolder. The GitHub Action is generated by running the `yarn run github:codegen`\ncommand; be sure to run it after modifying the\n[generate-github-actions.mjs](https://github.com/visualize-admin/visualization-tool/blob/main/k6/performance-tests/generate-github-actions.mjs)\nfile.\n\n## 8. \u003ca name='Loadtests'\u003e\u003c/a\u003eLoad tests\n\nThe project uses [k6](https://k6.io) for load testing.\n\n### 8.1. \u003ca name='Automation-1'\u003e\u003c/a\u003eAutomation\n\nThere is a\n[dedicated GitHub Action](https://github.com/visualize-admin/visualization-tool/actions/workflows/manual-load-test.yml)\nthat runs the API load tests against selected environment. You can investigate\nthe results by going to Actions section in GitHub and checking the summary\nresults.\n\n### 8.2. \u003ca name='Localsetup'\u003e\u003c/a\u003eLocal setup\n\nIn order to run the tests locally, follow the\n[documentation](https://k6.io/docs/get-started/installation/) to install `k6` on\nyour machine.\n\n### 8.3. \u003ca name='Runningthetestslocally'\u003e\u003c/a\u003eRunning the tests locally\n\nTo run a given load test, simply run\n\n```sh\nk6 run k6/script-name.js\n```\n\nreplacing the `script-name` with an actual name of the test you want to run.\nOptionally, you can tweak the configuration of each test by directly modifying\nthe `options` object inside a given script and running `yarn k6:codegen` to make\nthe JavaScript files up-to-date.\n\nFor the GraphQL tests, you'll also need to pass `--env ENV=(test|int|prod)` flag\nto point to the proper environment and\n`--env ENABLE_GQL_SERVER_SIDE_CACHE=(true | false)` to control whether to use\nGQL server-side caching.\n\n### 8.4. \u003ca name='RecordingthetestsusingPlaywright'\u003e\u003c/a\u003eRecording the tests using Playwright\n\nWhile some tests are written manually, other tests come from HAR recordings that\nspan a broad set of actions. In order to record a HAR file and convert it into\nk6 script, use the `testAndSaveHar` inside `e2e/har-utils.ts` file.\n\nSimply import that function inside a given e2e test and replace the regular\n`test` call with `testAndSaveHar`. Note that you need to specify environment\nagainst which to run the test, filename and path to save the file.\n\n\u003e ⚠️ The `testAndSaveHar` function exposes a `baseUrl` property, which needs to\n\u003e be injected into the `page.goto` calls.\n\nAfter the HAR file has been recorded, use\n[har-to-k6](https://k6.io/docs/test-authoring/create-tests-from-recordings/using-the-har-converter/#:~:text=The%20har%2Dto%2Dk6%20converter,to%20export%20recorded%20HTTP%20requests.)\nlibrary to convert the file into k6 script (and put it into the `k6/har`\nfolder). Remember to add `--add-sleep` flag to include pauses between requests.\nAfterwards, edit the `options` variable at the top of the file to set the\nparameters for the test.\n\n\u003e ⚠️ You might want to remove requests to Google afterwards manually, to remove\n\u003e false-positives of blocked requests.\n\n## 9. \u003ca name='Authentication'\u003e\u003c/a\u003eAuthentication\n\nBy default, authentication is provided by the Swiss federal government's eIAM\nthrough ADFS. We use Next-auth to integrate our application with it through a\n[custom Provider](app/auth-providers/adfs.ts). For testing locally and on Vercel\npreviews we use a custom test user account using nextauth credentials provider.\n\n### 9.1. \u003ca name='Locally'\u003e\u003c/a\u003eLocally\n\nYou can use the ref eIAM. ADFS environment variables should be configured in\nyour `.env.local` file.\n\nMake sure to set the `NEXTAUTH_URL` environment variable to\n`https://localhost:3000` and run the dev server with `yarn dev:ssl`.\n\n## 10. \u003ca name='Translations'\u003e\u003c/a\u003eTranslations\n\nTranslations are managed via .po files. Right now, you need to manually pull and\npush the translations. The process goes:\n\n1. Edit components, add `\u003cTrans /\u003e` and `t()`\n2. Run `yarn locales:extract` to write the `en/messages.po`\n3. Edit .po files to add relevant translations for all languages.\n4. Run `yarn locales:compile` to see the changes reflected in local development.\n","funding_links":[],"categories":[],"sub_categories":[],"project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fvisualize-admin%2Fvisualization-tool","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fvisualize-admin%2Fvisualization-tool","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fvisualize-admin%2Fvisualization-tool/lists"}