We Keep Coding

JsPlumb, How to save connector labels?

Could someone help me out with what I am missing?
The scenario is: there are several nodes. Among them, one node can connect with 3 other nodes and those connections should be labeled.
The codes are connecting multiple nodes with labels, but on save it doesn't save the labels. On page load, it shows the connections but not the labels.
Here are my codes.
let connector = [
"EditableBezier",
{
cornerRadius: 0,
curviness: 30,
},
];
let paintStyle = {
strokeWidth: 2,
stroke: "rgb(217,217,217)",
outlineWidth: 3,
outlineStroke: "transparent",
};
let paintStyle = {
strokeWidth: 2,
stroke: "rgb(217,217,217)",
outlineWidth: 3,
outlineStroke: "transparent",
};
let hoverStyle = {
strokeWidth: 2,
stroke: "rgb(67,67,67)",
};
let abLabelCounter = 1;
function abSplitConnections(params) {
var source = params.connection.source;
var target = params.connection.target;
if (source.id === target.id) return false;
var conn = jsPlumb.getInstance();
let c = conn.connect({
source: source,
target: target,
editable: true,
anchor: "AutoDefault",
endpoint: "Blank",
connector: connector,
paintStyle: paintStyle,
hoverPaintStyle: hoverStyle,
overlays: [
[
"Arrow",
{
location: 1,
width: 10,
length: 10,
},
],
[
"Label",
{
location: 0.5,
label: () => {
if (abLabelCounter === 1) {
abLabelCounter++;
return "A";
}
if (abLabelCounter === 2) {
abLabelCounter++;
return "B";
}
if (abLabelCounter === 3) {
abLabelCounter = 1;
return "C";
}
},
id: "partition",
},
],
],
});
}

How do i find the click event on indicator in radar chart?

