Using a javascript library inside a jupyter/jupyterlab notebook - javascript

my real objective is to associate graphically two lists together.
I want to do it in interactively in jupyter/jupyterlab.
An example can be find in this library :
http://sebastien.drouyer.com/jquery.flowchart-demo/
My problem is that I'm not at ease with integrating Javascript into ipython notebook.
I found some tutorials : http://jacobbridges.github.io/post/jupyter-notebook-with-interactive-charts/
If I'm able to reproduce this example, I'm not try to replace by flowchart library.
First Cell
%%javascript
require.config({
paths: {
flowcharts: "https://github.com/sdrdis/jquery.flowchart/blob/master/jquery.flowchart.js",
},
shim: {
flowcharts: {
exports: "FlowCharts",
deps: ["jquery"]
},
}
});
Second
%%javascript
// Since I append the div later, sometimes there are multiple divs.
$("#example_1").remove();
// Make the cdiv to contain the chart.
element.append('<div id="example_1" style="min-width: 310px; height: 400px; margin: 0 auto"></div>');
var data = {
operators: {
operator: {
top: 20,
left: 20,
properties: {
title: 'Operator',
inputs: {
input_1: {
label: 'Input 1',
},
input_2: {
label: 'Input 2',
}
},
outputs: {
output_1: {
label: 'Output 1',
},
output_2: {
label: 'Output 2',
},
output_3: {
label: 'Output 3',
}
}
}
}
}
};
// Require highcarts and make the chart.
require(['flowcharts'], function(FlowCharts) {
$('#example_1').flowchart({
data: data
});
});
I also don't know where to import css file.
Can someone help me with this ?
Regards,
Thomas

Related

PdfMake list of items to Repeat (checkbox next to text)

I am using the pdfMake and I Ihave a text next to a image I would like to repeat that part in my docdefintion.
I would like to repeate this part of my pdfmake
{
columns: [
{
image: "checked",
height: 10,
width: 10
},
{
stack: [
{
columns: [
{
text: 'First column first line',
width: '50%',
margin: [5, 0, 0, 0],
}
]
}
],
width: '*'
}]
}
Here is my docDefinition
let docDefinition = {
pageSize: 'LEGAL',
//pageOrientation: 'landscape', //may be usefull in some case
pageMargins: [40, 80, 40, 60],
content: [
{
...
this.getFailureLocationObject(),
...
}
};
pdfMake.createPdf(docDefinition).download('Intervention' + '19060023');
}
I have made this function that should return a object list (ol) I have o the object that I want to push into ol when the function retuns o there is no problem my image is displayed next to the text However when I return ol insted there is a wierd result where the image and text are no longer aligned and no mater how may objects I add to ol the result is the same there is only one image displayed next to the text. How can I fix this issues thank you for your help.
getFailureLocationObject() {
const ol = [];
var o = {
columns: [
{
image: "checked",
height: 10,
width: 10
},
{
stack: [
{
columns: [
{
text: 'First column first line',
width: '50%',
margin: [5, 0, 0, 0],
}
]
}
],
width: '*'
}]
};
ol.push(o);
ol.push(o);
return o;
}
Here you can try what I have made so far. And see the issus I have hard coded 'First column first line','First column Second line','First column Third line'. However I would like the method this.getFailureLocationObject(), too loop and make the list.
Try it out here!
https://stackblitz.com/edit/angular-pdfmake-example-3f14km?file=src%2Fapp%2Fapp.component.ts
After a bit of testing with the code you provided, I figured out that the problem is the reference of the objects.
So, when pdfmake gets the values, somehow, if both have same reference (are the same object) it mixes them.
I came to this conclusion because when you change the code you have with:
getFailureLocationObject() {
const ol = [];
var o = {
columns: [
{
image: 'checked',
height: 10,
width: 10,
},
{
stack: [
{
columns: [
{
text: 'First column first line',
width: '50%',
margin: [5, 0, 0, 0],
},
],
},
],
width: '*',
},
],
};
ol.push(o);
o = JSON.parse(JSON.stringify(o));
ol.push(o);
return ol;
}
The error no longer occurs. Note that JSON.parse(JSON.stringify(o)) creates a new JSON object with the same content as o, meaning the two objects in the array are different (as the objects are not the same)
This might be an issue to be reported to the developers of the plugin to be fixed. For now, the solution is to add different objects to the array using clone. There is a good explaination on how and why to use cloning here.
Feel free to ask for clarification if needed!

How to add custom header in ui-grid pdf export using PDFMake?

