Skip to content
GitLab
Projects
Groups
Snippets
/
Help
Help
Support
Community forum
Keyboard shortcuts
?
Submit feedback
Sign in
Toggle navigation
Menu
Open sidebar
Fractalis
fractal.js
Commits
05658f53
Commit
05658f53
authored
Jul 31, 2018
by
Sascha Herzinger
Browse files
Implemented brush for histogram
parent
9d58f15d
Pipeline
#5985
passed with stages
in 5 minutes and 14 seconds
Changes
2
Pipelines
1
Hide whitespace changes
Inline
Side-by-side
src/vue/charts/Histogram.vue
View file @
05658f53
...
...
@@ -59,6 +59,7 @@
:points=
"histogram.distribution"
>
</polyline>
</g>
<g
class=
"fjs-brush"
ref=
"brush"
></g>
</g>
</svg>
</chart>
...
...
@@ -101,9 +102,12 @@
numericData
:
[],
categoryData
:
[],
bwFactor
:
0.5
,
numBins
:
10
numBins
:
10
,
selectedPoints
:
[]
},
hasSetFilter
:
false
,
results
:
{
data
:
[],
label
:
''
,
subsets
:
[],
categories
:
[],
...
...
@@ -210,6 +214,28 @@
})
return
{
bins
,
distribution
,
color
:
group
.
color
}
})
},
brush
()
{
return
d3
.
brushX
()
.
extent
([[
0
,
0
],
[
this
.
padded
.
width
,
this
.
padded
.
height
]])
.
on
(
'
end
'
,
()
=>
{
this
.
error
=
''
if
(
!
d3
.
event
.
sourceEvent
)
{
return
}
if
(
!
d3
.
event
.
selection
)
{
this
.
params
.
selectedPoints
=
[]
}
else
{
const
[
x0
,
x1
]
=
d3
.
event
.
selection
this
.
params
.
selectedPoints
=
this
.
results
.
data
.
filter
(
d
=>
{
return
x0
<=
this
.
scales
.
x
(
d
.
value
)
&&
this
.
scales
.
x
(
d
.
value
)
<=
x1
})
}
this
.
hasSetFilter
=
true
store
.
dispatch
(
'
setFilter
'
,
{
source
:
this
.
_uid
,
filter
:
'
ids
'
,
value
:
this
.
params
.
selectedPoints
.
map
(
d
=>
d
.
id
)
})
})
}
},
methods
:
{
...
...
@@ -217,6 +243,7 @@
this
.
runAnalysis
(
'
compute-histogram
'
,
args
)
.
then
(
response
=>
{
const
results
=
JSON
.
parse
(
response
)
results
.
data
=
JSON
.
parse
(
results
.
data
)
deepFreeze
(
results
)
// massively improve performance by telling Vue that the objects properties won't change
this
.
results
=
results
})
...
...
@@ -239,7 +266,10 @@
watch
:
{
'
args
'
:
{
handler
:
function
(
newArgs
)
{
this
.
runAnalysisWrapper
(
newArgs
)
if
(
!
this
.
hasSetFilter
)
{
this
.
runAnalysisWrapper
(
newArgs
)
}
this
.
hasSetFilter
=
false
}
},
'
axis
'
:
{
...
...
@@ -249,6 +279,13 @@
d3
.
select
(
this
.
$refs
.
yAxis
).
call
(
newAxis
.
y
)
})
}
},
'
brush
'
:
{
handler
:
function
(
newBrush
)
{
this
.
$nextTick
(()
=>
{
d3
.
select
(
this
.
$refs
.
brush
).
call
(
newBrush
)
})
}
}
}
}
...
...
test/demo/demo.html
View file @
05658f53
...
...
@@ -56,7 +56,7 @@
<input
type=
"button"
value=
"Add Chart"
onclick=
"addChart()"
/>
<label>
Zoom:
<input
id=
"chart-size-range"
type=
"range"
min=
"10"
max=
"100"
value=
"
3
0"
oninput=
"setChartSize(this.value)"
/>
<input
id=
"chart-size-range"
type=
"range"
min=
"10"
max=
"100"
value=
"
5
0"
oninput=
"setChartSize(this.value)"
/>
</label>
<input
type=
"button"
onclick=
"loadData()"
value=
"Prepare analysis cache"
/>
<input
type=
"button"
onclick=
"deleteData()"
value=
"Clear analysis cache"
/>
...
...
@@ -95,7 +95,7 @@
fjs
.
clearCache
()
}
let
chartSize
=
'
3
0vw
'
let
chartSize
=
'
5
0vw
'
function
setChartSize
(
value
)
{
chartSize
=
value
+
'
vw
'
Array
.
prototype
.
forEach
.
call
(
document
.
querySelectorAll
(
'
.charts > div
'
),
chart
=>
{
...
...
Write
Preview
Supports
Markdown
0%
Try again
or
attach a new file
.
Cancel
You are about to add
0
people
to the discussion. Proceed with caution.
Finish editing this message first!
Cancel
Please
register
or
sign in
to comment