How to add svg to pug via mixin? - html

I have a mixin
mixin icon(url)
svg()
use(xlink:href=url)
And the code to output
-
var features = [
{
icon: +icon(img/time.svg)
}
]
each item in features
+feature(item.icon)
What am I doing wrong?

Are you wanting something like this? I've fixed the indentation, mixin references, and stored the path to the icon as a string.
mixin icon(url)
svg
use(xlink:href=url)
-
var features = [
{
icon: 'img/time.svg'
}
]
each item in features
+icon(item.icon)

Related

load style file using bundleName in angular

I have light and dark theme files and mentioned in angular.json file as below:
"styles": [
"src/styles.scss",
{
"input": "src/styles/themes/light.theme.scss",
"bundleName": "light-theme",
"inject": false
},
{
"input": "src/styles/themes/dark.theme.scss",
"bundleName": "dark-theme",
"inject": false
}
],
and I want to inject each of the file dynamically via this code
loadStyle(styleName: string = 'light-theme' | 'dark-theme') {
const head = this.document.getElementsByTagName('head')[0];
let themeLink = this.document.getElementById('client-theme') as HTMLLinkElement;
if (themeLink) {
themeLink.href = styleName;
} else {
const style = this.document.createElement('link');
style.id = 'client-theme';
style.rel = 'stylesheet';
style.href = `${styleName}`;
head.appendChild(style);
}
}
The above code creates link as
<link id="client-theme" rel="stylesheet" href="dark-theme"> // href="light-theme"
but nothing happens because the actual theme file is not being injected in the head-tag.
Update
Accoring to Angular Material docs
You can define multiple themes in separate files by creating multiple theme files per Defining a theme, adding each of the files to the styles of your angular.json. However, you must additionally set the inject option for each of these files to false in order to prevent all the theme files from being loaded at the same time. When setting this property to false, your application becomes responsible for manually loading the desired file. The approach for this loading depends on your application.
https://material.angular.io/guide/theming#multiple-themes-across-separate-files
but the process of loading styles files in not there in the docs :(
Any suggestion/solution would be highly appreciable!!! :)
I don't think you can directly use the bundleName as href. Maybe try something like this:
style.href = `styles/themes/${styleName}.css`;
Set a default theme using inject attribute:
{
"input": "src/styles/themes/light.theme.scss",
"bundleName": "light-theme",
"inject": true
},
or update your ngOnInit in AppComponent:
ngOnInit(): void {
this.loadStyle('light-theme');
}

Is there a way to create hyperlink within Vue argument

I have a function that creates a text box that alters within each name. The thing is, I want one of these description arguments to allow a hyperlink within the text.
example:
var maps = new Vue({
el: "#maps",
data: {
selected: 'US County'
maps = [
{
name: 'US County'
description: "This is where I want my **hyperlink** to go"
}
]
}
})
I want the hyperlink to be within this description argument among separate text..I tried using <a href... but it wasn't working.
I am relatively new to HTML and Vue JS so I apologize if this question does not entirely make sense.
If using Vue 2, check out this page, which shows how to bind a variable and display it as HTML. You will also want to be sure to store your description + HTML as a template literal
Template should be something similar to:
<template>
<div v-html="maps[0].description"></div>
</template>
Notice the backticks in the description. This is called a template literal. Your script should be similar to the following:
var maps = new Vue({
el: "#maps",
data: {
selected: 'US County'
maps = [
{
name: 'US County'
description: `This is where I want my link to go`
}
]
}
})

Vega-Lite: "1 in X" custom legend labels

I'm working on a choropleth map that shows the share of the population that has confirmed positive case of Covid-19 in each political jurisdiction. Similar to this example in the per capita Mapbox graphic on this page of the The New York Times.
I figured out just about every detail expect how to customize the legend. Currently, the labels display the shareOfPop as a number. Though, I want to prefix each label with "1 in ${shareOfPop}", and to add a suffix to the final label "1 in ${shareOfPop} or more".
enter image description here.
I've created this map in an Observable Notebook.
Things I've tried so far...
Making us of the custom legend encodings
To specify label text:
vl.color()
.fieldQ('shareOfPop')
.scale(
{
scheme: "yelloworangered",
domain: [250, 10],
clamp: true,
}
)
.legend({
title: "Share of Pop.",
encode: {
labels: {text: "1 in ${datum.value}"}
}
})
Register a custom formatter
Which I doubt I've accomplished correctly.
Here's what my configuration looks like (which is based on the config in the Introduction to Vega-Lite notebook).
vl = {
const [vega, vegalite, api, tooltip] = await Promise.all([
'vega#5.13.0',
'vega-lite#4.14.1',
'vega-lite-api#0.11.0',
'vega-tooltip#0.22.1'
].map(module => require(module)));
const options = {
config: {
// allow custom format types
customFormatTypes: true,
config: {
view: {continuousWidth: 400, continuousHeight: 300},
mark: {tooltip: null}
}
},
init: view => {
// initialize tooltip handler
view.tooltip(new tooltip.Handler().call);
// enable horizontal scrolling for large plots
if (view.container()) view.container().style['overflow-x'] = 'auto';
// register a custom expression function...am I doing this right???
vega.expressionFunction('1inX', function(datum) {
return `1 in ${datum}`
})
},
view: {
// view constructor options
loader: vega.loader({baseURL: 'https://cdn.jsdelivr.net/npm/vega-datasets#1/'}),
renderer: 'canvas'
}
};
return api.register(vega, vegalite, options);
}
Then I specify this custom formatType when defining the mark:
vl.color()
.fieldQ('shareOfPop')
.scale(
{
scheme: "yelloworangered",
domain: [250, 10],
clamp: true,
}
)
.legend({
title: "Share of Pop.",
formatType: "1inX",
})
)
Neither of these approaches produced any noticeable change.
Gonna answer my own question here.
Turns out Legend has a general labelExpr property that allows you to specify a Vega expression for customizing the label.
In my case, I wanted to always prepend the string "1 in ", and also append "+" when over may domain limit. Here's how I did it using the join() and if() functions.
...
vl.color()
.legend(
{
labelExpr: "join(['1 in ', datum.value, if(datum.value >= 250, '+', '')], '')"
}
)
This property isn't documented for Legend, though it is for for Axis).

