javascript – Page 7062 – Blancer.com Tutorials and projects

Lost column of bar chart in Chart.js

I display bar chart by chart.js but I get some problems. This is my data array data: [80, 81, 80, 64, 65, 80, 70, 75, 67, 85, 66, 50]. The last data value is 50 or 10 or 20 and it does not display ( Picture 1 ). If I change to 50.5 or 10.5, it can display but it is too small ( Picture 2 ). Anyone who knows my problem please help me. Thank you so much.

Here is my code :

//WidgetChart 5
    var ctx = document.getElementById("widgetChart5");
    if (ctx) {
      ctx.height = 220;
      var myChart = new Chart(ctx, {
        type: 'bar',
        data: {
          labels: ['January', 'February', 'March', 'April', 'May', 'June', 'July', 'August', 'September', 'October', 'November', 'December'],
          datasets: [
            {
              label: "My First dataset",
                  data: [80, 81, 80, 64, 65, 80, 70, 75, 67, 85, 66, 50.5],
              borderColor: "transparent",
              borderWidth: "0",
              backgroundColor: "#ccc",
            }
          ]
        },
        options: {
          maintainAspectRatio: true,
          legend: {
            display: false
          },
          scales: {
            xAxes: [{
              display: false,
              categoryPercentage: 1,
              barPercentage: 0.75
            }],
            yAxes: [{
              display: false
            }]
          }
        }
      });
    }

Picture 1 : The last data value ( 50 ) does not display

Picture 2 : Now if change to 50.5 it is still too smal

how to fetch a value from specific index of object property that has the values of pushed array in javascript

i am trying to get a value from specific index of object property. i have used push function to push the value to object property. but when i call result.marks[0], it return all the values in array.

<html>

    <body>
        <p id="demo"></p>
        <script>
        try {
            let result = {
                marks: [], // 
            };
            const n = 5;
            let text = "";
            for (let i = 0; i < n; i++) {
                text += prompt("Enter value of " + i, i) + "<br>";
            }
            result.marks.push(text);
            document.getElementById("demo").innerHTML = result.marks[0]; // it does not print the specific index value. it prints all the values
        }
        catch (err) {
            document.write(err);
        };
    </script>
</body>

</html>

Why does this undo logic not work in p5.js?

My logic is simple, create a state array and a stateIndex, when the user interacts with the drawing, save the current state as an entry in the array and increment the stateIndex.

When the user presses “undo” (for this sketch press any key), decrement the stateIndex and draw to the page whatever value is in state for that index.

I’ve implemented it in this sketch https://editor.p5js.org/mr_anonymous/sketches/s0C1M7x1w but as you can see instead of storing the last state of the drawing it seems to only store the blank state.

Anyone know what’s going wrong?

Google Sheets Script – Efficient Way to Find and Replace Multiple Phrases?

I’m wondering if theres anyway to shorten this code. I need to find and replace a bunch of phrases with the hyperlinked version of the phrase, and I’m hoping there is a more efficient way to do it. Thank you in advance!!

function insertUrl() {
  let ranges = SpreadsheetApp.getActive()
    .createTextFinder("Example 1")
    .matchEntireCell(true)
    .matchCase(true)
    .matchFormulaText(false)
    .ignoreDiacritics(true)
    .findAll();
  ranges.forEach(function(range){
    range.setFormula('=HYPERLINK("https://www.website1.com/","Example 1")');
    }
    );
  {
  let ranges = SpreadsheetApp.getActive()
    .createTextFinder("Example 1")
    .matchEntireCell(true)
    .matchCase(true)
    .matchFormulaText(false)
    .ignoreDiacritics(true)
    .findAll();
  ranges.forEach(function(range){
    range.setFormula('=HYPERLINK("https://www.website2.com/","Example 1")');
    }
    );
}
  {
  let ranges = SpreadsheetApp.getActive()
    .createTextFinder("Example 3")
    .matchEntireCell(true)
    .matchCase(true)
    .matchFormulaText(false)
    .ignoreDiacritics(true)
    .findAll();
  ranges.forEach(function(range){
    range.setFormula('=HYPERLINK("https://www.website3.com/","Example 3")');
    }
    );
}
}

