@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.
- package/CHANGELOG.md +45 -1
- package/axis-chart.d.ts +2 -2
- package/axis-chart.js +6 -4
- package/axis-chart.js.map +1 -1
- package/build/demo/data/bar.d.ts +12 -48
- package/build/demo/data/bubble.d.ts +1 -0
- package/build/src/axis-chart.d.ts +2 -2
- package/build/src/chart.d.ts +2 -2
- package/build/src/components/axes/ruler-stacked-bar.d.ts +4 -0
- package/build/src/components/axes/ruler.d.ts +6 -1
- package/build/src/components/essentials/tooltip-axis.d.ts +4 -0
- package/build/src/components/essentials/tooltip.d.ts +4 -10
- package/build/src/components/index.d.ts +2 -4
- package/build/src/configuration.d.ts +1 -3
- package/build/src/interfaces/a11y.d.ts +2 -1
- package/build/src/interfaces/charts.d.ts +1 -3
- package/build/src/interfaces/components.d.ts +7 -52
- package/build/src/interfaces/enums.d.ts +0 -10
- package/build/src/interfaces/events.d.ts +1 -0
- package/build/src/services/scales-cartesian.d.ts +6 -1
- package/bundle.js +1 -1
- package/chart.d.ts +2 -2
- package/chart.js +2 -1
- package/chart.js.map +1 -1
- package/charts/area-stacked.js +1 -3
- package/charts/area-stacked.js.map +1 -1
- package/charts/area.js +1 -2
- package/charts/area.js.map +1 -1
- package/charts/bar-grouped.js +1 -2
- package/charts/bar-grouped.js.map +1 -1
- package/charts/bar-simple.js +1 -2
- package/charts/bar-simple.js.map +1 -1
- package/charts/bar-stacked.js +2 -2
- package/charts/bar-stacked.js.map +1 -1
- package/charts/bubble.js +1 -2
- package/charts/bubble.js.map +1 -1
- package/charts/donut.js +1 -2
- package/charts/donut.js.map +1 -1
- package/charts/gauge.js +1 -2
- package/charts/gauge.js.map +1 -1
- package/charts/line.js +1 -2
- package/charts/line.js.map +1 -1
- package/charts/pie.js +1 -4
- package/charts/pie.js.map +1 -1
- package/charts/radar.js +0 -3
- package/charts/radar.js.map +1 -1
- package/charts/scatter.js +1 -2
- package/charts/scatter.js.map +1 -1
- package/components/axes/axis.js +23 -8
- package/components/axes/axis.js.map +1 -1
- package/components/axes/grid.js.map +1 -1
- package/components/axes/ruler-stacked-bar.d.ts +4 -0
- package/components/axes/ruler-stacked-bar.js +26 -0
- package/components/axes/ruler-stacked-bar.js.map +1 -0
- package/components/axes/ruler.d.ts +6 -1
- package/components/axes/ruler.js +25 -13
- package/components/axes/ruler.js.map +1 -1
- package/components/essentials/legend.js +15 -14
- package/components/essentials/legend.js.map +1 -1
- package/components/essentials/threshold.js +2 -2
- package/components/essentials/threshold.js.map +1 -1
- package/components/essentials/title.js +10 -9
- package/components/essentials/title.js.map +1 -1
- package/components/essentials/tooltip-axis.d.ts +4 -0
- package/components/essentials/tooltip-axis.js +120 -0
- package/components/essentials/tooltip-axis.js.map +1 -0
- package/components/essentials/tooltip.d.ts +4 -10
- package/components/essentials/tooltip.js +73 -100
- package/components/essentials/tooltip.js.map +1 -1
- package/components/graphs/area-stacked.js.map +1 -1
- package/components/graphs/bar-grouped.js +5 -3
- package/components/graphs/bar-grouped.js.map +1 -1
- package/components/graphs/bar-simple.js +4 -2
- package/components/graphs/bar-simple.js.map +1 -1
- package/components/graphs/bar-stacked.js +17 -14
- package/components/graphs/bar-stacked.js.map +1 -1
- package/components/graphs/pie.js +31 -12
- package/components/graphs/pie.js.map +1 -1
- package/components/graphs/radar.js +23 -18
- package/components/graphs/radar.js.map +1 -1
- package/components/graphs/scatter-stacked.js.map +1 -1
- package/components/graphs/scatter.js +18 -13
- package/components/graphs/scatter.js.map +1 -1
- package/components/graphs/skeleton.js +2 -5
- package/components/graphs/skeleton.js.map +1 -1
- package/components/index.d.ts +2 -4
- package/components/index.js +2 -4
- package/components/index.js.map +1 -1
- package/components/layout/layout.js +3 -1
- package/components/layout/layout.js.map +1 -1
- package/configuration.d.ts +1 -3
- package/configuration.js +6 -26
- package/configuration.js.map +1 -1
- package/demo/data/bar.d.ts +12 -48
- package/demo/data/bar.js +22 -58
- package/demo/data/bar.js.map +1 -1
- package/demo/data/bubble.d.ts +1 -0
- package/demo/data/bubble.js +2 -1
- package/demo/data/bubble.js.map +1 -1
- package/demo/data/bundle.js +1 -1
- package/demo/data/index.js +1 -1
- package/demo/data/index.js.map +1 -1
- package/demo/data/line.js +5 -5
- package/demo/data/line.js.map +1 -1
- package/demo/styles.css +48 -100
- package/demo/styles.css.map +1 -1
- package/demo/styles.min.css +1 -1
- package/demo/styles.min.css.map +1 -1
- package/demo/tsconfig.tsbuildinfo +16 -16
- package/interfaces/a11y.d.ts +2 -1
- package/interfaces/a11y.js +1 -0
- package/interfaces/a11y.js.map +1 -1
- package/interfaces/charts.d.ts +1 -3
- package/interfaces/charts.js.map +1 -1
- package/interfaces/components.d.ts +7 -52
- package/interfaces/components.js.map +1 -1
- package/interfaces/enums.d.ts +0 -10
- package/interfaces/enums.js +0 -11
- package/interfaces/enums.js.map +1 -1
- package/interfaces/events.d.ts +1 -0
- package/interfaces/events.js +1 -0
- package/interfaces/events.js.map +1 -1
- package/model.js +3 -5
- package/model.js.map +1 -1
- package/package.json +1 -1
- package/services/essentials/dom-utils.js +3 -1
- package/services/essentials/dom-utils.js.map +1 -1
- package/services/scales-cartesian.d.ts +6 -1
- package/services/scales-cartesian.js +20 -1
- package/services/scales-cartesian.js.map +1 -1
- package/styles/components/_ruler.scss +0 -6
- package/styles/components/_tooltip.scss +3 -9
- package/styles/graphs/_scatter-stacked.scss +10 -0
- package/styles/graphs/index.scss +1 -0
- package/styles-g10.css +13 -25
- package/styles-g10.css.map +1 -1
- package/styles-g10.min.css +1 -1
- package/styles-g10.min.css.map +1 -1
- package/styles-g100.css +13 -25
- package/styles-g100.css.map +1 -1
- package/styles-g100.min.css +1 -1
- package/styles-g100.min.css.map +1 -1
- package/styles-g90.css +13 -25
- package/styles-g90.css.map +1 -1
- package/styles-g90.min.css +1 -1
- package/styles-g90.min.css.map +1 -1
- package/styles.css +13 -25
- package/styles.css.map +1 -1
- package/styles.min.css +1 -1
- package/styles.min.css.map +1 -1
- package/tsconfig.tsbuildinfo +81 -138
- package/build/src/components/essentials/tooltip-bar.d.ts +0 -27
- package/build/src/components/essentials/tooltip-pie.d.ts +0 -5
- package/build/src/components/essentials/tooltip-radar.d.ts +0 -5
- package/build/src/components/essentials/tooltip-scatter.d.ts +0 -5
- package/components/essentials/tooltip-bar.d.ts +0 -27
- package/components/essentials/tooltip-bar.js +0 -193
- package/components/essentials/tooltip-bar.js.map +0 -1
- package/components/essentials/tooltip-pie.d.ts +0 -5
- package/components/essentials/tooltip-pie.js +0 -44
- package/components/essentials/tooltip-pie.js.map +0 -1
- package/components/essentials/tooltip-radar.d.ts +0 -5
- package/components/essentials/tooltip-radar.js +0 -45
- package/components/essentials/tooltip-radar.js.map +0 -1
- package/components/essentials/tooltip-scatter.d.ts +0 -5
- package/components/essentials/tooltip-scatter.js +0 -46
- 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":";;;;;;;;;;;;;AAAA,OAAO,EAAE,OAAO,EAAE,MAAM,WAAW,CAAC;AACpC,OAAO,EAAE,KAAK,EAAE,MAAM,aAAa,CAAC;AACpC,OAAO,EAAE,QAAQ,EAAE,MAAM,gBAAgB,CAAC;AAC1C,OAAO,EACN,eAAe,EACf,YAAY,EACZ,qBAAqB,EACrB,MAAM,EACN,MAAM,oBAAoB,CAAC;AAE5B,yCAAyC;AACzC,OAAO,QAAQ,MAAM,0CAA0C,CAAC;AAEhE,aAAa;AACb,OAAO,EAAE,MAAM,EAAE,MAAM,cAAc,CAAC;AAEtC;IAAgC,8BAAO;IAAvC;;IA2QA,CAAC;IA1QA,yBAAI,GAAJ;QAAA,iBAoIC;QAnIA,2BAA2B;QAC3B,IAAM,MAAM,GAAG,MAAM,CAAC,IAAI,CAAC,QAAQ,CAAC,QAAQ,CAAC,SAAS,EAAE,CAAC,CAAC;QAC1D,IAAM,WAAW,GAAG,KAAK,CAAC,WAAW,CACpC,IAAI,CAAC,KAAK,CAAC,UAAU,EAAE,EACvB,OAAO,EACP,QAAQ,CACR,CAAC;QACF,IAAI,CAAC,OAAO,GAAG,QAAQ,CAAC,cAAc,CACrC,MAAM,EACN,SAAO,QAAQ,CAAC,MAAM,UAAK,WAAW,cAAW,CACjD,CAAC;QAEF,oCAAoC;QACpC,IAAM,oBAAoB,GAAG,QAAQ,CAAC,cAAc,CACnD,IAAI,CAAC,OAAO,EACZ,iBAAiB,CACjB,CAAC;QACF,IAAI,CAAC,OAAO,CAAC,KAAK,CAAC,WAAW,EAAE,IAAI,CAAC,CAAC;QAEtC,6DAA6D;QAC7D,IAAI,CAAC,QAAQ,CAAC,MAAM,CAAC,gBAAgB,CAAC,MAAM,CAAC,OAAO,CAAC,IAAI,EAAE,UAAC,CAAC;YAC5D,mDAAmD;YACnD,IACC,CAAC,CAAC,CAAC,MAAM,CAAC,IAAI,KAAK,YAAY,CAAC,SAAS;gBACxC,KAAK,CAAC,WAAW,CAChB,KAAI,CAAC,KAAK,CAAC,UAAU,EAAE,EACvB,SAAS,EACT,WAAW,EACX,SAAS,CACT,CAAC;gBACH,CAAC,CAAC,CAAC,MAAM,CAAC,IAAI,KAAK,YAAY,CAAC,QAAQ;oBACvC,KAAK,CAAC,WAAW,CAChB,KAAI,CAAC,KAAK,CAAC,UAAU,EAAE,EACvB,SAAS,EACT,UAAU,EACV,SAAS,CACT,CAAC;gBACH,CAAC,CAAC,MAAM,CAAC,IAAI,KAAK,YAAY,CAAC,MAAM;gBACrC,CAAC,CAAC,MAAM,CAAC,IAAI,KAAK,YAAY,CAAC,SAAS,EACvC;gBACD,IAAI,IAAI,GAAG,CAAC,CAAC,MAAM,CAAC,cAAc,CAAC,KAAK,EAAS,CAAC;gBAClD,IAAM,cAAc,GAAG,CAAC,CAAC,MAAM,CAAC,cAAc,CAAC,IAAI,EAAE,CAAC;gBAEtD,IAAI,WAAW,SAAA,CAAC;gBAChB,IAAI,CAAC,CAAC,MAAM,CAAC,SAAS,EAAE;oBACvB,gBAAgB;oBAChB,IAAI,GAAG,CAAC,CAAC,MAAM,CAAC,SAAS,CAAC;oBAC1B,WAAW,GAAG,KAAI,CAAC,uBAAuB,CAAC,IAAI,CAAC,CAAC;iBACjD;qBAAM;oBACN,IAAI,CAAC,CAAC,MAAM,CAAC,IAAI,EAAE;wBAClB,IAAI,GAAG,CAAC,CAAC,MAAM,CAAC,IAAI,CAAC;qBACrB;yBAAM;wBACN,IAAI,GAAG,CAAC,CAAC,MAAM,CAAC,cAAc,CAAC,KAAK,EAAE,CAAC;qBACvC;oBAED,WAAW,GAAG,KAAI,CAAC,cAAc,CAAC,IAAI,EAAE,CAAC,CAAC,MAAM,CAAC,IAAI,CAAC,CAAC;iBACvD;gBAED,gFAAgF;gBAChF,IACC,KAAK,CAAC,WAAW,CAChB,KAAI,CAAC,KAAK,CAAC,UAAU,EAAE,EACvB,SAAS,EACT,YAAY,CACZ,EACA;oBACD,oBAAoB,CAAC,IAAI,CACxB,KAAI,CAAC,KAAK;yBACR,UAAU,EAAE;yBACZ,OAAO,CAAC,UAAU,CAAC,IAAI,EAAE,WAAW,CAAC,CACvC,CAAC;iBACF;qBAAM;oBACN,kBAAkB;oBAClB,oBAAoB,CAAC,IAAI,CAAC,WAAW,CAAC,CAAC;iBACvC;gBACD,IACC,CAAC,CAAC,MAAM,CAAC,IAAI,KAAK,YAAY,CAAC,MAAM;oBACrC,CAAC,CAAC,MAAM,CAAC,IAAI,KAAK,YAAY,CAAC,SAAS,EACvC;oBACD,KAAI,CAAC,eAAe,EAAE,CAAC;iBACvB;qBAAM;oBACN,IAAM,QAAQ,GAAG,KAAI,CAAC,kBAAkB,CACvC,cAAc,EACd,IAAI,CACJ,CAAC;oBACF,4CAA4C;oBAC5C,KAAI,CAAC,eAAe,CACnB,CAAC,CAAC,MAAM,CAAC,SAAS,CAAC,CAAC,CAAC,SAAS,CAAC,CAAC,CAAC,QAAQ,CACzC,CAAC;iBACF;aACD;iBAAM,IAAI,CAAC,CAAC,MAAM,CAAC,IAAI,KAAK,YAAY,CAAC,KAAK,EAAE;gBAChD,2DAA2D;gBAC3D,IAAM,KAAK,GAAG,QAAQ,CAAC,cAAc,CACpC,MAAM,EACN,SAAO,QAAQ,CAAC,MAAM,UAAK,WAAW,gBAAa,CACnD,CAAC;gBACF,+DAA+D;gBAC/D,IAAM,UAAU,GACf,QAAQ,CAAC,iBAAiB,CAAC,KAAK,CAAC,CAAC,KAAK;oBACvC,KAAK,CAAC,WAAW,CAChB,KAAI,CAAC,KAAK,CAAC,UAAU,EAAE,EACvB,SAAS,EACT,OAAO,EACP,OAAO,CACP,CAAC;gBACH,KAAI,CAAC,OAAO,CAAC,KAAK,CAAC,WAAW,EAAE,UAAU,CAAC,CAAC;gBAE5C,oDAAoD;gBACpD,oBAAoB,CAAC,IAAI,CACxB,iBAAM,cAAc,aACnB,CAAC,CAAC,MAAM,CAAC,cAAc,EACvB,YAAY,CAAC,KAAK,CAClB,CACD,CAAC;gBAEF,2DAA2D;gBAC3D,IAAM,QAAQ,GAAG,iBAAM,kBAAkB,aACxC,CAAC,CAAC,MAAM,CAAC,cAAc,CAAC,IAAI,EAAE,EAC9B,CAAC,CAAC,MAAM,CAAC,IAAI,CACb,CAAC;gBACF,KAAI,CAAC,eAAe,CAAC,QAAQ,CAAC,CAAC;aAC/B;YAED,UAAU;YACV,KAAI,CAAC,OAAO,CAAC,OAAO,CAAC,QAAQ,EAAE,KAAK,CAAC,CAAC;QACvC,CAAC,CAAC,CAAC;QAEH,2DAA2D;QAC3D,IAAI,CAAC,QAAQ,CAAC,MAAM,CAAC,gBAAgB,CAAC,MAAM,CAAC,OAAO,CAAC,IAAI,EAAE;YAC1D,KAAI,CAAC,OAAO,CAAC,OAAO,CAAC,QAAQ,EAAE,IAAI,CAAC,CAAC;QACtC,CAAC,CAAC,CAAC;IACJ,CAAC;IAED;;;;OAIG;IACH,uCAAkB,GAAlB,UAAmB,cAAc,EAAE,IAAU;QAC5C,IAAI,IAAI,KAAK,SAAS,EAAE;YACvB,IAAI,GAAG,MAAM,CAAC,cAAc,CAAC,CAAC,KAAK,EAAS,CAAC;SAC7C;QAED,IAAM,cAAc,GAAG,MAAM,CAAC,IAAI,CAAC,QAAQ,CAAC,QAAQ,CAAC,SAAS,EAAE,CAAC;aAC/D,IAAI,EAAE;aACN,qBAAqB,EAAE,CAAC;QAC1B,IAAM,WAAW,GAAG,cAAc,CAAC,qBAAqB,EAAE,CAAC;QAEnD,IAAA,yEAAc,CAA+C;QACrE,kFAAkF;QAClF,IAAI,IAAI,CAAC,KAAK,IAAI,CAAC,EAAE;YACpB,gBAAgB;YAChB,IAAM,UAAU,GAAG;gBAClB,IAAI,EACH,WAAW,CAAC,IAAI;oBAChB,cAAc,CAAC,IAAI;oBACnB,WAAW,CAAC,KAAK,GAAG,CAAC;gBACtB,GAAG,EAAE,WAAW,CAAC,MAAM,GAAG,cAAc,CAAC,GAAG,GAAG,cAAc;aAC7D,CAAC;YAEF,OAAO,EAAE,SAAS,EAAE,eAAe,CAAC,MAAM,EAAE,QAAQ,EAAE,UAAU,EAAE,CAAC;SACnE;aAAM;YACN,gBAAgB;YAChB,IAAM,UAAU,GAAG;gBAClB,IAAI,EACH,WAAW,CAAC,IAAI;oBAChB,cAAc,CAAC,IAAI;oBACnB,WAAW,CAAC,KAAK,GAAG,CAAC;gBACtB,GAAG,EAAE,WAAW,CAAC,GAAG,GAAG,cAAc,CAAC,GAAG,GAAG,cAAc;aAC1D,CAAC;YAEF,OAAO,EAAE,SAAS,EAAE,eAAe,CAAC,GAAG,EAAE,QAAQ,EAAE,UAAU,EAAE,CAAC;SAChE;IACF,CAAC;IAED;;;OAGG;IACH,mCAAc,GAAd,UAAe,IAAS,EAAE,IAAkB;QAC3C,IAAI,IAAI,KAAK,YAAY,CAAC,MAAM,EAAE;YACjC,OAAO,sDAAgD,IAAI,CAAC,IAAI,eAAY,CAAC;SAC7E;aAAM,IAAI,IAAI,KAAK,YAAY,CAAC,SAAS,EAAE;YAC3C,OAAO,oDAA8C,IAAI,eAAY,CAAC;SACtE;QAED,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,IAAI,CAAC,KAAK,CAAC;YAC5D,CAAC,CAAC,IAAI,CAAC,KAAK,CAAC,cAAc,CAAC,IAAI,CAAC,CAAC;QAEnC,OAAO,yDAAmD,cAAc,eAAY,CAAC;IACtF,CAAC;IAED;;;OAGG;IACH,4CAAuB,GAAvB,UAAwB,IAAS;QAAjC,iBA+DC;QA9DA,IAAM,MAAM,GAAG,IAAI,CAAC;QAEpB,MAAM,CAAC,OAAO,EAAE,CAAC;QACjB,gFAAgF;QAChF,4GAA4G;QAC5G,IACC,IAAI,CAAC,QAAQ,CAAC,eAAe,CAAC,cAAc,EAAE;YAC9C,qBAAqB,CAAC,QAAQ,EAC7B;YACD,MAAM,CAAC,OAAO,EAAE,CAAC;SACjB;QAED,wCAAwC;QACxC,IAAI,KAAK,GAAG,MAAM,CAAC,MAAM,CAAC,UAAC,GAAG,EAAE,IAAI,IAAK,OAAA,GAAG,GAAG,IAAI,CAAC,KAAK,EAAhB,CAAgB,EAAE,CAAC,CAAC,CAAC;QAE9D,yBAAyB;QACzB,KAAK,GAAG,KAAK,CAAC,WAAW,CACxB,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,KAAK,CAAC;YACvD,CAAC,CAAC,KAAK,CAAC,cAAc,CAAC,IAAI,CAAC,CAAC;QAE9B,OAAO,CACN,4BAA4B;YAC5B,MAAM;iBACJ,GAAG,CAAC,UAAC,SAAS;gBACd,IAAM,cAAc,GAAG,KAAK,CAAC,WAAW,CACvC,KAAI,CAAC,KAAK,CAAC,UAAU,EAAE,EACvB,SAAS,EACT,gBAAgB,CAChB;oBACA,CAAC,CAAC,KAAI,CAAC,KAAK;yBACT,UAAU,EAAE;yBACZ,OAAO,CAAC,cAAc,CAAC,SAAS,CAAC,KAAK,CAAC;oBAC1C,CAAC,CAAC,SAAS,CAAC,KAAK,CAAC,cAAc,CAAC,IAAI,CAAC,CAAC;gBAExC,2GAA2G;gBAC3G,IAAM,cAAc,GAAG,KAAI,CAAC,KAAK,CAAC,cAAc,CAC/C,SAAS,CAAC,YAAY,EACtB,SAAS,CAAC,KAAK,CACf,CAAC;gBAEF,OAAO,0GAGuB,cAAc,wEACxB,SAAS,CAAC,YAAY,6CACtB,cAAc,0CAE7B,CAAC;YACP,CAAC,CAAC;iBACD,IAAI,CAAC,EAAE,CAAC;aACV,mHAGsB,KAAK,uDAGrB,CAAA,CACN,CAAC;IACH,CAAC;IACF,iBAAC;AAAD,CAAC,AA3QD,CAAgC,OAAO,GA2QtC","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,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,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,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"]}
|