renamed folders, unit tests

README.md

@@ -30,16 +30,16 @@ npm run build
 | docs          | md documentation files      |  
 | public        | content-base for webpack dev server, contains some circliful examples      |    
 | src           | all code for the library      |    
-| styles        | scss styling files for circles      |    
-| tests         | unit and dom tests, coming soon...      |    
+| style        | scss styling files for circles      |    
+| test        | unit and dom tests, coming soon...      |    
 
 #### src folder ####
 
 | Folder        | Description | 
 | ------------- |-------------| 
-| base-classes  | basic classes to centralize main features | 
+| base-class  | basic classes to centralize main features | 
 | circle-type   | some default circles, you can add there your own      |  
-| helpers       | svg and object helper       |  
-| interfaces    | typescript interfaces for validation      |  
+| helper       | svg and object helper       |  
+| interface    | typescript interfaces for validation      |  
 
 

babel.config.js

@@ -0,0 +1,7 @@
+// for jest (unit testing)
+module.exports = {
+    presets: [
+        ["@babel/preset-env", {targets: {node: "current"}}],
+        "@babel/preset-typescript",
+    ],
+};

package.json

@@ -10,7 +10,9 @@
   "scripts": {
     "start:dev": "webpack-dev-server --config webpack.dev.config.js --content-base public/",
     "build": "webpack --config webpack.dev.config.js",
-    "lint": "tslint -c tslint.json -p tsconfig.json --fix"
+    "lint": "tslint -c tslint.json -p tsconfig.json --fix",
+    "test": "jest --collectCoverage",
+    "test:watch": "jest --watch"
   },
   "keywords": [
     "circliful",
@@ -34,6 +36,7 @@
     "@babel/core": "^7.9.0",
     "@babel/plugin-transform-modules-umd": "^7.9.0",
     "@babel/preset-env": "^7.9.0",
+    "@babel/preset-typescript": "^7.9.0",
     "@types/node": "^13.9.4",
     "babel-loader": "^8.1.0",
     "babel-plugin-syntax-async-functions": "^6.13.0",
@@ -43,6 +46,7 @@
     "es6-promise-promise": "^1.0.0",
     "events": "^3.1.0",
     "html-webpack-plugin": "^4.0.2",
+    "jest": "^25.2.7",
     "mini-css-extract-plugin": "^0.9.0",
     "node-sass": "^4.13.1",
     "optimize-css-assets-webpack-plugin": "^5.0.3",
@@ -56,5 +60,8 @@
     "webpack": "^4.42.0",
     "webpack-cli": "^3.3.11",
     "webpack-dev-server": "^3.10.3"
+  },
+  "dependencies": {
+    "@types/jest": "^25.2.1"
   }
 }

src/api.ts

