{"id":13515141,"url":"https://github.com/railsjazz/peity_vanilla","last_synced_at":"2025-04-10T20:21:39.779Z","repository":{"id":37559160,"uuid":"486670495","full_name":"railsjazz/peity_vanilla","owner":"railsjazz","description":"Vanila JS Sparklines library inspired by peity.js","archived":false,"fork":false,"pushed_at":"2024-08-20T10:55:22.000Z","size":481,"stargazers_count":77,"open_issues_count":2,"forks_count":3,"subscribers_count":4,"default_branch":"main","last_synced_at":"2025-04-06T10:37:35.839Z","etag":null,"topics":["charts","javascript","sparklines"],"latest_commit_sha":null,"homepage":"https://www.railsjazz.com/","language":"JavaScript","has_issues":true,"has_wiki":null,"has_pages":null,"mirror_url":null,"source_name":null,"license":"mit","status":null,"scm":"git","pull_requests_enabled":true,"icon_url":"https://github.com/railsjazz.png","metadata":{"files":{"readme":"README.md","changelog":null,"contributing":null,"funding":".github/FUNDING.yml","license":"MIT-LICENSE","code_of_conduct":null,"threat_model":null,"audit":null,"citation":null,"codeowners":null,"security":null,"support":null,"governance":null,"roadmap":null,"authors":null,"dei":null,"publiccode":null,"codemeta":null},"funding":{"patreon":"igorkasyanchuk"}},"created_at":"2022-04-28T16:30:45.000Z","updated_at":"2025-03-24T11:02:47.000Z","dependencies_parsed_at":"2024-11-06T21:41:17.119Z","dependency_job_id":null,"html_url":"https://github.com/railsjazz/peity_vanilla","commit_stats":{"total_commits":24,"total_committers":2,"mean_commits":12.0,"dds":0.375,"last_synced_commit":"b69d428a5a61bad6c390818eec60d6aa52d95b41"},"previous_names":[],"tags_count":4,"template":false,"template_full_name":null,"repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/railsjazz%2Fpeity_vanilla","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/railsjazz%2Fpeity_vanilla/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/railsjazz%2Fpeity_vanilla/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/railsjazz%2Fpeity_vanilla/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/railsjazz","download_url":"https://codeload.github.com/railsjazz/peity_vanilla/tar.gz/refs/heads/main","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":248289917,"owners_count":21078922,"icon_url":"https://github.com/github.png","version":null,"created_at":"2022-05-30T11:31:42.601Z","updated_at":"2022-07-04T15:15:14.044Z","host_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub","repositories_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories","repository_names_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repository_names","owners_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners"}},"keywords":["charts","javascript","sparklines"],"created_at":"2024-08-01T05:01:06.741Z","updated_at":"2025-04-10T20:21:39.754Z","avatar_url":"https://github.com/railsjazz.png","language":"JavaScript","funding_links":["https://patreon.com/igorkasyanchuk"],"categories":["JavaScript"],"sub_categories":[],"readme":"# Peity Vanilla JS\n\n[![Listed on OpenSource-Heroes.com](https://opensource-heroes.com/badge-v1.svg)](https://opensource-heroes.com/r/railsjazz/peity_vanilla)\n\n\u003cimg width=\"900\" alt=\"peity\" src=\"https://user-images.githubusercontent.com/11101/166119610-3b7c894e-1995-45ce-90f1-b94411a04d67.png\"\u003e\n\nConverts an element's content into a `\u003csvg\u003e` mini pie  donut  line  or bar chart  and is compatible with any browser that supports `\u003csvg\u003e`: Chrome, Firefox, IE9+, Opera, Safari.\n\nPS: Based on the original implementation: http://benpickles.github.io/peity/. \n\n## Installation\n\nJust download `peity-vanilla.min.js` and add to your HTML file. \n\nDownload link: https://raw.githubusercontent.com/railsjazz/peity_vanilla/main/dist/peity-vanilla.js.\n\n```html\n\u003cscript type=\"text/javascript\" src=\"peity-vanilla.min.js\"\u003e\u003c/script\u003e\n```\n\nAnd start using :)\n\n## Pie Charts\n\n\u003cimg src=\"https://github.com/railsjazz/peity_vanilla/raw/main/docs/pie.png\" height=\"30px\"/\u003e\n\n```html\n\u003cspan class=\"pie\"\u003e1/5\u003c/span\u003e\n\u003cspan class=\"pie\"\u003e226/360\u003c/span\u003e\n\u003cspan class=\"pie\"\u003e0.52/1.561\u003c/span\u003e\n\u003cspan class=\"pie\"\u003e1,4\u003c/span\u003e\n\u003cspan class=\"pie\"\u003e226,134\u003c/span\u003e\n\u003cspan class=\"pie\"\u003e0.52,1.041\u003c/span\u003e\n\u003cspan class=\"pie\"\u003e1,2,3,2,2\u003c/span\u003e\n\n\u003cscript\u003e\n  document.querySelectorAll(\".pie\").forEach(e =\u003e peity(e, \"pie\"))\n\u003c/script\u003e\n```\n\nThere are two subtly different pie chart semantics, a \"/\" delimiter is assumed to mean \"three out of five\" and only the first two values will be drawn, otherwise all of the values are included in the chart and the total is the sum of all values.\n\nYou can also pass delimiter, fill, height, radius and width options. Passing a radius will set the correct width and height, the pie will always be a circle that fits the available space.\n\n## Donut Charts\n\n\u003cimg src=\"https://github.com/railsjazz/peity_vanilla/raw/main/docs/donut.png\" height=\"30px\"/\u003e\n\n```html\n\u003cspan class=\"donut\"\u003e1/5\u003c/span\u003e\n\u003cspan class=\"donut\"\u003e226/360\u003c/span\u003e\n\u003cspan class=\"donut\"\u003e0.52/1.561\u003c/span\u003e\n\u003cspan class=\"donut\"\u003e1,4\u003c/span\u003e\n\u003cspan class=\"donut\"\u003e226,134\u003c/span\u003e\n\u003cspan class=\"donut\"\u003e0.52,1.041\u003c/span\u003e\n\u003cspan class=\"donut\"\u003e1,2,3,2,2\u003c/span\u003e\n\n\u003cscript\u003e\n  document.querySelectorAll(\".donut\").forEach(e =\u003e peity(e, \"donut\"))\n\u003c/script\u003e\n```\n\nDonut charts are the same as pie charts and take the same options with an added innerRadius option which defaults to half the radius.\n\n## Line Charts\n\n\u003cimg src=\"https://github.com/railsjazz/peity_vanilla/raw/main/docs/line.png\" height=\"30px\"/\u003e\n\n\n```html\n\u003cspan class=\"line\"\u003e5,3,9,6,5,9,7,3,5,2\u003c/span\u003e\n\u003cspan class=\"line\"\u003e5,3,2,-1,-3,-2,2,3,5,2\u003c/span\u003e\n\u003cspan class=\"line\"\u003e0,-3,-6,-4,-5,-4,-7,-3,-5,-2\u003c/span\u003e\n\n\u003cscript\u003e\n  document.querySelectorAll(\".line\").forEach(e =\u003e peity(e, \"line\"))\n\u003c/script\u003e\n```\n\nLine charts work on a comma-separated list of digits. Line charts can take the following options: delimiter, fill, height, max, min, stroke, strokeWidth and width.\n\n## Bar Charts\n\n\u003cimg src=\"https://github.com/railsjazz/peity_vanilla/raw/main/docs/bar.png\" height=\"30px\"/\u003e\n\n\n```html\n\u003cspan class=\"bar\"\u003e5,3,9,6,5,9,7,3,5,2\u003c/span\u003e\n\u003cspan class=\"bar\"\u003e5,3,2,-1,-3,-2,2,3,5,2\u003c/span\u003e\n\u003cspan class=\"bar\"\u003e0,-3,-6,-4,-5,-4,-7,-3,-5,-2\u003c/span\u003e\n\n\u003cscript\u003e\n  document.querySelectorAll(\".bar\").forEach(e =\u003e peity(e, \"bar\"))\n\u003c/script\u003e\n```\n\nBar charts work in the same way as line charts and take the following options: `delimiter, fill, height, max, min, padding and width`.\n\n## data-* attributes\n\n\u003cimg src=\"https://github.com/railsjazz/peity_vanilla/raw/main/docs/custom.png\" height=\"30px\"/\u003e\n\nData attributes can be used to pass custom settings per-chart - options explicitly passed to the peity() function take precedence over data-* attributes.\n\n```html\n\u003cp class=\"data-attributes\"\u003e\n  \u003cspan data-peity='{ \"fill\": [\"red\", \"#eeeeee\"],    \"innerRadius\": 10, \"radius\": 40 }'\u003e1/7\u003c/span\u003e\n  \u003cspan data-peity='{ \"fill\": [\"orange\", \"#eeeeee\"], \"innerRadius\": 14, \"radius\": 36 }'\u003e2/7\u003c/span\u003e\n  \u003cspan data-peity='{ \"fill\": [\"yellow\", \"#eeeeee\"], \"innerRadius\": 16, \"radius\": 32 }'\u003e3/7\u003c/span\u003e\n  \u003cspan data-peity='{ \"fill\": [\"green\", \"#eeeeee\"],  \"innerRadius\": 18, \"radius\": 28 }'\u003e4/7\u003c/span\u003e\n  \u003cspan data-peity='{ \"fill\": [\"blue\", \"#eeeeee\"],   \"innerRadius\": 20, \"radius\": 24 }'\u003e5/7\u003c/span\u003e\n  \u003cspan data-peity='{ \"fill\": [\"indigo\", \"#eeeeee\"], \"innerRadius\": 18, \"radius\": 20 }'\u003e6/7\u003c/span\u003e\n  \u003cspan data-peity='{ \"fill\": [\"violet\", \"#eeeeee\"], \"innerRadius\": 15, \"radius\": 16 }'\u003e7/7\u003c/span\u003e\n\u003c/p\u003e\n\n\u003cscript\u003e\n  document.querySelectorAll(\".data-attributes span\").forEach(e =\u003e peity(e, \"donut\"))\n\u003c/script\u003e\n```\n\n## Setting Colours Dynamically\n\n\u003cimg src=\"https://github.com/railsjazz/peity_vanilla/raw/main/docs/color.png\" height=\"30px\"/\u003e\n\n\n```html\n\u003cspan class=\"bar-colours-1\"\u003e5,3,9,6,5,9,7,3,5,2\u003c/span\u003e\n\u003cspan class=\"bar-colours-2\"\u003e5,3,2,-1,-3,-2,2,3,5,2\u003c/span\u003e\n\u003cspan class=\"bar-colours-3\"\u003e0,-3,-6,-4,-5,-4,-7,-3,-5,-2\u003c/span\u003e\n\u003cspan class=\"pie-colours-1\"\u003e4,7,6,5\u003c/span\u003e\n\u003cspan class=\"pie-colours-2\"\u003e5,3,9,6,5\u003c/span\u003e\n\n\u003cscript\u003e\n  document.querySelectorAll(\".bar-colours-1\").forEach(e =\u003e peity(e, \"bar\", {\n    fill: [\"red\", \"green\", \"blue\"]\n  }))\n\n  document.querySelectorAll(\".bar-colours-2\").forEach(e =\u003e peity(e, \"bar\", {\n    fill: function(value) {\n      return value \u003e 0 ? \"green\" : \"red\"\n    }\n  }))\n\n  document.querySelectorAll(\".bar-colours-3\").forEach(e =\u003e peity(e, \"bar\", {\n    fill: function(_, i, all) {\n      var g = parseInt((i / all.length) * 255)\n      return \"rgb(255, \" + g + \", 0)\"\n    }\n  }))\n  \n  document.querySelectorAll(\".pie-colours-1\").forEach(e =\u003e peity(e, \"bar\", {\n    fill: [\"cyan\", \"magenta\", \"yellow\", \"black\"]\n  }))\n\n  document.querySelectorAll(\".pie-colours-2\").forEach(e =\u003e peity(e, \"bar\", {\n    fill: function(_, i, all) {\n      var g = parseInt((i / all.length) * 255)\n      return \"rgb(255, \" + g + \", 0)\"\n    }\n  }))\n\u003c/script\u003e\n```\n\nPie, donut and bar chart colours can be defined dynamically based on the values of the chart. When passing an array its values are cycled, when passing a function it is called once for each value allowing you to define each bar or segment's colour. The callback is invoked with the value, its index, and the full array of values - the same arguments as the callback for Array#forEach.\n\n## Updating Charts\n\n\u003cimg src=\"https://github.com/railsjazz/peity_vanilla/raw/main/docs/animation.gif\" height=\"30px\"/\u003e\n\nCharts can be updated by changing the selection's text content. The chart will be redrawn with the same options that were originally passed to it.\n\n```html\n\u003cspan class=\"updating-chart\"\u003e5,3,9,6,5,9,7,3,5,2,5,3,9,6,5,9,7,3,5,2\u003c/span\u003e\n\n\u003cscript\u003e\n  var updatingChart = peity(document.getElementById(\"updating-chart\"), \"line\", { width: 64 });\n  \n  setInterval(function() {\n    var random = Math.round(Math.random() * 10)\n    var values = updatingChart.innerText.split(\",\")\n    values.shift()\n    values.push(random)\n\n    updatingChart.innerText = values.join(\",\")\n  }, 1000);\n\u003c/script\u003e\n```\n\n## Default Settings\n\n```html\n\u003cscript\u003e\n  peity.defaults.pie = {\n    delimiter: null,\n    fill: [\"#58508d\", \"#ffa600\", \"#ff6361\"],\n    height: null,\n    radius: 8,\n    width: null\n  }\n\n  peity.defaults.donut = {\n    delimiter: null,\n    fill: [\"#ff9900\", \"#fff4dd\", \"#ffd592\"],\n    height: null,\n    innerRadius: null,\n    radius: 8,\n    width: null\n  }\n\n  peity.defaults.line = {\n    delimiter: \",\",\n    fill: \"#fff4dd\",\n    height: 16,\n    max: null,\n    min: 0,\n    stroke: \"#ffa600\",\n    strokeWidth: 1,\n    width: 32\n  }\n\n  peity.defaults.bar = {\n    delimiter: \",\",\n    fill: [\"#4d89f9\"],\n    height: 16,\n    max: null,\n    min: 0,\n    padding: 0.1,\n    width: 32\n  } \n\u003c/script\u003e\n```\n\n# Future\n\nPlease if you want to contribute here is a list with some ideas:\n\n- version for react, angular, vue, ...\n- unit tests\n- TypeScript?\n- tooltips\n- more chart types (stacked, multi-line, etc)\n- more options for existing charts\n- build process and instructions\n- remote datasource\n- background color?\n\n# Build Process\n\n`yarn build` - production.\n\n# Credits\n\n[\u003cimg src=\"https://opensource-heroes.com/svg/embed/railsjazz/peity_vanilla\"\n/\u003e](https://opensource-heroes.com/r/railsjazz/peity_vanilla)\n\nThanks for inspiration and original jQuery implementation - http://benpickles.github.io/peity/. I must admit this version is 98% consist of the original code, even the documentation, so please go to original page and put a \"star\" to original repo.\n\n\n\n[\u003cimg src=\"https://github.com/igorkasyanchuk/rails_time_travel/blob/main/docs/more_gems.png?raw=true\"\n/\u003e](https://www.railsjazz.com/?utm_source=github\u0026utm_medium=bottom\u0026utm_campaign=peity_vanilla)\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Frailsjazz%2Fpeity_vanilla","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Frailsjazz%2Fpeity_vanilla","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Frailsjazz%2Fpeity_vanilla/lists"}