All Projects → Herteby → grapher-vue

Herteby / grapher-vue

Licence: MIT license
Integrates Vue with Grapher in an easy-to-use way

Programming Languages

javascript
184084 projects - #8 most used programming language

Projects that are alternatives of or similar to grapher-vue

denormalize
Simple denormalization for Meteor
Stars: ✭ 21 (+10.53%)
Mutual labels:  meteor, grapher
meteor-astrocoders-publish
Smartly re-use Meteor publications logic
Stars: ✭ 33 (+73.68%)
Mutual labels:  meteor
awesome-vulcan
🗒 A list of resources to learn awesome VulcanJS 🖖
Stars: ✭ 15 (-21.05%)
Mutual labels:  meteor
Meteor-Files-Demo
Demo application for ostrio:files package
Stars: ✭ 16 (-15.79%)
Mutual labels:  meteor
Meteor-logger-file
🔖 Meteor Logging: Store application log messages into file (FS)
Stars: ✭ 24 (+26.32%)
Mutual labels:  meteor
meteor-reactive-mongo
Reactive server-side MongoDB queries
Stars: ✭ 14 (-26.32%)
Mutual labels:  meteor
Client-Storage
🗄 Bulletproof persistent Client storage, works with disabled Cookies and/or localStorage
Stars: ✭ 15 (-21.05%)
Mutual labels:  meteor
meteor-autoform-bs-datetimepicker
Custom bootstrap-datetimepicker input type with timezone support for AutoForm
Stars: ✭ 18 (-5.26%)
Mutual labels:  meteor
Meteor-Mailer
📮 Bulletproof email queue on top of NodeMailer with support of multiple clusters and servers setup
Stars: ✭ 21 (+10.53%)
Mutual labels:  meteor
meteor-pg
Use PostgreSQL reactively in Meteor.
Stars: ✭ 24 (+26.32%)
Mutual labels:  meteor
nau-jukebox
Nâu Jukebox - share the song you love with the team, one person as host will play the song to listen together
Stars: ✭ 28 (+47.37%)
Mutual labels:  meteor
meteor-two-factor
🔐 Two factor authentication package for accounts-password
Stars: ✭ 80 (+321.05%)
Mutual labels:  meteor
meteor-blaze-bs4
Generic Bootstrap 4 components library for Meteor Blaze.
Stars: ✭ 20 (+5.26%)
Mutual labels:  meteor
unity3d-ddp-client
Lightweight DDP client for Unity3D
Stars: ✭ 18 (-5.26%)
Mutual labels:  meteor
Block-Farm
A farming game built upon Ethereum platform.
Stars: ✭ 60 (+215.79%)
Mutual labels:  meteor
meteorpp
Meteor DDP & Minimongo implementation in C++.
Stars: ✭ 22 (+15.79%)
Mutual labels:  meteor
meteor-boilerplate
A Meteor ready-to-use app for Blaze + FlowRouter, with a bunch a handy functions, objects, packages, etc
Stars: ✭ 14 (-26.32%)
Mutual labels:  meteor
signmeup
Real-time application to sign up for and manage TA hours.
Stars: ✭ 97 (+410.53%)
Mutual labels:  meteor
React-Hue
🎨 A Material color palette tool based on Meteor, React, Material UI.
Stars: ✭ 45 (+136.84%)
Mutual labels:  meteor
node-on-fhir
Tech stack for building MACRA and 21st Century Cures compliant webapps.
Stars: ✭ 75 (+294.74%)
Mutual labels:  meteor

Grapher + Vue

This package makes using Grapher with Vue in Meteor easier and more declarative.

It automatically subscribes to your queries when the component is loaded, and unsubscribes to them when the component is destroyed.

Query parameters are reactive, using Vue's reactivity. So if you for example use this.limit in your query, it will update the query and subscription when this.limit changes. If you use @mitar's fork of Tracker, it will also respond to reactive Meteor variables.

BREAKING CHANGE: Beginning with 1.0, instead of the result being in result.data, the result is the root object, and the extra properties are prefixed with $.

Setup

meteor add herteby:grapher-vue
import GrapherVue from 'meteor/herteby:grapher-vue'
Vue.use(GrapherVue)

Example

<template>
  <div v-if="users.$readyOnce">
    Users: {{users.$count}} of {{users.$fullCount}}<br>
    Time taken: {{users.$time}}ms
    <div v-for="user in users">
      <h4>{{user.username}}</h4>
      <pre>{{user.profile}}</pre>
    </div>
    <button v-if="users.$count < users.$fullCount" @click="limit += 20">Load more</button>
  </div>
  <div v-else>Loading...</div>
</template>

<script>
  export default {
    data(){
      return {
        limit:20,
      }
    },
    grapher:{
      users(){
        return {
          collection:Meteor.users,
          fullCount:true,
          query:{
            $options:{limit:this.limit},
            username:1,
            profile:1
          }
        }
      }
    }
  }
</script>

Demo repo

API

Property Type Required/Default Description
collection Mongo.Collection Required The root collection for the query
query Object Required Argument for Grapher's createQuery()
subscribe Boolean Defaults to true If set to false, uses a method call instead. The result structure is the same regardless
single Boolean or String Defaults to false If set to true, it will work like fetchOne(), and adds $options:{limit:1} to the query. If a String, it also adds $filters:{_id:theString}
fullCount Boolean Defaults to false If true, getCount() will be called to fetch the full count from the server. Useful if you have set a limit on the query
countOnly Boolean Defaults to false If true, only getCount() will be called, and no data will be fetched. Useful for notification badges and such. Instead of the normal format, the result will simply be false initially, and then when getCount() returns, a Number representing the count.
disabled Boolean Defaults to false Disable the query. Use with a reactive Vue variable if you for example want to wait for the user to input a search string, or select which document to show

Extra result properties

Property Type Description
$ready Boolean Wether the subscription has finished fetching all documents
$readyOnce Boolean Unlike ready, this will remain true if the subscription is later changed (useful for loading indicators)
$count Number Number of results
$fullCount Number or false Only available if you set fullCount or countOnly to true.
This will initially be set to false. Once the getCount() server call returns, this will be updated with the count
$time Number How many milliseconds it took to fetch all the data
$disabled Boolean If it's disabled

If you need to get rid of these for some reason, just use this Lodash function:

_.omitBy(result, key => key[0] == '$') //_.omit in Underscore
Note that the project description data, including the texts, logos, images, and/or trademarks, for each open source project belongs to its rightful owner. If you wish to add or remove any projects, please contact us at [email protected].