How to stay only edges between two nodes? - vis.js

I have follow graph. I need to stay only ages that placed between two nodes Company 5 and Company 7 in my example. Like:
The problem that I can't find any examples how to do it. Could anybody help me?
The live example: https://jsfiddle.net/5ntzqafv/
// create an array with nodes
var nodes = new vis.DataSet([
{id: 1, label: 'Company 1', group: "company", },
{id: 2, label: 'Mike', group: "owner"},
{id: 3, label: 'David', group: "founder"},
{id: 4, label: 'Company 2', group: "company"},
{id: 5, label: 'Company 3', group: "company"},
{id: 6, label: 'Company 4', group: "company"},
{id: 8, label: 'Company 5', group: "company", borderWidth: 4, color: { border: '#077eb8' }, font: { size: 16},},
{id: 9, label: 'Company 6', group: "company"},
{id: 10, label: 'Company 7', group: "company", borderWidth: 4, color: { border: '#077eb8' }, font: { size: 16},},
{id: 11, label: 'Company 8', group: "company"},
{id: 12, label: 'Company 9', group: "company"}
]);
// create an array with edges
var edges = new vis.DataSet([
{from: 1, to: 2},
{from: 1, to: 3},
{from: 2, to: 11},
{from: 3, to: 4},
{from: 4, to: 3},
{from: 2, to: 8},
{from: 3, to: 6},
{from: 3, to: 5},
{from: 4, to: 9},
{from: 7, to: 4},
{from: 7, to: 12},
{from: 10, to: 12},
{from: 9, to: 12},
{from: 4, to: 10}
]);
// create a network
var container = document.getElementById("mynetwork");
var data = {
nodes: nodes,
edges: edges
};
var options = {nodes: {
shape: "box",
widthConstraint: {
maximum: 200
}
}};
var network = new vis.Network(container, data, options);

You can just use some simple algorithms to search paths in graphs, like BFS.
Algorithm is described here: https://en.wikipedia.org/wiki/Breadth-first_search
My implementation: https://jsfiddle.net/alexey_kuldoshin/3svmqujz/74/
function getPath(graph, from, to) {
let queue = [ from ];
let p = {};
p[from] = -1;
while (queue.length > 0) {
let v = queue.shift();
if (v == to) {
break;
}
graph[v].forEach(edge => {
if (!(edge in p)) {
p[edge] = v;
queue.push(edge);
}
});
}
let ans = [];
while (to != -1) {
ans.push(to);
to = p[to];
}
console.log(ans);
return ans;
}

Related

unable to access reactive nested object returned by useFetch in <script setup> but i am able to access in the html

