@kereon-intelligence/kereon-cards

kereon-cards

Cards and charts React library developed by kereon intelligence using LispTick

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

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

  <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

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

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

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

<ZoneCard card={card} theme={'light'} onClick={() => {}} onFavChange={() => {}} makeLisptickCode={makeLisptickCode}></ZoneCard>

Load data and display a graph

..
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%'}}/>