We Keep Coding

Multiple webdatarocks pivot on same page Exception DisplayGrids

Multiple Webdatarocks pivots gives exception
"is not a constructor at displaygrids"
script is included properly but no resolution.. There is also & issue on how to differentiate export of data for both grids separately when on the same page.
Following is the code :
'''
function displaygrids(parsed_data,parsed_data_2) {
var pivot = new webdatarocks({
container: "#d1-component",
//toolbar: true,
// beforetoolbarcreated: customizeToolbar,
//height: 295,
report: {
dataSource: {
data: parsed_data,
}
}
});
var p1= new webdatarocks({
container: "#d2-component",
//toolbar: true,
// beforetoolbarcreated: customizeToolbar,
//height: 295,
report: {
dataSource: {
data: parsed_data_2,
}
}
});
}
'''

here is a reference to the WebDataRocks thread with a similar question - https://www.webdatarocks.com/question/how-to-put-pivottable-in-bootstrap-grid/ .
They placed 2 WebDataRocks in a row with a help of Bootstrap.

Inserting Vanilla JS into VueJS framework

With the concept of VueJS is a kind of framework of JS, then it should have no problem inserting the vanilla JS into it. The following is the attempt to insert the pure JS code into vue-cli project(webpack structure).
[Before Start] I tried the example code as the following link(official document)
URL: https://codepen.io/Tobyliao/pen/ZEWNvwE?editable=true%3Dhttps%3A%2F%2Fdocs.bokeh.org%2F
it works.
[Question] As I tried to imlement into Vue project. It fails. picture1 is the directory structure.
I tried to place the src url include into ./public/html's tag as following:
<script type="text/javascript" src="https://cdn.bokeh.org/bokeh/release/bokeh-2.2.1.min.js"></script>
<script type="text/javascript" src="https://cdn.bokeh.org/bokeh/release/bokeh-widgets-2.2.1.min.js"></script>
<script type="text/javascript" src="https://cdn.bokeh.org/bokeh/release/bokeh-tables-2.2.1.min.js"></script>
<script type="text/javascript" src="https://cdn.bokeh.org/bokeh/release/bokeh-api-2.2.1.min.js"></script>
<script type="text/javascript" src="https://cdn.bokeh.org/bokeh/release/bokeh-api-2.2.1.min.js"></script>
Create a componet in './src/components/BokehPlot.vue'
inside the code, I insert
<template>
<h1>Measurement Plotting</h1>
</template>
<script src='./main.js'>
export default {
}
</script>
Then finally place all the Bokeh code into './src/component/main.js'. It is the pure JS code I want to import into the structure.
[Result]
I can see the plot in the background, but it kept on showing the error message like picture2.

You have many options here, I went ahead and simply made a mixin to utilize the component lifecycle that Vue provides. source
Here are the relevant parts:
BokehPlot.vue
<template>
<h1>治具量測</h1>
</template>
<script>
import Chart from "#/mixins/Chart";
export default {
mixins: [Chart],
};
</script>
Chart.js
export default {
data() {
return {
plot: null,
xdr: null,
ydr: null
};
},
beforeMount() {
// create some ranges for the plot
this.xdr = new Bokeh.Range1d({ start: -1, end: 100 });
this.ydr = new Bokeh.Range1d({ start: -0.5, end: 20.5 });
// make the plot
this.plot = new Bokeh.Plot({
title: "BokehJS Plot",
x_range: this.xdr,
y_range: this.ydr,
plot_width: 400,
plot_height: 400,
background_fill_color: "#F2F2F7"
});
},
mounted() {
this.loadData();
},
methods: {
loadData() {
// create some data and a ColumnDataSource
let x = Bokeh.LinAlg.linspace(-0.5, 20.5, 10);
let y = x.map(function (v) {
return v * 0.5 + 3.0;
});
let source = new Bokeh.ColumnDataSource({ data: { x: x, y: y } });
// add axes to the plot
let xaxis = new Bokeh.LinearAxis({ axis_line_color: null });
let yaxis = new Bokeh.LinearAxis({ axis_line_color: null });
this.plot.add_layout(xaxis, "below");
this.plot.add_layout(yaxis, "left");
// add grids to the plot
let xgrid = new Bokeh.Grid({ ticker: xaxis.ticker, dimension: 0 });
let ygrid = new Bokeh.Grid({ ticker: yaxis.ticker, dimension: 1 });
this.plot.add_layout(xgrid);
this.plot.add_layout(ygrid);
// add a Line glyph
let line = new Bokeh.Line({
x: { field: "x" },
y: { field: "y" },
line_color: "#666699",
line_width: 2
});
this.plot.add_glyph(line, source);
Bokeh.Plotting.show(this.plot);
}
}
};
Many decisions to still make, but hopefully that will get you pointed down the right path.
See working example:
https://codesandbox.io/s/bokehjs-forked-4w20k?fontsize=14&hidenavigation=1&theme=dark

How to pass VueJS data to another script?

