HTML in Link Label - tabulator

I am trying to have the label be HMTL (font awesome icon) but it's only displaying it as text. See sample below:
columns:[
{
title:"Order", width:100, field:"url_name", align:"center", headerSort:false, formatter:"link", formatterParams:{
urlField:"url",
label: "<i class="fas fa-link"></i>",
target:"_blank",
}
}
]

Use a custom formatter:
http://tabulator.info/docs/4.2/format#format-custom
columns:[
{
title:"Order", width:100, field:"url_name", align:"center", headerSort:false
, formatter: (c, p) => {
return `<a href='${p.urlField}' target='_blank'><i class='fas fa-link'></i></a>`
}, formatterParams:{
urlField:"url",
}
}
]

Related

Modification/anomaly between ES versions 7.10.2 and 7.16.3?

The following mapping and query DSL dict work OK when the version of ES is 7.10.2, but they never work where the version of ES is 7.16.3:
mappings = \
{
"mappings": {
"properties": {
"esdoc_text": {
"type": "text",
"term_vector": "with_positions_offsets",
"fields": {
"stemmed": {
"type": "text",
"analyzer": "english",
"term_vector": "with_positions_offsets",
}
}
}
}
}
}
search dict:
data = \
{
'query': {
'simple_query_string': {
'query': self.search_string,
'fields': [
self.text_field
]
}
},
'highlight': {
'fields': {
self.text_field: {
'type': 'fvh',
'pre_tags': [
'<span style="background-color: yellow">',
'<span style="background-color: skyblue">',
'<span style="background-color: lightgreen">',
'<span style="background-color: plum">',
'<span style="background-color: lightcoral">',
'<span style="background-color: silver">',
],
'post_tags': [
'</span>', '</span>', '</span>',
'</span>', '</span>', '</span>',
]
}
},
'number_of_fragments': 0
}
}
with version 7.10.2, setting self.text_field to "esdoc_text" (field name) returns highlighted results using a standard analyser, and setting self.text_field to "esdoc_text.stemmed" returns highlighted results using an english analyser.
but with version 7.16.3, with the identical mapping and identical query DSL dict, hits are produced, but they never contain a "highlight" key.
Has anyone got any idea why this might be? Has any modification crept in between 7.10.2 and 7.16.3 which might explain this? Anyone now how to change things?

JointJS: Add a label on the validateConnection Event?

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' } } }
]

ZingChart - Shapes as Labels

I need to put some additional labels on my charts, so I'm using shapes. Here is the result:
http://jsfiddle.net/z3n3qobm/91/
 
