javascript – Page 3243 – Blancer.com Tutorials and projects

How do I return the name of the country from world map in D3?

I am wondering how I can get the country name returned from the D3 world map when I click on it. I have tried inspecting the DOM but I cant seem to figure out how the country name, code, or population gets linked to the mapping.

The template is ripped from here
https://d3-graph-gallery.com/graph/choropleth_basic.html

<!DOCTYPE html>
<meta charset="utf-8">

<!-- Load d3.js -->
<script src="https://d3js.org/d3.v6.js"></script>

<!-- Create an element where the map will take place -->
<svg id="my_dataviz" width="400" height="300"></svg>

<script>

    // The svg
    const svg = d3.select("svg"),
      width = +svg.attr("width"),
      height = +svg.attr("height");
    
    // Map and projection
    const path = d3.geoPath();
    const projection = d3.geoMercator()
      .scale(70)
      .center([0,20])
      .translate([width / 2, height / 2]);
    
    // Data and color scale
    let data = new Map()
    const colorScale = d3.scaleThreshold()
      .domain([100000, 1000000, 10000000, 30000000, 100000000, 500000000])
      .range(d3.schemeBlues[7]);
    
    // Load external data and boot
    Promise.all([
    d3.json("https://raw.githubusercontent.com/holtzy/D3-graph-gallery/master/DATA/world.geojson"),
    d3.csv("https://raw.githubusercontent.com/holtzy/D3-graph-gallery/master/DATA/world_population.csv", function(d) {
        data.set(d.name, d.code, +d.pop)
    })
    ]).then(function(loadData){
        let topo = loadData[0]
    
    

      let mouseClick = function(d) {
        d3.selectAll(".Country")
        .transition()
          .duration(200)
          .style("opacity", .8)
        d3.select(this)
          .transition()
          .duration(200)
          .style("stroke", "transparent")
        console.log(this.name)
        
      }
    
        // Draw the map
      svg.append("g")
        .selectAll("path")
        .data(topo.features)
        .join("path")
          // draw each country
          .attr("d", d3.geoPath()
            .projection(projection)
          )
          // set the color of each country
          .attr("fill", function (d) {
            d.total = data.get(d.id) || 0;
            return colorScale(d.total);
          })
//          .on("click", mouseClick )
    })
    
    </script>

Nested transclude within Web Component (AngularElement)

I am trying to mix up Angular and AngularJS using AngularElement

I know about ngUpgrade, and I do not want to use it

The basic idea is to replace some AngularJS components progressively without modifying all the code at once.
Thus, I have a library of AngularJS library, and I try to see what are the limit to transform it as a Angular wrapper.

I have created a component in Angular:

<div>
    <div class="test1">
        <ng-content select="[test1]"></ng-content>
    </div>
</div>

I use AngularElement to be able to use the component in Angular JS with the tag <test-element>

Then, I have the component in AngularJS

<div>
    <js-component>
        <test-js>Hello World</test-js>
    </js-component>
</div>

The js-component is the AngularJS Wrapper I wanna use.
Thus, to connect the transclude part of AngularJS and Angular I made:

<test-element>
    <span test1>
        <div ng-transclude="testJs"></div>
    </span>
</test-element>

So far, I also tried different options

by investing the span and the div of my js-component.
Using only one DOM element with both test1 and ng-transclude="testJs"
Adding the ng-transclude at some other place in the component and moving it using JS Script.
None of the options work.
The current one (the first one presented above) raises an issue with $timeout of AngularJS (probably at refresh time of the window?)
The current issue is about linking

In this context, I work with Angular and AngularJS, but it is similar I think to AngularJS and WebComponent.

Do you know if it is possible to use nested transclusion from AngularJS to a WebComponent that will transclude the result into its own context (the solution can imply more components and JS code)

HTML Tag resets to default lang in some pages

Html Tag in All pages
Html tag is having dir and Lang set for all the pages. in App.js
but it resets to lang “en-US” in some pages.

like this:-
Html tag in one page where it is occuring

How it gets reset?
Is it a re-rendering issue or component’s screen issue?
Is it the library react-helmet-async issue?

This i have written in App.js.

FYI:- languageVal changes only once not in all components or screens.

