diff options
Diffstat (limited to 'animism-align/frontend/common/miscellaneous.component.js')
| -rw-r--r-- | animism-align/frontend/common/miscellaneous.component.js | 82 |
1 files changed, 0 insertions, 82 deletions
diff --git a/animism-align/frontend/common/miscellaneous.component.js b/animism-align/frontend/common/miscellaneous.component.js deleted file mode 100644 index 4eb23f1..0000000 --- a/animism-align/frontend/common/miscellaneous.component.js +++ /dev/null @@ -1,82 +0,0 @@ -import React, { Component } from 'react'; -import { Link } from 'react-router-dom' -import { clamp, percent } from '../util' - -export const Loader = () => ( - <div> - <div className='circular-loader color'> - <div className="stroke"> - <div className="stroke-left"></div> - <div className="stroke-right"></div> - </div> - </div> - </div> -) - -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> -) |
