Category: javascript

I am facing a problem in expo that it is showing:

Invariant Violation: requireNativeComponent: "RNSScreenStackHeaderConfig" was not found in the UIManager.

This error is located at:
in RNSScreenStackHeaderConfig (created by HeaderConfig)
in HeaderConfig (created by SceneView)
in RNSScreen
in Unknown (created by InnerScreen)
in Suspender (created by Freeze)
in Suspense (created by Freeze)
in Freeze (created by DelayedFreeze)
in DelayedFreeze (created by InnerScreen)
in InnerScreen (created by Screen)
in Screen (created by SceneView)
in SceneView (created by NativeStackViewInner)
in Suspender (created by Freeze)
in Suspense (created by Freeze)
in Freeze (created by DelayedFreeze)
in DelayedFreeze (created by ScreenStack)
in RNSScreenStack (created by ScreenStack)
in ScreenStack (created by NativeStackViewInner)
in NativeStackViewInner (created by NativeStackView)
in RNCSafeAreaProvider (created by SafeAreaProvider)
in SafeAreaProvider (created by SafeAreaInsetsContext)
in SafeAreaProviderCompat (created by NativeStackView)
in NativeStackView (created by NativeStackNavigator)
in PreventRemoveProvider (created by NavigationContent)
in NavigationContent
in Unknown (created by NativeStackNavigator)
in NativeStackNavigator (created by App)
in EnsureSingleNavigator
in BaseNavigationContainer
in ThemeProvider
in NavigationContainerInner (created by App)
in App (created by withDevTools(App))
in withDevTools(App)
in RCTView (created by View)
in View (created by AppContainer)
in RCTView (created by View)
in View (created by AppContainer)
in AppContainer
in main(RootComponent), js engine: hermes
ERROR Invariant Violation: requireNativeComponent: “RNSScreenStackHeaderConfig” was not found in the UIManager.

My code:

import React from 'react';
import { NavigationContainer } from '@react-navigation/native';
import { createNativeStackNavigator } from '@react-navigation/native-stack';
import Home from './Pages/Home';
import LogoPage from './Pages/LogoPage';
import Login from './Pages/Login';
import Sale from './Pages/Sale';
import Purchase from './Pages/Purchase';
import Addparty from './Pages/Addparty';
import AddProduct from './Pages/AddProduct';
import VoucherReport from './Pages/VoucherReport';
import CreateVoucher from './Pages/CreateVoucher';
import CashBook from './Pages/CashBook';
import LedgerReport from './Pages/LedgerReport';
import AllParty from './Pages/AllParty';
import Scrollpage from './Pages/Scrollpage';
import AllProduct from './Pages/AllProduct';
import SaleReport from './Pages/SaleReport';
import PurchaseReport from './Pages/PurchaseReport';
import FirstLogin from './Pages/FirstLogin';
import Profile from './Pages/Profile';
import { UserActivityProvider } from './Pages/UserActivityProvider'; // Adjust the 
import path

const Stack = createNativeStackNavigator();

const App = () => {
  return (
    <NavigationContainer>
      <Stack.Navigator>
        <Stack.Screen
          options={{ headerShown: false }}
          name="LogoPage"
          component={LogoPage}
        />
        <Stack.Screen
          options={{ headerShown: false }}
          name="FirstLogin"
          component={FirstLogin}
        />
        <Stack.Screen
          options={{ headerShown: false }}
          name="Scrollpage"
          component={Scrollpage}
        />
        <Stack.Screen
          options={{ headerShown: false }}
          name="Login"
          component={Login}
        />

        <Stack.Screen
          options={{ headerShown: false }}
          name="Home"
          component={Home}
        />

    <Stack.Screen
      //  options={{ headerShown: false }}
      name="Add Party"
      component={Addparty}
    />

    <Stack.Screen
      //  options={{ headerShown: false }}
      name="Add Product"
      component={AddProduct}
    />

    <Stack.Screen
      //  options={{ headerShown: false }}
      name="Sale"
      component={Sale}
    />

    <Stack.Screen
      //  options={{ headerShown: false }}
      name="Purchase"
      component={Purchase}
    />

    <Stack.Screen
      //  options={{ headerShown: false }}
      name="VoucherReport"
      component={VoucherReport}
    />
    <Stack.Screen
      //  options={{ headerShown: false }}
      name="CreateVoucher"
      component={CreateVoucher}
    />
    <Stack.Screen
      //  options={{ headerShown: false }}
      name="CashBook"
      component={CashBook}
    />
    <Stack.Screen
      //  options={{ headerShown: false }}
      name="LedgerReport"
      component={LedgerReport}
    />
    <Stack.Screen
      //  options={{ headerShown: false }}
      name="All Party"
      component={AllParty}
    />

    <Stack.Screen
      //  options={{ headerShown: false }}
      name="All Product"
      component={AllProduct}
    />
    <Stack.Screen
      //  options={{ headerShown: false }}
      name="Sale Report"
      component={SaleReport}
    />
    <Stack.Screen
      //  options={{ headerShown: false }}
      name="Purchase Report"
      component={PurchaseReport}
    />
    <Stack.Screen
      //  options={{ headerShown: false }}
      name="Profile"
      component={Profile}
    />
    <Stack.Screen
      //  options={{ headerShown: false }}
      name="UserActivityProvider"
      component={UserActivityProvider}
    />
  </Stack.Navigator>
</NavigationContainer>

);
};

