it's me again with a new noobish question. I have the following Blessed for NodeJS variable:
var box = blessed.box({
width: '100%',
height: 1,
content: someContent,
tags: true,
style: {
fg: 'white',
bg: 'magenta',
hover: {
bg: 'green'
}
}
});
I will be creating multiple of these, and it wouldn't be optimal to declare each one, so I think a class would be perfect. What confuses me is the blessed.box thing. I don't know how to implement it into a class.
How can I create a reusable class with the above parameters? Thanks.
EDIT:
Okay, I figured out how to reuse the above variable - it's just a matter of adding it in a function:
function createBox (content, top) {
var box = blessed.box({
width: '100%',
height: 1,
top: top,
content: content,
tags: true,
style: {
fg: 'white',
bg: 'magenta',
hover: {
bg: 'green'
}
}
});
screen.append(box);
box.on('click', function(data) {
box.setContent('{center}Some different {red-fg}content{/red-fg}.{/center}');
screen.render();
});
};
This function can then be called any number of times:
createBox('someContent', 1);
createBox('someContent', 2);
Sorry for asking before thinking it through. Turned out to be easy.
I am not 100% sure I understand your question. It feels like you want to know how to implement above in a class syntax. Which in any case is just syntactic sugar from es15. Hope this helps. I am using the spread operator for passed options.
class Blessed {
constructor(...options) {
this.width = options.width;
//... the rest of your properties here
}
}
const box = new Blessed({
width: '100%',
height: 1,
content: someContent,
tags: true,
style: {
fg: 'white',
bg: 'magenta',
hover: {
bg: 'green'
}
}
});
Related
I am trying to export my ag-grid as an Excel document. I added in excelStyles just for the header, but they aren't being applied to the document.
Here is the code:
var columnWidth = 100;
var params = {
columnWidth,
sheetName: 'Types',
suppressTextAsCDATA: false,
rowHeight: 25,
headerRowHeight: 25,
allColumns: true,
excelStyles: [
{
id: 'header',
font: {
color: '#000000',
bold: true
},
interior: {
color: '#bed4f7',
pattern: 'Solid'
}
}
]
}
gridOptions.api.exportDataAsExcel(params);
}
What do I need to change to make it work?
For anyone who makes the same stupid mistake I did, you need to define the excelStyles in the gridOptions, not the params!
I am trying to pass a Series number in a Google Chart option through a variable. However it is not accepting it as a variable and instead is taking it as a string. You can see in Image1 that I have passed in Series parameter SecondseriesColumnNumber as a variable and value is 1.
Image 1
However in the output it is considering it as a string but not as the series number as shown below
Image 2
Other parameters are considering the values correctly but not the series one. How can I make this work? My code is below
var options = {
title: title,
width: width,
height: height,
bar: { groupWidth: '75%' },
chartArea: { left: "8%", right: "8%", top: "10%", width: "100%", height: "75%" },
backgroundColor: 'transparent',
tooltip: { textStyle: { color: 'black' }, isHtml: true },
isStacked: isStacked,
seriesType: seriesType,
series: { SecondseriesColumnNumber: { type: SecondseriesType } },
hAxis: { slantedText: true }
};
var chart = new google.visualization.ComboChart($('DivSeries')[0]);
the problem has to do with JavaScript syntax.
you are not able to use a variable as a key in the definition of an object.
you must first create the object, then you can add additional keys using variables.
there are two ways to get / set values of object keys, once the object is defined.
both of the following will return the same value for title.
var title = options.title;
var title = options['title'];
where as in the latter, we can substitute a variable for the title key.
var key = 'title';
var title = options[key];
in this case, define the static options as needed.
var options = {
title: title,
width: width,
height: height,
bar: { groupWidth: '75%' },
chartArea: { left: "8%", right: "8%", top: "10%", width: "100%", height: "75%" },
backgroundColor: 'transparent',
tooltip: { textStyle: { color: 'black' }, isHtml: true },
isStacked: isStacked,
seriesType: seriesType,
series: {},
hAxis: { slantedText: true }
};
then you can use a variable to further define the series option.
var SecondseriesColumnNumber = 1;
options.series[SecondseriesColumnNumber] = { type: SecondseriesType };
I would like to get shadow like effect in line graphs in Highcharts. I searched for this property but couldn't find it anywhere.
This can be done by using the shadow property, like this:
plotOptions: {
series: {
shadow: {
color: 'red',
offsetX: 0,
offsetY: 5,
opacity: 0.2,
width: 5
}
}
},
Working example: http://jsfiddle.net/ewolden/zfscoz4f/2/
I created a hyperlink element by jointjs. Now, I want to call a function from this element.
My Code is here:
new joint.shapes.custom.ElementLabelLink({
id: node.id.toString(),
size: { width: width, height: height },
attrs: {
a: { 'xlink:href': 'https://www.google.co.in', 'xlink:show': 'new', cursor: 'pointer''},
text: {
text: formattedNodeName,
'font-size': letterSize,
'font-family': 'Inspira',
'x-alignment': 'middle'},
rect: {
width: width, height: height,
rx: 5, ry: 5,
stroke: '#555',
fill: 'lightgreen'
}
}
});
In this code, what I have to add or there is some other way.
What I am trying to do, this is feasible or not?
I got a solution for my query. I am posting answer here; by which someone can get help. No need to do anything with Element or Link.
Just executed an event on paper div.
Here is the code:
paper.on('cell:pointerdblclick',function(cellView, evt, x, y) {
demo();
});
function demo(){
alert("1");
}
I am doing too many things inside pointerdblclick event call. Here is the idea by which some one can get help.
I have a button in my highcharts chart that uses the following code:
exporting: {
buttons: {
backButton: {
_titleKey: 'backTitle',
enabled: theChart.buttonOn,
x: 0,
y: 300,
onclick: function () {
$(this).parents(".chart").data('chart', $(this).parents(".chart").data('mainChart'));
$(this).parents(".chart").trigger('redoChart');
},
text: 'Click to return to full graph',
width:200,
theme: {
'stroke-width': 1,
stroke: 'black',
fill: '#cccccc',
states: {
hover: {
'stroke-width': 1,
stroke: 'black',
fill: '#cccccc'
},
select: {
'stroke-width': 1,
stroke: 'black',
fill: '#cccccc'
}
}
}
}
}
}
When I click on this button, nothing happens. I've determined that it is because $(this).parents(".chart") is not appropriately identifying the container div for my chart (which does have the class "chart"). If I replace $(this).parents(".chart") with $("#thechart"), everything is fine.
Use:
$(this.container).parents('.chart').hide();
In the button handler this is a highcharts object. this.container is the highcharts created div within your div. So, to hide the whole thing, you're looking up to the parent that you added a chart class to.