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
- Create your project
npx create-react-app my-app --template typescript
- Install the library
npm i @kereon-intelligence/kereon-cards
Yarn
- Create your project
yarn create react-app my-app --template typescript
- 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
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%'}}/>