My project uses echart to create radar chart and i have to find click event for indicators around radar chart.
It is implemented like this.
createradarchart() {
this.theme.getJsTheme()
.pipe(
takeWhile(() => this.alive),
delay(1),
)
.subscribe(config => {
this.options = {
name: 'KPI Radar',
grid: {
left: '5%',
right: '5%',
top: 0,
bottom: 0
},
// label: {
// distance: 5
// },
type: 'radar',
color: ['red', 'green', 'blue'],
legend: {
bottom: 5,
itemGap: 20,
data: ['Baseline', 'Threshold', 'Actual'],
textStyle: {
color: 'black',
fontSize: 10
}
},
radar: {
indicator: this.indicator,
nameGap: 5,
shape: 'circle',
radius: '43%',
name: {
textStyle: {
color: 'black',
fontSize: 10
}
}
},
tooltip: {
show: true,
textStyle: {fontSize:10},
trigger: 'item',
formatter: (params => {
return params['name']+'-'+params['value'][1];
})
},
series: this.seriesdata,
};
this.ctx = this.echartsIntance.getRenderedCanvas();
this.chart = new Chart(this.ctx,{type:'radar', options: this.options})
// this.ctx = canvas.getContext("2d");
});
}
where data and options are in format, with data being fetched from server:
seriesdata: any = {type: 'radar', data:[{name:'Baseline',value:[1,2,3,4,5]},{name:'Threshold',value:[1,2,3,4,5]},{name:'Actual',value:[1,2,3,4,5]}]};
indicator = [
{ name: 'DL User Thpt_Kbps[CDBH]', max: 100 },
{ name: 'ERAB SSR[CDBH]', max: 100 },
{ name: 'PS DCR %[CDBH]', max: 100 },
{ name: 'VoLTE CSSR', max: 100 },
{ name: 'VoLTE DCR[CBBH]', max: 100 }
];
options: EChartOption = {
name: 'KPI Radar',
grid: {
left: '2%',
right: '2%',
top: 0,
bottom: 0
},
// label:{
// distance: 5
// },
type: 'radar',
color: ['red', 'green', 'blue'],
legend: {
orient: 'vertical',
align: 'left',
right: 20,
data: ['Baseline', 'Threshold', 'Actual'],
textStyle: {
color: 'black',
fontSize: 10
}
},
radar: {
indicator: this.indicator,
nameGap: 5,
shape: 'circle',
radius:'60%',
},
tooltip: {
show: false,
// trigger: 'item',
// formatter: (params => {
// return params['name']+'-'+params['value'][1];
// })
}
};
This is where i want click event to be triggered, having the name of label which is clicked.
Approach i found to do this is this, but it didnt work, i debugged and found that scale.pointLabels is empty.
labelClicked(e:any){
var self = this;
var helpers = Chart.helpers;
var scale = self.chart.scale;
var opts = scale.options;
var tickOpts = opts.ticks;
// Position of click relative to canvas.
var mouseX = e.offsetX;
var mouseY = e.offsetY;
var labelPadding = 5; // number pixels to expand label bounding box by
// get the label render position
// calcs taken from drawPointLabels() in scale.radialLinear.js
var tickBackdropHeight = (tickOpts.display && opts.display) ?
helpers.valueOrDefault(tickOpts.fontSize, Chart.defaults.global.defaultFontSize)
+ 5: 0;
var outerDistance = scale.getDistanceFromCenterForValue(opts.ticks.reverse ? scale.min : scale.max);
for (var i = 0; i < scale.pointLabels.length; i++) {
// Extra spacing for top value due to axis labels
var extra = (i === 0 ? tickBackdropHeight / 2 : 0);
var pointLabelPosition = scale.getPointPosition(i, outerDistance + extra + 5);
// get label size info.
// TODO fix width=0 calc in Brave?
// https://github.com/brave/brave-browser/issues/1738
var plSize = scale._pointLabelSizes[i];
// get label textAlign info
var angleRadians = scale.getIndexAngle(i);
var angle = helpers.toDegrees(angleRadians);
var textAlign = 'right';
if (angle == 0 || angle == 180) {
textAlign = 'center';
} else if (angle < 180) {
textAlign = 'left';
}
// get label vertical offset info
// also from drawPointLabels() calcs
var verticalTextOffset = 0;
if (angle === 90 || angle === 270) {
verticalTextOffset = plSize.h / 2;
} else if (angle > 270 || angle < 90) {
verticalTextOffset = plSize.h;
}
// Calculate bounding box based on textAlign
var labelTop = pointLabelPosition.y - verticalTextOffset - labelPadding;
var labelHeight = 2*labelPadding + plSize.h;
var labelBottom = labelTop + labelHeight;
var labelWidth = plSize.w + 2*labelPadding;
var labelLeft;
switch (textAlign) {
case 'center':
labelLeft = pointLabelPosition.x - labelWidth/2;
break;
case 'left':
labelLeft = pointLabelPosition.x - labelPadding;
break;
case 'right':
labelLeft = pointLabelPosition.x - labelWidth + labelPadding;
break;
default:
console.log('ERROR: unknown textAlign '+textAlign);
}
var labelRight = labelLeft + labelWidth;
// Render a rectangle for testing purposes
self.ctx.save();
self.ctx.strokeStyle = 'red';
self.ctx.lineWidth = 1;
self.ctx.strokeRect(labelLeft, labelTop, labelWidth, labelHeight);
self.ctx.restore();
// compare to the current click
if (mouseX >= labelLeft && mouseX <= labelRight && mouseY <= labelBottom && mouseY >= labelTop) {
alert(scale.pointLabels[i]+' clicked');
// Break loop to prevent multiple clicks, if they overlap we take the first one.
break;
}
}
}
Thanks in advance

Split Overlap Ranges

I have implemented an algorithm for dividing overlapping existing ranges into a list of date / number ranges.
The algorithm is working but I was wondering if you can avoid the last loop of the algorithm.
It's possible?
Input Data
0-100(red)
90-150(green)
90-150(blue)
140-300(yellow)
170-240(black)
350-530(orange)
50-500(silver)
50-60(pink)
Output Data
0-49(red)
50-60(red,silver,pink)
61-89(red,silver)
90-100(red,green,blue,silver)
101-139(green,blue,silver)
140-150(green,blue,yellow,silver)
151-169(yellow,silver)
170-240(yellow,black,silver)
241-300(yellow,silver)
301-349(silver)
350-500(orange,silver)
501-530(orange)
Javascript Code:
function splitRanges(original_intervals) {
for (var to = [], from = [], n, i = original_intervals.length; i--;) {
if (to.indexOf(n = original_intervals[i].to) < 0)
to.push(n);
if (from.indexOf(n = original_intervals[i].from) < 0)
from.push(n);
}
to.sort(function(a, b) {
return a - b;
});
from.sort(function(a, b) {
return a - b;
});
var intervals = [];
while (to.length) {
var sFrom = from.shift();
var sTo = 0;
if (from.length == 0) {
sTo = (from.push((n = to.shift()) + 1), n);
} else {
if (from[0] > to[0]) {
while (to[0] < from[0]) {
from.unshift(to[0] + 1);
to.shift();
}
sTo = from[0] - 1;
} else {
sTo = from[0] - 1;
}
}
intervals.push({
from: sFrom,
to: sTo,
colors: []
});
}
/***********************Loop that i want remove*/
intervals.forEach(function(item, index) {
original_intervals.forEach(function(item1, index1) {
if ((item.from >= item1.from && item.from <= item1.to) || (item.to >= item1.from && item.to <= item1.to))
item.colors.push(item1.color);
});
});
return intervals;
}
var r1 = [{
id: 1,
from: 0,
to: 100,
color:'red'
}, {
id: 2,
from: 90,
to: 150,
color:'green'
}, {
id: 3,
from: 90,
to: 150,
color:'blue'
}, {
id: 4,
from: 140,
to: 300,
color:'yellow'
}, {
id: 5,
from: 170,
to: 240,
color:'black'
}, {
id: 6,
from: 350,
to: 530,
color:'orange'
}, {
id: 7,
from: 50,
to: 500,
color:'silver'
}
, {
id: 8,
from: 50,
to: 60,
color:'pink'
}
];
console.log(splitRanges(r1));

