I am using the below package
https://www.npmjs.com/package/react-graph-vis
could you please tell me how to stop zoom in and zoom out of all nodes
https://stackblitz.com/edit/react-c9tnhw?file=index.js
here is my code
https://stackblitz.com/edit/react-c9tnhw?file=index.js
const options = {
layout: {
hierarchical: false
},
edges: {
color: "#F0E"
},
nodes: {
fixed: true
},
height: "600px"
};
Your options object should look like:
const options = {
layout: {
hierarchical: false
},
edges: {
color: "#F0E"
},
height: "600px",
interaction: {
zoomView: false
},
};
So just add:
interaction: {
zoomView: false
}
Related
I have embedded a PowerBI report. This is the Javascript with the page setup.
For some reason I don't get a vertical scrollbar in my report. When I open it in the workspace online the scrollbars work just fine. I already tried switching between different 'View' options in PowerBi but that does not seem to make a difference.
<H2>PowerBI</H2>
<p><i>User: {{username}} | AccessLevel: {{access_level}}</i></p>
<div id="reportContainer" style="height: 80vh;"></div>
<script type="text/javascript">
window.onload = function () {
// Get models. models contains enums that can be used.
var models = window['powerbi-client'].models;
var embedConfiguration = {
type: 'report',
id: '{{txtembedreportid}}',
embedUrl: '{{txtreportembed}}',
tokenType: models.TokenType.Embed,
accessToken: '{{txtaccesstoken}}',
settings: {
layoutType: models.LayoutType.Custom,
customLayout: {
pageSize: {
type: models.PageSizeType.Widescreen,
}
},
panes:{
bookmarks: {
visible: false
},
fields: {
expanded: false
},
filters: {
expanded: false,
visible: false
},
pageNavigation: {
visible: true
},
selection: {
visible: true
},
syncSlicers: {
visible: true
},
visualizations: {
expanded: false
}
}
}
};
var $reportContainer = $('#reportContainer');
var report = powerbi.embed($reportContainer.get(0), embedConfiguration);
report.fullscreen();
}
</script>
Try adding the "displayOption" property with value "FitToWidth" in customLayout object, as this option will try to fit the report as per the total available size for the page and will introduce a scrollbar for the remaining part if necessary.
Also change "Widescreen" to "Custom" in pageSizeType object
After all changes, your embedConfiguration will become as following.
var embedConfiguration = {
type: 'report',
id: '{{txtembedreportid}}',
embedUrl: '{{txtreportembed}}',
tokenType: models.TokenType.Embed,
accessToken: '{{txtaccesstoken}}',
settings: {
layoutType: models.LayoutType.Custom,
customLayout: {
displayOption: models.DisplayOption.FitToWidth, // Add "FitToWidth"
pageSize: {
type: models.PageSizeType.Custom, // Change to "Custom"
}
},
panes:{
bookmarks: {
visible: false
},
fields: {
expanded: false
},
filters: {
expanded: false,
visible: false
},
pageNavigation: {
visible: true
},
selection: {
visible: true
},
syncSlicers: {
visible: true
},
visualizations: {
expanded: false
}
}
}
};
Refer docs: https://learn.microsoft.com/en-us/javascript/api/overview/powerbi/custom-layout
I'm trying to use tsParticles as a background to a login page but the mouse event doesn't work when I'm on the login div.
How can I make it work?
Here's my configuration
tsParticles.load('tsparticles', {
background: {
color: '#000000'
},
particles: {
color: {
value: '#CF5C36'
},
opacity: {
value: 0.5
},
lineLinked: {
color: {
value: '#EFC88B'
},
consent: true
}
},
interactivity: {
events: {
onHover: {
mode: ['grab', 'bubble'],
enable: true
}
},
modes: {
grab: {
distance: 200
},
bubble: {
size: 10
}
}
},
preset: 'basic'
});
Here's a sample fiddle of the issue: https://jsfiddle.net/jmfhk0xb/
In the interactivity section, you need to add detect_on: 'window'.
interactivity: {
detect_on: 'window',
events: {
onHover: {
mode: ['grab', 'bubble'],
enable: true
}
},
modes: {
grab: {
distance: 200
},
bubble: {
size: 10
}
}
},
This is my first post. My issue is the following, I have a vuejs app that uses vue-router and one of the components in the vue uses particle.js. I was successfully able to integrate particle.js into my component using $nextTick, however when I added nested routes to the parent component of this said component, particles.js stopped working with no error. The main app is layered as follows:
App.vue:
<template>
<div id="app">
<nav-bar />
<Title />
<router-view />
</div>
</template>
Particle.js is running in the 'title' component.
which is as follows:
<template>
<div id="particles-js"></div>
</template>
<script>
export default {
name: "Title",
mounted() {
require("particles.js");
this.$nextTick(() => {
this.initParticlesJS();
});
},
methods: {
initParticlesJS() {
/* eslint-disable */
particlesJS("particles-js", {
particles: {
number: {
value: 8,
density: {
enable: true,
value_area: 800
}
},
color: {
value: "#2d3bff"
},
shape: {
type: "circle",
stroke: {
width: 0,
color: "#2d3bff"
},
polygon: {
nb_sides: 5
},
image: {
src: "img/github.svg",
width: 100,
height: 100
}
},
opacity: {
value: 0.5,
random: false,
anim: {
enable: false,
speed: 1,
opacity_min: 0.1,
sync: false
}
},
size: {
value: 10,
random: true,
anim: {
enable: false,
speed: 80,
size_min: 0.1,
sync: false
}
},
line_linked: {
enable: true,
distance: 300,
color: "#2d3bff",
opacity: 0.8,
width: 2
},
move: {
enable: true,
speed: 12,
direction: "none",
random: false,
straight: false,
out_mode: "out",
bounce: false,
attract: {
enable: false,
rotateX: 600,
rotateY: 1200
}
}
},
interactivity: {
detect_on: "canvas",
events: {
onhover: {
enable: false,
mode: "repulse"
},
onclick: {
enable: true,
mode: "push"
},
resize: true
},
modes: {
grab: {
distance: 800,
line_linked: {
opacity: 1
}
},
bubble: {
distance: 800,
size: 80,
duration: 2,
opacity: 0.8,
speed: 3
},
repulse: {
distance: 400,
duration: 0.4
},
push: {
particles_nb: 4
},
remove: {
particles_nb: 2
}
}
},
retina_detect: true
});
}
}
};
</script>
<style scoped>
#particles-js {
position: absolute;
z-index: 0;
height: 100%;
width: 100%;
}
</style>
I think this might be an issue with the DOM or with the way components are rendered using nested routing because when I remove the from the main component the particles work fine and when I add it again it doesn't seem to be running. But I'm afraid that it's a little out of my depth for something that was supposed to be a simple project.
Update:
I still don't know how to diagnose this. However, I tried using different routes and when I go into a route that doesn't exist, for example: localhost:8080/#/route_that_doesnt_exist the particles will show up, meaning that it only doesn't work when the page is rendering one of the nested routes. I hope this helps.
I'm trying to create a Highcharts map but I can't get past the #13 error which states that the rendering container can't be found. All my other charts that's not a map chart works and it uses the same container class but I can't get maps to work at all.
Config object that gets passed to the initMapChart function (the map chart uses the same config as the normal charts):
highcharts.config = {
chart: {
type: highcharts.getTypeFromId(graph.type)
},
plotOptions: {
series: {
stickyTracking: false,
events: {
click: function (e) {
this.chart.myTooltip.refresh(e.point, e);
}
}
},
pie: {
cursor: 'pointer',
dataLabels: {
enabled: true,
formatter: function() {
return this.series.isLabelsVisible ? this.y : '';
}
},
showInLegend: true
},
line: {
cursor: 'pointer',
dataLabels: {
enabled: true
}
},
area: {
cursor: 'pointer',
dataLabels: {
enabled: true,
formatter: function() {
return this.series.isLabelsVisible ? this.y : '';
}
}
},
areaspline: {
cursor: 'pointer',
dataLabels: {
enabled: true,
formatter: function() {
return this.series.isLabelsVisible ? this.y : '';
}
}
},
column: {
stacking: false,
cursor: 'pointer',
dataLabels: {
enabled: true,
formatter: function() {
return this.series.isLabelsVisible ? this.y : '';
}
}
},
map: {
mapData: Highcharts.maps['custom/world'],
joinBy: ['name'],
cursor: 'pointer',
dataLabels: {
enabled: true
}
}
},
exporting: {
buttons: {
contextButton: {
enabled: false
}
}
},
toggleModify: false,
title: {
text: ''
},
xAxis: {
categories: null,
labels: {
format: graph.span === 0 && graph.isTime && graph.childTarget === null ? '{value:%Y-%m-%d}' : '{value}'
}
},
yAxis: {
title: {
text: ''
},
labels: {}
},
series: null,
credits: {
enabled: false
}
};
I wait for the series to be created first before I try creating the charts, here is where I also set the renderTo property:
scope.$on('highchartsConfigUpdated', function(e, config) {
initDataType();
bindDataTypes();
var target = element[0].querySelector('.highcharts-target');
config.chart.renderTo = target;
if (scope.graph.type === 6) {
initMapChart(config);
}
else {
initChart(config);
}
});
This function will be run for all charts with the type of 6, which means they're a map chart:
function initMapChart(config) {
console.log(config.chart.renderTo);
new Highcharts.Chart('Map', config, function(chart) {
initLabels(chart);
bindLabels(chart);
});
};
From the console log I get this which should mean that it can in fact find the element:
<div id="chart-b2b2d164-b41c-40fc-a739-00cb1bc074ba" class="highcharts-target"></div>
So I think the issue is rather in the instantiation of the chart itself, how do you create a map chart without using jQuery?
I've read a tutorial about creating DataView with custom comonent for each element from Store. It says about mapping fields of record to components in DataItem, but my question is how to define order in which components will be added to DataItem.
For example, I have such DataItem:
Ext.define('demo.view.CottageItem', {
extend: 'Ext.dataview.component.DataItem',
requires: ['Ext.Label', 'Ext.Array', 'Ext.Img'],
xtype: 'listitem',
config: {
layout: {
type: 'hbox',
align: 'center',
pack: 'start',
},
title: {
flex: 1
},
photo: {
width: '140px',
height: '140px'
},
dataMap: {
getTitle: {
setHtml: 'title'
},
getPhoto: {
setSrc: 'photo'
}
},
styleHtmlContent: true
},
applyTitle: function(config) {
return Ext.factory(config, Ext.Label, this.getTitle());
},
updateTitle: function(newTitle, oldTitle) {
if (oldTitle) {
this.remove(oldTitle);
}
if (newTitle) {
this.add(newTitle);
}
},
applyPhoto: function(config) {
return Ext.factory(config, Ext.Img, this.getPhoto());
},
updatePhoto: function(newImage, oldImage) {
if (oldImage) {
this.remove(oldImage);
}
if (newImage) {
this.add(newImage);
}
},
});
It has layout type hbox, so I want photo to be added first and then title. So that title would be to the right of the photo. How can I achieve this?
Another question is, is there a way to add another container inside this DataItem, in which can be inserted my Label and Image?
UPDATE:
Now my layout looks like this:
|Label(title)| |Image(Photo)|
I want it look like this:
|Image(photo)| |Label(title)|
Finally I understood how to solve my problem, here is my code:
Ext.define('demo.view.CottageItem', {
extend: 'Ext.dataview.component.DataItem',
requires: ['Ext.Label', 'Ext.Array', 'Ext.Img'],
xtype: 'listitem',
config: {
layout: {
type: 'hbox',
align: 'center',
pack: 'start',
},
title: {
style: {
'font-weight': 'bold'
}
},
photo: {
width: '140px',
height: '140px'
},
desc: {},
dataMap: {
getTitle: {
setHtml: 'title'
},
getPhoto: {
setSrc: 'photo'
},
getDesc: {
setHtml: 'desc'
},
},
styleHtmlContent: true,
items: [
{
xtype: 'panel',
itemId: 'photoContainer',
},
{
xtype: 'panel',
layout: {
type: 'vbox'
},
itemId: 'textContainer',
flex: 1,
}
],
},
applyTitle: function(config) {
return Ext.factory(config, Ext.Label, this.getTitle());
},
updateTitle: function(newTitle, oldTitle) {
if (oldTitle) {
this.getComponent('textContainer').remove(oldTitle);
}
if (newTitle) {
this.getComponent('textContainer').add(newTitle);
}
},
applyPhoto: function(config) {
return Ext.factory(config, Ext.Img, this.getPhoto());
},
updatePhoto: function(newImage, oldImage) {
if (oldImage) {
this.getComponent('photoContainer').remove(oldImage);
}
if (newImage) {
this.getComponent('photoContainer').add(newImage);
}
},
applyDesc: function(config) {
return Ext.factory(config, Ext.Label, this.getDesc());
},
updateDesc: function(newDesc, oldDesc) {
if (oldDesc) {
this.getComponent('textContainer').remove(oldDesc);
}
if (newDesc) {
this.getComponent('textContainer').add(newDesc);
}
},
});
Instead of adding components to root, I defined two panels (placeholders) inside DataItem. I access them using getComponent method and add my component to desired place. The only problem here is that order of items added to textContainer is undefined, but in my case I got desired order.
Change sort order of the backend store? I'm not sure about component based DataView, but element-based matches to store sorting.
To properly set (or change) sorting you have to read Store's config sorters property or sort function
Cheers, Oleg