React Chart.js v3 : highlight series when mouse on legend - javascript

I am using react and chart.js.
I have a Line chart, and I would love to have a highlight on one of the series when the mouse is hovering the according legend.
I found some help but it looks like the code is only working for previous version of chart.js.
Here is the current code I am using, that doesn't work for what I want :
<Line
data={data}
options={{maintainAspectRatio: false,
responsive: true,
interaction: {
mode: "index",
intersect: true,
},
plugins: {
tooltips: {
mode: "nearest",
intersect: false,
},
hover:
{
mode: "nearest",
intersect: true,
},
datalabels: {
display: false,
color: "black",
},
title: {
display: true,
text: "Limit"
},
legend: {
onHover: function(event, legendItem, legend) {
console.log('allo')
var me = this;
var options = me.options || {};
var hoverOptions = options.hover || {mode: 'nearest'};
var index = legendItem.datasetIndex;
var ci = legend.chart;
for (var i=0; i < ci.$datalabels._datasets.length-1; i++) {
var elements = ci.getDatasetMeta(i).data; ci.updateHoverStyle(elements, hoverOptions.mode, false) ; // <<<--- turn off higlight
}
var elements = ci.getDatasetMeta(index).data;
ci.updateHoverStyle(elements, hoverOptions.mode, true) // <<-- Turn on
ci.render();
},
display: true,
position: "right",
}
},
}}
/>
Goal would be to have something like that :

Related

How do I change floatingFilter option after Init of AGGrid?

I'm using AgGrid with JavaScript module. I'm trying to change the value of floatingFilter after init of Grid by calling api.refreshHeader method but it's not working.
function getServices() {
var columnDefs = [
{ field: 'name', headerName: 'Name' },
{ field: 'Category', headerName: 'Category' },
];
var gridOptions = {
animateRows: true,
columnDefs: columnDefs,
defaultColDef: {
resizable: true,
filter: true,
sortable: true,
flex: 1,
},
floatingFilter: true, // I want to change this after init
};
var gridDiv = document.querySelector('#serviceGrid');
var gridInstance = new agGrid.Grid(gridDiv, gridOptions);
$.ajax({
type: 'GET',
dataType:"JSON",
url: 'FROM_URL',
success:function(data){
gridOptions.api.setRowData(data)
}
});
// For testing purpose I'm using timeout
setTimeout(function() {
gridInstance.gridOptions.floatingFilter = false;
gridInstance.gridOptions.api.refreshHeader();
}, 5000)
}
Correct me if I'm wrong anywhere.
I am not sure which version you are using, but in the latest version, floatingFilters go inside columnDefinitions and not inside gridOptions.
Move floatingFilters inside defaultColDef in your gridOptions.
var gridOptions = {
animateRows: true,
columnDefs: columnDefs,
defaultColDef: {
resizable: true,
filter: true,
sortable: true,
flex: 1,
floatingFilter: true, // I want to change this after init
},
};
and then change your setTimeout function to this.
// For testing purpose I'm using timeout
setTimeout(function() {
gridInstance.gridOptions.defaultColDef.floatingFilter = false;
gridInstance.gridOptions.api.refreshHeader();
}, 5000)
Here is a plnkr I forked from one of their examples that works.
Hope I was able to help.

Why is vis.js adding an unexpected amount of space between trees?

With regards to the code below, I could not figure out why vis.js added a lot of space between trees.
var options = {
//locale: 'en',
interaction:{hover:true, dragNodes :false},
layout: {
randomSeed: undefined,
hierarchical: {
enabled: true,
parentCentralization: true,
}
},
edges: {
color: {
opacity: 0.4,
}},
};
https://jsfiddle.net/pavn23/zmttds9q/
It has to do with the physics default.
You can change it to false.
You can also config the treeSpacing like so...
physics: false,
/*layout: {
hierarchical: {
enabled: true,
levelSeparation: 190,
nodeSpacing: 250,
treeSpacing: 280,
sortMethod: "hubsize"
}
}*/

Is it possible to completely hide a tooltip using pointFormatter?

