I have a validateConnection event within which I have a lot of conditions. Now on one of these conditions, I want to add a custom label to the link that gets created. How do I do this within validateConnection
You can try this:
prepare a 'placeholder' for the future label - it creates a label without text:
new joint.dia.Link({
labels: [
{ position: 0.5 }
]
}),
Then in the validateConnection set the label text value throught the attr
validateConnection: function(cellViewS, magnetS, cellViewT, magnetT, end, linkView) {
if (cellViewT) {
linkView.model.prop('labels/0/attrs/text/text', cellViewT.model.attr('text/text'));
} else {
linkView.model.prop('labels/0/attrs/text/text', '')
}
}
https://jsfiddle.net/vtalas/hxbfo0m4/
joint.dia.Link({
labels: [
{ position: 0.5, attrs: { text: { text: 'test' } } }
]
Related
So what Im trying to do is to change the color of the values inside the bars of a Bar chart. I have tried all options and also have a pen where it doesnt seem to work: https://codepen.io/vbbalaji/pen/oNbwbpm
[![Bar Chart][1]][1]
[1]: https://i.stack.imgur.com/a8lE7.png ]
There are two problems here:
You need to include the chartjs datalabels script in order to use it. Make sure you include this script after the main Chart.js library: https://cdn.jsdelivr.net/npm/chartjs-plugin-datalabels#0.7.0.
Your datalabels options should be nested within the key plugins.
Here's the corrected config:
{
type: "horizontalBar",
data: {
labels: ["Red", "Amber", "Green"],
datasets: [
{
backgroundColor: ["#db5935", "#f0ae43", "#3cba9f"],
data: [2, -4, 6]
}
]
},
options: {
legend: { display: false },
title: { display: true, text: "Health Variance" },
plugins: {
datalabels: {
color: "blue",
labels: {
title: { color: "blue", font: { weight: "bold" } },
value: { color: "green" }
}
}
}
}
}
It looks like this:
Here's your updated codepen: https://codepen.io/typpo/pen/oNbwxvK
Trying to focus() on a treeview node in this plunker using an ElementRef. I commented the two lines at the bottom cause they don't work.
Here's the plunker for the code listing below:
https://plnkr.co/edit/aUnechu6glXk5CMFsMex?p=preview
import { Component, ElementRef, ViewChild } from '#angular/core';
#Component({
selector: 'my-app',
template: `
<kendo-treeview
#treeview
[nodes]="data"
textField="text"
kendoTreeViewCheckable
kendoTreeViewExpandable
kendoTreeViewSelectable
kendoTreeViewHierarchyBinding
childrenField="items">
</kendo-treeview>
`
})
export export class AppComponent {
#ViewChild("treeview") treeview: ElementRef;
public data: any[] = [
{
text: "Furniture", items: [
{ text: "Tables & Chairs" },
{ text: "Sofas" },
{ text: "Occasional Furniture" }
]
},
{
text: "Decor", items: [
{ text: "Bed Linen" },
{ text: "Curtains & Blinds" },
{ text: "Carpets" }
]
}
];
//let tree = this.treeview.nativeElement;
//this.treeview.focus('0');
}
And the focus() method as per their docs and sample here:
https://www.telerik.com/kendo-angular-ui/components/treeview/api/TreeViewComponent/#toc-focus
How can I focus() programmatically within my component code, as opposed to the click() event posted in their docs ?
The code needs to be executed inside one of Angular's lifecycle hooks or from a method. We need either a ngAfterViewInit or a custom AppComponent.focus() method that ViewChild has time to instantiate the TreeView instance:
ngAfterViewInit(){
//XXX: this.treeview is the TreeViewComponent instance set by ViewChild decorator
this.treeview.focus('1');
}
Can someone help me add an element to my ElasticSearch array:
let color = "red"
client.update({
index,
type: "Cars",
id,
body: {
script: {
inline: "if(! ctx._source.colors.contains(color)){ ctx._source.colors += color }",
params: {
color
}
}
}
})
For some reason, I keep getting color is not defined..
Thanks in advance!
You have to reference the param with: params.color in your script:
inline: "if(! ctx._source.colors.contains(params.color)){ ctx._source.colors += params.color }"
I'm using the Chart.js 2.0
The formula : Failure Rate: Failure Count / Total Count.
I've got the an array for failure rate, failure count and total count.
Plotting failure rate of a component against time in a line chart is straight forward but now i also want the failure count and total count to be displayed when the user hovers over the tool tip. I'm not able to figure out how to customize it.
we have e.time, e.count, e.failure_count, e.rate
new Chart(document.getElementById(event_id).getContext("2d"), {type: "line", data:
{
labels: e.time,
datasets: [
{
label: "Failure Rate",
fill: false,
borderColor: "#4caf50",
backgroundColor: "#4caf50",
pointBorderWidth: 1,
pointHoverRadius: 3,
data: e.rate
}
]
}, options: {
scales: {
yAxes: [{
ticks: {
suggestedMin: -1,
suggestedMax: 6
}
}]
},
tooltips: {
custom: function(tooltip) {
tooltip.text= "Not working????"
}
}
}
});
In 2.0, the callback needs a return.
So basically what you want to do is :
custom: function(tooltip) {
tooltip.text= "Not working????"
}
By
callbacks: {
label: function(tooltipItem, data) { return "What you want as a tooltip" }
}
I want to make a tabbed formPanel fitting user's screen.
here's my code:
var form2 = new Ext.FormPanel({
labelWidth: 75,
border:false,
items: {
// removing next line affects the layout %)
xtype:'tabpanel',
activeTab: 0,
defaults:{autoHeight:true, bodyStyle:'padding:10px'},
items:[
{
title:'Personal Details',
layout:'form',
defaults: {width: 230},
defaultType: 'textfield',
items: [
{
fieldLabel: 'First Name'
}
]
},
{
title:'Phone Numbers',
layout:'form',
defaults: {width: 230},
defaultType: 'textfield',
items: [
{
fieldLabel: 'Home'
}
]
}
]
}
});
form2.render('container');
And later in my a have an , of course.
That makes a form with incredibly big width...
If I revome line with "xtype: 'tabpanel'" everything works fine (except there's no tabbed panel on screen)
Is it a bug or I forgot something. Help me figure it out, please=)
Thanks for your attention.
Set anchor and set layout : fit configs for formpanel.