sveltekit-ui 1.1.74 → 1.1.76

package/dist/Components/Chart/index.svelte.js

@@ -1,1917 +0,0 @@
-import { color_var, deep_copy } from "../../client/index.js"
-
-export function create_chart_manager(config) {
-  const y_axis_width = 70
-  const x_axis_height = 30
-
-  let range_to_show_default = $state(500)
-  let min_visible_bars = $state(20)
-  let x_edge_padding_ratio = $state(0.5)
-  const min_y_axis_pinch_dist_px = 8
-  let datasets = $state(null)
-  let chart_prepped = $state(null)
-  let grid_width = $state(null)
-  let frame_width = $derived(grid_width ? grid_width - y_axis_width : 0)
-
-  function set_grid_width(input) {
-    grid_width = input
-    if (!chart_prepped) {
-      chart_prepped = prep_chart({ ...config?.chart })
-    }
-  }
-
-  function gen_color(
-    l,
-    c,
-    h,
-    o = 16,
-    is_theme_based = true,
-    dark_l_offset = 0,
-    is_dark_theme = true,
-    is_safari = false,
-  ) {
-    const l_try = l + dark_l_offset
-    const l_limited = l_try > 16 ? 16 : l_try < 1 ? 1 : l_try
-    const l_corrected = is_dark_theme ? l_limited : l
-    return color_var(l_corrected, c, h, o, is_theme_based, is_safari)
-  }
-
-  function normalize(x, min, max) {
-    const numerator = x - min
-    const denominator = max - min
-    return numerator != 0 && denominator != 0 ? numerator / denominator : 0
-  }
-
-  function denormalize(x, min, max) {
-    const range = max - min
-    return x != 0 && range != 0 ? x * range + min : min
-  }
-
-  function is_finite_num(input) {
-    return input !== null && input !== undefined && Number.isFinite(Number(input))
-  }
-
-  function get_min_period_sec_from_chart(chart_like = chart_prepped) {
-    let min_period_sec = null
-    if (!Array.isArray(chart_like?.frames)) return min_period_sec
-    for (let frame of chart_like.frames) {
-      if (!Array.isArray(frame?.shared_y_axiss)) continue
-      for (let shared_y_axis of frame.shared_y_axiss) {
-        if (!Array.isArray(shared_y_axis?.datasets)) continue
-        for (let dataset of shared_y_axis.datasets) {
-          const period_x = Number(dataset?.period_x)
-          if (Number.isFinite(period_x) && period_x > 0) {
-            min_period_sec = min_period_sec == null ? period_x : Math.min(min_period_sec, period_x)
-          }
-        }
-      }
-    }
-    return min_period_sec
-  }
-
-  function get_safe_y_range(low_y, high_y) {
-    const range_y = Number(high_y) - Number(low_y)
-    if (Number.isFinite(range_y) && range_y > 0) return range_y
-    const center_y =
-      is_finite_num(low_y) && is_finite_num(high_y)
-        ? (Number(low_y) + Number(high_y)) / 2
-        : is_finite_num(low_y)
-          ? Number(low_y)
-          : is_finite_num(high_y)
-            ? Number(high_y)
-            : 0
-    return Math.max(Math.abs(center_y) * 0.01, 1e-8)
-  }
-
-  function get_padded_y_bounds(low_y, high_y, top_padding_pd = 0.2, bottom_padding_pd = 0.2) {
-    const safe_top_padding_pd = clamp(top_padding_pd, 0, 0.45)
-    const safe_bottom_padding_pd = clamp(bottom_padding_pd, 0, 0.45)
-    const data_range_y = get_safe_y_range(low_y, high_y)
-    const inner_chart_pd = clamp(1 - safe_top_padding_pd - safe_bottom_padding_pd, 0.1, 1)
-    const shown_y_range = data_range_y / inner_chart_pd
-    return {
-      shown_low_y: Number(low_y) - safe_bottom_padding_pd * shown_y_range,
-      shown_high_y: Number(high_y) + safe_top_padding_pd * shown_y_range,
-      shown_y_range,
-    }
-  }
-
-  function get_data_range_sec(chart_like = chart_prepped) {
-    const data_start_x = chart_like?.all_data_start_x
-    const data_end_x = chart_like?.all_data_end_x
-    const data_range_sec = data_end_x - data_start_x
-    return Number.isFinite(data_range_sec) && data_range_sec > 0 ? data_range_sec : null
-  }
-
-  function get_max_range_sec_from_chart(chart_like = chart_prepped) {
-    const data_range_sec = get_data_range_sec(chart_like)
-    if (!Number.isFinite(data_range_sec) || data_range_sec <= 0) return data_range_sec
-    return data_range_sec * (1 + x_edge_padding_ratio * 2)
-  }
-
-  function get_x_edge_padding_sec(range_sec) {
-    return Math.max((Number(range_sec) || 0) * x_edge_padding_ratio, 0)
-  }
-
-  const period_to_sec = {
-    "5m": 300, //5m
-    "10m": 600, //10m
-    "15m": 900, //15m
-    "20m": 1200, //20m
-    "30m": 1800, //30m
-    "45m": 2700, //45m
-    "1h": 3600, //1h
-    "2h": 7200, //2h
-    "3h": 10800, //3h
-    "4h": 14400, //4h
-    "6h": 21600, //6h
-    "8h": 28800, //8h
-    "12h": 43200, //12h
-    "1d": 86400, //1d
-    "2d": 172800, //2d
-    "3d": 259200, //3d
-    "4d": 345600, //4d
-    "1w": 604800, //1w
-    "2w": 1209600, //2w
-  }
-
-  function generate_id(prefix) {
-    return prefix + "-" + Math.floor(Math.random() * 1000000000000)
-  }
-
-  function add_val_to_obj_with_path(obj, pathList) {
-    let current = obj
-    for (let key of pathList) {
-      if (!(key in current)) {
-        current[key] = {}
-      }
-      current = current[key]
-    }
-    return obj
-  }
-  function add_val_to_obj_with_path_2(obj, pathList, val) {
-    let current = obj
-    for (let [index, key] of pathList.entries()) {
-      if (!(key in current)) {
-        current[key] = {}
-      }
-      if (index === pathList.length - 1) {
-        current[key] = val ? val : {}
-      }
-      current = current[key]
-    }
-    return obj
-  }
-
-  function does_path_exist_on_obj(obj, pathList) {
-    let current = obj
-    for (let [index, key] of pathList.entries()) {
-      if (index < pathList.length && !(key in current)) {
-        return false
-      }
-      current = current[key]
-    }
-    return true
-  }
-
-  function remove_val_to_obj_with_path(obj, pathList) {
-    let current = obj
-    for (let [index, key] of pathList.entries()) {
-      if (index === pathList.length - 1) {
-        delete current[key]
-      }
-      current = current[key]
-    }
-    return obj
-  }
-
-  function get_obj_from_path(obj, path) {
-    let current = obj
-    for (let i = 0; i < path.length; i++) {
-      if (!(path[i] in current)) return false
-      current = current[path[i]]
-    }
-    return current
-  }
-
-  function scroll_frame(
-    e,
-    shown_start_x,
-    shown_end_x,
-    min_x_scrollable,
-    max_x_scrollable,
-    frame_width,
-    min_period_sec = 60,
-    max_range_sec = null,
-  ) {
-    const shown_x_range = shown_end_x - shown_start_x
-    const change_sec = (Math.round((shown_x_range * 0.01) / 60) + 1) * 60
-    const min_range_sec = Math.max(Number(min_visible_bars) || 0, 1) * min_period_sec
-    const max_allowed_range_sec =
-      Number.isFinite(max_range_sec) && max_range_sec > 0 ? max_range_sec : min_period_sec * 10000
-    let shown_end_x_loc = shown_end_x
-    let shown_start_x_loc = shown_start_x
-    if (e.deltaX < -1) {
-      shown_start_x_loc -= change_sec
-      shown_end_x_loc -= change_sec
-    } else if (e.deltaX > 1) {
-      shown_start_x_loc += change_sec
-      shown_end_x_loc += change_sec
-    }
-    let x_pd = e.offsetX / frame_width
-    if (e.deltaY < -1 && shown_x_range > min_range_sec) {
-      shown_start_x_loc += Math.round((change_sec * x_pd) / 10) * 10
-      shown_end_x_loc -= Math.round((change_sec * (1 - x_pd)) / 10) * 10
-    } else if (e.deltaY > 1 && shown_x_range < max_allowed_range_sec) {
-      shown_start_x_loc -= Math.round((change_sec * x_pd) / 10) * 10
-      shown_end_x_loc += Math.round((change_sec * (1 - x_pd)) / 10) * 10
-    }
-    return {
-      shown_start_x: shown_start_x_loc,
-      shown_end_x: shown_end_x_loc,
-    }
-  }
-
-  function get_kline_details(o, l, h, c) {
-    let res = {}
-    const is_closed_higher = c > o ? 1 : 0
-    const kline_height = Math.max(h - l, 1e-8)
-    const kline_box_height = Math.abs(c - o)
-    let kline_top_wick_height = h - o
-    let kline_bottom_wick_height = c - l
-    if (is_closed_higher) {
-      kline_top_wick_height = h - c
-      kline_bottom_wick_height = o - l
-    }
-    const kline_box_height_pd = kline_box_height / kline_height
-    const kline_top_wick_height_pd = kline_top_wick_height / kline_height
-    const kline_bottom_wick_height_pd = kline_bottom_wick_height / kline_height
-    const kline_close_height_pd = (c - l) / kline_height
-    res["is_closed_higher"] = is_closed_higher
-    res["kline_height"] = kline_height
-    res["kline_box_height"] = kline_box_height
-    res["kline_top_wick_height"] = kline_top_wick_height
-    res["kline_bottom_wick_height"] = kline_bottom_wick_height
-    res["kline_box_height_pd"] = kline_box_height_pd
-    res["kline_top_wick_height_pd"] = kline_top_wick_height_pd
-    res["kline_bottom_wick_height_pd"] = kline_bottom_wick_height_pd
-    res["kline_close_height_pd"] = kline_close_height_pd
-    return res
-  }
-
-  function time_tic_size(seconds) {
-    const tic_options = [
-      300, //5m
-      600, //10m
-      900, //15m
-      1200, //20m
-      1800, //30m
-      2700, //45m
-      3600, //1h
-      7200, //2h
-      10800, //3h
-      14400, //4h
-      21600, //6h
-      28800, //8h
-      43200, //12h
-      86400, //1d
-      172800, //2d
-      259200, //3d
-      345600, //4d
-      604800, //1w
-      1209600, //2w
-      2635200, //1m (30.5d)
-      7905600, //3m (91.5d)
-      15768000, //6m
-      31536000, //1y
-    ]
-    for (let i = 0; i < tic_options.length - 1; i++) {
-      if (tic_options[i] < seconds && tic_options[i + 1] > seconds) {
-        return tic_options[i + 1]
-      }
-    }
-    return "-"
-  }
-
-  function base_time(high, clean_tic_time_change) {
-    const d_high = new Date(high * 1000)
-    const year = d_high.getFullYear()
-    const month = d_high.getMonth()
-    const day = d_high.getDate()
-    const hour = d_high.getHours()
-    const minute = d_high.getMinutes()
-    const ticBases = {
-      31536000: { focus: "y", values: [] }, //1y
-      15768000: { focus: "M", values: [11, 5, 0] }, //6m
-      7905600: { focus: "M", values: [11, 8, 5, 2, 0] }, //3m (91.5d)
-      2635200: { focus: "M", values: [11, 10, 9, 8, 7, 6, 5, 4, 3, 2, 1, 0] }, //1m (30.5d)
-      1209600: { focus: "d", values: [28, 14, 0] }, //2w
-      604800: { focus: "d", values: [28, 21, 14, 7, 0] }, //1w
-      345600: { focus: "d", values: [28, 24, 20, 16, 12, 8, 4, 0] }, //4d
-      259200: { focus: "d", values: [30, 27, 24, 21, 18, 15, 12, 9, 6, 3, 0] }, //3d
-      172800: { focus: "d", values: [30, 28, 26, 24, 22, 20, 18, 16, 14, 12, 10, 8, 6, 4, 2, 0] }, //2d
-      86400: {
-        focus: "d",
-        values: [
-          31, 30, 19, 28, 27, 26, 25, 24, 23, 22, 21, 20, 19, 18, 17, 16, 15, 14, 13, 12, 11, 10, 9, 8, 7, 6, 5, 4, 3,
-          2, 1, 0,
-        ],
-      }, //1d
-      43200: { focus: "h", values: [12, 0] }, //12h
-      28800: { focus: "h", values: [16, 8, 0] }, //8h
-      21600: { focus: "h", values: [18, 12, 6, 0] }, //6h
-      14400: { focus: "h", values: [20, 16, 12, 8, 4, 0] }, //4h
-      10800: { focus: "h", values: [21, 18, 15, 12, 9, 6, 3, 0] }, //3h
-      7200: { focus: "h", values: [22, 20, 18, 16, 14, 12, 10, 8, 6, 4, 2, 0] }, //2h
-      3600: {
-        focus: "h",
-        values: [23, 22, 21, 20, 19, 18, 17, 16, 15, 14, 13, 12, 11, 10, 9, 8, 7, 6, 5, 4, 3, 2, 1, 0],
-      }, //1h
-      2700: { focus: "m", values: [45, 0] }, //45m
-      1800: { focus: "m", values: [30, 0] }, //30m
-      1200: { focus: "m", values: [40, 20, 0] }, //20m
-      900: { focus: "m", values: [45, 30, 15, 0] }, //15m
-      600: { focus: "m", values: [50, 40, 30, 20, 10, 0] }, //10m
-      300: { focus: "m", values: [55, 50, 45, 40, 35, 30, 25, 20, 25, 20, 5, 0] }, //5m
-    }
-    var d = new Date()
-    d.setFullYear(year)
-    d.setMonth(0)
-    d.setDate(1)
-    d.setHours(0)
-    d.setMinutes(0)
-    d.setMilliseconds(0)
-    switch (ticBases[clean_tic_time_change]?.focus) {
-      case "y": {
-        break
-      }
-      case "M": {
-        d.setFullYear(year)
-        for (let item of ticBases[clean_tic_time_change].values) {
-          if (item < month) {
-            d.setMonth(item)
-            break
-          }
-        }
-        break
-      }
-      case "d": {
-        d.setFullYear(year)
-        d.setMonth(month)
-        for (let item of ticBases[clean_tic_time_change].values) {
-          if (item < day) {
-            d.setDate(item)
-            break
-          }
-        }
-        break
-      }
-      case "h": {
-        d.setFullYear(year)
-        d.setMonth(month)
-        d.setDate(day)
-        for (let item of ticBases[clean_tic_time_change].values) {
-          if (item < hour) {
-            d.setHours(item)
-            break
-          }
-        }
-        break
-      }
-      case "m": {
-        d.setFullYear(year)
-        d.setMonth(month)
-        d.setDate(day)
-        d.setHours(hour)
-        for (let item of ticBases[clean_tic_time_change].values) {
-          if (item < minute) {
-            d.setMinutes(item)
-            break
-          }
-        }
-        break
-      }
-      default: {
-        d.setMonth(month)
-        d.setDate(day)
-        d.setHours(hour)
-        const remainer5min = minute % 300000
-        const floor5min = minute - remainer5min
-        d.setMinutes(floor5min)
-        break
-      }
-    }
-    return Math.floor(d.getTime() / 1000)
-  }
-
-  function readable_time(seconds) {
-    const months = ["JAN", "FEB", "MAR", "APR", "MAY", "JUN", "JUL", "AUG", "SEP", "OCT", "NOV", "DEC"]
-    const date_object = new Date(seconds * 1000)
-    const year = date_object.getFullYear()
-    const month = date_object.getMonth()
-    const day = date_object.getDate()
-    const hour = date_object.getHours()
-    const minute = date_object.getMinutes()
-    const year_st = JSON.stringify(year)
-    const month_st = months[month]
-    let day_st = JSON.stringify(day)
-    // if(day_st.length < 2){ day_st = '0' + day_st }
-    let hour_st = JSON.stringify(hour)
-    // if(hour_st.length < 2){ hour_st = '0' + hour_st }
-    let minute_st = JSON.stringify(minute)
-    if (minute_st.length < 2) {
-      minute_st = "0" + minute_st
-    }
-    const hour_minute_st = hour_st + ":" + minute_st
-    if (minute > 0 || hour > 0) {
-      return hour_minute_st
-    } else if (day > 1) {
-      return day_st
-    } else if (month > 0) {
-      return month_st
-    }
-    return year_st
-  }
-
-  function prep_x_axis(
-    start_x,
-    end_x,
-    frame_width = 500,
-    min_tic_spacing_x_axis = 20,
-    min_tic_text_spacing_x_axis = 50,
-  ) {
-    const amount_of_tics = Math.floor(frame_width / min_tic_spacing_x_axis)
-    const x_range = end_x - start_x
-    const tic_x_change = x_range / amount_of_tics
-    const clean_x_change = time_tic_size(tic_x_change)
-    const clean_x = base_time(end_x, clean_x_change)
-    const clean_x_text = readable_time(clean_x)
-    const clean_x_norm = (clean_x - start_x) / x_range
-    // const is_remaining_room_for_text = (1 - clean_x_norm) * frame_width >= (min_tic_text_spacing_x_axis / 2)
-    let tics = [
-      {
-        x: clean_x,
-        norm: clean_x_norm,
-        text: clean_x_text,
-      },
-    ]
-    let last_tic_with_text_x_norm = clean_x_norm
-    for (let i = 1; i < amount_of_tics; i++) {
-      const iter_x = clean_x + clean_x_change * i
-      const iter_x_norm = (iter_x - start_x) / x_range
-      // const is_remaining_room = ((end_x - iter_x) / x_range) * frame_width >= (min_tic_text_spacing_x_axis / 2)
-      const is_far_enough_from_prev_text =
-        !last_tic_with_text_x_norm ||
-        (iter_x_norm - last_tic_with_text_x_norm) * frame_width >= min_tic_text_spacing_x_axis
-      if (iter_x <= end_x) {
-        if (is_far_enough_from_prev_text) {
-          tics = [
-            ...tics,
-            {
-              x: iter_x,
-              norm: iter_x_norm,
-              text: readable_time(iter_x),
-            },
-          ]
-          last_tic_with_text_x_norm = iter_x_norm
-        } else {
-          tics = [
-            ...tics,
-            {
-              x: iter_x,
-              norm: iter_x_norm,
-              text: null,
-            },
-          ]
-        }
-      } else {
-        break
-      }
-    }
-    last_tic_with_text_x_norm = clean_x_norm
-    for (let i = 1; i < amount_of_tics; i++) {
-      const iter_x = clean_x - clean_x_change * i
-      const iter_x_norm = (iter_x - start_x) / x_range
-      // const is_remaining_room = iter_x_norm * frame_width >= (min_tic_text_spacing_x_axis / 2)
-      const is_far_enough_from_prev_text =
-        !last_tic_with_text_x_norm ||
-        (last_tic_with_text_x_norm - iter_x_norm) * frame_width >= min_tic_text_spacing_x_axis
-      if (iter_x >= start_x) {
-        if (is_far_enough_from_prev_text) {
-          tics = [
-            {
-              x: iter_x,
-              norm: iter_x_norm,
-              text: readable_time(iter_x),
-            },
-            ...tics,
-          ]
-          last_tic_with_text_x_norm = iter_x_norm
-        } else {
-          tics = [
-            {
-              x: iter_x,
-              norm: iter_x_norm,
-              text: null,
-            },
-            ...tics,
-          ]
-        }
-      } else {
-        break
-      }
-    }
-    return tics
-  }
-
-  function notable_num(low, high) {
-    let abs_closest_to_zero = low
-    let abs_farther_to_zero = high
-    let is_positive = true
-    if (high < 0) {
-      abs_closest_to_zero = Math.abs(high)
-      abs_farther_to_zero = Math.abs(low)
-      is_positive = false
-    }
-    let accumulated_num = 0
-    while (accumulated_num < abs_farther_to_zero) {
-      const ceiling = abs_farther_to_zero - accumulated_num
-      const res = next_big_num_under_target(ceiling)
-      accumulated_num += res
-      if (accumulated_num > abs_closest_to_zero) {
-        if (is_positive) {
-          return accumulated_num
-        } else {
-          return -1 * accumulated_num
-        }
-      }
-    }
-    return "-"
-  }
-
-  function next_big_num_under_target(target) {
-    const num_bases = [
-      100000000000000, 10000000000000, 1000000000000, 100000000000, 10000000000, 1000000000, 100000000, 50000000,
-      20000000, 10000000, 5000000, 2000000, 1000000, 750000, 500000, 400000, 250000, 200000, 150000, 100000, 75000,
-      50000, 40000, 25000, 20000, 15000, 10000, 7500, 5000, 4000, 3000, 2500, 2000, 1500, 1250, 1000, 750, 500, 400,
-      300, 200, 150, 100, 75, 50, 40, 25, 20, 15, 12, 10, 8, 5, 4, 3, 2.5, 2, 1, 0.8, 0.5, 0.4, 0.3, 0.2, 0.1, 0.08,
-      0.05, 0.04, 0.03, 0.02, 0.01, 0.008, 0.005, 0.004, 0.003, 0.002, 0.001, 0.0008, 0.0005, 0.0004, 0.0003, 0.0002,
-      0.0001, 0.00008, 0.00005, 0.00004, 0.00003, 0.00002, 0.00001, 0.000008, 0.000005, 0.000004, 0.000003, 0.000002,
-      0.000001, 0.0000008, 0.0000005, 0.0000004, 0.0000003, 0.0000002, 0.0000001,
-    ]
-    for (let num of num_bases) {
-      if (num < target) {
-        return num
-      }
-    }
-    return 1
-  }
-
-  function tic_size(num) {
-    const tic_options = [
-      0.0000001, 0.0000002, 0.0000003, 0.0000004, 0.0000005, 0.0000008, 0.000001, 0.000002, 0.000003, 0.000004,
-      0.000005, 0.000008, 0.00001, 0.00002, 0.00003, 0.00004, 0.00005, 0.00008, 0.0001, 0.0002, 0.0003, 0.0004, 0.0005,
-      0.0008, 0.001, 0.002, 0.003, 0.004, 0.005, 0.008, 0.01, 0.02, 0.03, 0.04, 0.05, 0.08, 0.1, 0.2, 0.3, 0.4, 0.5,
-      0.8, 1, 2, 2.5, 3, 4, 5, 8, 10, 12, 15, 20, 25, 40, 50, 75, 100, 150, 200, 300, 400, 500, 750, 1000, 1250, 1500,
-      2000, 2500, 3000, 4000, 5000, 7500, 10000, 15000, 20000, 25000, 40000, 50000, 75000, 100000, 150000, 200000,
-      250000, 400000, 500000, 750000, 1000000, 2000000, 5000000, 10000000, 20000000, 50000000, 100000000, 1000000000,
-      10000000000, 100000000000, 1000000000000, 10000000000000, 100000000000000,
-    ]
-    for (let i = 0; i < tic_options.length - 1; i++) {
-      if (tic_options[i] < num && tic_options[i + 1] > num) {
-        return tic_options[i + 1]
-      }
-    }
-    return "-"
-  }
-
-  function prep_y_axis(
-    shown_low_y,
-    shown_high_y,
-    frame_height = 300,
-    min_tic_spacing_y_axis = 10,
-    min_tic_text_spacing_y_axis = 30,
-  ) {
-    const amount_of_tics = Math.floor(frame_height / min_tic_spacing_y_axis)
-    const y_range = shown_high_y - shown_low_y
-    const tic_y_change = y_range / amount_of_tics
-    const clean_y_change = tic_size(tic_y_change)
-    const clean_y = notable_num(shown_low_y, shown_high_y)
-    const clean_y_norm = (clean_y - shown_low_y) / y_range
-    const clean_y_text = short_lab(clean_y)
-    const is_remaining_room_for_text = (1 - clean_y_norm) * frame_height >= min_tic_text_spacing_y_axis / 2
-    let tics = [
-      {
-        y: clean_y,
-        norm: clean_y_norm,
-        text: is_remaining_room_for_text ? clean_y_text : null,
-        ppp: (1 - clean_y_norm) * frame_height,
-      },
-    ]
-    let last_tic_with_text_y_norm = is_remaining_room_for_text ? clean_y_norm : null
-    for (let i = 1; i < amount_of_tics; i++) {
-      const iter_y = clean_y + clean_y_change * i
-      const iter_y_norm = (iter_y - shown_low_y) / y_range
-      const is_remaining_room = ((shown_high_y - iter_y) / y_range) * frame_height >= min_tic_text_spacing_y_axis / 2
-      const is_far_enough_from_prev_text =
-        !last_tic_with_text_y_norm ||
-        (iter_y_norm - last_tic_with_text_y_norm) * frame_height >= min_tic_text_spacing_y_axis
-      if (iter_y <= shown_high_y) {
-        if (is_far_enough_from_prev_text && is_remaining_room) {
-          tics = [
-            ...tics,
-            {
-              y: iter_y,
-              norm: iter_y_norm,
-              text: short_lab(iter_y),
-            },
-          ]
-          last_tic_with_text_y_norm = iter_y_norm
-        } else {
-          tics = [
-            ...tics,
-            {
-              y: iter_y,
-              norm: iter_y_norm,
-              text: null,
-            },
-          ]
-        }
-      } else {
-        break
-      }
-    }
-    last_tic_with_text_y_norm = clean_y_norm
-    for (let i = 1; i < amount_of_tics; i++) {
-      const iter_y = clean_y - clean_y_change * i
-      const iter_y_norm = (iter_y - shown_low_y) / y_range
-      const is_remaining_room = iter_y_norm * frame_height >= min_tic_text_spacing_y_axis / 2
-      const is_far_enough_from_prev_text =
-        !last_tic_with_text_y_norm ||
-        (last_tic_with_text_y_norm - iter_y_norm) * frame_height >= min_tic_text_spacing_y_axis
-      if (iter_y >= shown_low_y) {
-        if (is_far_enough_from_prev_text && is_remaining_room) {
-          tics = [
-            {
-              y: iter_y,
-              norm: iter_y_norm,
-              text: short_lab(iter_y),
-            },
-            ...tics,
-          ]
-          last_tic_with_text_y_norm = iter_y_norm
-        } else {
-          tics = [
-            {
-              x: iter_y,
-              norm: iter_y_norm,
-              text: null,
-            },
-            ...tics,
-          ]
-        }
-      } else {
-        break
-      }
-    }
-    return tics
-  }
-
-  function short_lab(num) {
-    var if_neg = 1
-    if ((typeof num === typeof null) | (typeof num === typeof undefined)) {
-      return "-"
-    }
-    if (num < 0) {
-      if_neg = -1
-    }
-    var amount
-    amount = Math.abs(num)
-    if (amount === 0) {
-      return 0
-    } else if (amount >= 0 && amount < 0.0001) {
-      return Math.round((if_neg * amount).toFixed(8) * 10000000 + Number.EPSILON) / 10000000
-    } else if (amount >= 0.0001 && amount < 0.001) {
-      return Math.round((if_neg * amount).toFixed(7) * 1000000 + Number.EPSILON) / 1000000
-    } else if (amount >= 0.001 && amount < 0.01) {
-      return Math.round((if_neg * amount).toFixed(6) * 100000 + Number.EPSILON) / 100000
-    } else if (amount >= 0.01 && amount < 0.1) {
-      return Math.round((if_neg * amount).toFixed(5) * 10000 + Number.EPSILON) / 10000
-    } else if (amount >= 0.1 && amount < 10) {
-      return Math.round((if_neg * amount).toFixed(4) * 1000 + Number.EPSILON) / 1000
-    } else if (amount >= 10 && amount < 1000) {
-      return (if_neg * amount).toFixed(2)
-    } else if (amount >= 1000 && amount < 1000000) {
-      return (if_neg * amount).toFixed().replace(/\B(?=(\d{3})+(?!\d))/g, ",")
-    } else if (amount >= 1000000 && amount < 10000000) {
-      return (if_neg * (amount / 1000000)).toFixed(2) + " M"
-    } else if (amount >= 10000000 && amount < 100000000) {
-      return (if_neg * (amount / 1000000)).toFixed(1) + " M"
-    } else if (amount >= 100000000 && amount < 1000000000) {
-      return (if_neg * (amount / 1000000)).toFixed() + " M"
-    } else if (amount >= 1000000000 && amount < 10000000000) {
-      return (if_neg * (amount / 1000000000)).toFixed(2) + " B"
-    } else if (amount >= 10000000000 && amount < 100000000000) {
-      return (if_neg * (amount / 1000000000)).toFixed(1) + " B"
-    } else if (amount >= 100000000000 && amount < 1000000000000) {
-      return (if_neg * (amount / 1000000000)).toFixed() + " B"
-    } else if (amount >= 1000000000000 && amount < 10000000000000) {
-      return (if_neg * (amount / 1000000000000)).toFixed(2) + " T"
-    } else if (amount >= 10000000000000 && amount < 100000000000000) {
-      return (if_neg * (amount / 1000000000000)).toFixed(1) + " T"
-    } else if (amount >= 100000000000000 && amount < 1000000000000000) {
-      return (if_neg * (amount / 1000000000000)).toFixed() + " T"
-    } else if (amount >= 1000000000000000 && amount < 10000000000000000n) {
-      return (if_neg * (amount / 1000000000000000)).toFixed(2) + " Q"
-    } else if (amount >= 10000000000000000n && amount < 100000000000000000n) {
-      return (if_neg * (amount / 1000000000000000)).toFixed(1) + " Q"
-    } else if (amount >= 100000000000000000n && amount < 1000000000000000000n) {
-      return (if_neg * (amount / 1000000000000000)).toFixed() + " Q"
-    } else if (amount >= 1000000000000000000n && amount < 10000000000000000000n) {
-      return (if_neg * (amount / 1000000000000000000n)).toFixed(2) + " QN"
-    } else if (amount >= 10000000000000000000n && amount < 100000000000000000000n) {
-      return (if_neg * (amount / 1000000000000000000n)).toFixed(1) + " QN"
-    } else if (amount >= 100000000000000000000n && amount < 1000000000000000000000n) {
-      return (if_neg * (amount / 1000000000000000000n)).toFixed() + " QN"
-    } else {
-      return "Big"
-    }
-  }
-
-  function handle_scroll_frame(e) {
-    e.preventDefault()
-    const min_period_sec = get_min_period_sec_from_chart() ?? 60
-    const max_range_sec = get_max_range_sec_from_chart()
-    const res = scroll_frame(
-      e,
-      chart_prepped.shown_start_x,
-      chart_prepped.shown_end_x,
-      chart_prepped?.min_x_scrollable,
-      chart_prepped?.max_x_scrollable,
-      frame_width,
-      min_period_sec,
-      max_range_sec,
-    )
-    apply_view(res.shown_start_x, res.shown_end_x)
-  }
-
-  function get_y_axis_zoom_factor_from_wheel(delta_y) {
-    const clamped_delta = clamp(Number(delta_y) || 0, -120, 120)
-    return Math.exp(clamped_delta * 0.00045)
-  }
-
-  function get_y_axis_state(frame_index) {
-    const frame = chart_prepped?.frames?.[frame_index]
-    const axis_index = frame?.shown_y_axis_index ?? 0
-    const axis = frame?.shared_y_axiss?.[axis_index]
-    return { frame, axis_index, axis }
-  }
-
-  function get_current_y_bounds(axis) {
-    return {
-      low_y: is_finite_num(axis?.manual_low_y) ? Number(axis.manual_low_y) : Number(axis?.shown_low_y),
-      high_y: is_finite_num(axis?.manual_high_y) ? Number(axis.manual_high_y) : Number(axis?.shown_high_y),
-    }
-  }
-
-  function set_manual_y_bounds(axis, low_y, high_y) {
-    axis.manual_low_y = parseFloat(low_y.toPrecision(10))
-    axis.manual_high_y = parseFloat(high_y.toPrecision(10))
-    chart_prepped = prep_chart(deep_copy(chart_prepped))
-  }
-
-  let pointer_cache = new Map()
-  let touch_hover_memory = {
-    frame_index: null,
-    x_hovered_percent_decimal: null,
-    y_hovered_percent_decimal: null,
-  }
-  let gesture_state = {
-    mode: null,
-    start_shown_start_x: null,
-    start_shown_end_x: null,
-    start_range_sec: null,
-    start_primary_x: null,
-    start_primary_y: null,
-    start_dist_px: null,
-    start_center_pd: null,
-    touch_hover_offset_x: null,
-    touch_hover_offset_y: null,
-    touch_hover_frame_index: null,
-  }
-  let y_axis_gesture_state = {
-    mode: null,
-    frame_index: null,
-    start_y: null,
-    start_dist_px: null,
-    start_range_y: null,
-    start_low_y: null,
-    start_high_y: null,
-    anchor_pd: null,
-    anchor_y: null,
-    did_drag: false,
-    suppress_click: false,
-  }
-  let y_axis_pointer_cache = new Map()
-
-  function clamp(n, min, max) {
-    return n < min ? min : n > max ? max : n
-  }
-
-  function clamp_range_to_limits(range_sec) {
-    const min_period_sec = get_min_period_sec_from_chart() ?? 60
-    const min_range = Math.max(Number(min_visible_bars) || 0, 1) * min_period_sec
-    const max_range = get_max_range_sec_from_chart()
-    return clamp(range_sec, min_range, max_range ?? range_sec)
-  }
-
-  function clamp_y_range_to_limits(range_y, axis) {
-    const data_low_y = axis?.data_low_y
-    const data_high_y = axis?.data_high_y
-    const data_range_y = get_safe_y_range(data_low_y, data_high_y)
-    const center_y =
-      is_finite_num(data_low_y) && is_finite_num(data_high_y)
-        ? (Number(data_low_y) + Number(data_high_y)) / 2
-        : is_finite_num(data_low_y)
-          ? Number(data_low_y)
-          : is_finite_num(data_high_y)
-            ? Number(data_high_y)
-            : 0
-    const min_range_y = Math.max(data_range_y * 0.02, Math.abs(center_y) * 0.000001, 1e-8)
-    const max_range_y = Math.max(data_range_y * 1000, min_range_y * 10)
-    return clamp(range_y, min_range_y, max_range_y)
-  }
-
-  function clamp_view_to_data(shown_start_x, shown_end_x) {
-    if (!chart_prepped) return { shown_start_x, shown_end_x }
-    const range = shown_end_x - shown_start_x
-    if (!isFinite(range) || range <= 0) return { shown_start_x, shown_end_x }
-    const edge_padding_sec = get_x_edge_padding_sec(range)
-    const min_x = chart_prepped.all_data_start_x - edge_padding_sec
-    const max_x = chart_prepped.all_data_end_x + edge_padding_sec
-    let start = shown_start_x
-    let end = shown_end_x
-    if (end > max_x) {
-      const diff = end - max_x
-      start -= diff
-      end -= diff
-    }
-    if (start < min_x) {
-      const diff = min_x - start
-      start += diff
-      end += diff
-    }
-    if (start < min_x) start = min_x
-    if (end > max_x) end = max_x
-    if (end - start < 1) end = start + 1
-    return { shown_start_x: start, shown_end_x: end }
-  }
-
-  function reset_gesture_state() {
-    gesture_state.mode = null
-    gesture_state.start_shown_start_x = null
-    gesture_state.start_shown_end_x = null
-    gesture_state.start_range_sec = null
-    gesture_state.start_primary_x = null
-    gesture_state.start_primary_y = null
-    gesture_state.start_dist_px = null
-    gesture_state.start_center_pd = null
-    gesture_state.touch_hover_offset_x = null
-    gesture_state.touch_hover_offset_y = null
-    gesture_state.touch_hover_frame_index = null
-  }
-
-  function get_two_pointer_info() {
-    const pts = [...pointer_cache.values()]
-    if (pts.length < 2) return null
-    const a = pts[0]
-    const b = pts[1]
-    const dx = b.x - a.x
-    const dy = b.y - a.y
-    const dist = Math.sqrt(dx * dx + dy * dy)
-    const center_x = (a.x + b.x) / 2
-    const center_y = (a.y + b.y) / 2
-    return { dist, center_x, center_y }
-  }
-
-  function apply_view(shown_start_x, shown_end_x) {
-    const clamped = clamp_view_to_data(shown_start_x, shown_end_x)
-    chart_prepped.set_shown_start_x(clamped.shown_start_x)
-    chart_prepped.set_shown_end_x(clamped.shown_end_x)
-    chart_prepped = prep_chart(deep_copy(chart_prepped))
-  }
-
-  function get_chart_point_from_event(e, frame_index) {
-    const rect = e.currentTarget?.getBoundingClientRect?.()
-    const frame_height = chart_prepped?.frames?.[frame_index]?.frame_height
-    const width = rect?.width || frame_width || 1
-    const height = rect?.height || frame_height || 1
-    const x = clamp((rect ? e.clientX - rect.left : e.offsetX) ?? 0, 0, width)
-    const y = clamp((rect ? e.clientY - rect.top : e.offsetY) ?? 0, 0, height)
-    return { x, y, width, height }
-  }
-
-  function clear_chart_hover(frame_index, { clear_x = true } = {}) {
-    if (!chart_prepped) return
-    if (clear_x) {
-      chart_prepped.x_hovered_percent_decimal = null
-      chart_prepped.x_axis_highlight_tic = null
-    }
-    const frame = chart_prepped?.frames?.[frame_index]
-    if (!frame) return
-    frame.y_hovered_percent_decimal = null
-    for (let i = 0; i < frame.shared_y_axiss.length; i++) {
-      frame.shared_y_axiss[i].y_axis_highlight_tic = null
-    }
-  }
-
-  function clear_all_chart_hover() {
-    if (!chart_prepped) return
-    chart_prepped.x_hovered_percent_decimal = null
-    chart_prepped.x_axis_highlight_tic = null
-    for (let frame of chart_prepped?.frames ?? []) {
-      frame.y_hovered_percent_decimal = null
-      for (let shared_y_axis of frame?.shared_y_axiss ?? []) {
-        shared_y_axis.y_axis_highlight_tic = null
-      }
-    }
-  }
-
-  function set_chart_hover(frame_index, x, y, width = frame_width, height = null) {
-    if (!chart_prepped) return
-    const frame = chart_prepped?.frames?.[frame_index]
-    if (!frame) return
-
-    const safe_width = Number(width) > 0 ? Number(width) : frame_width || 1
-    const safe_height = Number(height) > 0 ? Number(height) : frame?.frame_height || 1
-    const hover_x_pd = clamp(x / safe_width, 0, 1)
-    const hover_y_pd = clamp((safe_height - y) / safe_height, 0, 1)
-
-    chart_prepped.set_x_hovered_percent_decimal(parseFloat(hover_x_pd.toPrecision(4)))
-
-    for (let i = 0; i < (chart_prepped?.frames?.length ?? 0); i++) {
-      if (i === frame_index) continue
-      const inactive_frame = chart_prepped.frames[i]
-      inactive_frame.y_hovered_percent_decimal = null
-      for (let shared_y_axis of inactive_frame?.shared_y_axiss ?? []) {
-        shared_y_axis.y_axis_highlight_tic = null
-      }
-    }
-
-    frame.y_hovered_percent_decimal = parseFloat(hover_y_pd.toPrecision(4))
-
-    for (let i = 0; i < frame.shared_y_axiss.length; i++) {
-      frame.shared_y_axiss[i].y_axis_highlight_tic =
-        hover_y_pd * (frame.shared_y_axiss[i].shown_high_y - frame.shared_y_axiss[i].shown_low_y) +
-        frame.shared_y_axiss[i].shown_low_y
-    }
-  }
-
-  function get_current_hover_point(frame_index, width = frame_width, height = null) {
-    if (!chart_prepped) return null
-    const frame = chart_prepped?.frames?.[frame_index]
-    let hover_x_pd = Number(chart_prepped?.x_hovered_percent_decimal)
-    let hover_y_pd = Number(frame?.y_hovered_percent_decimal)
-    if ((!Number.isFinite(hover_x_pd) || !Number.isFinite(hover_y_pd)) && touch_hover_memory.frame_index === frame_index) {
-      hover_x_pd = Number(touch_hover_memory.x_hovered_percent_decimal)
-      hover_y_pd = Number(touch_hover_memory.y_hovered_percent_decimal)
-    }
-    if (!frame || !Number.isFinite(hover_x_pd) || !Number.isFinite(hover_y_pd)) return null
-
-    const safe_width = Number(width) > 0 ? Number(width) : frame_width || 1
-    const safe_height = Number(height) > 0 ? Number(height) : frame?.frame_height || 1
-    return {
-      x: clamp(hover_x_pd * safe_width, 0, safe_width),
-      y: clamp(safe_height - hover_y_pd * safe_height, 0, safe_height),
-      width: safe_width,
-      height: safe_height,
-    }
-  }
-
-  function remember_touch_hover(frame_index) {
-    touch_hover_memory.frame_index = frame_index
-    touch_hover_memory.x_hovered_percent_decimal = chart_prepped?.x_hovered_percent_decimal ?? null
-    touch_hover_memory.y_hovered_percent_decimal = chart_prepped?.frames?.[frame_index]?.y_hovered_percent_decimal ?? null
-  }
-
-  function restore_touch_hover_from_memory(frame_index = touch_hover_memory.frame_index) {
-    if (!chart_prepped || !Number.isInteger(frame_index)) return false
-
-    const hover_x_pd = Number(touch_hover_memory.x_hovered_percent_decimal)
-    const hover_y_pd = Number(touch_hover_memory.y_hovered_percent_decimal)
-    const frame_height = chart_prepped?.frames?.[frame_index]?.frame_height
-    if (!Number.isFinite(hover_x_pd) || !Number.isFinite(hover_y_pd) || !Number.isFinite(frame_height)) return false
-
-    const hover_x = hover_x_pd * (frame_width || 1)
-    const hover_y = frame_height - hover_y_pd * frame_height
-    set_chart_hover(frame_index, hover_x, hover_y, frame_width, frame_height)
-    return true
-  }
-
-  function begin_touch_hover(frame_index, pointer_x, pointer_y, width = frame_width, height = null) {
-    const current_hover = get_current_hover_point(frame_index, width, height)
-    const hover_x = current_hover?.x ?? pointer_x
-    const hover_y = current_hover?.y ?? pointer_y
-
-    gesture_state.touch_hover_offset_x = hover_x - pointer_x
-    gesture_state.touch_hover_offset_y = hover_y - pointer_y
-    gesture_state.touch_hover_frame_index = frame_index
-
-    set_chart_hover(frame_index, hover_x, hover_y, width, height)
-    remember_touch_hover(frame_index)
-  }
-
-  function update_touch_hover(frame_index, pointer_x, pointer_y, width = frame_width, height = null) {
-    const hover_frame_index = Number.isInteger(gesture_state.touch_hover_frame_index)
-      ? gesture_state.touch_hover_frame_index
-      : frame_index
-    const hover_frame_height = chart_prepped?.frames?.[hover_frame_index]?.frame_height
-    const safe_height = Number(height) > 0 ? Number(height) : hover_frame_height
-    const hover_x = pointer_x + (gesture_state.touch_hover_offset_x ?? 0)
-    const hover_y = pointer_y + (gesture_state.touch_hover_offset_y ?? 0)
-
-    set_chart_hover(hover_frame_index, hover_x, hover_y, width, safe_height)
-    remember_touch_hover(hover_frame_index)
-  }
-
-  function handle_pointer_down(e, frame_index) {
-    if (!chart_prepped) return
-    e.preventDefault()
-
-    // keep getting moves even if finger drifts off
-    e.currentTarget?.setPointerCapture?.(e.pointerId)
-
-    const point = get_chart_point_from_event(e, frame_index)
-    const { x, y, width, height } = point
-
-    pointer_cache.set(e.pointerId, { x, y, frame_index, pointer_type: e.pointerType })
-
-    if (e.pointerType !== "mouse") {
-      begin_touch_hover(frame_index, x, y, width, height)
-    }
-
-    if (pointer_cache.size === 1) {
-      gesture_state.mode = "pan"
-      gesture_state.start_shown_start_x = chart_prepped.shown_start_x
-      gesture_state.start_shown_end_x = chart_prepped.shown_end_x
-      gesture_state.start_range_sec = chart_prepped.shown_end_x - chart_prepped.shown_start_x
-      gesture_state.start_primary_x = x
-      gesture_state.start_primary_y = y
-    }
-
-    if (pointer_cache.size === 2) {
-      clear_all_chart_hover()
-      gesture_state.touch_hover_offset_x = null
-      gesture_state.touch_hover_offset_y = null
-      gesture_state.touch_hover_frame_index = null
-      const info = get_two_pointer_info()
-      if (!info) return
-      gesture_state.mode = "pinch"
-      gesture_state.start_shown_start_x = chart_prepped.shown_start_x
-      gesture_state.start_shown_end_x = chart_prepped.shown_end_x
-      gesture_state.start_range_sec = chart_prepped.shown_end_x - chart_prepped.shown_start_x
-      gesture_state.start_dist_px = info.dist
-      gesture_state.start_center_pd = frame_width ? clamp(info.center_x / frame_width, 0, 1) : 0.5
-    }
-  }
-
-  function handle_pointer_move(e, frame_index) {
-    if (!chart_prepped) return
-    if (!pointer_cache.has(e.pointerId)) return
-    e.preventDefault()
-
-    const point = get_chart_point_from_event(e, frame_index)
-    const { x, y, width, height } = point
-
-    const cached_pointer = pointer_cache.get(e.pointerId)
-    pointer_cache.set(e.pointerId, { ...cached_pointer, x, y, frame_index, pointer_type: e.pointerType })
-
-    if (pointer_cache.size === 1 && gesture_state.mode === "pan") {
-      if (e.pointerType !== "mouse") {
-        update_touch_hover(frame_index, x, y, width, height)
-        return
-      }
-
-      const dx_px = x - gesture_state.start_primary_x
-      const start_range = gesture_state.start_range_sec
-      if (!frame_width || !start_range) return
-
-      const delta_sec = (-dx_px / frame_width) * start_range
-      apply_view(gesture_state.start_shown_start_x + delta_sec, gesture_state.start_shown_end_x + delta_sec)
-      return
-    }
-
-    if (pointer_cache.size >= 2) {
-      clear_all_chart_hover()
-      if (gesture_state.mode !== "pinch") {
-        const info0 = get_two_pointer_info()
-        if (!info0) return
-        gesture_state.mode = "pinch"
-        gesture_state.start_shown_start_x = chart_prepped.shown_start_x
-        gesture_state.start_shown_end_x = chart_prepped.shown_end_x
-        gesture_state.start_range_sec = chart_prepped.shown_end_x - chart_prepped.shown_start_x
-        gesture_state.start_dist_px = info0.dist
-        gesture_state.start_center_pd = frame_width ? clamp(info0.center_x / frame_width, 0, 1) : 0.5
-      }
-
-      const info = get_two_pointer_info()
-      if (!info || !gesture_state.start_dist_px) return
-
-      const dist_ratio = info.dist / gesture_state.start_dist_px
-      if (!dist_ratio || dist_ratio <= 0) return
-
-      const start_range = gesture_state.start_range_sec
-      const center_pd = gesture_state.start_center_pd ?? 0.5
-      const start_start = gesture_state.start_shown_start_x
-      const center_time = start_start + center_pd * start_range
-
-      let next_range = start_range / dist_ratio
-      next_range = clamp_range_to_limits(next_range)
-
-      let next_start = center_time - center_pd * next_range
-      let next_end = next_start + next_range
-
-      apply_view(next_start, next_end)
-    }
-  }
-
-  function handle_pointer_up(e, frame_index) {
-    const pointer_details = pointer_cache.get(e.pointerId)
-    pointer_cache.delete(e.pointerId)
-
-    if (pointer_cache.size === 0) {
-      if ((pointer_details?.pointer_type ?? e.pointerType) !== "mouse") {
-        restore_touch_hover_from_memory(pointer_details?.frame_index ?? frame_index)
-      }
-      reset_gesture_state()
-      return
-    }
-
-    if (pointer_cache.size === 1) {
-      const remaining = [...pointer_cache.values()][0]
-      gesture_state.mode = "pan"
-      gesture_state.start_shown_start_x = chart_prepped?.shown_start_x
-      gesture_state.start_shown_end_x = chart_prepped?.shown_end_x
-      gesture_state.start_range_sec = chart_prepped?.shown_end_x - chart_prepped?.shown_start_x
-      gesture_state.start_primary_x = remaining?.x
-      gesture_state.start_primary_y = remaining?.y
-      gesture_state.start_dist_px = null
-      gesture_state.start_center_pd = null
-
-      if (remaining?.pointer_type !== "mouse" && Number.isInteger(remaining?.frame_index)) {
-        begin_touch_hover(
-          remaining.frame_index,
-          remaining.x,
-          remaining.y,
-          frame_width,
-          chart_prepped?.frames?.[remaining.frame_index]?.frame_height,
-        )
-      }
-    }
-  }
-
-  function handle_pointer_cancel(e, frame_index) {
-    const pointer_details = pointer_cache.get(e.pointerId)
-    pointer_cache.delete(e.pointerId)
-    if (pointer_cache.size === 0) {
-      if ((pointer_details?.pointer_type ?? e.pointerType) !== "mouse") {
-        restore_touch_hover_from_memory(pointer_details?.frame_index ?? frame_index)
-      }
-      reset_gesture_state()
-      return
-    }
-
-    if (pointer_cache.size === 1) {
-      const remaining = [...pointer_cache.values()][0]
-      gesture_state.mode = "pan"
-      gesture_state.start_shown_start_x = chart_prepped?.shown_start_x
-      gesture_state.start_shown_end_x = chart_prepped?.shown_end_x
-      gesture_state.start_range_sec = chart_prepped?.shown_end_x - chart_prepped?.shown_start_x
-      gesture_state.start_primary_x = remaining?.x
-      gesture_state.start_primary_y = remaining?.y
-      gesture_state.start_dist_px = null
-      gesture_state.start_center_pd = null
-
-      if (remaining?.pointer_type !== "mouse" && Number.isInteger(remaining?.frame_index)) {
-        begin_touch_hover(
-          remaining.frame_index,
-          remaining.x,
-          remaining.y,
-          frame_width,
-          chart_prepped?.frames?.[remaining.frame_index]?.frame_height,
-        )
-      }
-    }
-  }
-
-  function handle_scroll_y_axis(e, frame_index) {
-    if (!chart_prepped) return
-    e.preventDefault()
-    e.stopPropagation()
-
-    const { frame, axis } = get_y_axis_state(frame_index)
-    if (!axis) return
-
-    const zoom_factor = get_y_axis_zoom_factor_from_wheel(e.deltaY)
-    if (!Number.isFinite(zoom_factor) || zoom_factor === 1) return
-
-    const { low_y: current_low_y, high_y: current_high_y } = get_current_y_bounds(axis)
-    const current_range_y = current_high_y - current_low_y
-    if (!Number.isFinite(current_range_y) || current_range_y <= 0) return
-
-    const rect = e.currentTarget?.getBoundingClientRect?.()
-    const height = rect?.height || frame?.frame_height || 1
-    const offset_y = rect ? e.clientY - rect.top : e.offsetY
-    const anchor_pd = clamp((height - offset_y) / height, 0, 1)
-    const anchor_y = current_low_y + anchor_pd * current_range_y
-
-    const next_range_y = clamp_y_range_to_limits(current_range_y * zoom_factor, axis)
-    const next_low_y = anchor_y - anchor_pd * next_range_y
-    const next_high_y = next_low_y + next_range_y
-
-    set_manual_y_bounds(axis, next_low_y, next_high_y)
-  }
-
-  function reset_y_axis_gesture_state() {
-    y_axis_pointer_cache.clear()
-    y_axis_gesture_state.mode = null
-    y_axis_gesture_state.frame_index = null
-    y_axis_gesture_state.start_y = null
-    y_axis_gesture_state.start_dist_px = null
-    y_axis_gesture_state.start_range_y = null
-    y_axis_gesture_state.start_low_y = null
-    y_axis_gesture_state.start_high_y = null
-    y_axis_gesture_state.anchor_pd = null
-    y_axis_gesture_state.anchor_y = null
-    y_axis_gesture_state.did_drag = false
-  }
-
-  function get_y_axis_point_from_event(e, frame_index) {
-    const { frame } = get_y_axis_state(frame_index)
-    const rect = e.currentTarget?.getBoundingClientRect?.()
-    const height = rect?.height || frame?.frame_height || 1
-    const y = clamp((rect ? e.clientY - rect.top : e.offsetY) ?? 0, 0, height)
-    const y_pd = clamp((height - y) / height, 0, 1)
-    return { y, y_pd, height }
-  }
-
-  function get_two_y_axis_pointer_info() {
-    const pts = [...y_axis_pointer_cache.values()]
-    if (pts.length < 2) return null
-    const a = pts[0]
-    const b = pts[1]
-    const dist = Math.max(Math.abs(b.y - a.y), min_y_axis_pinch_dist_px)
-    const center_y = (a.y + b.y) / 2
-    const height = a.height || b.height || 1
-    const center_pd = clamp((height - center_y) / height, 0, 1)
-    return { dist, center_y, center_pd, height }
-  }
-
-  function set_y_axis_gesture_baseline(frame_index, start_y, anchor_pd, axis, mode = "pan", start_dist_px = null) {
-    const { low_y: start_low_y, high_y: start_high_y } = get_current_y_bounds(axis)
-    const start_range_y = start_high_y - start_low_y
-    if (!Number.isFinite(start_range_y) || start_range_y <= 0) return false
-
-    y_axis_gesture_state.mode = mode
-    y_axis_gesture_state.frame_index = frame_index
-    y_axis_gesture_state.start_y = start_y
-    y_axis_gesture_state.start_dist_px = start_dist_px
-    y_axis_gesture_state.start_range_y = start_range_y
-    y_axis_gesture_state.start_low_y = start_low_y
-    y_axis_gesture_state.start_high_y = start_high_y
-    y_axis_gesture_state.anchor_pd = anchor_pd
-    y_axis_gesture_state.anchor_y = start_low_y + anchor_pd * start_range_y
-    return true
-  }
-
-  function handle_y_axis_pointer_down(e, frame_index) {
-    if (!chart_prepped || e.button > 0) return
-    const { frame, axis } = get_y_axis_state(frame_index)
-    if (!frame || !axis) return
-
-    e.preventDefault()
-    e.stopPropagation()
-    e.currentTarget?.setPointerCapture?.(e.pointerId)
-
-    const point = get_y_axis_point_from_event(e, frame_index)
-    y_axis_pointer_cache.set(e.pointerId, { y: point.y, height: point.height, frame_index })
-    y_axis_gesture_state.did_drag = false
-
-    if (y_axis_pointer_cache.size >= 2) {
-      const info = get_two_y_axis_pointer_info()
-      if (!info) return
-      if (!set_y_axis_gesture_baseline(frame_index, info.center_y, info.center_pd, axis, "pinch", info.dist)) {
-        y_axis_pointer_cache.delete(e.pointerId)
-      }
-      return
-    }
-
-    if (!set_y_axis_gesture_baseline(frame_index, point.y, point.y_pd, axis, "pan")) {
-      y_axis_pointer_cache.delete(e.pointerId)
-    }
-  }
-
-  function handle_y_axis_pointer_move(e, frame_index) {
-    if (!chart_prepped) return
-    if (!y_axis_pointer_cache.has(e.pointerId) || y_axis_gesture_state.frame_index !== frame_index) return
-
-    const { frame, axis } = get_y_axis_state(frame_index)
-    if (!frame || !axis) return
-
-    e.preventDefault()
-    e.stopPropagation()
-
-    const point = get_y_axis_point_from_event(e, frame_index)
-    y_axis_pointer_cache.set(e.pointerId, { y: point.y, height: point.height, frame_index })
-
-    if (y_axis_pointer_cache.size >= 2) {
-      if (y_axis_gesture_state.mode !== "pinch") {
-        const info0 = get_two_y_axis_pointer_info()
-        if (!info0) return
-        set_y_axis_gesture_baseline(frame_index, info0.center_y, info0.center_pd, axis, "pinch", info0.dist)
-      }
-
-      const info = get_two_y_axis_pointer_info()
-      if (!info || !y_axis_gesture_state.start_dist_px) return
-      if (Math.abs(info.dist - y_axis_gesture_state.start_dist_px) > 4) y_axis_gesture_state.did_drag = true
-
-      const dist_ratio = info.dist / y_axis_gesture_state.start_dist_px
-      if (!Number.isFinite(dist_ratio) || dist_ratio <= 0) return
-
-      const next_range_y = clamp_y_range_to_limits(y_axis_gesture_state.start_range_y / dist_ratio, axis)
-      const next_low_y = y_axis_gesture_state.anchor_y - y_axis_gesture_state.anchor_pd * next_range_y
-      const next_high_y = next_low_y + next_range_y
-
-      set_manual_y_bounds(axis, next_low_y, next_high_y)
-      return
-    }
-
-    const height = point.height
-    const delta_y = point.y - y_axis_gesture_state.start_y
-    if (Math.abs(delta_y) > 4) y_axis_gesture_state.did_drag = true
-    if (!Number.isFinite(height) || height <= 0 || !Number.isFinite(y_axis_gesture_state.start_range_y)) return
-
-    const price_delta_y = (delta_y / height) * y_axis_gesture_state.start_range_y
-    const next_low_y = y_axis_gesture_state.start_low_y + price_delta_y
-    const next_high_y = y_axis_gesture_state.start_high_y + price_delta_y
-
-    set_manual_y_bounds(axis, next_low_y, next_high_y)
-  }
-
-  function handle_y_axis_pointer_up(e, frame_index) {
-    if (!y_axis_pointer_cache.has(e.pointerId) || y_axis_gesture_state.frame_index !== frame_index) return
-    e.preventDefault()
-    e.stopPropagation()
-    y_axis_pointer_cache.delete(e.pointerId)
-    if (y_axis_pointer_cache.size === 0) {
-      y_axis_gesture_state.suppress_click = y_axis_gesture_state.did_drag
-      reset_y_axis_gesture_state()
-      return
-    }
-
-    const remaining = [...y_axis_pointer_cache.values()][0]
-    const { axis } = get_y_axis_state(remaining.frame_index)
-    if (axis) {
-      const anchor_pd = clamp((remaining.height - remaining.y) / remaining.height, 0, 1)
-      set_y_axis_gesture_baseline(remaining.frame_index, remaining.y, anchor_pd, axis, "pan")
-    }
-  }
-
-  function handle_y_axis_pointer_cancel(e, frame_index) {
-    if (!y_axis_pointer_cache.has(e.pointerId) || y_axis_gesture_state.frame_index !== frame_index) return
-    e.preventDefault()
-    e.stopPropagation()
-    y_axis_pointer_cache.delete(e.pointerId)
-    if (y_axis_pointer_cache.size === 0) {
-      y_axis_gesture_state.suppress_click = y_axis_gesture_state.did_drag
-      reset_y_axis_gesture_state()
-      return
-    }
-
-    const remaining = [...y_axis_pointer_cache.values()][0]
-    const { axis } = get_y_axis_state(remaining.frame_index)
-    if (axis) {
-      const anchor_pd = clamp((remaining.height - remaining.y) / remaining.height, 0, 1)
-      set_y_axis_gesture_baseline(remaining.frame_index, remaining.y, anchor_pd, axis, "pan")
-    }
-  }
-
-  function handle_y_axis_click(frame_index) {
-    if (y_axis_gesture_state.suppress_click) {
-      y_axis_gesture_state.suppress_click = false
-      return
-    }
-    chart_prepped?.frames?.[frame_index]?.change_shown_y_axis?.()
-  }
-
-  function handle_chart_hover(e, frame_index) {
-    const point = get_chart_point_from_event(e, frame_index)
-    set_chart_hover(frame_index, point.x, point.y, point.width, point.height)
-  }
-
-  function handle_chart_hover_leave(e, frame_index) {
-    if (e?.relatedTarget?.closest?.(".floater")) {
-      clear_chart_hover(frame_index, { clear_x: false })
-      return
-    }
-
-    clear_chart_hover(frame_index)
-  }
-
-  function refresh_chart(opts = {}) {
-    const keep_view = typeof opts.keep_view === "boolean" ? opts.keep_view : true
-    if (!grid_width || !datasets) return
-    if (!chart_prepped) {
-      chart_prepped = prep_chart({ ...config?.chart })
-      return
-    }
-    const next_chart = { ...chart_prepped }
-    if (!keep_view) {
-      next_chart.shown_start_x = null
-      next_chart.shown_end_x = null
-    }
-    chart_prepped = prep_chart(next_chart)
-  }
-
-  function pad2(n) {
-    const s = String(n)
-    return s.length < 2 ? "0" + s : s
-  }
-
-  function readable_time_full_to_minute(seconds) {
-    if (seconds == null || isNaN(seconds)) return "-"
-    const d = new Date(seconds * 1000)
-    const y = d.getFullYear()
-    const m = pad2(d.getMonth() + 1)
-    const day = pad2(d.getDate())
-    const h = pad2(d.getHours())
-    const min = pad2(d.getMinutes())
-    return `${y}-${m}-${day} ${h}:${min}`
-  }
-
-  function get_path_d(data) {
-    if (!Array.isArray(data) || data.length === 0) return null
-    let path_d = null
-    for (let datapoint of data) {
-      const x = Number(datapoint?.x)
-      const y = Number(datapoint?.y)
-      if (!Number.isFinite(x) || !Number.isFinite(y)) continue
-
-      const point = `${(x * 100).toPrecision(4)} ${(100 - y * 100).toPrecision(4)}`
-      path_d = path_d == null ? `M${point}` : `${path_d} L${point}`
-    }
-    return path_d
-  }
-
-  function prep_chart(input) {
-    if (!input || !datasets || !grid_width) {
-      chart_prepped = null
-      return
-    }
-    let id = $state(input?.id)
-    let x_axis_type = $state(input?.x_axis_type)
-    let x_axis_title = $state(input?.x_axis_title)
-    let shown_start_x = $state(input?.shown_start_x)
-    let shown_end_x = $state(input?.shown_end_x)
-    let frames = $state(input?.frames)
-    let min_x_scrollable = $state(input?.min_x_scrollable)
-    let max_x_scrollable = $state(input?.max_x_scrollable)
-    let x_axis_highlight_tic = $state(input?.x_axis_highlight_tic)
-    let x_hovered_percent_decimal = $state(input?.x_hovered_percent_decimal)
-    let all_data_start_x_loc = $state(null)
-    let all_data_end_x_loc = $state(null)
-    let most_datapoints_for_x_dataset = 0
-    if (Array.isArray(frames)) {
-      for (let frame of frames) {
-        if (Array.isArray(frame?.shared_y_axiss)) {
-          for (let shared_y_axis of frame.shared_y_axiss) {
-            if (Array.isArray(shared_y_axis?.datasets)) {
-              for (let dataset of shared_y_axis.datasets) {
-                let most_datapoints_for_x_dataset_loc = 0
-                if (
-                  ["klines", "path", "points"].some((h) => h == dataset.type) &&
-                  Array.isArray(datasets[dataset?.dataset_id]?.data) &&
-                  datasets[dataset?.dataset_id]?.data.length > 0
-                ) {
-                  for (let datapoint of datasets[dataset.dataset_id].data) {
-                    most_datapoints_for_x_dataset_loc++
-                    if (
-                      all_data_start_x_loc == undefined ||
-                      all_data_start_x_loc == null ||
-                      isNaN(all_data_start_x_loc) ||
-                      datapoint?.[dataset?.keys?.[0]] < all_data_start_x_loc
-                    ) {
-                      all_data_start_x_loc = datapoint?.[dataset?.keys?.[0]]
-                    }
-                    if (
-                      all_data_end_x_loc == undefined ||
-                      all_data_end_x_loc == null ||
-                      isNaN(all_data_end_x_loc) ||
-                      datapoint?.[dataset?.keys?.[0]] > all_data_end_x_loc
-                    ) {
-                      all_data_end_x_loc = datapoint?.[dataset?.keys?.[0]]
-                    }
-                  }
-                }
-                if (most_datapoints_for_x_dataset_loc > most_datapoints_for_x_dataset) {
-                  most_datapoints_for_x_dataset = most_datapoints_for_x_dataset_loc
-                }
-              }
-            }
-          }
-        }
-      }
-    }
-    const x_range = all_data_end_x_loc - all_data_start_x_loc
-    let range_to_show = x_range
-    let shown_start_x_loc = all_data_start_x_loc
-    if (most_datapoints_for_x_dataset > 20) {
-      range_to_show = (x_range * range_to_show_default) / most_datapoints_for_x_dataset
-      shown_start_x_loc = all_data_end_x_loc - parseFloat(range_to_show.toPrecision(8))
-    }
-    // console.log("x_range0", {
-    //   x_range,
-    //   range_to_show,
-    //   all_data_end_x_loc,
-    //   all_data_start_x_loc,
-    //   shown_start_x,
-    //   shown_end_x,
-    //   most_datapoints_for_x_dataset,
-    // })
-    min_x_scrollable = all_data_start_x_loc + Math.floor(range_to_show * 0.1)
-    max_x_scrollable = all_data_end_x_loc - Math.floor(range_to_show * 0.1)
-    if (shown_start_x == null || isNaN(shown_start_x)) {
-      shown_start_x = shown_start_x_loc
-    }
-    if (shown_end_x == null || isNaN(shown_end_x)) {
-      shown_end_x = all_data_end_x_loc
-    }
-    let prepped_frames = []
-    for (let frame of frames) {
-      const frame_height = frame_width / frame.aspect_ratio
-      let shown_y_axis_index = $state(Number.isInteger(frame?.shown_y_axis_index) ? frame.shown_y_axis_index : 0)
-      let prepped_shared_y_axiss = []
-      for (let shared_y_axis of frame.shared_y_axiss) {
-        let data_low_y = Infinity
-        let data_high_y = -Infinity
-        let fallback_low_y = Infinity
-        let fallback_high_y = -Infinity
-        let pre_prepped_datasets = []
-        function register_y_value(value, include_in_primary = true) {
-          if (!is_finite_num(value)) return
-          const safe_value = Number(value)
-          fallback_low_y = Math.min(fallback_low_y, safe_value)
-          fallback_high_y = Math.max(fallback_high_y, safe_value)
-          if (!include_in_primary) return
-          data_low_y = Math.min(data_low_y, safe_value)
-          data_high_y = Math.max(data_high_y, safe_value)
-        }
-        for (let dataset of shared_y_axis.datasets) {
-          const affects_y_scale = dataset?.affects_y_scale ?? dataset?.type !== "lines"
-          let shown_data = []
-          let d_loc = null
-          if (dataset.type === "klines" && dataset?.keys?.length == 5 && datasets[dataset?.dataset_id]?.data) {
-            for (let kline of datasets[dataset?.dataset_id]?.data) {
-              if (
-                !isNaN(kline[dataset?.keys[0]]) &&
-                !isNaN(kline[dataset?.keys[1]]) &&
-                !isNaN(kline[dataset?.keys[2]]) &&
-                !isNaN(kline[dataset?.keys[3]]) &&
-                !isNaN(kline[dataset?.keys[4]]) &&
-                shown_start_x <= kline[dataset?.keys[0]] &&
-                kline[dataset?.keys[0]] < shown_end_x
-              ) {
-                const item_to_add = {
-                  x: kline[dataset?.keys[0]],
-                  o: kline[dataset?.keys[1]],
-                  l: kline[dataset?.keys[2]],
-                  h: kline[dataset?.keys[3]],
-                  c: kline[dataset?.keys[4]],
-                }
-                shown_data.push(item_to_add)
-                register_y_value(item_to_add.l, affects_y_scale)
-                register_y_value(item_to_add.h, affects_y_scale)
-              }
-            }
-          } else if (
-            ["points", "path"].some((h) => h == dataset.type) &&
-            dataset?.keys?.length == 2 &&
-            datasets[dataset?.dataset_id]?.data
-          ) {
-            for (let datapoint of datasets[dataset?.dataset_id]?.data) {
-              if (
-                !isNaN(datapoint[dataset?.keys[0]]) &&
-                !isNaN(datapoint[dataset?.keys[1]]) &&
-                shown_start_x <= datapoint[dataset?.keys[0]] &&
-                datapoint[dataset?.keys[0]] < shown_end_x
-              ) {
-                const item_to_add = {
-                  x: datapoint[dataset?.keys[0]],
-                  y: datapoint[dataset?.keys[1]],
-                }
-                shown_data.push(item_to_add)
-                register_y_value(item_to_add.y, affects_y_scale)
-              }
-            }
-          } else if (dataset.type == "lines" && dataset?.keys?.length > 1 && datasets[dataset?.dataset_id]?.data) {
-            for (let datapoint of datasets[dataset?.dataset_id]?.data) {
-              if (!isNaN(datapoint[dataset?.keys[0]]) && !isNaN(datapoint[dataset?.keys[1]])) {
-                const item_to_add = {
-                  m: datapoint[dataset?.keys[0]],
-                  b: datapoint[dataset?.keys[1]],
-                  s: dataset?.keys?.length > 2 ? datapoint[dataset?.keys[2]] : null,
-                }
-                shown_data.push(item_to_add)
-                register_y_value(item_to_add.m * shown_start_x + item_to_add.b, affects_y_scale)
-                register_y_value(item_to_add.m * shown_end_x + item_to_add.b, affects_y_scale)
-                register_y_value(datasets[dataset?.dataset_id]?.y_min, affects_y_scale)
-                register_y_value(datasets[dataset?.dataset_id]?.y_max, affects_y_scale)
-              }
-            }
-          }
-          let color_one =
-            dataset?.colors.length > 0
-              ? gen_color(
-                  dataset?.colors[0].l,
-                  dataset?.colors[0].c,
-                  dataset?.colors[0].h,
-                  dataset?.colors[0].o,
-                  dataset?.colors[0].is_theme_based,
-                )
-              : "#44ff4450"
-          let color_two =
-            dataset?.colors.length > 1
-              ? gen_color(
-                  dataset?.colors[1].l,
-                  dataset?.colors[1].c,
-                  dataset?.colors[1].h,
-                  dataset?.colors[1].o,
-                  dataset?.colors[1].is_theme_based,
-                )
-              : color_one
-                ? color_one
-                : "#ff444450"
-          pre_prepped_datasets.push({
-            type: dataset.type,
-            data: shown_data,
-            dataset_id: dataset.dataset_id,
-            name: dataset.name,
-            period_x: dataset.period_x,
-            colors: dataset.colors,
-            color_one: color_one,
-            color_two: color_two,
-            d: d_loc,
-            keys: dataset.keys,
-            affects_y_scale: affects_y_scale,
-          })
-        }
-        if (!Number.isFinite(data_low_y) || !Number.isFinite(data_high_y)) {
-          data_low_y = fallback_low_y
-          data_high_y = fallback_high_y
-        }
-        const has_visible_y_bounds = Number.isFinite(data_low_y) && Number.isFinite(data_high_y)
-        if (!has_visible_y_bounds) {
-          data_low_y = 0
-          data_high_y = 1
-        }
-        const has_manual_y_bounds =
-          is_finite_num(shared_y_axis?.manual_low_y) &&
-          is_finite_num(shared_y_axis?.manual_high_y) &&
-          Number(shared_y_axis.manual_high_y) > Number(shared_y_axis.manual_low_y)
-        let shown_low_y = has_manual_y_bounds ? Number(shared_y_axis.manual_low_y) : null
-        let shown_high_y = has_manual_y_bounds ? Number(shared_y_axis.manual_high_y) : null
-        if (!has_manual_y_bounds) {
-          const padded_y_bounds = get_padded_y_bounds(
-            data_low_y,
-            data_high_y,
-            shared_y_axis.top_padding_pd,
-            shared_y_axis.bottom_padding_pd,
-          )
-          shown_low_y = padded_y_bounds.shown_low_y
-          shown_high_y = padded_y_bounds.shown_high_y
-        }
-        let shown_y_range = shown_high_y - shown_low_y
-        if (!Number.isFinite(shown_y_range) || shown_y_range <= 0) {
-          shown_y_range = get_safe_y_range(shown_low_y, shown_high_y)
-          shown_low_y = Number(shown_low_y) - shown_y_range / 2
-          shown_high_y = shown_low_y + shown_y_range
-        }
-        const shown_x_range = shown_end_x - shown_start_x
-        let prepped_datasets = []
-        for (let pre_prepped_dataset of pre_prepped_datasets) {
-          const kline_width_pd = (pre_prepped_dataset.period_x * 1) / shown_x_range
-          let normalized_datapoints_in_range_loc = []
-          for (let datapoint of pre_prepped_dataset.data) {
-            if (pre_prepped_dataset.type === "klines") {
-              const norm_x = (datapoint.x - shown_start_x) / shown_x_range
-              const norm_o = (datapoint.o - shown_low_y) / shown_y_range
-              const norm_l = (datapoint.l - shown_low_y) / shown_y_range
-              const norm_h = (datapoint.h - shown_low_y) / shown_y_range
-              const norm_c = (datapoint.c - shown_low_y) / shown_y_range
-              const norm_details = get_kline_details(norm_o, norm_l, norm_h, norm_c)
-              normalized_datapoints_in_range_loc.push({
-                x: parseFloat(norm_x.toPrecision(6)),
-                o: parseFloat(norm_o.toPrecision(6)),
-                l: parseFloat(norm_l.toPrecision(6)),
-                h: parseFloat(norm_h.toPrecision(6)),
-                c: parseFloat(norm_c.toPrecision(6)),
-                ...norm_details,
-              })
-            } else if (pre_prepped_dataset.type === "lines") {
-              let x1 = shown_start_x
-              let y1 = datapoint.m * x1 + datapoint.b
-              if (y1 < shown_low_y) {
-                x1 = (shown_low_y - datapoint.b) / datapoint.m
-                y1 = shown_low_y
-              } else if (y1 > shown_high_y) {
-                x1 = (shown_high_y - datapoint.b) / datapoint.m
-                y1 = shown_high_y
-              }
-              let x2 = shown_end_x
-              let y2 = datapoint.m * x2 + datapoint.b
-              if (y2 < shown_low_y) {
-                x2 = (shown_low_y - datapoint.b) / datapoint.m
-                y2 = shown_low_y
-              } else if (y2 > shown_high_y) {
-                x2 = (shown_high_y - datapoint.b) / datapoint.m
-                y2 = shown_high_y
-              }
-              const norm_y1 = (y1 - shown_low_y) / shown_y_range
-              const norm_y2 = (y2 - shown_low_y) / shown_y_range
-              const norm_x1 = (x1 - shown_start_x) / shown_x_range
-              const norm_x2 = (x2 - shown_start_x) / shown_x_range
-              normalized_datapoints_in_range_loc.push({
-                x1: parseFloat(norm_x1.toPrecision(6)),
-                y1: parseFloat(norm_y1.toPrecision(6)),
-                x2: parseFloat(norm_x2.toPrecision(6)),
-                y2: parseFloat(norm_y2.toPrecision(6)),
-                s: datapoint?.s,
-              })
-            } else {
-              const norm_x = (datapoint.x - shown_start_x) / shown_x_range
-              const norm_y = (datapoint.y - shown_low_y) / shown_y_range
-              normalized_datapoints_in_range_loc.push({
-                x: parseFloat(norm_x.toPrecision(6)),
-                y: parseFloat(norm_y.toPrecision(6)),
-              })
-            }
-          }
-          const d_loc_normalized =
-            pre_prepped_dataset.type === "path" ? get_path_d(normalized_datapoints_in_range_loc) : pre_prepped_dataset.d
-          pre_prepped_dataset.data = normalized_datapoints_in_range_loc
-          pre_prepped_dataset.d = d_loc_normalized
-          prepped_datasets.push({
-            ...pre_prepped_dataset,
-            kline_width_pd: parseFloat(kline_width_pd.toPrecision(8)),
-          })
-        }
-        const y_tics = prep_y_axis(shown_low_y, shown_high_y, frame_height)
-        prepped_shared_y_axiss.push({
-          bottom_padding_pd: shared_y_axis.bottom_padding_pd,
-          top_padding_pd: shared_y_axis.top_padding_pd,
-          y_axis_title: shared_y_axis.y_axis_title,
-          y_axis_type: shared_y_axis.y_axis_type,
-          data_low_y: parseFloat(data_low_y.toPrecision(8)),
-          data_high_y: parseFloat(data_high_y.toPrecision(8)),
-          manual_low_y: has_manual_y_bounds ? parseFloat(Number(shared_y_axis.manual_low_y).toPrecision(10)) : null,
-          manual_high_y: has_manual_y_bounds ? parseFloat(Number(shared_y_axis.manual_high_y).toPrecision(10)) : null,
-          shown_low_y: parseFloat(shown_low_y.toPrecision(8)),
-          shown_high_y: parseFloat(shown_high_y.toPrecision(8)),
-          y_axis_tics: y_tics,
-          y_axis_highlight_tic: null,
-          datasets: prepped_datasets,
-        })
-      }
-      function change_shown_y_axis() {
-        shown_y_axis_index = shown_y_axis_index < frame?.shared_y_axiss.length - 1 ? shown_y_axis_index + 1 : 0
-      }
-      prepped_frames.push({
-        get aspect_ratio() {
-          return frame.aspect_ratio
-        },
-        get frame_height() {
-          return frame_height
-        },
-        get shared_y_axiss() {
-          return prepped_shared_y_axiss
-        },
-        get shown_y_axis_index() {
-          return shown_y_axis_index
-        },
-        y_hovered_percent_decimal: null,
-        change_shown_y_axis,
-      })
-    }
-    frames = prepped_frames
-    let x_axis_tics = prep_x_axis(shown_start_x, shown_end_x, frame_width)
-    function set_shown_start_x(input) {
-      shown_start_x = input
-    }
-    function set_shown_end_x(input) {
-      shown_end_x = input
-    }
-    function set_x_hovered_percent_decimal(input) {
-      x_hovered_percent_decimal = input
-      const hover_x_sec = input * (shown_end_x - shown_start_x) + shown_start_x
-      const hover_x_min_sec = Math.round(hover_x_sec / 60) * 60
-      x_axis_highlight_tic = readable_time_full_to_minute(hover_x_min_sec)
-    }
-    return {
-      get id() {
-        return id
-      },
-      get x_axis_type() {
-        return x_axis_type
-      },
-      get x_axis_title() {
-        return x_axis_title
-      },
-      get shown_start_x() {
-        return shown_start_x
-      },
-      get shown_end_x() {
-        return shown_end_x
-      },
-      get all_data_start_x() {
-        return all_data_start_x_loc
-      },
-      get all_data_end_x() {
-        return all_data_end_x_loc
-      },
-      get frames() {
-        return frames
-      },
-      get min_x_scrollable() {
-        return min_x_scrollable
-      },
-      get max_x_scrollable() {
-        return max_x_scrollable
-      },
-      get x_axis_tics() {
-        return x_axis_tics
-      },
-      get x_axis_highlight_tic() {
-        return x_axis_highlight_tic
-      },
-      get x_hovered_percent_decimal() {
-        return x_hovered_percent_decimal
-      },
-      set_shown_start_x,
-      set_shown_end_x,
-      set_x_hovered_percent_decimal,
-    }
-  }
-
-  function set_datasets(input) {
-    datasets = input
-  }
-
-  function init(config) {
-    range_to_show_default = config?.range_to_show_default ?? 500
-    min_visible_bars = config?.min_visible_bars ?? 20
-    x_edge_padding_ratio = config?.x_edge_padding_ratio ?? 0.5
-    datasets = config?.datasets
-    chart_prepped = prep_chart({ ...config?.chart })
-  }
-
-  init(config)
-
-  return {
-    get datasets() {
-      return datasets
-    },
-    get chart_prepped() {
-      return chart_prepped
-    },
-    get y_axis_width() {
-      return y_axis_width
-    },
-    get x_axis_height() {
-      return x_axis_height
-    },
-    get grid_width() {
-      return grid_width
-    },
-    get frame_width() {
-      return frame_width
-    },
-    period_to_sec,
-    handle_scroll_frame,
-    handle_pointer_down,
-    handle_pointer_move,
-    handle_pointer_up,
-    handle_pointer_cancel,
-    handle_y_axis_pointer_down,
-    handle_y_axis_pointer_move,
-    handle_y_axis_pointer_up,
-    handle_y_axis_pointer_cancel,
-    handle_y_axis_click,
-    handle_scroll_y_axis,
-    handle_chart_hover,
-    handle_chart_hover_leave,
-    set_grid_width,
-    gen_color,
-    set_datasets,
-    refresh_chart,
-  }
-}