rmi-pacta / pacta-dashboard-svelte Goto Github PK

This is a demonstrative project, showing what a PACTA dashboard in Svelte might look like.

Home Page: https://rmi-pacta.github.io/pacta-dashboard-svelte/

JavaScript 76.62% TypeScript 2.95% HTML 0.20% CSS 3.27% Svelte 16.52% Dockerfile 0.45%

pacta-dashboard-svelte's Introduction

pacta-dashboard-svelte

This is a demonstration of a dashboard for the Pacta project using Svelte, SvelteKit, Vite, TypeScript, Tailwind and Skeleton UI.

Developing

You will need to have Node.js installed on your machine. You can download it from nodejs.org.

First, install the dependencies:

npm install # or pnpm install or yarn

Then start a development server:

npm run dev

# or start the server and open the app in a new browser tab
npm run dev -- --open

This project uses Vite, which is a build tool that aims to provide a faster and leaner development experience for modern web projects. It's configured in vite.config.js.

Building

To create a production version of your app:

npm run build

You can preview the production build with npm run preview.

To deploy your app, you may need to install an adapter for your target environment.

pacta-dashboard-svelte's People

Contributors

Watchers

pacta-dashboard-svelte's Issues

deps: adapt to `d3` version 7

It seems that old versions of d3, in particular d3-color, have a pretty severe security dependency.
Unfortunately, we can't just update directly to d3@7 as some of the breaking changes to affect and break out code here.

Will need to consider carefully the version bump, and determine how to adjust the VolTraj and TechMix plotting code to adapt to this new dependency.

Relates to #5, #6, #7 and https://github.com/RMI-PACTA/pacta-dashboard-svelte/security/dependabot/1

FYI @cjyetman @AlexAxthelm this might also be an issue in https://github.com/RMI-PACTA/pacta.interactive.plot and https://github.com/RMI-PACTA/pacta.portfolio.report but would never be caught as there is no packages.json file in that repo for dependabot to check automatically.

feat: handle cases when parameter choices yield no plot in an elegant way

Currently (for techmix but it will be implemented for other plots too) when the parameter choice yields no data an empty white rectangle is drawn in the div. This is not informative for the user. We should come up with a way to inform the user that the selection they made yields no data in an elegant way.

Best to do this once the plots are wired up with all selectors and we do it consistently for all plots.

AB#11900

style: deal with Linter errors

The linter is currently failing: https://github.com/RMI-PACTA/pacta-dashboard-svelte/actions/runs/10422846547/job/28868359633?pr=28

It seems like lots of our JavaScript code has various issues with it (variables defined but never used, etc.)

We should tidy up our JavaScript code, and ideally ensure that the Linter on CI passes

AB#11699

feat: Decide if we want the "Go!" button for selection of sector and asset class in every case

See:

I think it makes sense to have the Go! button on the landing page, when nothing is shown yet. However in subsequent pages, once there is data, it seems like it is most intuitive to just adjust the selectors and have the changes render in real time.

To be discussed/ decided with hodie, Nayra, Nick, etc.

feat: Configure Azure WebApp deployment workflow

We might want to do this? Seems like an easy enough way to set-up CD for the app.
FYI @AlexAxthelm

https://github.com/RMI-PACTA/pacta-dashboard-svelte/new/main?filename=.github%2Fworkflows%2Fazure-webapps-node.yml&workflow_template=deployments%2Fazure-webapps-node

ci/cd: add unit tests

bug: serving the application using `vite` results in warning about ES modules in `packages.json`

feat: `sector_view.svelte` probably should not have scenario names hard-coded in selector layout

          NB: I wonder if it's possible to generate these selectors programmatically. As it stands, the dashboard would only work for 2023 data, and not be generalizable to different years which is not ideal.

Originally posted by @jdhoffa in #28 (comment)

feat: remove light/dark mode

This dashboard will eventually be served within the PACTA WebApp.

As far as I can tell, there will be no light/dark mode in this WebApp, so I think it doesn't make so much sense to have it in the dashboard (will probably be a bit awkward). Also having two styles would make it much trickier to align the WebApp and Dashboard style.

ci/cd: add GH action to automate running of tests and checks

Depends on #22