vue-css-donut-chart - npm Package Compare versions

Comparing version 1.2.0 to 1.3.0

CHANGELOG.md

@@ -5,2 +5,11 @@ # Changelog
 
+## [1.3.0]
+
+### Added
+- `auto-adjust-text-size` prop is here! The prop can be set to `false` to disable the font size recalculation behavior.
+
+### Other changes
+
+- Demo page now has an option to test `auto-adjust-text-size` prop.
+
 ## [1.2.0]
@@ -7,0 +16,0 @@

dist/vcdonut.common.js

@@ -163,3 +163,3 @@ module.exports =
 
-// CONCATENATED MODULE: ./node_modules/cache-loader/dist/cjs.js?{"cacheDirectory":"node_modules/.cache/vue-loader","cacheIdentifier":"4a6d5b90-vue-loader-template"}!./node_modules/vue-loader/lib/loaders/templateLoader.js??vue-loader-options!./node_modules/cache-loader/dist/cjs.js??ref--0-0!./node_modules/vue-loader/lib??vue-loader-options!./src/components/Donut.vue?vue&type=template&id=fa8616c2&
+// CONCATENATED MODULE: ./node_modules/cache-loader/dist/cjs.js?{"cacheDirectory":"node_modules/.cache/vue-loader","cacheIdentifier":"43923ff6-vue-loader-template"}!./node_modules/vue-loader/lib/loaders/templateLoader.js??vue-loader-options!./node_modules/cache-loader/dist/cjs.js??ref--0-0!./node_modules/vue-loader/lib??vue-loader-options!./src/components/Donut.vue?vue&type=template&id=185716cb&
 var render = function () {var _vm=this;var _h=_vm.$createElement;var _c=_vm._self._c||_h;return _c('div',{staticClass:"cdc-container",style:(_vm.placementStyles.container)},[_c('div',{ref:"donut",staticClass:"cdc",style:(_vm.donutStyles)},[_c('donut-sections',_vm._g({attrs:{"sections":_vm.donutSections,"start-angle":_vm.startAngle}},_vm.sectionListeners)),_c('div',{staticClass:"cdc-overlay",style:(_vm.overlayStyles)},[_c('div',{staticClass:"cdc-text",style:(_vm.donutTextStyles)},[_vm._t("default",[_vm._v(_vm._s(_vm.text))])],2)])],1),_vm._t("legend",[(_vm.hasLegend)?_c('div',{staticClass:"cdc-legend",style:(_vm.placementStyles.legend)},_vm._l((_vm.legend),function(item,idx){return _c('span',{key:idx,staticClass:"cdc-legend-item",attrs:{"title":item.percent}},[_c('span',{staticClass:"cdc-legend-item-color",style:(item.styles)}),_c('span',[_vm._v(_vm._s(item.label))])])}),0):_vm._e()])],2)}
@@ -169,3 +169,3 @@ var staticRenderFns = []
 
-// CONCATENATED MODULE: ./src/components/Donut.vue?vue&type=template&id=fa8616c2&
+// CONCATENATED MODULE: ./src/components/Donut.vue?vue&type=template&id=185716cb&
 
@@ -251,3 +251,3 @@ // CONCATENATED MODULE: ./src/utils/events.js
 }
-// CONCATENATED MODULE: ./node_modules/cache-loader/dist/cjs.js?{"cacheDirectory":"node_modules/.cache/vue-loader","cacheIdentifier":"4a6d5b90-vue-loader-template"}!./node_modules/vue-loader/lib/loaders/templateLoader.js??vue-loader-options!./node_modules/cache-loader/dist/cjs.js??ref--0-0!./node_modules/vue-loader/lib??vue-loader-options!./src/components/DonutSections.vue?vue&type=template&id=cafc83a2&
+// CONCATENATED MODULE: ./node_modules/cache-loader/dist/cjs.js?{"cacheDirectory":"node_modules/.cache/vue-loader","cacheIdentifier":"43923ff6-vue-loader-template"}!./node_modules/vue-loader/lib/loaders/templateLoader.js??vue-loader-options!./node_modules/cache-loader/dist/cjs.js??ref--0-0!./node_modules/vue-loader/lib??vue-loader-options!./src/components/DonutSections.vue?vue&type=template&id=cafc83a2&
 var DonutSectionsvue_type_template_id_cafc83a2_render = function () {var _vm=this;var _h=_vm.$createElement;var _c=_vm._self._c||_h;return _c('div',{staticClass:"cdc-sections",style:(_vm.containerStyles)},_vm._l((_vm.donutSections),function(section,idx){return _c('div',_vm._g({key:idx,staticClass:"cdc-section",class:section.className,style:(section.sectionStyles)},section.listeners),[_c('div',{staticClass:"cdc-filler",style:(section.fillerStyles),attrs:{"title":section.label}})])}),0)}
@@ -536,2 +536,6 @@ var DonutSectionsvue_type_template_id_cafc83a2_staticRenderFns = []
     },
+    autoAdjustTextSize: {
+      type: Boolean,
+      default: true
+    },
     // color to use for the middle of the donut