In the code below I have a pointFormatterfor a tooltip. What I'd like to do is to, for some points, completely hide the tooltip. I have tried returning null or false in these cases, however, an empty tooltip still appears. Is it possible to completely hide a tooltip when using pointFormatter? I've seen that with other formatters it is posisblet return null or false but this doesn't seem to be the case here.
tooltip: {
useHTML: true,
borderWidth: 0,
backgroundColor: "rgba(37,37,37,0.95)",
style: {
padding: 10
},
headerFormat: "",
pointFormatter: function () {
if(this.hrr_num === 16){
return null;
}
return self.getToolTip(parseInt(this.hrr_num));
},
followPointer: false,
shadow: false,
shape: "square",
hideDelay: 0
}
There are several *formatter Functions in the Tooltip Object. The one you are looking for is just called formatter. If you return false in this function then the tooltip will not be displayed at all. This should do the trick:
tooltip: {
[...]
formatter: function () {
if (this.point.hr_num === 16) {
return false;
}
return self.getToolTip(parseInt(this.point.hr_num));
},
[...]
}

Enabling Save button on JQ Grid with InlineEditing and CellEdit

Hi I have a Grid that is using cell edit and Inline editing. It saves to the ClientArray
$('#list').jqGrid({
datatype: "local",
colNames: ["Parameter Id", "Parameter Name", 'Parameter Value'],
colModel: [
{ name: "Id", index: "Id", align: "left", key: true, editable: false,hidden:true, jmap: 0 },
{ name: "ParameterName", index: "ParameterName", align: "left", editable: false, jmap: 1 },
{ name: "ParameterValue", index: "ParameterValue", align: "left", editable: true, edittype: "text", editoptions: { maxlength: 100 }, editrules: {required: true }, jmap: 2 }
],
pager: "#pager",
rowNum: 100,
rowList: [],
pgbuttons: false, // disable page control like next, back button
pgtext: null, // disable pager text like 'Page 0 of 10'
viewrecords: true, // disable current view record text like 'View 1-10 of 100'
height: '100%',
scrollOffset: 0,
sortname: "Name",
sortorder: "Asc",
gridview: true,
caption: 'Parameters',
autowidth: true,
hidegrid: false,
loadonce: true,
//beforeEditCell: function () {
// $("#list_ilsave").removeClass('ui-state-disabled');
// return;
//},
//afterEditCell: function (rowid, cellname, value, iRow, iCol) {
// $('#list').jqGrid('getCell', rowid, iCol).focus();
// return;
//},
width: totalWidth,
cellEdit: true,
cellsubmit: "clientArray"
});
$('#list').jqGrid('inlineNav', '#pager', {
edit: false,
add: false,
del: false,
save: true,
savetext: 'Save',
cancel: false
});
When I edit a Cell the save button remains disabled. If I manually Enable the button in beforeCellEdit, the editable cell hasn't got focus until you select another cell. This behavior is only happening in IE.
I have tried to fix both these issues individually in my commented out code, and I have found that the loss of focus is caused by the line
$("#list_ilsave").removeClass('ui-state-disabled');
I tried placing this line in beforeEditCell and in afterEditCell and it causes the input field to loose focus.
I was using JQ Grid 4.4.4 and I have tried updating to 4.6.0 after I read there were updates to Inline Editing after 4.4.4
UPDATE
I have changed my grid to use onSelectRow
onSelectRow: function (rowid) {
var $grid = $('#list');
var iRow = $("#" + rowid)[0].rowIndex;
$grid.jqGrid('editRow', rowid, {
keys: true,
oneditfunc: function(rowid, response) {
var $saveButton = $("#list_ilsave");
if ($saveButton.hasClass('ui-state-disabled')) {
$saveButton.removeClass('ui-state-disabled');
}
markCellAsDirty(rowid, $grid);
return true;
},
successfunc: function() {
alert('success');
return true;
},
aftersavefunc: function() {
alert('after save');
return true;
},
errorfunc: function() {
alert('error');
return true;
}
});
},
cellsubmit: "clientArray"
But I can't get any of the editRow events to fire other than oneditfunc. I also have an issue with getting the changed cells.
This method marks the cells as dirty / edited
function markCellAsDirty(rowid, grid) {
$(grid.jqGrid("setCell", rowid, "ParameterValue", "", "dirty-cell"));
$(grid[0].rows.namedItem(rowid)).addClass("edited");
}
I try to get the edited cells as follows
var editedRows = $grid.getChangedCells('dirty');
Before posting editedRows in an AJAX method to my server.
I'm not sure what you want to implement exactly, but I modified your demo to the following https://jsfiddle.net/OlegKi/byygepy3/11/. I include the full JavaScript code of the demo below
$(function () {
var myData = [
{ id: 10, ParameterName: "Test", ParameterValue: "" },
{ id: 20, ParameterName: "Test 1", ParameterValue: "" },
{ id: 30, ParameterName: "Test 2", ParameterValue: "" }
],
$grid = $("#list");
// change the text displayed on editrules: {required: true }
$.extend(true, $.jgrid.locales["en-US"].edit.msg, {
required: "No value was entered for this parameter!!!"
});
$grid.jqGrid({
datatype: "local",
data: myData,
colNames: ["", "Parameter Name", "Parameter Value"],
colModel: [
{ name: "act", template: "actions" }, // optional feature
{ name: "ParameterName" },
{ name: "ParameterValue", editable: true,
editoptions: { maxlength: 100 }, editrules: {required: true } }
],
cmTemplate: { autoResizable: true },
autoResizing: { compact: true },
pager: true,
pgbuttons: false, // disable page control like next, back button
pgtext: null, // disable pager text like 'Page 0 of 10'
viewrecords: true, // disable current view record text like 'View 1-10 of 100'
sortname: "Name",
iconSet: "fontAwesome",
caption: 'Parameters',
autowidth: true,
hidegrid: false,
inlineEditing: {
keys: true
},
singleSelectClickMode: "selectonly", // prevent unselect once selected rows
beforeSelectRow: function (rowid) {
var $self = $(this), i,
// savedRows array is not empty if some row is in inline editing mode
savedRows = $self.jqGrid("getGridParam", "savedRow");
for (i = 0; i < savedRows.length; i++) {
if (savedRows[i].id !== rowid) {
// save currently editing row
// one can replace saveRow to restoreRow in the next line
$self.jqGrid("saveRow", savedRows[i].id);
}
}
return savedRows.length === 0; // allow selection if saving successful
},
onSelectRow: function (rowid) {
$(this).jqGrid("editRow", rowid);
},
afterSetRow: function (options) {
var item = $(this).jqGrid("getLocalRow", options.rowid);
if (item != null) {
item.dirty = true;
}
},
navOptions: {
edit: false,
add: false,
search: false,
deltext: "Delete",
refreshtext: "Refresh"
},
inlineNavOptions: {
save: true,
savetext: "Save",
cancel: false,
restoreAfterSelect: false
},
formDeleting: {
// delete options
url: window.g_baseUrl + 'MfgTransactions_MVC/COA/Delete?',
beforeSubmit: function () {
// get value
var selRowId = $(this).jqGrid('getGridParam', 'selrow');
var parametricValue = $(this).jqGrid('getCell', selRowId, 'ParameterValue');
// check if empty
if (parametricValue === "") {
return [false, "Cannot delete: No value exists for this parameter"];
}
return [true, "Successfully deleted"];
},
delData: {
batchId: function () {
return $("#BatchId").val();
}
},
closeOnEscape: true,
closeAfterDelete: true,
width: 400,
msg: "Are you sure you want to delete the Parameter?",
afterComplete: function (response) {
if (response.responseText) {
alert("response.responseText");
}
//loadBatchListIntoGrid();
}
}
}).jqGrid('navGrid')
.jqGrid('inlineNav')
.jqGrid('navButtonAdd', {
caption: "Save Changed",
buttonicon: "fa-floppy-o",
onClickButton: function () {
var localData = $(this).jqGrid("getGridParam", "data"),
dirtyData = $.grep(localData, function (item) {
return item.dirty;
});
alert(dirtyData.length > 0 ? JSON.stringify(dirtyData) : "no dirty data");
}
});
// make more place for navigator buttons be rwducing the width of the right part
var pagerIdSelector = $grid.jqGrid("getGridParam", "pager");
$(pagerIdSelector + "_right").width(100);
// make the grid responsive
$(window).bind("resize", function () {
$grid.jqGrid("setGridWidth", $grid.closest(".container-fluid").width());
}).triggerHandler("resize");
});
where HTML code is
<div class="container-fluid">
<div class="row">
<div id="gridarea" class="col-md-6 col-md-offset-3">
<table id="list"></table>
</div>
</div>
</div>
and CSS code
.ui-th-column>div, .ui-jqgrid-btable .jqgrow>td {
word-wrap: break-word; /* IE 5.5+ and CSS3 */
white-space: pre-wrap; /* CSS3 */
white-space: -moz-pre-wrap; /* Mozilla, since 1999 */
white-space: -pre-wrap; /* Opera 4-6 */
white-space: -o-pre-wrap; /* Opera 7 */
overflow: hidden;
vertical-align: middle;
}
It demonstrate how one can implement starting inline editing on select row. Additionally I added optional column with template: "actions" which can be alternative implementation. I set property dirty in every item of data inside of afterSetRow callback and I added "Save Changed" button, which uses localData = $(this).jqGrid("getGridParam", "data") and dirtyData = $.grep(localData, function (item) { return item.dirty; }); to get the dirty (modified) data.

