Category: javascript

Category Added in a WPeMatico Campaign

Highcharts scatter chart Tooltip gets closed when i hover on tooltip

I have a scatter chart which is made using Highcharts and when I hover on each data points I am showing another chart inside the tooltip. when I hover on the tooltip about halfway from middle to top the tooltip is getting closed. also when I hover on the chart inside the tool tip the chart keeps re rendering. Please fnd attached code.

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <script src="https://code.highcharts.com/stock/highstock.js"></script>
<script src="https://code.highcharts.com/stock/modules/accessibility.js"></script>
</head>
<body>
    <div id="scatter_container" style="height: 90vh;"></div>

    <script>
        function renderChart(point) {
            (async () => {

                const data = await fetch(
                    'https://demo-live-data.highcharts.com/aapl-c.json'
                ).then(response => response.json());

                // Create the chart
                Highcharts.stockChart('hc-tooltip', {
                    rangeSelector: {
                        selected: 1
                    },

                    title: {
                        text: 'AAPL Stock Price'
                    },

                    series: [{
                        name: 'AAPL',
                        data: data,
                        tooltip: {
                            valueDecimals: 2
                        }
                    }]
                });
                })();
        }

        Highcharts.addEvent(
            Highcharts.Tooltip,
            'refresh',
            function () {
                renderChart(this.chart.hoverPoint);
            }
        );

        const series = [{
            name: 'Basketball',
            id: 'basketball',
            marker: {
                symbol: 'circle',
                width: 32,
                height: 32
            }
        }];

        async function getData() {
            // const response = await fetch(
            //     'https://www.highcharts.com/samples/data/olympic2012.json'
            // );
            const response = await fetch('https://api.jsonbin.io/v3/qs/65b8d298dc746540189dacb7');
            return response.json();
        }


        getData().then(data => {
            const getData = sportName => {
                const temp = [];
                data.record.forEach(elm => {
                    // if (elm.sport === sportName && elm.weight > 0 && elm.height > 0) {
                        temp.push([elm.height, elm.weight]);
                    // }
                });
                return temp;
            };
            series.forEach(s => {
                s.data = getData(s.id);
            });

            Highcharts.chart('scatter_container', {
                chart: {
                    type: 'scatter',
                    zoomType: 'xy'
                },
                title: {
                    text: 'Olympics athletes by height and weight',
                    align: 'left'
                },
                subtitle: {
                    text:'',
                    align: 'left'
                },
                xAxis: {
                    title: {
                        text: 'Height'
                    },
                    labels: {
                        format: '{value} m'
                    },
                    startOnTick: true,
                    endOnTick: true,
                    showLastLabel: true
                },
                yAxis: {
                    title: {
                        text: 'Weight'
                    },
                    labels: {
                        format: '{value} kg'
                    }
                },
                legend: {
                    enabled: true
                },
                plotOptions: {
                    series: {
                        stickyTracking: false
                    },
                    scatter: {
                        marker: {
                            radius: 2.5,
                            symbol: 'circle',
                            states: {
                                hover: {
                                    enabled: true,
                                    lineColor: 'rgb(100,100,100)'
                                }
                            }
                        },
                        states: {
                            hover: {
                                marker: {
                                    enabled: false
                                }
                            }
                        },
                        jitter: {
                            x: 0.005
                        }
                    }
                },
                credits:{
                enabled:false
                },
                tooltip: {
                    shared: true,
                    split: true,
                    stickOnContact: true,
                    useHTML: true,
                    headerFormat: '',
                    pointFormat: '<div id="hc-tooltip" style="width:320px;height:45vh;"></div>'
                },
                series
            });
        });
    </script>
</body>
</html>

what I am doing wrong?

Accessing and editing object keys in JavaScript

I want to access and edit a **nested ** key in the object (not the value but the key itself).

eg;

{
  "name": {
    "firstname": "Boba",
    "lastName": "Fett"
  }
}

For example I want to edit the name.firstname field to FullName as shown below;

{
  "name": {
    "FullName": "Boba",
    "lastName": "Fett"
  }
}

Using lodash, tried unsetting the key value pair and setting a new pair with the key changed but this will add the new pair to the end of the json, i want to preserve the order of the json.

Also note that the key may be nested several levels deep and i have the path to the key.
Are there any other libraries or other ways i can do this instead of using a recursive loop?

