peity_vanilla_rails 0.1.0 → 0.2.0

checksums.yaml

@@ -1,7 +1,7 @@
 ---
 SHA256:
-  metadata.gz: 3c48643fc2950ad8495f99384593c7fd1ee26732b64c9df86b62781b738a25ce
-  data.tar.gz: c6ef11ccda4de91fd692c17902255a719b64cfb8038dbd0aefa02ffb13b107ab
+  metadata.gz: 53261d4741de90d14704c23e23624151184465c0e1a57edcd00b32b6751167e5
+  data.tar.gz: f7215991dffe2cc9756842981d36714b72c779cf7fabf9f3e522fda478b2a42d
 SHA512:
-  metadata.gz: 77de0c81a7259fb311f37804511e85654e1bd91eca5dc3a487d2b49a8a5b433a2100eaa6af5ff5c012070188316e60f3af5e9079f8902377e901efd38777b7dd
-  data.tar.gz: eab3b26b503ebf900d799a8cbdca94aee4acc85bc57fbba4144a9be393d03c889c0802d47931e9decfc44025d11161a3e5faab25db16c2a75933fef19276a6d6
+  metadata.gz: 38eb290c3931f3fcb6ddb0b0397e039793a15b1475915839b02575640b413cd48fecd97b0e327cfe8cf4992096af73c9e6c645fee297525bcf01e7792f0d00c6
+  data.tar.gz: ca345ad7e083cb26559c9605235718795e81a374ea819e6349f09f239475c254c028cc22ba3ebd7bdb94d7656edfa1c465427a87d46b4a4a73e5a3498f743a9b

data/README.md

@@ -1,20 +1,41 @@
 # Peity Vanilla Rails
 
