npm package: @kereon-intelligence/kereon-cards
Description: Cards and charts React library developed by [kereon intelligence](https://kereon-intelligence.com/) using [LispTick](https://lisptick.kereon-intelligence.com/)
Author: Kereon Intelligence
Latest version: 1.0.9

# kereon-cards
Cards and charts React library developed by [kereon intelligence](https://kereon-intelligence.com/) using [LispTick](https://lisptick.kereon-intelligence.com/)


## Features
- 🃏 Display cards with customized data and icon
- ❤️ Add/Remove card from favorites
- 💥 Incident list for today
- 📅 Agenda history
- 📊 HeatChart and MetricChart

## Create project
You can either use NPM or Yarn to create your project
### NPM
1. Create your project
```
npx create-react-app my-app --template typescript
```
2. Install the library
```
npm i @kereon-intelligence/kereon-cards
```

### Yarn
1. Create your project
```
yarn create react-app my-app --template typescript
```
2. Install the library
```
yarn add @kereon-intelligence/kereon-cards
```

## Setup
Define your store in `store.ts` and add `ZoneReducer` from the library
```typescript
import { ZoneReducer } from '@kereon-intelligence/kereon-cards';
import { createStore, combineReducers } from 'redux';

export const rootReducer = combineReducers({
  kcards : ZoneReducer
});

export type RootState = ReturnType<typeof rootReducer>;

export default createStore(rootReducer)
```
Use your store in your `index.tsx`
```typescript
  <Provider store={store}>
      <App />
    </Provider>
```

## How to use
Define your cards attributes type, it will be added to the cards basic attributes as `infos` attribute
```typescript
export type Condition = {
  operator: string;
  value: number;
  period: string;
}
```

Define your card

⚠️Please use a SVG icon with no color as `image` to see the card state
```typescript
const [card, setCard] = useState<IZoneObject<Condition>>(
    {
    id: "BCH",
    title: "Bitcoin Cash",
    state: cardState.bch ? "g" : "r",
    image: BCH,
    infos: {operator: '<', value: -2, period: '1h'},
    }
);
```

Define makeLisptickCode function which should return the lisptick code to get data for a card
```typescript
const makeLisptickCode = (
    card: IZoneObject<Condition>,
    type: string,
    period: string = "1h",
    start: string = "",
    stop: string = ""
  ) => {
      let code = `(def 
          period ${card.infos.period}
          stop ${stop};(localize "Europe/Paris" 2022-05-12T19:00 )
          start ${start};(localize "Europe/Paris" 2022-05-12T07:00 )
          source "bitstamp"
          lag 1h
          code "${card.id}"
          logic *;OR -> + AND -> *
        )
        (defn metric[alert code lag start stop]
          (subsample period alert 
          (*(/(- 
            (timeserie @trade-price source code start stop)
            (+(timeserie @trade-price source code start stop)lag))
            (+(timeserie @trade-price source code start stop)lag))100)))
        ;Synchonized alert and metric
        `+(type == "metric" ? "(sync" : "")+`
          (sign(logic[
            (`+card.infos.operator+`(metric `+(card.infos.value < 0 ? 'min' : 'max')+` code lag start stop)`+card.infos.value+`)
          ]))
          `+ (type == "metric" ? "(metric "+(card.infos.value < 0 ? 'min' : 'max')+" code lag start stop))" : "");
        console.log(code);

      return code;
  }
```

You can now display your card
```typescript
<ZoneCard card={card} theme={'light'} onClick={() => {}} onFavChange={() => {}} makeLisptickCode={makeLisptickCode}></ZoneCard>
```

Load data and display a graph
```typescript
..
let code = makeLisptickCode(card, "metric", "1h", "(- (now) 8h)", "(now)");
const lisptickSocket = makeLisptickRequest(code, setResponse, function() {
  setData(resRef.current);
});
..
<HeatChart showLegend={false} serieName={'name'} data={data} style={{width: '40px', height: '100%'}}/>
```