mui-elapsing-bars

mui-elapsing-bars is a React component for displaying an animated progress-bar list which gets changed by time-elapsing. It is made with the flavour of our popular framework: material-ui 😋

Installation

npm install mui-elapsing-bars

OR

yarn add mui-elapsing-bars

---

Quick Start

You can see the live examples here: The Demo

import { ElapBars } from 'mui-elapsing-bars';

const data = [
  {
    key: {text: "EURUSD"},
    value: 1.2,
    date: "2018",
  },
  {
    key: {text: "GBPJPY"},
    value: 147.19,
    date: "2018",
  },
  {
    key: {text: "EURUSD"},
    value: 1.19,
    date: "2019",
  },
  {
    key: {text: "GBPJPY"},
    value: 139.27,
    date: "2019",
  },
  {
    key: {text: "EURUSD"},
    value: 1.18,
    date: "2020",
  },
  {
    key: {text: "GBPJPY"},
    value: 137.42,
    date: "2020",
  },
];

export default function App(){
  return (
    // ElapBars has one required props: `data` 
    <ElapBars
      data={data}
    />
  );
}

---

The Default Props is as it is shown below:

const defaultProps = {
  className: '',
  style: {},
  title: null,
  keyOptions: {
    title: "",
    display: {
      xs: 'icon',
      sm: 'both',
      md: 'both',
      lg: 'both',
      xl: 'both',
    },
  },
  dateOptions: {
    titleVariant: 'default',
    order: 'asc',
  },
  valueOptions: {
    title: '',
    order: 'desc',
    digitsCommaSeparation: true,
  },
  barOptions: {
    colorVariant: 'primary',
    n: undefined,
  },
  pure: false,
  run: false,
  restart: null,
  loop: false,
  delay: 1000,
  interval: 700,
  onStart: () => { },
  onRestart: () => { },
  onPause: () => { },
  onResume: () => { },
  onEnd: () => { },
};

More Docs

• To see the full documentation for the props, take a look at PROPS Document.

• To see more examples, take a look at the src/examples/ folder in the github repo.

---

Thank you for using this repo. Please feel free to open new issues and contributing to this repository.

Future Roadmap

The future works will be taken into consideration if I see there is interests from YOU in this project.

• improve perfomance by decreasing RAM usage: perform better data structures for getting data array.

• implement another component named: PureElapBars optimized for occupying less resources.

• add a way for passing arbitrary color for all the bars inplace.

• add a way for choosing whether find the maximum value in current interval or the whole data

• add more features ...