I am new working with the Angular UI-GRID and I need to create external buttons for the exporting features like PDF export I have read the documentation and found that I can use PDFMake library to create complex header through out the documentation I didn't found any example to resolve my issue.
Please look into the image and help me out.
How can I combine both the feature?
var docDefinition = {
content: [
{
layout: 'lightHorizontalLines', // optional
table: {
// headers are automatically repeated if the table spans over multiple pages
// you can declare how many rows should be treated as headers
headerRows: 1,
widths: ['*', 'auto', 100, '*'],
body: [
['First', 'Second', 'Third', 'The last one'],
['Value 1', 'Value 2', 'Value 3', 'Value 4'],
[{ text: 'Bold value', bold: true }, 'Val 2', 'Val 3', 'Val 4']
]
}
}
]
};
// #region export data
pdfMake.createPdf(docDefinition).open();
// #endregion
// with this I can export pdf with table
var grid = $scope.gridApi.grid;
var rowTypes = uiGridExporterConstants.ALL;
var colTypes = uiGridExporterConstants.ALL;
uiGridExporterService.pdfExport(grid, rowTypes, colTypes);
//With this I can export my grid but without header.
It can be done by using header function and adding table in it:
header: function() {
return {
table: {
// Add your table data here
},
};
},

selectize.js and vue.js 2 ajax loaded optons

I'm using vuejs#2.3.3, selectize#0.12.4, vue2-selectize.
I have a pretty big form with a few select inputs.
All options are loaded by ajax into a one property, which is initialized with a demo data before being replaced by ajax data:
addTrackData : {
styles : [
{ id: 1, title: 'style 1' },
{ id: 2, title: 'style 3' },
{ id: 3, title: 'style 2' },
],
authors: [
{inn: '111', name: 'demo 1'},
{inn: '222', name: 'demo 2'},
{inn: '333', name: 'demo 3'}
]
....
},
And I've got 2 problems:
1) If I use settings in this way, options doesn't loads at all:
<selectize v-model="form.data.authors[i]['id']" :settings="selectize.authors"></selectize>
selectize: {
authors: {
valueField: 'inn',
labelField: 'name',
searchField: ['name', 'inn'],
options: this.addTrackData.authors // that doesn't works, but hard coded array works
}
}
Because of error Error in data(): "TypeError: Cannot read property 'authors' of undefined".
Both this.addTrackData.authors and addTrackData.authors makes this error.
But this way works:
<selectize v-model="form.data.authors[i]['id']"
:settings=" {
valueField: 'inn',
labelField: 'name',
searchField: ['name', 'inn'],
options: addTrackData.authors, // It works, but looks too ugly!
}" >
</selectize>
2) Options are not reactive - when ajax data comes, all selects elements still shows a demo data. And I have no idea how to update them all...
UPDATE
Second problem could be fixed with If Conditional and empty initial array:
<selectize v-if="addTrackData.authors.length" v-model="form.data.authors[i]['id']"
:settings=" {
valueField: 'inn',
labelField: 'name',
searchField: ['name', 'inn'],
options: addTrackData.authors, // It works, but looks too ugly!
}" >
</selectize>
addTrackData : {
styles : [],
authors: []
....
}
But the first problem still makes me cry
I just read the source code of vue2-selectize and noticed that it's watch code for options key is incorrect.
his code is this way:
watch: {
value() {
this.setValue()
},
options (value, old) {
if (this.$el.selectize && !equal(value, old)) {
this.$el.selectize.clearOptions()
this.$el.selectize.addOption(this.current)
this.$el.selectize.refreshOptions(false)
this.setValue()
}
}
},
while it should be this way to work:
watch: {
value() {
this.setValue()
},
options (value, old) {
if (this.$el.selectize && !equal(value, old)) {
this.$el.selectize.clear();
this.$el.selectize.clearOptions();
var vm = this;
this.$el.selectize.load(function(callback) {
callback(vm.current);
});
this.$el.selectize.refreshOptions(false);
this.setValue();
}
}
},
I just prepared a hacky way to make it working but I dont encourage you using it in production.
Here is the fiddle's link: https://jsfiddle.net/ahmadm/h8p97hm7/
I'll try to send a pull request to his creator as soon as possible but until that time, your solution is already the only possible solution.

Can I dynamically change the selection options of my inspector in jointJS - Rappid

