Issue using heatmap angular 8 - heatmap

I'm having trouble using heatmap.js with Angular 8.
It works fine while serving it live, but I get the following error when I run the production build:
ERROR TypeError: "setting getter-only property "data""
on my component
import * as h337 from 'heatmap.js';
.
.
.
heatmap() {
...
const heatmap = h337.create(options);
const datos = {
max: this.max,
min: this.min,
data: data
};
heatmap.setData(datos);
...
}

I had similar problem and then when I updated angular from 8.0 to 8.2 neither the serving worked. As it turned out there is a problem with the img.data being explicitly set (search for the error you will find more details).
There is an already opened issue at https://github.com/pa7/heatmap.js but it seems that the latest merge in the project was 3 years ago and it is not that active.
So either you fix the bug yourself (in your forked version of the repo) or you use an already forked repo.
I did the second and it seems to work fine. The only thing you need to do is replace the heatmap.js dependency in your package.json.
npm install --save https://github.com/ionata/heatmap.js.git
so at the end your package.json will have this entry:
"heatmap.js": "git+https://github.com/ionata/heatmap.js.git"

Related

Adyen create dropin fails with "Cannot read properties of null (reading 'dropin')"

Trying to do a simple initial working example of Adyen Drop-in functionality.
I'm using package "#adyen/adyen-web" version 5.2.0 in a React app. (see code attached)
My backend API is built in .Net5 calling Adyen to create a session and returning id and sessionData correctly to frontend presented in "paymentSession".
Bu when code reaches the part checkout.create('dropin').mount(adyenElementRef.current) it fails with error in browser console: "Cannot read properties of null (reading 'dropin')".
I have no idea of why, and I followed the exact documentation on https://docs.adyen.com/online-payments/web-drop-in
UPDATE:
I downgraded to version 4.1.0 and got it all to work by just changed to this code:
const checkout = new AdyenCheckout(adyenConfig)
// Create an instance of Drop-in and mount it to the container you created.
const dropinComponent = checkout.create('dropin').mount(adyenElementRef.current)
So something weird with latest version and the Promise-implementation?
I can't really reproduce your example exactly, but I see in your comment that version 4.x seems to be working.
With version 5.0, the creation of AdyenCheckout is now asynchronous. Can you make sure this is not the source of the issue?
//version 4
const checkout = await AdyenCheckout(configuration);
// version 5
const checkout = AdyenCheckout(configuration);
See the release notes.
I recommend using the latest version of the integration if you are integrating today, it has quite a few new goodies.

Angular 6 PWA -- The PWA functionality is interefering with Azure Adal Authentication, not sure how to bypass it

I have a PWA built with Angular 6 and the #angular/pwa npm package and authenticating using adal-angular4 npm package (but could just rebuild that from scratch if needed -- the issue isn't a bug in the package I think)
When attempting to authenticate, although it does work, users are very often greeted with this message of not found (screenshot of console but its the same).
This especially seems to be the case if you are already authenticated to another (or itself) Azure AD product. Where it normally should only load for a while and then let the user in.
Service worker error transcript:
Failed to load 'link.com/#LONGTOKEN' A serviceWorker passed a promise
to FetchEvent.respondWith() that rejected with 'Error: Response not Ok
(fetchAndCacheOnce): request for LINK.com/index.html returned response 404 Not Found'.
It seems that writing a function to check for new version of the PWA has cleaned up everything. Because it's a PWA, when replacing files with a new version -- the cache will still be there and shift+reloading won't necessarily clear it, causing a lot of unwanted behaviour.
The code for the cleanup looks like this:
First, inject in the constructor the following: updates: SwUpdate
import { SwUpdate } from "#angular/service-worker"
Then, inside ngOnInit, I have the following:
updates.available.subscribe(event => {
updates.activateUpdate().then(() => document.location.reload());
})
It will force a complete refresh 2-3 seconds in if there's a new version available but all works well afterwards.

Firebase Query.Once failed on Firefox and Google Chrome console, but not it JS Bin website

I have a problem with firebase, it read data using 'once', but it shows me Uncaught Error: Query.once failed: Was called with 1 argument. Expects at least 2 on Firefox console and Google Chrome, but the source code on JS Bin there's no error.
I got the code from here : https://stackoverflow.com/a/35526844/6780268
I copy the code in bracket, i try 2 different firebase.js, but still show me nothing.
var ref = new Firebase('https://stackoverflow.firebaseio.com/35526205');
ref.child('Highscore').once('value').then(function(snapshot) {
console.log(snapshot.val());
});
Is this normal? And how to fix this problem?
Sorry for my bad english.
You're likely using a different/newer version of Firebase than the one in the jsbin in the link.
In newer versions of Firebase, you get a reference to the same database location with:
firebase.initializeApp({ databaseURL: "https://stackoverflow.firebaseio.com" });
var ref = firebase.database().ref("35526205");
I recommend reading the Firebase documentation, the migration guide, and the web codelab.

Grunt doesn't run json_server task from grunt-json-server

I am using the configuration the npm page gives an example for, yet when I try to run the task using either grunt.run.task (['json_server']) or in concurrent: { server: { tasks [ 'json_server'] } }, grunt doesn't even print out the task name in the console. It doesn't even give me an error if I remove the db file it tries to point to.
See: https://github.com/tfiwm/grunt-json-server/issues/4
The library uses registerMultiTask; when changed to registerTask, it worked fine for me.

How to solve the "error 500" issue of Symfony PHP framework with Webkit browsers?

I'm having an issue with the visualization of my site on Google Chrome and Safari (both using Webkit rendering engine), the site is built upon Symfony framework, version 1.1 (unmaintained version).
When navigating to the site, this shows an error 500 when loading a page, I read somewhere that it might be related to Symfony caching but I don't know how to solve it and turning off caching is not a solution.
Thankyou in advance.
This ticket fixes the problem, so you can patch your sfWebRequest class code.
You can see the actual problem by browsing via "dev" controller. It's called by default: yourAppName_dev.php
So if you have a "frontend" app, it's:
http://domain.tld/frontend_dev.php
Yes, most of the cases for error 500 is the cache. You can clear the cache by navigating to your project root directory and type:
symfony cc
or
./symfony cc
or
php symfony cc
which depends of you environment and setup.
Also you can delete the content of the cache directory located in your project root manually.
Hope this helps.
See this: http://forum.symfony-project.org/index.php/m/75225/
To fix, change your config/ProjectConfiguration.class.php to include the following:
public function setup()
{
// keep current code here and then add...
$this->dispatcher->connect('request.filter_parameters', array($this, 'filterRequestParameters'));
}
public function filterRequestParameters(sfEvent $event, $parameters)
{
$request = $event->getSubject();
if (preg_match('|Safari/([0-9\.]+)|', $request->getHttpHeader('User-Agent')))
{
$request->setRequestFormat('html');
}
return $parameters;
}