el.scrollWidth > el.clientWidth);
-
- checkArrows();
+ checkScrollable();
});
});
+ function checkScrollable() {
+ const div = maybeScrollable();
+
+ if (div) {
+ scrollable.set(() => div.scrollWidth > div.clientWidth);
+ }
+
+ checkArrows();
+ }
+
function checkArrows() {
const target = maybeScrollable()!;
@@ -38,6 +46,9 @@ export function Scrollable({
showRightArrow.set(() => right > 0);
}
+ // @ts-ignore
+ createEffect(on(children, checkScrollable));
+
return (
;
backgroundOpacity: SL<{ text: string; value: number }>;
}) {
- createEffect(() => {
- if (
- appTheme.selected() === "Dark" ||
- (appTheme.selected() === "System" &&
- window.matchMedia("(prefers-color-scheme: dark)").matches)
- ) {
- document.documentElement.classList.add("dark");
- } else {
- document.documentElement.classList.remove("dark");
- }
- });
-
return (
-
- And other stuff NOT transmitted by
- relays.
-
+
@@ -74,7 +59,13 @@ export function SettingsFrame({
- Version: {version}
+ Version:{" "}
+
+ {version}
+
diff --git a/app/src/app/index.tsx b/app/src/app/index.tsx
index 1d38cb3d9..5e222ccd5 100644
--- a/app/src/app/index.tsx
+++ b/app/src/app/index.tsx
@@ -2,8 +2,6 @@ import { createRWS } from "/src/solid/rws";
import { standalone } from "../env";
import { createDatasets } from "../scripts/datasets";
-import { chartState } from "../scripts/lightweightCharts/chart/state";
-import { setTimeScale } from "../scripts/lightweightCharts/chart/time";
import { createPresets } from "../scripts/presets";
import { createSL } from "../scripts/utils/selectableList/static";
import { sleep } from "../scripts/utils/sleep";
@@ -41,6 +39,22 @@ export function App() {
defaultIndex: 0,
});
+ const dark = createRWS(false);
+
+ createEffect(() => {
+ if (
+ appTheme.selected() === "Dark" ||
+ (appTheme.selected() === "System" &&
+ window.matchMedia("(prefers-color-scheme: dark)").matches)
+ ) {
+ dark.set(true);
+ document.documentElement.classList.add("dark");
+ } else {
+ dark.set(false);
+ document.documentElement.classList.remove("dark");
+ }
+ });
+
const backgroundMode = createSL(["Scroll", "Static"] as const, {
saveable: {
key: "bg-mode",
@@ -222,8 +236,6 @@ export function App() {
windowWidth60p(),
),
);
-
- setTimeScale(resizeInitialRange());
}
}}
onMouseUp={() => resizingBarStart.set(undefined)}
@@ -267,6 +279,7 @@ export function App() {
qrcode={qrcode}
standalone={false}
datasets={datasets}
+ dark={dark}
/>
@@ -303,16 +316,12 @@ export function App() {
{
- resizeInitialRange.set(chartState.range);
-
if (resizingBarStart() === undefined) {
resizingBarStart.set(event.clientX);
resizingBarWidth.set(barWidth());
}
}}
onTouchStart={(event) => {
- resizeInitialRange.set(chartState.range);
-
if (resizingBarStart() === undefined) {
resizingBarStart.set(event.touches[0].clientX);
resizingBarWidth.set(barWidth());
@@ -320,8 +329,6 @@ export function App() {
}}
onDblClick={() => {
barWidth.set(0);
-
- setTimeScale(resizeInitialRange());
}}
/>
@@ -334,6 +341,7 @@ export function App() {
qrcode={qrcode}
fullscreen={fullscreen}
datasets={datasets}
+ dark={dark}
/>
diff --git a/app/src/scripts/datasets/consts/types.d.ts b/app/src/scripts/datasets/consts/types.d.ts
index a9357aeeb..3a38ac7ae 100644
--- a/app/src/scripts/datasets/consts/types.d.ts
+++ b/app/src/scripts/datasets/consts/types.d.ts
@@ -9,7 +9,10 @@ type AddressCohortKeySplitByLiquidity = `${LiquidityKey}_${AddressCohortKey}`;
type AnyCohortKey = AgeCohortKey | AddressCohortKey;
-type AnyPossibleCohortKey = AnyCohortKey | AddressCohortKeySplitByLiquidity;
+type AnyPossibleCohortKey =
+ | AnyCohortKey
+ | AddressCohortKeySplitByLiquidity
+ | LiquidityKey;
type AverageName = (typeof import("./averages").averages)[number]["key"];
diff --git a/app/src/scripts/datasets/resource.ts b/app/src/scripts/datasets/resource.ts
index 1c42a1efa..7751ed11e 100644
--- a/app/src/scripts/datasets/resource.ts
+++ b/app/src/scripts/datasets/resource.ts
@@ -1,12 +1,7 @@
-import {
- ONE_DAY_IN_MS,
- ONE_HOUR_IN_MS,
- ONE_MINUTE_IN_MS,
-} from "/src/scripts/utils/time";
+import { ONE_HOUR_IN_MS, ONE_MINUTE_IN_MS } from "/src/scripts/utils/time";
import { createRWS } from "/src/solid/rws";
import { HEIGHT_CHUNK_SIZE } from ".";
-import { debounce } from "../utils/debounce";
export function createResourceDataset<
Scale extends ResourceScale,
@@ -49,21 +44,24 @@ export function createResourceDataset<
const chunkId = json()?.chunk.id!;
if (Array.isArray(map)) {
- return map.map(
- (value, index) =>
- ({
- number: chunkId + index,
- time: (chunkId + index) as Time,
- ...(typeof value !== "number" && value !== null
- ? { ...(value as OHLC), value: value.close }
- : { value: value === null ? NaN : (value as number) }),
- }) as any as Value,
- );
+ const values = new Array(map.length);
+
+ for (let i = 0; i < map.length; i++) {
+ const value = map[i];
+
+ values[i] = {
+ time: (chunkId + i) as Time,
+ ...(typeof value !== "number" && value !== null
+ ? { ...(value as OHLC), value: value.close }
+ : { value: value === null ? NaN : (value as number) }),
+ } as any as Value;
+ }
+
+ return values;
} else {
return Object.entries(map).map(
([date, value]) =>
({
- number: new Date(date).valueOf() / ONE_DAY_IN_MS,
time: date,
...(typeof value !== "number" && value !== null
? { ...(value as OHLC), value: value.close }
@@ -89,10 +87,18 @@ export function createResourceDataset<
const fetched = fetchedJSONs.at(index);
+ if (scale === "height" && index > 0) {
+ const length = fetchedJSONs.at(index - 1)?.vec()?.length;
+
+ if (length !== undefined && length < HEIGHT_CHUNK_SIZE) {
+ return;
+ }
+ }
+
if (!fetched || fetched.loading) {
return;
} else if (fetched.at) {
- const diff = new Date().valueOf() - fetched.at.valueOf();
+ const diff = new Date().getTime() - fetched.at.getTime();
if (
diff < ONE_MINUTE_IN_MS ||
@@ -127,6 +133,11 @@ export function createResourceDataset<
} catch {}
}
+ if (!navigator.onLine) {
+ fetched.loading = false;
+ return;
+ }
+
try {
const fetchedResponse = await fetch(urlWithQuery);
@@ -153,7 +164,7 @@ export function createResourceDataset<
return;
}
- if (previousLength && previousLength <= newLength) {
+ if (previousLength && previousLength === newLength) {
const previousLastValue = Object.values(previousMap || []).at(-1);
const newLastValue = Object.values(newMap).at(-1);
@@ -195,43 +206,11 @@ export function createResourceDataset<
fetched.loading = false;
};
- const valuesCallback = (vecs: Value[][]) => {
- let length = 0;
- for (let i = 0; i < vecs.length; i++) {
- length += vecs[i].length;
- }
-
- if (!length) return;
-
- const array = new Array(length);
- let k = 0;
- for (let i = 0; i < vecs.length; i++) {
- let vec = vecs[i];
- for (let j = 0; j < vec.length; j++) {
- array[k++] = vec[j];
- }
- }
-
- if (k !== length) throw Error("e");
-
- values.set(array);
- };
-
- const debouncedValuesCallback = debounce(valuesCallback, 100);
-
- const values = createRWS([]);
-
- createEffect(() => {
- const vecs = fetchedJSONs.map((fetched) => fetched.vec() || []);
- debouncedValuesCallback(vecs);
- });
-
const resource: ResourceDataset = {
scale,
url: baseURL,
fetch: _fetch,
fetchedJSONs,
- values,
drop() {
fetchedJSONs.forEach((fetched) => {
fetched.at = null;
@@ -254,6 +233,6 @@ async function convertResponseToJSON<
}
}
-function chunkIdToIndex(scale: ResourceScale, id: number) {
+export function chunkIdToIndex(scale: ResourceScale, id: number) {
return scale === "date" ? id - 2009 : Math.floor(id / HEIGHT_CHUNK_SIZE);
}
diff --git a/app/src/scripts/datasets/types.d.ts b/app/src/scripts/datasets/types.d.ts
index 5230cfbfc..d1f8ac587 100644
--- a/app/src/scripts/datasets/types.d.ts
+++ b/app/src/scripts/datasets/types.d.ts
@@ -6,7 +6,7 @@ type AnyDatasets = DateDatasets | HeightDatasets;
type ResourceScale = (typeof import("./index").scales)[index];
-type DatasetValue = T & Numbered & Valued;
+type DatasetValue = T & Valued;
interface ResourceDataset<
Scale extends ResourceScale,
@@ -24,7 +24,6 @@ interface ResourceDataset<
url: string;
fetch: (id: number) => void;
fetchedJSONs: FetchedResult[];
- values: Accessor[]>;
drop: VoidFunction;
}
diff --git a/app/src/scripts/lightweightCharts/chart/create.ts b/app/src/scripts/lightweightCharts/chart/create.ts
index 7c943c2b6..2b4c94402 100644
--- a/app/src/scripts/lightweightCharts/chart/create.ts
+++ b/app/src/scripts/lightweightCharts/chart/create.ts
@@ -11,11 +11,20 @@ import { HorzScaleBehaviorHeight } from "./horzScaleBehavior";
export function createChart(
scale: ResourceScale,
element: HTMLElement,
- priceScaleOptions?: DeepPartialPriceScaleOptions,
+ {
+ dark,
+ priceScaleOptions,
+ }: {
+ dark: boolean;
+ priceScaleOptions: DeepPartialPriceScaleOptions;
+ },
) {
console.log(`chart: create (scale: ${scale})`);
- const { white } = colors;
+ const { white, black } = colors;
+
+ const textColor = dark ? white : black;
+ const borderColor = dark ? "#332F24" : "#F1E4E0";
const options: DeepPartialChartOptions = {
autoSize: true,
@@ -23,18 +32,18 @@ export function createChart(
fontFamily: "Lexend",
background: { color: "transparent" },
fontSize: 14,
- textColor: white,
+ textColor,
},
grid: {
vertLines: { visible: false },
horzLines: { visible: false },
},
rightPriceScale: {
- borderColor: "#332F24",
+ borderColor,
},
timeScale: {
- borderColor: "#332F24",
- minBarSpacing: scale === "date" ? 0.05 : 0.005,
+ borderColor,
+ minBarSpacing: 0.05,
shiftVisibleRangeOnNewBar: false,
allowShiftVisibleRangeOnWhitespaceReplacement: false,
},
@@ -46,12 +55,12 @@ export function createChart(
crosshair: {
mode: CrosshairMode.Normal,
horzLine: {
- color: white,
- labelBackgroundColor: white,
+ color: textColor,
+ labelBackgroundColor: textColor,
},
vertLine: {
- color: white,
- labelBackgroundColor: white,
+ color: textColor,
+ labelBackgroundColor: textColor,
},
},
localization: {
diff --git a/app/src/scripts/lightweightCharts/chart/markers.ts b/app/src/scripts/lightweightCharts/chart/markers.ts
index 6c1d5500d..e27309c23 100644
--- a/app/src/scripts/lightweightCharts/chart/markers.ts
+++ b/app/src/scripts/lightweightCharts/chart/markers.ts
@@ -1,121 +1,128 @@
import { colors } from "/src/scripts/utils/colors";
-import { ONE_DAY_IN_MS } from "/src/scripts/utils/time";
-import { chartState } from "./state";
-import { GENESIS_DAY } from "./whitespace";
+import { chunkIdToIndex } from "../../datasets/resource";
-export const setMinMaxMarkers = ({
+export function setMinMaxMarkers({
scale,
- candlesticks,
- range,
- lowerOpacity,
+ visibleRange,
+ legendList,
+ activeRange,
}: {
scale: ResourceScale;
- candlesticks: DatasetValue[];
- range: TimeRange;
- lowerOpacity: boolean;
-}) => {
- const first = candlesticks.at(0);
+ visibleRange: TimeRange | undefined;
+ legendList: SeriesLegend[];
+ activeRange: Accessor;
+}) {
+ if (!visibleRange) return;
- if (!first) return;
+ const { from, to } = visibleRange;
- const offset =
- scale === "date"
- ? first.number - new Date(GENESIS_DAY).valueOf() / ONE_DAY_IN_MS
- : 0;
+ const dateFrom = new Date(from as string);
+ const dateTo = new Date(to as string);
- const slicedDataList = range
- ? candlesticks.slice(
- Math.ceil(range.from - offset < 0 ? 0 : range.from - offset),
- Math.floor(range.to - offset) + 1,
- )
- : [];
+ let max = undefined as [number, Time, number, ISeriesApi] | undefined;
+ let min = undefined as [number, Time, number, ISeriesApi] | undefined;
- const series = chartState.priceSeries;
+ legendList.forEach(({ seriesList, dataset }) => {
+ activeRange().forEach((id) => {
+ const seriesIndex = chunkIdToIndex(scale, id);
- if (!series) return;
+ const series = seriesList.at(seriesIndex)?.();
- if (slicedDataList.length) {
- const markers: (SeriesMarker