# @lunit/scalebar

> Indicator Scalebar Component

Latest version **1.0.2** (published 2019-09-06) · MIT license · 0 weekly downloads

> **Deprecated.** This package is deprecated.

## Install

```sh
npm install @lunit/scalebar
pnpm add @lunit/scalebar
yarn add @lunit/scalebar
bun add @lunit/scalebar
```

## Health

**Score 10/100 (F)** — status: deprecated.

Negative: deprecated.

## Facts

| | |
|---|---|
| Version | 1.0.2 |
| Published | 2019-09-06 |
| First published | 2019-06-24 |
| Weekly downloads | 0 |
| License | MIT |
| TypeScript types | none |
| Module format | CommonJS |
| Dependencies | 1 |
| Unpacked size | 19.7 KB |
| Known vulnerabilities | 0 |
| Install scripts | no |
| Author | Seoyeon Lee |
| Maintainers | lunit, ssen |

## Links

- npm: https://www.npmjs.com/package/@lunit/scalebar
- Repository: https://github.com/lunit-io/frontend-components
- Homepage: https://github.com/lunit-io/frontend-components#readme
- Issues: https://github.com/lunit-io/frontend-components/issues
- npm.io page: https://npm.io/package/@lunit/scalebar

## Dependencies (1)

- [react](https://npm.io/package/react.md) >=16.8.0

## Recent versions

- 1.0.2 (latest) — 2019-09-06
- 1.0.1 — 2019-08-27
- 1.0.0 — 2019-08-27
- 0.2.6 — 2019-08-26
- 0.2.5 — 2019-08-26
- 0.2.4 — 2019-08-10
- 0.2.3 — 2019-07-16
- 0.2.2 — 2019-07-15
- 0.2.1 — 2019-06-25
- 0.2.0 — 2019-06-25
- 0.1.5 — 2019-06-25
- 0.1.4 — 2019-06-24
- 0.1.3 — 2019-06-24
- 0.1.2 — 2019-06-24
- 0.1.1 — 2019-06-24
- … 1 more at https://npm.io/package/@lunit/scalebar/versions

## README

# Install

```sh
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

<!-- import **/*.stories.{ts,tsx} --title-tag h3 -->

### \_\_stories\_\_/Scalebar.stories.tsx


```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>
    );
  });
```

<!-- importend -->

---
_Source: https://npm.io/package/@lunit/scalebar · Machine-readable twin of the npm.io package page. Health data is recomputed on every publish._