Cytoscape height canvas fixed to 0 - css

I'm using cytoscape.js and when I try to initialize it, I found the canvas height to 0. I don't understand why.
This is my js :
var cy = cytoscape({container: document.getElementById("mapping")});
cy.add([
{group: "nodes", data: {id: "n0"}, position: {x:0, y:0}},
{group: "nodes", data: {id: "n1"}, position: {x:100, y:50}},
{group: "edges", data: {id: "e0", source: "n0", target: "n1"}}
]);
console.log(cy.container());
Here is the jsfiddle where you can see the "height":0px in log and nothing in rendered.

If you initialize cytoscape with static data, consider doing it like the documentation shows:
var cy = cytoscape({
container: document.getElementById('cy'), // container to render in
elements: [ // list of graph elements to start with
{ // node a
data: { id: 'a' }
},
{ // node b
data: { id: 'b' }
},
{ // edge ab
data: { id: 'ab', source: 'a', target: 'b' }
}
],
style: [ // the stylesheet for the graph
{
selector: 'node',
style: {
'background-color': '#666',
'label': 'data(id)'
}
},
{
selector: 'edge',
style: {
'width': 3,
'line-color': '#ccc',
'target-arrow-color': '#ccc',
'target-arrow-shape': 'triangle'
}
}
],
layout: { /!!!
name: 'grid',
rows: 1
}
});
you dont specify a layout in your sample code, i rarely do it like that, i simply add the nodes/edges and call the layout algorithm i want, the rest of your code seems ok, did you include all scripts and css files for cytoscape?

Related

Series Data is not rendered in echarts vue 3

am look to answer this bug on Apache Echarts with vue 3 Composition API
am using apache echarts for rendering maps as a background, the maps is become from GeoJSON data of province accross my country : Source GeoJSON, the rendering process of GeoJson was successfuly as expected, but take a this code bellow, Here is problems occurs, am expected that after rendering the chart, the series that was defined is expect rendered also, but there is not yet, so whats am wrong? FYi : am need to rendr the chart and make tooltip of each province section of chart series (simplify Chloropeth Mapping), am following many guide but there is not works yet. am also referring of the official documentation of apache echart example her Chloropet Apacghe Echarts, but not working as expeccted. so is there can give me the suggestion of am wrong ? great thanks for all, looking best oppinions and suggestion from you here is my result that is not expected :
just rendered maps, not the defined series
and here is my expectation(same as example) : Expected the series is rendered in maps section and if am hovered my cursor the tooltip is show the data value of the given series;
Apache Echart COnfiguration in Vue (as reactive)
title: {
text: 'Peta Sebaran Arsiparis (2022)',
subtext: 'Open source data',
},
toolbox: {
show: true,
orient: 'vertical',
left: 'right',
top: 'center',
feature: {
dataView: { readOnly: false },
restore: {},
saveAsImage: {}
}
},
tooltip: {
trigger: 'item',
showDelay: 0,
transitionDuration: 0.2
},
geo: {
map: "indonesia-province",
roam: true,
nameProperty: "Propinsi",
tooltip: {
show: true
},
itemStyle: {
color: '#fff'
},
emphasis: {
itemStyle: {
color: undefined,
borderColor: 'green',
borderWidth: 2
},
label: {
show: false
}
},
select: {
itemStyle: {
color: 'green'
},
label: {
show: false,
textBorderColor: '#fff',
textBorderWidth: 2
}
},
regions: generateRegions(provinceNames)
},
visualMap: {
min: 800,
max: 50000,
text: ['High', 'Low'],
realtime: false,
calculable: true,
inRange: {
color: ['lightskyblue', 'yellow', 'orangered']
}
},
series: [
{ // 地图配置
name: 'Province daatatasdbashdvjk',
type: 'map',
map: 'indonesia-province', // 自定义扩展图表类型
nameProperty: "Propinsi",
geoIndex: 0,
data: generateMapData(provinceNames)
}
],
}

How to visualize a vaadin web component

