@carbon/charts 0.33.0 → 0.34.2

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
Files changed (167) hide show
  1. package/CHANGELOG.md +45 -1
  2. package/axis-chart.d.ts +2 -2
  3. package/axis-chart.js +6 -4
  4. package/axis-chart.js.map +1 -1
  5. package/build/demo/data/bar.d.ts +12 -48
  6. package/build/demo/data/bubble.d.ts +1 -0
  7. package/build/src/axis-chart.d.ts +2 -2
  8. package/build/src/chart.d.ts +2 -2
  9. package/build/src/components/axes/ruler-stacked-bar.d.ts +4 -0
  10. package/build/src/components/axes/ruler.d.ts +6 -1
  11. package/build/src/components/essentials/tooltip-axis.d.ts +4 -0
  12. package/build/src/components/essentials/tooltip.d.ts +4 -10
  13. package/build/src/components/index.d.ts +2 -4
  14. package/build/src/configuration.d.ts +1 -3
  15. package/build/src/interfaces/a11y.d.ts +2 -1
  16. package/build/src/interfaces/charts.d.ts +1 -3
  17. package/build/src/interfaces/components.d.ts +7 -52
  18. package/build/src/interfaces/enums.d.ts +0 -10
  19. package/build/src/interfaces/events.d.ts +1 -0
  20. package/build/src/services/scales-cartesian.d.ts +6 -1
  21. package/bundle.js +1 -1
  22. package/chart.d.ts +2 -2
  23. package/chart.js +2 -1
  24. package/chart.js.map +1 -1
  25. package/charts/area-stacked.js +1 -3
  26. package/charts/area-stacked.js.map +1 -1
  27. package/charts/area.js +1 -2
  28. package/charts/area.js.map +1 -1
  29. package/charts/bar-grouped.js +1 -2
  30. package/charts/bar-grouped.js.map +1 -1
  31. package/charts/bar-simple.js +1 -2
  32. package/charts/bar-simple.js.map +1 -1
  33. package/charts/bar-stacked.js +2 -2
  34. package/charts/bar-stacked.js.map +1 -1
  35. package/charts/bubble.js +1 -2
  36. package/charts/bubble.js.map +1 -1
  37. package/charts/donut.js +1 -2
  38. package/charts/donut.js.map +1 -1
  39. package/charts/gauge.js +1 -2
  40. package/charts/gauge.js.map +1 -1
  41. package/charts/line.js +1 -2
  42. package/charts/line.js.map +1 -1
  43. package/charts/pie.js +1 -4
  44. package/charts/pie.js.map +1 -1
  45. package/charts/radar.js +0 -3
  46. package/charts/radar.js.map +1 -1
  47. package/charts/scatter.js +1 -2
  48. package/charts/scatter.js.map +1 -1
  49. package/components/axes/axis.js +23 -8
  50. package/components/axes/axis.js.map +1 -1
  51. package/components/axes/grid.js.map +1 -1
  52. package/components/axes/ruler-stacked-bar.d.ts +4 -0
  53. package/components/axes/ruler-stacked-bar.js +26 -0
  54. package/components/axes/ruler-stacked-bar.js.map +1 -0
  55. package/components/axes/ruler.d.ts +6 -1
  56. package/components/axes/ruler.js +25 -13
  57. package/components/axes/ruler.js.map +1 -1
  58. package/components/essentials/legend.js +15 -14
  59. package/components/essentials/legend.js.map +1 -1
  60. package/components/essentials/threshold.js +2 -2
  61. package/components/essentials/threshold.js.map +1 -1
  62. package/components/essentials/title.js +10 -9
  63. package/components/essentials/title.js.map +1 -1
  64. package/components/essentials/tooltip-axis.d.ts +4 -0
  65. package/components/essentials/tooltip-axis.js +120 -0
  66. package/components/essentials/tooltip-axis.js.map +1 -0
  67. package/components/essentials/tooltip.d.ts +4 -10
  68. package/components/essentials/tooltip.js +73 -100
  69. package/components/essentials/tooltip.js.map +1 -1
  70. package/components/graphs/area-stacked.js.map +1 -1
  71. package/components/graphs/bar-grouped.js +5 -3
  72. package/components/graphs/bar-grouped.js.map +1 -1
  73. package/components/graphs/bar-simple.js +4 -2
  74. package/components/graphs/bar-simple.js.map +1 -1
  75. package/components/graphs/bar-stacked.js +17 -14
  76. package/components/graphs/bar-stacked.js.map +1 -1
  77. package/components/graphs/pie.js +31 -12
  78. package/components/graphs/pie.js.map +1 -1
  79. package/components/graphs/radar.js +23 -18
  80. package/components/graphs/radar.js.map +1 -1
  81. package/components/graphs/scatter-stacked.js.map +1 -1
  82. package/components/graphs/scatter.js +18 -13
  83. package/components/graphs/scatter.js.map +1 -1
  84. package/components/graphs/skeleton.js +2 -5
  85. package/components/graphs/skeleton.js.map +1 -1
  86. package/components/index.d.ts +2 -4
  87. package/components/index.js +2 -4
  88. package/components/index.js.map +1 -1
  89. package/components/layout/layout.js +3 -1
  90. package/components/layout/layout.js.map +1 -1
  91. package/configuration.d.ts +1 -3
  92. package/configuration.js +6 -26
  93. package/configuration.js.map +1 -1
  94. package/demo/data/bar.d.ts +12 -48
  95. package/demo/data/bar.js +22 -58
  96. package/demo/data/bar.js.map +1 -1
  97. package/demo/data/bubble.d.ts +1 -0
  98. package/demo/data/bubble.js +2 -1
  99. package/demo/data/bubble.js.map +1 -1
  100. package/demo/data/bundle.js +1 -1
  101. package/demo/data/index.js +1 -1
  102. package/demo/data/index.js.map +1 -1
  103. package/demo/data/line.js +5 -5
  104. package/demo/data/line.js.map +1 -1
  105. package/demo/styles.css +48 -100
  106. package/demo/styles.css.map +1 -1
  107. package/demo/styles.min.css +1 -1
  108. package/demo/styles.min.css.map +1 -1
  109. package/demo/tsconfig.tsbuildinfo +16 -16
  110. package/interfaces/a11y.d.ts +2 -1
  111. package/interfaces/a11y.js +1 -0
  112. package/interfaces/a11y.js.map +1 -1
  113. package/interfaces/charts.d.ts +1 -3
  114. package/interfaces/charts.js.map +1 -1
  115. package/interfaces/components.d.ts +7 -52
  116. package/interfaces/components.js.map +1 -1
  117. package/interfaces/enums.d.ts +0 -10
  118. package/interfaces/enums.js +0 -11
  119. package/interfaces/enums.js.map +1 -1
  120. package/interfaces/events.d.ts +1 -0
  121. package/interfaces/events.js +1 -0
  122. package/interfaces/events.js.map +1 -1
  123. package/model.js +3 -5
  124. package/model.js.map +1 -1
  125. package/package.json +1 -1
  126. package/services/essentials/dom-utils.js +3 -1
  127. package/services/essentials/dom-utils.js.map +1 -1
  128. package/services/scales-cartesian.d.ts +6 -1
  129. package/services/scales-cartesian.js +20 -1
  130. package/services/scales-cartesian.js.map +1 -1
  131. package/styles/components/_ruler.scss +0 -6
  132. package/styles/components/_tooltip.scss +3 -9
  133. package/styles/graphs/_scatter-stacked.scss +10 -0
  134. package/styles/graphs/index.scss +1 -0
  135. package/styles-g10.css +13 -25
  136. package/styles-g10.css.map +1 -1
  137. package/styles-g10.min.css +1 -1
  138. package/styles-g10.min.css.map +1 -1
  139. package/styles-g100.css +13 -25
  140. package/styles-g100.css.map +1 -1
  141. package/styles-g100.min.css +1 -1
  142. package/styles-g100.min.css.map +1 -1
  143. package/styles-g90.css +13 -25
  144. package/styles-g90.css.map +1 -1
  145. package/styles-g90.min.css +1 -1
  146. package/styles-g90.min.css.map +1 -1
  147. package/styles.css +13 -25
  148. package/styles.css.map +1 -1
  149. package/styles.min.css +1 -1
  150. package/styles.min.css.map +1 -1
  151. package/tsconfig.tsbuildinfo +81 -138
  152. package/build/src/components/essentials/tooltip-bar.d.ts +0 -27
  153. package/build/src/components/essentials/tooltip-pie.d.ts +0 -5
  154. package/build/src/components/essentials/tooltip-radar.d.ts +0 -5
  155. package/build/src/components/essentials/tooltip-scatter.d.ts +0 -5
  156. package/components/essentials/tooltip-bar.d.ts +0 -27
  157. package/components/essentials/tooltip-bar.js +0 -193
  158. package/components/essentials/tooltip-bar.js.map +0 -1
  159. package/components/essentials/tooltip-pie.d.ts +0 -5
  160. package/components/essentials/tooltip-pie.js +0 -44
  161. package/components/essentials/tooltip-pie.js.map +0 -1
  162. package/components/essentials/tooltip-radar.d.ts +0 -5
  163. package/components/essentials/tooltip-radar.js +0 -45
  164. package/components/essentials/tooltip-radar.js.map +0 -1
  165. package/components/essentials/tooltip-scatter.d.ts +0 -5
  166. package/components/essentials/tooltip-scatter.js +0 -46
  167. package/components/essentials/tooltip-scatter.js.map +0 -1