Html downloading dynamic picture

When I try to download the pokemon picture, the image was shown on the HTML, but I cant the pdf doest show the picture, it’s just blank. i wanted to download 1 pokemon as one pdf, but i got stuck with the pokemon picture, its work fine with text, but not with pictures

function generatePDF(name) {
    const element = document.getElementById("example-print");
    var clonedElement = element.cloneNode(true);
    var opt = {
        margin: 1,
        filename: name + '.pdf',
        jsPDF: { unit: 'in', format: 'A4', orientation: 'landscape' }
    };
    $(clonedElement).css("display", "block");
    html2pdf().from(clonedElement).set(opt).save();
    clonedElement.remove();
}

$(document).ready(function () {
    var table = $("#example2").DataTable({
        "responsive": true,
        "select": true,
        "ajax": {
            "url": "https://pokeapi.co/api/v2/pokemon",
            "type": "GET",
            "datatype": "json",
             dataSrc: "results"
        },
        'columnDefs': [
            {
                "data": "name",
                "targets": 0,
                "orderable": false,
                "className": 'select-checkbox',
                'checkboxes': {
                    'selectRow': true
                }
            },
        ],
        'select': {
            'style': 'multi'
        },
        "columns": [
            {
                "defaultContent": ''
            },
            {
                "data": null,
                render: function (data, type, row, meta) {
                    return meta.row + meta.settings._iDisplayStart + 1;
                }
            },
            {
                "data": "name"
            },
            {
                "data": "url"
            }
        ]
    });

    $("#check").on("click", function () {
        var download = []
        var rows_selected = table.column(0).checkboxes.selected();

        $.each(rows_selected, function (index, rowId) {
            // Create a hidden element 
            download.push(rowId)
        });

        for (var i = 0; i < download.length; i++) {
            $.ajax({
                url: "https://pokeapi.co/api/v2/pokemon/" + (i+1),
                type: "Get",
                success: function (result) {
                    console.log(result)

                    $("#harga").html(result.base_experience);
                    $("#img1").attr("src", result.sprites.back_default);
                    $("#img2").attr("src", result.sprites.back_shiny);
                    $("#img3").attr("src", result.sprites.front_default);
                    $("#img4").attr("src", result.sprites.front_shiny);
                    generatePDF(result.name);
                },
                error: function (error) {
                    console.log(error)
                }
            })
        }
    })
});

<div class=" container-fluid m-2 ">
    <div class="card">

        <div class="card-head">
            <button type="button" class="btn btn-primary m-2" id="check"> Check </button>
        </div>

        <div class="card-body">
            <form id="frm-example">
                <table id="example2" class="display" cellspacing="0" width="100%">
                    <thead>
                        <tr>
                            <th></th>
                            <th>No</th>
                            <th>Name</th>
                            <th>url</th>
                        </tr>
                    </thead>
                </table>
            </form>
        </div>
    </div>
</div>
<div class="col col-lg-6 col-sm-6 col-xl-6 col-md-6 building-img mt-2">
<img src="" class="img-responsive fit-image" id="img1" />
 </div>
<div class="col col-lg-6 col-sm-6 col-xl-6 col-md-6 building-img mt-2">
<img src="" class="img-responsive fit-image" id="img2"/>
</div>
<div class="col col-lg-6 col-sm-6 col-xl-6 col-md-6 building-img mt-2">
<img src="" class="img-responsive fit-image" id="img3"/>
</div>
<div class="col col-lg-6 col-sm-6 col-xl-6 col-md-6 building-img mt-2">
<img src="" class="img-responsive fit-image" id="img4"/>
</div>

here at the IMG, I put src on empty first, so I can replace it with jquery latter on. its work but it doesn’t show on the pdf

JS filter function multiple conditions

This might be a duplicate but I cant seem to find a stackoverflow question with my exact question. I’m displaying a table of data in the frontend and i’m allowing the user to filter by multiple optional variables. So lets say my data variables are user details in this format:

