I have some json data such as:
[{"timestamp":"2020-03-23T14:00:00.000Z","symbol":"AAL","name":"American Airlines Group","industry":"Industrials","open":10.9,"high":11.36,"low":10.01,"close":10.25,"volumes":55494100},
{"timestamp":"2020-03-22T14:00:00.000Z","symbol":"AAL","name":"American Airlines Group","industry":"Industrials","open":10.6526,"high":12,"low":10.3,"close":10.38,"volumes":62681800},
{"timestamp":"2020-03-19T14:00:00.000Z","symbol":"AAL","name":"American Airlines Group","industry":"Industrials","open":11.6,"high":12.16,"low":10.01,"close":10.29,"volumes":71584500},{"timestamp":"2020-03-18T14:00:00.000Z","symbol":"AAL","name":"American Airlines
I want to get only the 0 index value:
This one: [{"timestamp":"2020-03-23T14:00:00.000Z","symbol":"AAL","name":"American Airlines Group","industry":"Industrials","open":10.9,"high":11.36,"low":10.01,"close":10.25,"volumes":55494100},{"timestamp":"2020-03-22T14:00:00.000Z",
My code:
let movies = state.myListData.map((val) => {
return (
<View key={val.symbol} style={styles.text}>
<Text style={styles.text} key={val.symbol}>
{val.high}
</Text>
<Text style={styles.text} key={val.symbol}>
{val.close}
</Text>
</View>
);
});
Right now I am getting all the values, but how can I get only the value 0? Is there any way to do that?
You may simply do this:
let item = state.myListData[0];
let movie = (
<View key={item.symbol} style={styles.text}>
<Text style={styles.text} key={item.symbol}>
{item.high}
</Text>
<Text style={styles.text} key={item.symbol}>
{item.close}
</Text>
</View>
)
Related
I am trying to pass a value within my scope into the text tag for the x:
<g transform="translate(150,40)">
<rect ng-style="{'width':info}" height="39" fill="#66CC99"></rect>
<text x={{info}} y="9.5" dy="1.2em" dx="-5px">{{infoNum}}</text>
</g>
But I get the error:
> Error: <text> attribute x: Expected length, "{{info…".
How can I solve this issue? Is there a way to bind correctly a variable into x parameter? The approach: ng-style="{'x':info}" does not work.
Try ng-attr.
<text ng-attr-x="{{info}}" y="9.5" dy="1.2em" dx="-5px">{{infoNum}}</text>
Also, check out this answer.
How can I make the text I want to show differ according to the language used.
Example if the text is in:
Spanish I would like to use the text: Hola!
Italian I would like to use the text: Ciao!
English I would like to use the text: Hi!
If no language is passed, a default one, for example English.
<?xml version="1.0" encoding="UTF-8" standalone="no"?>
<svg height="30" width="200">
<text x="0" y="15" fill="blue">Hi!</text>
</svg>
Example for language selection, the language could be on cookie or session.
Or it could be passed as a parameter to the file name.svg?Lang=es
You can use a switch element. Change your browser's language settings to prefer Italian or Spanish to see the text change.
<svg width="100%" height="100%" viewBox="0 100 600 300">
<switch font-size="18">
<g systemLanguage="en">
<text x="20" y="220" xml:lang="en-US">Why can't they just speak English ?</text>
<text x="230" y="150" xml:lang="en">English (US)</text>
</g>
<g systemLanguage="es">
<text x="20" y="220" xml:lang="es-ES" font-size="18">¿Por qué no pueden simplemente hablar en castellano ?</text>
<text x="230" y="150" xml:lang="en">Spanish (ES)</text>
</g>
<g systemLanguage="it">
<text x="20" y="220" xml:lang="it" font-size="18">Perchè non possono semplicemente parlare italiano ?</text>
<text x="230" y="150" xml:lang="en">Italian</text>
</g>
</switch>
</svg>
In modern Browsers you can use a Custom Element to dynamically generate the SVG
Use Roberts systemLanguage to enhance the SVG
https://developer.mozilla.org/en-US/docs/Web/SVG/Attribute/systemLanguage
For React you have to add extra wrapper code around every Custom Element,
React only supports this W3C standard for 71%,
all other Frameworks are 100% BFF with the W3C standard Custom Elements API
customElements.define('svg-text', class extends HTMLElement {
static get observedAttributes() {
return ["bgfill", "width", "height", "stroke", "fill", "text",
"x", "y", "fontsize", "rotate"
]; // update whenever these attributes change
}
connectedCallback() {
let [bgfill = "pink", width = 200, height = 150, stroke = "none", fill = "green",
text = "Hello", x = "50%", y = "50%", fontsize = "1em", rotate = "0"
] = this.constructor.observedAttributes.map(x => this.getAttribute(x) || undefined);
this.innerHTML = `<svg width='${width}' height='${height}'` +
`xmlns='http://www.w3.org/2000/svg'>` +
`<rect width='100%' height='100%' fill='${bgfill}'/>` +
`<text dominant-baseline='middle' text-anchor='middle' font-size='${fontsize}'` +
` x='${x}' y='${y}' fill='${fill}' ` +
` stroke='${stroke}' transform='rotate(${rotate} ${width/2} ${height/2})'>${text}</text></svg>`
}
attributeChangedCallback(name, oldValue, newValue) {
if (this.isConnected) this.connectedCallback();
}
});
// example changing attribute
setTimeout(() => {
document.querySelector("svg-text").setAttribute("text", "Ola!");
}, 21e2)
<svg-text bgfill='lightblue' fill="blue" width="100" fontsize="3em" height="100">
</svg-text>
<svg-text fill="green" width="75" height="25" text="Hallo">
</svg-text>
<svg-text bgfill="gold" fill="red" width="50" text="Bonjour" rotate="90" fontsize="2em">
</svg-text>
I need to embed app Flame Graph into Azure Devops wiki page.
FlameGraph is an visualization of an app's call stack in a very simple and understandable form. Physically it is a SVG image which is rendered by browser like this (clickable):
However, I want to embed not a usual FlameGraph, but a HTML graph which is a huge piece of 70K+ HTML and JS lines. This code having rendered looks totally like SVG, here is the sample
<g id="" class="func_g" onmouseover="s(this, '', 'perf')" onmouseout="c('', 'perf')"
onclick="zoom(this, 'perf')" >
<title>consular_function</title>
<rect x="531.6" y="398" width="0.6" height="15.0" fill="rgb(220,220,220)" rx="2.2" ry="2.2" />
<text text-anchor="" x="534.61" y="408.5" font-size="12" font-family="Verdana" fill="rgb(0,0,0)" >
</text>
</g>
<g id="" class="func_g" onmouseover="s(this, '', 'perf')" onmouseout="c('', 'perf')"
onclick="zoom(this, 'perf')" >
<title>db_function</title>
<rect x="1367.2" y="446" width="0.1" height="15.0" fill="rgb(130,202,250)" rx="2.2" ry="2.2" />
<text text-anchor="" x="1370.18" y="456.5" font-size="12" font-family="Verdana" fill="rgb(0,0,0)" >
</text>
</g>
<g id="" class="func_g" onmouseover="s(this, '', 'perf')" onmouseout="c('', 'perf')" onclick="zoom(this, 'perf')" >
<title>db_function</title>
<rect x="1402.0" y="414" width="1.7" height="15.0" fill="rgb(130,202,250)" rx="2.2" ry="2.2" />
<text text-anchor="" x="1405.03" y="424.5" font-size="12" font-family="Verdana" fill="rgb(0,0,0)" >
</text>
</g>
<g id="" class="func_g" onmouseover="s(this, '', 'perf')" onmouseout="c('', 'perf')"
onclick="zoom(this, 'perf')" >
<title>consular_function</title>
<rect x="1037.6" y="302" width="4.6" height="15.0" fill="rgb(220,220,220)" rx="2.2" ry="2.2" />
<text text-anchor="" x="1040.59" y="312.5" font-size="12" font-family="Verdana" fill="rgb(0,0,0)" >
</text>
</g>
<g id="" class="func_g" onmouseover="s(this, '', 'perf')" onmouseout="c('', 'perf')"
onclick="zoom(this, 'perf')" >
<title>moduled_function (3,218 us, 0,04%)</title>
<rect x="10.8" y="494" width="0.7" height="15.0" fill="rgb(237,110,36)" rx="2.2" ry="2.2" />
<text text-anchor="" x="13.78" y="504.5" font-size="12" font-family="Verdana" fill="rgb(0,0,0)" >
</text>
</g>
<defs >
<linearGradient id="background_mem" y1="0" y2="1" x1="0" x2="0" >
<stop stop-color="#eeeeef" offset="10%" />
<stop stop-color="#eeeee0" offset="90%" />
</linearGradient>
</defs>
<style type="text/css">
.func_g:hover { stroke:black; stroke-width:0.5; cursor:pointer; }
</style>
</svg>
<script type="text/ecmascript">
// Javascript for svg file
// Used to control flame graph operations, e.g. zoom in/out, search, etc
if(typeof window.flameGraph == "undefined") window.flameGraph={}; // global flame graph elements (contained width, it is a hashmap for each svgId)
if(typeof window.searchButton == "undefined") window.searchButton={}; // global searching button hashmap for each svgId
if(typeof window.detailedTextField == "undefined") window.detailedTextField={}; // global detailed text box (on the bottom of graph) hashmap for each svgId
if(typeof window.matchedTextField == "undefined") window.matchedTextField={}; // global matched text box (on the right of detailed text box) hashmap for each svgId
if(typeof window.isSearching == "undefined") window.isSearching={}; // global hashmap for each svg whether it is in searching mode or not
if(typeof window.revertGraph == "undefined") window.revertGraph={}; // global hashmap for each svg whether the flame graph is reverted or not
revertGraph['mem'] = 0;
function init(evt, hlString, svgId) { //init function used to initialize the variables
if(svgId == undefined) return;
flameGraph[svgId] = document.getElementById(svgId).getAttribute("svg_width"); // get flame graph width by internal svg label "svg_width"
searchButton[svgId] = document.getElementById(svgId + "_search"); // get search button
detailedTextField[svgId] = document.getElementById(svgId + "_details").firstChild; // get details text box
matchedTextField[svgId] = document.getElementById(svgId + "_matched"); // get matched text box
isSearching[svgId] = 0; // not searching
if(hlString.length != 0) search(hlString, svgId); // if needed -> highlight string with search function when creating flame graph
}
init(null, '', 'mem');
function jumpToPage(title) { // jump to formatted dev trace page
var reg = new RegExp('(?<=w)([0-9]+)(?=\\s\\()');
var pageNo = reg.exec(title);
if(pageNo == null) {alert('target not found.'); return;}
showDevTrace('' + pageNo[0] + '_html');
}
function s(node, id, svgId) { // mouse-over action
detailedTextField[svgId].nodeValue = "" + getTitleText(node); // show the text of current choosing node
if(id.length != 0) window.parent.highlightFrame(id);
}
function c(id, svgId) { // mouse-out action
detailedTextField[svgId].nodeValue = ' ';
if(id.length != 0) window.parent.unhighlightFrame(id);
}
function getTitleText(e) { //return the title string of the e node
var text = findChild(e, "title").firstChild.nodeValue;
return (text);
}
function findChild(e, name, attr) { // looking for the child (of e) whose name is equal to "name"
var children = e.childNodes;
for(var i=0; i<children.length;i++) {
if(children[i].tagName == name) {
if(attr == undefined) return children[i]; //return the child node
else children[i].attributes[attr].value; // if attr is inputed, return the attr value of this child node
}
}
return;
}
table, th, td {
background-color: #FFFFF1;
padding: 7px;
border: 1px solid black;
border-collapse: collapse;
overflow: visible;
font-size: 12px;
alig: left;
}
<style></body>
</html>
full code is too big so I put full working sample into a fiddle.
I tried to put HTML/JS lines directly into Azure page but it does not render this code showing it like plain-text, for simple HTML like tables and lists Azure works though.
How to embed this piece into Azure? I know that iframe is still not supported but maybe there is another way?
P.S. Maybe there is way to convert html-rendered graph into SVG, does Azure renders such SVG correctly?
How can i change the fill color of an SVG logo onScroll; ¿thats posible with html or any css property?
The color change when you scroll when on another DIV
The idea is to use mix-blend-mode: differencein CSS together with isolation: isolate; for the group.
It's up to you how you want to move the layers. I'm using an input type range for this. You may use scroll or wheel.
I hope this helps.
percent.addEventListener("input",()=>{
let val = ~~(percent.value);
let _var = map(100-val,0,100,3,27);
txt.textContent = val+"%";
pth.setAttributeNS(null,"d",`M3,27H27V${_var}H3z`)
})
function map(n, a, b, _a, _b) {
let d = b - a;
let _d = _b - _a;
let u = _d / d;
return _a + n * u;
}
svg{border:1px solid; font-size:10px; background:lightblue}
[type="range"]{width:150px;}
<svg viewBox="0 0 30 30" width="150">
<g style="isolation: isolate;">
<path d="M3,27H27V3H3z" fill="white" />
<path id="pth" d="M3,27H27V15H3z" />
<text id="txt" x="15" y="15" dominant-baseline="middle" text-anchor="middle" fill="white" style="mix-blend-mode: difference;">50%</text>
</g>
</svg>
<p><input id="percent" type="range" value="50" /></p>
I'm not even sure how to explain this.
I have a floor layout that is in a JPG format, I would like to enable user to mouseOver or click on different area of the map to get dynamically information about it. To get different area of the map interactive, I was thinking I could overlaid a dynamically SVG grid on top/or behind it, that way, I can assign the dynamic data to a grid coordinates.
I am having problem with implementing this, I can't get the grid and the image to resize with each other. Also, since the SVG grid is dynamic, when the image is bigger, by default, the my grid has more lines which throws the coordinates off when zoom in/out.
Is there away to generate a fixed grid (e.g., 20x10) matched and overlaid it to the image. Make it zoom with the image? I just got started with SVG today so any help would be greatly appreciated.
Code in Angular2
<svg attr.width="{{w}}" attr.height="{{h}}" id="mySVG">
<image xlink:href="../asset/building.jpg" x="0" y="0" height="100%" width="100%"/>
<rect x="0" y="0" attr.width="{{w}}" attr.height="{{h}}" stroke="black" fill="url(#GridPattern)" stroke-width="5"
class="hello"/>
<defs>
<pattern id="GridPattern" x="0" y="0" attr.width="{{wGap}}" attr.height="{{hGap}}" patternUnits="userSpaceOnUse">
<line x1="0" y1="0" attr.x2="{{wGap}}" y2="0" stroke="lightblue" stroke-width="1px" />
<line x1="0" y1="0" x2="0" attr.y2="{{hGap}}" stroke="lightblue" stroke-width="1px" />
</pattern>
</defs>
<g id="group1" fill="red">
<!--<rect x="1cm" y="1cm" width="1cm" height="1cm"/>
<rect x="3cm" y="1cm" width="1cm" height="1cm"/>-->
<text *ngFor="let h of loc" attr.x="{{h.x*wGap}}" attr.y="{{h.y*hGap}}" fill="red" text-anchor='middle'>{{h.text}},h:{{h.y*hGap}},w:{{h.x*wGap}}</text>
<text *ngFor="let x of xNum; let i = index" attr.x="{{i*wGap}}" y="20" fill="red" style="writing-mode: tb; glyph-orientation-vertical: 0;
letter-spacing: -3;" >{{i}}</text>
<text *ngFor="let x of yNum; let i = index" x="20" attr.y="{{i*hGap}}" fill="red">{{i}}</text>
</g>
</svg>
import {Component, OnInit,NgZone} from '#angular/core';
#Component({
selector: 'home',
template: require('./home.html')
})
export class Home implements OnInit{
bol:boolean = true;
w:number;
h:number;
wGap:number;
hGap:number;
hMultiplier:number = 30;
wMultiplier:number = 40;
yNum = new Array(this.hMultiplier);
xNum = new Array(this.wMultiplier);
hLine:any;
wLine:any;
loc:Object[] = [{x:37,y:3,text:"testing 1"},
{x:31,y:25,text:"testing 2"},
{x:2,y:9,text:"testing 3"},
{x:35,y:8,text:"testing 4"},
{x:22,y:10,text:"testing 5"}]
constructor(ngZone:NgZone){
console.log(this.xNum,this.yNum)
console.log(window.innerHeight, window.innerWidth);
this.w = window.innerWidth-50;
this.h = window.innerHeight-200;
this.wGap = Math.ceil(this.w/this.wMultiplier);
this.hGap = Math.ceil(this.h/this.hMultiplier);
//////
//this.calculateLocation();
window.onresize = (e)=>{
ngZone.run(()=>{
console.log(window.innerWidth,window.innerHeight);
//this.w = document.getElementById('bldImg')['width'];
//this.h = document.getElementById('bldImg')['height'];
this.w = window.innerWidth-50;
this.h = window.innerHeight-200;
this.wGap = Math.ceil(this.w/this.wGap);
this.hGap = Math.ceil(this.h/this.hGap);
//////
// this.calculateLocation();
console.log(this.wGap)
console.log(this.hGap)
});
}
}
ngOnInit(){
}
}
I managed to do it using svg tag and create my own interactive map using Angular version 4 you can view the plnkr in this link - Please view the code
<svg
version="1.1"
xmlns="http://www.w3.org/2000/svg"
xmlns:xlink="http://www.w3.org/1999/xlink" viewBox="0 0 2000 800">
<svg:path
*ngFor="let country of countries; let i = index"
[attr.data-index]="i"
(mouseover)="countryHover = country.country_country"
(click)="clicked(i)"
class="blob"
[class.selected]="hasCountry(i)"
[attr.d]="country.country_path"
fill="currentColor">
</svg:path>
</svg>
Image of the Output incase if Plunker doesnt work
https://plnkr.co/edit/2heVmd7l4UokqR2OcNgm?p=preview