wykrestest/lib/date/Date.js

Candlestick Chart made with Konva, React and Jotai

import { jsx as _jsx, Fragment as _Fragment, jsxs as _jsxs } from "react/jsx-runtime";
import React, { useState, useEffect, useRef, useLayoutEffect } from 'react';
import { Layer, Group } from 'react-konva';
import { Line, Text } from 'react-konva';
import { dateArrayAtom, dateBucketsAtom } from './dateState';
import { useAtom, useAtomValue } from 'jotai';
import { dimsAtom, gapAtom, scaleXAtom, xAtom, winCountAtom } from '../store';
import { splitAtom } from 'jotai/utils';
export const splitDateArrayAtom = splitAtom(dateArrayAtom);
export const Date = () => {
    const layerRef = useRef(null);
    const groupRef = useRef(null);
    const dims = useAtomValue(dimsAtom);
    const x = useAtomValue(xAtom);
    const scaleX = useAtomValue(scaleXAtom);
    const dateBuckets = useAtomValue(dateBucketsAtom);
    const [dateArray, updateDateArray] = useAtom(dateArrayAtom);
    useEffect(() => {
        updateDateArray(null);
    }, [dateBuckets]);
    return (_jsx(_Fragment, { children: _jsx(Layer, { ref: layerRef, clip: { x: 0, y: 0, height: dims.height, width: dims.widthSub }, children: _jsx(Group, { ref: groupRef, x: x, y: 0, scaleX: scaleX, children: dateArray.map((item, i) => _jsx(DateItemMemo, { item: item }, i.toString())) }) }) }));
};
export const DateMemo = React.memo(Date);
export const DateItem = ({ item }) => {
    // const item = useAtomValue(itemAtom)
    const scaleX = useAtomValue(scaleXAtom);
    const winCount = useAtomValue(winCountAtom);
    const [toggle, setToggle] = useState(false);
    const [scalePH, setScalePH] = useState(1);
    useLayoutEffect(() => {
        if (item.count / winCount < 10) {
            setScalePH(scaleX);
            setToggle(true);
        }
        else {
            setToggle(false);
        }
    }, [item.count, winCount]);
    return (_jsx(_Fragment, { children: item.data.map((itemSub, i) => {
            return (_jsx(FinalDateItemMemo, { item: itemSub, toggle: toggle, scalePH: scalePH }, i.toString()));
        }) }));
};
export const DateItemMemo = React.memo(DateItem);
export const FinalDateItem = ({ item, toggle, scalePH }) => {
    const gap = useAtomValue(gapAtom);
    const dims = useAtomValue(dimsAtom);
    // const idk = ((dims.height) - ((dims.height - dims.heightSub)/2))
    const idk = dims.heightSub + 10;
    return (_jsxs(_Fragment, { children: [_jsx(Line, { x: item.i * gap, y: 0, points: [0, 0, 0, dims.heightSub], stroke: 'black', scaleX: 1 / scalePH, strokeWidth: .1, visible: toggle }), _jsx(Text, { x: item.i * gap, y: idk, text: item.text, fontSize: 12, scaleX: 1 / scalePH, fill: 'black', visible: toggle })] }));
};
export const FinalDateItemMemo = React.memo(FinalDateItem);