Migrate vue2 to vue3

[s-egge]

TODO

• [x] Fix map
  • Chart width bug (possibly a bad reference to this.map, see notes below)
  • [x] Building outline colors
• [x] Chart migration (ChartJS and vue-chartjs)
• [x] ElementPlus (don't forget to check mobile size and both Firefox and Chrome browsers)
  • [x] Navbar
  • [x] FAQ
  • [x] SideView
  • [x] Buildings
  • [x] Buildings Page
  • [x] Individual building page
  • [x] Campaigns
  • [x] Current Campaigns (may need to add a test campaign to see this)
  • [x] Past Campaigns
  • [x] Individual Campaign Page
  • [x] Map
  • [x] Building popup
• [x] SASS Warnings
• [x] Before Merging, change .env.development API back to normal

[brandovlee]

Before updating Vue-Chartjs from v3 to v4, there was a console error when attempting to display the graph: "Uncaught TypeError: createElement is not a function." This error occurs because Vue-Chartjs v3 does not support Vue3. Vue-Chartjs v4/v5 both support Vue3 so we'll have to upgrade. This article could be useful: Vue-Chartjs Migration Guide

[s-egge]

The chart is now visible, but has some pretty big formatting issues still. The chart on the small map view has a bug where the width keeps expanding and the canvas exceeds max size, but that seems like it's a map.vue issue and not a chart issue.

Changes

• the {chartType}.js files need to me migrated to Vue components, based on the migration guide above
• a date/time adapter was added (luxon and chartjs-adapter-luxon), which translates the milliseconds into the formatting we request. Here is the Luxon repo for reference
• We need to use ESM for Chartjs v4 and vue-chartjs v5

We'll need to go through all of the chart options and update them to the new syntax as needed and fix the formatting options on the chart above. The Edit Block Modal is broken right now, so we can't test different time frames or multiple time periods until that's fixed

[s-egge]

ChartJS Linechart styling fixed (dev v. prod):

Firefox

Chrome

[brandovlee]

style-variables.scss changes

Before vs After

Issue The style-variables.scss file in the Energy Dashboard serves a dual purpose: it defines styling variables for global use while also overriding Element UI/Plus variables. The variables with leading hyphens (--) are specifically used to override Element UI/Plus default styles. Removing these hyphens caused the styles to revert to the default Element UI/Plus theme (blue), as shown in the screenshot.

Changes I broke up the variables into three groupings:

• Global Variables: Variables that are specifically called in the Vue components
• Element Plus Override Variables: Variables that aren't explicitly called in the Vue components, but are needed for certain Element Plus elements. (Used this Documentation)
• CSS Override Variables: For these variables, Element Plus is using CSS instead of SASS variables meaning we have to override using :root instead of @forward.

[brandovlee]

Some buildings seem to lack a name resulting in a blank tooltip when hovering on the map.

Key Things to Note:

• The current dashboard does not share this issue
• There is a direct correlation between buildings that are effected by this issue and buildings with no name in the API response (see pictures: top picture has issue of blank tooltip which can be attributed to the name tag missing)

[brandovlee]

Most documentations recommend not using $parent because it makes code less readable and harder to debug. Going forward we should consider removing references to $parent, and instead, use props. This is important to consider when transitioning the barchart.js into a vue component as it has similar characteristics to the linechart component.