This question already has an answer here:
Cytoscape.js - Set core background to dark?
(1 answer)
Closed 1 year ago.
I understand that I can edit the color of nodes and edges in cytoscape.js
For nodes, I can use selector: 'node'
For edges, I can use selector: 'edge'
Similar to this: Cytoscape.js - Set core background to dark?
What selector should I use for the background color? I want to toggle between a light and dark background (like a toggle for light/dark mode).
Thank you very much for anyone who can answer.
You can toggle the background color with some simple js code. I implemented this functionality with .addEventListener() on a button click:
var cy = window.cy = cytoscape({
container: document.getElementById('cy'),
boxSelectionEnabled: false,
autounselectify: true,
style: [{
selector: 'node',
css: {
'content': 'data(id)',
'text-valign': 'center',
'text-halign': 'center',
'height': '60px',
'width': '60px',
'border-color': '#fff',
'border-opacity': '1',
'border-width': '10px'
}
},
{
selector: '$node > node',
css: {
'padding-top': '10px',
'padding-left': '10px',
'padding-bottom': '10px',
'padding-right': '10px',
'text-valign': 'top',
'text-halign': 'center',
'background-color': '#bbb'
}
},
{
selector: 'edge',
css: {
'target-arrow-shape': 'triangle'
}
},
{
selector: ':selected',
css: {
'background-color': 'black',
'line-color': 'black',
'target-arrow-color': 'black',
'source-arrow-color': 'black'
}
}
],
elements: {
nodes: [{
data: {
id: 'n0'
}
},
{
data: {
id: 'n1'
}
},
{
data: {
id: 'n2'
}
},
{
data: {
id: 'n3'
}
},
{
data: {
id: 'n4'
}
},
{
data: {
id: 'n5'
}
},
{
data: {
id: 'n6'
}
},
{
data: {
id: 'n7'
}
},
{
data: {
id: 'n8'
}
},
{
data: {
id: 'n9'
}
},
{
data: {
id: 'n10'
}
},
{
data: {
id: 'n11'
}
},
{
data: {
id: 'n12'
}
},
{
data: {
id: 'n13'
}
},
{
data: {
id: 'n14'
}
},
{
data: {
id: 'n15'
}
},
{
data: {
id: 'n16'
}
}
],
edges: [{
data: {
source: 'n0',
target: 'n1'
}
},
{
data: {
source: 'n1',
target: 'n2'
}
},
{
data: {
source: 'n1',
target: 'n3'
}
},
{
data: {
source: 'n2',
target: 'n7'
}
},
{
data: {
source: 'n2',
target: 'n11'
}
},
{
data: {
source: 'n2',
target: 'n16'
}
},
{
data: {
source: 'n3',
target: 'n4'
}
},
{
data: {
source: 'n3',
target: 'n16'
}
},
{
data: {
source: 'n4',
target: 'n5'
}
},
{
data: {
source: 'n4',
target: 'n6'
}
},
{
data: {
source: 'n6',
target: 'n8'
}
},
{
data: {
source: 'n8',
target: 'n9'
}
},
{
data: {
source: 'n8',
target: 'n10'
}
},
{
data: {
source: 'n11',
target: 'n12'
}
},
{
data: {
source: 'n12',
target: 'n13'
}
},
{
data: {
source: 'n13',
target: 'n14'
}
},
{
data: {
source: 'n13',
target: 'n15'
}
},
]
},
layout: {
name: 'dagre',
padding: 5
}
});
document.getElementById("toggleBackgroundColor").addEventListener("click", function() {
let cy = document.getElementById('cy')
cy.style.background = (cy.style.background == "black") ? "white" : "black"
});
body {
font: 14px helvetica neue, helvetica, arial, sans-serif;
}
#cy {
position: absolute;
z-index: 999;
width: 100%;
height: 100%;
float: left;
}
<html>
<head>
<meta charset=utf-8 />
<meta name="viewport" content="user-scalable=no, initial-scale=1.0, minimum-scale=1.0, maximum-scale=1.0, minimal-ui">
<script src="https://unpkg.com/cytoscape#3.3.0/dist/cytoscape.min.js">
</script>
<script src="https://unpkg.com/jquery#3.3.1/dist/jquery.js"></script>
<!-- cyposcape dagre -->
<script src="https://unpkg.com/dagre#0.7.4/dist/dagre.js"></script>
<script src="https://cdn.rawgit.com/cytoscape/cytoscape.js-dagre/1.5.0/cytoscape-dagre.js"></script>
</head>
<body>
<b id="toggleBackgroundColor" style="cursor: pointer;color: green; z-index: 1">Toggle background-color</b>
<div id="cy"></div>
</body>
</html>
Related
I have the following custom JointJS element defined:
joint.shapes.webtp.BowTie = joint.dia.Element.define('webtp.BowTie',
{
size: { width: 400, height: 100 },
attrs: {
body: {
strokeWidth: 2,
stroke: '#000000',
fill: '#FFFFFF',
},
},
},
{
markup: [
{
tagName: 'g',
selector: 'g1',
attributes: {
class: 'rotatable',
},
children: [
{
tagName: 'g',
selector: 'g2',
attributes: {
class: 'scalable',
},
children: [
{
tagName: 'path',
selector: 'body',
attributes: {
d: 'm0,0l0,100l200,-25l200,25l0,-100l-200,25l-200,-25',
},
},
]
}
]
},
],
});
Using resize or scale on the shape does not resize it, however. It always ends up being 400x100.
I thought the issue originally was that it needed to be wrapped in a class="scalable" <g> but that didn't fix it either.
I also tried using<line>s instead of <path> but no luck.
Thanks!
The answer is in the refDResetOffset attribute, which (like the other ref custom attributes scales with the parent):
joint.shapes.webtp.BowTie = joint.dia.Element.define('webtp.BowTie',
{
attrs: {
body: {
strokeWidth: 2,
stroke: '#000000',
fill: '#FFFFFF',
refDResetOffset: 'm0,0l0,100l200,-25l200,25l0,-100l-200,25l-200,-25'
},
},
},
{
markup: [
{
tagName: 'g',
selector: 'g1',
attributes: {
class: 'rotatable',
},
children: [
{
tagName: 'g',
selector: 'g2',
attributes: {
class: 'scalable',
},
children: [
{
tagName: 'path',
selector: 'body',
},
]
}
]
},
],
});
I need an example with sideMenu react-native-navigation v2. Ideally, I want to navigate from side menu component to other screens (e.g stack with bottom tabs, accounts screen, FAQs screen)
currently this is my layout
Navigation.setRoot({
root: {
sideMenu: {
left: {
component: {
name: 'screen.SideMenu',
}
},
center: {
bottomTabs: {
id: 'tabs',
options: {
topbar: {
visible: true,
}
},
children: [
{
stack: {
id: 'tab1',
children: [
{
component: {
name: 'screen.Home',
options: {
topbar: {
visible: true
},
bottomTab: {
fontSize: 12,
text: 'Home',
icon: homeIcon,
textColor: theme.$tabColor,
selectedTextColor: '#000',
selectedIconColor: '#000',
}
}
},
},
]
}
},
{
stack: {
id: 'tab2',
children: [
{
component: {
name: 'screen.Events',
options: {
bottomTab: {
text: 'Events',
fontSize: 12,
icon: eventsIcon,
textColor: theme.$tabColor,
selectedTextColor: '#000',
selectedIconColor: '#000',
}
}
},
},
]
}
},
],
},
}
}
}
});
In my Side Menu component I am calling this function.
goToAccountsScreen = () => {
console.log(this.props.componentId)
Navigation.push(this.props.componentId, {
component: {
name: 'screen.Accounts',
}
})
}
how do I add the Accounts screen to my layout
i am using highcharts-export-server for export charts and send it to Email in PDF format
while i am trying to export that in localy it was working fine, but on live server when i am trying to export all the charts data-labels disappear.
this is the image from which was exporting from live server.
and here is the image which was exporting locally.
Here is my Code
exports.getPieChartImg = (seriesData, xOrLength, innersize, showLegend, width, height) => {
var chartOpts = {
chart: {
type: 'pie',
width: width,
height: height,
},
plotOptions: {
pie: {
innerSize: innersize || 80,
depth: 25,
allowPointSelect: true,
dataLabels: {
enabled: false,
format: '<b>{point.name}</b>: {point.percentage:.2f} %'
},
showInLegend: showLegend || false,
},
series: {
stacking: 'normal',
dataLabels: {
enabled: true,
color: '#6f6f6f',
format: '{point.percentage:.2f}',
crop: false,
overflow: "none",
},
pointWidth: 30,
}
},
legend: {
labelFormat: '<b>{name}</b> ({percentage:.2f})%',
useHTML: true,
},
series: [{
data: seriesData
}]
};
var exportSettings = generateExportSettings(chartOpts, 'Pie');
return generateBase64Chart(exportSettings)
}
function generateExportSettings(chartOpts, constr) {
return {
// b64: true,
instr: JSON.stringify(chartOpts),
noDownload: true,
constr,
globalOptions: {
colors: ['#3BB9DA', '#0F89A8', '#0B8F8B', '#1DB1AD', '#68E3DF', '#FFB469', '#F58B1F', '#D16900', '#FC3C3C', '#FF6666', '#FC8D8D', '#FCC0C0'],
lang: {
thousandsSep: ','
}
},
scale: false,
styledMode: false,
type: "image/png",
width: false,
};
}
function generateBase64Chart(exportSettings) {
return new Promise((resolve, reject) => {
highchartsExporter.export(exportSettings, function (err, res) {
if (err) {
return reject({
code: '1',
err,
msg: 'Error in stock chart',
exportSettings
})
}
return resolve({
code: '0',
msg: 'success',
data: 'data:image/png;base64,' + res.data,
})
});
})
}
remove node_module and reInstall it again.
and if not installed libfontconfig then install 'sudo apt-get install libfontconfig'
in normal highchart i get svg code with code like this
var chart = $('#container').highcharts()
svg = chart.getSVG();
So, how can i get svg code with this highchart directive in angular js???
i try like normal code but i didn't get svg code.
i use this directive for my highchart
https://github.com/rootux/angular-highcharts-directive
and this my code in controller.js
$scope.chartLogisticGIGR = {
options: {
tooltip: {
shared: true
}
},
xAxis: { // Primary xAxis
categories: $scope.nameMonths,
title: {
text: 'Month'
},
labels: {
enabled: true
},
min:0
},
yAxis: [{ // Primary yAxis
title: {
text: 'GI / GR in IDR'
},
labels: {
formatter: function () {
return Highcharts.numberFormat(this.value / 1000000,'0') + ' mil';
}
}
}, { // Secondary yAxis
title: {
text: 'Balance'
},
labels: {
formatter: function () {
return Highcharts.numberFormat(this.value / 1000000,'0') + ' mil';
}
},
}],
series: [{
name: 'AGP - Goods Receipt',
type: 'column',
stacking: 'normal',
stack: '1',
data: $scope.dataLogisticGIGR_AGP_GR,
color: $rootScope.getColor('AGP Ext'),
tooltip: {
pointFormat: '<span style="color:{series.color}">{series.name}: {point.y:,.0f}</span><br/>'
}
},{
name: 'AGP - Goods Issue',
type: 'column',
stacking: 'normal',
stack: '1',
data: $scope.dataLogisticGIGR_AGP_GI,
color: $rootScope.getColor('AGP Int'),
tooltip: {
pointFormat: '<span style="color:{series.color}">{series.name}: {point.y:,.0f}</span><br/>'
}
},{
name: 'AGP - Balance',
type: 'spline',
data: $scope.dataLogisticGIGR_AGP_Balance,
color: $rootScope.getColor('AI 2'),
tooltip: {
pointFormat: '<span style="color:{series.color}">{series.name}: {point.y:,.0f}</span><br/>'
}
},{
name: 'AI - Goods Receipt',
type: 'column',
stacking: 'normal',
stack: '3',
data: $scope.dataLogisticGIGR_AI_GR,
color: $rootScope.getColor('AI'),
tooltip: {
pointFormat: '<span style="color:{series.color}">{series.name}: {point.y:,.0f}</span><br/>'
}
},{
name: 'AI - Goods Issue',
type: 'column',
stacking: 'normal',
stack: '3',
data: $scope.dataLogisticGIGR_AI_GI,
color: $rootScope.getColor('AP 2'),
tooltip: {
pointFormat: '<span style="color:{series.color}">{series.name}: {point.y:,.0f}</span><br/>'
}
},{
name: 'AI - Balance',
type: 'spline',
data: $scope.dataLogisticGIGR_AI_Balance,
color: $rootScope.getColor('AP'),
tooltip: {
pointFormat: '<span style="color:{series.color}">{series.name}: {point.y:,.0f}</span><br/>'
}
}],
title: {
text: ''
},
loading: false
};
in this is my code in directive highchart
'use strict';
angular.module('chartsExample.directives',[])
.directive('chart', function () {
return {
restrict: 'E',
template: '<div></div>',
scope: {
chartData: "=value"
},
transclude:true,
replace: true,
link: function (scope, element, attrs) {
var chartsDefaults = {
chart: {
renderTo: element[0],
type: attrs.type || null,
height: attrs.height || null,
width: attrs.width || null
}
};
//Update when charts data changes
scope.$watch(function() { return scope.chartData; }, function(value) {
if(!value) return;
// We need deep copy in order to NOT override original chart object.
// This allows us to override chart data member and still the keep
// our original renderTo will be the same
var newSettings = {};
angular.extend(newSettings, chartsDefaults, scope.chartData);
var chart = new Highcharts.Chart(newSettings);
});
}
};
});
Thank's....
I'm trying to build my container in the initialize() function by creating all my components then calling this.setItems([...]). For some reason, my components are being placed on top of each other, rather than after each other in the vbox.
I am able to grab the top component and move it down, as is shown in the attached image.
Simplified view with two components:
Ext.define("Sencha.view.DynamicView", {
extend: 'Ext.Container',
xtype: 'dynamic-view',
requires: [],
config: {
layout: {
type: 'vbox'
},
flex: 1,
cls: 'view-container',
store: null
},
createRadioSet: function() {
this.radioFieldSet = Ext.create('Ext.form.FormPanel', {
flex: 1,
items: [{
xtype: 'fieldset',
title: 'About You',
defaults: {
xtype: 'radiofield',
labelWidth: '40%'
},
instructions: 'Favorite color?',
items: [{
name: 'color',
value: 'red',
label: 'Red'
},
{
name: 'color',
value: 'green',
label: 'Green'
}
]
}]
});
return this.radioFieldSet;
},
createCheckboxSet: function() {
this.checkboxFieldSet = Ext.create('Ext.form.FormPanel', {
flex: 1,
items: [{
xtype: 'fieldset',
title: 'Check all that apply',
defaults: {
xtype: 'checkboxfield',
labelWidth: '40%'
},
instructions: 'Tell us all about yourself',
items: [{
name: 'firstName',
value: 'First',
label: 'First Name'
},
{
name: 'lastName',
value: 'Last',
label: 'Last Name'
}
]
}]
});
return this.checkboxFieldSet;
},
initialize: function() {
this.callParent(arguments); // #TDeBailleul - fixed
var r1 = this.createRadioSet();
var cbSet1 = this.createCheckboxSet();
// this.add(cbSet1);
// this.add(r1);
this.setItems([r1, cbSet1]);
}
});
My problem was that I was adding my components incorrectly in a tab controller. I'm including an example that creates buttons on one tab and the checkboxes on another tab.
Ext.Loader.setConfig({
enabled : true
});
Ext.application({
name : ('SF' || 'SenchaFiddle'),
createRadioSet: function () {
this.radioFieldSet = Ext.create('Ext.form.FormPanel', {
height: '300px',
width: '300px',
items: [
{
xtype: 'fieldset',
title: 'Title',
defaults: {
xtype: 'radiofield',
labelWidth: '40%'
},
instructions: 'Favorite color?',
items: [
{
name: 'color',
value: 'red',
label: 'Red'
},
{
name: 'color',
value: 'green',
label: 'Green'
}
]
}
]
});
return this.radioFieldSet;
},
createButton: function(i) {
return Ext.create('Ext.Button', {
text: 'hello' + i,
height: '50px',
width: '100px'
});
},
launch: function () {
var tabPanel = Ext.create('Ext.tab.Panel', {
layout: 'card',
padding: 2,
tabBarPosition: 'bottom',
items: [
{
id: 'tab1',
title: 'Home',
layout: 'hbox',
xtype: 'container',
iconCls: 'home'
},
{
id: 'tab2',
title: 'More',
layout: 'hbox',
xtype: 'container',
iconCls: 'star'
}
]
});
Ext.Viewport.add(tabPanel);
var a,b;
for (var i = 0; i < 3; i++) {
a = this.createButton(i);
b = this.createRadioSet();
// tabPanel.getAt(0).add(b); // Reference the proper component: Tab 1
Ext.getCmp('tab1').add(a);
Ext.getCmp('tab2').add(b);
}
}
});