1.0.2 • Published 5 years ago
@lunit/scalebar v1.0.2
Install
npm install @lunit/scalebar
API
<ColorScalebar width={number}
steps={number}
scaleImage={ReactElement<SVGProps<SVGImageElement>>}
tickWidth?={number}
tickHeight?={number}
tickColor={string}
className?={string}>
{children}
</ColorScalebar>
<GrayScalebar width={number}
steps={number}
backgroundColor={string}
lines={{ lineWidth: number, step: number, color: string }[]}
tickWidth?={number}
tickHeight?={number}
tickColor={string}
className?={string}>
{children}
</GrayScalebar>
Sample Codes
https://lunit-io.github.io/opt-tool-frontend
Stories
__stories__/Scalebar.stories.tsx
import { HeatmapScaleSVGImage } from '@lunit/heatmap';
import { number, radios, withKnobs } from '@storybook/addon-knobs';
import { storiesOf } from '@storybook/react';
import React, { ReactNode } from 'react';
import styled from 'styled-components';
import { ColorScalebar } from '../components/ColorScalebar';
import { GrayScalebar } from '../components/GrayScalebar';
import { scalebarHeight } from '../env';
const ScalebarTopLabel = styled.span`
font-size: 11px;
font-weight: 200;
font-style: normal;
font-stretch: normal;
line-height: 1.2;
letter-spacing: 2px;
color: #ffffff;
position: absolute;
text-align: justify;
text-align-last: justify;
text-justify: inter-word;
top: -20px;
left: 0;
&:after {
content: "";
display: inline-block;
width: 100%;
}
`;
const ScalebarLeftLabel = styled.span`
font-size: 11px;
font-weight: 200;
font-style: normal;
font-stretch: normal;
line-height: 1.2;
letter-spacing: 2px;
color: #ffffff;
position: absolute;
text-align: right;
top: 0;
width: 400px;
left: -410px;
`;
const scalebarDecorator = (story: () => ReactNode) => (
<div style={{marginLeft: 250, marginTop: 100}}>
{story()}
</div>
);
storiesOf('scalebar', module)
.addDecorator(scalebarDecorator)
.addDecorator(withKnobs)
.add('<GrayScalebar>', () => {
const width: number = number('Width', 200, {range: true, step: 10, min: 100, max: 600});
const label: string = radios<string>('Label', {
None: 'none',
Top: 'top',
Left: 'left',
}, 'none');
return (
<GrayScalebar width={width}
steps={10}
backgroundColor="#333333"
lines={[
{step: 1, lineWidth: 2, color: '#ffffff'},
{step: 5, lineWidth: 4, color: '#ffffff'},
{step: 9, lineWidth: 6, color: '#ffffff'},
]}>
{
label === 'top'
? (
<ScalebarTopLabel style={{width}}>
STROKE WEIGHT INDICATOR
</ScalebarTopLabel>
)
: label === 'left'
? (
<ScalebarLeftLabel>
STROKE WEIGHT INDICATOR
</ScalebarLeftLabel>
)
: null
}
</GrayScalebar>
);
})
.add('<ColorScalebar>', () => {
const width: number = number('Width', 200, {range: true, step: 10, min: 100, max: 600});
const label: string = radios<string>('Label', {
None: 'none',
Top: 'top',
Left: 'left',
}, 'none');
return (
<ColorScalebar width={width}
steps={10}
scaleImage={<HeatmapScaleSVGImage width={width} height={scalebarHeight} threshold={0.1}/>}
tickColor="#333333">
{
label === 'top'
? (
<ScalebarTopLabel style={{width}}>
HEATMAP COLOR INDICATOR
</ScalebarTopLabel>
)
: label === 'left'
? (
<ScalebarLeftLabel>
HEATMAP COLOR INDICATOR
</ScalebarLeftLabel>
)
: null
}
</ColorScalebar>
);
});