Commit d26adaf4 authored by Markus Scheidgen's avatar Markus Scheidgen
Browse files

Minor fixes to search layout and data histogram. #339

parent d33d65ee
Pipeline #78710 canceled with stages
in 5 minutes and 34 seconds
......@@ -113,7 +113,7 @@ Search.propTypes = {
const useSearchEntryStyles = makeStyles(theme => ({
search: {
marginTop: theme.spacing(2),
marginBottom: theme.spacing(8),
marginBottom: theme.spacing(2),
maxWidth: 1024,
margin: 'auto',
width: '100%'
......@@ -130,7 +130,8 @@ const useSearchEntryStyles = makeStyles(theme => ({
marginRight: 0
},
searchBar: {
marginTop: theme.spacing(1)
marginTop: theme.spacing(1),
marginBottom: theme.spacing(1)
},
selectButton: {
margin: theme.spacing(1)
......@@ -227,7 +228,7 @@ function UsersVisualization() {
// eslint-disable-next-line
}, [])
return <div>
<UploadsHistogram tooltips />
<UploadsHistogram tooltips initialScale={0.5} />
<QuantityHistogram quantity="uploader" title="Uploader/origin" valueLabels={originLabels}/>
</div>
}
......@@ -467,7 +468,9 @@ OwnerSelect.propTypes = {
}
const useSearchResultStyles = makeStyles(theme => ({
root: theme.spacing(4)
root: {
marginTop: theme.spacing(4)
}
}))
function SearchResults({availableTabs = ['entries'], initialTab = 'entries', resultListProps = {}}) {
const classes = useSearchResultStyles()
......
......@@ -109,6 +109,12 @@ export default function SearchBar() {
}, [api, currentLoadOptionsConfigRef, apiQuery, loading, setLoading])
const getOptionLabel = useCallback(option => {
if (option.quantity === 'from_time' || option.quantity === 'until_time') {
if (option.value) {
return `${option.quantity.replace('_time', '')}=${option.value.substring(0, 10)}`
}
}
let label = option.quantity + '='
if (option.value) {
if (Array.isArray(option.value)) {
......
......@@ -12,6 +12,9 @@ const useStyles = makeStyles(theme => ({
root: {
marginTop: theme.spacing(2)
},
header: {
paddingBottom: 0
},
content: {
paddingTop: 0,
position: 'relative',
......@@ -66,7 +69,7 @@ export default function UploadsHistogram({title = 'Uploads over time', initialSc
data = Object.keys(statistics.date_histogram).map(key => ({
time: Dates.JSDate(parseInt(key)),
value: statistics.date_histogram[key][metric]
}))
})).filter(d => d.value)
}
const fromTime = Dates.JSDate(response.from_time || Dates.dateHistogramStartDate)
......@@ -89,7 +92,7 @@ export default function UploadsHistogram({title = 'Uploads over time', initialSc
const width = containerRef.current.offsetWidth
const height = 250
const marginRight = 32
const marginTop = 0
const marginTop = 16
const marginBottom = 16
const y = scalePow().range([height - marginBottom, marginTop]).exponent(scale)
......@@ -132,14 +135,6 @@ export default function UploadsHistogram({title = 'Uploads over time', initialSc
.call(yAxis)
const {label, shortLabel} = domain.searchMetrics[metric]
// svg.select('.ylabel').remove()
// svg.append('text')
// .attr('class', 'ylabel')
// .attr('x', 0)
// .attr('y', 0)
// .attr('dy', '1em')
// .attr('font-size', '12px')
// .text(`${shortLabel || label}`)
let withData = svg
.selectAll('.bar').remove().exit()
......@@ -148,6 +143,15 @@ export default function UploadsHistogram({title = 'Uploads over time', initialSc
let item = withData.enter()
.append('g')
item
.append('rect')
.attr('x', d => x(d.time) + 1)
.attr('y', y(max))
.attr('width', d => x(Dates.addSeconds(d.time, interval)) - x(d.time) - 2)
.attr('class', 'background')
.style('opacity', 0)
.attr('height', y(0) - y(max))
item
.append('rect')
.attr('class', 'bar')
......@@ -206,6 +210,7 @@ export default function UploadsHistogram({title = 'Uploads over time', initialSc
return <Card classes={{root: classes.root}}>
<CardHeader
classes={{root: classes.header}}
title={title}
titleTypographyProps={{variant: 'body1'}}
action={(
......
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