@fnando/sparkline - npm Package Compare versions

Comparing version 0.2.0 to 0.3.0

dist/sparkline.js

@@ -84,3 +84,3 @@ var sparkline =
   svg.querySelectorAll("*").forEach(function (element) {
-    svg.removeChild(element);
+    return svg.removeChild(element);
   });
@@ -121,3 +121,3 @@ }
   // tooltip.
-  var onmove = options.onmove;
+  var onmousemove = options.onmousemove;
 
@@ -130,3 +130,3 @@ // This function will be called whenever the mouse leaves
   // cursor and spot position when moving the mouse.
-  var interactive = "interactive" in options ? options.interactive : !!onmove;
+  var interactive = "interactive" in options ? options.interactive : !!onmousemove;
 
@@ -286,4 +286,4 @@ // Define how big should be the spot area.
 
-    if (onmove) {
-      onmove(event, currentDataPoint);
+    if (onmousemove) {
+      onmousemove(event, currentDataPoint);
     }
@@ -290,0 +290,0 @@ });

dist/sparkline.min.js

@@ -1,2 +0,2 @@
-var sparkline=function(t){function e(n){if(r[n])return r[n].exports;var i=r[n]={i:n,l:!1,exports:{}};return t[n].call(i.exports,i,i.exports,e),i.l=!0,i.exports}var r={};return e.m=t,e.c=r,e.d=function(t,r,n){e.o(t,r)||Object.defineProperty(t,r,{configurable:!1,enumerable:!0,get:n})},e.n=function(t){var r=t&&t.__esModule?function(){return t.default}:function(){return t};return e.d(r,"a",r),r},e.o=function(t,e){return Object.prototype.hasOwnProperty.call(t,e)},e.p="",e(e.s=0)}([function(t,e,r){"use strict";function n(t,e,r,n){return parseFloat((e-n*e/t+r).toFixed(2))}function i(t,e){var r=document.createElementNS("http://www.w3.org/2000/svg",t);for(var n in e)r.setAttribute(n,e[n]);return r}function o(t,e,r){if(function(t){t.querySelectorAll("*").forEach(function(e){t.removeChild(e)})}(t),!(e.length<=1)){r=r||{},"number"==typeof e[0]&&(e=e.map(function(t){return{value:t}}));var o=r.onmove,u=r.onmouseout,a="interactive"in r?r.interactive:!!o,s=r.sportRadius||2,c=2*s,l=r.cursorWidth||2,f=parseFloat(t.attributes["stroke-width"].value),p=r.fetch||function(t){return t.value},d=e.map(function(t){return p(t)}),v=parseFloat(t.attributes.width.value)-c,h=parseFloat(t.attributes.height.value),x=h-2*f-c,b=Math.max.apply(Math,d),m=d.length-1,y=Math.round((v-c)/m),A=[],g="M"+c+" "+n(b,x,f+s,d[0]);d.forEach(function(t,r){var i=r===m?v:r*y+c,o=n(b,x,f+s,t);A.push(Object.assign({},e[r],{index:r,x:i,y:o})),g+=" L ",g+=i,g+=" ",g+=o});var w=i("path",{d:g,fill:"none"}),k=g+" V "+h,M=i("path",{d:k+="L "+c+" "+h+" Z",stroke:"none"});if(t.appendChild(w),t.appendChild(M),a){var O=i("line",{class:"sparkline--cursor",x1:-1e3,x2:-1e3,y1:0,y2:h,"stroke-width":l}),C=i("circle",{class:"sparkline--spot",cx:-1e3,cy:-1e3,r:s});t.appendChild(O),t.appendChild(C),t.addEventListener("mouseout",function(t){O.setAttribute("x1",-1e3),O.setAttribute("x2",-1e3),C.setAttribute("cx",-1e3),u&&u(t)}),t.addEventListener("mousemove",function(t){var e=t.offsetX,r=A.find(function(t){return t.x>=e});r||(r=A[m]);var n=A[A.indexOf(r)-1],i=void 0,u=void 0;n?(u=n.x+(r.x-n.x)/2,i=e>=u?r:n):i=r;var a=i.x,s=i.y;C.setAttribute("cx",a),C.setAttribute("cy",s),O.setAttribute("x1",a),O.setAttribute("x2",a),o&&o(t,i)})}}}Object.defineProperty(e,"__esModule",{value:!0}),e.sparkline=o,e.default=o}]);
+var sparkline=function(t){function e(n){if(r[n])return r[n].exports;var i=r[n]={i:n,l:!1,exports:{}};return t[n].call(i.exports,i,i.exports,e),i.l=!0,i.exports}var r={};return e.m=t,e.c=r,e.d=function(t,r,n){e.o(t,r)||Object.defineProperty(t,r,{configurable:!1,enumerable:!0,get:n})},e.n=function(t){var r=t&&t.__esModule?function(){return t.default}:function(){return t};return e.d(r,"a",r),r},e.o=function(t,e){return Object.prototype.hasOwnProperty.call(t,e)},e.p="",e(e.s=0)}([function(t,e,r){"use strict";function n(t,e,r,n){return parseFloat((e-n*e/t+r).toFixed(2))}function i(t,e){var r=document.createElementNS("http://www.w3.org/2000/svg",t);for(var n in e)r.setAttribute(n,e[n]);return r}function u(t,e,r){if(function(t){t.querySelectorAll("*").forEach(function(e){return t.removeChild(e)})}(t),!(e.length<=1)){r=r||{},"number"==typeof e[0]&&(e=e.map(function(t){return{value:t}}));var u=r.onmousemove,o=r.onmouseout,a="interactive"in r?r.interactive:!!u,s=r.sportRadius||2,c=2*s,l=r.cursorWidth||2,f=parseFloat(t.attributes["stroke-width"].value),p=r.fetch||function(t){return t.value},d=e.map(function(t){return p(t)}),v=parseFloat(t.attributes.width.value)-c,h=parseFloat(t.attributes.height.value),x=h-2*f-c,b=Math.max.apply(Math,d),m=d.length-1,y=Math.round((v-c)/m),A=[],g="M"+c+" "+n(b,x,f+s,d[0]);d.forEach(function(t,r){var i=r===m?v:r*y+c,u=n(b,x,f+s,t);A.push(Object.assign({},e[r],{index:r,x:i,y:u})),g+=" L ",g+=i,g+=" ",g+=u});var w=i("path",{d:g,fill:"none"}),k=g+" V "+h,M=i("path",{d:k+="L "+c+" "+h+" Z",stroke:"none"});if(t.appendChild(w),t.appendChild(M),a){var O=i("line",{class:"sparkline--cursor",x1:-1e3,x2:-1e3,y1:0,y2:h,"stroke-width":l}),C=i("circle",{class:"sparkline--spot",cx:-1e3,cy:-1e3,r:s});t.appendChild(O),t.appendChild(C),t.addEventListener("mouseout",function(t){O.setAttribute("x1",-1e3),O.setAttribute("x2",-1e3),C.setAttribute("cx",-1e3),o&&o(t)}),t.addEventListener("mousemove",function(t){var e=t.offsetX,r=A.find(function(t){return t.x>=e});r||(r=A[m]);var n=A[A.indexOf(r)-1],i=void 0,o=void 0;n?(o=n.x+(r.x-n.x)/2,i=e>=o?r:n):i=r;var a=i.x,s=i.y;C.setAttribute("cx",a),C.setAttribute("cy",s),O.setAttribute("x1",a),O.setAttribute("x2",a),u&&u(t,i)})}}}Object.defineProperty(e,"__esModule",{value:!0}),e.sparkline=u,e.default=u}]);
 //# sourceMappingURL=sparkline.min.js.map

