flowck

data() {
  return {
    size: {
      width: 0,
      height: 0
    },
    margin: {
      top: 20,
      bottom: 10,
      left: 20,

flowck

/**
 * setScales: Will set the scales based in the type
 * of the date
 */
setScales() {
  // x axis scale
  this.scales.x = d3
    .scaleLinear()
    .domain([0, 100])
    .range([0, this.size.width]);

flowck

props: {
    height: {
      type: Number
    }
},
methods: {
    /**
     * setSizes: Will set the width and height of the plot
     */
    setSizes() {

flowck

export default {
  name: "plotWithXandY",
  data() {
    return {
      size: {
        width: 0,
        height: 0
      },
      margin: {
        top: 20,

flowck

<template>
  <div class="plot-container">
  <!-- Svg element -->
    <svg :width="size.width + margin.left + margin.right" :height="size.height + margin.top + margin.bottom">
    <!-- Wrap plot elements -->
      <g :transform="`translate(${margin.left}, 10)`">
        <!-- Group axes -->
        <g class="plot__axes">
          <!-- Axes -->
          <g class="plot__axes__x" :transform="`translate(0, ${size.height})`"></g>

flowck

// App.vue

export default {
    name: "App.vue",
    data() {
        return {
            value: 5000
        };
    },
    methods: {

flowck

// main.js
import Vue from "vue";

/**
 * numberToUSD: It format numbers into the USD currency format.
 * @param {number} value
 * @returns {string} value
 */
Vue.filter("numberToUSD", value => { 
    return value ? `$${value.toLocaleString("en-US")}` : "$0.0";

flowck

<?php
		$args = array(
			"posts_per_page" => 8
		);
		$Eventos = new WP_Query($args);
		if($Eventos->have_posts()){
			while($Eventos->have_posts()){
				$Eventos->the_post();
        // Obtem a imagem de destaque
				$img = wp_get_attachment_url(get_post_thumbnail_id(get_the_ID()));

flowck

computed: {
  countriesResults() {
     // Filter results
     return this.countries.filter((country) => {
       return country.name.toLowerCase()
       .indexOf(this.search.toLowerCase()) > -1;
     });
  }
}

flowck

<input
    type="text"
    placeholder="Search for a Country"
    v-model="search"
>