imperial-visualizations / vue-components Goto Github PK

The Imperial Visualisations component library for VueJS provides a standardized set of components for educators & students to create powerful interactive educational visualisations.

Home Page: https://www.imperialvisualisations.com

License: BSD 3-Clause "New" or "Revised" License

JavaScript 10.50% Vue 88.17% SCSS 1.32%

education visualisations

vue-components's Introduction

VueJS Components for Imperial Visualisations

The Imperial Visualisations component library for VueJS provides a standardized set of components for educators & students to create powerful interactive educational visualisations.

Installation

In order to use the library in your visualisation you wil need to use npm (or yarn) to install the package using:

npm install --save @impvis/components

into an empty project created using the VueJS CLI. For instructions on how to do that, follow the official VueJS guide

Once installed you will need to activate the component library plugin by adding the following the lines to your main.js file:

import Vue from "vue";
import ImpVis from "@impvis/components"

Vue.use(ImpVis);

And that's it! The full library of Imperial Visualisation components will now be globally registered to your project allowing them to use them anywhere in your project. All Imperial Visualistions components are named beginning with the iv- prefix and for a full reference of the available components please see the project wiki.

Development Setup

For a full guide to how to develop new components please follow the contributing guide.

Licensing

We are currently licensed under the BSD Clause 3 license which is an open-source license which permits anyone to modify and distribute this libary for any purpose so long as original attribution is applied and a copy of the license is included in any derivatives. For more details please follow our license.

This readme was last updated on 1st July 2020.

vue-components's People

Contributors

Stargazers

Watchers

Forkers

cclewley benrw freyaxh puredbest darrenlean dtorrenp krammyt xzhenghe shahbanno jhc4318 hamz1221

vue-components's Issues

Props for iv-visualization have bad names

For iv-visualization the props to do with the grid column and rows have poor names.
Consider renaming :
gridColumnHeight -> gridCornerHeight
gridColumnWidth -> gridCornerWidth

Loading spinnner size options

It would be nice if a prop existed on the loading spinner option to spawn in a smaller and/or larger variant the default size. For example a smaller version could then be easily embedded in buttons for when there is a loading content element or to indicate that an operation is in progress but not completed yet.

Event emit is not working properly on playground

Events emitted in "Event" section in "Inspect - Vue" but the events are not showing up in the "Events" section of playground

Play/Pause Button resize issue

Play pause button is currently using vw/vh for it's sizing which means that the button can become extremely small on narrow devices! We should use rem and em for this instead!

Allow hotspots positions to be rearranged by the user at run time

Add support for Hotspots to be dragged around to different positions and potentially even undocked into windows such as those used by the guidance system by the visualisation user. This is to make it possible for the user to move the hotspots around even in the case where there is a visual glitch and the location specified by the developer doesn't work properly

Currently using svg-loader to bundle SVGs directly using webpack as opposed to serving on their own

When setting the width of iv-pane resize doesn't work correctly

loading bar now shown fully below 400ish px width

when the bar shooter than around 400px it no longer shows full width might be an issue for someone on a small screen

ProgressSlider affects global html,body tags

Inside of the ProgressSlider component there is styling which is applied to the body and html tags to turn them into centered flex boxes. This has two issues, firstly aims to conflict with the styles set out in the layouts and secondly because the progressslider styles are inside a scoped slot they don't actually get applied anywhere at all because a vue instance can only control up to the div in which it is mounted in. Now although this seems fine, it is slightly misleading code and thus should be fixed by someone.

style binding on undefined div

style binding on div doesn't work as the div is not yet mounted when the style binding computed property is run as it requires access to the width of a div which isn't mounted.

Blurry text in sidebar on Linux

In current build when using Linux (Ubuntu 20.04) on Firefox 82, text present in the sidebar is blurry.
This is not seen on Chrome using the same operating system. The cause of this is linked to the drop-shadow filter effect currently being used, when substituted for a box-shadow this bug disappears. Of course as box-shadow is not as visually striking as drop-shadow, we would rather have the drop shadow working if at all possible.

Potential causes for this problem could be a bug with Firefox 82/ current Linux Intel GPU drivers, or it could be potentially an artifact of LCD smoothing (see: https://stackoverflow.com/questions/44897652/font-looks-blurry-on-firefox).

Please feel free to investigate, I have attached an image of the blurry effect:

FixedHotspots moving when not supposed to

When width of side pane is larger than default, opening a toggle hotspot in the bottom position, causes the fixed hotspot in the top right to be shifted to the right and the page scrolls.

Create a series of layout components for the MainStage

As of the current version of the site we have a set of "Hotspot" components which allow developers to put content such as graphs or supplemental text in nice well defined locations. We do not however currently have a nice system for laying out the core content present in the main stage of the visualization and it would be great to have these.

Some components that could fit into this mold could be based on CSS grid:

A 2x2 grid for placing in four different animated items
A center spot component that a single graph/plotly/p5/canvas element directly in the centre of the screen
A "main & stack" layout featuring a single element taking up 3/4 of the horizontal space and then a vertical stack of smaller sub elements on the right/left hand side

(I will attach an image of these ideas in due course)

Pane scroll issue

IV-pane component does not scroll independently from the mainstage so text overflows out of pane.

Implement loading bar as default on template

Window resize causes sidebar to shrink below minimum size

When the browser window is resized with a sidebar open, if the window is shrunk to a horizontal width that is below the minimum-width the pane gets stuck. This is because the pane is permanently below the minimum width that it is supposed to be and thus any onClick events on the drag spot of the pane get cancelled.

Potential fixes for this bug could be:

Automatically hide/disable the sidebar if the browser window is too small to display it
Change the way the sidebar is displayed using media queries, so that when the browser window is too small the pane becomes full screen

Transparency doesn't work for ToggleHotspot

Transparency works for the iv-fixed-hotspot component but not iv-toggle-hotspot component.

Change iv-playbutton to use more standard event name

Other components are not using the iv prefix for their events and looking around it seems we should be relatively safe from clashing with HTML DOM events provided we use appropriate caution