In my inspector.js I have declared this select box with name tr_rules which has 2 select options :
'tr_rules': { type: 'select', options: ['option1', 'option2'], group: 'attributes', label: 'Rule', index: 3 },
Is there any way I can define my inspector properly so that the array options will be initially empty and:
I will fill the options dynamically with the content of a var?
For example with the var optionsVariable which a specific time will be:
var optionsVariable = [myDynamicOption1, myDynamicOption2, myDynamicOption3];
For each link we will get random values for the marker-source.fill attribute:
This is the part of the KitchenSink demo application (http://resources.jointjs.com/demos/kitchensink)
createInspector: function(cell) {
var props = App.config.inspector[cell.get('type')];
if (cell.isLink()) {
var a = {
inputs: {
attrs: {
'.marker-source': {
transform: {
type: 'select',
options: [Math.round(Math.random() * 100), Math.round(Math.random() * 100), Math.round(Math.random() * 100)],
}
}
}
}
};
_.merge(props, a);
}
return joint.ui.Inspector.create('.inspector-container', _.extend({
cell: cell
}, props));
},
the App.config.inspector has definitions for the Inspector in separate file
App.config.inspector = {
'app.Link': {
inputs: {
attrs: {
'.marker-source': {
transform: {
ty pe: 'select',
group: 'marker-source',
label: 'Source arrowhead',
index: 1
},
fill: {
type: 'color-palette',
options: options.colorPalette,
group: 'marker-source',
label: 'Color',
when: { ne: { 'attrs/.marker-source/transform': 'scale(0.001)'}},
index: 2
}
},
'.marker-target': {
transform: {
type: 'select',
options: options.arrowheadSize,
group: 'marker-target',
label: 'Target arrowhead',
// ...
In inspector set your options to the variable you want.
if you want to display the option using a dependency you can also do this with the when propriety for example
var dynamicOptions = [
{ value: 'Alegreya Sans', content: '<span style="font-family: Alegreya Sans">Alegreya Sans</span>' },
{ value: 'Averia Libre', content: '<span style="font-family: Averia Libre">Averia Libre</span>' },
{ value: 'Roboto Condensed', content: '<span style="font-family: Roboto Condensed">Roboto Condensed</span>' }
]
text: {
type: 'content-editable',
label: 'Text',
group: 'text',
index: 1
},
'font-family': {
type: 'select-box',
options: dynamicOptions,
label: 'Font family',
group: 'text',
when: { ne: { 'attrs/text/text': '' }},
index: 3
},
will only display the input font-family select box when the Text box has a non empty value. The options that are on the dynamicOptions must be valid for the input type.
After struggling for ages I finally came up with a way to make it work and it's quite simple quick indeed.
This is how I can create an selectbox with values which change dynamically according to the content of array ruleInspectorArray(which is filled in a different part of my code):
When a new link is created and its inspector is created as well I set inside function createInspector the options of selectbox to be the content of ruleInspectorArray:
cell.set('myArrayOfOptions', ruleInspectorArray);
In order to make it work we also have to set the path of ouf selectbox options being this ruleInspectorArray by doing so:
'tr_rules': { type: 'select', options: 'myArrayOfOptions', group: 'attributes', label: 'Rule', index: 3 },
Yes, Yes, Yes.... :)

Polymer slide-up-animation: how to make it start from the bottom of the page?

Using Polymer 1.1 I am trying to use slide-up-animation. The issue I have is that when it slides up, it starts from the middle of the page rather from the bottom and sliding up.
Although it's not in the docs, this code example https://github.com/PolymerElements/neon-animation/blob/master/demo/dropdown/animated-dropdown.html shows I can use transformOrigin. However, it's not working for me. I don't know if it's because I am using neon animation pages or not. Any ideas on how to make it slide up from the bottom of the page?
<neon-animated-pages selected="[[selected]]"
>
<portfolio-page></portfolio-page>
<script>
Polymer({
is: "portfolio-page",
behaviors: [Polymer.NeonAnimatableBehavior,
Polymer.NeonAnimationRunnerBehavior],
properties: {
animationConfig: {
type: Object,
value: function() {
return {
'entry': {
name: 'slide-up-animation',
node: this,
transformOrigin: 'bottom'
},
'exit': {
name: 'slide-up-animation',
node: this,
transformOrigin: 'bottom'
}
}
}
},
You can't use slide-up, you have to create a different animation:
<script>
Polymer({
is: 'slide-from-bottom-animation',
behaviors: [
Polymer.NeonAnimationBehavior
],
configure: function(config) {
var node = config.node;
if (config.transformOrigin) {
this.setPrefixedProperty(node, 'transformOrigin', config.transformOrigin);
} else {
this.setPrefixedProperty(node, 'transformOrigin', '50% 0');
}
this._effect = new KeyframeEffect(node, [
{'transform': 'translateY(100%)'},
{'transform': 'none'}
], this.timingFromConfig(config));
return this._effect;
}
});
</script>
Or if you don't wan't to create your own animation you can use transform-animation.
return {
'entry': {
name: 'transform-animation',
transformFrom: 'translateY(100%)',
transformTo: 'none',
node: this,
timing: {duration: 2000},
},

Categories