sveltekit-ui 1.0.0

package/src/lib/Components/Chart/index.svelte.js

@@ -0,0 +1,1084 @@
+import { color_var } from "$lib/client/index.js"
+
+export function create_chart_manager(config) {
+  const y_axis_width = 70
+  const x_axis_height = 30
+
+  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, shown_start_x: null, shown_end_x: null })
+    }
+  }
+
+  function gen_color(l, c, h, o = 16, is_theme_based = true, dark_l_offset = 0, isDarkTheme = 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 = isDarkTheme ? 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
+  }
+
+  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) {
+    const period_sec = 90 // needs work
+    const shown_x_range = shown_end_x - shown_start_x
+    const change_sec = (Math.round((shown_x_range * 0.01) / 60) + 1) * 60
+    let shown_end_x_loc = shown_end_x
+    let shown_start_x_loc = shown_start_x
+    if (e.deltaX < -1 && shown_end_x > min_x_scrollable) {
+      shown_start_x_loc -= change_sec
+      shown_end_x_loc -= change_sec
+    } else if (e.deltaX > 1 && shown_start_x < max_x_scrollable) {
+      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 > 90 * period_sec) {
+      shown_start_x_loc += shown_start_x_loc < max_x_scrollable ? Math.round((change_sec * x_pd) / 10) * 10 : 0
+      shown_end_x_loc -= shown_end_x_loc > min_x_scrollable ? Math.round((change_sec * (1 - x_pd)) / 10) * 10 : 0
+    } else if (e.deltaY > 1 && shown_x_range < period_sec * 10000) {
+      shown_start_x_loc -= shown_start_x_loc > min_x_scrollable ? Math.round((change_sec * x_pd) / 10) * 10 : 0
+      shown_end_x_loc += shown_end_x_loc < max_x_scrollable ? Math.round((change_sec * (1 - x_pd)) / 10) * 10 : 0
+    }
+    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 = h - l
+    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 ticOptions = [
+      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 < ticOptions.length - 1; i++) {
+      if (ticOptions[i] < seconds && ticOptions[i + 1] > seconds) {
+        return ticOptions[i + 1]
+      }
+    }
+    return "-"
+  }
+
+  function base_time(high, cleanTicTimeChange) {
+    const dHigh = new Date(high * 1000)
+    const year = dHigh.getFullYear()
+    const month = dHigh.getMonth()
+    const day = dHigh.getDate()
+    const hour = dHigh.getHours()
+    const minute = dHigh.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[cleanTicTimeChange]?.focus) {
+      case "y": {
+        break
+      }
+      case "M": {
+        d.setFullYear(year)
+        for (let item of ticBases[cleanTicTimeChange].values) {
+          if (item < month) {
+            d.setMonth(item)
+            break
+          }
+        }
+        break
+      }
+      case "d": {
+        d.setFullYear(year)
+        d.setMonth(month)
+        for (let item of ticBases[cleanTicTimeChange].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[cleanTicTimeChange].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[cleanTicTimeChange].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 dateObject = new Date(seconds * 1000)
+    const year = dateObject.getFullYear()
+    const month = dateObject.getMonth()
+    const day = dateObject.getDate()
+    const hour = dateObject.getHours()
+    const minute = dateObject.getMinutes()
+    const yearSt = JSON.stringify(year)
+    const monthSt = months[month]
+    let daySt = JSON.stringify(day)
+    // if(daySt.length < 2){ daySt = '0' + daySt }
+    let hourSt = JSON.stringify(hour)
+    // if(hourSt.length < 2){ hourSt = '0' + hourSt }
+    let minuteSt = JSON.stringify(minute)
+    if (minuteSt.length < 2) {
+      minuteSt = "0" + minuteSt
+    }
+    const hourMinuteSt = hourSt + ":" + minuteSt
+    if (minute > 0 || hour > 0) {
+      return hourMinuteSt
+    } else if (day > 1) {
+      return daySt
+    } else if (month > 0) {
+      return monthSt
+    }
+    return yearSt
+  }
+
+  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 absClosestToZero = low
+    let absFartherToZero = high
+    let isPositive = true
+    if (high < 0) {
+      absClosestToZero = Math.abs(high)
+      absFartherToZero = Math.abs(low)
+      isPositive = false
+    }
+    let accumulatedNum = 0
+    while (accumulatedNum < absFartherToZero) {
+      const ceiling = absFartherToZero - accumulatedNum
+      const res = next_big_num_under_target(ceiling)
+      accumulatedNum += res
+      if (accumulatedNum > absClosestToZero) {
+        if (isPositive) {
+          return accumulatedNum
+        } else {
+          return -1 * accumulatedNum
+        }
+      }
+    }
+    return "-"
+  }
+
+  function next_big_num_under_target(target) {
+    const numBases = [
+      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 numBases) {
+      if (num < target) {
+        return num
+      }
+    }
+    return 1
+  }
+
+  function tic_size(num) {
+    const ticOptions = [
+      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 < ticOptions.length - 1; i++) {
+      if (ticOptions[i] < num && ticOptions[i + 1] > num) {
+        return ticOptions[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 ifneg = 1
+    if ((typeof num === typeof null) | (typeof num === typeof undefined)) {
+      return "-"
+    }
+    if (num < 0) {
+      ifneg = -1
+    }
+    var amount
+    amount = Math.abs(num)
+    if (amount === 0) {
+      return 0
+    } else if (amount >= 0 && amount < 0.0001) {
+      return Math.round((ifneg * amount).toFixed(8) * 10000000 + Number.EPSILON) / 10000000
+    } else if (amount >= 0.0001 && amount < 0.001) {
+      return Math.round((ifneg * amount).toFixed(7) * 1000000 + Number.EPSILON) / 1000000
+    } else if (amount >= 0.001 && amount < 0.01) {
+      return Math.round((ifneg * amount).toFixed(6) * 100000 + Number.EPSILON) / 100000
+    } else if (amount >= 0.01 && amount < 0.1) {
+      return Math.round((ifneg * amount).toFixed(5) * 10000 + Number.EPSILON) / 10000
+    } else if (amount >= 0.1 && amount < 10) {
+      return Math.round((ifneg * amount).toFixed(4) * 1000 + Number.EPSILON) / 1000
+    } else if (amount >= 10 && amount < 1000) {
+      return (ifneg * amount).toFixed(2)
+    } else if (amount >= 1000 && amount < 1000000) {
+      return (ifneg * amount).toFixed().replace(/\B(?=(\d{3})+(?!\d))/g, ",")
+    } else if (amount >= 1000000 && amount < 10000000) {
+      return (ifneg * (amount / 1000000)).toFixed(2) + " M"
+    } else if (amount >= 10000000 && amount < 100000000) {
+      return (ifneg * (amount / 1000000)).toFixed(1) + " M"
+    } else if (amount >= 100000000 && amount < 1000000000) {
+      return (ifneg * (amount / 1000000)).toFixed() + " M"
+    } else if (amount >= 1000000000 && amount < 10000000000) {
+      return (ifneg * (amount / 1000000000)).toFixed(2) + " B"
+    } else if (amount >= 10000000000 && amount < 100000000000) {
+      return (ifneg * (amount / 1000000000)).toFixed(1) + " B"
+    } else if (amount >= 100000000000 && amount < 1000000000000) {
+      return (ifneg * (amount / 1000000000)).toFixed() + " B"
+    } else if (amount >= 1000000000000 && amount < 10000000000000) {
+      return (ifneg * (amount / 1000000000000)).toFixed(2) + " T"
+    } else if (amount >= 10000000000000 && amount < 100000000000000) {
+      return (ifneg * (amount / 1000000000000)).toFixed(1) + " T"
+    } else if (amount >= 100000000000000 && amount < 1000000000000000) {
+      return (ifneg * (amount / 1000000000000)).toFixed() + " T"
+    } else if (amount >= 1000000000000000 && amount < 10000000000000000n) {
+      return (ifneg * (amount / 1000000000000000)).toFixed(2) + " Q"
+    } else if (amount >= 10000000000000000n && amount < 100000000000000000n) {
+      return (ifneg * (amount / 1000000000000000)).toFixed(1) + " Q"
+    } else if (amount >= 100000000000000000n && amount < 1000000000000000000n) {
+      return (ifneg * (amount / 1000000000000000)).toFixed() + " Q"
+    } else if (amount >= 1000000000000000000n && amount < 10000000000000000000n) {
+      return (ifneg * (amount / 1000000000000000000n)).toFixed(2) + " QN"
+    } else if (amount >= 10000000000000000000n && amount < 100000000000000000000n) {
+      return (ifneg * (amount / 1000000000000000000n)).toFixed(1) + " QN"
+    } else if (amount >= 100000000000000000000n && amount < 1000000000000000000000n) {
+      return (ifneg * (amount / 1000000000000000000n)).toFixed() + " QN"
+    } else {
+      return "Big"
+    }
+  }
+
+  function handle_scroll_frame(e) {
+    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
+    )
+    chart_prepped.set_shown_start_x(res.shown_start_x)
+    chart_prepped.set_shown_end_x(res.shown_end_x)
+    chart_prepped = prep_chart(chart_prepped)
+  }
+
+  function handle_chart_hover(e, frame_index) {
+    setTimeout(() => {
+      const hover_x_pd = e.offsetX / frame_width
+      chart_prepped.set_x_hovered_percent_decimal(hover_x_pd.toPrecision(3))
+      // const hover_x = Math.floor(hover_x_pd * (chart_prepped.shown_end_x - chart_prepped.shown_start_x) + chart_prepped.shown_start_x)
+      // chart_prepped.x_axis_highlight_tic = null
+      const hover_y_pd = (
+        (chart_prepped.frames[frame_index].frame_height - e.offsetY) /
+        chart_prepped.frames[frame_index].frame_height
+      ).toPrecision(3)
+      chart_prepped.frames[frame_index].y_hovered_percent_decimal = hover_y_pd
+      // for(let i = 0; i < chart_prepped.frames[frame_index].shared_y_axiss.length; i++){
+      //   chart_prepped.frames[frame_index].shared_y_axiss[i].y_axis_highlight_tic = hover_y_pd * (chart_prepped.frames[frame_index].shared_y_axiss[i].shown_high_y - chart_prepped.frames[frame_index].shared_y_axiss[i].shown_low_y) + chart_prepped.frames[frame_index].shared_y_axiss[i].shown_low_y
+      // }
+    }, 100)
+  }
+
+  function handle_chart_hover_leave(frame_index) {
+    setTimeout(() => {
+      chart_prepped.x_hovered_percent_decimal = null
+      // chart_prepped.x_axis_highlight_tic = null
+      chart_prepped.frames[frame_index].y_hovered_percent_decimal = null
+      // for(let i = 0; i < chart_prepped.frames[frame_index].shared_y_axiss.length; i++){
+      //   chart_prepped.frames[frame_index].shared_y_axiss[i].y_axis_highlight_tic = null
+      // }
+    }, 100)
+  }
+
+  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 * 20) / most_datapoints_for_x_dataset
+      shown_start_x_loc = all_data_end_x_loc - parseFloat(range_to_show.toPrecision(8))
+    }
+    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
+    } else if (shown_start_x >= max_x_scrollable) {
+      shown_start_x = min_x_scrollable
+    }
+    if (shown_end_x == null || isNaN(shown_end_x)) {
+      shown_end_x = all_data_end_x_loc
+    } else if (shown_end_x <= min_x_scrollable) {
+      shown_end_x = max_x_scrollable
+    }
+    let prepped_frames = []
+    for (let frame of frames) {
+      const frame_height = frame_width / frame.aspect_ratio
+      let shown_y_axis_index = $state(0)
+      let prepped_shared_y_axiss = []
+      for (let shared_y_axis of frame.shared_y_axiss) {
+        let y_points = []
+        let shown_datasets_in_shared_y_low_y
+        let shown_datasets_in_shared_y_high_y
+        let pre_prepped_datasets = []
+        for (let dataset of shared_y_axis.datasets) {
+          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)
+                y_points.push((item_to_add.o + item_to_add.l + item_to_add.h + item_to_add.c) / 4)
+              }
+            }
+          } 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)
+                y_points.push(item_to_add.y)
+              }
+            }
+            if (dataset?.type == "path") {
+              if (Array.isArray(dataset?.data) && dataset?.data.length > 0) {
+                d_loc = `M${(dataset?.data[0]?.x * 100).toPrecision(4)} ${(100 - dataset?.data[0]?.y * 100).toPrecision(
+                  4
+                )}`
+                for (let i = 1; i < dataset?.data.length; i++) {
+                  d_loc =
+                    d_loc +
+                    ` L${(dataset?.data[i].x * 100).toPrecision(4)} ${(100 - dataset?.data[i].y * 100).toPrecision(4)}`
+                }
+              }
+            }
+          } 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)
+                if (!isNaN(datasets[dataset?.dataset_id]?.y_min) && !isNaN(datasets[dataset?.dataset_id]?.y_max)) {
+                  y_points.push((datasets[dataset?.dataset_id]?.y_min + datasets[dataset?.dataset_id]?.y_max) / 2)
+                }
+              }
+            }
+          }
+          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,
+          })
+        }
+        y_points.sort((a, b) => a - b)
+        const midpoint = Math.floor(y_points.length / 2)
+        const lowhalf = y_points.slice(0, midpoint)
+        const highhalf = y_points.slice(midpoint)
+        const lowhalfmean = lowhalf.reduce((partial_sum, a) => partial_sum + a, 0) / lowhalf.length
+        const highhalfmean = highhalf.reduce((partial_sum, a) => partial_sum + a, 0) / highhalf.length
+        shown_datasets_in_shared_y_low_y = parseFloat((lowhalfmean * 0.9).toPrecision(6))
+        shown_datasets_in_shared_y_high_y = parseFloat((highhalfmean * 1.1).toPrecision(6))
+        const shown_y_range =
+          (shown_datasets_in_shared_y_high_y - shown_datasets_in_shared_y_low_y) /
+          (1 - shared_y_axis.top_padding_pd - shared_y_axis.bottom_padding_pd)
+        let shown_low_y = shown_datasets_in_shared_y_low_y - shared_y_axis.bottom_padding_pd * shown_y_range
+        let shown_high_y = shown_datasets_in_shared_y_high_y + shared_y_axis.top_padding_pd * 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)),
+              })
+            }
+          }
+          pre_prepped_dataset.data = normalized_datapoints_in_range_loc
+          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,
+          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
+    }
+    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 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 init(config) {
+    console.log("init_chart", config)
+    datasets = config?.datasets
+    chart_prepped = prep_chart({ ...config?.chart, shown_start_x: null, shown_end_x: null })
+  }
+
+  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_chart_hover,
+    handle_chart_hover_leave,
+    set_grid_width,
+    gen_color,
+  }
+}