Javascript WebDataRock pivot-table configuration from a demo starter example

Javascript WebDataRock pivot-table configuration from a demo starter example - javascript

I can not make this demo work, with the "hierarchy" parameter, even though I specify the parameter value, it applies the condition to all hierarchy chain.
"conditions": [{
"formula": "#value > 1",
"hierarchy": "Country",
"measure": "Discount",
"format": {
"backgroundColor": "#C5E1A5",
"color": "#000000",
"fontFamily": "Arial",
"fontSize": "12px"
}
}]
Starter demo: https://www.webdatarocks.com/doc/conditional-formatting/
CodePen example which is also referenced from starter demo : https://codepen.io/webdatarocks/pen/oMvYGd
You could replace CodePen JS code with the code below to get a hierarchic render directly.
var pivot = new WebDataRocks({
container: "#wdr-component",
toolbar: true,
height: 395,
report: {
"slice": {
"rows": [
{
"uniqueName": "Country"
},
{
"uniqueName": "Category"
}
],
"columns":[
{ "uniqueName": "Color" }
],
"measures": [
{
"uniqueName": "Discount",
"aggregation": "sum"
}
] ,
},
"conditions": [{
"formula": "#value > 1",
"hierarchy": "Country",
"measure": "Discount",
"format": {
"backgroundColor": "#C5E1A5",
"color": "#000000",
"fontFamily": "Arial",
"fontSize": "12px"
}
}],
"dataSource": {
"filename": "https://cdn.webdatarocks.com/data/data.csv"
}
}
});
Here is related github issue, https://github.com/WebDataRocks/web-pivot-table/issues/2

You are right. The "hierarchy" parameter seems to have no effect.
An alternative solution is to apply the formatting with the customizeCell hook: https://www.webdatarocks.com/doc/customizecell/.
For example:
JS:
var pivot = new WebDataRocks({
container: "#wdr-component",
toolbar: true,
height: 395,
customizeCell: customizeCellFunction,
report: {
slice: {
rows: [
{
uniqueName: "Country"
},
{
uniqueName: "Category"
}
],
columns: [{ uniqueName: "Color" }],
measures: [
{
uniqueName: "Discount",
aggregation: "sum"
}
]
},
dataSource: {
filename: "https://cdn.webdatarocks.com/data/data.csv"
}
}
});
function customizeCellFunction(cellBuilder, cellData) {
if (cellData && cellData.type === "value" && cellData.measure && cellData.measure.uniqueName === "Discount" && cellData.value > 1 ) {
if (
cellData.rows &&
cellData.rows.length > 0 &&
cellData.rows[cellData.rows.length - 1].hierarchyUniqueName === "Country"
) {
cellBuilder.addClass("green");
}
}
}
CSS:
.green {
background-color: #c5e1a5 !important;
color: #000000 !important;
font-family: Arial !important;
font-size: 12px !important;
}
Here is a CodePen example for illustration: https://codepen.io/VD_A/pen/vYXgqbY.

Related

color cell based on the result of another column in react-table-6

Current I am displaying the table as such where the cell in the Protected column is highlighted green if True and red if False:
Name | Source | Protected
________________________________
Ryan Computer False
Briana Phone, Computer True
Shawn Phone True
Serge Phone False
My corresponding code looks like this:
const columns = [
{
Header: "Name",
accessor: "Name",
style: {
textAlign: "center",
},
},
{
Header: "Source",
accessor: "Source",
style: {
textAlign: "center",
},
},
{
Header: "Protected",
id: "Protected",
accessor: (d) => d.protected.toString(),
getProps: (state, rowInfo) => {
if (rowInfo && rowInfo.row) {
return {
style: {
textAlign: "center",
background: rowInfo.row.protected === "false" ? "red" : "green",
},
};
} else {
return {};
}
},
},
];
Is it possible to drop the Protected column and highlight the Source column with red or green based on if the corresponding Protected attribute is true or false?
i.e.
Name | Source (highlighted color)
_____________________________________
Ryan Computer (red)
Briana Phone, Computer (green)
Shawn Phone (green)
Serge Phone (red)
My data looks like this:
[
{
"Name": "Ryan",
"Protected": false,
"Source": ["Computer"],
},
{
"Name": "Briana",
"Protected": true,
"Source": ["Phone, Computer"],
},
{
"Name": "Shawn",
"Protected": true,
"Source": ["Phone"],
},
{
"Name": "Serge",
"Protected": false,
"Source": ["Phone"],
}
]

