How can I animate an accelerating a DOM element with JavaScript?

I am making an application where I need a object to move from point a to point b starting out fast but then slowing down. I want to do this with pure vanilla js and no libraries whatsoever. This is my current code for animating something at a constant speed and I was wondering if it was possible to modify it or something.

let player = document.querySelector('.player');
var id = setInterval(frame, 1);
let counter = 0;
function frame() {
    if (counter == 50) {
        clearInterval(id);
                counter = 0;
        return;
    } else {
        player.style.top = player.offsetTop - 2 + 'px';
        counter++
    }
}

Ajax json doesnt show any instances

that even if i connected json data to ajax, it doesnt show me any results.

def get_json_categories(request):
    query_get = request.GET
    if query_get:
        query_get = query_get['q']
        categories = EcommerceProductCategory.objects.filter(name__contains=query_get).order_by('name')
    else:
        categories = EcommerceProductCategory.objects.order_by('name')

    data = {}
    data['results'] = []
    for category in categories:
        data_to_return = {}
        data_to_return['id'] = category.id
        data_to_return['name'] = category.name
        data['results'].append(data_to_return)

    return JsonResponse(data)

And i urled that to ecommerce/get_json_categories

and in the Django html

<div class="mt-2">
                <hr>
                <div class="form-group">
                    <select class="form-control w-30" name="category_select" id="category_select" aria-describedby="category_select" required></select>
                </div>

<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
<link href="https://cdn.jsdelivr.net/npm/[email protected]/dist/css/select2.min.css" rel="stylesheet" />
<script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/js/select2.min.js"></script>
<script>
    $('#category_select').select2({
        placeholder: 'Wybierz kategorię',
        ajax: {
            url: 'http://127.0.0.1:8000/ecommerce/get_json_categories',
            dataType: 'json',
            data: function (params) {
                return {
                    q: params.term,
                    page: params.name
                };
            },
        }
    });
</script>

But it shows me “No results could be found” but that site (/ecommerce/get_json_categories) is full of json data.

Vis.js How to show only children/descendents of selected node?

If not posible with vis.js, I could do the entire thing on something else. But this functionality is crucial. So, show everything if nothing selected; show only children (with the “from” arrow) of some node if that node is selected. Or to select the node in some list, or type it somewhere.
https://codepen.io/andre-fr-silva/pen/ZEBPpqK

var container = document.getElementById("mynetwork");
var data = {
  nodes: nodes,
  edges: edges,
};

How to group an array of objects in mongodb

im new to mongodb and Im having some trouble to group an array from a document like this:

_id: ObjectId('5d7afa2609d6ed000dffe1de')
email: "[email protected]"
transactions: [
    {
        "date": "2020-06-10T00:00:00.000+00:00",
        "shares": 100,
        "price": 20,
        "type": "buy",
        "equity_id": "petr4"
    },
    {
        "date": "2020-07-10T00:00:00.000+00:00",
        "shares": 200,
        "price": 10,
        "type": "sell",
        "equity_id": "petr4"
    },
    {
        "date": "2020-06-10T00:00:00.000+00:00",
        "shares": 250,
        "price": 30,
        "type": "buy",
        "equity_id": "vale3"
    }, ...
]

I would like to group these transactions by date and obtain an document like this:

_id: ObjectId('5d7afa2609d6ed000dffe1de')
email: "[email protected]"
transactionsByDay: {
    "2020-06-10": [
        {
            "shares": 100,
            "price": 20,
            "type": "buy",
            "equity_id": "petr4"
        },
        {
            "shares": 250,
            "price": 30,
            "type": "buy",
            "equity_id": "petr4"
        }
    ],
    "2020-07-10": [
        {
            "shares": 200,
            "price": 10,
            "type": "sell",
            "equity_id": "petr4"
        }
    ], ...
}

I tried an aggregation using a group operator but the result didn’t came as expected. Can someone give me a help to solve this?

Why doesn’t my useEffect go into an infinite loop when modifying it’s dependency?

Code

PrizeHistory.js

...

