@orochibraru/ui 1.0.0 → 1.0.1

package/dist/components/blocks/time-series-chart/scale.js

@@ -0,0 +1,136 @@
+export function niceStep(span, count) {
+    const raw = span / Math.max(1, count);
+    const magnitude = 10 ** Math.floor(Math.log10(raw));
+    const residual = raw / magnitude;
+    if (residual > 5) {
+        return 10 * magnitude;
+    }
+    if (residual > 2) {
+        return 5 * magnitude;
+    }
+    if (residual > 1) {
+        return 2 * magnitude;
+    }
+    return magnitude;
+}
+export function niceTicks(minimum, maximum, count) {
+    const low = Math.min(0, minimum);
+    const high = Math.max(0, maximum) === low ? low + 1 : Math.max(0, maximum);
+    const step = niceStep(high - low, count);
+    const decimals = Math.max(0, -Math.floor(Math.log10(step)));
+    const first = Math.floor(low / step);
+    const last = Math.ceil(high / step);
+    const ticks = [];
+    for (let index = first; index <= last; index++) {
+        ticks.push(Number((index * step).toFixed(decimals)));
+    }
+    return ticks;
+}
+export function scaleLinear(domain, range) {
+    const [domainStart, domainEnd] = domain;
+    const [rangeStart, rangeEnd] = range;
+    const span = domainEnd - domainStart;
+    return (value) => span === 0
+        ? (rangeStart + rangeEnd) / 2
+        : rangeStart + ((value - domainStart) / span) * (rangeEnd - rangeStart);
+}
+export function columnsOf(series) {
+    const times = new Set();
+    for (const entry of series) {
+        for (const point of entry.points) {
+            times.add(point.at.getTime());
+        }
+    }
+    return [...times].sort((first, second) => first - second);
+}
+export function valueMap(series) {
+    return new Map(series.points.map((point) => [point.at.getTime(), point.value]));
+}
+export function valueExtent(series) {
+    let minimum = Infinity;
+    let maximum = -Infinity;
+    for (const entry of series) {
+        for (const point of entry.points) {
+            if (point.value !== null && Number.isFinite(point.value)) {
+                minimum = Math.min(minimum, point.value);
+                maximum = Math.max(maximum, point.value);
+            }
+        }
+    }
+    return minimum === Infinity ? null : [minimum, maximum];
+}
+export function segmentsOf(points) {
+    const sorted = [...points].sort((first, second) => first.at.getTime() - second.at.getTime());
+    const segments = [];
+    let current = [];
+    for (const point of sorted) {
+        if (point.value === null || !Number.isFinite(point.value)) {
+            if (current.length) {
+                segments.push(current);
+            }
+            current = [];
+        }
+        else {
+            current.push(point);
+        }
+    }
+    if (current.length) {
+        segments.push(current);
+    }
+    return segments;
+}
+export function nearestIndex(times, target) {
+    let low = 0;
+    let high = times.length - 1;
+    while (high - low > 1) {
+        const middle = Math.floor((low + high) / 2);
+        if ((times[middle] ?? 0) <= target) {
+            low = middle;
+        }
+        else {
+            high = middle;
+        }
+    }
+    const lowDistance = Math.abs(target - (times[low] ?? 0));
+    const highDistance = Math.abs((times[high] ?? 0) - target);
+    return highDistance < lowDistance ? high : low;
+}
+export function medianSpacing(times) {
+    const gaps = times
+        .slice(1)
+        .map((time, index) => time - (times[index] ?? time))
+        .sort((first, second) => first - second);
+    return gaps[Math.floor(gaps.length / 2)] ?? 0;
+}
+export function linePath(positions) {
+    return positions
+        .map((position, index) => `${index ? "L" : "M"}${position.x.toFixed(1)},${position.y.toFixed(1)}`)
+        .join("");
+}
+export function areaPath(positions, baseline) {
+    const first = positions[0];
+    const last = positions.at(-1);
+    if (!first || !last) {
+        return "";
+    }
+    return `${linePath(positions)}L${last.x.toFixed(1)},${baseline.toFixed(1)}L${first.x.toFixed(1)},${baseline.toFixed(1)}Z`;
+}
+export function barPath(left, width, top, baseline) {
+    const height = Math.abs(baseline - top);
+    if (height < 0.5 || width <= 0) {
+        return "";
+    }
+    const radius = Math.min(4, width / 2, height);
+    const right = left + width;
+    const direction = top <= baseline ? 1 : -1;
+    const sweep = direction === 1 ? 1 : 0;
+    const corner = top + direction * radius;
+    return [
+        `M${left},${baseline}`,
+        `V${corner}`,
+        `A${radius},${radius} 0 0 ${sweep} ${left + radius},${top}`,
+        `H${right - radius}`,
+        `A${radius},${radius} 0 0 ${sweep} ${right},${corner}`,
+        `V${baseline}Z`,
+    ].join("");
+}