App.js

<LocaleContext.Provider value={{ locale, setLocale }}>
        <Suspense fallback={<Loader />}>
        <HelmetProvider>
        <Helmet>
             <html lang={languageVal}  dir={ languageVal === "ar-AE" ? "rtl" : "ltr"}/>
             </Helmet>
        </HelmetProvider>
        
            <div className="App">{route}</div>
        </Suspense>
     </LocaleContext.Provider>

my sweet alert hiding after my page what should i have to do the sweet alert msg will hide my page instead of hiding

I have to pop up a form when I click on the submit button in my form the sweet alerts fire but I saw them hiding under my form, I wanted them not to be hidden but I wanted them to looks like as pop up

try on my index page where I wanted to add Contact Us page as pop up in side pencils symbol

Route Redirection prevention in MultiFrontend App

I have multifront-end app where some of Navigation Menu is in another repo while the app i was working is in angular,when there are unsaved changes in the app i worked i want to prevent redirection to other navigation menu which is in another repo.for the app i was working i was able to do so using canDeactivate guard.but same guard not works for menu which is not part of my angular app.

please suggest on this.

want suggestion to prevent redirection to other menus which are out of my angular project repo .
checked canDeactivate guard for same but no lucks

ModelPage function is receiving null parameters; how to remedy this?

I’m currently learning how to pass values to a Post method using AJAX to no avail; this is in .NET Core 6 Razor Pages and here are the codes.

Front end:

function calculateSalary() {

    var dropdown = document.getElementById("industryDropdown");
    var selectedOption = dropdown.options[dropdown.selectedIndex];

    var industryrange1, industryrange2;

    industryrange1 = selectedOption.getAttribute('data-range1');
    industryrange2 = selectedOption.getAttribute('data-range2');

    var range1Value = String(industryrange1);
    var range2Value = String(industryrange2);

    console.log(range1Value);
    console.log(range2Value);

    try {


        $.ajax({
            type: 'POST',
            headers: {RequestVerificationToken: $('input:hidden[name="__RequestVerificationToken"]').val()},
            url: '/Index?handler=Calculate', // Replace with the actual path to your Razor Page method
            contentType: 'application/json;charset=utf-8',
            dataType: 'json',
            data: JSON.stringify({ range1: range1Value, range2: range2Value }),
       
            success: function (result) {
                // Update the value of the textbox with the result
                console.log(result);
                $('#Message').val(result);
            },
            error: function (error) {
                alert('Error:', error);
            }
        });

    }

    catch (error) {

        console.error(error);
    }

}

When a button is clicked, this AJAX method passes 2 values to a function in the Model page. The Model function in question is as follows:

public IActionResult OnPostCalculate([FromBody] string range1, [FromBody] string range2)
{


    var monthly_credit = employeeRepository.GetContribution(range1, range2);

    foreach (var credit in monthly_credit)
    {
        Message = $"SSS Contribution = {credit}";
    }

    return new JsonResult(Message);


}

Ideally, this function will pass the received values from AJAX and send it to another function that handles data retrieval from an SQL table, put the value in the string Message variable, and have that string be displayed in a textbox in the website.

The SQL function code is as follows:

public IEnumerable<SSS> GetContribution([FromBody] string range1, [FromBody] string range2)
{
    double parsedRange1 = double.Parse(range1);
    double parsedRange2 = double.Parse(range2);

    
    //SQL code that returns values from tables
}

Problem and Solutions I’ve tried

The reason I didn’t include the SQL code is because the parameters being received by the model and SQL functions are null. I found during debugging that:

there are no Javascript errors in website console
the data being sent by AJAX has value and is correct; the console.log commands and Network tab under Payload Request even displays them
the null exception is triggered by the SQL function and not the previous ones; somehow range1 and range2 values in AJAX become null after being sent

I’ve tried running the code with and without [FromBody] and JSON.stringify, put [HttpPost] on the model function and still the same error.

Any help on how to remedy this is greatly appreciated.

CryptoJS.SHA256 AccountNumberBase64 InitializationVector Key

