I am trying to add a custom tooltip to a custom chart in ngx charts.
I have made a double axis chart (much like this one. The chart works brilliantly.
From everything I can find on the ngx-charts docs about custom charts, I should be able to add this template inside my custom chart component
<ng-template #tooltipTemplate let-model="model">
This is the single point tooltip template
<pre>{{ model | json }}</pre>
</ng-template>
And that should show up as the tooltip on the custom chart, but I still see the normal tooltip.
There is a line in the docs stating:
If you discover the tooltip does not display correctly, try exporting
the new chart as a module along with ChartCommonModule and import it
into the demo's app.module.ts file.
For an example of this, look at most any chart in the src folder
I have tried this also, and no luck.
I have tried to figure out where the template refs are used when the custom chart views them but I cannot find how the tooltipTemplate is used in any of the other chart examples, after it is "viewed" like this
#ContentChild('tooltipTemplate', { static: true }) tooltipTemplate: TemplateRef<any>;
#ContentChild('seriesTooltipTemplate', { static: true }) seriesTooltipTemplate: TemplateRef<any>;
Any help would be much appreciated!!
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.
I'm trying to display an image on mouseover of another image. I'm using dijit/Tooltip for that. Problem is, the image is not displaying on the first mouseover, it always appears on the second time onwards. The images are dynamically displayed and have given a dynamic id.
<c:forEach items="${model.images}" var="image" varStatus="status">
<img src="${image.url}" height="50" onmouseover="showImage('${image.id}')" id="image${image.id}" />
<c:forEach>
<script>
function showImage(name) {
require(["dijit/Tooltip", "dojo/domReady!"], function(Tooltip){
new Tooltip({
connectId: ["image"+name],
label: "<img src='/images/"+name+"'/>"
});
});
};
</script>
With dijit/Tooltip there is no need for an onmouseover function. With your code the first mouseover only sets up the Tooltip. The second time the Tooltip is attached and so it is displayed (and showImage() runs again, which isn't optimal).
You need to create the Tooltip when the image is added to the dom. You can refer to the dijit/Tooltip guide for an example on how to set up a Tooltip declaratively. Alternatively you can convert your code to add the images and their tooltips programmatically.
How to setup a slider at the bottom-right corner in Prestashop like the picture? This slider consists of different picture. When I click an image, relative information will be shown on the right corner.
Simple you need to build a custom module. Please ref to prestashop.com document how you build custom module.
On that module hook the theme file yourmodulefile.tpl at FOOTER
Then make a wrap Div, set a class "footer_slide_wrap"
On your module CSS mark that class as bellow
.footer_slide_wrap{
display :fixed;
bottom : 0;
right :0;
width : 30px;
height:auto;
}
Now your DIV with class footer_slide_wrap will be place on that place.
now insert an UL and put your all button under li in this UL.
You can make the div .footer_slide_wrap mouse over slidable. For that you need to make a default div with class .opener and make the wrap hide.
need to create a javascript function to hide / show the DIV on mouse over.
you need to register a custom hook inside your slider module's php file, eg: "footerslider" then add the hook to your fooeter.tpl file which is located at "themes/yourthemes/footer.tpl" by placing this code {hook h="fooerslider"}
Basically, you should create small module that have hook.
Prestashop has many hooks related with your layout but if they are not suitable for you, you can create your own hook.
If you want to call your custom hook, simply put this code where you want to show.
{hook h="displayYourHookName"}
You need to install your custom hook in your install() function of your custom module.
// use this code in your install() function
$this->registerHook('displayYourHookName');
// your custom hook
public function hookDisplayYourHookName()
{
// code ...
// your html template that you want to show
return $this->display(__FILE__, 'yourTemplate.tpl');
}
if you are using default hook, prestashop will call automatically.
I hope this will help, cheers :)
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.
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");
});