HoverExample
How to add hover text like that of the above image to a custom extension in jupyterlab. I'm making an extension in jupyter lab using react, but I want to add a description of the extension in a hoverbox. However I cant figure it out.
To add a hover box in the extension, you have to pass value to [widgetInstance].title.caption
For example:
const extension: JupyterFrontEndPlugin<void> = {
id: 'some-id',
autoStart: true || false,
activate: async(app: JupyterFrontEnd, palette: ICommandPalette) => {
const { commands } = app;
let widget1: widget= new widget(); // create the widget
widget1.id = 'widget1-id';
widget1.title.label = 'widget Label';
widget1.title.caption="widget hovering text description"; // this will show the text when you hover over an extension
app.shell.add(widget1, 'right', { rank: 1 });
...
...
... rest of your code ...
}
Related
I searched through storybook's documentation for react and I can't seem to find how to make the object control for my argument appear collapsed by default instead of having to collapse it manually.
this is what I did
data: {
control: { type: 'object' },
table: { defaultValue: { summary: 'Object' } },
collapsed: true, // I want to find out if there is something like this
},
and this is what I was expecting
The option to configure this does not exist, unfortunately. Inspired by this comment regarding having the RAW-view open by default, I made a somewhat hacky solution, query all the spans at the top level for collapsing their content and trigger a click using JavaScript.
In the file manager.js add the following to make this work:
const observer = new MutationObserver(() => {
// Query the spans for collapsing objects.
const objectCollapseSpans = [...document.querySelectorAll('.rejt-tree > .rejt-object-node > span')];
// Query the spans for collapsing array of objects.
const arrayCollapseSpans = [...document.querySelectorAll('.rejt-tree > .rejt-array-node > span')];
const collapseSpans = [...arrayCollapseSpans, ...objectCollapseSpans];
for (const span of collapseSpans) {
if (span.className !== 'closed') {
span.click();
}
span.className = 'closed'
}
});
observer.observe(document.body, {
childList: true,
subtree: true,
})
Is it possible to customize a tooltip of a Bullet Chart to display names instead of indices?
Yes you can customize tooltip of antv/g2plot to display your desired data. As I did in one of my antv/g2plot chart using customContent function in tooltip object :
tooltip: {
customContent: (count, data) => {
let c = null
let fileHtml = ''
data.forEach((d) => {
c = d.data.datum.count
d.data.datum.files.forEach((f) => {
fileHtml += `<li>${f.original_artifact_name}</li>`
})
})
return `<div><br/>
<ul><h4>Appeared in ${c} files</h4>${fileHtml}</ul>
</div>`;
}
}
visual of my tooltip:
enter image description here
I am trying to add a plotline on click in multiple series line chart in reactjs. I am using stockchart of high chart, Please let me know how to add plotline with tooltip.
Sample Screenshot:
I prepared a demo which shows how to add the plotLine dynamically with the custom tooltip.
Demo: https://jsfiddle.net/BlackLabel/Lyr82a5x/
btn.addEventListener('click', function() {
chart.xAxis[0].addPlotLine({
value: 5.5,
color: 'red',
width: 2,
id: 'plot-line-1',
events: {
mouseover() {
let lineBBox = this.svgElem.getBBox();
tooltip.style.display = 'block';
tooltip.style.left = lineBBox.x + 'px';
},
mouseout() {
tooltip.style.display = 'none'
}
}
})
})
If something is unclear - feel free to ask.
API: https://api.highcharts.com/highcharts/xAxis.plotLines.events.mouseout
API: https://api.highcharts.com/class-reference/Highcharts.Axis#addPlotLine
I have a custom tooltip in react-chartjs-2;
I found a solution of making custom tooltip, but my tooltip is always visible, in that solution tooltip hides when tooltip.opacity is 0, but in my case tooltip opacity is always 1, can smbd help me pls?
tooltips: {
enabled: false,
mode: 'x',
intersect: false,
custom: (tooltipModel) => {
if (tooltipModel.opacity === 0) {
// never called because opacity is always 1
this.hide();
return;
}
// const position = this.chartRef.current.chartInstance.canvas.getBoundingClientRect();
// set position of tooltip
// const left = position.left + tooltipModel.caretX;
// const top = position.top + tooltipModel.caretY;
// set values for display of data in the tooltip
const date = tooltipModel.dataPoints[0].xLabel;
const value = tooltipModel.dataPoints[0].yLabel;
// this.setPositionAndData(top, left, date, value);
},
Just to clarify for any other person who needs help on this.
When you create your handle for a custom toolbar, you need to pay attention to not overwrite the this(scope) object. Try with arrow function and remove the bind, the fn will get automatically the new scope and the opacity will be update when you move out from a chart bar/line etc.
The same issue will happen with the legend if you try to overwrite the onClick function using inline arrow function or functions. Some examples bellow.
_tooltip = (tooltipModel) => {
...
}
_legendOnClick = (ev) => {
ev.preventDefault()
}
render() {
const defaultOpt = {
legend: {
onClick: this._legendOnClick
},
tooltips: {
enabled: false,
custom: this._tooltip,
mode: 'index'
}
}
}
If you want to improve perfomance, you should remove the defaultOpt from the render method.
That's
Instead of this:
intersect: false,
custom: (tooltipModel) => {
if (tooltipModel.opacity === 0) {
use this workaround:
intersect: false,
custom: function(tooltipModel){
let hit=this._active[0].inRange(this._eventPosition.x, this._eventPosition.y);
if (tooltipModel.opacity === 0 || !hit) {
make sure not to use arrow function to keep 'this'.
In my case the root of the problem was that I defined the 'options' object in the render function of my component along with the 'custom' tooltip handler and called a setState from the inside of it - which caused an other render call immediately. This broke down the tooltip handling of chart.js. Moving the handler outside of the render function solved it without needing the above workaround.
I am currently working on a task which want to display bar charts/tables on the website.
The application is using: sproutcore (1.6) as front-end, Java Restful as backend.
However, I can't find some useful library for charts in sproutcore. Are there any ideas for that?
I search on the website, I feel the google chart tools is quite good, also jFreechart as backend is also a good choice.
I am not sure how to integrate that to sproutcore.
Thanks.
I'm using Flot to display charts on my Sproutcore app.
To use it, you need to create a flot directory inside the frameworks folder which will include the jquery.flot.js file (I've also include jquery.flot.pie.js file) and a core.js file with this content:
sc_require('jquery.flot.js');
sc_require('jquery.flot.pie.js');
Flot = SC.Object.create({
plot: $.plot
}) ;
Then, you need to add this new library to your buildfile :
config :yourapp,
:required => ['flot']
To display your charts in your app, you can use this custom view that I made to work with Flot:
GX.FlotView = SC.View.extend({
classNames: ['flot'],
//ex: [{ data: [[1326366000000, 1500], [1326452400000, 600]], label: 'title of the serie' }, ...]
data: [],
/*
ex: {
legend: { show: true },
series: line, points,
xaxis: { mode: "time", timeformat: "%d/%m/%y", }
grid: { backgroundColor: { colors: ["#FFF", "#fefefe"]}},
}
*/
options: [],
render: function(context, firstTime) {
var frame = this.get('frame'),
data = this.get('data'),
options = this.get('options');
// To avoid an error with flot, we check if width and height > 0
if(frame.width > 0 && frame.height > 0 && data && data.length) {
var layer = this.get('layer'),
plot = Flot.plot(layer, data, options);
}
},
viewDidResize: function() {
this.invokeLast(function() {
if (this.get('isVisibleInWindow')) this.set('layerNeedsUpdate', YES);
});
}.observes('data', 'data.[]'),
});
Then, you just have to bind the data and the option properties with your data.