Make annotation on graph created by echart - reactjs

I'm using reactJs to develop the frontend, is it possible to make annotations on graphs created by echart? For example, I can left-click anywhere on a line chart to make a quick note of that point or I can a range on a graph and make a note of that range.

If I understand you correctly, you want to build an interface that allows users to left-click somewhere on the chart and add their own annotations (rather simply coding in annotations as a developer, and having them be static)?
In broad strokes, here's how I would build this:
Register click event handlers on the chart, so you can detect where the user clicked.
Build custom UI in react that can overlay on the chart, provide text input and "add"/"cancel" buttons, using the information from the click event to figure out where to draw it and to what element the annotation should be attached to.
When the user clicks "add", make a call to the showTip API (see docs) to a tooltip in the right location (from step 1) with the text the user provided.
(It looks like there is a github issue where folks are asking for this feature to be built-in - and some discussion of how to build it yourself, and a simple example that illustrates how to do step 3 above which you might find useful)

Related

ReactJS Chart Library with user interaction of type "Drawing"

i was assigned a task that looks very much like the Charts on this Web Page -> Example: https://interaktiv.br.de/merkel-nach-zahlen-2021/
The user is able to predict the behaviour of the line Chart by "drawing" with the mouse on top of the chart. In the case of the example this was done with an SVG approach, I am wondering if an open source ReactJS Library exists for this same purpose.
Thank you.

Trigger scroll to roll down to bottom automatically in Mendix Native Mobile App

I’m working on a Native Mobile App, which is being built inside the Mendix Platform. And I'm trying to figure out how to trigger a scroll-to-bottom behavior automatically.
My situation is:
I have a form with a lot of fields, and some with conditional visibility. Which means that they will appear if the user selects some specific options, in radio-buttons.
But some of them will be out of the visible area when the user clicks the related radio-button, and the field becomes visible (as it is located at the bottom of the form).
I trying to find a way to force the scroll to the bottom when these new fields become visible (from the user click in radio-button above).
Any suggestion on how to achieve this?
In the Mendix market place there is a native widget that seems to be able to do what you need to achieve: https://marketplace.mendix.com/link/component/116738
The last update was in May this year for Mendix 9.1 and there is a version for Mendix 8.17 as well.
Hope this provides a solution.

Correct way to add custom buttons with OpenTok

I'm building a video application for the web in React using OpenTok. OpenTok has built in buttons for muting the mic for the publisher and muting the audio for subscribers. In my case I also need buttons to mute the video for both the publisher and the subscriber.
I haven't seen anything about a mute video button in the documentation so I built the functionality myself using subscribeToVideo. The problem is that I want to add a button with this functionality next to the mute audio button, but I haven't found anything about custom buttons in the documentation.
So my question is: What's the best way to add custom buttons to OpenToks bar?
Of course I could append a button to the html and style it in place myself, but it feels ugly and I don't know what the consequences are. I guess this is my back up solution if there isn't any other way.
I will probably need to add other buttons as well in the future so I really hope OpenTok supports custom buttons and that it's just me that haven't found how to do it.
TokBox Developer Evangelist here.
We don't have any documentation on custom buttons, but you do have three options for the video and mute buttons on the video element.
If you want a custom button, you will have to append that to the HTML and toggle subscribeToVideo and subscribeToAudio properties like you said.
Here is a react sample that adds a mute video button https://opentok.github.io/opentok-web-samples/React-Basic-Video-Chat/
I would recommend that you just set the buttonDisplayMode to off and then recreate the mute audio button just using subscriber.subscribeToAudio() and publisher.publishAudio(). This way if eg. the opentok UI changes slightly it doesn't matter for you, plus you can make it all look however you want.

Can a salesforce custom button have some javascript in it?

What is the current way to do a custom button with some js in it?
We are building a custom button that needs to be able to read from the current contact (email address, phone, mailing address), and run a few lines of js. (We also need to create a call record.)
But how/where is this done in salesforce these days?
This page doesn't point me anywhere:
https://help.salesforce.com/apex/HTViewHelpDoc?id=customize_enterprise.htm
And this explanation of the new method in Lightning isn't clear where the js lives:
https://developer.salesforce.com/forums/?id=906F0000000BWr4IAG
Where is the needed example/doc?
If you are using buttons on custom visualforce page there are no any problems with defining custom JS function for it. For example, if you use <apex:commandButton/> you can use such attributes as onclick, onkeydown, onkeyup and other. See more information in documentation.
If you are using buttons on object layouts, you can create custom button and chose executing of JS as a behavior, see attached screenshot.
If you mean some other cases, please, describe it.

No transition on first form

I am using a CN1 project created by the CN1 plugin in IntelliJ. I have built a form by hand (not using the GUI builder). I would like the first form shown to be my form. Unfortunately, it seems to bootstrap code that loads the theme expects me to use a form created in the GUI builder. In fact, when my application loads, it briefly shows the default Hello World screen, and then transitions to my form by scrolling the form from right to left. How do I make my hand-coded form the first thing on the screen appear without any transition?
It would seem that I could just override StateMachine.getFirstFormName(), but my form is not known to the underlying code.
There are many ways to do this... Try creating a new project with Get Started template selected.
Open MyApplication.java or any other name you changed MyApplication to. Replace the hi form code and use this as your code foundation.

Resources