So I am trying to create a flow where there is a form, when they user modifies the form useFetch is triggered and the results on the page update. things are mostly working well i am able to access the currentPokemon variable within the html and reactivity is working great. The issue is that I am trying to access parts of currentPokemon from within the so that the chart i define will also be reactive.
The graph_data show in the below is in the currentPokemon object, but i cant access it from within <script setup>
<script setup>
import { ref } from 'vue'
import {
Chart as ChartJS,
CategoryScale,
LinearScale,
PointElement,
LineElement,
Title,
Tooltip,
Legend
} from 'chart.js'
import { Scatter } from 'vue-chartjs'
ChartJS.register(LinearScale, PointElement, LineElement, Tooltip, Legend)
const units = ref('METRIC')
const friction = ref(1)
const payload = ref(1)
const distance = ref(1)
const time = ref(1)
const gearRatio = ref(1)
const motionProfile = ref(0.25)
const conservatism = ref(1.5)
const stage = ref('DEFAULT')
const options = {
responsive: true,
maintainAspectRatio: true
}
const { data: currentPokemon } = await useFetch(`http://localhost:3000/`, {
method: "POST",
body: {
unit_system: units,
motion_profile: motionProfile,
move_time_sec: time,
move_distance_deg: distance,
friction: friction,
payload: payload,
gear_ratio: gearRatio,
safety_factor: conservatism,
be_stage: stage,
manufacturers: ["Bosch"],
motor: "DEFAULT"
}
})
console.log(typeof(currentPokemon))
console.log(currentPokemon)
console.log(currentPokemon.graph_data)
const test = ref(currentPokemon.value)
console.log("test")
console.log(typeof(test))
console.log(test.graph_data)
const data = ref({
datasets: [
{
label: 'Accel Profile 0.25 User',
borderColor: 'red',
backgroundColor: 'red',
borderWidth: 1,
pointRadius: 0,
pointHoverRadius: 5,
// tension: 0,
showLine: true,
fill: false,
data: [
{x: user_graph.x[0], y: user_graph.y[0]},
{x: user_graph.x[1], y: user_graph.y[1]},
{x: user_graph.x[2], y: user_graph.y[2]},
{x: user_graph.x[3], y: user_graph.y[3]}
]
}
]
})
here is the console output
✔ Vite server hmr 6 files in 54.932ms 13:56:25
object 13:56:25
[Vue warn]: Unhandled error during execution of setup function 13:56:25
at <App>
RefImpl { 13:56:25
__v_isShallow: false,
dep: undefined,
__v_isRef: true,
_rawValue: {
motormatch: {
'1': [Object],
'3': [Object],
'5': [Object],
'7': [Object],
'10': [Object]
},
stage_details: { DEFAULT: [Object] },
motioncalcs: {
'0.5': [Object],
'0.33': [Object],
'0.1': [Object],
'0.25 User': [Object]
},
graph_data: {
xlabel: 'Time (s)',
ylabel: 'Velocity (deg/s)',
title: 'Move Profiles',
profiles: [Array]
}
},
_value: {
motormatch: {
'1': [Object],
'3': [Object],
'5': [Object],
'7': [Object],
'10': [Object]
},
stage_details: { DEFAULT: [Object] },
motioncalcs: {
'0.5': [Object],
'0.33': [Object],
'0.1': [Object],
'0.25 User': [Object]
},
graph_data: {
xlabel: 'Time (s)',
ylabel: 'Velocity (deg/s)',
title: 'Move Profiles',
profiles: [Array]
}
}
}
undefined 13:56:25
test 13:56:25
object 13:56:25
undefined
Again the goal is to have the paramater passed to the graph be reactive based on the value of currentPokemon.graph_data. I have tried using let to declare new variables and access graph_data that way, which did allow me to get the value of graph_data but it was no longer reactive.
console.log(typeof(currentPokemon))
let res_data1 = currentPokemon.value
let graph_data1 = res_data1.graph_data
let user_graph = graph_data1.profiles[3]
console.log(user_graph)
addition note, in html {{ currentPokemon.graph_data }} works perfectly and is reactive...
Whenever you use ref or computed the way you access values template vs script differs, in script you must use the value key accessor, in template you omit it because in templates the value key accessor is injected at compilation run-time.
<script setup>
const myVar = ref([]) // Array
console.log(myVar.value.length) // Outputs 0
myVar.value.push('hello')
console.log(myVar.value.length) // Outputs 1
const count = computed(() => myvar.value.length)
myVar.value.push('world')
console.log(count.value) // Outputs 2
</script>
<template>
<div>Total Items: {{ myVar.length }}</div>
<div>Counter: {{ count.length }}</div>
</template>
However it is not the same case when working with nested reactive reference objects which is what you want to use if you are altering inner values of a nested object where you want to react to those nested alterations:
<script setup>
const myObject = reference({
myData: [] // Array
})
console.log(myObject.myData.length) // Outputs 0
myObject.myData.push('hello')
console.log(myObject.myData.length) // Outputs 1
</script>
<template>
<div>Total Items: {{ myObject.myData.length }}</div>
</template>
Not sure if this is the best way to do this... I tried using reactive and a few other methods but this finally worked for me
/ Data pased to scatter plot
const data = computed({
get() {
let res_data1 = currentPokemon.value
let user_graph = res_data1.graph_data.profiles[3]
let dataset = {datasets: [
{label: 'Accel Profile 0.5',
fill: false,
borderColor: 'blue',
backgroundColor: 'blue',
borderWidth: 1,
// pointBackgroundColor: ['#000', '#00bcd6', '#d300d6'],
// pointBorderColor: ['#000', '#00bcd6', '#d300d6'],
pointRadius: 0,
pointHoverRadius: 5,
fill: false,
// tension: 0,
showLine: true,
data: [
{x: 0, y: 0},
{x: 0.5, y: 2},
{x: 0.5, y: 2},
{x: 1, y: 0}]},
{label: 'Accel Profile 0.33',
fill: false,
borderColor: 'orange',
backgroundColor: 'orange',
borderWidth: 1,
pointRadius: 0,
pointHoverRadius: 5,
// tension: 0,
showLine: true,
data: [
{x: 0, y: 0},
{x: 0.33, y: 1.49},
{x: 0.66, y: 1.49},
{x: 1, y: 0}]
},
{
label: 'Accel Profile 0.1',
borderColor: 'green',
backgroundColor: 'green',
borderWidth: 1,
pointRadius: 0,
pointHoverRadius: 5,
// tension: 0,
showLine: true,
fill: false,
data: [
{x: 0, y: 0},
{x: 0.1, y: 1.11},
{x: 0.9, y: 1.11},
{x: 1, y: 0}]
},
{
label: 'Accel Profile 0.25 User',
borderColor: 'red',
backgroundColor: 'red',
borderWidth: 1,
pointRadius: 0,
pointHoverRadius: 5,
// tension: 0,
showLine: true,
fill: false,
data: [
{x: user_graph.x[0], y: user_graph.y[0]},
{x: user_graph.x[1], y: user_graph.y[1]},
{x: user_graph.x[2], y: user_graph.y[2]},
{x: user_graph.x[3], y: user_graph.y[3]}
]
}
]}
return dataset
},
// setter
set(newValue) {
// Note: we are using destructuring assignment syntax here.
[firstName.value, lastName.value] = newValue.split(' ')
}
})