package/dist/components/blocks/time-series-chart/time.d.ts

@@ -0,0 +1,7 @@
+export type TimeUnit = "minute" | "hour" | "day" | "month" | "year";
+export declare function timeTicks(start: Date, end: Date, maximum: number): {
+    ticks: Date[];
+    unit: TimeUnit;
+};
+export declare function formatTick(date: Date, unit: TimeUnit): string;
+export declare function formatInstant(date: Date, spacing: number): string;

package/dist/components/blocks/time-series-chart/time.js

@@ -0,0 +1,96 @@
+const minute = 60_000;
+const hour = 60 * minute;
+const day = 24 * hour;
+const intervals = [
+    { unit: "minute", step: 1, length: minute },
+    { unit: "minute", step: 5, length: 5 * minute },
+    { unit: "minute", step: 15, length: 15 * minute },
+    { unit: "minute", step: 30, length: 30 * minute },
+    { unit: "hour", step: 1, length: hour },
+    { unit: "hour", step: 3, length: 3 * hour },
+    { unit: "hour", step: 6, length: 6 * hour },
+    { unit: "hour", step: 12, length: 12 * hour },
+    { unit: "day", step: 1, length: day },
+    { unit: "day", step: 2, length: 2 * day },
+    { unit: "day", step: 7, length: 7 * day },
+    { unit: "day", step: 14, length: 14 * day },
+    { unit: "month", step: 1, length: 30 * day },
+    { unit: "month", step: 3, length: 91 * day },
+    { unit: "month", step: 6, length: 182 * day },
+    { unit: "year", step: 1, length: 365 * day },
+    { unit: "year", step: 2, length: 730 * day },
+    { unit: "year", step: 5, length: 1826 * day },
+    { unit: "year", step: 10, length: 3652 * day },
+];
+function floorTo(date, unit, step) {
+    const result = new Date(date);
+    if (unit === "minute") {
+        result.setMinutes(Math.floor(result.getMinutes() / step) * step, 0, 0);
+        return result;
+    }
+    if (unit === "hour") {
+        result.setHours(Math.floor(result.getHours() / step) * step, 0, 0, 0);
+        return result;
+    }
+    result.setHours(0, 0, 0, 0);
+    if (unit === "month") {
+        result.setMonth(Math.floor(result.getMonth() / step) * step, 1);
+    }
+    if (unit === "year") {
+        result.setFullYear(Math.floor(result.getFullYear() / step) * step, 0, 1);
+    }
+    return result;
+}
+function advance(date, unit, step) {
+    const result = new Date(date);
+    if (unit === "minute") {
+        result.setMinutes(result.getMinutes() + step);
+    }
+    else if (unit === "hour") {
+        result.setHours(result.getHours() + step);
+    }
+    else if (unit === "day") {
+        result.setDate(result.getDate() + step);
+    }
+    else if (unit === "month") {
+        result.setMonth(result.getMonth() + step);
+    }
+    else {
+        result.setFullYear(result.getFullYear() + step);
+    }
+    return result;
+}
+export function timeTicks(start, end, maximum) {
+    const span = Math.max(0, end.getTime() - start.getTime());
+    const { unit, step } = intervals.find((candidate) => span / candidate.length <= maximum) ?? { unit: "year", step: Math.ceil(span / (365 * day) / maximum) };
+    const ticks = [];
+    let tick = floorTo(start, unit, step);
+    while (tick.getTime() <= end.getTime() && ticks.length <= maximum + 2) {
+        if (tick.getTime() >= start.getTime()) {
+            ticks.push(tick);
+        }
+        tick = advance(tick, unit, step);
+    }
+    return { ticks, unit };
+}
+export function formatTick(date, unit) {
+    const midnight = date.getHours() === 0 && date.getMinutes() === 0 && unit !== "minute";
+    const options = unit === "year"
+        ? { year: "numeric" }
+        : unit === "month"
+            ? date.getMonth() === 0
+                ? { month: "short", year: "numeric" }
+                : { month: "short" }
+            : unit === "day" || midnight
+                ? { day: "numeric", month: "short" }
+                : { hour: "numeric", minute: "2-digit" };
+    return new Intl.DateTimeFormat(undefined, options).format(date);
+}
+export function formatInstant(date, spacing) {
+    const options = spacing > 0 && spacing < day
+        ? { day: "numeric", month: "short", hour: "numeric", minute: "2-digit" }
+        : spacing >= 28 * day
+            ? { month: "long", year: "numeric" }
+            : { weekday: "short", day: "numeric", month: "short", year: "numeric" };
+    return new Intl.DateTimeFormat(undefined, options).format(date);
+}