documentation

README.md

@@ -1,45 +1,42 @@
-# README #
+# js-plugin-circliful #
 
 New implementation of circliful, without any dependencies - dependencies are only used for development.
 
-### Run dev environment ###
+* show Infos as Circle Statistics, no images used
+* based on SVG
+* many options can be set
+* fully responsive
 
-Install devDependencies
-~~~~
-npm install
-~~~~
+## How to use circliful
 
-Run webpack dev server
-~~~~
-npm run start:dev
-~~~~
+Include circliful to your Site via script tag or install it as npm module.
 
-In the console you should see something like: "Project is running at http://localhost:9090/" call the url in the browser.
+    //copy from dist folder
+    <link href="dist/main.css" rel="stylesheet" type="text/css" />
+
+    <div id="circle"></div>
 
-### Build javascript files ### 
+    <script src="dist/circliful.js"></script>
+    <script>
+        circliful.newCircle({
+            percent: 50,
+            id: 'circle',
+            type: 'simple',
+        });
+    </script>
 
-~~~~
-npm run build
-~~~~
+## Documentation
 
-### Project structure ###
+* [Api](./docs/api.md)
+* [Create custom circle](./docs/create-new-circle.md)
+* [Setup dev enviroment (with webpack)](./docs/dev-environment.md)
+* [List of available options](./docs/options.md)
+* [Style your cirles via css](./docs/style-elements.md)
 
-| Folder        | Description | 
-| ------------- |-------------| 
-| dist          | minified css and js version for implementing in script tag | 
-| docs          | md documentation files      |  
-| public        | content-base for webpack dev server, contains some circliful examples      |    
-| src           | all code for the library      |    
-| style        | scss styling files for circles      |    
-| test        | unit and dom tests, coming soon...      |    
-
-#### src folder ####
-
-| Folder        | Description | 
-| ------------- |-------------| 
-| base-class  | basic classes to centralize main features | 
-| circle-type   | some default circles, you can add there your own      |  
-| helper       | svg and object helper       |  
-| interface    | typescript interfaces for validation      |  
+If you feel there is something missing in the documentation or the library feel free to open a issue.
 
+Donation
+--------
+If you find this plugin useful or/and use it commercially feel free to donate me a cup of coffee :)
 
