My Wix Component

My Wix Component.js

import wixdata from 'wix-data';
import wixWindowFrontend from 'wix-window-frontend';

let collection = "";
let x_axis_field = null;
let y_axis_field = null;
let animationDuration = 1000;
let chartData = {};
let chartClass = ".LCNC-Charts"
let toggleGrid = {
    x: true,
    y: false,
}

$w.onReady(async () => {
    let mode = wixWindowFrontend.viewMode // Preview, 

    let props = $widget.props;

    collection = props.collection;
    x_axis_field = props.x_axis_field;
    y_axis_field = props.y_axis_field;
    animationDuration = props.animationDuration * 1000;
    const collData = await querydata(collection, x_axis_field, y_axis_field) // [{}, {}, ...]

    let chartData = {
        x_axis_data: collData.map(item => item[x_axis_field]),
        y_axis_data: collData.map(item => item[y_axis_field]),
        animationDuration: animationDuration,
        toggleGrid: props.toggleGrid,
    };

    // making chart
    makeChart(chartData);

});

$widget.onPropsChanged(async (oldProps, props) => {
    // `props` is newProps
    collection = props.collection;
    x_axis_field = props.x_axis_field;
    y_axis_field = props.y_axis_field;
    animationDuration = props.animationDuration * 1000;
    //To validate we have all the data before querying and creating chart
    if (!collection && !x_axis_field && !y_axis_field) {
        const collData = await querydata(collection, x_axis_field, y_axis_field);
        chartData = {
            x_axis_data: collData.map(item => item[x_axis_field]),
            y_axis_data: collData.map(item => item[y_axis_field]),
            animationDuration: animationDuration,
            toggleGrid: props.toggleGrid,
        };
        makeChart(chartData)
    } else {
        throw new Error("@ `onPropsChanged`, required variables are not provided!")
    }
});

async function querydata(collection, f1, f2) {
    if (!(typeof f1 === 'string') && !(typeof f2 === 'string') && !f1 && !f2 && !collection) {
        console.error("f1 and f2 ");
        throw new Error("required `f1` & `f2` and must be string");
    }

    const results = await wixdata.query(collection).fields(f1, f2).find()
    return results.items;
} // querydata ends

//Send data to widget iframe
function makeChart(chartData) {
    $w(chartClass).postMessage(chartData)
}