How to trigger mouseover events in vue2vis components - javascript

I have been trying set up a network topology component using visjs, I am using the vue2vis package to do that. I followed the documentation to trigger event every time I click on a node but neither the hoverNode not the selectNode events are giving any console output. Am I doing something wrong. Below is my network component
<template>
<div>
<networking
ref="network"
:nodes="nodes"
:edges="edges"
:options="options"
:events="['selectNode', 'hoverNode']"
#hoverNode="onNodeHovered"
#selectNode="onNodeHovered"
></networking>
</div>
</template>
<script>
export default {
name: "Network",
props: {
jigTopology: {
type: Object,
required: true
}
},
data() {
return {
nodes: [],
edges: [],
options: {
autoResize: true,
width: "100%",
height: "500px",
clickToUse: true,
nodes: {
shape: "circle"
},
edges: {
chosen: {}
},
layout: {
hierarchical: {
enabled: true,
levelSeparation: 100
}
},
interaction: {
hover: true
},
manipulation: {
enabled: true
}
}
};
},
methods: {
onNodeHovered(event) {
console.log("hovered", this.$refs.network.getEventProperties(event));
}
},
beforeCreate() {},
created() {},
mounted() {
(this.nodes = this.jigTopology.nodes),
(this.edges = this.jigTopology.edges);
console.log("nodes", this.nodes);
console.log("edges", this.edges);
}
};
</script>
<style scoped>
.vis-network {
overflow: visible;
}
</style>
The node and edge data is generated by another component and passed as props to this.

Make sure to check options > interactions > hover: true
interaction: {
hover: true
}

Related

How to override the default TailWind preflight setup for img and svg tags?

Based on the official TailWind docs, img and svg (and some other) elements use display: block. Is there a way to override this default behavior so that I change it to display: inline?
My project is quite new, so tailwind.config.js file looks like this:
module.exports = {
content: ["./src/**/*.{js,jsx,ts,tsx}"],
theme: {
extend: {
backgroundImage: {
"search-icon": "url('images/search_black.svg')",
},
colors: {
"ef-purple-100": "#ebdbf8", // ...
},
borderWidth: {
6: "6px",
},
},
},
plugins: [],
};
Can you set in a .css file :
img, svg {
display: inline;
}
Please try with this:
<style module>
img, svg {
display: inline;
}
</style>
module.exports = {
content: ["./src/**/*.{js,jsx,ts,tsx}"],
theme: {
extend: {
backgroundImage: {
"search-icon": "url('images/search_black.svg')",
},
colors: {
"ef-purple-100": "#ebdbf8", // ...
},
borderWidth: {
6: "6px",
},
},
},
plugins: [],
};

How to change the colors of weekends in v-calendar (different colors for saturdays and sundays respectively)

As the title suggests,
I'd like to change the colors of the weekends in my calendar (and different colors for both weekends..)
this is my component for the v-calendar
<div id='app'>
<v-date-picker
title-position="left"
:columns="layout.columns"
:rows="layout.rows"
:is-expanded="layout.isExpanded"
:attributes="attributes"
:masks="{ title: 'YYYY年 MMM' }"
:model-config="modelConfig"
:disabled-dates="disabledDates"
:first-day-of-week = 2
#dayclick = "clickCalendar"
v-model = "selectedDate"
></v-date-picker>
<p v-if="calendarIsClicked">押された日は "{{ selectedDate }}"</p>
and this is the vue js code
<script>
new Vue({
el: '#app',
data() {
return {
calendarIsClicked: false,
selectedDate: null,
attributes: [{
key: "today",
highlight: {
style: {
backgroundColor: "#000",
opacity: 0.5
}
},
}],
disabledDates: {
weekdays: this.fetchClosedDates()
},
modelConfig: {
type: "string",
mask: "YYYY-MM-DD"
}
}
},
methods: {
clickCalendar(day) {
this.calendarIsClicked = true
},
fetchClosedDates() {
return [1, 7]
}
},
computed: {
layout() {
return this.$screens({
// Mobile Layout
default: {
columns: 1,
rows: 1,
isExpanded: true,
},
// PC Layout
lg: {
columns: 2,
rows: 2,
isExpanded: false,
},
});
}
}
})
at the moment, it was possible to disable the dates but I'd like to disable AND add colors to them..
and maybe add some disabled cursor when hovered over them..
Can you inspect HTML element? Just change CSS for column Saturday and Sunday