I was recently searching for a way to decrypt the SHA256 algorithmn; (I know people say its a hash and its irreversible). However I found a code on thinbug.com where they used the CryptoJS.AES.decrypt function with a key and iv on a SHA256 Encryption.
The accountNumberBase64 variable key seemed to be in hexdecimal or byte array format.
If anyone knows how to recover a previous saved version of a file that has many previous saved versions; then please let me know; or if anyone knows the accountNumber and InitializationVector for the Sha256 algortihmn; please help me out.

SVG event bubbling from included images through tags

I am writing a diagramming tool in HTML/CSS/Javascript and using SVG for the drawing canvas. The tool has a specific set of “building blocks” that can be placed on the canvas (i.e., not free-hand drawing of arbitrary shapes).

I have SVG icons created for my custom building blocks. Each block is a square shape. A standard decision box symbol is shown below for example:

The circle is an input to the decision box. The green square on the right is the conditional true path and the red square in the bottom is the conditional false path.

Here is an example of a generic process block.

Scenario: Suppose I have placed two blocks on the canvas and want to draw a connection between the two. Connections can be drawn only between restricted junction points. For e.g., an output of a previous block can be connected to an input of a subsequent block.

As far as I understand, SVG doesn’t load external javascript files when the SVG file is included using the <svg:image href="path/to/file.svg" /> tag. So, if I want to handle a click event in a junction point (i.e, the colored circle or square representing the input/output), if I add the click event handler inside the individual svg icon file, there is duplication of code across icons.

Secondly, the canvas (i.e., svg element in the main HTML) is the one that is aware of the multiple blocks placed on it and can enforce the creation of valid connections. For e.g., handling the mouseup event and checking if a valid connection has been made and if so, rendering it on the canvas (or showing visual cues to the user such as changing the color of the connection to display valid/invalid connection).

Questions:

Is there a way to organize the Javascript code for the click event handlers by avoiding duplication across the individual icon files?
If an individual icon handles the click events on the junction points, how does one bubble up that event back to the canvas (i.e., svg element) containing the icon embedded through an <image> element?

How to obtain multiple Email addresses for API testing?

Before you read this question, I apologize for not being fluent in English. I hope for your understanding.

I’m a front-end developer using React, currently working on implementing the Sign-Up function.
To achieve this, I need to connect to the Sign-up API and Email-verify API.

During the testing phase of these APIs, I require email addresses.
However, once an email is used for testing the API, it becomes unavailable for further use as the account is already registered and verified.
So, to test APIs many times, I need many email addresses.

Is there a way to obtain multiple emails for testing APIs?
Can I use temporary or virtual email addresses for testing purposes?

Thank you for taking the time to read my question.

MS EDGE BROWSER, Scroll event is fired when pasting action

I were searched this problem but seem like there is no information on the Google.
The problem is as the title.
Scroll Event is fired after pasting Action.

p/s: When I added onScrollFun to the div by “onscroll” property, it is not fired when pasting anymore

