CodeCharta Visualization
CodeCharta by MaibornWolff
Jump to Section
Installation
You can start with Codecharta Visualization on multiple ways:
- Installation as a npm package (Recommended for users)
- Run an operating system specific standalone
- Build it yourself from the github repository (Development)
- Use docker-compose to run this with other needed tools like a Sonar instance or analyzing tools of codecharta-analysis.
- Use our Dockerfile to run the visualization in a container
- Try out the online version
Be aware, that if you are on Apple Silicon, you may run into problems with the standalone and build versions
NPM Package
Make sure you have Node.js (version >=20) installed
For reference: Codecharta-Visualization on NPM
$ npm i -g codecharta-visualization
$ codecharta-visualization
Run a standalone
- Download the correct standalone version for your OS from the latest release page under 'Assets'
- Extract & run the application
MacOS
If you get an error on MacOS because of a missing license, try this apple support article
You may be required to give the application executable rights
If you are using an M1 or similar (arm64) architectures you might need to do additional steps, because the OS might flag the executable as damaged, if it is downloaded and from an unverified developer:
- Remove the 'downloaded' attributes from the OS:
$ xattr -cr codecharta-visualization.app/
Build it yourself
To clone and run this application, you'll need Git and Node.js (version >=20) installed
$ git clone https://github.com/MaibornWolff/codecharta.git
$ cd codecharta/visualization
$ npm install
$ npm run dev
Tasks
After cloning the repository and running the npm
installation as described above, you can use the other available commands and tasks inside the visualization project. You can check all tasks and their functionality inside the package.json
section scripts
.
Build
Build the project in dist/webpack
. The produced files are required if you want to package the application or start the standalone version.
Additional files are copied inside the webpack, which are required to execute the electron standalone via npm (run) start.
Note that the build
command requires unix tools on path, so on Windows add them to it or use the bash shell
$ cd visualization
$ npm run build
Package
Package the electron application to produce the standalone versions for Windows, Linux and MacOS for distribution and testing. The different versions are inside the dist/applications
folder.
Make sure to run the build task beforehand
This process might require administrative rights/sudo depending on the OS
For UNIX-based systems you probably need to install Wine to package the Windows application
The MacOS version usually can't be packaged while using Windows
$ npm run package
$ npm run package:local
For each application there will be a .zip
file inside the dist/packages
folder. Zipping is part of the npm run package
process. You can check the scripts inside script/app*.js
for details.
Dev
$ npm run dev
Start
Make sure to run build beforehand
$ npm run start
Testing
To run tests check out the following tasks:
Unit
Run unit tests in app/
and generate a coverage report in dist/coverage/
.
$ npm run test
$ npm run test:auto
E2E
Run end-to-end tests
$ npm run build
$ npm run e2e
$ npm run e2e:auto
To follow/watch the steps the e2e test is performing, deactivate headless mode in jest-puppeteer.config.js
(and maybe set the slowMo
parameter)
Run in Docker container
You can use this via docker compose or as a standalone container. This section will deal with how to use the visualization as a standalone container. For information on how to use this with docker compose, please check out Docker Getting Started
We assume that you already installed docker, if not, you have to do that before!
To containerize the visualization, please follow the below listed steps.
- Start the docker container:
docker run -d -p 9000:80 codecharta/codecharta-visualization
. This detaches the container and exposes port 80 on the container and port 9000 on the host. - Open
localhost:9000
in your browser and you can already use the visualization, upload cc.json
files and play around!
Code Style
Please check out the DEV_START_GUIDE.