Vuejs-Vue graph v0.8.7: vue-graph - Data visualization library for dashboard implementation in Vue.js

icon
Latest Release: v0.8.7

vue-graph

A vue component library based on the JUI charts available in vuejs.

forthebadge forthebadge forthebadge

Installation

NPM

npm install --save vue-graph

Browser

Just download dist/vue-graph.js and include it in your HTML file:

<script src="https://cdnjs.cloudflare.com/ajax/libs/vue/2.5.16/vue.js"></script>
<script src="https://cdn.rawgit.com/juijs/vue-graph/2216ae2f/dist/vue-graph.js"></script>

ES Modules

Plug-In
import Vue from 'vue'
import VueGraph from 'vue-graph'

Vue.use(VueGraph)
Components
import Vue from 'vue'
import GraphLine3D from 'vue-graph/src/components/line3d.js'
import NoteWidget from 'vue-graph/src/widgets/note.js'
import LegendWidget from 'vue-graph/src/widgets/legends.js'

Vue.component(GraphLine3D.name, GraphLine3D);
Vue.component(NoteWidget.name, NoteWidget);
Vue.component(LegendWidget.name, LegendWidget);

Usage

Unlike other chart components, vue-graph have child nodes in the chart called widgets. The widget is used as an additional function of charts such as chart title, legend, tooltip.

The following is a link you can test with CodePen.

<div id="app">
    <graph-treemap
            :width="800"
            :height="800"
            :text-align="'right'"
            :text-vertical-align="'bottom'"
            :colors="[ '#EC2500', '#ECE100', '#EC9800', '#9EDE00' ]"
            :values="values">
        <note :text="'Treemap Chart'" :align="'left'"></note>
        <tooltip :position="'top'"></tooltip>
    </graph-treemap>
</div>

In the following code, the chart is prefixed with 'graph-' for each type. The widget can be added as a child node of the chart, unlike a chart, was named without a prefix.

The vue-graph can be combined with charts and widgets for a variety of visualizations. This is a very flexible and scalable structure.

var vm = new Vue({
    el: "#app",
    data: {
        values: [
            [ '0', 'Apples', -1 ],
            [ '0.0', 'Anne', 5 ],
            [ '0.1', 'Rick', 3 ],
            [ '0.2', 'Peter', 4 ],
            [ '1', 'Bananas', -1 ],
            [ '1.0', 'Anne', 4 ],
            [ '1.1', 'Rick', 10 ],
            [ '1.2', 'Peter', 1 ],
            [ '2', 'Oranges', -1 ],
            [ '2.0', 'Anne', 1 ],
            [ '2.1', 'Rick', 3 ],
            [ '2.2', 'Peter', 3 ],
            [ '3', 'Susanne', 2 ],
        ]
    }
});

Implemented chart list

There are many charts that have not yet been migrated. We are going to continue.

Props

Common

Name Type Required Watch Default Description
theme String false false classic Supports a total of five themes (classic, dark)
styles Object false false undefined Customize the style of the chart elements you want in key-value format (Classic, Dark)
colors Array, Function false false undefined Options to change the list of colors defined by chart theme (Style Tab)
clip Boolean false false false Option to cut if the drawing element is out of the chart range
format Function false true undefined A callback function that allows you to customize the axis values of the chart
width Number true true undefined The width of the chart
height Number true true undefined The height of the chart
paddingTop Number false false 50 Top padding of the chart
paddingRight Number false false 50 Right padding of the chart
paddingBottom Number false false 50 Bottom padding of the chart
paddingLeft Number false false 50 Left padding of the chart
focusStart Number false false -1 The starting index of the focus area (the criterion is slightly different depending on the type of axis)
focusEnd Number false false -1 The ending index of the focus area (the criterion is slightly different depending on the type of axis)
labels Array false true undefined Label of chart data
values Array false true undefined It is a chart data value, and the format may be different for each chart type

Common (Animation)

Name Type Required Watch Default Description
renderInterval Number false false 200 Rendering interval (ms)
renderHandler Function false false null Callback function that can post-process when rendering a chart
renderStop Boolean false true false Pause or resume chart rendering

Common (X-Y Axis)

Name Type Required Watch Default Description
axisMin Number false false 0 Miniimum value for the chart axis
axisMax Number false false 0 Maximum value for the chart axis
axisStep Number false false 10 Display interval of chart axis value
axisXStyle String false false solid Line style for chart x-axis area (solid, dotted, gradient, none, hidden)
axisYStyle String false false solid Line style for chart y-axis area (solid, dotted, gradient, none, hidden)
axisXPosition String false false bottom Chart x-axis position (bottom, top)
axisYPosition String false false left Chart y-axis position (left, right)
axisReverse Boolean false false false Replace the x and y axis positions
axisFullMode Boolean false false false Draw a chart drawing element full of the axis label area.
axisInterval Number false false 1000 * 60 * 60 It is the label value display interval of the date type (Unit: ms)
axisFormat String, Function false false HH It is the label value display format of the date type
textRotateX Number false false 0 The tilt angle of the x-axis text
textRotateY Number false false 0 The tilt angle of the y-axis text

Props by charts

graph-bar, graph-comparison-bar