You need some iterations, at least the one with getting all range points, and then generate an array out of it and take the subset of colors for each small interval.
var data = [{ from: 0, to: 100, color: 'red' }, { from: 90, to: 150, color: 'green' }, { from: 90, to: 150, color: 'blue' }, { from: 140, to: 300, color: 'yellow' }, { from: 170, to: 240, color: 'black' }, { from: 350, to: 530, color: 'orange' }, { from: 50, to: 500, color: 'silver' }, { from: 50, to: 60, color: 'pink' }],
ranges = new Set,
parts,
result;
data.forEach(({ from, to }) => (ranges.add(from), ranges.add(to)));
parts = [...ranges].sort((a, b) => a - b);
result = parts.slice(1).map(function (a, i, aa) {
var from = i ? aa[i - 1] : parts[0],
to = a,
colors = data.filter(d => d.from <= from && to <= d.to).map(({ color }) => color);
return { from, to, colors };
});
console.log(result);
.as-console-wrapper { max-height: 100% !important; top: 0; }

JointJS creating links from magnet not working

I managed to create a diagram with elements, in port, and multiple out ports.
All the elements are connected using links from the in port to an out port.
When I try to play with the links I already have (loaded from JSON), it works properly.
For some reason when I try to create a new link by pressing the ports, it drags the element instead.
How can I make the ports create new links when I press on them?
joint.shapes.Question = joint.shapes.basic.Generic.extend(_.extend({}, joint.shapes.basic.PortsModelInterface, {
markup: '<g class="rotatable">' +
'<g class=""><g class="inPorts" /><rect class="question-wrapper" /><rect class="question-title" /><rect class="options-body" /><g class="outPorts" /></g>' +
'<text class="question" /><g class="options" />' +
'</g>',
portMarkup: '<g class="port port-<%= port.type %> port-<%= port.id %>"><circle class="port-body" /><text class="port-label" /></g>',
optionMarkup: '<g class="option-wrapper"><text class="option"/></g>',
defaults: joint.util.deepSupplement({
type: 'Question',
minWidth: 200,
optionHeight: 25,
inPorts: [{"id": "in", "label": "IN"}],
attrs: {
'.': {
magnet: false
},
'.question-wrapper': {
width: 200,
height: 95,
fill: '#f2f2f2',
rx: 10,
ry: 10,
ref: '.paper'
},
'.question-title': {
height: 30,
fill: '#ffffff',
rx: 5,
ry: 5,
ref: '.question-wrapper',
'ref-x': 5,
'ref-y': 5,
'ref-width': -10
},
'.question': {
fill: '#000000',
'font-size': 14,
'y-alignment': 'middle',
'x-alignment': 'middle',
ref: '.question-title',
'ref-x': .5,
'ref-y': .5,
},
'.options-body': {
height: 50,
fill: '#ffffff',
rx: 5,
ry: 5,
ref: '.question-wrapper',
'ref-x': 5,
'ref-y': 40,
'ref-width': -10
},
'.options': {
ref: '.options-body',
'ref-x': 5,
'ref-y': 5
},
'.option-wrapper': {
ref: '.options'
},
'.option': {
fill: '#000000',
'font-size': 14
},
'.port-in': {
ref: '.question-wrapper',
'ref-y': 0,
'ref-x': .5,
magnet: true,
type: 'in'
},
'.port-in .port-body': {
r: 15,
fill: '#75caeb',
ref: '.port-in'
},
'.port-in .port-label': {
'font-size': 10,
fill: '#ffffff',
'x-alignment': 'middle',
'y-alignment': -10,
ref: '.port-in .port-body'
},
'.port-out': {
ref: '.question-wrapper',
magnet: true,
type: 'out'
},
'.port-out .port-body': {
r: 10,
ref: '.question-wrapper',
'ref-dy': 15,
'ref-x': .5,
fill: '#158cba',
'y-alignment': 'middle'
},
'.port-out .port-label': {
'text': 'R',
'font-size': 10,
'y-alignment': 'middle',
'x-alignment': 'middle',
fill: '#ffffff',
ref: '.port-out .port-body',
'ref-x': .5,
'ref-y': 15,
'pointer-events': 'none'
}
}
}, joint.shapes.basic.Generic.prototype.defaults),
initialize: function () {
this.attr('.question/text', this.get('question'), {silent: true});
this.onChangePosition();
this.onChangeOptions();
joint.shapes.basic.PortsModelInterface.initialize.apply(this, arguments);
},
onChangePosition: function () {
var timer;
var timer_interval = 500;
this.on('change:position', function (cellView, position) {
clearTimeout(timer);
timer = setTimeout(function () {
$.ajax({
url: routes.questionPosition.replace(':question', cellView.id),
data: position,
method: 'post',
headers: {'X-CSRF-TOKEN': $('[name="csrf_token"]').attr('content')}
});
}, timer_interval);
});
},
onChangeOptions: function () {
var options = this.get('options');
var size = this.get('size');
var optionHeight = this.get('optionHeight');
// First clean up the previously set attrs for the old options object.
// We mark every new attribute object with the `dynamic` flag set to `true`.
// This is how we recognize previously set attributes.
var attrs = this.get('attrs');
_.each(attrs, function (attrs, selector) {
if (attrs.dynamic) {
// Remove silently because we're going to update `attrs`
// later in this method anyway.
this.removeAttr(selector, {silent: true});
}
}, this);
// Collect new attrs for the new options.
var offsetY = 0;
var attrsUpdate = {};
_.each(options, function (option) {
var selector = '.option-' + option.id;
attrsUpdate[selector] = {transform: 'translate(0, ' + offsetY + ')', dynamic: true};
attrsUpdate[selector + ' .option'] = {text: option.text, dynamic: true};
offsetY += optionHeight;
}, this);
this.attr(attrsUpdate);
this.autoresize();
},
autoresize: function () {
var options = this.get('options') || [];
var gap = this.get('paddingBottom') || 15;
var height = options.length * this.get('optionHeight');
var wrapperHeight = height + this.attr('.question-title/height') + gap;
var width = joint.util.measureText(this.get('question'), {
fontSize: this.attr('.question/font-size')
}).width + (this.attr('.question-title/rx') * 6);
this.attr('.options-body/height', height);
this.resize(Math.max(this.get('minWidth'), width), wrapperHeight);
this.attr('.question-wrapper/width', width);
this.attr('.question-wrapper/height', wrapperHeight);
},
getPortAttrs: function (port, index, total, selector, type) {
var attrs = {};
var portSelector = selector + ' .port-' + type;
attrs[portSelector + ' .port-label'] = {text: port.label};
attrs[portSelector + ' .port-body'] = {
port: {
id: port.id,
type: type
}
};
if (selector === '.outPorts') {
attrs[portSelector] = {'ref-x': ((total / 2) * 30 * -1) + (index * 30) + 15};
}
return attrs;
}
}));
joint.shapes.QuestionView = joint.dia.ElementView.extend(_.extend({}, joint.shapes.basic.PortsViewInterface, {
initialize: function () {
joint.shapes.basic.PortsViewInterface.initialize.apply(this, arguments);
},
renderMarkup: function () {
joint.dia.ElementView.prototype.renderMarkup.apply(this, arguments);
// A holder for all the options.
this.$options = this.$('.options');
// Create an SVG element representing one option. This element will
// be cloned in order to create more options.
this.elOption = V(this.model.optionMarkup);
this.renderOptions();
},
renderOptions: function () {
this.$options.empty();
_.each(this.model.get('options'), function (option, index) {
var className = 'option-' + option.id;
var elOption = this.elOption.clone().addClass(className);
elOption.attr('option-id', option.id);
this.$options.append(elOption.node);
}, this);
// Apply `attrs` to the newly created SVG elements.
this.update();
}
}));