But I need to align the circles from the example with the labels of the X-axis. The chart must be responsive and the total of labels depends from the database.
I have a function that generates the initial position of the shapes in '%', but it misaligns when I change the window's size.
I did some calculations, but when the chart resizes it doesn't keep a fixed proportion.
Someone have an idea how to use shapes at the same position of the X-axis labels?
Unfortunately ZingChart does not provide a way to scale shapes and labels based on sizing. Hooks are available to position labels on nodes, but not on scale items themselves.
Now there I do have a solution to your issue, but just to be clear this is more of a hack utilizing tricks with ZingChart and multiple charts. I removed the shapes in your chart and decided to replicate those circles utilizing a second chart.
The main goal of this was to utilize a scatter chart, modify the look of each scatter node to replicate what you are trying to achieve, and to hide all the superficial items that were unnecessary (scales, removed plotarea margins). Do note that I'm using a mixed chart, one series for the scatter chart, and another for a dummy bar chart to force the scales to match how the chart above is displayed.
http://jsfiddle.net/mikeschultz/q6arebsu/1/
(Snippet below incase the jsfiddle is deleted in the future).
This can be also accomplished by combining the two charts into a single graphset, but I find working with separate charts is more flexible.
var myData = {
"graphset":[
{
"globals":{
"overflow":"visible"
},
"plot":{
"animation":{
"effect":"ANIMATION_EXPAND_BOTTOM",
"sequence":null,
"speed":10
},
"aspect":"jumped"
},
"plotarea": {
"margin-bottom": 30
},
"type":"mixed",
"series":[
{
"type":"bar",
"values":[46,46,53,50],
"background-color":"#5e36e6",
"value-box":{
"placement":"bottom-in",
"rules":[
{
"rule":"%v==0",
"visible":false
}
],
"thousands-separator":".",
"font-color":"#fff"
},
"palette":0
},
{
"type":"bar",
"values":[52,53,61,58],
"background-color":"#0099cd",
"value-box":{
"placement":"top",
"rules":[
{
"rule":"%v==0",
"visible":false
}
],
"thousands-separator":".",
"font-color":"#fff"
},
"palette":1
},
{
"type":"line",
"values":[150,105,399,159],
"marker":{
"size":0,
"border-width":0,
"background-color":"transparent"
},
"line-color":"#99cc33",
"line-width":3,
"value-box":{
"placement":"top",
"rules":[
{
"rule":"%v==0",
"visible":false
}
],
"thousands-separator":"."
},
"palette":2
}
],
"background-color":"#3F0767",
"scale-x":{
"tick":{
"alpha":0
},
"zooming":false,
"labels":["AB","CDE","FG","HI JKL"],
"line-width":0,
"zoom-to":null
},
"scale-y":{
"guide":{
"alpha":0.25,
"line-style":"solid",
"line-color":"#5a3b77"
},
"short":true,
"tick":{
"alpha":0
},
"line-width":0
},
"scroll-x":false
},
]
};
zingchart.render({
id : 'myChart',
data : myData,
height: 400
});
var bubbleConfig = {
type: 'mixed',
backgroundColor:"#3F0767",
scaleX: {
visible: false
},
scaleY: {
visible: false
},
plotarea: {
marginTop : 0,
marginBottom: 0,
maskTolerance: [0,0]
},
plot: {
marker: {
size: 30,
borderColor: '#371876',
borderWidth: 3,
backgroundColor: 'transparent'
},
tooltip: {
visible: false
}
},
scaleY: {
values: "0:2:1",
visible: false
},
series: [
{
type:'scatter',
values: [
[0,1],
[1,1],
[2,1],
[3,1]
],
valueBox: {
visible: true,
text: 'foobar',
fontColor: '#fff',
fontSize: '15px',
fontWeight: 'normal',
placement: 'over',
rules: [
{
rule: '%i == 0',
text: '35%'
},
{
rule: '%i == 1',
text: '51%'
},
{
rule: '%i == 2',
text: '15%'
},
{
rule: '%i == 3',
text: '36%'
}
]
}
},
{
type:'bar',
values: []
}
]
}
zingchart.render({
id : 'myBubbles',
data : bubbleConfig,
height: 80
});
<html>
<head>
<script src="http://cdn.zingchart.com/zingchart.min.js"></script>
</head>
<body>
<div id="myChart"></div>
<div id='myBubbles'></div>
</body>
</html>

Zing Chart Y-scale data out of frame

