wykrestest/lib/price/Price.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, { useRef, useState, useLayoutEffect } from 'react';
import { Line, Text } from 'react-konva';
import { Layer, Group } from 'react-konva';
import { useAtom, useAtomValue } from 'jotai';
import { dimsAtom, scaleYAtom, yAtom, dataHLAtom, winHLAtom } from '../store';
import { priceArrayAtom } from './priceUtils';
export const Price = () => {
    const layerRef = useRef(null);
    const groupRef = useRef(null);
    const dims = useAtomValue(dimsAtom);
    const scaleY = useAtomValue(scaleYAtom);
    const y = useAtomValue(yAtom);
    const dataHL = useAtomValue(dataHLAtom);
    const [priceArray, updatePriceArray] = useAtom(priceArrayAtom);
    useLayoutEffect(() => {
        updatePriceArray();
    }, [dataHL]);
    return (_jsx(_Fragment, { children: _jsx(Layer, { ref: layerRef, clip: { x: 0, y: 0, height: dims.heightSub, width: dims.width }, children: _jsx(Group, { ref: groupRef, x: 0, y: y, scaleY: scaleY, children: priceArray.map((item, i) => _jsx(PriceItemMemo, { item: item }, i.toString())) }) }) }));
};
export const PriceMemo = React.memo(Price);
export const PriceItem = ({ item }) => {
    const [scalePH, setScalePH] = useState(1);
    const [toggle, setToggle] = useState(false);
    const scaleY = useAtomValue(scaleYAtom);
    const winHL = useAtomValue(winHLAtom);
    const dataHL = useAtomValue(dataHLAtom);
    useLayoutEffect(() => {
        const percentShown = (winHL.diff / dataHL.diff); //or something to figure out %
        let sum = 0;
        const ii = item.data.length * percentShown;
        if (ii + sum < 10) {
            setScalePH(scaleY);
            setToggle(true);
            sum += ii;
        }
        else {
            setToggle(false);
            sum += ii;
        }
    }, [scaleY]);
    return (_jsx(_Fragment, { children: item.data.map((el, i) => _jsx(PriceLastMemo, { item: el, toggle: toggle, scalePH: scalePH }, i.toString())) }));
};
export const PriceItemMemo = React.memo(PriceItem);
export const PriceLast = ({ item, toggle, scalePH }) => {
    const dims = useAtomValue(dimsAtom);
    // const idk = ((dims.width) - ((dims.width - dims.widthSub)/2))
    return (_jsxs(_Fragment, { children: [_jsx(Line, { y: item.pixel, points: [0, 0, dims.widthSub, 0], stroke: 'black', strokeWidth: .1, scaleY: 1 / scalePH, visible: toggle }), _jsx(Text, { x: dims.widthSub + 2, y: item.pixel, text: item.text, fontSize: 12, scaleY: 1 / scalePH, fill: 'black', visible: toggle })] }));
};
export const PriceLastMemo = React.memo(PriceLast);