Chart is compatible with Vue.js, although when I am fetching the api data from remote server via Fetch Api, Chart is recieving the data but not displaying it on window.

I have a template for fetching the data with default

<template>
    <Bar id="my-chart-id" :options="chartOptions" :data="chartData" />
</template>

<script>

import { Bar } from 'vue-chartjs'
import { Chart as ChartJS, Title, Tooltip, Legend, BarElement, CategoryScale, LinearScale } from 'chart.js'
import myToken from '../server/token'
import apiDataFetch from '../src/function/fetch'

ChartJS.register(Title, Tooltip, Legend, BarElement, CategoryScale, LinearScale)

export default {
    name: 'BarChart',
    components: { Bar },
    data() {
        return {
            items: [],
            query: 'year',
            type: 'closed_category',
            chartData: {
                labels: [],
                datasets: [{ data: [] }]
            },
            chartOptions: {
                responsive: true
            }
        }
    },
    methods: {
        async getData() {
            const options = {
                method: 'GET',
                headers: {
                    Authorization: `Bearer ${myToken}`,
                    'Content-Language': 'en',
                    'Content-Type': 'application/json'
                }
            }

            await apiDataFetch(`/admin/statistics/subscription?type=${this.query}`, options)
                .then(res => res.json())
                .then(res => {
                    let data = res.data.details
                    let dataset = this.chartData.datasets[0]

                    const chData = []

                    data.forEach(item => {
                        this.chartData.labels.push(item.dates.start)

                        this.items.push(item.items)
                    })


                    this.items.forEach(item => {
                        item.forEach(e => {
                            if (e.type === this.type) {
                                chData.push(e.count)
                            }
                        })
                    })
                    
                    dataset.data = [...chData]
                    console.log(dataset.data)
                })
        }
    },
    mounted() {
        this.getData()
    },
}

</script>

I have seen the chart components in dev tools and here is the data is shown, but not displayed in window.

![Here is the screenshot, sorry I could not find how to post the image normally]https://i.stack.imgur.com/iBV8G.png)

I have the below React app layout, where I want the div with id="messages" in the Chat.js component to be scrollable in the y-direction when the messages overflow the div. The contents of the page should always fit the height of the device screen so that only the inner div becomes scrollable when needed.

I read that I need to apply some fixed height in order to make this happen, but I want the height to always be 100% of the screen, and I can’t make it work by doing that. What’s the workaround?

My App.js:

import Chat from "./components/Chat";

function App() {
  return (
    <main className="font-display bg-slate-50">
      <div className="mx-96">
        <Chat />
      </div>
    </main>
  );
}

export default App;

My Chat.js component:

const Chat = () => {

...

return (
    <div className="flex flex-col items-center w-full h-full justify-between">
      <h1 className="text-3xl font-bold my-5">Golfdommer</h1>
      <div className="w-full">
        <div id="messages" className="flex flex-col h-full overflow-y-auto"> // <-----
          {messages.map((message, index) => {
            if (message.role === "user") {
              return <UserMessage key={index} text={message.content} />;
            }
            return <BotMessage key={index} text={message.content} />;
          })}
        </div>
        <form
          onSubmit={handleInputSubmit}
          className="flex flex-row w-full mb-5 mt-2"
        >
          <input
            className="border-2 rounded-md p-2 w-full"
            type="text"
            value={inputValue}
            onChange={(e) => setInputValue(e.target.value)}
          />
          <button type="submit">
            <PaperAirplaneIcon className="w-6 h-6 text-green-500" />
          </button>
        </form>
      </div>
    </div>
  );
};

export default Chat;

Here is the reference link of code

https://developer.mpesa.vm.co.mz/documentation/#restfull-api

generate the encrypted authorization Bearer from the API Key and the Public Key

import javax.crypto.Cipher;
import java.security.KeyFactory;
import java.security.PublicKey;
import java.security.spec.X509EncodedKeySpec;

// Download: https://commons.apache.org/proper/commons-codec/download_codec.cgi
import org.apache.commons.codec.binary.Base64;

public class Main {

