I am new to Aurelia and have some background in javascript. I am using CLI to build and run my project. Dwayne Charrington has guided me on the integration of sigmajs into Aurelia. Thanks, Dwayne!
I have installed sigma into the project through
npm install sigma --save
I have prepended the sigma.min.js to aurelia_project/aurelia.json.
"prepend": [
"node_modules/bluebird/js/browser/bluebird.core.js",
"node_modules/requirejs/require.js",
"node_modules/sigma/build/sigma.min.js"
]
I am using the attached() lifecycle method to get the ts and html to work together for integrating sigmajs as suggested by Dwayne.
-- sigmajs.html
<template>
<require from="./sigmajs.css"></require>
<section>
<div class="col-lg-4 col-lg-offset-4">
<h1> An </h1>
<div id="container1"></div>
</div>
<div class="col-lg-4 col-lg-offset-4">
<button click.delegate="refreshUI()"> Refresh UI </button>
</div>
</section>
</template>
--sigmajs.ts
export class Sigmajs {
s;
refreshUI() {
this.s.refresh();
this.s.graph.nodes().forEach(function(n) {
console.log(n);
});
}
attached() {
this.s = new sigma({
container: 'container1'
});
this.s.graph.addNode({
id: 'n0',
label: 'Hello',
x: 10,
y: 10,
size: 1,
color: '#f00'
}).addNode({
id: 'n1',
label: 'World !',
x: 100,
y: 10,
size: 1,
color: '#00f'
}).addEdge({
id: 'e0',
source: 'n0',
target: 'n1'
});
}
}
-- sigmajs.css
<style>
#container1 {
top: 0;
bottom: 0;
left: 0;
right: 0;
position: absolute;
}
</style>
I am unable to see the graph on the HTML page; even when I click the Refresh UI button. When I click the Refresh UI button, I do see the debug statements in the console corresponding to console.log(n) as
Object { label: "Hello", x: 10, y: 10, size: 1, color: "#f00", id: "n0", read_cam0:size: 8, read_cam0:x: -2.8125, read_cam0:y: 0, cam0:x: 195.1875, 2 more… } app-bundle.js:396:17
Object { label: "World !", x: 100, y: 10, size: 1, color: "#00f", id: "n1", read_cam0:size: 8, read_cam0:x: 2.8125, read_cam0:y: 0, cam0:x: 200.8125, 2 more… } app-bundle.js:396:17
thereby leading me to conclude that I am initializing sigmajs correctly; just not seeing the output (of a graph) on HTML
Thank you in advance for your advice.
Answering my own question
The issue was with the css NOT specifying the appropriate height, width with bootstrap also in picture. The following declaration in sigmajs.css shows the rather simple graph (2 nodes, one edge).
<style type="text/css">
body {
margin: 0;
}
#container2 {
position: absolute;
width: 100%;
height: 100%;
}
</style>
I am not a CSS guy; so this answer, while it works, may need some nuances for the graph to look better.
#LStarky It does not seem necessary to do sigma import. I believe that vendor-bundle.js also has sigma due to prepend
Related
I followed the documentation and Github I did the following steps:
install vue-konva and konva and canvas using npm install vue-konva konva --save and npm install canvas --save.
Created vuekonva.js under plugins folder with below content:
import Vue from 'vue'
import VueKonva from 'vue-konva'
Vue.use(VueKonva)
Added plugins: [ "~/plugins/vuekonva"], under nuxt.config.js
I tried adding under nuxt-config.js but still no luck:
build: {
standalone: true
},
Created a page under pages folder and added code from documenation:
<template>
<div>
<v-stage ref="stage" :config="stageSize">
<v-layer>
<v-text :config="{ text: 'Some text on canvas', fontSize: 15 }" />
<v-rect
:config="{
x: 20,
y: 50,
width: 100,
height: 100,
fill: 'red',
shadowBlur: 10,
}"
/>
<v-circle
:config="{
x: 200,
y: 100,
radius: 50,
fill: 'green',
}"
/>
<v-line
:config="{
x: 20,
y: 200,
points: [0, 0, 100, 0, 100, 100],
tension: 0.5,
closed: true,
stroke: 'black',
fillLinearGradientStartPoint: { x: -50, y: -50 },
fillLinearGradientEndPoint: { x: 50, y: 50 },
fillLinearGradientColorStops: [0, 'red', 1, 'yellow'],
}"
/>
</v-layer>
<v-layer ref="dragLayer" />
</v-stage>
</div>
</template>
<script>
export default {
data () {
return {
stageSize: {
width,
height
}
}
},
mounted () {
if (process.browser) {
this.stageSize.width = window.innerWidth
this.stageSize.height = window.innerHeight
}
}
}
</script>
I get the error:
Must use import to load ES Module:
I tried without plugins and it is throwing the error:
vue.runtime.esm.js:620 [Vue warn]: Unknown custom element: <v-stage> - did you register the component correctly? For recursive components, make sure to provide the "name" option.
found in
Not understanding whats the issue please help.
According to Nuxt documentation some plugins export an ES6 module. I think this is the case for konva node module. I followed the steps you mentioned above. But in the nuxt.config.js file I configured the plugin as follow:
plugins: [
{ src: "~/plugins/vuekonva", mode: 'client' }
],
build: {
transpile: ['konva']
},
After that I replaced the code of your page with the code of konvajs as follows:
<template>
<v-stage :config="configKonva">
<v-layer>
<v-circle :config="configCircle"></v-circle>
</v-layer>
</v-stage>
</template>
<script>
export default {
data() {
return {
configKonva: {
width: 200,
height: 200
},
configCircle: {
x: 100,
y: 100,
radius: 70,
fill: "red",
stroke: "black",
strokeWidth: 4
}
};
}
};
</script>
That is working for me when I link to the page with nuxt-link. but if I refresh the page I get some errors that is maybe for SSR. I am not sure but if you read this documentation you maybe could solve the problem for SSR.
I am trying to render a simple Azure Map in a vue.js single-file component. I can get the map to draw at a specified center and zoom. And draw a line segment exactly where I want it.
But I cannot draw a marker properly. It does draw, but it is seriously south-west from the specified coordinate (which is on the an endpoint of a line segment drawn previously).
Here's a single page Vue.js 'App.vue':
<template>
<div id="myMap"></div>
</template>
<script>
import * as atlas from "azure-maps-control";
export default {
mounted: function() {
this.map = new atlas.Map("myMap", {
center: [-113.666783, 53.806008],
zoom: 7,
view: "Auto",
authOptions: {
authType: "subscriptionKey",
subscriptionKey: "<redacted>",
},
});
let self = this;
//Wait until the map resources are ready.
this.map.events.add("ready", function() {
//Create a data source and add it to the map.
var dataSource = new atlas.source.DataSource();
self.map.sources.add(dataSource);
//Create a line and add it to the data source.
dataSource.add(
new atlas.data.LineString([
[-112.926043, 53.803],
[-113.666783, 53.806],
])
);
//Create a line layer to render the line to the map.
self.map.layers.add(
new atlas.layer.LineLayer(dataSource, null, {
strokeColor: "blue",
strokeWidth: 5,
})
);
//Create an HTML marker and add it to the map.
var marker1 = new atlas.HtmlMarker({
color: "DodgerBlue",
position: [-112.926043, 53.803],
anchor: "bottom",
htmlContent: '<div class="pulseIconNormal"></div>',
popup: new atlas.Popup({
content:
'<div style="padding:10px">Sensor</div>',
pixelOffset: [0, -30],
}),
});
self.map.markers.add(marker1);
//Add a click event to toggle the popup.
self.map.events.add("click", marker1, () => {
marker1.togglePopup();
});
});
}
}
</script>
<style>
#myMap {
height: 100vh;
width: 100vw;
}
.pulseIconNormal {
display: block;
width: 10px;
height: 10px;
border-radius: 50%;
background: blue;
}
</style>
When I looked at DOM for the marker (in Firefox dev tools), this is the style that I see:
transform: translate(-50%, -100%) translate(737px, 235px) rotateX(0deg) rotateZ(0deg);
This isn't coming from CSS, but is in inline. That's the reason, but not the explanation why. It appears the control itself is generating this.
I found the problem. I am using NPM to load azure-maps-control and I had to explicitly add
<style src='azure-maps-control/dist/atlas.min.css'></style>
to the .vue file.
The map div in your code isn't closed properly. Instead of <div id="myMap" /> it should be <div id="myMap"></div>. HTML standards say self closing div's are invalid. Give that a try and see if it helps.
If it doesn't try inspecting the HTML marker DOM to see if any CSS is being appended to it by your app and try adjusting to see if it addresses the issue.
Looking at your code, the HTML marker should be anchored bottom center to its position.
For the same problem with Angular (11), I had to add the azure css file to my angular.json like so:
"styles": [
"src/styles/styles.scss",
"node_modules/azure-maps-control/dist/atlas.min.css"
],
We use some specific layouts to visualize istio's service mesh, and we "Compound nodes" to group nodes of the same service (but different versions).
The problem here is that sometimes one or all of the layouts draws a big compound node that looks like is grouping more nodes than needed.
Look at the next screenshot, it looks like the "reviews" compound node has a lot of nodes, the truth is that the review box only has the top left "v2" and "v1" and the bottom right "v3".
I was thinking of a way to workaround this would be:
Remove the contents of compound nodes (giving them enough space for later)
Layout the remaining nodes
Manually fill the compound nodes (e.g. using a manual vertical layout)
I was wondering whether is there a more simple approach, if not I was thinking on wrapping this idea on a Layout which receives the "real layout" upon creation e.g.
const coseLayout = cy.layout({name: 'cose', ...});
const compoundNodeFixer = cy.layout({name: 'compoundnodefixer', real_layout: coseLayout});
compoundNodeFixer.run();
Update: What we did in the end was to implement something like mentioned above as a new layout. It's not perfect but it works for our use case. The code is public.
Achieving this is quite hard if you need to use a specific layout, as you may have seen a dozen other unanswered questions about node/label overlapping here on StackOverflow.
However there is still the cytoscape-cola.js layout, it provides the needed spacing and has the cool effect of pushing other nodes away. If you can use it, it may just be the right choice for you:
var cy;
var elements = [{
data: {
id: 'M',
parent: 'B'
}
},
{
data: {
id: 'B'
}
},
{
data: {
id: 'H',
parent: 'B'
}
},
{
data: {
id: 'F'
}
},
{
data: {
id: 'H2'
}
},
{
data: {
id: 'T'
}
},
{
data: {
id: 'A'
}
},
{
data: {
id: 'e2',
source: 'M',
target: 'H'
}
},
{
data: {
id: 'e3',
source: 'M',
target: 'F'
}
},
{
data: {
id: 'e4',
source: 'F',
target: 'T'
}
}
]
$(function() { // on dom ready
cy = cytoscape({
container: $('#cy'),
elements: elements,
layout: {
name: 'cola',
infinite: true,
fit: false
}
});
});
#cy {
position: absolute;
left: 1em;
top: 1em;
bottom: 1em;
right: 17em;
border: 1px solid #ccc;
}
html {
font-size: 14px;
font-family: Arial, Helvetica, sans-serif;
}
<html>
<head>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.2.3/jquery.min.js"></script>
<script src="https://unpkg.com/cytoscape#3.2.18/dist/cytoscape.js"></script>
<script src="https://unpkg.com/webcola/WebCola/cola.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/cytoscape-cola#2.2.3/cytoscape-cola.min.js"></script>
</head>
<body>
<div id="cy"></div>
</body>
</html>
Unfortunately, it is not a core layout but an extension layout, you may or may not experience performance enhancement when using them.
I want to set the height of a vue component (to be specific it is this -> https://github.com/jbaysolutions/vue-grid-layout).
The height of which (in vue-grid-layout -> grid-item) should be same as of its parent.
And this also should be only in page load time. So how this can be achieved in vue js?
I don't want to do this using CSS. I need height in pixels. as to vue-grid-layout -> item height needs in pixel initially. as it is resizable, it can be changed afterwards.
it would be easier to provide an accurate answer with some example html (your actual code), but the following should work in general.
export default {
...
data() {
return {
parentHeight: 0
}
},
mounted() {
this.parentHeight = this.$parent.$el.offsetHeight;
}
...
}
So in the mounted lifecycle hook you can read the height of the parent and then set it where ever you need it.
No need for advanced javascript to calculate the height, just use styling:
height: 100%;
Demo:
.parent {
resize: both;
overflow: auto;
height: 100px;
display: block;
width: 100px;
border: 1px solid black;
}
.child {
height: 100%;
background: pink;
}
<div class="parent">
</div>
<div class="parent">
<div class="child">
I'm a child!
</div>
</div>
I found a solution to fix the grid-layout height depending on available space. For that I have used folowing props: max-rows, row-height, margins, autoSize=false
And ResizeObserver which will adjust grid-layout row-height according to available height after window resize. Also be aware that I used some Bootstrap classes for styling
<template>
<div class="flex-grow-1 w-100">
<grid-layout
:layout="layout"
:col-num="colCount"
:maxRows="rowCount"
:row-height="rowHeight"
:autoSize="false"
:is-draggable="true"
:is-resizable="true"
:is-mirrored="false"
:preventCollision="true"
:vertical-compact="false"
:margin="margin"
:use-css-transforms="true"
>
<grid-item
v-for="item in layout"
class="bg-primary"
:x="item.x"
:y="item.y"
:w="item.w"
:h="item.h"
:i="item.i"
:key="item.i"
>
<span class="remove" #click="removeItem(item.i)">x</span>
</grid-item>
</grid-layout>
</div>
</template>
<script lang="ts">
import { defineComponent } from '#vue/runtime-core';
interface GridItem {
x: number;
y: number;
w: number;
h: number;
i: string;
}
interface State {
layout: GridItem[];
index: number;
colCount: number;
rowCount: number;
rowHeight: number;
observer: null | ResizeObserver;
margin: number[];
}
export default defineComponent({
name: 'VideoWall',
data(): State {
return {
layout: [
{ x: 0, y: 0, w: 2, h: 2, i: '0' },
{ x: 2, y: 0, w: 2, h: 4, i: '1' },
{ x: 4, y: 0, w: 2, h: 5, i: '2' },
{ x: 6, y: 0, w: 2, h: 3, i: '3' },
{ x: 8, y: 0, w: 2, h: 3, i: '4' },
],
index: 0,
colCount: 36,
rowCount: 36,
rowHeight: 40,
margin: [5, 5],
observer: null,
};
},
mounted() {
this.observer = new ResizeObserver(this.onResize);
if (this.$el instanceof Element) {
this.observer.observe(this.$el);
} else {
console.log('VideoWall: Failed to bind observer');
}
},
unmounted() {
if (this.observer) {
this.observer.disconnect();
}
},
methods: {
onResize(entries: ResizeObserverEntry[]): void {
this.rowHeight =
Math.floor(entries[0].contentRect.height / this.rowCount) -
this.margin[1];
},
},
});
</script>
I have a working chartist Line chart and I have configured the plugins as suggested in documentations. I don't get any errors when loading the page. Its just that nothing gets reflected on the chart according to plugin. I have added two plugins - they don't show any error and my line chart shows perfectly fine.
But I see no effect of those plugins - tooltip plugin and pointlabel plugin.
And yes they are loaded in the HTML and their css files are also included else would have got errors about plugins not being present.
var options = {
low: 0,
high: 100,
showGridBackground: false,
showArea: true,
axisX: {
showGrid: false
},
axisY: {
},
plugins: [
Chartist.plugins.ctPointLabels({
textAnchor: 'middle',
labelInterpolationFnc: function(value) {console.log("i was called"); return '$' + value}
}),
Chartist.plugins.tooltip({
})
]
};
var m = new Chartist.Line('#myChart', data, options);
Here is simple working example using your code. One thing to watch out for is that the tooltips need additional CSS to display correctly.
https://jsfiddle.net/rxdb576n/1/
var data = {
labels: ["Mon", "Tue", "Wed"],
series: [
[10, 20, 75]
],
}
var options = {
low: 0,
high: 100,
showGridBackground: false,
showArea: true,
axisX: {
showGrid: false
},
axisY: {},
plugins: [
Chartist.plugins.ctPointLabels({
textAnchor: 'middle',
labelInterpolationFnc: function(value) {
console.log("i was called");
return '$' + value
}
}),
Chartist.plugins.tooltip({
})
]
};
var m = new Chartist.Line('#myChart', data, options);
.chartist-tooltip {
opacity: 0;
position: absolute;
margin: 20px 0 0 10px;
background: rgba(0, 0, 0, 0.8);
color: #FFF;
padding: 5px 10px;
border-radius: 4px;
}
.chartist-tooltip.tooltip-show {
opacity: 1;
}
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/chartist/0.11.0/chartist.min.css">
<script src="https://cdnjs.cloudflare.com/ajax/libs/chartist/0.11.0/chartist.min.js"></script>
<script src="https://unpkg.com/chartist-plugin-tooltips#0.0.17"></script>
<script src="https://unpkg.com/chartist-plugin-pointlabels#0.0.6"></script>
<div id="myChart"></div>