Fix issue 6751: epoch date formats '%H:%M:%S' as 'undefined'

[adamjhawley]

Hi all! This is my first time contributing to plotly so open for feedback & comments :)

This patch fixes issue #6751, where the epoch timestamp '1970-01-01 00:00:00', with 'hoverformat' '%H:%M:%S' is formatted as 'undefined'.

[archmoj]

Let's add two tests for each fix to this file below this test:

plotly.js/test/jasmine/tests/hover_label_test.js

Lines 4368 to 4382 in 6408944

	it('selects all points at the same position on a date axis', function(done) {
	var x = ['2018', '2019', '2020'];
	var mock = {
	data: [{type: 'bar', x: x, y: [4, 5, 6]}, {x: x, y: [5, 6, 7]}],
	layout: {width: 400, height: 400, xaxis: {type: 'date'}, hovermode: 'x'}
	};
	Plotly.newPlot(gd, mock)
	.then(function(gd) {
	Fx.hover(gd, {xpx: 65});
	expect(gd._hoverdata.length).toEqual(2);
	})
	.then(done, done.fail);
	});

You could then npm run test-jasmine hover_label to run the test.
If you want to only execute new tests that you add locally you may use fit(...) instead of it(...) but then please commit them as it(...) blocks.

[adamjhawley]

@archmoj I am currently trying to add the tests but I am having difficulty with Fx.hover(). Is there any guidance on how I can pick the right co-ordinates?

I see that the test you included has 'xpx: 65'. I am wondering how I can correctly populate the same parameter for my tests.

[archmoj]

@archmoj I am currently trying to add the tests but I am having difficulty with Fx.hover(). Is there any guidance on how I can pick the right co-ordinates?

I see that the test you included has 'xpx: 65'. I am wondering how I can correctly populate the same parameter for my tests.

If you add console log in
'src/components/fx/hover.jsorsrc/traces/scatter/hoverand then create your graph afternpm start` in the browser console for example using your mock you posted to the issue:

var dates = [0,1].map(x => `1970-01-01 00:00:0${x}`);


var data = [
  {
    type: 'scatter',
    x: dates,
    y: [5,2,3,1,4],
    hovertemplate: "%{x}, %{y}"
  }]

var layout = {
  xaxis: {
    tickformat: '%H:%M:%S',
    hoverformat: '%H:%M:%S'
  },
}

Plotly.newPlot(gd, data, layout);

Then you could hover over the desired position to read the print in the console.

[archmoj]

Alternatively you could add a unit test instead here:
https://github.com/plotly/plotly.js/blob/64089441b46d1ef16fb3a683ab2bd8235bde3ee3/test/jasmine/tests/axes_test.js#L3324C11-L3335

[archmoj]

@adamjhawley
I am about to release a minor and I'd like to include this great fix.
So I'll move forward and merge this as is.
Later on please feel free to open another PR to include the test you were working on.
Thank you!

[archmoj]

💃

[adamjhawley]

@archmoj ok, thanks a lot, will do! Thanks for all of your help!