[
    {
        firstName = 'bob', 
        middleName = 'bruh', 
        lastName = 'bub'
    },
     .
     .
     .
    {
        firstName = 'sam', 
        middleName = 'marley', 
        lastName = 'jackson'
    }
]

Now im allowing the users to filter by firstName, middleName and LastName. But they are also allowed to filter using only one variable, or a combination of any of the three.

The naive approach that I am using now is to have 7 if statements that filter the array depending on the user input:

let filterByFirstName = this.firstNameQuery !== null;
let filterByMiddleName = this.middleNameQuery !== null;
let filterByLastName = this.lastNameQuery !== null;

if(filterByFirstName && !filterByMiddleName && !filterByLastName)
//filter the array only by first name 

else if(filterByFirstName && filterByMiddleName && !filterByLastName)
// filter array by first and middle name 

.
.
.

else if(filterByFirstName && filterByMiddleName && filterByLastName) 
//filter array by first, middle and last name.

So algorithmically its efficient enough, but not so much for the cleanliness of the code as i will be adding more and more variable to filter by.

I have tried creating just one filter statement that will filter depending on the variables supplied but i’m having trouble coding it.

let filterByFirstName = this.firstNameQuery !== null;
let filterByMiddleName = this.middleNameQuery !== null;
let filterByLastName = this.lastNameQuery !== null;

  this.displayArray = this.userArray.filter(
    user =>
      user.firstName === (filterByFirstName ? this.firstNameQuery : 'any String') &&
      user.middleName === (filterByMiddleName ? this.middleNameQuery : 'any String') &&
      user.lastName === (filterByLastName ? this.lastNameQuery : 'any String')
  );

So essentially what i need is a wildcard or the equivalent of any string to put in the filter function, if this is even possible. Thanks in advance 🙂

How to impliment getter/setter for each button’s value inside vuetify v-btn-toggle?

I have a vuetify v-btn-toggle like this:

    <v-btn-toggle
      v-model="toggle_values"
      dense
      multiple
    >
      <v-btn value="A">
        A
      </v-btn>
      <v-btn value="B">
        B
      </v-btn>
      <v-btn value="C">
        C
      </v-btn>
    </v-btn-toggle>

But the binding v-model is an array. How could I trigger individual toggled event for buttons A, B, C like this:

data() {
  return { toggle_values: [] }
},
computed: {
  stateA: {
    get() {
      // get A value from other place
    },
    set(isPressed) {
      // do something on A value changed
    }
  },
  stateB: {
    get() {
    },
    set(isPressed) {
    }
  },
  stateC: {
    get() {
    },
    set(isPressed) {
    }
  },
}

How can I prevent certain characters from being deleted from a React input tag?

I would like to know how to prevent a specific string from being erased even if I press backspace from the input passed the value.

product : [none_fix]changeValue

I want to prevent the [none_fix] part from being erased even if I press backspace.

calling a graphql query using axios

I’m trying to wrap the functionality of this graphql api request using axios.

https://docs.microsoft.com/en-us/azure/developer/javascript/how-to/with-web-app/graphql/azure-function-hello-world (This is the reference I used to create the graphql api and it works, I just need to be able to call it from another function that will act as a wrapper function so the client doesn’t have access to the orginal….this would be done with axios).

import { gql } from 'apollo-server-azure-functions';

const typeDefs = gql`
    extend type qkviewInfo {
        product: product
    },

    type product {
        _collection: String!,
        _name: String!,
        _key: String!,
        className: String!,
        qkviewid: Int!,
        id: String!,
        _rid: String!,
        _self: String!,
        _etag: String!,
        _attachments: String!,
        _ts: String!,
    }
`;

const resolvers = {
    qkviewInfo: {
        async product(id: number, _, {dataSources}){
            const PRODUCT: string = "product";
            return dataSources.serviceRepository.getData(id, PRODUCT);
        }
        
    },
    product: {
        //Fields mapped 1:1
    }
};