export default App;

I would like to learn how this kaleidoscope image was created, like what the algorithm should do to create such an effect (I’m imagining like with p5.js, but there aren’t really any good ones from what I’ve seen). This is the best GIF I could find of one, but I have seen some 3d light shows where they do really cool ones, so people know how to do this I’m just not at all aware of how it’s done.

Examples

First, some examples to show you what I’m looking to learn how to do. This first one is my favorite GIF one I could find right now (I scaled/compressed it a lot to fit on SO, here it is).

A few things you’ll notice:

1. It feels like it never ends. It is constantly rotating it seems at a constant speed, but sub-parts of it spurt out faster on a frequency.
2. The colors and shapes blend well and seem to emerge from each other.

Some other ones I found aren’t as good, such as:

That one is still blendy, in that the colors fade together nicely, and it has good motion/blending flow. But it doesn’t feel continuous, it seems to restart instead.

Then there’s this next one (kinda small), which just has shapes rotating and no blending it feels like. I don’t like this style, lacks organicness/fluidness.

This next one has the continuous aspect to it (flowing outward), but it doesn’t really blend or mix or rotate:

Actually I found another one I kind of like, which has mixing, blending, morphing, and rotation, as well as sort of a random bubbling in/out behavior.

This one would be decent if it was sped up:

And this one I don’t really like, it lacks the blending of the elements, and is otherwise not organic enough. Too plain and primitive looking.

Question

What is the math involved, or maybe not that low-level, but what techniques are used to achieve the animated art like the ones I flagged as the ones I like? The link to p5.js examples above, like this one, are too simple, they don’t seem to come close to the richness of the ones I like. So how do you build off the p5.js example code https://editor.p5js.org/kjhollen/sketches/x8UI4YJ1N and get to one of those more organic kaleidoscopes?

You don’t need to implement one really (though it would be really neat!), I’m just trying to get a grip on what I should spend time on and tinker with with this canvas / JS / p5.js sort of render-loop art. What is the basic set of features used to get those richer organic ones? It’s hard to pick them apart to see how they are constructed, without first knowing some basic practical theory. Looking for some practical guidance on where to direct my learnings.

x={f(){return this}}
x.f()  //x
(x.f)()  //x
(0,x.f)() //window

As you see there’s an object x with a function f in it, f return its ‘this’ object. When I group x.f it still return x, while when I use comma operator ‘this’ becomes window, not x.

Object.is((x.f),(0,x.f))//true

You can see those two expressions are actually represent the same thing, so why they act differently when being called? It seems they are called by different object (x and window) but what caused this since I just input both expressions directly into the console?

x={y:{z:{f}}}

x.y.z.f() //z
(x).y.z.f() //z
(x.y).z.f() //z
(x.y.z).f() //z
(x.y.z.f)() //z
((((x).y).z).f)() //z

a=x.y.z.f
a() //window
(0,x.y.z.f)() //window

Here is my code, im trying to click uploadButton to trigger input changeEvent, i use it in chorm and brave not work, i have no idea why it doesnt work

let fileInput = ref<HTMLInputElement | null>(null)

const uploadImg = () => {
fileInput.value?.click()
}

const getImageUrl = () => {
console.log('getupload')
}

<input ref="fileInput" type="file" @change="getImageUrl" hidden />
<button class="uploadButton" @click="uploadImg">上傳圖片</button>

