ngx-histaff-alpha 2.0.0 → 2.0.2

package/fesm2022/ngx-histaff-alpha.mjs

@@ -131,6 +131,11 @@ const skipInterceptorsHeaders = new HttpHeaders({
     'Access-Control-Allow-Credentials': 'true',
     'X-Skip-Interceptor': 'true'
 });
+const baseUrlForStatisticsInterceptorHeader = new HttpHeaders({
+    'Content-Type': 'application/json',
+    'Access-Control-Allow-Credentials': 'true',
+    'X-Statistic-Interceptor': 'true'
+});
 class CommonHttpRequestService {
     // private handleError: HandleError;
     constructor(http) {
@@ -198,6 +203,19 @@ class CommonHttpRequestService {
             responseType: 'blob' // add 'responseType' to headers
         }).pipe(map(response => response), last());
     }
+    /* Bellow are methods for statistics */
+    makeStatisticPostRequest(name, relativeApiEndPoint, payload) {
+        return this.http.post(relativeApiEndPoint, payload, {
+            headers: baseUrlForStatisticsInterceptorHeader, observe: 'response', reportProgress: true, withCredentials: true,
+        })
+            .pipe(last());
+    }
+    makeStatisticGetRequest(name, relativeApiEndPoint, cacheRequest = false) {
+        return this.http.get(relativeApiEndPoint, {
+            headers: baseUrlForStatisticsInterceptorHeader, observe: 'response', reportProgress: true, withCredentials: true,
+        })
+            .pipe(map(response => response), last());
+    }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.2.3", ngImport: i0, type: CommonHttpRequestService, deps: [{ token: i1.HttpClient }], target: i0.ɵɵFactoryTarget.Injectable }); }
     static { this.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "17.2.3", ngImport: i0, type: CommonHttpRequestService, providedIn: 'root' }); }
 }
