Hi all,
I have a graph chart on members custom made area displaying unique information to each member by reading a table connected to a database collection. Graph charts display on the click of 2 buttons (2 different charts). Both charts are set to hidden on load, and .show only when the member clicks the button.
However this works on many occasions in others it does not work (statistically it works 1/3 times the page loads).
The issue: On click of any of the buttons the chart fails to load (the graph disappears).
Regardless of result (whether it loads or not) I also get this error in chrome developer tools:
console.js:35 Wix code SDK error: The message parameter that is passed to the postMessage method cannot be set to the value . It must be of type object,string,number,boolean,array.
Any ideas? Thanks.
See the code below:
//Graph code
import wixData from 'wix-data';
import {monthSort} from 'public/months';
$w.onReady(function () {
$w("#table2").columns = [
{
"id": "col1", // ID of the column for code purposes
// The field key in the collection whose data this column displays
"dataPath": "month",
"label": "Month", // The column header
"width": 100, // Column width
"type": "string", // Data type for the column
// Path for the column if it contains a link
},
{
"id": "col2",
"dataPath": "numberoftrades",
"label": "Number of Trades",
"visible": true,
"type": "string",
}
];
wixData.query("Statistics")
.eq("fxraccountnumber", "repay")
.ascending("month")
.limit(1000) // Max limit of 1,000 //
.find()
.then( (result) => {
const months = result.items.map(x => x.month)
.filter((obj, index, self) => index === self.indexOf(obj))
.sort(monthSort);
const aggregated = months.map(x => {
return {
month: x,
numberoftrades: result.items.filter(obj => obj.month === x)
.map(z => z.numberoftrades)
.reduce(( current) => current)
};
});
$w("#table2").rows = aggregated;
let tableArr = [];
for ( var i = 0; i < $w("#table2").rows.length; i++ ) {
tableArr.push (
$w("#table2").rows[i]["numberoftrades"]
)
}
$w("#html1").postMessage(tableArr);
});
});
export function showgraph_click(event) {
$w("#html1").show();
$w("#html3").hide();
$w("#html5").hide();
$w("#clickedmessage2").hide();
let numberoftrades = $w("#input1").value;
$w("#table2").columns = [
{
"id": "col1", // ID of the column for code purposes
// The field key in the collection whose data this column displays
"dataPath": "month",
"label": "Month", // The column header
"width": 100, // Column width
"type": "string", // Data type for the column
// Path for the column if it contains a link
},
{
"id": "col2",
"dataPath": "numberoftrades",
"label": "Number of Trades",
"visible": true,
"type": "string",
}
];
wixData.query("Statistics")
.eq("fxraccountnumber", numberoftrades)
.ascending("month")
.limit(1000)
.find()
.then( (result) => {
const months = result.items.map(x => x.month)
.filter((obj, index, self) => index === self.indexOf(obj))
.sort(monthSort);
const aggregated = months.map(x => {
return {
month: x,
numberoftrades: result.items.filter(obj => obj.month === x)
.map(z => z.numberoftrades)
.reduce((current) => current)
};
});
$w("#table2").rows = aggregated;
let tableArr = [];
for ( var i = 0; i < $w("#table2").rows.length; i++ ) {
tableArr.push (
$w("#table2").rows[i]["numberoftrades"]
)
}
$w("#html1").postMessage(numberoftrades[months]);
$w("#html1").onMessage((event)=>{
if(event.data.type === 'ready'){
$w("#html1").postMessage(numberoftrades[months]);
}
if(event.data.type === 'click'){
$w("#clickedMessage").text = `The total number of trades in ${event.data.label} is ${event.data.value} .`;
$w("#clickedMessage").show();
}
});
console.log(tableArr);
$w("#html1").postMessage(tableArr);
});
}
//repay graph
$w.onReady(function () {
$w("#table3").columns = [
{
"id": "col1", // ID of the column for code purposes
// The field key in the collection whose data this column displays
"dataPath": "month",
"label": "Month", // The column header
"width": 100, // Column width
"type": "string", // Data type for the column
// Path for the column if it contains a link
},
{
"id": "col2",
"dataPath": "repay",
"label": "Total Repay",
"visible": true,
"type": "string",
}
];
wixData.query("Statistics")
.eq("fxraccountnumber", "repay")
.ascending("month")
.limit(1000) // Max limit of 1,000 //
.find()
.then( (result) => {
const months = result.items.map(x => x.month)
.filter((obj, index, self) => index === self.indexOf(obj))
.sort(monthSort);
const aggregated = months.map(x => {
return {
month: x,
repay: result.items.filter(obj => obj.month === x)
.map(z => z.repay)
.reduce(( current) => current)
};
});
$w("#table3").rows = aggregated;
let tableArr = [];
for ( var i = 0; i < $w("#table3").rows.length; i++ ) {
tableArr.push (
$w("#table3").rows[i]["repay"]
)
}
$w("#html5").postMessage(tableArr);
});
});
export function repaygraph_click_1(event) {
$w("#html5").show();
$w("#html1").hide();
$w("#html3").hide();
$w("#clickedMessage").hide();
let repay = $w("#input1").value;
$w("#table3").columns = [
{
"id": "col1", // ID of the column for code purposes
// The field key in the collection whose data this column displays
"dataPath": "month",
"label": "Month", // The column header
"width": 100, // Column width
"type": "string", // Data type for the column
// Path for the column if it contains a link
},
{
"id": "col2",
"dataPath": "repay",
"label": "Total Repay",
"visible": true,
"type": "string",
}
];
wixData.query("Statistics")
.eq("fxraccountnumber", repay)
.ascending("month")
.limit(1000)
.find()
.then( (result) => {
const months = result.items.map(x => x.month)
.filter((obj, index, self) => index === self.indexOf(obj))
.sort(monthSort);
const aggregated = months.map(x => {
return {
month: x,
repay: result.items.filter(obj => obj.month === x)
.map(z => z.repay)
.reduce((current) => current)
};
});
$w("#table3").rows = aggregated;
let tableArr = [];
for ( var i = 0; i < $w("#table3").rows.length; i++ ) {
tableArr.push (
$w("#table3").rows[i]["repay"]
)
}
$w("#html5").postMessage(repay[months]);
$w("#html5").onMessage((event)=>{
if(event.data.type === 'ready'){
$w("#html5").postMessage(repay[months]);
}
if(event.data.type === 'click'){
$w("#clickedmessage2").text = `The total number of repay in ${event.data.label} is $${event.data.value}.`;
$w("#clickedmessage2").show();
}
});
console.log(tableArr);
$w("#html5").postMessage(tableArr);
});
}