i want to click button then choose picture and i can trigger change event to get picture information

I am plotting box-plot using Echarts plugins:
My sample box-plot is here: Examples – Apache ECharts

And my problem is I can’t import data into echarts plugins:

My code:

data.series.map((s) => {
  if (s.refID === 'DATE_FILTERED') {
    categories_date =
      s.fields.find((f) => f.name === 'date').values.buffer ||
      s.fields.find((f) => f.name === 'date').values;
  } else if (s.refID === 'VH_CTQ') {
    var_20240102 =
      s.fields.find((f) => f.name === '2024-01-02').values.buffer ||
      s.fields.find((f) => f.name === '2024-01-02').values;
    var_20240103 =
      s.fields.find((f) => f.name === '2024-01-03').values.buffer ||
      s.fields.find((f) => f.name === '2024-01-03').values.buffer;
    var_20240104 =
      s.fields.find((f) => f.name === '2024-01-04').values.buffer ||
      s.fields.find((f) => f.name === '2024-01-04').values.buffer;
  }

  vh_ctq_data = categories_date.map((id, index) => {
    return {
      value: [categories_date[index]
        , var_20240102[index]
        , var_20240103[index]
        , var_20240104[index]]
    };
  });
  // return categories_date.map((d, i) => [d, var_20240102[i], var_20240103[i], var_20240104[i]]);
});

My first query table (VH_CTQ) like:

My second query table (DATE_FILTERED) like:

My question: How can I draw box plot with x-Axis is date column? and if my date column is variable (dynamic) so how can apply that?
Thank you so much

I am trying to send the value of total_points from a JavaScript file to a PHP file, where I will insert the value into a column in a database.

$.ajax({  
  type: 'POST',  
  url: 'statsaver.php', 
  data: {total_points: total_points},
  success: function(response) {
      console.log(response);
  }
});

Note that the value of total_points is a valid number at the time this code runs.

In my PHP file, statsaver.php, I have this if statement, which always echos total_points is not set

if (isset($_POST["total_points"])) {
    echo "total_points is set.";
} else {
    echo "total_points is not set.";
}

Because of this, I cannot enter the value of total_points into my database. If there is a better / alternative way to securely send a JavaScript variable to a PHP file I would love to hear about it, as long as it doesn’t require the user having to submit a form.

I am currently trying to code a simple login system with express. I have a login page that sends a request to my express server which creates a new session using express-session. After that on my main page a request is send to check the session status of the user. When logging in and immidiately afterwards checking the login status, it incorrectly shows that I’m not logged in. Even the sessionID of the two requests is different. Here is my code:
Server with express:

const express = require("express");
const app = express();
const cors = require("cors");
const session = require("express-session");
const crypto = require("crypto");
const bcrypt = require("bcrypt");
const fs = require("fs/promises");
const process = require("process");

const usersFilePath = "./users.json";

app.use(express.json());
app.use(cors({credentials: true, origin: true}));
app.use(
    session({
        name: "app.sid",
        secret: crypto.randomBytes(32).toString("hex"),
        resave: false,
        saveUninitialized: true,
        cookie: {secure: false, sameSite: "none"},
        store: new session.MemoryStore()
    })
)

let users = [];

async function loadUsers() {
    try {
        const data = await fs.readFile(usersFilePath);
        users = JSON.parse(data);
        console.log("Found existing user data, loading...");
    } catch (error) {
        users = [];
        console.log("Could not find existing user data")
    }
}

async function saveUsers() {
    await fs.writeFile(usersFilePath, JSON.stringify(users, null, 2));
}

app.get("/users", (req, res) => {
    res.json(users);
});

app.post("/users/register", async (req, res) => {
    const existingUser = users.find((user) => user.name === req.body.name);
    if (existingUser != null) {
        return res.status(400).send("User already exists");
    }

    try {
        const hashedPassword = await bcrypt.hash(req.body.password, 10);
        const user = { name: req.body.name, password: hashedPassword };
        users.push(user);
        await saveUsers();
        res.status(201).send();
    } catch (error) {
        res.status(500).send("error LOL");
    }
});

