sveltekit-ui 1.1.74 → 1.1.76

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

@@ -1,671 +0,0 @@
-import { create_button_manager } from "$lib/Components/Button/index.svelte.js"
-import { create_popover_manager } from "$lib/Components/Popover/index.svelte.js"
-import { create_dropdown_manager } from "$lib/Components/Dropdown/index.svelte.js"
-import { create_slider_manager } from "$lib/Components/Slider/index.svelte.js"
-import { create_text_input_manager } from "$lib/Components/TextInput/index.svelte.js"
-import { create_color_input_manager } from "$lib/Components/ColorInput/index.svelte.js"
-import { create_breadcrumbs_manager } from "$lib/Components/Breadcrumbs/index.svelte.js"
-import { create_unique_id, deep_copy } from "$lib/client/index.js"
-
-export function create_chart_input_manager(config) {
-  let chart_builder_popover_manager = $state(null)
-  let chart_builder_popover_button_manager = $state(null)
-  let chart_prepped = $state(null)
-  let path_breadcrumbs_manager = $state(null)
-  let datasets = $state(null)
-  let finish_button_manager = $state(null)
-
-  const dataset_base = {
-    type: null,
-    name: null,
-    dataset_id: null,
-    keys: [],
-    period_x: null,
-    colors: [],
-  }
-
-  const shared_y_axis_base = {
-    y_axis_type: null,
-    y_axis_title: null,
-    bottom_padding_pd: 0.2,
-    top_padding_pd: 0.2,
-    datasets: [JSON.parse(JSON.stringify(dataset_base))],
-  }
-
-  const frame_base = {
-    aspect_ratio: 1.25,
-    shown_y_axis_index: 0,
-    shared_y_axiss: [JSON.parse(JSON.stringify(shared_y_axis_base))],
-  }
-
-  const chart_base = {
-    id: "abcdefgh",
-    x_axis_type: "time",
-    x_axis_title: null,
-    frames: [JSON.parse(JSON.stringify(frame_base))],
-  }
-
-  const x_axis_type_options = [
-    { key: "time", name: "Time" },
-    { key: "number", name: "Number" },
-  ]
-
-  function move(array, from, to, on = 1) {
-    const copy = array.slice()
-    const removed = copy.splice(from, on)
-    copy.splice(to, 0, ...removed)
-    return copy
-  }
-
-  function shift_frame_to_back(i) {
-    const to = chart_prepped.frames.length - 1
-    chart_prepped = get_chart_prepped({
-      ...chart_prepped,
-      frames: move(chart_prepped.frames, i, to),
-    })
-  }
-
-  function remove_frame(i) {
-    console.log("remove_frame", i)
-    chart_prepped = get_chart_prepped({ ...chart_prepped, frames: chart_prepped.frames.filter((_, idx) => idx !== i) })
-  }
-
-  function add_frame() {
-    console.log("add_frame", chart_prepped?.frames, frame_base)
-    chart_prepped = get_chart_prepped({ ...chart_prepped, frames: [...chart_prepped?.frames, frame_base] })
-  }
-
-  let val = $derived.by(() => {
-    let frames = []
-    if (Array.isArray(chart_prepped?.frames)) {
-      for (let frame of chart_prepped?.frames) {
-        let shared_y_axiss = []
-        if (Array.isArray(frame?.shared_y_axiss)) {
-          for (let shared_y_axis of frame?.shared_y_axiss) {
-            let datasets = []
-            if (Array.isArray(shared_y_axis?.datasets)) {
-              for (let dataset of shared_y_axis?.datasets) {
-                datasets.push({
-                  colors: dataset?.colors,
-                  dataset_id: dataset?.dataset_id,
-                  keys: dataset?.keys,
-                  name: dataset?.name,
-                  period_x: dataset?.period_x,
-                  type: dataset?.type,
-                })
-              }
-            }
-            shared_y_axiss.push({
-              y_axis_title: shared_y_axis?.y_axis_title,
-              y_axis_type: shared_y_axis?.y_axis_type,
-              bottom_padding_pd: shared_y_axis?.bottom_padding_pd,
-              top_padding_pd: shared_y_axis?.top_padding_pd,
-              datasets: datasets,
-            })
-          }
-        }
-        frames.push({
-          shown_y_axis_index: frame?.shown_y_axis_index,
-          aspect_ratio: frame?.aspect_ratio,
-          shared_y_axiss: shared_y_axiss,
-        })
-      }
-    }
-    return {
-      id: chart_prepped?.id,
-      x_axis_type: chart_prepped?.x_axis_type,
-      x_axis_title: chart_prepped?.x_axis_title,
-      shown_start_x: chart_prepped?.shown_start_x,
-      shown_end_x: chart_prepped?.shown_end_x,
-      min_x_scrollable: chart_prepped?.min_x_scrollable,
-      max_x_scrollable: chart_prepped?.max_x_scrollable,
-      frames: frames,
-    }
-  })
-
-  function shift_shared_y_axis_to_back(i) {
-    let chart_copy = deep_copy(chart_prepped)
-    const to = chart_copy.frames[path_breadcrumbs_manager?.val?.[0]].shared_y_axiss.length - 1
-    chart_copy.frames[path_breadcrumbs_manager?.val?.[0]].shared_y_axiss = move(
-      chart_copy.frames[path_breadcrumbs_manager?.val?.[0]].shared_y_axiss,
-      i,
-      to
-    )
-    chart_prepped = get_chart_prepped(chart_copy)
-  }
-
-  function remove_shared_y_axis(i) {
-    console.log("remove_frame", i)
-    let chart_copy = deep_copy(chart_prepped)
-    chart_copy.frames[path_breadcrumbs_manager?.val?.[0]].shared_y_axiss.splice(i, 1)
-    chart_prepped = get_chart_prepped(chart_copy)
-  }
-
-  function add_shared_y_axis() {
-    console.log("add_shared_y_axis")
-    let chart_copy = deep_copy(chart_prepped)
-    chart_copy.frames[path_breadcrumbs_manager?.val?.[0]].shared_y_axiss = [
-      ...chart_copy.frames[path_breadcrumbs_manager?.val?.[0]].shared_y_axiss,
-      shared_y_axis_base,
-    ]
-    chart_prepped = get_chart_prepped(chart_copy)
-  }
-
-  const y_axis_type_options = [
-    { key: "price", name: "Price" },
-    { key: "pd", name: "Percent Decimal" },
-    { key: "number", name: "Number" },
-  ]
-
-  function shift_dataset_to_back(path) {
-    let chart_copy = deep_copy(chart_prepped)
-    const to = chart_copy.frames[path[0]].shared_y_axiss[path[1]].datasets.length - 1
-    chart_copy.frames[path[0]].shared_y_axiss[path[1]].datasets = move(
-      chart_copy.frames[path[0]].shared_y_axiss[path[1]].datasets,
-      path?.[2],
-      to
-    )
-    chart_prepped = get_chart_prepped(chart_copy)
-  }
-
-  function remove_dataset(path) {
-    console.log("remove_dataset", path)
-    let chart_copy = deep_copy(chart_prepped)
-    chart_copy.frames[path[0]].shared_y_axiss[path[1]].datasets.splice(path?.[2], 1)
-    chart_prepped = get_chart_prepped(chart_copy)
-  }
-
-  function add_dataset(path) {
-    console.log("add_dataset")
-    let chart_copy = deep_copy(chart_prepped)
-    chart_copy.frames[path[0]].shared_y_axiss[path[1]].datasets = [
-      ...chart_copy.frames[path[0]].shared_y_axiss[path[1]].datasets,
-      dataset_base,
-    ]
-    chart_prepped = get_chart_prepped(chart_copy)
-  }
-
-  const dataset_type_options = [
-    { key: "klines", name: "Klines", keys: ["x", "o", "l", "h", "c"] },
-    { key: "points", name: "Points", keys: ["x", "y"] },
-    { key: "path", name: "Path", keys: ["x", "y"] },
-    { key: "lines", name: "Lines", keys: ["m", "b", "s"] },
-  ]
-
-  const period_options = [
-    { key: 60, name: "1m" },
-    { key: 300, name: "5m" },
-    { key: 900, name: "15m" },
-    { key: 1800, name: "30m" },
-    { key: 3600, name: "1h" },
-    { key: 7200, name: "2h" },
-    { key: 14400, name: "4h" },
-    { key: 28800, name: "8h" },
-    { key: 43200, name: "12h" },
-    { key: 86400, name: "1d" },
-    { key: 604800, name: "1w" },
-  ]
-
-  function get_chart_prepped(input) {
-    const id = create_unique_id(null, 8)
-    let x_axis_type_dropdown_manager = $state(null)
-    let x_axis_title_text_input_manager = $state(null)
-    let frame_add_button_manager = $state(null)
-    x_axis_type_dropdown_manager = create_dropdown_manager({
-      label: "X Axis Type",
-      options: x_axis_type_options,
-      is_button_compressed: true,
-      val: input?.x_axis_type ?? x_axis_type_options?.[0]?.key,
-    })
-    x_axis_title_text_input_manager = create_text_input_manager({
-      label: "X Axis Title",
-      val: input?.x_axis_title,
-    })
-    frame_add_button_manager = create_button_manager({
-      type: "outlined",
-      is_compressed: true,
-      text: "Add Frame",
-      on_click: () => add_frame(),
-    })
-    let frames = []
-    if (Array.isArray(input?.frames)) {
-      for (let i = 0; i < input?.frames.length; i++) {
-        let frame_shift_to_back_button_manager = $state(null)
-        let frame_remove_button_manager = $state(null)
-        let frame_select_path_button_manager = $state(null)
-        let aspect_ratio_slider_manager = $state(null)
-        let add_shared_y_axis_button_manager = $state(null)
-        let shown_y_axis_index = $state(input.frames[i].shown_y_axis_index)
-        aspect_ratio_slider_manager = create_slider_manager({
-          label: "Aspect Ratio",
-          val: input.frames[i].aspect_ratio,
-          min: 0.75,
-          max: 5,
-          step: 0.05,
-          is_instant: true,
-        })
-        add_shared_y_axis_button_manager = create_button_manager({
-          type: "outlined",
-          is_compressed: true,
-          text: "Add Shared Y Axis",
-          on_click: () => add_shared_y_axis(),
-        })
-        frame_shift_to_back_button_manager = create_button_manager({
-          type: "outlined",
-          is_compressed: true,
-          text: "Shift To Bottom",
-          on_click: () => shift_frame_to_back(i),
-        })
-        frame_remove_button_manager = create_button_manager({
-          type: "outlined",
-          is_compressed: true,
-          text: "Remove Frame",
-          on_click: () => remove_frame(i),
-        })
-        frame_select_path_button_manager = create_button_manager({
-          type: "outlined",
-          is_compressed: true,
-          text: "Goto Frame",
-          on_click: () => path_breadcrumbs_manager.set_val([i]),
-        })
-        let shared_y_axiss = []
-        if (Array.isArray(input?.frames?.[i]?.shared_y_axiss)) {
-          for (let j = 0; j < input?.frames?.[i]?.shared_y_axiss.length; j++) {
-            let shift_to_back_button_manager = $state(null)
-            let remove_button_manager = $state(null)
-            let select_path_button_manager = $state(null)
-            let top_padding_pd_slider_manager = $state(null)
-            let bottom_padding_pd_slider_manager = $state(null)
-            let y_axis_type_dropdown_manager = $state(null)
-            let y_axis_title_text_input_manager = $state(null)
-            let add_dataset_button_manager = $state(null)
-            shift_to_back_button_manager = create_button_manager({
-              type: "outlined",
-              is_compressed: true,
-              text: "Shift To Back",
-              on_click: () => shift_shared_y_axis_to_back(i, j),
-            })
-            remove_button_manager = create_button_manager({
-              type: "outlined",
-              is_compressed: true,
-              text: "Remove Shared Y Axis",
-              on_click: () => remove_shared_y_axis(i, j),
-            })
-            select_path_button_manager = create_button_manager({
-              type: "outlined",
-              is_compressed: true,
-              text: "Goto Shared Y Axis",
-              on_click: () => path_breadcrumbs_manager?.set_val([i, j]),
-            })
-            top_padding_pd_slider_manager = create_slider_manager({
-              label: "Top Padding Percent Decimal",
-              val: input?.frames?.[i]?.shared_y_axiss?.[j].top_padding_pd,
-              min: -1,
-              max: 1,
-              step: 0.01,
-              is_instant: true,
-            })
-            bottom_padding_pd_slider_manager = create_slider_manager({
-              label: "Bottom Padding Percent Decimal",
-              val: input?.frames?.[i]?.shared_y_axiss?.[j].bottom_padding_pd,
-              min: -1,
-              max: 1,
-              step: 0.01,
-              is_instant: true,
-            })
-            y_axis_type_dropdown_manager = create_dropdown_manager({
-              label: "Y Axis Type",
-              is_button_compressed: true,
-              options: y_axis_type_options,
-              val: input?.frames?.[i]?.shared_y_axiss?.[j].y_axis_type,
-            })
-            y_axis_title_text_input_manager = create_text_input_manager({
-              label: "Y Axis Title",
-              val: input?.frames?.[i]?.shared_y_axiss?.[j].y_axis_title,
-            })
-            add_dataset_button_manager = create_button_manager({
-              type: "outlined",
-              is_compressed: true,
-              text: "Add Dataset",
-              on_click: () => add_dataset([i, j]),
-            })
-            let datasets_loc = []
-            if (Array.isArray(input?.frames?.[i]?.shared_y_axiss?.[j]?.datasets)) {
-              for (let g = 0; g < input?.frames?.[i]?.shared_y_axiss?.[j].datasets.length; g++) {
-                let name_text_input_manager = $state(null)
-                let dataset_type_dropdown_manager = $state(null)
-                let dataset_id_dropdown_manager = $state(null)
-                let dataset_period_dropdown_manager = $state(null)
-                let add_dataset_color_button_manager = $state(null)
-                name_text_input_manager = create_text_input_manager({
-                  label: "Data Title",
-                  val: input?.frames?.[i]?.shared_y_axiss?.[j]?.datasets?.[g]?.name,
-                })
-                dataset_type_dropdown_manager = create_dropdown_manager({
-                  label: "Dataset Type",
-                  is_button_compressed: true,
-                  options: dataset_type_options,
-                  val: input?.frames?.[i]?.shared_y_axiss?.[j]?.datasets?.[g]?.type,
-                })
-                dataset_id_dropdown_manager = create_dropdown_manager({
-                  label: "Dataset ID",
-                  is_button_compressed: true,
-                  options: Object.keys(datasets).map((h) => {
-                    return { key: h, name: h }
-                  }),
-                  val:
-                    input?.frames?.[i]?.shared_y_axiss?.[j]?.datasets?.[g]?.dataset_id ||
-                    (Object.keys(datasets).length > 0 ? Object.keys(datasets)?.[0] : null),
-                })
-                dataset_period_dropdown_manager = create_dropdown_manager({
-                  label: "Dataset Period",
-                  is_button_compressed: true,
-                  options: period_options,
-                  val: input?.frames?.[i]?.shared_y_axiss?.[j]?.datasets?.[g]?.period_x,
-                })
-                let colors_input = $state([])
-                if (Array.isArray(input?.frames?.[i]?.shared_y_axiss?.[j]?.datasets?.[g]?.colors)) {
-                  for (let color of input?.frames?.[i]?.shared_y_axiss?.[j]?.datasets?.[g]?.colors) {
-                    const id = create_unique_id(null, 20)
-                    let remove_button_manager = create_button_manager({
-                      type: "outlined",
-                      support_icon: "x",
-                      is_uniform: true,
-                      on_click: () => {
-                        colors_input = colors_input.filter((h) => h.id !== id)
-                      },
-                    })
-                    let color_input_manager = create_color_input_manager({ val: color })
-                    colors_input.push({
-                      id,
-                      get color_input_manager() {
-                        return color_input_manager
-                      },
-                      get remove_button_manager() {
-                        return remove_button_manager
-                      },
-                    })
-                  }
-                }
-                add_dataset_color_button_manager = create_button_manager({
-                  type: "outlined",
-                  support_icon: "plus",
-                  is_compressed: true,
-                  text: "Add Color",
-                  on_click: () => {
-                    const id = create_unique_id(null, 20)
-                    let remove_button_manager = create_button_manager({
-                      type: "outlined",
-                      support_icon: "x",
-                      is_uniform: true,
-                      on_click: () => {
-                        colors_input = colors_input.filter((h) => h.id !== id)
-                      },
-                    })
-                    let color_input_manager = create_color_input_manager({
-                      val: {
-                        l: 9,
-                        c: 9,
-                        h: 1,
-                        o: 5,
-                        is_theme_based: 1,
-                      },
-                    })
-                    colors_input.push({
-                      get color_input_manager() {
-                        return color_input_manager
-                      },
-                      get remove_button_manager() {
-                        return remove_button_manager
-                      },
-                    })
-                  },
-                })
-                let dataset_options_key_options = datasets?.[dataset_id_dropdown_manager?.val]?.data?.[0]
-                  ? Object.entries(datasets?.[dataset_id_dropdown_manager?.val]?.data?.[0]).map(([key, value]) => {
-                      return { key: key, name: key + ": (" + value + ")" }
-                    })
-                  : null
-                let dataset_keys_to_add = dataset_type_dropdown_manager?.val
-                  ? dataset_type_options.find((h) => h?.key === dataset_type_dropdown_manager?.val)?.keys
-                  : null
-                let keys_input = []
-                if (Array.isArray(dataset_keys_to_add)) {
-                  for (let key_i = 0; key_i < dataset_keys_to_add.length; key_i++) {
-                    let key_dropdown_manager = create_dropdown_manager({
-                      label: dataset_keys_to_add?.[key_i],
-                      is_button_compressed: true,
-                      options: dataset_options_key_options,
-                      val: input?.frames?.[i]?.shared_y_axiss?.[j]?.datasets?.[g]?.keys?.[key_i],
-                    })
-                    keys_input.push({
-                      get key_dropdown_manager() {
-                        return key_dropdown_manager
-                      },
-                    })
-                  }
-                }
-                let shift_to_back_button_manager = create_button_manager({
-                  type: "outlined",
-                  is_compressed: true,
-                  text: "Shift To Back",
-                  on_click: () => shift_dataset_to_back([i, j, g]),
-                })
-                let remove_button_manager = create_button_manager({
-                  type: "outlined",
-                  is_compressed: true,
-                  text: "Remove Dataset",
-                  on_click: () => remove_dataset([i, j, g]),
-                })
-                let select_path_button_manager = create_button_manager({
-                  type: "outlined",
-                  is_compressed: true,
-                  text: "Goto Dataset",
-                  on_click: () => path_breadcrumbs_manager.set_val([i, j, g]),
-                })
-                datasets_loc.push({
-                  get name() {
-                    return name_text_input_manager?.val
-                  },
-                  get type() {
-                    return dataset_type_dropdown_manager?.val
-                  },
-                  get dataset_id() {
-                    return dataset_id_dropdown_manager?.val
-                  },
-                  get period_x() {
-                    return dataset_period_dropdown_manager?.val
-                  },
-                  get colors() {
-                    return colors_input.map((h) => h?.color_input_manager?.val)
-                  },
-                  get colors_input() {
-                    return colors_input
-                  },
-                  get keys() {
-                    return keys_input.map((h) => h?.key_dropdown_manager?.val)
-                  },
-                  get keys_input() {
-                    return keys_input
-                  },
-                  get name_text_input_manager() {
-                    return name_text_input_manager
-                  },
-                  get dataset_type_dropdown_manager() {
-                    return dataset_type_dropdown_manager
-                  },
-                  get dataset_id_dropdown_manager() {
-                    return dataset_id_dropdown_manager
-                  },
-                  get dataset_period_dropdown_manager() {
-                    return dataset_period_dropdown_manager
-                  },
-                  get add_dataset_color_button_manager() {
-                    return add_dataset_color_button_manager
-                  },
-                  get shift_to_back_button_manager() {
-                    return shift_to_back_button_manager
-                  },
-                  get remove_button_manager() {
-                    return remove_button_manager
-                  },
-                  get select_path_button_manager() {
-                    return select_path_button_manager
-                  },
-                })
-              }
-            }
-            shared_y_axiss.push({
-              get top_padding_pd_slider_manager() {
-                return top_padding_pd_slider_manager
-              },
-              get bottom_padding_pd_slider_manager() {
-                return bottom_padding_pd_slider_manager
-              },
-              get y_axis_type_dropdown_manager() {
-                return y_axis_type_dropdown_manager
-              },
-              get y_axis_title_text_input_manager() {
-                return y_axis_title_text_input_manager
-              },
-              get add_dataset_button_manager() {
-                return add_dataset_button_manager
-              },
-              get top_padding_pd() {
-                return top_padding_pd_slider_manager?.val
-              },
-              get bottom_padding_pd() {
-                return bottom_padding_pd_slider_manager?.val
-              },
-              get y_axis_title() {
-                return y_axis_title_text_input_manager?.val
-              },
-              get y_axis_type() {
-                return y_axis_type_dropdown_manager?.val
-              },
-              get datasets() {
-                return datasets_loc
-              },
-              get shift_to_back_button_manager() {
-                return shift_to_back_button_manager
-              },
-              get remove_button_manager() {
-                return remove_button_manager
-              },
-              get select_path_button_manager() {
-                return select_path_button_manager
-              },
-            })
-          }
-        }
-        frames.push({
-          get frame_shift_to_back_button_manager() {
-            return frame_shift_to_back_button_manager
-          },
-          get frame_remove_button_manager() {
-            return frame_remove_button_manager
-          },
-          get frame_select_path_button_manager() {
-            return frame_select_path_button_manager
-          },
-          get add_shared_y_axis_button_manager() {
-            return add_shared_y_axis_button_manager
-          },
-          get aspect_ratio_slider_manager() {
-            return aspect_ratio_slider_manager
-          },
-          get aspect_ratio() {
-            return aspect_ratio_slider_manager?.val
-          },
-          get shared_y_axiss() {
-            return shared_y_axiss
-          },
-          get shown_y_axis_index() {
-            return shown_y_axis_index
-          },
-        })
-      }
-    }
-    return {
-      get id() {
-        return id
-      },
-      get x_axis_type() {
-        return x_axis_type_dropdown_manager?.val
-      },
-      get x_axis_title() {
-        return x_axis_title_text_input_manager?.val
-      },
-      get x_axis_type_dropdown_manager() {
-        return x_axis_type_dropdown_manager
-      },
-      get x_axis_title_text_input_manager() {
-        return x_axis_title_text_input_manager
-      },
-      get frame_add_button_manager() {
-        return frame_add_button_manager
-      },
-      get frames() {
-        return frames
-      },
-    }
-  }
-
-  function init(config) {
-    datasets = config?.datasets
-    chart_builder_popover_manager = create_popover_manager({
-      type: "center",
-      min_width: 280,
-      target_width: 600,
-      min_height: 280,
-      target_height: 500,
-    })
-    chart_builder_popover_button_manager = create_button_manager({
-      type: "primary",
-      text: "Chart Builder",
-      is_compressed: true,
-      popover_target: () => `popover_${chart_builder_popover_manager?.id}`,
-    })
-    path_breadcrumbs_manager = create_breadcrumbs_manager()
-    finish_button_manager = create_button_manager({
-      text: "Finish",
-      h: 10,
-      l: 1,
-      c: 1,
-      on_click: () => {
-        console.log("finish", val)
-        if (typeof config?.on_finish == "function") {
-          config?.on_finish(val)
-        }
-        chart_builder_popover_manager.close()
-      },
-    })
-    chart_prepped = get_chart_prepped(config?.chart)
-    setTimeout(() => {
-      console.log("chart_prepped_init", deep_copy(chart_prepped))
-    })
-  }
-
-  init(config)
-
-  return {
-    get val() {
-      return val
-    },
-    get chart_builder_popover_manager() {
-      return chart_builder_popover_manager
-    },
-    get chart_builder_popover_button_manager() {
-      return chart_builder_popover_button_manager
-    },
-    get path_breadcrumbs_manager() {
-      return path_breadcrumbs_manager
-    },
-    get chart_prepped() {
-      return chart_prepped
-    },
-    get finish_button_manager() {
-      return finish_button_manager
-    },
-  }
-}