Im using JavaScript.

Thanks in advance:)

Is there a way in Prisma to create a field in multiple tables with a common sequence? (PostgreSQL)

I’m trying to create a field for several tables that will represent a common sequence.

I created a migration using npx prisma migrate dev --create-only. Then i added sequence creation and altered column.

migration file:

CREATE SEQUENCE global_custom_id_sequence INCREMENT 1 START 100;

-- AlterTable
ALTER TABLE "Section" ADD COLUMN     "custmId" INTEGER;

ALTER TABLE "Section" ALTER COLUMN "custmId" SET DEFAULT nextval('global_custom_id_sequence');

On the next migration prisma adds following:

-- AlterTable
ALTER TABLE "Section" ALTER COLUMN "custmId" DROP DEFAULT;
DROP SEQUENCE "global_custom_id_sequence";

Is there a way out of this situation so that Prisma does not delete fields and sequence?

alert shows twice in react js

I have a puzzle game and it shows an alert once you are finished and then a confirm window asking if you want to solve another one. The problem that it shows this twice. I tried changing my index.js and remove the StrictMode but then it shows me “ResizeObserver loop completed with undelivered notifications.” warning and the app doesn’t work like it was with StrictMode

my App.js

import React, { useState } from "react";
import "./App.css";
import "./puzzle.css";
import { JigsawPuzzle } from "react-jigsaw-puzzle/lib";
import "react-jigsaw-puzzle/lib/jigsaw-puzzle.css";
import catImg from "./cat.jpeg";
import elephantImg from "./elephant.jpg";
import carImg from "./car.jpg";
import kidsImg from "./kids.jpg";
import sheepImg from "./sheep.png";

const puzzleImages = [catImg, elephantImg, carImg, kidsImg, sheepImg];

function App() {
  const [imageIndex, setImageIndex] = useState(getRandomIndex());

  function getRandomIndex() {
    return Math.floor(Math.random() * puzzleImages.length);
  }

  const handlePlayAgain = () => {
    const confirmPlayAgain = window.confirm("Do you want to play another puzzle?");
    if (confirmPlayAgain){
    const newIndex = getRandomIndex();
    setImageIndex(newIndex);
}
else { 
    alert("Thank you for playing")
}
  };

  const handleSolved = () => {
    alert("Good job!");
    handlePlayAgain();
  };

  return (
    <>
      <h2 className="tag">Un-puzzle the pieces</h2>
      <JigsawPuzzle
        imageSrc={puzzleImages[imageIndex]}
        rows={2}
        columns={2}
        onSolved={handleSolved}
        className="jigsaw-puzzle"
      />
    </>
  );
}

export default App;

Index.js

import React from 'react';
import ReactDOM from 'react-dom/client';
import './index.css';
import App from './App';
import reportWebVitals from './reportWebVitals';

const root = ReactDOM.createRoot(document.getElementById('root'));
root.render(
  <React.StrictMode>
    <App />
  </React.StrictMode>
);

reportWebVitals();

Scope Issue in Browser Dev Tool when Debugging Javascript Code

I try deep diving into javascript behind the scenes and I am stuck at some point while debugging on Dev Tool on Browsers. Here is the story:

I have declare a block scope and inside that scope I have put one function declaration and a value. Since I am able to access that value inside that function, I couldn’t understand why I can’t see that value in the scope of the browser dev tool when my debugger inside of the function. Is there any idea about that?

{
  const a = 2;
  function abc() {
    console.log();
  }
  abc();
}

When the debugger inside of that function, the scope contains local and global scope. I expected there is also a block scope which contains variable I declared. However, when I write the code like that, I can see a block scope also when the debugger in that function.

{
  const a = 2;
  function abc() {
    console.log(a);
  }
  abc();
}

Modifying the context value in GraphQL resolvers

The Apollo Server docs state:

Resolvers should never destructively modify the contextValue argument. This ensures consistency across all resolvers and prevents unexpected errors.

I’d like some help unpacking this statement.

  1. “Never destructively modify” I guess means that you can add properties to the context, but not remove or mutate them?
  2. “Ensures consistency across all resolvers” I guess refers to situations where query resolvers are processed in parallel such that a context value could change unexpectedly mid-execution. But what about mutation resolvers which are processed in series – would it be safe to mutate the context in that case?

