OpenLayers v6.3.1 How to instantiate several polygon sub-objects that make up a TopoJSON object inserted in my Script with the “.readFeatures” method? - openlayers-6
My TopoJSON object contains 3 polygonal sub-objects of which the first D2P1 appears with the geometry correctly drawn on the OSM map, but the other 2 polygons D2P2 and D2P3 are drawn distorted on the map turning into projected lines instead of their! correct geometry.
Could you help me to write my code correctly so that my 3 polygons appear correctly configured?
<!DOCTYPE html>
<html lang="es">
<head>
<meta charset="utf-8" />
<script src="https://cdn.jsdelivr.net/gh/openlayers/openlayers.github.io#master/en/v6.
3.1/build/ol.js" type="text/javascript"></script>
<link rel="stylesheet" href="https://cdn.jsdelivr.net/gh/openlayers/openlayers.github.io#master/en/v6
.3.1/css/ol.css" type="text/css">
<style>
/*estilo de la caja del mapa*/
#map {
width: 100%;
height: 700px;
box-shadow: 5px 5px 5px #888;
}
</style>
<style>
/*estilo de los controles del mapa*/
.ol-mouse-position {
/*estilo del control de longitud y latitud */
font-size: 12px;
font-family: Arial Black;
}
</style>
</head>
<body>
<div id="map"></div>
<script>
var osm = new ol.layer.Tile({ // capa osm (Open Street Maps)
source: new ol.source.OSM()
});
// OBJETO TopoJSON
var Y = {
"type": "Topology",
"arcs": [
[
[711, 1839],
[-37, -99],
[-3, -8],
[-2, -4],
[-3, -4],
[-2, -3],
[-1, -1],
[-2, -1],
[-3, -3],
[-2, -1],
[-4, -2],
[-1, 0],
[-3, -1],
[-24, 1],
[-12, -3],
[-10, -15],
[-1, -3],
[-5, -13],
[-2, -23],
[-1, -94],
[275, -220],
[17, -31],
[34, -52],
[117, -112],
[19, -19],
[30, -142]
],
[
[1085, 986],
[-5, -9],
[0, 0],
[-30, -40],
[-47, -48],
[-18, -16],
[-21, -16],
[-45, -61],
[-16, -16],
[-4, -4],
[-101, -125],
[-28, -6],
[-5, -7],
[-3, -2],
[-3, -1],
[-7, -16],
[-573, 431],
[-1, 1],
[-12, 5],
[-9, 3],
[-157, 6],
[16, 868],
[14, 15],
[82, 49],
[599, -158]
],
[
[711, 1839],
[315, -82],
[459, -119],
[-3, -4],
[-143, -167],
[75, -84],
[-12, -10],
[-39, -51],
[-3, -3],
[-15, -16],
[-76, -26],
[-133, -211],
[-28, -44],
[-23, -36]
],
[
[2354, 410],
[-76, -313],
[-220, 43],
[-37, -140],
[-11, 11],
[-129, 128],
[-17, 17],
[-6, 5],
[-5, 2],
[-7, 3],
[-8, 2],
[-15, 4],
[-173, 40],
[-169, 39],
[-2, 6],
[3, 33],
[-239, 651],
[-21, 32],
[-86, 93],
[133, 211],
[76, 26],
[15, 16],
[3, 3],
[39, 51],
[12, 10],
[-75, 84],
[146, 171],
[2, 1],
[16, 3],
[11, 2],
[9, 1],
[16, 2],
[20, 3],
[20, 1],
[16, 2],
[21, -2],
[14, -2],
[20, -3],
[18, -4],
[21, -8],
[24, -10],
[15, -9],
[23, -14],
[39, -28],
[32, -27],
[20, -14],
[32, -18],
[22, -10],
[23, -6],
[35, -4],
[33, -5],
[41, -1],
[74, -8],
[44, -15],
[73, -32],
[101, -41],
[169, -77],
[118, -51],
[74, -35],
[12, -5],
[-15, -66],
[-41, -179],
[-69, -252],
[-35, -26],
[-3, -9],
[-7, -15],
[-14, -48],
[-4, -57],
[-7, -16],
[-39, -41],
[-14, -22],
[-21, -44],
[-23, -3],
[-15, -1],
[-9, -2],
[-8, -6],
[-10, -16],
[-5, -11],
[0, 0]
]
],
"transform": {
"scale": [0.00001991525380089962, 0.000012987212987305721],
"translate": [-98.20093192354561, 19.06017018766488]
},
"objects": {
"D2P1": {
"type": "GeometryCollection",
"geometries": [{
"arcs": [
[0, 1]
],
"type": "Polygon",
"properties": {
"Name": "(STA. MARÍA) 1 P.MARIA AUXILIO DE LOS CRISTIANOS",
"description": null,
"timestamp": null,
"begin": null,
"end": null,
"altitudeMode": null,
"tessellate": -1,
"extrude": 0,
"visibility": -1,
"drawOrder": null,
"icon": null,
"snippet": ""
}
}]
},
"D2P2": {
"type": "GeometryCollection",
"geometries": [{
"arcs": [
[-1, 2]
],
"type": "Polygon",
"properties": {
"Name": "(STA. MARÍA) 2 P. NUESTRA SEÑORA DE LA CANDELARIA",
"description": null,
"timestamp": null,
"begin": null,
"end": null,
"altitudeMode": null,
"tessellate": -1,
"extrude": 0,
"visibility": -1,
"drawOrder": null,
"icon": null,
"snippet": ""
}
}]
},
"D2P3": {
"type": "GeometryCollection",
"geometries": [{
"arcs": [
[3]
],
"type": "Polygon",
"properties": {
"Name": "(STA. MARÍA) 3 P. SEÑOR DE LAS MARAVILLAS",
"description": null,
"timestamp": null,
"begin": null,
"end": null,
"altitudeMode": null,
"tessellate": -1,
"extrude": 0,
"visibility": -1,
"drawOrder": null,
"icon": null,
"snippet": ""
}
}]
}
}
};
/* source*/
var sourceD2P1 = new ol.source.Vector({
features: (new ol.format.TopoJSON({
layers: ['D2P1']
})).readFeatures(Y, {
dataProjection: 'EPSG:4326',
featureProjection: 'EPSG:3857'
}),
});
var sourceD2P2 = new ol.source.Vector({
features: (new ol.format.TopoJSON({
layers: ['D2P2']
})).readFeatures(Y, {
dataProjection: 'EPSG:4326',
featureProjection: 'EPSG:3857'
}),
});
var sourceD2P3 = new ol.source.Vector({
features: (new ol.format.TopoJSON({
layers: ['D2P3']
})).readFeatures(Y, {
dataProjection: 'EPSG:4326',
featureProjection: 'EPSG:3857'
}),
});
/*LAYER.VECTOR*/
var vectorD2P1 = new ol.layer.Vector({ // ----D2P1
source: sourceD2P1,
style: new ol.style.Style({
fill: new ol.style.Fill({
color: 'green',
}),
stroke: new ol.style.Stroke({
color: 'green',
width: 1
})
})
});
var vectorD2P2 = new ol.layer.Vector({ // ----D2P2
source: sourceD2P2,
style: new ol.style.Style({
fill: new ol.style.Fill({
color: 'red',
}),
stroke: new ol.style.Stroke({
color: 'red',
width: 1
})
})
});
var vectorD2P3 = new ol.layer.Vector({ // ----D2P3
source: sourceD2P3,
style: new ol.style.Style({
fill: new ol.style.Fill({
color: 'blue',
}),
stroke: new ol.style.Stroke({
color: 'blue',
width: 1
})
})
});
var controls = ol.control.defaults().extend([
new ol.control.ScaleLine(), /*control del mapita lateral*/
new ol.control.Attribution(), /*control del letrero de Open Street Maps*/
new ol.control.MousePosition({ /*control de LONGITUD Y LATITUD en donde se coloque el mause*/
coordinateFormat: ol.coordinate.createStringXY(4),
projection: 'EPSG:4326'
}),
new ol.control.OverviewMap({
layers: [
new ol.layer.Tile({
source: new ol.source.OSM()
})
]
}),
/*new ol.control.ZoomSlider(),*/
new ol.control.FullScreen() /*control de expancon u cerrado del mapa*/
]);
var Mivista = new ol.View({
center: ol.proj.fromLonLat([-98.2172, 19.03464]),
zoom: 12
}) //-98.197, 19.0433 puebla
var layers = [osm,
vectorD2P1, vectorD2P2, vectorD2P3,
];
// Creacion del mapa con las 3 capas
var map = new ol.Map({
/*target------*/
target: 'map',
/*layers------*/
layers: layers,
controls: controls,
/*view--------*/
view: Mivista,
});
Mivista.setRotation(-.4999) // Rota el plano 27 grados
</script>
</body>
</html>
I LEAVE YOU THE CODE THAT ANSWERS MY QUESTION, I HOPE IT WILL BE VERY USEFUL
<!DOCTYPE html>
<html lang="es">
<head>
<meta charset="utf-8" />
<script src="https://cdn.jsdelivr.net/gh/openlayers/openlayers.github.io#master/en/v6.
3.1/build/ol.js" type="text/javascript"></script>
<link rel="stylesheet" href="https://cdn.jsdelivr.net/gh/openlayers/openlayers.github.io#master/en/v6
.3.1/css/ol.css" type="text/css">
<style>
/*estilo de la caja del mapa*/
#map {
width: 100%;
height: 1000px;
box-shadow: 5px 5px 5px #888;
}
</style>
<style>
/*estilo de los controles del mapa*/
.ol-mouse-position {
/*estilo del control de longitud y latitud */
font-size: 12px;
font-family: Arial Black;
}
</style>
</head>
<body>
<div id="map"></div>
<script>
var osm = new ol.layer.Tile({ // capa osm (Open Street Maps)
source: new ol.source.OSM()
});
// OBJECTO_1 TopoJSON
var geojsonObjectochentaPARROQUIAS = {
// OBJETO TopoJSON
"type": "Topology",
"arcs": [
[
[711, 1839],
[-37, -99],
[-3, -8],
[-2, -4],
[-3, -4],
[-2, -3],
[-1, -1],
[-2, -1],
[-3, -3],
[-2, -1],
[-4, -2],
[-1, 0],
[-3, -1],
[-24, 1],
[-12, -3],
[-10, -15],
[-1, -3],
[-5, -13],
[-2, -23],
[-1, -94],
[275, -220],
[17, -31],
[34, -52],
[117, -112],
[19, -19],
[30, -142]
],
[
[1085, 986],
[-5, -9],
[0, 0],
[-30, -40],
[-47, -48],
[-18, -16],
[-21, -16],
[-45, -61],
[-16, -16],
[-4, -4],
[-101, -125],
[-28, -6],
[-5, -7],
[-3, -2],
[-3, -1],
[-7, -16],
[-573, 431],
[-1, 1],
[-12, 5],
[-9, 3],
[-157, 6],
[16, 868],
[14, 15],
[82, 49],
[599, -158]
],
[
[711, 1839],
[315, -82],
[459, -119],
[-3, -4],
[-143, -167],
[75, -84],
[-12, -10],
[-39, -51],
[-3, -3],
[-15, -16],
[-76, -26],
[-133, -211],
[-28, -44],
[-23, -36]
],
[
[2354, 410],
[-76, -313],
[-220, 43],
[-37, -140],
[-11, 11],
[-129, 128],
[-17, 17],
[-6, 5],
[-5, 2],
[-7, 3],
[-8, 2],
[-15, 4],
[-173, 40],
[-169, 39],
[-2, 6],
[3, 33],
[-239, 651],
[-21, 32],
[-86, 93],
[133, 211],
[76, 26],
[15, 16],
[3, 3],
[39, 51],
[12, 10],
[-75, 84],
[146, 171],
[2, 1],
[16, 3],
[11, 2],
[9, 1],
[16, 2],
[20, 3],
[20, 1],
[16, 2],
[21, -2],
[14, -2],
[20, -3],
[18, -4],
[21, -8],
[24, -10],
[15, -9],
[23, -14],
[39, -28],
[32, -27],
[20, -14],
[32, -18],
[22, -10],
[23, -6],
[35, -4],
[33, -5],
[41, -1],
[74, -8],
[44, -15],
[73, -32],
[101, -41],
[169, -77],
[118, -51],
[74, -35],
[12, -5],
[-15, -66],
[-41, -179],
[-69, -252],
[-35, -26],
[-3, -9],
[-7, -15],
[-14, -48],
[-4, -57],
[-7, -16],
[-39, -41],
[-14, -22],
[-21, -44],
[-23, -3],
[-15, -1],
[-9, -2],
[-8, -6],
[-10, -16],
[-5, -11],
[0, 0]
]
],
"transform": {
"scale": [0.00001991525380089962, 0.000012987212987305721],
"translate": [-98.20093192354561, 19.06017018766488]
},
"objects": {
"D2P1": {
"type": "GeometryCollection",
"geometries": [{
"arcs": [
[0, 1]
],
"type": "Polygon",
"properties": {
"Name": "(STA. MARÍA) 1 P.MARIA AUXILIO DE LOS CRISTIANOS",
"description": null,
"timestamp": null,
"begin": null,
"end": null,
"altitudeMode": null,
"tessellate": -1,
"extrude": 0,
"visibility": -1,
"drawOrder": null,
"icon": null,
"snippet": ""
}
}]
},
"D2P2": {
"type": "GeometryCollection",
"geometries": [{
"arcs": [
[-1, 2]
],
"type": "Polygon",
"properties": {
"Name": "(STA. MARÍA) 2 P. NUESTRA SEÑORA DE LA CANDELARIA",
"description": null,
"timestamp": null,
"begin": null,
"end": null,
"altitudeMode": null,
"tessellate": -1,
"extrude": 0,
"visibility": -1,
"drawOrder": null,
"icon": null,
"snippet": ""
}
}]
},
"D2P3": {
"type": "GeometryCollection",
"geometries": [{
"arcs": [
[3]
],
"type": "Polygon",
"properties": {
"Name": "(STA. MARÍA) 3 P. SEÑOR DE LAS MARAVILLAS",
"description": null,
"timestamp": null,
"begin": null,
"end": null,
"altitudeMode": null,
"tessellate": -1,
"extrude": 0,
"visibility": -1,
"drawOrder": null,
"icon": null,
"snippet": ""
}
}]
}
}
};
// OBJECTO_2 TopoJSON
var geojsonObjectXXX = { // -------------------------------------------------ObjectXXX-----Municipio_TopoJSON
"type": "Topology",
"arcs": [
[
[3698, 68],
[-126, 23],
[-54, 8],
[-370, -99],
[-112, 35],
[-249, 34],
[-133, 44],
[-62, 66],
[-35, 73],
[29, 117],
[-38, 91],
[-95, 135],
[-58, 226],
[-38, 29],
[-24, 82],
[-102, 79],
[-64, 94],
[-91, 38],
[-98, 4],
[-104, -18],
[-77, -53],
[-95, -37],
[-37, -47],
[-139, -59],
[-55, -59],
[-105, -57],
[-62, -10],
[-93, 35],
[-536, -78],
[-105, 19],
[-76, 98],
[-39, 16],
[-160, 3],
[14, 30],
[59, 50],
[63, 87],
[112, 135],
[23, 71],
[-49, 67],
[-52, 37],
[-19, 0],
[-20, -17],
[-66, 9],
[-79, -8],
[-62, -14],
[-82, 14],
[-43, 3],
[-62, 63],
[-32, 81],
[9, 39],
[41, 52],
[30, 18],
[5, 40],
[13, 25],
[25, 3],
[46, -9],
[46, -1],
[38, 9],
[33, 28],
[-10, 36],
[-23, 53],
[-8, 30],
[22, 45],
[35, 110],
[2, 15],
[25, 173],
[1, 79],
[1, 142],
[-5, 202],
[28, 10],
[58, -2],
[54, 4],
[42, 16],
[13, 41],
[-94, 114],
[-39, 34],
[-6, 11],
[-8, 15],
[9, 43],
[-35, 77],
[5, 103],
[-4, 66],
[-39, 64],
[-28, 20],
[-66, 49],
[-58, 63],
[68, 31],
[18, 35],
[0, 61],
[3, 61],
[32, 55],
[38, 29],
[-80, 137],
[87, 24],
[35, 47],
[52, 23],
[96, 28],
[39, -76],
[44, -33],
[47, 42],
[30, 22],
[111, -8],
[44, 17],
[19, 62],
[28, 17],
[90, -2],
[55, 76],
[59, 91],
[20, 68],
[20, 69],
[34, 48],
[115, 70],
[27, 46],
[46, -1],
[78, -2],
[75, 71],
[92, -18],
[41, 21],
[2, 2],
[54, 90],
[68, 18],
[3, 4],
[38, 63],
[15, 45],
[51, 28],
[35, 62],
[5, 46],
[-68, 115],
[-66, 37],
[-54, 31],
[-78, 33],
[-23, 33],
[-12, 19],
[-19, -18],
[41, -92],
[-123, 10],
[-240, 19],
[39, 16],
[-23, 7],
[-98, 33],
[-27, 12],
[-37, 17],
[-144, -129],
[-16, 101],
[-113, 53],
[-45, 71],
[-186, 20],
[48, 138],
[53, -5],
[156, 112],
[-61, 124],
[-86, 32],
[52, 150],
[47, 145],
[12, 39],
[18, 39],
[2, 4],
[22, 77],
[-53, 28],
[-39, 24],
[110, 66],
[25, 15],
[14, 35],
[18, 139],
[62, -7],
[58, 85],
[91, -52],
[78, -12],
[106, -17],
[22, 86],
[5, 22],
[10, 42],
[57, 31],
[6, 36],
[-17, 37],
[-11, 8],
[-11, -5],
[1, 9],
[-29, 54],
[-4, 62],
[-3, 4],
[-18, 24],
[86, 51],
[27, -26],
[30, 34],
[15, 38],
[93, -57],
[27, 15],
[22, 15],
[8, 14],
[-5, 32],
[-15, 36],
[6, 28],
[24, 27],
[7, 42],
[62, 57],
[1, 16],
[-79, 55],
[1, 14],
[42, 25],
[21, 1],
[24, 20],
[5, 69],
[-11, 22],
[-24, 23],
[0, 13],
[4, 38],
[11, 8],
[6, 21],
[-12, 12],
[0, 16],
[15, 19],
[6, 19],
[4, 91],
[9, 10],
[-7, 19],
[14, 10],
[17, 2],
[17, -8],
[44, -7],
[23, 9],
[15, 11],
[12, 28],
[-12, 35],
[9, 8],
[-6, 101],
[10, -12],
[25, -36],
[31, 34],
[21, -30],
[3, -16],
[60, 2],
[-5, 12],
[40, -12],
[40, -17],
[37, -19],
[48, -8],
[15, 3],
[32, -3],
[29, -9],
[27, -2],
[48, 4],
[26, 2],
[29, 7],
[25, 4],
[23, 11],
[15, 10],
[22, 3],
[-1, -8],
[16, -15],
[28, -17],
[11, -10],
[3, -7],
[-3, -8],
[-18, -21],
[-3, -14],
[1, -12],
[12, -23],
[3, -10],
[-3, -11],
[-14, -11],
[-10, -14],
[-4, -20],
[4, -13],
[7, -14],
[6, -12],
[8, -24],
[15, -68],
[-1, -106],
[-5, -23],
[-2, -64],
[-5, -17],
[-16, -36],
[17, -9],
[25, -4],
[40, 4],
[40, 9],
[28, 16],
[20, 19],
[43, -1],
[16, 10],
[16, -6],
[23, -22],
[77, -31],
[123, -53],
[83, -43],
[22, -7],
[125, -52],
[210, -80],
[174, -74],
[45, -19],
[44, -14],
[61, 12],
[14, 5],
[12, 7],
[4, 5],
[9, 4],
[2, 3],
[10, 3],
[38, 27],
[3, 3],
[3, 5],
[2, 5],
[0, 4],
[5, 8],
[27, -18],
[18, -12],
[31, 42],
[39, 35],
[58, 34],
[129, 56],
[53, 30],
[34, 21],
[29, 21],
[63, 48],
[33, 14],
[20, 6],
[19, 1],
[24, 6],
[15, 6],
[19, 13],
[213, 202],
[161, 201],
[31, 79],
[22, 52],
[93, 97],
[86, 64],
[37, 63],
[112, 50],
[-11, 11],
[46, 16],
[22, 16],
[24, 28],
[12, 4],
[70, 27],
[15, 10],
[19, 7],
[16, 9],
[7, 15],
[2, 13],
[3, 9],
[7, 8],
[20, 16],
[13, 11],
[15, 9],
[11, 19],
[24, 10],
[13, 9],
[9, 1],
[11, 5],
[11, 1],
[18, -2],
[22, -2],
[44, 0],
[38, 32],
[6, 56],
[-7, 76],
[30, 76],
[93, 127],
[209, 2],
[33, -1],
[118, -5],
[120, 116],
[203, 130],
[178, 202],
[177, 151],
[141, 43],
[124, 102],
[137, 213],
[133, 176],
[127, 158],
[12, 217],
[51, 110],
[94, -27],
[65, -115],
[6, -171],
[3, -22],
[241, -231],
[-135, -147],
[-47, 16],
[-6, -79],
[-126, -184],
[-13, -90],
[-71, 70],
[-52, -46],
[1, -114],
[35, -117],
[-16, -246],
[3, -183],
[-1, -35],
[-50, -141],
[1, -113],
[-46, -302],
[57, -66],
[136, 198],
[86, 8],
[-24, -126],
[-65, -35],
[-13, -69],
[-13, -72],
[-34, -43],
[-34, -102],
[-87, 11],
[-37, -13],
[-81, -95],
[-61, -33],
[-89, -50],
[16, -78],
[-18, -75],
[-67, -46],
[-130, -61],
[-22, -37],
[43, -182],
[-22, -105],
[-42, -20],
[-27, -5],
[-24, -8],
[-37, -65],
[-65, -47],
[-70, -17],
[-103, -52],
[-74, -89],
[-6, -101],
[-36, -43],
[-46, -146],
[-97, -161],
[-22, -93],
[-31, -21],
[-46, -165],
[-54, -190],
[-4, -40],
[77, -92],
[28, -57],
[-1, 0],
[-315, 73],
[-74, 2],
[-138, 4],
[-162, -25],
[-132, -20],
[-157, -3],
[-65, -52],
[-24, -160],
[-42, -30],
[-7, -15],
[2, -29],
[21, 6],
[23, -32],
[-104, 0],
[-12, -2],
[-254, -4],
[1, -12],
[-29, 0],
[0, -25],
[-42, 4],
[-93, 9],
[2, -7],
[-7, 0],
[-27, -1],
[-23, -13],
[0, -16],
[48, -67],
[40, -5],
[38, -6],
[44, -6],
[40, -31],
[11, -8],
[39, -30],
[32, -26],
[93, -72],
[-26, -120],
[-159, -128],
[-12, -10],
[-23, -139],
[-24, -149],
[-118, -199],
[44, -84],
[-23, -60],
[-28, 22],
[-17, -29],
[-75, -43],
[-73, -9],
[-4, -18],
[-45, -53],
[51, -150],
[70, -150],
[19, -90],
[-65, -91],
[-21, -30],
[3, -345],
[-10, -48],
[14, -49],
[-29, -32],
[13, -18],
[34, -47],
[-2, -32],
[-3, -41],
[85, -25],
[62, -46],
[70, -52],
[80, -33],
[193, -65],
[80, -66],
[55, -138],
[-38, -73],
[23, -56],
[278, -196],
[92, -53],
[117, -37],
[118, -210],
[-120, -1],
[-185, -48],
[-77, 56],
[-285, -61],
[-28, -169],
[-205, -26],
[67, 172],
[-131, 34],
[-3, 73],
[-174, 7],
[-16, -66],
[-50, -23],
[-54, 33],
[-208, -45],
[-43, -70],
[-42, -3],
[-70, -39],
[-162, -442],
[-7, -315],
[-153, -388],
[-11, -185],
[-98, -58]
]
],
"transform": {
"scale": [3.750052683335661, 4.395371608583082],
"translate": [-10941343.283091985, 2137380.706460472]
},
"objects": {
"municipioDePuebla": {
"type": "GeometryCollection",
"geometries": [{
"arcs": [
[0]
],
"type": "Polygon",
"properties": {
"Name": "MUNICIPIO DE PUEBLA",
"description": null,
"timestamp": null,
"begin": null,
"end": null,
"altitudeMode": null,
"tessellate": -1,
"extrude": 0,
"visibility": -1,
"drawOrder": null,
"icon": null,
"snippet": ""
}
}]
}
}
}; // Municipio_TopoJSON
/* ol.format.TopoJSON------------------------------------------------------------------------------------------------------------------*/
var sourceOchentaPARROQUIAS = new ol.source.Vector({
features: (new ol.format.TopoJSON({
layers: ['D2P1', 'D2P2', 'D2P3']
})).readFeatures(geojsonObjectochentaPARROQUIAS, {
dataProjection: 'EPSG:4326',
featureProjection: 'EPSG:3857'
})
});
var sourceMunicipio = new ol.source.Vector({
features: (new ol.format.TopoJSON()).readFeatures(geojsonObjectXXX)
});
/* ol.layer.Vector-----------------------------------------------------------------------------------------------------------------------*/
function generateRandomColor(seed) {
let r = Math.floor(Math.random() * 255)
let g = Math.floor(Math.random() * 255)
let b = Math.floor(Math.random() * 255)
return `rgba(${r}, ${g}, ${b}, 0.3)`
}
let features = sourceOchentaPARROQUIAS.getFeatures()
let colors = {}
features.forEach((feature, i) => {
let geom = feature.getGeometry()
colors[geom.ol_uid] = generateRandomColor(geom.ol_uid)
})
function vectorStyleFunction(feature) {
let geom = feature.getGeometry()
let id = geom.ol_uid
let style = new ol.style.Style({
fill: new ol.style.Fill({
color: colors[id]
}),
stroke: new ol.style.Stroke({
color: /*'rgba(9, 87, 140, 1)',*/ 'blue',
width: 1
}),
text: new ol.style.Text({
font: '12px Calibri,sans-serif',
fill: new ol.style.Fill({
color: '#000',
}),
stroke: new ol.style.Stroke({
color: '#fff',
width: 3,
}),
}),
})
// style.getText().setText(geom.ol_uid);
return style
}
var vectorLayerOchentaPARROQUIAS = new ol.layer.Vector({ // ----82 POLIGONOS
source: sourceOchentaPARROQUIAS,
style: vectorStyleFunction
});
var vectorLayerMunicipioDePuebla = new ol.layer.Vector({ // ----1 POLIGONO
source: sourceMunicipio,
style: new ol.style.Style({
fill: new ol.style.Fill({
color: 'rgba(255, 255, 255, 0.00)'
}),
stroke: new ol.style.Stroke({
color: '#09a7ee',
width: 2
}),
})
});
/* CONTROLES-----------------------------------------------------------------------------------------------------------------------*/
var controls = ol.control.defaults().extend([
new ol.control.ScaleLine(), /*control del mapita lateral*/
new ol.control.Attribution(), /*control del letrero de Open Street Maps*/
new ol.control.MousePosition({ /*control de LONGITUD Y LATITUD en donde se coloque el mause*/
coordinateFormat: ol.coordinate.createStringXY(4),
projection: 'EPSG:4326'
}),
new ol.control.OverviewMap({
layers: [
new ol.layer.Tile({
source: new ol.source.OSM()
})
]
}),
/*new ol.control.ZoomSlider(),*/
new ol.control.FullScreen() /*control de expancon u cerrado del mapa*/
]);
// Creacion del mapa con las TRES capas
var Mivista = new ol.View({
center: ol.proj.fromLonLat([-98.2172, 19.0150]),
zoom: 12
}) //-98.197, 19.0433 puebla
// pedida de capas
/*LAYERS*/
var layers = [osm, vectorLayerOchentaPARROQUIAS, vectorLayerMunicipioDePuebla];
var map = new ol.Map({
/*target------*/
target: 'map',
layers: layers,
controls: controls,
/*view--------*/
view: Mivista,
});
Mivista.setRotation(-.4999) // Rota el plano 27 grados en sentido contrario de las manecillas del reloj
</script>
</body>
</html>
Related
How can I get cuML RandomForestClassifier leafs?
I'm new to cuML and I have a decision tree classifier using scikit learn. I would like to perform some hyperparameter search using the GPU, so I started looking cuML. There is no DecisionTreeClassifier in cuML, but it can be reproduced by using RandomForestClassifier with 1 tree and no bootstrap, as far as I read on other SO posts. My problem is how can I extract the tree and all the rules (the leafs and nodes) using cuML RandomForestClassifier? Or I should be looking to other algorithms like XGBoost?
Access to the underlying decision trees or information isn't necessary to do hyperparameter optimization.
With that said, you can access summary information about the underlying trees and leaf predictions like this:
from cuml.ensemble import RandomForestClassifier
from cuml.datasets import make_classification
N = 100
K = 10
X, y = make_classification(
n_samples=N,
n_features=K,
n_informative=K,
n_redundant=0
)
clf = RandomForestClassifier(n_estimators=2)
clf.fit(X, y)
print(clf.get_summary_text())
print(clf.get_detailed_text())
print(clf.get_json())
Forest has 2 trees, max_depth 16, and max_leaves -1
Tree #0
Decision Tree depth --> 9 and n_leaves --> 18
Tree Fitting - Overall time --> 1.216 milliseconds
Tree #1
Decision Tree depth --> 7 and n_leaves --> 16
Tree Fitting - Overall time --> 1.919 milliseconds
Forest has 2 trees, max_depth 16, and max_leaves -1
Tree #0
Decision Tree depth --> 9 and n_leaves --> 18
Tree Fitting - Overall time --> 1.216 milliseconds
└(colid: 7, quesval: 2.73323, best_metric_val: 0.0407427)
├(colid: 9, quesval: -0.233239, best_metric_val: 0.116631)
│ ├(colid: 2, quesval: -1.48028, best_metric_val: 0.045858)
│ │ ├(colid: 8, quesval: -1.14041, best_metric_val: 0.28125)
│ │ │ ├(leaf, prediction: [0, 1], best_metric_val: 0)
│ │ │ └(colid: 1, quesval: 0.720062, best_metric_val: 0.375)
│ │ │ ├(leaf, prediction: [1, 0], best_metric_val: 0)
│ │ │ └(leaf, prediction: [0, 1], best_metric_val: 0)
│ │ └(leaf, prediction: [0, 1], best_metric_val: 0)
│ └(colid: 3, quesval: -1.01601, best_metric_val: 0.313368)
│ ├(colid: 8, quesval: 1.68195, best_metric_val: 0.0131944)
│ │ ├(leaf, prediction: [1, 0], best_metric_val: 0)
│ │ └(colid: 6, quesval: -0.458985, best_metric_val: 0.32)
│ │ ├(leaf, prediction: [0, 1], best_metric_val: 0)
│ │ └(leaf, prediction: [1, 0], best_metric_val: 0)
│ └(colid: 7, quesval: -2.86422, best_metric_val: 0.126263)
│ ├(leaf, prediction: [1, 0], best_metric_val: 0)
│ └(colid: 8, quesval: 1.3618, best_metric_val: 0.0198347)
│ ├(colid: 9, quesval: 1.96266, best_metric_val: 0.142222)
│ │ ├(colid: 5, quesval: -0.427346, best_metric_val: 0.0308642)
│ │ │ ├(colid: 8, quesval: -0.295362, best_metric_val: 0.125)
│ │ │ │ ├(leaf, prediction: [0, 1], best_metric_val: 0)
│ │ │ │ └(colid: 6, quesval: 1.99819, best_metric_val: 0.5)
│ │ │ │ ├(leaf, prediction: [1, 0], best_metric_val: 0)
│ │ │ │ └(leaf, prediction: [0, 1], best_metric_val: 0)
│ │ │ └(leaf, prediction: [0, 1], best_metric_val: 0)
│ │ └(leaf, prediction: [1, 0], best_metric_val: 0)
│ └(leaf, prediction: [0, 1], best_metric_val: 0)
└(colid: 3, quesval: 1.4614, best_metric_val: 0.239645)
├(leaf, prediction: [1, 0], best_metric_val: 0)
└(colid: 7, quesval: 3.80204, best_metric_val: 0.125)
├(leaf, prediction: [0, 1], best_metric_val: 0)
└(colid: 8, quesval: 0.637938, best_metric_val: 0.5)
├(leaf, prediction: [0, 1], best_metric_val: 0)
└(leaf, prediction: [1, 0], best_metric_val: 0)
Tree #1
Decision Tree depth --> 7 and n_leaves --> 16
Tree Fitting - Overall time --> 1.919 milliseconds
└(colid: 8, quesval: -1.19294, best_metric_val: 0.111478)
├(colid: 7, quesval: -2.32102, best_metric_val: 0.0867768)
│ ├(leaf, prediction: [1, 0], best_metric_val: 0)
│ └(leaf, prediction: [0, 1], best_metric_val: 0)
└(colid: 3, quesval: 0.590359, best_metric_val: 0.180291)
├(colid: 6, quesval: -2.11692, best_metric_val: 0.126613)
│ ├(leaf, prediction: [0, 1], best_metric_val: 0)
│ └(colid: 5, quesval: -1.94796, best_metric_val: 0.0655193)
│ ├(colid: 6, quesval: 1.18255, best_metric_val: 0.489796)
│ │ ├(leaf, prediction: [0, 1], best_metric_val: 0)
│ │ └(leaf, prediction: [1, 0], best_metric_val: 0)
│ └(colid: 8, quesval: 3.48108, best_metric_val: 0.0196773)
│ ├(colid: 5, quesval: 0.71779, best_metric_val: 0.00283446)
│ │ ├(colid: 4, quesval: 1.85633, best_metric_val: 1.19209e-07)
│ │ │ ├(leaf, prediction: [1, 0], best_metric_val: 0)
│ │ │ └(leaf, prediction: [1, 0], best_metric_val: 0)
│ │ └(colid: 5, quesval: 0.815552, best_metric_val: 0.152778)
│ │ ├(leaf, prediction: [0, 1], best_metric_val: 0)
│ │ └(leaf, prediction: [1, 0], best_metric_val: 0)
│ └(colid: 9, quesval: 0.690919, best_metric_val: 0.5)
│ ├(leaf, prediction: [0, 1], best_metric_val: 0)
│ └(leaf, prediction: [1, 0], best_metric_val: 0)
└(colid: 6, quesval: 2.16413, best_metric_val: 0.071035)
├(colid: 7, quesval: 3.80204, best_metric_val: 0.0818594)
│ ├(colid: 9, quesval: 1.33454, best_metric_val: 0.02)
│ │ ├(leaf, prediction: [0, 1], best_metric_val: 0)
│ │ └(colid: 5, quesval: 0.0840077, best_metric_val: 0.375)
│ │ ├(leaf, prediction: [0, 1], best_metric_val: 0)
│ │ └(leaf, prediction: [1, 0], best_metric_val: 0)
│ └(leaf, prediction: [1, 0], best_metric_val: 0)
└(leaf, prediction: [1, 0], best_metric_val: 0)
[
{"nodeid": 0, "split_feature": 7, "split_threshold": 2.7332263, "gain": 0.0407427214, "instance_count": 100, "yes": 1, "no": 2, "children": [
{"nodeid": 1, "split_feature": 9, "split_threshold": -0.233238578, "gain": 0.116630867, "instance_count": 87, "yes": 3, "no": 4, "children": [
{"nodeid": 3, "split_feature": 2, "split_threshold": -1.48028064, "gain": 0.0458579995, "instance_count": 39, "yes": 7, "no": 8, "children": [
{"nodeid": 7, "split_feature": 8, "split_threshold": -1.1404053, "gain": 0.28125, "instance_count": 8, "yes": 13, "no": 14, "children": [
{"nodeid": 13, "leaf_value": [0, 1], "instance_count": 4},
{"nodeid": 14, "split_feature": 1, "split_threshold": 0.720061541, "gain": 0.375, "instance_count": 4, "yes": 21, "no": 22, "children": [
{"nodeid": 21, "leaf_value": [1, 0], "instance_count": 3},
{"nodeid": 22, "leaf_value": [0, 1], "instance_count": 1}
]}
]},
{"nodeid": 8, "leaf_value": [0, 1], "instance_count": 31}
]},
{"nodeid": 4, "split_feature": 3, "split_threshold": -1.01600909, "gain": 0.313368142, "instance_count": 48, "yes": 9, "no": 10, "children": [
{"nodeid": 9, "split_feature": 8, "split_threshold": 1.68195295, "gain": 0.0131943803, "instance_count": 24, "yes": 15, "no": 16, "children": [
{"nodeid": 15, "leaf_value": [1, 0], "instance_count": 19},
{"nodeid": 16, "split_feature": 6, "split_threshold": -0.458984971, "gain": 0.320000023, "instance_count": 5, "yes": 23, "no": 24, "children": [
{"nodeid": 23, "leaf_value": [0, 1], "instance_count": 1},
{"nodeid": 24, "leaf_value": [1, 0], "instance_count": 4}
]}
]},
{"nodeid": 10, "split_feature": 7, "split_threshold": -2.86421776, "gain": 0.126262575, "instance_count": 24, "yes": 17, "no": 18, "children": [
{"nodeid": 17, "leaf_value": [1, 0], "instance_count": 2},
{"nodeid": 18, "split_feature": 8, "split_threshold": 1.36179876, "gain": 0.0198347215, "instance_count": 22, "yes": 25, "no": 26, "children": [
{"nodeid": 25, "split_feature": 9, "split_threshold": 1.96266103, "gain": 0.142222196, "instance_count": 10, "yes": 27, "no": 28, "children": [
{"nodeid": 27, "split_feature": 5, "split_threshold": -0.427345634, "gain": 0.0308641735, "instance_count": 9, "yes": 29, "no": 30, "children": [
{"nodeid": 29, "split_feature": 8, "split_threshold": -0.295361876, "gain": 0.125, "instance_count": 4, "yes": 31, "no": 32, "children": [
{"nodeid": 31, "leaf_value": [0, 1], "instance_count": 2},
{"nodeid": 32, "split_feature": 6, "split_threshold": 1.99819326, "gain": 0.5, "instance_count": 2, "yes": 33, "no": 34, "children": [
{"nodeid": 33, "leaf_value": [1, 0], "instance_count": 1},
{"nodeid": 34, "leaf_value": [0, 1], "instance_count": 1}
]}
]},
{"nodeid": 30, "leaf_value": [0, 1], "instance_count": 5}
]},
{"nodeid": 28, "leaf_value": [1, 0], "instance_count": 1}
]},
{"nodeid": 26, "leaf_value": [0, 1], "instance_count": 12}
]}
]}
]}
]},
{"nodeid": 2, "split_feature": 3, "split_threshold": 1.46139979, "gain": 0.239644989, "instance_count": 13, "yes": 5, "no": 6, "children": [
{"nodeid": 5, "leaf_value": [1, 0], "instance_count": 9},
{"nodeid": 6, "split_feature": 7, "split_threshold": 3.8020432, "gain": 0.125, "instance_count": 4, "yes": 11, "no": 12, "children": [
{"nodeid": 11, "leaf_value": [0, 1], "instance_count": 2},
{"nodeid": 12, "split_feature": 8, "split_threshold": 0.637937546, "gain": 0.5, "instance_count": 2, "yes": 19, "no": 20, "children": [
{"nodeid": 19, "leaf_value": [0, 1], "instance_count": 1},
{"nodeid": 20, "leaf_value": [1, 0], "instance_count": 1}
]}
]}
]}
]},
{"nodeid": 0, "split_feature": 8, "split_threshold": -1.19294095, "gain": 0.111478344, "instance_count": 100, "yes": 1, "no": 2, "children": [
{"nodeid": 1, "split_feature": 7, "split_threshold": -2.3210218, "gain": 0.0867768154, "instance_count": 22, "yes": 3, "no": 4, "children": [
{"nodeid": 3, "leaf_value": [1, 0], "instance_count": 1},
{"nodeid": 4, "leaf_value": [0, 1], "instance_count": 21}
]},
{"nodeid": 2, "split_feature": 3, "split_threshold": 0.590358853, "gain": 0.180290893, "instance_count": 78, "yes": 5, "no": 6, "children": [
{"nodeid": 5, "split_feature": 6, "split_threshold": -2.1169188, "gain": 0.12661314, "instance_count": 56, "yes": 7, "no": 8, "children": [
{"nodeid": 7, "leaf_value": [0, 1], "instance_count": 5},
{"nodeid": 8, "split_feature": 5, "split_threshold": -1.94796324, "gain": 0.065519318, "instance_count": 51, "yes": 11, "no": 12, "children": [
{"nodeid": 11, "split_feature": 6, "split_threshold": 1.18254995, "gain": 0.489795923, "instance_count": 7, "yes": 15, "no": 16, "children": [
{"nodeid": 15, "leaf_value": [0, 1], "instance_count": 4},
{"nodeid": 16, "leaf_value": [1, 0], "instance_count": 3}
]},
{"nodeid": 12, "split_feature": 8, "split_threshold": 3.48108315, "gain": 0.0196772516, "instance_count": 44, "yes": 17, "no": 18, "children": [
{"nodeid": 17, "split_feature": 5, "split_threshold": 0.717789888, "gain": 0.00283446093, "instance_count": 42, "yes": 21, "no": 22, "children": [
{"nodeid": 21, "split_feature": 4, "split_threshold": 1.85632861, "gain": 1.1920929e-07, "instance_count": 30, "yes": 27, "no": 28, "children": [
{"nodeid": 27, "leaf_value": [1, 0], "instance_count": 19},
{"nodeid": 28, "leaf_value": [1, 0], "instance_count": 11}
]},
{"nodeid": 22, "split_feature": 5, "split_threshold": 0.815551639, "gain": 0.152777761, "instance_count": 12, "yes": 29, "no": 30, "children": [
{"nodeid": 29, "leaf_value": [0, 1], "instance_count": 1},
{"nodeid": 30, "leaf_value": [1, 0], "instance_count": 11}
]}
]},
{"nodeid": 18, "split_feature": 9, "split_threshold": 0.690918803, "gain": 0.5, "instance_count": 2, "yes": 23, "no": 24, "children": [
{"nodeid": 23, "leaf_value": [0, 1], "instance_count": 1},
{"nodeid": 24, "leaf_value": [1, 0], "instance_count": 1}
]}
]}
]}
]},
{"nodeid": 6, "split_feature": 6, "split_threshold": 2.1641295, "gain": 0.0710349679, "instance_count": 22, "yes": 9, "no": 10, "children": [
{"nodeid": 9, "split_feature": 7, "split_threshold": 3.8020432, "gain": 0.0818593949, "instance_count": 21, "yes": 13, "no": 14, "children": [
{"nodeid": 13, "split_feature": 9, "split_threshold": 1.33453584, "gain": 0.0200000368, "instance_count": 20, "yes": 19, "no": 20, "children": [
{"nodeid": 19, "leaf_value": [0, 1], "instance_count": 16},
{"nodeid": 20, "split_feature": 5, "split_threshold": 0.08400774, "gain": 0.375, "instance_count": 4, "yes": 25, "no": 26, "children": [
{"nodeid": 25, "leaf_value": [0, 1], "instance_count": 3},
{"nodeid": 26, "leaf_value": [1, 0], "instance_count": 1}
]}
]},
{"nodeid": 14, "leaf_value": [1, 0], "instance_count": 1}
]},
{"nodeid": 10, "leaf_value": [1, 0], "instance_count": 1}
]}
]}
]}
]
How to apply multiple colors in legend for Vega stacked bar?
I have the next Vega-Light bar chart.
Vega Bar online editor
How to apply multiple colors in legend? When I apply
symbols: {
update: {
fill: { field: 'color' },
},
},
I didn't see any symbols, only labels.
I need to apply four colors for legend symbols. When I write fill: { value : "red"}, all of the symbols became red color. I need that the four symbols to have different colors. How I can fix this?
{
"width": 500,
"height": 200,
"title": "STD: cashflow cleaning",
"data": [
{
"name": "table",
"values": [
{"yearIndex": 1, "c": "red", "y": 100000, "y0": 10000, "y1": 110000},
{"yearIndex": 1, "c": "green", "y": 10000, "y0": 0, "y1": 10000},
{"yearIndex": 1, "c": "blue", "y": -12000, "y0": 0, "y1": -12000},
{
"yearIndex": 1,
"c": "orange",
"y": -110000,
"y0": -12000,
"y1": -122000
},
{"yearIndex": 2, "c": "red", "y": 980000, "y0": 98000, "y1": 1078000},
{"yearIndex": 2, "c": "green", "y": 98000, "y0": 0, "y1": 98000},
{"yearIndex": 2, "c": "blue", "y": -10000, "y0": 0, "y1": -10000},
{"yearIndex": 2, "c": "orange", "y": 0, "y0": 98000, "y1": 98000},
{"yearIndex": 3, "c": "red", "y": 960000, "y0": 96000, "y1": 1056000},
{"yearIndex": 3, "c": "green", "y": 96000, "y0": 0, "y1": 96000},
{"yearIndex": 3, "c": "blue", "y": -12000, "y0": 0, "y1": -12000},
{"yearIndex": 3, "c": "orange", "y": 0, "y0": 96000, "y1": 96000},
{"yearIndex": 4, "c": "red", "y": 940000, "y0": 94000, "y1": 1034000},
{"yearIndex": 4, "c": "green", "y": 94000, "y0": 0, "y1": 94000},
{"yearIndex": 4, "c": "blue", "y": -10000, "y0": 0, "y1": -10000},
{"yearIndex": 4, "c": "orange", "y": 0, "y0": 94000, "y1": 94000},
{"yearIndex": 5, "c": "red", "y": 920000, "y0": 92000, "y1": 1012000},
{"yearIndex": 5, "c": "green", "y": 92000, "y0": 0, "y1": 92000},
{"yearIndex": 5, "c": "blue", "y": -12000, "y0": 0, "y1": -12000},
{"yearIndex": 5, "c": "orange", "y": 0, "y0": 92000, "y1": 92000},
{"yearIndex": 6, "c": "red", "y": 900000, "y0": 90000, "y1": 990000},
{"yearIndex": 6, "c": "green", "y": 90000, "y0": 0, "y1": 90000},
{"yearIndex": 6, "c": "blue", "y": -10000, "y0": 0, "y1": -10000},
{
"yearIndex": 6,
"c": "orange",
"y": -91000,
"y0": -10000,
"y1": -101000
},
{"yearIndex": 7, "c": "red", "y": 880000, "y0": 88000, "y1": 968000},
{"yearIndex": 7, "c": "green", "y": 88000, "y0": 0, "y1": 88000},
{"yearIndex": 7, "c": "blue", "y": -12000, "y0": 0, "y1": -12000},
{"yearIndex": 7, "c": "orange", "y": 0, "y0": 88000, "y1": 88000},
{"yearIndex": 8, "c": "red", "y": 860000, "y0": 86000, "y1": 946000},
{"yearIndex": 8, "c": "green", "y": 86000, "y0": 0, "y1": 86000},
{"yearIndex": 8, "c": "blue", "y": -10000, "y0": 0, "y1": -10000},
{"yearIndex": 8, "c": "orange", "y": 0, "y0": 86000, "y1": 86000},
{"yearIndex": 9, "c": "red", "y": 840000, "y0": 84000, "y1": 924000},
{"yearIndex": 9, "c": "green", "y": 84000, "y0": 0, "y1": 84000},
{"yearIndex": 9, "c": "blue", "y": -12000, "y0": 0, "y1": -12000},
{"yearIndex": 9, "c": "orange", "y": 0, "y0": 84000, "y1": 84000},
{"yearIndex": 10, "c": "red", "y": 820000, "y0": 82000, "y1": 902000},
{"yearIndex": 10, "c": "green", "y": 82000, "y0": 0, "y1": 82000},
{"yearIndex": 10, "c": "blue", "y": -10000, "y0": 0, "y1": -10000},
{"yearIndex": 10, "c": "orange", "y": 0, "y0": 82000, "y1": 82000}
],
"transform": [
{
"type": "stack",
"groupby": ["yearIndex"],
"sort": {"field": "c"},
"field": "y"
}
]
}
],
"scales": [
{
"name": "x",
"type": "band",
"range": "width",
"domain": {"data": "table", "field": "yearIndex"}
},
{
"name": "y",
"type": "linear",
"range": "height",
"nice": true,
"zero": true,
"domain": {"data": "table", "field": "y1"}
},
{
"name": "color",
"type": "ordinal",
"range": {"data": "table", "field": "c"},
"domain": [
"basicYieldIncome",
"avoidedSoilingIncomeLoss",
"opex",
"capex"
]
}
],
"axes": [
{"orient": "bottom", "scale": "x", "zindex": 1, "title": "yearIndex"},
{
"orient": "left",
"scale": "y",
"zindex": 1,
"title": "EUR",
"formatType": "number",
"format": ".2s"
}
],
"marks": [
{
"type": "rect",
"from": {"data": "table"},
"encode": {
"enter": {
"x": {"scale": "x", "field": "yearIndex"},
"width": {"scale": "x", "band": 1, "offset": -1},
"y": {"scale": "y", "field": "y0"},
"y2": {"scale": "y", "field": "y1"},
"fill": {"field": "c"}
}
}
}
],
"legends": [
{
"orient": "top",
"direction": "horizontal",
"fill": "color",
"encode": {
"labels": {
"interactive": true,
"update": {"fontSize": {"value": 12}, "fill": {"value": "black"}}
}
}
}
]
}
Need to create conditional stacked bar chart in Google Data Studio
I have SEO data and need to create a Stacked Bar chart with it. I have Landing Pages (URLs) and I need to sort them into 4 categories. Categorize Landing pages into Top 1-3 Landing pages by clicks; same for 4-10, 11-20, 21-100. Then I need to create Stacked Bar chart with this view. Sample chart attached below: Need Month on X axis, Total view count on X axis. I have generated Random Data here to create sample chart. hopefully it will be enough.
For a categorization of the grouped items, there has to be some preprocessing. Data Studio cannot do it.
Possible approaches can be done in BigQuery, Sheets (pivot). A route in Data Studio would be to do it by the PERCENTILE in combination with a self blend, obtaining the rank (e.g. first 10% of clicks) instead of the top visited sites.
Since you added the tag "custom-visuals", here a way to do it by the VEGA LITE plugin.
First add the Community visualization "Vega/Vega Lite" to your report.
Add as dimension the date and the Landing page, and the metrics are the sum of the clicks.
The add following Vega Lite code in the style tab:
{
"$schema": "https://vega.github.io/schema/vega-lite/v5.json",
"data":
{
"values": [
{"$dimension0": "Jan 18, 2022", "$dimension1": "abs", "$metric0": 3},
{"$dimension0": "Jan 19, 2022", "$dimension1": "jsofj", "$metric0": 1},
{"$dimension0": "Jan 20, 2022", "$dimension1": "hfkh", "$metric0": 5},
{"$dimension0": "Jan 21, 2022", "$dimension1": "iefi", "$metric0": 7},
{"$dimension0": "Jan 21, 2022", "$dimension1": "eil", "$metric0": 2},
{"$dimension0": "Jan 18, 2022", "$dimension1": "vnwso", "$metric0": 5},
{"$dimension0": "Jan 24, 2022", "$dimension1": "ojjvl", "$metric0": 6},
{"$dimension0": "Jan 31, 2022", "$dimension1": "vgoe", "$metric0": 8},
{"$dimension0": "Jan 26, 2022", "$dimension1": "abs", "$metric0": 1},
{"$dimension0": "Jan 27, 2022", "$dimension1": "jsofj", "$metric0": 6},
{"$dimension0": "Jan 18, 2022", "$dimension1": "hfkh", "$metric0": 9},
{"$dimension0": "Jan 19, 2022", "$dimension1": "iefi", "$metric0": 4},
{"$dimension0": "Jan 21, 2022", "$dimension1": "eil", "$metric0": 3},
{"$dimension0": "Jan 31, 2022", "$dimension1": "vnwso", "$metric0": 2},
{"$dimension0": "Feb 1, 2022", "$dimension1": "ojjvl", "$metric0": 5},
{"$dimension0": "Feb 2, 2022", "$dimension1": "olwoe", "$metric0": 4},
{"$dimension0": "Feb 3, 2022", "$dimension1": "vgoe", "$metric0": 7},
{"$dimension0": "Feb 4, 2022", "$dimension1": "abs", "$metric0": 9},
{"$dimension0": "Feb 5, 2022", "$dimension1": "jsofj", "$metric0": 3},
{"$dimension0": "Jan 21, 2022", "$dimension1": "hfkh", "$metric0": 1},
{"$dimension0": "Jan 21, 2022", "$dimension1": "iefi", "$metric0": 2},
{"$dimension0": "Feb 8, 2022", "$dimension1": "eil", "$metric0": 5},
{"$dimension0": "Jan 20, 2022", "$dimension1": "vnwso", "$metric0": 8},
{"$dimension0": "Feb 10, 2022", "$dimension1": "ojjvl", "$metric0": 15},
{"$dimension0": "Jan 18, 2022", "$dimension1": "olwoe", "$metric0": 11},
{"$dimension0": "Feb 12, 2022", "$dimension1": "vgoe", "$metric0": 16},
{"$dimension0": "Jan 31, 2022", "$dimension1": "abs", "$metric0": 12},
{"$dimension0": "Jan 19, 2022", "$dimension1": "jsofj", "$metric0": 13},
{"$dimension0": "Feb 15, 2022", "$dimension1": "hfkh", "$metric0": 14},
{"$dimension0": "Feb 16, 2022", "$dimension1": "iefi", "$metric0": 10},
{"$dimension0": "Feb 17, 2022", "$dimension1": "eil", "$metric0": 5},
{"$dimension0": "Jan 31, 2022", "$dimension1": "jsofj", "$metric0": 8},
{"$dimension0": "Jan 18, 2022", "$dimension1": "hfkh", "$metric0": 7},
{"$dimension0": "Jan 21, 2022", "$dimension1": "iefi", "$metric0": 6},
{"$dimension0": "Jan 21, 2022", "$dimension1": "eil", "$metric0": 3},
{"$dimension0": "Jan 19, 2022", "$dimension1": "shf", "$metric0": 4},
{"$dimension0": "Jan 21, 2022", "$dimension1": "jildo", "$metric0": 3},
{"$dimension0": "Jan 31, 2022", "$dimension1": "kahif", "$metric0": 2},
{"$dimension0": "Feb 1, 2022", "$dimension1": "ikhqfl", "$metric0": 5},
{"$dimension0": "Feb 2, 2022", "$dimension1": "hqifkql", "$metric0": 4},
{"$dimension0": "Jan 19, 2022", "$dimension1": "guwk", "$metric0": 4},
{"$dimension0": "Jan 21, 2022", "$dimension1": "qfhuw", "$metric0": 3},
{"$dimension0": "Jan 31, 2022", "$dimension1": "ihqo3", "$metric0": 2},
{"$dimension0": "Feb 1, 2022", "$dimension1": "wfoj", "$metric0": 5}
]
},
"transform": [
{
"joinaggregate": [{"op":"sum","field":"$metric0","as":"counts"}],"groupby": ["$dimension1"]
},
{
"sort":[{"field":"counts","order": "descending"},{"field":"$dimension1","order": "descending"}],
"window":[{"op": "row_number","as": "rownum"},{
"op": "lead","field":"$dimension1","as": "last"}]
},
{
"calculate": " datum.last == datum.$dimension1 ? 0 : 1 ", "as": "adding"
},
{
"sort":[{"field":"rownum","order": "ascending"}],
"window":[{"op":"sum","field":"adding","as": "TOPs"}]
},
{
"calculate": " datum.TOPs<3 ? 'Top 1-3' : datum.TOPs<10 ? 'Top 4-10' : datum.TOPs<20 ? 'Top 11-20' : 'Top 21-100' ", "as": "TOPid"
}
]
,
"mark": {"type": "bar"},
"encoding": {
"x": {
"field": "$dimension0",
"type": "ordinal",
"title": "$dimension0.name"},
"y": {
"field": "$metric0",
"type": "quantitative",
"axis": {"title": "$metric0.name"},
"aggregate": "sum"
},
"color":{
"field": "TOPid",
"scale": {
"domain": ["Top 1-3", "Top 4-10", "Top 11-20", "Top 20-100"],
"range": ["blue", "lightblue", "#00a", "yellow"]
}
} ,
"order": { "field": "TOPs"}
}
}
it can be also viewed and developed under:
https://vega.github.io/editor/#/edited
In case you need the top groups by date and not globally, please use this version
{
"$schema": "https://vega.github.io/schema/vega-lite/v5.json",
"data":
{
"values": [
{"$dimension0": "Jan 18, 2022", "$dimension1": "abs", "$metric0": 3},
{"$dimension0": "Jan 19, 2022", "$dimension1": "jsofj", "$metric0": 1},
{"$dimension0": "Jan 20, 2022", "$dimension1": "hfkh", "$metric0": 5},
{"$dimension0": "Jan 21, 2022", "$dimension1": "iefi", "$metric0": 7},
{"$dimension0": "Jan 21, 2022", "$dimension1": "eil", "$metric0": 2},
{"$dimension0": "Jan 18, 2022", "$dimension1": "vnwso", "$metric0": 5},
{"$dimension0": "Jan 24, 2022", "$dimension1": "ojjvl", "$metric0": 6},
{"$dimension0": "Jan 31, 2022", "$dimension1": "vgoe", "$metric0": 8},
{"$dimension0": "Jan 26, 2022", "$dimension1": "abs", "$metric0": 1},
{"$dimension0": "Jan 27, 2022", "$dimension1": "jsofj", "$metric0": 6},
{"$dimension0": "Jan 18, 2022", "$dimension1": "hfkh", "$metric0": 9},
{"$dimension0": "Jan 19, 2022", "$dimension1": "iefi", "$metric0": 4},
{"$dimension0": "Jan 21, 2022", "$dimension1": "eil", "$metric0": 3},
{"$dimension0": "Jan 31, 2022", "$dimension1": "vnwso", "$metric0": 2},
{"$dimension0": "Feb 1, 2022", "$dimension1": "ojjvl", "$metric0": 5},
{"$dimension0": "Feb 2, 2022", "$dimension1": "olwoe", "$metric0": 4},
{"$dimension0": "Feb 3, 2022", "$dimension1": "vgoe", "$metric0": 7},
{"$dimension0": "Feb 4, 2022", "$dimension1": "abs", "$metric0": 9},
{"$dimension0": "Feb 5, 2022", "$dimension1": "jsofj", "$metric0": 3},
{"$dimension0": "Jan 21, 2022", "$dimension1": "hfkh", "$metric0": 1},
{"$dimension0": "Jan 21, 2022", "$dimension1": "iefi", "$metric0": 2},
{"$dimension0": "Feb 8, 2022", "$dimension1": "eil", "$metric0": 5},
{"$dimension0": "Jan 20, 2022", "$dimension1": "vnwso", "$metric0": 8},
{"$dimension0": "Feb 10, 2022", "$dimension1": "ojjvl", "$metric0": 15},
{"$dimension0": "Jan 18, 2022", "$dimension1": "olwoe", "$metric0": 11},
{"$dimension0": "Feb 12, 2022", "$dimension1": "vgoe", "$metric0": 16},
{"$dimension0": "Jan 31, 2022", "$dimension1": "abs", "$metric0": 12},
{"$dimension0": "Jan 19, 2022", "$dimension1": "jsofj", "$metric0": 13},
{"$dimension0": "Feb 15, 2022", "$dimension1": "hfkh", "$metric0": 14},
{"$dimension0": "Feb 16, 2022", "$dimension1": "iefi", "$metric0": 10},
{"$dimension0": "Feb 17, 2022", "$dimension1": "eil", "$metric0": 5},
{"$dimension0": "Jan 31, 2022", "$dimension1": "jsofj", "$metric0": 8},
{"$dimension0": "Jan 18, 2022", "$dimension1": "hfkh", "$metric0": 7},
{"$dimension0": "Jan 21, 2022", "$dimension1": "iefi", "$metric0": 6},
{"$dimension0": "Jan 21, 2022", "$dimension1": "eil", "$metric0": 3},
{"$dimension0": "Jan 19, 2022", "$dimension1": "shf", "$metric0": 4},
{"$dimension0": "Jan 21, 2022", "$dimension1": "jildo", "$metric0": 3},
{"$dimension0": "Jan 31, 2022", "$dimension1": "kahif", "$metric0": 2},
{"$dimension0": "Feb 1, 2022", "$dimension1": "ikhqfl", "$metric0": 5},
{"$dimension0": "Feb 2, 2022", "$dimension1": "hqifkql", "$metric0": 4},
{"$dimension0": "Jan 19, 2022", "$dimension1": "guwk", "$metric0": 4},
{"$dimension0": "Jan 21, 2022", "$dimension1": "qfhuw", "$metric0": 3},
{"$dimension0": "Jan 31, 2022", "$dimension1": "ihqo3", "$metric0": 2},
{"$dimension0": "Feb 1, 2022", "$dimension1": "wfoj", "$metric0": 5}
]
},
"transform": [
{
"joinaggregate": [{"op":"sum","field":"$metric0","as":"counts"}],"groupby": ["$dimension1","$dimension0"]
},
{
"sort":[{"field":"counts","order": "descending"},{"field":"$dimension1","order": "descending"}],
"window":[{"op": "row_number","as": "rownum"},{
"op": "lead","field":"$dimension1","as": "last"}],
"groupby": ["$dimension0"]
},
{
"calculate": " datum.last == datum.$dimension1 || datum.rownum==1 ? 0 : 1 ", "as": "adding"
},
{
"sort":[{"field":"rownum","order": "ascending"}],
"window":[{"op":"sum","field":"adding","as": "TOPs"}],
"groupby": ["$dimension0"]
},
{
"calculate": " datum.TOPs<3 ? 'Top 1-3' : datum.TOPs<10 ? 'Top 4-10' : datum.TOPs<20 ? 'Top 11-20' : 'Top 21-100' ", "as": "TOPid"
}
]
,
"mark": {"type": "bar"},
"encoding": {
"x": {
"field": "$dimension0",
"type": "ordinal",
"title": "$dimension0.name"},
"y": {
"field": "$metric0",
"type": "quantitative",
"axis": {"title": "$metric0.name"},
"aggregate": "sum"
},
"color":{
"field": "TOPid",
"scale": {
"domain": ["Top 1-3", "Top 4-10", "Top 11-20", "Top 20-100"],
"range": ["blue", "lightblue", "#00a", "yellow"]
}
} ,
"order": { "field": "TOPs"}
}
}
This is a Vega Lite code:
"data" is for having some sample data
"transform" does all the needed transformation
"joinaggregate": obtains the sum of all clicks by "Landing page"
next we need to generate a custom ranking TOPs for these values
"sort" / "window" : The table is sorted from the most clicks to the fewest clisk. Then the "window" is looking for the "Landing page" to be changed to the previous row.
"calculate" set a value of 1, if "Landing page" changed from previous row
"sort" / "window": sums up these values. This is the custom ranking TOPs.
"calculate" : split the custom ranking TOPs in the top groups (top 1-3, top 4-20, etc. and name it TOPid
)
"mark": Barplot
"encoding" : sets the fields for the barplot
"x", "y": definition of x and y axis
"color": here the TOPid defines the stacked plot. For testing please use TOPs
"scale": set the color of the stacked plot. For testing, please remove this.
"order": set the order, TOPs is used, because the TOPid are string names and thus not have the desired order
Game marker in a data table - vue and vuetify
I have two objects with arrays where one assembles the headers of the data table and another where it brings the status information, managing to obtain the games of the teams of these objects in vue but in all cases I have failed
new Vue({
el: '#app',
data: {
headers: {
"1": { "7": [9, 21, 44, 45, 7], "9": [21, 44, 7, 45, 9], "21": [44, 45, 7, 9, 21], "44": [7, 45, 9, 21, 44], "45": [7, 9, 21, 44, 45], "JJ": true, "JG": true, "JP": true, "SF": true, "EQUIPO": true, "SC": true, "PF": true, "PC": true, "Pnts": true, "Sets": true, "Lugar": true },
"2": { "13": [17, 18, 20, 46, 13], "17": [20, 46, 13, 18, 17], "18": [17, 20, 13, 46, 18], "20": [13, 46, 17, 18, 20], "46": [13, 18, 17, 20, 46], "JJ": true, "JG": true, "JP": true, "SF": true, "EQUIPO": true, "SC": true, "PF": true, "PC": true, "Pnts": true, "Sets": true, "Lugar": true },
"3": { "8": [31, 40, 42, 49, 8], "31": [40, 49, 8, 42, 31], "40": [42, 49, 8, 31, 40], "42": [8, 31, 40, 49, 42], "49": [8, 42, 31, 40, 49], "JJ": true, "JG": true, "JP": true, "SF": true, "EQUIPO": true, "SC": true, "PF": true, "PC": true, "Pnts": true, "Sets": true, "Lugar": true }
},
games: {
"1": [{
"7": { "set2_1": 2, "set1_1": 25, "set2_2": 19, "set1_2": 25, "set2_3": 0, "set1_3": 0 },
"9": [],
"21": { "set1_1": 25, "set2_1": 17, "set1_2": 25, "set2_2": 15, "set1_3": 0, "set2_3": 0 },
"44": { "set1_1": 25, "set2_1": 2, "set1_2": 25, "set2_2": 19, "set1_3": 0, "set2_3": 0 },
"45": { "set2_1": 2, "set1_1": 25, "set2_2": 19, "set1_2": 25, "set2_3": 0, "set1_3": 0 },
"team_id": 9,
"g": 1,
"team": { "name": "Equipo 9", "id": 9, "game_id": 0 },
"favor": 100,
"contra": 75
},
{
"7": [],
"9": { "set1_1": 22, "set2_1": 25, "set1_2": 18, "set2_2": 25, "set1_3": 0, "set2_3": 0 },
"21": { "set1_1": 25, "set2_1": 15, "set1_2": 25, "set2_2": 14, "set1_3": 0, "set2_3": 0 },
"44": { "set2_1": 15, "set1_1": 25, "set2_2": 14, "set1_2": 25, "set2_3": 0, "set1_3": 0 },
"45": { "set2_1": 15, "set1_1": 25, "set2_2": 14, "set1_2": 25, "set2_3": 0, "set1_3": 0 },
"team_id": 7,
"g": 1,
"team": { "name": "Equipo 7", "id": 7, "game_id": 0 },
"favor": 85,
"contra": 92
},
{
"7": { "set2_1": 15, "set1_1": 25, "set2_2": 14, "set1_2": 25, "set2_3": 0, "set1_3": 0 },
"9": { "set2_1": 15, "set1_1": 25, "set2_2": 14, "set1_2": 25, "set2_3": 0, "set1_3": 0 },
"21": [],
"44": { "set1_1": 22, "set2_1": 25, "set1_2": 19, "set2_2": 25, "set1_3": 0, "set2_3": 0 },
"45": { "set1_1": 25, "set2_1": 15, "set1_2": 25, "set2_2": 14, "set1_3": 0, "set2_3": 0 },
"team_id": 21,
"g": 1,
"team": { "name": "Equipo 21", "id": 21, "game_id": 0 },
"favor": 61,
"contra": 100
},
{
"7": { "set1_1": 25, "set2_1": 15, "set1_2": 25, "set2_2": 20, "set1_3": 0, "set2_3": 0 },
"9": { "set1_1": 20, "set2_1": 25, "set1_2": 15, "set2_2": 25, "set1_3": 0, "set2_3": 0 },
"21": { "set2_1": 25, "set1_1": 20, "set2_2": 25, "set1_2": 15, "set2_3": 0, "set1_3": 0 },
"44": { "set2_1": 25, "set1_1": 20, "set2_2": 25, "set1_2": 15, "set2_3": 0, "set1_3": 0 },
"team_id": 45,
"g": 1,
"team": { "name": "Equipo 45", "id": 45, "game_id": 0 },
"favor": 79,
"contra": 90
},
{
"7": { "set1_1": 20, "set2_1": 25, "set1_2": 22, "set2_2": 25, "set1_3": 0, "set2_3": 0 },
"9": { "set2_1": 25, "set1_1": 22, "set2_2": 25, "set1_2": 18, "set2_3": 0, "set1_3": 0 },
"21": { "set2_1": 25, "set1_1": 22, "set2_2": 25, "set1_2": 18, "set2_3": 0, "set1_3": 0 },
"44": [],
"45": { "set1_1": 22, "set2_1": 25, "set1_2": 18, "set2_2": 25, "set1_3": 0, "set2_3": 0 },
"team_id": 44,
"g": 1,
"team": { "name": "Equipo 44", "id": 44, "game_id": 0 },
"favor": 71,
"contra": 91
}
],
"2": [
{
"13": { "set1_1": 25, "set2_1": 17, "set1_2": 25, "set2_2": 15, "set1_3": 0, "set2_3": 0 },
"17": { "set2_1": 0, "set1_1": 0, "set2_2": 0, "set1_2": 0, "set2_3": 0, "set1_3": 0 },
"18": { "set1_1": 0, "set2_1": 0, "set1_2": 0, "set2_2": 0, "set1_3": 0, "set2_3": 0 },
"20": { "set2_1": 0, "set1_1": 0, "set2_2": 0, "set1_2": 0, "set2_3": 0, "set1_3": 0 },
"team_id": 46,
"g": 2,
"team": { "name": "Equipo 46", "id": 46, "game_id": 0 },
"favor": 0,
"contra": 0
},
{
"13": { "set2_1": 25, "set1_1": 20, "set2_2": 25, "set1_2": 22, "set2_3": 0, "set1_3": 0 },
"17": { "set1_1": 0, "set2_1": 0, "set1_2": 0, "set2_2": 0, "set1_3": 0, "set2_3": 0 },
"18": [],
"20": { "set1_1": 20, "set2_1": 25, "set1_2": 22, "set2_2": 25, "set1_3": 0, "set2_3": 0 },
"46": { "set2_1": 25, "set1_1": 20, "set2_2": 25, "set1_2": 22, "set2_3": 0, "set1_3": 0 },
"team_id": 18,
"g": 2,
"team": { "name": "Equipo 18", "id": 18, "game_id": 0 },
"favor": 0,
"contra": 0
},
{
"13": [],
"17": { "set1_1": 0, "set2_1": 0, "set1_2": 0, "set2_2": 0, "set1_3": 0, "set2_3": 0 },
"18": { "set1_1": 0, "set2_1": 0, "set1_2": 0, "set2_2": 0, "set1_3": 0, "set2_3": 0 },
"20": { "set2_1": 0, "set1_1": 0, "set2_2": 0, "set1_2": 0, "set2_3": 0, "set1_3": 0 },
"46": { "set2_1": 0, "set1_1": 0, "set2_2": 0, "set1_2": 0, "set2_3": 0, "set1_3": 0 },
"team_id": 13,
"g": 2,
"team": { "name": "Equipo 13", "id": 13, "game_id": 0 },
"favor": 32,
"contra": 50
},
{
"13": {
"set2_1": 0, "set1_1": 0, "set2_2": 0, "set1_2": 0, "set2_3": 0, "set1_3": 0
},
"17": [],
"18": { "set2_1": 0, "set1_1": 0, "set2_2": 0, "set1_2": 0, "set2_3": 0, "set1_3": 0 },
"20": { "set1_1": 0, "set2_1": 0, "set1_2": 0, "set2_2": 0, "set1_3": 0, "set2_3": 0 },
"46": { "set1_1": 0, "set2_1": 0, "set1_2": 0, "set2_2": 0, "set1_3": 0, "set2_3": 0 },
"team_id": 17,
"g": 2,
"team": { "name": "Equipo 17", "id": 17, "game_id": 0 },
"favor": 0,
"contra": 0
},
{
"13": { "set1_1": 0, "set2_1": 0, "set1_2": 0, "set2_2": 0, "set1_3": 0, "set2_3": 0 },
"17": { "set2_1": 0, "set1_1": 0, "set2_2": 0, "set1_2": 0, "set2_3": 0, "set1_3": 0 },
"18": { "set2_1": 0, "set1_1": 0, "set2_2": 0, "set1_2": 0, "set2_3": 0, "set1_3": 0 },
"20": [],
"46": { "set1_1": 0, "set2_1": 0, "set1_2": 0, "set2_2": 0, "set1_3": 0, "set2_3": 0 },
"team_id": 20,
"g": 2,
"team": { "name": "Equipo 20", "id": 20, "game_id": 0 },
"favor": 50,
"contra": 42
}
],
"3": [
{
"8": { "set1_1": 0, "set2_1": 0, "set1_2": 0, "set2_2": 0, "set1_3": 0, "set2_3": 0 },
"31": { "set1_1": 25, "set2_1": 2, "set1_2": 25, "set2_2": 19, "set1_3": 0, "set2_3": 0 },
"40": { "set2_1": 2, "set1_1": 25, "set2_2": 19, "set1_2": 25, "set2_3": 0, "set1_3": 0 },
"42": [],
"49": { "set2_1": 2, "set1_1": 25, "set2_2": 19, "set1_2": 25, "set2_3": 0, "set1_3": 0 },
"team_id": 42,
"g": 3,
"team": { "name": "Equipo 42", "id": 42, "game_id": 0 },
"favor": 0,
"contra": 0
},
{
"8": { "set2_1": 15, "set1_1": 25, "set2_2": 20, "set1_2": 25, "set2_3": 0, "set1_3": 0 },
"31": { "set2_1": 15, "set1_1": 25, "set2_2": 20, "set1_2": 25, "set2_3": 0, "set1_3": 0 },
"40": [],
"42": { "set1_1": 0, "set2_1": 0, "set1_2": 0, "set2_2": 0, "set1_3": 0, "set2_3": 0 },
"49": { "set1_1": 25, "set2_1": 15, "set1_2": 25, "set2_2": 20, "set1_3": 0, "set2_3": 0 },
"team_id": 40,
"g": 3,
"team": { "name": "Equipo 40", "id": 40, "game_id": 0 },
"favor": 0,
"contra": 0
},
{
"8": { "set2_1": 0, "set1_1": 0, "set2_2": 0, "set1_2": 0, "set2_3": 0, "set1_3": 0 },
"31": [],
"40": { "set1_1": 0, "set2_1": 0, "set1_2": 0, "set2_2": 0, "set1_3": 0, "set2_3": 0 },
"42": { "set2_1": 0, "set1_1": 0, "set2_2": 0, "set1_2": 0, "set2_3": 0, "set1_3": 0 },
"49": { "set1_1": 0, "set2_1": 0, "set1_2": 0, "set2_2": 0, "set1_3": 0, "set2_3": 0 },
"team_id": 31,
"g": 3,
"team": { "name": "Equipo 31", "id": 31, "game_id": 0 },
"favor": 21,
"contra": 50
},
{
"8": [],
"31": { "set1_1": 0, "set2_1": 0, "set1_2": 0, "set2_2": 0, "set1_3": 0, "set2_3": 0 },
"40": { "set1_1": 0, "set2_1": 0, "set1_2": 0, "set2_2": 0, "set1_3": 0, "set2_3": 0 },
"42": { "set2_1": 0, "set1_1": 0, "set2_2": 0, "set1_2": 0, "set2_3": 0, "set1_3": 0 },
"49": { "set2_1": 0, "set1_1": 0, "set2_2": 0, "set1_2": 0, "set2_3": 0, "set1_3": 0 },
"team_id": 8,
"g": 3,
"team": { "name": "Equipo 8", "id": 8, "game_id": 0 },
"favor": 0,
"contra": 0
},
{
"8": { "set1_1": 0, "set2_1": 0, "set1_2": 0, "set2_2": 0, "set1_3": 0, "set2_3": 0 },
"31": { "set2_1": 0, "set1_1": 0, "set2_2": 0, "set1_2": 0, "set2_3": 0, "set1_3": 0 },
"40": { "set2_1": 0, "set1_1": 0, "set2_2": 0, "set1_2": 0, "set2_3": 0, "set1_3": 0 },
"42": { "set1_1": 0, "set2_1": 0, "set1_2": 0, "set2_2": 0, "set1_3": 0, "set2_3": 0 },
"team_id": 49,
"g": 3,
"team": { "name": "Equipo 49", "id": 49, "game_id": 0 },
"favor": 35,
"contra": 50
}
]
},
}
});
In the headers the keys 1,2,3 and then another key with an array with values of the id of each team with whom he is going to play including it example: "1":{"7":[9, 21, 44, 45 , 7] 1 is the group and 7 is the team within the teams with whom he is going to play
in games we have the same values 1,2,3 same logic but note that when there is always an object that has an empty array example of team 7 within group 1
"7": [], but their vs who this team is going to play with come like this "9":{"set1_1":22,"set2_1":25,"set1_2":18,"set2_2":25,"set1_3 ":0,"set2_3":0},
9 is his opponent and the sets are the ones won in each example time
team 7 team 9
set1_1: 22 set1_2: 18
set2_1: 18 set2_2: 25
set1_3: 0 set2_3: 0
template:
<v-card class="mt-4" v-for="(header, keyGrupo) in headers" :key="keyGrupo">
<v-card-title> Grupo {{ keyGrupo }}</v-card-title>
<v-simple-table dense>
<template v-slot:default>
<thead>
<tr>
<th></th>
<th v-if="header.EQUIPO">Equipo</th>
<th v-for="(grupo, index) in games[keyGrupo]" :key="index">
{{ index + 1 }} {{ grupo["team"]["name"] }} | {{ grupo['team_id'] }}
</th>
</tr>
</thead>
<tbody>
<tr v-for="(grupo, index) in games[keyGrupo]" :key="index">
<td></td>
<td>
{{ index + 1 }} {{ grupo["team"]["name"] }} {{ grupo['team_id'] }}
</td>
<td v-for="team_ids in header[grupo['team_id']]" v-if="team_ids != grupo['team_id']">
<table>
<tr>
<td >{{ team_ids }}</td>
<td></td>
</tr>
</table>
</td>
</tr>
</tbody>
</template>
</v-simple-table>
</v-card>
In the following results marker the red marked are not the correct ones, since a team cannot play against itself. So the box must be filled with a color and be as a filled box without data, I leave an example of how it should be
In this image we see the same teams with their correct results for each team they play with, also note that in each game against themselves it is in blue, and the results are for each team they played with, I need help with this please
I'm sorry I spent like an hour trying to understand your code. It is unnecessarily too complicated.
Please use classes and proper names for readability and reduce the amount of unnecessary information you provide...
Either way, I think I found your problem. But please address your code before moving on as it will greatly impact debugging further on.
Let's take the first iteration in your for loop:
<td v-for="team_ids in header[grupo['team_id']]" v-if="team_ids != grupo['team_id']">
grupo['team_id']: 9
header[9]: [21, 44, 7, 45, *9*]
header[21]: [44, 45, 7, 9, *21*]
As we go through each member in the array, as you can see in all of your headers the last member is always the team itself. This reflects in what you get in the last column.
So when you check for v-if="team_ids != grupo['team_id']
you're checking v-if="9 != 21" - which is true and you render the data.
Which, by the way I have no idea how this:
<table>
<tr>
<td >{{ team_ids }}</td>
<td></td>
</tr>
</table>
Renders what you show on screenshots. As it should only render 21 for the first column.
To fix this, you should change the order of the team id inside header to match the order of the teams inside games groups. As the data you're rendering for each team is not correct.
Your Equipo 9 vs Equipo 9 first row first column is actually rendering Equipo 9 vs Equipo 21.
Overall I recommend rethinking your data structure and code logic as this is extremely confusing.
How do I get two list panels to resize properly (dynamic)
I am using Sencha Touch 1.1 and have run into an aggravating little bug in my UI for which I've not been able to find the correct way to address in Sencha.
The symptom is that in my search panel containing two lists, it seems that the second list is folding directly under the first list, so in my example case the first list being one row is covering up the first row of the second list.
This is a fairly long code snippet, sorry if I got a little out of control. I just wanted to provide my exact test case (minus the sencha base code).
I've watered the app down to provide this example.
If you take the time to load it you will find that if you go into the "Job Export Search" option and enter 2 into the job order field and click "Check It!" the results will show.
I am putting a little job order info in the first list that returns one row. the second list containing many rows has export history details. Pull down on that second list and you see the first row has been tucked behind the first list.
moving doLayout() around the app has done nothing and the layout "fit" config option seems work fine except for the ui relationship between these two lists. I am assuming the ui just doesn't know the first list is taking up any space at render, but am unsure.
I'll just go ahead and say thanks for your time here at the top, you might not make it to the bottom.
rich
My Models:
Ext.regModel('JobModel', {
idProperty: 'id'
,fields: [
{type: 'int', name: 'id', field: 'id'}
,{type: 'string', name: 'market', field: 'market'}
,{type: 'string', name: 'client', field: 'client'}
,{type: 'string', name: 'title', field: 'title'}
,{type: 'string', name: 'owner', field: 'owner'}
]
});
Ext.regModel('ExportHistoryModel', {
idProperty: 'id'
,fields: [
{type: 'int', name: 'id', field: 'id'}
,{type: 'string', name: 'date_exported', field: 'date_exported'}
,{type: 'int', name: 'rank', field: 'rank'}
,{type: 'string', name: 'careersite', field: 'careersite'}
,{type: 'int', name: 'job_id', field: 'job_id'}
]
});
Ext.regModel('MenuModel', {
idProperty: 'id',
fields: [
{ name: 'id', type: 'int' }
,{ name: 'title', type: 'string' }
,{ name: 'target', type: 'string' }
]
});
My Stores:
Ext.regStore('JobStore', {
model: 'JobModel'
,sorters: [{
property: 'id',
direction: 'ASC'
}]
,proxy: {
type: 'localstorage',
id: 'adsel-app-jobstore'
}
,data: [
{id: 1, market: 'Boston', client: 'Creme Co.', title: 'Baker', owner: 'rwheadon'}
,{id: 2, market: 'Miami', client: 'Vice Inc.', title: 'Administrative Asst.', owner: 'rwheadon'}
,{id: 3, market: 'Dallas', client: 'Cowboy LLC', title: 'Customer Service', owner: 'rwheadon'}
,{id: 4, market: 'Chicago', client: 'Family Care DDM', title: 'Hygenist', owner: 'rwheadon'}
,{id: 6, market: 'Fargo', client: 'Brokers Ltd.', title: 'Sales Associate', owner: 'rwheadon'}
,{id: 10, market: 'Boise', client: 'Tate R. Well Co.', title: 'Customer Service Representative', owner: 'rwheadon'}
,{id: 21, market: 'Miami2', client: 'Vice Inc.', title: 'Administrative Asst.', owner: 'rwheadon'}
,{id: 31, market: 'Dallas2', client: 'Cowboy LLC', title: 'Customer Service', owner: 'rwheadon'}
,{id: 41, market: 'Chicago2', client: 'Family Care DDM', title: 'Hygenist', owner: 'rwheadon'}
,{id: 61, market: 'Fargo2', client: 'Brokers Ltd.', title: 'Sales Associate', owner: 'rwheadon'}
,{id: 101, market: 'Boise2', client: 'Tate R. Well Co.', title: 'Customer Service Representative', owner: 'rwheadon'}
,{id: 22, market: 'Miami3', client: 'Vice Inc.', title: 'Administrative Asst.', owner: 'rwheadon'}
,{id: 32, market: 'Dallas3', client: 'Cowboy LLC', title: 'Customer Service', owner: 'rwheadon'}
,{id: 42, market: 'Chicago3', client: 'Family Care DDM', title: 'Hygenist', owner: 'rwheadon'}
,{id: 62, market: 'Fargo3', client: 'Brokers Ltd.', title: 'Sales Associate', owner: 'rwheadon'}
,{id: 102, market: 'Boise3', client: 'Tate R. Well Co.', title: 'Customer Service Representative', owner: 'rwheadon'}
,{id: 23, market: 'Miami4', client: 'Vice Inc.', title: 'Administrative Asst.', owner: 'rwheadon'}
,{id: 33, market: 'Dallas4', client: 'Cowboy LLC', title: 'Customer Service', owner: 'rwheadon'}
,{id: 43, market: 'Chicago4', client: 'Family Care DDM', title: 'Hygenist', owner: 'rwheadon'}
,{id: 63, market: 'Fargo4', client: 'Brokers Ltd.', title: 'Sales Associate', owner: 'rwheadon'}
,{id: 103, market: 'Boise4', client: 'Tate R. Well Co.', title: 'Customer Service Representative', owner: 'rwheadon'}
]
});
Ext.regStore('ExportHistoryStore', {
model: 'ExportHistoryModel'
,sorters: [{
property: 'rank',
direction: 'ASC'
},
{property: 'job_id', direction: 'ASC'}
,{property: 'id', direction:'ASC'}]
,proxy: {
type: 'localstorage',
id: 'adsel-app-exporthistorystore'
}
,data: [
{id: 1, date_exported: '2012-03-26 08:53:00', rank: 1, careersite: 'Monster', job_id: 1}
,{id: 2, date_exported: '2012-03-26 08:53:00', rank: 2, careersite: 'Monster', job_id: 2}
,{id: 3, date_exported: '2012-03-26 08:53:00', rank: 3, careersite: 'Dice', job_id: 1}
,{id: 4, date_exported: '2012-03-26 08:53:00', rank: 4, careersite: 'Dice', job_id: 2}
,{id: 5, date_exported: '2012-03-26 08:53:00', rank: 5, careersite: 'Dice', job_id: 3}
,{id: 6, date_exported: '2012-03-26 08:53:00', rank: 6, careersite: 'Dice', job_id: 4}
,{id: 7, date_exported: '2012-03-26 08:53:00', rank: 7, careersite: 'Monster', job_id: 3}
,{id: 8, date_exported: '2012-03-26 08:53:00', rank: 8, careersite: 'Monster', job_id: 4}
,{id: 9, date_exported: '2012-03-26 08:53:00', rank: 9, careersite: 'Monster', job_id: 5}
,{id: 10, date_exported: '2012-03-26 08:53:00', rank: 10, careersite: 'Monster', job_id: 10}
,{id: 21, date_exported: '2012-03-26 08:53:00', rank: 2, careersite: 'Monster', job_id: 2}
,{id: 31, date_exported: '2012-03-26 09:53:00', rank: 3, careersite: 'Dice', job_id: 1}
,{id: 41, date_exported: '2012-03-26 09:53:00', rank: 4, careersite: 'Dice', job_id: 2}
,{id: 51, date_exported: '2012-03-26 09:53:00', rank: 5, careersite: 'Dice', job_id: 3}
,{id: 61, date_exported: '2012-03-26 09:53:00', rank: 6, careersite: 'Dice', job_id: 4}
,{id: 71, date_exported: '2012-03-26 09:53:00', rank: 7, careersite: 'Monster', job_id: 3}
,{id: 81, date_exported: '2012-03-26 09:53:00', rank: 8, careersite: 'Monster', job_id: 4}
,{id: 91, date_exported: '2012-03-26 09:53:00', rank: 9, careersite: 'Monster', job_id: 5}
,{id: 101, date_exported: '2012-03-26 09:53:00', rank: 10, careersite: 'Monster', job_id: 10}
,{id: 22, date_exported: '2012-03-26 09:53:00', rank: 2, careersite: 'Monster', job_id: 2}
,{id: 32, date_exported: '2012-03-26 11:53:00', rank: 3, careersite: 'Dice', job_id: 1}
,{id: 42, date_exported: '2012-03-26 11:53:00', rank: 4, careersite: 'Dice', job_id: 2}
,{id: 52, date_exported: '2012-03-26 11:53:00', rank: 5, careersite: 'Dice', job_id: 3}
,{id: 62, date_exported: '2012-03-26 11:53:00', rank: 6, careersite: 'Dice', job_id: 4}
,{id: 72, date_exported: '2012-03-26 11:53:00', rank: 7, careersite: 'Monster', job_id: 3}
,{id: 82, date_exported: '2012-03-26 11:53:00', rank: 8, careersite: 'Monster', job_id: 4}
,{id: 92, date_exported: '2012-03-26 11:53:00', rank: 9, careersite: 'Monster', job_id: 5}
,{id: 102, date_exported: '2012-03-26 11:53:00', rank: 10, careersite: 'Monster', job_id: 10}
,{id: 23, date_exported: '2012-03-26 11:53:00', rank: 2, careersite: 'Monster', job_id: 2}
,{id: 33, date_exported: '2012-03-26 13:53:00', rank: 3, careersite: 'Dice', job_id: 1}
,{id: 43, date_exported: '2012-03-26 13:53:00', rank: 4, careersite: 'Dice', job_id: 2}
,{id: 53, date_exported: '2012-03-26 13:53:00', rank: 5, careersite: 'Dice', job_id: 3}
,{id: 63, date_exported: '2012-03-26 13:53:00', rank: 6, careersite: 'Dice', job_id: 4}
,{id: 73, date_exported: '2012-03-26 13:53:00', rank: 7, careersite: 'Monster', job_id: 3}
,{id: 83, date_exported: '2012-03-26 13:53:00', rank: 8, careersite: 'Monster', job_id: 4}
,{id: 93, date_exported: '2012-03-26 13:53:00', rank: 9, careersite: 'Monster', job_id: 5}
,{id: 103, date_exported: '2012-03-26 13:53:00', rank: 10, careersite: 'Monster', job_id: 10}
,{id: 24, date_exported: '2012-03-26 13:53:00', rank: 2, careersite: 'Monster', job_id: 2}
,{id: 34, date_exported: '2012-03-26 15:53:00', rank: 3, careersite: 'Dice', job_id: 1}
,{id: 44, date_exported: '2012-03-26 15:53:00', rank: 4, careersite: 'Dice', job_id: 2}
,{id: 54, date_exported: '2012-03-26 15:53:00', rank: 5, careersite: 'Dice', job_id: 3}
,{id: 64, date_exported: '2012-03-26 15:53:00', rank: 6, careersite: 'Dice', job_id: 4}
,{id: 74, date_exported: '2012-03-26 15:53:00', rank: 7, careersite: 'Monster', job_id: 3}
,{id: 84, date_exported: '2012-03-26 15:53:00', rank: 8, careersite: 'Monster', job_id: 4}
,{id: 94, date_exported: '2012-03-26 15:53:00', rank: 9, careersite: 'Monster', job_id: 5}
,{id: 104, date_exported: '2012-03-26 15:53:00', rank: 10, careersite: 'Monster', job_id: 10}
,{id: 25, date_exported: '2012-03-26 15:53:00', rank: 2, careersite: 'Monster', job_id: 2}
,{id: 35, date_exported: '2012-03-26 20:53:00', rank: 3, careersite: 'Dice', job_id: 1}
,{id: 45, date_exported: '2012-03-26 20:53:00', rank: 4, careersite: 'Dice', job_id: 2}
,{id: 55, date_exported: '2012-03-26 20:53:00', rank: 5, careersite: 'Dice', job_id: 3}
,{id: 65, date_exported: '2012-03-26 20:53:00', rank: 6, careersite: 'Dice', job_id: 4}
,{id: 75, date_exported: '2012-03-26 20:53:00', rank: 7, careersite: 'Monster', job_id: 3}
,{id: 85, date_exported: '2012-03-26 20:53:00', rank: 8, careersite: 'Monster', job_id: 4}
,{id: 95, date_exported: '2012-03-26 20:53:00', rank: 9, careersite: 'Monster', job_id: 5}
,{id: 106, date_exported: '2012-03-26 20:53:00', rank: 10, careersite: 'Monster', job_id: 10}
,{id: 1116, date_exported: '2012-03-26 08:53:00', rank: 11, careersite: 'Craigslist', job_id: 10}
,{id: 1216, date_exported: '2012-03-26 08:53:00', rank: 12, careersite: 'Craigslist', job_id: 6}
,{id: 1316, date_exported: '2012-03-26 08:53:00', rank: 13, careersite: 'Craigslist', job_id: 3}
,{id: 1416, date_exported: '2012-03-26 08:53:00', rank: 14, careersite: 'Craigslist', job_id: 1}
,{id: 1516, date_exported: '2012-03-26 08:53:00', rank: 15, careersite: 'Craigslist', job_id: 4}
,{id: 1616, date_exported: '2012-03-26 08:53:00', rank: 16, careersite: 'Monster', job_id: 6}
]
});
Ext.regStore('HomeMenuStore', {
model: 'MenuModel'
,sorters: [{
property: 'title',
direction: 'ASC'
}]
,proxy: {
type: 'localstorage',
id: 'adsel-app-homemenustore'
}
,data: [
// {id: 1, title: 'Status', targetMenu: 'statusList'}
{id:2, title:'Jobs', target: 'jobListPanel'}
,{id:3, title:'Export History', target: 'exportListPanel'}
,{id:4, title: 'Job Export Search', target: 'jobExportSearchPanel'}
]
});
overlappingListProblem.js (intitializers)
var App;
// new Ext.Application({
new Ext.Application({
name : 'AdSel',
useLoadMask : true,
launch: function (){
App = this;
//initialization
AdSel.views.homeMenuPanel = new Ext.Panel({
id: 'homeMenuPanel'
,layout: 'fit'
,dockedItems: [
AdSel.views.consoleBar
]
,items: [
AdSel.views.consoleList
]
});
AdSel.views.jobListPanel = new Ext.Panel({
id: 'jobListPanel'
,layout: 'fit'
,dockedItems: [
AdSel.views.jobsToolbar
]
,items: [
AdSel.views.jobList
]
});
AdSel.views.exportListPanel = new Ext.Panel({
id: 'exportListPanel'
,layout: 'fit'
,dockedItems: [
AdSel.views.exporthistoryToolbar
]
,items: [
AdSel.views.exporthistoryList
]
});
AdSel.views.jobExportSearchPanel = new Ext.Panel({
id: 'jobExportSearchPanel'
,layout: 'fit'
,dockedItems: [
AdSel.views.jobHistoryCheckerToolbar
,AdSel.views.joborderHistoryCheckForm
,AdSel.views.joborderPostingHistoryHeaderInfo
]
,items: [
AdSel.views.joborderPostingHistoryResultList
]
});
//render
AdSel.views.viewport = new Ext.Panel({
fullscreen : true
,layout : 'card'
,cardAnimation : 'slide'
,items: [
AdSel.views.homeMenuPanel
,AdSel.views.jobListPanel
,AdSel.views.exportListPanel
,AdSel.views.jobExportSearchPanel
]
})
}
});
hardwiredmenu-screens.js:
//MAIN SCREEN (HOME)
AdSel.views.consoleBar = new Ext.Toolbar({
id: 'consoleBar',
title: 'Job Management Console'
});
AdSel.views.consoleList = new Ext.List({
id: 'consoleList'
,store: 'HomeMenuStore'
,disableSelection: true
,itemTpl: '<div class="list-item-title">{title}</div>'
,onItemDisclosure: function (record) {
var selectedNote=record;
var theTarget = selectedNote.data.target;
if( theTarget == 'jobExportSearchPanel') {
Ext.getStore('JobStore').filter({property:'id', value: 0, exactMatch: true});
Ext.getStore('ExportHistoryStore').filter({property:'job_id', value: 0, exactMatch: true});
AdSel.views.viewport.setActiveItem(theTarget, {type: 'slide', direction: 'left'})
} else {
AdSel.views.viewport.setActiveItem(theTarget, {type: 'slide', direction: 'left'});
}
}
});
job-screens.js
//JOBS SCREEN
AdSel.views.jobsToolbar = new Ext.Toolbar({
id: 'jobsToolbar'
,ui: 'light'
,defaults: {
iconMask: true
,ui: 'plain'
}
,title: 'Jobs'
,items: [
{
iconCls: 'home',
handler: function () {
AdSel.views.viewport.setActiveItem('homeMenuPanel', {type: 'slide', direction: 'right'});
}
}
]
});
AdSel.views.jobList = new Ext.List({
id: 'jobList'
,store: 'JobStore'
,disableSelection: true
,itemTpl: '<div class="list-item-title">{title} ({client}) in {market} entered by {owner}</div>'
});
//JOB EXPORTHISTORY SEARCH SCREEN
/*
* *********************************************** *
* *********************************************** *
* *********************************************** *
* JOB HISTORY *
* *********************************************** *
* *********************************************** *
* *********************************************** *
*/
AdSel.views.jobHistoryCheckerToolbar = new Ext.Toolbar({
id: 'jobHistoryCheckerToolbar'
,ui: 'light'
,dock: 'top'
,defaults: {
iconMask: true
,ui: 'plain'
}
// ,title: 'Job Posting History'
,title: 'Job Export History'
,items: [
{
iconCls: 'home'
,id: 'jobhistorycheckerHomeBtn'
,handler: function(){
AdSel.views.joborderHistoryCheckForm.reset();
Ext.getStore('JobStore').clearFilter();
Ext.getStore('ExportHistoryStore').clearFilter();
AdSel.views.viewport.setActiveItem('homeMenuPanel', {type: 'slide', direction: 'right'});
}
}
,{xtype: 'spacer'}
,{
text: 'Check it!'
,ui: 'action'
,handler: function () {
var ovrEditor = AdSel.views.joborderHistoryCheckForm;
var filterid = ovrEditor.getValues().joborderid;
var theHeaderStore = Ext.getStore('JobStore');
theHeaderStore.clearFilter();
theHeaderStore.filter({property:'id', value: filterid, exactMatch: true});
var theHistoryStore = Ext.getStore('ExportHistoryStore');
theHistoryStore.clearFilter();
theHistoryStore.filter({property:'job_id', value: filterid, exactMatch: true});
var theHeaderList = AdSel.views.joborderPostingHistoryHeaderInfo;
theHeaderList.refresh();
var theHistoryList = AdSel.views.joborderPostingHistoryResultList;
theHistoryList.refresh();
AdSel.views.jobExportSearchPanel.doLayout();
}
}
]
});
AdSel.views.joborderHistoryCheckForm = new Ext.form.FormPanel({
id: 'joborderHistoryCheckForm'
,standardSubmit: false
,submitOnAction: false
,items: [
{
xtype: 'textfield'
,id: 'joborderhistorycheckform-joborderid'
,name: 'joborderid'
,label: 'JO Number'
}
]
});
AdSel.views.joborderPostingHistoryHeaderInfo = new Ext.List({
id: 'joborderPostingHistoryHeaderInfo'
// ,layout: 'fit'
,store: 'JobStore'
,disableSelection: true
,itemTpl: '<div class="list-item-title-dark"><b>Job Order: </b>{id}<br/>' +
'<b>Title: </b>{title}<br/><b>Client: </b>{client}</div>'
});
AdSel.views.joborderPostingHistoryResultList = new Ext.List({
id: 'joborderPostingHistoryResultList'
// ,layout: 'fit'
,store: 'ExportHistoryStore'
,disableSelection: true
,itemTpl: '<div class="list-item-title">Runtime: {date_exported}<br/>' +
'Career Site: {careersite}<br/>Rank: {rank}</div>'
});
exporthistory-screens.js
//EXPORTS SCREEN
AdSel.views.exporthistoryToolbar = new Ext.Toolbar({
id: 'jobsToolbar'
,ui: 'light'
,defaults: {
iconMask: true
,ui: 'plain'
}
,title: 'Export History'
,items: [
{
iconCls: 'home',
handler: function () {
AdSel.views.viewport.setActiveItem('homeMenuPanel', {type: 'slide', direction: 'right'});
}
}
]
});
AdSel.views.exporthistoryList = new Ext.List({
id: 'exporthistoryList'
,store: 'ExportHistoryStore'
,disableSelection: true
,itemTpl: '<div class="list-item-title">{date_exported} exported job# {job_id} to {careersite} (ranked {rank})</div>'
});
I am assuming most won't need the index.html, but I might as well burn a few more bytes:
<html>
<head>
<link rel="stylesheet" type="text/css" href="touch/1.1.1/resources/css/sencha-touch.css"/>
<script type="text/javascript" src="touch/1.1.1/sencha-touch.js"></script>
<script type="text/javascript" src="app/overlappingListProblem.js"></script>
<script type="text/javascript" src="app/models/models.js"></script>
<script type="text/javascript" src="app/models/stores.js"></script>
<script type="text/javascript" src="app/viewers/exporthistory-screens.js"></script>
<script type="text/javascript" src="app/viewers/hardwiredmenu-screens.js"></script>
<script type="text/javascript" src="app/viewers/job-screens.js"></script>
</head>
<body>
</body>
</html>
Posting my alternative approach where I use a form instead of stacking the two dynamic lists together in a panel:
The Form Panel
AdSel.views.joborderPostingHistoryHeaderInfoForm = new Ext.form.FormPanel({
id: 'joborderPostingHistoryHeaderInfoForm'
,standardSubmit: false
,submitOnAction: false
,items: [
{
xtype: 'textfield'
,id: 'joborderPostingHistoryHeaderInfoForm-adTitle'
,name: 'adTitle'
,label: 'Job Title'
,listeners: {
afterrender: function(ele) {
ele.fieldEl.dom.readOnly = true;
}
}
}
,{
xtype: 'textfield'
,id: 'joborderPostingHistoryHeaderInfoForm-clientName'
,name: 'clientName'
,label: 'Client'
,listeners: {
afterrender: function(ele) {
ele.fieldEl.dom.readOnly = true;
}
}
}
]
});
And then load the desired record into that form adding a little code to the Check It! button:
theHeaderStore = Ext.getStore('exactMatchJobStore');
theHeaderStore.removeAll();
theHeaderStore.load({
params:{id: filterid}
});
theHeaderStore.on('datachanged', function(){
var selectedNote = this.first();
AdSel.views.joborderPostingHistoryHeaderInfoForm.loadRecord(selectedNote);
});