const PrizeHistory = () =>  {
  const [history, setHistory] = useState([]);

  useEffect(() => {

    async function getHistory () {
      try {
        let result = await sqliteInterface.getAllPrizes(db, prizeTable);
        result == null ? console.log("res is null") : setHistory(result);
        console.log("result" + result);
        console.log("history" + history);
      } catch (err) {
        console.log(err);
      }
    }

    getHistory();
  }, [history])

  return (
    <View style={styles.body}>
      <Text style={styles.text}>Prize History</Text>
    </View>
  );
}

getAllPrizes

getAllPrizes(db, tableName) {
    return new Promise((resolve, reject) => {
      db.transaction((tx) => {
        tx.executeSql(
          `SELECT * FROM ${tableName};`, 
          [],
          (tx, res) => {
            let len = res.rows.length;
            let results = [];  

            if(len > 0) {
              for(i = 0; i < res.rows.length; i++) {
                results.push(res.rows.item(i));
              }
            } 
            console.log("resolving promise now");
            resolve(JSON.stringify(results));
          },
          (error) => {
            reject(Error(`SQLite getAllPrizes: failed to get '*' from ${tableName}: ` + error));
          }
        );
      }); 
    });
  }

The goal

When the page is mounted, set the history state to the data in the database. I initially tried this:

  useEffect(() => {

    async function getHistory () {
      try {
        let result = await sqliteInterface.getAllPrizes(db, prizeTable);
        result == null ? console.log("res is null") : setHistory(result);
        console.log("result" + result);
        console.log("history" + history);
      } catch (err) {
        console.log(err);
      }
    }

    getHistory();
  }, [])

but it never set my history variable correctly. I just got an empty array (which is what I inistially set the history state to). I expected the history variable to be equal to the result variable in the history console.log(), but it’s not.

So I changed the useEffect() to this:

  useEffect(() => {

    async function getHistory () {
      try {
        let result = await sqliteInterface.getAllPrizes(db, prizeTable);
        result == null ? console.log("res is null") : setHistory(result);
        console.log("result" + result);
        console.log("history" + history);
      } catch (err) {
        console.log(err);
      }
    }

    getHistory();
  }, [history])

This code changes the history variable correctly, but I expected it to go into an infinite loop… but it didn’t? Here’s my logic

  1. useEffect() has [history] as dependency
  2. onMount, history is set to default value of []
  3. useEffect() sees history is set and begins running
  4. useEffect() resets history
  5. useEffect() should start again because it reset the history variable itself
  6. Repeat 3-5 infinitely…

But it does not repeat infinitely…

My Questions

  1. Why is useEffect() not running infinitely when [history] is set as its dependency
  2. Why is useEffect() not setting my history variable correctly on mount when it has [] as it’s dependency.

how to show youtube video in an html page with value received via json

I would like your help.
I have to insert a youtube video whose url is received via json; in particular with

document.getElementById("idframe").innerHTML=myJson.Items[4].value;

I get https://youtu.be/ILmvKC-H1l0

So far everything ok. To insert the youtube video in an html page I was following this tutorial.

I just can’t get what I want. I get a gray box with the words: It may have been moved, changed, or deleted.
Can you kindly help me?

<html>
    <head>
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <style></style>
    </head>
    <body>

    <div>
<div class="video"> <iframe id="idframe" width="420" height="345" src="myFunction()"> </iframe> </div> <br>

    <br>

    <script>

    function myFunction() {
      var xmlhttp = new XMLHttpRequest();
    var url = "https://vnwcn9gt89.execute-api.us-east-2.amazonaws.com/book"; 
    xmlhttp.onreadystatechange = function() {
      if (this.readyState == 4 && this.status == 200) {
       var myJson = JSON.parse(this.responseText);
       document.getElementById("idframe").innerHTML = myJson.Items[4].value;
      }
    };
    xmlhttp.open("GET", url, true);
    xmlhttp.send();
    }

    </script>


    </body>
    </html> 

Add interactive menu which moves a dot when user scroll down the page