Highcharts: how to add a custom action on custom added stock-tools button?

Here is an example code that I have: https://jsfiddle.net/delux123/c9tj1ywa/15/.
Clicking over the button Alert, triggers an alert box:
function alertMethod() {
alert("test alert 1");
}
Now I wonder if it's possible to add such a custom actions, using the stock-tools? In the code above, I defined a new button customAnnotation in the stock tools
Highcharts.setOptions({
lang: {
stockTools: {
gui: {
customAnnotation: 'Custom action'
}
},
navigation: {
popup: {
customAnnotation: 'Action config'
}
}
}
});
Highcharts.stockChart('container', {
...
stockTools: {
gui: {
enabled: true,
buttons: [ 'customAnnotation' ],
definitions: {
customAnnotation: {
className: 'highcharts-custom-annotation',
symbol: 'text.svg'
},
}
}
},
navigation: {
bindings: {
customAnnotation: {
start: function(e) {
alert("test alert 2");
}
}
}
},
...
What I want to do is to trigger the alertMethod when clicking on this new custom button (in the stock tools). I wonder, is such a customization possible?
You need to add className and init properies, example:
stockTools: {
gui: {
enabled: true,
buttons: ['customAnnotation'],
definitions: {
customAnnotation: {
className: 'highcharts-custom-annotation',
symbol: 'text.svg'
},
}
}
},
navigation: {
bindings: {
customAnnotation: {
className: 'highcharts-custom-annotation',
init: function(e) {
alert("test alert 2");
}
}
}
}
Live demo: https://jsfiddle.net/BlackLabel/3s25vq8m/
API Reference: https://api.highcharts.com/highstock/navigation.bindings
I resolved this by adding the event on chart load:
chart: {
events: {
load: function() {
document.querySelectorAll('.highcharts-custom-annotation')[0]
.addEventListener(
'click',
alertMethod
)
}
},
},
Full code is here.

Why is vis.js adding an unexpected amount of space between trees?

With regards to the code below, I could not figure out why vis.js added a lot of space between trees.
var options = {
//locale: 'en',
interaction:{hover:true, dragNodes :false},
layout: {
randomSeed: undefined,
hierarchical: {
enabled: true,
parentCentralization: true,
}
},
edges: {
color: {
opacity: 0.4,
}},
};
https://jsfiddle.net/pavn23/zmttds9q/
It has to do with the physics default.
You can change it to false.
You can also config the treeSpacing like so...
physics: false,
/*layout: {
hierarchical: {
enabled: true,
levelSeparation: 190,
nodeSpacing: 250,
treeSpacing: 280,
sortMethod: "hubsize"
}
}*/

How to hide qtip tooltip after some time has passed?

I'm using qtip ( http://craigsworks.com/projects/qtip/ ) to make tooltips. Now I need to show tooltips when the button is pressed and hide tooltips for example when 3 seconds have passed. My current code is not working, tooltips will sometimes go away and sometimes stay...
var self = $("#email");
self.qtip({
content: error,
tip: true,
position: { corner: { target: 'rightMiddle', tooltip: 'leftMiddle' } },
style: 'error',
show: { when: false, ready: true },
hide: { when: { event: 'mousemove' }, delay: 2000, effect: function () { self.qtip("destroy"); } }
});
#newbie, but a response, is to tidy the code and that maybe that's the problem. eg replacing the name of the variable "self" by "this".
$("#email").qtip( {
content: error,
tip: true,
position: { corner: { target: 'rightMiddle', tooltip: 'leftMiddle' } },
style: 'error',
show: { when: false, ready: true },
hide: { when: { event: 'mousemove' },
delay: 2000,
effect: function() { $(this).qtip("destroy"); }
}
});

Categories