Display message (or empty graph) when empty dataset is added - dc.js

I'm adding an onChange() handler to the crossfilter associated with my dc.js graph. One of the changes I'm looking for is the 'dataAdded' event. When I add a data set with >= 1 record, the graph renders properly and I see that onChange() callback gets triggered with the 'dataAdded' event. If I add a data set with 0 records then the graph does not render properly and the onChange() callback is never triggered. I would have thought that since I'm supplying an empty array to the crossfilter then it would trigger the 'dataAdded' event but evidently it does not. This makes some measure of sense, but still.
The main issue that I'm experiencing is that when the data set is empty then nothing is rendered. The graph doesn't render as it normally would (e.g., axis names, empty pie/donut/row/bar, etc) to give any indication that something happened.
What I was hoping to do was add a test as part of the 'dataAdded' event in order to see if the data set was empty. If it was then somehow let the user know that a request to the server was made but nothing came back. Is there a way to do this a different way? Is there a way where I can force the graph to render as empty? Make it so that the graph displays a custom message?
I've been digging around but haven't really been able to find out much information about this particular case.
thnx,
Christoph

Related

React-Native update UI when value on element in array changes, without using ForceUpdate

Imagine this: I have a FlatList presenting a list of message threads. Each cell has a label showing number of new messages in that thread. Each cell also shows a truncated string of the latest message in that thread. Other things are presented too. The list of threads is kept in redux and is set as the data prop for my FlatList. The class instances for the threads do not know of the FlatList and cannot force reload on it when something changes, eg a new message comes in (intentional design). The issue now is that the FlatList does not update when such an event occurs. It only updates when a new thread array is set (new instance).
How can I get the FlatList to update when any of the values in the threads changes?
A timed recurring reload is not preferred. I was thinking to have the threads update (by increasing) a value in redux called MessageThreadUpdateCount which would be a number. That would be done each time any UI connected value changes. The FlatList then uses that redux value as its ExtraData prop. Hence updating when that changes. Using a boolean instead of a number would be raise the question: what should set it to false, and when? Any other suggestions?
For the list to update you need to set the 'extraData' prop of the FlatList component,
This is a PureComponent which means that it will not re-render if props remain shallow- equal. Make sure that everything your renderItem function depends on is passed as a prop (e.g. extraData) that is not === after updates, otherwise your UI may not update on changes. This includes the data prop and parent component state.
exemple
<FlatList
data={this.props.data}
extraData={this.state}
keyExtractor={this._keyExtractor}
renderItem={this._renderItem}
/>
With your state being change when you receive a new message. Note that you can replace 'this.state' by any variable updated when you get a new Message could be a counter for example.
(source: https://facebook.github.io/react-native/docs/flatlist.html)
Hope this will help you.

After a form is filled once, I blank out the form before filling it the next time (new conversation), but the borders remain red

I have used webshims for html5 form validation in a single page app with multiple pagelets(divs). The forms are not submitted but local javascript is invoked after each conversation and collected data is posted .
Next I iterate over all the fields and reset the values.
Then I take the new user back to the first pagelet having first form for the new conversation. This time even after filling the correct values the border does not turn green.
Note:
However when we select the field and click outside the field without filling it. and then after filling the correct data border turns green.
However when we tried to achieve it programmatically iterating over each field resetting it and using javascript focus method, that did not do the trick.
I am sure I must be missing some thing. would be able to point out what.
Regards
Barman
I'm not sure, what you want to achieve. I would need to see some code. If you change the value programmatically you can update the validation ui with the event refreshvalidityui on the form field. If you want to reset the ui, you can either trigger a reset event on the form or resetvalidityui on the form field
$('input').val('foo').trigger('refreshvalidityui');
or
$('input').val('foo').trigger('resetvalidityui');
or
$('form').trigger('reset');
Please let me know, if this helps.

jquery ui binding to sortable recieve event when dealing with nested sortables

I have a need to sort columns and separately I need to be able to sort fields accross columns and would like to hook into the col sort finished so that I can save the new column position and then also hook into the field sort finished event so that I can save the new field position
There is a jsFiddle showing an example here (doesn't seem to work in IE, but thats a different story!). What this shows is that when a column is dragged no alert is shown and when a field is dragged between columns the field AND column alerts are shown.
I'm using 'receive' to avoid multiple calls, one for the source and one for the target.
Any help would be really appreciated. Thanks
You should use different events to hook into, sortupdate does what you want. Because you are nesting sortables it is also important to prevent event bubbling, this is what causes your double alert. Here's an updated fiddle
By the way, when dragging a field to another column the sortupdate handler is called twice because two columns changed.

How do you switch backing bean objects in JSF?

Suppose I several tags, text input, radios, etc referencing one instance object. I would like to use a dropdown on that page to switch the references mentioned before to another instance of the object.
This part is pretty easy with change listener. However, the problem I have is the values currently displayed on the screen are getting set into the new, second instance.
I would like the current values to be stored in the current instance, and then the when the page refreshes I would like the new values to come from the new instance and be displayed on the screen.
Is there was way to do this? Does my question make any sense?
Grae
A value change listener is exactly the wrong tool for this, because it gets called before the values are set.
What you want is an action listener, which will get call after the values from the page are validated and set.

AJAX and prediction of actions

I'd like to ask your opinion on this. This is a theoretical question.
I'm in a situation where I have an interface shown to a user that uses AJAX to talk to the server. The server-side language does not matter here. I have a form with fields and each of them are deletable. If the user selects a few "delete" -checkboxes and presses Update, then I have these two options to do:
Option 1:
When deleting fields, use JavaScript to remove the HTML immediately and run AJAX on background to delete those fields. This achieves a look of a fast interface -> better user experience. However, if the AJAX call fails on the server side (the fields couldn't be deleted), then the previously deleted HTML fields would give a false assumption for the user (of them being deleted).
Option 2:
When deleting fields, run AJAX, depending on its success, either remove the HTML or do not. This gives accurate feedback for the user, but the form would freeze until the AJAX call finishes = slow(er).
What are your thoughts? Which approach seems better for me to take or should I make it an option?
Option 3: Mark the controls as being deleted (e.g. overlay a translucent gray box with a delete icon on it). Send the request. When it returns, either remove the controls, or change the box to show an error icon for a few seconds (then remove the box).
Allow the rest of the interface to be interacted with while this goes on.
Nice question.
A third option would be to :
disable immediately the controls
delete them when the Ajax returns
This gives the user feedback that something was effectively requested (responsiveness),
while showing also the moment where it is effectively completed.
Also, the user somehow feels the "distant call", which does not induce him in error, because it is was really happens. Anyway, there is nothing meaningful we can do to hide this feeling, because the delay will always be there.

Resources