angular-value-flash
    TypeScript icon, indicating that this package has built-in type declarations

    1.0.5 • Public • Published

    angular-value-flash

    github action status npm version code style: prettier Contributor Covenant

    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

    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 git@github.com: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

    Install

    npm i angular-value-flash

    DownloadsWeekly Downloads

    3

    Version

    1.0.5

    License

    MIT

    Unpacked Size

    76.4 kB

    Total Files

    19

    Last publish

    Collaborators

    • brianmcallister
    • troy-prince-lab49