diff --git a/app/pnpm-lock.yaml b/app/pnpm-lock.yaml index e590d0c13..6bc5deb83 100644 --- a/app/pnpm-lock.yaml +++ b/app/pnpm-lock.yaml @@ -2507,7 +2507,7 @@ packages: postcss: ^8.1.0 dependencies: browserslist: 4.23.2 - caniuse-lite: 1.0.30001642 + caniuse-lite: 1.0.30001643 fraction.js: 4.3.7 normalize-range: 0.1.2 picocolors: 1.0.1 @@ -2634,9 +2634,9 @@ packages: engines: {node: ^6 || ^7 || ^8 || ^9 || ^10 || ^11 || ^12 || >=13.7} hasBin: true dependencies: - caniuse-lite: 1.0.30001642 + caniuse-lite: 1.0.30001643 electron-to-chromium: 1.4.832 - node-releases: 2.0.17 + node-releases: 2.0.18 update-browserslist-db: 1.1.0(browserslist@4.23.2) dev: true @@ -2694,8 +2694,8 @@ packages: engines: {node: '>=6'} dev: true - /caniuse-lite@1.0.30001642: - resolution: {integrity: sha512-3XQ0DoRgLijXJErLSl+bLnJ+Et4KqV1PY6JJBGAFlsNsz31zeAIncyeZfLCabHK/jtSh+671RM9YMldxjUPZtA==} + /caniuse-lite@1.0.30001643: + resolution: {integrity: sha512-ERgWGNleEilSrHM6iUz/zJNSQTP8Mr21wDWpdgvRwcTXGAq6jMtOUPP4dqFPTdKqZ2wKTdtB+uucZ3MRpAUSmg==} dev: true /capnp-ts@0.7.0: @@ -4381,8 +4381,8 @@ packages: engines: {node: '>= 6.13.0'} dev: true - /node-releases@2.0.17: - resolution: {integrity: sha512-Ww6ZlOiEQfPfXM45v17oabk77Z7mg5bOt7AjDyzy7RjK9OrLrLC8dyZQoAPEOtFX9SaNf1Tdvr5gRJWdTJj7GA==} + /node-releases@2.0.18: + resolution: {integrity: sha512-d9VeXT4SJ7ZeOqGX6R5EM022wpL+eWPooLI+5UpWn2jCT1aosUQEhQP214x33Wkwx3JQMvIm+tIoVOdodFS40g==} dev: true /nopt@7.2.1: diff --git a/app/src/app/components/frames/box.tsx b/app/src/app/components/frames/box.tsx index bd2617230..2734d794f 100644 --- a/app/src/app/components/frames/box.tsx +++ b/app/src/app/components/frames/box.tsx @@ -4,6 +4,7 @@ export function Box({ flex = true, absolute, padded = true, + spaced = true, children, dark, classes, @@ -11,6 +12,7 @@ export function Box({ flex?: boolean; absolute?: "top" | "bottom"; padded?: boolean; + spaced?: boolean; dark?: boolean; classes?: string; } & ParentProps) { @@ -39,7 +41,8 @@ export function Box({ >
diff --git a/app/src/app/components/frames/chart/components/timeScale.tsx b/app/src/app/components/frames/chart/components/timeScale.tsx index a2c111ddb..e89329306 100644 --- a/app/src/app/components/frames/chart/components/timeScale.tsx +++ b/app/src/app/components/frames/chart/components/timeScale.tsx @@ -1,10 +1,16 @@ import { ONE_DAY_IN_MS } from "/src/scripts/utils/time"; import { classPropToString } from "/src/solid/classes"; +import { createRWS } from "/src/solid/rws"; import { GENESIS_DAY } from "../../../../../scripts/lightweightCharts/whitespace"; import { Box } from "../../box"; import { Scrollable } from "../../scrollable"; +const MULTIPLIER = 0.002; +const DELAY = 10; +const LEFT = -1; +const RIGHT = 1; + export function TimeScale({ scale, charts, @@ -16,30 +22,82 @@ export function TimeScale({ const disabled = createMemo(() => charts().length === 0); + const scrollDirection = createRWS(0); + + const timeScale = createMemo(() => { + const chart = charts().at(0); + if (!chart) return undefined; + return chart.timeScale(); + }); + + const interval = setInterval(() => { + const time = timeScale(); + + if (!time) return; + + const direction = scrollDirection(); + + if (!direction) return; + + const range = time.getVisibleLogicalRange(); + + if (!range) return; + + const speed = (range.to - range.from) * MULTIPLIER * direction; + + // @ts-ignore + range.from += speed; + // @ts-ignore + range.to += speed; + + time.setVisibleLogicalRange(range); + }, DELAY); + + onCleanup(() => clearInterval(interval)); + return ( - + +
+ +
+
- {(i) => ( +
); } @@ -163,17 +244,26 @@ function Button({ onClick, disabled, children, -}: ParentProps & { onClick: VoidFunction; disabled: Accessor }) { + minWidth, + square, +}: ParentProps & { + onClick: VoidFunction; + disabled?: Accessor; + minWidth?: boolean; + square?: boolean; +}) { return ( diff --git a/app/src/types/auto-imports.d.ts b/app/src/types/auto-imports.d.ts index 46d943e7c..8c6d6da62 100644 --- a/app/src/types/auto-imports.d.ts +++ b/app/src/types/auto-imports.d.ts @@ -193,8 +193,12 @@ declare global { const IconTablerPigMoney: typeof import('~icons/tabler/pig-money.jsx')['default'] const IconTablerPlay: (typeof import("~icons/tabler/play.jsx"))["default"] const IconTablerPlayCard: typeof import('~icons/tabler/play-card.jsx')['default'] - const IconTablerPlayerPauseFilled: (typeof import("~icons/tabler/player-pause-filled.jsx"))["default"] - const IconTablerPlayerPlayFilled: (typeof import("~icons/tabler/player-play-filled.jsx"))["default"] + const IconTablerPlayerPauseFilled: typeof import('~icons/tabler/player-pause-filled.jsx')['default'] + const IconTablerPlayerPlayFilled: typeof import('~icons/tabler/player-play-filled.jsx')['default'] + const IconTablerPlayerTrackNext: typeof import('~icons/tabler/player-track-next.jsx')['default'] + const IconTablerPlayerTrackNextFilled: typeof import('~icons/tabler/player-track-next-filled.jsx')['default'] + const IconTablerPlayerTrackPrev: typeof import('~icons/tabler/player-track-prev.jsx')['default'] + const IconTablerPlayerTrackPrevFilled: typeof import('~icons/tabler/player-track-prev-filled.jsx')['default'] const IconTablerPlus: typeof import('~icons/tabler/plus.jsx')['default'] const IconTablerQrCode: typeof import('~icons/tabler/qr-code.jsx')['default'] const IconTablerQrcode: typeof import('~icons/tabler/qrcode.jsx')['default']