app.post("/users/login", async (req, res) => {
    const user = users.find((user) => user.name === req.body.name);
    if (user == null) {
        return res.status(400).send("User does not exist");
    }

    try {
        if (await bcrypt.compare(req.body.password, user.password)) {
            req.session.user = user;
            console.log("Logged in user: " + req.session.user.name);
            console.log("sessionID: " + req.sessionID);
            res.status(200).json({sessionID: req.sessionID});
        } else {
            res.send("Wrong Password!");
        }
    } catch (error) {
        res.status(500).send(error);
    }
});

app.post("/users/logout", (req, res) => {
    req.session.destroy((err) => {
        if (err) {
            res.status(500).send("Logout failed");
        } else {
            res.status(200).send("Logout successful");
        }
    })
});

app.get("/users/status", (req, res) => {
    console.log("User: " + req.session.user);
    console.log("sessionID: " + req.sessionID);
    if (req.session.user) {
        res.json({loggedIn: true, username: req.session.user.name});
    } else {
        res.json({loggedIn: false, sessionID: req.sessionID});
        console.log("User not logged in")
    }
})

// Load existing users when the server starts
loadUsers().then(() => {
    const server = app.listen(3000, () => {
        console.log("Server is running on port 3000");
    });
});

Login script

document.getElementById('loginForm').addEventListener('submit', async function (event) {
    event.preventDefault();

    const username = document.getElementById('username').value;
    const password = document.getElementById('password').value;

    try {
        const response = await fetch('http://localhost:3000/users/login/', {
            method: 'POST',
            credentials: "include",
            headers: {
                'Content-Type': 'application/json',
            },
            body: JSON.stringify({ name: username, password: password }),
        });

        const data = await response.json();
        console.log("SessionID: " + data.sessionID);

        // setTimeout(() => {
        //     window.open("../index.html", "_self");
        // }, 1);
    } catch (error) {
        console.error('Error during login:', error);
    }
});

Login status script:

async function checkLoginStatus() {
    try {
      const response = await fetch('http://localhost:3000/users/status', {
        method: "GET",
        credentials: "include",
        headers: {
            "Content-Type": "application/json"
        },
      });
      const data = await response.json();
      console.log("SessionID: " + data.sessionID);

      const info = document.getElementById('userInfo');
      const button = document.getElementById('logoutButton');

      if (data.loggedIn) {
        // User is logged in
        info.innerText = `Logged in as ${data.username}`;
        button.style.display = 'Log out';
        button.onclick = "logout()";

      } else {
        // User is not logged in
        info.innerText = 'Not logged in';
        button.innerText = "Log in";
        button.onclick = () => window.open("auth/login.html", "_self");
      }
    } catch (error) {
      console.error('Error checking login status:', error);
    }
  }

  async function logout() {
    try {
      const response = await fetch('http://localhost:3000/users/logout', { method: 'POST' });
      if (response.status === 200) {
        // User successfully logged out
        checkLoginStatus(); // Update UI
      } else {
        console.error('Logout failed');
      }
    } catch (error) {
      console.error('Error during logout:', error);
    }
  }

  checkLoginStatus();

I have looked far and wide and tried many modifications, but the issue persists. I made sure to use cors with {credentials: true} and make the fetch requests with credentials: "include.

I am trying to implement push notification flow using reactjs and nodejs. I have created sw.js inside public folder and helper.js inside src folder.

when I trying to subscribe using VAPID PUBLIC KEY it is throwing below error

Uncaught (in promise) DOMException: Registration failed - push service error
(anonymous) @ sw.js:35

public/sw.js

const urlBase64ToUint8Array = base64String => {
    const padding = '='.repeat((4 - (base64String.length % 4)) % 4);
    const base64 = (base64String + padding)
        .replace(/-/g, '+')
        .replace(/_/g, '/');

    const rawData = atob(base64);
    const outputArray = new Uint8Array(rawData.length);

    for (let i = 0; i < rawData.length; ++i) {
        outputArray[i] = rawData.charCodeAt(i);
    }

    return outputArray;
}

self.addEventListener("activate", async (e) => {
    const subscription = await self.registration.pushManager.subscribe({
        userVisibleOnly: true,
        applicationServerKey: urlBase64ToUint8Array("BChQ-5HfZTBj712T2rrjJY6IENIcs0yWMKH-ot1OX1zik55r94b7dqdJgmuM171jYn_XnzyKfaUcMIQEJ2iVHPF")
    })

    console.log(subscription)
})

src/helper.js

