1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
|
import React, { Component } from 'react'
import { Link } from 'react-router-dom'
import { clamp, percent } from 'app/utils'
export const Swatch = ({ color }) => (
<div
className='swatch'
style={{ backgroundColor: color ? 'rgb(' + color.join(',') + ')' : 'transparent' }}
/>
)
export const Dot = ({ color }) => (
<div
className='dot'
style={{ backgroundColor: color }}
/>
)
export const Columns = ({ count, margin, width, object, children, className }) => {
if (!object || !object.length) object = children
if (!object || !object.length) return null
margin = margin || 380
width = width || 250
count = count || Math.floor((window.innerWidth - margin) / width)
let columns = []
let len = object.length
let j = 0
for (let i = 0; i < count; i++) {
let column_len = len * (i + 1) / count
let column = []
for (; j < column_len; j++) {
column.push(<div key={j}>{object[j]}</div>)
}
columns.push(<div key={"col_" + i + "_" + j} className='column' style={{ width }}>{column}</div>)
if (j >= len) break
}
return (
<div className={'row columnCells ' + className}>
{columns}
</div>
)
}
export const Statistic = ({ name, value, link }) => (
<div className='statistic row'>
<div className='title'>{link ? <Link to={link}>{name}</Link> : name}</div>
<div className='int'>{value}</div>
</div>
)
export const Detections = ({ detections, labels }) => (
(detections || []).map(({ label, rect }, i) => (
<div
className='rect'
key={i}
style={{
left: percent(clamp(rect.x1)),
width: percent(clamp(rect.x2 - rect.x1, 0, Math.min(1.0, 1.0 - rect.x1))),
top: percent(clamp(rect.y1)),
height: percent(clamp(rect.y2 - rect.y1, 0, Math.min(1.0, 1.0 - rect.y1))),
}}>
{labels && <span>{label.replace(/_/g, ' ')}</span>}
</div>
)
))
export const Progress = ({ current, total }) => (
<div className='progress'>
<div className='bar' style={{ width: Math.round(100 * current / total) + '%' }} />
</div>
)
|
