wykrestest/lib/Chart.js

Candlestick Chart made with Konva, React and Jotai

import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
import { useLayoutEffect, useEffect } from 'react';
import { Stage } from 'react-konva';
//import { Main, Date, Price } from './canvas/index' //TODO:
import { MainMemo } from './main/Main';
import { DateMemo } from './date/Date';
import { PriceMemo } from './price/Price';
//store Stuff
import { dragAtom, dataStoreAtom, dimsAtom, yAtom, scaleXAtom, winHLAtom, scaleYAtom, mainStageAtom } from './store';
import { useAtom, useAtomValue } from 'jotai';
export const Chart = ({ chartData, height, width }) => {
    const mainStage = useAtomValue(mainStageAtom);
    // const [getData, getDataTwo] = useAxios() //not needed later
    const [onDown, onUp] = useScroll();
    const [_, onZoom] = useAtom(scaleXAtom);
    const dims = useDims(height, width);
    useData(chartData);
    return (_jsx("div", { children: _jsx("div", { id: 'Chart', className: 'Chart', style: { border: 'dashed', height: dims.height, width: dims.width }, children: _jsxs(Stage, { ref: mainStage, width: dims.width, height: dims.height, onMouseDown: onDown, onMouseUp: onUp, onWheel: onZoom, children: [_jsx(MainMemo, {}), _jsx(DateMemo, {}), _jsx(PriceMemo, {})] }) }) }));
};
//----------------------------------------------------------------------------------------------------------
//can keep these here or move them somewhere else? they arent used anywhere else...just figured spliting them
//will make it easier later
// export const useAxios = () => {
//   const [_, setData] = useAtom(dataStoreAtom)
//   const getData = async() => {
//     console.log('hey')
//     const result = await axios.get('get_data')
//     console.log(result)
//     setData(result.data)
//   }
//   const getDataTwo = async() => {
//     const result = await axios.get('get_data_two')
//     setData(result.data)
//   }
//   return [getData, getDataTwo]
// }
export const useData = (data) => {
    const [_, setData] = useAtom(dataStoreAtom);
    useEffect(() => {
        setData(data);
    }, [data]);
};
export const useDims = (height, width) => {
    const [dims, setDims] = useAtom(dimsAtom);
    useEffect(() => {
        setDims({ height: height, width: width });
    }, [height, width]);
    return dims;
};
export const useScroll = () => {
    const winHL = useAtomValue(winHLAtom);
    const { dataHL } = useAtomValue(dataStoreAtom);
    const [, setY] = useAtom(yAtom);
    const [, setScaleY] = useAtom(scaleYAtom);
    const dims = useAtomValue(dimsAtom);
    //updates y/ScaleY after winHL is done...had jumpyness if I moved it back to setWinHLAtom
    useLayoutEffect(() => {
        if (winHL.high != 0) {
            setY(-((dataHL.high - winHL.high) / winHL.diff) * dims.heightSub);
            setScaleY(dataHL.diff / winHL.diff);
        }
    }, [winHL]);
    //trigger the start/stop scroll inside of main
    const [, setDrag] = useAtom(dragAtom);
    const onDown = () => {
        setDrag(true);
    };
    const onUp = () => {
        setDrag(false);
    };
    return [onDown, onUp];
};