I’m trying to create a small animated menu which would be positioned on the top of my one-page website. Page is organised as a book, so it would have chapters like introduction etc. as you scroll from top to bottom. My small menu would have one line and along this line would be names of chapters.There would also be a dot, and the dot would move along this line, and depending on which chapter have you positioned your browser, dot would move along and position itself accordingly. Also, if you click on the specific chapter on this menu, browser would automatically jump there, as well as the little dot. Problem is, I’m new to CSS/HTML/Javascript and I have difficulties in doing this. So far I managed to create a dot and names of chapters but I have issues in positioning them. For some reason, line I created won’t show but circle will.
So, to sum it up:

  1. create a horizontal line in the middle
  2. position dot at beginning of the line (Intro chapter)
  3. position names of chapters under the line on some regular intervals
  4. add logic which will follow which chapter is shown in the browser and move little dot accordingly
  5. add links to jump to specific part of the page when user clicks on specific chapter name in the menu (this part I know how to do)
.section{
    background:black;
    width: %100;
    /* center a div insie another div*/
    display: flex;
    flex-direction: row;
    flex-wrap: wrap;
    justify-content: center;
    align-items: center;
    height: 200px;
}

.circle {
    width: 5px;;
    height: 5px;
    margin: 10px;
    background: white;
    border-radius: 50%;
}

ul {
  display: flex;
}

li {
  color: white;
  transform: rotate(65deg);
  transform: translate (-30px,-30px);
  list-style-type: none;
}

.line {
  height 10px;
  width: 100%;
  transform: translate (50%,0);
}

.list {
  transform: translate(50%,50px);
}
<div class="section">
  <div class="list">
  <ul>
    <li>Intro</li>
    <li>Part 1</li>
    <li>Part 2</li>
  </ul>
  </div>
   <div class="circle"></div>
  <div class="line"></div>
</div>

How to import google form response into specific cells in an existing template

I am trying to create a user friendly way to fill out a questionnaire using google forms but import the responses into specific cells within an existing spreadsheet.

So, each child has their own spreadsheet that compiles their data. I have a template that lists each question and has a cell for a numeric response.

  • Currently, I have the spreadsheet set up where the parents select their numeric response from a scale: 0, 2, 4, 8, 10 using a dropdown per question. But there are over 100 questions, which is both time consuming on their end and would also give them access to additional data in “hidden sheets” from the clinicians, even if the sheets are protected from editing.

So, I am wanting to create a form that is connected to the client’s spreadsheet that the parents can fill out and their responses will be imported into the respective cells that match up with each question on the data sheet.

  • For example, if a parent selects a rating of “2” on the google form in response to a question of the level of independence of their child for question 1, I’d want their response of “2” to be reflected in the child’s respective data sheet in cell T16 within the template I have created.
  • Then the numeric response to question 2 would be reflected in cell T17.

However, the responses would not be continuous throughout the entire column (T). The responses would need to be in cells T16:T31, T38:T64, T71:T97, and continues on in blocks.

It would also need to import the child’s name and the submission date in respective cells as well.

An additional parameter: Each child has their own spreadsheet, so the link to the parent form would somehow need to be automatically connected to each child separately whenever a new copy of the data sheet was created. So that way an infinite number of children have their own dataset.

I hope that makes sense! Any help would be much appreciated! Please let me know if additional clarification is needed!

Next+Nextauth Get user’s session as a ServerSideProp

I’m trying to implement Facebook login and session by using nextauth in a next.js project.
once the user is authenticated I want to retrieve the session and pass it to my component as a server-side prop to avoid unnecessary load time

My […nextauth.js] file

import NextAuth from "next-auth"
import FacebookProvider from "next-auth/providers/facebook";

export default NextAuth({
  // Configure one or more authentication providers
  secret: process.env.SECRET,
  providers: [
    FacebookProvider({
      clientId: process.env.FACEBOOK_CLIENT_ID,
      clientSecret: process.env.FACEBOOK_CLIENT_SECRET,
    }),
    // ...add more providers here
  ],
})

I’ve double-checked my env variables FACEBOOK_CLIENT_ID FACEBOOK_CLIENT_SECRET NEXTAUTH_URL and SECRET

my _app.js file

import "../styles/globals.css";
import { SessionProvider } from "next-auth/react"

export default function App({
  Component, 
  pageProps: { session, ...pageProps }
}) {
  return (
    <SessionProvider session={session}>
      <Component {...pageProps} />
    </SessionProvider>
  )
}

In my index.js component, I’m handling the login

