querysub 0.311.0 → 0.313.0

package/src/diagnostics/errorLogs/LogTimeSelector.tsx

@@ -1,723 +0,0 @@
-
-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;
-}