[enter image description here](https://i.stack.imgur.com/ggic0.png)
please help

<!DOCTYPE html>
<html>
<head>
<style>
div {
  border: 1px solid black;
  width: 500px;
  height: 400px;
  overflow: scroll;
}
</style>
</head>
<body>
<h1>The onscroll Event</h1>
<p>Try the scrollbar in div.</p>

<div id="scrollDiv">
In my younger and more vulnerable years my father gave me some advice that I've been turning over in my mind ever since.
<br><br>
<input onPaste=onPaste(event) />
'Whenever you feel like criticizing anyone,' he told me, just remember that all the people in this world haven't had the advantages that you've had.'
<input onPaste=onPaste(event) />
'Whenever you feel like criticizing anyone,' he told me, just remember that all the people in this world haven't had the advantages that you've had.'
<input onPaste=onPaste(event) />
'Whenever you feel like criticizing anyone,' he told me, just remember that all the people in this world haven't had the advantages that you've had.'
<input onPaste=onPaste(event) />
'Whenever you feel like criticizing anyone,' he told me, just remember that all the people in this world haven't had the advantages that you've had.'
<input onPaste=onPaste(event) />
'Whenever you feel like criticizing anyone,' he told me, just remember that all the people in this world haven't had the advantages that you've had.'
<input onPaste=onPaste(event) />
'Whenever you feel like criticizing anyone,' he told me, just remember that all the people in this world haven't had the advantages that you've had.'
<input onPaste=onPaste(event) />
'Whenever you feel like criticizing anyone,' he told me, just remember that all the people in this world haven't had the advantages that you've had.'
<input onPaste=onPaste(event) />
'Whenever you feel like criticizing anyone,' he told me, just remember that all the people in this world haven't had the advantages that you've had.'
<input onPaste=onPaste(event) />
'Whenever you feel like criticizing anyone,' he told me, just remember that all the people in this world haven't had the advantages that you've had.'
<input onPaste=onPaste(event) />
'Whenever you feel like criticizing anyone,' he told me, just remember that all the people in this world haven't had the advantages that you've had.'
<input onPaste=onPaste(event) />
'Whenever you feel like criticizing anyone,' he told me, just remember that all the people in this world haven't had the advantages that you've had.'
<input onPaste=onPaste(event) />
'Whenever you feel like criticizing anyone,' he told me, just remember that all the people in this world haven't had the advantages that you've had.'
<input onPaste=onPaste(event) />
'Whenever you feel like criticizing anyone,' he told me, just remember that all the people in this world haven't had the advantages that you've had.'
<input onPaste=onPaste(event) />
'Whenever you feel like criticizing anyone,' he told me, just remember that all the people in this world haven't had the advantages that you've had.'
<input onPaste=onPaste(event) />
'Whenever you feel like criticizing anyone,' he told me, just remember that all the people in this world haven't had the advantages that you've had.'
<input onPaste=onPaste(event) />
'Whenever you feel like criticizing anyone,' he told me, just remember that all the people in this world haven't had the advantages that you've had.'
</div>


<p>Scrolled <span id="demo">0</span> times.</p>

<script>
let x = 0;
let scrollDiv = document.getElementById("scrollDiv");
function onScrollFunc(event) {
  console.log("Scrolling", event);
}
scrollDiv.addEventListener("scroll", onScrollFunc);
function onPaste(event) {
    console.log("PASTED", event);
}
</script>

</body>
</html>

scroll event is not fired when pasting action

Oracle Apex page loading and Refresh the Region

(oracle apex)
hello every one
i have a problem i create an application a parameter based report
and placed a button to submit page
when i closed the application and again open all the previous data is still appear
i want that every time when i open the application all the regions clean
and when i submit the page after select parameters my data should appear.

when i closed the application and again open all the previous data is still appear
i want that every time when i open the application all the regions clean
and when i submit the page after select parameters my data should appear.

How to create a vite react project by yarn version 4.0.1 or version 4.0.2?

If I enable the corepack, I can see version 1.22.19 of yarn but I want to use yarn 4.0.1 or 4.0.2?
How can I do it?

Please help me. Thanks for advance.

Remove blank space underneath polar bar chart in Highcharts

I have a polar chart that I’ve created in Highcharts, which goes from -90 to 90 degrees:

There’s a large field of blank space underneath it, I’m assuming because the container is still accounting for a full circle, rather than a half circle.

How can I remove this field of blank space so that the Highcharts logo and the “This text should be right underneath the graph” string is right underneath the graph?

I’ve created a JS fiddle with the code here: https://jsfiddle.net/1ujbmypx/2/, but I’ll include the code below as well:

HTML:

<script src="https://code.highcharts.com/highcharts.js"></script>
<script src="https://code.highcharts.com/highcharts-more.js"></script>
<div id="container"></div>
<div>This text should be right underneath the graph.</div>

JavaScript:

Highcharts.chart("container", {

    chart: {
    type: "bar",
    polar: true
  },
  
  title: {
      text: undefined
  },
  
  pane: {
    startAngle: -90,
    endAngle: 90,
    size: "100%"
  },
  
  legend: {
    enabled: false
  },
 
  
  series: [{
    data: [
    {y: 30}, {y: 20}, {y: 25}
    ]
  }]

})

microsoft.clearscript.v8 in use promise but this code in error return

In this code I am using microsoft.clearscript.v8 library in c# (asp .net core mvc)

how to solve this error ‘((Microsoft.ClearScript.ScriptItem)promiseResult).UnderlyingSystemType’ threw an exception of type ‘System.NotImplementedException’ in server side javascript run on asp .net core mvc

this below code is Home controller in call js file()

public IActionResult Index()
    {

        using (var engine = new V8ScriptEngine())
        {
            
            engine.AddHostType("Console", typeof(Console));           

            string scriptPath = Path.Combine(Directory.GetCurrentDirectory(), "wwwroot", "js", "NewScript.js");
            string scriptContent = System.IO.File.ReadAllText(scriptPath);
            engine.Execute(scriptContent);
            
            try
            {
               
                dynamic promiseResult = engine.Script.newfunction();                   

               ViewBag.Result = promiseResult;
               
            }
            catch (Exception ex)
            {
                // Handle exceptions if the promise is rejected
                string result = $"Error: {ex.Message}";
                ViewBag.Result = result;
            }

         
        }
   }

this below code in Javascript NewScript.js

function newfunction() {    
const promise1 = Promise.resolve("This is promised 1");

    promise1.then((value1) => {        
       return value1;        
   });

}

this newfunction return this {[undefined]} or {Microsoft.ClearScript.V8.V8ScriptItem.V8ScriptObject}

get this error UnderlyingSystemType = ‘((Microsoft.ClearScript.ScriptItem)promiseResult).UnderlyingSystemType’ threw an exception of type ‘System.NotImplementedException’

Warning message not displaying when certain prices are less than cost price

I am working on a React application where I have a form for managing prices. The form includes the following price types: Wholesale price, Transfer price, and Sales price. I want to display a warning message if the value entered for any of these prices is less than the cost price.

const COST_PRICE_TYPE = 'cost';
const SALES_PRICE_TYPE = 'sales';
const TRANSFER_PRICE_TYPE = 'transfer';
const WHOLESALE_PRICE_TYPE = 'wholesale';

const handleSubmit = async (e) => {
    e.preventDefault();
    setIsTrue(true);

    if (updateData.isUpdate) {
      // ... (code for handling updates)

      const costPriceObject = priceList.find((item) => item.type.key === COST_PRICE_TYPE);
      const costPrice = costPriceObject ? costPriceObject.price : 0;

      const isSalesPriceLessThanCost =
      selectedPriceType.key === SALES_PRICE_TYPE && selectedPrice < costPrice;
      const isTransferPriceLessThanCost =
      selectedPriceType.key === TRANSFER_PRICE_TYPE && selectedPrice < costPrice;
      const isWholesalePriceLessThanCost =
      selectedPriceType.key === WHOLESALE_PRICE_TYPE && selectedPrice < costPrice;

      console.log('Cost Price:', costPrice);
      console.log('Is Sales Price Less Than Cost:', isSalesPriceLessThanCost);
      console.log('Is Transfer Price Less Than Cost:', isTransferPriceLessThanCost);
      console.log('Is Wholesale Price Less Than Cost:', isWholesalePriceLessThanCost);

      if (isSalesPriceLessThanCost || isTransferPriceLessThanCost || isWholesalePriceLessThanCost) {
        // Display a warning message
        const warningMessage = `Based on the amount for ${selectedPriceType.name} that is less than the    Cost price ${costPrice}, you may encounter a loss due to this.`;
        dispatch(showMessage({ message: warningMessage, variant: 'warning' }));
      }
    } else {
      // ... (code for handling new records)
    }

    setIsTrue(false);
    setUpdateData({ isUpdate: false, data: {} });
    setSelectedPrice('');
    setSelectedCurrencyUnit({});
    setSelectedPriceType({});
    resetField('priceType', 'currencyId');
    reset();
  };

The warning message is not displaying when a sales price, transfer price, or wholesale price is less than the cost price.

I have already tried adding console logs to check the values of costPrice, isSalesPriceLessThanCost, isTransferPriceLessThanCost, and isWholesalePriceLessThanCost, but the logs are not executed.

console.log('Cost Price:', costPrice);
console.log('Is Sales Price Less Than Cost:', isSalesPriceLessThanCost);
console.log('Is Transfer Price Less Than Cost:', isTransferPriceLessThanCost);
console.log('Is Wholesale Price Less Than Cost:', isWholesalePriceLessThanCost);