package.json

 {
   "name": "@fnando/sparkline",
-  "version": "0.2.0",
+  "version": "0.3.0",
   "main": "dist/sparkline.js",
@@ -5,0 +5,0 @@ "module": "src/sparkline.js",

README.md

@@ -19,26 +19,36 @@ # sparkline
 
+You'll have to call `sparkline.sparkline(svg, values, options)` directly if you're loading the script without compiling your script (e.g. [webpack](https://webpack.js.org/)). Otherwise you can simply `import sparkline from "@fnando/sparkline";`.
+
+## API
+
+### `sparkline(svg, values, options = {})`
+
+- `svg`: This is a `<svg>` reference that must contain three required attributes (`width`, `height`, and `stroke-width`). This values are used to calculate the drawing area.
+- `values`: You can either provide an array of numbers or an array of objects that respond to `.value`. If you have a different data structure, see `options.fetch`.
+- `options`: This optional argument allows you to further customize the sparkline. The available options are:
+    - `fetch`: Use this function to return the value if you have a different data structure that's not natively supported by sparkline.
+    - `onmousemove`: By setting this callback function, you'll enable the interactive mode (unless you set `options.interactive` to `false`). The callback signature is `callback(event, datapoint)`, where `datapoint` is an object containing the value, x/y coordinates, and the item index.
+    - `onmouseout`: This callback function is called every time the mouse leaves the SVG area. You can use it to hide things like tooltips.
+    - `spotRadius`: Set the spot radius. The default is `2`.
+    - `cursorWidth`: Set the cursor width. The default is `2`.
+    - `interactive`: When `true`, this enables the interactive mode. You don't have to set this option if you're providing a `onmousemove` callback.
+
 ## Usage
 
+This is the minimum working example:
+
 ```html
 <!-- width, height and stroke-width attributes must be defined on the target SVG -->
-<svg width="100" height="30" stroke-width="3"></svg>
+<svg class="sparkline" width="100" height="30" stroke-width="3"></svg>
 
 <script>
-  // the function signature is sparkline(targetSVG, values).
-  sparkline.default(document.querySelector("svg"), [1, 5, 2, 4, 8, 3, 7]);
+  sparkline(document.querySelector(".sparkline"), [1, 5, 2, 4, 8, 3, 7]);
 </script>
 ```
 
-Notice that you can import sparkline like the following:
+You can change the colors by either setting the attributes directly to the SVG element or using CSS, like the following:
 
-```js
-import sparkline from "@fnando/sparkline";
-sparkline(document.querySelector("svg"), [1, 5, 2, 4, 8, 3, 7]);
-```
-
-To set the sparkline color, you have to set the stroke and fill colors.
-
 ```css
 /* just the line */
-svg {
+.sparkline {
   stroke: red;
@@ -49,18 +59,33 @@ fill: none;
 /* line with highlight area */
-svg {
+.sparkline {
   stroke: red;
   fill: rgba(255, 0, 0, .3);
 }
+
+/* change the spot color */
+.sparkline--spot {
+  stroke: blue;
+  fill: blue;
+}
+
+/* change the cursor color */
+.sparkline--cursor {
+  stroke: orange;
+}
 ```
 
-You can [see the example above in action](https://codepen.io/fnando/full/KyZLLV/).
+## Examples
 
-![](https://github.com/fnando/sparkline/blob/master/sparkline.gif?raw=true)
+### Static
 
-You can also create interactive sparklines.
+Available at https://codepen.io/fnando/full/KyZLLV/
 
-![](https://github.com/fnando/sparkline/blob/master/sparkline-interactive.gif?raw=true)
+[![](https://github.com/fnando/sparkline/blob/master/sparkline.gif?raw=true)](https://codepen.io/fnando/full/KyZLLV/)
 
-You can [see the example above in action](https://codepen.io/fnando/pen/GOQLVE).
+### Interactive
 
+Available at https://codepen.io/fnando/full/GOQLVE/
+
+[![](https://github.com/fnando/sparkline/blob/master/sparkline-interactive.gif?raw=true)](https://codepen.io/fnando/full/GOQLVE)
+
 ## License
@@ -67,0 +92,0 @@

src/sparkline.js

@@ -6,5 +6,3 @@ function getY(max, height, diff, value) {
 function removeChildren(svg) {
-  svg.querySelectorAll("*").forEach(element => {
-    svg.removeChild(element);
-  });
+  svg.querySelectorAll("*").forEach(element => svg.removeChild(element));
 }
@@ -44,3 +42,3 @@
   // tooltip.
-  const onmove = options.onmove;
+  const onmousemove = options.onmousemove;
 
@@ -53,3 +51,3 @@ // This function will be called whenever the mouse leaves
   // cursor and spot position when moving the mouse.
-  const interactive = ("interactive" in options) ? options.interactive : !!onmove;
+  const interactive = ("interactive" in options) ? options.interactive : !!onmousemove;
 
@@ -207,4 +205,4 @@ // Define how big should be the spot area.
 
-    if (onmove) {
-      onmove(event, currentDataPoint);
+    if (onmousemove) {
+      onmousemove(event, currentDataPoint);
     }
@@ -211,0 +209,0 @@ });

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

Major refactor

Supply chain risk

Package has recently undergone a major refactor. It may be unstable or indicate significant internal changes. Use caution when updating to versions that include significant changes.

Found 1 instance in 1 package

Improved metrics

Total package byte prevSize

602664

increased by0.29%

Number of lines in readme file

111

increased by29.07%

Number of medium supply chain risk alerts

2

decreased by-33.33%

Worsened metrics

Lines of code

432

decreased by-0.46%

No dependency changes