@@ -589,2 +593,6 @@ // set this to `transparent` or `thickness` to 100 to make a pie chart instead
   watch: {
+    autoAdjustTextSize: function autoAdjustTextSize(val) {
+      if (val) window.addEventListener('resize', this.resizeListener);else window.removeEventListener('resize', this.resizeListener);
+      this.recalcFontSize();
+    },
     size: function size() {
@@ -732,2 +740,7 @@ this.recalcFontSize();
 
+      if (!this.autoAdjustTextSize) {
+        this.fontSize = '1em';
+        return;
+      }
+
       var scaleDownBy = 0.08;
@@ -752,7 +765,12 @@ var widthInPx = this.size;
   },
+  created: function created() {
+    this.resizeListener = this.recalcFontSize.bind(this);
+  },
   mounted: function mounted() {
     this.donutEl = this.$refs.donut;
-    this.recalcFontSize();
-    this.resizeListener = this.recalcFontSize.bind(this);
-    window.addEventListener('resize', this.resizeListener);
+
+    if (this.autoAdjustTextSize) {
+      this.recalcFontSize();
+      window.addEventListener('resize', this.resizeListener);
+    }
   },
@@ -759,0 +777,0 @@ beforeDestroy: function beforeDestroy() {

dist/vcdonut.umd.js

@@ -172,3 +172,3 @@ (function webpackUniversalModuleDefinition(root, factory) {
 
-// CONCATENATED MODULE: ./node_modules/cache-loader/dist/cjs.js?{"cacheDirectory":"node_modules/.cache/vue-loader","cacheIdentifier":"4a6d5b90-vue-loader-template"}!./node_modules/vue-loader/lib/loaders/templateLoader.js??vue-loader-options!./node_modules/cache-loader/dist/cjs.js??ref--0-0!./node_modules/vue-loader/lib??vue-loader-options!./src/components/Donut.vue?vue&type=template&id=fa8616c2&
+// CONCATENATED MODULE: ./node_modules/cache-loader/dist/cjs.js?{"cacheDirectory":"node_modules/.cache/vue-loader","cacheIdentifier":"43923ff6-vue-loader-template"}!./node_modules/vue-loader/lib/loaders/templateLoader.js??vue-loader-options!./node_modules/cache-loader/dist/cjs.js??ref--0-0!./node_modules/vue-loader/lib??vue-loader-options!./src/components/Donut.vue?vue&type=template&id=185716cb&
 var render = function () {var _vm=this;var _h=_vm.$createElement;var _c=_vm._self._c||_h;return _c('div',{staticClass:"cdc-container",style:(_vm.placementStyles.container)},[_c('div',{ref:"donut",staticClass:"cdc",style:(_vm.donutStyles)},[_c('donut-sections',_vm._g({attrs:{"sections":_vm.donutSections,"start-angle":_vm.startAngle}},_vm.sectionListeners)),_c('div',{staticClass:"cdc-overlay",style:(_vm.overlayStyles)},[_c('div',{staticClass:"cdc-text",style:(_vm.donutTextStyles)},[_vm._t("default",[_vm._v(_vm._s(_vm.text))])],2)])],1),_vm._t("legend",[(_vm.hasLegend)?_c('div',{staticClass:"cdc-legend",style:(_vm.placementStyles.legend)},_vm._l((_vm.legend),function(item,idx){return _c('span',{key:idx,staticClass:"cdc-legend-item",attrs:{"title":item.percent}},[_c('span',{staticClass:"cdc-legend-item-color",style:(item.styles)}),_c('span',[_vm._v(_vm._s(item.label))])])}),0):_vm._e()])],2)}
@@ -178,3 +178,3 @@ var staticRenderFns = []
 
-// CONCATENATED MODULE: ./src/components/Donut.vue?vue&type=template&id=fa8616c2&
+// CONCATENATED MODULE: ./src/components/Donut.vue?vue&type=template&id=185716cb&
 
@@ -260,3 +260,3 @@ // CONCATENATED MODULE: ./src/utils/events.js
 }
-// CONCATENATED MODULE: ./node_modules/cache-loader/dist/cjs.js?{"cacheDirectory":"node_modules/.cache/vue-loader","cacheIdentifier":"4a6d5b90-vue-loader-template"}!./node_modules/vue-loader/lib/loaders/templateLoader.js??vue-loader-options!./node_modules/cache-loader/dist/cjs.js??ref--0-0!./node_modules/vue-loader/lib??vue-loader-options!./src/components/DonutSections.vue?vue&type=template&id=cafc83a2&
+// CONCATENATED MODULE: ./node_modules/cache-loader/dist/cjs.js?{"cacheDirectory":"node_modules/.cache/vue-loader","cacheIdentifier":"43923ff6-vue-loader-template"}!./node_modules/vue-loader/lib/loaders/templateLoader.js??vue-loader-options!./node_modules/cache-loader/dist/cjs.js??ref--0-0!./node_modules/vue-loader/lib??vue-loader-options!./src/components/DonutSections.vue?vue&type=template&id=cafc83a2&
 var DonutSectionsvue_type_template_id_cafc83a2_render = function () {var _vm=this;var _h=_vm.$createElement;var _c=_vm._self._c||_h;return _c('div',{staticClass:"cdc-sections",style:(_vm.containerStyles)},_vm._l((_vm.donutSections),function(section,idx){return _c('div',_vm._g({key:idx,staticClass:"cdc-section",class:section.className,style:(section.sectionStyles)},section.listeners),[_c('div',{staticClass:"cdc-filler",style:(section.fillerStyles),attrs:{"title":section.label}})])}),0)}
@@ -545,2 +545,6 @@ var DonutSectionsvue_type_template_id_cafc83a2_staticRenderFns = []
     },
+    autoAdjustTextSize: {
+      type: Boolean,
+      default: true
+    },
     // color to use for the middle of the donut
@@ -598,2 +602,6 @@ // set this to `transparent` or `thickness` to 100 to make a pie chart instead
   watch: {
+    autoAdjustTextSize: function autoAdjustTextSize(val) {
+      if (val) window.addEventListener('resize', this.resizeListener);else window.removeEventListener('resize', this.resizeListener);
+      this.recalcFontSize();
+    },
     size: function size() {
@@ -741,2 +749,7 @@ this.recalcFontSize();
 
+      if (!this.autoAdjustTextSize) {
+        this.fontSize = '1em';
+        return;
+      }
+
       var scaleDownBy = 0.08;
@@ -761,7 +774,12 @@ var widthInPx = this.size;
   },
+  created: function created() {
+    this.resizeListener = this.recalcFontSize.bind(this);
+  },
   mounted: function mounted() {
     this.donutEl = this.$refs.donut;
-    this.recalcFontSize();
-    this.resizeListener = this.recalcFontSize.bind(this);
-    window.addEventListener('resize', this.resizeListener);
+
+    if (this.autoAdjustTextSize) {
+      this.recalcFontSize();
+      window.addEventListener('resize', this.resizeListener);
+    }
   },
@@ -768,0 +786,0 @@ beforeDestroy: function beforeDestroy() {

dist/vcdonut.umd.min.js

@@ -1,1 +0,1 @@
-(function(e,t){"object"===typeof exports&&"object"===typeof module?module.exports=t():"function"===typeof define&&define.amd?define([],t):"object"===typeof exports?exports["vcdonut"]=t():e["vcdonut"]=t()})("undefined"!==typeof self?self:this,function(){return function(e){var t={};function n(r){if(t[r])return t[r].exports;var o=t[r]={i:r,l:!1,exports:{}};return e[r].call(o.exports,o,o.exports,n),o.l=!0,o.exports}return n.m=e,n.c=t,n.d=function(e,t,r){n.o(e,t)||Object.defineProperty(e,t,{enumerable:!0,get:r})},n.r=function(e){"undefined"!==typeof Symbol&&Symbol.toStringTag&&Object.defineProperty(e,Symbol.toStringTag,{value:"Module"}),Object.defineProperty(e,"__esModule",{value:!0})},n.t=function(e,t){if(1&t&&(e=n(e)),8&t)return e;if(4&t&&"object"===typeof e&&e&&e.__esModule)return e;var r=Object.create(null);if(n.r(r),Object.defineProperty(r,"default",{enumerable:!0,value:e}),2&t&&"string"!=typeof e)for(var o in e)n.d(r,o,function(t){return e[t]}.bind(null,o));return r},n.n=function(e){var t=e&&e.__esModule?function(){return e["default"]}:function(){return e};return n.d(t,"a",t),t},n.o=function(e,t){return Object.prototype.hasOwnProperty.call(e,t)},n.p="",n(n.s="fb15")}({"7e79":function(e,t,n){},f6fd:function(e,t){(function(e){var t="currentScript",n=e.getElementsByTagName("script");t in e||Object.defineProperty(e,t,{get:function(){try{throw new Error}catch(r){var e,t=(/.*at [^\(]*\((.*):.+:.+\)$/gi.exec(r.stack)||[!1])[1];for(e in n)if(n[e].src==t||"interactive"==n[e].readyState)return n[e];return null}}})})(document)},fb15:function(e,t,n){"use strict";var r;(n.r(t),"undefined"!==typeof window)&&(n("f6fd"),(r=window.document.currentScript)&&(r=r.src.match(/(.+\/)[^\/]+\.js(\?.*)?$/))&&(n.p=r[1]));var o,i=function(){var e=this,t=e.$createElement,n=e._self._c||t;return n("div",{staticClass:"cdc-container",style:e.placementStyles.container},[n("div",{ref:"donut",staticClass:"cdc",style:e.donutStyles},[n("donut-sections",e._g({attrs:{sections:e.donutSections,"start-angle":e.startAngle}},e.sectionListeners)),n("div",{staticClass:"cdc-overlay",style:e.overlayStyles},[n("div",{staticClass:"cdc-text",style:e.donutTextStyles},[e._t("default",[e._v(e._s(e.text))])],2)])],1),e._t("legend",[e.hasLegend?n("div",{staticClass:"cdc-legend",style:e.placementStyles.legend},e._l(e.legend,function(t,r){return n("span",{key:r,staticClass:"cdc-legend-item",attrs:{title:t.percent}},[n("span",{staticClass:"cdc-legend-item-color",style:t.styles}),n("span",[e._v(e._s(t.label))])])}),0):e._e()])],2)},c=[],a=["click","mouseenter","mouseleave","mouseover","mouseout","mousemove"].map(function(e){return{nativeEventName:e,sectionEventName:"section-".concat(e)}}),u=["#FF6384","#36A2EB","#FFCE56","#F58231","#46F0F0","#D2F53C","#911EB4","#F032E6","#3CB44B","#FFE119","#E6194B","#FABEBE","#008080","#E6BEFF","#0082C8","#AA6E28","#FFFAC8","#800000","#AAFFC3","#808000","#FFD8B1","#000080","#808080","#000000"],s=u;function l(e){return l="function"===typeof Symbol&&"symbol"===typeof Symbol.iterator?function(e){return typeof e}:function(e){return e&&"function"===typeof Symbol&&e.constructor===Symbol&&e!==Symbol.prototype?"symbol":typeof e},l(e)}function f(e,t,n){return t in e?Object.defineProperty(e,t,{value:n,enumerable:!0,configurable:!0,writable:!0}):e[t]=n,e}var d="1em",p="dodgerblue",y={TOP:"top",RIGHT:"right",BOTTOM:"bottom",LEFT:"left"},v=(o={},f(o,y.TOP,{container:{flexDirection:"column"},legend:{order:-1,margin:0,marginBottom:d}}),f(o,y.RIGHT,{container:{},legend:{flexDirection:"column",margin:0,marginLeft:d}}),f(o,y.BOTTOM,{container:{flexDirection:"column"},legend:{}}),f(o,y.LEFT,{container:{},legend:{flexDirection:"column",order:-1,margin:0,marginRight:d}}),o),m=function(e){return!!e&&e.constructor===Object},g=[{type:"number",key:"value",required:!0},{key:"label"},{key:"color"}];function h(e){return!!m(e)&&g.reduce(function(t,n){if(!t)return!1;var r=!0;return n.required&&(r=r&&Object.hasOwnProperty.call(e,n.key)),n.type&&(r=r&&l(e[n.key])===n.type),t&&r},!0)}var b=function(){var e=this,t=e.$createElement,n=e._self._c||t;return n("div",{staticClass:"cdc-sections",style:e.containerStyles},e._l(e.donutSections,function(t,r){return n("div",e._g({key:r,staticClass:"cdc-section",class:t.className,style:t.sectionStyles},t.listeners),[n("div",{staticClass:"cdc-filler",style:t.fillerStyles,attrs:{title:t.label}})])}),0)},S=[];function E(e){for(var t=1;t<arguments.length;t++){var n=null!=arguments[t]?arguments[t]:{},r=Object.keys(n);"function"===typeof Object.getOwnPropertySymbols&&(r=r.concat(Object.getOwnPropertySymbols(n).filter(function(e){return Object.getOwnPropertyDescriptor(n,e).enumerable}))),r.forEach(function(t){_(e,t,n[t])})}return e}function _(e,t,n){return t in e?Object.defineProperty(e,t,{value:n,enumerable:!0,configurable:!0,writable:!0}):e[t]=n,e}var O={LEFT:"cdc-section-left",RIGHT:"cdc-section-right"},F={props:{startAngle:{type:Number,default:0},sections:{type:Array,default:function(){return[]}}},computed:{containerStyles:function(){return{transform:"rotate(".concat(this.startAngle,"deg)")}},donutSections:function(){var e=this,t=180,n=0,r=0,o=this.sections.map(function(o){var i=[O.RIGHT,-180],c=i[0],u=i[1];if(n>=t){var s=[O.LEFT,180];c=s[0],u=s[1]}var l=u+o.degree,f={backgroundColor:o.color||p,transform:"rotate(".concat(l,"deg)")},d={transform:"rotate(".concat(r,"deg)")};n+=o.degree,180===n?r=0:r+=o.degree;var y=a.reduce(function(t,n){var r=n.nativeEventName,i=n.sectionEventName;return E({},t,_({},r,function(t){return e.emitEvent(i,o,t)}))},{});return{label:o.label,className:c,fillerStyles:f,sectionStyles:d,listeners:y}});return o}},methods:{emitEvent:function(e,t,n){0!==t.value&&this.$emit(e,t.$section,n)}}},x=F;function w(e,t,n,r,o,i,c,a){var u,s="function"===typeof e?e.options:e;if(t&&(s.render=t,s.staticRenderFns=n,s._compiled=!0),r&&(s.functional=!0),i&&(s._scopeId="data-v-"+i),c?(u=function(e){e=e||this.$vnode&&this.$vnode.ssrContext||this.parent&&this.parent.$vnode&&this.parent.$vnode.ssrContext,e||"undefined"===typeof __VUE_SSR_CONTEXT__||(e=__VUE_SSR_CONTEXT__),o&&o.call(this,e),e&&e._registeredComponents&&e._registeredComponents.add(c)},s._ssrRegister=u):o&&(u=a?function(){o.call(this,this.$root.$options.shadowRoot)}:o),u)if(s.functional){s._injectStyles=u;var l=s.render;s.render=function(e,t){return u.call(t),l(e,t)}}else{var f=s.beforeCreate;s.beforeCreate=f?[].concat(f,u):[u]}return{exports:e,options:s}}var C=w(x,b,S,!1,null,null,null),j=C.exports;n("7e79");function T(e){for(var t=1;t<arguments.length;t++){var n=null!=arguments[t]?arguments[t]:{},r=Object.keys(n);"function"===typeof Object.getOwnPropertySymbols&&(r=r.concat(Object.getOwnPropertySymbols(n).filter(function(e){return Object.getOwnPropertyDescriptor(n,e).enumerable}))),r.forEach(function(t){k(e,t,n[t])})}return e}function k(e,t,n){return t in e?Object.defineProperty(e,t,{value:n,enumerable:!0,configurable:!0,writable:!0}):e[t]=n,e}var P={name:"vc-donut",props:{size:{type:Number,default:250,validator:function(e){return e>0}},unit:{type:String,default:"px"},thickness:{type:Number,default:20,validator:function(e){return e>=0&&e<=100}},text:{type:String,default:null},background:{type:String,default:"#ffffff"},foreground:{type:String,default:"#eeeeee"},sections:{type:Array,default:function(){return[]},validator:function(e){for(var t=0;t<e.length;++t)if(!h(e[t]))return!1;return!0}},total:{type:Number,default:100,validator:function(e){return e>0}},hasLegend:{type:Boolean,default:!1},legendPlacement:{type:String,default:y.BOTTOM,validator:function(e){return!!y[e.toUpperCase()]}},startAngle:{type:Number,default:0}},watch:{size:function(){this.recalcFontSize()},unit:function(){this.recalcFontSize()}},data:function(){return{donutEl:null,fontSize:"1em",resizeListener:null}},computed:{donutSections:function(){var e=this,t=this.sections.reduce(function(e,t){return e+t.value},0);if("number"!==typeof t)return[];if(t=Number(t.toFixed(2)),t>this.total){var n="Sum of all the sections' values (".concat(t,") should not exceed `total` (").concat(this.total,")");throw new Error(n)}var r=360,o=180,i=0,c=0,a=[];return this.sections.forEach(function(t){var n=r*(t.value/e.total),u=[n];n>o&&(u=[o,n-o]);var l=t.color||s[c++];u.forEach(function(e){var n=Number((i+e).toFixed(2));if(n>o){var r=o-i;a.push(T({},t,{degree:r,color:l,$section:t}),T({},t,{degree:e-r,color:l,$section:t}))}else a.push(T({},t,{degree:e,color:l,$section:t}));i+=e,i>=o&&(i-=o)})}),a},legend:function(){var e=this;if(!this.hasLegend)return null;var t=0;return this.sections.map(function(n,r){return{label:n.label||"Section ".concat(r+1),percent:"".concat(n.value," (").concat(n.value/e.total*100,"%)"),styles:{backgroundColor:n.color||s[t++]}}})},placementStyles:function(){return this.hasLegend?v[this.legendPlacement]:{}},donutStyles:function(){var e="".concat(this.size).concat(this.unit),t={width:e,paddingBottom:e,backgroundColor:this.foreground};return t},overlayStyles:function(){var e=100,t=e-this.thickness,n="".concat(t,"%"),r="calc(50% - ".concat(t/2,"%)");return{height:n,width:n,top:r,left:r,backgroundColor:this.background}},donutTextStyles:function(){var e=this.fontSize;return{fontSize:e}},sectionListeners:function(){var e=this;return a.reduce(function(t,n){var r=n.sectionEventName;return T({},t,k({},r,function(){for(var t=arguments.length,n=new Array(t),o=0;o<t;o++)n[o]=arguments[o];return e.emitSectionEvent.apply(e,[r].concat(n))}))},{})}},methods:{recalcFontSize:function(){var e=this,t=.08,n=this.size;this.$nextTick(function(){"px"!==e.unit&&(n=e.donutEl?e.donutEl.clientWidth:null),e.fontSize=n?"".concat((n*t).toFixed(2),"px"):"1em"})},emitSectionEvent:function(e){for(var t=arguments.length,n=new Array(t>1?t-1:0),r=1;r<t;r++)n[r-1]=arguments[r];this.$emit.apply(this,[e].concat(n))}},mounted:function(){this.donutEl=this.$refs.donut,this.recalcFontSize(),this.resizeListener=this.recalcFontSize.bind(this),window.addEventListener("resize",this.resizeListener)},beforeDestroy:function(){window.removeEventListener("resize",this.resizeListener)},components:{DonutSections:j}},z=P,$=w(z,i,c,!1,null,null,null),L=$.exports,N={install:function(e){e.component(L.name,L)}},B=N;t["default"]=B}})});
+(function(e,t){"object"===typeof exports&&"object"===typeof module?module.exports=t():"function"===typeof define&&define.amd?define([],t):"object"===typeof exports?exports["vcdonut"]=t():e["vcdonut"]=t()})("undefined"!==typeof self?self:this,function(){return function(e){var t={};function n(r){if(t[r])return t[r].exports;var o=t[r]={i:r,l:!1,exports:{}};return e[r].call(o.exports,o,o.exports,n),o.l=!0,o.exports}return n.m=e,n.c=t,n.d=function(e,t,r){n.o(e,t)||Object.defineProperty(e,t,{enumerable:!0,get:r})},n.r=function(e){"undefined"!==typeof Symbol&&Symbol.toStringTag&&Object.defineProperty(e,Symbol.toStringTag,{value:"Module"}),Object.defineProperty(e,"__esModule",{value:!0})},n.t=function(e,t){if(1&t&&(e=n(e)),8&t)return e;if(4&t&&"object"===typeof e&&e&&e.__esModule)return e;var r=Object.create(null);if(n.r(r),Object.defineProperty(r,"default",{enumerable:!0,value:e}),2&t&&"string"!=typeof e)for(var o in e)n.d(r,o,function(t){return e[t]}.bind(null,o));return r},n.n=function(e){var t=e&&e.__esModule?function(){return e["default"]}:function(){return e};return n.d(t,"a",t),t},n.o=function(e,t){return Object.prototype.hasOwnProperty.call(e,t)},n.p="",n(n.s="fb15")}({"7e79":function(e,t,n){},f6fd:function(e,t){(function(e){var t="currentScript",n=e.getElementsByTagName("script");t in e||Object.defineProperty(e,t,{get:function(){try{throw new Error}catch(r){var e,t=(/.*at [^\(]*\((.*):.+:.+\)$/gi.exec(r.stack)||[!1])[1];for(e in n)if(n[e].src==t||"interactive"==n[e].readyState)return n[e];return null}}})})(document)},fb15:function(e,t,n){"use strict";var r;(n.r(t),"undefined"!==typeof window)&&(n("f6fd"),(r=window.document.currentScript)&&(r=r.src.match(/(.+\/)[^\/]+\.js(\?.*)?$/))&&(n.p=r[1]));var o,i=function(){var e=this,t=e.$createElement,n=e._self._c||t;return n("div",{staticClass:"cdc-container",style:e.placementStyles.container},[n("div",{ref:"donut",staticClass:"cdc",style:e.donutStyles},[n("donut-sections",e._g({attrs:{sections:e.donutSections,"start-angle":e.startAngle}},e.sectionListeners)),n("div",{staticClass:"cdc-overlay",style:e.overlayStyles},[n("div",{staticClass:"cdc-text",style:e.donutTextStyles},[e._t("default",[e._v(e._s(e.text))])],2)])],1),e._t("legend",[e.hasLegend?n("div",{staticClass:"cdc-legend",style:e.placementStyles.legend},e._l(e.legend,function(t,r){return n("span",{key:r,staticClass:"cdc-legend-item",attrs:{title:t.percent}},[n("span",{staticClass:"cdc-legend-item-color",style:t.styles}),n("span",[e._v(e._s(t.label))])])}),0):e._e()])],2)},c=[],s=["click","mouseenter","mouseleave","mouseover","mouseout","mousemove"].map(function(e){return{nativeEventName:e,sectionEventName:"section-".concat(e)}}),u=["#FF6384","#36A2EB","#FFCE56","#F58231","#46F0F0","#D2F53C","#911EB4","#F032E6","#3CB44B","#FFE119","#E6194B","#FABEBE","#008080","#E6BEFF","#0082C8","#AA6E28","#FFFAC8","#800000","#AAFFC3","#808000","#FFD8B1","#000080","#808080","#000000"],a=u;function l(e){return l="function"===typeof Symbol&&"symbol"===typeof Symbol.iterator?function(e){return typeof e}:function(e){return e&&"function"===typeof Symbol&&e.constructor===Symbol&&e!==Symbol.prototype?"symbol":typeof e},l(e)}function f(e,t,n){return t in e?Object.defineProperty(e,t,{value:n,enumerable:!0,configurable:!0,writable:!0}):e[t]=n,e}var d="1em",p="dodgerblue",y={TOP:"top",RIGHT:"right",BOTTOM:"bottom",LEFT:"left"},v=(o={},f(o,y.TOP,{container:{flexDirection:"column"},legend:{order:-1,margin:0,marginBottom:d}}),f(o,y.RIGHT,{container:{},legend:{flexDirection:"column",margin:0,marginLeft:d}}),f(o,y.BOTTOM,{container:{flexDirection:"column"},legend:{}}),f(o,y.LEFT,{container:{},legend:{flexDirection:"column",order:-1,margin:0,marginRight:d}}),o),m=function(e){return!!e&&e.constructor===Object},h=[{type:"number",key:"value",required:!0},{key:"label"},{key:"color"}];function g(e){return!!m(e)&&h.reduce(function(t,n){if(!t)return!1;var r=!0;return n.required&&(r=r&&Object.hasOwnProperty.call(e,n.key)),n.type&&(r=r&&l(e[n.key])===n.type),t&&r},!0)}var b=function(){var e=this,t=e.$createElement,n=e._self._c||t;return n("div",{staticClass:"cdc-sections",style:e.containerStyles},e._l(e.donutSections,function(t,r){return n("div",e._g({key:r,staticClass:"cdc-section",class:t.className,style:t.sectionStyles},t.listeners),[n("div",{staticClass:"cdc-filler",style:t.fillerStyles,attrs:{title:t.label}})])}),0)},S=[];function E(e){for(var t=1;t<arguments.length;t++){var n=null!=arguments[t]?arguments[t]:{},r=Object.keys(n);"function"===typeof Object.getOwnPropertySymbols&&(r=r.concat(Object.getOwnPropertySymbols(n).filter(function(e){return Object.getOwnPropertyDescriptor(n,e).enumerable}))),r.forEach(function(t){_(e,t,n[t])})}return e}function _(e,t,n){return t in e?Object.defineProperty(e,t,{value:n,enumerable:!0,configurable:!0,writable:!0}):e[t]=n,e}var O={LEFT:"cdc-section-left",RIGHT:"cdc-section-right"},x={props:{startAngle:{type:Number,default:0},sections:{type:Array,default:function(){return[]}}},computed:{containerStyles:function(){return{transform:"rotate(".concat(this.startAngle,"deg)")}},donutSections:function(){var e=this,t=180,n=0,r=0,o=this.sections.map(function(o){var i=[O.RIGHT,-180],c=i[0],u=i[1];if(n>=t){var a=[O.LEFT,180];c=a[0],u=a[1]}var l=u+o.degree,f={backgroundColor:o.color||p,transform:"rotate(".concat(l,"deg)")},d={transform:"rotate(".concat(r,"deg)")};n+=o.degree,180===n?r=0:r+=o.degree;var y=s.reduce(function(t,n){var r=n.nativeEventName,i=n.sectionEventName;return E({},t,_({},r,function(t){return e.emitEvent(i,o,t)}))},{});return{label:o.label,className:c,fillerStyles:f,sectionStyles:d,listeners:y}});return o}},methods:{emitEvent:function(e,t,n){0!==t.value&&this.$emit(e,t.$section,n)}}},F=x;function w(e,t,n,r,o,i,c,s){var u,a="function"===typeof e?e.options:e;if(t&&(a.render=t,a.staticRenderFns=n,a._compiled=!0),r&&(a.functional=!0),i&&(a._scopeId="data-v-"+i),c?(u=function(e){e=e||this.$vnode&&this.$vnode.ssrContext||this.parent&&this.parent.$vnode&&this.parent.$vnode.ssrContext,e||"undefined"===typeof __VUE_SSR_CONTEXT__||(e=__VUE_SSR_CONTEXT__),o&&o.call(this,e),e&&e._registeredComponents&&e._registeredComponents.add(c)},a._ssrRegister=u):o&&(u=s?function(){o.call(this,this.$root.$options.shadowRoot)}:o),u)if(a.functional){a._injectStyles=u;var l=a.render;a.render=function(e,t){return u.call(t),l(e,t)}}else{var f=a.beforeCreate;a.beforeCreate=f?[].concat(f,u):[u]}return{exports:e,options:a}}var j=w(F,b,S,!1,null,null,null),T=j.exports;n("7e79");function z(e){for(var t=1;t<arguments.length;t++){var n=null!=arguments[t]?arguments[t]:{},r=Object.keys(n);"function"===typeof Object.getOwnPropertySymbols&&(r=r.concat(Object.getOwnPropertySymbols(n).filter(function(e){return Object.getOwnPropertyDescriptor(n,e).enumerable}))),r.forEach(function(t){C(e,t,n[t])})}return e}function C(e,t,n){return t in e?Object.defineProperty(e,t,{value:n,enumerable:!0,configurable:!0,writable:!0}):e[t]=n,e}var L={name:"vc-donut",props:{size:{type:Number,default:250,validator:function(e){return e>0}},unit:{type:String,default:"px"},thickness:{type:Number,default:20,validator:function(e){return e>=0&&e<=100}},text:{type:String,default:null},autoAdjustTextSize:{type:Boolean,default:!0},background:{type:String,default:"#ffffff"},foreground:{type:String,default:"#eeeeee"},sections:{type:Array,default:function(){return[]},validator:function(e){for(var t=0;t<e.length;++t)if(!g(e[t]))return!1;return!0}},total:{type:Number,default:100,validator:function(e){return e>0}},hasLegend:{type:Boolean,default:!1},legendPlacement:{type:String,default:y.BOTTOM,validator:function(e){return!!y[e.toUpperCase()]}},startAngle:{type:Number,default:0}},watch:{autoAdjustTextSize:function(e){e?window.addEventListener("resize",this.resizeListener):window.removeEventListener("resize",this.resizeListener),this.recalcFontSize()},size:function(){this.recalcFontSize()},unit:function(){this.recalcFontSize()}},data:function(){return{donutEl:null,fontSize:"1em",resizeListener:null}},computed:{donutSections:function(){var e=this,t=this.sections.reduce(function(e,t){return e+t.value},0);if("number"!==typeof t)return[];if(t=Number(t.toFixed(2)),t>this.total){var n="Sum of all the sections' values (".concat(t,") should not exceed `total` (").concat(this.total,")");throw new Error(n)}var r=360,o=180,i=0,c=0,s=[];return this.sections.forEach(function(t){var n=r*(t.value/e.total),u=[n];n>o&&(u=[o,n-o]);var l=t.color||a[c++];u.forEach(function(e){var n=Number((i+e).toFixed(2));if(n>o){var r=o-i;s.push(z({},t,{degree:r,color:l,$section:t}),z({},t,{degree:e-r,color:l,$section:t}))}else s.push(z({},t,{degree:e,color:l,$section:t}));i+=e,i>=o&&(i-=o)})}),s},legend:function(){var e=this;if(!this.hasLegend)return null;var t=0;return this.sections.map(function(n,r){return{label:n.label||"Section ".concat(r+1),percent:"".concat(n.value," (").concat(n.value/e.total*100,"%)"),styles:{backgroundColor:n.color||a[t++]}}})},placementStyles:function(){return this.hasLegend?v[this.legendPlacement]:{}},donutStyles:function(){var e="".concat(this.size).concat(this.unit),t={width:e,paddingBottom:e,backgroundColor:this.foreground};return t},overlayStyles:function(){var e=100,t=e-this.thickness,n="".concat(t,"%"),r="calc(50% - ".concat(t/2,"%)");return{height:n,width:n,top:r,left:r,backgroundColor:this.background}},donutTextStyles:function(){var e=this.fontSize;return{fontSize:e}},sectionListeners:function(){var e=this;return s.reduce(function(t,n){var r=n.sectionEventName;return z({},t,C({},r,function(){for(var t=arguments.length,n=new Array(t),o=0;o<t;o++)n[o]=arguments[o];return e.emitSectionEvent.apply(e,[r].concat(n))}))},{})}},methods:{recalcFontSize:function(){var e=this;if(this.autoAdjustTextSize){var t=.08,n=this.size;this.$nextTick(function(){"px"!==e.unit&&(n=e.donutEl?e.donutEl.clientWidth:null),e.fontSize=n?"".concat((n*t).toFixed(2),"px"):"1em"})}else this.fontSize="1em"},emitSectionEvent:function(e){for(var t=arguments.length,n=new Array(t>1?t-1:0),r=1;r<t;r++)n[r-1]=arguments[r];this.$emit.apply(this,[e].concat(n))}},created:function(){this.resizeListener=this.recalcFontSize.bind(this)},mounted:function(){this.donutEl=this.$refs.donut,this.autoAdjustTextSize&&(this.recalcFontSize(),window.addEventListener("resize",this.resizeListener))},beforeDestroy:function(){window.removeEventListener("resize",this.resizeListener)},components:{DonutSections:T}},k=L,P=w(k,i,c,!1,null,null,null),A=P.exports,$={install:function(e){e.component(A.name,A)}},B=$;t["default"]=B}})});

package.json

 {
   "name": "vue-css-donut-chart",
-  "version": "1.2.0",
+  "version": "1.3.0",
   "description": "Lightweight Vue component for drawing pure CSS donut charts",
@@ -20,3 +20,3 @@ "author": "dumptyd <[e-mail]>",
   "dependencies": {
-    "vue": "^2.5.17"
+    "vue": "^2.6.11"
   },
@@ -34,3 +34,3 @@ "devDependencies": {
     "eslint-plugin-import": "^2.14.0",
-    "vue-template-compiler": "^2.5.17"
+    "vue-template-compiler": "^2.6.11"
   },
@@ -37,0 +37,0 @@ "postcss": {

README.md

@@ -143,3 +143,3 @@ <div align="center">
     :sections="sections" :total="100"
-    :start-angle="0"
+    :start-angle="0" :auto-adjust-text-size="true"
     @section-click="handleSectionClick">
@@ -202,2 +202,3 @@ <h1>75%</h1>
 | `legend-placement` | String | No | `'bottom'` | Where the legend should be placed. Valid values are `top`, `right`, `bottom` and `left`. Doesn't have an effect if `has-legend` is not true. |
+| `auto-adjust-text-size` | Boolean | No | `true` | Whether the font-size of the donut content is calculated automatically to fit the available space. |
 | `sections` | Array<section> | No | `[]` | An array of objects. Each object in the array represents a section. |
@@ -204,0 +205,0 @@ | `section.value` | Number | **Yes** | &ndash; | Value of the section. The component determines what percent of the donut should be taken by a section based on this value and the `total` prop. Sum of all the sections' `value` should not exceed `total`, an error is thrown otherwise. |

New alerts

License Policy Violation

License

This package is not allowed per your license policy. Review the package's license to ensure compliance.

Found 1 instance in 1 package

Fixed alerts

License Policy Violation

License

This package is not allowed per your license policy. Review the package's license to ensure compliance.

Found 1 instance in 1 package

Improved metrics

Total package byte prevSize

150515

increased by1.74%

Lines of code

2025

increased by1.61%

Number of lines in readme file

236

increased by0.43%

Dependency changes

• Updatedvue@^2.6.11