rfx-cartesian-chart - npm Package Compare versions

Comparing version 0.1.1 to 0.2.0

fesm2015/rfx-cartesian-chart.js

@@ -115,2 +115,5 @@ import { flatten } from '@angular/compiler';
         this.renderer = renderer;
+        this.labelNoData = 'No data available';
+        this.labelLoading = 'Loading...';
+        this.isLoading = false;
         this.isReady = false;
@@ -228,10 +231,12 @@ this.fontFamily = 'Arial';
     getYZeroLine(drawableRect, rangeValues, topPadding, bottomPadding) {
-        const min = rangeValues.min + (rangeValues.min / 100 * bottomPadding);
-        const max = rangeValues.max + (rangeValues.max / 100 * topPadding);
-        if (min < 0 && max > 0) {
-            const y = drawableRect.height * max / (max - min);
-            return {
-                startPoint: { x: drawableRect.left, y: drawableRect.top + y },
-                endPoint: { x: drawableRect.left + drawableRect.width, y: drawableRect.top + y }
-            };
+        if (rangeValues) {
+            const min = rangeValues.min + (rangeValues.min / 100 * bottomPadding);
+            const max = rangeValues.max + (rangeValues.max / 100 * topPadding);
+            if (min < 0 && max > 0) {
+                const y = drawableRect.height * max / (max - min);
+                return {
+                    startPoint: { x: drawableRect.left, y: drawableRect.top + y },
+                    endPoint: { x: drawableRect.left + drawableRect.width, y: drawableRect.top + y }
+                };
+            }
         }
@@ -285,2 +290,5 @@ return null;
     getPointsRange(values, axis) {
+        if (values.length === 0) {
+            return null;
+        }
         const validValues = values.filter(value => {
@@ -295,2 +303,5 @@ const isAxis = [CartesianElementTypeEnum.X_AXIS_LINE, CartesianElementTypeEnum.Y_AXIS_LINE].includes(value.type);
         });
+        if (validValues.length === 0) {
+            return null;
+        }
         const flattened = flatten(validValues.map(value => value.points));
@@ -303,14 +314,16 @@ const axisLabels = flattened.map(value => value[axis]);
     getAxisLabels(pointCount, precision, rangeValue, offsetRange) {
-        let minValue = rangeValue.min;
-        let maxValue = rangeValue.max;
-        if (offsetRange) {
-            minValue += (rangeValue.min / 100 * offsetRange.min);
-            maxValue += (rangeValue.max / 100 * offsetRange.max);
-        }
         const labels = [];
-        const step = (maxValue - minValue) / (pointCount - 1);
-        for (let i = 0; i < pointCount; i++) {
-            const labelValue = minValue + (step * i);
-            const label = this.getRoundedValueString(labelValue, precision);
-            labels.push(label);
+        if (rangeValue) {
+            let minValue = rangeValue.min;
+            let maxValue = rangeValue.max;
+            if (offsetRange) {
+                minValue += (rangeValue.min / 100 * offsetRange.min);
+                maxValue += (rangeValue.max / 100 * offsetRange.max);
+            }
+            const step = (maxValue - minValue) / (pointCount - 1);
+            for (let i = 0; i < pointCount; i++) {
+                const labelValue = minValue + (step * i);
+                const label = this.getRoundedValueString(labelValue, precision);
+                labels.push(label);
+            }
         }
@@ -582,4 +595,4 @@ return labels;
     onCursorPositionChange(event) {
-        var _a, _b;
-        if (this.isCrosshairEnabled && this.canvas && this.ctx && this.cache) {
+        var _a, _b, _c;
+        if (this.isCrosshairEnabled && this.canvas && this.ctx && this.cache && this.isReady && ((_a = this.cartesianValues) === null || _a === void 0 ? void 0 : _a.length)) {
             this.ctx.clearRect(0, 0, this.canvas.nativeElement.clientWidth, this.canvas.nativeElement.clientHeight);
@@ -591,3 +604,3 @@ this.draw(this.ctx, this.cache);
                 const xCrosshairLabel = event.xDot ? this.getRoundedValueString(event.xDot, this.xCrosshairLabelPrecision) :
-                    this.getCrosshairLabel(((_a = event.xDot) !== null && _a !== void 0 ? _a : event.x), this.cache.xAxisLabels, this.cache.drawableRect.width, this.xCrosshairLabelPrecision);
+                    this.getCrosshairLabel(((_b = event.xDot) !== null && _b !== void 0 ? _b : event.x), this.cache.xAxisLabels, this.cache.drawableRect.width, this.xCrosshairLabelPrecision);
                 const yCrosshairLabel = event.yDot ? this.getRoundedValueString(event.yDot, this.yCrosshairLabelPrecision) :
@@ -599,3 +612,3 @@ this.getCrosshairLabel(this.cache.drawableRect.height - event.y, this.cache.yAxisLabels, this.cache.drawableRect.height, this.yCrosshairLabelPrecision);
                 this.drawContinuousLine(this.ctx, this.crosshairColor, this.crosshairWidth, 1, null, yCrosshair);
-                const crosshairTextColor = event.isDot ? ((_b = event.dotColor) !== null && _b !== void 0 ? _b : '#000000') : this.crosshairColor;
+                const crosshairTextColor = event.isDot ? ((_c = event.dotColor) !== null && _c !== void 0 ? _c : '#000000') : this.crosshairColor;
                 const crosshairFontWeight = event.isDot ? 600 : 400;
@@ -612,3 +625,3 @@ this.drawText(this.ctx, xCrosshairLabelPosition, xCrosshairLabel, crosshairTextColor, crosshairFontWeight);
 CartesianGraphComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "12.2.4", ngImport: i0, type: CartesianGraphComponent, deps: [{ token: i0.Renderer2 }], target: i0.ɵɵFactoryTarget.Component });
-CartesianGraphComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "12.2.4", type: CartesianGraphComponent, selector: "lib-rfx-cartesian-chart", inputs: { fontFamily: "fontFamily", canvasWidthPx: "canvasWidthPx", canvasHeightPx: "canvasHeightPx", cartesianValues: "cartesianValues", gridColor: "gridColor", gridWidth: "gridWidth", axesColor: "axesColor", axesWidth: "axesWidth", crosshairColor: "crosshairColor", crosshairWidth: "crosshairWidth", xAxisPointsCount: "xAxisPointsCount", yAxisPointsCount: "yAxisPointsCount", isCrosshairEnabled: "isCrosshairEnabled", yTopPaddingPercentage: "yTopPaddingPercentage", yBottomPaddingPercentage: "yBottomPaddingPercentage", xAxisLabelPrecision: "xAxisLabelPrecision", yAxisLabelPrecision: "yAxisLabelPrecision", xCrosshairLabelPrecision: "xCrosshairLabelPrecision", yCrosshairLabelPrecision: "yCrosshairLabelPrecision", pointRadius: "pointRadius", highlightZeroLine: "highlightZeroLine", zeroLineWidth: "zeroLineWidth", zeroLineColor: "zeroLineColor", zeroLineOpacity: "zeroLineOpacity", zeroLineDash: "zeroLineDash" }, viewQueries: [{ propertyName: "overlays", first: true, predicate: ["overlays"], descendants: true, static: true }, { propertyName: "canvas", first: true, predicate: ["canvas"], descendants: true, static: true }], usesOnChanges: true, ngImport: i0, template: "<div class=\"container\" [style.width.px]=\"this.canvasWidthPx\">\n  <canvas #canvas></canvas>\n  <app-legend [fontFamily]=\"fontFamily\" [cartesianValues]=\"cartesianValues\"></app-legend>\n  <div class=\"overlays\"\n    #overlays\n    [style.height.px]=\"this.canvasHeightPx\"\n    appPointerPosition\n    [area]=\"cache?.drawableRect\"\n    (position)=\"onCursorPositionChange($event)\">\n  </div>\n</div>\n", styles: [".container{position:relative}.container .overlays{position:absolute;top:0;left:0;bottom:0;width:100%}.container .overlays .dot{position:absolute;transform:translate(-50%,-50%);border-radius:50%;cursor:pointer}\n"], components: [{ type: LegendComponent, selector: "app-legend", inputs: ["cartesianValues", "fontFamily"] }], directives: [{ type: PointerPositionDirective, selector: "[appPointerPosition]", inputs: ["area"], outputs: ["position"] }] });
+CartesianGraphComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "12.2.4", type: CartesianGraphComponent, selector: "lib-rfx-cartesian-chart", inputs: { labelNoData: "labelNoData", labelLoading: "labelLoading", isLoading: "isLoading", fontFamily: "fontFamily", canvasWidthPx: "canvasWidthPx", canvasHeightPx: "canvasHeightPx", cartesianValues: "cartesianValues", gridColor: "gridColor", gridWidth: "gridWidth", axesColor: "axesColor", axesWidth: "axesWidth", crosshairColor: "crosshairColor", crosshairWidth: "crosshairWidth", xAxisPointsCount: "xAxisPointsCount", yAxisPointsCount: "yAxisPointsCount", isCrosshairEnabled: "isCrosshairEnabled", yTopPaddingPercentage: "yTopPaddingPercentage", yBottomPaddingPercentage: "yBottomPaddingPercentage", xAxisLabelPrecision: "xAxisLabelPrecision", yAxisLabelPrecision: "yAxisLabelPrecision", xCrosshairLabelPrecision: "xCrosshairLabelPrecision", yCrosshairLabelPrecision: "yCrosshairLabelPrecision", pointRadius: "pointRadius", highlightZeroLine: "highlightZeroLine", zeroLineWidth: "zeroLineWidth", zeroLineColor: "zeroLineColor", zeroLineOpacity: "zeroLineOpacity", zeroLineDash: "zeroLineDash" }, viewQueries: [{ propertyName: "overlays", first: true, predicate: ["overlays"], descendants: true, static: true }, { propertyName: "canvas", first: true, predicate: ["canvas"], descendants: true, static: true }], usesOnChanges: true, ngImport: i0, template: "<div class=\"container\" [style.width.px]=\"this.canvasWidthPx\">\n  <canvas #canvas [ngClass]=\"{ 'opacity': !cartesianValues?.length || isLoading }\"></canvas>\n  <app-legend [fontFamily]=\"fontFamily\" [cartesianValues]=\"cartesianValues\"></app-legend>\n  <div class=\"overlays\"\n    #overlays\n    [style.height.px]=\"this.canvasHeightPx\"\n    appPointerPosition\n    [area]=\"cache?.drawableRect\"\n    (position)=\"onCursorPositionChange($event)\">\n  </div>\n  <div class=\"overlay\" [style.height.px]=\"this.canvasHeightPx - 58\" *ngIf=\"!cartesianValues?.length && !isLoading\">\n    <div class=\"label\" [style.fontFamily]=\"fontFamily\">{{ labelNoData }}</div>\n  </div>\n  <div class=\"overlay\" [style.height.px]=\"this.canvasHeightPx - 58\" *ngIf=\"isLoading\">\n    <div class=\"label\" [style.fontFamily]=\"fontFamily\">{{ labelLoading }}</div>\n  </div>\n</div>\n", styles: [".container{position:relative}.container .opacity{opacity:.3}.container .overlays{position:absolute;top:0;left:0;width:100%}.container .overlays .dot{position:absolute;transform:translate(-50%,-50%);border-radius:50%;cursor:pointer}.container .overlay{position:absolute;left:0;top:19px;width:100%;display:flex;justify-content:center;align-items:center}.container .overlay .label{padding:10px 25px;border-radius:50px;color:#fff;background-color:#61615f;font-size:18px;box-shadow:0 1px 3px #0000001f,0 1px 2px #0000003d}\n"], components: [{ type: LegendComponent, selector: "app-legend", inputs: ["cartesianValues", "fontFamily"] }], directives: [{ type: i1.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { type: PointerPositionDirective, selector: "[appPointerPosition]", inputs: ["area"], outputs: ["position"] }, { type: i1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }] });
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.2.4", ngImport: i0, type: CartesianGraphComponent, decorators: [{
@@ -621,4 +634,10 @@ type: Component,
                 }]
-        }], ctorParameters: function () { return [{ type: i0.Renderer2 }]; }, propDecorators: { fontFamily: [{
+        }], ctorParameters: function () { return [{ type: i0.Renderer2 }]; }, propDecorators: { labelNoData: [{
                 type: Input
+            }], labelLoading: [{
+                type: Input
+            }], isLoading: [{
+                type: Input
+            }], fontFamily: [{
+                type: Input
             }], canvasWidthPx: [{
@@ -625,0 +644,0 @@ type: Input

lib/components/cartesian-graph/cartesian-graph.component.d.ts

@@ -6,2 +6,5 @@ import { ElementRef, OnChanges, OnInit, Renderer2 } from '@angular/core';
     private renderer;
+    labelNoData: string;
+    labelLoading: string;
+    isLoading: boolean;
     fontFamily: string;
@@ -81,3 +84,3 @@ canvasWidthPx: number;
     static ɵfac: i0.ɵɵFactoryDeclaration<CartesianGraphComponent, never>;
-    static ɵcmp: i0.ɵɵComponentDeclaration<CartesianGraphComponent, "lib-rfx-cartesian-chart", never, { "fontFamily": "fontFamily"; "canvasWidthPx": "canvasWidthPx"; "canvasHeightPx": "canvasHeightPx"; "cartesianValues": "cartesianValues"; "gridColor": "gridColor"; "gridWidth": "gridWidth"; "axesColor": "axesColor"; "axesWidth": "axesWidth"; "crosshairColor": "crosshairColor"; "crosshairWidth": "crosshairWidth"; "xAxisPointsCount": "xAxisPointsCount"; "yAxisPointsCount": "yAxisPointsCount"; "isCrosshairEnabled": "isCrosshairEnabled"; "yTopPaddingPercentage": "yTopPaddingPercentage"; "yBottomPaddingPercentage": "yBottomPaddingPercentage"; "xAxisLabelPrecision": "xAxisLabelPrecision"; "yAxisLabelPrecision": "yAxisLabelPrecision"; "xCrosshairLabelPrecision": "xCrosshairLabelPrecision"; "yCrosshairLabelPrecision": "yCrosshairLabelPrecision"; "pointRadius": "pointRadius"; "highlightZeroLine": "highlightZeroLine"; "zeroLineWidth": "zeroLineWidth"; "zeroLineColor": "zeroLineColor"; "zeroLineOpacity": "zeroLineOpacity"; "zeroLineDash": "zeroLineDash"; }, {}, never, never>;
+    static ɵcmp: i0.ɵɵComponentDeclaration<CartesianGraphComponent, "lib-rfx-cartesian-chart", never, { "labelNoData": "labelNoData"; "labelLoading": "labelLoading"; "isLoading": "isLoading"; "fontFamily": "fontFamily"; "canvasWidthPx": "canvasWidthPx"; "canvasHeightPx": "canvasHeightPx"; "cartesianValues": "cartesianValues"; "gridColor": "gridColor"; "gridWidth": "gridWidth"; "axesColor": "axesColor"; "axesWidth": "axesWidth"; "crosshairColor": "crosshairColor"; "crosshairWidth": "crosshairWidth"; "xAxisPointsCount": "xAxisPointsCount"; "yAxisPointsCount": "yAxisPointsCount"; "isCrosshairEnabled": "isCrosshairEnabled"; "yTopPaddingPercentage": "yTopPaddingPercentage"; "yBottomPaddingPercentage": "yBottomPaddingPercentage"; "xAxisLabelPrecision": "xAxisLabelPrecision"; "yAxisLabelPrecision": "yAxisLabelPrecision"; "xCrosshairLabelPrecision": "xCrosshairLabelPrecision"; "yCrosshairLabelPrecision": "yCrosshairLabelPrecision"; "pointRadius": "pointRadius"; "highlightZeroLine": "highlightZeroLine"; "zeroLineWidth": "zeroLineWidth"; "zeroLineColor": "zeroLineColor"; "zeroLineOpacity": "zeroLineOpacity"; "zeroLineDash": "zeroLineDash"; }, {}, never, never>;
 }

package.json

 {
   "name": "rfx-cartesian-chart",
-  "version": "0.1.1",
+  "version": "0.2.0",
   "peerDependencies": {
@@ -5,0 +5,0 @@ "@angular/common": "^8.0.0",

No alert changes

Improved metrics

Total package byte prevSize

401494

increased by2.65%

Lines of code

2898

increased by2.51%

No dependency changes