peity_vanilla_rails 0.1.2 → 0.2.0

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

@@ -1 +1,2 @@
-pin 'peity', to: 'peity_vanilla.esm.js'
+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,14 +1,9 @@
 module PeityVanillaRails
   class Railtie < ::Rails::Engine
-    PRECOMPILE_ASSETS = Dir[root.join("app/assets/javascripts/**/*")]
-    initializer 'peity_vanilla_rails.assets' do |app|
-      if app.config.respond_to?(:assets)
-        app.config.assets.precompile += PRECOMPILE_ASSETS
-      end
-    end
-
+    PRECOMPILE_ASSETS = %w( peity-vanilla-rails.esm.js peity-vanilla.esm.js )
     initializer "peity_vanilla_rails.importmap", before: "importmap" do |app|
       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,52 +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{
-            function init_peity_charts_#{id}() {
-              var element = document.getElementById("#{id}");
-
-              if (!element) {
-                return;
-              }
-
-              if(element.getAttribute("data-_peity")) {
-                return;
-              }
-
-              window.peity(element, "#{type}");
-            }
-
-            window.addEventListener('load', init_peity_charts_#{id});
-            window.addEventListener('turbo:load', init_peity_charts_#{id});
-            window.addEventListener('turbolinks:load', init_peity_charts_#{id});
-          }.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.2"
+  VERSION = "0.2.0"
 end

metadata

@@ -1,7 +1,7 @@
 --- !ruby/object:Gem::Specification
 name: peity_vanilla_rails
 version: !ruby/object:Gem::Version
-  version: 0.1.2
+  version: 0.2.0
 platform: ruby
 authors:
 - Igor Kasyanchuk
@@ -9,7 +9,7 @@ authors:
 autorequire:
 bindir: bin
 cert_chain: []
-date: 2022-05-01 00:00:00.000000000 Z
+date: 2022-05-02 00:00:00.000000000 Z
 dependencies:
 - !ruby/object:Gem::Dependency
   name: rails
@@ -78,9 +78,10 @@ files:
 - MIT-LICENSE
 - README.md
 - Rakefile
-- app/assets/javascripts/peity_vanilla.esm.js
-- 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
@@ -108,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.