output in BarChart with stacks is empty NaN - d3.js
I have a problem with the stacked barchart in dc.
I think it's a problem with the group, but I'm not sure.
Can someone please help me.. I'm working on this problem for days.
The BarChart sould show the date (date in this .csv is "daten_stand") on the x-Axis. And on the y-Axis, three Stacks. One for the column of the csv "faelle_covid_aktuell", on for "betten_frei" and on for "betten_belegt". Additionally I filtered all the data by die column "bundesland" (state);
Hier you can see the code and the csv...
let barChartContainer1;
let barChart;
function drawbarChar() {
barChart = new dc.BarChart("#" + barChartContainer1[0].id);
d3.csv("../data/betten_BarChart.csv").then(function (data) {
let filterData = data.filter(x => x.bundesland == "01");
let newData = [];
let i = 0;
filterData.forEach(element => {
let parts = element.daten_stand.split('-');
let date = parts[2] + "." + parts[1] + "." +parts[0];
newData.push([element.daten_stand, element.gemeindeschluessel, "betten_frei", element.betten_frei]);
i++;
newData.push([element.daten_stand, element.gemeindeschluessel, "betten_belegt", element.betten_belegt]);
i++;
newData.push([element.daten_stand, element.gemeindeschluessel, "faelle_covid_aktuell", element.faelle_covid_aktuell]);
i++;
});
var myCrossfilter = crossfilter(newData),
dim = myCrossfilter.dimension(function (d) {
return d;
}),
group = dim.group().reduce((p, d)=> {
//p[d.gemeindeschluessel] = (p[d.gemeindeschluessel] || 0) + d.betten_frei;
p[d] = (p[d] || 0) + d.faelle_covid_aktuell;
p[d] = (p[d] || 0) + d.betten_frei;
p[d] = (p[d] || 0) + d.betten_belegt;
console.log(p)
return p;
}, function reduceRemove(p, d) {
// p[d.gemeindeschluessel] = (p[d.gemeindeschluessel] || 0) - d.betten_frei;
p[d] = (p[d] || 0) - d.faelle_covid_aktuell;
p[d] = (p[d] || 0) - d.betten_frei;
p[d] = (p[d] || 0) - d.betten_belegt;
return p;
}, () => ({}));
function sel_stack (i) {
return function (dataItem) {
return dataItem.value[i];
};
}
barChart
.height(200)
.x(d3.scaleLinear().domain([1, 21]))
.brushOn(false)
.clipPadding(10)
.dimension(dim)
.group(group, '1', sel_stack('1'))
.renderLabel(true);
barChart.legend(dc.legend());
for(var j = 2; j<4; j++){
barChart.stack(group, '' + j, sel_stack(j))
}
barChart.render();
});
}
$(document).ready(function () {
barChartContainer1 = $("#right-graph1");
drawbarChar();
$(window).resize(function () {
drawbarChar();
});
});
bundesland,gemeindeschluessel,anzahl_meldebereiche,faelle_covid_aktuell,faelle_covid_aktuell_beatmet,anzahl_standorte,betten_frei,betten_belegt,daten_stand
01,01001,2,0,0,2,51,32,2020-06-07
01,01002,5,0,0,3,136,122,2020-06-07
01,01003,2,0,0,2,135,108,2020-06-07
01,01004,1,0,0,1,22,18,2020-06-07
01,01051,1,1,0,1,22,34,2020-06-07
01,01053,2,0,0,2,14,10,2020-06-07
01,01054,3,0,0,3,23,21,2020-06-07
01,01055,3,0,0,3,20,32,2020-06-07
01,01056,2,0,0,2,9,26,2020-06-07
01,01057,1,0,0,1,7,5,2020-06-07
01,01058,3,0,0,3,15,35,2020-06-07
01,01059,1,3,0,1,11,13,2020-06-07
01,01060,4,1,0,4,60,70,2020-06-07
01,01061,1,0,0,1,18,22,2020-06-07
01,01062,3,0,0,3,29,30,2020-06-07
02,02000,26,19,16,23,404,524,2020-06-07
03,03101,5,1,1,5,68,91,2020-06-07
03,03102,2,0,0,2,7,20,2020-06-07
03,03103,1,2,0,1,30,16,2020-06-07
03,03151,2,0,0,2,7,29,2020-06-07
03,03153,3,0,0,3,52,37,2020-06-07
03,03154,1,2,0,1,15,19,2020-06-07
03,03155,2,0,0,2,9,14,2020-06-07
03,03157,1,0,0,1,5,17,2020-06-07
03,03158,1,2,2,1,4,12,2020-06-07
03,03159,8,4,3,7,79,135,2020-06-07
03,03241,16,16,12,16,133,348,2020-06-07
03,03251,3,0,0,3,10,3,2020-06-07
03,03252,4,1,1,4,15,57,2020-06-07
03,03254,5,0,0,4,44,54,2020-06-07
03,03255,1,0,0,1,4,10,2020-06-07
03,03256,1,0,0,1,17,17,2020-06-07
03,03257,1,1,1,1,9,14,2020-06-07
03,03351,3,0,0,1,8,33,2020-06-07
03,03352,2,1,0,2,9,9,2020-06-07
03,03353,3,1,0,3,31,35,2020-06-07
03,03354,1,0,0,1,16,7,2020-06-07
03,03355,2,0,0,2,13,25,2020-06-07
03,03356,2,0,0,2,6,9,2020-06-07
03,03357,3,0,0,2,6,26,2020-06-07
03,03358,3,0,0,3,17,22,2020-06-07
03,03359,3,0,0,2,14,23,2020-06-07
03,03360,2,0,0,2,31,50,2020-06-07
03,03361,2,4,0,2,4,13,2020-06-07
03,03401,1,0,0,1,13,14,2020-06-07
03,03402,1,0,0,1,12,9,2020-06-07
03,03403,5,6,6,3,111,114,2020-06-07
03,03404,4,0,0,4,90,34,2020-06-07
03,03405,1,0,0,1,12,22,2020-06-07
03,03451,3,0,0,2,18,25,2020-06-07
03,03452,3,0,0,3,21,21,2020-06-07
03,03453,3,2,0,3,11,35,2020-06-07
03,03454,7,0,0,7,49,52,2020-06-07
03,03455,2,1,1,2,12,25,2020-06-07
03,03456,1,0,0,1,19,11,2020-06-07
03,03457,3,0,0,2,22,21,2020-06-07
03,03458,1,0,0,1,6,9,2020-06-07
03,03459,8,0,0,7,72,53,2020-06-07
03,03460,3,0,0,3,36,21,2020-06-07
03,03461,2,0,0,2,7,9,2020-06-07
03,03462,1,0,0,1,6,7,2020-06-07
04,04011,9,5,3,8,76,91,2020-06-07
04,04012,2,2,1,2,7,17,2020-06-07
05,05111,12,3,2,11,71,239,2020-06-07
05,05112,13,6,4,9,83,181,2020-06-07
05,05113,15,8,5,14,103,251,2020-06-07
05,05114,6,2,1,4,30,74,2020-06-07
05,05116,5,1,1,4,29,90,2020-06-07
05,05117,2,2,1,2,18,37,2020-06-07
05,05119,6,0,0,4,36,40,2020-06-07
05,05120,1,0,0,1,15,21,2020-06-07
05,05122,3,4,3,3,35,65,2020-06-07
05,05124,5,2,2,5,97,97,2020-06-07
05,05154,5,1,0,5,30,38,2020-06-07
05,05158,6,0,0,6,39,36,2020-06-07
05,05162,7,0,0,6,52,66,2020-06-07
05,05166,4,0,0,4,28,33,2020-06-07
05,05170,9,10,1,8,73,93,2020-06-07
05,05314,15,7,3,11,72,201,2020-06-07
05,05315,26,5,4,18,73,364,2020-06-07
05,05316,4,0,0,2,32,56,2020-06-07
05,05334,8,12,10,7,63,225,2020-06-07
05,05358,6,0,0,5,37,40,2020-06-07
05,05362,7,0,0,7,20,59,2020-06-07
05,05366,3,1,0,3,9,36,2020-06-07
05,05370,3,0,0,3,12,24,2020-06-07
05,05374,7,2,0,7,41,85,2020-06-07
05,05378,4,0,0,4,20,32,2020-06-07
05,05382,6,0,0,6,31,65,2020-06-07
05,05512,2,1,1,2,38,28,2020-06-07
05,05513,6,1,0,4,62,71,2020-06-07
05,05515,8,3,3,7,31,232,2020-06-07
05,05554,5,1,1,5,37,44,2020-06-07
05,05558,3,0,0,3,26,9,2020-06-07
05,05562,14,1,1,14,105,177,2020-06-07
05,05566,5,2,2,5,30,61,2020-06-07
05,05570,5,0,0,5,28,34,2020-06-07
05,05711,4,0,0,4,38,106,2020-06-07
05,05754,3,1,1,3,24,26,2020-06-07
05,05758,4,2,2,3,25,43,2020-06-07
05,05762,5,0,0,5,15,23,2020-06-07
05,05766,2,1,1,2,26,55,2020-06-07
05,05770,6,5,2,6,53,99,2020-06-07
05,05774,4,4,4,4,33,56,2020-06-07
05,05911,8,1,1,6,91,160,2020-06-07
05,05913,9,5,2,9,61,238,2020-06-07
05,05914,5,1,1,5,40,48,2020-06-07
05,05915,6,1,1,5,34,59,2020-06-07
05,05916,4,2,1,4,29,42,2020-06-07
05,05954,7,1,0,6,43,97,2020-06-07
05,05958,9,4,3,9,51,71,2020-06-07
05,05962,8,2,0,8,47,80,2020-06-07
05,05966,3,1,1,3,27,14,2020-06-07
05,05970,6,0,0,6,34,87,2020-06-07
05,05974,6,0,0,6,21,42,2020-06-07
05,05978,8,0,0,8,35,98,2020-06-07
06,06411,7,1,0,4,40,75,2020-06-07
06,06412,15,9,6,12,78,233,2020-06-07
06,06413,2,2,2,2,47,67,2020-06-07
06,06414,5,7,6,4,42,80,2020-06-07
06,06431,5,0,0,5,22,26,2020-06-07
06,06432,2,2,0,2,2,26,2020-06-07
06,06433,2,0,0,2,6,19,2020-06-07
06,06434,3,0,0,3,10,20,2020-06-07
06,06435,5,2,1,4,36,65,2020-06-07
06,06436,2,0,0,2,14,19,2020-06-07
06,06437,1,2,2,1,0,104,2020-06-07
06,06438,2,5,3,2,25,31,2020-06-07
06,06439,2,0,0,2,13,7,2020-06-07
06,06440,5,2,0,5,61,71,2020-06-07
06,06531,4,9,3,4,56,230,2020-06-07
06,06532,2,0,0,2,9,52,2020-06-07
06,06533,3,0,0,3,19,43,2020-06-07
06,06534,3,1,1,3,49,132,2020-06-07
06,06535,4,0,0,4,23,17,2020-06-07
06,06611,6,1,1,6,46,143,2020-06-07
06,06631,3,0,0,3,25,57,2020-06-07
06,06632,3,1,0,3,33,43,2020-06-07
06,06633,3,0,0,3,10,20,2020-06-07
06,06634,3,0,0,3,33,20,2020-06-07
06,06635,7,0,0,7,47,79,2020-06-07
06,06636,3,0,0,3,39,19,2020-06-07
07,07111,5,0,0,4,57,58,2020-06-07
07,07131,2,0,0,2,8,17,2020-06-07
07,07132,2,0,0,2,13,10,2020-06-07
07,07133,4,0,0,4,27,24,2020-06-07
07,07134,2,0,0,2,14,14,2020-06-07
07,07135,2,0,0,2,20,7,2020-06-07
07,07137,4,1,1,4,28,17,2020-06-07
07,07138,5,0,0,5,37,40,2020-06-07
07,07140,2,0,0,2,5,10,2020-06-07
07,07141,5,0,0,5,21,26,2020-06-07
07,07143,4,0,0,4,16,22,2020-06-07
07,07211,4,0,0,3,58,60,2020-06-07
07,07231,2,0,0,2,16,21,2020-06-07
07,07232,2,0,0,2,9,8,2020-06-07
07,07233,2,0,0,2,15,1,2020-06-07
07,07235,2,0,0,2,10,6,2020-06-07
07,07311,1,0,0,1,8,14,2020-06-07
07,07312,1,3,2,1,70,95,2020-06-07
07,07313,3,0,0,2,8,7,2020-06-07
07,07314,4,1,1,4,64,66,2020-06-07
07,07315,2,0,0,2,42,86,2020-06-07
07,07316,1,0,0,1,8,13,2020-06-07
07,07317,1,0,0,1,8,8,2020-06-07
07,07318,3,2,2,2,12,25,2020-06-07
07,07319,1,0,0,1,7,22,2020-06-07
07,07320,1,0,0,1,8,6,2020-06-07
07,07331,1,0,0,1,6,2,2020-06-07
07,07332,2,0,0,2,11,11,2020-06-07
07,07333,2,0,0,2,6,6,2020-06-07
07,07334,2,0,0,2,22,7,2020-06-07
07,07335,1,0,0,1,11,3,2020-06-07
07,07336,1,0,0,1,0,16,2020-06-07
07,07337,2,0,0,2,9,8,2020-06-07
07,07339,2,4,4,2,10,17,2020-06-07
07,07340,1,0,0,1,7,2,2020-06-07
08,08111,11,11,5,9,218,299,2020-06-07
08,08115,4,0,0,4,20,29,2020-06-07
08,08116,6,4,0,4,25,47,2020-06-07
08,08117,4,2,0,3,31,44,2020-06-07
08,08118,5,13,7,4,137,77,2020-06-07
08,08119,2,2,1,2,66,43,2020-06-07
08,08121,1,1,1,1,32,36,2020-06-07
08,08125,2,0,0,2,12,40,2020-06-07
08,08126,1,0,0,1,7,5,2020-06-07
08,08127,2,1,0,2,24,28,2020-06-07
08,08128,3,1,1,3,30,38,2020-06-07
08,08135,1,0,0,1,7,17,2020-06-07
08,08136,3,1,0,3,26,29,2020-06-07
08,08211,2,1,0,1,13,11,2020-06-07
08,08212,4,0,0,4,52,81,2020-06-07
08,08215,3,3,2,3,18,48,2020-06-07
08,08216,2,0,0,2,4,11,2020-06-07
08,08221,6,7,5,6,112,217,2020-06-07
08,08222,5,3,2,3,37,98,2020-06-07
08,08225,3,0,0,3,11,7,2020-06-07
08,08226,4,1,0,4,12,25,2020-06-07
08,08231,2,2,0,2,18,45,2020-06-07
08,08235,2,0,0,2,17,5,2020-06-07
08,08236,2,0,0,2,13,14,2020-06-07
08,08237,1,0,0,1,2,8,2020-06-07
08,08311,4,4,3,4,103,135,2020-06-07
08,08315,4,0,0,4,43,71,2020-06-07
08,08316,3,1,1,3,8,26,2020-06-07
08,08317,6,2,0,6,66,56,2020-06-07
08,08325,2,1,1,2,5,7,2020-06-07
08,08326,5,13,2,2,51,48,2020-06-07
08,08327,1,2,1,1,15,6,2020-06-07
08,08335,7,0,0,6,29,66,2020-06-07
08,08336,1,0,0,1,0,19,2020-06-07
08,08337,2,1,1,2,12,26,2020-06-07
08,08415,2,1,1,1,12,24,2020-06-07
08,08416,5,5,4,2,24,99,2020-06-07
08,08417,1,0,0,1,18,12,2020-06-07
08,08421,3,0,0,3,49,84,2020-06-07
08,08425,2,0,0,2,19,11,2020-06-07
08,08426,1,0,0,1,20,7,2020-06-07
08,08435,3,0,0,3,40,34,2020-06-07
08,08436,5,2,1,4,18,44,2020-06-07
08,08437,2,0,0,2,15,12,2020-06-07
09,09161,2,8,3,1,6,30,2020-06-07
09,09162,28,41,29,26,225,554,2020-06-07
09,09163,1,0,0,1,38,32,2020-06-07
09,09171,3,0,0,2,6,35,2020-06-07
09,09172,3,0,0,3,1,20,2020-06-07
09,09173,2,0,0,2,4,24,2020-06-07
09,09174,1,1,1,1,42,26,2020-06-07
09,09175,1,0,0,1,11,9,2020-06-07
09,09176,3,4,3,3,19,57,2020-06-07
09,09177,1,0,0,1,14,13,2020-06-07
09,09178,1,3,3,1,3,19,2020-06-07
09,09179,1,0,0,1,6,9,2020-06-07
09,09180,1,0,0,1,26,45,2020-06-07
09,09181,1,0,0,1,3,7,2020-06-07
09,09182,1,0,0,1,22,8,2020-06-07
09,09183,1,0,0,1,11,15,2020-06-07
09,09184,2,0,0,2,8,9,2020-06-07
09,09185,3,1,1,2,9,8,2020-06-07
09,09186,1,0,0,1,4,9,2020-06-07
09,09187,5,6,2,5,27,41,2020-06-07
09,09188,5,3,3,5,44,44,2020-06-07
09,09189,3,3,3,2,18,44,2020-06-07
09,09190,3,0,0,3,23,20,2020-06-07
09,09261,5,1,1,3,12,55,2020-06-07
09,09262,2,0,0,2,16,13,2020-06-07
09,09263,1,0,0,1,30,13,2020-06-07
09,09271,2,0,0,2,4,31,2020-06-07
09,09272,2,0,0,2,10,12,2020-06-07
09,09273,3,0,0,3,20,12,2020-06-07
09,09274,1,0,0,1,4,6,2020-06-07
09,09275,1,2,2,1,4,16,2020-06-07
09,09276,2,0,0,2,14,11,2020-06-07
09,09277,1,1,1,1,22,13,2020-06-07
09,09278,2,0,0,2,17,7,2020-06-07
09,09279,2,1,0,2,7,19,2020-06-07
09,09361,1,2,1,1,18,20,2020-06-07
09,09362,3,14,10,3,102,163,2020-06-07
09,09363,1,3,2,1,24,49,2020-06-07
09,09371,1,1,1,1,11,3,2020-06-07
09,09372,1,0,0,1,8,14,2020-06-07
09,09373,1,0,0,1,7,23,2020-06-07
09,09375,2,1,0,2,4,10,2020-06-07
09,09376,4,0,0,4,31,15,2020-06-07
09,09377,1,0,0,1,2,10,2020-06-07
09,09461,4,1,0,1,27,31,2020-06-07
09,09462,5,0,0,2,15,44,2020-06-07
09,09463,1,2,1,1,10,26,2020-06-07
09,09464,1,0,0,1,15,27,2020-06-07
09,09471,2,0,0,2,10,7,2020-06-07
09,09472,1,0,0,1,8,1,2020-06-07
09,09474,2,0,0,2,13,10,2020-06-07
09,09475,2,0,0,2,3,14,2020-06-07
09,09476,1,0,0,1,1,14,2020-06-07
09,09477,1,0,0,1,11,27,2020-06-07
09,09478,2,3,0,2,8,22,2020-06-07
09,09479,2,0,0,2,13,7,2020-06-07
09,09561,2,1,1,2,9,14,2020-06-07
09,09562,3,5,1,3,35,128,2020-06-07
09,09563,2,1,0,2,19,34,2020-06-07
09,09564,8,1,0,6,88,152,2020-06-07
09,09565,1,1,0,1,2,5,2020-06-07
09,09571,2,0,0,2,8,9,2020-06-07
09,09572,1,0,0,1,1,5,2020-06-07
09,09574,3,0,0,3,10,14,2020-06-07
09,09575,3,0,0,2,20,51,2020-06-07
09,09576,1,0,0,1,4,7,2020-06-07
09,09577,2,0,0,2,6,10,2020-06-07
09,09661,2,1,1,1,10,43,2020-06-07
09,09662,2,1,1,2,6,39,2020-06-07
09,09663,3,4,4,3,50,109,2020-06-07
09,09671,1,0,0,1,5,3,2020-06-07
09,09672,4,0,0,4,11,42,2020-06-07
09,09673,1,0,0,1,40,122,2020-06-07
09,09674,2,0,0,2,12,4,2020-06-07
09,09675,1,0,0,1,0,10,2020-06-07
09,09676,1,0,0,1,5,9,2020-06-07
09,09677,1,0,0,1,2,7,2020-06-07
09,09678,2,0,0,2,5,1,2020-06-07
09,09679,1,0,0,1,8,4,2020-06-07
09,09761,3,0,0,2,48,100,2020-06-07
09,09762,1,0,0,1,18,13,2020-06-07
09,09763,1,0,0,1,7,24,2020-06-07
09,09764,1,0,0,1,15,19,2020-06-07
09,09771,2,2,0,2,10,16,2020-06-07
09,09772,2,0,0,2,9,9,2020-06-07
09,09773,2,0,0,2,10,14,2020-06-07
09,09774,4,0,0,4,21,50,2020-06-07
09,09775,2,2,0,2,11,12,2020-06-07
09,09776,2,0,0,2,13,1,2020-06-07
09,09777,2,0,0,2,8,12,2020-06-07
09,09778,2,0,0,2,11,9,2020-06-07
09,09779,3,0,0,3,21,12,2020-06-07
09,09780,1,0,0,1,11,12,2020-06-07
10,10041,7,2,1,7,87,139,2020-06-07
10,10042,2,0,0,2,18,7,2020-06-07
10,10043,3,0,0,3,18,31,2020-06-07
10,10044,4,2,1,3,36,35,2020-06-07
10,10045,2,1,0,2,109,164,2020-06-07
10,10046,1,2,1,1,5,11,2020-06-07
11,11000,59,59,43,42,362,1048,2020-06-07
12,12051,3,1,0,3,10,45,2020-06-07
12,12052,2,0,0,2,52,51,2020-06-07
12,12053,1,0,0,1,12,29,2020-06-07
12,12054,4,0,0,4,26,57,2020-06-07
12,12060,2,1,0,2,55,57,2020-06-07
12,12061,5,0,0,5,18,54,2020-06-07
12,12062,3,0,0,3,23,26,2020-06-07
12,12063,4,0,0,2,16,13,2020-06-07
12,12064,3,0,0,3,13,23,2020-06-07
12,12065,5,0,0,5,39,20,2020-06-07
12,12066,1,3,0,1,23,22,2020-06-07
12,12067,4,0,0,4,88,64,2020-06-07
12,12068,3,0,0,3,23,23,2020-06-07
12,12069,3,0,0,3,43,58,2020-06-07
12,12070,2,0,0,2,18,7,2020-06-07
12,12071,3,0,0,3,10,13,2020-06-07
12,12072,2,0,0,2,12,10,2020-06-07
12,12073,4,0,0,4,14,27,2020-06-07
13,13003,2,1,1,2,39,80,2020-06-07
13,13004,1,0,0,1,7,47,2020-06-07
13,13071,5,1,0,5,37,54,2020-06-07
13,13072,6,0,0,4,36,30,2020-06-07
13,13073,4,0,0,4,24,47,2020-06-07
13,13074,2,0,0,2,10,35,2020-06-07
13,13075,7,0,0,7,69,159,2020-06-07
13,13076,7,0,0,7,55,142,2020-06-07
14,14511,3,0,0,3,24,148,2020-06-07
14,14521,6,0,0,6,31,54,2020-06-07
14,14522,5,0,0,5,35,38,2020-06-07
14,14523,4,0,0,4,46,46,2020-06-07
14,14524,6,1,0,5,37,82,2020-06-07
14,14612,12,0,0,6,67,218,2020-06-07
14,14625,6,3,3,5,21,43,2020-06-07
14,14626,6,0,0,6,33,33,2020-06-07
14,14627,5,0,0,5,47,49,2020-06-07
14,14628,6,26,6,6,60,66,2020-06-07
14,14713,9,0,0,7,166,263,2020-06-07
14,14729,3,0,0,3,24,29,2020-06-07
14,14730,8,0,0,8,36,44,2020-06-07
15,15001,2,0,0,2,20,28,2020-06-07
15,15002,6,4,3,5,93,220,2020-06-07
15,15003,7,0,0,5,52,176,2020-06-07
15,15081,2,0,0,2,8,12,2020-06-07
15,15082,3,0,0,3,26,26,2020-06-07
15,15083,2,0,0,2,25,13,2020-06-07
15,15084,3,0,0,3,39,18,2020-06-07
15,15085,4,0,0,4,22,33,2020-06-07
15,15086,2,5,4,2,13,17,2020-06-07
15,15087,3,0,0,3,25,11,2020-06-07
15,15088,2,0,0,2,11,12,2020-06-07
15,15089,4,0,0,4,25,48,2020-06-07
15,15090,2,0,0,2,32,26,2020-06-07
15,15091,2,0,0,2,38,25,2020-06-07
16,16051,2,3,0,2,30,66,2020-06-07
16,16052,1,3,1,1,10,36,2020-06-07
16,16053,1,0,0,1,18,97,2020-06-07
16,16054,1,1,1,1,11,11,2020-06-07
16,16055,1,0,0,1,5,11,2020-06-07
16,16056,1,0,0,1,21,23,2020-06-07
16,16061,3,1,1,3,14,16,2020-06-07
16,16062,3,3,0,3,45,36,2020-06-07
16,16063,3,0,0,3,21,66,2020-06-07
16,16064,3,1,1,3,47,26,2020-06-07
16,16065,1,0,0,1,4,7,2020-06-07
16,16066,2,0,0,2,11,37,2020-06-07
16,16067,2,0,0,2,25,16,2020-06-07
16,16068,1,0,0,1,6,8,2020-06-07
16,16069,1,0,0,1,5,3,2020-06-07
16,16070,2,0,0,2,12,6,2020-06-07
16,16071,3,0,0,3,57,69,2020-06-07
16,16072,1,0,0,1,4,4,2020-06-07
16,16073,1,0,0,1,9,13,2020-06-07
16,16074,1,0,0,1,12,4,2020-06-07
16,16075,1,0,0,1,0,0,2020-06-07
16,16076,1,2,2,1,6,11,2020-06-07
16,16077,2,0,0,1,30,30,2020-06-07
<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8">
<!-- <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no"> -->
<meta name="description" content="">
<meta name="author" content="Philipp Fruh">
<meta name="generator" content="">
<title>Angewandtes Projekt: Visualisierung SS20</title>
<!-- Bootstrap core CSS -->
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/4.5.0/css/bootstrap.min.css" integrity="sha256-aAr2Zpq8MZ+YA/D6JtRD3xtrwpEz2IqOS+pWD/7XKIw=" crossorigin="anonymous" />
<link href="./stylesheets/style.css" rel="stylesheet">
</head>
<body>
<div class="container-fluid h-100 d-flex flex-column">
<!-- Navbar -->
<nav class="navbar navbar-expand-lg navbar-light bg-white border shadow rounded mt-2">
<a class="navbar-brand" href="#">Navbar</a>
<button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarSupportedContent"
aria-controls="navbarSupportedContent" aria-expanded="false" aria-label="Toggle navigation">
<span class="navbar-toggler-icon"></span>
</button>
<div class="collapse navbar-collapse" id="navbarSupportedContent">
<ul class="navbar-nav mr-auto">
<li class="nav-item active">
<a class="nav-link" href="#">Home <span class="sr-only">(current)</span></a>
</li>
<li class="nav-item">
<a class="nav-link" href="#">Link</a>
</li>
<li class="nav-item dropdown">
<a class="nav-link dropdown-toggle" href="#" id="navbarDropdown" role="button"
data-toggle="dropdown"
aria-haspopup="true" aria-expanded="false">
Dropdown
</a>
<div class="dropdown-menu" aria-labelledby="navbarDropdown">
<a class="dropdown-item" href="#">Action</a>
<a class="dropdown-item" href="#">Another action</a>
<div class="dropdown-divider"></div>
<a class="dropdown-item" href="#">Something else here</a>
</div>
</li>
<li class="nav-item">
<a class="nav-link disabled" href="#" tabindex="-1" aria-disabled="true">Disabled</a>
</li>
</ul>
<form class="form-inline my-2 my-lg-0">
<input class="form-control mr-sm-2" type="search" placeholder="Search" aria-label="Search">
<button class="btn btn-outline-success my-2 my-sm-0" type="submit">Search</button>
</form>
</div>
</nav>
<!-- Content -->
<!-- Top Row -->
<div class="row flex-grow-1">
<div class="col-md-12 p-2 px-3">
<div class="card shadow h-100">
<div class="card-body">
<h5 class="card-title">Card title</h5>
<div id="top-graph"></div>
</div>
</div>
</div>
</div>
<!-- Bottom Row -->
<div class="row flex-grow-1">
<!-- Left -->
<div class="col-md-4 p-2 pl-3">
<div class="card shadow h-100">
<div class="card-body">
<h5 class="card-title">Auslastung ÖPNV am 19.05.2020</h5>
<div id="left-graph"></div>
</div>
</div>
</div>
<!-- Middle -->
<div class="col-md-4 p-2">
<div class="card shadow h-100">
<div class="card-body">
<h5 class="card-title">Kartenausschnitt Umkreis Uniklinikum Mannheim</h5>
<div id="middle-graph"></div>
</div>
</div>
</div>
<!-- Right -->
<div class="col-md-4 p-2 pr-3">
<div class="card shadow h-100">
<div class="card-body">
<h5 class="card-title">Auslastung der Krankenhäuser Mannheim</h5>
<h6 class="card-title">Belegung der Intensivbetten im Kreis Mannheim</h6>
<div id="right-graph1"></div>
<h6 class="card-title">Universitätsklinikum</h6>
<div id="right-graph2"></div>
<h6 class="card-title">Diakonissenkrankenhaus</h6>
<div id="right-graph3"></div>
<h6 class="card-title">Theresienkrankenhaus</h6>
<div id="right-graph4"></div>
<div id="right-graph"></div>
</div>
</div>
</div>
</div>
</div>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.5.1/jquery.min.js" integrity="sha256-9/aliU8dGd2tb6OSsuzixeV4y/faTqgFtohetphbbj0=" crossorigin="anonymous"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/4.5.0/js/bootstrap.min.js" integrity="sha256-OFRAJNoaD8L3Br5lglV7VyLRf0itmoBzWUoM+Sji4/8=" crossorigin="anonymous"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/d3/5.16.0/d3.min.js" integrity="sha256-Xb6SSzhH3wEPC4Vy3W70Lqh9Y3Du/3KxPqI2JHQSpTw=" crossorigin="anonymous"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/dc/4.0.3/dc.min.js" integrity="sha256-nnWFwZ3i2j5HWFnLM8oZrkabWG1Pn080eVXL6MvLsH4=" crossorigin="anonymous"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/crossfilter/1.3.12/crossfilter.min.js" integrity="sha256-T9tvV3x+/vCnCoFciKNZwbaJ46q9lh6iZjD0ZjD95lE=" crossorigin="anonymous"></script>
<script src="./js/heatmap.js"></script>
</body>
</html>
<!-- begin snippet: js hide: false console: true babel: false -->
Thanks for your help.
Related
Spring Boot + Thymeleaf: combine filtering and pagination for list
Good evening all,
I'm learning Thymeleaf and web applications in general right now, and for starters, I'm trying to implement a web service with a page where you can view all registered users and filter them.
Since I want some pagination, I have two forms on this page:
a group of buttons linking to the first, previous, next, and last page
a form with various options for filtering, e.g. "username contains" or "min / max age"
My controller looks like this:
#RequestMapping("/users/all")
String showSearchPage(#RequestParam(value="page", required=false, defaultValue = "0") int page,
#CurrentSecurityContext(expression="authentication?.name") String username,
Model model) {
Page<User> userPage = userService.filterUsers(username, "", 0, 100, PageRequest.of(page, 10));
model.addAttribute("userPage", userPage);
model.addAttribute("pageNr", page);
return "users.html";
}
As you can see, I only implemented the buttons yet and always filter for some default values. (The username parameter makes sure that the currently logged in user isn't finding themself in the list.) My button form looks like that:
<form class="button" th:action="#{/users/all}" method="POST">
<button th:disabled="${pageNr == 0}" type="submit"
class="btn btn-primary"
name="page" th:value="0"><<</button>
<button th:disabled="${pageNr == 0}" type="submit"
class="btn btn-primary"
name="page" th:value="${pageNr - 1}"><</button>
<button th:disabled="${pageNr == userPage.getTotalPages - 1}" type="submit"
class="btn btn-primary"
name="page" th:value="${pageNr + 1}">></button>
<button th:disabled="${pageNr == userPage.getTotalPages - 1}" type="submit"
class="btn btn-primary"
name="page" th:value="${userPage.getTotalPages - 1}">>></button>
</form>
So I'm using the request parameter page to only show the requested page.
Now that I'm about to implement the filtering, my first approach would be adding the form to my HTML, and adding some #ModelAttribute FilterForm filterForm to my controller to be able to get the submitted filter values and use them to retrieve the filtered user list. However, when thinking about it, I found the problem that both forms would only submit their own content, and the controller would only get one of both. Therefore, after filtering users, I would inadvertedly revert back to the full user list when changing pages.
What would be the best approach here to make sure that both functions, filtering and pagination, work together properly?
Thanks in advance!
I'd go with HTTP GET method instead of POST. Why so? Reading users is an idempotent and safe operation. The applied filter and page number can be easily bookmarked in that case.
For filters, you can just add more params. Nothing bad about that.
Make it a bit more RESTful. "/users/all" is unnecessary. "/users" should be enough.
#GetMapping("/users")
String showSearchPage(#RequestParam(value="page", required=false, defaultValue = "0") int page,
#RequestParam("minAge") Optional<Integer> minAge,
#RequestParam("maxAge") Optional<Integer> maxAge,
#CurrentSecurityContext(expression="authentication?.name") String username,
Model model) {
// Apply filters too...
Page<User> userPage = userService.filterUsers(username, "", 0, 100, PageRequest.of(page, 10));
model.addAttribute("userPage", userPage);
model.addAttribute("pageNr", page);
model.addAttribute("nextPage", getPageWithFilterUrl(page + 1, minAge, maxAge));
model.addAttribute("previousPage", getPageWithFilterUrl(page - 1, minAge, maxAge));
return "users.html";
}
To preserve filter while moving back and forth:
private String getPageWithFilterUrl(int page, Optional<Integer> minAge, Optional<Integer> maxAge) {
String defaultNextPageUrl = "/users?page=" + page;
String withMinAge = minAge.map(ma -> defaultNextPageUrl + "&minAge=" + ma).orElse(defaultNextPageUrl);
String withMaxAge = maxAge.map(ma -> withMinAge + "&maxAge=" + ma).orElse(withMinAge);
return withMaxAge;
}
I think the answer is not given here yet. I have the same problem now. I am trying in my project with redirectAttributes.addFlashAttribute("searchProductItemDTO", searchProductItemDTO);
But the problem comes when clicking on the Next/Previous buttons - clicking them does not take into account the search criteria.
Here is my total solution:
1) Pay attention here to the JpaSpecificationExecutor<ItemEntity>
#Repository
public interface AllItemsRepository extends
PagingAndSortingRepository<ItemEntity, Long>, JpaSpecificationExecutor<ItemEntity>{
}
2) Pay attention here to the CriteriaBuilder
public class ProductItemSpecification implements Specification<ItemEntity> {
private final SearchProductItemDTO searchProductItemDTO;
private final String type;
public ProductItemSpecification(SearchProductItemDTO searchProductItemDTO, String type) {
this.searchProductItemDTO = searchProductItemDTO;
this.type = type;
}
#Override
public Predicate toPredicate(Root<ItemEntity> root,
CriteriaQuery<?> query,
CriteriaBuilder cb) {
Predicate predicate = cb.conjunction();
predicate.getExpressions().add(cb.equal(root.get("type"), type));
if (searchProductItemDTO.getModel() != null && !searchProductItemDTO.getModel().isBlank()) {
Path<Object> model = root.get("model");
predicate.getExpressions().add(
//!!!!! when we have two relationally connected tables
// cb.and(cb.equal(root.join("model").get("name"), searchProductItemDTO.getModel()));
//when all fields are from the same table ItemEntity:::: the like works case insensitive
cb.and(cb.like(root.get("model").as(String.class), "%" + searchProductItemDTO.getModel() + "%"))
);
}
if (searchProductItemDTO.getMinPrice() != null) {
predicate.getExpressions().add(
cb.and(cb.greaterThanOrEqualTo(root.get("sellingPrice"),
searchProductItemDTO.getMinPrice()))
);
}
if (searchProductItemDTO.getMaxPrice() != null) {
predicate.getExpressions().add(
cb.and(cb.lessThanOrEqualTo(root.get("sellingPrice"),
searchProductItemDTO.getMaxPrice()))
);
}
return predicate;
}
}
3) Pay attention here to the this.allItemsRepository.findAll default usage
//Complicated use
public Page<ComputerViewGeneralModel> getAllComputersPageableAndSearched(
Pageable pageable, SearchProductItemDTO searchProductItemDTO, String type) {
Page<ComputerViewGeneralModel> allComputers = this.allItemsRepository
.findAll(new ProductItemSpecification(searchProductItemDTO, type), pageable)
.map(comp -> this.structMapper
.computerEntityToComputerSalesViewGeneralModel((ComputerEntity) comp));
return allComputers;
}
4) Pay attention here to the redirectAttributes.addFlashAttribute
#Controller
#RequestMapping("/items/all")
public class ViewItemsController {
private final ComputerService computerService;
#GetMapping("/computer")
public String viewAllComputers(Model model,
#Valid SearchProductItemDTO searchProductItemDTO,
#PageableDefault(page = 0,
size = 3,
sort = "sellingPrice",
direction = Sort.Direction.ASC) Pageable pageable,
RedirectAttributes redirectAttributes) {
if (!model.containsAttribute("searchProductItemDTO")) {
model.addAttribute("searchProductItemDTO", searchProductItemDTO);
}
Page<ComputerViewGeneralModel> computers = this.computerService
.getAllComputersPageableAndSearched(pageable, searchProductItemDTO, "computer");
model.addAttribute("computers", computers);
redirectAttributes.addFlashAttribute("searchProductItemDTO", searchProductItemDTO);
return "/viewItems/all-computers";
}
5) Pay attention here to all the search params that we add in the html file, in the 4 sections where pagination navigation
<main>
<div class="container-fluid">
<div class="container">
<h2 class="text-center text-white">Search for offers</h2>
<form
th:method="GET"
th:action="#{/items/all/computer}"
th:object="${searchProductItemDTO}"
class="form-inline"
style="justify-content: center; margin-top: 50px;"
>
<div style="position: relative">
<input
th:field="*{model}"
th:errorclass="is-invalid"
class="form-control mr-sm-2"
style="width: 280px;"
type="search"
placeholder="Model name case Insensitive..."
aria-label="Search"
id="model"
/>
<input
th:field="*{minPrice}"
th:errorclass="is-invalid"
class="form-control mr-sm-2"
style="width: 280px;"
type="search"
placeholder="Min price..."
aria-label="Search"
id="minPrice"
/>
<input
th:field="*{maxPrice}"
th:errorclass="is-invalid"
class="form-control mr-sm-2"
style="width: 280px;"
type="search"
placeholder="Max price..."
aria-label="Search"
id="maxPrice"
/>
</div>
<button class="btn btn-outline-info my-2 my-sm-0" type="submit">Search</button>
</form>
</div>
<h2 class="text-center text-white mt-5 greybg" th:text="#{view_all_computers}">.........All
Computers.......</h2>
<div class="offers row mx-auto d-flex flex-row justify-content-center .row-cols-auto">
<div
th:each="c : ${computers}" th:object="${c}"
class="offer card col-sm-2 col-md-3 col-lg-3 m-2 p-0">
<div class="card-img-top-wrapper" style="height: 20rem">
<img
class="card-img-top"
alt="Computer image"
th:src="*{photoUrl}">
</div>
<div class="card-body pb-1">
<h5 class="card-title"
th:text="' Model: ' + *{model}">
Model name</h5>
</div>
<ul class="offer-details list-group list-group-flush">
<li class="list-group-item">
<div class="card-text"><span th:text="'* ' + *{processor}">Processor</span></div>
<div class="card-text"><span th:text="'* ' + *{videoCard}">Video card</span></div>
<div class="card-text"><span th:text="'* ' + *{ram}">Ram</span></div>
<div class="card-text"><span th:text="'* ' + *{disk}">Disk</span></div>
<div th:if="*{!ssd.isBlank()}" class="card-text"><span th:text="'* ' + *{ssd}">SSD</span></div>
<div th:if="*{!moreInfo.isBlank()}" class="card-text"><span th:text="'* ' + *{moreInfo}">More info</span>
</div>
<div class="card-text"><span th:text="'We sell at: ' + *{sellingPrice} + ' лв'"
style="font-weight: bold">Selling price</span></div>
</li>
</ul>
<div class="card-body">
<div class="row">
<a class="btn btn-link"
th:href="#{/items/all/computer/details/{id} (id=*{itemId})}">Details</a>
<th:block sec:authorize="hasRole('ADMIN') || hasRole('EMPLOYEE_PURCHASES')">
<a class="btn btn-link alert-danger"
th:href="#{/pages/purchases/computers/{id}/edit (id=*{itemId})}">Update</a>
<form th:action="#{/pages/purchases/computers/delete/{id} (id=*{itemId})}"
th:method="delete">
<input type="submit" class="btn btn-link alert-danger" value="Delete"></input>
</form>
</th:block>
</div>
</div>
</div>
</div>
<div class="container-fluid row justify-content-center">
<nav>
<ul class="pagination">
<li class="page-item" th:classappend="${computers.isFirst()} ? 'disabled' : ''">
<a th:unless="${computers.isFirst()}"
class="page-link"
th:href="#{/items/all/computer(size=${computers.getSize()},page=0,model=${searchProductItemDTO.getModel()}, minPrice=${searchProductItemDTO.getMinPrice()},maxPrice=${searchProductItemDTO.getMaxPrice()})}">First</a>
</li>
</ul>
</nav>
<nav>
<ul class="pagination">
<li class="page-item" th:classappend="${computers.hasPrevious() ? '' : 'disabled'}">
<a th:if="${computers.hasPrevious()}"
class="page-link"
th:href="#{/items/all/computer(size=${computers.getSize()},page=${computers.getNumber() - 1},model=${searchProductItemDTO.getModel()}, minPrice=${searchProductItemDTO.getMinPrice()},maxPrice=${searchProductItemDTO.getMaxPrice()})}">Previous</a>
</li>
</ul>
</nav>
<nav>
<ul class="pagination">
<li class="page-item" th:classappend="${computers.hasNext() ? '' : 'disabled'}">
<a th:if="${computers.hasNext()}"
class="page-link"
th:href="#{/items/all/computer(size=${computers.getSize()},page=${computers.getNumber() + 1},model=${searchProductItemDTO.getModel()}, minPrice=${searchProductItemDTO.getMinPrice()},maxPrice=${searchProductItemDTO.getMaxPrice()})}">Next</a>
</li>
</ul>
</nav>
<nav>
<ul class="pagination">
<li class="page-item" th:classappend="${computers.isLast()} ? 'disabled' : ''">
<a th:unless="${computers.isLast()}"
class="page-link"
th:href="#{/items/all/computer(size=${computers.getSize()},page=${computers.getTotalPages()-1},model=${searchProductItemDTO.getModel()},minPrice=${searchProductItemDTO.getMinPrice()},maxPrice=${searchProductItemDTO.getMaxPrice()})}">Last</a>
</li>
</ul>
</nav>`enter code here`
</div>
</div>
</main>
HtmlAgilityPack SelectNodes InnerText returns placeholder text not actual value
in my app i want to scrape a web page to extract the values i am interesting.
(ShopData is the HtmlNodeCollection)
and my C# code like this :
var ShopName = ShopData.SelectNodes(".//div[#class='shop-name']");
this return null
if i try this, returns the node:
var ShopName1 = ShopData.SelectNodes(".//div[contains(#class, 'shop cf')]")
why .//div[#class='shop-name'] does not work?
if i do ShopData.SelectNodes(".//div[contains(#class, 'shop cf')]").ToList()[0];
then the innertext is empty.
the same time ShopData.SelectNodes(".//div[#class='price']").ToList()[0].InnerText return text normally.
what are the difference between this 2 functions?
my web page looks like this:
<li class="cf card js-product-card">
<div class="shop cf">
<div class="shop-logo js-shop-logo">
<img class="fade-in" src="//a.scdn.gr/ds/shops/logos/2870/mid_20181210114648_f305ba08.jpeg" data-src="//a.scdn.gr/ds/shops/logos/2870/mid_20181210114648_f305ba08.jpeg" alt="Electroholic">
</div>
<i class="icon tooltip-parent js-tooltip-handler trustmark" data-trigger="toggle" data-type="string" data-theme="light" data-content="Το κατάστημα διαθέτει πιστοποίηση GRECA Trustmark που σημαίνει ότι έχει δεσμευτεί να εργαστεί σύμφωνα με τον Eλληνικό και Ευρωπαϊκό (αντίστοιχα) Κώδικα Ηλεκτρονικού Εμπορίου, διασφαλίζοντας δεοντολογικά πρότυπα στην ψηφιακή αγορά.<div>Περισσότερες πληροφορίες στην <a href='http://www.greekecommerce.gr/' target='_blank'>ιστοσελίδα του GRECA.</a></div>" data-placement="left">
<span>GRECA Trustmark</span>
</i>
<div class="shop-name">Electroholic</div>
</div>
<div class="description">
<div class="item">
<h3>
<a title="Πολυμηχάνημα Epson EcoTank ITS L6170 WiFi ink - έως 60 δόσεις" rel="nofollow" class="js-product-link content-placeholder" data-type="title" href="/products/show/32755241">
Πολυμηχάνημα Epson EcoTank ITS L6170 WiFi ink - έως 60 δόσεις</a>
</h3>
<p class="availability"><span class="availability">Παράδοση έως 30 ημέρες</span></p>
</div>
</div>
<div class="price">
<div class="">
<div class="price-content"><a title="Πολυμηχάνημα Epson EcoTank ITS L6170 WiFi ink - έως 60 δόσεις" rel="nofollow" class="js-product-link product-link content-placeholder" data-type="net_price" href="/products/show/32755241">358,00 €</a><span class="extra-cost cf"><em>+ 9,00 €</em> <span>Μεταφορικά</span></span><span class="extra-cost cf"><em>+ 2,00 €</em> <span>Αντικαταβολή</span></span><span class="final-price"><a title="Πολυμηχάνημα Epson EcoTank ITS L6170 WiFi ink - έως 60 δόσεις" rel="nofollow" class="js-product-link content-placeholder" data-type="final_price" href="/products/show/32755241">369,00 €</a></span></div>
</div>
</div>
<div class="shop-details react-expander-bottom js-product-uservoice"><span class="payment-options"><i class="icon tooltip-parent js-tooltip-handler trustmark" data-trigger="toggle" data-type="string" data-theme="light" data-content="Το κατάστημα διαθέτει πιστοποίηση GRECA Trustmark που σημαίνει ότι έχει δεσμευτεί να εργαστεί σύμφωνα με τον Eλληνικό και Ευρωπαϊκό (αντίστοιχα) Κώδικα Ηλεκτρονικού Εμπορίου, διασφαλίζοντας δεοντολογικά πρότυπα στην ψηφιακή αγορά.<div>Περισσότερες πληροφορίες στην <a href='http://www.greekecommerce.gr/' target='_blank'>ιστοσελίδα του GRECA.</a></div>" data-placement="auto vertical"><span>GRECA Trustmark</span></i>
</span>
<div class="shop-expander-tabs">
<button class="shop-tab js-shop-tab icon ">
<div class="rating-with-count react-component">
<a class="rating stars" title="3,9 αστέρια από 1493 χρήστες" href="#reviews">
<div class="rating-wrapper">
<div class="actual-rating blue" itemprop="" style="width: 78%;">1493</div><span itemprop="">3,9</span></div>
</a>
<div class="reviews-count blue">
<a title="1493 αξιολογήσεις χρηστών" href="#reviews">1493</a></div>
</div>
</button>
<button class="shop-tab js-shop-tab icon location-tab multi-shops ">
<span>Περιστέρι, Αττική</span></button>
</div>
<div class="shop-info-object js-shop-info-expander ">
</div>
</div>
</li>
OK, i figure out what is goin on. the web page use AJAX calls and thats why i cannot see them.
KnockoutJS elements not rendered once loaded via Jquery Ajax function
I have loaded a sidebar over ajax however this html uses knockoutJS to render completely. I am wondering how to execute the KnockoutJs portions of this code.
The content below is loaded via jQuery ajax function and contains a number of knockout elements as well as some X Magento Init type scripts:
<div class=\"block filter\" id=\"layered-filter-block\" data-mage-init='{\"collapsible\":{\"openedState\": \"active\", \"collapsible\": true, \"active\": false, \"collateral\": { \"openedState\": \"filter-active\", \"element\": \"body\" } }}'>
<div class=\"block-title filter-title\" data-count=\"0\">
<strong data-role=\"title\">Shop By<\/strong>
<\/div>
<div class=\"block-content filter-content\">
<strong role=\"heading\" aria-level=\"2\" class=\"block-subtitle filter-subtitle\">Shopping Options<\/strong>
<div class=\"filter-options\" id=\"narrow-by-list\" data-role=\"content\" data-mage-init='{\"accordion\":{\"openedState\": \"active\", \"collapsible\": true, \"active\": [0,1,2], \"multipleCollapsible\": true}}'>
<div data-role=\"collapsible\" class=\"filter-options-item\">
<div data-role=\"title\" class=\"filter-options-title\">Category<\/div>
<div data-role=\"content\" class=\"filter-options-content\">\n<ol class=\"items\">
<li class=\"item\">
<a href=\"http:\/\/www.domain.com\/catalogsearch\/result\/index\/?ajax=1&cat=143&q=ice+machine\">Front of House
<span class=\"count\">2<span class=\"filter-count-label\">items<\/span><\/span><\/a>
<\/li>
<li class=\"item\">
<a href=\"http:\/\/www.domain.com\/catalogsearch\/result\/index\/?ajax=1&cat=182&q=ice+machine\">Bar Supplies
<span class=\"count\">4<span class=\"filter-count-label\">items<\/span><\/span><\/a>
<\/li>
<li class=\"item\">
<a href=\"http:\/\/www.domain.com\/catalogsearch\/result\/index\/?ajax=1&cat=257&q=ice+machine\">Catering Equipment<span class=\"count\">111<span class=\"filter-count-label\">\n
items <\/span><\/span>\n
<\/a>\n <\/li>\n
<li class=\"item\">\n
<a href=\"http:\/\/www.domain.com\/catalogsearch\/result\/index\/?ajax=1&cat=342&q=ice+machine\">\n
Warewashing <span class=\"count\">\n
3 <span class=\"filter-count-label\">\n
items <\/span><\/span>\n
<\/a>\n <\/li>\n <li class=\"item\">\n
<a href=\"http:\/\/www.domain.com\/catalogsearch\/result\/index\/?ajax=1&cat=521&q=ice+machine\">\n
Catering Equipment Offers <span class=\"count\">\n 1
<span class=\"filter-count-label\">\n item <\/span><\/span>\n
<\/a>\n <\/li>\
<\/ol>
<\/div>\n
<\/div>\n
<div data-role=\"collapsible\" class=\"filter-options-item\">
<div data-role=\"title\" class=\"filter-options-title\">Brand<\/div>\n
<div data-role=\"content\" class=\"filter-options-content\">
<div data-bind=\"scope: 'brandFilter'\">
<!-- ko template: getTemplate() --> <!-- \/ko -->
<\/div>
<script type=\"text\/x-magento-init\">
{\"*\" : {\"Magento_Ui\/js\/core\/app\": {\"components\": {\"brandFilter\": {\"component\":\"Smile_ElasticsuiteCatalog\\\/js\\\/attribute-filter\",\"maxSize\":10,\"displayProductCount\":true,\"hasMoreItems\":true,\"ajaxLoadUrl\":\"http:\\\/\\\/www.domain.com\\\/catalog\\\/navigation_filter\\\/ajax\\\/?ajax=1&filterName=brand&q=ice+machine\",\"items\":[{\"label\":\"Scotsman\",\"count\":41,\"url\":\"http:\\\/\\\/www.domain.com\\\/catalogsearch\\\/result\\\/index\\\/?ajax=1&brand=Scotsman&q=ice+machine\",\"is_selected\":false},{\"label\":\"Hoshizaki\",\"count\":15,\"url\":\"http:\\\/\\\/www.domain.com\\\/catalogsearch\\\/result\\\/index\\\/?ajax=1&brand=Hoshizaki&q=ice+machine\",\"is_selected\":false},{\"label\":\"Ice-o-matic\",\"count\":12,\"url\":\"http:\\\/\\\/www.domain.com\\\/catalogsearch\\\/result\\\/index\\\/?ajax=1&brand=Ice-o-matic&q=ice+machine\",\"is_selected\":false},{\"label\":\"Blue Ice\",\"count\":7,\"url\":\"http:\\\/\\\/www.domain.com\\\/catalogsearch\\\/result\\\/index\\\/?ajax=1&brand=Blue+Ice&q=ice+machine\",\"is_selected\":false},{\"label\":\"Graupel\",\"count\":7,\"url\":\"http:\\\/\\\/www.domain.com\\\/catalogsearch\\\/result\\\/index\\\/?ajax=1&brand=Graupel&q=ice+machine\",\"is_selected\":false},{\"label\":\"Nemox\",\"count\":7,\"url\":\"http:\\\/\\\/www.domain.com\\\/catalogsearch\\\/result\\\/index\\\/?ajax=1&brand=Nemox&q=ice+machine\",\"is_selected\":false},{\"label\":\"Manitowoc\",\"count\":6,\"url\":\"http:\\\/\\\/www.domain.com\\\/catalogsearch\\\/result\\\/index\\\/?ajax=1&brand=Manitowoc&q=ice+machine\",\"is_selected\":false},{\"label\":\"Polar Refrigeration\",\"count\":5,\"url\":\"http:\\\/\\\/www.domain.com\\\/catalogsearch\\\/result\\\/index\\\/?ajax=1&brand=Polar+Refrigeration&q=ice+machine\",\"is_selected\":false},{\"label\":\"Longo & Co\",\"count\":4,\"url\":\"http:\\\/\\\/www.domain.com\\\/catalogsearch\\\/result\\\/index\\\/?ajax=1&brand=Longo+%26+Co&q=ice+machine\",\"is_selected\":false},{\"label\":\"Beaumont\",\"count\":3,\"url\":\"http:\\\/\\\/www.domain.com\\\/catalogsearch\\\/result\\\/index\\\/?ajax=1&brand=Beaumont&q=ice+machine\",\"is_selected\":false}]}}}}}\n<\/script>\n\n<\/div>\n <\/div>\n <div data-role=\"collapsible\" class=\"filter-options-item\">\n <div data-role=\"title\" class=\"filter-options-title\">Power<\/div>\n <div data-role=\"content\" class=\"filter-options-content\"><div data-bind=\"scope: 'power_ddFilter'\">\n <!-- ko template: getTemplate() --> <!-- \/ko -->\n<\/div>\n\n<script type=\"text\/x-magento-init\">\n {\"*\" : {\"Magento_Ui\/js\/core\/app\": {\"components\": {\"power_ddFilter\": {\"component\":\"Smile_ElasticsuiteCatalog\\\/js\\\/attribute-filter\",\"maxSize\":10,\"displayProductCount\":true,\"hasMoreItems\":false,\"ajaxLoadUrl\":\"http:\\\/\\\/www.domain.com\\\/catalog\\\/navigation_filter\\\/ajax\\\/?ajax=1&filterName=power_dd&q=ice+machine\",\"items\":[{\"label\":\"13 Amp (Plug)\",\"count\":111,\"url\":\"http:\\\/\\\/www.domain.com\\\/catalogsearch\\\/result\\\/index\\\/?ajax=1&power_dd=13+Amp+%28Plug%29&q=ice+machine\",\"is_selected\":false},{\"label\":\"1 Phase (Hard Wired)\",\"count\":2,\"url\":\"http:\\\/\\\/www.domain.com\\\/catalogsearch\\\/result\\\/index\\\/?ajax=1&power_dd=1+Phase+%28Hard+Wired%29&q=ice+machine\",\"is_selected\":false}]}}}}}\n<\/script>\n\n<\/div>\n <\/div>\n <div data-role=\"collapsible\" class=\"filter-options-item\">\n <div data-role=\"title\" class=\"filter-options-title\">Price<\/div>\n <div data-role=\"content\" class=\"filter-options-content\"><div class=\"smile-es-range-slider\" data-role=\"range-price-slider-price\">\n <div data-role=\"from-label\"><\/div>\n <div data-role=\"to-label\"><\/div>\n <div data-role=\"slider-bar\"><\/div>\n <div class=\"actions-toolbar\">\n <div data-role=\"message-box\"><\/div>\n <div class=\"actions-primary\">\n <a class=\"action primary small\" data-role=\"apply-range\">\n <span>OK<\/span>\n <\/a>\n <\/div>\n <\/div>\n<\/div>\n\n<script type=\"text\/x-magento-init\">\n { \"[data-role=range-price-slider-price]\" : { \"rangeSlider\" : {\"minValue\":1,\"maxValue\":6091,\"currentValue\":{\"from\":1,\"to\":6091},\"fieldFormat\":{\"pattern\":\"\\u00a3%s\",\"precision\":2,\"requiredPrecision\":2,\"decimalSymbol\":\".\",\"groupSymbol\":\",\",\"groupLength\":3,\"integerRequired\":false},\"intervals\":[{\"value\":1,\"count\":1},{\"value\":2,\"count\":1},{\"value\":3,\"count\":1},{\"value\":40,\"count\":1},{\"value\":60,\"count\":1},{\"value\":64,\"count\":1},{\"value\":150,\"count\":1},{\"value\":179,\"count\":1},{\"value\":190,\"count\":1},{\"value\":242,\"count\":1},{\"value\":291,\"count\":1},{\"value\":325,\"count\":1},{\"value\":355,\"count\":2},{\"value\":395,\"count\":1},{\"value\":465,\"count\":1},{\"value\":472,\"count\":1},{\"value\":515,\"count\":1},{\"value\":520,\"count\":1},{\"value\":535,\"count\":1},{\"value\":555,\"count\":1},{\"value\":577,\"count\":1},{\"value\":585,\"count\":1},{\"value\":599,\"count\":1},{\"value\":605,\"count\":2},{\"value\":615,\"count\":1},{\"value\":640,\"count\":1},{\"value\":658,\"count\":1},{\"value\":685,\"count\":1},{\"value\":705,\"count\":1},{\"value\":730,\"count\":1},{\"value\":745,\"count\":2},{\"value\":785,\"count\":1},{\"value\":805,\"count\":1},{\"value\":830,\"count\":1},{\"value\":895,\"count\":2},{\"value\":925,\"count\":1},{\"value\":965,\"count\":1},{\"value\":970,\"count\":1},{\"value\":990,\"count\":2},{\"value\":1030,\"count\":1},{\"value\":1065,\"count\":1},{\"value\":1080,\"count\":1},{\"value\":1085,\"count\":1},{\"value\":1095,\"count\":1},{\"value\":1105,\"count\":1},{\"value\":1130,\"count\":1},{\"value\":1155,\"count\":1},{\"value\":1225,\"count\":1},{\"value\":1235,\"count\":1},{\"value\":1240,\"count\":1},{\"value\":1259,\"count\":1},{\"value\":1310,\"count\":1},{\"value\":1360,\"count\":1},{\"value\":1365,\"count\":1},{\"value\":1450,\"count\":1},{\"value\":1485,\"count\":1},{\"value\":1495,\"count\":1},{\"value\":1510,\"count\":1},{\"value\":1580,\"count\":2},{\"value\":1605,\"count\":2},{\"value\":1685,\"count\":1},{\"value\":1710,\"count\":1},{\"value\":1779,\"count\":1},{\"value\":1785,\"count\":1},{\"value\":1865,\"count\":1},{\"value\":1870,\"count\":1},{\"value\":1885,\"count\":1},{\"value\":1890,\"count\":1},{\"value\":1970,\"count\":1},{\"value\":1995,\"count\":1},{\"value\":2000,\"count\":1},{\"value\":2050,\"count\":1},{\"value\":2130,\"count\":1},{\"value\":2199,\"count\":1},{\"value\":2220,\"count\":1},{\"value\":2345,\"count\":1},{\"value\":2350,\"count\":1},{\"value\":2360,\"count\":1},{\"value\":2405,\"count\":1},{\"value\":2415,\"count\":1},{\"value\":2445,\"count\":1},{\"value\":2450,\"count\":2},{\"value\":2480,\"count\":1},{\"value\":2500,\"count\":1},{\"value\":2530,\"count\":1},{\"value\":2565,\"count\":1},{\"value\":2570,\"count\":1},{\"value\":2595,\"count\":1},{\"value\":2695,\"count\":1},{\"value\":2730,\"count\":1},{\"value\":2825,\"count\":1},{\"value\":2850,\"count\":1},{\"value\":2950,\"count\":1},{\"value\":2995,\"count\":1},{\"value\":3010,\"count\":1},{\"value\":3025,\"count\":1},{\"value\":3145,\"count\":1},{\"value\":3205,\"count\":1},{\"value\":3295,\"count\":1},{\"value\":3300,\"count\":1},{\"value\":3485,\"count\":1},{\"value\":3495,\"count\":1},{\"value\":3580,\"count\":1},{\"value\":4015,\"count\":1},{\"value\":4075,\"count\":1},{\"value\":4305,\"count\":1},{\"value\":4310,\"count\":1},{\"value\":4595,\"count\":1},{\"value\":4620,\"count\":1},{\"value\":5250,\"count\":1},{\"value\":5355,\"count\":1},{\"value\":6090,\"count\":1}],\"urlTemplate\":\"http:\\\/\\\/www.domain.com\\\/catalogsearch\\\/result\\\/index\\\/?ajax=1&price=<%- from %>-<%- to %>&q=ice+machine\",\"messageTemplates\":{\"displayCount\":\"<%- count %> products\",\"displayEmpty\":\"No products in the selected range.\"},\"rate\":1}
} }
<\/script>
<\/div>
<\/div>
<\/div>
<\/div>
<\/div>
These are then added to a block on my page via html jQuery method:
$(sidebarBlock).html(this.filters);
Looking at the DOM I cannot actually see the scripts however they are there in response when reviewing with console.log(). Similarly the below shows the scripts are present:
$(sidebar).find("script").each(function() {
console.log("found a script");
}
I have tried to use .trigger('contentUpdated'); like below:
document.getElementById("layered-filter-block").innerHTML = this.filters;
$(sidebarBlock).trigger('contentUpdated');
and:
$(sidebarBlock).html(this.filters);
$(sidebarBlock).trigger('contentUpdated');
and by reapplying bindings for knockout:
ko.cleanNode($('#layered-filter-block'));
ko.applyBindings($('#layered-filter-block'));
The above throws an error about bindings already being applied however but I have used cleanNode before to unbind however error persists.
This fixed issue for me: $(sidebarBlock).applyBindings(); https://codeblog.experius.nl/magento-2-uicomponent-reinit-ajax-reload/
Scrapy and XPath issue with nested Xpaths
I'm trying to read Amazon products into scrapy.
Starting from a random category using this XPath:
products = Selector(response).xpath('//div[#class="s-item-container"]')
for product in products:
item = AmzItem()
item['title'] = product.xpath('//a[#class="s-access-detail-page"]/#title').extract()[0]
item['url'] = product.xpath('//a[#class="s-access-detail-page"]/#href').extract()[0]
yield item
('//div[#class="s-item-container"]') returns all the divs with the products on one category page - that's correct.
Now, how would I get the link to the product?
// stands for where ever in the code
a with the #class should select the right class
But I get a:
item['title'] = product.xpath('//a[#class="s-access-detail-page"]/#title').extract()[0]
exceptions.IndexError: list index out of range
So my list matching this XPath must be empty - but I don't understand why?
EDIT:
The HTML would look like that:
<div class="s-item-container" style="height: 343px;">
<div class="a-row a-spacing-base">
<div class="a-column a-span12 a-text-left">
<div class="a-section a-spacing-none a-inline-block s-position-relative">
<a class="a-link-normal a-text-normal" href="https://rads.stackoverflow.com/amzn/click/com/B0105S434A" rel="nofollow noreferrer"><img alt="Product Details" src="http://ecx.images-amazon.com/images/I/41%2BzrAY74UL._AA160_.jpg" onload="viewCompleteImageLoaded(this, new Date().getTime(), 24, false);" class="s-access-image cfMarker" height="160" width="160"></a>
<div class="a-section a-spacing-none a-text-center">
<div class="a-row a-spacing-top-mini">
<a class="a-size-mini a-link-normal a-text-normal" href="https://rads.stackoverflow.com/amzn/click/com/B0105S434A" rel="nofollow noreferrer">
<div class="a-box">
<div class="a-box-inner a-padding-mini"><span class="a-color-secondary">See more choices</span></div>
</div>
</a>
</div>
</div>
</div>
</div>
</div>
<div class="a-row a-spacing-mini">
<div class="a-row a-spacing-none">
<a class="a-link-normal s-access-detail-page a-text-normal" title="Harry Potter Gryffindor School Fancy Robe Cloak Costume And Tie (Size S)" href="https://rads.stackoverflow.com/amzn/click/com/B0105S434A" rel="nofollow noreferrer">
<h2 class="a-size-base a-color-null s-inline s-access-title a-text-normal">Harry Potter Gryffindor School Fancy Robe Cloak Costume And Tie (Size S)</h2>
</a>
</div>
<div class="a-row a-spacing-mini"><span class="a-size-small a-color-secondary">by </span><span class="a-size-small a-color-secondary">Legend</span></div>
</div>
<div class="a-row a-spacing-mini">
<div class="a-row a-spacing-none"><a class="a-size-small a-link-normal a-text-normal" href="http://www.amazon.com/gp/offer-listing/B0105S434A/ref=sr_1_21_olp?s=pet-supplies&ie=UTF8&qid=1435391788&sr=1-21&keywords=pet+supplies&condition=new"><span class="a-size-base a-color-price a-text-bold">$28.99</span><span class="a-letter-space"></span>new<span class="a-letter-space"></span><span class="a-color-secondary">(1 offer)</span><span class="a-letter-space"></span><span class="a-color-secondary a-text-strike"></span></a></div>
</div>
<div class="a-row a-spacing-none"><span name="B0105S434A">
<span class="a-declarative" data-action="a-popover" data-a-popover="{"max-width":"700","closeButton":"false","position":"triggerBottom","url":"/review/widgets/average-customer-review/popover/ref=acr_search__popover?ie=UTF8&asin=B0105S434A&contextId=search&ref=acr_search__popover"}"><i class="a-icon a-icon-star a-star-4"><span class="a-icon-alt">3.9 out of 5 stars</span></i><i class="a-icon a-icon-popover"></i></span></span>
<a class="a-size-small a-link-normal a-text-normal" href="https://rads.stackoverflow.com/amzn/click/com/B0105S434A" rel="nofollow noreferrer">48</a>
</div>
</div>
It should be:
# ------------- The dot makes the query relative to product
product.xpath('.//a[#class="s-access-detail-page"]/#title')
//a[#class="s-access-detail-page"] requires to be exactly class="s-access-detail-page", because xpath works with string but not with meaning :) When you have "multi class ", use contains function
//a[contains(concat(' ', #class, ' '), " s-access-detail-page ")]/#title
Angular-devise 401 unauthorized error on landing page
I am building an app ROR that uses Devise for authentication and the angular-devise gem to link my angularJS front-end to rails.
When I come to the landing page of the app though the console is showing an error which I understand to be devise trying to sign in and having no username or password for that. My question is: Why is it trying to sign in?
I admit my limited understanding of how Devise and Angular-devise work. So I am not being able to debug this error. On top of that I m having the error twice, which I understand to be devise trying to sign in twice. I still don't know where these calls are being made to improve the code.
navCtrl.js
angular.module('theNotesApp')
.controller('navCtrl', ['$scope', 'Auth', '$state', 'notesFactory', 'Flash', function($scope, Auth, $state, notesService, Flash) {
$scope.signedIn = Auth.isAuthenticated;
$scope.logout = Auth.logout;
$scope.successAlert = function() {
var message = '<strong> Well done!</strong> You successfully read this important alert message.';
Flash.create('success', message, 'custom-class');
// First argument (success) is the type of the flash alert
// Second argument (message) is the message displays in the flash alert
// You can inclide html as message (not just text)
// Third argument (custom-class) is the custom class for the perticular flash alert
};
// When the controller loads the function below is executed and the currentUser returned promise is set as
//the value of $scope.user
Auth.currentUser().then(function(user) {
$scope.user = user;
});
$scope.$on('devise:new-registration', function(event, user){
$scope.user = user;
});
$scope.$on('devise:login', function (event, user){
$scope.user = user;
});
$scope.$on('devise:logout', function (event, user){
$scope.user = {};
$state.go('welcome');
$scope.clear();
});
}])
authCtrl.js
angular.module('theNotesApp')
.controller('authCtrl',['$scope', '$state', 'Auth', function($scope, $state, Auth) {
$scope.login = function() {
Auth.login($scope.user).then(function () {
$state.go('home');
});
};
$scope.register = function() {
Auth.register($scope.user).then(function () {
$state.go('home');
});
};
}])
application_controller.rb
![class ApplicationController < ActionController::Base
# Prevent CSRF attacks by raising an exception.
# For APIs, you may want to use :null_session instead.
protect_from_forgery with: :exception
respond_to :json
before_action :configure_permitted_parameters, if: :devise_controller?
def angular
render 'layouts/application'
end
def configure_permitted_parameters
devise_parameter_sanitizer.for(:sign_up) << :username
end
end][3]
application.html.erb
<!DOCTYPE html>
<html>
<head>
<title>The Notes App</title>
<meta name="viewport" content="width=device-width, initial-scale=1">
<script src="http://ajax.googleapis.com/ajax/libs/angularjs/1.2.19/angular.min.js"></script>
<script src="http://cdnjs.cloudflare.com/ajax/libs/angular-ui-router/0.2.10/angular-ui-router.js"></script>
<!--jquerytag must be on top as it's required for bootstrap.min.js-->
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.2/jquery.min.js"></script>
<!--javascript plugins -->
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.4/js/bootstrap.min.js"></script>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.4/css/bootstrap.min.css">
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.4/css/bootstrap-theme.min.css">
<%= stylesheet_link_tag 'application', media: 'all' %>
<%= javascript_include_tag 'application' %>
<%= csrf_meta_tags %>
</head>
<body ng-app="theNotesApp">
<nav class="navbar navbar-default" ng-controller="navCtrl" ng-show="signedIn()" >
<div class="container-fluid">
<div class="navbar-header">
<button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#bs-example-navbar-collapse-1">
<span class="sr-only">Toggle navigation</span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
</button>
<a class="navbar-brand" href="#/home">The Notes App</a>
</div>
<div class="collapse navbar-collapse" id="bs-example-navbar-collapse-1">
<ul class="nav navbar-nav navbar-right">
<li><a href="#/home" >+ New Note</a></li>
<li class="active" ng-hide="signedIn()">Register <span class="sr-only">(current)</span></li>
<li ng-hide="signedIn()">Login</li>
<li ng-show="signedIn()">{{user.email}}</li>
<li ng-show="signedIn()"><a ng-click="logout()">Logout</a></li>
</ul>
</div>
</div>
</nav>
<ui-view></ui-view>
</body>
</html>
welcome.html
<div class="intro-header fadein">
<div class="container">
<div class="row">
<div class="col-lg-12">
<div class="intro-message" style="color: black">
<h1>The Notes App</h1>
<h3>Access your notes anywhere, anytime!</h3>
<hr class="intro-divider">
<ul class="list-inline intro-social-buttons">
<li>
<i class="fa fa-twitter fa-fw"></i> <span class="network-name">Login</span>
</li>
<li>
<i class="fa fa-github fa-fw"></i> <span class="network-name">register</span>
</li>
</ul>
</div>
</div>
<div class="col-lg-12" >
</div>
</div>
</div>
<!-- /.container -->
</div>
In navCtrl.js you have:
Auth.currentUser().then(function(user) {
$scope.user = user;
});
This is responsible for one of the sign-in attempt.
I don't know where the other attempt is from. I would advise you to check for a similar call by running grep -r Auth\.currentUser app in you Rails root folder.
If my guess is right, signedIn() function will be fire up "sign_in.json" call. If yes then it is due to ng-show="signedIn()" / ng-hide="signedIn()" that you have in application.html.erb. Ng-show & ng-hide will be evaluated when the page is parsed.