How do we hide the title in legendbox and remove the padding on top.
const lb = chart.addLegendBox()
lb.setPosition({
x: 50,
y: 50
})
const entry = lb.add(series, undefined, 'Legend Box')
If I replace 'Legend Box' above I get undefined group as title.
At this time there is no way to delete the title of LegendBox.
Some things you can try:
Pass empty string ' ' instead of undefined
Try negative paddings, margins
Create your own LegendBox (make a Layout UIElement, add CheckBox elements to it, attach CheckBoxes to series using series.attach)
In v3.0.0 release (late this month), there will be proper API for LegendBox title.
EDIT
General syntax of creating Layout, CheckBox and attaching it to a series:
const customLegendBox = chart.addUIElement(UILayoutBuilders.Column)
const entry1 = customLegendBox.addElement(UIElementBuilders.CheckBox)
mySeries.attach(entry1)
Related
I can create legends like below
Is there any way , I can add custom text dynamically in the place of Bollinger band ? For example I want to show live price every second in legend.
Also how do I programatically enable and disable a legend.
Thank you
You can store the legendbox entry returned by the legendBox.add() method. This entry has a method entry.setText() that can be used to set the text of the legend box entry to be what ever you want.
const legendBox = chart.addLegendBox()
const entry = legendBox.add(series, undefined, 'Legend Box')
entry.setText('Custom text here')
By storing the entry reference you can call the setText method when ever you want to update the text.
See the below example in which the legend box entry text is updated every time new data is added.
// Extract required parts from LightningChartJS.
const {
lightningChart,
DataPatterns,
Themes
} = lcjs
// Import data-generator from 'xydata'-library.
const {
createProgressiveTraceGenerator
} = xydata
// Create a XY Chart.
const chart = lightningChart().ChartXY({
// theme: Themes.dark
})
// Create progressive line series.
const series = chart.addLineSeries({
dataPattern: DataPatterns.horizontalProgressive
})
const lb = chart.addLegendBox()
lb.setPosition({
x: 50,
y: 50
})
const entry = lb.add(series, undefined, 'Legend Box')
// Generate traced points stream using 'xydata'-library.
createProgressiveTraceGenerator()
.setNumberOfPoints(1000)
.generate()
.toStream()
.forEach(data => {
series.add(data)
entry.setText(`Custom text: ${series.getLastPoint().y.toFixed(1)}`)
})
<script src="https://unpkg.com/#arction/xydata#1.4.0/dist/xydata.iife.js"></script>
<script src="https://unpkg.com/#arction/lcjs#2.2.1/dist/lcjs.iife.js"></script>
You can disable the legend box by calling legendbox.dispose(). This will remove the legendbox completely. To then enable the legendbox again you can call legendbox.restore() which will restore the legendbox as it was.
This is the code I've found to retrieve the correct draggable element and edit it's dimensions, during the onBeforeCapture() responder. Changing dimensions during this responder is in accordance with the documentation. This seems to work in only changing the dimensions, the other problems is that I am using the renderClone method, and so the draggable is just dragging with a huge offset that is not close to the correct mouse position. Also dnd is treating the drop placeholder as if the draggable is the original large size. Is there any way to correct for this mouse position, and placeholder dimensions? I've looked into adding mouseDown/mouseUp handlers on the inner element of the draggable but that doesn't seem to work either.
const cardSize = 140;
const draggableAttr = "data-rbd-drag-handle-draggable-id";
const getAttr = (key: string, value: string) => `[${key}=${value}]`;
const draggableQuery = getAttr(draggableAttr, update.draggableId);
const draggable = document.querySelector(draggableQuery);
draggable.setAttribute("style", `width: ${cardSize}px; height: ${cardSize}px;`);
I noticed onBeforeCapture was triggering after onDragEnd (therefore resizing the draggable improperly), so I created some state to remember the last beforeCaptureResult and return if it is equivalent to the current result.
I´m adding multiple dropdowns via component factory by clicking a button. Every time i add a new dropdown, it appears on top of the previous one, which is a problem, because i need it below. Is there a way to set the position of the new component in relation to other components of the same type?
#ViewChild('additionalDropdown', { read: ViewContainerRef })
private additionalDropdown: any;
...
let componentFactory = this.resolver.resolveComponentFactory(MultiselectComponent);
let componentRef = this.additionalDropdown.createComponent(componentFactory, 0, this.additionalDropdown.injector)
Template:
<ng-container #additionalDropdown></ng-container>
The inserted component's position is the second argument to createComponent().
You're doing createComponent(componentFactory, 0) so you're always inserting the component as the FIRST view in the container (zero = first position).
If you passed no value for the second argument, the component would be inserted as the LAST view, but you can't do that since you want to pass 3 arguments.
You could try to pass null as the second argument, but I'm not sure it will work:
this.additionalDropdown.createComponent(componentFactory, null, this.additionalDropdown.injector);
Or you could have a manual counter (this would work for sure):
const counter = 0;
this.additionalDropdown.createComponent(componentFactory, counter++, this.additionalDropdown.injector);
Has anyone managed to create a button in TinyMCE 4 that will increment the font size of the selected text by, say, 1px?
The problem I'm having is getting ahold of the selected text, whether it's in a span already or not.
I'm willing to modify the TinyMCE source.
Thanks for any ideas.
You don't need to modify the source code, you can create a plugin.
Here is the documentation of how to create a plugin for TinyMCE:
http://www.tinymce.com/wiki.php/Tutorials:Creating_a_plugin
based on that you can create your own button (see working example)
here is part of the code:
var currentFontSize = new Number($(tinyMCE.activeEditor.selection.getNode()).css('font-size').replace('px','')); //remove the px part
currentFontSize = currentFontSize + 1; //increase font by one
tinymce.activeEditor.formatter.register('mycustomformat', {
inline : 'span',
styles : {'font-size' : currentFontSize + 'px'} //this is the font size incremented by one
});
tinymce.activeEditor.formatter.apply('mycustomformat'); //apply the format to the selected text
When the user marks a text, he can define a backgroundcolor with the colorpicker (textcolor.plugin).
Once saved he can change the background-color but not get rid of it.
background-color:white is no solution as the bodycolor can be RGB or even a picture.
How is the colorpicker to configure to remove the style-tag or at least insert a background-color:none?
Found a solution changing the plugin (textcolor). If there is a better way please be free to post it.
I added additional colors to the colorpicker. The Color #FFFFFe (near White) i marked as NO COLOR and changed the plugin as shown.
function onPanelClick(e) {
var buttonCtrl = this.parent(), value;
if ((value = e.target.getAttribute('data-mce-color'))) {
buttonCtrl.hidePanel();
value = '#' + value;
buttonCtrl.color(value);
if (value == '#FFFFFe') { //Changing the value to -1 causes deletion :-)
value = -1;
}
editor.execCommand(buttonCtrl.settings.selectcmd, false, value);
}
}
Researched a bit more since the given answer did not work in my version 4.5.0 of tinymce.
The textcolor plugin uses 'editor.formatter.remove(...)' to remove text color or background color upon selecting 'x' in the last option of the color palette for 'no color'.
While that function is used elsewhere successfully in tinymce (e.g. when removing italics from text), in the context of the textcolor plugin it does not remove color formatting.
Solution:
Replace the following in the textcolor's plugin.js:
editor.formatter.remove(format, {value: null}, null, true);
with:
editor.dom.removeAllAttribs(editor.selection.getNode());
...or in the minified version plugin.min.js:
a.formatter.remove(b,{value:null},null,!0),
with:
a.dom.removeAllAttribs(a.selection.getNode()),
...and things start working as intended.