I add a textblock. In order to wrap it with margin, I write this code.
The problem is that now the text is cut.
code:
let $ = go.GraphObject.make;
let toolTipTemplate =
$(go.Adornment, "Auto",
$(go.Shape, { fill: "#FFFFCC" }),
$(go.TextBlock, { margin: 4 },
new go.Binding("text", "", (d) => {
return d.model.Name + "\nsome text here";
}))
);
return toolTipTemplate;
I tried a node template like:
$(go.Node, . . .,
{
toolTip: $(go.Adornment, "Auto",
$(go.Shape, { fill: "#FFFFCC" }),
$(go.TextBlock, { margin: 4 },
new go.Binding("text", "", (d) => {
return d.text + "\ncatalog: " + d.name;
}))
)
},
. . .
And I was unable to reproduce any problem with a very long string as the property value of data.name. Do you know of a way for me to reproduce this text measurement problem?
The problem was with this style definition:
letter-spacing: 3px;
so, the text became too wide.
After removing this setting it looks right.
Related
Project is Angular/FastAPI app. I'm looking for way to update data in my single serie. Series data should be updated when new data arrive from websocket and almost everything is working. I'm checking if data is arriving and it's done properly. One single problem is fact that I can't add any data to my series and have tried many ways to do it.
I'm trying this way. This is my constructor in component. It's worth to mention that I'm checking if chart is already rendered before appending data to my series and I checked if arriving data is valid - it is every time. Chart is also working properly if I specify data for my serie statically in chartOptions. Console.log(this.chart.series) every time shows that series length isn't changing, it's always 1:
constructor(private binance: BinanceService) {
this.chartOptions = {
series: [
{
name: "candle",
data: [
{
x: new Date(1538778600000),
y: [6629.81, 6650.5, 6623.04, 6633.33]
}
]
}
],
chart: {
type: "candlestick",
height: '800',
width: '100%',
redrawOnParentResize: true,
},
title: {
text: "CandleStick Chart",
align: "left"
},
xaxis: {
type: "datetime"
},
yaxis: {
tooltip: {
enabled: true
}
},
tooltip: {
enabled: true,
custom: function({ seriesIndex, dataPointIndex, w }) {
const o = w.globals.seriesCandleO[seriesIndex][dataPointIndex]
const h = w.globals.seriesCandleH[seriesIndex][dataPointIndex]
const l = w.globals.seriesCandleL[seriesIndex][dataPointIndex]
const c = w.globals.seriesCandleC[seriesIndex][dataPointIndex]
return (
'<div class="apexcharts-tooltip-candlestick">' +
'<div>Open: <span class="value">' +
o +
'</span></div>' +
'<div>High: <span class="value">' +
h +
'</span></div>' +
'<div>Low: <span class="value">' +
l +
'</span></div>' +
'<div>Close: <span class="value">' +
c +
'</span></div>' +
'</div>'
)
},
theme: 'dark'
}
};
this.socketSubscription = this.binance.onNewCandle().subscribe(params => {
if(this.rendered) {
console.log(params)
this.chart.appendData([
{
data:
{
x: new Date(params.date),
y: [params.open, params.high, params.low, params.close]
}
}
]);
console.log(this.chart.series)
}
}
);
}
This is mainchart.component.html file:
<apx-chart #chart [series]="chartOptions.series"
[chart]="chartOptions.chart"
[xaxis]="chartOptions.xaxis"
[yaxis]="chartOptions.yaxis"
[title]="chartOptions.title"
[tooltip]="chartOptions.tooltip">
</apx-chart>
I have tried many ways to append this data (and rerender or update chart) and I'm out of ideas. If someone knows how to do this properly I have another couple of questions.
I want append existing data if it's x value isn't already in series - if it already is, it should be updated with new value, but I understand it well it will works like this with appendData(). Am I right?
In case I have more series and want to append more of them it works like this, right?:
this.chart.appendData([
{ |
data: |
{ |
x: new Date(params.date), | This object updating
y: [params.open, params.high, params.low, params.close] | series[0]
} |
},
|
{ |
data: |
{ |
x: new Date(params.date), | This object updating
y: [params.open, params.high, params.low, params.close] | series[1]
} |
} |
]);
I have a problem exporting with pdfhtml5. I have data on datatable with HTML and CSS style and want to visualize it on pdf or another plugin.
this is the variable exportOptions
var thisExportOptions = {
exportOptions: {
rows: function(idx, data, node) {
var checkedB = sontCoches(".dt-class-checkbox", "entireRow");
var dt = new $.fn.dataTable.Api('#datatable-configuration');
$(checkedB).each(function(i, v) {
dt.row(this).select();
});
var selected = dt.rows({ selected: true }).indexes().toArray();
if (selected.length === 0 || $.inArray(idx, selected) !== -1)
return true;
return false;
},
columns: ':visible'
}
};
and this for datatable id
var table = $('#datatable-configuration').DataTable({
"ajax": {
"url": "/backend/index.php",
"dataType": "json",
"type": "GET",
"data": {
"app": get ["app"],
"module": get ["module"],
"element": cElement,
"action": "serverside",
"actionParent": get ["action"],
//"get": get,
}
},
"buttons": [
$.extend(true, {}, thisExportOptions, { text: 'Imprimer', extend: 'print' }),
$.extend(true, {}, thisExportOptions, { text: 'PDF', extend: 'pdfHtml5' }),
{ extend: 'colvis', text: 'Export colonnes', className: 'btn-primary', columns: ":not(.notConcernedByColvis)" }
],
"fnStateLoad": function(oSettings) {
return JSON.parse(localStorage.getItem('dataTableStore'));
},
"stateSaveParams": function(settings, data) {
data.columns.forEach(function(column) {
delete column.visible;
});
}
)}
Php code
$datas[$key]['nom'] = "<span class='font-weight-bold text-success'>" . $brute->raison_sociale . "</span>";
$datas[$key]['nom'] .= (!empty($brute->rcs_siret)) ? "<br /><small><span class='font-weight-bold'>RCS : </span><span class='right'>" . $brute->rcs_siret . "</span></small>" : "";
$datas[$key]['autres'] = '';
And the pdf file is like this
Pdf export with no css and HTML no interpreted
Finally I found WkHtmlToPdf it can convert HTML page to PDF file.
It's very helpfull and free, PHP WkHtmlToPdf provides a simple and clean interface to ease PDF and image creation when you want only use free solution on your project.
For more information : https://github.com/mikehaertl/phpwkhtmltopdf
I want to make the text in the swal bold and with a custom text color and since html:true is no more supported, I tried to set a <span> and set my custom style to the html tag, but it is not working, and I searched for a solution but I got no answers.
The Code
swal({
title: "Summary",
content: '<span>"counter " + this.counterType_1 + ": "+ this.counter_1_from.value.counter_1 +" - Sold Liters: " + liter_sold_1</span>',
className: "success",
closeOnClickOutside: false,
closeOnEsc: false,
dangerMode: true,
buttons: {
submit: {
text: "Submit",
value: "submit",
},
noAction: {
text:"Cancel",
value: "Cancel",
},
},
})
What I tried
var _html= '<span>"counter " + this.counterType_1 + ": "+ this.counter_1_from.value.counter_1 +" - Sold Liters: " + liter_sold_1</span>',
content: _html,
but also not working.
I finally find a way by using createElement() method which takes param an html tag,
var wrapper = document.createElement('h1');
wrapper.innerHTML = 'this is bold text';
swal({
content:wrapper,
title: "Summary",
className: "success",
closeOnClickOutside: false,
closeOnEsc: false,
dangerMode: true,
})
This is a directive that should change the color and text of the element depending on the incoming data
function colorStatus() {
return {
restrict: 'AE',
scope: {
status: '#'
},
link: function (scope, element) {
let status = +scope.status;
switch (status) {
case 0:
element.text(' ');
element.css('color', '#FFFFFF');
break;
case 1:
element.text('Correct!');
element.css('color', '#4CAF50');
break;
case 2:
element.text('Error!');
element.css('color', '#F44336');
break;
case 3:
element.text('Waiting...');
element.css('color', '#FF9800');
break;
}
}
};
}
Initially, it receives resolved data from the controller.
Here is HTML:
<color-status status="{{vm.status}}"></color-status>
<button ng-click="vm.changeStatus()"><button>
Here is function from controller:
vm.changeStatus = changeStatus;
vm.status = chosenTask.status; // It equals 0 in the received data
function changeStatus() {
vm.status = 1;
}
I expect that the text and color of the directive will change, but this does not happen. Where is my mistake?
Post link is only called once
The problem you're having is that you set your element's text and color in your link function. This means that when your directive instantiates and goes through initialisation, the link function will be executed, but it will get executed exactly once. When the value of status changes, you're not handling those changes to reflect the, on your element. Therefore you should add $onChanges() function to your directive and handle those changes.
function StatusController($element) {
this.$element = $element;
this.status = 0;
}
StatusController.mapper = [
{ text: ' ', color: '#FFFFFF' },
{ text: 'Correct!', color: '#4CAF50' },
{ text: 'Error!', color: '#F44336' },
{ text: 'Waiting...', color: '#FF9800' },
}];
StatusController.prototype.setStatus = function(status) {
var statusObj = StatusController.mapper[+status];
this.$element
.text(statusObj.text)
.css('color', statusObj.color);
}
StatusController.prototype.$onInit = function() {
// this.status is now populated by the supplied attribute value
this.setStatus(this.status);
}
StatusController.prototype.$onChanges = function(changes) {
if (changes.status && !changes.status.isFirstChange()) {
this.setStatus(this.status);
}
}
var StatusDirective = {
restrict: 'AE',
controller: StatusController,
scope: true,
bindToController: {
status: '#'
}
};
angular.module('someModule')
.directive('colorStatus', function() { return StatusDirective; });
But apart from this, I also suggest you set element's text by using ng-bind or {{...}} to put that value in. Directive could populate its public properties instead and use those in HTML along with CSS. It's always wiser to not manipulate DOM elements from within AngularJS code if possible.
function StatusController($element) {
this.$element = $element;
this.status = 0;
this.text = '';
this.name = '';
}
StatusController.mapper = [
{ text: ' ', name: '' },
{ text: 'Correct!', name: 'correct' },
{ text: 'Error!', name: '#error' },
{ text: 'Waiting...', name: 'pending' },
}];
StatusController.prototype.setStatus = function(status) {
var statusObj = StatusController.mapper[+status];
this.text = statusObj.text;
this.name = statusObj.name;
}
StatusController.prototype.$onInit = function() {
// this.status is now populated by the supplied attribute value
this.setStatus(this.status);
}
StatusController.prototype.$onChanges = function(changes) {
if (changes.status && !changes.status.isFirstChange()) {
this.setStatus(this.status);
}
}
var StatusDirective = {
restrict: 'AE',
controller: StatusController,
controllerAs: 'colorStatus',
scope: true,
bindToController: {
status: '#'
}
};
angular.module('someModule')
.directive('colorStatus', function() { return StatusDirective; });
And then in your template write use it this way:
<color-status status="{{vm.status}}" ng-class="colorStatus.name" ng-bind="colorStatus.text"></color-status>
This will give you a lot more flexibility in templates. Instead of setting text in the controller you could get away with just class name and use pseudo classes to add text to the element however you please to do, so each instance of your <color-status> directive could then display differently for the same status value.
I have a grid I'm working on, and some of the columns are Boolean (true/false). I want them to display as "Yes/No" in the column. I also am using a drop-down to change the value. The issue I am having is that once I select the value form the drop-down, it doesn't display the new value when I leave the line. But only if I'm going from "no" to "yes". I think it's something to do with the interaction between my template and the drop-down? That the value isn't getting set to "yes" from the drop down for the template, so it'd falling into the "no" logic.
Here is my data for the drop-down:
indData = [
{ Text: "Yes", boolValue: "true" },
{ Text: "No", boolValue: "false" }
];
And my definition for that column:
Copy code
{
field: "FreeAndReducedInd", width: "150px",
editor: indDropDownEditor,
title: "Free and Reduced",
template: ("# if (FreeAndReducedInd == true) { #" + "Yes" + "# } else { #" + "No" + "#}#")
},
And the editor code:
Copy code
function indDropDownEditor(container, options) {
$('<input data-bind="value:' + options.field + '"/>')
.appendTo(container)
.kendoDropDownList({
dataTextField: "Text",
dataValueField: "boolValue",
dataSource: indData
});
};
What do I have wrong?
thanks
Lisa
Update - I got an answer from Kendo, they suggested I add a Custom Binder and that seems to be working.
kendo.data.binders.widget.boolValue = kendo.data.Binder.extend({
init: function (widget, bindings, options) {
kendo.data.Binder.fn.init.call(this, widget.element[0], bindings, options);
this.widget = widget;
this._change = $.proxy(this.change, this);
this.widget.bind("change", this._change);
},
refresh: function () {
var value = this.bindings.boolValue.get();
this.widget.value(value.toString());
},
change: function () {
var value = this.widget.value();
this.bindings.boolValue.set(value === "true");
},
destroy: function () {
this.widget.unbind("change", this._change);
}
});
I also modified my editor:
function indDropDownEditor(container, options) {
$('<input data-bind="boolValue:' + options.field + '"/>')
.appendTo(container)
.kendoDropDownList({
dataTextField: "Text",
dataValueField: "boolValue",
dataSource: [
{ Text: "Yes", boolValue: "true" },
{ Text: "No", boolValue: "false" }
]
});
};
It would be better if you could give us the full code. Its easier to check locally before giving any solution. But try using the following in template. If it doesn't help please update your post with full code so I can recheck. Thanks.
template: "<td role='gridcell'> #= FreeAndReducedInd == true ? 'Yes' : 'No' # </td>"