On selection of row in ext js grid checkbox gets selected

I am using Ext.grid.CheckboxSelectionModel with Ext.grid.GridPanel to display grid with checkbox column.
But when I am clicking on row checkbox also get seleted.
I want checkbox should not get selected while selecting row of grid.
Is there any way to achieve this.
Below is my code snippet.
var cboxSelModel =new Ext.grid.CheckboxSelectionModel({
checkOnly : true,
width:100,
header: defaultVal,
id: 'test',
locked: true,
singleSelect: true,
listeners: {
rowselect: function (sm, rIndex, keepExisting, record) {
uncheckIndex = -1;
cIndex =rIndex;
updateDefaultValue();
},
rowdeselect: function (sm, rIndex, keepExisting, record) {
cIndex = -1;
uncheckIndex =rIndex;
updateDefaultValue();
}
}
});
grid = new Ext.grid.GridPanel({
id:'grid',
width:'99%',
border:true,
store: store,
tbar: toolBar,
autoscroll: false,
height :'100px',
autoHeight :false,
sm: cboxSelModel,
cm :cm,
height:150,
layout: 'fit',
stateful: true,
stateId: 'grid',
autoScroll:true,
enableColumnResize : false,
enableColumnMove : false,
viewConfig:{
forceFit:true,
scrollOffset:0
},
autoFitColumns: true,
listeners: {
afterrender: function() {
setSelectedRows();
var store=grid.getStore();
if(store.data.length > 0 ){
Ext.getCmp('btnSort').setDisabled(false);
Ext.getCmp('btnSort').setIconClass('bmcSort');
}
},delay: 1000,
cellClick :function(iView, iCellEl, iColIdx, iRecord, iRowEl, iRowIdx, iEvent){
storeindex = iCellEl;
var record = grid.store.getAt(iCellEl);
var dValue=record.get('displayValue');
var sValue=record.get('storedValue');
var dataArray = getListData();
sValue=dataArray[iCellEl][1];
sValue = Ext.util.Format.htmlDecode(sValue);
dValue = Ext.util.Format.htmlDecode(dValue);
document.getElementById(InputPageComp.ComponentVars.storedValue).value=sValue;
document.getElementById(InputPageComp.ComponentVars.displayValue).value=dValue;
document.getElementById('addbtn_id').style['display']= 'none';
document.getElementById('updatebtn_id').style['display']= 'block';
Ext.getCmp('btnRemove').setDisabled(false);
Ext.getCmp('btnRemove').setIconClass('bmcDeleteSLT');
grid.getSelectionModel().selectRow(iCellEl);
}
}
});
var sm = Ext.create('Ext.selection.CheckboxModel',{
checkOnly: true
});
I have tested. It should work
Try like this (in grid configs):
selModel: {
selType: 'checkboxmodel',
checkOnly: true
}
Fiddle: https://fiddle.sencha.com/#view/editor&fiddle/1ncs

Categories