I created the semi circle using progressbar.js in reactjs. And get the semi circle like this.
I want to make it like this image.
How to do that using reactjs ?
Below is my code
new ProgressBar.SemiCircle(`#container-${id}`, {
strokeWidth: 10,
trailColor: "#191C26",
trailWidth: 10,
easing: "easeInOut",
duration: 1400,
svgStyle: {
stroke: "#"+randomColor,
},
text: {
value: "",
alignToBottom: false,
},
// Set default step function for all animate calls
step: (state, bar) => {
bar.path.setAttribute("stroke", state.color);
},
});
bar.animate(meter);
I want to change the appeareance of the image like this, with giving a circle ending point
Related
I need to only show two shapes in my custom Tui image editor, a rectangle and a circle, nothing more nothing less.
I added the rectangle and it works perfectly but if I add another function to add a circle and draw either or first the and then select the other, it still draws the first item. (if you click on a circle and draw, then click on the rectangle and draw then it draws a circle)
I am not sure how I can get this to function properly.
here is my two functions for my circle and rectangle.
const onAddCircle = () => {
imageEditorRef.current.startDrawingMode('SHAPE');
if (imageEditorRef.current.getDrawingMode() !== 'SHAPE') {
const { height } = imageEditorRef.current.getCanvasSize();
imageEditorRef.current.startDrawingMode('SHAPE');
imageEditorRef.current.setDrawingShape('circle', {
fill: 'transparent',
stroke: COLOR_STATUS_ORANGE,
strokeWidth: height / 100,
isRegular: true,
});
}
};
const onAddRectangle = () => {
if (imageEditorRef.current.getDrawingMode() !== 'SHAPE') {
const { height } = imageEditorRef.current.getCanvasSize();
imageEditorRef.current.startDrawingMode('SHAPE');
imageEditorRef.current.clearObjects();
imageEditorRef.current.setDrawingShape('rect', {
fill: 'transparent',
stroke: COLOR_STATUS_ORANGE,
strokeWidth: height / 100,
isRegular: true,
});
}
};
and they are triggered by buttons
<button
onClick={onAddCircle}
color="green"
/>
<button
onClick={onAddRectangle}
color="red"
/>
I've tried adding imageEditorRef.current.clearDrawingShape(); to the beginning of the functions but it says its not a function because it doesn't exist. then I tried adding imageEditorRef.current.clearObjects(); but that clears everything that it draw by that shape.
I've looked their documentation as well and there is nothing on how to actually clear shape cache before drawing or selecting another shape.
Could someone please help ?
I fixed it!
Ive combined both functions into one added a prop called shape, and it checks if the prop is set to either or and then if it is then it uses that logic else it clears the drawing board.
const drawShape = (Shape) => {
const { height } = imageEditorRef.current.getCanvasSize();
imageEditorRef.current.startDrawingMode('SHAPE');
if (Shape === 'circle') {
imageEditorRef.current.setDrawingShape('circle', {
fill: 'transparent',
stroke: COLOR_STATUS_ORANGE,
strokeWidth: height / 100,
isRegular: true,
});
} else if (Shape === 'rectangle') {
imageEditorRef.current.setDrawingShape('rect', {
fill: 'transparent',
stroke: COLOR_STATUS_ORANGE,
strokeWidth: height / 100,
isRegular: true,
});
} else {
imageEditorRef.current.stopDrawingMode();
}
};
I have started playing around with react-spring and I am loving the concept but I am struggling to work out how to build the animation that I want.
I would like to make a div move to the right, then back to start, then to the right, but not as far, back to start, to the right, but not as far again and finally back to start. Just like a spring, that is pulled and when released goes boingoingoing back to it's resting place.
I can see from the documentation how to adjust the feel of the spring and how to trigger the animation, but I have never made an animation before so knowing which properties to change and how to make it loop properly are what I am looking for help on.
Edit: I have this animation so far, and it works, but it feels very disjointed.
const shake = useSpring({
from: { "margin-left": 0 },
to: [
{ "margin-left": 30 },
{ "margin-left": 0 },
{ "margin-left": 20 },
{ "margin-left": 0 },
{ "margin-left": 10 },
{ "margin-left": 0 }
],
config: {
mass: 1,
tension: 500,
friction: 10
}
});
Currently it is clearly three movements, can I decrease the delay between the movements so that it looks like one movement?
Is margin left the best CSS property to use?
UPDATE START
I just came across a simple solution for this problem. It I way better than the one I tried to achieve with configuration. It uses interpolation with range. It is using transform now but can easily adopted to margin.
export default function App() {
const { x } = useSpring({
from: { x: 0 },
to: { x: 1 }
});
return (
<div className="App">
<animated.div
style={{
transform: x
.interpolate({
range: [0, 0.25, 0.35, 0.45, 0.55, 0.65, 0.75, 1],
output: [180, 220, 180, 220, 180, 220, 180, 200]
})
.interpolate(x => `translate3d(${x}px, 0px, 0px)`)
}}
>
Shake
</animated.div>
</div>
);
}
https://codesandbox.io/s/awesome-framework-go5oh?file=/src/App.js:103-609
UPDATE END*
You can achieve the bouncy effect. There are 3 variable controlling the spring based animation:
mass
friction
tension
You can play with the pink square here: https://www.react-spring.io/docs/hooks/api
I recommend low mass and friction and high tension. You can set these variable in every animation type. For example:
useSpring({ ..., config: {mass: 1, tension: 500, friction: 10} });
I was wondering if its possible to decide pixels between two bars? I got 2 series that represents some numbers, and they are standing side by side, 2 and 2 bars next to each other. I just want to control the space between the bars that stands next to each other. For example 10 px.
I've tried different settings from highcharts but havent found anything that seems to work.
You can set pointPadding: 0 and in load event position the columns in the way you want:
chart: {
type: 'bar',
events: {
load: function() {
var series = this.series;
series[0].points.forEach(function(p, i) {
p.graphic.attr({
translateX: 5
});
series[1].points[i].graphic.attr({
translateX: -5
});
});
}
}
},
plotOptions: {
series: {
pointPadding: 0
}
}
Live demo: http://jsfiddle.net/BlackLabel/13re4Lok/
API Reference:
https://api.highcharts.com/highcharts/chart.events.load
https://api.highcharts.com/class-reference/Highcharts.SVGElement#attr
There are 2 parameters whick can help you pointWidth and pointPadding
pointWidth Documentation
pointPadding Documentation
plotOptions: {
series: {
pointPadding: 0.3,
pointWidth: 10 // Will ignore pointPadding if used
}
},
Fiddle
I have implemented a scatterplot using react-plotly.js I would like the chart to re-size itself when the page layout changes. But currently, the layout of the chart doesn't change by itself. If I explicitly perform some function on the chart which forces the chart to redraw itself then only the chart width changes.
I applied useResizeHandler property and have set autosize to true. But that doesn't make any difference either.
<Plot
useResizeHandler
style={{ width: '100%' }}
data={chartData}
onClick={(data) => this.handlePlotClick(data)}
type={'scatter'}
layout={this.layout} />
const layout = {
autosize: true,
dragmode: true,
margin: {
l: 5,
r: 5,
t: 10,
b: 10,
pad: 0,
autoexpand: true
},
hovermode: 'closest',
hoverlabel: {
bgcolor: 'rgba(0,0,0,1)',
bordercolor: 'rgba(200,200,200,1)'
},
height: '650',
yaxis: {
visible: false
},
xaxis: {
autorange: false,
showline: true,
fixedrange: false, // true disables range selection on main graph
rangeslider: {
range: this.state.sliderRange,
visible: true,
borderwidth: 1,
bordercolor: '#000'
}
}
};
}
As you can see in the screenshot above, the div.svg-container has same width as the main-svg. But it still leaves white space on the right. I am unable to debug why it would behave that way. If I explicitly perform zoom on the chart that will redraw the plot then it will behave correctly. But I would like it to automatically resize when the page layout changes.
I was stuck on this problem too. Try window.dispatchEvent(new Event('resize')) from http://codrate.com/questions/how-can-trigger-the-window-resize-event-manually-in-javascript
I was calling resizeHandler when my chart is resized by dragging.
resizeHandler = () => {
this.child.resizeHandler();
window.dispatchEvent(new Event('resize'));
}
The charts always autoscales when the chart is resized, so I basically trigger the window resize when my chart size is changed. So for you, when you detect the page layout changes you can trigger the window resize.
I have a custom panel and now I added animation for the panel to be show on button click. Problem now is the start & stop positions of the animation. I want to set the position from where to start the animation and where to end it.
Now am doing this way
showAnimation: {
type: 'slideIn',
direction: 'up',
duration: 400,
easing: 'ease',
listeners: {
animationend: function(evt, obj) {
// my code here
}
}
}
This shows the popup from the bottom of the screen but I don't want to come all the way from bottom of the screen. Is there a way to do it?
Instead of showAnimation, you can use Ext.Animator.run.
Here is the sample:
Ext.Animator.run({
element: this.getNavigation().element, // this.getYourViewObject().element
duration: 500,
easing: 'ease-in',
preserveEndState: true,
from: {
top: document.body.clientHeight // Max Height i.e Bottom
},
to: {
top: 0 // Height where you want to stop your Slide View
}
});
If you still don't get it, feel free to comment. I'll make you a Demo.