const checkPermission = () => {
    if (!('serviceWorker' in navigator)) {
        throw new Error("No support for service worker!")
    }

    if (!('Notification' in window)) {
        throw new Error("No support for notification API");
    }

    if (!('PushManager' in window)) {
        throw new Error("No support for Push API")
    }
}

const registerSW = async () => {
    const registration = await navigator.serviceWorker.register('/sw.js');
    return registration;
}

const requestNotificationPermission = async () => {
    const permission = await Notification.requestPermission();

    if (permission !== 'granted') {
        throw new Error("Notification permission not granted")
    }

}

const main = async () => {
    checkPermission()
    await requestNotificationPermission()
    await registerSW()
}

export {main}

I am having an issue with my AppScripts. I am attempting to automate an ELO Formula, it returns NaN every time. I get no errors, and I am extremely confused, does anyone have a solution?

`

function Loop() {
  const Sheet2 = SpreadsheetApp.getActiveSpreadsheet().getSheetByName('Sheet3Test');

  var EndRow = Sheet2.getLastRow();

for (var i = 2; i <= EndRow; i++)
{
  Utilities.sleep(12)
  var Team1ELO = Sheet2.getRange(i, 10).getValue()
  var Team2ELO = Sheet2.getRange(i, 11).getValue()
  var ExpectedResult = Sheet2.getRange(i, 12).getValue()
  var ActualResult = Sheet2.getRange(i, 13).getValue()
  var KFact = Sheet2.getRange(i, 14).getValue()



  var newELOVal = Sheet2.getRange(i, 8).getValue()
  var newELOVal2 = Sheet2.getRange(i, 9).getValue() 

if (newELOVal == "" & newELOVal2 == "" && Team1ELO != "" && Team2ELO != "" && KFact != "" && ActualResult != "" != ExpectedResult !="")
{

var TeamAELOOutput = Team1ELO + KFact * (ActualResult - ExpectedResult)

var TeamBELOOutput = (Team2ELO + (KFact * ((1 - ActualResult) - (1 - ExpectedResult)))) 

Sheet2.getRange(i, 8).setValue(TeamAELOOutput)
Sheet2.getRange(i, 9).setValue(TeamBELOOutput)


}




}
}

}

}
}

I tried to automate the ELO System by using a for loop and automating the ELO values.

I am trying to make a simple website that displays the results of a function call from a javascript file that makes a call to a WASM file. So far I have the following files:

Makefile

FILES = add.c
OUTPUT = MyWasmLib
CC = emcc
EMCC_VERSION := $(shell command -v $(CC) 2> /dev/null)
EMCC_FLAGS = -s EXPORT_ALL=1 -s EXPORTED_RUNTIME_METHODS='["cwrap"]' -s ALLOW_MEMORY_GROWTH=1  -s EXPORT_ES6=1 -sMODULARIZE

all: check_emcc $(OUTPUT)

check_emcc:
ifndef EMCC_VERSION
    $(error "emcc is not installed. please install emscripten.")
endif

$(OUTPUT): $(FILES)
    $(CC) $(EMCC_FLAGS) -o [email protected] $(filter %.c, $(FILES))

clean:
    rm -i $(OUTPUT).js $(OUTPUT).wasm

.PHONY: all check_emcc clean

add.c

#include <emscripten.h>

EMSCRIPTEN_KEEPALIVE
int add(int a, int b) {
    return a + b;
}

wasm_mjs_interface.js

import { default as MyWasmLib } from "./MyWasmLib.js";

let addWasmFunction;

let WASM_initialized;
const initializeWASM = () => {
    WASM_initialized = new Promise((resolve, reject) => {
        MyWasmLib.onRuntimeInitialized = () => {
            try {
                addWasmFunction = MyWasmLib.cwrap(
                    "add", "number", ["number", "number"]
                );

                resolve();
            }
            catch (error) {
                reject(error);
            }
        };
    });
};

initializeWASM();

export const WASM_add = async (a, b) => {
    await WASM_initialized;
    try {
        return addWasmFunction(a, b);
    }
    catch (error) {
        console.error("Error calling add function in WASM: ", error);
        throw error;
    }
};

index.js

import { WASM_add } from "./wasm_mjs_interface.mjs";

async function loadWasmAdd() {
    try {
        const result = await WASM_add(5, 3);
        console.log("WASM addition result: ", result);
        document.getElementById("result").textContent = `${result}`;
    }
    catch (error) {
        console.error("Error performing WASM addition: ", error);
    }
}

if (document.readyState === "loading") {
    window.addEventListener("DOMContentLoaded", loadWasmAdd);
} else {
    loadWasmAdd();
}

index.html

<!DOCTYPE html>
<html lang="en">
    <head>
        <title>WASM Module Example</title>
        <script type="module" src="./index.js"></script>
    </head>
    <body>
        <p id="result"></p>
    </body>
</html>

I am running a simple python server with

python3 -m http.server 8000

I am viewing the server with

firefox 0.0.0.0:8000/index.html

Finally the problem I am getting is that in the actual console and on the page there is nothing happening. In the console I can see that there is a GET request for index.html MyWasmLib.js and wasm_mjs_interface.mjs however there are no errors in the console and nothing actually displays in the browser where I have the p tag.

I am trying to rendering the content with the pug template but I cant import the pug modules into this file, i’m using parcel to bundle all the js file also.

Here is the code:

import html from "../../views/reviews.pug";
import pug from 'pug';

const myReviewsBtn = document.querySelector('.my-reviews');
const settingsBtn = document.querySelector('.my-settings');

if (settingsBtn) {`your text`
    settingsBtn.addEventListener("click", changeActiveState(settingsBtn));
}

if (myReviewsBtn) {
    myReviewsBtn.addEventListener("click", async event => {
        event.preventDefault();
        changeActiveState(myReviewsBtn);
        const root = document.getElementById('root');
        const e = document.querySelector('.user-view__form-container');
        e.style.display = 'none';

        const { userId } = event.target.dataset;
        const { data } = await axios.get(`/api/users/${userId}/reviews`);
        ;
        console.log(data.data.data);
        const reviews = data.data.data;
        const content = pug.compileFile(html, {
            reviews
        });
        root.innerHTML = content;
    });
}

the error i got in the browser console is:

index.js:51  Uncaught TypeError: Unable to determine current node version
    at versionIncluded (index.js:51:9)
    at isCore (index.js:68:28)
    at 6v2Jh.3e9936faf252d157 (core.js:9:21)
    at newRequire (index.js:71:24)
    at localRequire (index.js:84:35)
    at 75Gdd.fab65eb61bd949bd (index.js:2:14)
    at newRequire (index.js:71:24)
    at localRequire (index.js:84:35)
    at 2zESx.92c7c5fc0e59f8 (run-filter.js:4:15)
    at newRequire (index.js:71:24)

Can anyone tell me why I’m getting a ‘circular dependancy’ error when trying to build a project?

Main JS file imports Custom Scroll JS file:

// import Smooth scroll custom JS file
import './custom/smooth-scroll';

Smooth Scroll custom JS file importing Smooth Scroll from Node_Modules at root of project:

// import Smooth Scroll Module from Node JS 
import SmoothScroll from 'smooth-scroll';

var scroll = new SmoothScroll('a[href*="#"]', {
    speed: 700,
    speedAsDuration: true
});

Error Message:
Bundling/transpiling failed with this error: Circular dependency: custom/aos.js -> custom/aos.js
“default” is not exported by “custom/aos.js”, imported by “custom/aos.js”.

FYI – I use Codekit to build/compile but I don’t think that is relevant to my question as I’m assuming other dev tools ‘Grunt, Gulp’ etc would identify the same circular dependencies (although they may still allow the build to proceed).

I have tried a numnber of methods to export Smooth Scroll from the ‘.custom/smooth-scroll.js’ file but can’t seem to resolve.

im trying to get 2 values in 1 skala thats how its looking in the moment on the left site you can see 2 scalas, i want to have 1 scala that adjust to price1 and price2. like in the following picture The problem just came in when i added the atribute bsr, before bsr wasnt there there was no problem with the scala but when i added bsr i had to make a own scala for bsr because bsr is always very high compared to the price so i added a scala to bsr to let the cart look good

This is my code

<!DOCTYPE html>   
   <body>
        <div class="graph-div">
            <div id="chart"></div>
        </div>
        
        <script src="https://cdn.jsdelivr.net/npm/apexcharts"></script>
        <script>
            var options = {
                series:[{
                    name:"BSR",
                    data: [8097, 8097, 8032, 8767, 8767, 9086, 7965]
                    }, {
                    name:"Price 1",
                    data: [44.99, 44.99, 38.99, 38.99, 38.99, 0, 0]
                    }, {
                    name:"Price 2",
                    data: [44.99, 74.35, 38.99, 38.99, 74.35, 74.35, 74.35]
                    }
                ],
                chart: {
                    height: "100%",
                    type: "area",
                    offsetY: 10,
                    toolbar: {
                        show: false
                    }
                },
                theme: {
                    mode: 'dark',
                },
                colors:["#98BB93", "#F2A93B", "#EA33B0"],
                dataLabels: {
                    enabled: false,
                },
                stroke: {
                    width: 1.5,
                    curve: "stepline",
                },
                fill: {
                    type:"gradient",
                    gradient: {
                        opacityFrom: .3, opacityTo: .05
                    }
                },
                grid: {
                    borderColor: 'rgba(234,243,253,.12)',
                },
                legend: {
                    position: "top",
                    horizontalAlign: "center",
                    offsetY: 8,
                },
                xaxis: {
                    axisBorder: {
                    color: '#EAF3FD' 
                     },
                    type: 'category',
                    categories: ['2023-12-08 20:02:00', '2023-12-08 22:12:00', '2023-12-09 01:14:00', '2023-12-09 02:16:00', '2023-12-09 05:14:00', '2023-12-09 06:44:00', '2023-12-09 12:44:00'],
                    labels: {
                        show: false,
                    }
                    
                },
                yaxis: [{
                opposite: true,
                labels: {
                    formatter: function (value) {
                        return value.toFixed(0);
                            }
                        },
                    }, {
                        labels: {
                            formatter: function (value) {
                                return "€ " + value.toFixed(2);
                            }
                        },
                    }, {
                        labels: {
                            formatter: function (value) {
                                return "€ " + value.toFixed(2);
                            }
                        },
                    }
                ],
                };
            var chart = new ApexCharts(document.querySelector("#chart"), options);
            chart.render();
        </script>
    </body>
</html>

I’m exploring the intricacies of the Node.js Event Loop, Timers, and process.nextTick() in versions predating v11, such as v10.19.0 – without higher priority of microtask and nexttick. I’m referencing the documentation on nodejs.org, where it states that the first phase of the event loop is timers. And Promise was executed between each phase of the event loop.

Here’s a sample code snippet:

Promise.resolve().then(() => console.log('promise'));
setTimeout(() => console.log('timeout'));

I understand that, according to the documentation, the first phase of the event loop is timers. However, when running the above code, the result should be ‘timeout’ before ‘promise’, but it is ‘promise’ before ‘timeout’.
Result with nodejs v10.19.0:

promise
timeout

In contrast, the following code snippet produces the expected result of the timeout occurring before the promise:

setTimeout(() => console.log('timeout1'));
setTimeout(() => {
  console.log('timeout2');
  Promise.resolve().then(() => console.log('promise'));
});
setTimeout(() => console.log('timeout3'));
setTimeout(() => console.log('timeout4'));

Result with nodejs v10.19.0:

timeout1
timeout2
timeout3
timeout4
promise

I’m puzzled about the order of phases in the event loop in 2 examples above.

I am using Azure Functions with JavaScript / Node.js model v4 and am trying to pass the request body to a SQL Server stored procedure.
It seems impossible to pass the request body as described below.

I have an SqlInput setup like this:

const sp_location_insert = input.sql({
    commandText: 'dbo.sp_location_insert',
    parameters: '@Body={body}',
    commandType: 'StoredProcedure',
    connectionStringSetting: 'SqlConnectionString',
})

and a function defined like this:

app.http('locationPost', {
    methods: ['POST'],
    authLevel: 'anonymous',
    route: 'location',
    extraInputs: [sp_location_insert],
    handler: async (request, context) => {
        const body = await request.json()
        context.log(`body: ${JSON.stringify(body)}`)
        const response = context.extraInputs.get(sp_location_insert)
        const location_id = response[0]["location_id"]
        return {    status: 201,
                    body: location_id
        }
    }
})

The error message that I get is this:

Microsoft.Azure.WebJobs.Host: No value for named parameter ‘body’.

I have experimented with many things including removing async and await in the handler, using request.body instead of request.json() and trying to initialize body
before awaiting request.json(). Nothing seems to work. I had hoped this would work because if I have seen this technique
work with request parameters. The problem seems to be that request body must be awaited for while the extraInput is evaluated as soon as the function is invoked.

Is there a way that I can pass the request body to an SQL Server stored procedure using JavaScript Azure Functions model v4?