@@ -1,193 +0,0 @@
1
- var __extends = (this && this.__extends) || (function () {
2
- var extendStatics = function (d, b) {
3
- extendStatics = Object.setPrototypeOf ||
4
- ({ __proto__: [] } instanceof Array && function (d, b) { d.__proto__ = b; }) ||
5
- function (d, b) { for (var p in b) if (b.hasOwnProperty(p)) d[p] = b[p]; };
6
- return extendStatics(d, b);
7
- };
8
- return function (d, b) {
9
- extendStatics(d, b);
10
- function __() { this.constructor = d; }
11
- d.prototype = b === null ? Object.create(b) : (__.prototype = b.prototype, new __());
12
- };
13
- })();
14
- import { Tooltip } from "./tooltip";
15
- import { Tools } from "../../tools";
16
- import { DOMUtils } from "../../services";
17
- import { TooltipPosition, TooltipTypes, CartesianOrientations, Events } from "./../../interfaces";
18
- // import the settings for the css prefix
19
- import settings from "carbon-components/es/globals/js/settings";
20
- // D3 Imports
21
- import { select } from "d3-selection";
22
- var TooltipBar = /** @class */ (function (_super) {
23
- __extends(TooltipBar, _super);
24
- function TooltipBar() {
25
- return _super !== null && _super.apply(this, arguments) || this;
26
- }
27
- TooltipBar.prototype.init = function () {
28
- var _this = this;
29
- // Grab the tooltip element
30
- var holder = select(this.services.domUtils.getHolder());
31
- var chartprefix = Tools.getProperty(this.model.getOptions(), "style", "prefix");
32
- this.tooltip = DOMUtils.appendOrSelect(holder, "div." + settings.prefix + "--" + chartprefix + "--tooltip");
33
- // Apply html content to the tooltip
34
- var tooltipTextContainer = DOMUtils.appendOrSelect(this.tooltip, "div.content-box");
35
- this.tooltip.style("max-width", null);
36
- // listen to show-tooltip Custom Events to render the tooltip
37
- this.services.events.addEventListener(Events.Tooltip.SHOW, function (e) {
38
- // check the type of tooltip and that it is enabled
39
- if ((e.detail.type === TooltipTypes.DATAPOINT &&
40
- Tools.getProperty(_this.model.getOptions(), "tooltip", "datapoint", "enabled")) ||
41
- (e.detail.type === TooltipTypes.GRIDLINE &&
42
- Tools.getProperty(_this.model.getOptions(), "tooltip", "gridline", "enabled")) ||
43
- e.detail.type === TooltipTypes.LEGEND ||
44
- e.detail.type === TooltipTypes.AXISLABEL) {
45
- var data = e.detail.hoveredElement.datum();
46
- var hoveredElement = e.detail.hoveredElement.node();
47
- var defaultHTML = void 0;
48
- if (e.detail.multidata) {
49
- // multi tooltip
50
- data = e.detail.multidata;
51
- defaultHTML = _this.getMultilineTooltipHTML(data);
52
- }
53
- else {
54
- if (e.detail.data) {
55
- data = e.detail.data;
56
- }
57
- else {
58
- data = e.detail.hoveredElement.datum();
59
- }
60
- defaultHTML = _this.getTooltipHTML(data, e.detail.type);
61
- }
62
- // if there is a provided tooltip HTML function call it and pass the defaultHTML
63
- if (Tools.getProperty(_this.model.getOptions(), "tooltip", "customHTML")) {
64
- tooltipTextContainer.html(_this.model
65
- .getOptions()
66
- .tooltip.customHTML(data, defaultHTML));
67
- }
68
- else {
69
- // default tooltip
70
- tooltipTextContainer.html(defaultHTML);
71
- }
72
- if (e.detail.type === TooltipTypes.LEGEND ||
73
- e.detail.type === TooltipTypes.AXISLABEL) {
74
- _this.positionTooltip();
75
- }
76
- else {
77
- var position = _this.getTooltipPosition(hoveredElement, data);
78
- // Position the tooltip relative to the bars
79
- _this.positionTooltip(e.detail.multidata ? undefined : position);
80
- }
81
- }
82
- else if (e.detail.type === TooltipTypes.TITLE) {
83
- // use the chart size to enforce a max width on the tooltip
84
- var chart = DOMUtils.appendOrSelect(holder, "svg." + settings.prefix + "--" + chartprefix + "--chart-svg");
85
- // use the configs to determine how large the tooltip should be
86
- var tooltipMax = DOMUtils.getSVGElementSize(chart).width *
87
- Tools.getProperty(_this.model.getOptions(), "tooltip", "title", "width");
88
- _this.tooltip.style("max-width", tooltipMax);
89
- // use tooltip.ts to get the tooltip html for titles
90
- tooltipTextContainer.html(_super.prototype.getTooltipHTML.call(_this, e.detail.hoveredElement, TooltipTypes.TITLE));
91
- // get the position based on the title positioning (static)
92
- var position = _super.prototype.getTooltipPosition.call(_this, e.detail.hoveredElement.node(), e.detail.type);
93
- _this.positionTooltip(position);
94
- }
95
- // Fade in
96
- _this.tooltip.classed("hidden", false);
97
- });
98
- // listen to hide-tooltip Custom Events to hide the tooltip
99
- this.services.events.addEventListener(Events.Tooltip.HIDE, function () {
100
- _this.tooltip.classed("hidden", true);
101
- });
102
- };
103
- /**
104
- * Get the position of the tooltip relative to the active hovered bar. Tooltip should appear above
105
- * positive valued data and below negative value data.
106
- * @param hoveredElement
107
- */
108
- TooltipBar.prototype.getTooltipPosition = function (hoveredElement, data) {
109
- if (data === undefined) {
110
- data = select(hoveredElement).datum();
111
- }
112
- var holderPosition = select(this.services.domUtils.getHolder())
113
- .node()
114
- .getBoundingClientRect();
115
- var barPosition = hoveredElement.getBoundingClientRect();
116
- var verticalOffset = this.model.getOptions().tooltip.datapoint.verticalOffset;
117
- // if there is a negative value bar chart, need to place the tooltip below the bar
118
- if (data.value <= 0) {
119
- // negative bars
120
- var tooltipPos = {
121
- left: barPosition.left -
122
- holderPosition.left +
123
- barPosition.width / 2,
124
- top: barPosition.bottom - holderPosition.top + verticalOffset
125
- };
126
- return { placement: TooltipPosition.BOTTOM, position: tooltipPos };
127
- }
128
- else {
129
- // positive bars
130
- var tooltipPos = {
131
- left: barPosition.left -
132
- holderPosition.left +
133
- barPosition.width / 2,
134
- top: barPosition.top - holderPosition.top - verticalOffset
135
- };
136
- return { placement: TooltipPosition.TOP, position: tooltipPos };
137
- }
138
- };
139
- /**
140
- * Returns the html for the bar single point tooltip
141
- * @param data associated values for the hovered bar
142
- */
143
- TooltipBar.prototype.getTooltipHTML = function (data, type) {
144
- if (type === TooltipTypes.LEGEND) {
145
- return "<div class=\"legend-tooltip\"><p class=\"label\">" + data.name + "</p></div>";
146
- }
147
- else if (type === TooltipTypes.AXISLABEL) {
148
- return "<div class=\"axis-tooltip\"><p class=\"label\">" + data + "</p></div>";
149
- }
150
- var formattedValue = Tools.getProperty(this.model.getOptions(), "tooltip", "valueFormatter")
151
- ? this.model.getOptions().tooltip.valueFormatter(data.value)
152
- : data.value.toLocaleString("en");
153
- return "<div class=\"datapoint-tooltip\"><p class=\"value\">" + formattedValue + "</p></div>";
154
- };
155
- /**
156
- * Multip tooltips for bar charts include totals for each stack
157
- * @param data
158
- */
159
- TooltipBar.prototype.getMultilineTooltipHTML = function (data) {
160
- var _this = this;
161
- var points = data;
162
- points.reverse();
163
- // in a vertical bar chart the tooltip should display in order of the drawn bars
164
- // in horizontal stacked bar, the order of the segments from Left to Right are displayed top down in tooltip
165
- if (this.services.cartesianScales.getOrientation() ===
166
- CartesianOrientations.VERTICAL) {
167
- points.reverse();
168
- }
169
- // get the total for the stacked tooltip
170
- var total = points.reduce(function (sum, item) { return sum + item.value; }, 0);
171
- // format the total value
172
- total = Tools.getProperty(this.model.getOptions(), "tooltip", "valueFormatter")
173
- ? this.model.getOptions().tooltip.valueFormatter(total)
174
- : total.toLocaleString("en");
175
- return ("<ul class='multi-tooltip'>" +
176
- points
177
- .map(function (datapoint) {
178
- var formattedValue = Tools.getProperty(_this.model.getOptions(), "tooltip", "valueFormatter")
179
- ? _this.model
180
- .getOptions()
181
- .tooltip.valueFormatter(datapoint.value)
182
- : datapoint.value.toLocaleString("en");
183
- // For the tooltip color, we always want the normal stroke color, not dynamically determined by data value.
184
- var indicatorColor = _this.model.getStrokeColor(datapoint.datasetLabel, datapoint.label);
185
- return "\n\t\t\t\t<li>\n\t\t\t\t\t<div class=\"datapoint-tooltip\">\n\t\t\t\t\t\t<a style=\"background-color:" + indicatorColor + "\" class=\"tooltip-color\"></a>\n\t\t\t\t\t\t<p class=\"label\">" + datapoint.datasetLabel + "</p>\n\t\t\t\t\t\t<p class=\"value\">" + formattedValue + "</p>\n\t\t\t\t\t</div>\n\t\t\t\t</li>";
186
- })
187
- .join("") +
188
- ("<li>\n\t\t\t\t\t<div class='total-val'>\n\t\t\t\t\t\t<p class='label'>Total</p>\n\t\t\t\t\t\t<p class='value'>" + total + "</p>\n\t\t\t\t\t</div>\n\t\t\t\t</li>\n\t\t\t</ul>"));
189
- };
190
- return TooltipBar;
191
- }(Tooltip));
192
- export { TooltipBar };
193
- //# sourceMappingURL=../../../src/components/essentials/tooltip-bar.js.map
@@ -1 +0,0 @@
1
- {"version":3,"file":"tooltip-bar.js","sourceRoot":"","sources":["tooltip-bar.ts"],"names":[],"mappings":"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","sourcesContent":["import { Tooltip } from \"./tooltip\";\nimport { Tools } from \"../../tools\";\nimport { DOMUtils } from \"../../services\";\nimport {\n\tTooltipPosition,\n\tTooltipTypes,\n\tCartesianOrientations,\n\tEvents\n} from \"./../../interfaces\";\n\n// import the settings for the css prefix\nimport settings from \"carbon-components/es/globals/js/settings\";\n\n// D3 Imports\nimport { select } from \"d3-selection\";\n\nexport class TooltipBar extends Tooltip {\n\tinit() {\n\t\t// Grab the tooltip element\n\t\tconst holder = select(this.services.domUtils.getHolder());\n\t\tconst chartprefix = Tools.getProperty(\n\t\t\tthis.model.getOptions(),\n\t\t\t\"style\",\n\t\t\t\"prefix\"\n\t\t);\n\t\tthis.tooltip = DOMUtils.appendOrSelect(\n\t\t\tholder,\n\t\t\t`div.${settings.prefix}--${chartprefix}--tooltip`\n\t\t);\n\n\t\t// Apply html content to the tooltip\n\t\tconst tooltipTextContainer = DOMUtils.appendOrSelect(\n\t\t\tthis.tooltip,\n\t\t\t\"div.content-box\"\n\t\t);\n\t\tthis.tooltip.style(\"max-width\", null);\n\n\t\t// listen to show-tooltip Custom Events to render the tooltip\n\t\tthis.services.events.addEventListener(Events.Tooltip.SHOW, (e) => {\n\t\t\t// check the type of tooltip and that it is enabled\n\t\t\tif (\n\t\t\t\t(e.detail.type === TooltipTypes.DATAPOINT &&\n\t\t\t\t\tTools.getProperty(\n\t\t\t\t\t\tthis.model.getOptions(),\n\t\t\t\t\t\t\"tooltip\",\n\t\t\t\t\t\t\"datapoint\",\n\t\t\t\t\t\t\"enabled\"\n\t\t\t\t\t)) ||\n\t\t\t\t(e.detail.type === TooltipTypes.GRIDLINE &&\n\t\t\t\t\tTools.getProperty(\n\t\t\t\t\t\tthis.model.getOptions(),\n\t\t\t\t\t\t\"tooltip\",\n\t\t\t\t\t\t\"gridline\",\n\t\t\t\t\t\t\"enabled\"\n\t\t\t\t\t)) ||\n\t\t\t\te.detail.type === TooltipTypes.LEGEND ||\n\t\t\t\te.detail.type === TooltipTypes.AXISLABEL\n\t\t\t) {\n\t\t\t\tlet data = e.detail.hoveredElement.datum() as any;\n\t\t\t\tconst hoveredElement = e.detail.hoveredElement.node();\n\n\t\t\t\tlet defaultHTML;\n\t\t\t\tif (e.detail.multidata) {\n\t\t\t\t\t// multi tooltip\n\t\t\t\t\tdata = e.detail.multidata;\n\t\t\t\t\tdefaultHTML = this.getMultilineTooltipHTML(data);\n\t\t\t\t} else {\n\t\t\t\t\tif (e.detail.data) {\n\t\t\t\t\t\tdata = e.detail.data;\n\t\t\t\t\t} else {\n\t\t\t\t\t\tdata = e.detail.hoveredElement.datum();\n\t\t\t\t\t}\n\n\t\t\t\t\tdefaultHTML = this.getTooltipHTML(data, e.detail.type);\n\t\t\t\t}\n\n\t\t\t\t// if there is a provided tooltip HTML function call it and pass the defaultHTML\n\t\t\t\tif (\n\t\t\t\t\tTools.getProperty(\n\t\t\t\t\t\tthis.model.getOptions(),\n\t\t\t\t\t\t\"tooltip\",\n\t\t\t\t\t\t\"customHTML\"\n\t\t\t\t\t)\n\t\t\t\t) {\n\t\t\t\t\ttooltipTextContainer.html(\n\t\t\t\t\t\tthis.model\n\t\t\t\t\t\t\t.getOptions()\n\t\t\t\t\t\t\t.tooltip.customHTML(data, defaultHTML)\n\t\t\t\t\t);\n\t\t\t\t} else {\n\t\t\t\t\t// default tooltip\n\t\t\t\t\ttooltipTextContainer.html(defaultHTML);\n\t\t\t\t}\n\t\t\t\tif (\n\t\t\t\t\te.detail.type === TooltipTypes.LEGEND ||\n\t\t\t\t\te.detail.type === TooltipTypes.AXISLABEL\n\t\t\t\t) {\n\t\t\t\t\tthis.positionTooltip();\n\t\t\t\t} else {\n\t\t\t\t\tconst position = this.getTooltipPosition(\n\t\t\t\t\t\thoveredElement,\n\t\t\t\t\t\tdata\n\t\t\t\t\t);\n\t\t\t\t\t// Position the tooltip relative to the bars\n\t\t\t\t\tthis.positionTooltip(\n\t\t\t\t\t\te.detail.multidata ? undefined : position\n\t\t\t\t\t);\n\t\t\t\t}\n\t\t\t} else if (e.detail.type === TooltipTypes.TITLE) {\n\t\t\t\t// use the chart size to enforce a max width on the tooltip\n\t\t\t\tconst chart = DOMUtils.appendOrSelect(\n\t\t\t\t\tholder,\n\t\t\t\t\t`svg.${settings.prefix}--${chartprefix}--chart-svg`\n\t\t\t\t);\n\t\t\t\t// use the configs to determine how large the tooltip should be\n\t\t\t\tconst tooltipMax =\n\t\t\t\t\tDOMUtils.getSVGElementSize(chart).width *\n\t\t\t\t\tTools.getProperty(\n\t\t\t\t\t\tthis.model.getOptions(),\n\t\t\t\t\t\t\"tooltip\",\n\t\t\t\t\t\t\"title\",\n\t\t\t\t\t\t\"width\"\n\t\t\t\t\t);\n\t\t\t\tthis.tooltip.style(\"max-width\", tooltipMax);\n\n\t\t\t\t// use tooltip.ts to get the tooltip html for titles\n\t\t\t\ttooltipTextContainer.html(\n\t\t\t\t\tsuper.getTooltipHTML(\n\t\t\t\t\t\te.detail.hoveredElement,\n\t\t\t\t\t\tTooltipTypes.TITLE\n\t\t\t\t\t)\n\t\t\t\t);\n\n\t\t\t\t// get the position based on the title positioning (static)\n\t\t\t\tconst position = super.getTooltipPosition(\n\t\t\t\t\te.detail.hoveredElement.node(),\n\t\t\t\t\te.detail.type\n\t\t\t\t);\n\t\t\t\tthis.positionTooltip(position);\n\t\t\t}\n\n\t\t\t// Fade in\n\t\t\tthis.tooltip.classed(\"hidden\", false);\n\t\t});\n\n\t\t// listen to hide-tooltip Custom Events to hide the tooltip\n\t\tthis.services.events.addEventListener(Events.Tooltip.HIDE, () => {\n\t\t\tthis.tooltip.classed(\"hidden\", true);\n\t\t});\n\t}\n\n\t/**\n\t * Get the position of the tooltip relative to the active hovered bar. Tooltip should appear above\n\t * positive valued data and below negative value data.\n\t * @param hoveredElement\n\t */\n\tgetTooltipPosition(hoveredElement, data?: any) {\n\t\tif (data === undefined) {\n\t\t\tdata = select(hoveredElement).datum() as any;\n\t\t}\n\n\t\tconst holderPosition = select(this.services.domUtils.getHolder())\n\t\t\t.node()\n\t\t\t.getBoundingClientRect();\n\t\tconst barPosition = hoveredElement.getBoundingClientRect();\n\n\t\tconst { verticalOffset } = this.model.getOptions().tooltip.datapoint;\n\t\t// if there is a negative value bar chart, need to place the tooltip below the bar\n\t\tif (data.value <= 0) {\n\t\t\t// negative bars\n\t\t\tconst tooltipPos = {\n\t\t\t\tleft:\n\t\t\t\t\tbarPosition.left -\n\t\t\t\t\tholderPosition.left +\n\t\t\t\t\tbarPosition.width / 2,\n\t\t\t\ttop: barPosition.bottom - holderPosition.top + verticalOffset\n\t\t\t};\n\n\t\t\treturn { placement: TooltipPosition.BOTTOM, position: tooltipPos };\n\t\t} else {\n\t\t\t// positive bars\n\t\t\tconst tooltipPos = {\n\t\t\t\tleft:\n\t\t\t\t\tbarPosition.left -\n\t\t\t\t\tholderPosition.left +\n\t\t\t\t\tbarPosition.width / 2,\n\t\t\t\ttop: barPosition.top - holderPosition.top - verticalOffset\n\t\t\t};\n\n\t\t\treturn { placement: TooltipPosition.TOP, position: tooltipPos };\n\t\t}\n\t}\n\n\t/**\n\t * Returns the html for the bar single point tooltip\n\t * @param data associated values for the hovered bar\n\t */\n\tgetTooltipHTML(data: any, type: TooltipTypes) {\n\t\tif (type === TooltipTypes.LEGEND) {\n\t\t\treturn `<div class=\"legend-tooltip\"><p class=\"label\">${data.name}</p></div>`;\n\t\t} else if (type === TooltipTypes.AXISLABEL) {\n\t\t\treturn `<div class=\"axis-tooltip\"><p class=\"label\">${data}</p></div>`;\n\t\t}\n\n\t\tconst formattedValue = Tools.getProperty(\n\t\t\tthis.model.getOptions(),\n\t\t\t\"tooltip\",\n\t\t\t\"valueFormatter\"\n\t\t)\n\t\t\t? this.model.getOptions().tooltip.valueFormatter(data.value)\n\t\t\t: data.value.toLocaleString(\"en\");\n\n\t\treturn `<div class=\"datapoint-tooltip\"><p class=\"value\">${formattedValue}</p></div>`;\n\t}\n\n\t/**\n\t * Multip tooltips for bar charts include totals for each stack\n\t * @param data\n\t */\n\tgetMultilineTooltipHTML(data: any) {\n\t\tconst points = data;\n\n\t\tpoints.reverse();\n\t\t// in a vertical bar chart the tooltip should display in order of the drawn bars\n\t\t// in horizontal stacked bar, the order of the segments from Left to Right are displayed top down in tooltip\n\t\tif (\n\t\t\tthis.services.cartesianScales.getOrientation() ===\n\t\t\tCartesianOrientations.VERTICAL\n\t\t) {\n\t\t\tpoints.reverse();\n\t\t}\n\n\t\t// get the total for the stacked tooltip\n\t\tlet total = points.reduce((sum, item) => sum + item.value, 0);\n\n\t\t// format the total value\n\t\ttotal = Tools.getProperty(\n\t\t\tthis.model.getOptions(),\n\t\t\t\"tooltip\",\n\t\t\t\"valueFormatter\"\n\t\t)\n\t\t\t? this.model.getOptions().tooltip.valueFormatter(total)\n\t\t\t: total.toLocaleString(\"en\");\n\n\t\treturn (\n\t\t\t\"<ul class='multi-tooltip'>\" +\n\t\t\tpoints\n\t\t\t\t.map((datapoint) => {\n\t\t\t\t\tconst formattedValue = Tools.getProperty(\n\t\t\t\t\t\tthis.model.getOptions(),\n\t\t\t\t\t\t\"tooltip\",\n\t\t\t\t\t\t\"valueFormatter\"\n\t\t\t\t\t)\n\t\t\t\t\t\t? this.model\n\t\t\t\t\t\t\t\t.getOptions()\n\t\t\t\t\t\t\t\t.tooltip.valueFormatter(datapoint.value)\n\t\t\t\t\t\t: datapoint.value.toLocaleString(\"en\");\n\n\t\t\t\t\t// For the tooltip color, we always want the normal stroke color, not dynamically determined by data value.\n\t\t\t\t\tconst indicatorColor = this.model.getStrokeColor(\n\t\t\t\t\t\tdatapoint.datasetLabel,\n\t\t\t\t\t\tdatapoint.label\n\t\t\t\t\t);\n\n\t\t\t\t\treturn `\n\t\t\t\t<li>\n\t\t\t\t\t<div class=\"datapoint-tooltip\">\n\t\t\t\t\t\t<a style=\"background-color:${indicatorColor}\" class=\"tooltip-color\"></a>\n\t\t\t\t\t\t<p class=\"label\">${datapoint.datasetLabel}</p>\n\t\t\t\t\t\t<p class=\"value\">${formattedValue}</p>\n\t\t\t\t\t</div>\n\t\t\t\t</li>`;\n\t\t\t\t})\n\t\t\t\t.join(\"\") +\n\t\t\t`<li>\n\t\t\t\t\t<div class='total-val'>\n\t\t\t\t\t\t<p class='label'>Total</p>\n\t\t\t\t\t\t<p class='value'>${total}</p>\n\t\t\t\t\t</div>\n\t\t\t\t</li>\n\t\t\t</ul>`\n\t\t);\n\t}\n}\n"]}
@@ -1,5 +0,0 @@
1
- import { Tooltip } from "./tooltip";
2
- import { TooltipTypes } from "../../interfaces";
3
- export declare class TooltipPie extends Tooltip {
4
- getTooltipHTML(d: any, type: TooltipTypes): string;
5
- }
@@ -1,44 +0,0 @@
1
- var __extends = (this && this.__extends) || (function () {
2
- var extendStatics = function (d, b) {
3
- extendStatics = Object.setPrototypeOf ||
4
- ({ __proto__: [] } instanceof Array && function (d, b) { d.__proto__ = b; }) ||
5
- function (d, b) { for (var p in b) if (b.hasOwnProperty(p)) d[p] = b[p]; };
6
- return extendStatics(d, b);
7
- };
8
- return function (d, b) {
9
- extendStatics(d, b);
10
- function __() { this.constructor = d; }
11
- d.prototype = b === null ? Object.create(b) : (__.prototype = b.prototype, new __());
12
- };
13
- })();
14
- import { Tooltip } from "./tooltip";
15
- import { Tools } from "../../tools";
16
- import { TooltipTypes } from "../../interfaces";
17
- var TooltipPie = /** @class */ (function (_super) {
18
- __extends(TooltipPie, _super);
19
- function TooltipPie() {
20
- return _super !== null && _super.apply(this, arguments) || this;
21
- }
22
- TooltipPie.prototype.getTooltipHTML = function (d, type) {
23
- // check if it is getting styles for a tooltip type
24
- if (type === TooltipTypes.TITLE) {
25
- var title = this.model.getOptions().title;
26
- return "<div class=\"title-tooltip\"><text>" + title + "</text></div>";
27
- }
28
- else if (type === TooltipTypes.LEGEND) {
29
- return "<div class=\"legend-tooltip\"><p class=\"label\">" + d.name + "</p></div>";
30
- }
31
- var dataVal = d.data;
32
- var groupMapsTo = this.model.getOptions().data.groupMapsTo;
33
- // format the value if needed
34
- var formattedValue = Tools.getProperty(this.model.getOptions(), "tooltip", "valueFormatter")
35
- ? this.model.getOptions().tooltip.valueFormatter(dataVal.value)
36
- : dataVal.value.toLocaleString("en");
37
- // pie charts don't have a dataset label since they only support one dataset
38
- var label = dataVal[groupMapsTo];
39
- return "<div class=\"datapoint-tooltip\">\n\t\t\t\t<p class=\"label\">" + label + "</p>\n\t\t\t\t<p class=\"value\">" + formattedValue + "</p>\n\t\t\t</div>";
40
- };
41
- return TooltipPie;
42
- }(Tooltip));
43
- export { TooltipPie };
44
- //# sourceMappingURL=../../../src/components/essentials/tooltip-pie.js.map
@@ -1 +0,0 @@
1
- {"version":3,"file":"tooltip-pie.js","sourceRoot":"","sources":["tooltip-pie.ts"],"names":[],"mappings":";;;;;;;;;;;;;AAAA,OAAO,EAAE,OAAO,EAAE,MAAM,WAAW,CAAC;AACpC,OAAO,EAAE,KAAK,EAAE,MAAM,aAAa,CAAC;AACpC,OAAO,EAAE,YAAY,EAAE,MAAM,kBAAkB,CAAC;AAEhD;IAAgC,8BAAO;IAAvC;;IA8BA,CAAC;IA7BA,mCAAc,GAAd,UAAe,CAAM,EAAE,IAAkB;QACxC,mDAAmD;QACnD,IAAI,IAAI,KAAK,YAAY,CAAC,KAAK,EAAE;YAChC,IAAM,KAAK,GAAG,IAAI,CAAC,KAAK,CAAC,UAAU,EAAE,CAAC,KAAK,CAAC;YAC5C,OAAO,wCAAoC,KAAK,kBAAe,CAAC;SAChE;aAAM,IAAI,IAAI,KAAK,YAAY,CAAC,MAAM,EAAE;YACxC,OAAO,sDAAgD,CAAC,CAAC,IAAI,eAAY,CAAC;SAC1E;QAED,IAAM,OAAO,GAAG,CAAC,CAAC,IAAI,CAAC;QACf,IAAA,sDAAW,CAAkC;QAErD,6BAA6B;QAC7B,IAAM,cAAc,GAAG,KAAK,CAAC,WAAW,CACvC,IAAI,CAAC,KAAK,CAAC,UAAU,EAAE,EACvB,SAAS,EACT,gBAAgB,CAChB;YACA,CAAC,CAAC,IAAI,CAAC,KAAK,CAAC,UAAU,EAAE,CAAC,OAAO,CAAC,cAAc,CAAC,OAAO,CAAC,KAAK,CAAC;YAC/D,CAAC,CAAC,OAAO,CAAC,KAAK,CAAC,cAAc,CAAC,IAAI,CAAC,CAAC;QAEtC,4EAA4E;QAC5E,IAAM,KAAK,GAAG,OAAO,CAAC,WAAW,CAAC,CAAC;QAEnC,OAAO,mEACc,KAAK,yCACL,cAAc,uBAC3B,CAAC;IACV,CAAC;IACF,iBAAC;AAAD,CAAC,AA9BD,CAAgC,OAAO,GA8BtC","sourcesContent":["import { Tooltip } from \"./tooltip\";\nimport { Tools } from \"../../tools\";\nimport { TooltipTypes } from \"../../interfaces\";\n\nexport class TooltipPie extends Tooltip {\n\tgetTooltipHTML(d: any, type: TooltipTypes) {\n\t\t// check if it is getting styles for a tooltip type\n\t\tif (type === TooltipTypes.TITLE) {\n\t\t\tconst title = this.model.getOptions().title;\n\t\t\treturn `<div class=\"title-tooltip\"><text>${title}</text></div>`;\n\t\t} else if (type === TooltipTypes.LEGEND) {\n\t\t\treturn `<div class=\"legend-tooltip\"><p class=\"label\">${d.name}</p></div>`;\n\t\t}\n\n\t\tconst dataVal = d.data;\n\t\tconst { groupMapsTo } = this.model.getOptions().data;\n\n\t\t// format the value if needed\n\t\tconst formattedValue = Tools.getProperty(\n\t\t\tthis.model.getOptions(),\n\t\t\t\"tooltip\",\n\t\t\t\"valueFormatter\"\n\t\t)\n\t\t\t? this.model.getOptions().tooltip.valueFormatter(dataVal.value)\n\t\t\t: dataVal.value.toLocaleString(\"en\");\n\n\t\t// pie charts don't have a dataset label since they only support one dataset\n\t\tconst label = dataVal[groupMapsTo];\n\n\t\treturn `<div class=\"datapoint-tooltip\">\n\t\t\t\t<p class=\"label\">${label}</p>\n\t\t\t\t<p class=\"value\">${formattedValue}</p>\n\t\t\t</div>`;\n\t}\n}\n"]}
@@ -1,5 +0,0 @@
1
- import { Tooltip } from "./tooltip";
2
- import { TooltipTypes } from "../../interfaces";
3
- export declare class TooltipRadar extends Tooltip {
4
- getMultilineTooltipHTML(data: any, type: TooltipTypes): string;
5
- }
@@ -1,45 +0,0 @@
1
- var __extends = (this && this.__extends) || (function () {
2
- var extendStatics = function (d, b) {
3
- extendStatics = Object.setPrototypeOf ||
4
- ({ __proto__: [] } instanceof Array && function (d, b) { d.__proto__ = b; }) ||
5
- function (d, b) { for (var p in b) if (b.hasOwnProperty(p)) d[p] = b[p]; };
6
- return extendStatics(d, b);
7
- };
8
- return function (d, b) {
9
- extendStatics(d, b);
10
- function __() { this.constructor = d; }
11
- d.prototype = b === null ? Object.create(b) : (__.prototype = b.prototype, new __());
12
- };
13
- })();
14
- import { Tooltip } from "./tooltip";
15
- import { Tools } from "../../tools";
16
- var TooltipRadar = /** @class */ (function (_super) {
17
- __extends(TooltipRadar, _super);
18
- function TooltipRadar() {
19
- return _super !== null && _super.apply(this, arguments) || this;
20
- }
21
- TooltipRadar.prototype.getMultilineTooltipHTML = function (data, type) {
22
- var _this = this;
23
- var options = this.model.getOptions();
24
- var groupMapsTo = options.data.groupMapsTo;
25
- var _a = options.radar.axes, angle = _a.angle, value = _a.value;
26
- // sort them so they are in the same order as the graph
27
- data.sort(function (a, b) { return b[value] - a[value]; });
28
- return ("<ul class='multi-tooltip'>" +
29
- data
30
- .map(function (datum) {
31
- var userProvidedValueFormatter = Tools.getProperty(options, "tooltip", "valueFormatter");
32
- var formattedValue = userProvidedValueFormatter
33
- ? userProvidedValueFormatter(datum[value])
34
- : datum[value];
35
- // For the tooltip color, we always want the normal stroke color, not dynamically determined by data value.
36
- var indicatorColor = _this.model.getStrokeColor(datum[groupMapsTo]);
37
- return "\n\t\t\t\t<li>\n\t\t\t\t\t<div class=\"datapoint-tooltip\">\n\t\t\t\t\t\t<a style=\"background-color:" + indicatorColor + "\" class=\"tooltip-color\"></a>\n\t\t\t\t\t\t<p class=\"label\">" + datum[groupMapsTo] + "</p>\n\t\t\t\t\t\t<p class=\"value\">" + formattedValue + "</p>\n\t\t\t\t\t</div>\n\t\t\t\t</li>";
38
- })
39
- .join("") +
40
- "</ul>");
41
- };
42
- return TooltipRadar;
43
- }(Tooltip));
44
- export { TooltipRadar };
45
- //# sourceMappingURL=../../../src/components/essentials/tooltip-radar.js.map
@@ -1 +0,0 @@
1
- {"version":3,"file":"tooltip-radar.js","sourceRoot":"","sources":["tooltip-radar.ts"],"names":[],"mappings":";;;;;;;;;;;;;AAAA,OAAO,EAAE,OAAO,EAAE,MAAM,WAAW,CAAC;AACpC,OAAO,EAAE,KAAK,EAAE,MAAM,aAAa,CAAC;AAGpC;IAAkC,gCAAO;IAAzC;;IAwCA,CAAC;IAvCA,8CAAuB,GAAvB,UAAwB,IAAS,EAAE,IAAkB;QAArD,iBAsCC;QArCA,IAAM,OAAO,GAAG,IAAI,CAAC,KAAK,CAAC,UAAU,EAAE,CAAC;QAChC,IAAA,sCAAW,CAAkB;QAC/B,IAAA,uBAAqC,EAAnC,gBAAK,EAAE,gBAA4B,CAAC;QAE5C,uDAAuD;QACvD,IAAI,CAAC,IAAI,CAAC,UAAC,CAAC,EAAE,CAAC,IAAK,OAAA,CAAC,CAAC,KAAK,CAAC,GAAG,CAAC,CAAC,KAAK,CAAC,EAAnB,CAAmB,CAAC,CAAC;QAEzC,OAAO,CACN,4BAA4B;YAC5B,IAAI;iBACF,GAAG,CAAC,UAAC,KAAK;gBACV,IAAM,0BAA0B,GAAG,KAAK,CAAC,WAAW,CACnD,OAAO,EACP,SAAS,EACT,gBAAgB,CAChB,CAAC;gBACF,IAAM,cAAc,GAAG,0BAA0B;oBAChD,CAAC,CAAC,0BAA0B,CAAC,KAAK,CAAC,KAAK,CAAC,CAAC;oBAC1C,CAAC,CAAC,KAAK,CAAC,KAAK,CAAC,CAAC;gBAEhB,2GAA2G;gBAC3G,IAAM,cAAc,GAAG,KAAI,CAAC,KAAK,CAAC,cAAc,CAC/C,KAAK,CAAC,WAAW,CAAC,CAClB,CAAC;gBAEF,OAAO,0GAGuB,cAAc,wEACxB,KAAK,CAAC,WAAW,CAAC,6CAClB,cAAc,0CAE7B,CAAC;YACP,CAAC,CAAC;iBACD,IAAI,CAAC,EAAE,CAAC;YACV,OAAO,CACP,CAAC;IACH,CAAC;IACF,mBAAC;AAAD,CAAC,AAxCD,CAAkC,OAAO,GAwCxC","sourcesContent":["import { Tooltip } from \"./tooltip\";\nimport { Tools } from \"../../tools\";\nimport { TooltipTypes } from \"../../interfaces\";\n\nexport class TooltipRadar extends Tooltip {\n\tgetMultilineTooltipHTML(data: any, type: TooltipTypes) {\n\t\tconst options = this.model.getOptions();\n\t\tconst { groupMapsTo } = options.data;\n\t\tconst { angle, value } = options.radar.axes;\n\n\t\t// sort them so they are in the same order as the graph\n\t\tdata.sort((a, b) => b[value] - a[value]);\n\n\t\treturn (\n\t\t\t\"<ul class='multi-tooltip'>\" +\n\t\t\tdata\n\t\t\t\t.map((datum) => {\n\t\t\t\t\tconst userProvidedValueFormatter = Tools.getProperty(\n\t\t\t\t\t\toptions,\n\t\t\t\t\t\t\"tooltip\",\n\t\t\t\t\t\t\"valueFormatter\"\n\t\t\t\t\t);\n\t\t\t\t\tconst formattedValue = userProvidedValueFormatter\n\t\t\t\t\t\t? userProvidedValueFormatter(datum[value])\n\t\t\t\t\t\t: datum[value];\n\n\t\t\t\t\t// For the tooltip color, we always want the normal stroke color, not dynamically determined by data value.\n\t\t\t\t\tconst indicatorColor = this.model.getStrokeColor(\n\t\t\t\t\t\tdatum[groupMapsTo]\n\t\t\t\t\t);\n\n\t\t\t\t\treturn `\n\t\t\t\t<li>\n\t\t\t\t\t<div class=\"datapoint-tooltip\">\n\t\t\t\t\t\t<a style=\"background-color:${indicatorColor}\" class=\"tooltip-color\"></a>\n\t\t\t\t\t\t<p class=\"label\">${datum[groupMapsTo]}</p>\n\t\t\t\t\t\t<p class=\"value\">${formattedValue}</p>\n\t\t\t\t\t</div>\n\t\t\t\t</li>`;\n\t\t\t\t})\n\t\t\t\t.join(\"\") +\n\t\t\t\"</ul>\"\n\t\t);\n\t}\n}\n"]}
@@ -1,5 +0,0 @@
1
- import { Tooltip } from "./tooltip";
2
- import { TooltipTypes } from "./../../interfaces";
3
- export declare class TooltipScatter extends Tooltip {
4
- getTooltipHTML(datum: any, type: TooltipTypes): string;
5
- }
@@ -1,46 +0,0 @@
1
- var __extends = (this && this.__extends) || (function () {
2
- var extendStatics = function (d, b) {
3
- extendStatics = Object.setPrototypeOf ||
4
- ({ __proto__: [] } instanceof Array && function (d, b) { d.__proto__ = b; }) ||
5
- function (d, b) { for (var p in b) if (b.hasOwnProperty(p)) d[p] = b[p]; };
6
- return extendStatics(d, b);
7
- };
8
- return function (d, b) {
9
- extendStatics(d, b);
10
- function __() { this.constructor = d; }
11
- d.prototype = b === null ? Object.create(b) : (__.prototype = b.prototype, new __());
12
- };
13
- })();
14
- import { Tooltip } from "./tooltip";
15
- import { Tools } from "../../tools";
16
- import { TooltipTypes } from "./../../interfaces";
17
- var TooltipScatter = /** @class */ (function (_super) {
18
- __extends(TooltipScatter, _super);
19
- function TooltipScatter() {
20
- return _super !== null && _super.apply(this, arguments) || this;
21
- }
22
- TooltipScatter.prototype.getTooltipHTML = function (datum, type) {
23
- if (type === TooltipTypes.TITLE) {
24
- // the main tooltip component handles title styles
25
- return _super.prototype.getTooltipHTML.call(this, datum, type);
26
- }
27
- else if (type === TooltipTypes.LEGEND) {
28
- return "<div class=\"legend-tooltip\"><p class=\"label\">" + datum.name + "</p></div>";
29
- }
30
- else if (type === TooltipTypes.AXISLABEL) {
31
- return "<div class=\"axis-tooltip\"><p class=\"label\">" + datum + "</p></div>";
32
- }
33
- var groupMapsTo = this.model.getOptions().data.groupMapsTo;
34
- var rangeIdentifier = this.services.cartesianScales.getRangeIdentifier();
35
- var userProvidedValueFormatter = Tools.getProperty(this.model.getOptions(), "tooltip", "valueFormatter");
36
- var formattedValue = userProvidedValueFormatter
37
- ? userProvidedValueFormatter(datum[rangeIdentifier])
38
- : datum[rangeIdentifier].toLocaleString("en");
39
- // For the tooltip color, we always want the normal stroke color, not dynamically determined by data value.
40
- var indicatorColor = this.model.getStrokeColor(datum[groupMapsTo]);
41
- return "\n\t\t\t<div class=\"datapoint-tooltip\">\n\t\t\t\t<a style=\"background-color:" + indicatorColor + "\" class=\"tooltip-color\"></a>\n\t\t\t\t<p class=\"label\">" + datum[groupMapsTo] + "</p>\n\t\t\t\t<p class=\"value\">" + formattedValue + "</p>\n\t\t\t</div>";
42
- };
43
- return TooltipScatter;
44
- }(Tooltip));
45
- export { TooltipScatter };
46
- //# sourceMappingURL=../../../src/components/essentials/tooltip-scatter.js.map
@@ -1 +0,0 @@
1
- {"version":3,"file":"tooltip-scatter.js","sourceRoot":"","sources":["tooltip-scatter.ts"],"names":[],"mappings":";;;;;;;;;;;;;AAAA,OAAO,EAAE,OAAO,EAAE,MAAM,WAAW,CAAC;AACpC,OAAO,EAAE,KAAK,EAAE,MAAM,aAAa,CAAC;AACpC,OAAO,EAAE,YAAY,EAAE,MAAM,oBAAoB,CAAC;AAElD;IAAoC,kCAAO;IAA3C;;IAiCA,CAAC;IAhCA,uCAAc,GAAd,UAAe,KAAU,EAAE,IAAkB;QAC5C,IAAI,IAAI,KAAK,YAAY,CAAC,KAAK,EAAE;YAChC,kDAAkD;YAClD,OAAO,iBAAM,cAAc,YAAC,KAAK,EAAE,IAAI,CAAC,CAAC;SACzC;aAAM,IAAI,IAAI,KAAK,YAAY,CAAC,MAAM,EAAE;YACxC,OAAO,sDAAgD,KAAK,CAAC,IAAI,eAAY,CAAC;SAC9E;aAAM,IAAI,IAAI,KAAK,YAAY,CAAC,SAAS,EAAE;YAC3C,OAAO,oDAA8C,KAAK,eAAY,CAAC;SACvE;QAEO,IAAA,sDAAW,CAAkC;QACrD,IAAM,eAAe,GAAG,IAAI,CAAC,QAAQ,CAAC,eAAe,CAAC,kBAAkB,EAAE,CAAC;QAE3E,IAAM,0BAA0B,GAAG,KAAK,CAAC,WAAW,CACnD,IAAI,CAAC,KAAK,CAAC,UAAU,EAAE,EACvB,SAAS,EACT,gBAAgB,CAChB,CAAC;QACF,IAAM,cAAc,GAAG,0BAA0B;YAChD,CAAC,CAAC,0BAA0B,CAAC,KAAK,CAAC,eAAe,CAAC,CAAC;YACpD,CAAC,CAAC,KAAK,CAAC,eAAe,CAAC,CAAC,cAAc,CAAC,IAAI,CAAC,CAAC;QAE/C,2GAA2G;QAC3G,IAAM,cAAc,GAAG,IAAI,CAAC,KAAK,CAAC,cAAc,CAAC,KAAK,CAAC,WAAW,CAAC,CAAC,CAAC;QAErE,OAAO,oFAEwB,cAAc,oEACxB,KAAK,CAAC,WAAW,CAAC,yCAClB,cAAc,uBAC3B,CAAC;IACV,CAAC;IACF,qBAAC;AAAD,CAAC,AAjCD,CAAoC,OAAO,GAiC1C","sourcesContent":["import { Tooltip } from \"./tooltip\";\nimport { Tools } from \"../../tools\";\nimport { TooltipTypes } from \"./../../interfaces\";\n\nexport class TooltipScatter extends Tooltip {\n\tgetTooltipHTML(datum: any, type: TooltipTypes) {\n\t\tif (type === TooltipTypes.TITLE) {\n\t\t\t// the main tooltip component handles title styles\n\t\t\treturn super.getTooltipHTML(datum, type);\n\t\t} else if (type === TooltipTypes.LEGEND) {\n\t\t\treturn `<div class=\"legend-tooltip\"><p class=\"label\">${datum.name}</p></div>`;\n\t\t} else if (type === TooltipTypes.AXISLABEL) {\n\t\t\treturn `<div class=\"axis-tooltip\"><p class=\"label\">${datum}</p></div>`;\n\t\t}\n\n\t\tconst { groupMapsTo } = this.model.getOptions().data;\n\t\tconst rangeIdentifier = this.services.cartesianScales.getRangeIdentifier();\n\n\t\tconst userProvidedValueFormatter = Tools.getProperty(\n\t\t\tthis.model.getOptions(),\n\t\t\t\"tooltip\",\n\t\t\t\"valueFormatter\"\n\t\t);\n\t\tconst formattedValue = userProvidedValueFormatter\n\t\t\t? userProvidedValueFormatter(datum[rangeIdentifier])\n\t\t\t: datum[rangeIdentifier].toLocaleString(\"en\");\n\n\t\t// For the tooltip color, we always want the normal stroke color, not dynamically determined by data value.\n\t\tconst indicatorColor = this.model.getStrokeColor(datum[groupMapsTo]);\n\n\t\treturn `\n\t\t\t<div class=\"datapoint-tooltip\">\n\t\t\t\t<a style=\"background-color:${indicatorColor}\" class=\"tooltip-color\"></a>\n\t\t\t\t<p class=\"label\">${datum[groupMapsTo]}</p>\n\t\t\t\t<p class=\"value\">${formattedValue}</p>\n\t\t\t</div>`;\n\t}\n}\n"]}