Yes, it's possible.
To do so, when creating your columns, you can affect the style of it with the Cell props, and adding a <div /> around your data's content.
Like this:
columns = [
{
Header: "Source",
accessor: "Source",
style: {
textAlign: "center",
},
Cell: (row) => {
return (
<div style={{ background: row.original.Protected === 'true' ? 'green' : 'red' }}>
{row.original.Source}
</div>
);
},
});
];

amcharts interactive map: making selected states a clickable link

I am creating a personal blog site. I stumbled upon an interactive visited states map in which I wanted to implement in one of my html page. I was able to successfully put it on my website with the generated html they provided. However, I wanted to tweak it a little bit but I'm not all familiar with javascript.
There are two things I want to add:
1st: Make the selected states link to a specific html page.
2nd (optional): Disable the zoom and color change when clicking on states that are not highlighted(visited).
Here is the code I have currently:
<script src="https://www.amcharts.com/lib/3/ammap.js" type="text/javascript"></script>
<script src="https://www.amcharts.com/lib/3/maps/js/usaHigh.js" type="text/javascript"></script>
<script src="https://www.amcharts.com/lib/3/themes/light.js" type="text/javascript"></script>
<div id="mapdiv" style="width: 1000px; height: 450px; display: block; margin-left: auto; margin-right: auto; margin-top: 100px; cursor: default;"></div>
<script type="text/javascript">
var map = AmCharts.makeChart("mapdiv", {
type: "map",
theme: "light",
backgroundColor : "#FFFFFF",
backgroundAlpha : 1,
zoomControl: {
zoomControlEnabled : false
},
dataProvider : {
map : "usaHigh",
getAreasFromMap : true,
areas :
[
{
"id": "US-AZ",
"showAsSelected": true
},
{
"id": "US-CA",
"showAsSelected": true
},
{
"id": "US-DC",
"showAsSelected": true
},
{
"id": "US-ID",
"showAsSelected": true
},
{
"id": "US-MA",
"showAsSelected": true
},
{
"id": "US-MT",
"showAsSelected": true
},
{
"id": "US-NJ",
"showAsSelected": true
},
{
"id": "US-NV",
"showAsSelected": true
},
{
"id": "US-NY",
"showAsSelected": true
},
{
"id": "US-OR",
"showAsSelected": true
},
{
"id": "US-PA",
"showAsSelected": true
},
{
"id": "US-WA",
"showAsSelected": true
},
{
"id": "US-WY",
"showAsSelected": true
}
]
},
areasSettings : {
autoZoom : true,
color : "#B4B4B7",
colorSolid : "#DB4646",
selectedColor : "#DB4646",
outlineColor : "#666666",
rollOverColor : "#9EC2F7",
rollOverOutlineColor : "#000000"
}
});
</script>

