Chart Builder is a proof-of-concept app to understand the feasibility of using a CSV file (or SPARQL query) to generate and customise a chart or data visualisation.
Chart Builder is an HTML-JavaScript app built with the React-TypeScript stack.
Ensure you have Node installed on your system. Chart Builder has been built against Node v16.13
Ensure you have yarn installed
npm install --global yarn
We use yarn to manage packages. To install the project packages
yarn
Then, to launch a local development instance of Chart Builder, run:
yarn start
To build the app locally:
yarn build
The output directory is build. You can copy the build assets from there to the wwwroot of your webserver
A CI/CD pipeline is configured using Google Cloud Build and deploys the containerised app to this URL:
https://chart-builder-no4vxskx7a-nw.a.run.app/
Automated build is triggered by changes to the main branch of the chart-builder
source code
Dockerfile and nginx.conf files in the chart-builder repo
These files are both located in the root of the chart-builder
repository.
The Dockerfile
specifies a multistage docker image build. The first stage builds the source code and the second stage copies this build output (without the source code and node modules) into a new container image. The resultant image (approx. 45Mb) is then deployed.
The nginx.conf
file is used to configure the nginx web server that runs inside the container.
In the GCP Cloud Run web console
The GCP console can be used to configure the build trigger and container specification
GSSCOGS/idpd-platform project
chart-builder
serviceThe chart builder can be built as a reusable NPM package. Start by choosing a version number, then run:
# set version
export VERSION=<next version>
# use webpack.library.config.js to build the dist/ dir
yarn library
# publish it to NPM
cd dist
yarn publish
# tag it and push the tag to origin
git tag $VERSION
git push --tags