Skip to content
GitLab
Commit 88ab546f authored by Sascha Herzinger's avatar Sascha Herzinger
Browse files

namespaced css to avoid conflicts

parent 5c952c50
Hide whitespace changes
Inline Side-by-side
src/components/DataBox.vue
View file @ 88ab546f
<template>
<div id="data-box">
<label for="data-window" :tooltip="tooltip">{{ header }}</label>
<div id="data-window">
<div class="data-entry-container"
<div :class="`fjs-vm-root fjs-vm-root-${_uid}`">
<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">
<div class="data-entry-header"
<div class="fjs-data-entry-header"
:data-state="item.etl_state">
<span class="cross" v-if="item.etl_state === 'FAILURE'">&#xd7;</span>
<input type="checkbox"
:id="'data-check-' + item.task_id"
<span class="fjs-cross" v-if="item.etl_state === 'FAILURE'">&#xd7;</span>
<input :id="`fjs-checkbox-${item.task_id}-${_uid}`"
type="checkbox"
:value="item.task_id"
v-model="selectedIDs"
v-if="item.etl_state === 'SUCCESS'"/>
<label :for="'data-check-' + item.task_id">
{{ item.label }}
</label>
<span class="options" @click="toggleDataEntryBody(item.task_id)">&#9776;</span>
<label :for="`fjs-checkbox-${item.task_id}-${_uid}`">{{ item.label }}</label>
<span class="fjs-options" @click="toggleDataEntryBody(item.task_id)">&#9776;</span>
</div>
<div class="data-entry-body" :data-state="item.etl_state" :data-id="item.task_id">
<div class="action-btns">
<button class="reload-btn" @click="reloadData(item.task_id)">&#8635;</button>
<button class="delete-btn" @click="deleteData(item.task_id)">&#215;</button><br/>
<div class="fjs-data-entry-body" :data-state="item.etl_state" :data-id="item.task_id">
<div class="fjs-action-btns">
<button class="fjs-reload-btn" @click="reloadData(item.task_id)">&#8635;</button>
<button class="fjs-delete-btn" @click="deleteData(item.task_id)">&#215;</button><br/>
</div>
{{ item.etl_message }}
</div>
......@@ -69,7 +66,7 @@
},
methods: {
toggleDataEntryBody (taskID) {
const $body = $(`.data-entry-body[data-id="${taskID}"]`)
const $body = $(`.fjs-vm-root-${this._uid} .fjs-data-entry-body[data-id="${taskID}"]`)
$body.slideToggle(500)
},
reloadData (taskID) {
......@@ -83,13 +80,13 @@
</script>
<style lang="sass" scoped>
#data-box
.fjs-vm-root
width: 40%
height: 90%
margin: 10px
> label
font-size: 16px
#data-window
.fjs-data-window
height: 80%
width: 100%
border: 1px solid #ccc
......@@ -97,7 +94,7 @@
font-size: 14px
overflow-y: scroll
padding: 5px
.data-entry-header
.fjs-data-entry-header
background-color: #eee
padding: 5px
margin: 2px
......@@ -120,12 +117,12 @@
.options
cursor: pointer
white-space: nowrap
.data-entry-body
.fjs-data-entry-body
display: none
padding: 3px
&[data-state="FAILURE"]
background-color: #ffcbcb
.action-btns
.fjs-action-btns
text-align: center
button
height: 25px
......
src/components/charts/CorrelationAnalysis.vue
View file @ 88ab546f
<template>
<div id="root">
<div :class="`fjs-vm-root fjs-vm-root-${this._uid}`">
<div id="data-box-section">
<div class="fjs-data-box-section">
<data-box header="X and Y variables"
dataType="numerical"
v-on:update="update_xyData">
......@@ -12,8 +12,8 @@
</data-box>
</div>
<div id="controls-section">
<button id="run-analysis-btn"
<div class="fjs-controls-section">
<button class="fjs-run-analysis-btn"
type="button"
@click="runAnalysisWrapper({init: true})"
:disabled="disabled">&#9654;</button><br/>
......@@ -21,8 +21,8 @@
<span>{{ error }}</span>
</div>
<div id="visualisation-section">
<table class="stats-table" v-show="!shownAnalysisResults.init">
<div class="fjs-visualisation-section">
<table class="fjs-stats-table" v-show="!shownAnalysisResults.init">
<tr>
<td>Corr. Coef.</td>
<td>{{ tmpAnalysisResults.coef }}</td>
......@@ -48,11 +48,11 @@
:height="height"
v-show="!shownAnalysisResults.init">
<g :transform="`translate(${margin.left}, ${margin.top})`">
<g id="x-axis-1" class="fjs-corr-axis" :transform="`translate(0, ${padded.height})`"></g>
<g id="x-axis-2" class="fjs-corr-axis"></g>
<g id="y-axis-1" class="fjs-corr-axis"></g>
<g id="y-axis-2" class="fjs-corr-axis" :transform="`translate(${padded.width}, 0)`"></g>
<g id="brush"></g>
<g class="fjs-corr-axis fjs-x-axis-1" :transform="`translate(0, ${padded.height})`"></g>
<g class="fjs-corr-axis fjs-x-axis-2"></g>
<g class="fjs-corr-axis fjs-y-axis-1"></g>
<g class="fjs-corr-axis fjs-y-axis-2" :transform="`translate(${padded.width}, 0)`"></g>
<g class="fjs-brush"></g>
<text :x="padded.width / 2"
y="-10"
text-anchor="middle"
......@@ -66,7 +66,7 @@
:transform="`rotate(90 ${padded.width + 10} ${padded.height / 2})`">
{{ shownAnalysisResults.y_label }}
</text>
<circle class="scatterplot-point"
<circle class="fjs-scatterplot-point"
:cx="scales.x(point.x)"
:cy="scales.y(point.y)"
r="4"
......@@ -74,21 +74,21 @@
v-for="(point, idx) in shownPoints.all"
v-svgtooltip="point.tooltip">
</circle>
<line id="lin-reg-line"
<line class="fjs-lin-reg-line"
:x1="tweened.regLine.x1"
:x2="tweened.regLine.x2"
:y1="tweened.regLine.y1"
:y2="tweened.regLine.y2"
v-svgtooltip="regLine.tooltip">
</line>
<rect class="histogram-rect"
<rect class="fjs-histogram-rect"
:x="attr.x"
:y="attr.y"
:width="attr.width"
:height="attr.height"
v-for="attr in tweened.histogramAttr.xAttr">
</rect>
<rect class="histogram-rect"
<rect class="fjs-histogram-rect"
:x="attr.x"
:y="attr.y"
:width="attr.width"
......@@ -365,15 +365,15 @@
watch: {
'axis': {
handler: function (newAxis) {
d3.select('#x-axis-1').call(newAxis.x1)
d3.select('#x-axis-2').call(newAxis.x2)
d3.select('#y-axis-1').call(newAxis.y1)
d3.select('#y-axis-2').call(newAxis.y2)
d3.select(`.fjs-vm-root-${this._uid} .fjs-x-axis-1`).call(newAxis.x1)
d3.select(`.fjs-vm-root-${this._uid} .fjs-x-axis-2`).call(newAxis.x2)
d3.select(`.fjs-vm-root-${this._uid} .fjs-y-axis-1`).call(newAxis.y1)
d3.select(`.fjs-vm-root-${this._uid} .fjs-y-axis-2`).call(newAxis.y2)
}
},
'brush': {
handler: function (newBrush) {
d3.select('#brush').call(newBrush)
d3.select(`.fjs-vm-root-${this._uid} .fjs-brush`).call(newBrush)
}
},
'regLine': {
......@@ -446,8 +446,8 @@
.catch(error => console.error(error))
},
onResize () {
const tableHeight = $(this.$el.querySelector('table')).outerHeight(true)
const section = this.$el.querySelector('#visualisation-section')
const tableHeight = $(this.$el.querySelector(`.fjs-vm-root-${this._uid} .fjs-stats-table`)).outerHeight(true)
const section = this.$el.querySelector(`.fjs-vm-root-${this._uid} .fjs-visualisation-section`)
const height = section.clientHeight - tableHeight
const width = section.clientWidth
this.height = height > width ? width : height // we want to have a square
......@@ -471,57 +471,57 @@
*
font-family: Roboto, sans-serif
#root
.fjs-vm-root
height: 100%
width: 100%
#data-box-section
text-align: center
height: 15%
> *
display: inline-block
.fjs-data-box-section
text-align: center
height: 15%
> *
display: inline-block
#controls-section
height: 5%
text-align: center
#run-analysis-btn
margin: 10px
width: 100px
height: 30px
box-shadow: 2px 2px 4px 0 #999
font-size: 20px
#run-analysis-btn:not([disabled]):hover
cursor: pointer
.fjs-controls-section
height: 5%
text-align: center
.fjs-run-analysis-btn
margin: 10px
width: 100px
height: 30px
box-shadow: 2px 2px 4px 0 #999
font-size: 20px
.fjs-run-analysis-btn:not([disabled]):hover
cursor: pointer
#visualisation-section
height: 80%
#lin-reg-line
stroke: #ff5e00
stroke-width: 4px
#lin-reg-line:hover
opacity: 0.4
.histogram-rect
stroke: #fff
shape-rendering: crispEdges
stroke-width: 0px
fill: #ffd100
.stats-table
margin: 5px
border-spacing: 0
border-collapse: collapse
font-size: 14px
float: right
.stats-table tr:nth-child(even)
background-color: #ddd
.stats-table, .stats-table td, .stats-table th
border: 1px #ccc solid
border-collapse: collapse
padding: 5px
.scatterplot-point:hover
fill: #f00
opacity: 0.4
#brush
stroke-width: 0
.fjs-visualisation-section
height: 80%
.fjs-lin-reg-line
stroke: #ff5e00
stroke-width: 4px
.fjs-lin-reg-line:hover
opacity: 0.4
.fjs-histogram-rect
stroke: #fff
shape-rendering: crispEdges
stroke-width: 0px
fill: #ffd100
.fjs-stats-table
margin: 5px
border-spacing: 0
border-collapse: collapse
font-size: 14px
float: right
.fjs-stats-table tr:nth-child(even)
background-color: #ddd
.fjs-stats-table, .fjs-stats-table td, .fjs-stats-table th
border: 1px #ccc solid
border-collapse: collapse
padding: 5px
.fjs-scatterplot-point:hover
fill: #f00
opacity: 0.4
.fjs-brush
stroke-width: 0
</style>
<!--CSS for dynamically created components-->
......
test/charts/test-chart.html
View file @ 88ab546f
......@@ -7,7 +7,10 @@
<body>
<div style="height: 1200px; width: 1200px">
<div id="placeholder"></div>
<div id="placeholder1"></div>
</div>
<div style="height: 1200px; width: 1200px">
<div id="placeholder2"></div>
</div>
</body>
......@@ -57,5 +60,6 @@
}
}
])
fjs.setChart({chart: 'correlation-analysis', selector: '#placeholder'})
fjs.setChart({chart: 'correlation-analysis', selector: '#placeholder1'})
fjs.setChart({chart: 'correlation-analysis', selector: '#placeholder2'})
</script>
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