Category: javascript

I want to insert this chart from amcharts https://www.amcharts.com/demos-v4/map-dynamic-pie-charts-v4/, but I have got this error “Property ‘pieData’ does not exist on type ‘Object'”, I tried everything that worked for other charts, but this did not fix.
here is my code

export class MapComponent implements OnInit {

  constructor() { }

  ngOnInit(): void {
    
  }

  createChart1() {
    am4core.useTheme(am4themes_animated);
  // Themes end
  
  // Create map instance
  let chart = am4core.create("chartdiv", am4maps.MapChart);
  
  // Set map definition
  chart.geodata = am4geodata_continentsLow;
  
  // Set projection
  chart.projection = new am4maps.projections.Miller();
  
  // Create map polygon series
  let polygonSeries = chart.series.push(new am4maps.MapPolygonSeries());
  polygonSeries.exclude = ["antarctica"];
  polygonSeries.useGeodata = true;
  
  // Create an image series that will hold pie charts
  let pieSeries = chart.series.push(new am4maps.MapImageSeries());
  let pieTemplate = pieSeries.mapImages.template;
  pieTemplate.propertyFields.latitude = "latitude";
  pieTemplate.propertyFields.longitude = "longitude";
  let pieChartTemplate = pieTemplate.createChild(am4charts.PieChart);
  pieChartTemplate.adapter.add("data", function(data, target) {
    if (target.dataItem) {
    return target.dataItem.dataContext.pieData;
  }
  else {
    return [];
  }
  });
  pieChartTemplate.propertyFields.width = "width";
  pieChartTemplate.propertyFields.height = "height";
  pieChartTemplate.horizontalCenter = "middle";
  pieChartTemplate.verticalCenter = "middle";
  
  let pieTitle = pieChartTemplate.titles.create();
  pieTitle.text = "{title}";
  
  let pieSeriesTemplate = pieChartTemplate.series.push(new am4charts.PieSeries);
  pieSeriesTemplate.dataFields.category = "category";
  pieSeriesTemplate.dataFields.value = "value";
  pieSeriesTemplate.labels.template.disabled = true;
  pieSeriesTemplate.ticks.template.disabled = true;
  
  pieSeries.data = [{
  "title": "North America",
  "latitude": 39.563353,
  "longitude": -99.316406,
  "width": 100,
  "height": 100,
  "pieData": [{
    "category": "Category #1",
    "value": 1200
  }, {
    "category": "Category #2",
    "value": 500
  }, {
    "category": "Category #3",
    "value": 765
  }, {
    "category": "Category #4",
    "value": 260
  }]
  }, {
  "title": "Europe",
  "latitude": 50.896104,
  "longitude": 19.160156,
  "width": 50,
  "height": 50,
  "pieData": [{
    "category": "Category #1",
    "value": 200
  }, {
    "category": "Category #2",
    "value": 600
  }, {
    "category": "Category #3",
    "value": 350
  }]
  }, {
  "title": "Asia",
  "latitude": 47.212106,
  "longitude": 103.183594,
  "width": 80,
  "height": 80,
  "pieData": [{
    "category": "Category #1",
    "value": 352
  }, {
    "category": "Category #2",
    "value": 266
  }, {
    "category": "Category #3",
    "value": 512
  }, {
    "category": "Category #4",
    "value": 199
  }]
  }, {
  "title": "Africa",
  "latitude": 11.081385,
  "longitude": 21.621094,
  "width": 50,
  "height": 50,
  "pieData": [{
    "category": "Category #1",
    "value": 200
  }, {
    "category": "Category #2",
    "value": 300
  }, {
    "category": "Category #3",
    "value": 599
  }, {
    "category": "Category #4",
    "value": 512
  }]
  }];
}

}

I tried a lot, but I could not fix it, did u have same issue or can you help ?

I’m trying to convert some figma filters, CSS liniar backgrounds to canvas gradient. The issue which I have with the conversion is the offset color of the background. I’ve done some research and tried to do this in canvas but the result is not how is in figma.
Here are just few examples which I’m trying to convert/use with canvas.

Thank you in advance for help.