@@ -2475,9 +2493,10 @@ class AppInitializationService {
         }
         */
         try {
-            fetch('../../assets/app.config.json').then(res => res.json()).then(({ APP_TYPE, BASE_URL, GOLIVE_URL, DEBUG_ENABLED, LOGO_LOGIN, LOGO_HEADER, HOME_BACKGROUND_IMAGE, OAUTH2_OIDC_ENABLED, OAUTH2_OIDC_CLIENT_ID, OAUTH2_OIDC_LOGIN_URI, OAUTH2_OIDC_REDIRECT_URI, OAUTH2_OIDC_SCOPE, SAML2ADFS_ENABLED, SAML2ADFS_IDP, SAML2ADFS_IDENTIFIER, SAML2ADFS_WA_SIGNIN, SAML2ADFS_WA_SIGNOUT, SAML2ADFS_WREPLY, HANGFIRE_PATH, STATIC_FOLDER, AVATAR_FOLDER, }) => {
+            fetch('../../assets/app.config.json').then(res => res.json()).then(({ APP_TYPE, BASE_URL, BASE_URL_FOR_STATISTIC, GOLIVE_URL, DEBUG_ENABLED, LOGO_LOGIN, LOGO_HEADER, HOME_BACKGROUND_IMAGE, OAUTH2_OIDC_ENABLED, OAUTH2_OIDC_CLIENT_ID, OAUTH2_OIDC_LOGIN_URI, OAUTH2_OIDC_REDIRECT_URI, OAUTH2_OIDC_SCOPE, SAML2ADFS_ENABLED, SAML2ADFS_IDP, SAML2ADFS_IDENTIFIER, SAML2ADFS_WA_SIGNIN, SAML2ADFS_WA_SIGNOUT, SAML2ADFS_WREPLY, HANGFIRE_PATH, STATIC_FOLDER, AVATAR_FOLDER, }) => {
                 this.appConfigService.APP_TYPE = APP_TYPE;
                 this.appConfigService.BASE_URL = BASE_URL;
+                this.appConfigService.BASE_URL_FOR_STATISTIC = BASE_URL_FOR_STATISTIC;
                 this.appConfigService.GOLIVE_URL = GOLIVE_URL;
                 this.appConfigService.DEBUG_ENABLED = DEBUG_ENABLED;
                 this.appConfigService.LOGO_LOGIN = LOGO_LOGIN;
@@ -2685,6 +2704,7 @@ const InitializationCanMatchFn = (route, segments) => {
 };
 
 const InterceptorSkipHeader = 'X-Skip-Interceptor';
+const InterceptorStatisticHeader = 'X-Statistic-Interceptor';
 class BaseUrlInterceptor {
     constructor(appConfigService) {
         this.appConfigService = appConfigService;
@@ -2697,10 +2717,18 @@ class BaseUrlInterceptor {
         if (!this.appConfigService.BASE_URL) {
             console.error("THE APP LAYPOUT had started rendering before appConfigService.BASE_URL reachs a truely value. Please check AppInitializationService initializing$.next method carefully!!!");
         }
-        const addBaseUrlReq = req.clone({
-            url: this.appConfigService.BASE_URL + req.url
-        });
-        return next.handle(addBaseUrlReq);
+        if (req.headers.has(InterceptorStatisticHeader)) {
+            const addBaseUrlReq = req.clone({
+                url: this.appConfigService.BASE_URL_FOR_STATISTIC + req.url
+            });
+            return next.handle(addBaseUrlReq);
+        }
+        else {
+            const addBaseUrlReq = req.clone({
+                url: this.appConfigService.BASE_URL + req.url
+            });
+            return next.handle(addBaseUrlReq);
+        }
     }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.2.3", ngImport: i0, type: BaseUrlInterceptor, deps: [{ token: AppConfigService }], target: i0.ɵɵFactoryTarget.Injectable }); }
     static { this.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "17.2.3", ngImport: i0, type: BaseUrlInterceptor, providedIn: 'root' }); }
@@ -2762,13 +2790,81 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.2.3", ngImpor
             type: Injectable
         }], ctorParameters: () => [{ type: MessageService }] });
 
+class StatisticService {
+    constructor(commonHttpRequestService) {
+        this.commonHttpRequestService = commonHttpRequestService;
+    }
+    get(url, cacheRequest = false) {
+        return this.commonHttpRequestService.makeStatisticGetRequest('get', url, cacheRequest);
+    }
+    post(url, payload) {
+        console.log("appService post", url);
+        return this.commonHttpRequestService.makeStatisticPostRequest('post', url, payload);
+    }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.2.3", ngImport: i0, type: StatisticService, deps: [{ token: CommonHttpRequestService }], target: i0.ɵɵFactoryTarget.Injectable }); }
+    static { this.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "17.2.3", ngImport: i0, type: StatisticService, providedIn: 'root' }); }
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.2.3", ngImport: i0, type: StatisticService, decorators: [{
+            type: Injectable,
+            args: [{
+                    providedIn: 'root'
+                }]
+        }], ctorParameters: () => [{ type: CommonHttpRequestService }] });
+
+class StatisticAuthService {
+    constructor(statisticService) {
+        this.statisticService = statisticService;
+        this.data$ = new BehaviorSubject(null);
+        this.authenticated$ = new BehaviorSubject(false);
+        this.refreshTokenSubject = new BehaviorSubject(null);
+        this.refreshingToken$ = new BehaviorSubject(false);
+    }
+    getAuthorizationToken() {
+        return this.data$.value?.accessToken || "";
+    }
+    userLogin(payload) {
+        const url = "/api/Authentication/ClientLogin";
+        return this.statisticService.post(url, payload);
+    }
+    userLogout() {
+        const url = "/api/Authentication/ClientLogout";
+        return this.statisticService.post(url, {});
+    }
+    tryRestoreSession() {
+        const fullUrl = "/api/Authentication/RefreshToken";
+        return this.statisticService.post(fullUrl, { appType: "WEBAPP" });
+    }
+    resolveAuthenticateResponse(x) {
+        if (x.ok && x.status === 200 && x.body?.statusCode === 200) {
+            const body = x.body;
+            if (body.statusCode === 200) {
+                const innerBody = body.innerBody;
+                this.data$.next(innerBody);
+            }
+        }
+    }
+    postLogout() {
+        // Do nothing. just for the interface implementation
+    }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.2.3", ngImport: i0, type: StatisticAuthService, deps: [{ token: StatisticService }], target: i0.ɵɵFactoryTarget.Injectable }); }
+    static { this.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "17.2.3", ngImport: i0, type: StatisticAuthService, providedIn: 'root' }); }
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.2.3", ngImport: i0, type: StatisticAuthService, decorators: [{
+            type: Injectable,
+            args: [{
+                    providedIn: 'root'
+                }]
+        }], ctorParameters: () => [{ type: StatisticService }] });
+
 class AuthInterceptor {
-    constructor(auth) {
-        this.auth = auth;
+    constructor(authService, statisticAuthService) {
+        this.authService = authService;
+        this.statisticAuthService = statisticAuthService;
     }
     intercept(req, next) {
+        const isStatistic = req.headers.has(InterceptorStatisticHeader);
         // Get the auth token from the service.
-        const authToken = this.auth.getAuthorizationToken();
+        const authToken = isStatistic ? this.statisticAuthService.getAuthorizationToken() : this.authService.getAuthorizationToken();
         if (authToken === undefined) {
             return next.handle(req);
         }
@@ -2780,7 +2876,7 @@ class AuthInterceptor {
         // send cloned request with header to the next handler.
         return next.handle(authReq);
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.2.3", ngImport: i0, type: AuthInterceptor, deps: [{ token: AuthService }], target: i0.ɵɵFactoryTarget.Injectable }); }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.2.3", ngImport: i0, type: AuthInterceptor, deps: [{ token: AuthService }, { token: StatisticAuthService }], target: i0.ɵɵFactoryTarget.Injectable }); }
     static { this.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "17.2.3", ngImport: i0, type: AuthInterceptor, providedIn: 'root' }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.2.3", ngImport: i0, type: AuthInterceptor, decorators: [{
@@ -2788,16 +2884,13 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.2.3", ngImpor
             args: [{
                     providedIn: 'root'
                 }]
-        }], ctorParameters: () => [{ type: AuthService }] });
+        }], ctorParameters: () => [{ type: AuthService }, { type: StatisticAuthService }] });
 
