technology-chart - npm Package Compare versions

Comparing version 0.0.1 to 0.0.2

dist/chart/technology.d.ts

 import { EventEmitter } from "../core/event-emitter";
 import { Point } from "../objects/point";
+import { IVector } from "../types/position";
 import { TechnologyChartEvent } from "../utils/event";
@@ -31,2 +32,10 @@ /**
     /**
+     * Get size of content.
+     * Calculate with padding and spacement.
+     *
+     * @readonly
+     * @memberof TechnologyChart
+     */
+    get innerSize(): number;
+    /**
      * Size of the quadrant, in radians.
@@ -36,2 +45,11 @@ */
     /**
+     * Get max radius of quadrant.
+     * All space available.
+     */
+    get maxRadius(): number;
+    /**
+     * Origin of chart.
+     */
+    get origin(): IVector;
+    /**
      * Mark point in chart.
@@ -38,0 +56,0 @@ */

dist/index.min.js

@@ -1,3 +0,1 @@
-
-(function(l, r) { if (l.getElementById('livereloadscript')) return; r = l.createElement('script'); r.async = 1; r.src = '//' + (window.location.host || 'localhost').split(':')[0] + ':35729/livereload.js?snipver=1'; r.id = 'livereloadscript'; l.getElementsByTagName('head')[0].appendChild(r) })(window.document);
 (function (global, factory) {
@@ -10,14 +8,14 @@ typeof exports === 'object' && typeof module !== 'undefined' ? factory(exports) :
     /*! *****************************************************************************
-    Copyright (c) Microsoft Corporation.
+    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
 
-    Permission to use, copy, modify, and/or distribute this software for any
-    purpose with or without fee is hereby granted.
+    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.
 
-    THE SOFTWARE IS PROVIDED "AS IS" AND THE AUTHOR DISCLAIMS ALL WARRANTIES WITH
-    REGARD TO THIS SOFTWARE INCLUDING ALL IMPLIED WARRANTIES OF MERCHANTABILITY
-    AND FITNESS. IN NO EVENT SHALL THE AUTHOR BE LIABLE FOR ANY SPECIAL, DIRECT,
-    INDIRECT, OR CONSEQUENTIAL DAMAGES OR ANY DAMAGES WHATSOEVER RESULTING FROM
-    LOSS OF USE, DATA OR PROFITS, WHETHER IN AN ACTION OF CONTRACT, NEGLIGENCE OR
-    OTHER TORTIOUS ACTION, ARISING OUT OF OR IN CONNECTION WITH THE USE OR
-    PERFORMANCE OF THIS SOFTWARE.
+    See the Apache Version 2.0 License for specific language governing permissions
+    and limitations under the License.
     ***************************************************************************** */
@@ -203,11 +201,13 @@ /* global Reflect, Promise */
             if (!!this.background.match(/https?:\/{2}/)) {
-                var img_1 = new Image(25);
+                var img_1 = new Image();
                 img_1.src = this.background;
                 img_1.onload = function () {
-                    var x = _this._position.x - 12.5;
-                    var y = _this._position.y - 12.5;
+                    var width = img_1.naturalWidth;
+                    var height = img_1.naturalHeight;
+                    var x = _this._position.x - width / 2;
+                    var y = _this._position.y - height / 2;
                     context.save();
                     context.beginPath();
                     context.drawImage(img_1, x, y);
-                    _this.drawText(context);
+                    _this.drawText(context, true);
                     context.closePath();
@@ -232,8 +232,11 @@ context.restore();
          */
-        Point.prototype.drawText = function (context) {
+        Point.prototype.drawText = function (context, custom) {
+            if (custom === void 0) { custom = false; }
             context.save();
             context.beginPath();
             context.fillStyle = this._attrs.layout.textColor;
+            context.textAlign = "center";
+            context.textBaseline = "middle";
             context.font = "10pt sans-serif";
-            context.fillText(this._data.index.toString().padStart(2, "0"), this._position.x - 7, this._position.y + 5);
+            context.fillText(this._data.index.toString().padStart(2, "0"), this._position.x, custom ? this._position.y + 5 : this._position.y);
             context.closePath();
@@ -247,6 +250,6 @@ context.restore();
             if (retryCount === void 0) { retryCount = 50; }
-            var halfCanvasSize = this._attrs.size.canvas / 2;
+            var halfCanvasSize = this._attrs.position.origin.x;
             var angle = this._attrs.angle.start + Math.random() * (this._attrs.angle.end - this._attrs.angle.start);
             var initPoint = this._attrs.position.fromOrigin + this.size;
-            var ringVariation = (this._attrs.size.ring - this.size) * Math.random();
+            var ringVariation = (this._attrs.size.ring - this.size * 2) * Math.random();
             var distance = initPoint + ringVariation;
@@ -352,3 +355,3 @@ var xVar = this._attrs.position.spacement.x;
         __extends(RingLegend, _super);
-        function RingLegend(_label, _center, _radius, _ring, _startAngle, _mode) {
+        function RingLegend(_label, _center, _radius, _ring, _startAngle, _attrs, _mode) {
             if (_mode === void 0) { _mode = "linear"; }
@@ -361,2 +364,3 @@ var _this = _super.call(this) || this;
             _this._startAngle = _startAngle;
+            _this._attrs = _attrs;
             _this._mode = _mode;
@@ -398,4 +402,4 @@ return _this;
             context.save();
-            context.font = "9pt sans-serif";
-            context.fillStyle = "rgba(0, 0, 0, 0.8)";
+            context.font = this._attrs.layout.textSize + " sans-serif";
+            context.fillStyle = this._attrs.layout.textColor;
             context.beginPath();
@@ -569,3 +573,5 @@ var x = this._center.x;
             this._points = [];
-            this._legend = new RingLegend(this._attrs.label.ring, this.position, this._attrs.size.radius, this._attrs.size.ring, this.startAngle);
+            this._legend = new RingLegend(this._attrs.label.ring, this.position, this._attrs.size.radius, this._attrs.size.ring, this.startAngle, {
+                layout: this._attrs.layout.legend
+            });
             for (var _i = 0, _a = this._data; _i < _a.length; _i++) {
@@ -581,2 +587,3 @@ var item = _a[_i];
                         spacement: this.spacement,
+                        origin: this._attrs.position,
                     },
@@ -622,3 +629,3 @@ size: {
     function validateSetting(setting) {
-        var _a, _b, _c, _d, _e, _f, _g, _h, _j, _k, _l, _m, _o;
+        var _a, _b, _c, _d, _e, _f, _g, _h, _j, _k, _l, _m, _o, _p, _q, _r, _s, _t, _u;
         if (!Array.isArray(setting.quadrants) || setting.quadrants.length === 0) {
@@ -643,3 +650,3 @@ throw new Error("[Technology Chart] 'setting.quadrants' should exists and not be empty");
                 value: x.value,
-                index: i,
+                index: i + 1,
                 bg: x.bg,
@@ -662,2 +669,6 @@ highlightBg: x.highlightBg,
                 },
+                legend: {
+                    textColor: (_r = (_q = (_p = setting.layout) === null || _p === void 0 ? void 0 : _p.legend) === null || _q === void 0 ? void 0 : _q.textColor) !== null && _r !== void 0 ? _r : "#000",
+                    textSize: (_u = (_t = (_s = setting.layout) === null || _s === void 0 ? void 0 : _s.legend) === null || _t === void 0 ? void 0 : _t.textSize) !== null && _u !== void 0 ? _u : "11pt",
+                }
             }
@@ -724,2 +735,16 @@ };
         });
+        Object.defineProperty(TechnologyChart.prototype, "innerSize", {
+            /**
+             * Get size of content.
+             * Calculate with padding and spacement.
+             *
+             * @readonly
+             * @memberof TechnologyChart
+             */
+            get: function () {
+                return this.size - this._settings.layout.quadrantSpacement - this._settings.layout.padding * 2;
+            },
+            enumerable: false,
+            configurable: true
+        });
         Object.defineProperty(TechnologyChart.prototype, "quadrantSize", {
@@ -735,2 +760,35 @@ /**
         });
+        Object.defineProperty(TechnologyChart.prototype, "maxRadius", {
+            /**
+             * Get max radius of quadrant.
+             * All space available.
+             */
+            get: function () {
+                if (this.quadrantCount === 1) {
+                    return this.innerSize;
+                }
+                return this.innerSize / 2;
+            },
+            enumerable: false,
+            configurable: true
+        });
+        Object.defineProperty(TechnologyChart.prototype, "origin", {
+            /**
+             * Origin of chart.
+             */
+            get: function () {
+                if (this.quadrantCount === 1) {
+                    return {
+                        x: this._settings.layout.padding,
+                        y: this._settings.layout.padding,
+                    };
+                }
+                return {
+                    x: this.size / 2,
+                    y: this.size / 2,
+                };
+            },
+            enumerable: false,
+            configurable: true
+        });
         /**
@@ -800,4 +858,3 @@ * Mark point in chart.
             // The ring size is an PG, to calculate the rings item size the first item value is needed.
-            var ringTotalSize = (this.size - this._settings.layout.quadrantSpacement - this._settings.layout.padding * 2) / 2; // PG summation.
-            var firstRadius = calcFirstRingRadius(ringTotalSize, this.ringCount);
+            var firstRadius = calcFirstRingRadius(this.maxRadius, this.ringCount);
             // Populate objects.
@@ -834,10 +891,12 @@ this._settings.quadrants.forEach(function (quadrant, qI) {
                         textColor: this._settings.layout.point.textColor,
+                    },
+                    legend: {
+                        textColor: this._settings.layout.legend.textColor,
+                        textSize: this._settings.layout.legend.textSize
                     }
                 },
-                position: {
-                    x: this.size / 2,
-                    y: this.size / 2,
-                },
+                position: this.origin,
                 size: {
                     canvas: this.size,
+                    innerCanvas: this.innerSize,
                     ring: ringSize,
@@ -867,2 +926,7 @@ radius: radius,
             });
+            this._canvas.addEventListener("click", function () {
+                if (_this._currPointFocus != null) {
+                    _this.emit("pointclick", _this._currPointFocus);
+                }
+            });
             this._canvas.addEventListener("mousemove", function (e) {
@@ -881,2 +945,3 @@ var _a;
                         if (collideItem != null) {
+                            _this._canvas.style.cursor = "pointer";
                             if (((_a = _this._currPointFocus) === null || _a === void 0 ? void 0 : _a.index) !== collideItem.index) {
@@ -888,2 +953,5 @@ _this._currPointFocus = collideItem;
                         }
+                        else {
+                            _this._canvas.style.cursor = "default";
+                        }
                     }
@@ -890,0 +958,0 @@ }

dist/objects/base.d.ts

@@ -6,5 +6,5 @@ /**
     /**
-     * Draw de object.
+     * Drar de object.
      */
     abstract draw(context: CanvasRenderingContext2D, reset: boolean): void;
 }

dist/objects/point.d.ts

@@ -51,3 +51,3 @@ import { IPointAttributes } from "../types/point";
      */
-    drawText(context: CanvasRenderingContext2D): void;
+    drawText(context: CanvasRenderingContext2D, custom?: boolean): void;
     /**
@@ -54,0 +54,0 @@ * Prepare point position.

dist/objects/ring-legend.d.ts

@@ -0,1 +1,2 @@
+import { ILegendAttributes } from "../types/legend";
 import { IVector } from "../types/position";
@@ -12,4 +13,5 @@ import { BaseObject } from "./base";
     private _startAngle;
+    private _attrs;
     private _mode;
-    constructor(_label: string, _center: IVector, _radius: number, _ring: number, _startAngle: number, _mode?: "linear" | "circle");
+    constructor(_label: string, _center: IVector, _radius: number, _ring: number, _startAngle: number, _attrs: ILegendAttributes, _mode?: "linear" | "circle");
     get shouldRender(): boolean;
@@ -16,0 +18,0 @@ get leftQuarter(): boolean;

dist/types/point.d.ts

@@ -19,2 +19,3 @@ import { IVector } from "./position";
         spacement: IVector;
+        origin: IVector;
     };
@@ -21,0 +22,0 @@ validation: {

dist/types/quadrant-ring.d.ts

@@ -17,2 +17,3 @@ import { IVector } from "./position";
         canvas: number;
+        innerCanvas: number;
         quadrant: number;
@@ -30,3 +31,7 @@ ring: number;
         };
+        legend: {
+            textColor: string;
+            textSize: string;
+        };
     };
 }

dist/types/setting.d.ts

@@ -22,2 +22,6 @@ /**
     };
+    legend?: {
+        textColor?: string;
+        textSize?: string;
+    };
 }
@@ -24,0 +28,0 @@ /**

dist/utils/event.d.ts

@@ -1,1 +0,1 @@
-export declare type TechnologyChartEvent = "pointhoverin" | "pointhoverout";
+export declare type TechnologyChartEvent = "pointhoverin" | "pointhoverout" | "pointclick";

package.json

 {
     "name": "technology-chart",
-    "version": "0.0.1",
+    "version": "0.0.2",
     "description": "Vanilla library for create technology radar chart using canvas API",
@@ -12,3 +12,3 @@ "main": "dist/index.min.js",
     },
-    "author": "Matheus Bordin <[e-mail]>, Marcello Marques <[e-mail]>",
+    "author": "Matheus Bordin <[e-mail]>, Marcello Marques",
     "license": "ISC",
@@ -15,0 +15,0 @@ "files": [

README.md

@@ -61,3 +61,3 @@ # Technology Chart
 ##### Initialization
-You prepare de canvas and the configuration object, now we need pass they with argument of TechnologyChart.
+You prepare de canvas and de configuratio object, now we need pass they with argument of TechnologyChart.
 
@@ -64,0 +64,0 @@ ```javascript

New alerts

Mixed license

License

(Experimental) Package contains multiple licenses.

Found 1 instance in 1 package

Improved metrics

Total package byte prevSize

50388

increased by8.08%

Number of package files

21

increased by5%

Lines of code

1358

increased by8.73%

Worsened metrics

Number of low license alerts

1

increased byInfinity%

No dependency changes