My issue is this:

  1. I load the authenticated user as part of the context initialisation function.
  2. I put the user object into the context to be used by resolvers.
  3. I have a setUserDetails mutation which can update the user.
  4. If I run a query with two mutations (e.g. setUserDetails followed by sendWelcomeEmail), the second mutation sees the original user details, not the updated ones unless I mutate the context.

This leads to “unexpected errors” which was the thing we were trying to avoid in the first place.

So my question is: is it OK to mutate the context in a mutation resolver? Or is there another recommended approach to avoid this issue?

I want the text to span the first clip path area only

I want the text to span the first clip path area only, without spanning to the right clip path. I have tried several tweaks to no avail. The text should be on top of the clip path not in the bottom of the container.

    .content {
        position: relative;
        z-index: 1;
        color: black;
        padding: 20px;
        margin: 0;
        box-sizing: border-box;
    }

    .text-container {
        position: relative;
        z-index: 2;
    }

    .content::before,
    .content::after {
        content: "";
        position: absolute;
        top: 0;
        bottom: 0;
    }

    .content::before {
        background-color: #0A76E3;
        clip-path: polygon(0 0, 59% 0, 46% 100%, 0 100%);
        left: 0;
        right: 0;
        z-index: -1;
    }

    .content::after {
        background-color: #ff4200;
        clip-path: polygon(100% 0, 100% 100%, 0 100%, 100% 0);
        right: 0;
        width: 20%;
    }
  <script src="https://cdn.tailwindcss.com"></script>
<div class="content h-screen">
    <div style="paddding-top: 22rem;" class='flex flex-row-2 pt-20 justify-start items-center px- mx-auto'>
        <div class="text-container flex flex-col justify-around w-g2/5">
            <div class="flex items-center justify-start gap-4 pb-4">
                <h2 class="text-6xl font-extrabold text-white">Who Are We</h2>
            </div>
            <h3 style="font-size: 1.5rem; background-clip: text; -webkit-background-clip: text; color: red; padding: 10px; display: inline-block; line-height: 1.5;" class="text-3xl space-y-4 z-50">We are an test payment test that allows users to securely make
                and receive payments through testtest phones over the testetses. From testetst to testetste, test test test, and
                everywhere else in test, we are a team of doers on a mission to improve the payment experience for everyone.</h3>
        </div>
        <img class="img w-2/6 absolute bottom-0 right-0 transform -translate-x-1/2" src="../media/images/computer.png" alt="image" />
    </div>
</div>

fallback the prompt to LLM if similarity score goes below threshold

How can I fallback the prompt to LLM without vectorStore context in case the similarity score goes below a certain threshold in ConversationalRetrievalQAChain in Langchain.js?

Here’s my code:

const retriever = filters ? vectorStore.asRetriever(1, filters) : vectorStore.asRetriever(1);

        const chain = ConversationalRetrievalQAChain.fromLLM(model, retriever, {
            memory
        });

Give a dynamically sized some space to the bottom of the screen

I have a <textarea> that gets its content height set dynamically based on its scrollHeight. The issue is that when the text pushes the screen down, the input is aligned at the bottom of the viewport.

The problem is that I have a counter slightly below the textarea, which becomes invisible unless scrolled down. Is there a way to set some spacing at the bottom where the typing happens so that the counter stays visible?

Here is my textarea resize script:

resizeTextarea() {
    this.inputElement.style.height = "auto";
    this.inputElement.style.height = (this.inputElement.scrollHeight) + 2 + "px";
}

Here is the HTML layout:

<div class="input-field" data-type="textarea">
    <textarea id="test" data-input></textarea>
    <label for="test">
        <span>Label name</span>
    </label>
    <div data-counter>
        <span data-current data-max></span>
    </div> 
    <div data-backdrop></div>
</div>

And here is my CSS:

.input-field textarea  {
    margin-top          : 2.8rem;
    z-index             : 3;
    width               : 100%;
    min-height          : 8rem;
    resize              : none;
    white-space         : pre-wrap;
    overflow            : hidden;
    / * Other styling ... * /
}

.input-field [data-backdrop] {
    position            : absolute;
    top                 : 0;
    left                : 0;
    width               : 100%;
    height              : 100%;
    z-index             : 1;
    / * Other styling ... * /
}