+[![](https://www.paypalobjects.com/en_US/i/btn/btn_donateCC_LG.gif)](https://www.paypal.com/cgi-bin/webscr?cmd=_s-xclick&hosted_button_id=D3F2MMNDHQ9KQ)

docs/api.md

@@ -0,0 +1,45 @@
+API
+===================
+
+#### Update circle values elsewhere in your javascript code at any time
+
+    // save the new instance into a variable
+    const circle = circliful.newCircle({
+        percent: 50,
+        id: 'circle3',
+        type: 'half',
+    });
+
+    // update multiple values at once
+    circle.update([
+        {type: 'percent', value: 30},
+        {type: 'animation', value: false}
+    ]);
+
+    // or
+
+    // update single value
+    circle.update({type: 'percent', value: 30});
+
+You can update the following values over the update function
+
+- percent
+- point
+- animation
+- pointSize
+- animationStep
+- strokeGradient
+- strokeGradient
+- icon
+- text
+- textReplacesPercentage
+- foregroundCircleWidth
+- backgroundCircleWidth
+- additionalCssClasses
+- progressColors
+
+#### Get values of your circle 
+
+You can get all available [Options](./options.md)
+
+    circle.get('percent');

docs/create-new-circle.md

@@ -0,0 +1,23 @@
+Available Options
+===================
+
+Create your own circle types 
+
+#### Create new class with your logic in /circle-type folder
+
+    // extend the abstact class and implement nessessary methods
+     class CustomCircle extends BaseCircle {}
+
+#### Add your new class to the circle factory 
+
+    case "custom":
+        circleClass = new CustomCircle();
+        break;
+
+#### Initialize your new circle 
+
+    circliful.newCircle({
+        percent: 50,
+        id: 'circle',
+        type: 'custom' // same as in the case above
+    });

docs/dev-environment.md

@@ -0,0 +1,51 @@
+### Run dev environment ###
+
+Install devDependencies
+~~~~
+npm install
+~~~~
+
+Run webpack dev server
+~~~~
+npm run start:dev
+~~~~
+
+In the console you should see something like: "Project is running at http://localhost:9090/" call the url in the browser.
+
+Run test
+~~~~
+npm run test
+// or
+npm run test:watch
+~~~~
+
+Run linting
+~~~~
+npm run lint
+~~~~
+
+### Build javascript and css files ### 
+
+~~~~
+npm run build
+~~~~
+
+### Project structure ###
+
+| Folder        | Description | 
+| ------------- |-------------| 
+| dist          | minified css and js version for implementing in script tag | 
+| docs          | md documentation files      |  
+| public        | content-base for webpack dev server, contains some circliful examples      |    
+| src           | all code for the library      |    
+| style        | scss styling files for circles      |    
+| test        | unit and dom tests, coming soon...      |    
+
+#### src folder ####
+
+| Folder        | Description | 
+| ------------- |-------------| 
+| base-class  | basic classes to centralize main features | 
+| circle-type   | some default circles, you can add there your own      |  
+| helper       | svg and object helper       |  
+| interface    | typescript interfaces for validation      |  

docs/options.md

@@ -0,0 +1,66 @@
+Available Options
+===================
+
+Options can be set via data attributes or config object
+
+If you want to set the values via data attributes you need to set the values via dash not camelcase for example data-no-percentage-sign not data-noPercentageSign
+
+#### Set via data attributes ####
+
+    // html tag
+    <div id="circle"
+         data-percent="90"
+         data-no-percentage-sign="true"
+         data-animation="false"
+         data-stroke-linecap="round">
+    </div>
+
+    // javascript call
+    circliful.newCircleWithDataSet('circle', 'simple');
+
+#### Set via config object ####
+
+    // html tag
+    <div id="circle"></div>
+
+    // javascript call
+    circliful.newCircle({
+        percent: 80,
+        id: 'circle',
+        type: 'simple',
+        icon: 'f179',
+        text: 'TP Wins',
+        noPercentageSign: true,
+        backgroundCircleWidth: 35,
+        foregroundCircleWidth: 20,
+        progressColors: [
+            {percent: 1, color: 'red'},
+            {percent: 30, color: 'orange'},
+            {percent: 60, color: 'green'}
+        ]
+    });
+
+#### Available options ####
+
+| name        | default           | type  | description
+| ------------- |------------- | ----- | ----- |
+| id      | / | string | id of the html tag
+| type      | "SimpleCircle" | string | circle type
+| additionalCssClasses      | / | object | on each element circle, text etc a custom css for styling can be set
+| point      | false | boolean | a point in within the circle 
+| pointSize      | 60 | number | the point size in px
+| percent      | 75 | number | the percentage of the circle
+| animation      | true | boolean | if set to true, the circle percentage fill will be animated
+| animationStep      | 1 | number | the animation speed
+| strokeGradient      | / | [string, string] | will give the foreground circle a gradient
+| icon      | / | string | font awesome icon definition for example 'f179', you need to integrate the font awesome library its not packed with circliful
+| text      | / | string | will be shown below the percentage text
+| textReplacesPercentage      | false | boolean | if set to true the text replaces the percentage
+| noPercentageSign      | / | boolean | if set to true the % sign will be removed
+| animateInView      | false | boolean | animates the circle as soon as its in the viewport
+| strokeLinecap      | "butt" | string | the endings of the foreground circle, can be set to "butt" or "round"
+| foregroundCircleWidth      | 5 | number | width of the foreground circle
+| backgroundCircleWidth     | 15 | number | width of the background circle
+| progressColors      | / | IProgressColor[] | the foreground circle changes the color if it comes above the given percentage colors for example [{percent: 50, color: "green"}]
+| onAnimationEnd      | / | function | event that will be triggered when animation of circle finished
+

docs/style-elements.md

@@ -0,0 +1,39 @@
+SVG style changes via CSS
+===================
+
+Change Position of Element
+
+The first argument is the x (horizontal) coordinate and the second argument is the y (vertical) coordinate.
+
+    transform: translate(0, 20px)
+
+Hover Effect
+
+    .circle-container:hover {
+      .background-circle {
+        fill: #ccc; //change background color
+      }
+
+      .foreground-circle {
+        stroke: blueviolet; //change stroke color
+        stroke-width: 8; // change stroke width
+      }
+    }
+
+Change Circle Color
+
+    .foreground-circle or .background-circle {
+        stroke: blueviolet;
+    }
+
+Change background color of Point
+
+    .point-circle {
+        fill: #999;
+    }
+
+Change width of circle
+
+    .foreground-circle or .background-circle {
+        stroke-width: 50px;
+    }

public/index.html

@@ -114,7 +114,7 @@
             animateInView: true
         });
 
-        console.log('get', circle7.get('percent'))
+        console.log('get', circle7.get('percent'));
     })();
 </script>
 </body>

src/api.ts

@@ -73,7 +73,6 @@ export class Api {
                 this.options.additionalCssClasses = value as any;
                 break;
             case "progressColors":
-                console.log("value", value);
                 // tslint:disable-next-line
                 this.options.progressColors = value as any;
                 break;

src/base-class/base-circle.ts

@@ -55,7 +55,7 @@ export abstract class BaseCircle {
         const scrollPositionTop = window.scrollY;
         const windowHeight = window.innerHeight;
 
-        return scrollPositionTop < offsetTop &&  scrollPositionTop + windowHeight > offsetTop;
+        return scrollPositionTop < offsetTop && scrollPositionTop + windowHeight > offsetTop;
     }
 
     /**
@@ -74,10 +74,10 @@ export abstract class BaseCircle {
      * @description Draws the svg tag
      * @param additionalAttributes
      */
-    public drawContainer(additionalAttributes?: object) {console.log(additionalAttributes);
-                                                         const {minX, minY, width, height} = this.getViewBoxParams();
+    public drawContainer(additionalAttributes?: object) {
+        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,
         });