so I understand that I can change the fixed width instead of a responsive width, by importing Library, then re-assigning the width value. But I also want to change the height and including ,height: 500 doesn't seem to work. What am I doing wrong and what other way is there to embed the d3 observable notebook chart with customizable width and height without using an iframe?
<div class="chart"></div>
<p>Credit: <a href="https://observablehq.com/#tripletk/mmcovid19-confirmedcases">Myanmar COVID-19 Total Lab
Confirmed Cases by Timmy Kyaw</a></p>
<script type="module">
import {
Runtime,
Inspector,
Library
} from "https://cdn.jsdelivr.net/npm/#observablehq/runtime#4/dist/runtime.js";
const runtime = new Runtime(Object.assign(new Library, {
width: 500
}));
import define from "https://api.observablehq.com/d/1adf72a9a09835c3.js?v=3";
const main = runtime.module(define, name => {
if (name === "chart") return Inspector.into(".chart")();
});
</script>
Width works differently than height in Observable notebooks. You’ve already found how to change width: it’s a reactive variable that you can override with a constant like you’re doing; by default it uses with width of the document body.
For height, or any other value you want to inject like data or zipCode, you should use main.redefine("height", 500). (I’m using 200 in the example below, just change it to 500.)
<div class="chart"></div>
<p>Credit: <a href="https://observablehq.com/#tripletk/mmcovid19-confirmedcases">
Myanmar COVID-19 Total Lab Confirmed Cases by Timmy Kyaw</a></p>
<script type="module">
import {
Runtime,
Inspector,
Library
} from "https://cdn.jsdelivr.net/npm/#observablehq/runtime#4/dist/runtime.js";
const runtime = new Runtime(Object.assign(new Library, {
width: 500
}));
import define from "https://api.observablehq.com/d/1adf72a9a09835c3.js?v=3";
const main = runtime.module(define, name => {
if (name === "chart") return Inspector.into(".chart")();
});
main.redefine("height", 200)
</script>
Often it’s useful to make the figure fill an enclosing div instead of hardcoding a width and height: see this example of that approach. Also for reference, the docs have more information about both the redefine and new Library techniques.
Related
I have 2 different pages which is going to display the same data and both are sharing the same components. But both pages has different resolution one is the size with the alert box and one is similarly A4 size. how to set dynamic height and width for them. I tried using ngstyle not sure how to implement it correctly
in normal html
<tbody class="classname" style="height: 60px; width: fit-content;">
i added this and it works but both pages taking the same resolution.
so with ngstyle i tried this again same thing both pages has been set to same 60
[ngStyle]="{'height.px': 'Height' ? '60' : '200' }"
or it there any solution using ngclass?
So your problem breaks-down in two steps. One is to calculate the page height which is not an angular field and rather browser-specific issue. Although browsers do expose clientHeight or scrollHeight properties but there is a difference on how different browsers understand the actual height of the page.
So the best practice (as its also used by famous jQuery library) is to get the different document-level height properties and get the maximum value out of those.
You'll have to inject the DOCUMENT constant to access the DOM document into your component. Please find the below example angular component code.
import { Component, OnInit, Inject } from '#angular/core';
import { DOCUMENT } from '#angular/common';
#Component({
selector: 'my-app',
templateUrl: './app.component.html',
styleUrls: [ './app.component.css' ]
})
export class AppComponent {
name = 'Angular';
public height = 0;
constructor(#Inject(DOCUMENT) private document: any){
}
ngOnInit() {
this.height = Math.max( this.document.body.scrollHeight, this.document.body.offsetHeight,
this.document.documentElement.clientHeight, this.document.documentElement.scrollHeight, this.document.documentElement.offsetHeight );
}
}
Now simply on the html side you could test the height property of component and apply the style as desired. Somethink like this..
<div [ngStyle]="{'height': height>=200 ? '200px' : '60px' }"></div>
Thanks.
I want to realize a simple page (route) transition in Sapper. Something that is easily achievable with Nuxt for example. Does anyone have an idea how to realize that with Sapper?
I already wrapped my page content into a div with a transition:fade directive. This works. Yet, the two pages transition at the same time, meaning while one page transitions out the other one already transitions in. It would be great if someone pointed me in the right direction. Thanks!
Let me just start of by saying I don't know if this is the most effective way to do it. This is the way I solved it and it works great for me.
I first made my own custom variation of the 'fade' transition and put it in 'components/pageFade.js'
import { sineOut } from "svelte/easing";
let duration = 250;
let delay = duration;
let delayZero = 0;
export const fadeIn = _ => ({
duration,
delay,
easing: sineOut,
css: t => `opacity: ${t}`
});
export const fadeOut = _ => ({
duration,
delay: delayZero,
easing: sineOut,
css: t => `opacity: ${t}`
});
The delayZero variable is there because for some reason it won't take '0' directly and will break.
The duration variable is the length of the fade in milliseconds
Then for all files I wanted to have this transition on I did the following:
<script>
import { fadeIn, fadeOut } from "../components/pageFade";
// All your other JS goes here
</script>
<style>
/* Styles go here */
</style>
<main in:fadeIn out:fadeOut>
<!-- All the normal HTML goes here -->
</main>
I would then use that as a template on almost every single one of the pages, which seems like a lot but it's not too bad.
Hope it helps and let me know if you have any other questions!
Max
If you want to include transition in _layout.svelte and don't need to include them in every route here is an alternative.
Here is a simple fly in/out from top transition.
<!-- src/component/PageTransitions.svelte -->
<script>
import { fly } from 'svelte/transition';
export let refresh = '';
</script>
{#key refresh}
<div
in:fly="{{ y: -50, duration: 250, delay: 300 }}"
out:fly="{{ y: -50, duration: 250 }}"
>
<slot/>
</div>
{/key}
And here is the Sapper layout component
<!-- src/routes/_layout.svelte for Sapper -->
<script>
import { page } from '$app/stores'; // svelte#next
import Nav from '../components/Nav';
import PageTransitions from '../components/PageTransitions';
export let segment;
</script>
<Nav {segment}/>
<PageTransitions refresh={segment}>
<slot/>
</PageTransitions>
And here is the SvelteKit (svelte#next) layout component
<!-- src/routes/$layout.svelte for Svelte#next -->
<script>
import { page } from '$app/stores'; // svelte#next
import Nav from '../components/Nav';
import PageTransitions from '../components/PageTransitions';
</script>
<Nav segment={$page.path}/>
<PageTransitions refresh={$page.path}>
<slot/>
</PageTransitions>
And for completeness here is a simple Nav component
<!-- src/component/Nav.svelte -->
<script>
export let segment;
</script>
<style>
a {
text-decoration: none;
}
.current {
text-decoration: underline;
}
</style>
<div>
<a href="/" class='{segment === undefined ? "current" : ""}'>Home</a>
<a href="/about" class='{segment === "about" ? "current" : ""}'>About</a>
</div>
NOTES:
We make the component reactive by creating a refresh prop and using key directive which means that when the key changes, svelte removes the component and adds a new one, therefore triggering the transition.
In the layout component we pass the segment (route) as refresh prop and therefore the refresh key changes as the route changes.
Here is a demo of the sample code above and the github repo
FYI #max-larsson, from your code, fadeIn is defined as a function which needs no arguments and returns an object having a duration property equal to the value of the duration variable at this scope. same with delay. Note easing is defined as the name, with the value of sineOut.
This may be your issue if you just tried to put a literal 0 where delay was. I see you tried making delayZero, but used it likely in a different way than you intended. You probably meant to write this:
export const fadeOut = _ => ({
duration,
delay: 0,
easing: sineOut,
css: t => `opacity: ${t}`
});
When I tried this, it works just fine for me. Thanks for sharing your example.
I guess Svelte Kit has changed since #GiorgosK answer, because I cannot make it work with the code in his answer.
But fortunately, his github repo has been update with the solution, thanks !
The page.path properties much be used in module context
This is my version without a specific component for page transition :
<!-- src/route/__layout.svelte -->
<script context="module">
export const load = async ({ page }) => ({
props: {
key: page.path,
},
});
</script>
<script>
import { fly } from "svelte/transition";
export let key;
</script>
<nav>
foo
bar
</nav>
{#key key}
<div
in:fly={{ x: 50, duration: 2500 }}
out:fly={{ y: -50, duration: 2500 }}
>
<slot />
</div>
{/key}
Maybe #GiorgosK can share some insight about that change.
In React-Native, you can use Stylesheet to create css-like stylesheets. The main reason of using styleshee.create in favor of plain js-objects is increased performance. However, you often might want to style components dynamically, often based on their props. I basically found three approaches of doing this:
Note for the following examples: Consider const styles ... to be declared outside of the Component, as it's a common pattern and you might want to share styles between different Components. Consider everything below the tree dots as part of the render function.
Using an array of styles:
const styles = StyleSheet.create({viewStyle: {backgroundColor:'red'}})
...
return <View style={[styles.viewStyle, {color: this.props.color}]} />
Using Stylesheet.flatten:
const styles = StyleSheet.create({viewStyle: {backgroundColor:'red'}})
...
const flattenedStyle = StyleSheet.flatten(styles.viewStyle, {{color: this.props.color}})
return <View style={flattenedStyle} />
Using a function to create the stylesheet:
const styles = (color) => StyleSheet.create({
viewStyle: {
backgroundColor:'red',
color: color
}
})
...
const style = styles(this.props.color).viewStyle
return <View style={style} />
I am wondering which approach is the best regarding to performance, or if there even is another, more performant way? I think Option 2 and 3 are no way to go at all, because dynamically creating new stylesheets on prop-changes undermines the whole purpose of stylesheets. I am happy for any thought or hints on this subject!
Here you can do dynamic styling in react native for each styling.
Like this
<Text style={styles.simpleText('red')}>Required field</Text>
// In styling
const styles = StyleSheet.create({
simpleText: (colorProp = 'black') => ({ // default black set
fontSize: 14,
color: colorProp,
})
})
and you can also pass any data type for conditional styling
One of the approach
// homeSreen
<View style={styles.filterButton(isSelected)}>
<Text> Strawberry </Text>
</View>
// styles.js
import { StyleSheet } from 'react-native';
import { Colors } from '../../theme';
export default StyleSheet.create({
container: {
backgroundColor: Colors.lighter,
},
filterButton: isSelected => ({
padding: 15,
backgroundColor: isSelected? Colors.background.primary: Colors.background.secondary
}),
});
You could memoize stylesheet creation using React hooks, but first you need to do some performance checking in order to determine if stylesheet creation is in fact a CPU and/or memory hog worth optimizing.
Here's an example:
const styles = (color) => StyleSheet.create({
viewStyle: {
backgroundColor:'red',
color: color
}
})
/*
even though makeStyle is defined in EVERY render,
React will only run it ONCE for any given props.color distinct value.
The resulting value `styles` survives re-renders
*/
const makeStyle = () => styles(props.color)
const styles = useMemo(makeStyle, [props.color]);
And here's the official documentation.
Did you consider CSS in JS libraries like Styled components?
You can pass props and get dynamic style regard that:
https://styled-components.com/docs/basics#passed-props
Possibly a bit overkill for simple dynamic styling but Reanimated is very performant and will run the style transition at 60fps https://github.com/software-mansion/react-native-reanimated
It archives this by declaring all the styles needed for an animation/transition ahead of time and runs them on the native thread so there is minimal communication across the JS->Native code bridge.
There is a better explanation on their about page here https://docs.swmansion.com/react-native-reanimated/docs/about
I am attempting to integrate a D3.js visualization into a Meteor app. After the page has loaded, a D3 function injects DOM elements into a <div> in my template, based on available data.
Whenever there is a reactive update anywhere on the page, however, Meteor dumps the contents of the template that were injected by my D3.js function. I can re-insert the elements, but this leads to an undesirable flicker and decrease in performance.
Any idea on how to suppress this dropping of externally injected elements? I gather that since these elements were not part of the template originally, they are discarded as part of Meteor's 'cleanup' process.
With the introduction of the Spark templating engine in version 0.4.0, they've introduced the {{#constant}} block helpers to address this issue.
http://meteor.com/blog/2012/08/31/introducing-spark-a-new-live-page-update-engine
Your html template should look something like this....
<template name="samplePageTemplate">
<div id="samplePage" class="page">
{{#constant}}
<div id="sampleGraph"></div>
{{/constant}}
</div>
</template>
And the javascript should look something like this...
Template.samplePageTemplate.destroyed = function () {
this.handle && this.handle.stop();
};
Template.samplePageTemplate.rendered = function () {
self.node = self.find("svg");
if (!self.handle) {
self.handle = Meteor.autorun(function(){
$('#sampleGraph').html('');
renderChart();
});
};
};
function renderChart(){
// lots of d3 chart specific stuff
var vis = d3.select("#sampleGraph").append("svg:svg")
.attr("width", window.innerWidth)
.attr("height", window.innerHeight)
.append("svg:g")
.attr("transform", "translate(" + m[3] + "," + m[0] + ")");
// more d3 chart specific stuff
});
};
I've sometimes had to use self.node instead of self.handle, but otherwise it should be fairly straight forward.
Have you tried giving unique ids to the D3 injected elements (or at least a parent element)? From the doc (http://docs.meteor.com/#livehtml):
Just make sure that each of your focusable elements either has a unique id, or has a name that is unique within the closest parent that has an id. Meteor will preserve these elements even when their enclosing template is rerendered, but will still update their children and copy over any attribute changes.
I have an image on my page and want that it change the position on mouseover or on click, so I tried several things but I cant find the right start.
So I started to change the top-position but that's not working, I would like that on mouseover the image it jumps to position x/y (maybe random x/y) if I mouseover it again it will jump to another position.
$('#image').one('click', function () {
$(this).css( 'top' : '+=200' );
});
But that's not working so please someone could give me some input that I can figure out what to do?
Note that while setting values for top, jQuery will not automatically get the value of top set previously and add 200 to it(like a normal programming language). You could have seen this as an error in executing if you try to see in a console. You can get the value of top first and then add 200px to it and then set it again.
This should work:
$('#image').one('click', function () {
var top = parseInt($(this).css("top"));
$(this).css( 'top' , top+ 200);
});
I had to parse the string to an integer returned by css, you could also substitute that extra operation by some method that returns only the value and not the value with "px" added to it, dunno if there is one already.
Try something like this:
<html>
<head>
<script type="text/javascript">
function switchPos(obj)
{
var divobj = document.getElementById('div1')
var x = divobj.offsetHeight - obj.height - 5;
var y = divobj.offsetWidth - obj.width - 5;
var randomx = Math.floor(Math.random()*x+1);
var randomy = Math.floor(Math.random()*y+1);
obj.style.top = randomx + 'px';
obj.style.left = randomy + 'px';
}
</script>
</head>
<body>
<div id="div1" style="width: 800px; background: red;">
<img src="image.jpg" style="position:relative;" onmouseover="switchPos(this);" onmouseout="switchPos(this);"/>
</div>
</body>
</html>