I'm trying to build an interactive vega-lite dashboard where I have got this world map vega editor link
Based on the selection of a country I'm trying to display another graph below(vconcat or outside)
Is it possible to do it outside this chart without using vconcat or I can do it only by vconcat?
Has anyone tried something similar?
The easiest would be to create with vconcat.
That said, there is a way to read the underlying Vega signal of the selection. Then you can use the Vega View API to trigger callback that shows another chart based on the selected data.
You can now use observable notebooks to achieve what you want.
You create you first chart in a cell, link it to a second cell and then export the cells in your web site.
Here's how to start in observable
Here is the central part of the code
letter_selected = Generators.observe(
// selection_caught will (yield) a value promise with the selected letters
function initialize_f(change_) {
// creating an event listener (ie a function to attach to some DOM element)
const signaled = (name, value) => change_(value);
// attaching the event listener and naming it "test_selection"
barChart.addSignalListener("test_selection", signaled);
// check the doc ... https://github.com/observablehq/stdlib
change_(barChart.signal("test_selection"));
function dispose_f() {
return barChart.removeSignalListener("test_selection", signaled);
}
return dispose_f;
}
)
Related
I have two editors on the screen, one read-only. What I want to do is allow the user to select content from the read-only editor and paste it into the current position of the other by clicking a button. (the logic may manipulate the text which is one reason I don't want to use the system's clipboard.)
So far I have the function that is able to paste the text like as follows. (I am using the Angular wrapper which explains the presence of the CKEditorComponent reference.
doPaste(pasteEvent: PasteEvent, editorComponent: CKEditorComponent) {
const editor = editorComponent.editorInstance;
editor.model.change(writer => {
writer.insertText(pasteEvent.text, editor.model.document.selection.getFirstPosition() );
});
}
What I can't find from the documentation is how to extract the selected text. What I have so far is:
clickPasteSelectedPlain(editorComponent: CKEditorComponent) {
const editor = editorComponent.editorInstance;
const selection = editor.model.document.selection;
console.log('clickPasteAll selection', selection);
console.log('clickPasteAll selectedcontent', editor.model.document.getSelectedContent);
}
The selection appears to change depending on what is selected in the editor's view. The getSelectedContent function is undefined. How do I get the content?
With a bit of poking around I figured out how to do this. I'll document it here on the chance that it will help someone down the road avoid the process of discovery that I went through.
On the source document I have a ckeditor element like this:
<div *ngIf="document">
<ckeditor #ckEditor
[editor]="Editor" [config]="ckconfig" [disabled]="true"
[(ngModel)]="document.text"></ckeditor>
<button mat-flat-button (click)="clickPasteSelectedPlain(ckEditor)">Paste Selected Text Plain</button>
</div>
In the component the function called on the click event is like this:
#Output() paste = new EventEmitter<PasteEvent>();
...
clickPasteSelectedPlain(editorComponent: CKEditorComponent) {
const editor = editorComponent.editorInstance;
this.paste.emit({
content: editor.model.getSelectedContent(editor.model.document.selection),
obj: this.document,
quote: false
});
}
The PasteEvent is defined as an exported interface which I will omit here to save space. The content key will refer to a DocumentFragment.
Note that I am passing the CKEditorComponent as a parameter. You could also access it via an Angular #ViewChild declaration but note that my ckeditor is inside an *ngIf structure. I think that works well in Angular 6 but in the past I have had difficulty with #ViewChild references when the target was conditionally in the DOM. This method always works but use whatever method you want.
The event fired by the emit is processed with a method that looks like this:
doPaste(pasteEvent: PasteEvent, editorComponent: CKEditorComponent) {
const editor = editorComponent.editorInstance;
editor.model.insertContent(pasteEvent.content);
}
Because the content is a DocumentFragment the paste operation will include all formatting and text attributes contained in the selected source. But that's all there is to it.
Is it possible to update a Morris chart dynamically? I know setData() will update the data, but I want to update the settings. Namely, the user being able to select if a bar chart is stacked or not.
I have tried:
bChart.stacked = true;
bChart.setData(response);
... because setData() will redraw. I also tried bChart.redraw();. There was no change.
Any ideas welcome.
You were 90% there. You would need to set bChart.options.stacked to true; then do bChart.redraw();.
Therefore, the code for toggling stacked bars is the following (if you are using jQuery):
jQuery(function($) {
$('#stacked').on('change', function() {
bChart.options.stacked = $(this).is(':checked');
bChart.redraw();
});
});
Providing that the checkbox toggling this option has a #stacked ID.
See this working JSFiddle.
how do I find out if my custom widget has focus in Dojo?
i have dojo editor i wnat to know if the editor has already focus or not?
you can use the module dijit/focus to find out the focus
FROM DOJO DOCS
Tracking active widgets
At any point in time there is a set of (for lack of a better word)
“active” or “focused” widgets, meaning the currently focused widget
and that widget’s ancestors. “Ancestor” can mean either DOM ancestor
(ex: TextBox –> Form), or a logical parent-child relationship (ex:
TooltipDialog –> DropDownButton).
For example, if focus is on a TextBox inside a TabContainer inside a
TooltipDialog triggered by a DropDownButton, the stack would be
TextBox –> ContentPane –> TabContainer –> TooltipDialog –>
DropDownButton.
The activeStack[] parameter indicates this set of widgets, and an app
can monitor changes to activeStack[] by:
require([ "dijit/focus" ], function(focusUtil){
focusUtil.watch("activeStack", function(name, oldValue, newValue){
console.log("Focused widget + ancestors: ", newValue.join(", "));
});
});
the question in title has a different answer than the one in the descriptions.
there are two ways achieving the question in the title, by using dojo's focusUtil ("dijit/focus"). both ways give you something that you could find the widget using it and the dijit's registry ("dijit/registry").
focusUtil.curNode: gives you the DOM Node that currently has the focus. the function below, you could get the widget reference.
function getWidgetByNode(node){
var result;
while (!result && node){
result = registry.byNode(node);
if (node.parentElement)
node = node.parentElement;
else
node = null;
}
return result;
}
var focusedWidget = getWidgetByNode(focusUtil.curNode)
focusUtil.activeStack: gives you an array of the widgets (parent to child) that has the focus. so the last item in the array is the direct widget which has the focus. index values are widget ids, so you should get the widget by the following code
var focusedWidgetId = focusUtil.activeStack[focusUtil.activeStack.length-1];
var focusedWidget = registry.byId(focusedWidgetId);
now if you want to know if the currently focused widget is some specific one, it depends on what you have in hands from that specific widget:
widget itself: like the return values of above samples. now you have to compare if these are the same thing. you can not compare two widget objects using the == operator. you could compare their ids like this:
myWidget.id == focusedWidget.id
widget's id: this way you just easily get the id of the current node from focusUtil and compare it with the id you have liek this:
myWidgetId == focusedWidgetId
references:
http://dojotoolkit.org/reference-guide/1.9/dijit/focus.html
http://dojotoolkit.org/reference-guide/1.9/dijit/registry.html
require([ "dijit/focus" ], function(focusUtil){
var activeElement = focusUtil.curNode; // returns null if there is no focused element
});
check blow url here you can see some examples
http://dojotoolkit.org/reference-guide/1.8/dijit/focus.html#dijit-focus
a) For dojo 1.6: call dijit.getFocus(). This will return an object containing the currently focused dom node, among other things (selected text, etc.). To get the corresponding widget, simply do:
var activeElement = dijit.getEnclosingWidget(dijit.getFocus().node);
This is the full reference for dijit.getFocus(), from the source code:
// summary:
// Called as getFocus(), this returns an Object showing the current focus
// and selected text.
//
// Called as getFocus(widget), where widget is a (widget representing) a button
// that was just pressed, it returns where focus was before that button
// was pressed. (Pressing the button may have either shifted focus to the button,
// or removed focus altogether.) In this case the selected text is not returned,
// since it can't be accurately determined.
//
// menu: dijit._Widget or {domNode: DomNode} structure
// The button that was just pressed. If focus has disappeared or moved
// to this button, returns the previous focus. In this case the bookmark
// information is already lost, and null is returned.
//
// openedForWindow:
// iframe in which menu was opened
//
// returns:
// A handle to restore focus/selection, to be passed to `dijit.focus`.
b) For dojo 1.7 and up, use dijit/focus:
require([ "dijit/focus" ], function(focusUtil) {
var activeElement = focusUtil.curNode; // returns null if there is no focused element
});
I would like to show a loading icon while my Dojo Charts are loading and then hide it when the charts are finished rendering. I cannot find documentation that defines what event I can add a dojo.connect to when the chart has finished rendering. For example, I am doing something similar with the ArcGIS mapping API (built on Dojo) where I have a loading icon displayed when the map updates and then I hide it when the map is finished updating using this line of code:
dojo.connect(map, "onUpdateEnd", hideLoading);
I have tried "onUpdateEnd", "onStartup", "postCreate" with no luck. Anyone know if there is a "rendering complete" event I can use with Dojo Charts?
For any one else that requires to listen on a completion of any method of almost any dojo object, look at dojo/aspect.
http://dojotoolkit.org/reference-guide/1.10/dojo/aspect.html
Sample code:
aspect.after(this.chart, "render", function () {
//your code here
console.log("render completed");
});
I have created an image map with flash, I have separate button functions that display rollover and onpress functions for each region ie -
nw_btn.onRollOver = function() {
areaName_txt.text = "This Site (NWPHO)";
}
nw_btn.onPress = function() {
displayOverlay(areaName_txt.text);
}
This is repeated 15 times to cover each area button - I wondered whether there was a way to apply the same function call (displayOverlay) and apply area name text on rollover via one piece of code rather than repeating for each button?
I guess there must be a mistake with your tag, because what you describe look more like an AS2 structure.
But if you really are in AS3, here is what you can do : connect everything to a same function with addEventListener. In this function, test which button is at the source of the event, then put the code to be executed for each button.