Commit f25f38a3 authored by Matija Obreza's avatar Matija Obreza
Browse files

Slightly improved display of Scale descriptors

parent 4c86d3d7
import * as React from 'react';
import { withStyles } from 'material-ui/styles';
import Grid from 'material-ui/Grid';
// import { withStyles } from 'material-ui/styles';
import { VocabularyTerm } from 'model/vocabulary.model';
import { log } from 'utilities/debug';
const DescriptorScale = ({min, max, labels, className = '' }: { min: number, max: number, labels: VocabularyTerm[], className: string }) => {
const styles = (theme) => ({
/* tslint:disable */
scaleContainer: {
// nop
},
marker: {
fontSize: '21px',
textAlign: 'center',
'&:first-of-type': {
fontWeight: 'bold' as 'bold',
},
'&:last-of-type': {
fontWeight: 'bold' as 'bold',
},
},
labeled: {
border: 'solid 1px #88ba42',
color: 'White',
// borderRadius: '100%',
width: '25px',
display: 'inline-block',
height: '24px',
fontSize: '21px',
backgroundColor: '#88ba42',
textAlign: 'center',
}
/* tslint:enable */
});
const DescriptorScale = ({classes, min, max, labels, className = '' }: { classes?: any, min: number, max: number, labels: VocabularyTerm[], className: string }) => {
const bits: number[] = labels.map((l) => +l.code);
log(`Numeric labels`, bits, labels);
const bats: number[] = [ min, ...bits, max ].sort();
const bats: number[] = [];
for (let n = Math.min(min, max); n <= Math.max(min, max); n++) {
bats.push(n);
}
log(`To render`, bats);
return (
<div className={ className }>
<Grid container justify="space-between" alignItems="baseline" className="mb-20">
{ bats.map((bat) => (
<Grid key={ bat } item xs={ 1 } style={ { textAlign: 'center' } }>
<span>{ bat }</span>
<Grid container justify="space-between" alignItems="baseline" className={ `${classes.scaleContainer} mb-20` }>
{ bats.map((bat, index) => (
<Grid key={ bat } item xs={ 1 } className={ `${index === 0 || index === bats.length - 1 ? '' : bits.indexOf(bat) < 0 ? 'smHidden' : ''} ${classes.marker}` }>
<span className={ bits.indexOf(bat) < 0 ? '' : classes.labeled }>{ bat }</span>
</Grid>
)) }
</Grid>
<b>Legend:</b>
{ labels.map((label) => (
<Grid container key={ label.code }>
<Grid item xs={ 3 } />
<Grid item xs={ 9 }>
<span>{ label.code } &rarr; <b>{ label.title }</b> { label.description && <span>{ label.description }</span> }</span>
{ labels.map((label, index) => (
<Grid key={ label.code } container justify="space-between" alignItems="center">
<Grid item xs={ 2 } style={ { textAlign: 'center' } }>
<span className={ classes.labeled }>{ label.code }</span>
</Grid>
<Grid item xs={ 10 }>
<b>{ label.title }</b> { label.description && <span>{ label.description }</span> }
</Grid>
</Grid>
)) }
......@@ -35,4 +70,4 @@ const DescriptorScale = ({min, max, labels, className = '' }: { min: number, max
);
};
export default DescriptorScale;
export default withStyles(styles)(DescriptorScale);
......@@ -160,7 +160,7 @@ class DisplayPage extends React.Component<IDisplayPageProps, any> {
<Properties>
<PropertiesItem title="Allowed values:">{ descriptor.integerOnly ? 'Integers' : 'Decimals' }</PropertiesItem>
</Properties>
<DescriptorScale className="p-20" min={ descriptor.minValue } max={ descriptor.maxValue } labels={ descriptor.terms } />
<DescriptorScale className="mt-20" min={ descriptor.minValue } max={ descriptor.maxValue } labels={ descriptor.terms } />
</Section>
</Grid>
}
......
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