import { useSession, signIn, signOut,getSession } from "next-auth/react"
import Head from 'next/head'
import Header from '../components/Header'
import Login from '../components/Login'

export default function Home({session}) {
  if (!session) return <Login></Login>
  return (
    <div >
      <Head>
        <title>Facebook</title>
      </Head>
      <h1>Signed in as {session.user.email}</h1>
      <Header/>
      <main>
        {/* Sidebar */}
         {/* feed */}
         {/* widgets */}
      </main>
    </div>
  )
  
}
export async function getServerSideProps(context) {
  const session = await getSession(context)
  return {
    props: { session }
  }
}

In mi Login.js component I’m just using the signIn method provided by next auth

The thing is:

  1. When I try to retrieve the session by using getServerSideProps it doesn’t provide me a session and I cannot get to the home page, BUT if I instead use the custom hook inside the component, I get a session and everything works fine, but I think it is better if I pass the session as a serverside prop
const session = await getSession() //this works but is client-side
  • Is there something I’m missing out on? I’ve read the docs and followed the steps but it doesn’t quite work

  • besides Is there a difference between next-auth/react and next-auth/client?
    I have “next-auth”: “^4.0.0-beta.7” package installed in this proyect

If anyone could shed some light over this topic and on why I cant get the session as a serverSide prop I would be thankful.

sql php. Get id from other table then insert into table. I want to click the button then answer current question

<?php require_once('connection.php');  
session_start();

if (isset($_POST['Submit']))
{  
    $answ = $_POST['answ'];      
    $email = $_SESSION['email']; 


    $insert = "INSERT INTO answerList (answ,queID,email) SELECT questionList.queID FROM questionList   " ;
    $result = mysqli_query($con, $insert);
 
    if (!$result) {
        echo "<script>alert('ERROR !!!!! '); location='faq.php';</script>";
    }
    else {
        echo "<script>alert('Successful Post'); location='faq.php'; </script>";
    }
    


}
?> 

I have 3 table
table 1: users(email, password)
table 2: question(questionID, questionContent, email)
table 3: answer(answerID, answerContent, questionID, email)

how can i connect questionID into table 3?
i already do the login and add question sql . but how can i add the answer to current question with logged email?

a table have question. and each question have answer button

Filtering on multiple conditions using javascript filter

Before anyone calls duplicate please read it through first…

I was trying to use the filter function with multiple conditions but doesn’t seem to work and alot of solutions to this roughly come out to say I can do…

const data = [
    {CatalogID: -1, SectionID: 0},
    {CatalogID: 2, SectionID: 9},
    {CatalogID: 2, SectionID: 9},
    {CatalogID: -1, SectionID: 0},
    {CatalogID: -1, SectionID: 0},
    {CatalogID: 3, SectionID: 6},
    {CatalogID: 3, SectionID: 6},
    {CatalogID: -1, SectionID: 0},
    {CatalogID: 3, SectionID: 6}
]

data.filter(f=>f.SectionID == 6 && f.SectionID == 0 && f.CatalogID == -1)

let a = data.filter(function(e) {
        return e.SectionID == 6 && e.SectionID == 0 && e.CatalogID == -1
    });
console.log(a);

But those return empty… But when I loop through the data object, like this…

let holder = [];
for(let i = 0; i < data.length; i++){
    if(data[i].SectionID === 6 || data[i].SectionID === 0 || data[i].CatalogID === -1) holder.push(data[i]);
}
console.log(holder);
holder = [];

Then it does the job, but its not pretty.

Is there something glaringly obvious that is wrong with the code I provided, that is not popping out at me?

Large position replace using PHP string replace

It easy to replace a position of code from external website string but when it come to large than how can we replace it?

Code i want to replace :

