Vuesalize
Visit our interactive docs page!
What's the point?
Building interactive visualizations on the web can be hard, and it can be even harder when you would like to leverage
existing visualization libraries inside of a Vue.js project. The goal of Vuesalize is to simplify this process by providing
a set of chart components (and a couple others) that are commonly used in building interactive visualizations on the web. The
charts are built using a combination of Vue.js
and D3.js. The main rationale for this approach is to fully embrace the Vue paradigm and move the SVG
definitions to the template (HTML), which allows Vue to handle creating and removing elements on the page. This is analogous
to the "enter/update/exit" strategy used in D3 but specifically taking advantage of the virtual DOM. By building charts where
the SVG is defined in Vue's template, we can not only send down props to update the chart, but can also emit events on
interactions (e.g. click, mousover, etc.) and offer scoped slots for custom tooltips!
Installation
Any Vue.js based project will be able to take advantage of this library. The library is currently available on npm, and it is
possible to use it with Vue CLI (recommended) or directly with the CDN version in a <script> tag.
Vue CLI
The steps to use is it in a project created using the Vue CLI are as follows:
- Install from npm using
npm install vuesalize - In
main.js, add the components that are going to be used in the project. Here is an example below for a project using theBaseLegendandLoaderSpinningcomponents
import LoaderSpinning from 'vuesalize'
import BaseLegend from 'vuesalize'
import 'vuesalize/dist/vuesalize.css'
Vue.use(LoaderSpinning, BaseLegend)- Start using the components in templates. For example, if the
BaseLegendandLoaderSpinningcomponents were going to be used in a defaultApp.vuefile, this is how it would be setup:
<template>
<div id="app">
<BaseLegend :legend-data="sampleLegendData"></BaseLegend>
<LoaderSpinning></LoaderSpinning>
</div>
</template>
<script>
export default {
name: 'App',
data() {
return {
sampleLegendData: [
{name: 'finance', color: 'red'},
{name: 'accounting', color: 'blue'}
],
}
}
}
</script>
<style>
#app {
font-family: Avenir, Helvetica, Arial, sans-serif;
-webkit-font-smoothing: antialiased;
-moz-osx-font-smoothing: grayscale;
text-align: center;
color: #2c3e50;
margin-top: 60px;
}
</style>CDN
It is quite simple to get started with the CDN. The vuesalize javascript
and css files need to be linked (lines 5 and 7),
and the components that will be used must be declared using Vue.use() (line 16). It is also necessary to link the
official Vue package (line 6) before vuesalize since it relies on base Vue.
<html lang="en">
<head>
<meta charset="utf-8">
<title>Browser test</title>
<link rel="stylesheet" href="https://unpkg.com/[email protected]/dist/vuesalize.css">
<script src="[email protected]_dist_vue.js"></script>
<script src="https://unpkg.com/[email protected]/dist/vuesalize.umd.min.js"></script>
</head>
<body>
<div id="app">
<loader-spinning></loader-spinning>
<base-legend :legend-data="testlegend"></base-legend>
</div>
<script>
Vue.use('loader-spinning', 'base-legend')
new Vue({
el: '#app',
data() {
return {
sampleLegendData: [
{name: 'finance', color: 'red'},
{name: 'accounting', color: 'blue'}
],
}
}
})
</script>
</body>
</html>Copyright 2021 MITRE Corporation. Approved for Public Release - Distribution Unlimited. Case #21-0751