I'm converting an established site over to VueJS but hit a stumbling block on the best way to achieve this.
It's using D3-Funnel (https://github.com/jakezatecky/d3-funnel) to draw a funnel chart but how do I pass VueJS data variables to the charts constructor?
<script>
const data = [
{ label: 'Step 1', value: this.step1 },
{ label: 'Step 2', value: this.step2 },
.......
];
const options = {
block: {
dynamicHeight: true,
minHeight: 15,
},
};
const chart = new D3Funnel('#funnel');
chart.draw(data, options);
</script>
So I need to pass vue data variables into the values. My first thought is to move this into it's own function in the VueJS methods object and use the variables there using this.
Is there a better way of achieving this?
---------- Edit -------------
As per comments people wanted to see how I achieved this currently in vue. As already mentioned above I just created a function in the vue methods object and then call it.
methods : {
drawChart(){
const data = [
{ label: 'Step 1', value: 99999 },
{ label: 'Step 2', value: 9999 },
.......
];
const options = {
block: {
dynamicHeight: true,
minHeight: 15,
},
};
const chart = new D3Funnel('#funnel');
chart.draw(data, options);
}
},
mounted(){
this.drawChart();
}
Data is coming from an API and put into the vue data object.
data:{
step1: 0,
step2: 0,
....
},
methods:{
getData(){
axois.post......
response{
this.step1 = response.data.step1
this.step2 = response.data.step2
....
}
}
}

As I understand it you are trying to pass information down to a component and use it. If you are using single file components and webpack you can do something like this which is put together with examples listed on the vue website.
You can also take a look at this guys approach
App.vue
...
<my-d3-component :d3data="d3Data"></my-d3-component>
...
<script>
import d3Component from 'path/to/component'
var app = new Vue({
el: '#app',
data: {
d3Data: {}
},
components: {
'my-d3-component': d3Component
}
})
</script>
d3Component.vue
<template>
d3 html stuff goes here
</template>
<script>
export default {
props: ['d3Data'],
data() {
return {}
},
mounted: {
const options = {
block: {
dynamicHeight: true,
minHeight: 15,
},
};
const chart = new D3Funnel('#funnel');
chart.draw(this.d3Data, options);
}
}
</script>

Cropper.js at angular 2: cropper displays the previos image

I build ionic2 application - based on angular 2.
In my app I use Cropper.js library for let user edit the images he loaded.
Now I have a problem.
When user load new picture, I show it at the main container and open the crop-box for this image.
But the crop-box show the previous image which was at the container.
The only solution that worked for me is to open the crop by setTimeout, but it is not good solution, as we know.
Any idea else?
Here is my code:
HTML - the container element:
<div class="selected-image">
<img *ngIf="currentImage.src != null" #selectedPhoto [src]="currentImage.src"/>
</div>
Now, after user click a button to add picture from the camera (by cordova plugin), and I get the image url, I push the picture to pictures array and then set currentImage variable to hold the new image.
Here is my typeScript code, it also have viewChild to hold the container.
Notice to the setTimeout block, now its is work but if I unwrap the code from setTimeout wrapper - it open the crop-box with the previous picture.
I also tried to change it to NgZone.run wrapper, but it didn't help.
export class myClass {
#ViewChild('selectedPhoto') input: ElementRef;
pictures: PictureData[] = new Array();
mainImage: PictureData = new PictureData();
private cropper: Cropper;
constructor(public _zone: NgZone) {}
function addPicture(){
var self = this;
Camera.getPicture({
destinationType: Camera.DestinationType.DATA_URL,
sourceType: Camera.PictureSourceType.CAMERA,
quality: 95,
targetHeight: 400,
targetWidth:400
}).then((imageURI) => {
var picture = {src:imageURI};
self._zone.run(() => {
self.pictures.push(picture);
self.currentImage = picture;
setTimeout(() => {
if (this.cropper && this.cropper['canvas']) {
this.cropper.destroy();
}
if (!this.cropper || !this.cropper['canvas']) {
this.cropper = new Cropper(this.input.nativeElement, {
aspectRatio: 1 / 1,
dragMode: 'crop',
modal: true,
guides: false,
center: true,
highlight: false,
background: false,
autoCrop: true,
autoCropArea: 0.9,
responsive: true,
checkCrossOrigin: false,
crop: (e: Cropper.CropperCustomEvent) => {
}
});
}
}, 2000);
});
});
}
}
P.S. If you are user with more then 1500 reputation, please, think about create new tag for 'cropper.js'.

How to change the message in checkedmultiSelect widget in dojo?

Im using the dojo widget CheckedMultiSelect,how to change the message "0 items(s) selected" to some other message(Ex:Prefrences).
var select = new CheckedMultiSelect({
dropDown: true,
labelText: 'States',
multiple: true,
name: 'state',
onChange: getValues,
required: true
}, "stateSelect");

The label text is set via Dojo's i18n system. The simplest way to override it for an individual select box is to directly modify the resource used to set the label:
select._nlsResources.multiSelectLabelText = 'foo';
You can globally modify the resource by using a loader map to override the nls resource used for CheckBoxMultiSelect widgets. Modify your dojoConfig (or set one up) before loading dojo.js:
<script>
var dojoConfig = {
// ...
map: {
'*': {
'dojox/form/nls/CheckedMultiSelect': 'myApp/someModule'
}
},
// ...
}
</script>
<script src="wherever/dojo.js"></script>
Module myApp/someModule should follow the format of a Dojo nls resource, and contain the same keys under root as the original CheckedMultiSelect nls file:
define({
root: {
multiSelectLabelText: 'foo',
// ...
}
});