    public static void main(String[] args) {
        String publicKey = "MIICIjANBgkqhkiG9w0BAQEFAAOCAg8AMIICCgKCAgEAszE+xAKVB9HRarr6/uHYYAX/RdD6KGVIGlHv98QKDIH26ldYJQ7zOuo9qEscO0M1psSPe/67AWYLEXh13fbtcSKGP6WFjT9OY6uV5ykw9508x1sW8UQ4ZhTRNrlNsKizE/glkBfcF2lwDXJGQennwgickWz7VN+AP/1c4DnMDfcl8iVIDlsbudFoXQh5aLCYl+XOMt/vls5a479PLMkPcZPOgMTCYTCE6ReX3KD2aGQ62uiu2T4mK+7Z6yvKvhPRF2fTKI+zOFWly//IYlyB+sde42cIU/588msUmgr3G9FYyN2vKPVy/MhIZpiFyVc3vuAAJ/mzue5p/G329wzgcz0ztyluMNAGUL9A4ZiFcKOebT6y6IgIMBeEkTwyhsxRHMFXlQRgTAufaO5hiR/usBMkoazJ6XrGJB8UadjH2m2+kdJIieI4FbjzCiDWKmuM58rllNWdBZK0XVHNsxmBy7yhYw3aAIhFS0fNEuSmKTfFpJFMBzIQYbdTgI28rZPAxVEDdRaypUqBMCq4OstCxgGvR3Dy1eJDjlkuiWK9Y9RGKF8HOI5a4ruHyLheddZxsUihziPF9jKTknsTZtF99eKTIjhV7qfTzxXq+8GGoCEABIyu26LZuL8X12bFqtwLAcjfjoB7HlRHtPszv6PJ0482ofWmeH0BE8om7VrSGxsCAwEAAQ==";
        String apiKey = "aaaab09uz9f3asdcjyk7els777ihmwv8";

        System.out.println(getBearerToken(apiKey, publicKey));
    }