<script data-cfasync="false" src="/cdn-cgi/scripts/5c5dd728/cloudflare-static/email-decode.min.js"></script><script nonce="d5951f1b7cde348759b0310ef405830a">
  window.RETROVISION = {
    "homepage": {
      "__render-farm": {"navi":{"variation":"logged_out","darwin":{"mono.corePages_indexController_transactionAccounts":false,"mono.navigation_web_moneyCenterTab":true,"mono.navigation_web_hideMyRecsBadge":false,"mono.taxhub_enabled":true,"mono.enableCardsInWallet":false,"mono.should_show_ciw_in_nav_cc_dropdown":false,"mono.tax_navbar_inseason":false,"mono.navigation_web_nativeUpsell":"control","mono.tax_hub_holdout":true,"autos.purchase_offers_navi_url_enabled":true,"js.cardsInWallet_holdout":false,"js.navi_voter_roadmap_isEnabled":false,"js.navi_voter_roadmap_text":"Voterx20Roadmap","js.reliefCenter_navbar_badge_text":"control","js.useNewLoginNavi":false,"savings.navbar_enabled":true,"mortgage.l1_link_in_authed_navi":true,"mortgage.l1_link_in_unauthed_navi":true,"savings.checking_be_eligibility_flag_v2":true,"savings.billpay_eligible":true,"mortgage.mweb_navi_new_dashboard_link":"new","coreProduct.dweb_stickyTopEnabled":false,"portals.reliefCenter_isEnabled":true,"portals.tax_nav_redirect_enabled":false,"portals.tax_surface_eligibility_unauth":true,"mono.tax_navbar_badge_text":"control","mono.tax_unauth_navbar_badge_text":"","navigation":{"web":{"isMobile":false}}},"version":"10.32.0","moduleName":"navi","bundleName":"navi-inline-retrovision.bundle.js","nonce":{"script":"d5951f1b7cde348759b0310ef405830a"}},"darwin":{"mono":{"homepage_version":"b","homepage_enable_criticalCss":true,"homepage_section_1":"kc_cc_pl_v1","homepage_section_2":"v1","homepage_section_3":"money","homepage_section_4":"v1","homepage_section_5":"v1","homepage_section_6":"v1","homepage_section_7":"v1","homepage_section_8":"v1","homepage_section_9":"v1"}},"navigation-web":{"darwin":{"coreProduct.scooter_mweb_notificationCenterEnabled":true,"coreProduct.scooter_dweb_navPlacement":"top","coreProduct.scooter_dweb_navCopy":"scooter","mono.tax_navbar_badge_text":"control","coreProduct.scooter_mweb_newNavIconsEnabled":false,"coreProduct.scooter_dweb_myRecsEnabled":false,"coreProduct.scooter_dweb_myRecsBadgeEnabled":false,"coreProduct.scooter_dweb_autoHomeEnabled":false},"platformInfo":{"platform":"Web","osType":null},"nonce":"d5951f1b7cde348759b0310ef405830a"},"ckRawTracker":{"enabled":true,"url":"https:x2Fx2Fcreditkarmacdn-a.akamaihd.netx2Fresx2Fcontentx2Fbundlesx2Fcfwk_raw-tracker-webx2F2.8.1x2Findex.js","hash":"sha384-LIWRux2Fmx2FCPYkQvDBx2B6CsmuSqzmdqkZg5VJavhsyvLG1Ly2iXMcOcy8TnMRV65K0O"},"footer":{"darwin":{"mono.geolocation":"hide"},"version":"4.9.8","moduleName":"footer","bundleName":"footer-retrovision.bundle.js","nonce":"d5951f1b7cde348759b0310ef405830a","location":{"country":"US","continent":"NA","subdivision":"OH","zipCode":"43215"},"domain":"US"},"zipkin":{"enabled":false},"request":{"tokens":{"accessToken":false,"refreshToken":false},"cookieId":"6AA3886FD63D41C9B5E1933E22065C85","params":{},"path":"x2F","fullPath":"https:x2Fx2Fwww.creditkarma.gqx2F","traceId":"3234806a-8570-4eec-bace-c58e2b462102"},"isScooter":false,"geoipData":{"country":"US","continent":"NA","subdivision":"OH","zipCode":"43215"},"nonce":"d5951f1b7cde348759b0310ef405830a","platformInfo":{"platform":"Web","osType":null}}
    }
  };
</script>

I want to replace whole code

My Code :