export { typeDefs, resolvers}; ```

axios error when template literal in reactjs

I am trying to figure out error dealing with template literal in reactjs(tsx)

export const Features = () => {
  const [features, setFeatures] = useState([]);
  const [isLoading, setLoading] = useState(false);
  const [keywords, setKeywords] = useState("");

  const fetchData = async () => {
    setLoading(true);
    const result = await axios.get("http://123.123.123.123:8000/api/v1/features/?search=" + keywords);
    const result1 = await axios.get(`http://123.123.123.123:8000/api/v1/features?search=${keywords}`);
    setFeatures(result1.data.results);
    setLoading(false);
  };

  ///
  const handlePageChange = () => {
    fetchData();
  };

it works totally fine when I run with result but the issue is result1
These two look totally same but when I run result1 I got a message below

Access to XMLHttpRequest at 'http://52.195.14.97:8000/api/v1/features?search=' 
from origin 'http://52.195.14.97:3000' has been blocked by CORS policy: 
No 'Access-Control-Allow-Origin' header is present on the requested resource.

xhr.js:210 GET http://23.123.123.123:8000/api/v1/features?search= net::ERR_FAILED 301

Could anybody help me figuring this out? I want to run with result1 for some reason 🙁

How can I add a static timestamp?

I want to add a static timestamp (for a list or social media app for example) using plain javascript. Currently I have it like this:

  const d = new Date();
  const time = d.toLocaleTimeString();

The problem is that when you refresh, it also refreshes the time and sets it to your current time, not the time that the item was posted. How can I fix this?

Javascript negative numbers && statement between two negative numbers

So i am trying to compare a variable that contains some negative numbers at random given times based on rotation and basically my if statement isn’t “catching” the negative cases and will only give the expected results if the number is positive what’s going on?

here’s what i have tried:

 if (parseFloat(target.y) > -0.60 && parseFloat(target.y) < -0.70)
      {
          this._target.position.z -= 0.4;
        this._target.position.x -= 4; 
      }

and also:

 if (target.y > -0.60 && target.y < -0.70)
      {
            
        this._target.position.z -= 0.4;
        this._target.position.x -= 4; 
      }

here’s the var which uses three.js to get the values if that makes any difference, values can be negative or positive im testing both:

 var target = new THREE.Quaternion();
this._target.getWorldQuaternion( target );

thanks in advance for any help

Not sure if I should use WebGL, or a .js library

I have searched Google for weeks – using almost every conceivable arrangement of keywords, but I am stumped. What I am trying to accomplish- is a whole-page transition effect. If a user is on a page, and clicks an image that links to say, a blog post – I would like to produce a downward spiral effect like the entire page is going down a drain, or spiraling down a tunnel (before transitioning to the target page). I know this is very complex – and I can figure out (for the most part) how to use whatever catalyst for making it happen – I just do not know what to use to make this effect a reality. just looking for tips or perhaps an existing example I can reverse engineer. Any help would be greatly appreciated.

Error: Something went wrong installing the “sharp” module

I’m getting this error when I try to run gatsby develop, so far I’ve tried:

npm install –ignore-scripts=false –verbose sharp
npm install –platform=win32 –arch=x64 sharp
npm clean cache –force
gatsby clean
deleting node_modules, package-lock.json and then npm install
updating to the latest node, npm and gatsby version

this is the specific error:

Error: Something went wrong installing the “sharp” module
The specified module could not be found.
node_modulessharpbuildReleasesharp-win32-x64.node

I checked for that specific module in that specific folder and it’s there… Any ideas? No errors or whatsoever when I tried all the above solutions.

Find an array in an object in an array [duplicate]

The phrasing of my title might seem strange so let me elaborate. I am trying to use Array.find() to find an object based on weather it has a matching array within it.
Example:

let arr = [
    {
        innerArray: ["A", "B", "C"]
    },
    {
        innerArray: ["G", "D", "B"]
    }
]

arr.find(obj => obj.innerArray === ["A", "B", "C"])

When ran it returns undefined. If this is not possible are there any alternatives?