@@ -1,6 +1,7 @@
-import Circle from "./base-classes/circle";
-import {IAvailableOptions} from "./interfaces/iavailable-options";
-import {IType} from "./interfaces/itype";
+import Circle from "./base-class/circle";
+import ObjectHelper from "./helper/object-helper";
+import {IAvailableOptions} from "./interface/iavailable-options";
+import {IType} from "./interface/itype";
 
 export class Api {
     public readonly options: IAvailableOptions;
@@ -9,6 +10,10 @@ export class Api {
         this.options = options;
     }
 
+    /**
+     * @description Update options and rerender circle
+     * @param parameter
+     */
     public update(parameter: IType | IType[]) {
         const element = document.getElementById(`svg-${this.options.id}`);
 
@@ -22,6 +27,11 @@ export class Api {
         Circle.initializeCircleType(this.options);
     }
 
+    /**
+     * @description Update options by given type
+     * @param type
+     * @param value
+     */
     private updateType(type: string, value: IType["value"]): void {
         switch (type) {
             case "percent":
@@ -70,9 +80,11 @@ export class Api {
         }
     }
 
-    public get(type: string): void {
-        if (this.options.hasOwnProperty(type)) {
-            return this.options[type];
-        }
+    /**
+     * @description Get property from object
+     * @param type
+     */
+    public get(type: string) {
+        return ObjectHelper.extractPropertyFromObject(this.options, type);
     }
 }

src/base-classes/base-circle.ts → src/base-class/base-circle.ts

@@ -1,7 +1,7 @@
-import {IAvailableOptions} from "../interfaces/iavailable-options";
-import {ISize} from "../interfaces/isize";
-import {ITag} from "../interfaces/itag";
-import {IViewBoxAttributes} from "../interfaces/iview-box-attributes";
+import {IAvailableOptions} from "../interface/iavailable-options";
+import {ISize} from "../interface/isize";
+import {ITag} from "../interface/itag";
+import {IViewBoxAttributes} from "../interface/iview-box-attributes";
 import SvgTags from "./svg-tags";
 
 /**
@@ -74,10 +74,10 @@ export abstract class BaseCircle {
      * @description Draws the svg tag
      * @param additionalAttributes
      */
-    public drawContainer(additionalAttributes?: object) {
-        const {minX, minY, width, height} = this.getViewBoxParams();
+    public drawContainer(additionalAttributes?: object) {console.log(additionalAttributes);
+                                                         const {minX, minY, width, height} = this.getViewBoxParams();
 
-        const container = SvgTags.addSvg({
+                                                         const container = SvgTags.addSvg({
             width: "100%",
             height: "100%",
             viewBox: `${minX} ${minY} ${width} ${height}`,
@@ -86,7 +86,7 @@ export abstract class BaseCircle {
             ...additionalAttributes,
         });
 
-        this.tags.push({
+                                                         this.tags.push({
             element: container,
             parentId: this.options.id,
         });

src/base-classes/circle-factory.ts → src/base-class/circle-factory.ts

@@ -4,23 +4,22 @@ import SimpleCircle from "../circle-type/simple-circle";
 import {BaseCircle} from "./base-circle";
 
 export class CircleFactory {
-    private circleClass: BaseCircle;
-
-    public create(type: string): BaseCircle {
+    public static create(type: string): BaseCircle {
+        let circleClass: BaseCircle;
         switch (type.toLowerCase()) {
             case "half":
-                this.circleClass = new HalfCircle();
+                circleClass = new HalfCircle();
                 break;
             case "plain":
-                this.circleClass = new PlainCircle();
+                circleClass = new PlainCircle();
                 break;
             case "simple":
-                this.circleClass = new SimpleCircle();
+                circleClass = new SimpleCircle();
                 break;
             default:
-                this.circleClass = new SimpleCircle();
+                circleClass = new SimpleCircle();
         }
 
-        return this.circleClass;
+        return circleClass;
     }
 }

src/base-classes/circle.ts → src/base-class/circle.ts

@@ -1,5 +1,5 @@
 import {Api} from "../api";
-import {IAvailableOptions} from "../interfaces/iavailable-options";
+import {IAvailableOptions} from "../interface/iavailable-options";
 import {CircleFactory} from "./circle-factory";
 import Options from "./options";
 
@@ -24,13 +24,13 @@ class Circle {
     /**
      * @description Initializes the circle by given type
      * @param options
+     * @param checkDataAttributes
      */
-    public static initializeCircleType(options: IAvailableOptions) {
+    public static initializeCircleType(options: IAvailableOptions, checkDataAttributes = false) {
         const size = Circle.getParentSize(options.id);
-        const circleFactory = new CircleFactory();
-        const circle = circleFactory.create(options.type);
+        const circle = CircleFactory.create(options.type);
         const optionsManager = new Options();
-        const mergedOptions = optionsManager.mergeOptions(options);
+        const mergedOptions = optionsManager.mergeOptions(options, checkDataAttributes);
 
         circle.initialize(mergedOptions, size);
         circle.drawCircle();
@@ -60,7 +60,7 @@ class Circle {
             percent: 1,
         };
 
-        Circle.initializeCircleType(options);
+        Circle.initializeCircleType(options, true);
 
         return new Api(options);
     }

src/base-classes/options.ts → src/base-class/options.ts

@@ -1,4 +1,4 @@
-import {IAvailableOptions} from "../interfaces/iavailable-options";
+import {IAvailableOptions} from "../interface/iavailable-options";
 
 class Options {
     /**
@@ -44,24 +44,20 @@ class Options {
         return dataOptions;
     }
 
-    /**
-     * @description Transforms option ex no-percentage-sign into noPercentageSign
-     * @param option
-     * @returns {string}
-     */
-    public static dashToCamelCase(option: string) {
-        return option.replace(/([A-Z])/g, (val) => `-${val.toLowerCase()}`);
-    }
-
     /**
      * @description Merge default options and custom option on initialisation
      * @param options
+     * @param checkDataAttributes
      * @returns Options['defaultOptions']
      */
-    public mergeOptions(options: IAvailableOptions) {
-        const dataOptions = Options.getDataAttributes(options);
+    public mergeOptions(options: IAvailableOptions, checkDataAttributes = false) {
+        let mergedOptions = {...this.defaultOptions, ...options};
+        if (checkDataAttributes) {
+            const dataOptions = Options.getDataAttributes(options);
+            mergedOptions = {...mergedOptions, ...dataOptions};
+        }
 
-        return {...this.defaultOptions, ...options, ...dataOptions};
+        return mergedOptions;
     }
 }
 

src/base-classes/svg-tags.ts → src/base-class/svg-tags.ts

@@ -1,7 +1,7 @@
-import ObjectHelper from "../helpers/object-helper";
-import SvgTagsHelper from "../helpers/svg-tags-helper";
-import {IAttributes} from "../interfaces/iattributes";
-import {IDictionary} from "../interfaces/idictionary";
+import ObjectHelper from "../helper/object-helper";
+import SvgTagsHelper from "../helper/svg-tags-helper";
+import {IAttributes} from "../interface/iattributes";
+import {IDictionary} from "../interface/idictionary";
 
 class SvgTags {
     public static namespaceURI = "http://www.w3.org/2000/svg";

src/circle-type/half-circle.ts

@@ -1,7 +1,7 @@
-import SvgTags from "../base-classes/svg-tags";
-import ObjectHelper from "../helpers/object-helper";
-import {StyleHelper} from "../helpers/style-helper";
-import SvgTagsHelper from "../helpers/svg-tags-helper";
+import SvgTags from "../base-class/svg-tags";
+import ObjectHelper from "../helper/object-helper";
+import {StyleHelper} from "../helper/style-helper";
+import SvgTagsHelper from "../helper/svg-tags-helper";
 import SimpleCircle from "./simple-circle";
 
 /**

src/circle-type/plain-circle.ts

@@ -1,10 +1,10 @@
-import {BaseCircle} from "../base-classes/base-circle";
-import SvgTags from "../base-classes/svg-tags";
-import ObjectHelper from "../helpers/object-helper";
-import {StyleHelper} from "../helpers/style-helper";
-import SvgTagsHelper from "../helpers/svg-tags-helper";
-import {IAvailableOptions} from "../interfaces/iavailable-options";
-import {ISize} from "../interfaces/isize";
+import {BaseCircle} from "../base-class/base-circle";
+import SvgTags from "../base-class/svg-tags";
+import ObjectHelper from "../helper/object-helper";
+import {StyleHelper} from "../helper/style-helper";
+import SvgTagsHelper from "../helper/svg-tags-helper";
+import {IAvailableOptions} from "../interface/iavailable-options";
+import {ISize} from "../interface/isize";
 
 /**
  * Every circle gets dynamically called by the given type in the options object example: { type: 'PlainCircle' }

src/circle-type/simple-circle.ts

@@ -1,11 +1,11 @@
-import {BaseCircle} from "../base-classes/base-circle";
-import SvgTags from "../base-classes/svg-tags";
-import ObjectHelper from "../helpers/object-helper";
-import {StyleHelper} from "../helpers/style-helper";
-import SvgTagsHelper from "../helpers/svg-tags-helper";
-import {IAttributes} from "../interfaces/iattributes";
-import {IAvailableOptions} from "../interfaces/iavailable-options";
-import {ISize} from "../interfaces/isize";
+import {BaseCircle} from "../base-class/base-circle";
+import SvgTags from "../base-class/svg-tags";
+import ObjectHelper from "../helper/object-helper";
+import {StyleHelper} from "../helper/style-helper";
+import SvgTagsHelper from "../helper/svg-tags-helper";
+import {IAttributes} from "../interface/iattributes";
+import {IAvailableOptions} from "../interface/iavailable-options";
+import {ISize} from "../interface/isize";
 
 /**
  * Every circle gets dynamically called by the given type in the options object

src/helpers/object-helper.ts → src/helper/object-helper.ts

@@ -1,8 +1,8 @@
-import {IDictionary} from "../interfaces/idictionary";
+import {IDictionary} from "../interface/idictionary";
 
 export default class ObjectHelper {
     public static extractPropertyFromObject(object: IDictionary, property: string) {
-        let value: string | number | object = "";
+        let value: string | object | number | boolean | [];
         if (object.hasOwnProperty(property) && object[property]) {
             value = object[property];
         }

src/helpers/style-helper.ts → src/helper/style-helper.ts

@@ -1,5 +1,5 @@
-import {ICalculationParams} from "../interfaces/icalculation-params";
-import {IProgressColor} from "../interfaces/iprogress-color";
+import {ICalculationParams} from "../interface/icalculation-params";
+import {IProgressColor} from "../interface/iprogress-color";
 import SvgTagsHelper from "./svg-tags-helper";
 
 export class StyleHelper {

src/helpers/svg-tags-helper.ts → src/helper/svg-tags-helper.ts

@@ -1,5 +1,5 @@
-import {IAttributes} from "../interfaces/iattributes";
-import {ICalculationParams} from "../interfaces/icalculation-params";
+import {IAttributes} from "../interface/iattributes";
+import {ICalculationParams} from "../interface/icalculation-params";
 
 class SvgTagsHelper {
     /**
@@ -43,8 +43,8 @@ class SvgTagsHelper {
         const angleInRadians = (angleInDegrees - 90) * Math.PI / 180.0;
 
         return {
-            x: centerX + (radius * Math.cos(angleInRadians)),
-            y: centerY + (radius * Math.sin(angleInRadians)),
+            x: centerX + Math.round(radius * Math.cos(angleInRadians) + Number.EPSILON),
+            y: centerY + Math.round(radius * Math.sin(angleInRadians) + Number.EPSILON),
         };
     }
 

src/index.ts

@@ -1,6 +1,6 @@
-import "../styles/main.scss";
-import Circle from "./base-classes/circle";
-import {IAvailableOptions} from "./interfaces/iavailable-options";
+import "../style/main.scss";
+import Circle from "./base-class/circle";
+import {IAvailableOptions} from "./interface/iavailable-options";
 
 /**
  * @description Gets called from html script tag

src/interface/idictionary.ts

@@ -0,0 +1,4 @@
+export interface IDictionary {
+    [key: string]: string | object | number | boolean | [];
+    [key: number]: string | object | number | boolean | [];
+}