$cloudflare = '<script data-cfasync="false" src="/cdn-cgi/scripts/5c5dd728/cloudflare-static/email-decode.min.js"></script><script nonce="d5951f1b7cde348759b0310ef405830a">
  window.RETROVISION = {
    "homepage": {
      "__render-farm": {"navi":{"variation":"logged_out","darwin":{"mono.corePages_indexController_transactionAccounts":false,"mono.navigation_web_moneyCenterTab":true,"mono.navigation_web_hideMyRecsBadge":false,"mono.taxhub_enabled":true,"mono.enableCardsInWallet":false,"mono.should_show_ciw_in_nav_cc_dropdown":false,"mono.tax_navbar_inseason":false,"mono.navigation_web_nativeUpsell":"control","mono.tax_hub_holdout":true,"autos.purchase_offers_navi_url_enabled":true,"js.cardsInWallet_holdout":false,"js.navi_voter_roadmap_isEnabled":false,"js.navi_voter_roadmap_text":"Voterx20Roadmap","js.reliefCenter_navbar_badge_text":"control","js.useNewLoginNavi":false,"savings.navbar_enabled":true,"mortgage.l1_link_in_authed_navi":true,"mortgage.l1_link_in_unauthed_navi":true,"savings.checking_be_eligibility_flag_v2":true,"savings.billpay_eligible":true,"mortgage.mweb_navi_new_dashboard_link":"new","coreProduct.dweb_stickyTopEnabled":false,"portals.reliefCenter_isEnabled":true,"portals.tax_nav_redirect_enabled":false,"portals.tax_surface_eligibility_unauth":true,"mono.tax_navbar_badge_text":"control","mono.tax_unauth_navbar_badge_text":"","navigation":{"web":{"isMobile":false}}},"version":"10.32.0","moduleName":"navi","bundleName":"navi-inline-retrovision.bundle.js","nonce":{"script":"d5951f1b7cde348759b0310ef405830a"}},"darwin":{"mono":{"homepage_version":"b","homepage_enable_criticalCss":true,"homepage_section_1":"kc_cc_pl_v1","homepage_section_2":"v1","homepage_section_3":"money","homepage_section_4":"v1","homepage_section_5":"v1","homepage_section_6":"v1","homepage_section_7":"v1","homepage_section_8":"v1","homepage_section_9":"v1"}},"navigation-web":{"darwin":{"coreProduct.scooter_mweb_notificationCenterEnabled":true,"coreProduct.scooter_dweb_navPlacement":"top","coreProduct.scooter_dweb_navCopy":"scooter","mono.tax_navbar_badge_text":"control","coreProduct.scooter_mweb_newNavIconsEnabled":false,"coreProduct.scooter_dweb_myRecsEnabled":false,"coreProduct.scooter_dweb_myRecsBadgeEnabled":false,"coreProduct.scooter_dweb_autoHomeEnabled":false},"platformInfo":{"platform":"Web","osType":null},"nonce":"d5951f1b7cde348759b0310ef405830a"},"ckRawTracker":{"enabled":true,"url":"https:x2Fx2Fcreditkarmacdn-a.akamaihd.netx2Fresx2Fcontentx2Fbundlesx2Fcfwk_raw-tracker-webx2F2.8.1x2Findex.js","hash":"sha384-LIWRux2Fmx2FCPYkQvDBx2B6CsmuSqzmdqkZg5VJavhsyvLG1Ly2iXMcOcy8TnMRV65K0O"},"footer":{"darwin":{"mono.geolocation":"hide"},"version":"4.9.8","moduleName":"footer","bundleName":"footer-retrovision.bundle.js","nonce":"d5951f1b7cde348759b0310ef405830a","location":{"country":"US","continent":"NA","subdivision":"OH","zipCode":"43215"},"domain":"US"},"zipkin":{"enabled":false},"request":{"tokens":{"accessToken":false,"refreshToken":false},"cookieId":"6AA3886FD63D41C9B5E1933E22065C85","params":{},"path":"x2F","fullPath":"https:x2Fx2Fwww.creditkarma.gqx2F","traceId":"3234806a-8570-4eec-bace-c58e2b462102"},"isScooter":false,"geoipData":{"country":"US","continent":"NA","subdivision":"OH","zipCode":"43215"},"nonce":"d5951f1b7cde348759b0310ef405830a","platformInfo":{"platform":"Web","osType":null}}
    }
  };
