How do you create a reusable Vue component with d3? - javascript

I'm trying to create a Chart.vue component based on D3. I need to be able to add multiple instances to a single page and keep each one separate.
I've tried to assign an ID generated with uuid to the div wrapping my component in the template:
<template>
<div :id=this.id>
<svg></svg>
</div>
</template>
The ID is created when the component is created.
<script>
import * as d3 from "d3";
import { v4 as uuidv4 } from "uuid";
export default {
...
created () {
this.id = uuidv4()
},
...
The chart is re-rendered when there is an update to the data passed in as props from the parent App.vue. To select the "correct" <svg> element that is owned by a particular instance of Chart I use the unique this.id in my renderChart method:
methods: {
renderChart(chart_data) {
const svg_width = 1000;
const svg_height = 600;
const svg = d3
.select("#" + this.id)
.select("svg")
.attr("width", svg_width)
.attr("height", svg_height);
...
Proceeding to add all the axes, data, etc.
If I add two such components to my App.vue template:
<template>
<div id="app">
<form action="#" #submit.prevent="getIssues">
<div class="form-group">
<input
type="text"
placeholder="owner/repo Name"
v-model="repository"
class="col-md-2 col-md-offset-5"
>
</div>
</form>
<Chart :issues="issues" />
<Chart :issues="issues" />
</div>
</template>
I see that they are added to the DOM with some uuid that's been created. When the data is updated and the renderChart function executes, both components get a copy of the "issues" data, but I only see one chart being created.
I'm quite novice with JavaScript, Vue and D3, so perhaps going about this the wrong way, but it seems like this should work?
Any help is appreciated.

Well, I seem to have found a solution, although I don't fully understand it, and I'm not sure why the initial approach didn't work (note: original approach did seem to work sometimes, but the behaviour was unpredictable).
To solve, I pass a unique ID to the component from the parent template as a prop and add it as the Chart component <div> id.
In App.vue:
<template>
<div id="app">
<form action="#" #submit.prevent="getIssues">
<div class="form-group">
<input
type="text"
placeholder="owner/repo Name"
v-model="repository"
class="col-md-2 col-md-offset-5"
>
</div>
</form>
<Chart id="chart1" :issues="issues" />
<Chart id="chart2" :issues="issues" />
</div>
</template>
Now I need to add id in the props of the Chart.vue and set a variable in the data() section.
<template>
<div :id=chart_id>
<svg></svg>
</div>
</template>
<script>
import * as d3 from "d3";
export default {
name: 'Chart',
props: ["issues", "id"],
data() {
return {
chart: null,
chart_id: this.id
};
},
...
I'm not sure why the uuid approach didn't work, but this seems more robust.

Related

Is it possible to write JavaScript directly in vue js?

New to vuejs. I am trying to write javascript directly in the vue file. Below is the code. I keep getting the following errors...
compiled with problems
70:18 error 'openpopup' is defined but never used no-unused-vars
73:18 error 'closepopup' is defined but never used no-unused-vars
Html with script:
<template>
<div class="customers-page">
<h2>Customers</h2>
<button type="add" class="add-button" onclick="openpopup()">Add</button>
<div class="popup" id="popup">
<h3>Input the following information</h3>
<button type="add-customer" class="submit-customer-button" onclick="closepopup()">Submit</button>
</div>
</div>
</template>
<script type="application/javascript" >
let popup = document.getElementById("popup");
function openpopup(){
popup.classList.add("open-popup")
}
function closepopup(){
popup.classList.remove("open-popup")
}
</script>
The very purpose to use Vue is to leverage its features for handling this type of logic reactively, Following is the snippet which can be used(vue 3 options api)
<template>
<div class="customers-page">
<h2>Customers</h2>
<button type="add" class="add-button" #click="openpopup">Add</button>
<!-- onclick="openpopup()" -->
<div class="popup" :class="popupToggle ? 'open-popup' : ''">
<h3>Input the following information</h3>
<button type="add-customer" class="submit-customer-button" #click="closepopup">Submit</button>
<!-- onclick="closepopup()" -->
</div>
</div>
</template>
<script>
export default {
data() {
return {
popupToggle: false,
};
},
methods: {
openpopup() {
this.popupToggle = true;
},
closepopup() {
this.popupToggle = false;
},
},
};
</script>
Here the popup view is maintained by a state variable popupToggle, if you want to use something similar to id then you should go through refs here
When you use frameworks like Vue / React etc, using the native DOM is discourage (basically those .getElementById, .classlist.add or similar). One main reason is security, anyone can go to inspect and do DOM manipulations.
If you want to avoid the Options API boilerplate, you can use Composition API, which is similar to what you are doing.
Besides, if you are using conditional rendering, v-if is recommended instead of class binding, because the elements are not rendered if it is false.
<template>
<div class="customers-page">
<h2>Customers</h2>
<button type="add" class="add-button" #click="openPopup()">Add</button>
<div v-if="isShowPopup" class="popup">
<h3>Input the following information</h3>
<button type="add-customer" class="submit-customer-button" #click="closePopup()">Submit</button>
</div>
</div>
</template>
<script setup>
import { ref } from 'vue'
const isShowPopup = ref(false)// acts similar to options api data block
// here I am using arrow functions
const openPopup = () => {
isShowPopup.value = true // in composition API, instead of using this., you use .value
}
const closePopup = () => {
isShowPopup.value = false
}
</script>

Add one component multiply times on one page

How can I place same component on one page multiply times? I have input component who get props and do some stuff. I need to place more than one inputs in one page and i thought i can just copy/paste my component but i get error because vue is thinking that all of my components are the same dom element. how can I put them?
index.vue
<template>
<div class="container">
<Input name="name" />
<Input name="surname" />
<Input name="pass" />
</div>
</template>
Input.vue
<template>
<div class="inputs">
<label class="inputs__label" :for="name">Имя</label>
<input
v-click-outside="moveR"
class="inputs__input"
:name="name"
type="text"
#click="moveL($event.target)"
/>
</div>
</template>
<script>
import vClickOutside from 'v-click-outside'
export default {
directives: {
clickOutside: vClickOutside.directive,
},
props: ['name'],
methods: {
moveR(e) {
console.log(e)
e.classList.add('inputs__lable_r')
},
moveL(e) {
console.log(e)
e.classList.remove('inputs__lable_r')
},
},
}
</script>
iam sorry i dont have a big baggage of knowledge of vue and google doesnt gave me needed information
i write on nuxt but i think its same trouble with vue
This is what it should be
moveR(e) {
e.target.classList.add('inputs__lable_r')
},
You were missing a e.target, hence it was not targeting the HTML element but rather the event.

Created not being triggered in Vue js

I'm implementing an application with Vue Js and I've the following code:
<template>
<simple-page title="list-patient" folder="Patient" page="List Patient" :loading="loading">
<list-patients #patientsLoaded="onPatientsLoaded"/>
</simple-page>
</template>
Both simple-page and list-patients are custom components created by me. Inside ListPatients I've an HTTP request on Create callback, as follows:
created() {
axios.get("...").then(response => {
...
this.$emit('patientsLoaded');
})
},
Then, my objective is to handle the patientsLoaded event and uptade the loading prop on the top parent component, as follows:
data() {
return {
loading: true
}
},
methods: {
onPatientsLoaded(params) {
this.loading = false;
}
}
However, the created method is not being triggered inside the list-patients component. The only way I can make this work is by removing :loading.
Any one can help?
Edit 1
Code of simple page:
<template>
<section :id="id">
<!-- Breadcrumb-->
<breadcumb :page="page" :folder="folder"/>
<!-- Breadcrumb-->
<!-- Simple Card-->
<simple-card :title="page" :icon="icon" :loading="loading" v-slot:body>
<slot>
</slot>
</simple-card>
<!-- Simple Card-->
</section>
</template>
Code of simple card:
<b-card>
<!-- Page body-->
<slot name="body" v-if="!loading">
</slot>
<!--Is loading-->
<div class="loading-container text-center d-block">
<div v-if="loading" class="spinner sm spinner-primary"></div>
</div>
</b-card>
Your list-patients component goes in the slot with name "body". That slot has a v-if directive so basically it is not rendered and hooks are not reachable as well. Maybe changing v-if to v-show will somehow help you in that situation. Anyway, you have deeply nested slots and it is making things messy. I usually declare loading variable inside of the component, where fetching data will be rendered.
For example:
data () {
return {
loading: true;
};
},
mounted() {
axios.get('url')
.then(res => {
this.loading = false;
})
}
and in your template:
<div v-if="!loading">
<p>{{fetchedData}}</p>
</div>
<loading-spinner v-else></loading-spinner>
idk maybe that's not best practise solution
v-slot for named slots can be indicated in template tag only
I suppose you wished to place passed default slot as body slot to simple-card component? If so you should indicate v-slot not in simple-card itself but in a content you passed it it.
<simple-card :title="page" :icon="icon" :loading="loading">
<template v-slot:body>
<slot>
</slot>
</template>
</simple-card>

Passing on:click event into dynamically created <svelte:component/>

I basically need to be able to trigger something within one or more components (that
are being dynamically added via svelte:component) when an icon/button within the parent
component is clicked. e.g. I need to hook the parts denoted with ** below:-
<script>
let charts = [
ChartA,
ChartB,
ChartC
];
</script>
{#each charts as chart, i}
<div class="wrapper">
<div class="icon" on:click={**HowToPassClickEventToComponent**}></div>
<div class="content">
<svelte:component this={charts[i]} {**clickedEvent**}/>
</div>
</div>
{/each}
I was able to get something working by unsing an array of props but each
component is notified when the array changes so this is not very clean.
I have searched both Google and StackOverflow as well as asking this question within the Svelte Discord channel with currently no luck.
Svelte Repl showing the problem
This seems like such a simple requirement but after a couple of days I remain stuck so any advice on how to pass events into dynamic components is much appreciated.
You could do it like this:
<script>
import ChartA from './ChartA.svelte'
import ChartB from './ChartB.svelte'
import ChartC from './ChartC.svelte'
let charts = [
ChartA,
ChartB,
ChartC
];
let events = [];
</script>
<style>
.icon{
width:60px;
height:30px;
background-color:grey;
}
</style>
{#each charts as chart, i}
<div class="wrapper">
<div class="icon" on:click={e=>events[i] = e}>Click</div>
<div class="content">
<svelte:component this={charts[i]} event={events[i]}/>
</div>
</div>
{/each}
Passing events around as data would be a bit unusual though. It would be more idiomatic to set some state in the parent component in response to the event, and pass that state down.
Alternatively, if the child components do need to respond to events themselves you could take this approach...
<script>
import ChartA from './ChartA.svelte'
import ChartB from './ChartB.svelte'
import ChartC from './ChartC.svelte'
let charts = [
ChartA,
ChartB,
ChartC
];
let instances = [];
</script>
<style>
.icon{
width:60px;
height:30px;
background-color:grey;
}
</style>
{#each charts as chart, i}
<div class="wrapper">
<div class="icon" on:click={e => instances[i].handle(e)}>Click</div>
<div class="content">
<svelte:component
this={charts[i]}
bind:this={instances[i]}
/>
</div>
</div>
{/each}
...where each child component exports a handle method:
<script>
let event;
export function handle(e){
event = e;
};
</script>

Vue.js referenced template components stop after first sub component

I'm attempting to create components using Vue, so that I can remove a lot of duplicated HTML in a site I'm working on.
I have a <ym-menucontent> component, which within it will eventually have several other components, conditionally rendered.
While doing this I've hit a wall and so have simplified everything to get to the root of the problem.
When rendering the ym-menucontent component the first sub-component is the only one which gets rendered and I can't work out why or how to get around it...
<template id="menucontent">
<div>
<ym-categories :menuitem="menuitem"/>
<ym-rootmaps :menuitem="menuitem"/>
<p>1: {{menuitem.rootMapsTab}}</p>
<p>2: {{menuitem.exploreTab}}</p>
</div>
</template>
<template id="rootmaps">
<div>Root Maps</div>
</template>
<template id="categories">
<div>Categories</div>
</template>
app.js
Vue.component('ym-menucontent', {
template: '#menucontent',
props: ['menuitem'],
data: function() {
return {
customMenu: window.customMenuJSON
}
}
});
Vue.component('ym-rootmaps', {
template: '#rootmaps',
props: ['menuitem'],
data: function() {
return {
customMenu: window.customMenuJSON,
rootMaps: window.rootAreas
}
}
});
Vue.component('ym-categories', {
template: '#categories',
props: ['menuitem'],
data: function() {
return {
customMenu: window.customMenuJSON,
rootMaps: window.rootAreas
}
}
});
usage...
<div
v-for="mi in customMenu.topLevelMenuItems"
:id="mi.name"
class="page-content tab swiper-slide">
<ym-menucontent :menuitem="mi"/>
</div>
Output
<div>Categories</div>
if I switch around ym-cateogries and ym-rootmaps then the output becomes...
<div>Root Maps</div>
if I remove both then I see...
<p>1: true</p>
<p>2:</p>
I'd expect to see a combination of all of them...
<div>Categories</div>
<div>Root Maps</div>
<p>1: true</p>
<p>2:</p>
This is probably because you're using self-closing components in DOM templates, which is recommended against in the style-guide ..
Unfortunately, HTML doesn’t allow custom elements to be self-closing -
only official “void” elements. That’s why the strategy is only
possible when Vue’s template compiler can reach the template before
the DOM, then serve the DOM spec-compliant HTML.
This should work for you ..
<template id="menucontent">
<div>
<ym-categories :menuitem="menuitem"></ym-categories>
<ym-rootmaps :menuitem="menuitem"></ym-rootmaps>
<p>1: {{menuitem.rootMapsTab}}</p>
<p>2: {{menuitem.exploreTab}}</p>
</div>
</template>
<div
v-for="mi in customMenu.topLevelMenuItems"
:id="mi.name"
class="page-content tab swiper-slide">
<ym-menucontent :menuitem="mi"></ym-menucontent>
</div>

Categories