I added data formatting to my zingchart Y-scale to use $ "," and 2 decimals, and now the text is out of frame. I tried changing the width of the chart to no avail. Any ideas here?
jsfiddle.net/Rodmunera/j1ddL5k6/7
Try adding the plotarea object to your JSON and add the margin attribute to that object. I tried it with a margin of 100px and it made everything fit in--
var chartJSON =
{
"legend":{
"border-color":"#bbbbbb",
"margin-top":10,
"margin-left":0,
"drag-handler":"header",
"item":{
"toggle":true,
"margin-top":5,
"margin-left":5,
"margin-right":5,
"margin-bottom":5
},
"shadow":false,
"margin-right":0,
"background-color-2":"#e1e1e1",
"border-width":1,
"background-color":"#e1e1e1",
"draggable":true,
"minimize":false,
"header":{
"":0,
"background-color":"#bbbbbb",
"text-align":"center",
"font-size":16,
"text":"Legend",
"font-family":"Lato",
"color":"#ffffff",
"background-color-2":"#bbbbbb",
"font-weight":300
},
"layout":"x4",
"position":"50% 0%",
"margin-bottom":0
},
"tooltip":{
"visible":true,
"decimals":2,
"thousands-separator":",",
"format":"$%v",
"text":"$%v"
},
"stacked":false,
"series":[
{
"background-color":"#7fb2f0",
"line-color":"#7fb2f0",
"text":"Checkout Total",
"marker":{
"border-color":"#7fb2f0",
"background-color":"#7fb2f0",
"alpha":1
},
"background-color-2":"#7fb2f0",
"values":[227.04,141.90,56.76,56.76,56.76,141.90,113.52,56.76,28.38,56.76,56.76,28.38,28.38,56.76,141.90,198.66,56.76,56.76,141.90,397.32,85.14,198.66,85.14,255.42,317.82,783.15,646.95,1770.60,3745.50]
},
{
"background-color":"#bf5a9a",
"line-color":"#bf5a9a",
"text":"Refunds",
"marker":{
"border-color":"#bf5a9a",
"background-color":"#bf5a9a",
"alpha":1
},
"background-color-2":"#bf5a9a",
"values":[0.00,0.00,0.00,0.00,0.00,0.00,0.00,0.00,0.00,0.00,0.00,0.00,0.00,56.76,0.00,0.00,0.00,0.00,0.00,0.00,0.00,0.00,0.00,0.00,0.00,0.00,0.00,272.40,817.20]
},
{
"background-color":"#efae69",
"line-color":"#efae69",
"text":"Revenue",
"marker":{
"border-color":"#efae69",
"background-color":"#efae69",
"alpha":1
},
"background-color-2":"#efae69",
"values":[200.00,125.00,50.00,50.00,50.00,125.00,100.00,50.00,25.00,50.00,50.00,25.00,25.00,50.00,125.00,175.00,50.00,50.00,125.00,350.00,75.00,175.00,75.00,225.00,280.00,690.00,570.00,1560.00,3300.00]
}
],
"guide":{
"line-gap-size":0,
"visible":true,
"line-color":"#000000",
"format":"$%v",
"line-width":1,
"tooltip-visible":false,
"alpha":0,
"tooltip-text":"%v"
},
"alpha":1,
"scale-y":{
"zooming":false,
"decimals":2,
"thousands-separator":",",
"negation":"currency",
"format":"$%v",
"text":""
},
"plotarea":{
"margin":"100px"
},
"plot":{
"spline":true,
"negation":"currency",
"format":"$%v"
},
"scale-x":{
"zooming":false,
"transform":{
"guide":{
"visible":false
},
"item":{
"visible":false
},
"all":"%M %d, %Y",
"type":"date"
},
"decimals":0,
"format":"%v",
"mirrored":0,
"text":"Shows",
"values":[1398729600000,1398816000000,1398902400000,1399248000000,1399334400000,1399420800000,1399593600000,1399680000000,1400025600000,1400112000000,1400716800000,1400976000000,1401062400000,1401235200000,1401321600000,1401494400000,1401580800000,1401667200000,1401753600000,1401840000000,1401926400000,1402012800000,1402099200000,1402185600000,1402272000000,1402358400000,1402444800000,1402531200000,1402617600000]
},
"type":"area"
}
zingchart.render({
id: "myChart",
height: 300,
width: 500,
data: chartJSON
});
<script src="http://www.zingchart.com/playground/lib/zingchart/zingchart-html5-min.js"></script>
<div id="myChart"></div>
I'm on the ZingChart team so please feel free to reach out if you have any questions about this answer or other ZingChart features.

ExtJS: How to force tabbed FormPanel fill all available space?

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.

Resources