Follow the vaadin guidence of web component to create a meter:
#Tag("dw-meter")
#NpmPackage(value = "echarts", version = "5.2.2")
#JsModule("../node_modules/echarts/dist/echarts.js")
#JsModule("./dwmeter.webcomponent.js")
public class DwMeter extends Div {
}
Integrate the meter into a demo application:
DwMeter meter = new DwMeter();
meter.setWidth("100px");
meter.setHeight("100px");
add(meter);
Application is executed successfully, but the meter is not displayed.
Trace the web page, Tag <dw-meter> and <canvas> are generated correctly :
Changed Tag <dw-meter> to <div>, the meter is visible:
My question is how to visualize an user-defined vaadin web component? e.g. <dw-meter>
attached dwmeter.webcomponent.js:
import * as ECharts from "echarts";
class dwMeter extends HTMLElement {
constructor() {
super();
}
init(o) {
// Shadow root
const shadowRoot = this.attachShadow({mode: 'open'});
// container
var container = document.createElement('div');
shadowRoot.appendChild(container);
// Garantee all elements are rendered
setTimeout(function() {
var myChart = ECharts.init(o); //container
myChart.setOption(o.options());
}, 0);
}
options() {
const gaugeData = [
{
value: 0.25,
name: 'pressure',
title: {
offsetCenter: ['0%', '90%']
}
}
];
var option = {
series: [
{
type: 'gauge',
min: 0,
max: 0.25,
splitNumber: 5,
progress: {
show: false,
width: 5
},
axisLine: {
lineStyle: {
width: 5,
color: [[1, 'rgba(36,177, 76)']]
}
},
axisTick: {
show: false
},
splitLine: {
length: -10,
lineStyle: {
width: 5,
color: 'rgba(36,177, 76)'
}
},
axisLabel: {
distance: -20,
color: '#999',
fontSize: 10
},
anchor: {
show: true,
showAbove: true,
size: 12,
itemStyle: {
borderWidth:0,
color: 'rgba(36,177, 76)',
}
},
pointer: {
icon: 'path://M2.9,0.7L2.9,0.7c1.4,0,2.6,1.2,2.6,2.6v115c0,1.4-1.2,2.6-2.6,2.6l0,0c-1.4,0-2.6-1.2-2.6-2.6V3.3C0.3,1.9,1.4,0.7,2.9,0.7z',
width: 5,
length: '60%',
offsetCenter: [0, '8%'],
itemStyle: {
color: 'rgba(36,177, 76)'
}
},
title: {
color: 'rgba(36,177, 76)',
fontSize: 14,
fontWeight: 800,
fontFamily: 'Arial',
offsetCenter: [0, '100%']
},
detail: {
valueAnimation: true,
fontSize: 12,
offsetCenter: [0, '55%'],
show: true
},
data:gaugeData
}
]
};
return option;
}
connectedCallback() {
this.init(this);
}
disconnectedCallback() {
}
attributeChangedCallback() {
}
clone(origin, target) {
var target = target || {};
for(var prop in origin) {
target[prop] = origin[prop];
}
}
}
window.customElements.define('dw-meter', dwMeter);
The reason that nothing is shown when you're using the <dw-meter> custom element is that it has a shadow root, while the actual content (rendered by the ECharts library) is outside that shadow root. Whenever an element has a shadow root, then the content of the shadow root will be rendered and the content outside the shadow root will be rendered in the location of a <slot> element inside the shadow root. If there is no <slot>, then it won't be shown anywhere at all.
If you want to use the shadow root to encapsulate styles, then you would at the very least need to change ECharts.init(o) to instead do ECharts.init(container). There might also be other things that you need to change to make it work properly, but that depends on exactly how ECharts is implemented. The o parameter that I assume you're passing from the server is most likely redundant since this is already a reference to the top-level element.

How to style the attributes of a label when defining a joint.dia.Link?

