8000 Implemented style and template handling · kb-/plotly.js@55c1b31 · GitHub
[go: up one dir, main page]
Skip to content

Commit 55c1b31

Browse files
kb-kb-
committed
Implemented style and template handling
1 parent be6d4df commit 55c1b31

File tree

7 files changed

+86
-26
lines changed

7 files changed

+86
-26
lines changed

‎dist/plotly-strict.js

Lines changed: 9 additions & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -14438,7 +14438,11 @@ modeBarButtons.tooltip = {
1443814438
fullLayout._tooltipEnabled = tooltipEnabled === 'on' ? 'off' : 'on';
1443914439
if (fullLayout._tooltipEnabled === 'on') {
1444014440
gd._tooltipClickHandler = function (data) {
14441-
tooltipClickHandler(gd, data);
14441+
var traceIndex = data.points[0].curveNumber;
14442+
var trace = gd.data[traceIndex];
14443+
var userTemplate = trace.tooltiptemplate || DEFAULT_TEMPLATE;
14444+
var customStyle = lodash.defaults({}, trace.tooltip, DEFAULT_STYLE); // Merge custom style with default
14445+
tooltipClickHandler(gd, data, userTemplate, customStyle);
1444214446
};
1444314447
gd.on('plotly_click', gd._tooltipClickHandler);
1444414448
} else {
@@ -14455,13 +14459,14 @@ modeBarButtons.tooltip = {
1445514459
console.log('Tooltip is now', fullLayout._tooltipEnabled);
1445614460
}
1445714461
};
14458-
function tooltipClickHandler(gd, data) {
14459-
addTooltip(gd, data, DEFAULT_TEMPLATE, DEFAULT_STYLE);
14462+
function tooltipClickHandler(gd, data, userTemplate, customStyle) {
14463+
addTooltip(gd, data, userTemplate, customStyle);
1446014464
}
1446114465
function addTooltip(gd, data, userTemplate, customStyle) {
14462-
lodash.defaults(customStyle, DEFAULT_STYLE);
1446314466
var pts = data.points[0];
1446414467
var fullLayout = gd._fullLayout;
14468+
14469+
// Convert template to text using Plotly hovertemplate formatting method
1446514470
var text = Lib.hovertemplateString(userTemplate, {}, fullLayout._d3locale, pts, {});
1446614471
var newAnnotation = {
1446714472
x: pts.x,

‎dist/plotly-strict.min.js

Lines changed: 1 addition & 1 deletion
Some generated files are not rendered by default. Learn more about customizing how changed files appear on GitHub.

‎dist/plotly-with-meta.js

Lines changed: 9 additions & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -14666,7 +14666,11 @@ modeBarButtons.tooltip = {
1466614666
fullLayout._tooltipEnabled = tooltipEnabled === 'on' ? 'off' : 'on';
1466714667
if (fullLayout._tooltipEnabled === 'on') {
1466814668
gd._tooltipClickHandler = function (data) {
14669-
tooltipClickHandler(gd, data);
14669+
var traceIndex = data.points[0].curveNumber;
14670+
var trace = gd.data[traceIndex];
14671+
var userTemplate = trace.tooltiptemplate || DEFAULT_TEMPLATE;
14672+
var customStyle = lodash.defaults({}, trace.tooltip, DEFAULT_STYLE); // Merge custom style with default
14673+
tooltipClickHandler(gd, data, userTemplate, customStyle);
1467014674
};
1467114675
gd.on('plotly_click', gd._tooltipClickHandler);
1467214676
} else {
@@ -14683,13 +14687,14 @@ modeBarButtons.tooltip = {
1468314687
console.log('Tooltip is now', fullLayout._tooltipEnabled);
1468414688
}
1468514689
};
14686-
function tooltipClickHandler(gd, data) {
14687-
addTooltip(gd, data, DEFAULT_TEMPLATE, DEFAULT_STYLE);
14690+
function tooltipClickHandler(gd, data, userTemplate, customStyle) {
14691+
addTooltip(gd, data, userTemplate, customStyle);
1468814692
}
1468914693
function addTooltip(gd, data, userTemplate, customStyle) {
14690-
lodash.defaults(customStyle, DEFAULT_STYLE);
1469114694
var pts = data.points[0];
1469214695
var fullLayout = gd._fullLayout;
14696+
14697+
// Convert template to text using Plotly hovertemplate formatting method
1469314698
var text = Lib.hovertemplateString(userTemplate, {}, fullLayout._d3locale, pts, {});
1469414699
var newAnnotation = {
1469514700
x: pts.x,

‎dist/plotly.js

Lines changed: 9 additions & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -14478,7 +14478,11 @@ modeBarButtons.tooltip = {
1447814478
fullLayout._tooltipEnabled = tooltipEnabled === 'on' ? 'off' : 'on';
1447914479
if (fullLayout._tooltipEnabled === 'on') {
1448014480
gd._tooltipClickHandler = function (data) {
14481-
tooltipClickHandler(gd, data);
14481+
var traceIndex = data.points[0].curveNumber;
14482+
var trace = gd.data[traceIndex];
14483+
var userTemplate = trace.tooltiptemplate || DEFAULT_TEMPLATE;
14484+
var customStyle = lodash.defaults({}, trace.tooltip, DEFAULT_STYLE); // Merge custom style with default
14485+
tooltipClickHandler(gd, data, userTemplate, customStyle);
1448214486
};
1448314487
gd.on('plotly_click', gd._tooltipClickHandler);
1448414488
} else {
@@ -14495,13 +14499,14 @@ modeBarButtons.tooltip = {
1449514499
console.log('Tooltip is now', fullLayout._tooltipEnabled);
1449614500
}
1449714501
};
14498-
function tooltipClickHandler(gd, data) {
14499-
addTooltip(gd, data, DEFAULT_TEMPLATE, DEFAULT_STYLE);
14502+
function tooltipClickHandler(gd, data, userTemplate, customStyle) {
14503+
addTooltip(gd, data, userTemplate, customStyle);
1450014504
}
1450114505
function addTooltip(gd, data, userTemplate, customStyle) {
14502-
lodash.defaults(customStyle, DEFAULT_STYLE);
1450314506
var pts = data.points[0];
1450414507
var fullLayout = gd._fullLayout;
14508+
14509+
// Convert template to text using Plotly hovertemplate formatting method
1450514510
var text = Lib.hovertemplateString(userTemplate, {}, fullLayout._d3locale, pts, {});
1450614511
var newAnnotation = {
1450714512
x: pts.x,

‎dist/plotly.min.js

Lines changed: 1 addition & 1 deletion
Some generated files are not rendered by default. Learn more about customizing how changed files appear on GitHub.

‎index.html

Lines changed: 44 additions & 6 deletions
Original file line numberDiff line numberDiff line change
@@ -19,14 +19,52 @@ <h1>Plotly Tooltip Button Test</h1>
1919
<div id="plot"></div>
2020
<script>
2121
document.addEventListener("DOMContentLoaded", function() {
22-
var data = [{
23-
x: [1, 2, 3, 4, 5],
24-
y: [1, 3, 2, 5, 4],
25-
type: 'scatter'
26-
}];
22+
23+
// Generate date and time values
24+
function generateDateTime(start, count) {
25+
let dates = [];
26+
let current = new Date(start);
27+
for (let i = 0; i < count; i< F438 /span>++) {
28+
dates.push(new Date(current));
29+
current.setHours(current.getHours() + 7);
30+
}
31+
return dates;
32+
}
33+
34+
// Generate random y-values
35+
function generateRandomYValues(count) {
36+
return Array.from({ length: count }, () => Math.random() * 20);
37+
}
38+
39+
// Generate data points
40+
var xValues = generateDateTime('2024-04-01T12:00:00Z', 10);
2741

42+
var trace1 = {
43+
name: 'Trace 1',
44+
x: generateDateTime('2024-04-01T12:00:00Z', 5),
45+
y: generateRandomYValues(5),
46+
type: 'scatter',
47+
tooltiptemplate: "%{fullData.name}<br>%{x|%H:%M:%S}<br>y: %{y:.2e}",
48+
tooltip: {
49+
align: 'left',
50+
arrowcolor: 'blue',
51+
arrowhead: 2,
52+
arrowsize: 1.2,
53+
arrowwidth: 1,
54+
font: {
55+
color: 'red',
56+
family: 'Arial',
57+
size: 16
58+
},
59+
showarrow: true,
60+
xanchor: 'left'
61+
}
62+
};
63+
64+
var data = [trace1];
65+
2866
var layout = {
29-
title: 'Test Plot'
67+
title: 'Custom Tooltip Example'
3068
};
3169

3270
var config = {

‎src/components/modebar/buttons.js

Lines changed: 13 additions & 6 deletions
Original file line numberDiff line numberDiff line change
@@ -746,32 +746,39 @@ modeBarButtons.tooltip = {
746746
fullLayout._tooltipEnabled = tooltipEnabled === 'on' ? 'off' : 'on';
747747

748748
if (fullLayout._tooltipEnabled === 'on') {
749-
gd._tooltipClickHandler = function(data) { tooltipClickHandler(gd, data); };
749+
gd._tooltipClickHandler = function(data) {
750+
var traceIndex = data.points[0].curveNumber;
751+
var trace = gd.data[traceIndex];
752+
var userTemplate = trace.tooltiptemplate || DEFAULT_TEMPLATE;
753+
var customStyle = lodash.defaults({}, trace.tooltip, DEFAULT_STYLE); // Merge custom style with default
754+
tooltipClickHandler(gd, data, userTemplate, customStyle);
755+
};
750756
gd.on('plotly_click', gd._tooltipClickHandler);
751757
} else {
752758
gd.removeListener('plotly_click', gd._tooltipClickHandler);
753759
}
754760

755761
if (mustRun) {
756762
mustRun = false;
757-
gd.on('plotly_relayout', function(eventData) { removeEmptyAnnotations(gd, eventData); });
763+
gd.on('plotly_relayout', function(eventData) {
764+
removeEmptyAnnotations(gd, eventData);
765+
});
758766
}
759767

760768
// Print to console for testing
761769
console.log('Tooltip is now', fullLayout._tooltipEnabled);
762770
}
763771
};
764772

765-
function tooltipClickHandler(gd, data) {
766-
addTooltip(gd, data, DEFAULT_TEMPLATE, DEFAULT_STYLE);
773+
function tooltipClickHandler(gd, data, userTemplate, customStyle) {
774+
addTooltip(gd, data, userTemplate, customStyle);
767775
}
768776

769777
function addTooltip(gd, data, userTemplate, customStyle) {
770-
lodash.defaults(customStyle, DEFAULT_STYLE);
771-
772778
var pts = data.points[0];
773779
var fullLayout = gd._fullLayout;
774780

781+
// Convert template to text using Plotly hovertemplate formatting method
775782
var text = Lib.hovertemplateString(userTemplate, {}, fullLayout._d3locale, pts, {});
776783

777784
var newAnnotation = {

0 commit comments

Comments
 (0)
0