sveltekit-ui 1.0.0

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

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