How can we paginate in Firebase?

While listing or getting data list from Google Firebase, how can we paging the data gathered?
As an example,
countries = [
{name: 'Afghanistan', code: 'AF'},
{name: 'Åland Islands', code: 'AX'},
{name: 'Albania', code: 'AL'},
...
]
I want to list as 10 per page and if i want to get page =0 with size 10 or page=5 with size=5
As an example
{
-KBZIPRqYmrRgNZ3GJt6: { asc: 1, desc: 9, name: "Rusty Kovacek"},
-KBZIPRvieZbW-k9R9ra: { asc: 2, desc: 8, name: "Lloyd Feil" },
-KBZIPRvieZbW-k9R9rc: { asc: 3, desc: 7, name: "Jasmin Hilll" },
-KBZIPRwiXUgOtv3fCAL: { asc: 4, desc: 6, name: "Ms. Ibrahim Schinner" },
-KBZIPRwiXUgOtv3fCAN: { asc: 5, desc: 5, name: "Dorothea Koepp" },
-KBZIPRxpCAUyo5TJmY3: { asc: 6, desc: 4, name: "Melvin Marquardt" },
-KBZIPRxpCAUyo5TJmY5: { asc: 7, desc: 3, name: "Celestine Bode" },
-KBZIPRy5Uvz9wUOa6Jx: { asc: 8, desc: 2, name: "Emerald Olson" },
-KBZIPRy5Uvz9wUOa6Jz: { asc: 9, desc: 1, name: "Miss Joey Jacobi" },
-KBZIPRzRhuguDLLftQR: { asc: 10, desc: 0, name: "Ms. Denis Rutherford" }
}
and
var axios = require('axios');
var Firebase = require('firebase');
var namesRef = new Firebase('https://demos-firebase.firebaseio.com/dataDemo/names');
axios.get(namesRef.toString() + '.json?shallow=true')
.then(function (res) {
// This list is not sorted!!!
// res.data = {
// '-KBZIPRqYmrRgNZ3GJt6': true,
// '-KBZIPRwiXUgOtv3fCAN': true,
// '-KBZIPRy5Uvz9wUOa6Jx': true,
// '-KBZIPRzRhuguDLLftQR': true,
// '-KBZIPRxpCAUyo5TJmY5': true,
// '-KBZIPRxpCAUyo5TJmY3': true,
// '-KBZIPRwiXUgOtv3fCAL': true,
// '-KBZIPRvieZbW-k9R9ra': true,
// '-KBZIPRvieZbW-k9R9rc': true,
// '-KBZIPRy5Uvz9wUOa6Jz': true
// }
var keys = Object.keys(res.data).sort(); // Notice the .sort()!
var pageLength = 2;
var pageCount = keys.length / pageLength;
var currentPage = 1;
var promises = [];
var nextKey;
var query;
for (var i = 0; i < pageCount; i++) {
key = keys[i * pageLength];
console.log('key', key);
query = namesRef.orderByKey().limitToFirst(pageLength).startAt(key);
promises.push(query.once('value'));
}
Promise.all(promises)
.then(function (snaps) {
var pages = [];
snaps.forEach(function (snap) {
pages.push(snap.val());
});
console.log('pages', pages);
process.exit();
// pages = [{
// '-KBZIPRqYmrRgNZ3GJt6': {
// asc: 1,
// desc: 9,
// name: 'Rusty Kovacek'
// },
// '-KBZIPRvieZbW-k9R9ra': {
// asc: 2,
// desc: 8,
// name: 'Lloyd Feil'
// }
// }, {
// '-KBZIPRvieZbW-k9R9rc': {
// asc: 3,
// desc: 7,
// name: 'Jasmin Hilll'
// },
// '-KBZIPRwiXUgOtv3fCAL': {
// asc: 4,
// desc: 6,
// name: 'Ms. Ibrahim Schinner'
// }
// }, {
// '-KBZIPRwiXUgOtv3fCAN': {
// asc: 5,
// desc: 5,
// name: 'Dorothea Koepp'
// },
// '-KBZIPRxpCAUyo5TJmY3': {
// asc: 6,
// desc: 4,
// name: 'Melvin Marquardt'
// }
// }, {
// '-KBZIPRxpCAUyo5TJmY5': {
// asc: 7,
// desc: 3,
// name: 'Celestine Bode'
// },
// '-KBZIPRy5Uvz9wUOa6Jx': {
// asc: 8,
// desc: 2,
// name: 'Emerald Olson'
// }
// }, {
// '-KBZIPRy5Uvz9wUOa6Jz': {
// asc: 9,
// desc: 1,
// name: 'Miss Joey Jacobi'
// },
// '-KBZIPRzRhuguDLLftQR': {
// asc: 10,
// desc: 0,
// name: 'Ms. Denis Rutherford'
// }
// }]
});
});