Name Type Required Watch Default Description
fixedSize Number false false 0 Fixed width of bar (or height)
minValue Number false false 0 When the value is very small, the minimum size of the bar
barMargin Number false false 2 Margins between bars and bars
barPadding Number false false 1 Inside padding inside the bar
activeIndex Number false true undefined The index of the bar to activate
activeEvent String false false undefined Event type to activate the bar
display String false false undefined Options that display the value of the bar (max, min, all)

graph-bar3d

Name Type Required Watch Default Description
names Array true false undefined Name of the z-axis data key
barPadding Number false false 20 Inside padding inside the bar

graph-stackbar

Name Type Required Watch Default Description
fixedSize Number false false 0 Fixed width of bar (or height)
barMargin Number false false 2 Margins between bars and bars
barPadding Number false false 1 Inside padding inside the bar
activeIndex Number false true undefined The index of the bar to activate
activeEvent String false false undefined Event type to activate the bar
display String false false undefined Options that display the value of the bar (max, min, all)
connectedLine Boolean false false false Options that show the line connecting the bars and bars
fullMode Boolean false false false Option to change to full stack bar
showText Boolean false false false Options to show the percentage value in the bar

graph-rangebar

Name Type Required Watch Default Description
barMargin Number false false 2 Margins between bars and bars
barPadding Number false false 1 Inside padding inside the bar

graph-line, graph-line-dateblock, graph-line-timerange

Name Type Required Watch Default Description
shape String false false normal It is the shape of the line (normal, curve, step)
activeIndex Number false false undefined The index of the line to activate
activeEvent String false false undefined Event type to activate the line
display String false false undefined Options that display the value of the line (max, min, all)
opacity Number false false undefined The transparency of the line (Value between 0 and 1)

graph-line3d

Name Type Required Watch Default Description
names Array true false undefined Name of the z-axis data key
linePadding Number false false 20 Inside padding inside the line

graph-bubble

Name Type Required Watch Default Description
minSize Number false false 5 Minimum size of bubble
maxSize Number false false 30 Maximum size of bubble
showText Boolean false false false Options to show the percentage value in the bubble
activeEvent String false false undefined Event type to activate the bubble

graph-area, graph-area-dateblock, graph-area-timerange, graph-comparison-area

Name Type Required Watch Default Description
shape String false false normal It is the shape of the area (normal, curve, step)
opacity Number false false undefined The transparency of the area (Value between 0 and 1)
borderLine Boolean false false true Show lines on the border of the area

graph-scatter

Name Type Required Watch Default Description
shape String false false circle It is the shape of the scatter (circle, triangle, rectangle, cross)
activeEvent String false false undefined Event type to activate the scatter
display String false false undefined Options that display the value of the scatter (max, min, all)
opacity Number false false undefined The transparency of the scatter (Value between 0 and 1)
size Number false false 7 Size of scatter (Value between 0 and 1)
hideZero Boolean false false false Option to hide scatter when the value is 0

graph-pie

Name Type Required Watch Default Description
shape String false false pie It is the shape of the pie (pie, donut)
activeIndex Number, Array false true undefined The index of the pie to activate
activeEvent String false false undefined Event type to activate the pie
showTextType String false false undefined Options that display the value of the pie (inside, outside)
dataFormat Function false true undefined Pie data format function
showTotalValue Boolean false false undefined Options that show total value in the center when the shape is donut
strokeWidth Number false false 50 When the shape is donut, set the stroke width

graph-treemap

Name Type Required Watch Default Description
showText Boolean false false false Options to show the title in the treemap node
textAlign String false false center Horizontal alignment (center, left, right)
textVerticalAlign String false false top Vertical alignment (top, bottom, middle)
titleDepth Number false false 1 Sets the depth of the tree node to show the title
nodeColor Function false false undefined Set the color of the node to the callback function

graph-equalizer

Name Type Required Watch Default Description
minValue Number false false 0 When the value is very small, the minimum size of the bar
fixedSize Number false false 0 Fixed width of bar (or height)
barMargin Number false false 2 Margins between bars and bars
barPadding Number false false 1 Inside padding inside the bar
maxDivisions Number false false 5 Maximum number of division bars

graph-activebubble

Name Type Required Watch Default Description
gravity Number false false 0.2 Sets the force to pull the bubble
radius Number false false 20 Radius value of the bubble
opacity Number false false 1 Transparency value of the bubble

Props by widgets

note

A widget that can display text in a chart.

Name Type Required Watch Default Description
text String true true Text to display
align String false true center Horizontal alignment (center, left, right)
verticalAlign String true false top Vertical alignment (top, bottom, middle)
dx Number false false 0 x-axis position adjustment value
dy Number false false 0 y-axis position adjustment value
size Number false false undefined Font size
color String false false undefined Font color

tooltip

Widget showing chart element values.

Name Type Required Watch Default Description
names String true true Name to map to value type
position String false false top Vertical alignment (top, bottom, left, right)
showAnchor Boolean false false true Options to display anchor

legends

Widget that represents the chart legend.

Name Type Required Watch Default Description
names String true true Name to map to value type
align String false false center Horizontal alignment (center, left, right)
position String false false bottom Vertical alignment (top, bottom, left, right)
dx Number false false 0 x-axis position adjustment value
dy Number false false 0 y-axis position adjustment value
filter Boolean false false false Options to filter elements of a specific name
colors Array false false undefined Filtering element color by name

