@swimlane/ngx-charts
Version:
Declarative Charting Framework for Angular
1,171 lines (1,149 loc) • 703 kB
JavaScript
import { ApplicationRef, ComponentFactoryResolver, Injectable, Injector, Input, Component, ElementRef, ViewEncapsulation, HostListener, ViewChild, HostBinding, Renderer2, Directive, Output, EventEmitter, ViewContainerRef, NgModule, ChangeDetectionStrategy, ChangeDetectorRef, NgZone, TemplateRef, ContentChild } from '@angular/core';
import { CommonModule } from '@angular/common';
import { trigger, style, animate, transition } from '@angular/animations';
import { DomSanitizer } from '@angular/platform-browser';
import { rgb } from 'd3-color';
import { fromEvent } from 'rxjs';
import { debounceTime } from 'rxjs/operators';
import { range, min, max } from 'd3-array';
import { scaleBand, scaleLinear, scaleOrdinal, scaleQuantile, scaleTime, scalePoint } from 'd3-scale';
import { brushX } from 'd3-brush';
import { select, event } from 'd3-selection';
import { curveLinear, area, line, curveCardinalClosed, lineRadial, arc, pie } from 'd3-shape';
import { forceCollide, forceLink, forceManyBody, forceSimulation, forceX, forceY } from 'd3-force';
import { interpolate } from 'd3-interpolate';
import { format } from 'd3-format';
import { treemap, stratify } from 'd3-hierarchy';
import { timeFormat } from 'd3-time-format';
/*! *****************************************************************************
Copyright (c) Microsoft Corporation. All rights reserved.
Licensed under the Apache License, Version 2.0 (the "License"); you may not use
this file except in compliance with the License. You may obtain a copy of the
License at http://www.apache.org/licenses/LICENSE-2.0
THIS CODE IS PROVIDED ON AN *AS IS* BASIS, WITHOUT WARRANTIES OR CONDITIONS OF ANY
KIND, EITHER EXPRESS OR IMPLIED, INCLUDING WITHOUT LIMITATION ANY IMPLIED
WARRANTIES OR CONDITIONS OF TITLE, FITNESS FOR A PARTICULAR PURPOSE,
MERCHANTABLITY OR NON-INFRINGEMENT.
See the Apache Version 2.0 License for specific language governing permissions
and limitations under the License.
***************************************************************************** */
/* global Reflect, Promise */
var extendStatics = function(d, b) {
extendStatics = Object.setPrototypeOf ||
({ __proto__: [] } instanceof Array && function (d, b) { d.__proto__ = b; }) ||
function (d, b) { for (var p in b) if (b.hasOwnProperty(p)) d[p] = b[p]; };
return extendStatics(d, b);
};
function __extends(d, b) {
extendStatics(d, b);
function __() { this.constructor = d; }
d.prototype = b === null ? Object.create(b) : (__.prototype = b.prototype, new __());
}
var __assign = function() {
__assign = Object.assign || function __assign(t) {
for (var s, i = 1, n = arguments.length; i < n; i++) {
s = arguments[i];
for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p)) t[p] = s[p];
}
return t;
};
return __assign.apply(this, arguments);
};
function __decorate(decorators, target, key, desc) {
var c = arguments.length, r = c < 3 ? target : desc === null ? desc = Object.getOwnPropertyDescriptor(target, key) : desc, d;
if (typeof Reflect === "object" && typeof Reflect.decorate === "function") r = Reflect.decorate(decorators, target, key, desc);
else for (var i = decorators.length - 1; i >= 0; i--) if (d = decorators[i]) r = (c < 3 ? d(r) : c > 3 ? d(target, key, r) : d(target, key)) || r;
return c > 3 && r && Object.defineProperty(target, key, r), r;
}
function __metadata(metadataKey, metadataValue) {
if (typeof Reflect === "object" && typeof Reflect.metadata === "function") return Reflect.metadata(metadataKey, metadataValue);
}
// The export is needed here to generate a valid polyfills.metadata.json file
function ngxChartsPolyfills() {
// IE11 fix
// Ref: https://github.com/swimlane/ngx-charts/issues/386
if (typeof (SVGElement) !== 'undefined' && typeof SVGElement.prototype.contains === 'undefined') {
SVGElement.prototype.contains = HTMLDivElement.prototype.contains;
}
}
ngxChartsPolyfills();
var PlacementTypes;
(function (PlacementTypes) {
PlacementTypes[PlacementTypes["top"] = 'top'] = "top";
PlacementTypes[PlacementTypes["bottom"] = 'bottom'] = "bottom";
PlacementTypes[PlacementTypes["left"] = 'left'] = "left";
PlacementTypes[PlacementTypes["right"] = 'right'] = "right";
})(PlacementTypes || (PlacementTypes = {}));
var caretOffset = 7;
function verticalPosition(elDimensions, popoverDimensions, alignment) {
if (alignment === 'top') {
return elDimensions.top - caretOffset;
}
if (alignment === 'bottom') {
return elDimensions.top + elDimensions.height - popoverDimensions.height + caretOffset;
}
if (alignment === 'center') {
return elDimensions.top + elDimensions.height / 2 - popoverDimensions.height / 2;
}
return undefined;
}
function horizontalPosition(elDimensions, popoverDimensions, alignment) {
if (alignment === 'left') {
return elDimensions.left - caretOffset;
}
if (alignment === 'right') {
return elDimensions.left + elDimensions.width - popoverDimensions.width + caretOffset;
}
if (alignment === 'center') {
return elDimensions.left + elDimensions.width / 2 - popoverDimensions.width / 2;
}
return undefined;
}
/**
* Position helper for the popover directive.
*
* @export
* @class PositionHelper
*/
var PositionHelper = /** @class */ (function () {
function PositionHelper() {
}
/**
* Calculate vertical alignment position
*
* @static
* @param {any} elDimensions
* @param {any} popoverDimensions
* @param {any} alignment
* @returns {number}
*
* @memberOf PositionHelper
*/
PositionHelper.calculateVerticalAlignment = function (elDimensions, popoverDimensions, alignment) {
var result = verticalPosition(elDimensions, popoverDimensions, alignment);
if (result + popoverDimensions.height > window.innerHeight) {
result = window.innerHeight - popoverDimensions.height;
}
return result;
};
/**
* Calculate vertical caret position
*
* @static
* @param {any} elDimensions
* @param {any} popoverDimensions
* @param {any} caretDimensions
* @param {any} alignment
* @returns {number}
*
* @memberOf PositionHelper
*/
PositionHelper.calculateVerticalCaret = function (elDimensions, popoverDimensions, caretDimensions, alignment) {
var result;
if (alignment === 'top') {
result = elDimensions.height / 2 - caretDimensions.height / 2 + caretOffset;
}
if (alignment === 'bottom') {
result = popoverDimensions.height - elDimensions.height / 2 - caretDimensions.height / 2 - caretOffset;
}
if (alignment === 'center') {
result = popoverDimensions.height / 2 - caretDimensions.height / 2;
}
var popoverPosition = verticalPosition(elDimensions, popoverDimensions, alignment);
if (popoverPosition + popoverDimensions.height > window.innerHeight) {
result += (popoverPosition + popoverDimensions.height - window.innerHeight);
}
return result;
};
/**
* Calculate horz alignment position
*
* @static
* @param {any} elDimensions
* @param {any} popoverDimensions
* @param {any} alignment
* @returns {number}
*
* @memberOf PositionHelper
*/
PositionHelper.calculateHorizontalAlignment = function (elDimensions, popoverDimensions, alignment) {
var result = horizontalPosition(elDimensions, popoverDimensions, alignment);
if (result + popoverDimensions.width > window.innerWidth) {
result = window.innerWidth - popoverDimensions.width;
}
return result;
};
/**
* Calculate horz caret position
*
* @static
* @param {any} elDimensions
* @param {any} popoverDimensions
* @param {any} caretDimensions
* @param {any} alignment
* @returns {number}
*
* @memberOf PositionHelper
*/
PositionHelper.calculateHorizontalCaret = function (elDimensions, popoverDimensions, caretDimensions, alignment) {
var result;
if (alignment === 'left') {
result = elDimensions.width / 2 - caretDimensions.width / 2 + caretOffset;
}
if (alignment === 'right') {
result = popoverDimensions.width - elDimensions.width / 2 - caretDimensions.width / 2 - caretOffset;
}
if (alignment === 'center') {
result = popoverDimensions.width / 2 - caretDimensions.width / 2;
}
var popoverPosition = horizontalPosition(elDimensions, popoverDimensions, alignment);
if (popoverPosition + popoverDimensions.width > window.innerWidth) {
result += (popoverPosition + popoverDimensions.width - window.innerWidth);
}
return result;
};
/**
* Checks if the element's position should be flipped
*
* @static
* @param {any} elDimensions
* @param {any} popoverDimensions
* @param {any} placement
* @param {any} spacing
* @returns {boolean}
*
* @memberOf PositionHelper
*/
PositionHelper.shouldFlip = function (elDimensions, popoverDimensions, placement, spacing) {
var flip = false;
if (placement === 'right') {
if (elDimensions.left + elDimensions.width + popoverDimensions.width + spacing > window.innerWidth) {
flip = true;
}
}
if (placement === 'left') {
if (elDimensions.left - popoverDimensions.width - spacing < 0) {
flip = true;
}
}
if (placement === 'top') {
if (elDimensions.top - popoverDimensions.height - spacing < 0) {
flip = true;
}
}
if (placement === 'bottom') {
if (elDimensions.top + elDimensions.height + popoverDimensions.height + spacing > window.innerHeight) {
flip = true;
}
}
return flip;
};
/**
* Position caret
*
* @static
* @param {any} placement
* @param {any} elmDim
* @param {any} hostDim
* @param {any} caretDimensions
* @param {any} alignment
* @returns {*}
*
* @memberOf PositionHelper
*/
PositionHelper.positionCaret = function (placement, elmDim, hostDim, caretDimensions, alignment) {
var top = 0;
var left = 0;
if (placement === PlacementTypes.right) {
left = -7;
top = PositionHelper.calculateVerticalCaret(hostDim, elmDim, caretDimensions, alignment);
}
else if (placement === PlacementTypes.left) {
left = elmDim.width;
top = PositionHelper.calculateVerticalCaret(hostDim, elmDim, caretDimensions, alignment);
}
else if (placement === PlacementTypes.top) {
top = elmDim.height;
left = PositionHelper.calculateHorizontalCaret(hostDim, elmDim, caretDimensions, alignment);
}
else if (placement === PlacementTypes.bottom) {
top = -7;
left = PositionHelper.calculateHorizontalCaret(hostDim, elmDim, caretDimensions, alignment);
}
return { top: top, left: left };
};
/**
* Position content
*
* @static
* @param {any} placement
* @param {any} elmDim
* @param {any} hostDim
* @param {any} spacing
* @param {any} alignment
* @returns {*}
*
* @memberOf PositionHelper
*/
PositionHelper.positionContent = function (placement, elmDim, hostDim, spacing, alignment) {
var top = 0;
var left = 0;
if (placement === PlacementTypes.right) {
left = hostDim.left + hostDim.width + spacing;
top = PositionHelper.calculateVerticalAlignment(hostDim, elmDim, alignment);
}
else if (placement === PlacementTypes.left) {
left = hostDim.left - elmDim.width - spacing;
top = PositionHelper.calculateVerticalAlignment(hostDim, elmDim, alignment);
}
else if (placement === PlacementTypes.top) {
top = hostDim.top - elmDim.height - spacing;
left = PositionHelper.calculateHorizontalAlignment(hostDim, elmDim, alignment);
}
else if (placement === PlacementTypes.bottom) {
top = hostDim.top + hostDim.height + spacing;
left = PositionHelper.calculateHorizontalAlignment(hostDim, elmDim, alignment);
}
return { top: top, left: left };
};
/**
* Determine placement based on flip
*
* @static
* @param {any} placement
* @param {any} elmDim
* @param {any} hostDim
* @param {any} spacing
* @returns {*}
*
* @memberOf PositionHelper
*/
PositionHelper.determinePlacement = function (placement, elmDim, hostDim, spacing) {
var shouldFlip = PositionHelper.shouldFlip(hostDim, elmDim, placement, spacing);
if (shouldFlip) {
if (placement === PlacementTypes.right) {
return PlacementTypes.left;
}
else if (placement === PlacementTypes.left) {
return PlacementTypes.right;
}
else if (placement === PlacementTypes.top) {
return PlacementTypes.bottom;
}
else if (placement === PlacementTypes.bottom) {
return PlacementTypes.top;
}
}
return placement;
};
return PositionHelper;
}());
var StyleTypes;
(function (StyleTypes) {
StyleTypes[StyleTypes["popover"] = 'popover'] = "popover";
StyleTypes[StyleTypes["tooltip"] = 'tooltip'] = "tooltip";
})(StyleTypes || (StyleTypes = {}));
var AlignmentTypes;
(function (AlignmentTypes) {
AlignmentTypes[AlignmentTypes["left"] = 'left'] = "left";
AlignmentTypes[AlignmentTypes["center"] = 'center'] = "center";
AlignmentTypes[AlignmentTypes["right"] = 'right'] = "right";
})(AlignmentTypes || (AlignmentTypes = {}));
var ShowTypes;
(function (ShowTypes) {
ShowTypes[ShowTypes["all"] = 'all'] = "all";
ShowTypes[ShowTypes["focus"] = 'focus'] = "focus";
ShowTypes[ShowTypes["mouseover"] = 'mouseover'] = "mouseover";
})(ShowTypes || (ShowTypes = {}));
/**
* Injection service is a helper to append components
* dynamically to a known location in the DOM, most
* noteably for dialogs/tooltips appending to body.
*
* @export
* @class InjectionService
*/
var InjectionService = /** @class */ (function () {
function InjectionService(applicationRef, componentFactoryResolver, injector) {
this.applicationRef = applicationRef;
this.componentFactoryResolver = componentFactoryResolver;
this.injector = injector;
}
InjectionService_1 = InjectionService;
/**
* Sets a default global root view container. This is useful for
* things like ngUpgrade that doesn't have a ApplicationRef root.
*
* @param container
*/
InjectionService.setGlobalRootViewContainer = function (container) {
InjectionService_1.globalRootViewContainer = container;
};
/**
* Gets the root view container to inject the component to.
*
* @returns {ComponentRef<any>}
*
* @memberOf InjectionService
*/
InjectionService.prototype.getRootViewContainer = function () {
var rootComponents = this.applicationRef.components;
// fix cannot read length of undefined
if (rootComponents) {
if (rootComponents.length)
return rootComponents[0];
}
if (this._container)
return this._container;
if (InjectionService_1.globalRootViewContainer)
return InjectionService_1.globalRootViewContainer;
throw new Error('View Container not found! ngUpgrade needs to manually set this via setRootViewContainer.');
};
/**
* Overrides the default root view container. This is useful for
* things like ngUpgrade that doesn't have a ApplicationRef root.
*
* @param {any} container
*
* @memberOf InjectionService
*/
InjectionService.prototype.setRootViewContainer = function (container) {
this._container = container;
};
/**
* Gets the html element for a component ref.
*
* @param {ComponentRef<any>} componentRef
* @returns {HTMLElement}
*
* @memberOf InjectionService
*/
InjectionService.prototype.getComponentRootNode = function (componentRef) {
// the top most component root node has no `hostView`
if (!componentRef.hostView)
return componentRef.element.nativeElement;
return componentRef.hostView.rootNodes[0];
};
/**
* Gets the root component container html element.
*
* @returns {HTMLElement}
*
* @memberOf InjectionService
*/
InjectionService.prototype.getRootViewContainerNode = function () {
return this.getComponentRootNode(this.getRootViewContainer());
};
/**
* Projects the bindings onto the component
*
* @param {ComponentRef<any>} component
* @param {*} options
* @returns {ComponentRef<any>}
*
* @memberOf InjectionService
*/
InjectionService.prototype.projectComponentBindings = function (component, bindings) {
if (bindings) {
if (bindings.inputs !== undefined) {
var bindingKeys = Object.getOwnPropertyNames(bindings.inputs);
for (var _i = 0, bindingKeys_1 = bindingKeys; _i < bindingKeys_1.length; _i++) {
var bindingName = bindingKeys_1[_i];
component.instance[bindingName] = bindings.inputs[bindingName];
}
}
if (bindings.outputs !== undefined) {
var eventKeys = Object.getOwnPropertyNames(bindings.outputs);
for (var _a = 0, eventKeys_1 = eventKeys; _a < eventKeys_1.length; _a++) {
var eventName = eventKeys_1[_a];
component.instance[eventName] = bindings.outputs[eventName];
}
}
}
return component;
};
/**
* Appends a component to a adjacent location
*
* @template T
* @param {Type<T>} componentClass
* @param {*} [options={}]
* @param {Element} [location=this.getRootViewContainerNode()]
* @returns {ComponentRef<any>}
*
* @memberOf InjectionService
*/
InjectionService.prototype.appendComponent = function (componentClass, bindings, location) {
if (bindings === void 0) { bindings = {}; }
if (location === void 0) { location = this.getRootViewContainerNode(); }
var componentFactory = this.componentFactoryResolver.resolveComponentFactory(componentClass);
var componentRef = componentFactory.create(this.injector);
var appRef = this.applicationRef;
var componentRootNode = this.getComponentRootNode(componentRef);
// project the options passed to the component instance
this.projectComponentBindings(componentRef, bindings);
appRef.attachView(componentRef.hostView);
componentRef.onDestroy(function () {
appRef.detachView(componentRef.hostView);
});
// use the renderer to append the element for univseral support
var renderer = componentRef.instance.renderer;
renderer.appendChild(location, componentRootNode);
return componentRef;
};
var InjectionService_1, _a, _b, _c;
InjectionService.globalRootViewContainer = null;
InjectionService = InjectionService_1 = __decorate([
Injectable(),
__metadata("design:paramtypes", [typeof (_a = typeof ApplicationRef !== "undefined" && ApplicationRef) === "function" ? _a : Object, typeof (_b = typeof ComponentFactoryResolver !== "undefined" && ComponentFactoryResolver) === "function" ? _b : Object, typeof (_c = typeof Injector !== "undefined" && Injector) === "function" ? _c : Object])
], InjectionService);
return InjectionService;
}());
var InjectionRegistery = /** @class */ (function () {
function InjectionRegistery(injectionService) {
this.injectionService = injectionService;
this.defaults = {};
this.components = new Map();
}
InjectionRegistery.prototype.getByType = function (type) {
if (type === void 0) { type = this.type; }
return this.components.get(type);
};
InjectionRegistery.prototype.create = function (bindings) {
return this.createByType(this.type, bindings);
};
InjectionRegistery.prototype.createByType = function (type, bindings) {
bindings = this.assignDefaults(bindings);
var component = this.injectComponent(type, bindings);
this.register(type, component);
return component;
};
InjectionRegistery.prototype.destroy = function (instance) {
var compsByType = this.components.get(instance.componentType);
if (compsByType) {
var idx = compsByType.indexOf(instance);
if (idx > -1) {
var component = compsByType[idx];
component.destroy();
compsByType.splice(idx, 1);
}
}
};
InjectionRegistery.prototype.destroyAll = function () {
this.destroyByType(this.type);
};
InjectionRegistery.prototype.destroyByType = function (type) {
var comps = this.components.get(type);
if (comps) {
for (var _i = 0, comps_1 = comps; _i < comps_1.length; _i++) {
var comp = comps_1[_i];
this.destroy(comp);
}
}
};
InjectionRegistery.prototype.assignDefaults = function (bindings) {
var _a = this.defaults, inputs = _a.inputs, outputs = _a.outputs;
if (!bindings.inputs && !bindings.outputs) {
bindings = { inputs: bindings };
}
if (inputs) {
bindings.inputs = Object.assign(inputs, bindings.inputs);
}
if (outputs) {
bindings.outputs = Object.assign(outputs, bindings.outputs);
}
return bindings;
};
InjectionRegistery.prototype.injectComponent = function (type, bindings) {
return this.injectionService.appendComponent(type, bindings);
};
InjectionRegistery.prototype.register = function (type, component) {
if (!this.components.has(type)) {
this.components.set(type, []);
}
var types = this.components.get(type);
types.push(component);
};
return InjectionRegistery;
}());
/**
* Throttle a function
*
* @export
* @param {*} func
* @param {number} wait
* @param {*} [options]
* @returns
*/
function throttle(func, wait, options) {
options = options || {};
var context;
var args;
var result;
var timeout = null;
var previous = 0;
function later() {
previous = options.leading === false ? 0 : +new Date();
timeout = null;
result = func.apply(context, args);
}
return function () {
var now = +new Date();
if (!previous && options.leading === false) {
previous = now;
}
var remaining = wait - (now - previous);
context = this;
args = arguments;
if (remaining <= 0) {
clearTimeout(timeout);
timeout = null;
previous = now;
result = func.apply(context, args);
}
else if (!timeout && options.trailing !== false) {
timeout = setTimeout(later, remaining);
}
return result;
};
}
/**
* Throttle decorator
*
* class MyClass {
* throttleable(10)
* myFn() { ... }
* }
*
* @export
* @param {number} duration
* @param {*} [options]
* @returns
*/
function throttleable(duration, options) {
return function innerDecorator(target, key, descriptor) {
return {
configurable: true,
enumerable: descriptor.enumerable,
get: function getter() {
Object.defineProperty(this, key, {
configurable: true,
enumerable: descriptor.enumerable,
value: throttle(descriptor.value, duration, options)
});
return this[key];
}
};
};
}
var TooltipContentComponent = /** @class */ (function () {
function TooltipContentComponent(element, renderer) {
this.element = element;
this.renderer = renderer;
}
Object.defineProperty(TooltipContentComponent.prototype, "cssClasses", {
get: function () {
var clz = 'ngx-charts-tooltip-content';
clz += " position-" + this.placement;
clz += " type-" + this.type;
clz += " " + this.cssClass;
return clz;
},
enumerable: true,
configurable: true
});
TooltipContentComponent.prototype.ngAfterViewInit = function () {
setTimeout(this.position.bind(this));
};
TooltipContentComponent.prototype.position = function () {
var _this = this;
var nativeElm = this.element.nativeElement;
var hostDim = this.host.nativeElement.getBoundingClientRect();
if (!hostDim.height && !hostDim.width)
return;
var elmDim = nativeElm.getBoundingClientRect();
this.checkFlip(hostDim, elmDim);
this.positionContent(nativeElm, hostDim, elmDim);
if (this.showCaret) {
this.positionCaret(hostDim, elmDim);
}
setTimeout(function () { return _this.renderer.addClass(nativeElm, 'animate'); }, 1);
};
TooltipContentComponent.prototype.positionContent = function (nativeElm, hostDim, elmDim) {
var _a = PositionHelper.positionContent(this.placement, elmDim, hostDim, this.spacing, this.alignment), top = _a.top, left = _a.left;
this.renderer.setStyle(nativeElm, 'top', top + "px");
this.renderer.setStyle(nativeElm, 'left', left + "px");
};
TooltipContentComponent.prototype.positionCaret = function (hostDim, elmDim) {
var caretElm = this.caretElm.nativeElement;
var caretDimensions = caretElm.getBoundingClientRect();
var _a = PositionHelper.positionCaret(this.placement, elmDim, hostDim, caretDimensions, this.alignment), top = _a.top, left = _a.left;
this.renderer.setStyle(caretElm, 'top', top + "px");
this.renderer.setStyle(caretElm, 'left', left + "px");
};
TooltipContentComponent.prototype.checkFlip = function (hostDim, elmDim) {
this.placement = PositionHelper.determinePlacement(this.placement, elmDim, hostDim, this.spacing);
};
TooltipContentComponent.prototype.onWindowResize = function () {
this.position();
};
var _a, _b, _c, _d, _e;
__decorate([
Input(),
__metadata("design:type", Object)
], TooltipContentComponent.prototype, "host", void 0);
__decorate([
Input(),
__metadata("design:type", Boolean)
], TooltipContentComponent.prototype, "showCaret", void 0);
__decorate([
Input(),
__metadata("design:type", typeof (_a = typeof StyleTypes !== "undefined" && StyleTypes) === "function" ? _a : Object)
], TooltipContentComponent.prototype, "type", void 0);
__decorate([
Input(),
__metadata("design:type", typeof (_b = typeof PlacementTypes !== "undefined" && PlacementTypes) === "function" ? _b : Object)
], TooltipContentComponent.prototype, "placement", void 0);
__decorate([
Input(),
__metadata("design:type", typeof (_c = typeof AlignmentTypes !== "undefined" && AlignmentTypes) === "function" ? _c : Object)
], TooltipContentComponent.prototype, "alignment", void 0);
__decorate([
Input(),
__metadata("design:type", Number)
], TooltipContentComponent.prototype, "spacing", void 0);
__decorate([
Input(),
__metadata("design:type", String)
], TooltipContentComponent.prototype, "cssClass", void 0);
__decorate([
Input(),
__metadata("design:type", String)
], TooltipContentComponent.prototype, "title", void 0);
__decorate([
Input(),
__metadata("design:type", Object)
], TooltipContentComponent.prototype, "template", void 0);
__decorate([
Input(),
__metadata("design:type", Object)
], TooltipContentComponent.prototype, "context", void 0);
__decorate([
ViewChild('caretElm', { static: false }),
__metadata("design:type", Object)
], TooltipContentComponent.prototype, "caretElm", void 0);
__decorate([
HostBinding('class'),
__metadata("design:type", String),
__metadata("design:paramtypes", [])
], TooltipContentComponent.prototype, "cssClasses", null);
__decorate([
HostListener('window:resize'),
throttleable(100),
__metadata("design:type", Function),
__metadata("design:paramtypes", []),
__metadata("design:returntype", void 0)
], TooltipContentComponent.prototype, "onWindowResize", null);
TooltipContentComponent = __decorate([
Component({
selector: 'ngx-tooltip-content',
template: "\n <div>\n <span #caretElm [hidden]=\"!showCaret\" class=\"tooltip-caret position-{{ this.placement }}\"> </span>\n <div class=\"tooltip-content\">\n <span *ngIf=\"!title\">\n <ng-template [ngTemplateOutlet]=\"template\" [ngTemplateOutletContext]=\"{ model: context }\"> </ng-template>\n </span>\n <span *ngIf=\"title\" [innerHTML]=\"title\"> </span>\n </div>\n </div>\n ",
encapsulation: ViewEncapsulation.None,
styles: [".ngx-charts-tooltip-content{position:fixed;border-radius:3px;z-index:5000;display:block;font-weight:400;opacity:0;pointer-events:none!important}.ngx-charts-tooltip-content.type-popover{background:#fff;color:#060709;border:1px solid #72809b;box-shadow:0 1px 3px 0 rgba(0,0,0,.2),0 1px 1px 0 rgba(0,0,0,.14),0 2px 1px -1px rgba(0,0,0,.12);font-size:13px;padding:4px}.ngx-charts-tooltip-content.type-popover .tooltip-caret{position:absolute;z-index:5001;width:0;height:0}.ngx-charts-tooltip-content.type-popover .tooltip-caret.position-left{border-top:7px solid transparent;border-bottom:7px solid transparent;border-left:7px solid #fff}.ngx-charts-tooltip-content.type-popover .tooltip-caret.position-top{border-left:7px solid transparent;border-right:7px solid transparent;border-top:7px solid #fff}.ngx-charts-tooltip-content.type-popover .tooltip-caret.position-right{border-top:7px solid transparent;border-bottom:7px solid transparent;border-right:7px solid #fff}.ngx-charts-tooltip-content.type-popover .tooltip-caret.position-bottom{border-left:7px solid transparent;border-right:7px solid transparent;border-bottom:7px solid #fff}.ngx-charts-tooltip-content.type-tooltip{color:#fff;background:rgba(0,0,0,.75);font-size:12px;padding:0 10px;text-align:center;pointer-events:auto}.ngx-charts-tooltip-content.type-tooltip .tooltip-caret.position-left{border-top:7px solid transparent;border-bottom:7px solid transparent;border-left:7px solid rgba(0,0,0,.75)}.ngx-charts-tooltip-content.type-tooltip .tooltip-caret.position-top{border-left:7px solid transparent;border-right:7px solid transparent;border-top:7px solid rgba(0,0,0,.75)}.ngx-charts-tooltip-content.type-tooltip .tooltip-caret.position-right{border-top:7px solid transparent;border-bottom:7px solid transparent;border-right:7px solid rgba(0,0,0,.75)}.ngx-charts-tooltip-content.type-tooltip .tooltip-caret.position-bottom{border-left:7px solid transparent;border-right:7px solid transparent;border-bottom:7px solid rgba(0,0,0,.75)}.ngx-charts-tooltip-content .tooltip-label{display:block;line-height:1em;padding:8px 5px 5px 5px;font-size:1em}.ngx-charts-tooltip-content .tooltip-val{display:block;font-size:1.3em;line-height:1em;padding:0 5px 8px 5px}.ngx-charts-tooltip-content .tooltip-caret{position:absolute;z-index:5001;width:0;height:0}.ngx-charts-tooltip-content.position-right{transform:translate3d(10px,0,0)}.ngx-charts-tooltip-content.position-left{transform:translate3d(-10px,0,0)}.ngx-charts-tooltip-content.position-top{transform:translate3d(0,-10px,0)}.ngx-charts-tooltip-content.position-bottom{transform:translate3d(0,10px,0)}.ngx-charts-tooltip-content.animate{opacity:1;transition:opacity .3s,transform .3s;transform:translate3d(0,0,0);pointer-events:auto}.area-tooltip-container{padding:5px 0;pointer-events:none}.tooltip-item{text-align:left;line-height:1.2em;padding:5px 0}.tooltip-item .tooltip-item-color{display:inline-block;height:12px;width:12px;margin-right:5px;color:#5b646b;border-radius:3px}"]
}),
__metadata("design:paramtypes", [typeof (_d = typeof ElementRef !== "undefined" && ElementRef) === "function" ? _d : Object, typeof (_e = typeof Renderer2 !== "undefined" && Renderer2) === "function" ? _e : Object])
], TooltipContentComponent);
return TooltipContentComponent;
}());
var TooltipService = /** @class */ (function (_super) {
__extends(TooltipService, _super);
function TooltipService(injectionService) {
var _this = _super.call(this, injectionService) || this;
_this.injectionService = injectionService;
_this.type = TooltipContentComponent;
return _this;
}
var _a;
TooltipService = __decorate([
Injectable(),
__metadata("design:paramtypes", [typeof (_a = typeof InjectionService !== "undefined" && InjectionService) === "function" ? _a : Object])
], TooltipService);
return TooltipService;
}(InjectionRegistery));
var TooltipDirective = /** @class */ (function () {
function TooltipDirective(tooltipService, viewContainerRef, renderer) {
this.tooltipService = tooltipService;
this.viewContainerRef = viewContainerRef;
this.renderer = renderer;
this.tooltipCssClass = '';
this.tooltipTitle = '';
this.tooltipAppendToBody = true;
this.tooltipSpacing = 10;
this.tooltipDisabled = false;
this.tooltipShowCaret = true;
this.tooltipPlacement = PlacementTypes.top;
this.tooltipAlignment = AlignmentTypes.center;
this.tooltipType = StyleTypes.popover;
this.tooltipCloseOnClickOutside = true;
this.tooltipCloseOnMouseLeave = true;
this.tooltipHideTimeout = 300;
this.tooltipShowTimeout = 100;
this.tooltipShowEvent = ShowTypes.all;
this.tooltipImmediateExit = false;
this.show = new EventEmitter();
this.hide = new EventEmitter();
}
Object.defineProperty(TooltipDirective.prototype, "listensForFocus", {
get: function () {
return this.tooltipShowEvent === ShowTypes.all ||
this.tooltipShowEvent === ShowTypes.focus;
},
enumerable: true,
configurable: true
});
Object.defineProperty(TooltipDirective.prototype, "listensForHover", {
get: function () {
return this.tooltipShowEvent === ShowTypes.all ||
this.tooltipShowEvent === ShowTypes.mouseover;
},
enumerable: true,
configurable: true
});
TooltipDirective.prototype.ngOnDestroy = function () {
this.hideTooltip(true);
};
TooltipDirective.prototype.onFocus = function () {
if (this.listensForFocus) {
this.showTooltip();
}
};
TooltipDirective.prototype.onBlur = function () {
if (this.listensForFocus) {
this.hideTooltip(true);
}
};
TooltipDirective.prototype.onMouseEnter = function () {
if (this.listensForHover) {
this.showTooltip();
}
};
TooltipDirective.prototype.onMouseLeave = function (target) {
if (this.listensForHover && this.tooltipCloseOnMouseLeave) {
clearTimeout(this.timeout);
if (this.component) {
var contentDom = this.component.instance.element.nativeElement;
var contains = contentDom.contains(target);
if (contains)
return;
}
this.hideTooltip(this.tooltipImmediateExit);
}
};
TooltipDirective.prototype.onMouseClick = function () {
if (this.listensForHover) {
this.hideTooltip(true);
}
};
TooltipDirective.prototype.showTooltip = function (immediate) {
var _this = this;
if (this.component || this.tooltipDisabled)
return;
var time = immediate ? 0 : this.tooltipShowTimeout;
clearTimeout(this.timeout);
this.timeout = setTimeout(function () {
_this.tooltipService.destroyAll();
var options = _this.createBoundOptions();
_this.component = _this.tooltipService.create(options);
// add a tiny timeout to avoid event re-triggers
setTimeout(function () {
if (_this.component) {
_this.addHideListeners(_this.component.instance.element.nativeElement);
}
}, 10);
_this.show.emit(true);
}, time);
};
TooltipDirective.prototype.addHideListeners = function (tooltip) {
var _this = this;
// on mouse enter, cancel the hide triggered by the leave
this.mouseEnterContentEvent = this.renderer.listen(tooltip, 'mouseenter', function () {
clearTimeout(_this.timeout);
});
// content mouse leave listener
if (this.tooltipCloseOnMouseLeave) {
this.mouseLeaveContentEvent = this.renderer.listen(tooltip, 'mouseleave', function () {
_this.hideTooltip(_this.tooltipImmediateExit);
});
}
// content close on click outside
if (this.tooltipCloseOnClickOutside) {
this.documentClickEvent = this.renderer.listen(document, 'click', function (event$$1) {
var contains = tooltip.contains(event$$1.target);
if (!contains)
_this.hideTooltip();
});
}
};
TooltipDirective.prototype.hideTooltip = function (immediate) {
var _this = this;
if (immediate === void 0) { immediate = false; }
if (!this.component)
return;
var destroyFn = function () {
// remove events
if (_this.mouseLeaveContentEvent)
_this.mouseLeaveContentEvent();
if (_this.mouseEnterContentEvent)
_this.mouseEnterContentEvent();
if (_this.documentClickEvent)
_this.documentClickEvent();
// emit events
_this.hide.emit(true);
// destroy component
_this.tooltipService.destroy(_this.component);
_this.component = undefined;
};
clearTimeout(this.timeout);
if (!immediate) {
this.timeout = setTimeout(destroyFn, this.tooltipHideTimeout);
}
else {
destroyFn();
}
};
TooltipDirective.prototype.createBoundOptions = function () {
return {
title: this.tooltipTitle,
template: this.tooltipTemplate,
host: this.viewContainerRef.element,
placement: this.tooltipPlacement,
alignment: this.tooltipAlignment,
type: this.tooltipType,
showCaret: this.tooltipShowCaret,
cssClass: this.tooltipCssClass,
spacing: this.tooltipSpacing,
context: this.tooltipContext
};
};
var _a, _b, _c, _d, _e, _f, _g;
__decorate([
Input(),
__metadata("design:type", String)
], TooltipDirective.prototype, "tooltipCssClass", void 0);
__decorate([
Input(),
__metadata("design:type", String)
], TooltipDirective.prototype, "tooltipTitle", void 0);
__decorate([
Input(),
__metadata("design:type", Boolean)
], TooltipDirective.prototype, "tooltipAppendToBody", void 0);
__decorate([
Input(),
__metadata("design:type", Number)
], TooltipDirective.prototype, "tooltipSpacing", void 0);
__decorate([
Input(),
__metadata("design:type", Boolean)
], TooltipDirective.prototype, "tooltipDisabled", void 0);
__decorate([
Input(),
__metadata("design:type", Boolean)
], TooltipDirective.prototype, "tooltipShowCaret", void 0);
__decorate([
Input(),
__metadata("design:type", typeof (_a = typeof PlacementTypes !== "undefined" && PlacementTypes) === "function" ? _a : Object)
], TooltipDirective.prototype, "tooltipPlacement", void 0);
__decorate([
Input(),
__metadata("design:type", typeof (_b = typeof AlignmentTypes !== "undefined" && AlignmentTypes) === "function" ? _b : Object)
], TooltipDirective.prototype, "tooltipAlignment", void 0);
__decorate([
Input(),
__metadata("design:type", typeof (_c = typeof StyleTypes !== "undefined" && StyleTypes) === "function" ? _c : Object)
], TooltipDirective.prototype, "tooltipType", void 0);
__decorate([
Input(),
__metadata("design:type", Boolean)
], TooltipDirective.prototype, "tooltipCloseOnClickOutside", void 0);
__decorate([
Input(),
__metadata("design:type", Boolean)
], TooltipDirective.prototype, "tooltipCloseOnMouseLeave", void 0);
__decorate([
Input(),
__metadata("design:type", Number)
], TooltipDirective.prototype, "tooltipHideTimeout", void 0);
__decorate([
Input(),
__metadata("design:type", Number)
], TooltipDirective.prototype, "tooltipShowTimeout", void 0);
__decorate([
Input(),
__metadata("design:type", Object)
], TooltipDirective.prototype, "tooltipTemplate", void 0);
__decorate([
Input(),
__metadata("design:type", typeof (_d = typeof ShowTypes !== "undefined" && ShowTypes) === "function" ? _d : Object)
], TooltipDirective.prototype, "tooltipShowEvent", void 0);
__decorate([
Input(),
__metadata("design:type", Object)
], TooltipDirective.prototype, "tooltipContext", void 0);
__decorate([
Input(),
__metadata("design:type", Boolean)
], TooltipDirective.prototype, "tooltipImmediateExit", void 0);
__decorate([
Output(),
__metadata("design:type", Object)
], TooltipDirective.prototype, "show", void 0);
__decorate([
Output(),
__metadata("design:type", Object)
], TooltipDirective.prototype, "hide", void 0);
__decorate([
HostListener('focusin'),
__metadata("design:type", Function),
__metadata("design:paramtypes", []),
__metadata("design:returntype", void 0)
], TooltipDirective.prototype, "onFocus", null);
__decorate([
HostListener('blur'),
__metadata("design:type", Function),
__metadata("design:paramtypes", []),
__metadata("design:returntype", void 0)
], TooltipDirective.prototype, "onBlur", null);
__decorate([
HostListener('mouseenter'),
__metadata("design:type", Function),
__metadata("design:paramtypes", []),
__metadata("design:returntype", void 0)
], TooltipDirective.prototype, "onMouseEnter", null);
__decorate([
HostListener('mouseleave', ['$event.target']),
__metadata("design:type", Function),
__metadata("design:paramtypes", [Object]),
__metadata("design:returntype", void 0)
], TooltipDirective.prototype, "onMouseLeave", null);
__decorate([
HostListener('click'),
__metadata("design:type", Function),
__metadata("design:paramtypes", []),
__metadata("design:returntype", void 0)
], TooltipDirective.prototype, "onMouseClick", null);
TooltipDirective = __decorate([
Directive({ selector: '[ngx-tooltip]' }),
__metadata("design:paramtypes", [typeof (_e = typeof TooltipService !== "undefined" && TooltipService) === "function" ? _e : Object, typeof (_f = typeof ViewContainerRef !== "undefined" && ViewContainerRef) === "function" ? _f : Object, typeof (_g = typeof Renderer2 !== "undefined" && Renderer2) === "function" ? _g : Object])
], TooltipDirective);
return TooltipDirective;
}());
var TooltipModule = /** @class */ (function () {
function TooltipModule() {
}
TooltipModule = __decorate([
NgModule({
declarations: [TooltipContentComponent, TooltipDirective],
providers: [InjectionService, TooltipService],
exports: [TooltipContentComponent, TooltipDirective],
imports: [CommonModule],
entryComponents: [TooltipContentComponent]
})
], TooltipModule);
return TooltipModule;
}());
var ChartComponent = /** @class */ (function () {
function ChartComponent(vcr, tooltipService) {
this.vcr = vcr;
this.tooltipService = tooltipService;
this.showLegend = false;
this.animations = true;
this.legendLabelClick = new EventEmitter();
this.legendLabelActivate = new EventEmitter();
this.legendLabelDeactivate = new EventEmitter();
this.tooltipService.injectionService.setRootViewContainer(this.vcr);
}
ChartComponent.prototype.ngOnChanges = function (changes) {
this.update();
};
ChartComponent.prototype.update = function () {
var legendColumns = 0;
if (this.showLegend) {
this.legendType = this.getLegendType();
if (!this.legendOptions || this.legendOptions.position === 'right') {
if (this.legendType === 'scaleLegend') {
legendColumns = 1;
}
else {
legendColumns = 2;
}
}
}
var chartColumns = 12 - legendColumns;
this.chartWidth = Math.floor((this.view[0] * chartColumns / 12.0));
this.legendWidth = (!this.legendOptions || this.legendOptions.position === 'right')
? Math.floor((this.view[0] * legendColumns / 12.0))
: this.chartWidth;
};
ChartComponent.prototype.getLegendType = function () {
if (this.legendOptions.scaleType === 'linear') {
return 'scaleLegend';
}
else {
return 'legend';
}
};
var _a, _b, _c, _d, _e;
__decorate([
Input(),
__metadata("design:type", Object)
], ChartComponent.prototype, "view", void 0);
__decorate([
Input(),
__metadata("design:type", Object)
], ChartComponent.prototype, "showLegend", void 0);
__decorate([
Input(),
__metadata("design:type", Object)
], ChartComponent.prototype, "legendOptions", void 0);
__decorate([
Input(),
__metadata("design:type", Object)
], ChartComponent.prototype, "data", void 0);
__decorate([
Input(),
__metadata("design:type", Object)
], ChartComponent.prototype, "legendData", void 0);
__decorate([
Input(),
__metadata("design:type", Object)
], ChartComponent.prototype, "legendType", void 0);
__decorate([
Input(),
__metadata("design:type", Object)
], ChartComponent.prototype, "colors", void 0);
__decorate([
Input(),
__metadata("design:type", Array)
], ChartComponent.prototype, "activeEntries", void 0);
__decorate([
Input(),
__metadata("design:type", Boolean)
], ChartComponent.prototype, "animations", void 0);
__decorate([
Output(),
__metadata("design:type", typeof (_a = typeof EventEmitter !== "undefined" && EventEmitter) === "function" ? _a : Object)
], ChartComponent.prototype, "legendLabelClick", void 0);
__decorate([
Output(),
__metadata("design:type", typeof (_b = typeof EventEmitter !== "undefined" && EventEmitter) === "function" ? _b : Object)
], ChartComponent.prototype, "legendLabelActivate", void 0);
__decorate([
Output(),
__metadata("design:type", typeof (_c = typeof EventEmitter !== "undefined" && EventEmitter) === "function" ? _c : Object)
], ChartComponent.prototype, "legendLabelDeactivate", void 0);
ChartComponent = __decorate([
Component({
providers: [TooltipService],
selector: 'ngx-charts-chart',
template: "\n <div\n class=\"ngx-charts-outer\"\n [style.width.px]=\"view[0]\"\n [@animationState]=\"'active'\"\n [@.disabled]=\"!animations\">\n <svg\n class=\"ngx-charts\"\n [attr.width]=\"chartWidth\"\n [attr.height]=\"view[1]\">\n <ng-content></ng-content>\n </svg>\n <ngx-charts-scale-legend\n *ngIf=\"showLegend && legendType === 'scaleLegend'\"\n class=\"chart-legend\"\n [horizontal]=\"legendOptions && legendOptions.position === 'below'\"\n [valueRange]=\"legendOptions.domain\"\n [colors]=\"legendOptions.colors\"\n [height]=\"view[1]\"\n [width]=\"legendWidth\">\n </ngx-charts-scale-legend>\n <ngx-charts-legend\n *ngIf=\"showLegend && legendType === 'legend'\"\n class=\"chart-legend\"\n [horizontal]=\"legendOptions && legendOptions.position === 'below'\"\n [data]=\"legendOptions.domain\"\n [title]=\"legendOptions.title\"\n [colors]=\"legendOptions.colors\"\n [height]=\"view[1]\"\n [width]=\"legendWidth\"\n [activeEntries]=\"activeEntries\"\n (labelCli