querysub 0.2.0

package/src/diagnostics/errorLogs/LogTimeSelector.tsx

@@ -0,0 +1,724 @@
+
+import preact from "preact"; import { qreact } from "../../../src/4-dom/qreact";
+import { css } from "typesafecss";
+import { cacheArgsEqual } from "socket-function/src/caching";
+import { entries, keys, sort, timeInDay, timeInHour, timeInMinute, timeInYear } from "socket-function/src/misc";
+import { URLParam } from "../../../src/library-components/URLParam";
+import { ATag } from "../../../src/library-components/ATag";
+import { Button, getAnimationFrames } from "../../../src/library-components/Button";
+import { performDrag2 } from "../../../src/library-components/drag";
+import { atomic, atomicObjectWrite } from "../../../src/2-proxy/PathValueProxyWatcher";
+import { formatNumber, formatPercent } from "socket-function/src/formatting/format";
+import { Counts, PickLogType, countColors, countTypes, showErrorURL, showFatalURL, showInfoURL, showWarningURL } from "./logFiltering";
+import { ButtonSelector } from "../../library-components/ButtonSelector";
+import { Icon } from "../../library-components/icons";
+import { MeasuredDiv } from "../../library-components/MeasuredDiv";
+
+
+type RangeSize = "lastYear" | "lastMonth" | "lastWeek" | "lastDay" | "lastHour";
+export let logNowTime = Date.now();
+const logFilterStart = new URLParam<number | RangeSize>("logFilterStartTime", "lastWeek");
+const logFilterEnd = new URLParam<number>("logFilterEndTime", 0);
+let rangeThreshold: { [K in RangeSize]: number } = {
+    lastHour: timeInHour * 2,
+    lastDay: timeInHour * 30,
+    lastWeek: timeInDay * 10,
+    lastMonth: timeInDay * 60,
+    lastYear: Number.MAX_SAFE_INTEGER,
+};
+export function getLogFilterRange(config?: {
+    start?: number | RangeSize;
+    end?: number;
+}) {
+    let startValue = config?.start || logFilterStart.value;
+    let endTime = config?.end || logFilterEnd.value || (logNowTime + 15000);
+    let startTime: number;
+    let size: RangeSize;
+    if (typeof startValue === "number") {
+        startTime = startValue;
+        if (startTime > endTime) {
+            [startTime, endTime] = [endTime, startTime];
+        }
+        let curRange = endTime - startTime;
+        size = entries(rangeThreshold).find(([key, value]) => value > curRange)?.[0] || "lastYear";
+    } else {
+        size = startValue;
+        if (startValue === "lastYear") {
+            startTime = endTime - timeInYear;
+        } else if (startValue === "lastMonth") {
+            startTime = endTime - timeInDay * 31;
+        } else if (startValue === "lastWeek") {
+            startTime = endTime - timeInDay * 7;
+        } else if (startValue === "lastDay") {
+            startTime = endTime - timeInDay;
+        } else if (startValue === "lastHour") {
+            startTime = endTime - timeInHour;
+        } else {
+            let unhandled: never = startValue;
+            throw new Error("Invalid size: " + startValue);
+        }
+    }
+    return { startTime, endTime, rangeSize: size };
+}
+export function resetLogFilter() {
+    logNowTime = Date.now();
+}
+
+export type TimelineInfo = {
+    startTime: number;
+    endTime: number;
+
+    count: number;
+
+    fatalCount: number;
+    errorCount: number;
+    warnCount: number;
+    infoCount: number;
+};
+
+export class LogTimeSelector extends qreact.Component<{
+    infos: TimelineInfo[] | undefined;
+    hotkeys?: boolean;
+}> {
+    state = {
+        width: 1000,
+        height: 1000,
+        // atomic
+        drag: undefined as { startFraction: number; endFraction: number; } | undefined,
+    };
+    canvasObj: undefined | {
+        canvas: HTMLCanvasElement;
+        ctx: CanvasRenderingContext2D;
+    };
+    render() {
+        let infos = this.props.infos;
+
+        let timeObj = getLogFilterRange();
+        function deltaTimes(fraction: number) {
+            let time = (timeObj.endTime - timeObj.startTime) * fraction;
+            logFilterStart.value = timeObj.startTime + time;
+            logFilterEnd.value = timeObj.endTime + time;
+        }
+        let blockHisto = getBlockHistoBreakdown({
+            infos,
+            barCount: this.state.width,
+            ...timeObj,
+            showFatal: showFatalURL.value,
+            showError: showErrorURL.value,
+            showWarn: showWarningURL.value,
+            showInfo: showInfoURL.value,
+        });
+        function formatDateTimeForInput(value: number) {
+            value -= new Date(value).getTimezoneOffset() * 60 * 1000;
+            return new Date(value).toISOString().slice(0, -1);
+        }
+        const drag = atomic(this.state.drag);
+
+        let canvasObj = this.canvasObj;
+        if (canvasObj) {
+            if (
+                canvasObj.canvas.width !== this.state.width
+                || canvasObj.canvas.height !== this.state.height
+            ) {
+                canvasObj.canvas.width = this.state.width;
+                canvasObj.canvas.height = this.state.height;
+            }
+            const context = canvasObj.ctx;
+            const bars = blockHisto.bars;
+            let width = this.state.width;
+            let height = this.state.height;
+            context.clearRect(0, 0, width, height);
+            for (let i = 0; i < bars.length; i++) {
+                let xFrac = i / bars.length;
+                let isDragging = drag && drag.startFraction <= xFrac && xFrac <= drag.endFraction;
+
+                let bar = bars[i];
+                let yPos = height;
+                for (let type of countTypes) {
+                    let color = countColors[type];
+                    let l = color.l;
+                    if (isDragging) {
+                        l += 30;
+                    }
+                    context.fillStyle = `hsl(${color.h}, ${color.s}%, ${l}%)`;
+                    let curHeight = bar.count[type] / blockHisto.maxBarCount * height * 0.95;
+                    if (curHeight > 0 && curHeight < 3) {
+                        curHeight = 3;
+                    }
+                    context.fillRect(i, yPos - curHeight, 1, curHeight);
+                    yPos -= curHeight;
+                }
+            }
+        }
+
+        function formatTitleNumber(config: {
+            value: Counts;
+            title: string;
+            showHeight?: boolean;
+            fixedWidth?: boolean;
+        }) {
+            const { value, title } = config;
+            return (
+                <div class={
+                    css
+                        .fontSize(60).boldStyle
+                        .center.hbox(10)
+                        .pad2(40)
+                        .fillHeight.relative.zIndex(0)
+                        .pointerEvents("none")
+                        .userSelect("none")
+                        .flexShrink0
+                        .relative.zIndex(1)
+                    + (config.showHeight && css.border("1px solid hsl(0, 0%, 20%)"))
+                    + (config.fixedWidth && css.width("20%"))
+                }>
+                    {config.showHeight && <div
+                        class={
+                            css.fillWidth.bottom0.absolute.height(`${value.total / blockHisto.totalCount * 100}%`)
+                                .zIndex(-1)
+                                .transition("height 0.5s")
+                                .vbox0
+                        }
+                    >
+                        {countTypes.map(type => {
+                            let color = countColors[type];
+                            return (
+                                <div
+                                    class={css
+                                        .fillWidth.height(`${value[type] / value.total * 100}%`)
+                                        .hsl(color.h, color.s, color.l)
+                                    }
+                                />
+                            );
+                        })}
+                    </div>}
+                    <div>
+                        {formatNumber(value.total)}
+                    </div>
+                    <div class={css.vbox(10).fontSize(12).fontWeight("normal").color("hsl(0, 0%, 20%)")}>
+                        <div>{title}</div>
+                        <div>{formatPercent(value.total / blockHisto.totalCount)}</div>
+                    </div>
+                </div>
+            );
+        }
+        function renderUIHorizontal(title: string, count: Counts, key: string) {
+            let isSelected = logFilterStart.value === key;
+            return (
+                <div class={
+                    css.relative.pad2(10, 4).color("white").border("")
+                        .hsla(0, 0, 20, 1)
+                        .border("1px solid hsl(0, 0%, 10%)")
+                    + (!isSelected && css.opacity(0.5))
+                }>
+                    <div class={css.pos(0, 0).fillBoth.absolute.zIndex(0).hbox0}>
+                        {countTypes.map(type => {
+                            let color = countColors[type];
+                            let fraction = count[type] / count.total;
+                            return (
+                                <div
+                                    class={
+                                        css
+                                            .fillHeight.width(`calc(max(${fraction > 0 ? 8 : 0}px, ${fraction * 100}%))`)
+                                            .hsl(color.h, color.s, color.l)
+                                    }
+                                />
+                            );
+                        })}
+                    </div>
+                    <div class={css.relative}>{title} ({formatNumber(count.total)})</div>
+                </div>
+            );
+        }
+
+        return (
+            <div class={css.width("100%").vbox0}>
+                <div class={css.hbox(10).fillWidth}>
+                    <ButtonSelector
+                        title="Show Last"
+                        value={logFilterStart.value}
+                        noDefault
+                        noUI
+                        onChange={value => {
+                            logFilterStart.value = value;
+                            logFilterEnd.value = 0;
+                        }}
+                        options={[
+                            { value: "lastYear", title: renderUIHorizontal("Year", blockHisto.counts.lastYear, "lastYear"), },
+                            { value: "lastMonth", title: renderUIHorizontal("Month", blockHisto.counts.lastMonth, "lastMonth"), },
+                            { value: "lastWeek", title: renderUIHorizontal("Week", blockHisto.counts.lastWeek, "lastWeek"), },
+                            { value: "lastDay", title: renderUIHorizontal("Day", blockHisto.counts.lastDay, "lastDay"), },
+                            { value: "lastHour", title: renderUIHorizontal("Hour", blockHisto.counts.lastHour, "lastHour"), },
+                        ]}
+                    />
+                    <div class={css.marginAuto} />
+                    <PickLogType infos={this.props.infos} />
+                    <div class={css.marginAuto} />
+                    <div class={css.hbox(10).flexShrink0.wrap}>
+                        {(logFilterEnd.value || logFilterStart.value !== logFilterStart.default) &&
+                            <Button onClick={() => {
+                                logFilterStart.reset();
+                                logFilterEnd.reset();
+                            }}>
+                                Reset to Present
+                            </Button>
+                        }
+                        <input
+                            type="datetime-local"
+                            value={formatDateTimeForInput(getLogFilterRange().startTime)}
+                            onInput={e => {
+                                let date = new Date(e.currentTarget.value);
+                                logFilterStart.value = date.getTime();
+                            }}
+                        />
+                        <span>to</span>
+                        <input
+                            type="datetime-local"
+                            value={formatDateTimeForInput(getLogFilterRange().endTime)}
+                            onInput={e => {
+                                let date = new Date(e.currentTarget.value);
+                                logFilterEnd.value = date.getTime();
+                            }}
+                        />
+                    </div>
+                </div>
+                <div class={css.fillWidth.hbox(10).pad2(10)}>
+                    {formatTitleNumber({ value: blockHisto.countBefore, title: "Before", showHeight: true, fixedWidth: true })}
+                    <div class={css.fillWidth.outline("1px solid hsl(0, 0%, 20%)")}>
+                        <div className={css.size("100%", 20).relative.overflowHidden}>
+                            {blockHisto.labels.map(label => {
+                                return (
+                                    <ATag
+                                        title={label.label}
+                                        data-indexStart={label.indexStart}
+                                        data-indexEnd={label.indexEnd}
+                                        values={[
+                                            { param: logFilterEnd, value: label.endTime },
+                                            { param: logFilterStart, value: label.startTime },
+                                        ]}
+                                        class={
+                                            css.width(label.indexEnd - label.indexStart)
+                                                .absolute
+                                                .left(label.indexStart)
+                                                .bottom0
+                                                .fillHeight
+                                                .center
+                                                .overflowHidden
+                                                .textAlign("center")
+                                                .whiteSpace("nowrap")
+                                                .hsla(0, 0, 20, 1)
+                                                .color("hsl(0, 0%, 90%)", "important")
+                                                .boldStyle
+                                                .border("1px solid hsl(0, 0%, 75%)")
+                                                .borderTopWidth(0)
+                                                .borderBottomWidth(0)
+                                        }
+                                    >
+                                        {label.label}
+                                    </ATag>
+                                );
+                            })}
+                            <Button
+                                flavor="noui"
+                                class={
+                                    css.absolute.top0.left0
+                                        .fillHeight
+                                        .hbox0
+                                        .background(`linear-gradient(
+                                            90deg,
+                                            hsla(0, 0%, 20%, 1) 10%,
+                                            hsla(0, 0%, 20%, 0.95),
+                                            hsla(0, 0%, 20%, 0.5)
+                                        )`)
+                                        .cursor("pointer").userSelect("none").filter("brightness(1.5)", "hover")
+                                        .width(70)
+                                        .paddingLeft(10)
+                                        .border("0")
+                                }
+                                hotkeys={["Global+ArrowLeft"]}
+                                onClick={() => deltaTimes(-0.008 * getAnimationFrames())}
+                                immediateRepeat
+                            >
+                                {Icon.chevronDoubleLeft({ fill: "hsl(0, 0%, 50%)", stroke: "hsl(0, 0%, 60%)" })}
+                            </Button>
+
+                            <Button
+                                flavor="noui"
+                                class={
+                                    css.absolute.top0.right0
+                                        .fillHeight
+                                        .hbox0
+                                        .background(`linear-gradient(
+                                            90deg,
+                                            transparent 0%,
+                                            transparent 60%,
+                                            hsla(0, 0%, 20%, 0.5) 60%,
+                                            hsla(0, 0%, 20%, 0.95) 70%,
+                                            hsla(0, 0%, 20%, 1) 100%
+                                        )`)
+                                        .cursor("pointer").userSelect("none").filter("brightness(1.5)", "hover")
+                                        .width(160)
+                                        .border("0")
+                                        .justifyContent("end")
+                                }
+                                hotkeys={["Global+ArrowRight"]}
+                                immediateRepeat
+                                onClick={() => deltaTimes(0.008 * getAnimationFrames())}
+                            >
+                                {Icon.chevronDoubleRight({ fill: "hsl(0, 0%, 50%)", stroke: "hsl(0, 0%, 60%)" })}
+                            </Button>
+                        </div>
+                        <MeasuredDiv
+                            class={
+                                css.size("100%", 100).relative.overflowHidden.flex.center
+                            }
+                            onNewSize={(width, height) => { this.state.width = width; this.state.height = height; }}
+                            onMouseDown={e => {
+                                e.preventDefault();
+                                let rect = e.currentTarget.getBoundingClientRect();
+                                let self = this;
+                                let startFraction = (e.clientX - rect.left) / rect.width;
+                                performDrag2({
+                                    e,
+                                    onMove(offset) {
+                                        let endFraction = startFraction + offset.x / rect.width;
+                                        let newStart = startFraction;
+                                        let newEnd = endFraction;
+                                        if (newEnd < newStart) {
+                                            [newStart, newEnd] = [newEnd, newStart];
+                                        }
+                                        self.state.drag = atomicObjectWrite({ startFraction: newStart, endFraction: newEnd, });
+                                    },
+                                    onDone(offset) {
+                                        let endFraction = startFraction + offset.x / rect.width;
+                                        let timeRange = timeObj.endTime - timeObj.startTime;
+                                        logFilterStart.value = timeObj.startTime + timeRange * startFraction;
+                                        logFilterEnd.value = timeObj.startTime + timeRange * endFraction;
+                                    },
+                                    onFinally() {
+                                        self.state.drag = undefined;
+                                    },
+                                });
+                            }}
+                            onWheel={e => {
+                                e.preventDefault();
+                                e.stopPropagation();
+                                let timeRange = timeObj.endTime - timeObj.startTime;
+                                let deltaAmount = timeRange * 0.20 * (e.deltaY < 0 ? -1 : 1);
+                                logFilterStart.value = timeObj.startTime - deltaAmount;
+                                logFilterEnd.value = timeObj.endTime + deltaAmount;
+                            }}
+                        >
+                            {drag && <div
+                                class={
+                                    css.left(`${drag.startFraction * 100}%`)
+                                        .right(`${(1 - drag.endFraction) * 100}%`)
+                                        .fillHeight
+                                        .absolute
+                                        .hsl(200, 50, 50)
+                                        .opacity(0.5)
+                                }
+                            />}
+                            <canvas
+                                class={css.fillWidth.fillHeight.absolute}
+                                key="canvas"
+                                ref2={e => {
+                                    if (this.canvasObj?.canvas === e) return;
+                                    this.canvasObj = { canvas: e, ctx: e.getContext("2d")! };
+                                }}
+                            />
+                            {formatTitleNumber({ value: blockHisto.countInside, title: "Matched" })}
+                        </MeasuredDiv>
+                        <div className={css.size("100%", 20).relative.overflowHidden}>
+                            {blockHisto.labels.map(label => {
+                                return (
+                                    <ATag
+                                        title={label.label}
+                                        data-indexStart={label.indexStart}
+                                        data-indexEnd={label.indexEnd}
+                                        values={[
+                                            { param: logFilterEnd, value: label.endTime },
+                                            { param: logFilterStart, value: label.startTime },
+                                        ]}
+                                        class={
+                                            css.width(label.indexEnd - label.indexStart)
+                                                .absolute
+                                                .left(label.indexStart)
+                                                .bottom0
+                                                .fillHeight
+                                                .center
+                                                .overflowHidden
+                                                .textAlign("center")
+                                                .whiteSpace("nowrap")
+                                                .hsla(0, 0, 20, 1)
+                                                .color("hsl(0, 0%, 90%)", "important")
+                                                .boldStyle
+                                                .border("1px solid hsl(0, 0%, 75%)")
+                                                .borderTopWidth(0)
+                                                .borderBottomWidth(0)
+                                        }
+                                    >
+                                        {label.label}
+                                    </ATag>
+                                );
+                            })}
+                        </div>
+                    </div>
+                    {formatTitleNumber({ value: blockHisto.countAfter, title: "After", showHeight: true, fixedWidth: true })}
+                </div>
+            </div>
+        );
+    }
+}
+
+const getBlockHistoBreakdown = cacheArgsEqual(function getBlockHistoBreakdown(config: {
+    infos: TimelineInfo[] | undefined;
+    barCount: number;
+    rangeSize: RangeSize;
+    startTime: number;
+    endTime: number;
+
+    showFatal: boolean;
+    showError: boolean;
+    showWarn: boolean;
+    showInfo: boolean;
+}): {
+    totalCount: number;
+    maxBarCount: number;
+    bars: {
+        startTime: number;
+        endTime: number;
+
+        count: Counts;
+    }[];
+    labels: {
+        indexStart: number;
+        indexEnd: number;
+        startTime: number;
+        endTime: number;
+        label: string;
+    }[];
+
+    countBefore: Counts;
+    countInside: Counts;
+    countAfter: Counts;
+
+    counts: { [key in RangeSize]: Counts; }
+} {
+    let { infos, barCount, startTime, endTime } = config;
+
+    let countBefore: Counts = { total: 0, fatal: 0, error: 0, warn: 0, info: 0 };
+    let countInside: Counts = { total: 0, fatal: 0, error: 0, warn: 0, info: 0 };
+    let countAfter: Counts = { total: 0, fatal: 0, error: 0, warn: 0, info: 0 };
+    function addToCount(counts: Counts, checkShow: boolean, info: {
+        count: number;
+        fatalCount: number;
+        errorCount: number;
+        warnCount: number;
+        infoCount: number;
+    }) {
+        if (!checkShow || config.showFatal) {
+            counts.fatal += info.fatalCount;
+            counts.total += info.fatalCount;
+        }
+
+        if (!checkShow || config.showError) {
+            counts.error += info.errorCount;
+            counts.total += info.errorCount;
+        }
+
+        if (!checkShow || config.showWarn) {
+            counts.warn += info.warnCount;
+            counts.total += info.warnCount;
+        }
+
+        if (!checkShow || config.showInfo) {
+            counts.info += info.infoCount;
+            counts.total += info.infoCount;
+        }
+    }
+
+    let totalCount = 0;
+    infos = infos || [];
+    infos = infos.slice();
+    sort(infos, a => a.startTime);
+
+    let countsByType: { [key in RangeSize]: Counts } = {} as any;
+    for (let key of keys(rangeThreshold)) {
+        let timeRange = getLogFilterRange({ start: key, end: logNowTime });
+        let counts = { total: 0, fatal: 0, error: 0, warn: 0, info: 0 };
+        for (let info of infos) {
+            if (!(info.endTime <= timeRange.startTime || info.startTime >= timeRange.endTime)) {
+                addToCount(counts, false, info);
+            }
+        }
+        countsByType[key] = counts;
+    }
+
+    infos = infos.filter(info => {
+        totalCount += info.count;
+        if (info.endTime <= startTime) {
+            addToCount(countBefore, true, info);
+            return false;
+        }
+        if (info.startTime >= endTime) {
+            addToCount(countAfter, true, info);
+            return false;
+        }
+        addToCount(countInside, true, info);
+        return true;
+    });
+
+    let bars: {
+        startTime: number;
+        endTime: number;
+        count: Counts;
+    }[] = [];
+    function getBarRange(barIndex: number) {
+        let f = barIndex / barCount;
+        let fEnd = (barIndex + 1) / barCount;
+        let barStartTime = startTime * (1 - f) + endTime * f;
+        let barEndTime = startTime * (1 - fEnd) + endTime * fEnd;
+        return { startTime: barStartTime, endTime: barEndTime };
+    }
+    function getBarIndex(time: number) {
+        let f = (time - startTime) / (endTime - startTime);
+        return Math.floor(f * barCount);
+    }
+    for (let i = 0; i < barCount; i++) {
+        bars.push({ ...getBarRange(i), count: { total: 0, fatal: 0, error: 0, warn: 0, info: 0 }, });
+    }
+    for (let info of infos) {
+        let index = getBarIndex(info.startTime);
+        if (index < 0) index = 0;
+        if (index >= bars.length) continue;
+        while (index < bars.length && bars[index].startTime < info.endTime) {
+            addToCount(bars[index++].count, true, info);
+        }
+    }
+
+    let maxBarCount = Math.max(...bars.map(a => a.count.total));
+
+    const labels = createLabels({
+        rangeSize: config.rangeSize,
+        startTime,
+        endTime,
+        getBarIndex,
+    });
+
+    return {
+        totalCount, maxBarCount, bars, labels, countBefore, countInside, countAfter, counts: countsByType,
+    };
+}, 10);
+function createLabels(config: {
+    rangeSize: RangeSize;
+    startTime: number;
+    endTime: number;
+    getBarIndex: (time: number) => number;
+}) {
+    const { rangeSize, startTime, endTime, getBarIndex } = config;
+    let labels: {
+        indexStart: number;
+        indexEnd: number;
+        startTime: number;
+        endTime: number;
+        label: string;
+    }[] = [];
+    let periodAverageSize = 0;
+    let startOfPeriod: (date: Date) => Date;
+    let periods = 0;
+    let formatPeriodStart = (date: Date) => date.toDateString();
+
+    const MONTHS = ["January", "February", "March", "April", "May", "June", "July", "August", "September", "October", "November", "December"];
+    const WEEKDAYS = ["Sunday", "Monday", "Tuesday", "Wednesday", "Thursday", "Friday", "Saturday"];
+    function formatPlace(place: number) {
+        if (place === 1) return "1st";
+        if (place === 2) return "2nd";
+        if (place === 3) return "3rd";
+        return place + "th";
+    }
+    if (rangeSize === "lastYear") {
+        periodAverageSize = timeInDay * 31;
+        startOfPeriod = date => new Date(date.getFullYear(), date.getMonth(), 1);
+        formatPeriodStart = (date: Date) => `${date.getFullYear()} ${MONTHS[date.getMonth()].slice(0, 3)}`;
+        periods = 12;
+    } else if (rangeSize === "lastMonth") {
+        periodAverageSize = timeInDay * 7;
+        startOfPeriod = date => {
+            let dayOfWeek = date.getDay();
+            let daysBack = dayOfWeek % 7;
+            return new Date(date.getFullYear(), date.getMonth(), date.getDate() - daysBack);
+        };
+        formatPeriodStart = (date: Date) => {
+            let endDate = new Date(date.getFullYear(), date.getMonth(), date.getDate() + 7);
+            // April 15
+            function formatInner(date: Date) {
+                return `${MONTHS[date.getMonth()]} ${date.getDate()}`;
+            }
+            return formatInner(date) + " - " + formatInner(endDate);
+        };
+        periods = 31;
+    } else if (rangeSize === "lastWeek") {
+        periodAverageSize = timeInDay;
+        startOfPeriod = date => new Date(date.getFullYear(), date.getMonth(), date.getDate());
+        // Monday 5th
+        formatPeriodStart = (date: Date) => `${WEEKDAYS[date.getDay()]} (${formatPlace(date.getDate())})`;
+        periods = 7;
+    } else if (rangeSize === "lastDay") {
+        periodAverageSize = timeInHour;
+        startOfPeriod = date => new Date(date.getFullYear(), date.getMonth(), date.getDate(), date.getHours());
+        formatPeriodStart = (date: Date) => {
+            // Ex, 6 PM
+            let hour = date.getHours();
+            let ampm = hour < 12 ? "AM" : "PM";
+            hour = hour % 12;
+            if (hour === 0) hour = 12;
+            return hour + " " + ampm;
+        };
+        periods = 24;
+    } else if (rangeSize === "lastHour") {
+        periodAverageSize = timeInMinute * 10;
+        startOfPeriod = date => new Date(date.getFullYear(), date.getMonth(), date.getDate(), date.getHours(), Math.floor(date.getMinutes() / 10) * 10);
+        formatPeriodStart = (date: Date) => {
+            let minutes = date.getMinutes();
+            let minutesStr = minutes.toString().padStart(2, "0");
+            // Render as PM/AM
+            let hour = date.getHours();
+            let ampm = hour < 12 ? "AM" : "PM";
+            hour = hour % 12;
+            if (hour === 0) hour = 12;
+            return `${hour}:${minutesStr} ${ampm}`;
+        };
+        periods = 2;
+    } else {
+        let unhandled: never = rangeSize;
+        throw new Error(`Unhandled rangeSize: ${rangeSize}`);
+    }
+
+    let date = new Date(endTime);
+    date = new Date(+date + periodAverageSize * 1.5);
+    date = startOfPeriod(date);
+    let times: number[] = [];
+    times.push(date.getTime());
+    while (true) {
+        date = startOfPeriod(new Date(+date - periodAverageSize * 0.5));
+        times.push(date.getTime());
+        if (date.getTime() <= startTime) break;
+    }
+    times.reverse();
+    for (let i = 0; i < times.length - 1; i++) {
+        let startTime = times[i];
+        let endTime = times[i + 1];
+        let firstBarIndex = getBarIndex(startTime);
+        let endBarIndex = getBarIndex(endTime);
+        labels.push({
+            indexStart: firstBarIndex,
+            indexEnd: endBarIndex,
+            startTime,
+            endTime,
+            label: formatPeriodStart(new Date(startTime)),
+        });
+    }
+
+    return labels;
+}