From e886ee431f2511ba42776865ee48a82d4b602f24 Mon Sep 17 00:00:00 2001 From: Patric Gutersohn Date: Mon, 6 Apr 2020 22:29:54 +0200 Subject: [PATCH] documentation --- README.md | 63 ++++++++++++++++----------------- dist/circliful.js | 2 -- dist/main.css | 1 - docs/Style-Elements.md | 19 ---------- docs/StyleElements.md | 8 ----- docs/api.md | 45 ++++++++++++++++++++++++ docs/create-new-circle.md | 23 ++++++++++++ docs/dev-environment.md | 51 +++++++++++++++++++++++++++ docs/options.md | 66 +++++++++++++++++++++++++++++++++++ docs/style-elements.md | 39 +++++++++++++++++++++ public/index.html | 2 +- src/api.ts | 1 - src/base-class/base-circle.ts | 10 +++--- 13 files changed, 260 insertions(+), 70 deletions(-) delete mode 100644 dist/circliful.js delete mode 100644 dist/main.css delete mode 100644 docs/Style-Elements.md delete mode 100644 docs/StyleElements.md create mode 100644 docs/api.md create mode 100644 docs/create-new-circle.md create mode 100644 docs/dev-environment.md create mode 100644 docs/options.md create mode 100644 docs/style-elements.md diff --git a/README.md b/README.md index 8629cfe..781ad3f 100644 --- a/README.md +++ b/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 + + +
-### Build javascript files ### + + -~~~~ -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) diff --git a/dist/circliful.js b/dist/circliful.js deleted file mode 100644 index fa58e66..0000000 --- a/dist/circliful.js +++ /dev/null @@ -1,2 +0,0 @@ -var circliful=function(t){var e={};function i(r){if(e[r])return e[r].exports;var s=e[r]={i:r,l:!1,exports:{}};return t[r].call(s.exports,s,s.exports,i),s.l=!0,s.exports}return i.m=t,i.c=e,i.d=function(t,e,r){i.o(t,e)||Object.defineProperty(t,e,{enumerable:!0,get:r})},i.r=function(t){"undefined"!=typeof Symbol&&Symbol.toStringTag&&Object.defineProperty(t,Symbol.toStringTag,{value:"Module"}),Object.defineProperty(t,"__esModule",{value:!0})},i.t=function(t,e){if(1&e&&(t=i(t)),8&e)return t;if(4&e&&"object"==typeof t&&t&&t.__esModule)return t;var r=Object.create(null);if(i.r(r),Object.defineProperty(r,"default",{enumerable:!0,value:t}),2&e&&"string"!=typeof t)for(var s in t)i.d(r,s,function(e){return t[e]}.bind(null,s));return r},i.n=function(t){var e=t&&t.__esModule?function(){return t.default}:function(){return t};return i.d(e,"a",e),e},i.o=function(t,e){return Object.prototype.hasOwnProperty.call(t,e)},i.p="/dist/",i(i.s="./src/index.ts")}({"./src/api.ts":function(t,e,i){"use strict";i.r(e),i.d(e,"Api",(function(){return n}));var r=i("./src/base-class/circle.ts"),s=i("./src/helper/object-helper.ts"),n=function(){function t(t){this.options=t}return t.prototype.update=function(t){var e=this,i=document.getElementById("svg-"+this.options.id);Array.isArray(t)?t.forEach((function(t){return e.updateType(t.type,t.value)})):this.updateType(t.type,t.value),i.innerHTML="",r.default.initializeCircleType(this.options)},t.prototype.updateType=function(t,e){switch(t){case"percent":this.options.percent=Number(e);break;case"point":this.options.point=Boolean(e);break;case"animation":this.options.animation=Boolean(e);break;case"pointSize":this.options.pointSize=Number(e);break;case"animationStep":this.options.animationStep=Number(e);break;case"strokeGradient":this.options.strokeGradient=e;break;case"icon":this.options.icon=String(e);break;case"text":this.options.text=String(e);break;case"textReplacesPercentage":this.options.textReplacesPercentage=Boolean(e);break;case"foregroundCircleWidth":this.options.foregroundCircleWidth=Number(e);break;case"backgroundCircleWidth":this.options.backgroundCircleWidth=Number(e);break;case"additionalCssClasses":this.options.additionalCssClasses=e;break;case"progressColors":console.log("value",e),this.options.progressColors=e}},t.prototype.get=function(t){return s.default.extractPropertyFromObject(this.options,t)},t}()},"./src/base-class/base-circle.ts":function(t,e,i){"use strict";i.r(e),i.d(e,"BaseCircle",(function(){return n}));var r=i("./src/base-class/svg-tags.ts"),s=function(){return(s=Object.assign||function(t){for(var e,i=1,r=arguments.length;ie},t.prototype.drawContainer=function(t){console.log(t);var e=this.getViewBoxParams(),i=e.minX,n=e.minY,o=e.width,a=e.height,c=r.default.addSvg(s({width:"100%",height:"100%",viewBox:i+" "+n+" "+o+" "+a,id:"svg-"+this.options.id,preserveAspectRatio:"xMinYMin meet"},t));this.tags.push({element:c,parentId:this.options.id})},t.prototype.getViewBoxParams=function(){var t=this.options,e=t.foregroundCircleWidth,i=t.backgroundCircleWidth,r=i;e>i&&(r=e);var s=this.size.width,n=this.size.height;return(e>5||i>5)&&(s=this.size.width+1.5*r,n=this.size.height+1.5*r),{minX:0,minY:0,width:s,height:n}},t.prototype.append=function(){this.tags.forEach((function(t){document.getElementById(t.parentId).appendChild(t.element)}))},t.prototype.initialize=function(t,e){this.options=t,this.size=e},t}()},"./src/base-class/circle-factory.ts":function(t,e,i){"use strict";i.r(e),i.d(e,"CircleFactory",(function(){return o}));var r=i("./src/circle-type/half-circle.ts"),s=i("./src/circle-type/plain-circle.ts"),n=i("./src/circle-type/simple-circle.ts"),o=function(){function t(){}return t.create=function(t){var e;switch(t.toLowerCase()){case"half":e=new r.default;break;case"plain":e=new s.default;break;case"simple":e=new n.default;break;default:e=new n.default}return e},t}()},"./src/base-class/circle.ts":function(t,e,i){"use strict";i.r(e);var r=i("./src/api.ts"),s=i("./src/base-class/circle-factory.ts"),n=i("./src/base-class/options.ts"),o=function(){function t(){}return t.getParentSize=function(t){var e=document.getElementById(t),i=e.clientWidth>0?e.clientWidth:200,r=e.clientHeight>0?e.clientHeight:200;return{maxSize:i>r?r:i,height:r,width:i}},t.initializeCircleType=function(e,i){void 0===i&&(i=!1);var r=t.getParentSize(e.id),o=s.CircleFactory.create(e.type),a=(new n.default).mergeOptions(e,i);return o.initialize(a,r),o.drawCircle(),o},t.prototype.newCircle=function(e){return t.initializeCircleType(e),new r.Api(e)},t.prototype.newCircleWithDataSet=function(e,i){var s={id:e,type:i,percent:1};return t.initializeCircleType(s,!0),new r.Api(s)},t}();e.default=o},"./src/base-class/options.ts":function(t,e,i){"use strict";i.r(e);var r=function(){return(r=Object.assign||function(t){for(var e,i=1,r=arguments.length;i0,u=1,h=setInterval((function(e,s,a){var d=l/100*u;r.default.setAttributes(e,{d:r.default.describeArc(n.x,n.y,n.radius,c,d)}),p&&t.updateCircleColor(u,e,a),(u+=o)>s&&(clearInterval(h),"function"==typeof i&&i())}),d,s,n.percent,a)},t.updateCircleColor=function(t,e,i){var s=i.find((function(e){return e.percent===t}));s&&r.default.setAttributes(e,{style:"stroke: "+s.color})},t.getMilliseconds=function(t,e){var i=t||50;return e<=180&&(i/=3),i},t}()},"./src/helper/svg-tags-helper.ts":function(t,e,i){"use strict";i.r(e);var r=function(){function t(){}return t.setAttributes=function(t,e){for(var i=0,r=Object.entries(e);i + + + // javascript call + circliful.newCircleWithDataSet('circle', 'simple'); + +#### Set via config object #### + + // html tag +
+ + // 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 + diff --git a/docs/style-elements.md b/docs/style-elements.md new file mode 100644 index 0000000..0aeb23a --- /dev/null +++ b/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; + } diff --git a/public/index.html b/public/index.html index 6d6296d..6cd2e94 100644 --- a/public/index.html +++ b/public/index.html @@ -114,7 +114,7 @@ animateInView: true }); - console.log('get', circle7.get('percent')) + console.log('get', circle7.get('percent')); })(); diff --git a/src/api.ts b/src/api.ts index 1bc6104..5d20c53 100644 --- a/src/api.ts +++ b/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; diff --git a/src/base-class/base-circle.ts b/src/base-class/base-circle.ts index 1b7fa52..74286fc 100644 --- a/src/base-class/base-circle.ts +++ b/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, });