Can not read property "__" of undefined

I am currently working for my school project and using Meteor with AngularJs 1 and ES6. In one of my views I try to update some live data (with AngularCharts) every second which are currently randomly generated. I am new to the way of how Meteor and ES6 works, so I think a have a pretty easy error.
This is my code of the class from the view:
class View2 {
constructor($interval, $scope) {
'ngInject';
this.cardRow = [
{name: 'Drilling Heat', color: 'white', value: 0},
{name: 'Drilling Speed', color: 'white', value: 0},
{name: 'Milling Heat', color: 'white', value: 0},
{name: 'Milling Speed', color: 'white', value: 0}
];
this.type = ['bar', 'line', 'pie', 'doughnut', 'radar'];
this.chartRow = [
{
name: 'Chart1',
type: 'bar',
labels: [1, 2, 3, 4, 5, 6, 7, 8, 9, 10],
series: ['Series A'],
data: [0, 0, 0, 0, 0, 0, 0, 0, 0, 0],
datasetOverride: [{yAxisID: 'y-axis-1'}],
options: {
animation: false,
scales: {
yAxes: [
{
id: 'y-axis-1',
type: 'linear',
display: true,
position: 'left'
}]
}
}
},
{
name: 'Chart2',
type: 'line',
labels: [1, 2, 3, 4, 5, 6, 7, 8, 9, 10],
series: ['Series A'],
data: [0, 0, 0, 0, 0, 0, 0, 0, 0, 0],
datasetOverride: [{yAxisID: 'y-axis-1'}],
options: {
animation: false,
scales: {
yAxes: [
{
id: 'y-axis-1',
type: 'linear',
display: true,
position: 'left'
}]
}
}
}
];
$interval(this.update, 1000);
}
update() {
for (var i = 0; i < this.cardRow.length; i++) {
this.cardRow[i].value = Math.round((Math.random() * 10) * 10);
var value = this.cardRow[i].value;
switch (true) {
case (value > 80):
this.cardRow[i].color = 'red';
break;
case (value > 60):
this.cardRow[i].color = 'orange';
break;
case (value > 40):
this.cardRow[i].color = 'yellow';
break;
default:
this.cardRow[i].color = 'green';
break;
}
}
for (var y = 0; y < this.chartRow.length; y++) {
for (var z = 0; z < this.chartRow[y].data.length; z++) {
this.chartRow[y].data[z] = this.chartRow[y].data[z + 1];
}
this.chartRow[y].data[z - 1] = Math.round((Math.random() * 10) * 10);
}
}
}
The $interval should call the function "update" every second but then the variable is unknown. it throws an error like this:
TypeError: Cannot read property 'length' of undefined
at update (view2.js:74)
at callback (modules.js?hash=7db65c4…:46346)
at Scope.$eval (modules.js?hash=7db65c4…:51381)
at Scope.$digest (modules.js?hash=7db65c4…:51194)
at Scope.$apply (modules.js?hash=7db65c4…:51489)
at tick (modules.js?hash=7db65c4…:46336)
What can I do to solve this problem? And is there a way to use Meteor with the old Javascript Version?

How to achieve this graph with highcharts

