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

css -> sass and fixed an chart fitting issue

parent 404834ac
Hide whitespace changes
Inline Side-by-side
src/assets/base.css → src/assets/base.sass
View file @ f7bf4473
@font-face {
font-family: 'Roboto';
font-style: normal;
font-weight: 400;
font-size: 14px;
src: local('Roboto'), local('Roboto-Regular'), url(https://fonts.gstatic.com/s/roboto/v15/oMMgfZMQthOryQo9n22dcuvvDin1pK8aKteLpeZ5c0A.woff2) format('woff2');
}
\ No newline at end of file
@font-face
font-family: 'Roboto'
font-style: normal
font-weight: 400
font-size: 14px
src: local('Roboto'), local('Roboto-Regular'), url(https://fonts.gstatic.com/s/roboto/v15/oMMgfZMQthOryQo9n22dcuvvDin1pK8aKteLpeZ5c0A.woff2) format('woff2')
\ No newline at end of file
src/assets/svgtooltip.css deleted 100644 → 0
View file @ 404834ac
.d3-tip {
z-index: 9999;
line-height: 1;
padding: 12px;
background: rgba(0, 0, 0, 0.8);
color: #fff;
border-radius: 2px;
pointer-events: none;
font-size: 14px;
font-family: Roboto, sans-serif;
}
/* Creates a small triangle extender for the tooltip */
.d3-tip:after {
box-sizing: border-box;
display: inline;
font-size: 16px;
width: 100%;
line-height: 0.8;
color: rgba(0, 0, 0, 0.8);
position: absolute;
pointer-events: none;
}
/* Northward tooltips */
.d3-tip.n:after {
content: "\25BC";
margin: -1px 0 0 0;
top: 100%;
left: 0;
text-align: center;
}
/* Eastward tooltips */
.d3-tip.e:after {
content: "\25C0";
margin: -4px 0 0 0;
top: 50%;
left: -12px;
}
/* Southward tooltips */
.d3-tip.s:after {
content: "\25B2";
margin: 0 0 1px 0;
top: -8px;
left: 0;
text-align: center;
}
/* Westward tooltips */
.d3-tip.w:after {
content: "\25B6";
margin: -4px 0 0 -1px;
top: 50%;
left: 100%;
}
\ No newline at end of file
src/assets/svgtooltip.sass 0 → 100644
View file @ f7bf4473
.d3-tip
z-index: 9999
line-height: 1
padding: 12px
background: rgba(0, 0, 0, 0.8)
color: #fff
border-radius: 2px
pointer-events: none
font-size: 14px
font-family: Roboto, sans-serif
/* Creates a small triangle extender for the tooltip */
.d3-tip:after
box-sizing: border-box
display: inline
font-size: 16px
width: 100%
line-height: 0.8
color: rgba(0, 0, 0, 0.8)
position: absolute
pointer-events: none
/* Northward tooltips */
.d3-tip.n:after
content: "\25BC"
margin: -1px 0 0 0
top: 100%
left: 0
text-align: center
/* Eastward tooltips */
.d3-tip.e:after
content: "\25C0"
margin: -4px 0 0 0
top: 50%
left: -12px
/* Southward tooltips */
.d3-tip.s:after
content: "\25B2"
margin: 0 0 1px 0
top: -8px
left: 0
text-align: center
/* Westward tooltips */
.d3-tip.w:after
content: "\25B6"
margin: -4px 0 0 -1px
top: 50%
left: 100%
\ No newline at end of file
src/components/DataBox.vue
View file @ f7bf4473
<template>
<div id="data-box">
<label for="data-window" :tooltip="tooltip">{{ header }}</label>
<div id="data-window" style="height: 80%;">
<div id="data-window">
<div class="data-entry-container"
:data-state="item.state"
v-for="item in items">
......@@ -82,76 +82,53 @@
}
</script>
<style scoped>
#data-box {
width: 30%;
}
#data-window {
border: 1px solid #ccc;
border-radius: 8px;
font-size: 14px;
overflow-y: scroll;
padding: 5px 5px 5px 5px;
}
.data-entry-header {
background-color: #eee;
padding: 5px;
margin: 2px;
width: 95%;
}
.data-entry-header > * {
display: inline-block;
vertical-align: middle;
}
.data-entry-header label {
width: 85%;
word-break: keep-all;
overflow: hidden;
text-overflow: ellipsis;
}
.data-entry-header:nth-child(odd)[data-state="SUCCESS"] {
}
.data-entry-header[data-state="FAILURE"] {
background-color: #ffcbcb;
}
.data-entry-header[data-state="PENDING"] {
color: #bbb;
}
.data-entry-body {
display: none;
padding: 3px;
}
.data-entry-body[data-state="FAILURE"] {
background-color: #ffcbcb;
}
.action-btns {
text-align: center;
}
.action-btns button {
height: 25px;
font-size: 14px;
font-weight: bold;
}
.cross {
color: red;
padding: 5px;
}
.options {
cursor: pointer;
white-space: nowrap;
}
<style lang="sass" scoped>
#data-box
width: 40%
height: 90%
margin: 10px
> label
font-size: 16px
#data-window
height: 80%
width: 100%
border: 1px solid #ccc
border-radius: 8px
font-size: 14px
overflow-y: scroll
padding: 5px
.data-entry-header
background-color: #eee
padding: 5px
margin: 2px
width: 95%
> *
display: inline-block
vertical-align: middle
label
width: 85%
word-break: keep-all
overflow: hidden
text-overflow: ellipsis
&[data-state="FAILURE"]
background-color: #ffcbcb
&[data-state="PENDING"]
color: #bbb
.cross
color: red
padding: 5px
.options
cursor: pointer
white-space: nowrap
.data-entry-body
display: none
padding: 3px
&[data-state="FAILURE"]
background-color: #ffcbcb
.action-btns
text-align: center
button
height: 25px
font-size: 14px
font-weight: bold
</style>
src/components/charts/CorrelationAnalysis.vue
View file @ f7bf4473
<template>
<div style="height: 100%; width: 100%">
<div id="root">
<div id="data-box-section" style="height: 25%;">
<div id="data-box-section">
<data-box header="X and Y variables"
dataType="numerical"
v-on:update="update_xyData">
......@@ -12,16 +12,16 @@
</data-box>
</div>
<div style="text-align: center;">
<div id="controls-section">
<button id="run-analysis-btn"
type="button"
@click="runAnalysisWrapper({init: true})"
:disabled="disabled">Run Analysis</button><br/>
:disabled="disabled">&#9654;</button><br/>
<br/>
<span>{{ error }}</span>
</div>
<br/>
<div id="visualisation-section" style="height: 75%;">
<div id="visualisation-section">
<table class="stats-table" v-show="!shownAnalysisResults.init">
<tr>
<td>Corr. Coef.</td>
......@@ -44,7 +44,9 @@
<td>{{ shownPoints.all.length }}</td>
</tr>
</table>
<svg width="100%" height="100%" v-show="!shownAnalysisResults.init">
<svg :width="width"
: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>
......@@ -107,6 +109,7 @@
import * as d3 from 'd3'
import svgtooltip from '../mixins/v-svgtooltip'
import { TweenLite } from 'gsap'
import $ from 'jquery'
export default {
name: 'correlation-analysis',
data () {
......@@ -408,8 +411,9 @@
},
mounted () {
window.addEventListener('resize', this.onResize)
this.onResize() // initial call
this.tmpAnalysisResults = this.shownAnalysisResults
this.onResize() // initial call
// saves us one manual initialization
this.tmpAnalysisResults = JSON.parse(JSON.stringify(this.shownAnalysisResults))
},
beforeDestroy () {
window.removeEventListener('resize', this.onResize)
......@@ -442,9 +446,13 @@
.catch(error => console.error(error))
},
onResize () {
const tableHeight = $(this.$el.querySelector('table')).outerHeight(true)
const section = this.$el.querySelector('#visualisation-section')
this.height = section.clientHeight
this.width = section.clientWidth
const height = section.clientHeight - tableHeight
const width = section.clientWidth
this.height = height > width ? width : height // we want to have a square
// noinspection JSSuspiciousNameCombination
this.width = this.height
},
update_xyData (ids) {
this.xyData = ids
......@@ -457,90 +465,73 @@
</script>
<style scoped>
* {
font-family: Roboto, sans-serif;
}
#data-box-section {
display: flex;
flex-direction: row;
justify-content: space-around;
}
#run-analysis-btn {
width: 100%;
height: 20px;
}
#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;
}
#run-analysis-btn {
width: 200px;
height: 30px;
box-shadow: 2px 2px 4px 0 #999;
}
#run-analysis-btn:not([disabled]):hover {
cursor: pointer;
}
<style lang="sass" scoped>
@import './src/assets/base.sass'
*
font-family: Roboto, sans-serif
#root
height: 100%
width: 100%
#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
#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
</style>
<!--CSS for dynamically created components-->
<style src="../../assets/base.css"></style>
<style src="../../assets/svgtooltip.css"></style>
<style>
.fjs-corr-axis {
shape-rendering: crispEdges;
}
.fjs-corr-axis .tick {
shape-rendering: crispEdges;
}
.fjs-corr-axis line {
stroke: #999;
}
<style lang="sass">
@import './src/assets/svgtooltip.sass'
.fjs-corr-axis
shape-rendering: crispEdges
.tick
shape-rendering: crispEdges
line
stroke: #999
</style>
test/charts/test-chart.html
View file @ f7bf4473
......@@ -6,7 +6,7 @@
</head>
<body>
<div style="height: 1000px; width: 1000px">
<div style="height: 1200px; width: 1200px">
<div id="placeholder"></div>
</div>
</body>
......
webpack.config.js
View file @ f7bf4473
......@@ -43,30 +43,25 @@ module.exports = {
{
test: /\.vue$/,
loader: 'vue-loader',
include: [
path.resolve(__dirname, 'src', 'components')
],
exclude: /node_modules/,
options: {
// compile the <script></script> part of vue components with babel
loaders: {
js: 'babel-loader'
sass: 'vue-style-loader!css-loader!sass-loader?indentedSyntax' // <style lang="sass">
}
}
},
{
test: /\.js$/,
loader: 'babel-loader',
include: [
path.resolve(__dirname, 'src'),
path.resolve(__dirname, 'test')
]
exclude: /node_modules/,
},
{
test: /\.css$/,
loader: 'css-loader',
include: [
path.resolve(__dirname, 'src', 'assets')
]
test: /\.sass$/,
loader: 'style-loader!css-loader!sass-loader?indentedSyntax'
},
{
test: /\.(png|woff|woff2|eot|ttf|svg)$/,
loader: 'url-loader?limit=100000',
}
]
},
......
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