0

The data I am trying to plot is of the form :

[
    [24894174208.0, 1604842800],
    [24903880704.0, 1604843100]
]

where x = data points; y = UNIX_EPOC_Time

while plotting I am interchanging x,y; so as to plot UNIX_EPOC_Time on X-axis & data points on Y-axis

I have to multiply UNIX_EPOC_Time by 1000 as: Javascript uses milliseconds internally, while normal UNIX timestamps are usually in seconds. ( Why do I need to multiply unix timestamps by 1000 in JavaScript? )

Also I am trying to find anomalies in the dataPoints which is being plotted with a dot (yellow/orange/red).

However, in the function

js[isIn(anomoly, point){...}]

where I find anomalies in dataPoints, I see the datapoints take the form as:

[1604923500000, 22179459072000]

instead of:

[1604923500, 22179459072.0]

due to which I have to divide the data point (here: 22179459072000) by 1000 to bring it to it's original form 22179459072.0 in order to plot it on the graph.

I am not sure why this is happening though.

I have reproduced the issue in stackblitz.

F. Müller
  • 3,969
  • 8
  • 38
  • 49
Jermy Gillbert
  • 39
  • 4
  • It is happening because the `getDummyData()` method is mutating your initial data at some point. Just check how the `this.data.Result[0].anomalies` looks like at the end of the `getDummyData()`, `[24508948480000, 1604872800]` the first element is mutated. – Mateusz Kornecki Nov 12 '20 at 07:25
  • @MateuszKornecki yes its getting mutated at that place itself, I checked by adding : console.log(this.data.Result[0].anomalies.critical[0]); to ngOnInit(). Is there a way to prevent it ? https://stackblitz.com/edit/highchart-highstock-bzujdf?file=src/app/app.component.ts – Jermy Gillbert Nov 12 '20 at 08:45

1 Answers1

0

After some debugging, I finally found the source of the problem.

It is happening because of the way you are cloning your data.

let clone_element = { ...element };

The spread operator is not creating a deep copy of the element, it's just the shallow one meaning that some parts of the clone_element will still have a reference to the source of data causing mutation.

To fix that you could use for example the lodash's cloneDeep(). This function will produce a real deep copy, so there is no way you will mutate your initial data.

const clone_element = cloneDeep(element);

Live demo:

Additional references:

Mateusz Kornecki
  • 765
  • 6
  • 18
  • Thanks for sharing the cloneDeep() , but data is still getting mutated , I have added 2 console lines in the code : ``` console.log('ORIGINAL = ', this.data.Result[0].anomalies['critical'][0]); ``` and ```console.log('NEW = ', clone_element["anomalies"]["critical"][0]) ``` where extra 0s are still being added : https://stackblitz.com/edit/highchart-highstock-7v4x3v?file=src/app/app.component.ts – Jermy Gillbert Nov 13 '20 at 14:54
  • The initial data (`this.data`) is not mutated. ```javascript ORIGINAL, after getDummyData()=[24894174208, 1604842800] NEW =[24894174208000, 1604842800] ORIGINAL, before getDummyData() = [24894174208, 1604842800] ```https://stackblitz.com/edit/highchart-highstock-eawv12?file=src/app/app.component.ts. Additional zeros are added to the `clone_element` because you did it intentionally, if you don't want them there just delete the lines that are adding them. So to sum up - there is a difference between `original` and `new` and will be in your console.log but the initial data is not mutated. – Mateusz Kornecki Nov 16 '20 at 06:56