I looked into dia.Link.prototype.attr with a few examples and understand that Link attributes can be directly defined this way:
joint.dia.Link.define('flow.Link', {
router: {
name: 'normal'
},
connector: {
name: 'normal'
},
attrs: {
'.tool-options': {
'data-tooltip-class-name': 'small',
'data-tooltip': 'Inspect me',
'data-tooltip-position': 'left'
},
'.marker-source': {
fill: 'none',
stroke: 'none'
},
'.connection-wrap': {
fill: 'none'
},
'.connection' : {
stroke: '#0000ff',
strokeWidth: 2,
strokeDasharray: '0',
fill: 'none'
},
'.marker-target': {
fill: '#0000ff',
stroke: '#0000ff',
d: 'M 10 0 L 0 5 L 10 10 z'
},
}
});
But is there a way I can define in here the default dia.Link.prototype.label attributes? E.g.:
joint.dia.Link.define('flow.Link', {
labels: {
'.label': {
position: 1, // label at the target
attrs: {
text: { fill: 'blue', text: 'My default link label' },
rect: { fill: 'yellow' },
}
}
},
// other properties ...
});
I tried several variations of the above code without success, but since .labels is a group of link, wouldn't something like this be possible?
An alternative to this I attempted was to programmatically style the first default label through link.label(index, properties, opt), but once I add, for example, one more label to the link through the inspector, both labels attributes are lost (the former and the added one)...
Right now it is not possible to change the default label attributes (unless the dia.LinkView.prototype.updateLabels() method is overriden). I've created an issue in the JointJS repository.
If you add labels through the ui.Inspector plugin, you can modify the labels inspector definition, so that every new label has the desired properties. For that use the defaultValue field option and make the inspector field invisible as shown in the example below.
labels: {
type: 'list',
item: {
type: 'object',
properties: {
attrs: {
text: {
text: {
type: 'text',
defaultValue: 'label',
},
// `labels/{n}/attrs/text/fill` fake field
fill: {
type: 'text',
// The value of the property,
// which is set when a new label is created
defaultValue: 'blue',
// Make this field invisible
// So the user won't be able to change it
attrs: { '.field': { style: 'display:none' }}
}
},
rect: {
// `labels/{n}/attrs/rect/fill` fake field
fill: {
type: 'text',
defaultValue: 'yellow',
attrs: { '.field': { style: 'display:none' }}
}
}
}
}
}
}

Highlights a line with a color in a grid - ExtJS