Polymer style google-map

How can styles be applied to the Polymer 1 google-map tag?
The documentation suggests that an object of styles can be passed in via a 'styles' property on the tag.
However, when using something like this which previously worked without issue, the style is not being loaded in.
I've tried replacing the code from snazzymaps with an object (as opposed to an array), but that doesn't work.
It should work. Are you sure you are passing your styles object in correctly?
This gives you a styled map:
<google-map latitude="37.779" longitude="-122.3892"
min-zoom="9" max-zoom="11" language="en"
styles='[{"featureType":"landscape","stylers":[{"hue":"#FFBB00"},{"saturation":43.400000000000006},{"lightness":37.599999999999994},{"gamma":1}]},{"featureType":"road.highway","stylers":[{"hue":"#FFC200"},{"saturation":-61.8},{"lightness":45.599999999999994},{"gamma":1}]},{"featureType":"road.arterial","stylers":[{"hue":"#FF0300"},{"saturation":-100},{"lightness":51.19999999999999},{"gamma":1}]},{"featureType":"road.local","stylers":[{"hue":"#FF0300"},{"saturation":-100},{"lightness":52},{"gamma":1}]},{"featureType":"water","stylers":[{"hue":"#0078FF"},{"saturation":-13.200000000000003},{"lightness":2.4000000000000057},{"gamma":1}]},{"featureType":"poi","stylers":[{"hue":"#00FF6A"},{"saturation":-1.0989010989011234},{"lightness":11.200000000000017},{"gamma":1}]}]'>
</google-map>
Are you using single quotes for the styles property? I.e. styles='' rather than styles=""
That's what worked for me.
I could not find any answers on how to pass this object inside the value of the style tag, but I was able to apply the styles by reading the comments in the file" google-map.html":
<script>
var map = document.querySelector('google-map');
map.styles = [
{
stylers: [
{saturation: -100}
]
},
{
featureType: 'water',
stylers: [
{color: '#1d5068'}
]
}
];
Expanding on my previous comment / answer to Dian Carlos, here is code I finally used
Assuming that styledMapDef holds the map styles definitions object
var styledMapType = new google.maps.StyledMapType(styledMapDef, {name: 'Styled'});
this.map.setOptions( {"mapTypeControl":"true","mapTypeControlOptions":{"position":"3", "mapTypeIds": ["roadmap", "satellite", "hybrid", "terrain", "styled"]}, "scaleControl": "true"} );
this.map.mapTypes.set('styled', styledMapType);
this.map.setMapTypeId('styled');

How to set width to SimplePolylineGeometry primitive in CesiumJS

I have this code, which adds polyline primitive to scene.
function createPolyline(startPosition, endPosition) {
Cesium.SimplePolylineGeometry({
positions : [startPosition, endPosition]
});
var geometry = Cesium.SimplePolylineGeometry.createGeometry(polyline);
return scene.primitives.add(new Cesium.Primitive({
geometryInstances : new Cesium.GeometryInstance({
geometry : geometry,
attributes : {
color : Cesium.ColorGeometryInstanceAttribute.fromColor(Cesium.Color.SPRINGGREEN)
}
}),
appearance : new Cesium.PerInstanceColorAppearance()
}));
}
How do I set width of this polyline?
The recommended way to add a polyline is with the Entity API, like this
var greenLine = viewer.entities.add({
polyline : {
positions : [startPosition, endPosition],
width : 5,
material : Cesium.Color.SPRINGGREEN
}
});
But, if you want to skip the Entity layer and use the Primitive Graphics layer directly, you can do that too. Your sample code above has some issues. First, you're calling the Cesium.SimplePolylineGeometry constructor without the new keyword, and without saving the result, and this is not the correct use pattern for this kind of code. Second, the SimplePolylineGeometry class itself does not support line widths greater than what the WebGL implementation supports, which on Windows machines running ANGLE, is only 1 pixel wide. To get around this limitation, use the normal (non-simple) polylines, like this:
var polylines = scene.primitives.add(new Cesium.PolylineCollection());
var polyline = polylines.add({
positions : Cesium.PolylinePipeline.generateCartesianArc({
positions : [startPosition, endPosition]
}),
material : Cesium.Material.fromType('Color', {
color : Cesium.Color.SPRINGGREEN
}),
width: 5
});
SimplePolylineGeometry does not support line width. You need to use PolylineGeometry instead and pass the "width" options to the constructor. Also, you should be using PolylineColorAppearance as your appearance, not PerInstanceColorAppearance.