guideline

Widget to help you see x-y axis values easily.

Name Type Required Watch Default Description
tooltipX Boolean false false false Guidelines for displaying x-axis values
tooltipY Boolean false false true Guidelines for displaying y-axis values

Events

There are three types of events for the drawing object, outside and inside the axis area.

<div id="app">
    <graph-bar
            :width="600"
            :height="400"
            :axis-min="0"
            :axis-max="50"
            :labels="[ '1Q', '2Q', '3Q', '4Q' ]"
            :values="values"
            :active-event="'click'"
            @click="onClickBar"
            @outside#click="onClickOutside"
            @inside#click="onClickInside">
        <note :text="'Bar Chart (+Event)'"></note>
    </graph-bar>
</div>
<script>
var vm = new Vue({
    el: "#app",
    data: {
        values: [
            [ 10, 5, 5, 5 ],
            [ 40, 10, 10, 10 ],
            [ 30, 30, 30, 30 ]
        ]
    },
    methods: {
        onClickBar: function() {
            console.log(arguments);
            alert("onClickBar");
        },
        onClickOutside: function() {
            console.log(arguments);
            alert("onClickOutside");
        },
        onClickInside: function() {
            console.log(arguments);
            alert("onClickInside");
        }
    }
});
</script>

Common events are shown in the table below.

Outside axis Inside axis Drawing object Description
outside#click inside#click click
outside#dblclick inside#dblclick dblclick
outside#rclick inside#rclick rclick contextmenu
outside#mouseover inside#mouseover mouseover
outside#mouseout inside#mouseout mouseout
outside#mousemove inside#mousemove mousemove
outside#mousedown inside#mousedown mousedown
outside#mouseup inside#mouseup mouseup

