Related
I want to create a gauge diagram with amcharts 5 with persian text on it. All the code sample I found is working correctly with english text on it. But when I want to use persian or arabic text (rtl languages), it doesn't show texts correct. How can I solve this problem?
Here is my code:
<script>
var root = am5.Root.new("chartdiv");
root.setThemes([
am5themes_Animated.new(root)
]);
var chart = root.container.children.push(am5radar.RadarChart.new(root, {
panX: false,
panY: false,
startAngle: 160,
endAngle: 380
}));
var axisRenderer = am5radar.AxisRendererCircular.new(root, {
innerRadius: -40
});
axisRenderer.grid.template.setAll({
stroke: root.interfaceColors.get("background"),
visible: true,
strokeOpacity: 0.8
});
var xAxis = chart.xAxes.push(am5xy.ValueAxis.new(root, {
maxDeviation: 0,
min: -40,
max: 100,
strictMinMax: true,
renderer: axisRenderer
}));
var axisDataItem = xAxis.makeDataItem({});
var clockHand = am5radar.ClockHand.new(root, {
pinRadius: am5.percent(20),
radius: am5.percent(100),
bottomWidth: 40
})
var bullet = axisDataItem.set("bullet", am5xy.AxisBullet.new(root, {
sprite: clockHand
}));
xAxis.createAxisRange(axisDataItem);
var label = chart.radarContainer.children.push(am5.Label.new(root, {
fill: am5.color(0xffffff),
centerX: am5.percent(50),
textAlign: "center",
centerY: am5.percent(50),
fontSize: "3em"
}));
axisDataItem.set("value", 50);
bullet.get("sprite").on("rotation", function () {
var value = axisDataItem.get("value");
var text = Math.round(axisDataItem.get("value")).toString();
var fill = am5.color(0x000000);
xAxis.axisRanges.each(function (axisRange) {
if (value >= axisRange.get("value") && value <= axisRange.get("endValue")) {
fill = axisRange.get("axisFill").get("fill");
}
})
label.set("text", Math.round(value).toString());
clockHand.pin.animate({ key: "fill", to: fill, duration: 500, easing: am5.ease.out(am5.ease.cubic) })
clockHand.hand.animate({ key: "fill", to: fill, duration: 500, easing: am5.ease.out(am5.ease.cubic) })
});
var i = 0;
var a = setInterval(function() {
if (i === 9) {
axisDataItem.animate({
key: "value",
to: Math.round(28),
duration: 100,
easing: am5.ease.out(am5.ease.cubic)
});
}
else if (i === 25) {
clearInterval(a);
}
else {
axisDataItem.animate({
key: "value",
to: Math.round(Math.random() * 140 - 40),
duration: 2000,
easing: am5.ease.out(am5.ease.cubic)
});
i++;
}
}
, 100);
var bandsData = [{
title: "لاغری مفرط",
direction: "rtl",
position: "right",
orientation: "rtl",
color: "#ee1f25",
lowScore: -40,
highScore: -20
}, {
title: 'لاغر',
color: "#f04922",
lowScore: -20,
highScore: 0
}, {
title: "نرمال",
color: "#fdae19",
lowScore: 0,
highScore: 20
}, {
title: "اضافه وزن",
color: "#f3eb0c",
lowScore: 20,
highScore: 40
}, {
title: "چاق",
color: "#b0d136",
lowScore: 40,
highScore: 60
}, {
title: "چاقی زیاد",
color: "#54b947",
lowScore: 60,
highScore: 80
}, {
title: "چاقی مفرط",
color: "#0f9747",
lowScore: 80,
highScore: 100
}];
am5.array.each(bandsData, function (data) {
var axisRange = xAxis.createAxisRange(xAxis.makeDataItem({}));
axisRange.setAll({
value: data.lowScore,
endValue: data.highScore
});
axisRange.get("axisFill").setAll({
visible: true,
fill: am5.color(data.color),
fillOpacity: 0.8
});
axisRange.get("label").setAll({
text: data.title,
inside: true,
radius: 15,
fontSize: "0.9em",
fill: root.interfaceColors.get("background")
});
});
chart.rtl = true;
chart.appear(1000, 100);
chart.rtl = true;
</script>
Final result is like this image:
amcharts5 result
I also searched about it in documentation of amcharts 5 but I couldn't find the answer.
I'm trying to create this animation for my bottomsheet ,so initially when my homescreen loads, the bottomsheet pops up from below with a spring animation and then when the user swipes up , the bottomsheet also swipes up witha spring animation to it, and again if the user swipes down the bottomsheet comes back to its original position with a spring animation to it.
The only problem i'm facing is that, the first swipe up that i make after the initial popping up spring animation happens, the animation for the swiping up, doesnt happen smoothly, and it snaps to the upper position in just an instant without showing any spring like animation
Here is my code for my BottomSheet.
import * as React from "react";
import { SCREEN_HEIGHT } from "../../assets/constants";
import { StyleSheet, Animated, TextInput, View } from "react-native";
import { PanGestureHandler } from "react-native-gesture-handler";
import { Easing } from "react-native-reanimated";
import BottomSheetStack from "./BottomSheetStack";
export default class BottomSheet extends React.Component {
constructor(props) {
super(props);
this.BottomSheet = new Animated.Value(0);
this.state = {
isOpen: false,
isLoading: false,
isPanChanged: false,
};
}
componentDidMount() {
setTimeout(() => this.animateTranslate(), 1000);
}
animateTranslate() {
Animated.spring(this.BottomSheet, {
toValue: 1,
duration: 500,
useNativeDriver: true,
easing: Easing.ease,
}).start();
}
translateDrawer() {
return this.BottomSheet.interpolate({
inputRange: [0, 1],
outputRange: [SCREEN_HEIGHT, SCREEN_HEIGHT / 1.48],
});
}
animateBottomSheetUp() {
this.BottomSheet.setValue(0);
Animated.spring(this.BottomSheet, {
toValue: 1,
duration: 100,
useNativeDriver: true,
easing: Easing.ease,
}).start();
}
animateBottomSheetDown() {
this.BottomSheet.setValue(0);
Animated.spring(this.BottomSheet, {
toValue: 1,
duration: 100,
useNativeDriver: true,
easing: Easing.ease,
}).start();
}
handlePanGesture(props) {
this.setState({ isLoading: true });
if (!this.state.isPanChanged) {
this.setState({ isPanChanged: true });
}
if (!this.state.isOpen && props.nativeEvent.translationY > 0) {
this.animateBottomSheetUp();
this.setState({ isOpen: true });
} else if (this.state.isOpen && props.nativeEvent.translationY < 0) {
this.animateBottomSheetDown();
this.setState({ isOpen: false });
}
}
openBottomSheetHandler() {
return this.BottomSheet.interpolate({
inputRange: [0, 1],
outputRange: [SCREEN_HEIGHT / 1.48, SCREEN_HEIGHT / 2.1],
});
}
closeBottomSheetHandler() {
return this.BottomSheet.interpolate({
inputRange: [0, 1],
outputRange: [SCREEN_HEIGHT / 2.1, SCREEN_HEIGHT / 1.48],
});
}
render() {
return (
<PanGestureHandler
onGestureEvent={(props) => this.handlePanGesture(props)}
>
<Animated.View
style={{
...StyleSheet.absoluteFill,
height: SCREEN_HEIGHT - SCREEN_HEIGHT / 2.2,
backgroundColor: "#ffffff",
elevation: 10,
transform: [
{
translateY: !this.state.isLoading
? this.translateDrawer()
: !this.state.isOpen && this.state.isPanChanged
? this.openBottomSheetHandler()
: this.closeBottomSheetHandler(),
},
],
alignItems: "center",
borderRadius: 15,
}}
>
<View style={styles.bottomSheetLine} />
<TextInput
value={this.state.name}
style={styles.searchBox}
placeholder="Search"
placeholderTextColor="#5DB075"
/>
<BottomSheetStack {...this.props.navigation} />
</Animated.View>
</PanGestureHandler>
);
}
}
const styles = StyleSheet.create({
searchBox: {
height: 45,
width: `85%`,
backgroundColor: "#ffffff",
borderRadius: 10,
color: "#5DB075",
paddingLeft: 20,
fontSize: 14,
letterSpacing: 0.5,
top: 20,
fontFamily: "regular",
borderColor: "#5DB075",
borderWidth: 1,
},
bottomSheetLine: {
height: 5,
backgroundColor: "#5DB075",
width: 70,
borderRadius: 5,
top: 5,
},
});
Please suggest me some idea on how i can achieve this, or any other method that can be used to achieve this.
So, apparently, somewhere i found that spring animation, toValue:1 doesnt actually go upto 1, and it slightly crosses 1. So that's why my animation was behaving like that i guess.
The solution to this was, i simply changed my toValue for animateBottomSheetUp and animateBottomSheetDown , went to higher value, i.e toValue:2 for animateBottomSheetUp .
My changes in my code are very minor , it looks like this ,
also i removed all the this.BottomSheet.setValue(/*somevalue*/) from my code.
for animateBottomSheetUp:
animateBottomSheetUp() {
Animated.spring(this.BottomSheet, {
toValue: 2, // made this change from 1 to 2
duration: 100,
useNativeDriver: true,
easing: Easing.ease,
}).start();
}
and the openBottomSheetHandler & closeBottomSheetHandler looks like this now,
openBottomSheetHandler() {
return this.BottomSheet.interpolate({
inputRange: [1, 2],
outputRange: [SCREEN_HEIGHT / 1.48, SCREEN_HEIGHT / 2.1],
});
}
closeBottomSheetHandler() {
return this.BottomSheet.interpolate({
inputRange: [1, 2],
outputRange: [SCREEN_HEIGHT / 1.48, SCREEN_HEIGHT / 2.1],
});
}
I'm posting this answer if anybody faces the same problem,
Though i have worked around this problem, but i still feel there must be a better way to do this,if anybody has any better way , please answer. :-)
I want to have an animation where the nodes get colored then the edges get colored. I looked at the other questions regarding animation in cytoscape.js and tried stacking promise statements to no avail.
I'm also unclear as to what it is the queue does, setting the boolean for both the edge and node to true, false or staggered seems to have no difference on the animation as they both animate at the same time.
This is the code I have so far:
var a = cy.edges().animate({
position: { x: 100, y: 100 },
style: { lineColor: '#a79' }}, {duration: 1000},
{queue: 1}
);
var b = cy.nodes().animate({
position: { x: 100, y: 100 },
style: { backgroundColor: 'blue' }},
{duration: 1000},
{queue: 1}
);
a.animation().play().promise().then(b.animation().play());
edit
So I wrapped the animate command in a function to get the desired result
cy.on('tap', 'node', function(evt){
cy.nodes().animate(
{
position: { x: 100, y: 100 },
style: { lineColor: 'pink' }
},
{
duration: 1000,
queue: true
}
);
Although hardcoding animations is not ideal, I would still like to know how to do it with the promise commands.
It looks ok, the only thing I see is:
var a = cy.edges().animate(
{
position: { x: 100, y: 100 },
style: { lineColor: '#a79' }
},
{
duration: 1000,
queue: true
}
);
var b = cy.nodes().animate(
{
position: { x: 100, y: 100 },
style: { backgroundColor: 'blue' }
},
{
duration: 1000, // This goes together in one brace
queue: true // Use a boolean maybe
}
);
a.animation().play().promise().then(function () {
b.animation().play());
}
The documentation does exactly that, maybe this solves the problem :)
I'm trying to make something where you can swipe the overlay off the screen.
This is what I have so far using PanResponder, but I don't feel like it's very clean. It's my first time using it so I'm wondering if there's a better way of doing this.
I need to animate the green part and more so I'd like to build this by hand if possible without using a package.
My component looks like this (heavily copied off this guy:
https://github.com/brentvatne/react-native-animated-demo-tinder/blob/master/index.ios.js)
import React, { Component } from 'react';
import {
AppRegistry,
StyleSheet,
View,
PanResponder,
Animated,
Dimensions,
} from 'react-native';
const styles = StyleSheet.create({
container: {
flex: 1,
alignSelf: 'stretch',
backgroundColor: '#000000',
},
overlay: {
flex: 1,
alignSelf: 'stretch',
backgroundColor: '#0000ff',
},
video: {
position: 'absolute',
backgroundColor: '#00ff00',
top: 0,
left: 0,
bottom: 0,
right: 0,
}
});
function clamp(value, min, max) {
return min < max
? (value < min ? min : value > max ? max : value)
: (value < max ? max : value > min ? min : value)
}
export default class EdmundApp extends Component {
constructor(props) {
super(props);
this.state = {
pan: new Animated.ValueXY(),
};
}
componentWillMount() {
this._panResponder = PanResponder.create({
onMoveShouldSetResponderCapture: () => true,
onMoveShouldSetPanResponderCapture: () => true,
onPanResponderGrant: (e, gestureState) => {
this.state.pan.setOffset({x: this.state.pan.x._value, y: 0});
this.state.pan.setValue({x: 0, y: 0});
},
onPanResponderMove: Animated.event([
null, {dx: this.state.pan.x, dy: 0},
]),
onPanResponderRelease: (e, {vx, vy}) => {
this.state.pan.flattenOffset();
if (vx >= 0) {
velocity = clamp(vx, 3, 5);
} else if (vx < 0) {
velocity = clamp(vx * -1, 3, 5) * -1;
}
if (Math.abs(this.state.pan.x._value) > 150) {
Animated.decay(this.state.pan, {
velocity: {x: velocity, y: vy},
deceleration: 0.98
}).start()
} else {
Animated.spring(this.state.pan, {
toValue: {x: 0, y: 0},
friction: 4
}).start()
}
}
});
}
render() {
let { pan } = this.state;
let translateX = pan.x;
let swipeStyles = {transform: [{translateX}]};
return (
<View style={styles.container}>
<View style={styles.video}></View>
<Animated.View style={[styles.overlay, swipeStyles]} {...this._panResponder.panHandlers}>
</Animated.View>
</View>
);
}
}
AppRegistry.registerComponent('EdmundApp', () => EdmundApp);
Please go through this https://github.com/oblador/react-native-animatable
There is an option for bounce and exit which will help you for sure.
How can I create scroll when I drag jsplumb connections to the top of the browser?
I searched through the net but couldn't find a solution to create scrolls.
Click here to check the Demo
JSPlumb or JQuery
<script>
var targetDropOptions = {
};
connectorHoverStyle = {
lineWidth: 7,
strokeStyle: "#2e2aF8",
cursor: 'pointer'
}
//Setting up a Target endPoint
var targetColor = "#316b31";
var targetEndpoint = {
anchor: "LeftMiddle",
endpoint: ["Dot", { radius: 8}],
paintStyle: { fillStyle: targetColor },
//isSource: true,
scope: "green dot",
connectorStyle: { strokeStyle: targetColor, lineWidth: 8 },
connector: ["Flowchart", { curviness: 63}],
maxConnections: 1,
isTarget: true,
dropOptions: targetDropOptions,
connectorHoverStyle: connectorHoverStyle
};
//Setting up a Source endPoint
var sourceColor = "#ff9696";
var sourceEndpoint = {
anchor: "RightMiddle",
endpoint: ["Dot", { radius: 8}],
paintStyle: { fillStyle: sourceColor },
isSource: true,
scope: "green dot",
connectorStyle: { strokeStyle: sourceColor, lineWidth: 4 },
connector: ["Flowchart", { curviness: 63}],
maxConnections: 1,
// isTarget: true,
dropOptions: targetDropOptions,
connectorHoverStyle: connectorHoverStyle
};
jsPlumb.bind("ready", function () {
jsPlumb.animate($("#A"), { "left": 50, "top": 100 }, { duration: "slow" });
jsPlumb.animate($("#B"), { "left": 300, "top": 100 }, { duration: "slow" });
var window = jsPlumb.getSelector('.window');
jsPlumb.addEndpoint(window, targetEndpoint);
jsPlumb.addEndpoint(window, sourceEndpoint);
jsPlumb.draggable(window);
});
</script>
HTML
<div id="A" class="a window"
style="width: 100px; height: 100px; border: solid 1px;">
<strong>A</strong>
</div>
<div id="B" class="b window"
style="width: 100px; height: 100px; border: solid 1px;">
<strong>B</strong>
</div>
In my case I have one div with the properties position:relative and overflow:scroll and all shapes inside of this one make scroll up and down. I hope can help you.