I am trying to colors by group some regions in jqvmap but i cant make it work with more than one group. It always get the latest group.
var europe = {
au: '#f10',
cz: '#f10',
dk: '#f10',
}
var africa = {
eg: '#f20',
ma: '#f20',
za: '#f20',
tn: '#f20',
}
var asia = {
cn: '#f30',
jp: '#f30',
kr: '#f30',
}
var america = {
ar: '#f40',
us: '#f40',
cl: '#f40',
}
$j('#map').vectorMap({
map: 'world_en',
color: '#f4f3f0',
colors: europe,
colors: africa,
colors: asia,
colors: america,
scaleColors: ['#b6d6ff', '#005ace'],
});
Found the answer!
$j('#map').vectorMap({
map: 'world_en',
color: '#f4f3f0',
scaleColors: ['#b6d6ff', '#005ace'],
});
$j('#map').vectorMap('set', 'colors', { au: '#b10', be: '#b10', bg: '#b10'});
$j('#map').vectorMap('set', 'colors', { eg: '#a20', ma: '#a20', za: '#a20'});
$j('#map').vectorMap('set', 'colors', { cn: '#f30', jp: '#f30', kr: '#f30'});
$j('#map').vectorMap('set', 'colors', { ar: '#660', us: '#660', cl: '#660'});
Related
Consider the following array:
packages = [
{modelName: "flatRate", name:"Enterprise", price: "$150"},
{modelName: "flatRate", name:"Gold", price: "$190"},
{modelName: "usageBased", name:"Enterprise", price: "$50"},
{modelName: "userBased", name:"Extreme", price: "$50"},
]
What I want to achieve is:
Use the packages.modelName as a heading and list all its items under it without repeating modelName. For Example:
flatRate
Enterprise ($150) , Gold ($190)
usageBased
Enterprise ($50)
userBased
Extreme ($50)
Notice how 2 objects having modelName: "flatRate" are shown under one heading.
What I've tried:
Take the packages array use a foreach loop on it and remake the array as:
packagesResult = [
{ modelname: "flatRate",
model: [ {name: "Enterprise", price: "$150"} ]
},
{ modelname: "flatRate",
model: [ {name: "Gold", price: "$190"} ]
},
{ modelname: "usageBased",
model: [ {name: "Enterprise", price: "$50"} ]
},
{ modelname: "userBased",
model: [ {name: "Extreme", price: "$50"} ]
},
]
and then tried to use a filter on it using observable but didn't work. Any help will be highly appreciated. Thanks.
Would a reduce like so fit your purpose?
models = packages.reduce((models, package) => {
models[package.name] = package.price;
return models;
}, {})
I would opt for something like the following:
myPackages = {};
function consolidatePayload() {
for(let package of packages){
if(this.myPackages.hasOwnProperty(package.modelName)) {
this.myPackages[package.modelName][package.name] = package.price;
} else {
this.myPackages[package.modelName]= {[package.name]: package.price};
}
}
console.log(this.myPackages);
}
IT gives an and result along the lines of
{
flatRate: {
Enterprise: "$150",
Gold: "$190"
},
usageBased: {
Enterprise: "$50"
},
userBased: {
Extreme: "$50"
}
}
EDIT: reduce inspiration, per #Śaeun acreáť
function consolidatePayload() {
let models = this.packages.reduce((models, package) => {
if(models.hasOwnProperty(package.modelName)) {
models[package.modelName][package.name]= package.price;
} else {
models[package.modelName] = {[package.name]: package.price}
}
return models;
}, {})
}
You can create array of price types for each model name like below ;)
const result = packages = [{
modelName: "flatRate",
name: "Enterprise",
price: "$150"
},
{
modelName: "flatRate",
name: "Gold",
price: "$190"
},
{
modelName: "usageBased",
name: "Enterprise",
price: "$50"
},
{
modelName: "userBased",
name: "Extreme",
price: "$50"
},
].reduce( (acc, item, i) => {
if( i === 0 ) {
acc.push(modifiedObject(item));
return acc;
}
let foundItem = acc.find(it => it.modelName === item.modelName);
if (foundItem) {
addNewPriceType(foundItem, item);
return acc;
} else {
acc.push(modifiedObject(item));
return acc;
}
}, [] );
function modifiedObject(item) {
return {
modelName : item.modelName,
model : [
{ name : item.name, price : item.price }
]
};
}
function addNewPriceType(foundItem, item) {
foundItem.model.push({
name : item.name,
price : item.price
});
}
console.log(result);
I want to combine two arrays (ranking and matches) that has common properties:
var ranking = [{
def: "0.58",
league: "Scottish Premiership",
name: "Celtic",
off: "3.33",
grank: "3",
tform: "96.33",
},
{
def: "2.52",
league: "Scottish Premiership",
name: "Dundee",
off: "1.28",
grank: "302",
tform: "27.51",
}]
var matches = [{
date: "2010-04-22",
league: "Scottish Premiership",
home: "0.0676",
away: "0.8",
draw: "0.1324",
goals1: "3",
goals2: "1",
tform1: "96.33",
tform2: "27.51",
team1: "Celtic",
team2: "Dundee",}]
Expected output looks like this:
[{
date: "2010-04-22",
league: "Scottish Premiership",
home: "0.0676",
away: "0.8",
draw: "0.1324",
goals1: "3",
goals2: "1",
tform1: "96.33",
tform2: "27.51",
def1: "0.58",
def2: "2.52",
off1: "3.33",
off2: "1.28",
grank1: "3",
grank2: "302",
team1: "Celtic",
team2: "Dundee",}]
To merge the arrays, I used Lodash _.merge function
var result = _.merge(ranking, matches);
The output it returned did merge some objects and omitted homogeneous objects.
Please I need some help and insight in achieving this task. I wouldn't mind any javascript (client-side) solution.
You need to merge by the given data and add the information of the two teams.
const
keys = ['def', 'off', 'grank'],
getRanking = (team, suffix) => Object
.fromEntries(keys.map(k => [k + suffix, team[k]])),
ranking = [{ def: "0.58", league: "Scottish Premiership", name: "Celtic", off: "3.33", grank: "3", tform: "96.33" }, { def: "2.52", league: "Scottish Premiership", name: "Dundee", off: "1.28", grank: "302", tform: "27.51" }],
matches = [{ date: "2010-04-22", league: "Scottish Premiership", home: "0.0676", away: "0.8", draw: "0.1324", goals1: "3", goals2: "1", tform1: "96.33", tform2: "27.51", team1: "Celtic", team2: "Dundee" }],
teams = Object.fromEntries(ranking.map(o => [o.name, o])),
result = matches.map(o => ({
...o,
...getRanking(teams[o.team1], 1),
...getRanking(teams[o.team2], 2)
}));
console.log(result);
.as-console-wrapper { max-height: 100% !important; top: 0; }
I'm trying to pass a data object that contains a nested array of objects from the Master view to the Details view. Currently, I'm able to display the parent level of the data object, but I'm struggling to try to figure out how to pass it's a nested array of data on to the details page. Below is a sample of my data model and how I'm going about displaying the information currently. I'm not sure what I need to type for the code where I'm passing the information on in the NavigationLink element. I'm sure there's probably a better way to do this, however, I'm just a designer trying to figure this out for prototyping reasons.
//Passports.swift //
import Foundation
import SwiftUI
struct Passports: Identifiable {
let id : Int
let passportPremium: Bool
let passportActive: Bool
let passportTitle: String
let passportDates: String
let venues: [Venue]
}
struct Venue: Identifiable {
let id = UUID()
let title : String
let venueArea: String
let venueItems: [venueItem]
}
struct venueItem {
let title: String
let productDescription: String
let productPrice: Double
let productType: String
let newStatus: Bool
let diningPlan: Bool
let kidFriendly: Bool
let vegetarian: Bool
let glutenFree: Bool
let featuredProduct: Bool
let containsAlcohol: Bool
}
extension Passports {
static func all() -> [Passports] {
return [
Passports (
id: 1001,
passportPremium: false,
passportActive: true,
passportTitle : "Passport Title Example",
passportDates: "October 20 - November 3, 2019",
venues: [
Venue (
title: "Venue Name",
venueArea: "Germany",
venueItems: [
venueItem (
title: "Potato Dumpling",
productDescription: "Potato Dumpling with Mushroom Sauce",
productPrice: 0.00,
productType: "Food",
newStatus: false,
mealPlan: false,
kidApproved: true,
vegetarian: false,
glutenFree: false,
featuredProduct: false,
containsAlcohol: false
),
venueItem (
title: "Pork Schnitzel",
productDescription: "Pork Schnitzel with Mushroom Sauce and Spaetzle",
productPrice: 0.00,
productType: "Food",
newStatus: false,
mealPlan: false,
kidApproved: false,
vegetarian: false,
glutenFree: false,
featuredProduct: false,
containsAlcohol: false
)
])
]
)
]
}
}
//PassportsView //
import SwiftUI
struct PassportsView: View {
var model = Passports.all()
var body: some View {
NavigationView {
ForEach(self.model) { item in
NavigationLink (destination: PassportDetails(passportTitle: item.passportTitle, venues: [Venue()] ) ) {
GeometryReader { geometry in
HStack {
VStack(alignment: .leading) {
Text(item.passportTitle)
.fontWeight(.semibold)
.foregroundColor(Color.white)
.multilineTextAlignment(.leading)
Text(item.passportDates)
.foregroundColor(Color.white)
}.frame(width: geometry.size.width, height: 120)
.background(Color("Purple"))
.cornerRadius(6)
}
}
}.padding(.horizontal)
}
}
}
}
// PassportDetails //
struct PassportDetails: View {
var passportTitle = "Passport Name"
var venues: [Venue] = [
Venue(title: "Test Venue", venueArea: "Test Area", venueItems: [venueItem]())
]
var venueProd: [venueItem] = [
venueItem(title: "Test item", productDescription: "Test Description", productPrice: 9.99, productType: "Food", newStatus: false, mealPlan: true, kidApproved: false, vegetarian: false, glutenFree: false, featuredProduct: false, containsAlcohol: false)
]
var body: some View {
NavigationView {
List {
HStack {
Text("Test")
Spacer()
Text("9.99")
}
}
}.navigationBarTitle(Text(passportTitle))
}
}
In PassportDetails do the following:
var venues: [Venue]
and in Passports do this:
NavigationLink (destination: PassportDetails(passportTitle: item.passportTitle, venues: item.venues) )
PS: You should do the same for the passportTitle, meaning in PassportDetails put var passportTitle: String
Have anybody an idea, how I can split these in Typescript or JS:
{ "AED": "United Arab Emirates Dirham", "AFN": "Afghan Afghani", "ALL": "Albanian Lek" }
I want only the names like this:
AED
AFN
ALL
you are doing it wrong, first of all modify your object to array of objects like below
let currencies = [
{
code: "AED",
fullName: "United Arab Emirates Dirham"
},
{
code: "AFN",
fullName: "Afghan Afghani"
},
{
code: "ALL",
fullName: "Albanian Lek"
}
];
now you can traverse through it like
currencies.forEach(val => {
//use val.code to get desired currencies codes
})
You can use Object.keys (link) to extract all keys from some object.
var countries = { "AED": "United Arab Emirates Dirham", "AFN": "Afghan Afghani", "ALL": "Albanian Lek" }
var codes = Object.keys( countries );
console.log( codes ); // [ "AED", "AFN", "ALL" ]
I have a web page which uses a custom service to manage a map on the View (OpenLayers). I want to be able to display information about different markers on the page somewhere which means binding to a service property. The service is being called from a custom directive, and the binding (as far as I know) should be done from the Controller. The data being shown at the moment is the initialised object rather than binding to any changes to that object.
main.html
<h2>My Map</h2>
<div id="map" class="map"></div>
<p>
Name: {{selected.name}}</br>
Routers: {{selected.routers}}</br>
Switches: {{selected.switches}}
</p>
main.ctrl.js
angular.module("app").controller("MainController", function($scope, openlayers){
openlayers.init();
$scope.selected = openlayers.selected;
});
openlayers.js
angular.module("app").factory("openlayers", function(){
var init = function(){
var vectorLayers = [new ol.layer.Tile({
source: new ol.source.MapQuest({layer: 'osm'})
})];
vectorLayers.push(createMapLayer("red"));
vectorLayers.push(createMapLayer("orange"));
vectorLayers.push(createMapLayer("blue"));
setUpMap(vectorLayers);
};
var activeVector = {
name: null,
routers: null,
switches: null
};
function createMapLayer(markerColor){
var vectorSource = getVectorSource();
//add the feature vector to the layer vector, and apply a style to whole layer
var vectorLayer = new ol.layer.Vector({
source: getVectorSource(cities[markerColor]),
style: getIconStyle(markerColor)
});
return vectorLayer;
}
function getVectorSource(cities){
var vectorSource = new ol.source.Vector({
//create empty vector
});
//create a bunch of icons and add to source vector
for (var index in cities){
var city = cities[index];
var iconFeature = new ol.Feature({
geometry: new ol.geom.Point(
ol.proj.transform(
[city.lon, city.lat],
'EPSG:4326',
'EPSG:3857'
)),
name: city.name,
routers: 200,
switches: 100
});
vectorSource.addFeature(iconFeature);
}
return vectorSource;
}
function getIconStyle(markerColor){
//create the style
return new ol.style.Style({
image: new ol.style.Icon(/** #type {olx.style.IconOptions} */ ({
anchor: [0.5, 46],
anchorXUnits: 'fraction',
anchorYUnits: 'pixels',
opacity: 0.75,
src: "Images/"+markerColor+"-marker.png"
}))
});
}
function setUpMap(vectorLayers){
var map = new ol.Map({
target: 'map',
layers: vectorLayers,
view: new ol.View({
center: ol.proj.fromLonLat([2.808981, 46.609599]),
zoom: 4
})
});
addClickEventsToMapItems(map);
}
function addClickEventsToMapItems(map){
var interaction = new ol.interaction.Select({
condition: ol.events.condition.click
});
map.addInteraction(interaction);
interaction.on("select", function(e){
activeVector.name = e.target.getFeatures().item(0).get("name");
activeVector.routers = e.target.getFeatures().item(0).get("routers");
activeVector.switches = e.target.getFeatures().item(0).get("switches");
});
}
return {
init: init,
selected: activeVector
};
});
var red_cities = [
{ "lat": 40.462663, "lon": -3.626368, "name": "madrid" },
{ "lat": 53.381129, "lon": -1.470085, "name": "sheffield" },
{ "lat": 48.856614, "lon": 2.352222, "name": "paris" }
];
var orange_cities = [
{ "lat": 53.480759, "lon": -2.242631, "name": "manchester" },
{ "lat": 53.551085, "lon": 9.993682, "name": "hamburg" },
{ "lat": 50.850340, "lon": 4.351710, "name": "brussels" }
];
var blue_cities = [
{ "lat": 43.552847, "lon": 7.017369, "name": "cannes" },
{ "lat": 51.507351, "lon": -0.127758, "name": "london" },
{ "lat": 52.370216, "lon": 4.895168, "name": "amsterdam" },
{ "lat": 36.140751, "lon": -5.353585, "name": "gibraltar" }
];
var cities = {
red: red_cities,
orange: orange_cities,
blue: blue_cities
};
EDIT: Removed the directive to simplify the code.