peity_vanilla_rails 0.1.2 → 0.2.0

checksums.yaml

@@ -1,7 +1,7 @@
 ---
 SHA256:
-  metadata.gz: d8ef36129e4a4f5a3e7b6ff1017312096f2d491176b363b207d8124512ea6b76
-  data.tar.gz: 6cc33d0c33baaa411e68fa616453ad124a11e25fc62c1397656caa6608accffb
+  metadata.gz: 53261d4741de90d14704c23e23624151184465c0e1a57edcd00b32b6751167e5
+  data.tar.gz: f7215991dffe2cc9756842981d36714b72c779cf7fabf9f3e522fda478b2a42d
 SHA512:
-  metadata.gz: 2bc857d3c1db58c24ecfa884cac3f4ad50f220ab83c40747b8e6e11a9e0a95920ae75bbfa32be8653bdfc63f91e3382459457a17f02baa6f38a299bda8657ef8
-  data.tar.gz: 7cba004c469dfad243bf47cad673756a6b734adb7138c8e39c60a5059fde793a0bd9857b399e31e0d02618d6e236815e0c1f148e725ae9a3b599352bf1d3b177
+  metadata.gz: 38eb290c3931f3fcb6ddb0b0397e039793a15b1475915839b02575640b413cd48fecd97b0e327cfe8cf4992096af73c9e6c645fee297525bcf01e7792f0d00c6
+  data.tar.gz: ca345ad7e083cb26559c9605235718795e81a374ea819e6349f09f239475c254c028cc22ba3ebd7bdb94d7656edfa1c465427a87d46b4a4a73e5a3498f743a9b

data/README.md

@@ -2,7 +2,7 @@
 
 [![RailsJazz](https://github.com/igorkasyanchuk/rails_time_travel/blob/main/docs/my_other.svg?raw=true)](https://www.railsjazz.com)
 
-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.
+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"/>
 
@@ -19,7 +19,7 @@ gem "peity_vanilla_rails"
 ### For Assets Pipeline:
 
 ```javascript
-//= require peity_vanilla.js
+//= require peity-vanilla-rails.js
 ```
 
 ### For Importmaps
@@ -27,11 +27,12 @@ gem "peity_vanilla_rails"
 In `application.js`
 
 ```js
-import peity from "peity";
-
-window.peity = peity;
+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
@@ -64,20 +65,19 @@ Check the [original](https://github.com/railsjazz/peity_vanilla) page.
 <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"/>
 
-```html
-<span class="updating-chart">5,3,9,6,5,9,7,3,5,2,5,3,9,6,5,9,7,3,5,2</span>
+```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') %>
 
 <script>
-  var updatingChart = peity(document.getElementById("updating-chart"), "line", { width: 64 });
+  var updatingChart = document.getElementById("updating-chart");
   
   setInterval(function() {
     var random = Math.round(Math.random() * 10)
-    var values = updatingChart.element.innerText.split(",")
+    var values = updatingChart.innerText.split(",")
     values.shift()
     values.push(random)
 
-    updatingChart.element.innerText = values.join(",")
-    updatingChart.element.dispatchEvent(new Event('change'))
+    updatingChart.innerText = values.join(",")
   }, 1000);
 </script>
 ```
@@ -132,7 +132,6 @@ You can pass in `options` any of the attributes.
 
 ## TODO
 
-- stimulus, turbo, etc.
 - remote datasource and autoupdate
 
 ## Contributing

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}();