Nautical Pirate Moustache

    @kereon-intelligence/kereon-cards
    TypeScript icon, indicating that this package has built-in type declarations

    1.0.9 • Public • Published

    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
    
    1. Install the library
    npm i @kereon-intelligence/kereon-cards
    

    Yarn

    1. Create your project
    yarn create react-app my-app --template typescript
    
    1. 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%'}}/>

    Install

    npm i @kereon-intelligence/kereon-cards

    DownloadsWeekly Downloads

    2

    Version

    1.0.9

    License

    MIT

    Unpacked Size

    2.49 MB

    Total Files

    145

    Last publish

    Collaborators

    • yoglrn
    • cjoulain