10 |
11 | ## Usage
12 |
13 | 1. add gem to the `Gemfile`
14 |
15 | ```ruby
16 | gem "peity_vanilla_rails"
17 | ```
18 |
19 | 2. Add to `application.js`
20 |
21 | ### For Assets Pipeline:
22 |
23 | ```javascript
24 | //= require peity-vanilla-rails.js
25 | ```
26 |
27 | ### For Importmaps
28 |
29 | In `application.js`
30 |
31 | ```js
32 | import "peity-vanilla-rails";
33 | ```
34 |
35 | #### Note: After `peity-vanilla-rails.js` is imported, it will listen to changes of `peity` and `data-peity` attributes of every DOM element
36 | Pure `peity-vanilla` library is also acessible via `peity-vanilla.js` for Assets Pipeline, and `import peity from "peity-vanilla"` for Importmaps
37 |
38 | 3. Add charts in your code:
39 |
40 | ```erb
41 | 
67 | 
68 | 
69 |
70 | ```erb
71 | <%= 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') %>
72 |
73 |
85 | ```
86 |
87 | ## Default Options
88 |
89 | More information here: https://github.com/railsjazz/peity_vanilla.
90 |
91 | You can pass in `options` any of the attributes.
92 |
93 | ```html
94 |
133 | ```
134 |
135 | ## TODO
136 |
137 | - remote datasource and autoupdate
138 |
139 | ## Contributing
140 |
141 | You are welcome to contribute.
142 |
143 | ## License
144 |
145 | The gem is available as open source under the terms of the [MIT License](https://opensource.org/licenses/MIT).
146 |
147 |
148 | [
](https://www.railsjazz.com/?utm_source=github&utm_medium=bottom&utm_campaign=peity_vanilla_rails)
150 |
151 | [](https://buymeacoffee.com/igorkasyanchuk)
152 |
--------------------------------------------------------------------------------
/Rakefile:
--------------------------------------------------------------------------------
1 | require "bundler/setup"
2 |
3 | require "bundler/gem_tasks"
4 |
--------------------------------------------------------------------------------
/app/assets/javascripts/peity-vanilla-rails.esm.js:
--------------------------------------------------------------------------------
1 | /*!
2 | Peity Vanila Rails 0.2.2
3 | Copyright © 2022 RailsJazz
4 | https://railsjazz.com
5 | */
6 |
7 | /*!
8 | Peity Vanila JS 0.0.8
9 | Copyright © 2022 RailsJazz
10 | https://railsjazz.com
11 | */
12 |
13 | const isFunction = (o) =>
14 | o !== null && typeof o === "function" && !!o.apply;
15 |
16 | const svgElement = (tag, attrs) => {
17 | const element = document.createElementNS("http://www.w3.org/2000/svg", tag);
18 | for (var attr in attrs) {
19 | element.setAttribute(attr, attrs[attr]);
20 | }
21 | return element;
22 | };
23 |
24 | const svgSupported =
25 | "createElementNS" in document && svgElement("svg", {}).createSVGRect();
26 |
27 | class Peity {
28 | static defaults = {};
29 | static graphers = {};
30 |
31 | constructor(element, type, options = {}) {
32 | this.element = element;
33 | this.type = type;
34 | this.options = Object.assign(
35 | {},
36 | Peity.defaults[this.type],
37 | JSON.parse(element.dataset["peity"] || "{}"),
38 | options
39 | );
40 |
41 | if(this.element._peity) {
42 | this.element._peity.destroy();
43 | }
44 | this.element._peity = this;
45 | }
46 |
47 | draw() {
48 | const options = this.options;
49 | Peity.graphers[this.type](this);
50 | if (isFunction(options.after)) options.after.call(this, options);
51 | }
52 |
53 | fill() {
54 | var fill = this.options.fill;
55 |
56 | return isFunction(fill)
57 | ? fill
58 | : function (_, i) {
59 | return fill[i % fill.length];
60 | };
61 | }
62 |
63 | prepare(width, height) {
64 | if (!this.svg) {
65 | this.element.style.display = "none";
66 | this.element.after(
67 | (this.svg = svgElement("svg", {
68 | class: "peity",
69 | }))
70 | );
71 | }
72 |
73 | this.svg.innerHTML = "";
74 | this.svg.setAttribute("width", width);
75 | this.svg.setAttribute("height", height);
76 |
77 | return this.svg;
78 | }
79 |
80 | get values() {
81 | return this.element.innerText
82 | .split(this.options.delimiter)
83 | .map((value) => parseFloat(value));
84 | }
85 |
86 | mount() {
87 | if (!svgSupported) return;
88 |
89 | this.element.addEventListener("DOMSubtreeModified", this.draw.bind(this));
90 | this.draw();
91 |
92 | this.mounted = true;
93 | }
94 |
95 | unmount() {
96 | this.element.removeEventListener("DOMSubtreeModified", this.draw);
97 | this.svg.remove();
98 | this.mounted = false;
99 | }
100 |
101 | destroy() {
102 | this.unmount();
103 |
104 | delete this.element._peity;
105 | }
106 |
107 | static register(type, defaults, grapher) {
108 | Peity.defaults[type] = defaults;
109 | Peity.graphers[type] = grapher;
110 | }
111 | }
112 |
113 | const renderer$2 = (peity) => {
114 | if (!peity.options.delimiter) {
115 | const delimiter = peity.element.innerText.match(/[^0-9\.]/);
116 | peity.options.delimiter = delimiter ? delimiter[0] : ",";
117 | }
118 |
119 | let values = peity.values.map((n) => (n > 0 ? n : 0));
120 |
121 | if (peity.options.delimiter == "/") {
122 | let v1 = values[0];
123 | let v2 = values[1];
124 | values = [v1, Math.max(0, v2 - v1)];
125 | }
126 |
127 | let i = 0;
128 | let length = values.length;
129 | let sum = 0;
130 |
131 | for (; i < length; i++) {
132 | sum += values[i];
133 | }
134 |
135 | if (!sum) {
136 | length = 2;
137 | sum = 1;
138 | values = [0, 1];
139 | }
140 |
141 | let diameter = peity.options.radius * 2;
142 |
143 | const svg = peity.prepare(
144 | peity.options.width || diameter,
145 | peity.options.height || diameter
146 | );
147 |
148 | const width = svg.clientWidth;
149 | const height = svg.clientHeight;
150 | const cx = width / 2;
151 | const cy = height / 2;
152 |
153 | const radius = Math.min(cx, cy);
154 | let innerRadius = peity.options.innerRadius;
155 |
156 | if (peity.type == "donut" && !innerRadius) {
157 | innerRadius = radius * 0.5;
158 | }
159 |
160 | const fill = peity.fill();
161 |
162 | const scale = (value, radius) => {
163 | const radians = (value / sum) * Math.PI * 2 - Math.PI / 2;
164 |
165 | return [radius * Math.cos(radians) + cx, radius * Math.sin(radians) + cy];
166 | };
167 |
168 | let cumulative = 0;
169 |
170 | for (i = 0; i < length; i++) {
171 | const value = values[i];
172 | const portion = value / sum;
173 | let node;
174 |
175 | if (portion == 0) continue;
176 |
177 | if (portion == 1) {
178 | if (innerRadius) {
179 | const x2 = cx - 0.01;
180 | const y1 = cy - radius;
181 | const y2 = cy - innerRadius;
182 |
183 | node = svgElement("path", {
184 | d: [
185 | "M",
186 | cx,
187 | y1,
188 | "A",
189 | radius,
190 | radius,
191 | 0,
192 | 1,
193 | 1,
194 | x2,
195 | y1,
196 | "L",
197 | x2,
198 | y2,
199 | "A",
200 | innerRadius,
201 | innerRadius,
202 | 0,
203 | 1,
204 | 0,
205 | cx,
206 | y2,
207 | ].join(" "),
208 | "data-value": value,
209 | });
210 | } else {
211 | node = svgElement("circle", {
212 | cx: cx,
213 | cy: cy,
214 | "data-value": value,
215 | r: radius,
216 | });
217 | }
218 | } else {
219 | const cumulativePlusValue = cumulative + value;
220 |
221 | let d = ["M"].concat(
222 | scale(cumulative, radius),
223 | "A",
224 | radius,
225 | radius,
226 | 0,
227 | portion > 0.5 ? 1 : 0,
228 | 1,
229 | scale(cumulativePlusValue, radius),
230 | "L"
231 | );
232 |
233 | if (innerRadius) {
234 | d = d.concat(
235 | scale(cumulativePlusValue, innerRadius),
236 | "A",
237 | innerRadius,
238 | innerRadius,
239 | 0,
240 | portion > 0.5 ? 1 : 0,
241 | 0,
242 | scale(cumulative, innerRadius)
243 | );
244 | } else {
245 | d.push(cx, cy);
246 | }
247 |
248 | cumulative += value;
249 |
250 | node = svgElement("path", {
251 | d: d.join(" "),
252 | "data-value": value,
253 | });
254 | }
255 |
256 | node.setAttribute("fill", fill.call(peity, value, i, values));
257 |
258 | svg.append(node);
259 | }
260 | };
261 |
262 | const defaults$2 = {
263 | fill: ["#ff9900", "#fff4dd", "#ffc66e"],
264 | radius: 8,
265 | };
266 |
267 | const renderer$1 = (peity) => {
268 | const values = peity.values;
269 | const max = Math.max.apply(
270 | Math,
271 | peity.options.max == undefined ? values : values.concat(peity.options.max)
272 | );
273 | const min = Math.min.apply(
274 | Math,
275 | peity.options.min == undefined ? values : values.concat(peity.options.min)
276 | );
277 |
278 | const svg = peity.prepare(peity.options.width, peity.options.height);
279 | const width = svg.clientWidth;
280 | const height = svg.clientHeight;
281 | const diff = max - min;
282 | const padding = peity.options.padding;
283 | const fill = peity.fill();
284 |
285 | const xScale = (input) => {
286 | return (input * width) / values.length;
287 | };
288 |
289 | const yScale = (input) => {
290 | return height - (diff ? ((input - min) / diff) * height : 1);
291 | };
292 |
293 | for (var i = 0; i < values.length; i++) {
294 | let x = xScale(i + padding);
295 | let w = xScale(i + 1 - padding) - x;
296 | let value = values[i];
297 | let valueY = yScale(value);
298 | let y1 = valueY;
299 | let y2 = valueY;
300 | let h;
301 |
302 | if (!diff) {
303 | h = 1;
304 | } else if (value < 0) {
305 | y1 = yScale(Math.min(max, 0));
306 | } else {
307 | y2 = yScale(Math.max(min, 0));
308 | }
309 |
310 | h = y2 - y1;
311 |
312 | if (h == 0) {
313 | h = 1;
314 | if (max > 0 && diff) y1--;
315 | }
316 |
317 | svg.append(
318 | svgElement("rect", {
319 | "data-value": value,
320 | fill: fill.call(peity, value, i, values),
321 | x: x,
322 | y: y1,
323 | width: w,
324 | height: h,
325 | })
326 | );
327 | }
328 | };
329 |
330 | const defaults$1 = {
331 | delimiter: ",",
332 | fill: ["#4D89F9"],
333 | height: 16,
334 | min: 0,
335 | padding: 0.1,
336 | width: 32,
337 | };
338 |
339 | const renderer = (peity) => {
340 | const values = peity.values;
341 | if (values.length == 1) values.push(values[0]);
342 | const max = Math.max.apply(
343 | Math,
344 | peity.options.max == undefined ? values : values.concat(peity.options.max)
345 | );
346 | const min = Math.min.apply(
347 | Math,
348 | peity.options.min == undefined ? values : values.concat(peity.options.min)
349 | );
350 |
351 | const svg = peity.prepare(peity.options.width, peity.options.height);
352 | const strokeWidth = peity.options.strokeWidth;
353 | const width = svg.clientWidth;
354 | const height = svg.clientHeight - strokeWidth;
355 | const diff = max - min;
356 |
357 | const xScale = (input) => {
358 | return input * (width / (values.length - 1));
359 | };
360 |
361 | const yScale = (input) => {
362 | let y = height;
363 |
364 | if (diff) {
365 | y -= ((input - min) / diff) * height;
366 | }
367 |
368 | return y + strokeWidth / 2;
369 | };
370 |
371 | let zero = yScale(Math.max(min, 0));
372 | let coords = [0, zero];
373 |
374 | for (var i = 0; i < values.length; i++) {
375 | coords.push(xScale(i), yScale(values[i]));
376 | }
377 |
378 | coords.push(width, zero);
379 |
380 | if (peity.options.fill) {
381 | svg.append(
382 | svgElement("polygon", {
383 | fill: peity.options.fill,
384 | points: coords.join(" "),
385 | })
386 | );
387 | }
388 |
389 | if (strokeWidth) {
390 | svg.append(
391 | svgElement("polyline", {
392 | fill: "none",
393 | points: coords.slice(2, coords.length - 2).join(" "),
394 | stroke: peity.options.stroke,
395 | "stroke-width": strokeWidth,
396 | "stroke-linecap": "square",
397 | })
398 | );
399 | }
400 | };
401 |
402 | const defaults = {
403 | delimiter: ",",
404 | fill: "#c6d9fd",
405 | height: 16,
406 | min: 0,
407 | stroke: "#4d89f9",
408 | strokeWidth: 1,
409 | width: 32,
410 | };
411 |
412 | Peity.register("pie", defaults$2, renderer$2);
413 | Peity.register("donut", defaults$2, renderer$2);
414 | Peity.register("bar", defaults$1, renderer$1);
415 | Peity.register("line", defaults, renderer);
416 |
417 | const peity = function (element, type, options) {
418 | const peity = new Peity(element, type, options);
419 | peity.mount();
420 |
421 | return peity;
422 | };
423 |
424 | peity.defaults = Peity.defaults;
425 | peity.graphers = Peity.graphers;
426 |
427 | function domReady() {
428 | return new Promise((resolve) => {
429 | if (document.readyState == "loading") {
430 | document.addEventListener("DOMContentLoaded", resolve);
431 | } else {
432 | resolve();
433 | }
434 | });
435 | }
436 |
437 | const queryPeityElements = (node) => node.matches("[peity]") ? [node] : Array.from(node.querySelectorAll("[peity]"));
438 |
439 | const getPeityType = (node) => node.getAttribute("peity");
440 |
441 | const elementFromNode = (node) => {
442 | if (node.nodeType == Node.ELEMENT_NODE) {
443 | return node;
444 | }
445 | };
446 |
447 | class Watcher {
448 | constructor() {
449 | this.elements = new Set();
450 | }
451 |
452 | async start() {
453 | await domReady();
454 |
455 | this.element = document.documentElement;
456 |
457 | const observer = new MutationObserver(this.callback.bind(this));
458 | observer.observe(this.element, {
459 | childList: true,
460 | attributes: true,
461 | subtree: true,
462 | });
463 |
464 | this.processNodeAdded(this.element);
465 | };
466 |
467 | processNodeAdded(node) {
468 | for (const element of queryPeityElements(node)) {
469 | if (!this.elements.has(element)) {
470 | this.elements.add(element);
471 | peity(element, getPeityType(element));
472 | }
473 | }
474 | };
475 |
476 | processNodeRemoved(node) {
477 | const matches = new Set(queryPeityElements(node));
478 |
479 | for (const element of this.elements) {
480 | if(matches.has(element)) {
481 | this.elements.delete(element);
482 | if (element._peity) {
483 | element._peity.destroy();
484 | }
485 | }
486 | }
487 | };
488 |
489 | processAttributeChanged(mutation) {
490 | const node = mutation.target;
491 | if(!this.elementIsActive(node)) return;
492 |
493 | switch (mutation.attributeName) {
494 | case "peity":
495 | const type = getPeityType(node);
496 | if (type) {
497 | if (!this.elements.has(node)) {
498 | this.elements.add(node);
499 | }
500 | peity(node, type);
501 | } else {
502 | if (this.elements.has(node)) {
503 | this.elements.delete(node);
504 | if (node._peity) {
505 | node._peity.destroy();
506 | }
507 | }
508 | }
509 | break;
510 | case "data-peity":
511 | if (node._peity) {
512 | peity(node, node._peity.type);
513 | }
514 | break;
515 | }
516 | }
517 |
518 | callback(mutationList, observer) {
519 | mutationList.forEach((mutation) => {
520 | switch (mutation.type) {
521 | case "childList":
522 | for (const node of Array.from(mutation.removedNodes)) {
523 | const element = elementFromNode(node);
524 | if (element) {
525 | this.processNodeRemoved(element);
526 | }
527 | }
528 | for (const node of Array.from(mutation.addedNodes)) {
529 | const element = elementFromNode(node);
530 | if (element && this.elementIsActive(element)) {
531 | this.processNodeAdded(element);
532 | }
533 | }
534 | break;
535 | case "attributes":
536 | this.processAttributeChanged(mutation);
537 | break;
538 | }
539 | });
540 | };
541 |
542 | elementIsActive(element) {
543 | return this.element.contains(element);
544 | }
545 | }
546 |
547 | new Watcher().start();
548 |
549 | export { peity as default };
550 |
--------------------------------------------------------------------------------
/app/assets/javascripts/peity-vanilla-rails.min.js:
--------------------------------------------------------------------------------
1 | /*!
2 | Peity Vanila Rails 0.2.2
3 | Copyright © 2022 RailsJazz
4 | https://railsjazz.com
5 | */
6 | var peity=function(){"use strict";
7 | /*!
8 | Peity Vanila JS 0.0.8
9 | Copyright © 2022 RailsJazz
10 | https://railsjazz.com
11 | */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 s in e)i.setAttribute(s,e[s]);return i},i="createElementNS"in document&&e("svg",{}).createSVGRect();class s{static defaults={};static graphers={};constructor(t,e,i={}){this.element=t,this.type=e,this.options=Object.assign({},s.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;s.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){s.defaults[t]=e,s.graphers[t]=i}}const n=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 s=0,n=i.length,o=0;for(;sYou may have mistyped the address or the page may have moved.
63 |If you are the application owner check the logs for more information.
65 |Maybe you tried to change something you didn't have access to.
63 |If you are the application owner check the logs for more information.
65 |If you are the application owner check the logs for more information.
64 |