-Sparklines are small but intense charts. This gem is a wrapper around [peity_vanilla](https://github.com/railsjazz/peity_vanilla) library. You can generate simple but informative charts with vanilla JS.
+[![RailsJazz](https://github.com/igorkasyanchuk/rails_time_travel/blob/main/docs/my_other.svg?raw=true)](https://www.railsjazz.com)
 
-![Sparklines Rails](docs/sparklines.png)
+Sparklines are small but intense charts. This gem is a wrapper around [peity-vanilla](https://github.com/railsjazz/peity_vanilla) library. You can generate simple but informative charts with vanilla JS.
+
+<img src="./docs/sparklines.png" height="400px"/>
 
 ## Usage
 
-1. Add to `application.js`
+1. add gem to the `Gemfile`
+
+```ruby
+gem "peity_vanilla_rails"
+```
+
+2. Add to `application.js`
+
+### For Assets Pipeline:
 
 ```javascript
-//= require peity_vanilla.js
+//= require peity-vanilla-rails.js
 ```
 
-2. Add charts in your code:
+### For Importmaps
 
-```ruby
+In `application.js`
+
+```js
+import "peity-vanilla-rails";
+```
+
+#### Note: After `peity-vanilla-rails.js` is imported, it will listen to changes of `peity` and `data-peity` attributes of every DOM element
+Pure `peity-vanilla` library is also acessible via `peity-vanilla.js` for Assets Pipeline, and `import peity from "peity-vanilla"` for Importmaps
+
+3. Add charts in your code:
+
+```erb
 <h3>Line</h3>
 <%= peity_line_chart([115,123,234,-113,-43,-223,127,332,152,233]) %>
 <%= peity_line_chart(100.times.map{rand(100) * [1,-1].sample}, options: { width: 240, fill: 'lightgreen', stroke: 'blue' }) %>
@@ -36,16 +57,29 @@ Sparklines are small but intense charts. This gem is a wrapper around [peity_van
 <%= peity_donut_chart [236,300] %>
 ```
 
-## Installation
-Add this line to your application's Gemfile:
+## More Examples
 
-```ruby
-gem "peity_vanilla_rails"
-```
+Check the [original](https://github.com/railsjazz/peity_vanilla) page.
+
+<img src="https://github.com/railsjazz/peity_vanilla/raw/main/docs/color.png"/>
+<img src="https://github.com/railsjazz/peity_vanilla/raw/main/docs/custom.png"/>
+<img src="https://github.com/railsjazz/peity_vanilla/raw/main/docs/animation.gif"/>
+
+```erb
+<%= peity_line_chart([5,3,9,6,5,9,7,3,5,2,5,3,9,6,5,9,7,3,5,2], id: 'updating-chart') %>
 
-And then execute:
-```bash
-$ bundle
+<script>
+  var updatingChart = document.getElementById("updating-chart");
+  
+  setInterval(function() {
+    var random = Math.round(Math.random() * 10)
+    var values = updatingChart.innerText.split(",")
+    values.shift()
+    values.push(random)
+
+    updatingChart.innerText = values.join(",")
+  }, 1000);
+</script>
 ```
 
 ## Default Options
@@ -96,8 +130,14 @@ You can pass in `options` any of the attributes.
 </script>
 ```
 
+## TODO
+
+- remote datasource and autoupdate
+
 ## Contributing
-Contribution directions go here.
+
+You are welcome to contribute.
 
 ## License
+
 The gem is available as open source under the terms of the [MIT License](https://opensource.org/licenses/MIT).

data/app/assets/javascripts/peity-vanilla-rails.esm.js

@@ -0,0 +1,503 @@
+/*!
+  Peity Vanila Rails 0.2.0
+  Copyright © 2022 RailsJazz
+  https://railsjazz.com
+ */
+
+/*!
+  Peity Vanila JS 0.0.8
+  Copyright © 2022 RailsJazz
+  https://railsjazz.com
+ */
+
+const isFunction = (o) =>
+  o !== null && typeof o === "function" && !!o.apply;
+
+const svgElement = (tag, attrs) => {
+  const element = document.createElementNS("http://www.w3.org/2000/svg", tag);
+  for (var attr in attrs) {
+    element.setAttribute(attr, attrs[attr]);
+  }
+  return element;
+};
+
+const svgSupported =
+  "createElementNS" in document && svgElement("svg", {}).createSVGRect();
+
+class Peity {
+  static defaults = {};
+  static graphers = {};
+
+  constructor(element, type, options = {}) {
+    this.element = element;
+    this.type = type;
+    this.options = Object.assign(
+      {},
+      Peity.defaults[this.type],
+      JSON.parse(element.dataset["peity"] || "{}"),
+      options
+    );
+
+    if(this.element._peity) {
+      this.element._peity.destroy();
+    }
+    this.element._peity = this;
+  }
+
+  draw() {
+    const options = this.options;
+    Peity.graphers[this.type](this);
+    if (isFunction(options.after)) options.after.call(this, options);
+  }
+
+  fill() {
+    var fill = this.options.fill;
+
+    return isFunction(fill)
+      ? fill
+      : function (_, i) {
+          return fill[i % fill.length];
+        };
+  }
+
+  prepare(width, height) {
+    if (!this.svg) {
+      this.element.style.display = "none";
+      this.element.after(
+        (this.svg = svgElement("svg", {
+          class: "peity",
+        }))
+      );
+    }
+
+    this.svg.innerHTML = "";
+    this.svg.setAttribute("width", width);
+    this.svg.setAttribute("height", height);
+
+    return this.svg;
+  }
+
+  get values() {
+    return this.element.innerText
+      .split(this.options.delimiter)
+      .map((value) => parseFloat(value));
+  }
+
+  mount() {
+    if (!svgSupported) return;
+
+    this.element.addEventListener("DOMSubtreeModified", this.draw.bind(this));
+    this.draw();
+
+    this.mounted = true;
+  }
+
+  unmount() {
+    this.element.removeEventListener("DOMSubtreeModified", this.draw);
+    this.svg.remove();
+    this.mounted = false;
+  }
+
+  destroy() {
+    this.unmount();
+
+    delete this.element._peity;
+  }
+
+  static register(type, defaults, grapher) {
+    Peity.defaults[type] = defaults;
+    Peity.graphers[type] = grapher;
+  }
+}
+
+const renderer$2 = (peity) => {
+  if (!peity.options.delimiter) {
+    const delimiter = peity.element.innerText.match(/[^0-9\.]/);
+    peity.options.delimiter = delimiter ? delimiter[0] : ",";
+  }
+
+  let values = peity.values.map((n) => (n > 0 ? n : 0));
+
+  if (peity.options.delimiter == "/") {
+    let v1 = values[0];
+    let v2 = values[1];
+    values = [v1, Math.max(0, v2 - v1)];
+  }
+
+  let i = 0;
+  let length = values.length;
+  let sum = 0;
+
+  for (; i < length; i++) {
+    sum += values[i];
+  }
+
+  if (!sum) {
+    length = 2;
+    sum = 1;
+    values = [0, 1];
+  }
+
+  let diameter = peity.options.radius * 2;
+
+  const svg = peity.prepare(
+    peity.options.width || diameter,
+    peity.options.height || diameter
+  );
+
+  const width = svg.clientWidth;
+  const height = svg.clientHeight;
+  const cx = width / 2;
+  const cy = height / 2;
+
+  const radius = Math.min(cx, cy);
+  let innerRadius = peity.options.innerRadius;
+
+  if (peity.type == "donut" && !innerRadius) {
+    innerRadius = radius * 0.5;
+  }
+
+  const fill = peity.fill();
+
+  const scale = (value, radius) => {
+    const radians = (value / sum) * Math.PI * 2 - Math.PI / 2;
+
+    return [radius * Math.cos(radians) + cx, radius * Math.sin(radians) + cy];
+  };
+
+  let cumulative = 0;
+
+  for (i = 0; i < length; i++) {
+    const value = values[i];
+    const portion = value / sum;
+    let node;
+
+    if (portion == 0) continue;
+
+    if (portion == 1) {
+      if (innerRadius) {
+        const x2 = cx - 0.01;
+        const y1 = cy - radius;
+        const y2 = cy - innerRadius;
+
+        node = svgElement("path", {
+          d: [
+            "M",
+            cx,
+            y1,
+            "A",
+            radius,
+            radius,
+            0,
+            1,
+            1,
+            x2,
+            y1,
+            "L",
+            x2,
+            y2,
+            "A",
+            innerRadius,
+            innerRadius,
+            0,
+            1,
+            0,
+            cx,
+            y2,
+          ].join(" "),
+          "data-value": value,
+        });
+      } else {
+        node = svgElement("circle", {
+          cx: cx,
+          cy: cy,
+          "data-value": value,
+          r: radius,
+        });
+      }
+    } else {
+      const cumulativePlusValue = cumulative + value;
+
+      let d = ["M"].concat(
+        scale(cumulative, radius),
+        "A",
+        radius,
+        radius,
+        0,
+        portion > 0.5 ? 1 : 0,
+        1,
+        scale(cumulativePlusValue, radius),
+        "L"
+      );
+
+      if (innerRadius) {
+        d = d.concat(
+          scale(cumulativePlusValue, innerRadius),
+          "A",
+          innerRadius,
+          innerRadius,
+          0,
+          portion > 0.5 ? 1 : 0,
+          0,
+          scale(cumulative, innerRadius)
+        );
+      } else {
+        d.push(cx, cy);
+      }
+
+      cumulative += value;
+
+      node = svgElement("path", {
+        d: d.join(" "),
+        "data-value": value,
+      });
+    }
+
+    node.setAttribute("fill", fill.call(peity, value, i, values));
+
+    svg.append(node);
+  }
+};
+
+const defaults$2 = {
+  fill: ["#ff9900", "#fff4dd", "#ffc66e"],
+  radius: 8,
+};
+
+const renderer$1 = (peity) => {
+  const values = peity.values;
+  const max = Math.max.apply(
+    Math,
+    peity.options.max == undefined ? values : values.concat(peity.options.max)
+  );
+  const min = Math.min.apply(
+    Math,
+    peity.options.min == undefined ? values : values.concat(peity.options.min)
+  );
+
+  const svg = peity.prepare(peity.options.width, peity.options.height);
+  const width = svg.clientWidth;
+  const height = svg.clientHeight;
+  const diff = max - min;
+  const padding = peity.options.padding;
+  const fill = peity.fill();
+
+  const xScale = (input) => {
+    return (input * width) / values.length;
+  };
+
+  const yScale = (input) => {
+    return height - (diff ? ((input - min) / diff) * height : 1);
+  };
+
+  for (var i = 0; i < values.length; i++) {
+    let x = xScale(i + padding);
+    let w = xScale(i + 1 - padding) - x;
+    let value = values[i];
+    let valueY = yScale(value);
+    let y1 = valueY;
+    let y2 = valueY;
+    let h;
+
+    if (!diff) {
+      h = 1;
+    } else if (value < 0) {
+      y1 = yScale(Math.min(max, 0));
+    } else {
+      y2 = yScale(Math.max(min, 0));
+    }
+
+    h = y2 - y1;
+
+    if (h == 0) {
+      h = 1;
+      if (max > 0 && diff) y1--;
+    }
+
+    svg.append(
+      svgElement("rect", {
+        "data-value": value,
+        fill: fill.call(peity, value, i, values),
+        x: x,
+        y: y1,
+        width: w,
+        height: h,
+      })
+    );
+  }
+};
+
+const defaults$1 = {
+  delimiter: ",",
+  fill: ["#4D89F9"],
+  height: 16,
+  min: 0,
+  padding: 0.1,
+  width: 32,
+};
+
+const renderer = (peity) => {
+  const values = peity.values;
+  if (values.length == 1) values.push(values[0]);
+  const max = Math.max.apply(
+    Math,
+    peity.options.max == undefined ? values : values.concat(peity.options.max)
+  );
+  const min = Math.min.apply(
+    Math,
+    peity.options.min == undefined ? values : values.concat(peity.options.min)
+  );
+
+  const svg = peity.prepare(peity.options.width, peity.options.height);
+  const strokeWidth = peity.options.strokeWidth;
+  const width = svg.clientWidth;
+  const height = svg.clientHeight - strokeWidth;
+  const diff = max - min;
+
+  const xScale = (input) => {
+    return input * (width / (values.length - 1));
+  };
+
+  const yScale = (input) => {
+    let y = height;
+
+    if (diff) {
+      y -= ((input - min) / diff) * height;
+    }
+
+    return y + strokeWidth / 2;
+  };
+
+  let zero = yScale(Math.max(min, 0));
+  let coords = [0, zero];
+
+  for (var i = 0; i < values.length; i++) {
+    coords.push(xScale(i), yScale(values[i]));
+  }
+
+  coords.push(width, zero);
+
+  if (peity.options.fill) {
+    svg.append(
+      svgElement("polygon", {
+        fill: peity.options.fill,
+        points: coords.join(" "),
+      })
+    );
+  }
+
+  if (strokeWidth) {
+    svg.append(
+      svgElement("polyline", {
+        fill: "none",
+        points: coords.slice(2, coords.length - 2).join(" "),
+        stroke: peity.options.stroke,
+        "stroke-width": strokeWidth,
+        "stroke-linecap": "square",
+      })
+    );
+  }
+};
+
+const defaults = {
+  delimiter: ",",
+  fill: "#c6d9fd",
+  height: 16,
+  min: 0,
+  stroke: "#4d89f9",
+  strokeWidth: 1,
+  width: 32,
+};
+
+Peity.register("pie", defaults$2, renderer$2);
+Peity.register("donut", defaults$2, renderer$2);
+Peity.register("bar", defaults$1, renderer$1);
+Peity.register("line", defaults, renderer);
+
+const peity = function (element, type, options) {
+  const peity = new Peity(element, type, options);
+  peity.mount();
+
+  return peity;
+};
+
+peity.defaults = Peity.defaults;
+peity.graphers = Peity.graphers;
+
+const getPeityType = (node) => node.getAttribute('peity');
+
+const elementFromNode = (node) => {
+  if (node.nodeType == Node.ELEMENT_NODE) {
+    return node;
+  }
+};
+
+const processNodeAdded = (node) => {
+  if (node.matches("[peity]")) {
+    peity(node, getPeityType(node));
+  }
+};
+
+const processNodeRemoved = (node) => {
+  if (node._peity) {
+    node._peity.destroy();
+  }
+};
+
+const processAttributeChanged = (mutation) => {
+  const node = mutation.target;
+  switch (mutation.attributeName) {
+    case "peity":
+      const type = getPeityType(node);
+      if (type) {
+        peity(node, type);
+      } else {
+        node._peity.unmount();
+      }
+      break;
+    case "data-peity":
+      if(node._peity) {
+        peity(node, node._peity.type);
+      }
+      break;
+  }
+};
+
+const callback = (mutationList, observer) => {
+  mutationList.forEach(function (mutation) {
+    switch (mutation.type) {
+      case "childList":
+        for (const node of Array.from(mutation.addedNodes)) {
+          const element = elementFromNode(node);
+          if (element) {
+            processNodeAdded(element);
+          }
+        }
+        for (const node of Array.from(mutation.removedNodes)) {
+          const element = elementFromNode(node);
+          if (element) {
+            processNodeRemoved(element);
+          }
+        }
+        break;
+      case "attributes":
+        processAttributeChanged(mutation);
+        break;
+    }
+  });
+};
+
+const observerOptions = {
+  childList: true,
+  attributes: true,
+  subtree: true,
+};
+
+const observer = new MutationObserver(callback);
+observer.observe(document.documentElement, observerOptions);
+
+for (const node of Array.from(document.documentElement.querySelectorAll('[peity]'))) {
+  processNodeAdded(node);
+}
+
+export { peity as default };

data/app/assets/javascripts/peity-vanilla-rails.min.js

@@ -0,0 +1,11 @@
+/*!
+  Peity Vanila Rails 0.2.0
+  Copyright © 2022 RailsJazz
+  https://railsjazz.com
+ */
+var peity=function(){"use strict";
+/*!
+    Peity Vanila JS 0.0.8
+    Copyright © 2022 RailsJazz
+    https://railsjazz.com
+   */const t=t=>null!==t&&"function"==typeof t&&!!t.apply,e=(t,e)=>{const i=document.createElementNS("http://www.w3.org/2000/svg",t);for(var n in e)i.setAttribute(n,e[n]);return i},i="createElementNS"in document&&e("svg",{}).createSVGRect();class n{static defaults={};static graphers={};constructor(t,e,i={}){this.element=t,this.type=e,this.options=Object.assign({},n.defaults[this.type],JSON.parse(t.dataset.peity||"{}"),i),this.element._peity&&this.element._peity.destroy(),this.element._peity=this}draw(){const e=this.options;n.graphers[this.type](this),t(e.after)&&e.after.call(this,e)}fill(){var e=this.options.fill;return t(e)?e:function(t,i){return e[i%e.length]}}prepare(t,i){return this.svg||(this.element.style.display="none",this.element.after(this.svg=e("svg",{class:"peity"}))),this.svg.innerHTML="",this.svg.setAttribute("width",t),this.svg.setAttribute("height",i),this.svg}get values(){return this.element.innerText.split(this.options.delimiter).map((t=>parseFloat(t)))}mount(){i&&(this.element.addEventListener("DOMSubtreeModified",this.draw.bind(this)),this.draw(),this.mounted=!0)}unmount(){this.element.removeEventListener("DOMSubtreeModified",this.draw),this.svg.remove(),this.mounted=!1}destroy(){this.unmount(),delete this.element._peity}static register(t,e,i){n.defaults[t]=e,n.graphers[t]=i}}const s=t=>{if(!t.options.delimiter){const e=t.element.innerText.match(/[^0-9\.]/);t.options.delimiter=e?e[0]:","}let i=t.values.map((t=>t>0?t:0));if("/"==t.options.delimiter){let t=i[0],e=i[1];i=[t,Math.max(0,e-t)]}let n=0,s=i.length,o=0;for(;n<s;n++)o+=i[n];o||(s=2,o=1,i=[0,1]);let r=2*t.options.radius;const a=t.prepare(t.options.width||r,t.options.height||r),l=a.clientWidth,h=a.clientHeight,p=l/2,c=h/2,d=Math.min(p,c);let u=t.options.innerRadius;"donut"!=t.type||u||(u=.5*d);const m=t.fill(),f=(t,e)=>{const i=t/o*Math.PI*2-Math.PI/2;return[e*Math.cos(i)+p,e*Math.sin(i)+c]};let g=0;for(n=0;n<s;n++){const s=i[n],r=s/o;let l;if(0!=r){if(1==r)if(u){const t=p-.01,i=c-d,n=c-u;l=e("path",{d:["M",p,i,"A",d,d,0,1,1,t,i,"L",t,n,"A",u,u,0,1,0,p,n].join(" "),"data-value":s})}else l=e("circle",{cx:p,cy:c,"data-value":s,r:d});else{const t=g+s;let i=["M"].concat(f(g,d),"A",d,d,0,r>.5?1:0,1,f(t,d),"L");u?i=i.concat(f(t,u),"A",u,u,0,r>.5?1:0,0,f(g,u)):i.push(p,c),g+=s,l=e("path",{d:i.join(" "),"data-value":s})}l.setAttribute("fill",m.call(t,s,n,i)),a.append(l)}}},o={fill:["#ff9900","#fff4dd","#ffc66e"],radius:8};n.register("pie",o,s),n.register("donut",o,s),n.register("bar",{delimiter:",",fill:["#4D89F9"],height:16,min:0,padding:.1,width:32},(t=>{const i=t.values,n=Math.max.apply(Math,null==t.options.max?i:i.concat(t.options.max)),s=Math.min.apply(Math,null==t.options.min?i:i.concat(t.options.min)),o=t.prepare(t.options.width,t.options.height),r=o.clientWidth,a=o.clientHeight,l=n-s,h=t.options.padding,p=t.fill(),c=t=>t*r/i.length,d=t=>a-(l?(t-s)/l*a:1);for(var u=0;u<i.length;u++){let r,a=c(u+h),m=c(u+1-h)-a,f=i[u],g=d(f),y=g,v=g;l?f<0?y=d(Math.min(n,0)):v=d(Math.max(s,0)):r=1,r=v-y,0==r&&(r=1,n>0&&l&&y--),o.append(e("rect",{"data-value":f,fill:p.call(t,f,u,i),x:a,y:y,width:m,height:r}))}})),n.register("line",{delimiter:",",fill:"#c6d9fd",height:16,min:0,stroke:"#4d89f9",strokeWidth:1,width:32},(t=>{const i=t.values;1==i.length&&i.push(i[0]);const n=Math.max.apply(Math,null==t.options.max?i:i.concat(t.options.max)),s=Math.min.apply(Math,null==t.options.min?i:i.concat(t.options.min)),o=t.prepare(t.options.width,t.options.height),r=t.options.strokeWidth,a=o.clientWidth,l=o.clientHeight-r,h=n-s,p=t=>{let e=l;return h&&(e-=(t-s)/h*l),e+r/2};let c=p(Math.max(s,0)),d=[0,c];for(var u=0;u<i.length;u++)d.push(u*(a/(i.length-1)),p(i[u]));d.push(a,c),t.options.fill&&o.append(e("polygon",{fill:t.options.fill,points:d.join(" ")})),r&&o.append(e("polyline",{fill:"none",points:d.slice(2,d.length-2).join(" "),stroke:t.options.stroke,"stroke-width":r,"stroke-linecap":"square"}))}));const r=function(t,e,i){const s=new n(t,e,i);return s.mount(),s};r.defaults=n.defaults,r.graphers=n.graphers;const a=t=>t.getAttribute("peity"),l=t=>{if(t.nodeType==Node.ELEMENT_NODE)return t},h=t=>{t.matches("[peity]")&&r(t,a(t))},p=t=>{t._peity&&t._peity.destroy()};new MutationObserver(((t,e)=>{t.forEach((function(t){switch(t.type){case"childList":for(const e of Array.from(t.addedNodes)){const t=l(e);t&&h(t)}for(const e of Array.from(t.removedNodes)){const t=l(e);t&&p(t)}break;case"attributes":(t=>{const e=t.target;switch(t.attributeName){case"peity":const t=a(e);t?r(e,t):e._peity.unmount();break;case"data-peity":e._peity&&r(e,e._peity.type)}})(t)}}))})).observe(document.documentElement,{childList:!0,attributes:!0,subtree:!0});for(const t of Array.from(document.documentElement.querySelectorAll("[peity]")))h(t);return r}();

data/app/assets/javascripts/peity-vanilla.esm.js

@@ -0,0 +1,421 @@
+/*!
+  Peity Vanila JS 0.0.8
+  Copyright © 2022 RailsJazz
+  https://railsjazz.com
+ */
+
+const isFunction = (o) =>
+  o !== null && typeof o === "function" && !!o.apply;
+
+const svgElement = (tag, attrs) => {
+  const element = document.createElementNS("http://www.w3.org/2000/svg", tag);
+  for (var attr in attrs) {
+    element.setAttribute(attr, attrs[attr]);
+  }
+  return element;
+};
+
+const svgSupported =
+  "createElementNS" in document && svgElement("svg", {}).createSVGRect();
+
+class Peity {
+  static defaults = {};
+  static graphers = {};
+
+  constructor(element, type, options = {}) {
+    this.element = element;
+    this.type = type;
+    this.options = Object.assign(
+      {},
+      Peity.defaults[this.type],
+      JSON.parse(element.dataset["peity"] || "{}"),
+      options
+    );
+
+    if(this.element._peity) {
+      this.element._peity.destroy();
+    }
+    this.element._peity = this;
+  }
+
+  draw() {
+    const options = this.options;
+    Peity.graphers[this.type](this);
+    if (isFunction(options.after)) options.after.call(this, options);
+  }
+
+  fill() {
+    var fill = this.options.fill;
+
+    return isFunction(fill)
+      ? fill
+      : function (_, i) {
+          return fill[i % fill.length];
+        };
+  }
+
+  prepare(width, height) {
+    if (!this.svg) {
+      this.element.style.display = "none";
+      this.element.after(
+        (this.svg = svgElement("svg", {
+          class: "peity",
+        }))
+      );
+    }
+
+    this.svg.innerHTML = "";
+    this.svg.setAttribute("width", width);
+    this.svg.setAttribute("height", height);
+
+    return this.svg;
+  }
+
+  get values() {
+    return this.element.innerText
+      .split(this.options.delimiter)
+      .map((value) => parseFloat(value));
+  }
+
+  mount() {
+    if (!svgSupported) return;
+
+    this.element.addEventListener("DOMSubtreeModified", this.draw.bind(this));
+    this.draw();
+
+    this.mounted = true;
+  }
+
+  unmount() {
+    this.element.removeEventListener("DOMSubtreeModified", this.draw);
+    this.svg.remove();
+    this.mounted = false;
+  }
+
+  destroy() {
+    this.unmount();
+
+    delete this.element._peity;
+  }
+
+  static register(type, defaults, grapher) {
+    Peity.defaults[type] = defaults;
+    Peity.graphers[type] = grapher;
+  }
+}
+
+const renderer$2 = (peity) => {
+  if (!peity.options.delimiter) {
+    const delimiter = peity.element.innerText.match(/[^0-9\.]/);
+    peity.options.delimiter = delimiter ? delimiter[0] : ",";
+  }
+
+  let values = peity.values.map((n) => (n > 0 ? n : 0));
+
+  if (peity.options.delimiter == "/") {
+    let v1 = values[0];
+    let v2 = values[1];
+    values = [v1, Math.max(0, v2 - v1)];
+  }
+
+  let i = 0;
+  let length = values.length;
+  let sum = 0;
+
+  for (; i < length; i++) {
+    sum += values[i];
+  }
+
+  if (!sum) {
+    length = 2;
+    sum = 1;
+    values = [0, 1];
+  }
+
+  let diameter = peity.options.radius * 2;
+
+  const svg = peity.prepare(
+    peity.options.width || diameter,
+    peity.options.height || diameter
+  );
+
+  const width = svg.clientWidth;
+  const height = svg.clientHeight;
+  const cx = width / 2;
+  const cy = height / 2;
+
+  const radius = Math.min(cx, cy);
+  let innerRadius = peity.options.innerRadius;
+
+  if (peity.type == "donut" && !innerRadius) {
+    innerRadius = radius * 0.5;
+  }
+
+  const fill = peity.fill();
+
+  const scale = (value, radius) => {
+    const radians = (value / sum) * Math.PI * 2 - Math.PI / 2;
+
+    return [radius * Math.cos(radians) + cx, radius * Math.sin(radians) + cy];
+  };
+
+  let cumulative = 0;
+
+  for (i = 0; i < length; i++) {
+    const value = values[i];
+    const portion = value / sum;
+    let node;
+
+    if (portion == 0) continue;
+
+    if (portion == 1) {
+      if (innerRadius) {
+        const x2 = cx - 0.01;
+        const y1 = cy - radius;
+        const y2 = cy - innerRadius;
+
+        node = svgElement("path", {
+          d: [
+            "M",
+            cx,
+            y1,
+            "A",
+            radius,
+            radius,
+            0,
+            1,
+            1,
+            x2,
+            y1,
+            "L",
+            x2,
+            y2,
+            "A",
+            innerRadius,
+            innerRadius,
+            0,
+            1,
+            0,
+            cx,
+            y2,
+          ].join(" "),
+          "data-value": value,
+        });
+      } else {
+        node = svgElement("circle", {
+          cx: cx,
+          cy: cy,
+          "data-value": value,
+          r: radius,
+        });
+      }
+    } else {
+      const cumulativePlusValue = cumulative + value;
+
+      let d = ["M"].concat(
+        scale(cumulative, radius),
+        "A",
+        radius,
+        radius,
+        0,
+        portion > 0.5 ? 1 : 0,
+        1,
+        scale(cumulativePlusValue, radius),
+        "L"
+      );
+
+      if (innerRadius) {
+        d = d.concat(
+          scale(cumulativePlusValue, innerRadius),
+          "A",
+          innerRadius,
+          innerRadius,
+          0,
+          portion > 0.5 ? 1 : 0,
+          0,
+          scale(cumulative, innerRadius)
+        );
+      } else {
+        d.push(cx, cy);
+      }
+
+      cumulative += value;
+
+      node = svgElement("path", {
+        d: d.join(" "),
+        "data-value": value,
+      });
+    }
+
+    node.setAttribute("fill", fill.call(peity, value, i, values));
+
+    svg.append(node);
+  }
+};
+
+const defaults$2 = {
+  fill: ["#ff9900", "#fff4dd", "#ffc66e"],
+  radius: 8,
+};
+
+const renderer$1 = (peity) => {
+  const values = peity.values;
+  const max = Math.max.apply(
+    Math,
+    peity.options.max == undefined ? values : values.concat(peity.options.max)
+  );
+  const min = Math.min.apply(
+    Math,
+    peity.options.min == undefined ? values : values.concat(peity.options.min)
+  );
+
+  const svg = peity.prepare(peity.options.width, peity.options.height);
+  const width = svg.clientWidth;
+  const height = svg.clientHeight;
+  const diff = max - min;
+  const padding = peity.options.padding;
+  const fill = peity.fill();
+
+  const xScale = (input) => {
+    return (input * width) / values.length;
+  };
+
+  const yScale = (input) => {
+    return height - (diff ? ((input - min) / diff) * height : 1);
+  };
+
+  for (var i = 0; i < values.length; i++) {
+    let x = xScale(i + padding);
+    let w = xScale(i + 1 - padding) - x;
+    let value = values[i];
+    let valueY = yScale(value);
+    let y1 = valueY;
+    let y2 = valueY;
+    let h;
+
+    if (!diff) {
+      h = 1;
+    } else if (value < 0) {
+      y1 = yScale(Math.min(max, 0));
+    } else {
+      y2 = yScale(Math.max(min, 0));
+    }
+
+    h = y2 - y1;
+
+    if (h == 0) {
+      h = 1;
+      if (max > 0 && diff) y1--;
+    }
+
+    svg.append(
+      svgElement("rect", {
+        "data-value": value,
+        fill: fill.call(peity, value, i, values),
+        x: x,
+        y: y1,
+        width: w,
+        height: h,
+      })
+    );
+  }
+};
+
+const defaults$1 = {
+  delimiter: ",",
+  fill: ["#4D89F9"],
+  height: 16,
+  min: 0,
+  padding: 0.1,
+  width: 32,
+};
+
+const renderer = (peity) => {
+  const values = peity.values;
+  if (values.length == 1) values.push(values[0]);
+  const max = Math.max.apply(
+    Math,
+    peity.options.max == undefined ? values : values.concat(peity.options.max)
+  );
+  const min = Math.min.apply(
+    Math,
+    peity.options.min == undefined ? values : values.concat(peity.options.min)
+  );
+
+  const svg = peity.prepare(peity.options.width, peity.options.height);
+  const strokeWidth = peity.options.strokeWidth;
+  const width = svg.clientWidth;
+  const height = svg.clientHeight - strokeWidth;
+  const diff = max - min;
+
+  const xScale = (input) => {
+    return input * (width / (values.length - 1));
+  };
+
+  const yScale = (input) => {
+    let y = height;
+
+    if (diff) {
+      y -= ((input - min) / diff) * height;
+    }
+
+    return y + strokeWidth / 2;
+  };
+
+  let zero = yScale(Math.max(min, 0));
+  let coords = [0, zero];
+
+  for (var i = 0; i < values.length; i++) {
+    coords.push(xScale(i), yScale(values[i]));
+  }
+
+  coords.push(width, zero);
+
+  if (peity.options.fill) {
+    svg.append(
+      svgElement("polygon", {
+        fill: peity.options.fill,
+        points: coords.join(" "),
+      })
+    );
+  }
+
+  if (strokeWidth) {
+    svg.append(
+      svgElement("polyline", {
+        fill: "none",
+        points: coords.slice(2, coords.length - 2).join(" "),
+        stroke: peity.options.stroke,
+        "stroke-width": strokeWidth,
+        "stroke-linecap": "square",
+      })
+    );
+  }
+};
+
+const defaults = {
+  delimiter: ",",
+  fill: "#c6d9fd",
+  height: 16,
+  min: 0,
+  stroke: "#4d89f9",
+  strokeWidth: 1,
+  width: 32,
+};
+
+Peity.register("pie", defaults$2, renderer$2);
+Peity.register("donut", defaults$2, renderer$2);
+Peity.register("bar", defaults$1, renderer$1);
+Peity.register("line", defaults, renderer);
+
+const peity = function (element, type, options) {
+  const peity = new Peity(element, type, options);
+  peity.mount();
+
+  return peity;
+};
+
+peity.defaults = Peity.defaults;
+peity.graphers = Peity.graphers;
+
+export { peity as default };

data/app/assets/javascripts/peity-vanilla.min.js

@@ -0,0 +1,6 @@
+var peity=function(){"use strict";
+/*!
+    Peity Vanila JS 0.0.8
+    Copyright © 2022 RailsJazz
+    https://railsjazz.com
+   */const t=t=>null!==t&&"function"==typeof t&&!!t.apply,e=(t,e)=>{const i=document.createElementNS("http://www.w3.org/2000/svg",t);for(var n in e)i.setAttribute(n,e[n]);return i},i="createElementNS"in document&&e("svg",{}).createSVGRect();class n{static defaults={};static graphers={};constructor(t,e,i={}){this.element=t,this.type=e,this.options=Object.assign({},n.defaults[this.type],JSON.parse(t.dataset.peity||"{}"),i),this.element._peity&&this.element._peity.destroy(),this.element._peity=this}draw(){const e=this.options;n.graphers[this.type](this),t(e.after)&&e.after.call(this,e)}fill(){var e=this.options.fill;return t(e)?e:function(t,i){return e[i%e.length]}}prepare(t,i){return this.svg||(this.element.style.display="none",this.element.after(this.svg=e("svg",{class:"peity"}))),this.svg.innerHTML="",this.svg.setAttribute("width",t),this.svg.setAttribute("height",i),this.svg}get values(){return this.element.innerText.split(this.options.delimiter).map((t=>parseFloat(t)))}mount(){i&&(this.element.addEventListener("DOMSubtreeModified",this.draw.bind(this)),this.draw(),this.mounted=!0)}unmount(){this.element.removeEventListener("DOMSubtreeModified",this.draw),this.svg.remove(),this.mounted=!1}destroy(){this.unmount(),delete this.element._peity}static register(t,e,i){n.defaults[t]=e,n.graphers[t]=i}}const s=t=>{if(!t.options.delimiter){const e=t.element.innerText.match(/[^0-9\.]/);t.options.delimiter=e?e[0]:","}let i=t.values.map((t=>t>0?t:0));if("/"==t.options.delimiter){let t=i[0],e=i[1];i=[t,Math.max(0,e-t)]}let n=0,s=i.length,o=0;for(;n<s;n++)o+=i[n];o||(s=2,o=1,i=[0,1]);let l=2*t.options.radius;const a=t.prepare(t.options.width||l,t.options.height||l),r=a.clientWidth,h=a.clientHeight,p=r/2,d=h/2,c=Math.min(p,d);let u=t.options.innerRadius;"donut"!=t.type||u||(u=.5*c);const m=t.fill(),f=(t,e)=>{const i=t/o*Math.PI*2-Math.PI/2;return[e*Math.cos(i)+p,e*Math.sin(i)+d]};let g=0;for(n=0;n<s;n++){const s=i[n],l=s/o;let r;if(0!=l){if(1==l)if(u){const t=p-.01,i=d-c,n=d-u;r=e("path",{d:["M",p,i,"A",c,c,0,1,1,t,i,"L",t,n,"A",u,u,0,1,0,p,n].join(" "),"data-value":s})}else r=e("circle",{cx:p,cy:d,"data-value":s,r:c});else{const t=g+s;let i=["M"].concat(f(g,c),"A",c,c,0,l>.5?1:0,1,f(t,c),"L");u?i=i.concat(f(t,u),"A",u,u,0,l>.5?1:0,0,f(g,u)):i.push(p,d),g+=s,r=e("path",{d:i.join(" "),"data-value":s})}r.setAttribute("fill",m.call(t,s,n,i)),a.append(r)}}},o={fill:["#ff9900","#fff4dd","#ffc66e"],radius:8};n.register("pie",o,s),n.register("donut",o,s),n.register("bar",{delimiter:",",fill:["#4D89F9"],height:16,min:0,padding:.1,width:32},(t=>{const i=t.values,n=Math.max.apply(Math,null==t.options.max?i:i.concat(t.options.max)),s=Math.min.apply(Math,null==t.options.min?i:i.concat(t.options.min)),o=t.prepare(t.options.width,t.options.height),l=o.clientWidth,a=o.clientHeight,r=n-s,h=t.options.padding,p=t.fill(),d=t=>t*l/i.length,c=t=>a-(r?(t-s)/r*a:1);for(var u=0;u<i.length;u++){let l,a=d(u+h),m=d(u+1-h)-a,f=i[u],g=c(f),v=g,y=g;r?f<0?v=c(Math.min(n,0)):y=c(Math.max(s,0)):l=1,l=y-v,0==l&&(l=1,n>0&&r&&v--),o.append(e("rect",{"data-value":f,fill:p.call(t,f,u,i),x:a,y:v,width:m,height:l}))}})),n.register("line",{delimiter:",",fill:"#c6d9fd",height:16,min:0,stroke:"#4d89f9",strokeWidth:1,width:32},(t=>{const i=t.values;1==i.length&&i.push(i[0]);const n=Math.max.apply(Math,null==t.options.max?i:i.concat(t.options.max)),s=Math.min.apply(Math,null==t.options.min?i:i.concat(t.options.min)),o=t.prepare(t.options.width,t.options.height),l=t.options.strokeWidth,a=o.clientWidth,r=o.clientHeight-l,h=n-s,p=t=>{let e=r;return h&&(e-=(t-s)/h*r),e+l/2};let d=p(Math.max(s,0)),c=[0,d];for(var u=0;u<i.length;u++)c.push(u*(a/(i.length-1)),p(i[u]));c.push(a,d),t.options.fill&&o.append(e("polygon",{fill:t.options.fill,points:c.join(" ")})),l&&o.append(e("polyline",{fill:"none",points:c.slice(2,c.length-2).join(" "),stroke:t.options.stroke,"stroke-width":l,"stroke-linecap":"square"}))}));const l=function(t,e,i){const s=new n(t,e,i);return s.mount(),s};return l.defaults=n.defaults,l.graphers=n.graphers,l}();

data/config/importmap.rb

@@ -0,0 +1,2 @@
+pin 'peity-vanilla', to: 'peity-vanilla.esm.js'
+pin 'peity-vanilla-rails', to: 'peity-vanilla-rails.esm.js'

data/lib/peity_vanilla_rails/engine.rb

@@ -1,15 +1,10 @@
 module PeityVanillaRails
   class Railtie < ::Rails::Engine
+    PRECOMPILE_ASSETS = %w( peity-vanilla-rails.esm.js peity-vanilla.esm.js )
     initializer "peity_vanilla_rails.importmap", before: "importmap" do |app|
-      if defined?(Importmap)
-        app.config.importmap.cache_sweepers << root.join("app/assets/javascripts")
-      end
-    end
-
-    PRECOMPILE_ASSETS = Dir[root.join("app/assets/javascripts/**/*")]
-    initializer 'peity_vanilla_rails.assets' do |app|
-      if app.config.respond_to?(:assets)
+      if Rails.application.respond_to?(:importmap)
         app.config.assets.precompile += PRECOMPILE_ASSETS
+        app.config.importmap.paths << root.join("config/importmap.rb")
       end
     end
 

data/lib/peity_vanilla_rails/helpers.rb

@@ -1,36 +1,28 @@
 module PeityVanillaRails
   module Helpers
-    
-    def peity_line_chart(data, options: {})
-      peity_chart(data, "line", ",", options: options)
+
+    def peity_line_chart(data, id: nil, options: {})
+      peity_chart(data, "line", ",", id: id, options: options)
     end
 
-    def peity_bar_chart(data, options: {})
-      peity_chart(data, "bar", ",", options: options)
+    def peity_bar_chart(data, id: nil, options: {})
+      peity_chart(data, "bar", ",", id: id, options: options)
     end
 
-    def peity_pie_chart(data, options: {})
-      peity_chart(data, "pie", "/", options: options)
+    def peity_pie_chart(data, id: nil, options: {})
+      peity_chart(data, "pie", "/", id: id, options: options)
     end
 
-    def peity_donut_chart(data, options: {})
-      peity_chart(data, "donut", "/", options: options)
+    def peity_donut_chart(data, id: nil, options: {})
+      peity_chart(data, "donut", "/", id: id, options: options)
     end
 
-    def peity_chart(value, type, delimiter, options: {})
+    def peity_chart(value, type, delimiter, id: nil, options: {})
       value = value.is_a?(Array) ? value.join(delimiter) : value
-      id = "peity_charts_#{Digest::SHA1.hexdigest([Time.now, rand].join)}"
-      [
-        tag.span(class: 'peity_charts', id: id, "data-peity" => options.to_json) do
-          value
-        end,
-        tag.script do
-          %Q{
-            peity(document.getElementById("#{id}"), "#{type}");
-          }.html_safe
-        end
-      ].join.html_safe
-    end    
+      tag.span(id: id, class: 'peity_charts', peity: type, style: 'display: none;', data: { peity: options.to_json }) do
+        value
+      end
+    end
 
   end
 end

data/lib/peity_vanilla_rails/version.rb

@@ -1,3 +1,3 @@
 module PeityVanillaRails
-  VERSION = "0.1.0"
+  VERSION = "0.2.0"
 end

metadata

@@ -1,14 +1,15 @@
 --- !ruby/object:Gem::Specification
 name: peity_vanilla_rails
 version: !ruby/object:Gem::Version
-  version: 0.1.0
+  version: 0.2.0
 platform: ruby
 authors:
 - Igor Kasyanchuk
+- Liubomyr Manastyretskyi
 autorequire:
 bindir: bin
 cert_chain: []
-date: 2022-04-30 00:00:00.000000000 Z
+date: 2022-05-02 00:00:00.000000000 Z
 dependencies:
 - !ruby/object:Gem::Dependency
   name: rails
@@ -69,6 +70,7 @@ dependencies:
 description: Sparklines are small but intense charts.
 email:
 - igorkasyanchuk@gmail.com
+- manastyretskyi@gmail.com
 executables: []
 extensions: []
 extra_rdoc_files: []
@@ -76,8 +78,11 @@ files:
 - MIT-LICENSE
 - README.md
 - Rakefile
-- app/assets/javascripts/peity_vanilla.js
-- app/assets/javascripts/peity_vanilla.js.map
+- app/assets/javascripts/peity-vanilla-rails.esm.js
+- app/assets/javascripts/peity-vanilla-rails.min.js
+- app/assets/javascripts/peity-vanilla.esm.js
+- app/assets/javascripts/peity-vanilla.min.js
+- config/importmap.rb
 - lib/peity_vanilla_rails.rb
 - lib/peity_vanilla_rails/engine.rb
 - lib/peity_vanilla_rails/helpers.rb
@@ -104,7 +109,7 @@ required_rubygems_version: !ruby/object:Gem::Requirement
     - !ruby/object:Gem::Version
       version: '0'
 requirements: []
-rubygems_version: 3.2.3
+rubygems_version: 3.3.7
 signing_key:
 specification_version: 4
 summary: Sparklines are small but intense charts.

data/app/assets/javascripts/peity_vanilla.js

@@ -1,2 +0,0 @@
-!function(t,e){if("object"==typeof exports&&"object"==typeof module)module.exports=e();else if("function"==typeof define&&define.amd)define([],e);else{var i,n=e();for(i in n)("object"==typeof exports?exports:t)[i]=n[i]}}(self,()=>(()=>{"use strict";function a(t,e,i){var n;if(s)return n=(t=t).dataset._peity,n=new r(t,e,Object.assign({},a.defaults[e],JSON.parse(t.dataset.peity||"{}"),i)),t.addEventListener("change",function(){n.draw()}),(t.dataset._peity=n).draw(),t}function r(t,e,i){this.$el=t,this.type=e,this.opts=i}var t=r.prototype,M=t.svgElement=function(t,e){var i,n=document.createElementNS("http://www.w3.org/2000/svg",t);for(i in e)n.setAttribute(i,e[i]);return n},s="createElementNS"in document&&M("svg",{}).createSVGRect();return t.draw=function(){var t=this.opts;a.graphers[this.type].call(this,t),t.after&&t.after.call(this,t)},t.isFunction=function(t){return null!==t&&"function"==typeof t&&!!t.apply},t.fill=function(){var i=this.opts.fill;return t.isFunction(i)?i:function(t,e){return i[e%i.length]}},t.prepare=function(t,e){return this.$svg||(this.$el.style.display="none",this.$el.after(this.$svg=M("svg",{class:"peity"}))),this.$svg.innerHTML="",this.$svg.setAttribute("width",t),this.$svg.setAttribute("height",e),this.$svg},t.values=function(){return this.$el.innerText.split(this.opts.delimiter).map(function(t){return parseFloat(t)})},a.defaults={},a.graphers={},a.register=function(t,e,i){this.defaults[t]=e,this.graphers[t]=i},a.register("pie",{fill:["#ff9900","#fff4dd","#ffc66e"],radius:8},function(t){t.delimiter||(l=this.$el.innerText.match(/[^0-9\.]/),t.delimiter=l?l[0]:",");for(var e=this.values().map(function(t){return 0<t?t:0}),i=("/"==t.delimiter&&(l=e[0],r=e[1],e=[l,Math.max(0,r-l)]),0),n=e.length,a=0;i<n;i++)a+=e[i];a||(n=2,e=[0,a=1]);for(var r=2*t.radius,s=this.prepare(t.width||r,t.height||r),l=s.clientWidth,r=s.clientHeight,h=l/2,o=r/2,u=Math.min(h,o),c=t.innerRadius,p=("donut"!=this.type||c||(c=.5*u),Math.PI),f=this.fill(),d=this.scale=function(t,e){t=t/a*p*2-p/2;return[e*Math.cos(t)+h,e*Math.sin(t)+o]},g=0,i=0;i<n;i++){var m,v,y=e[i],x=y/a;0!=x&&((x=1==x?c?M("path",{d:["M",h,v=o-u,"A",u,u,0,1,1,m=h-.01,v,"L",m,v=o-c,"A",c,c,0,1,0,h,v].join(" "),"data-value":y}):M("circle",{cx:h,cy:o,"data-value":y,r:u}):(m=g+y,v=["M"].concat(d(g,u),"A",u,u,0,.5<x?1:0,1,d(m,u),"L"),c?v=v.concat(d(m,c),"A",c,c,0,.5<x?1:0,0,d(g,c)):v.push(h,o),g+=y,M("path",{d:v.join(" "),"data-value":y}))).setAttribute("fill",f.call(this,y,i,e)),s.append(x))}}),a.register("donut",Object.assign(!0,{},a.defaults.pie),function(t){a.graphers.pie.call(this,t)}),a.register("bar",{delimiter:",",fill:["#4D89F9"],height:16,min:0,padding:.1,width:32},function(t){for(var e=this.values(),i=Math.max.apply(Math,null==t.max?e:e.concat(t.max)),n=Math.min.apply(Math,null==t.min?e:e.concat(t.min)),a=this.prepare(t.width,t.height),r=a.clientWidth,s=a.clientHeight,l=i-n,h=t.padding,o=this.fill(),u=this.x=function(t){return t*r/e.length},c=this.y=function(t){return s-(l?(t-n)/l*s:1)},p=0;p<e.length;p++){var f,d=u(p+h),g=u(p+1-h)-d,m=e[p],v=c(m),y=v;l?m<0?y=c(Math.min(i,0)):v=c(Math.max(n,0)):f=1,0==(f=v-y)&&(f=1,0<i&&l&&y--),a.append(M("rect",{"data-value":m,fill:o.call(this,m,p,e),x:d,y:y,width:g,height:f}))}}),a.register("line",{delimiter:",",fill:"#c6d9fd",height:16,min:0,stroke:"#4d89f9",strokeWidth:1,width:32},function(t){for(var e=this.values(),i=(1==e.length&&e.push(e[0]),Math.max.apply(Math,null==t.max?e:e.concat(t.max))),n=Math.min.apply(Math,null==t.min?e:e.concat(t.min)),a=this.prepare(t.width,t.height),r=t.strokeWidth,s=a.clientWidth,l=a.clientHeight-r,h=i-n,o=this.x=function(t){return t*(s/(e.length-1))},u=this.y=function(t){var e=l;return h&&(e-=(t-n)/h*l),e+r/2},i=u(Math.max(n,0)),c=[0,i],p=0;p<e.length;p++)c.push(o(p),u(e[p]));c.push(s,i),t.fill&&a.append(M("polygon",{fill:t.fill,points:c.join(" ")})),r&&a.append(M("polyline",{fill:"none",points:c.slice(2,c.length-2).join(" "),stroke:t.stroke,"stroke-width":r,"stroke-linecap":"square"}))}),window.peity=a,{}})());
-//# sourceMappingURL=peity_vanilla.js.map

data/app/assets/javascripts/peity_vanilla.js.map

@@ -1 +0,0 @@
-{"version":3,"sources":["webpack://piety_vanilla/webpack/universalModuleDefinition","webpack://piety_vanilla/./src/index.js"],"names":["root","factory","exports","module","define","amd","i","a","self","peity","element","type","options","chart","svgSupported","$this","dataset","Peity","Object","assign","defaults","JSON","parse","addEventListener","draw","$el","opts","this","PeityPrototype","prototype","svgElement","tag","attrs","attr","document","createElementNS","setAttribute","createSVGRect","graphers","call","after","isFunction","o","apply","fill","_","length","prepare","width","height","$svg","style","display","innerHTML","values","innerText","split","delimiter","map","value","parseFloat","register","grapher","radius","match","n","v1","v2","Math","max","sum","diameter","clientWidth","clientHeight","cx","cy","min","innerRadius","pi","PI","scale","radians","cos","sin","cumulative","cumulativePlusValue","d","portion","$node","y1","x2","y2","join","r","concat","push","append","pie","padding","undefined","diff","xScale","x","input","yScale","y","h","w","valueY","stroke","strokeWidth","zero","coords","points","slice","window"],"mappings":"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","file":"peity_vanilla.js","sourcesContent":["(function webpackUniversalModuleDefinition(root, factory) {\n\tif(typeof exports === 'object' && typeof module === 'object')\n\t\tmodule.exports = factory();\n\telse if(typeof define === 'function' && define.amd)\n\t\tdefine([], factory);\n\telse {\n\t\tvar a = factory();\n\t\tfor(var i in a) (typeof exports === 'object' ? exports : root)[i] = a[i];\n\t}\n})(self, () => {\nreturn ","\"use strict\";\r\n\r\nvar peity = function(element, type, options) {\r\n  if (svgSupported) {\r\n    var $this = element\r\n    var chart = $this.dataset['_peity']\r\n\r\n    chart = new Peity(\r\n      $this,\r\n      type,\r\n      Object.assign({},\r\n        peity.defaults[type],\r\n        JSON.parse($this.dataset['peity'] || '{}'),\r\n        options)\r\n    )\r\n\r\n    $this.addEventListener(\"change\", function() { chart.draw() })\r\n    $this.dataset['_peity'] = chart\r\n\r\n    chart.draw()\r\n    return $this;\r\n  }\r\n};\r\n\r\nvar Peity = function($el, type, opts) {\r\n  this.$el = $el\r\n  this.type = type\r\n  this.opts = opts\r\n}\r\n\r\nvar PeityPrototype = Peity.prototype\r\n\r\nvar svgElement = PeityPrototype.svgElement = function(tag, attrs) {\r\n  var element = document.createElementNS('http://www.w3.org/2000/svg', tag)\r\n  for(var attr in attrs) {\r\n    element.setAttribute(attr, attrs[attr])\r\n  }\r\n  return element;\r\n}\r\n\r\n// https://gist.github.com/madrobby/3201472\r\nvar svgSupported = 'createElementNS' in document && svgElement('svg', {}).createSVGRect()\r\n\r\nPeityPrototype.draw = function() {\r\n  var opts = this.opts\r\n  peity.graphers[this.type].call(this, opts)\r\n  if (opts.after) opts.after.call(this, opts)\r\n}\r\n\r\nPeityPrototype.isFunction = function(o) { return null !== o && \"function\" === typeof o && !!o.apply; }\r\n\r\nPeityPrototype.fill = function() {\r\n  var fill = this.opts.fill\r\n\r\n  return PeityPrototype.isFunction(fill)\r\n    ? fill\r\n    : function(_, i) { return fill[i % fill.length] }\r\n}\r\n\r\nPeityPrototype.prepare = function(width, height) {\r\n  if (!this.$svg) {\r\n    this.$el.style.display = 'none'\r\n    this.$el.after(\r\n      this.$svg = svgElement('svg', {\r\n        \"class\": \"peity\"\r\n      })\r\n    )\r\n  }\r\n\r\n  this.$svg.innerHTML = \"\";\r\n  this.$svg.setAttribute(\"width\", width)\r\n  this.$svg.setAttribute(\"height\", height)\r\n\r\n  return this.$svg;\r\n}\r\n\r\nPeityPrototype.values = function() {\r\n  return this.$el.innerText.split(this.opts.delimiter).map(function(value) {\r\n    return parseFloat(value)\r\n  })\r\n}\r\n\r\npeity.defaults = {}\r\npeity.graphers = {}\r\n\r\npeity.register = function(type, defaults, grapher) {\r\n  this.defaults[type] = defaults\r\n  this.graphers[type] = grapher\r\n}\r\n\r\npeity.register(\r\n  'pie',\r\n  {\r\n    fill: ['#ff9900', '#fff4dd', '#ffc66e'],\r\n    radius: 8\r\n  },\r\n  function(opts) {\r\n    if (!opts.delimiter) {\r\n      var delimiter = this.$el.innerText.match(/[^0-9\\.]/)\r\n      opts.delimiter = delimiter ? delimiter[0] : \",\"\r\n    }\r\n\r\n    var values = this.values().map(function(n) {\r\n      return n > 0 ? n : 0\r\n    });\r\n\r\n    if (opts.delimiter == \"/\") {\r\n      var v1 = values[0]\r\n      var v2 = values[1]\r\n      values = [v1, Math.max(0, v2 - v1)]\r\n    }\r\n\r\n    var i = 0\r\n    var length = values.length\r\n    var sum = 0\r\n\r\n    for (; i < length; i++) {\r\n      sum += values[i]\r\n    }\r\n\r\n    if (!sum) {\r\n      length = 2\r\n      sum = 1\r\n      values = [0, 1]\r\n    }\r\n\r\n    var diameter = opts.radius * 2\r\n\r\n    var $svg = this.prepare(\r\n      opts.width || diameter,\r\n      opts.height || diameter\r\n    )\r\n\r\n    var width = $svg.clientWidth\r\n      , height = $svg.clientHeight\r\n      , cx = width / 2\r\n      , cy = height / 2\r\n\r\n    var radius = Math.min(cx, cy)\r\n      , innerRadius = opts.innerRadius\r\n\r\n    if (this.type == 'donut' && !innerRadius) {\r\n      innerRadius = radius * 0.5\r\n    }\r\n\r\n    var pi = Math.PI\r\n    var fill = this.fill()\r\n\r\n    var scale = this.scale = function(value, radius) {\r\n      var radians = value / sum * pi * 2 - pi / 2\r\n\r\n      return [\r\n        radius * Math.cos(radians) + cx,\r\n        radius * Math.sin(radians) + cy\r\n      ]\r\n    }\r\n\r\n    var cumulative = 0\r\n\r\n    for (i = 0; i < length; i++) {\r\n      var value = values[i]\r\n        , portion = value / sum\r\n        , $node\r\n\r\n      if (portion == 0) continue\r\n\r\n      if (portion == 1) {\r\n        if (innerRadius) {\r\n          var x2 = cx - 0.01\r\n            , y1 = cy - radius\r\n            , y2 = cy - innerRadius\r\n\r\n          $node = svgElement('path', {\r\n            d: [\r\n              'M', cx, y1,\r\n              'A', radius, radius, 0, 1, 1, x2, y1,\r\n              'L', x2, y2,\r\n              'A', innerRadius, innerRadius, 0, 1, 0, cx, y2\r\n            ].join(' '),\r\n            'data-value': value,\r\n          })\r\n        } else {\r\n          $node = svgElement('circle', {\r\n            cx: cx,\r\n            cy: cy,\r\n            'data-value': value,\r\n            r: radius\r\n          })\r\n        }\r\n      } else {\r\n        var cumulativePlusValue = cumulative + value\r\n\r\n        var d = ['M'].concat(\r\n          scale(cumulative, radius),\r\n          'A', radius, radius, 0, portion > 0.5 ? 1 : 0, 1,\r\n          scale(cumulativePlusValue, radius),\r\n          'L'\r\n        )\r\n\r\n        if (innerRadius) {\r\n          d = d.concat(\r\n            scale(cumulativePlusValue, innerRadius),\r\n            'A', innerRadius, innerRadius, 0, portion > 0.5 ? 1 : 0, 0,\r\n            scale(cumulative, innerRadius)\r\n          )\r\n        } else {\r\n          d.push(cx, cy)\r\n        }\r\n\r\n        cumulative += value\r\n\r\n        $node = svgElement('path', {\r\n          d: d.join(\" \"),\r\n          'data-value': value,\r\n        })\r\n      }\r\n\r\n      $node.setAttribute('fill', fill.call(this, value, i, values))\r\n\r\n      $svg.append($node)\r\n    }\r\n  }\r\n)\r\n\r\npeity.register(\r\n  'donut',\r\n  Object.assign(true, {}, peity.defaults.pie),\r\n  function(opts) {\r\n    peity.graphers.pie.call(this, opts)\r\n  }\r\n)\r\n\r\npeity.register(\r\n  'bar',\r\n  {\r\n    delimiter: \",\",\r\n    fill: [\"#4D89F9\"],\r\n    height: 16,\r\n    min: 0,\r\n    padding: 0.1,\r\n    width: 32\r\n  },\r\n  function(opts) {\r\n    var values = this.values()\r\n      , max = Math.max.apply(Math, opts.max == undefined ? values : values.concat(opts.max))\r\n      , min = Math.min.apply(Math, opts.min == undefined ? values : values.concat(opts.min))\r\n\r\n    var $svg = this.prepare(opts.width, opts.height)\r\n      , width = $svg.clientWidth\r\n      , height = $svg.clientHeight\r\n      , diff = max - min\r\n      , padding = opts.padding\r\n      , fill = this.fill()\r\n\r\n    var xScale = this.x = function(input) {\r\n      return input * width / values.length\r\n    }\r\n\r\n    var yScale = this.y = function(input) {\r\n      return height - (\r\n        diff\r\n          ? ((input - min) / diff) * height\r\n          : 1\r\n      )\r\n    }\r\n\r\n    for (var i = 0; i < values.length; i++) {\r\n      var x = xScale(i + padding)\r\n        , w = xScale(i + 1 - padding) - x\r\n        , value = values[i]\r\n        , valueY = yScale(value)\r\n        , y1 = valueY\r\n        , y2 = valueY\r\n        , h\r\n\r\n      if (!diff) {\r\n        h = 1\r\n      } else if (value < 0) {\r\n        y1 = yScale(Math.min(max, 0))\r\n      } else {\r\n        y2 = yScale(Math.max(min, 0))\r\n      }\r\n\r\n      h = y2 - y1\r\n\r\n      if (h == 0) {\r\n        h = 1\r\n        if (max > 0 && diff) y1--\r\n      }\r\n\r\n      $svg.append(\r\n        svgElement('rect', {\r\n          'data-value': value,\r\n          fill: fill.call(this, value, i, values),\r\n          x: x,\r\n          y: y1,\r\n          width: w,\r\n          height: h\r\n        })\r\n      )\r\n    }\r\n  }\r\n);\r\n\r\npeity.register(\r\n  \"line\",\r\n  {\r\n    delimiter: \",\",\r\n    fill: \"#c6d9fd\",\r\n    height: 16,\r\n    min: 0,\r\n    stroke: \"#4d89f9\",\r\n    strokeWidth: 1,\r\n    width: 32\r\n  },\r\n  function(opts) {\r\n    var values = this.values()\r\n    if (values.length == 1) values.push(values[0])\r\n    var max = Math.max.apply(Math, opts.max == undefined ? values : values.concat(opts.max))\r\n      , min = Math.min.apply(Math, opts.min == undefined ? values : values.concat(opts.min))\r\n\r\n    var $svg = this.prepare(opts.width, opts.height)\r\n      , strokeWidth = opts.strokeWidth\r\n      , width = $svg.clientWidth\r\n      , height = $svg.clientHeight - strokeWidth\r\n      , diff = max - min\r\n\r\n    var xScale = this.x = function(input) {\r\n      return input * (width / (values.length - 1))\r\n    }\r\n\r\n    var yScale = this.y = function(input) {\r\n      var y = height\r\n\r\n      if (diff) {\r\n        y -= ((input - min) / diff) * height\r\n      }\r\n\r\n      return y + strokeWidth / 2\r\n    }\r\n\r\n    var zero = yScale(Math.max(min, 0))\r\n      , coords = [0, zero]\r\n\r\n    for (var i = 0; i < values.length; i++) {\r\n      coords.push(\r\n        xScale(i),\r\n        yScale(values[i])\r\n      )\r\n    }\r\n\r\n    coords.push(width, zero)\r\n\r\n    if (opts.fill) {\r\n      $svg.append(\r\n        svgElement('polygon', {\r\n          fill: opts.fill,\r\n          points: coords.join(' ')\r\n        })\r\n      )\r\n    }\r\n\r\n    if (strokeWidth) {\r\n      $svg.append(\r\n        svgElement('polyline', {\r\n          fill: 'none',\r\n          points: coords.slice(2, coords.length - 2).join(' '),\r\n          stroke: opts.stroke,\r\n          'stroke-width': strokeWidth,\r\n          'stroke-linecap': 'square'\r\n        })\r\n      )\r\n    }\r\n  }\r\n);\r\n\r\n// rework?\r\nwindow.peity = peity;"],"sourceRoot":""}