background: linear-gradient(180deg, rgba(0, 0, 0, 0.0001) -23.93%, #000000 68.89%);
background: linear-gradient(179.48deg, #619CCB -28.41%, #000000 64.05%);
background: linear-gradient(180deg, #286998 -40.17%, #001A35 72.14%);

I have a C struct:

typedef struct {
    int First;
    double Numbers[4];
    int Second;
}TryStruct;

and I would like to create and pass it to a DLL it using ffi-napi. The problem is that I couldn’t find any support for a “normal” array (just a pointer to an array):

const tryStruct = structFactory({ first: ref.types.int, numbers: TYPE-NEEDED, second: ref.types.int  });

What type do I need to set for numbers in the code above?

The Whole code for a better understanding:

import StructType from 'ref-struct-di';
import ref from 'ref-napi';

...

const structFactory = StructType(ref);

const tryStruct = structFactory({ first: ref.types.int, numbers: TYPE-NEEDED, second: ref.types.int  });

const dllTryLib = new ffi.Library('dllTry', {
    blaTry: [ref.types.void, [ref.refType(tryStruct)]]
});

const tryInstance = new tryStruct({ first: 1, numbers: [1, 2, 3], second: 22 });

dllTryLib.blaTry(tryInstance.ref());

I have an AJAX function running from my frontend looking like this:

//api.js

function getTransactions(authToken) {
  $.ajax({
    type: 'GET',
    data: {
      'authToken':
        'ACE8166BCD0F5B8FB5FF693F3B4056160D957A0E57FC9912EE70E9231D03166B9661BCB96BD678F3BD65CFD6DA651F1E5B5D28E294CA88C0EEE2B3C7093699EAA731409A1F8DA5C772E2335EC67ED410E20ED9FBB35B6918804879BE3D3FE1329F2348F1FB83B9BC4992F7EA75D1ED4A4F9A684371CB0D0CF09E131ADAB905CAE4454C4C9D81A9A48B05AA77B4D6F7D7C5A596C021DA368F6E356A5750EB2D117C8E02782731F7641526ACBA061EEDDB2339EABB3B179F39738D8AEF4510E612A2D11BCC74D67C3C4D989A86BB9EE710342042D2A71A364B0D17D799E28D51458AD44F53F3930E31387FF52BAD141D4AA467384282226AB2B1B55A5B45CCAF5F61DDAD770E3BA9210BBE7B926BD594F52F17F053B6C0366B4CDC4F2F147648A545ABDDD854FF778F4EA0A2672E0D249B',
    },
    crossDomain: true,
    dataType: 'JSON',
    url: 'http://localhost:8000/transactions',
  }).done(function (data) {
.....

I have been trying to pass the authToken parameter to the data object, and then retrieve it in the PHP backend using (case transactions):

//index.php

$request = $_SERVER["REQUEST_URI"];

switch ($request) {
  case "/login" :
    require __DIR__ . "/login.php";
    $userEmail = $_POST["userEmail"];
    $userPassword = $_POST["userPassword"];
    echo login($userEmail, $userPassword);
    break;
  case "/transactions" :
    require __DIR__ . "/transactions.php";
    $authToken = $_GET["authToken"];
    getTransactions($authToken);
    break;
}

If I hardcode the authToken into the getTransactions function inside case "/transactions", it works fine.

But there’s something, either in the $_GET() in index.php, or in the AJAX function that it preventing the data from getting into the getTransactions function in index.php.

I have tried putting strings around the authToken key in the data object, also using the authToken parameter, as well as JSON.stringify-ing the data object. Further, I have changed/removed the dataType, and exhausted every other method suggested by stack overflow and other websites.

This is especially difficult because it’s my first time using PHP, and I don’t know how to show echos in my terminal, so I can’t see any output from the PHP files.

Any help would be appreciated.

I am new to JavaScript and was learning about promises. I want to print 5 to 0 numbers at the interval of 2 seconds each.
For example for the first time after 2 seconds print 5 and then after 2 second print 4 and so on.
I have written a code to do so but not able to get the correct output.

var count = 5;
var i = 2;
function d()                     
{
    let p = new Promise((resolve,reject)=>{
        while(count>=0)
        {
            setTimeout(resolve,i*1000,count);
            i= i*2;
            count = count-1;
            //count = count-1;
        }
    });
    return p;
}

d().then((x)=>{
    console.log(x);
});

It is showing output as 5. Can anyone correct it?

is it possible to write a if statement in the return() from the save props in react?

Because when i write down a if statement i only see the code at the front-end.

So the following is happening:

I created a Selectcontrol:

<SelectControl

              label={ __( 'Press ctrl to multiple stars:' ) }
              value={ testimonial.selectcontrol } // e.g: value = [ 'a', 'c' ]
              onChange={ (value) => handleTestimonialChange('selectcontrol', value, index ) }
              options={ [
                  { value: null, label: 'Select a Star', disabled: false },
                  { value: 'star' ,  label: 'Add 1 star' },
                  { value: 'star2', label: 'Add 2 stars' },
                  { value: 'star3', label: 'Add 3 stars' },
                  { value: 'star4', label: 'Add 4 stars' },
                  { value: 'star5', label: 'Add 5 stars' },
              ] }
            />

I render it with the following code to have stars in the back-end:

selectcontrolDisplay = props.attributes.testimonial.map( ( testimonial, index ) => {
          if (testimonial.selectcontrol == 'star') {
            return  (testimonial.selectcontrol == 'star') ? <span><i className="fas fa-star checked"></i></span> : testimonial.selectcontrol;
          } else if (testimonial.selectcontrol == 'star2') {
            return  (testimonial.selectcontrol == 'star2') ? <span><i className="fas fa-star checked"></i><i className="fas fa-star checked"></i></span> : testimonial.selectcontrol;
          } else if (testimonial.selectcontrol == 'star3') {
            return  (testimonial.selectcontrol == 'star3') ? <span><i className="fas fa-star checked"></i><i className="fas fa-star checked"></i><i className="fas fa-star checked"></i></span> : testimonial.selectcontrol;
          } else if (testimonial.selectcontrol == 'star4') {
            return  (testimonial.selectcontrol == 'star4') ? <span><i className="fas fa-star checked"></i><i className="fas fa-star checked"></i><i className="fas fa-star checked"></i><i className="fas fa-star checked"></i></span>: testimonial.selectcontrol;
          } else if (testimonial.selectcontrol == 'star5') {
            return  (testimonial.selectcontrol == 'star5') ? <span><i className="fas fa-star checked"></i><i className="fas fa-star checked"></i><i className="fas fa-star checked"></i><i className="fas fa-star checked"></i><i className="fas fa-star checked"></i></span> : testimonial.selectcontrol;
          }
        } );

In the editor part i have the following part:

{selectcontrolDisplay && selectcontrolDisplay.map((selectcontrolValue, i) =>
                  <div className="wp-block-cgb-block-project-drie-testimonial-ratings">
                    <div className="wp-block-cgb-block-project-drie-testimonial-rating">
                      <h2>Rating</h2>
                      {selectcontrolValue}
                    </div>
                  </div>
                  )}

So above is working correctly, but the hardest part for me is to get the result at the front-end.

So i thought i could make it work with a if statement. But i only see the code at the front-end and not the result with only stars. Could some on give me advice how to make this work?

save: ( props ) => {
const {attributes: { selectcontrol } } = props;

return (

html code.....

if (selectcontrol == 'star') {
                      <span><i className="fas fa-star checked"></i></span>
                    } else if (selectcontrol == 'star2') {
                      <span><i className="fas fa-star checked"></i><i className="fas fa-star checked"></i></span>
                    } else if (selectcontrol == 'star3') {
                      <span><i className="fas fa-star checked"></i><i className="fas fa-star checked"></i><i className="fas fa-star checked"></i></span>
                    } else if (selectcontrol == 'star4') {
                      <span><i className="fas fa-star checked"></i><i className="fas fa-star checked"></i><i className="fas fa-star checked"></i><i className="fas fa-star checked"></i></span>
                    } else if (selectcontrol == 'star5') {
                      <span><i className="fas fa-star checked"></i><i className="fas fa-star checked"></i><i className="fas fa-star checked"></i><i className="fas fa-star checked"></i><i className="fas fa-star checked"></i></span>
                    }

)

}

For a better overview:

save: ( props ) => {
    const {attributes: { title } } = props;
    const {attributes: { subtitle } } = props;
    const {attributes: { media} } = props;
    const {attributes: { testimonial } } = props;
    const {attributes: { selectcontrol } } = props;

  
    return (
      <section className="testimonial">
        <Helmet>
          <script type="text/javascript" src="//cdn.jsdelivr.net/gh/kenwheeler/[email protected]/slick/slick.min.js"></script>
        </Helmet>
        <div className="container testimonial__container">
          <div className="row testimonial__row">
            <div className="testimonial__info">
              <div className="testimonial__subtext">
                <span>{ subtitle }</span>
              </div>
              <div className="testimonial__title">
                <h2>{ title }</h2>
              </div>
            </div>
            <div className="items testimonial__testimonials">
              {testimonial.map((field, i) => (
              <div className="testimonial__testimonial">
                <div className="testimonial__card" key={ i }>
                  <div className="testimonial__image">
                    <img src={field.media.url} />
                  </div>
                  <div className="testimonial__review">
                    <p>{field.testimonial}</p>
                  </div>
                    if (selectcontrol == 'star') {
                      <span><i className="fas fa-star checked"></i></span>
                    } else if (selectcontrol == 'star2') {
                      <span><i className="fas fa-star checked"></i><i className="fas fa-star checked"></i></span>
                    } else if (selectcontrol == 'star3') {
                      <span><i className="fas fa-star checked"></i><i className="fas fa-star checked"></i><i className="fas fa-star checked"></i></span>
                    } else if (selectcontrol == 'star4') {
                      <span><i className="fas fa-star checked"></i><i className="fas fa-star checked"></i><i className="fas fa-star checked"></i><i className="fas fa-star checked"></i></span>
                    } else if (selectcontrol == 'star5') {
                      <span><i className="fas fa-star checked"></i><i className="fas fa-star checked"></i><i className="fas fa-star checked"></i><i className="fas fa-star checked"></i><i className="fas fa-star checked"></i></span>
                    }
                  <div className="testimonial__stars">
                    <span>{testimonial.selectcontrol}</span>

                  </div>
                  <div className="testimonial__author">
                    <div className="testimonial__name">
                      <span>{ field.author }</span>
                    </div>
                    <div className="testimonial__function">
                      <span>{ field.position }</span>
                    </div>
                  </div>
                </div>
              </div>
              ))}
            </div>
          </div>
        </div>
      </section>
    );
    },

I am using if else in a foreach loop and binding that value with the container but I don’t understand Why if else condition is not working in foreach it is showing if else statement in html page like if({detailInfo.condition} !== “”){} but condition is not working? how can I use if else in a div element?

async function renderViewDetails(data, dataTableOrders) {
      let ordersDetails = data.group_id;
      var detailInfos = dataTableOrders;

      let html =
        `<div class="viewDetailModal">
          <div class="detailButtonModal">
            <p class="viewOrderId">ID:</p>
            <p class="orderdetailsid viewOrderId">${data.id}</p>
            <p class="coinviewDetail">${data.coin}</p>
          </div>
          
          <div class="rb-container">
            <ul class="rb">`;

      detailInfos.forEach(detailInfo => {
        if (detailInfo.group_id == ordersDetails) {
          let htmlSegment = `
                  <li class="rb-item timelimeVertical" ng-repeat="itembx">
                    <div class="tradingOrdersInfo">
                    <p class="orderDetailDate">${detailInfo.openedAt}</p>
            
                    <div class="tradeOrderType">
                    <p class="viewDetailOrderType">${detailInfo.type}</p>
                    <button id="showMoreLess_${detailInfo.id}" 
                     data-order-id="${detailInfo.id}" 
                     class="viewDetailOrderButton">View 
                     More</button>
                    </div>
            
                                    
                    <div id="showme_${detailInfo.id}" style="display:none";>
            
                    <div class="tradeOrderEntry">
                    <div>
                    <p class="orderDetailQuantity">Quantity:</p>
                    <p class="orderDetailQuantityValue">${detailInfo.volume}</p>
                   </div>
                   <div class="tradeOrdervaluePrice">
                   <p class="orderPnlInner"> &nbsp; ${detailInfo.group_pnl}</p>
                   <p class="pnlInnerLabel">PNL</p>
                   </div>
                   </div>
            
            
                   <div class="tradeOrderEntry tradeOrderEntryValue">
                   <div>
                   <p class="detailEntryValue entryOpa ">TP Target</p>
                   <p class="detailEntryValue entryOpa">Entry Target</p>
                   </div>
            
 if({detailInfo.condition} !== null){
                   <div>
                   <p class="detailEntryValueR viewPadd">1% <span class="viewHit">Hit</span> | 5% <span class="viewHit">Hit</span> | 10%</p>
                   <p class="detailEntryValueR"> 40% | 20% | 30% </p>
                   </div>
                   </div>
            }
            
                   <div class="tradeOrderEntry tradeOrderEntryValue">
                   <div>
                   <p class="detailEntryValue entryOpa">Expire</p>
                   </div>
            
                  
                     </div>
            
                  </div>
                  </li>`

          html += htmlSegment;
        }
      });
      html += `</ul></div></div>`;

      let container = document.querySelector('.orders-details-info');
      container.innerHTML = html;

      }

I’m connecting to an xmpp chat server “riot’s pvp.net” using an TCP/ssl stream, the server sometimes splits up large messages “xmpp xml based messages” into chunks, is there a built in “& efficient if possible” way to detect if the data I received represent a partial xml data, to wait for the next response/receive to combine the data together?
I found this JavaScript code that supposedly does that, I don’t understand Javascript and can’t even tell if it does indeed do so right, or not and was wondering if there’s a more elegant or built in way to do that in c#?

I’m playing around with the password generator, but when the string contains a < or > it breaks the HTML and only outputs some of the characters. I’m using innerHTML instead on textContent because I need to wrap each password in a div. Is there another way I can do this without it breaking?

const alphabetUppercase = "abcdefghijklmnopqrstuvwxyz".toUpperCase().split('');
const alphabetLower = "abcdefghijklmnopqrstuvwxyz".split('');
const symbols = "!@#$%^&*(>)_+=-`~,./;'[]|}"<{:?".split('');
const numbers = "123456789".split('');
const masterArray = alphabetUppercase.concat(alphabetLower, symbols, numbers);

const passwordButton = document.querySelector('.generate-passwords');
const outputPasswords = document.querySelector('.output-passwords');

passwordButton.addEventListener('click', function(e){
    e.preventDefault();
    let passwordArray = []; 
    // number of passwords
    let counter = 4;

    // Reset text content
    outputPasswords.innerHTML = '';  

    for (let x = 0; x < counter; x++) {
        let randomPassword = "";

        for (let i = 0; i < 15; i++) {
            let randomOutput = Math.floor(Math.random() * masterArray.length);
            randomPassword += masterArray[randomOutput];
        }
        passwordArray.push(randomPassword);   
        outputPasswords.innerHTML += '<div>' + passwordArray[x] + '</div>';
    } 
});

    <section class="generator">
        <a href="#" class="generate-passwords">Generate passwords</a>

        <div class="output-passwords"></div>
    </section>

I am working on quiz and want to convert the screen into fullscreen mode on load of page for specific time, is there any way to achieve this or any alternative?

My vue 3 component

<script setup lang="ts">
import { defineAsyncComponent, ref, Ref } from "vue";
import CookiesHelper from "@/utilities/cookies";
import { Banner as BannerType } from "@/interfaces/Banner";
import { usePackageStore } from "@/store/offers-package";
import { useInitDataStore } from "@/store/init-data";
import useGroupedData from "@/composables/grouped-data";


CookiesHelper.setCookies();

const isLoaded = ref(false);
const dataStore = usePackageStore();
const initDataStore = useInitDataStore();

let selectedApp: unknown;

switch (initDataStore.app) {
  case "app1":
    selectedApp = defineAsyncComponent(() => import("@/pages/app1.vue"));
    break;
  default:
    selectedApp = defineAsyncComponent(() => import("@/pages/app2.vue"));
}

dataStore
  .setDataPackage()
  .then(() => {
    isLoaded.value = true;
  })
  .catch((e: Error) => {
    console.log(e);
  });
</script>

<template>
  <div v-show="isLoaded">
    <component :is="selectedApp"></component>
    <link-tracking></link-tracking>
    <link-tracking></link-tracking>
  </div>
</template>

<style lang="scss">
#app {
  font-family: Avenir, Helvetica, Arial, sans-serif;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-align: center;
  color: #2c3e50;
  margin-top: 60px;
}
</style>

I want to understand, if link-tracking component has scoped css, then that css will be loaded only once or twice? how does this actually gets compiled?

I try to get some data from my controller on click on specific day in fullcalendar.
So when i click e.g 28-02-2022(monday) ajax should run and pass to my controller this data. My controller return some data.
I try to do it by dayClick or dateClick but it not running ajax

    dateClick: function (date) {
        $.ajax({
            url: "http://localhost/getHours",
            dataType: 'json',
            data: {
                date: (date from the pressed button)
            },
            success: function (data) {
                console.log(data);

            },
            error: function () {
                alert("Oops! Something didn't work");
            }
        });
    },

im trying to make checkout page using react, i want to use useState to handle quantity, but useState can’t be declared outside react functional component, i have declared usestate in the component, but it replacing all the checkout item quantity which i dont want, how can i solve this?

Error msg : React Hook “useState” cannot be called inside a callback. React Hooks must be called in a React function component or a custom React Hook function.

sorry if my english is bad

import axios from "axios";
import React, { useEffect, useState } from "react";
import "./Checkout.css";

const Checkout = (props) => {
    const [item, setItem] = useState([]);
    // const [cartComplete, setCartComplete] = useState(false);

    useEffect(() => {
        for (let i = 0; i < props.cart.length; i++) {
            axios
                .get(`http://${process.env.REACT_APP_BASE_URL}:3100/user/cart/${props.cart[i]}`)
                .then((res) => {
                    setItem((prevState) => [...prevState, res.data]);
                    // if (i === props.cart.length - 1) {
                    //     setCartComplete(true);
                    // } else {
                    //     setCartComplete(false);
                    // }
                })
                .catch((err) => console.log(err));
        }
        // eslint-disable-next-line react-hooks/exhaustive-deps
    }, []);

    return (
        <div className="checkout-container">
            <h1>Checkout</h1>
            <div className="checkout-items">
                {item.map((item, index) => {
                    let [quantity, setQuantity] = useState(1);

                    return (
                        <div className="checkout-item" key={index}>
                            <div className="checkout-item-img">
                                <img
                                    src={`http://${process.env.REACT_APP_BASE_URL}:3100/${item[0].foto_barang}`}
                                    alt={item[0].nama_barang}
                                />
                            </div>
                            <div className="checkout-item-info">
                                <h3>{item[0].nama_barang}</h3>
                                <p>{item[0].harga_barang}</p>
                                <input
                                    type="number"
                                    name="quantity"
                                    id="quantity"
                                    min="1"
                                    value={quantity}
                                    onChange={(e) => {
                                        setQuantity(e.target.value);
                                    }}
                                    required
                                />
                                <p>Total : Rp. {harga}</p>
                            </div>
                        </div>
                    );
                })}
            </div>
        </div>
    );
};

export default Checkout;

I am using redux, redux-saga architecture in my application. Here in javascript function I want to dispatch the redux-saga action.

Api.js

export async function fetchUserInfo(username) {
  dispatch({type: 'SYNC'});
  return user.get(`${API.authUrls}/${username}`);
}

Here I am dispatching the action but it is executing async in the middleware. I want once this redux-saga is completed then I want to execute user.get API.

Does anyone know what is the way for this ?

OK this is very strange.
My production build is 45 mb. It’s worth mentioning that my repo contains over 200 components ( it’s a huge project ). any tips on how to improve this?? or where I went wrong??