Skip to content

Latest commit

 

History

History
175 lines (129 loc) · 4.86 KB

README.md

File metadata and controls

175 lines (129 loc) · 4.86 KB
Raw

VueWordCloud

Generates a cloud out of the words.

Vue 3

For Vue 3 use the version >18.

demo

Try it out!

setup

npm

npm i vuewordcloud

ES module

Register the component globally.

import Vue from 'vue';
import VueWordCloud from 'vuewordcloud';

Vue.component(VueWordCloud.name, VueWordCloud);

or

Register the component in the scope of another component.

import VueWordCloud from 'vuewordcloud';

export default {
  components: {
    [VueWordCloud.name]: VueWordCloud,
  },
};

browser

<script src="https://unpkg.com/vue"></script>
<script src="https://unpkg.com/vuewordcloud"></script>

The component is globally available as VueWordCloud. If Vue is detected, the component will be registered automatically.

usage

<vue-word-cloud
  style="
    height: 480px;
    width: 640px;
  "
  :words="[['romance', 19], ['horror', 3], ['fantasy', 7], ['adventure', 3]]"
  :color="([, weight]) => weight > 10 ? 'DeepPink' : weight > 5 ? 'RoyalBlue' : 'Indigo'"
  font-family="Roboto"
/>

Pass custom renderer for the words.

<vue-word-cloud :words="words">
  <template slot-scope="{text, weight, word}">
    <div :title="weight" style="cursor: pointer;" @click="onWordClick(word)">
      {{ text }}
    </div>
  </template>
</vue-word-cloud>

properties

property type default description
animation-duration Number 1000 The duration of the animation.
animation-easing String 'ease' The easing of the animation.
animation-overlap Number 1 The overlap of the animation. Set the value to 1 to animate words all at once. Set the value to 0 to animate words one by one. The value 5 has the same effect as the value 1/5.
color [String, Function] 'Black' The default color for each word.
create-canvas Function * Creates a new Canvas instance.
create-worker Function * Creates a new Worker instance.
enter-animation [Object, String] * The enter animation.
font-family [String, Function] 'serif' The default font family for each word.
font-size-ratio Number 0 The font size ratio between the words. For example, if the value is 5, then the largest word will be 5 times larger than the smallest one. The value 5 has the same effect as the value 1/5.
font-style [String, Function] 'normal' The default font style for each word.
font-variant [String, Function] 'normal' The default font variant for each word.
font-weight [String, Function] 'normal' The default font weight for each word.
leave-animation [Object, String] * The leave animation.
load-font Function * Loads the font.
rotation-unit [String, Function] 'turn' The default rotation unit for each word. Possible values are 'turn', 'deg' and 'rad'.
rotation [Number, Function] 0 The default rotation for each word.
spacing Number 0 The spacing between the words. The value is relative to the font size.
text [String, Function] '' The default text for each word.
weight [Number, Function] 1 The default weight for each word.
words Array [] The words to place into the cloud. A value of the array could be either an object, an array or a string.
If the value is an object, it will be resolved to {text, weight, rotation, rotationUnit, fontFamily, fontStyle, fontVariant, fontWeight, color}.
If the value is an array, it will be resolved to [text, weight].
If the value is a string, it will be resolved to text.		 
let enterAnimation = {opacity: 0};
let leaveAnimation = {opacity: 0};

Make more complex animations.

let enterAnimation = {
  opacity: 0,
  transform: 'scale3d(0.3,0.3,0.3)'
};

Use classes for CSS animations.

let enterAnimation = 'animated bounceIn';
let leaveAnimation = 'animated hinge';
let createCanvas = function() {
  return document.createElement('canvas');
};
let loadFont = function(fontFamily, fontStyle, fontWeight, text) {
  return document.fonts.load([fontStyle, fontWeight, '1px', fontFamily].join(' '), text);
};

Provide custom loadFont function to support older browsers.

import FontFaceObserver from 'fontfaceobserver';

let loadFont = function(family, style, weight, text) {
  return (new FontFaceObserver(family, {style, weight})).load(text);
};
let createWorker = function(code) {
  return new Worker(URL.createObjectURL(new Blob([code])));
};

events

event description
update:progress The current progress of the cloud words computation.