Joint.js add custom ports with path class. for custom elements

What I am trying to do is make a element with custom class for ports and path so that I can add an element with custom path and my own markup for ports.This way when I create an element I will pass dynamic path for its shape just like elements of path class behave and as I have also extended from PortsModelInterface I will also have my own markup for ports.
This whole effort is to make svg scalable for zomming. Previously I was using html custom element with my custom ports which was working fine but html of custom elements wasn't scaling on zooming
var graph = new joint.dia.
var paper = new joint.dia.Paper({
el: $('#paper'),
width: 800,
height: 600,
gridSize: 1,
model: graph,
snapLinks: true,
embeddingMode: true
});
joint.shapes.custom1={};
joint.shapes.custom1.Element = joint.shapes.basic.Generic.extend(_.extend({}, joint.shapes.basic.PortsModelInterface, {
markup: '<g class="rotatable"><g class="scalable"><rect class = "myrect"/></g><g class="inPorts"/><g class="outPorts"/></g>',
portMarkup: '<g class="port<%= id %>"><circle class="port-body"/></g>',
defaults: joint.util.deepSupplement({
type: 'html.Element',
size: { width: 200, height: 110 },
inPorts: [],
outPorts: [],
attrs: {
'.': { magnet: true},
rect: {
stroke: 'none', 'fill-opacity': 0, width: 300, height: 210,
},
circle: {
r: 6, //circle radius
magnet: true,
left:0,
stroke: 'gray'
},
'.inPorts circle': { fill: 'gray', magnet: 'passive', type: 'input', y: 0},
'.outPorts circle': { fill: 'gray', type: 'output' }
}
}, joint.shapes.basic.Generic.prototype.defaults),
getPortAttrs: function (portName, index, total, selector, type) {
var attrs = {};
var portClass = 'port' + index;
var portSelector = selector + '>.' + portClass;
var portCircleSelector = portSelector + '>circle';
attrs[portCircleSelector] = { port: { id: portName || _.uniqueId(type), type: type } };
attrs[portSelector] = { ref: 'rect', 'ref-x': (index + 1) * (0.55 / total)};
if (selector === '.outPorts') {
attrs[portSelector]['ref-dy'] = 15;
}
return attrs;
}
}));
joint.shapes.custom1.Atomic = joint.shapes.custom1.Element.extend({
markup: '<g class="rotatable"><g class="scalable"><path/></g><text/></g>',
defaults: joint.util.deepSupplement({
type: 'basic.Path',
size: { width: 60, height: 60 },
attrs: {
'path': { fill: '#FFFFFF', stroke: 'black' },
'text': { 'font-size': 14, text: '', 'text-anchor': 'middle', 'ref-x': .5, 'ref-dy': 20, ref: 'path', 'y-alignment': 'middle', fill: 'black', 'font-family': 'Arial, helvetica, sans-serif' }
}
}, joint.shapes.basic.Generic.prototype.defaults)
});
var a2 = new joint.shapes.custom1.Atomic({
position: { x: 50, y: 260 },
size: { width: 100, height: 100 },
attrs: {
path: { d: 'M 30 0 L 60 30 30 60 0 30 z' },
text: {
text: 'Diamond',
'ref-y': .5 // basic.Path text is originally positioned under the element
}
},
inPorts: ['in'],
outPorts: ['out']
});
graph.addCells([a2])
The element is added in graph but some how the ports don't show up.
I don't have proper concept of adding classes so please any help will be greatly appreciated. Thanks.
Fiddle example

I suggest to define an element with custom markup for the shape and ports. Both markups should contain an SVG path, so you can set an arbitrary path data d via model.attr() on them.
joint.shapes.devs.GenericModel = joint.shapes.devs.Model.extend({
markup: '<g class="rotatable"><g class="scalable"><path class="body"/></g><text class="label"/><g class="inPorts"/><g class="outPorts"/></g>',
portMarkup: '<g class="port port<%= id %>"><path class="port-body"/><text class="port-label"/></g>',
defaults: joint.util.deepSupplement({
type: 'devs.GenericModel'
}, joint.shapes.devs.Model.prototype.defaults)
});
Tell the paper to use devs.ModelView for rendering.
joint.shapes.devs.GenericModelView = joint.shapes.devs.ModelView;
Now you can set or change d attribute for the shape and ports anytime you wish.
var model = new joint.shapes.devs.GenericModel({
attrs: {
'.body': { d: 'M 0 0 0 50 50 50 z'},
'.port-body': { d: 'M 0 0 10 0 10 10 0 10 z'}
}
});
model.attr('.body/d', 'M 25 0 50 50 0 50 z');
JS Fiddle: http://jsfiddle.net/kumilingus/kge023bc/