[data-counter] {
    position            : absolute;
    bottom              : 0.8rem;
    right               : 0.8rem;
    z-index             : 10;
    display             : flex;
    gap                 : 0.2rem;
    padding             : 0.2rem 0.4rem;
    / * Other styling ... * /
}

Image of how it should be:
Visible counter

Image how it is when scrolling:
Invisible counter

Click event listener is not working in dynamically created button [closed]

JAVASCRIPT:

    rows.forEach((rowData) => {
        const row = document.createElement("tr");

        for (const key in rowData) {
            const cell = document.createElement("td");
            cell.style.border = "2px solid black";

            if (key === "receipt") {
                const button = document.createElement("button");
                button.textContent = "Generate receipt";
                button.className = "button-91";
                if (rowData[key]) {
                    button.removeAttribute("disabled");
                } else {
                    button.setAttribute("disabled", "true");
                }
                console.log(button); //shows the buttons

                button.addEventListener("click",function(){
                    alert("hi"); //doesn't show anything when I click any of the button(s)
                })
                cell.appendChild(button);
            } else {
                cell.textContent = rowData[key];
            }
            row.appendChild(cell);
        }
        tbodyElement.appendChild(row);
     });

Running the function, I face an issue in the addEventListener(). It is not working in any of the dynamically created buttons. Where am I going wrong? Please guide me.

Javascript convert from string number to integer [duplicate]

I am creating an excel date format while I using JavaScript but I got stuck about convert string to integer.

function getCurrentDateFormat (date,errorValue, removeSecond, clientTimeZoneOffset) {

    if (date !== undefined && date !== null) {
        const currDate = new Date(date)

        const currDay = currDate.getDate()
        const currMonth = currDate.getMonth()
        const currYear = currDate.getFullYear()
        const currHour = currDate.getHours().toString().padStart(2,0)
        const currMinutes = currDate.getMinutes()
        const currSeconds = currDate.getSeconds()

        return currDay + "/" + currMonth + 1 + "/" + currYear + " " + currHour + ":" + currMinutes + ":" + currSeconds
 
    }
    else {
        return errorValue
    }

}

This function give me this result : 30/01/2024 9:27:24

I want to make hour like 09. When I try to make integer zero(0) disappear. How can fix this situation?

The right way to manipulate or delete elements of a backdraftjs component referenced by bdAttach?

How would you delete specific pieces of an element referenced via bdAttach?

Imagine ButtonRow is something that renders a bunch of Button elements.

class ButtonContainer extends Component {
    bdElements() {
        return e.div(
            e(ButtonRow, { bdAttach: myButtonRow })
        )
    }

    // delete all the Button components from theButtonRow
    clearTheButtons() {
        // this.myButtonRow.delChildren()  <-- does not work
        this.myButtonRow.innerHTML = ''; // works but is this OK?
    }
}

Reshaping Images (Square, Circle, Triangle, etc.) in Konva.js

I’m working on a project where I need to dynamically reshape images into various shapes like squares, circles, triangles, etc. using Konva.js. I’m familiar with basic image manipulation in Konva.js, but I’m unsure about how to achieve this specific task.

Could someone provide guidance on how to reshape images into different shapes using Konva.js? Any examples or code snippets would be greatly appreciated.

Thank you!

I am using below code for custom shape but every time i’ve to add sceneFunc without that there is any option.?

  var stage = new Konva.Stage({
      container: 'container', // ID of the container element
      width: 800,
      height: 600
    });

    // Create a layer
    var layer = new Konva.Layer();

    // Create an image object
    var patternImage = new Image();
    patternImage.src = 'https://via.placeholder.com/300x150'; // URL of the pattern image

    // Once the image has loaded, create the shape and set the fill pattern image
    patternImage.onload = function() {
      // Create a custom shape
      var shape = new Konva.Shape({
        x: 50,
        y: 50,
        sceneFunc: function(context) {
          context.beginPath();
          context.moveTo(20, 20);
          context.lineTo(220, 80);
          context.quadraticCurveTo(150, 100, 260, 170);
          context.closePath();
          context.fillStrokeShape(this);
        },
        fillPatternImage: patternImage, // Set the pattern image
        fillPatternRepeat: 'repeat' // Set the pattern repeat mode (repeat, repeat-x, repeat-y, no-repeat)
      });

      // Add the shape to the layer
      layer.add(shape);

      // Draw the layer
      stage.add(layer);
    };