</script>'
$homepage = file_get_contents("https://www.example.com");
$homepage = str_replace($cloudflare, "hello", $homepage);
echo $homepage;

Is it possible to replace like this?

$homepage = str_replace('<script data-cfasync=***/</script>', "hello", $homepage);

How to understand and solve stripe error?

In my tour.pug main head file this:

extends base
include _reviewCard
block append head
    script(src="https://api.mapbox.com/mapbox-gl-js/v2.6.1/mapbox-gl.js")
    link(href='https://api.mapbox.com/mapbox-gl-js/v2.6.1/mapbox-gl.css' rel='stylesheet')
    script(src='https://js.stripe.com/v3/')
    

In my stripe.js file:

const stripe = Stripe('pk_test_something...')

When I load I get error:

Refused to load the script ‘https://js.stripe.com/v3/’ because it
violates the following Content Security Policy directive: “script-src
https://cdnjs.cloudflare.com https://api.mapbox.com ‘self’ blob:”.
Note that ‘script-src-elem’ was not explicitly set, so ‘script-src’ is
used as a fallback.

After this I get mapbox error too:

Refused to connect to ‘ws://localhost:50364/’ because it violates the
following Content Security Policy directive: “default-src ‘self’
https://*.mapbox.com”. Note that ‘connect-src’ was not explicitly set,
so ‘default-src’ is used as a fallback.

I didnt understand what mean these errors and how to fix these issues. Thanks

Vue3 Multiple Highcharts

I’m new to Vue, and struggling to display multiple Highcarts on a Vue3 page using vue3-highcharts. I followed the Reactive Chart Example here, which works great, but I’m confused how to implement the chartOptions object for multiple charts using v-for.

A single chart using the following code works:

<vue-highcharts
    type="chart"
    :options="chartOptions"
    :redraw-on-update="true"
    :one-to-one-update="false"
    :animate-on-update="true"
    @updated="onUpdate"/>

and the associated setup / computed code

setup() {
          const seriesData = ref([25, 39, 30, 15]);
          const categories = ref(['Jun', 'Jul', 'Aug', 'Sept']);
    
          const chartOptions = computed(() => ({
            chart: {
              type: 'line',
            },
            title: {
              text: 'Number of project stars',
            },
            xAxis: {
              categories: categories.value,
            },
            yAxis: {
              title: {
                text: 'Number of stars',
              },
            },
            series: [{
              name: 'New project stars',
              data: seriesData.value,
            }],
          }));

I have tried multiple methods to use v-for to load multiple charts, here is the latest / most successful:

<vue-highcharts
  v-for="item in hmCharts"
  :key="item.id"
  :options="item.options"
  :redraw-on-update="true"
  :one-to-one-update="false"
  :animate-on-update="true"
  @rendered="onRender"
  @update="onUpdate"
  @destroy="onDestroy" />
  

const hmCharts = ref([
      {
        id: 'one',
        options: getChartoptions('one')
      },{
        id: 'two',
        options: getChartoptions('two')
      }])

 const seriesData  = [[0, 0, 10], [0, 1, 19], [0, 2, 8], [0, 3, 24], [0, 4, 67], [1, 0, 92], [1, 1, 58], [1, 2, 78], [1, 3, 117], [1, 4, 48], [2, 0, 35], [2, 1, 15], [2, 2, 123], [2, 3, 64], [2, 4, 52], [3, 0, 72], [3, 1, 132], [3, 2, 114], [3, 3, 19], [3, 4, 16], [4, 0, 38], [4, 1, 5], [4, 2, 8], [4, 3, 117]] 

    hmCharts.value[0].options.series[0].data = seriesData
    hmCharts.value[1].options.series[0].data = seriesData

This method will eventually load both charts, but it takes a full minute or more to load. I found the following error in the console:

runtime-core.esm-bundler.js?9e79:6620 [Vue warn]: Maximum recursive
updates exceeded. This means you have a reactive effect that is
mutating its own dependencies and thus recursively triggering itself.
Possible sources include component template, render function, updated
hook or watcher source function.

I have spent more time and research on this than I care to admit, and really hoping someone can help me understand what it happening here. Thanks!