    private static String getBearerToken(String apiKey, String publicKey) {
        try {
            KeyFactory keyFactory = KeyFactory.getInstance("RSA");
            Cipher cipher = Cipher.getInstance("RSA");
            byte[] encodedPublicKey = Base64.decodeBase64(publicKey);
            X509EncodedKeySpec publicKeySpec = new X509EncodedKeySpec(encodedPublicKey);
            PublicKey pk = keyFactory.generatePublic(publicKeySpec);

            cipher.init(Cipher.ENCRYPT_MODE, pk);
            byte[] encryptedApiKey =  Base64.encodeBase64(cipher.doFinal(apiKey.getBytes("UTF-8")));

            return new String(encryptedApiKey, "UTF-8");
        } catch (Exception e) {
            System.out.println(e.getMessage());
        }

        return null;
    }
}
```nodejs
I already try the below code but it was not working 

    const ecKeyUtils = require('eckey-utils');
    var crypto = require('crypto');
    const curveName = 'secp256k1';
    const pems = ecKeyUtils.generateDer({curveName, publicKey: publicKeyString});
    var publicKey = pems.publicKey
    
    const { generateKeyPair } = require('crypto');
    generateKeyPair('rsa', {
      modulusLength: 4096,
      publicKeyEncoding: {
        type: 'pkcs1',
        format: 'pem'
      },
      privateKeyEncoding: {
        type: 'pkcs1',
        format: 'pem',
        cipher: 'aes-256-cbc',
        passphrase: "aaaab09uz9f3asdcjyk7els777ihmwv8"
      }
    // Handle errors and use the generated key pair
    }, (err, publicKey, privateKey) => {
      console.log(err, publicKey, privateKey)
      publicKey
    });
    
    const publickKeyObject = crypto.createPublicKey(publicKey);
    publickKeyObject.export({ format: 'pem', type: 'pkcs1' });
    console.log(publickKeyObject)

error – node:internal/crypto/keys:607handle.init(kKeyTypePublic, data, format, type, passphrase);
Error: error:1E08010C:DECODER routines::unsupportedat Object.createPublicKey (node:internal/crypto/keys:607:12)at Object. (E:reactTestnodetestindex.js:195:33)at Module._compile (node:internal/modules/cjs/loader:1159:14)at Module._extensions..js (node:internal/modules/cjs/loader:1213:10)at Module.load (node:internal/modules/cjs/loader:1037:32)at Module._load (node:internal/modules/cjs/loader:878:12)at Function.executeUserEntryPoint [as runMain] (node:internal/modules/run_main:81:12)at node:internal/main/run_main_module:23:47 {library: ‘DECODER routines’,reason: ‘unsupported’,code: ‘ERR_OSSL_UNSUPPORTED’}

I have two separate layout in a app called Admin Layout and User Layout.
Two layouts has different routes and different view.
Specifically when I am rendering User layout, I am getting these issues.
In admin layout Its working fine.

Here is my index.js

root.render(
    <React.StrictMode>
        <Router>
            <App />
        </Router>
    </React.StrictMode>
);

Here is my App Js

const [roleGroup] = useState('user');

return (
   <div>
      { roleGroup === 'user' && <UserLayout /> }
      { roleGroup === 'admin' && <AdminLayout /> }
   </div>
);

here is my UserLayout

<>
  <Navbar />
  <Suspense fallback={<></>}>
     <Routes>
       {
        commonRoutes.map((route, index) =>
         <Route
          key={index}
          exact={route.exact}
          path={route.path}
          element={route.element}
         />
        )}
    </Routes>
 </Suspense>
</>

I guess In Admin layout there is no problem cause when i change role to user this issue happens.
what is the issues in my code?

I explained everything in problem section. Firstly I keep router in my Index.js.

I have several similar elements that are defined as follows:

<script>
const el1 = ref()
const el2 = ref()
const el3 = ref()
</script>

<template>
<h1 ref="el1"></h1>
<h1 ref="el2"></h1>
<h1 ref="el3"></h1>
</template>

I want to combine all of ref elements into a new reactive variable, and use their attributes.

What is the best approach for handling this?

I have a few divs, which follow cursor and cursor itself is hidden. I also have custom scrollbar, created via basic -webkit-scrollbar thing. When I hover my custom cursor over my custom scrollbar it goes under it, but I want it to go over scrollbar. How do I do that? z-index seems to have no effect

I tried implementing z-index thing, but it did not work

Here are photos of my Problem: https://imgur.com/a/EbL8iZD

I created a grid called gridbox, in there are severals items called “box0-8”.
Everytime I put a text in the box onclick, it gets bigger in the x axis although I used 1fr 1fr 1fr.

// this is my html
<section class="gridbox">
    <div id="field0" class="box0 A D G" onclick="check()"></div>
    <div id="field1" class="box1 A E H" onclick="check()"></div>
    <div id="field2" class="box2 A F" onclick="check()"></div>
    <div id="field3" class="box3 B D" onclick="check()"></div>
    <div id="field4" class="box4 B E G H" onclick="check()"></div>
    <div id="field5" class="box5 B F" onclick="check()"></div>
    <div id="field6" class="box6 C D H" onclick="check()"></div>
    <div id="field7" class="box7 C E" onclick="check()"></div>
    <div id="field8" class="box8 C F G" onclick="check()"></div>
</section>

// This is my CSS gridbox and one container of it
.gridbox{
width: 400px;
height: 400px;
display: grid;
grid-template-colums: repeat(3, 1fr);
grid-template-rows: repeat(3, 1fr);
border: 3px solid #484848;
margin-left: auto;
margin-right: auto;
margin-top: 30px;
cursor: pointer;
}
.box0{
grid-row-start: 1;
grid-row-end: 2;
grid-column-start: 1;
grid-column-end: 2;
border: 1px solid #484848;
background-color: #fff;
font-size: 80px;
color: black;

In my opinion the text should not increase after all of I read in the forums, I need help.

export const Columns = [
    {
        Header:"Id",
        // accessor:'id',
        columns:[
            {
                Header:'Id1',
                accessor:'id'
            },
            {
                Header:'Id2',
                // accessor:'id'
            },
        ]
    },
    {
        Header:"First Name",
        accessor:'first_name',
        colSpan:2
    },
    {
        Header:"Last Name",
        accessor:'last_name'
    },
    {
        Header:"Email",
        accessor:'email'
    },
    {
        Header:"Gender",
        accessor:'gender'
    }
]

This logic for reder the table data using react-table liberay i need to remove the empty header above the First Name, Last Name , Email and Gender. for reference i attached an image belowenter image description here.

I tried to render the data using react table and when i have a sub column for id , i got empty headers for rest of the columns now in order to remove the empty headers what should i do.

I’m trying to make a validation SKU of this product, showing an alert message. Before, I had the same problem in another situation.

     <?php foreach($dvdLists as $key => $dvdList) { ?>   
         <p class="sku-validator-dvd" style="visibility:hidden;"><?= $dvdList->sku ?></p>
     <?php } ?>

I tried to do the same solution with each function but doesn’t work. I need to get each SKU product to make a comparison with the SKU input. Doing this that way I can only get the first one. The second forward doesn’t work.

     $('#save_product').click(function(e){
         var skuInput = $.trim($('#sku').val());
         if(skuInput  ===  $('.sku-validator-dvd').text()) {
             alert('This sku already exists');
         }
     });

Hey I want to send user role(using Spatie) as props with backend in every route to show different views based on role and permissions in Vuejs.

<!-- Navigation Links -->
<div v-if="user.role == 'admin'" class="hidden space-x-8 sm:-my-px sm:ml-10 sm:flex max-w-xl md:max-w-7xl flex-wrap justify-around">
<NavLink :href="route('dashboard')" :active="route().current('dashboard')">
                                    Dashboard
</NavLink>
</div>

even if could send user role in every route by a middleware or something like that would be good.

do you have any idea?

I am using here maps for javascript 3.1. Is there a way to cancel or interrupt loading here maps? In real time scenario this will happen on clicking back button. When routing back to previous page, here maps are still loading in the background.

I tried with dispose() method but it’s not supported.

var platform = new H.service.Platform({
  apikey: 'YOUR_API_KEY'
});

// Load map asynchronously
var maptypes = platform.createDefaultLayers();
var map = new H.Map(
  document.getElementById('mapContainer'),
  maptypes.vector.normal.map,
  {
    zoom: 10,
    center: { lat: 52.5, lng: 13.4 }
  }
);

// Cancel map loading
platform.dispose();

I am getting this error while running my feature file don’t know what’s wrong sharing the screenshots below

I am building a demo movie app so I decided to assign onclick events with a function that gets me some movie related data.
The problem arises when I click on the target links I want to work on, giving me back an undefined function.
Here’s the code:

<li>
   <a href="index.html" language-id=${idLanguage} onclick="getMovieList(with_original_language=${idLanguage},${language} )">${language}</a>
</li>

When I inspect my links they do have the given arguments but if I click on them, then it says my function is undefined so I cannot get the values back.
Why is that ?

I tried the method window.onload expecting to load the function beforehand and get it as defined,but still it did not work.

Hi this is a question about any method can implement a cardview with gridjs,
I know the “html” config in cell, but it seems not correct…
I need your help! thanks sir

I create a jsfiddle that try on it. I tried many method, still fail

new gridjs.Grid({
    columns: ["Name", "Email", "Phone Number"],
    data: [
        ["John", "[email protected]", "(353) 01 222 3333"],
        ["Mark", "[email protected]", "(01) 22 888 4444"],
        ["Eoin", "[email protected]", "0097 22 654 00033"],
        ["Sarah", "[email protected]", "+322 876 1233"],
        ["Afshin", "[email protected]", "(353) 22 87 8356"]
    ],
    search: true
}).render(document.getElementById("grid"));

I’m trying to code my own website, fully handmade but i have a small issue. I would like to add on my website few html5 videos with the basic player.

To hide the controls, and make something clean, I added a quick js script so : when the user clicks on the thumbnail (the poster of the video), the video starts. However, I would’ve liked to add to that, when the user clicks, it also add the controls attributes of the video in question to be able to use the fullscreen or advance in the video.

So, here is my script for now :

        jQuery( document ).ready(function($) {
            $('.myHTMLvideo').click(function() {
                this.paused ? this.play() : this.pause();
            });
        });

And then, I would like that when “onclick”, we add the attribute controls in my to be able to play with the video, and when I click again, it can potentially disappear.

I had already tried a previous script, but when I clicked on a video, it displayed the controls on all my videos on the same page…

Let me know what is the best option for you guys …
And thanks for you help, of course !