-/*
-Tannv: This code is based on the original blog post of Alexandru Bereghici
-https://itnext.io/angular-tutorial-implement-refresh-token-with-httpinterceptor-bfa27b966f57
-*/
 class TokenInterceptor {
     addAuthenticationToken(request) {
-        // Get access token from Local Storage
-        const accessToken = this.authService.getAuthorizationToken();
+        const isStatistic = request.headers.has(InterceptorStatisticHeader);
+        const authService = isStatistic ? this.statisticAuthService : this.auth;
+        const accessToken = authService.getAuthorizationToken();
         // If access token is null this means that user is not logged in
         // And we return the original request
         if (!accessToken) {
@@ -2808,8 +2901,9 @@ class TokenInterceptor {
             headers: request.headers.set('Authorization', 'Bearer ' + accessToken)
         });
     }
-    constructor(authService, appInitializationService, router) {
-        this.authService = authService;
+    constructor(auth, statisticAuthService, appInitializationService, router) {
+        this.auth = auth;
+        this.statisticAuthService = statisticAuthService;
         this.appInitializationService = appInitializationService;
         this.router = router;
         this.refreshTokenInProgress = false;
@@ -2818,6 +2912,8 @@ class TokenInterceptor {
         this.refreshTokenSubject = new BehaviorSubject(null);
     }
     intercept(req, next) {
+        const isStatistic = req.headers.has(InterceptorStatisticHeader);
+        const authService = isStatistic ? this.statisticAuthService : this.auth;
         if (req.url === undefined) {
             return next.handle(req);
         }
@@ -2858,9 +2954,9 @@ class TokenInterceptor {
                 if (req.url.toUpperCase().includes('REFRESH_TOKEN') ||
                     req.url.toUpperCase().includes('REFRESHTOKEN')) {
                     this.appInitializationService.initializing$.next(false);
-                    this.authService.userLogout().subscribe(x => {
+                    authService.userLogout().subscribe(x => {
                         if (x.ok && x.status === 200) {
-                            this.authService.postLogout();
+                            authService.postLogout();
                         }
                     });
                 }
@@ -2892,7 +2988,7 @@ class TokenInterceptor {
                 this.refreshTokenSubject.next(null);
                 // Call auth.refreshAccessToken
                 // (this is an Observable that will be returned)
-                const refreshTokenReq = this.authService.tryRestoreSession();
+                const refreshTokenReq = authService.tryRestoreSession();
                 return refreshTokenReq.pipe(
                 /*
                 The main difference between switchMap and other flattening operators is the cancelling effect. On each emission the previous inner observable (the result of the function you supplied) is cancelled and the new observable is subscribed. You can remember this by the phrase switch to a new observable.
@@ -2900,8 +2996,8 @@ class TokenInterceptor {
                 switchMap((response) => {
                     let token = '';
                     if (response.ok && response.status === 200) {
-                        this.authService.data$.next(response.body);
-                        this.authService.authenticated$.next(true);
+                        authService.data$.next(response.body);
+                        authService.authenticated$.next(true);
                         token = response.body.jwtToken;
                     }
                     // When the call to refreshToken completes 
@@ -2915,9 +3011,9 @@ class TokenInterceptor {
                     this.refreshTokenInProgress = false;
                     console.log("refreshTokenReq catchError", err);
                     debugger;
-                    this.authService.userLogout().subscribe(x => {
+                    authService.userLogout().subscribe(x => {
                         if (x.ok && x.status === 200) {
-                            this.authService.postLogout();
+                            authService.postLogout();
                         }
                     });
                     return throwError(() => new Error(err));
@@ -2927,12 +3023,12 @@ class TokenInterceptor {
         // Log when response observable either completes or errors
         finalize(() => { }));
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.2.3", ngImport: i0, type: TokenInterceptor, deps: [{ token: AuthService }, { token: AppInitializationService }, { token: i1$1.Router }], target: i0.ɵɵFactoryTarget.Injectable }); }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.2.3", ngImport: i0, type: TokenInterceptor, deps: [{ token: AuthService }, { token: StatisticAuthService }, { token: AppInitializationService }, { token: i1$1.Router }], target: i0.ɵɵFactoryTarget.Injectable }); }
     static { this.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "17.2.3", ngImport: i0, type: TokenInterceptor }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.2.3", ngImport: i0, type: TokenInterceptor, decorators: [{
             type: Injectable
-        }], ctorParameters: () => [{ type: AuthService }, { type: AppInitializationService }, { type: i1$1.Router }] });
+        }], ctorParameters: () => [{ type: AuthService }, { type: StatisticAuthService }, { type: AppInitializationService }, { type: i1$1.Router }] });
 
 class ResponseService {
     constructor(alertService, mls) {
@@ -22110,6 +22206,8 @@ class CoreStatisticWidgetComponent {
         this.comparisonTextRectHeight = (this.height / 4 - this.divisorLineMargin.bottom) / 2;
         this.x = d3.scaleLinear().range([0, this.graphWidth]);
         this.y = d3.scaleLinear().range([this.graphHeight, 0]);
+        this.previousValue = 0;
+        this.previousComparisonValue = 0;
         //To remove only the numbers while keeping the ticks on the axes, 
         //you can select the text elements of the ticks and hide them using CSS. 
         //Here's how you can modify the code to achieve that:
@@ -22139,44 +22237,98 @@ class CoreStatisticWidgetComponent {
     }
     updateMetricName() {
         var nameElement = d3.select("#metric_" + this.metric.id + "_name");
-        nameElement.text(this.metric.name);
+        nameElement.transition().text(this.metric.name);
     }
     updateMetricValue() {
-        var valueElement = d3.select("metric_" + this.metric.id + "_value");
+        var valueElement = d3.select("#metric_" + this.metric.id + "_value");
+        const start = this.previousValue;
+        const end = this.value;
         switch (this.metric.dataType) {
             case EnumICoreStatisticWidgetDataType.INTEGER:
-                valueElement.text(Math.round(this.value).toString());
+                valueElement
+                    .transition()
+                    .tween("text", () => {
+                    const interpolator = d3.interpolateNumber(start, end);
+                    return t => {
+                        valueElement.text(Math.round(interpolator(t)));
+                    };
+                })
+                    .duration(500);
                 break;
             case EnumICoreStatisticWidgetDataType.DECIMAL:
-                valueElement.text(this.value.toString());
+                valueElement
+                    .transition()
+                    .tween("text", () => {
+                    const interpolator = d3.interpolateNumber(start, end);
+                    return t => {
+                        valueElement.text(Math.round(interpolator(t) * 100) / 100);
+                    };
+                })
+                    .duration(500);
                 break;
             case EnumICoreStatisticWidgetDataType.PERCENTAGE:
-                valueElement.text(Math.round(this.value * 10000) / 100 + "%");
+                valueElement
+                    .transition()
+                    .tween("text", () => {
+                    const interpolator = d3.interpolateNumber(start, end);
+                    return t => {
+                        valueElement.text(Math.round(interpolator(t) * 10000) / 100 + "%");
+                    };
+                })
+                    .duration(500);
                 break;
             default:
-                valueElement.text(this.value.toString());
+                valueElement.transition().text(this.value.toString());
                 break;
         }
+        this.previousValue = this.value;
     }
     updateMetricComparisonValue() {
-        var comparisonValueElement = d3.select("metric_" + this.metric.id + "_comparisonValue");
+        const start = this.previousComparisonValue;
+        const end = this.comparisonValue;
+        var comparisonValueElement = d3.select("#metric_" + this.metric.id + "_comparisonValue");
+        comparisonValueElement.attr("fill", this.comparisonValue >= 0 ? this.comparisonTextFillColor : d3.color("red"));
         switch (this.metric.dataType) {
             case EnumICoreStatisticWidgetDataType.INTEGER:
-                comparisonValueElement.text(Math.round(this.comparisonValue).toString());
+                comparisonValueElement
+                    .transition()
+                    .tween("text", () => {
+                    const interpolator = d3.interpolateNumber(start, end);
+                    return t => {
+                        comparisonValueElement.text(Math.round(interpolator(t)));
+                    };
+                })
+                    .duration(500);
                 break;
             case EnumICoreStatisticWidgetDataType.DECIMAL:
-                comparisonValueElement.text(this.comparisonValue.toString());
+                comparisonValueElement
+                    .transition()
+                    .tween("text", () => {
+                    const interpolator = d3.interpolateNumber(start, end);
+                    return t => {
+                        comparisonValueElement.text(Math.round(interpolator(t) * 100) / 100);
+                    };
+                })
+                    .duration(500);
                 break;
             case EnumICoreStatisticWidgetDataType.PERCENTAGE:
-                comparisonValueElement.text(Math.round(this.comparisonValue * 10000) / 100 + "%");
+                comparisonValueElement
+                    .transition()
+                    .tween("text", () => {
+                    const interpolator = d3.interpolateNumber(start, end);
+                    return t => {
+                        comparisonValueElement.text(Math.round(interpolator(t) * 10000) / 100 + "%");
+                    };
+                })
+                    .duration(500);
                 break;
             default:
-                comparisonValueElement.text(this.comparisonValue.toString());
+                comparisonValueElement.transition().text(this.comparisonValue.toString());
                 break;
         }
     }
     updateMetricComparisonText() {
-        var comparisonTextElement = d3.select("metric_" + this.metric.id + "_comparisonText");
+        var comparisonTextElement = d3.select("#metric_" + this.metric.id + "_comparisonText");
         switch (this.metric.comparisonCode) {
             case EnumHrComparisonCode.WITH_PREVIOUS_MONTH:
                 comparisonTextElement.text("vs. previous month");
@@ -22213,14 +22365,15 @@ class CoreStatisticWidgetComponent {
             .x(d => xScale(d.x))
             .y(d => yScale(d.y))
             .defined((d, i) => i >= 0 && i < this.dataset.length);
-        this.grayGroup.select("path")
+        d3.select("#metric_" + this.metric.id + "_scatter-plot").select("path")
             .datum(this.dataset)
             .transition()
             .duration(500)
             .attr("d", this.connectingLine);
         // Update circles
-        const circles = this.grayGroup.selectAll("circle")
+        const circles = d3.select("#metric_" + this.metric.id + "_scatter-plot").selectAll("circle")
             .data(this.dataset);
+        circles.exit().remove();
         circles.enter()
             .append("circle")
             .merge(circles)
@@ -22245,7 +22398,7 @@ class CoreStatisticWidgetComponent {
         })
             .attr("stroke-width", 3); // Set stroke width
     }
-    drawGraph() {
+    async drawGraph() {
         this.svg = d3.select(this.container.nativeElement)
             .append("svg")
             .attr("width", this.outerWidth)
@@ -22310,25 +22463,52 @@ class CoreStatisticWidgetComponent {
             .attr("y", this.valueRectHeight / 2)
             .attr("class", "graph-value")
             .attr("fill", this.valueFillColor)
-            .attr("font-size", this.valueRectHeight + "px")
+            .attr("font-size", (this.valueFontSize || this.valueRectHeight) + "px")
             .attr("text-anchor", "middle")
             .attr("alignment-baseline", "middle");
+        const startValue = 0;
+        const endValue = this.value;
         switch (this.metric.dataType) {
             case EnumICoreStatisticWidgetDataType.INTEGER:
-                this.valueText.text(Math.round(this.value).toString());
+                this.valueText
+                    .transition()
+                    .tween("text", () => {
+                    const interpolator = d3.interpolateNumber(startValue, endValue);
+                    return t => {
+                        this.valueText.text(Math.round(interpolator(t)));
+                    };
+                })
+                    .duration(500);
                 break;
             case EnumICoreStatisticWidgetDataType.DECIMAL:
-                this.valueText.text(this.value.toString());
+                this.valueText
+                    .transition()
+                    .tween("text", () => {
+                    const interpolator = d3.interpolateNumber(startValue, endValue);
+                    return t => {
+                        this.valueText.text(Math.round(interpolator(t) * 100) / 100);
+                    };
+                })
+                    .duration(500);
                 break;
             case EnumICoreStatisticWidgetDataType.PERCENTAGE:
-                this.valueText.text(Math.round(this.value * 10000) / 100 + "%");
+                this.valueText
+                    .transition()
+                    .tween("text", () => {
+                    const interpolator = d3.interpolateNumber(startValue, endValue);
+                    return t => {
+                        this.valueText.text(Math.round(interpolator(t) * 10000) / 100 + "%");
+                    };
+                })
+                    .duration(500);
                 break;
             default:
                 this.valueText.text(this.value.toString());
                 break;
         }
+        this.previousValue = this.value;
         this.grayGroup = this.greenGroup.append("g")
-            .attr("id", "scatter-plot")
+            .attr("id", "metric_" + this.metric.id + "_scatter-plot")
             .attr("transform", "translate(" + this.divisorLineMargin.left + ", " + this.height / 2 + ")");
         this.grayGroup.append("rect")
             .attr("class", "graph-container")
@@ -22359,24 +22539,51 @@ class CoreStatisticWidgetComponent {
             .attr("x", this.comparisonValueRectWidth / 2)
             .attr("y", this.comparisonValueRectHeight / 2)
             .attr("class", "graph-value")
-            .attr("fill", this.comparisonValueFillColor)
+            .attr("fill", this.comparisonValue >= 0 ? this.comparisonValueFillColor : d3.color("red"))
             .attr("font-size", this.comparisonValueRectHeight + "px")
             .attr("text-anchor", "middle")
             .attr("alignment-baseline", "middle");
+        const startComparisonValue = 0;
+        const endComparisonValue = this.comparisonValue;
         switch (this.metric.dataType) {
             case EnumICoreStatisticWidgetDataType.INTEGER:
-                this.comparisonValueText.text(Math.round(this.comparisonValue).toString());
+                comparisonValueText
+                    .transition()
+                    .tween("text", () => {
+                    const interpolator = d3.interpolateNumber(startValue, endValue);
+                    return t => {
+                        comparisonValueText.text(Math.round(interpolator(t)));
+                    };
+                })
+                    .duration(500);
                 break;
             case EnumICoreStatisticWidgetDataType.DECIMAL:
-                this.comparisonValueText.text(this.comparisonValue.toString());
+                comparisonValueText
+                    .transition()
+                    .tween("text", () => {
+                    const interpolator = d3.interpolateNumber(startValue, endValue);
+                    return t => {
+                        comparisonValueText.text(Math.round(interpolator(t) * 100) / 100);
+                    };
+                })
+                    .duration(500);
                 break;
             case EnumICoreStatisticWidgetDataType.PERCENTAGE:
-                this.comparisonValueText.text(Math.round(this.comparisonValue * 10000) / 100 + "%");
+                comparisonValueText
+                    .transition()
+                    .tween("text", () => {
+                    const interpolator = d3.interpolateNumber(startValue, endValue);
+                    return t => {
+                        comparisonValueText.text(Math.round(interpolator(t) * 10000) / 100 + "%");
+                    };
+                })
+                    .duration(500);
                 break;
             default:
-                this.comparisonValueText.text(this.comparisonValue.toString());
+                comparisonValueText.text(this.comparisonValue.toString());
                 break;
         }
+        this.previousComparisonValue = this.comparisonValue;
         const comparisonTextGroupTranslateY = this.height * 3 / 4 + this.divisorLineMargin.bottom + this.comparisonTextRectHeight;
         this.comparisonTextGroup = this.greenGroup.append("g")
             .attr("class", "comparison-text-group")
@@ -22439,7 +22646,7 @@ class CoreStatisticWidgetComponent {
                 return "#FF8C00"; // Set lowest point to #FF8C00
             if (d === maxPoint)
                 return "#315897"; // Set highest point to #315897
-            return "gray"; // Set the other points transparent
+            return "none"; // Set the other points transparent
         })
             .attr("stroke", function (d) {
             if (d === minPoint)
@@ -22456,7 +22663,7 @@ class CoreStatisticWidgetComponent {
         });
     }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.2.3", ngImport: i0, type: CoreStatisticWidgetComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "17.2.3", type: CoreStatisticWidgetComponent, isStandalone: true, selector: "core-statistic-widget", inputs: { metric: "metric", dataset: "dataset", value: "value", comparisonValue: "comparisonValue", margin: "margin", padding: "padding", outerWidth: "outerWidth", outerHeight: "outerHeight", divisorLineMargin: "divisorLineMargin", titleFillColor: "titleFillColor", divisorLineStrokeColor: "divisorLineStrokeColor", divisorLineStrokeWidth: "divisorLineStrokeWidth", valueFillColor: "valueFillColor", comparisonValueFillColor: "comparisonValueFillColor", comparisonTextFillColor: "comparisonTextFillColor", showAxes: "showAxes" }, viewQueries: [{ propertyName: "container", first: true, predicate: ["container"], descendants: true }], usesOnChanges: true, ngImport: i0, template: "<div #container class=\"core-statistic-widget-container\">\r\n    \r\n</div>", styles: [""] }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "17.2.3", type: CoreStatisticWidgetComponent, isStandalone: true, selector: "core-statistic-widget", inputs: { metric: "metric", dataset: "dataset", value: "value", comparisonValue: "comparisonValue", valueFontSize: "valueFontSize", margin: "margin", padding: "padding", outerWidth: "outerWidth", outerHeight: "outerHeight", divisorLineMargin: "divisorLineMargin", titleFillColor: "titleFillColor", divisorLineStrokeColor: "divisorLineStrokeColor", divisorLineStrokeWidth: "divisorLineStrokeWidth", valueFillColor: "valueFillColor", comparisonValueFillColor: "comparisonValueFillColor", comparisonTextFillColor: "comparisonTextFillColor", showAxes: "showAxes" }, viewQueries: [{ propertyName: "container", first: true, predicate: ["container"], descendants: true }], usesOnChanges: true, ngImport: i0, template: "<div #container class=\"core-statistic-widget-container\">\r\n    \r\n</div>", styles: [""] }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.2.3", ngImport: i0, type: CoreStatisticWidgetComponent, decorators: [{
             type: Component,
@@ -22473,6 +22680,8 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.2.3", ngImpor
             }], comparisonValue: [{
                 type: Input,
                 args: [{ required: true }]
+            }], valueFontSize: [{
+                type: Input
             }], margin: [{
                 type: Input
             }], padding: [{
@@ -23326,5 +23535,5 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.2.3", ngImpor
  * Generated bundle index. Do not edit.
  */
 
-export { AlertComponent, AlertService, AnimatedTextComponent, AnimatedTextService, AppConfigService, AppInitializationService, AppService, AuthService, BaseComponent, BaseDropdownComponent, BaseEditComponent, ButtonGroupComponent, ButtonGroupModule, ButtonGroupService, CORE_VNS_BUTTONS, CacheService, CanActivateFunctionUrlMapperGuard, CanDeactivateGuard, CheckForUpdateService, CommonHttpRequestService, ConfigService, ConfirmDialogStateComponent, ControlBase, CoreAccordionComponent, CoreAccordionService, CoreApiProgressComponent, CoreAttachmentComponent, CoreButtonComponent, CoreButtonGroupComponent, CoreButtonGroupService, CoreButtonGroupVnsComponent, CoreButtonVnsComponent, CoreCheckboxComponent, CoreChecklistComponent, CoreCommonParamKitComponent, CoreCompositionComponent, CoreCompositionService, CoreCompositionState, CoreConfirmDialogComponent, CoreContractSeekerComponent, CoreControlComponent, CoreControlNoGridBufferComponent, CoreControlNoSeekerComponent, CoreControlService, CoreCurrencyInputComponent, CoreDatePickerComponent, CoreDatetimeService, CoreDropdownComponent, CoreEmployeeSeekerComponent, CoreFileUploaderComponent, CoreFormComponent, CoreFormControlBaseComponent, CoreFormControlSeekerComponent, CoreFormLiteComponent, CoreFormService, CoreGridBufferComponent, CoreHeaderParamsComponent, CoreIosSwitcherComponent, CoreLineComponent, CoreListComponent, CoreListLazyComponent, CoreLoadingSurfaceComponent, CoreMccComponent, CoreMonthPickerComponent, CoreMonthSelectorComponent, CoreNavigationTrackerComponent, CoreOrgTreeComponent, CoreOrgTreeService, CoreOrgTreeState, CoreOrgUnitSeekerComponent, CoreOrgchartflexComponent, CorePageEditComponent, CorePageEditLiteComponent, CorePageEditService, CorePageHeaderComponent, CorePageListComponent, CorePageListContentComponent, CorePageListService, CorePageListState, CorePageViewComponent, CorePaginationComponent, CorePaginationFullComponent, CorePaginationFullService, CoreParamControlComponent, CorePermissionActionsComponent, CorePermissionComponent, CorePermissionService, CorePositionConcurrentSeekerComponent, CorePositionSeekerComponent, CoreQueryBuilderComponent, CoreRadioGroupComponent, CoreReducerIconComponent, CoreRoutingHistoryComponent, CoreScrollComponent, CoreScrollLazyComponent, CoreStatisticWidgetComponent, CoreStatusStickerComponent, CoreSubFormGroupComponent, CoreTableComponent, CoreTabsComponent, CoreTagsComponent, CoreTopicPickerComponent, CoreTopicTreeComponent, CoreTreeComponent, CoreTreeGridComponent, CoreWageSeekerComponent, CoreWorkingSeekerComponent, CoreYearPickerComponent, CustomValidators, DATE_VALUE_ACCESSOR, DESKTOP_SCREEN_HEDER_HEIGHT, DateValueAccessor, DecisionComponent, DialogService, DialogStateComponent, DomService, ECoreTableToolClass, ECoreTableToolCode, EnumAlertType, EnumButtonCaptionCode, EnumCoreArticleCategoryTreeaAccessorMode, EnumCoreButtonCode, EnumCoreButtonVNSCode, EnumCoreFileUploaderType, EnumCoreFormControlSeekerSourceType, EnumCoreOrgTreeaAccessorMode, EnumCorePageEditBootstrapClass, EnumCorePageEditFieldType, EnumCorePageEditMode, EnumCoreTablePipeType, EnumCoreViewItemType, EnumErrorType, EnumExType, EnumFilterOperator, EnumFormBaseContolType, EnumHrComparisonCode, EnumICoreStatisticWidgetDataType, EnumIconClass, EnumOparator, EnumPermissionObjectType, EnumProfileInfoSector, EnumRecursiveFields, EnumSignalRType, EnumSortDirection, EnumStyleButtonClass, EnumSwUpdateVersionUpdatesEventType, EvaluateDialogComponent, EvaluateDialogService, FileService, FilterPipe, FooterComponent, FullscreenModalLoaderComponent, FunctionComponent, FunctionEditComponent, FunctionEditService, FunctionIgnoreComponent, FunctionIgnoreEditComponent, GroupFunctionComponent, GroupFunctionEditComponent, GrpcService, HeaderService, HistoryService, HttpErrorHandler, HubConnectionService, HuconcurrentlyComponent, IAlertOptions, ImageErrorResolverDirective, InMemoryComponent, InitializationCanActivateFn, InitializationCanMatchFn, InterceptorSkipHeader, IpServiceService, ItemComponent, JsonService, LanguageChangerComponent, LanguageComponent, LanguageEditComponent, LayoutService, LongTaskService, MOBILE_SCREEN_HEDER_HEIGHT, MapAvatarToServerPipe, MapService, MenuComponent, MenuEditComponent, MenuService, MessageService, ModalService, MultiLanguageService, MutationLogComponent, MutationViewComponent, NavigatorComponent, NavigatorService, NgxHistaffAlphaComponent, NgxHistaffAlphaService, NormalizeHumanNamePipe, OnlineUsersComponent, OrganizationService, PageTitleComponent, PaginationComponent, PortalRouteComponent, PortalRouteEditComponent, PositionComponent, PositionEditService, PositionTransferService, PushNotificationService, RandomAvatarService, RecursiveService, RequestCache, RequestCacheWithMap, ResponseService, RightchatComponent, RoutingService, STICKER_COLOR_SCHEMA, SeekerService, SocketService, StaffProfileComponent, StringService, SysActionComponent, SysActionEditComponent, SysFunctionActionComponent, SysFunctionActionEditComponent, SysFunctionActionMapperComponent, SysFunctionUrlMapperComponent, SysMenuService, SysModuleComponent, SysModuleEditComponent, TLA_CONFIG, TableCellPipe, Textbox, ThreedotsComponent, TimeSheetService, TooltipComponent, TooltipDirective, TopicPermissionService, TopicTreeService, TranslatePipe, UnicodeService, UrlService, UserActivityComponent, UserActivityService, WageComponent, WaittingScreenComponent, alertOptions, attachmentOptions, blob_to_base64_script, defaultPaging, httpInterceptorProviders, liner_to_nested_array_script, longAlertOptions, noneAutoClosedAlertOptions, normalizeHumanName, themeBlue };
+export { AlertComponent, AlertService, AnimatedTextComponent, AnimatedTextService, AppConfigService, AppInitializationService, AppService, AuthService, BaseComponent, BaseDropdownComponent, BaseEditComponent, ButtonGroupComponent, ButtonGroupModule, ButtonGroupService, CORE_VNS_BUTTONS, CacheService, CanActivateFunctionUrlMapperGuard, CanDeactivateGuard, CheckForUpdateService, CommonHttpRequestService, ConfigService, ConfirmDialogStateComponent, ControlBase, CoreAccordionComponent, CoreAccordionService, CoreApiProgressComponent, CoreAttachmentComponent, CoreButtonComponent, CoreButtonGroupComponent, CoreButtonGroupService, CoreButtonGroupVnsComponent, CoreButtonVnsComponent, CoreCheckboxComponent, CoreChecklistComponent, CoreCommonParamKitComponent, CoreCompositionComponent, CoreCompositionService, CoreCompositionState, CoreConfirmDialogComponent, CoreContractSeekerComponent, CoreControlComponent, CoreControlNoGridBufferComponent, CoreControlNoSeekerComponent, CoreControlService, CoreCurrencyInputComponent, CoreDatePickerComponent, CoreDatetimeService, CoreDropdownComponent, CoreEmployeeSeekerComponent, CoreFileUploaderComponent, CoreFormComponent, CoreFormControlBaseComponent, CoreFormControlSeekerComponent, CoreFormLiteComponent, CoreFormService, CoreGridBufferComponent, CoreHeaderParamsComponent, CoreIosSwitcherComponent, CoreLineComponent, CoreListComponent, CoreListLazyComponent, CoreLoadingSurfaceComponent, CoreMccComponent, CoreMonthPickerComponent, CoreMonthSelectorComponent, CoreNavigationTrackerComponent, CoreOrgTreeComponent, CoreOrgTreeService, CoreOrgTreeState, CoreOrgUnitSeekerComponent, CoreOrgchartflexComponent, CorePageEditComponent, CorePageEditLiteComponent, CorePageEditService, CorePageHeaderComponent, CorePageListComponent, CorePageListContentComponent, CorePageListService, CorePageListState, CorePageViewComponent, CorePaginationComponent, CorePaginationFullComponent, CorePaginationFullService, CoreParamControlComponent, CorePermissionActionsComponent, CorePermissionComponent, CorePermissionService, CorePositionConcurrentSeekerComponent, CorePositionSeekerComponent, CoreQueryBuilderComponent, CoreRadioGroupComponent, CoreReducerIconComponent, CoreRoutingHistoryComponent, CoreScrollComponent, CoreScrollLazyComponent, CoreStatisticWidgetComponent, CoreStatusStickerComponent, CoreSubFormGroupComponent, CoreTableComponent, CoreTabsComponent, CoreTagsComponent, CoreTopicPickerComponent, CoreTopicTreeComponent, CoreTreeComponent, CoreTreeGridComponent, CoreWageSeekerComponent, CoreWorkingSeekerComponent, CoreYearPickerComponent, CustomValidators, DATE_VALUE_ACCESSOR, DESKTOP_SCREEN_HEDER_HEIGHT, DateValueAccessor, DecisionComponent, DialogService, DialogStateComponent, DomService, ECoreTableToolClass, ECoreTableToolCode, EnumAlertType, EnumButtonCaptionCode, EnumCoreArticleCategoryTreeaAccessorMode, EnumCoreButtonCode, EnumCoreButtonVNSCode, EnumCoreFileUploaderType, EnumCoreFormControlSeekerSourceType, EnumCoreOrgTreeaAccessorMode, EnumCorePageEditBootstrapClass, EnumCorePageEditFieldType, EnumCorePageEditMode, EnumCoreTablePipeType, EnumCoreViewItemType, EnumErrorType, EnumExType, EnumFilterOperator, EnumFormBaseContolType, EnumHrComparisonCode, EnumICoreStatisticWidgetDataType, EnumIconClass, EnumOparator, EnumPermissionObjectType, EnumProfileInfoSector, EnumRecursiveFields, EnumSignalRType, EnumSortDirection, EnumStyleButtonClass, EnumSwUpdateVersionUpdatesEventType, EvaluateDialogComponent, EvaluateDialogService, FileService, FilterPipe, FooterComponent, FullscreenModalLoaderComponent, FunctionComponent, FunctionEditComponent, FunctionEditService, FunctionIgnoreComponent, FunctionIgnoreEditComponent, GroupFunctionComponent, GroupFunctionEditComponent, GrpcService, HeaderService, HistoryService, HttpErrorHandler, HubConnectionService, HuconcurrentlyComponent, IAlertOptions, ImageErrorResolverDirective, InMemoryComponent, InitializationCanActivateFn, InitializationCanMatchFn, InterceptorSkipHeader, IpServiceService, ItemComponent, JsonService, LanguageChangerComponent, LanguageComponent, LanguageEditComponent, LayoutService, LongTaskService, MOBILE_SCREEN_HEDER_HEIGHT, MapAvatarToServerPipe, MapService, MenuComponent, MenuEditComponent, MenuService, MessageService, ModalService, MultiLanguageService, MutationLogComponent, MutationViewComponent, NavigatorComponent, NavigatorService, NgxHistaffAlphaComponent, NgxHistaffAlphaService, NormalizeHumanNamePipe, OnlineUsersComponent, OrganizationService, PageTitleComponent, PaginationComponent, PortalRouteComponent, PortalRouteEditComponent, PositionComponent, PositionEditService, PositionTransferService, PushNotificationService, RandomAvatarService, RecursiveService, RequestCache, RequestCacheWithMap, ResponseService, RightchatComponent, RoutingService, STICKER_COLOR_SCHEMA, SeekerService, SocketService, StaffProfileComponent, StatisticAuthService, StatisticService, StringService, SysActionComponent, SysActionEditComponent, SysFunctionActionComponent, SysFunctionActionEditComponent, SysFunctionActionMapperComponent, SysFunctionUrlMapperComponent, SysMenuService, SysModuleComponent, SysModuleEditComponent, TLA_CONFIG, TableCellPipe, Textbox, ThreedotsComponent, TimeSheetService, TooltipComponent, TooltipDirective, TopicPermissionService, TopicTreeService, TranslatePipe, UnicodeService, UrlService, UserActivityComponent, UserActivityService, WageComponent, WaittingScreenComponent, alertOptions, attachmentOptions, blob_to_base64_script, defaultPaging, httpInterceptorProviders, liner_to_nested_array_script, longAlertOptions, noneAutoClosedAlertOptions, normalizeHumanName, themeBlue };
 //# sourceMappingURL=ngx-histaff-alpha.mjs.map