Comments

  • How do I use tooltips for bubble cloud chart?
    How do I use tooltips for bubble cloud chart?

    Aug 11, 2020

    How do I use tooltips for bubble cloud chart?

    <graph-bubblecloud
            :width="1055"
            :height="height"
            :padding-top="0"
            :padding-bottom="0"
            :padding-left="0"
            :padding-right="0"
            :values="values"
            :colors="makeColor"
            :styles="styles"
            :render-interval="0"
            @click="onClickEvent">
          <!--<note :text="'Bubble Cloud (Created by luavis)'" :align="'left'"></note>-->
          <tooltip :names="names" :position="'top'"></tooltip>
    </graph-bubblecloud>
    

    this code not working.

    Reply
  • legend filters unchecked at boot
    legend filters unchecked at boot

    Apr 12, 2021

    Hi, Thanks for vue-graph it's really amazing and powerful! I'm currently using it to draw a line-graph with more than 50 lines at the same time. Everything works fine and I have enabled filter prop in legend for each line.

    I would like to have all the lines filters unchecked at the beginnig so the user can enable the lines he wants to see, but by default, all lines are checked and the user has to disable all one at a time, and this is a little bit annoying. Is it possible to enable filter for legends and have them unchecked at boot by default? I tried and looked at other issues bout couldn't find the solution.

    Regards

    Reply
  • Names not working in graph-treemap tooltips
    Names not working in graph-treemap tooltips

    Apr 26, 2021

    They are just ignored, and data.text is used (which is too bad, because I need to shorten the displayed names). Also, would be cool if I could pass properties to svg elements (I'm not sure what "styles" does), so that I can attach events that have, for example, node indexes passed to

    But I guess you know about this issue, since this is what it says in the code :)

    // TODO: 좋은 방법은 아닌 것 같다. ㅠㅠ if(self.$parent.$vnode.tag.indexOf('graph-treemap') == -1) {

    Reply
  • Bump dns-packet from 1.3.1 to 1.3.4
    Bump dns-packet from 1.3.1 to 1.3.4

    May 27, 2021

    Bumps dns-packet from 1.3.1 to 1.3.4.

    Commits

    Dependabot compatibility score

    Dependabot will resolve any conflicts with this PR as long as you don't alter it yourself. You can also trigger a rebase manually by commenting @dependabot rebase.


    Dependabot commands and options

    You can trigger Dependabot actions by commenting on this PR:

    • @dependabot rebase will rebase this PR
    • @dependabot recreate will recreate this PR, overwriting any edits that have been made to it
    • @dependabot merge will merge this PR after your CI passes on it
    • @dependabot squash and merge will squash and merge this PR after your CI passes on it
    • @dependabot cancel merge will cancel a previously requested merge and block automerging
    • @dependabot reopen will reopen this PR if it is closed
    • @dependabot close will close this PR and stop Dependabot recreating it. You can achieve the same result by closing it manually
    • @dependabot ignore this major version will close this PR and stop Dependabot creating any more for this major version (unless you reopen the PR or upgrade to it yourself)
    • @dependabot ignore this minor version will close this PR and stop Dependabot creating any more for this minor version (unless you reopen the PR or upgrade to it yourself)
    • @dependabot ignore this dependency will close this PR and stop Dependabot creating any more for this dependency (unless you reopen the PR or upgrade to it yourself)
    • @dependabot use these labels will set the current labels as the default for future PRs for this repo and language
    • @dependabot use these reviewers will set the current reviewers as the default for future PRs for this repo and language
    • @dependabot use these assignees will set the current assignees as the default for future PRs for this repo and language
    • @dependabot use this milestone will set the current milestone as the default for future PRs for this repo and language

    You can disable automated security fix PRs for this repo from the Security Alerts page.

    dependencies 
    Reply
  • Bump postcss from 7.0.21 to 7.0.36
    Bump postcss from 7.0.21 to 7.0.36

    Jun 15, 2021

    Bumps postcss from 7.0.21 to 7.0.36.

    Release notes

    Sourced from postcss's releases.

    7.0.36

    • Backport ReDoS vulnerabilities from PostCSS 8.

    7.0.35

    7.0.34

    • Fix compatibility with postcss-scss 2.

    7.0.33

    • Add error message for PostCSS 8 plugins.

    7.0.32

    7.0.31

    • Use only the latest source map annotation (by @​emzoumpo).

    7.0.30

    • Fix TypeScript definition (by @​nex3)

    7.0.29

    • Update Processor#version.

    7.0.28

    • Fix TypeScript definition (by @​nex3).

    7.0.27

    • Fix TypeScript definition (by @​nex3).

    7.0.26

    • Fix TypeScript definition (by @​nex3)

    7.0.25

    • Fix absolute path support for Windows (by @​tomrav)

    7.0.24

    7.0.23

    • Update Processor#version.

    7.0.22

    • Add funding link for npm fund.
    Changelog

    Sourced from postcss's changelog.

    7.0.36

    • Backport ReDoS vulnerabilities from PostCSS 8.

    7.0.35

    • Add migration guide link to PostCSS 8 error text.

    7.0.34

    • Fix compatibility with postcss-scss 2.

    7.0.33

    • Add error message for PostCSS 8 plugins.

    7.0.36

    • Backport ReDoS vulnerabilities from PostCSS 8.

    7.0.35

    • Add migration guide link to PostCSS 8 error text.

    7.0.34

    • Fix compatibility with postcss-scss 2.

    7.0.33

    • Add error message for PostCSS 8 plugins.

    7.0.32

    7.0.31

    • Use only the latest source map annotation (by Emmanouil Zoumpoulakis).

    7.0.30

    • Fix TypeScript definition (by Natalie Weizenbaum).

    7.0.29

    • Update Processor#version.

    7.0.28

    • Fix TypeScript definition (by Natalie Weizenbaum).

    7.0.27

    • Fix TypeScript definition (by Natalie Weizenbaum).

    7.0.26

    • Fix TypeScript definition (by Natalie Weizenbaum).

    7.0.25

    • Fix absolute path support for Windows (by Tom Raviv).

    7.0.24

    • Fix TypeScript definition (by Keith Cirkel).

    ... (truncated)

    Commits
    • 67e3d7b Release 7.0.36 version
    • 54cbf3c Backport ReDoS vulnerabilities from PostCSS 8
    • 12832f3 Release 7.0.35 version
    • 4455ef6 Use OpenCollective in funding
    • e867c79 Add migration guide to PostCSS 8 error
    • 32a22a9 Release 7.0.34 version
    • 2293982 Lock build targets
    • 2c3a111 Release 7.0.33 version
    • 4105f21 Use yaspeller instead of yaspeller-ci
    • c8d02a0 Revert yaspeller-ci removal
    • Additional commits viewable in compare view

    Dependabot compatibility score

    Dependabot will resolve any conflicts with this PR as long as you don't alter it yourself. You can also trigger a rebase manually by commenting @dependabot rebase.


    Dependabot commands and options

    You can trigger Dependabot actions by commenting on this PR:

    • @dependabot rebase will rebase this PR
    • @dependabot recreate will recreate this PR, overwriting any edits that have been made to it
    • @dependabot merge will merge this PR after your CI passes on it
    • @dependabot squash and merge will squash and merge this PR after your CI passes on it
    • @dependabot cancel merge will cancel a previously requested merge and block automerging
    • @dependabot reopen will reopen this PR if it is closed
    • @dependabot close will close this PR and stop Dependabot recreating it. You can achieve the same result by closing it manually
    • @dependabot ignore this major version will close this PR and stop Dependabot creating any more for this major version (unless you reopen the PR or upgrade to it yourself)
    • @dependabot ignore this minor version will close this PR and stop Dependabot creating any more for this minor version (unless you reopen the PR or upgrade to it yourself)
    • @dependabot ignore this dependency will close this PR and stop Dependabot creating any more for this dependency (unless you reopen the PR or upgrade to it yourself)
    • @dependabot use these labels will set the current labels as the default for future PRs for this repo and language
    • @dependabot use these reviewers will set the current reviewers as the default for future PRs for this repo and language
    • @dependabot use these assignees will set the current assignees as the default for future PRs for this repo and language
    • @dependabot use this milestone will set the current milestone as the default for future PRs for this repo and language

    You can disable automated security fix PRs for this repo from the Security Alerts page.

    dependencies 
    Reply
  • Bump path-parse from 1.0.6 to 1.0.7
    Bump path-parse from 1.0.6 to 1.0.7

    Aug 10, 2021

    Bumps path-parse from 1.0.6 to 1.0.7.

    Commits

    Dependabot compatibility score

    Dependabot will resolve any conflicts with this PR as long as you don't alter it yourself. You can also trigger a rebase manually by commenting @dependabot rebase.


    Dependabot commands and options

    You can trigger Dependabot actions by commenting on this PR:

    • @dependabot rebase will rebase this PR
    • @dependabot recreate will recreate this PR, overwriting any edits that have been made to it
    • @dependabot merge will merge this PR after your CI passes on it
    • @dependabot squash and merge will squash and merge this PR after your CI passes on it
    • @dependabot cancel merge will cancel a previously requested merge and block automerging
    • @dependabot reopen will reopen this PR if it is closed
    • @dependabot close will close this PR and stop Dependabot recreating it. You can achieve the same result by closing it manually
    • @dependabot ignore this major version will close this PR and stop Dependabot creating any more for this major version (unless you reopen the PR or upgrade to it yourself)
    • @dependabot ignore this minor version will close this PR and stop Dependabot creating any more for this minor version (unless you reopen the PR or upgrade to it yourself)
    • @dependabot ignore this dependency will close this PR and stop Dependabot creating any more for this dependency (unless you reopen the PR or upgrade to it yourself)
    • @dependabot use these labels will set the current labels as the default for future PRs for this repo and language
    • @dependabot use these reviewers will set the current reviewers as the default for future PRs for this repo and language
    • @dependabot use these assignees will set the current assignees as the default for future PRs for this repo and language
    • @dependabot use this milestone will set the current milestone as the default for future PRs for this repo and language

    You can disable automated security fix PRs for this repo from the Security Alerts page.

    dependencies 
    Reply
  • Compile issue
    Compile issue

    Sep 13, 2021

    While run serve in Vue 2 warnings like:

    • "export 'createApp' was not found in 'vue'
    • "export 'default' (imported as 'VueGraph') was not found in 'vue-graph'
    • "export 'h' was not found in 'vue' These warning lead to an error on the browser which show like there is a missing semicolon or something. The error says : Uncaught TypeError: Object(...) is not a function at eval (index.js?aa17:9) at Module../node_modules/vue-graph/bundles/index.js
    Reply
  • Bump tmpl from 1.0.4 to 1.0.5
    Bump tmpl from 1.0.4 to 1.0.5

    Sep 20, 2021

    Bumps tmpl from 1.0.4 to 1.0.5.

    Commits

    Dependabot compatibility score

    Dependabot will resolve any conflicts with this PR as long as you don't alter it yourself. You can also trigger a rebase manually by commenting @dependabot rebase.


    Dependabot commands and options

    You can trigger Dependabot actions by commenting on this PR:

    • @dependabot rebase will rebase this PR
    • @dependabot recreate will recreate this PR, overwriting any edits that have been made to it
    • @dependabot merge will merge this PR after your CI passes on it
    • @dependabot squash and merge will squash and merge this PR after your CI passes on it
    • @dependabot cancel merge will cancel a previously requested merge and block automerging
    • @dependabot reopen will reopen this PR if it is closed
    • @dependabot close will close this PR and stop Dependabot recreating it. You can achieve the same result by closing it manually
    • @dependabot ignore this major version will close this PR and stop Dependabot creating any more for this major version (unless you reopen the PR or upgrade to it yourself)
    • @dependabot ignore this minor version will close this PR and stop Dependabot creating any more for this minor version (unless you reopen the PR or upgrade to it yourself)
    • @dependabot ignore this dependency will close this PR and stop Dependabot creating any more for this dependency (unless you reopen the PR or upgrade to it yourself)
    • @dependabot use these labels will set the current labels as the default for future PRs for this repo and language
    • @dependabot use these reviewers will set the current reviewers as the default for future PRs for this repo and language
    • @dependabot use these assignees will set the current assignees as the default for future PRs for this repo and language
    • @dependabot use this milestone will set the current milestone as the default for future PRs for this repo and language

    You can disable automated security fix PRs for this repo from the Security Alerts page.

    dependencies 
    Reply
  • Bump url-parse from 1.5.1 to 1.5.3
    Bump url-parse from 1.5.1 to 1.5.3

    Oct 5, 2021

    Bumps url-parse from 1.5.1 to 1.5.3.

    Commits
    • ad44493 [dist] 1.5.3
    • c798461 [fix] Fix host parsing for file URLs (#210)
    • 201034b [dist] 1.5.2
    • 2d9ac2c [fix] Sanitize only special URLs (#209)
    • fb128af [fix] Use 'null' as origin for non special URLs
    • fed6d9e [fix] Add a leading slash only if the URL is special
    • 94872e7 [fix] Do not incorrectly set the slashes property to true
    • 81ab967 [fix] Ignore slashes after the protocol for special URLs
    • ee22050 [ci] Use GitHub Actions
    • d2979b5 [fix] Special case the file: protocol (#204)
    • Additional commits viewable in compare view

    Dependabot compatibility score

    Dependabot will resolve any conflicts with this PR as long as you don't alter it yourself. You can also trigger a rebase manually by commenting @dependabot rebase.


    Dependabot commands and options

    You can trigger Dependabot actions by commenting on this PR:

    • @dependabot rebase will rebase this PR
    • @dependabot recreate will recreate this PR, overwriting any edits that have been made to it
    • @dependabot merge will merge this PR after your CI passes on it
    • @dependabot squash and merge will squash and merge this PR after your CI passes on it
    • @dependabot cancel merge will cancel a previously requested merge and block automerging
    • @dependabot reopen will reopen this PR if it is closed
    • @dependabot close will close this PR and stop Dependabot recreating it. You can achieve the same result by closing it manually
    • @dependabot ignore this major version will close this PR and stop Dependabot creating any more for this major version (unless you reopen the PR or upgrade to it yourself)
    • @dependabot ignore this minor version will close this PR and stop Dependabot creating any more for this minor version (unless you reopen the PR or upgrade to it yourself)
    • @dependabot ignore this dependency will close this PR and stop Dependabot creating any more for this dependency (unless you reopen the PR or upgrade to it yourself)
    • @dependabot use these labels will set the current labels as the default for future PRs for this repo and language
    • @dependabot use these reviewers will set the current reviewers as the default for future PRs for this repo and language
    • @dependabot use these assignees will set the current assignees as the default for future PRs for this repo and language
    • @dependabot use this milestone will set the current milestone as the default for future PRs for this repo and language

    You can disable automated security fix PRs for this repo from the Security Alerts page.

    dependencies 
    Reply
  • Bump follow-redirects from 1.9.0 to 1.14.7
    Bump follow-redirects from 1.9.0 to 1.14.7

    Jan 13, 2022

    Bumps follow-redirects from 1.9.0 to 1.14.7.

    Commits
    • 2ede36d Release version 1.14.7 of the npm package.
    • 8b347cb Drop Cookie header across domains.
    • 6f5029a Release version 1.14.6 of the npm package.
    • af706be Ignore null headers.
    • d01ab7a Release version 1.14.5 of the npm package.
    • 40052ea Make compatible with Node 17.
    • 86f7572 Fix: clear internal timer on request abort to avoid leakage
    • 2e1eaf0 Keep Authorization header on subdomain redirects.
    • 2ad9e82 Carry over Host header on relative redirects (#172)
    • 77e2a58 Release version 1.14.4 of the npm package.
    • Additional commits viewable in compare view

    Dependabot compatibility score

    Dependabot will resolve any conflicts with this PR as long as you don't alter it yourself. You can also trigger a rebase manually by commenting @dependabot rebase.


    Dependabot commands and options

    You can trigger Dependabot actions by commenting on this PR:

    • @dependabot rebase will rebase this PR
    • @dependabot recreate will recreate this PR, overwriting any edits that have been made to it
    • @dependabot merge will merge this PR after your CI passes on it
    • @dependabot squash and merge will squash and merge this PR after your CI passes on it
    • @dependabot cancel merge will cancel a previously requested merge and block automerging
    • @dependabot reopen will reopen this PR if it is closed
    • @dependabot close will close this PR and stop Dependabot recreating it. You can achieve the same result by closing it manually
    • @dependabot ignore this major version will close this PR and stop Dependabot creating any more for this major version (unless you reopen the PR or upgrade to it yourself)
    • @dependabot ignore this minor version will close this PR and stop Dependabot creating any more for this minor version (unless you reopen the PR or upgrade to it yourself)
    • @dependabot ignore this dependency will close this PR and stop Dependabot creating any more for this dependency (unless you reopen the PR or upgrade to it yourself)
    • @dependabot use these labels will set the current labels as the default for future PRs for this repo and language
    • @dependabot use these reviewers will set the current reviewers as the default for future PRs for this repo and language
    • @dependabot use these assignees will set the current assignees as the default for future PRs for this repo and language
    • @dependabot use this milestone will set the current milestone as the default for future PRs for this repo and language

    You can disable automated security fix PRs for this repo from the Security Alerts page.

    dependencies 
    Reply
  • Bump lodash from 4.17.15 to 4.17.19
    Bump lodash from 4.17.15 to 4.17.19

    Jul 16, 2020

    Bumps lodash from 4.17.15 to 4.17.19.

    Release notes

    Sourced from lodash's releases.

    4.17.16

    Commits
    Maintainer changes

    This version was pushed to npm by mathias, a new releaser for lodash since your current version.


    Dependabot compatibility score

    Dependabot will resolve any conflicts with this PR as long as you don't alter it yourself. You can also trigger a rebase manually by commenting @dependabot rebase.


    Dependabot commands and options

    You can trigger Dependabot actions by commenting on this PR:

    • @dependabot rebase will rebase this PR
    • @dependabot recreate will recreate this PR, overwriting any edits that have been made to it
    • @dependabot merge will merge this PR after your CI passes on it
    • @dependabot squash and merge will squash and merge this PR after your CI passes on it
    • @dependabot cancel merge will cancel a previously requested merge and block automerging
    • @dependabot reopen will reopen this PR if it is closed
    • @dependabot close will close this PR and stop Dependabot recreating it. You can achieve the same result by closing it manually
    • @dependabot ignore this major version will close this PR and stop Dependabot creating any more for this major version (unless you reopen the PR or upgrade to it yourself)
    • @dependabot ignore this minor version will close this PR and stop Dependabot creating any more for this minor version (unless you reopen the PR or upgrade to it yourself)
    • @dependabot ignore this dependency will close this PR and stop Dependabot creating any more for this dependency (unless you reopen the PR or upgrade to it yourself)
    • @dependabot use these labels will set the current labels as the default for future PRs for this repo and language
    • @dependabot use these reviewers will set the current reviewers as the default for future PRs for this repo and language
    • @dependabot use these assignees will set the current assignees as the default for future PRs for this repo and language
    • @dependabot use this milestone will set the current milestone as the default for future PRs for this repo and language

    You can disable automated security fix PRs for this repo from the Security Alerts page.

    dependencies 
    Reply
  • Bump lodash from 4.17.10 to 4.17.15
    Bump lodash from 4.17.10 to 4.17.15

    Nov 7, 2019

    Bumps lodash from 4.17.10 to 4.17.15.

    Commits

    Dependabot compatibility score

    Dependabot will resolve any conflicts with this PR as long as you don't alter it yourself. You can also trigger a rebase manually by commenting @dependabot rebase.


    Dependabot commands and options

    You can trigger Dependabot actions by commenting on this PR:

    • @dependabot rebase will rebase this PR
    • @dependabot recreate will recreate this PR, overwriting any edits that have been made to it
    • @dependabot merge will merge this PR after your CI passes on it
    • @dependabot squash and merge will squash and merge this PR after your CI passes on it
    • @dependabot cancel merge will cancel a previously requested merge and block automerging
    • @dependabot reopen will reopen this PR if it is closed
    • @dependabot ignore this [patch|minor|major] version will close this PR and stop Dependabot creating any more for this minor/major version (unless you reopen the PR or upgrade to it yourself)
    • @dependabot ignore this dependency will close this PR and stop Dependabot creating any more for this dependency (unless you reopen the PR or upgrade to it yourself)
    • @dependabot use these labels will set the current labels as the default for future PRs for this repo and language
    • @dependabot use these reviewers will set the current reviewers as the default for future PRs for this repo and language
    • @dependabot use these assignees will set the current assignees as the default for future PRs for this repo and language
    • @dependabot use this milestone will set the current milestone as the default for future PRs for this repo and language

    You can disable automated security fix PRs for this repo from the Security Alerts page.

    dependencies 
    Reply
  • Bump websocket-extensions from 0.1.3 to 0.1.4
    Bump websocket-extensions from 0.1.3 to 0.1.4

    Jun 6, 2020

    Bumps websocket-extensions from 0.1.3 to 0.1.4.

    Changelog

    Sourced from websocket-extensions's changelog.

    0.1.4 / 2020-06-02

    • Remove a ReDoS vulnerability in the header parser (CVE-2020-7662, reported by Robert McLaughlin)
    • Change license from MIT to Apache 2.0
    Commits
    • 8efd0cd Bump version to 0.1.4
    • 3dad4ad Remove ReDoS vulnerability in the Sec-WebSocket-Extensions header parser
    • 4a76c75 Add Node versions 13 and 14 on Travis
    • 44a677a Formatting change: {...} should have spaces inside the braces
    • f6c50ab Let npm reformat package.json
    • 2d211f3 Change markdown formatting of docs.
    • 0b62083 Update Travis target versions.
    • 729a465 Switch license to Apache 2.0.
    • See full diff in compare view

    Dependabot compatibility score

    Dependabot will resolve any conflicts with this PR as long as you don't alter it yourself. You can also trigger a rebase manually by commenting @dependabot rebase.


    Dependabot commands and options

    You can trigger Dependabot actions by commenting on this PR:

    • @dependabot rebase will rebase this PR
    • @dependabot recreate will recreate this PR, overwriting any edits that have been made to it
    • @dependabot merge will merge this PR after your CI passes on it
    • @dependabot squash and merge will squash and merge this PR after your CI passes on it
    • @dependabot cancel merge will cancel a previously requested merge and block automerging
    • @dependabot reopen will reopen this PR if it is closed
    • @dependabot close will close this PR and stop Dependabot recreating it. You can achieve the same result by closing it manually
    • @dependabot ignore this major version will close this PR and stop Dependabot creating any more for this major version (unless you reopen the PR or upgrade to it yourself)
    • @dependabot ignore this minor version will close this PR and stop Dependabot creating any more for this minor version (unless you reopen the PR or upgrade to it yourself)
    • @dependabot ignore this dependency will close this PR and stop Dependabot creating any more for this dependency (unless you reopen the PR or upgrade to it yourself)
    • @dependabot use these labels will set the current labels as the default for future PRs for this repo and language
    • @dependabot use these reviewers will set the current reviewers as the default for future PRs for this repo and language
    • @dependabot use these assignees will set the current assignees as the default for future PRs for this repo and language
    • @dependabot use this milestone will set the current milestone as the default for future PRs for this repo and language

    You can disable automated security fix PRs for this repo from the Security Alerts page.

    dependencies 
    Reply
  • Vue error while rendering
    Vue error while rendering

    Sep 29, 2020

    I have this error:

    You are using the runtime-only build of Vue where the template compiler is not available. Either pre-compile the templates into render functions, or use the compiler-included build.

    for the note, legend and tooltip tag, the code is the following:

    <template>
      <div id="dashboard">
        <graph-pie
          :width="500"
          :height="500"
          :padding-top="75"
          :padding-right="75"
          :padding-bottom="75"
          :padding-left="75"
          :values="values"
          :names="names"
          :active-event="'click'"
          :show-text-type="'outside'"
          :data-format="dataFormat"
          :shape="'donut'"
          :colors="['#468ed4', '#f2b82a']"
          :show-total-value="true">
          <note :text="'Space Chart'"></note>
          <legends :names="names"></legends>
          <tooltip :names="names"></tooltip>
        </graph-pie>
      </div>
    </template>
    
    <script>
    import Pie from 'vue-graph/src/components/pie';
    
    import GraphLine3D from 'vue-graph/src/components/line3d';
    import NoteWidget from 'vue-graph/src/widgets/note';
    import LegendWidget from 'vue-graph/src/widgets/legends';
    import TooltipWidget from 'vue-graph/src/widgets/tooltip';
    
    export default {
      name: 'dashboard',
      components: {
        Pie,
        GraphLine3D,
        NoteWidget,
        LegendWidget,
      },
      data() {
        return {
          values: [150, 50],
          names: ['Available', 'Occupied'],
        };
      },
      methods: {
        dataFormat: function(a, b) {
          if (b) return b + 'GB';
          return a;
        },
      },
    };
    </script>
    

    I imported vue-graph in my main.js obviously.

    Reply
  • Colors list for custom control not working
    Colors list for custom control not working

    Apr 5, 2019

    I'm properly passing the colors array. Half the time, the colors will load, the other half will leave them without any color. I have 2 piecharts on one page. The first one loads fine every time. But this second one is buggy like this. See how it's all white below:

    Screen Shot 2019-04-05 at 9 48 08 AM

    This is when it actually works after reloading a few times:

    Screen Shot 2019-04-05 at 9 49 51 AM

    Reply
  • Cannot change background color of chart
    Cannot change background color of chart

    Apr 11, 2019

    There is no option (that I can see) to pass in a color for the background. For example, in a Line Graph, the colors array only seems to be for line colors.

    If I do the following, it does not change the color since it seems like the vue-graph code uses an svg child element. <graph-line-datablock style="background-color:#ff0000"

    Reply
  • Vue Graph IE 11 - babel-polyfill not working
    Vue Graph IE 11 - babel-polyfill not working

    Dec 12, 2018

    Tried to import babel-polyfill but it seems that It doesn't go through vue-graph js, therefore, the entire application breaks on IE 11.

    Is there a way to make this work on IE 11?

    Reply
  • [Vue Graph error]: Can only be used as parent nodes.
    [Vue Graph error]: Can only be used as parent nodes.

    Aug 8, 2018

    It looks like the graph box components can only be used directly under the root element. Why is that and is there any workaround other than creating multiple root elements in our app?

    Error: [Vue Graph error]: Can only be used as parent nodes.

    good first issue 
    Reply
  • Legends Widget is not reactive
    Legends Widget is not reactive

    Oct 10, 2018

    It looks like the legends widget is not checking for changes of its names property. Here is an example:

    <template>
        <section class="container">
            Select your dataset:
    
            <select v-model="dataset">
                <option value="set1">Set 1</option>
                <option value="set2">Set 2</option>
            </select>
    
            <graph-pie
                    :width="600"
                    :height="350"
                    :padding-bottom="100"
                    :values="data[dataset].values"
                    :names="data[dataset].names">
                <legends :names="data[dataset].names"></legends>
            </graph-pie>
        </section>
    </template>
    
    <script>
        export default {
            data() {
                return {
                    dataset: 'set1',
                    data: {
                        set1: {
                            values: [ 10, 5, 5, 5 ],
                            names: [ 'Apple', 'Google', 'MS', 'Facebook' ],
                        },
    
                        set2: {
                            values: [ 7, 10, 12, 3 ],
                            names: [ 'Lufthansa', 'Southwest', 'Iberia', 'Virgin' ],
                        }
                    },
                }
            }
        }
    </script>
    
    <style>
        .container {
            min-height: 100vh;
            display: flex;
            justify-content: center;
            align-items: center;
            text-align: center;
        }
    </style>
    

    When I switch between set 1 and set 2 values are changing but the legend doesn't. Do you have an idea how I can solve this issue?

    Thanks a lot!

    enhancement 
    Reply
  • Widgets not working inside child component
    Widgets not working inside child component

    Oct 10, 2018

    Hey hey, I really like your library, but unfortunately widgets are not working for me. I'm using the ES6 way like this:

    import Vue from 'vue';
    import VueGraph from 'vue-graph';
    Vue.use(VueGraph);
    

    My HTML looks like this:

    <graph-pie
        :width="700"
        :height="400"
        :values="chartData.values"
        :names="chartData.names"
        :show-text-type="'outside'"
        :data-format="chartDataValueFormat">
        <legends :names="chartData.names"></legends>
    </graph-pie>
    

    The legends widget is simply not displayed and also not available in the rendered SVG. Do you have any idea? I'm using the latest version 0.4.1. Thanks!

    Reply