Commit 06d404d8 authored by Sascha Herzinger's avatar Sascha Herzinger
Browse files

Removed silly selector mess

parent f9125b8a
<template>
<div :class="`fjs-boxplot fjs-vm-uid-${this._uid}`">
<div class="fjs-boxplot">
<control-panel class="fjs-control-panel">
<data-box class="fjs-data-box"
......@@ -309,11 +309,11 @@
'axis': {
handler: function (newAxis) {
this.$nextTick(() => {
d3.select(`.fjs-vm-uid-${this._uid} .fjs-x-axis`)
d3.select(this.$el.querySelector('.fjs-x-axis'))
.call(newAxis.x)
.selectAll('text')
.attr('transform', 'rotate(20)')
d3.select(`.fjs-vm-uid-${this._uid} .fjs-y-axis`)
d3.select(this.$el.querySelector('.fjs-y-axis'))
.call(newAxis.y)
})
}
......@@ -322,11 +322,11 @@
methods: {
getTippyInstances (label) {
return [
document.querySelector(`.fjs-vm-uid-${this._uid} .fjs-box[data-label="${label}"] .fjs-upper-whisker`),
document.querySelector(`.fjs-vm-uid-${this._uid} .fjs-box[data-label="${label}"] .fjs-lower-whisker`),
document.querySelector(`.fjs-vm-uid-${this._uid} .fjs-box[data-label="${label}"] .fjs-upper-quartile`),
document.querySelector(`.fjs-vm-uid-${this._uid} .fjs-box[data-label="${label}"] .fjs-lower-quartile`),
document.querySelector(`.fjs-vm-uid-${this._uid} .fjs-box[data-label="${label}"] .fjs-median`)
this.$el.querySelector(`.fjs-box[data-label="${label}"] .fjs-upper-whisker`),
this.$el.querySelector(`.fjs-box[data-label="${label}"] .fjs-lower-whisker`),
this.$el.querySelector(`.fjs-box[data-label="${label}"] .fjs-upper-quartile`),
this.$el.querySelector(`.fjs-box[data-label="${label}"] .fjs-lower-quartile`),
this.$el.querySelector(`.fjs-box[data-label="${label}"] .fjs-median`)
].map(el => {
const uuid = el.getAttribute('data-uuid')
return { el, tip: this._tippyInstances[uuid] }
......@@ -345,7 +345,7 @@
this.catData = ids
},
handleResize () {
const container = this.$el.querySelector(`.fjs-vm-uid-${this._uid} .fjs-vis-container svg`)
const container = this.$el.querySelector('.fjs-vis-container svg')
// noinspection JSSuspiciousNameCombination
this.height = container.getBoundingClientRect().width
this.width = container.getBoundingClientRect().width
......
<template>
<div :class="`fjs-correlation-analysis fjs-vm-uid-${this._uid}`">
<div class="fjs-correlation-analysis">
<control-panel class="fjs-control-panel">
<data-box class="fjs-data-box"
......@@ -383,13 +383,11 @@
handler: function (newPoints) {
this.$nextTick(() => {
// we use d3 instead of TweenLite here because d3 can transition point paths
d3.selectAll(`.fjs-vm-uid-${this._uid} .fjs-histogram-polyline`)
.filter('.fjs-bottom')
d3.select(this.$el.querySelector('.fjs-histogram-polyline.fjs-bottom'))
.transition()
.duration(500)
.attr('points', newPoints.bottom)
d3.selectAll(`.fjs-vm-uid-${this._uid} .fjs-histogram-polyline`)
.filter('.fjs-left')
d3.select(this.$el.querySelector('.fjs-histogram-polyline.fjs-left'))
.transition()
.duration(500)
.attr('points', newPoints.left)
......@@ -412,11 +410,11 @@
'axis': {
handler: function (newAxis) {
this.$nextTick(() => {
d3.select(`.fjs-vm-uid-${this._uid} .fjs-x-axis-1`).call(newAxis.x1)
d3.select(`.fjs-vm-uid-${this._uid} .fjs-x-axis-2`).call(newAxis.x2)
d3.select(`.fjs-vm-uid-${this._uid} .fjs-y-axis-1`).call(newAxis.y1)
d3.select(`.fjs-vm-uid-${this._uid} .fjs-y-axis-2`).call(newAxis.y2)
const text = document.querySelector(`.fjs-vm-uid-${this._uid} .fjs-y-axis-1 text`)
d3.select(this.$el.querySelector('.fjs-x-axis-1')).call(newAxis.x1)
d3.select(this.$el.querySelector('.fjs-x-axis-2')).call(newAxis.x2)
d3.select(this.$el.querySelector('.fjs-y-axis-1')).call(newAxis.y1)
d3.select(this.$el.querySelector('.fjs-y-axis-2')).call(newAxis.y2)
const text = this.$el.querySelector('.fjs-y-axis-1 text')
if (text) {
const width = Math.ceil(text.getBoundingClientRect().width)
if (width !== this.yAxisTickWidth) {
......@@ -429,7 +427,7 @@
'brush': {
handler: function (newBrush) {
this.$nextTick(() => {
d3.select(`.fjs-vm-uid-${this._uid} .fjs-brush`).call(newBrush)
d3.select(this.$el.querySelector('.fjs-brush')).call(newBrush)
})
}
},
......@@ -477,7 +475,7 @@
.catch(error => console.error(error))
},
handleResize () {
const container = this.$el.querySelector(`.fjs-vm-uid-${this._uid} .fjs-vis-container svg`)
const container = this.$el.querySelector(`.fjs-vis-container svg`)
// noinspection JSSuspiciousNameCombination
this.height = container.getBoundingClientRect().width
this.width = container.getBoundingClientRect().width
......@@ -522,7 +520,7 @@
flex: 4
.fjs-lin-reg-line
stroke: #ff5e00
stroke-width: 0.4%
stroke-width: 0.3%
.fjs-lin-reg-line:hover
opacity: 0.4
.fjs-histogram-polyline
......
<template>
<div :class="`fjs-heatmap fjs-vm-uid-${this._uid}`">
<div class="fjs-heatmap">
<control-panel>
<data-box class="fjs-data-box"
header="Numerical Array Data"
......@@ -198,7 +198,7 @@
})
},
handleResize () {
const container = this.$el.querySelector(`.fjs-vm-uid-${this._uid} .fjs-vis-container svg`)
const container = this.$el.querySelector('.fjs-vis-container svg')
this.height = container.getBoundingClientRect().height
this.width = container.getBoundingClientRect().width
},
......
<template>
<div :class="`fjs-data-box fjs-vm-uid-${_uid}`">
<div class="fjs-data-box">
<label :for="`fjs-data-window-${_uid}`" :tooltip="tooltip">{{ header }}</label>
<div :id="`fjs-data-window-${_uid}`" class="fjs-data-window">
<div class="fjs-data-entry-container" :data-state="item.etl_state" v-for="item in items">
......@@ -83,7 +83,7 @@
}
},
toggleDataEntryBody (taskID) {
const $body = $(`.fjs-vm-uid-${this._uid} .fjs-data-entry-body[data-id="${taskID}"]`)
const $body = $(this.$el.querySelector('.fjs-data-entry-body[data-id="${taskID}"]'))
$body.slideToggle(500)
},
reloadData (taskID) {
......
<template>
<div :class="`fjs-task-view fjs-vm-uid-${_uid}`" v-if="pendingTasks.length || failedTasks.length">
<div class="fjs-task-view" v-if="pendingTasks.length || failedTasks.length">
<span class="fjs-toggle-btn" @click="toggleView" v-html="toggleButton"></span>
<div class="fjs-task-state-container">
<div class="fjs-task-state-element fjs-pending" :key="task" v-for="task in pendingTasks">
......@@ -54,7 +54,7 @@
},
toggleView () {
this.isMinimized = !this.isMinimized
const $body = $(`.fjs-vm-uid-${this._uid} .fjs-task-state-container`)
const $body = $(this.$el.querySelector('.fjs-task-state-container'))
$body.slideToggle(500)
}
}
......
Supports Markdown
0% or .
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment