angular-value-flash

angular-value-flash will display a flashed value on screen based on some value change. This pattern is extremely common in financial applications, and at Lab49, we're focused on the finance industry.

Incorporate this component into your application and pass along a number. As that number changes, this component will briefly flash a color, letting the user know the number has changed. By default, this component will flash green when the value changes up, or red when the value changes down.

Not only are these colors configurable, but the properties of the flash itself and the formatting of the value are configurable as well.

Furthermore, this component doesn't come with any styles, but does provide plenty of hooks to add your own styles. Even though flash color and transition properties are configurable as props, you can still use the generated classnames (which are also configurable) to add your own unique styles.

This component is perfect for:

• Trading platforms
• Analytics dashboards
• Monitoring dashboards

Features

• Small, simple, configurable, performant
• Maintained by a team of finance industry professionals
• Includes linting, prettier & unit test validations

Table of contents

• Compodoc Documentation
• Demo
• Installation
• Usage
• API
• License
• TODO

Compodoc Documentation

Full documentation, generated using Compodoc: https://lab49.github.io/angular-value-flash

Demo

Hosted Storybook demo: https://main--60be66a91843f400393d1747.chromatic.com/

You can also run the demo locally. To get started:

git clone [email protected]:lab49/angular-value-flash.git
npm install
npm run storybook

⇡ Top

Installation

npm install angular-value-flash

⇡ Top

Usage

// Include in a module:
import { ValueFlashModule } from 'angular-value-flash';
...
@NgModule({
  imports: [
    ValueFlashModule
  ],
  ...

<!-- Use in a component template: -->
<value-flash
  [value]="20000">
</value-flash>

There are a number of classnames you can use to add your own styles. This Storybook example demonstrates a potential custom styling. Find the story source code here and the SCSS used here. Below is a list of all the available classnames, with the default .rvf_Flash prefix.

Note that due to view encapsulation, these styles will need to be included in global CSS/SCSS files, so be sure to properly scope the styles using wrapper div elements or by using specific prefixes as input to the value-flash component.

| Class | Description | | --- | --- | | .rvf_Flash | Root DOM node | | .rvf_Flash__value | Rendered value, direct (and only) child of the root node. | | .rvf_Flash--flashing | Applied only when the component is in the flashing state. | | .rvf_Flash--flashing-up | Applied when flashing 'up'. | | .rvf_Flash--flashing-down | Applied when flashing 'down'. | | .rvf_Flash--positive | Applied when the value is positive. | | .rvf_Flash--negative | Applied when the value is negative. |

⇡ Top

API

Directives

ValueFlashComponent

Selector: value-flash

Exported As: ValueFlashComponent

Properties

| Name | Default | Description | | --- | --- | --- | | @Input() downColor: string | 'red' | Color value when the component flashes 'down'. | | @Input() formatter: FormatterType | 'default' | Value display formatter type. Options are: 'currency', 'percentage', 'number', 'default'. See formatter definititions here. | | @Input() formatterFn: Formatter | | Custom formatter to use. Overrides formatter input. | | @Input() stylePrefix: string | 'rvf_Flash' | Class for root DOM node and prefix for flashing states, positive/negative states, and value node. | | @Input() timeout: number | 200 | Amount of time the flashed state is visible for, in milliseconds. | | @Input() transition: string | | Custom CSS transition property. | | @Input() transitionLength: number | 100 | Transition length, in milliseconds. | | @Input() upColor: string | 'green' | Color value when the component flashes 'up'. | | @Input() value: number | 0 | Value to display. |

License

MIT @ Lab49

⇡ Top

TODO

These items are very high level right now. Further discussion and proper roadmap planning will happen in GitHub issues and projects.

• [ ] Finalize CI process for publishing.
• [ ] Add a contributing guide.
• [ ] Create a feature roadmap.
• [ ] Publish code coverage to codecov.io.
• [ ] Finanlize README.md (logo, coverage info).
• [ ] Expand Storybook demos.
• [ ] Expand unit tests.

Sponsored by Lab49