I want to add a custom notes on the tool box in react echarts.
Using below code i am able to add the text box.
When i click on text box i want to write some text and save it to the load chart. Is there any way to acheive this functionality. Please let me know. Thanks .
enter code here brush : {
toolbox : ['rect'],`enter code here`
brushLink : [0 , 1, 2 , 3],
brushType : 'rect',
brushMode : ['single'],
outOfBrush: {
color: '#abc'
},
brushStyle: {
borderWidth: 2,
color: 'rgba(0,0,0,0.2)',
borderColor: 'rgba(0,0,0,0.5)',
},
throttleDelay: 300,
},
toolbox : {
show : false,
feature : {
brush : {
type : ['rect'],
title : {
rect : 'Active Brush'
}
}
}
}
Related
I have API that generate pdf file after saving values into database. My customer needed to generate this pdf and then send it by mail. He sended my photo of how should that pdf look like. I recreated it, it looks same as in that picture but it is hard to read because there are missing vertical lines. I looked trought docs and also tried to google, bud I did not found anyithing.
Here is how my PDF looks like:
As you can see, vertical lines are missing and because of that is harder to read.
Is there any possibility to add vertical lines?
Here is my code:
let doc = new PDFDocument({ margin: 30, size: "A4" });
doc.pipe(
fs.createWriteStream(`${problemName}_${creationDate}` + ".pdf")
);
const table = {
title:
"Zápis koordinátora " +
koordinatorName +
" zo dna " +
creationDate +
".",
divider: {
header: { disabled: true },
horizontal: { disabled: false, width: 1, opacity: 1 },
padding: 5,
columnSpacing: 10,
},
headers: [
{ width: 130, renderer: null },
{ width: 130, renderer: null },
{ width: 130, renderer: null },
{ width: 130, renderer: null },
],
rows: [
["Nazov", problemName, "", ""],
[
"Nazov staveniska (Projekt)",
constructionName,
"Na vedomie komu",
"mailing list 1",
],
[
"Vytvoril koordinator BOZP",
koordinatorName,
"Priorita",
problemPriority,
],
["Datum zistenia", creationDate, "Datum odstranenia", ""],
[
"Zodpovedny za vyriesenie zistenia",
"Janko Maly",
"Celkovy pocet zisteni v dni",
10,
],
["Miesto zistenia", discoveryPlace, "Zistenie císlo", 1],
["Popis", problemText],
[
"Navrh na udelenie sankcie",
"50€",
"Pre spolocnost",
adressedFor,
],
],
};
doc.table(table, {
prepareHeader: () => doc.font("Helvetica-Bold").fontSize(8),
prepareRow: (row, indexColumn, indexRow, rectRow, rectCell) => {
doc.font("Helvetica").fontSize(8);
indexColumn === 0;
},
});
doc.end();
I am using pdfkit-table package.
Thank you all
By definition simple PDF structure is not tabular there is one cell (the page) and that one column can be subdivide into two or more rows with null spaces between the text sub columns.
That is why tables are difficult to sub[ex]tract
So adding coloured rows in one area is fairly simple to make like a table, thus to make vertical sub dividers is more difficult, However that feature was added in January 2022 https://github.com/natancabral/pdfkit-table/files/7865078/document-5.pdf
For exsample see https://github.com/natancabral/pdfkit-table/issues/16#issuecomment-1012389097
Do we have any way to delete a column in dojox/grid/EnhancedGrid. Please let us know if there is any solution for this.
Please find my sample grid.
Details: it creates a dojox/grid/EnhancedGrid and has an action associated with clicking a header row. What action can I add to delete the column?
var dataStore = new ObjectStore({objectStore: objectStoreMemory});
// grid
grid = new EnhancedGrid({
selectable: true,
store: dataStore,
structure : [ {
name : "Country",
field : "Country",
width : "150px",
reorderable: false,
editable : true
}, {
name : "Abbreviation",
field : "Abbreviation",
width : "120px",
reorderable: false,
editable : true
}, {
name : "Capital",
field : "Capital",
width : "100%",
reorderable: false,
editable : true
} ],
rowSelector: '20px',
plugins: {
pagination: {
pageSizes: ["10", "25", "50", "100"],
description: true,
sizeSwitch: true,
pageStepper: true,
gotoButton: true,
maxPageStep: 5,
position: "bottom"
}
},
dodblclick: function() {
alert("Header clicked");
}
}, "grid");
grid.startup();
you need to use the method
grid.setStructure(newLayout);
or
grid.set('structure',newLayout);
here newLayout is the layout that you need to create without the columns that you need.
Hope this helps.
I'm simply trying to load d3 into a Qlik Sense extension and running into issues, hoping someone can help as I'm sure it's relatively simple.
My template.html looks like this:
<div qv-extension style="height: 100%; position: relative; overflow: auto;" class="ng-scope">
{{ html }}
<div class="mydiv">
</div>
</div>
My javascript code looks like the below:
define( ["qlik",
"jquery",
"text!./style.css",
"text!./template.html",
"./d3/d3",
],
function (qlik, $, cssContent, template ) {'use strict';
$("<style>").html(cssContent).appendTo("head");
return {
template: template,
initialProperties : {
qHyperCubeDef : {
qDimensions : [],
qMeasures : [],
qInitialDataFetch : [{
qWidth : 10,
qHeight : 500
}]
}
},
definition : {
type : "items",
component : "accordion",
items : {
dimensions : {
uses : "dimensions",
min : 0
},
measures : {
uses : "measures",
min : 0
},
sorting : {
uses : "sorting"
},
settings : {
uses : "settings",
items : {
initFetchRows : {
ref : "qHyperCubeDef.qInitialDataFetch.0.qHeight",
label : "Initial fetch rows",
type : "number",
defaultValue : 500
}
}
}
}
},
support : {
snapshot: true,
export: true,
exportData : true
},
paint: function ( ) {
console.log("painting...");
var svg = d3.select(".mydiv")
.append("svg")
.attr("width", width)
.attr("height", height);
},
controller: ['$scope', function (/*$scope*/) {
}]
};
} );
and the error i get in the dev tools look like this:
My folder structure is:
What am I doing wrong? Why can't it see the d3 file?
adding d3 as an argument to your function:
function (qlik, $, cssContent, template , d3)
resolved this issue
How can I reduce the spacing in a ResponsiveGridLayout? In this image I want that there is no sapcing betweem the SearchField an the Button. I've searched via Google and take a close look in the API, but I found nothing.
EDIT:
var oResponsiveLayout = new sap.ui.layout.form.ResponsiveGridLayout({
columnsL : 3,
columnsM : 3,
columnS : 1
});
var oFormLayout = new sap.ui.layout.form.Form({
layout : oResponsiveLayout,
formContainers : [ new sap.ui.layout.form.FormContainer({
formElements : [ new sap.ui.layout.form.FormElement({
fields : [ this.oSearchField = new sap.ui.commons.SearchField({
width : "100%",
placeholder : "Suchtext / ID",
search : this._onSearchRequest.bind(this),
layoutData : new sap.ui.layout.GridData({
span : "XL9 L9 M6 S6"
})
}) ]
}) ]
}), new sap.ui.layout.form.FormContainer({
formElements : [ new sap.ui.layout.form.FormElement({
fields : [ this.oArrowUp = new sap.ui.commons.Button({
layoutData : new sap.ui.layout.GridData({
span : "XL1 L1 M2 S2"
}),
width : "100%",
icon : "resources/images/arrow_up.png",
tooltip : new sap.ui.commons.RichTooltip({
text : "Vorheriges Element der Suche anzeigen"
}),
press : this._onSearchArrowUpRequest.bind(this)
}), this.oArrowDown = new sap.ui.commons.Button({
layoutData : new sap.ui.layout.GridData({
span : "XL1 L1 M2 S2"
}),
width : "100%",
icon : "resources/images/arrow_down.png",
tooltip : new sap.ui.commons.RichTooltip({
text : "Nächstes Element der Suche anzeigen"
}),
press : this._onSearchArrowDownRequest.bind(this)
}) ]
}) ]
}),
Here is the solution; you can add empty Label before SearchField and set the labelSpan(M/L/S) according to your need.
It will also be responsive, so you are safe to use it.
class="sapUiSmallMarginEnd"
Use above class in SearchField in the xml view
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.