How could I achieve the chart below as accurate as possible?
I'm trying to achieve the chart in the picture below with highcharts, the problem I have is that I can't achieve the gradients and the purple cut-line
this is what I have donde so far : jsFiddle
$(function () {
$('#container').highcharts({
chart: {
type: 'areaspline'
},
options: {
title: {
text: "Historical report"
},
heigth: 200
},
legend: {
layout: 'vertical',
align: 'left',
verticalAlign: 'top',
x: 150,
y: 100,
floating: true,
borderWidth: 1,
backgroundColor: (Highcharts.theme && Highcharts.theme.legendBackgroundColor) || '#FFFFFF'
},
xAxis: {
categories: ['Monday', 'Tuesday', 'Wednesday', 'Thursday', 'Friday', 'Saturday', 'Sunday'],
plotBands: [
{
from: 4.5,
to: 6.5,
color: 'rgba(68, 170, 213, .2)'
}
]
},
yAxis: {
title: {
text: 'Fruit units'
}
},
tooltip: {
shared: true,
valueSuffix: ' units'
},
credits: {
enabled: false
},
plotOptions: {
areaspline: {
fillOpacity: 0.5
}
},
series: [
{
name: 'John',
data: [3, 9, null, 5, 4, 10, 12],
lineColor: "#5A66AF"
}, {
name: 'Jane',
data: [1, 10, null, 3, 3, 5, 4],
lineColor: '#47a06b'
}, {
name: 'Roberto',
data: [10, 15, null, 15, 9, 9, 4],
lineColor: '#2ba9db'
}
]
});
});
The line is achieved by the DashStyle property:
http://api.highcharts.com/highcharts#plotOptions.line.dashStyle
The gradient fill is a matter of defining the gradient stops in the fillColor property:
http://api.highcharts.com/highcharts#plotOptions.area.fillColor
http://jsfiddle.net/gh/get/jquery/1.7.2/highslide-software/highcharts.com/tree/master/samples/highcharts/plotoptions/area-fillcolor-gradient/
(though, FWIW, that extreme white end to the gradient is reeeeally distracting...)

limit Highcharts x-Axis grouped categories and labels style

I am trying to draw a chart as below but the x axis stops at end of year 11 which it does not at the moment. I set max to 19 but it did not work.How can I get rid of those grey lines after end of Year 11?
Also for x-axis labels I want to decrease the font size of second category ([1,2,3,4]) and Year with bigger font but in label styles the font size property applies to all labels.
var l=19;
var m=-0.6;
new Highcharts.Chart({
chart: {
renderTo: elementId,
spacingLeft: 10,
spacingRight: 10
},
title: {
text: subject
},
xAxis: {
categories: [{
name: "Year 7",
categories: [1, 2, 3, 4]
}, {
name: "Year 8",
categories: [1, 2, 3, 4]
}, {
name: "Year 9",
categories: [1, 2, 3, 4]
}, {
name: "Year 10",
categories: [1, 2, 3, 4]
}, {
name: "Year 11",
categories: [1, 2, 3, 4]
}],
labels: {
style: {
fontSize: '7.5px'
}
},
plotLines: [{
color: '#5DA06E',
width: 2,
value: l
}, {
color: '#5DA06E',
width: 2,
value: -1
}],
//max: l
},
yAxis: [{
labels: {
enabled: false
},
title: {
text: null
},
min: 0,
max: 1000
},
{
title: {
text: null
},
labels: {
style: {
fontSize: '7.5 px'
},
align: 'left',
x: 3,
formatter: function () {
var value = change[this.value];
return value !== 'undefined' ? value : this.value;
}
},
tickPositions: [0, 280, 360, 440, 520, 600, 680, 760, 840, 920, 1000],
gridLineColor: 'white',
opposite: true,
min: 0,
max: 1000
}],
series: [{
type: 'line',
data: [[m, 0], [l, 280]],
color: '#A5DEC1',
}, {
type: 'line',
data: [[m, 80], [l, 360]],
color: '#94D0A3',
},
...
strong text
Are m and l params constant? Or can you change them? If yes, then see: http://jsfiddle.net/TFhd7/373/
In short: Categories reserves a place from -0.5 to 0.5 with category index. For example Year7 -> 4 means x-values from 3.5 to 4.5. So according to this information let's change that values:
var l = 19.5;
var m = -0.5;
Now modify extremes and plotLines:
plotLines: [{
color: '#5DA06E',
width: 2,
value: l
}, {
color: '#5DA06E',
width: 2,
value: m
}],
max: l - 0.5,
min: m + 0.5,

Resources