A Vue version of an excellent peity library for beautiful mini svg graphs.

Related tags

Display images peity
Overview

Peity

A Vue version of an excellent peity library for beautiful mini graphs.

Usage

<template>
  <peity :type="'pie'" :options="{ 'fill': ['red', '#eeeeee'], width: 50, height:50,  'innerRadius': 10, 'radius': 40 }" :data="pieData">peity>
template>

<script>
import Peity from 'vue-peity'

export default {
  components: {
    Peity
  },

  computed: {
    pieData () {
      return this.data.toString()
    }
  },

  data () {
    return {
      data: [1, 2, 3, 2, 2]
    }
  },

  created () {
    setInterval(() => {
      // https://vuejs.org/guide/list.html#Mutation-Methods
      this.data.unshift(this.data.pop())
    }, 377)
  }
}
script>

Badges


fundon.me  ·  GitHub @fundon  ·  Twitter @_fundon

Comments
  • Bump lodash from 4.17.3 to 4.17.19

    Bump lodash from 4.17.3 to 4.17.19

    Bumps lodash from 4.17.3 to 4.17.19.

    Release notes

    Sourced from lodash's releases.

    4.17.16

    Commits
    Maintainer changes

    This version was pushed to npm by mathias, a new releaser for lodash since your current version.


    Dependabot compatibility score

    Dependabot will resolve any conflicts with this PR as long as you don't alter it yourself. You can also trigger a rebase manually by commenting @dependabot rebase.


    Dependabot commands and options

    You can trigger Dependabot actions by commenting on this PR:

    • @dependabot rebase will rebase this PR
    • @dependabot recreate will recreate this PR, overwriting any edits that have been made to it
    • @dependabot merge will merge this PR after your CI passes on it
    • @dependabot squash and merge will squash and merge this PR after your CI passes on it
    • @dependabot cancel merge will cancel a previously requested merge and block automerging
    • @dependabot reopen will reopen this PR if it is closed
    • @dependabot close will close this PR and stop Dependabot recreating it. You can achieve the same result by closing it manually
    • @dependabot ignore this major version will close this PR and stop Dependabot creating any more for this major version (unless you reopen the PR or upgrade to it yourself)
    • @dependabot ignore this minor version will close this PR and stop Dependabot creating any more for this minor version (unless you reopen the PR or upgrade to it yourself)
    • @dependabot ignore this dependency will close this PR and stop Dependabot creating any more for this dependency (unless you reopen the PR or upgrade to it yourself)
    • @dependabot use these labels will set the current labels as the default for future PRs for this repo and language
    • @dependabot use these reviewers will set the current reviewers as the default for future PRs for this repo and language
    • @dependabot use these assignees will set the current assignees as the default for future PRs for this repo and language
    • @dependabot use this milestone will set the current milestone as the default for future PRs for this repo and language

    You can disable automated security fix PRs for this repo from the Security Alerts page.

    dependencies 
    opened by dependabot[bot] 1
  • Bump qs from 6.3.0 to 6.3.3

    Bump qs from 6.3.0 to 6.3.3

    Bumps qs from 6.3.0 to 6.3.3.

    Changelog

    Sourced from qs's changelog.

    6.3.3

    • [Fix] parse: ignore __proto__ keys (#428)
    • [Fix] fix for an impossible situation: when the formatter is called with a non-string value
    • [Fix] utils.merge: avoid a crash with a null target and an array source
    • [Fix] utils.merge`: avoid a crash with a null target and a truthy non-array source
    • [Fix] stringify: fix a crash with strictNullHandling and a custom filter/serializeDate (#279)
    • [Fix] utils: merge: fix crash when source is a truthy primitive & no options are provided
    • [Fix] when parseArrays is false, properly handle keys ending in []
    • [Robustness] stringify: avoid relying on a global undefined (#427)
    • [Refactor] use cached Array.isArray
    • [Refactor] stringify: Avoid arr = arr.concat(...), push to the existing instance (#269)
    • [Docs] Clarify the need for "arrayLimit" option
    • [meta] fix README.md (#399)
    • [meta] Clean up license text so it’s properly detected as BSD-3-Clause
    • [meta] add FUNDING.yml
    • [actions] backport actions from main
    • [Tests] use safer-buffer instead of Buffer constructor
    • [Tests] remove nonexistent tape option
    • [Dev Deps] backport from main

    6.3.2

    • [Fix] follow allowPrototypes option during merge (#201, #200)
    • [Dev Deps] update eslint
    • [Fix] chmod a-x
    • [Fix] support keys starting with brackets (#202, #200)
    • [Tests] up to node v7.7, v6.10, v4.8; disable osx builds since they block linux builds

    6.3.1

    • [Fix] ensure that allowPrototypes: false does not ever shadow Object.prototype properties (thanks, @​snyk!)
    • [Dev Deps] update eslint, @ljharb/eslint-config, browserify, iconv-lite, qs-iconv, tape
    • [Tests] on all node minors; improve test matrix
    • [Docs] document stringify option allowDots (#195)
    • [Docs] add empty object and array values example (#195)
    • [Docs] Fix minor inconsistency/typo (#192)
    • [Docs] document stringify option sort (#191)
    • [Refactor] stringify: throw faster with an invalid encoder
    • [Refactor] remove unnecessary escapes (#184)
    • Remove contributing.md, since qs is no longer part of hapi (#183)
    Commits
    • ff235b4 v6.3.3
    • 4310742 [Fix] parse: ignore __proto__ keys (#428)
    • da1eee0 [Dev Deps] backport from main
    • 2c103b6 [actions] backport actions from main
    • aa4580e [Robustness] stringify: avoid relying on a global undefined (#427)
    • f8510a1 [meta] fix README.md (#399)
    • 4c036ce [Fix] fix for an impossible situation: when the formatter is called with a no...
    • 180bfa5 [meta] Clean up license text so it’s properly detected as BSD-3-Clause
    • e0b2c4b [Tests] use safer-buffer instead of Buffer constructor
    • f7139bf [Fix] utils.merge: avoid a crash with a null target and an array source
    • Additional commits viewable in compare view

    Dependabot compatibility score

    Dependabot will resolve any conflicts with this PR as long as you don't alter it yourself. You can also trigger a rebase manually by commenting @dependabot rebase.


    Dependabot commands and options

    You can trigger Dependabot actions by commenting on this PR:

    • @dependabot rebase will rebase this PR
    • @dependabot recreate will recreate this PR, overwriting any edits that have been made to it
    • @dependabot merge will merge this PR after your CI passes on it
    • @dependabot squash and merge will squash and merge this PR after your CI passes on it
    • @dependabot cancel merge will cancel a previously requested merge and block automerging
    • @dependabot reopen will reopen this PR if it is closed
    • @dependabot close will close this PR and stop Dependabot recreating it. You can achieve the same result by closing it manually
    • @dependabot ignore this major version will close this PR and stop Dependabot creating any more for this major version (unless you reopen the PR or upgrade to it yourself)
    • @dependabot ignore this minor version will close this PR and stop Dependabot creating any more for this minor version (unless you reopen the PR or upgrade to it yourself)
    • @dependabot ignore this dependency will close this PR and stop Dependabot creating any more for this dependency (unless you reopen the PR or upgrade to it yourself)
    • @dependabot use these labels will set the current labels as the default for future PRs for this repo and language
    • @dependabot use these reviewers will set the current reviewers as the default for future PRs for this repo and language
    • @dependabot use these assignees will set the current assignees as the default for future PRs for this repo and language
    • @dependabot use this milestone will set the current milestone as the default for future PRs for this repo and language

    You can disable automated security fix PRs for this repo from the Security Alerts page.

    dependencies 
    opened by dependabot[bot] 0
  • Bump tar from 2.2.1 to 2.2.2

    Bump tar from 2.2.1 to 2.2.2

    Bumps tar from 2.2.1 to 2.2.2.

    Commits
    • 523c5c7 2.2.2
    • 7ecef07 Bump fstream to fix hardlink overwriting vulnerability
    • 9fc84b9 Use {} for hardlink tracking instead of []
    • 15e59f1 Only track previously seen hardlinks
    • 4f85851 Ignore potentially unsafe files
    • See full diff in compare view

    Dependabot compatibility score

    Dependabot will resolve any conflicts with this PR as long as you don't alter it yourself. You can also trigger a rebase manually by commenting @dependabot rebase.


    Dependabot commands and options

    You can trigger Dependabot actions by commenting on this PR:

    • @dependabot rebase will rebase this PR
    • @dependabot recreate will recreate this PR, overwriting any edits that have been made to it
    • @dependabot merge will merge this PR after your CI passes on it
    • @dependabot squash and merge will squash and merge this PR after your CI passes on it
    • @dependabot cancel merge will cancel a previously requested merge and block automerging
    • @dependabot reopen will reopen this PR if it is closed
    • @dependabot close will close this PR and stop Dependabot recreating it. You can achieve the same result by closing it manually
    • @dependabot ignore this major version will close this PR and stop Dependabot creating any more for this major version (unless you reopen the PR or upgrade to it yourself)
    • @dependabot ignore this minor version will close this PR and stop Dependabot creating any more for this minor version (unless you reopen the PR or upgrade to it yourself)
    • @dependabot ignore this dependency will close this PR and stop Dependabot creating any more for this dependency (unless you reopen the PR or upgrade to it yourself)
    • @dependabot use these labels will set the current labels as the default for future PRs for this repo and language
    • @dependabot use these reviewers will set the current reviewers as the default for future PRs for this repo and language
    • @dependabot use these assignees will set the current assignees as the default for future PRs for this repo and language
    • @dependabot use this milestone will set the current milestone as the default for future PRs for this repo and language

    You can disable automated security fix PRs for this repo from the Security Alerts page.

    dependencies 
    opened by dependabot[bot] 0
  • Bump lodash from 4.17.3 to 4.17.21

    Bump lodash from 4.17.3 to 4.17.21

    Bumps lodash from 4.17.3 to 4.17.21.

    Commits
    • f299b52 Bump to v4.17.21
    • c4847eb Improve performance of toNumber, trim and trimEnd on large input strings
    • 3469357 Prevent command injection through _.template's variable option
    • ded9bc6 Bump to v4.17.20.
    • 63150ef Documentation fixes.
    • 00f0f62 test.js: Remove trailing comma.
    • 846e434 Temporarily use a custom fork of lodash-cli.
    • 5d046f3 Re-enable Travis tests on 4.17 branch.
    • aa816b3 Remove /npm-package.
    • d7fbc52 Bump to v4.17.19
    • Additional commits viewable in compare view
    Maintainer changes

    This version was pushed to npm by bnjmnt4n, a new releaser for lodash since your current version.


    Dependabot compatibility score

    Dependabot will resolve any conflicts with this PR as long as you don't alter it yourself. You can also trigger a rebase manually by commenting @dependabot rebase.


    Dependabot commands and options

    You can trigger Dependabot actions by commenting on this PR:

    • @dependabot rebase will rebase this PR
    • @dependabot recreate will recreate this PR, overwriting any edits that have been made to it
    • @dependabot merge will merge this PR after your CI passes on it
    • @dependabot squash and merge will squash and merge this PR after your CI passes on it
    • @dependabot cancel merge will cancel a previously requested merge and block automerging
    • @dependabot reopen will reopen this PR if it is closed
    • @dependabot close will close this PR and stop Dependabot recreating it. You can achieve the same result by closing it manually
    • @dependabot ignore this major version will close this PR and stop Dependabot creating any more for this major version (unless you reopen the PR or upgrade to it yourself)
    • @dependabot ignore this minor version will close this PR and stop Dependabot creating any more for this minor version (unless you reopen the PR or upgrade to it yourself)
    • @dependabot ignore this dependency will close this PR and stop Dependabot creating any more for this dependency (unless you reopen the PR or upgrade to it yourself)
    • @dependabot use these labels will set the current labels as the default for future PRs for this repo and language
    • @dependabot use these reviewers will set the current reviewers as the default for future PRs for this repo and language
    • @dependabot use these assignees will set the current assignees as the default for future PRs for this repo and language
    • @dependabot use this milestone will set the current milestone as the default for future PRs for this repo and language

    You can disable automated security fix PRs for this repo from the Security Alerts page.

    dependencies 
    opened by dependabot[bot] 0
  • Bump ini from 1.3.4 to 1.3.7

    Bump ini from 1.3.4 to 1.3.7

    Bumps ini from 1.3.4 to 1.3.7.

    Commits
    Maintainer changes

    This version was pushed to npm by isaacs, a new releaser for ini since your current version.


    Dependabot compatibility score

    Dependabot will resolve any conflicts with this PR as long as you don't alter it yourself. You can also trigger a rebase manually by commenting @dependabot rebase.


    Dependabot commands and options

    You can trigger Dependabot actions by commenting on this PR:

    • @dependabot rebase will rebase this PR
    • @dependabot recreate will recreate this PR, overwriting any edits that have been made to it
    • @dependabot merge will merge this PR after your CI passes on it
    • @dependabot squash and merge will squash and merge this PR after your CI passes on it
    • @dependabot cancel merge will cancel a previously requested merge and block automerging
    • @dependabot reopen will reopen this PR if it is closed
    • @dependabot close will close this PR and stop Dependabot recreating it. You can achieve the same result by closing it manually
    • @dependabot ignore this major version will close this PR and stop Dependabot creating any more for this major version (unless you reopen the PR or upgrade to it yourself)
    • @dependabot ignore this minor version will close this PR and stop Dependabot creating any more for this minor version (unless you reopen the PR or upgrade to it yourself)
    • @dependabot ignore this dependency will close this PR and stop Dependabot creating any more for this dependency (unless you reopen the PR or upgrade to it yourself)
    • @dependabot use these labels will set the current labels as the default for future PRs for this repo and language
    • @dependabot use these reviewers will set the current reviewers as the default for future PRs for this repo and language
    • @dependabot use these assignees will set the current assignees as the default for future PRs for this repo and language
    • @dependabot use this milestone will set the current milestone as the default for future PRs for this repo and language

    You can disable automated security fix PRs for this repo from the Security Alerts page.

    dependencies 
    opened by dependabot[bot] 0
  • Update colors

    Update colors

    The value of the pie chart updates properly but the color does not. Any way to force a redraw?

      data () {
        return {
          data: '100/100',
          fillColor: 'green'
        }
      },
    
      mounted() {
        setTimeout(() => {
          this.data = '50/100'
          this.fillColor = 'red'
        }, 1000);
      },
    
    opened by Christilut 1
Owner
Vue Bulma UI Components
null
A Vue.js port of Boring Avatars, a JS library that generates custom, SVG-based, round avatars from any username and color palette.

A Vue.js port of Boring Avatars, a JS library that generates custom, SVG-based, round avatars from any username and color palette.

Mujahid Anuar 84 Dec 19, 2022
A Simple and Beautiful 360° Product Viewer built on Vue.js

vue-360 A Simple and Beautiful 360° Product Viewer built on Vue.js Click here for React Version Demo Demo | Documentation Features 360° View Zoom Pan

Rajeev 88 Dec 5, 2022
KéMeet is a Simple, beautiful, fast and secured Open-source zoom alternative, 100% FREE forever!

KéMeet is a Simple, beautiful, fast and secured Open-source zoom alternative, 100% FREE forever! Simply enter a meeting room ID and connect to anyone else in that room! You can even share your screen if you are on desktop!

fotiecodes 31 Jul 6, 2022
🪄 Turn any link into a stylish visual web bookmark, one-click to copy the beautiful web bookmark image

bookmark.style ?? Turn any link into a stylish visual web bookmark, one-click to copy the beautiful web bookmark image.

onetab.group 220 Dec 28, 2022
A simple Vue component that creates an SVG-powered triangle. Combine them to create interesting content separators!

vue-triangle-separator Quickly add full-bleed SVG-powered triangle separators to your page.

HoldTheLine 3 Dec 28, 2021
Encode svg in url, use in html Img, Css and more...

Encode svg in url, use in html Img, Css and more...

Web Colmeia 3 Nov 11, 2022
🎨 A vue directive for the cosha library

vue-cosha Vue cosha is a simple port of the cosha library for ease of use in Vue projects. "Colorful shadows for your images. ?? " cosha lets you add

Josh King 78 Oct 25, 2022
A simple gallery library for vue, and for you to fuck!

A simple gallery library for vue, and for you to fuck!

Ann Ann 12 Jun 26, 2022
A simple Vue library of Image Card components with awesome CSS animation

This is a set of Vue Image card components for special purposes. Each components come with props and slots for easy customization. The CSS animation make it awesome, thanks to the developer community.

Manoj AP 0 Jul 14, 2021
A gallery library for vuejs with a modern design and automatic image optimisation

Nuxt Gallery A gallery library for nuxt with a modern design and automatic image optimisation. How it works: On compile time the images of the gallery

Jonathan Treffler 4 Jan 2, 2023
Atropos is a lightweight, free and open-source JavaScript library to create stunning touch-friendly 3D parallax hover effects.

Atropos Atropos is a lightweight, free and open-source JavaScript library to create stunning touch-friendly 3D parallax hover effects. Available for J

Vladimir Kharlampidi 2.3k Jan 8, 2023
A Vue.js (https://github.com/vuejs/vue) plugin that offers a reusable directive to get image from Cloudinary (https://cloudinary.com)

vue-cloudinary A Vue.js plugin that offers a reusable directive to get image from cloudinary Overview This is a port of the angular-cloudinary library

Diego Pamio 25 Dec 5, 2020
A Vue component for showing loader during image loading https://john015.github.io/vue-load-image/

English | 한국어 Vue-load-image Vue-load-image is 1KB(gzipped size) minimalist Vue component that display loader during image loading and display alterna

Sangwon Lee 60 Dec 7, 2022
Vue-cool-lightbox is a pretty Vue.js lightbox component, inspired by fancybox with zoom, swipe, captions and videos supported

Vue-cool-lightbox is a pretty Vue.js lightbox component, inspired by fancybox with zoom, swipe, captions and videos supported.

Lucas Pulliese 327 Jan 1, 2023
Vue-image-loader: image loader for vue js with prevue

Vue-image-loader: image loader for vue js with prevue

null 0 Feb 1, 2020
A photo gallery app using Vue.js + Vue Router + Vuex

Vue Photogram App A photo gallery app using Vue.js + Vue Router + Vuex Features: Using Pixabay Api Home, category, tag and single photo page Infinite

Emre Güney 7 Dec 12, 2022
Vue progressive image loader plugin like Medium

vue-image-loader Vue progressive image loading plugin Article here : https://www.kevindesousa.me/vue-image-loader/ Installation $ npm install @kevinde

Kevin De Sousa 57 Jul 19, 2022
🙋‍♀️ Image magic animation drawing effect component for Vue 2.x | 图像动态绘制效果

vue-image-painter English | 简体中文 ?? Example Demo Demo Source Code ?? QuickStart Install yarn add vue-image-painter # OR npm i -S vue-image-painter Imp

Komo 26 Sep 19, 2022
Barcode generator for Vue.js

VueBarcode Add barcodes to your Vue application super easily with VueBarcode! Try it out! Supported barcode formats: CODE128 EAN EAN-13 EAN-8 EAN-5 EA

Johan Lindell 210 Dec 28, 2022