You can add a url property to the states you want a link to. You can also set urlTarget to "_blank" if you want to make the link open in a new tab/window:
areas: [{
"id": "US-AZ",
"showAsSelected": true,
"url": "http://az.gov",
"urlTarget": "_blank"
},
{
"id": "US-CA",
"showAsSelected": true,
"url": "http://ca.gov/",
"urlTarget": "_blank"
},
// ... etc
I also recommend setting autoZoom to false and selectable to true in areasSettings so that the map doesn't try to zoom before triggering the URL:
areasSettings: {
autoZoom: false,
selectable: true,
To disable the zoom and color change on the other states, simply remove getAreasFromMap: true from your dataProvider.
var map = AmCharts.makeChart("mapdiv", {
type: "map",
theme: "light",
backgroundColor: "#FFFFFF",
backgroundAlpha: 1,
zoomControl: {
zoomControlEnabled: false
},
dataProvider: {
map: "usaHigh",
areas: [{
"id": "US-AZ",
"showAsSelected": true,
"url": "http://az.gov",
"urlTarget": "_blank"
},
{
"id": "US-CA",
"showAsSelected": true,
"url": "http://ca.gov/",
"urlTarget": "_blank"
},
{
"id": "US-DC",
"showAsSelected": true
},
{
"id": "US-ID",
"showAsSelected": true
},
{
"id": "US-MA",
"showAsSelected": true
},
{
"id": "US-MT",
"showAsSelected": true
},
{
"id": "US-NJ",
"showAsSelected": true
},
{
"id": "US-NV",
"showAsSelected": true
},
{
"id": "US-NY",
"showAsSelected": true
},
{
"id": "US-OR",
"showAsSelected": true
},
{
"id": "US-PA",
"showAsSelected": true
},
{
"id": "US-WA",
"showAsSelected": true
},
{
"id": "US-WY",
"showAsSelected": true
}
]
},
areasSettings: {
autoZoom: false,
selectable: true,
color: "#B4B4B7",
colorSolid: "#DB4646",
selectedColor: "#DB4646",
outlineColor: "#666666",
rollOverColor: "#9EC2F7",
rollOverOutlineColor: "#000000"
}
});
<script src="https://www.amcharts.com/lib/3/ammap.js" type="text/javascript"></script>
<script src="https://www.amcharts.com/lib/3/maps/js/usaHigh.js" type="text/javascript"></script>
<script src="https://www.amcharts.com/lib/3/themes/light.js" type="text/javascript"></script>
<div id="mapdiv" style="width: 1000px; height: 450px; display: block; margin-left: auto; margin-right: auto; margin-top: 100px; cursor: default;"></div>

how to change the zabuto calendar default event color using ajax jquery

How can I make different event colors in zabuto calendar. I want to specify the event with colors. But I don't know. how to do
part of my code here.
$("#my-calendar").zabuto_calendar({
ajax: {
url: urldata,
modal: true
}
});

Working example here:
var Tomorrow = moment().add('days', 1).format('YYYY-MM-DD');
var TheDayAfterTomorrow = moment().add('days', 2).format('YYYY-MM-DD');
var In3Days = moment().add('days', 3).format('YYYY-MM-DD');
var In4Days = moment().add('days', 4).format('YYYY-MM-DD');
var eventData = [{
"date": Tomorrow,
"badge": false,
"title": Tomorrow,
"classname": "rose"
}, {
"date": TheDayAfterTomorrow,
"badge": true,
"title": TheDayAfterTomorrow
}, {
"date": In3Days,
"badge": true,
"title": In3Days
}, {
"date": In4Days,
"badge": false,
"title": In4Days,
"classname": "grade-4"
}];
// initialize the calendar on ready
$("#my-calendar").zabuto_calendar({
legend: [{
type: "text",
label: "Special event",
badge: "00"
},
{
type: "block",
label: "Regular event",
classname: "rose"
},
{
type: "spacer"
},
{
type: "text",
label: "Bad"
},
{
type: "list",
list: ["grade-1", "grade-2", "grade-3", "grade-4"]
},
{
type: "text",
label: "Good"
}
],
data: eventData,
today: true,
cell_border: true,
show_previous: 2,
show_next: 2,
weekstartson: 0,
nav_icon: {
prev: '<i class="fa fa-chevron-circle-left"></i>',
next: '<i class="fa fa-chevron-circle-right"></i>'
}
});
/* Change badge color */
div.zabuto_calendar .badge-event,
div.zabuto_calendar div.legend span.badge-event {
background: linear-gradient(141deg, #0fb8ad 0%, #1fc8db 51%, #2cb5e8 75%) !important;
color: #fff;
text-shadow: none;
}
div.zabuto_calendar .table tr td.event div.day,
div.zabuto_calendar ul.legend li.event {
background-color: #AEEEFF !important;
}
.grade-1 {
background-color: #FA2601;
}
.grade-2 {
background-color: #FA8A00;
}
.grade-3 {
background-color: #FFEB00;
}
.grade-4 {
background-color: #27AB00;
}
.rose {
background-color: #FC92A1;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="https://rawgit.com/moment/moment/2.2.1/min/moment.min.js"></script>
<link href="https://netdna.bootstrapcdn.com/font-awesome/4.0.3/css/font-awesome.min.css" rel="stylesheet" />
<link href="https://cdnjs.cloudflare.com/ajax/libs/zabuto_calendar/1.6.3/zabuto_calendar.min.css" rel="stylesheet" />
<script src="https://cdnjs.cloudflare.com/ajax/libs/zabuto_calendar/1.6.3/zabuto_calendar.min.js"></script>
<script src="https://netdna.bootstrapcdn.com/bootstrap/3.0.2/js/bootstrap.min.js"></script>
<link href="https://netdna.bootstrapcdn.com/bootstrap/3.0.2/css/bootstrap.min.css" rel="stylesheet" />
<div id="my-calendar"></div>

internet explorer select dropdown collapse

i have select dropdown which picks no. of pages to be shown as jquery pagination. everything is fine but when it comes to ie. select dropdown collapses.see image.
i also refered link
but it seems it will not work for me.I am doubtful that is it ie default behaviour and can't do much....
<script type="text/javascript">
$(document).ready(function() {
var url="${pageContext.request.contextPath}/aaa/aaa/aaa";
url+="?fromDate=${fromDate}";
url+="&toDate=${toDate}";
url+="&callType=${callType}";
url+="&fullListSize=0";
var table = $('#call_history_detail').DataTable({
"preDrawCallback": function( settings ) {
$("#searchTable").val("");
$('body').modalProgress("show");
},
"drawCallback": function( settings ) {
wordWrap("userName", 80, 2);
$('body').modalProgress("hide");
},
"processing": true,
"serverSide": true,
"searching": false,
//"ajax": url,
"ajax": {
"contentType": "application/json",
"url": url,
"data": function ( d ) {
var drawValue = d.draw;
var length = d.length;
var start = d.start;
var sortCol = d.order[0].column;
var sortType = d.order[0].dir;
return "draw=" + drawValue + "&length=" + length + "&start=" + start + "&sortCol=" + sortCol + "&sortType=" + sortType;
}
},
"oLanguage": {
"sLengthMenu": "Show _MENU_ entries. <img src='${pageContext.request.contextPath}/img/ico_info.png' class='tt'" +
"title='The search function will only search the page you are currently viewing. To do a more expansive search, increase the entries per page. Increasing the entries per page can increase load time.' />"
},
"lengthMenu": [ [25, 50, 100, 500, 1000, 5000], [25, 50, 100, 500, 1000, 5000] ],
"columns": [
{ "name": "userName" },
{ "name": "callType"},
{ "name": "date" },
{ "name": "time" },
{ "name": "from" },
{ "name": "to" },
{ "name": "cost", "width": "10%" },
{ "name": "duration", "width": "10%" }
],
"columnDefs": [
{
"class": "userName",
"data": "userName",
"defaultContent": "",
"targets": 0
},
{
"class": "callType",
"data": "callType",
"defaultContent": "",
"targets": 1
},
{
"class": "date-time",
"data": "timeStart",
"render": function (data) {
return getShortDate(data);
},
"defaultContent": "",
"targets": 2
},
{
"class": "date-time",
"data": "timeStart",
"render": function (data) {
return getTimeString(data);
},
"defaultContent": "",
"targets": 3
},
{
"class": 'number',
"data": "origNumber",
"defaultContent": "",
"orderable": true,
"targets": 4
},
{
"class": 'number',
"data": "destNumber",
"defaultContent": "",
"orderable": true,
"targets": 5
},
{
"class": 'cost',
"data": "totalAmount",
"render": function (data) {
return "$"+data.toFixed(2).replace(/(\d)(?=(\d{3})+\.)/g, '$1,');
},
"defaultContent": "",
"targets": 6
},
{
"class": 'duration',
"data": "callDuration",
"defaultContent": "00:00:00",
"orderable": false,
"targets": 7
}
],
"order": [[ 2, "desc" ]]
});
$('#backToSummary').click(function(e){
e.preventDefault();
$('form#call-history-options').submit();
});
});</script>

Add this to the css div z-index: value;

Datatables initialization warning

I have a dropdown with multiple options that initializes a datatable using javascript. Everything works fine but the problem comes during execution in which when the option is selected second time i get an error , check out this fiddle,
DataTables warning (table id = 'defDiv'): Cannot reinitialise DataTable.
And Below is my code :
if(user.position=="DEF"){
var table = $('#defDiv').DataTable({
"aaData":defenders,
"iDisplayLength":15,
"aoColumns": [
{ "mDataProp": "playerInfo" },
{ "mDataProp": "playerName" },
{ "mDataProp": "playerClub" },
{ "mDataProp": "playerValue" },
{ "mDataProp": "playerPoints" },
],
"order": [[ 3, "desc" ]],
});
}
Question is how can i prevent the warning from happening when the option is selected again ?

I've altered you code and it works now:
var goalkepeers = [{
"playerName": "Mignolet",
"playerClub": "Liverpool",
"playerValue": "5.0",
"playerPoints": "89",
}, {
"playerName": "de Gea",
"playerClub": "Manchester",
"playerValue": "6.7",
"playerPoints": "120",
}];
var defenders = [{
"playerName": "Ivanovic",
"playerClub": "Chelsea",
"playerValue": "7.8",
"playerPoints": "100",
}, {
"playerName": "Mertesacker",
"playerClub": "Arsenal",
"playerValue": "7.7",
"playerPoints": "110",
}];
var aoColumns = [{
"sTitle": "Name",
"mDataProp": "playerName"
},{
"sTitle": "Club",
"mDataProp": "playerClub"
},{
"sTitle": "Value",
"mDataProp": "playerValue"
},{
"sTitle": "Points",
"mDataProp": "playerPoints"
}];
var table = null;
$("#playersFilter").change(function () {
var value = $('#playersFilter').val();
if (value == "gk") {
if ($.fn.dataTable.isDataTable('#players')) {
$('#players').DataTable().destroy();
}
table = $('#players').DataTable({
"aaData": goalkepeers,
"iDisplayLength": 15,
"aoColumns": aoColumns,
"bRetrieve": true,
"order": [
[3, "desc"]
],
"bDestroy": true
});
} else if (value == "def") {
if ($.fn.dataTable.isDataTable('#players')) {
$('#players').DataTable().destroy();
}
table = $('#players').DataTable({
"aaData": defenders,
"iDisplayLength": 15,
"aoColumns": aoColumns,
"bRetrieve": true,
"order": [
[3, "desc"]
],
"bDestroy": true,
});
}
});
I'm pretty sure there's a more efficient way of doing it, I'll have a think and post a link to a JSFiddle as a comment.
You only really need the one table as well:
<select id="playersFilter">
<option>Choose Players</option>
<option value="gk">goalkepeers</option>
<option value="def">Defenders</option>
</select>
<table class="display" id="players"></table>

use this code
if(user.position=="DEF"){
var table = $('#defDiv').DataTable({
"aaData":defenders,
"iDisplayLength":15,
"aoColumns": [
{ "mDataProp": "playerInfo" },
{ "mDataProp": "playerName" },
{ "mDataProp": "playerClub" },
{ "mDataProp": "playerValue" },
{ "mDataProp": "playerPoints" },
],
//EDITS
"bRetrieve":true,
"order": [[ 3, "desc" ]],
// use this in your code
"bDestroy": true,
});
}
this will work for me &
more details

Can you just destroy the table prior to re-initialization?
table.DataTable().destroy();
Something like this:
var table;
if ($.fn.dataTable.isDataTable('#defDiv')) {
table.DataTable().destroy();
}
table = $('#defDiv').DataTable({...
Documentation can be found here
Demo here

Develop Reference

JavaScript is the programming language of the Web.

Javascript WebDataRock pivot-table configuration from a demo starter example - javascript

Related

color cell based on the result of another column in react-table-6

amcharts interactive map: making selected states a clickable link

how to change the zabuto calendar default event color using ajax jquery

internet explorer select dropdown collapse

Datatables initialization warning

Categories

Resources