I tried to get some custom css to customize my grid in ExtJS.
I was struggling with the cls input, but then I found an other way which worked.
What I want is to highlight a whole line regarding a value
Here is my code in the View :
Ext.define('AM.view.user.List' ,{
extend: 'Ext.grid.Panel',
alias: 'widget.userlist',
title: 'Test ',
store: 'Users',
initComponent: function() {
this.columns = [
{header: 'ID du CPE', width: 150, dataIndex: 'ID', flex: 0},
{header: 'Modèle', dataIndex: 'Modele', flex: 1},
{header: 'Firmware', dataIndex: 'firmware', flex: 1},
{header: 'Année MeS', dataIndex: 'annee', flex: 1},
{header: 'Alerte', dataIndex: 'statut', hidden: true, hideable: false, flex: 0},
{header: 'Etat', id:'CC', dataIndex: 'alerte', flex: 0, width: 100}
and there is my code in CSS :
.x-grid-table .x-grid-row-selected .x-grid-cell-CC {
background-color: #1DAE00 !important; }
.x-grid-table .x-grid-row-over .x-grid-cell-CC {
background-color: #1DAE00 !important; }
For the moment, it works (the id=CC creates the link with the css file).
When I pass my mouse over a line or click on a line, the value concerned in the column "Etat" are highlighted in green.
I tried the cls method but I didn't succeed to make it work.
The main reason, in all the tutorials I found, the classical way to do it is :
Ext.create('Ext.grid.Panel', {
cls: 'CC',
But in my case, I have :
Ext.define('AM.view.user.List' ,{
extend: 'Ext.grid.Panel',
and I don't know where to put the cls attribute. Itried several ways but I always end up with an error.
So here's my two questions :
1- how to highlights the whole line (not only a line from a single column)
2- how to automatically highlight a whole line regarding a value contained in this one ?
Sorry if it's not very clear :s.
You need to provide a getRowClass method in the grid's view configuration. Like this:
,viewConfig: {
getRowClass: function(record) {
return record.get('highlight')
? 'highlight'
: '';
}
}
Here's a complete example on how to do that in class extended from grid panel:
Ext.define('My.Grid', {
extend: 'Ext.grid.Panel'
,store: {
fields: ['foo', 'bar', 'highlight']
,proxy: {
type: 'memory'
,reader: 'array'
}
,data: [[1, 'Bar', false],[2, 'Baz', false],[3, 'Bat', true]]
}
,columns: [
{dataIndex: 'foo', text: "Foo"}
,{dataIndex: 'bar', text: "Bar"}
,{dataIndex: 'highlight', text: "Highlighted"}
]
,viewConfig: {
getRowClass: function(record) {
return record.get('highlight')
? 'highlight'
: '';
}
}
});
That would work with the follwing CSS rule. Note the selector to catch highlighted rows (.x-grid-row.highlight with no spaces), and the fact that the background is applied to background TD, not directly to the TR element, which would not work.
.x-grid-row.highlight .x-grid-td {
background-color: palegreen;
}
Thanks to rixo, here's the code which makes it work !
viewConfig: {
getRowClass: function(record) {
var red = record.get('statut') // shows if a CPE is dead or not (HS = Dead)
if (red == 'HS') {
return 'highlight'
}
}
},

Highcharts - where to place style and changing style for one wedge in a pie chart

I have a Highcharts pie chart here: http://jsfiddle.net/6PbbR/52/
$(function () {
var chart;
$(document).ready(function() {
// Radialize the colors
Highcharts.getOptions().colors = Highcharts.map(Highcharts.getOptions().colors, function(color) {
return {
radialGradient: { cx: 0.5, cy: 0.3, r: 0.7 },
stops: [
[0, color]
]
};
});
// Build the chart
chart = new Highcharts.Chart({
chart: {
renderTo: 'container',
plotBackgroundColor: null,
plotBorderWidth: null,
plotShadow: false,
shadow: true,
},
tooltip: {
enabled: false
},
title: {
text: ""
},
plotOptions: {
pie: {
allowPointSelect: true,
size:'68%',
cursor: 'pointer',
shadow: true,
dataLabels: {
enabled: true,
distance: -40,
style: {
width: '100px'
},
color: '#fff',
connectorColor: '#000000',
formatter: function() {
return '<b style="font-family:arial;font-size:10px;font-weight:bold">'+ this.point.name +'</b> ';
}
}
}
},
series: [{
type: 'pie',
name: 'Income Investments',
data: [
['FLOATING RATE FUNDS', 16.667],
{
name: 'Corporate Capital Trust',
y: 16.667,
sliced: true,
selected: true
},
['BONDS', 16.667],
['ANNUITIES', 16.667],
['REITs', 16.667],
['CDs', 16.667]
]
}],
colors: [
'#83a3c6',
'#98012e',
'#19699b',
'#ae9e8e',
'#5283b0',
'#958370'
],
});
});
});
Two questions:
1) I'm not happy with how I inserted inline style in plotOptions{pie{formatter. Where is a better place to do this using the API, instead of brute-forcing inline style?
2) I would like to change the font-family for the red wedge (and possibly tweak fix its positioning/margins). What's the best way of doing this?
Edit: Ideally, I can accomplish my needs without needing to go outside the above function. Is it possible to attach style to just one data point using the API?
It's a simple html, so you can add a class or id and then style using css.
js
formatter: function() {
return '<b id="myTooltipId">'+ this.point.name +'</b> ';
}
css
#myTooltipId {
font-family: arial;
font-size: 10px;
font-weight:bold
}
Update:
Inside formatter you can get the slice properties using this.
So you just have to check if the slice is the one you want.
formatter: function() {
// key is the slice name
if (this.key == 'CDs') {
return '<b id="myTooltipId">'+ this.point.name +'</b> ';
} else {
return this.value;
}
}

Resources