plotly · kb- · May 18, 2024 · May 19, 2024 · May 19, 2024 · May 19, 2024
diff --git a/draftlogs/7127_add.md b/draftlogs/7127_add.md
@@ -0,0 +1 @@
+Add a tooltip feature that can be activated by a new modebar button. It allows to add an annotation to every clicked point. [[#7127](https://github.com/plotly/plotly.js/pull/7127)]
diff --git a/lib/locales/cs.js b/lib/locales/cs.js
@@ -4,6 +4,7 @@ module.exports = {
  moduleType: 'locale',
  name: 'cs',
  dictionary: {
+ 'Add Tooltip to Points': 'Přidat popisek k bodům', // components/modebar/buttons.js:694
  'Autoscale': 'Auto rozsah', // components/modebar/buttons.js:139
  'Box Select': 'Obdélníkový výběr', // components/modebar/buttons.js:103
  'Click to enter Colorscale title': 'Klikněte pro zadání názvu barevné škály', // plots/plots.js:437

diff --git a/lib/locales/cy.js b/lib/locales/cy.js
@@ -4,6 +4,7 @@ module.exports = {
  moduleType: 'locale',
  name: 'cy',
  dictionary: {
+ 'Add Tooltip to Points': 'Ychwanegu awgrymiadau i\'r pwyntiau', // components/modebar/buttons.js:694
  'Autoscale': 'Graddfa awtomatig', // components / modebar / buttons.js: 150
  'Box Select': 'Dewiswch â blwch', // components / modebar / buttons.js: 114
  'Click to enter Colorscale title': 'Cliciwch i nodi teitl Graddfa Liw', // plots / plots.js: 327

diff --git a/lib/locales/de.js b/lib/locales/de.js
@@ -4,6 +4,7 @@ module.exports = {
  moduleType: 'locale',
  name: 'de',
  dictionary: {
+ 'Add Tooltip to Points': 'Tooltip zu Punkten hinzufügen', // components/modebar/buttons.js:694
  'Autoscale': 'Automatische Skalierung', // components/modebar/buttons.js:139
  'Box Select': 'Rechteckauswahl', // components/modebar/buttons.js:103
  'Click to enter Colorscale title': 'Klicken, um den Farbskalatitel einzugeben', // plots/plots.js:437

diff --git a/lib/locales/es.js b/lib/locales/es.js
@@ -4,6 +4,7 @@ module.exports = {
  moduleType: 'locale',
  name: 'es',
  dictionary: {
+ 'Add Tooltip to Points': 'Agregar tooltip a los puntos', // components/modebar/buttons.js:694
  'Autoscale': 'Autoescalar', // components/modebar/buttons.js:139
  'Box Select': 'Seleccionar Caja', // components/modebar/buttons.js:103
  'Click to enter Colorscale title': 'Introducir el título de la Escala de Color', // plots/plots.js:303

diff --git a/lib/locales/fi.js b/lib/locales/fi.js
@@ -4,6 +4,7 @@ module.exports = {
  moduleType: 'locale',
  name: 'fi',
  dictionary: {
+ 'Add Tooltip to Points': 'Lisää tooltip pisteisiin',
  'Autoscale': 'Autoskaalaa',
  'Box Select': 'Laatikkovalinta',
  'Click to enter Colorscale title': 'Klikkaa antaaksesi väriskaalan otsikko',

diff --git a/lib/locales/fr.js b/lib/locales/fr.js
@@ -4,6 +4,7 @@ module.exports = {
  moduleType: 'locale',
  name: 'fr',
  dictionary: {
+ 'Add Tooltip to Points': 'Ajouter une info-bulle aux points',
  'Autoscale': 'Échelle automatique',
  'Box Select': 'Sélection rectangulaire',
  'Click to enter Colorscale title': 'Ajouter un titre à l\'échelle de couleurs',

diff --git a/lib/locales/hr.js b/lib/locales/hr.js
@@ -4,6 +4,7 @@ module.exports = {
  moduleType: 'locale',
  name: 'hr',
  dictionary: {
+ 'Add Tooltip to Points': 'Dodajte bilješku točkama',
  'Autoscale': 'Automatsko skaliranje',
  'Box Select': 'Pravokutni odabir',
  'Click to enter Colorscale title': 'Kliknite za unos Colorscale naziva',

diff --git a/lib/locales/it.js b/lib/locales/it.js
@@ -4,6 +4,7 @@ module.exports = {
  moduleType: 'locale',
  name: 'it',
  dictionary: {
+ 'Add Tooltip to Points': 'Aggiungi tooltip ai punti', // components/modebar/buttons.js:694
  'Autoscale': 'Scala automaticamente', // components/modebar/buttons.js:139
  'Box Select': 'Selezione box', // components/modebar/buttons.js:103
  'Click to enter Colorscale title': 'Clicca per inserire un titolo alla scala di colori', // plots/plots.js:437

diff --git a/lib/locales/ja.js b/lib/locales/ja.js
@@ -4,6 +4,7 @@ module.exports = {
  moduleType: 'locale',
  name: 'ja',
  dictionary: {
+ 'Add Tooltip to Points': 'ポイントにツールチップを追加', // components/modebar/buttons.js:694
  'Autoscale': '自動ズーム', // components/modebar/buttons.js:139
  'Box Select': '矩形選択', // components/modebar/buttons.js:103
  'Click to enter Colorscale title': '色スケールタイトルを入力するにはクリック', // plots/plots.js:437

diff --git a/lib/locales/ko.js b/lib/locales/ko.js
@@ -4,6 +4,7 @@ module.exports = {
  moduleType: 'locale',
  name: 'ko',
  dictionary: {
+ 'Add Tooltip to Points': '포인트에 툴팁 추가',
  'Autoscale': '자동 크기지정',
  'Box Select': '박스 선택',
  'Click to enter Colorscale title': 'Colorscale 제목을 지정하려면 클릭하세요',

diff --git a/lib/locales/nl.js b/lib/locales/nl.js
@@ -4,6 +4,7 @@ module.exports = {
  moduleType: 'locale',
  name: 'nl',
  dictionary: {
+ 'Add Tooltip to Points': 'Tooltip aan punten toevoegen',
  'Autoscale': 'Automatische schaal',
  'Click to enter Colorscale title': 'Klik om kleurenschaal titel in te vullen',
  'Click to enter Component A title': 'Klik om Component A titel in te vullen',

diff --git a/lib/locales/no.js b/lib/locales/no.js
@@ -4,6 +4,7 @@ module.exports = {
  moduleType: 'locale',
  name: 'no',
  dictionary: {
+ 'Add Tooltip to Points': 'Legg til verktøytips til punkter', // components/modebar/buttons.js:694
  'Autoscale': 'Autoskalere', // components/modebar/buttons.js:148
  'Box Select': 'Velg rektangel', // components/modebar/buttons.js:112
  'Click to enter Colorscale title': 'Klikk for å oppgi tittel på fargeskala', // plots/plots.js:326

diff --git a/lib/locales/pt-br.js b/lib/locales/pt-br.js
@@ -4,6 +4,7 @@ module.exports = {
  moduleType: 'locale',
  name: 'pt-BR',
  dictionary: {
+ 'Add Tooltip to Points': 'Adicionar tooltip aos pontos',
  'Autoscale': 'Escala automática',
  'Box Select': 'Seleção retangular',
  'Click to enter Colorscale title': 'Clique para editar o título da escala de cor',

diff --git a/lib/locales/pt-pt.js b/lib/locales/pt-pt.js
@@ -4,6 +4,7 @@ module.exports = {
  moduleType: 'locale',
  name: 'pt-PT',
  dictionary: {
+ 'Add Tooltip to Points': 'Adicionar tooltip aos pontos',
  'Autoscale': 'Escala automática',
  'Box Select': 'Seleção retangular',
  'Click to enter Colorscale title': 'Clique para editar o título da escala de cor',

diff --git a/lib/locales/ru.js b/lib/locales/ru.js
@@ -4,6 +4,7 @@ module.exports = {
  moduleType: 'locale',
  name: 'ru',
  dictionary: {
+ 'Add Tooltip to Points': 'Добавить подсказку к точкам',
  'Autoscale': 'Автоматическое шкалирование',
  'Box Select': 'Выделение прямоугольной области',
  'Click to enter Colorscale title': 'Нажмите для ввода названия цветовой шкалы',

diff --git a/lib/locales/si.js b/lib/locales/si.js
diff --git a/lib/locales/sk.js b/lib/locales/sk.js
@@ -4,6 +4,7 @@ module.exports = {
  moduleType: 'locale',
  name: 'sk',
  dictionary: {
+ 'Add Tooltip to Points': 'Pridať tooltip k bodom', // components/modebar/buttons.js:694
  'Autoscale': 'Auto rozsah', // components/modebar/buttons.js:139
  'Box Select': 'Obdĺžnikový výber', // components/modebar/buttons.js:103
  'Click to enter Colorscale title': 'Kliknite pre zadanie názvu farebnej škály', // plots/plots.js:437

diff --git a/lib/locales/sv.js b/lib/locales/sv.js
@@ -4,6 +4,7 @@ module.exports = {
  moduleType: 'locale',
  name: 'sv',
  dictionary: {
+ 'Add Tooltip to Points': 'Lägg till verktygstips till punkter', // components/modebar/buttons.js:694
  'Autoscale': 'Autoskala', // components/modebar/buttons.js:148
  'Box Select': 'Välj rektangel', // components/modebar/buttons.js:112
  'Click to enter Colorscale title': 'Klicka för att ange titel på färgskala', // plots/plots.js:326

diff --git a/lib/locales/sw.js b/lib/locales/sw.js
@@ -4,6 +4,7 @@ module.exports = {
  moduleType: 'locale',
  name: 'sw',
  dictionary: {
+ 'Add Tooltip to Points': 'Ongeza tooltip kwa pointi',
  'Autoscale': 'Kigezo - otomatiki',
  'Box Select': 'Teua kisanduku',
  'Click to enter Colorscale title': 'Bonyeza kuandika kichwa cha Colorscale',

diff --git a/lib/locales/uk.js b/lib/locales/uk.js
@@ -4,6 +4,7 @@ module.exports = {
  moduleType: 'locale',
  name: 'uk',
  dictionary: {
+ 'Add Tooltip to Points': 'Додати підказку до точок',
  'Autoscale': 'Автоматичне шкалювання',
  'Box Select': 'Виділення прямокутної області',
  'Click to enter Colorscale title': 'Натисніть для введення назви шкали кольору',

diff --git a/lib/locales/zh-cn.js b/lib/locales/zh-cn.js
@@ -4,6 +4,7 @@ module.exports = {
  moduleType: 'locale',
  name: 'zh-CN',
  dictionary: {
+ 'Add Tooltip to Points': '将工具提示添加到点', // components/modebar/buttons.js:694
  'Autoscale': '自动缩放', // components/modebar/buttons.js:139
  'Box Select': '矩形框选',
  'Click to enter Colorscale title': '点击输入色阶的标题', // plots/plots.js:437

diff --git a/lib/locales/zh-tw.js b/lib/locales/zh-tw.js
@@ -4,6 +4,7 @@ module.exports = {
  moduleType: 'locale',
  name: 'zh-TW',
  dictionary: {
+ 'Add Tooltip to Points': '將工具提示添加到點', // components/modebar/buttons.js:694
  'Autoscale': '自動縮放', // components/modebar/buttons.js:139
  'Box Select': '矩形選擇', // components/modebar/buttons.js:103
  'Click to enter Colorscale title': '點擊以輸入色階標題', // plots/plots.js:437

diff --git a/src/components/modebar/buttons.js b/src/components/modebar/buttons.js
@@ -7,6 +7,7 @@ var Icons = require('../../fonts/ploticon');
 var eraseActiveShape = require('../shapes/draw').eraseActiveShape;
 var Lib = require('../../lib');
 var _ = Lib._;
+var lodash = require('lodash'); // Import lodash, not using default _
 
 var modeBarButtons = module.exports = {};
 
@@ -671,6 +672,179 @@ modeBarButtons.toggleSpikelines = {
  }
 };
 
+// Define default template and style
+var DEFAULT_TEMPLATES = {
+ date_x: '%{x|%Y-%m-%d}', // xaxis.type == "date"
+ date_y: '%{y|%Y-%m-%d}',
+ multicategory_x: '%{x}', // xaxis.type == "multicategory"
+ multicategory_y: '%{y}',
+ category_x: '%{x}', // xaxis.type == "category"
+ category_y: '%{y}',
+ x: 'x: %{x:.4~g}',
+ y: 'y: %{y:.4~g}',
+ // z: 'z: %{z:.4~g}',
+ z: 'z: %{z}',
+ open: 'open: %{open:.2f}',
+ high: 'high: %{high:.2f}',
+ low: 'low: %{low:.2f}',
+ close: 'close: %{close:.2f}'
+};
+
+var DEFAULT_STYLE = {
+ align: 'left',
+ arrowcolor: 'black',
+ arrowhead: 3,
+ arrowsize: 1.8,
+ arrowwidth: 1,
+ font: {
+ color: 'black',
+ family: 'Arial',
+ size: 12
+ },
+ showarrow: true,
+ xanchor: 'left'
+};
+
+modeBarButtons.tooltip = {
+ name: 'tooltip',
+ title: function(gd) { return _(gd, 'Add Tooltip to Points'); },
+ icon: Icons.tooltip_annotate,
+ attr: '_tooltipEnabled',
+ val: 'on',
+ click: function(gd) {
+ var fullLayout = gd._fullLayout;
+ var tooltipEnabled = fullLayout._tooltipEnabled;
+
+ fullLayout._tooltipEnabled = tooltipEnabled === 'on' ? 'off' : 'on';
+
+ if(fullLayout._tooltipEnabled === 'on') {
+ gd._tooltipClickHandler = function(data) {
+ var traceIndex = data.points[0].curveNumber;
+ var trace = gd.data[traceIndex];
+ var pts = data.points[0];
+
+ // handle missing axis in data.points[0] (in scattercarpet)
+ if(pts.xaxis === undefined) pts.xaxis = fullLayout.xaxis;
+ if(pts.yaxis === undefined) pts.yaxis = fullLayout.yaxis;
+
+ // Build the default tooltip template dynamically based on available data fields
+ var defaultTemplateParts = [];
+ var xAxisType = pts.xaxis.type;
+ var yAxisType = pts.yaxis.type;
+ if(pts.x !== undefined) defaultTemplateParts.push(DEFAULT_TEMPLATES.hasOwnProperty(xAxisType + '_x') ? DEFAULT_TEMPLATES[xAxisType + '_x'] : DEFAULT_TEMPLATES.x);
+ if(pts.y !== undefined) defaultTemplateParts.push(DEFAULT_TEMPLATES.hasOwnProperty(yAxisType + '_y') ? DEFAULT_TEMPLATES[yAxisType + '_y'] : DEFAULT_TEMPLATES.y);
+ if(pts.z !== undefined) defaultTemplateParts.push(DEFAULT_TEMPLATES.z);
+ // ohlc
+ if(pts.open !== undefined) defaultTemplateParts.push(DEFAULT_TEMPLATES.open);
+ if(pts.high !== undefined) defaultTemplateParts.push(DEFAULT_TEMPLATES.high);
+ if(pts.low !== undefined) defaultTemplateParts.push(DEFAULT_TEMPLATES.low);
+ if(pts.close !== undefined) defaultTemplateParts.push(DEFAULT_TEMPLATES.close);
+ // not consistent:
+ // box: missing max, upper fence... in data.points[0]
+
+ var defaultTemplate = defaultTemplateParts.join('<br>');
+
+ var userTemplate = trace.tooltiptemplate || gd._fullData[traceIndex].tooltiptemplate || defaultTemplate; // Use user defined tooltiptemplate, or trace default if availabe
+ var customStyle = lodash.defaults({}, trace.tooltip, DEFAULT_STYLE); // Merge custom style with default
+ addTooltip(gd, data, userTemplate, customStyle);
+ };
+ gd.on('plotly_click', gd._tooltipClickHandler);
+ } else {
+ gd.removeListener('plotly_click', gd._tooltipClickHandler);
+ }
+
+ if(!gd._relayoutHandlerAdded) {
+ gd._relayoutHandlerAdded = true;
+ gd.on('plotly_relayout', function(eventData) {
+ removeEmptyAnnotations(gd, eventData);
+ });
+ }
+ }
+};
+
+function clickPointToCoord(gd, data) {
+ var pts = data.points[0];
+ var xaxis = pts.xaxis;
+ var yaxis = pts.yaxis;
+ var bb = data.event.target.getBoundingClientRect();
+
+ // pixel to Cartesian coordinates
+ var x = xaxis.p2c(data.event.clientX - bb.left);
+ var y = yaxis.p2c(data.event.clientY - bb.top);
+
+ return {x: x, y: y};
+}
+
+function addTooltip(gd, data, userTemplate, customStyle) {
+ var pts = data.points[0];
+ var fullLayout = gd._fullLayout;
+
+ if(pts && pts.xaxis && pts.yaxis && fullLayout) {
+ // Convert template to text using Plotly hovertemplate formatting method
+ var text = Lib.hovertemplateString(userTemplate, {}, fullLayout._d3locale, pts, {});
+
+ var x = pts.x;
+ var y = (pts.y !== undefined && pts.y !== null) ? pts.y : pts.high; // fallback value for candlestick etc
+
+ // Handle histogram with more than one curve (bars displayed side to side)
+ // This ensures the tooltip is on the clicked bar and not always on the middle bar
+ if(pts.fullData && ['histogram', 'box', 'violin'].includes(pts.fullData.type) && fullLayout._dataLength) {
+ var clickCoord = clickPointToCoord(gd, data);
+ if(pts.fullData.orientation === 'v') {
+ x = clickCoord.x;
+ }
+ if(pts.fullData.orientation === 'h') {
+ y = clickCoord.y;
+ }
+ }
+
+ // Retrieve the proper axis ids for xref and yref
+ var xAxisName = 'x' + (pts.xaxis._id !== 'x' ? pts.xaxis._id.replace('x', '') : '');
+ var yAxisName = 'y' + (pts.yaxis._id !== 'y' ? pts.yaxis._id.replace('y', '') : '');
+
+ var newAnnotation = {
+ // Handle log axis https://plotly.com/javascript/text-and-annotations/#annotations-with-log-axes
+ x: pts.xaxis.type === 'log' ? Math.log10(x) : x,
+ y: pts.yaxis.type === 'log' ? Math.log10(y) : y,
+ xref: xAxisName,
+ yref: yAxisName,
+ text: text,
+ showarrow: true,
+ ax: 5,
+ ay: -20
+ };
+
+ lodash.defaults(newAnnotation, customStyle);
+
+ // Prevent having multiple tooltip annotations on the same point (useful when user wants to annotate nearby points)
+ // Does not prevent multiple tooltips on histogram (would not be useful on bars)
+ var existingIndex = fullLayout.annotations.findIndex(function(ann) {
+ return ann.x === x && ann.y === y && ann.xref === xAxisName && ann.yref === yAxisName;
+ });
+
+ if(existingIndex === -1) {
+ fullLayout.annotations.push(newAnnotation);
+ var aObj = { annotations: fullLayout.annotations };
+ Registry.call('_guiRelayout', gd, aObj);
+ }
+ }
+}
+
+function removeEmptyAnnotations(gd, eventData) {
+ for(var key in eventData) {
+ if(key.includes('annotations[') && key.includes('].text')) {
+ var index = key.match(/annotations\[(\d+)\]\.text/)[1];
+ if(eventData[key] === '') {
+ var updatedAnnotations = gd.layout.annotations || [];
+ updatedAnnotations.splice(index, 1);
+ var aObj = { annotations: updatedAnnotations };
+ Registry.call('_guiRelayout', gd, aObj);
+ break;
+ }
+ }
+ }
+}
+
 function setSpikelineVisibility(gd) {
  var fullLayout = gd._fullLayout;
  var areSpikesOn = fullLayout._cartesianSpikesEnabled === 'on';

diff --git a/src/components/modebar/constants.js b/src/components/modebar/constants.js
@@ -13,11 +13,12 @@ var DRAW_MODES = [
 ];
 
 var backButtons = [
+ 'tooltip',
  'v1hovermode',
  'hoverclosest',
  'hovercompare',
  'togglehover',
- 'togglespikelines'
+ 'togglespikelines',
 ].concat(DRAW_MODES);
 
 var foreButtons = [];