sveltekit-ui 1.1.17 → 1.1.19

package/dist/Components/ChartInput/DisplayNav/Klines/index.svelte

@@ -0,0 +1,150 @@
+<script>
+  let { data, shown_start_x, shown_end_x, shown_low_y, shown_high_y, period_x } = $props()
+
+  let kline_width_pd = $state(null)
+  let shown_normalized_klines = $state([])
+
+  if (data && shown_start_x && shown_end_x && shown_low_y && shown_high_y && period_x) {
+    update_shown()
+  }
+
+  // could import this from create_chart_manager
+  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 update_shown() {
+    const shown_x_range = shown_end_x - shown_start_x
+    const shown_y_range = shown_high_y - shown_low_y
+    kline_width_pd = (period_x * 0.8) / shown_x_range
+    let normalized_klines_in_range_loc = []
+    console.log("shown_low_y", shown_low_y, shown_high_y)
+    for (let kline of data) {
+      if (shown_start_x <= kline.x && kline.x < shown_end_x) {
+        if (kline.h > shown_high_y) {
+          console.log("too high", kline)
+        }
+        if (kline.l < shown_low_y) {
+          console.log("too low", kline)
+        }
+        const norm_o = (kline.o - shown_low_y) / shown_y_range
+        const norm_h = (kline.h - shown_low_y) / shown_y_range
+        const norm_l = (kline.l - shown_low_y) / shown_y_range
+        const norm_c = (kline.c - shown_low_y) / shown_y_range
+        const norm_details = get_kline_details(norm_o, norm_h, norm_l, norm_c)
+        normalized_klines_in_range_loc = [
+          ...normalized_klines_in_range_loc,
+          {
+            x: (kline.x - shown_start_x) / shown_x_range,
+            o: norm_o,
+            h: norm_h,
+            l: norm_l,
+            c: norm_c,
+            ...norm_details,
+          },
+        ]
+      }
+    }
+    shown_normalized_klines = normalized_klines_in_range_loc
+    console.log("shown_normalized_klines", shown_normalized_klines)
+  }
+</script>
+
+{#each shown_normalized_klines as kline}
+  <div
+    class="kline_container"
+    style="
+    height: {kline.kline_height * 100}%; 
+    width: {kline_width_pd * 100}%;
+    left: {kline.x * 100}%; 
+    bottom: {kline.l * 100}%;"
+  >
+    <div class="kline">
+      <div
+        class="kline_part wick top_wick"
+        class:inc={kline.is_closed_higher}
+        class:dec={!kline.is_closed_higher}
+        style="
+          height: {kline.kline_top_wick_height_pd * 100}%; 
+          top: 0;
+        "
+      ></div>
+      <div
+        class="kline_part box"
+        class:inc={kline.is_closed_higher}
+        class:dec={!kline.is_closed_higher}
+        style="min-height: 2px; top: {kline.kline_top_wick_height_pd *
+          100}%; bottom: {kline.kline_bottom_wick_height_pd * 100}%;"
+      ></div>
+      <div
+        class="kline_part wick bottom_wick"
+        class:inc={kline.is_closed_higher}
+        class:dec={!kline.is_closed_higher}
+        style="height: {kline.kline_bottom_wick_height_pd * 100}%; bottom: 0;"
+      ></div>
+    </div>
+  </div>
+{/each}
+
+<style>
+  .kline_container {
+    position: absolute;
+  }
+  .kline {
+    position: relative;
+    height: 100%;
+  }
+  .kline_part {
+    position: absolute;
+  }
+  .wick {
+    left: 50%;
+    transform: translateX(-50%);
+    width: 2px;
+  }
+  .top_wick {
+    border-top-left-radius: 1px;
+    border-top-right-radius: 1px;
+  }
+  .bottom_wick {
+    border-bottom-left-radius: 1px;
+    border-bottom-right-radius: 1px;
+  }
+  .box {
+    width: 100%;
+    border-radius: 0.2rem;
+  }
+  .inc {
+    background: var(--green-buy);
+  }
+  .dec {
+    background: var(--red-sell);
+  }
+  /* .dec_box {
+    border: 1px solid var(--red-sell);
+    box-sizing: border-box;
+  } */
+</style>

package/dist/Components/ChartInput/DisplayNav/Lines/index.svelte

@@ -0,0 +1,45 @@
+<script>
+  let { data, shown_start_x, shown_end_x, shown_low_y, shown_high_y } = $props()
+
+  if (data && shown_start_x && shown_end_x && shown_low_y && shown_high_y) {
+    prep_lines()
+  }
+
+  let svg_lines = $state([])
+  function prep_lines() {
+    console.log("linedata", data)
+    const shown_x_range = shown_end_x - shown_start_x
+    const shown_y_range = shown_high_y - shown_low_y
+    let svg_lines_loc = []
+    for (let t of data) {
+      const y1 = t.m * shown_start_x + t.b
+      const y2 = t.m * shown_end_x + t.b
+      const norm_y1 = (y1 - shown_low_y) / shown_y_range
+      const norm_y2 = (y2 - shown_low_y) / shown_y_range
+      svg_lines_loc = [
+        ...svg_lines_loc,
+        {
+          x1: 0,
+          y1: 1 - norm_y1,
+          x2: 1,
+          y2: 1 - norm_y2,
+          // score: t.score,
+          // cs: Math.floor(t.score * 255)
+        },
+      ]
+    }
+    svg_lines = svg_lines_loc
+    console.log("svg_lines", svg_lines)
+  }
+</script>
+
+<div class="lines">
+  <svg width="100%" height="100%" viewBox="0 0 100 100" preserveAspectRatio="none">
+    {#each svg_lines as svg_line}
+      <path
+        d="M{svg_line.x1 * 100} {svg_line.y1 * 100} L{svg_line.x2 * 100} {svg_line.y2 * 100}"
+        style="stroke-width:.2;stroke:rgb(240,240,240)"
+      />
+    {/each}
+  </svg>
+</div>

package/dist/Components/ChartInput/DisplayNav/index.svelte

@@ -0,0 +1,297 @@
+<script>
+  // import Lines from "./Lines/index.svelte"
+  import Klines from "./Klines/index.svelte"
+
+  let { manager } = $props()
+
+  const y_axis_width = 1
+  const x_axis_height = 0.5
+
+  let is_hovered = $state(false)
+
+  function calc_z_height(shared_y_axis_i, dataset_i) {
+    let z_steps = 0
+    for (let i = 0; i < shared_y_axis_i; i++) {
+      z_steps +=
+        manager?.chart_prepped.frames?.[manager?.path_breadcrumbs_manager?.val?.[0]]?.shared_y_axiss[i].datasets
+          .length + 2
+    }
+    z_steps += dataset_i
+    return z_steps * 2
+  }
+
+  let hovered_y_axis = $state(-1)
+
+  let hovered_dataset_index = $state(-1)
+
+  function set_hovered_dataset_index(input) {
+    hovered_dataset_index = input
+  }
+</script>
+
+<div class="container">
+  {#if manager?.path_breadcrumbs_manager?.val?.length >= 0}
+    <div class="item">
+      <div class="grid" style="--y_axis_width: {y_axis_width}rem; --x_axis_height: {x_axis_height}rem;">
+        {#if manager?.chart_prepped && manager?.chart_prepped.frames && manager?.chart_prepped.frames.length > 0}
+          {#each manager?.chart_prepped.frames as frame, i}
+            {#each frame.shared_y_axiss as shared_y_axis}
+              <div
+                role="button"
+                tabindex="0"
+                class="part_container"
+                style="grid-area: {1 + i} / 1 / {2 + i} / 2; width: 100%; aspect-ratio: {frame?.aspect_ratio};"
+                onpointerenter={() => (is_hovered = true)}
+                onpointerleave={() => (is_hovered = false)}
+                onclick={() => manager?.path_breadcrumbs_manager.set_val([i])}
+                onkeypress={() => manager?.path_breadcrumbs_manager.set_val([i])}
+              >
+                <div
+                  class="part_inner base_tint"
+                  class:hover_tint={is_hovered ||
+                    (manager?.path_breadcrumbs_manager?.val &&
+                      manager?.path_breadcrumbs_manager?.val.length > 0 &&
+                      manager?.path_breadcrumbs_manager?.val?.[0] === i)}
+                >
+                  {#each shared_y_axis.datasets as dataset}
+                    {#if dataset.type === "klines"}
+                      <!-- <Klines /> -->
+                      klines
+                    {:else if dataset.type === "lines"}
+                      <!-- <LinesDataset /> -->
+                      lines
+                    {/if}
+                  {/each}
+                </div>
+              </div>
+              <div
+                role="button"
+                tabindex="0"
+                onpointerenter={() => (is_hovered = true)}
+                onpointerleave={() => (is_hovered = false)}
+                onclick={() =>
+                  manager?.path_breadcrumbs_manager.set_val([
+                    manager?.path_breadcrumbs_manager?.val?.[0],
+                    manager?.path_breadcrumbs_manager?.val?.[1],
+                    i,
+                  ])}
+                onkeypress={() =>
+                  manager?.path_breadcrumbs_manager.set_val([
+                    manager?.path_breadcrumbs_manager?.val?.[0],
+                    manager?.path_breadcrumbs_manager?.val?.[1],
+                    i,
+                  ])}
+                class="part_container"
+                style="grid-area: {1 + i} / 2 / {2 + i} / 3;"
+              >
+                <div
+                  class="part_inner base_tint"
+                  class:hover_tint={is_hovered ||
+                    (manager?.path_breadcrumbs_manager?.val &&
+                      manager?.path_breadcrumbs_manager?.val.length > 0 &&
+                      manager?.path_breadcrumbs_manager?.val?.[0] === i)}
+                ></div>
+              </div>
+            {/each}
+          {/each}
+          <div
+            class="x_axis"
+            style="grid-area: {manager?.chart_prepped.frames.length + 1} / 1 / {manager?.chart_prepped.frames.length +
+              2} / 2; height: {x_axis_height}rem;"
+          ></div>
+        {/if}
+      </div>
+    </div>
+  {/if}
+  {#if manager?.path_breadcrumbs_manager?.val.length >= 1 && manager?.chart_prepped?.frames[manager?.path_breadcrumbs_manager?.val[0]]}
+    <div class="item">
+      <div class="scene_frame">
+        <div class="frame_container_frame">
+          {#if Array.isArray(manager?.chart_prepped.frames?.[manager?.path_breadcrumbs_manager?.val?.[0]]?.shared_y_axiss)}
+            {#each manager?.chart_prepped.frames?.[manager?.path_breadcrumbs_manager?.val?.[0]]?.shared_y_axiss as shared_y_axis, shared_y_axis_i}
+              <div
+                role="button"
+                tabindex="0"
+                class="cards_container"
+                onpointerenter={() => (hovered_y_axis = shared_y_axis_i)}
+                onpointerleave={() => (hovered_y_axis = -1)}
+                onclick={() =>
+                  manager?.path_breadcrumbs_manager.set_val([
+                    manager?.path_breadcrumbs_manager?.val?.[0],
+                    shared_y_axis_i,
+                  ])}
+                onkeypress={() =>
+                  manager?.path_breadcrumbs_manager.set_val([
+                    manager?.path_breadcrumbs_manager?.val?.[0],
+                    shared_y_axis_i,
+                  ])}
+              >
+                {#each shared_y_axis.datasets as dataset, dataset_i}
+                  <div class="card_base" style="transform: translateZ({calc_z_height(shared_y_axis_i, dataset_i)}rem);">
+                    <div
+                      class="base_tint part_inner"
+                      class:hover_tint={hovered_y_axis === shared_y_axis_i ||
+                        (manager?.path_breadcrumbs_manager?.val &&
+                          manager?.path_breadcrumbs_manager?.val.length > 1 &&
+                          manager?.path_breadcrumbs_manager?.val?.[1] === shared_y_axis_i)}
+                      style="aspect-ratio: {manager?.chart_prepped?.frames[manager?.path_breadcrumbs_manager?.val?.[0]]
+                        ?.aspect_ratio}; min-width: calc(100% - {y_axis_width}rem);"
+                    >
+                      {#if dataset.type === "klines"}
+                        klines
+                      {:else if dataset.type === "lines"}
+                        lines
+                      {:else}
+                        other
+                      {/if}
+                    </div>
+                    <div
+                      class="y_axis part_inner"
+                      class:base_tint={dataset_i === 0}
+                      class:hover_tint={dataset_i === 0 &&
+                        (hovered_y_axis === shared_y_axis_i ||
+                          (manager?.path_breadcrumbs_manager?.val &&
+                            manager?.path_breadcrumbs_manager?.val.length > 1 &&
+                            manager?.path_breadcrumbs_manager?.val?.[1] === shared_y_axis_i))}
+                      style="min-width: {y_axis_width}rem; max-width: {y_axis_width}rem;"
+                    ></div>
+                  </div>
+                {/each}
+              </div>
+            {/each}
+          {/if}
+        </div>
+      </div>
+    </div>
+  {/if}
+  {#if manager?.path_breadcrumbs_manager?.val.length >= 2 && manager?.chart_prepped?.frames[manager?.path_breadcrumbs_manager?.val?.[0]]}
+    <div class="item">
+      <div class="scene">
+        <div class="frame_container">
+          <div class="cards_container">
+            {#if Array.isArray(manager?.chart_prepped?.frames?.[manager?.path_breadcrumbs_manager?.val?.[0]]?.shared_y_axiss?.[manager?.path_breadcrumbs_manager?.val?.[1]]?.datasets)}
+              {#each manager?.chart_prepped?.frames[manager?.path_breadcrumbs_manager?.val?.[0]].shared_y_axiss[manager?.path_breadcrumbs_manager?.val[1]].datasets as dataset, i}
+                <div
+                  role="button"
+                  tabindex="0"
+                  class="card_base"
+                  style="transform: translateZ({i * 3}rem) translateY({i * 3}rem);"
+                  onpointerenter={() => set_hovered_dataset_index(i)}
+                  onpointerleave={() => set_hovered_dataset_index(-1)}
+                  onclick={() =>
+                    manager?.path_breadcrumbs_manager.set_val([
+                      manager?.path_breadcrumbs_manager?.val?.[0],
+                      manager?.path_breadcrumbs_manager?.val?.[1],
+                      i,
+                    ])}
+                  onkeypress={() =>
+                    manager?.path_breadcrumbs_manager.set_val([
+                      manager?.path_breadcrumbs_manager?.val?.[0],
+                      manager?.path_breadcrumbs_manager?.val?.[1],
+                      i,
+                    ])}
+                >
+                  <div
+                    class="base_tint part_inner"
+                    class:hover_tint={hovered_dataset_index === i ||
+                      (manager?.path_breadcrumbs_manager?.val.length === 3 &&
+                        i === manager?.path_breadcrumbs_manager?.val?.[2])}
+                    style="aspect-ratio: {manager?.chart_prepped?.frames[manager?.path_breadcrumbs_manager?.val?.[0]]
+                      ?.aspect_ratio}; min-width: calc(100% - {y_axis_width}rem);"
+                  >
+                    {#if dataset.type === "klines"}
+                      klines
+                    {:else if dataset.type === "lines"}
+                      lines
+                    {:else}
+                      other
+                    {/if}
+                  </div>
+                  <div
+                    class="y_axis part_inner"
+                    class:base_tint={i === 0}
+                    style="min-width: {y_axis_width}rem; max-width: {y_axis_width}rem;"
+                  ></div>
+                </div>
+              {/each}
+            {/if}
+          </div>
+        </div>
+      </div>
+    </div>
+  {/if}
+</div>
+
+<style>
+  .container {
+    display: flex;
+  }
+  .item {
+    width: 12rem;
+    margin: 1rem;
+  }
+  .scene {
+    min-width: 100%;
+    min-height: 20rem;
+    border: 1px solid #ccc;
+    perspective: 14rem;
+    cursor: pointer;
+  }
+  .frame_container {
+    transform-style: preserve-3d;
+    transform: rotate3d(-1, -0.2, 0, 30deg);
+    transition: transform 1s;
+    /* min-height: 10rem; */
+    display: block;
+  }
+  .cards_container {
+    position: relative;
+    transform-style: preserve-3d;
+    transition: transform 1s;
+  }
+  .card_base {
+    position: absolute;
+    left: 10%;
+    right: 10%;
+    display: flex;
+    flex: 1;
+  }
+  .part_inner {
+    display: flex;
+    flex: 1;
+    margin: 0.1rem;
+    border-radius: 0.1rem;
+  }
+  .base_tint {
+    background: #cccccc50;
+  }
+  .hover_tint {
+    background: #614dff50;
+  }
+  .grid {
+    display: grid;
+    grid-template-columns: auto var(--y_axis_width);
+    grid-template-rows: auto;
+  }
+  .x_axis {
+    margin: 0.1rem;
+    border-radius: 0.1rem;
+    background: #cccccc50;
+  }
+  .part_container {
+    display: flex;
+  }
+  .scene_frame {
+    min-width: 100%;
+    min-height: 20rem;
+    border: 1px solid #ccc;
+    perspective: 140rem;
+  }
+  .frame_container_frame {
+    transform-style: preserve-3d;
+    transform: rotate3d(-1, -0.2, 0, 40deg);
+    transition: transform 1s;
+    /* min-height: 10rem; */
+    display: block;
+  }
+</style>

package/dist/Components/ChartInput/EditPanel/index.svelte

@@ -0,0 +1,155 @@
+<script>
+  import Dropdown from "../../Dropdown/index.svelte"
+  import TextInput from "../../TextInput/index.svelte"
+  import ColorInput from "../../ColorInput/index.svelte"
+  import Button from "../../Button/index.svelte"
+  import Slider from "../../Slider/index.svelte"
+
+  let { manager } = $props()
+</script>
+
+{#if Array.isArray(manager?.path_breadcrumbs_manager?.val)}
+  {#if manager?.path_breadcrumbs_manager?.val.length === 0 && manager?.chart_prepped}
+    <h2>Chart</h2>
+    <p>{manager?.chart_prepped?.id}</p>
+    <Dropdown manager={manager?.chart_prepped?.x_axis_type_dropdown_manager} />
+    <TextInput manager={manager?.chart_prepped?.x_axis_title_text_input_manager} />
+    {#if Array.isArray(manager?.chart_prepped?.frames)}
+      {#each manager?.chart_prepped?.frames as frame, i}
+        <div class="frame_container">
+          <p>frame: {i}</p>
+          <Button manager={frame?.frame_shift_to_back_button_manager} />
+          <Button manager={frame?.frame_remove_button_manager} />
+          <Button manager={frame?.frame_select_path_button_manager} />
+        </div>
+      {/each}
+    {/if}
+    <Button manager={manager?.chart_prepped?.frame_add_button_manager} />
+  {:else if manager?.path_breadcrumbs_manager?.val.length === 1 && manager?.chart_prepped?.frames[manager?.path_breadcrumbs_manager?.val[0]]}
+    <h2>Frame</h2>
+    <Slider
+      manager={manager?.chart_prepped.frames[manager?.path_breadcrumbs_manager?.val[0]]
+        ?.chart_frame_aspect_ratio_slider_manager}
+    />
+    <h3>Shared Y Axiss</h3>
+    {#if Array.isArray(manager?.chart_prepped?.frames?.[manager?.path_breadcrumbs_manager?.val?.[0]]?.shared_y_axiss)}
+      {#each manager?.chart_prepped.frames[manager?.path_breadcrumbs_manager?.val[0]].shared_y_axiss as shared_y_axis, i}
+        <div class="sub_parts_container">
+          <p>shared_y_axis: {i}</p>
+          <Button manager={shared_y_axis?.shift_to_back_button_manager} />
+          <Button manager={shared_y_axis?.remove_button_manager} />
+          <Button manager={shared_y_axis?.select_path_button_manager} />
+        </div>
+      {/each}
+    {/if}
+    <Button
+      manager={manager?.chart_prepped.frames[manager?.path_breadcrumbs_manager?.val[0]]
+        ?.add_shared_y_axis_button_manager}
+    />
+  {:else if manager?.path_breadcrumbs_manager?.val.length === 2 && manager?.chart_prepped?.frames[manager?.path_breadcrumbs_manager?.val[0]]?.shared_y_axiss[manager?.path_breadcrumbs_manager?.val[1]]}
+    <h2>Shared Y Axis</h2>
+    <Slider
+      manager={manager?.chart_prepped?.frames[manager?.path_breadcrumbs_manager?.val[0]]?.shared_y_axiss[
+        manager?.path_breadcrumbs_manager?.val[1]
+      ]?.top_padding_pd_slider_manager}
+    />
+    <Slider
+      manager={manager?.chart_prepped?.frames[manager?.path_breadcrumbs_manager?.val[0]]?.shared_y_axiss[
+        manager?.path_breadcrumbs_manager?.val[1]
+      ]?.bottom_padding_pd_slider_manager}
+    />
+    <Dropdown
+      manager={manager?.chart_prepped?.frames[manager?.path_breadcrumbs_manager?.val[0]]?.shared_y_axiss[
+        manager?.path_breadcrumbs_manager?.val[1]
+      ]?.y_axis_type_dropdown_manager}
+    />
+    <TextInput
+      manager={manager?.chart_prepped?.frames[manager?.path_breadcrumbs_manager?.val[0]]?.shared_y_axiss[
+        manager?.path_breadcrumbs_manager?.val[1]
+      ]?.y_axis_title_text_input_manager}
+    />
+    <Button
+      manager={manager?.chart_prepped?.frames[manager?.path_breadcrumbs_manager?.val[0]]?.shared_y_axiss[
+        manager?.path_breadcrumbs_manager?.val[1]
+      ]?.add_dataset_button_manager}
+    />
+    {#if Array.isArray(manager?.chart_prepped?.frames?.[manager?.path_breadcrumbs_manager?.val?.[0]]?.shared_y_axiss?.[manager?.path_breadcrumbs_manager?.val[1]].datasets)}
+      {#each manager?.chart_prepped?.frames?.[manager?.path_breadcrumbs_manager?.val?.[0]]?.shared_y_axiss?.[manager?.path_breadcrumbs_manager?.val[1]].datasets as dataset, i}
+        <div class="sub_parts_container">
+          <p>Dataset {i}</p>
+          <Button manager={dataset?.shift_to_back_button_manager} />
+          <Button manager={dataset?.remove_button_manager} />
+          <Button manager={dataset?.select_path_button_manager} />
+        </div>
+      {/each}
+    {/if}
+  {:else if manager?.path_breadcrumbs_manager?.val.length === 3 && manager?.chart_prepped?.frames[manager?.path_breadcrumbs_manager?.val[0]]?.shared_y_axiss[manager?.path_breadcrumbs_manager?.val[1]]?.datasets[manager?.path_breadcrumbs_manager?.val[2]]}
+    <h2>Dataset</h2>
+    <TextInput
+      manager={manager?.chart_prepped?.frames[manager?.path_breadcrumbs_manager?.val[0]]?.shared_y_axiss[
+        manager?.path_breadcrumbs_manager?.val[1]
+      ]?.datasets[manager?.path_breadcrumbs_manager?.val[2]]?.name_text_input_manager}
+    />
+    <Dropdown
+      manager={manager?.chart_prepped?.frames[manager?.path_breadcrumbs_manager?.val[0]]?.shared_y_axiss[
+        manager?.path_breadcrumbs_manager?.val[1]
+      ]?.datasets[manager?.path_breadcrumbs_manager?.val[2]]?.dataset_type_dropdown_manager}
+    />
+    <Dropdown
+      manager={manager?.chart_prepped?.frames[manager?.path_breadcrumbs_manager?.val[0]]?.shared_y_axiss[
+        manager?.path_breadcrumbs_manager?.val[1]
+      ]?.datasets[manager?.path_breadcrumbs_manager?.val[2]]?.dataset_id_dropdown_manager}
+    />
+    <p class="label">Dataset Colors</p>
+    {#if Array.isArray(manager?.chart_prepped?.frames[manager?.path_breadcrumbs_manager?.val[0]]?.shared_y_axiss[manager?.path_breadcrumbs_manager?.val[1]]?.datasets[manager?.path_breadcrumbs_manager?.val[2]]?.colors) && manager?.chart_prepped?.frames[manager?.path_breadcrumbs_manager?.val[0]]?.shared_y_axiss[manager?.path_breadcrumbs_manager?.val[1]]?.datasets[manager?.path_breadcrumbs_manager?.val[2]]?.colors.length > 0}
+      {#each manager?.chart_prepped?.frames[manager?.path_breadcrumbs_manager?.val[0]]?.shared_y_axiss[manager?.path_breadcrumbs_manager?.val[1]]?.datasets[manager?.path_breadcrumbs_manager?.val[2]]?.colors_input as color_input}
+        <div style="display: flex; gap: 1rem;">
+          <Button manager={color_input?.remove_button_manager} />
+          <ColorInput manager={color_input?.color_input_manager} />
+        </div>
+      {/each}
+    {:else}
+      <p>No Colors</p>
+    {/if}
+    <Button
+      manager={manager?.chart_prepped?.frames[manager?.path_breadcrumbs_manager?.val[0]]?.shared_y_axiss[
+        manager?.path_breadcrumbs_manager?.val[1]
+      ]?.datasets[manager?.path_breadcrumbs_manager?.val[2]]?.add_dataset_color_button_manager}
+    />
+    {#if Array.isArray(manager?.chart_prepped?.frames[manager?.path_breadcrumbs_manager?.val[0]]?.shared_y_axiss[manager?.path_breadcrumbs_manager?.val[1]]?.datasets[manager?.path_breadcrumbs_manager?.val[2]]?.keys_input) && manager?.chart_prepped?.frames[manager?.path_breadcrumbs_manager?.val[0]]?.shared_y_axiss[manager?.path_breadcrumbs_manager?.val[1]]?.datasets[manager?.path_breadcrumbs_manager?.val[2]]?.keys_input.length > 0 && manager?.chart_prepped?.frames[manager?.path_breadcrumbs_manager?.val[0]]?.shared_y_axiss[manager?.path_breadcrumbs_manager?.val[1]]?.datasets[manager?.path_breadcrumbs_manager?.val[2]]?.dataset_id}
+      {#if manager?.chart_prepped?.frames[manager?.path_breadcrumbs_manager?.val[0]]?.shared_y_axiss[manager?.path_breadcrumbs_manager?.val[1]]?.datasets[manager?.path_breadcrumbs_manager?.val[2]].type == "klines"}
+        <Dropdown
+          manager={manager?.chart_prepped?.frames[manager?.path_breadcrumbs_manager?.val[0]]?.shared_y_axiss[
+            manager?.path_breadcrumbs_manager?.val[1]
+          ]?.datasets[manager?.path_breadcrumbs_manager?.val[2]]?.dataset_period_dropdown_manager}
+        />
+      {/if}
+      {#each manager?.chart_prepped?.frames[manager?.path_breadcrumbs_manager?.val[0]]?.shared_y_axiss[manager?.path_breadcrumbs_manager?.val[1]]?.datasets[manager?.path_breadcrumbs_manager?.val[2]]?.keys_input as key_input}
+        <Dropdown manager={key_input?.key_dropdown_manager} />
+      {/each}
+    {/if}
+  {/if}
+{/if}
+
+<style>
+  .frame_container {
+    display: flex;
+    flex-direction: column;
+    text-align: left;
+    margin: 0.2rem;
+    border: 1px solid var(--contrast-2);
+    box-sizing: border-box;
+    border-radius: 0.5rem;
+    padding: 0.5rem;
+  }
+  .sub_parts_container {
+    display: flex;
+    flex-direction: column;
+    text-align: left;
+    margin: 0.2rem;
+    border: 1px solid var(--contrast-2);
+    box-sizing: border-box;
+    border-radius: 0.5rem;
+    padding: 0.5rem;
+  }
+</style>

package/dist/Components/ChartInput/index.svelte

@@ -0,0 +1,21 @@
+<script>
+  import Button from "../Button/index.svelte"
+  import Popover from "../Popover/index.svelte"
+  import Breadcrumbs from "../Breadcrumbs/index.svelte"
+  import DisplayNav from "./DisplayNav/index.svelte"
+  import EditPanel from "./EditPanel/index.svelte"
+
+  let { manager } = $props()
+</script>
+
+<Button manager={manager?.chart_builder_popover_button_manager} />
+<Popover manager={manager?.chart_builder_popover_manager}>
+  {#snippet content()}
+    <Breadcrumbs manager={manager?.path_breadcrumbs_manager} />
+    <DisplayNav {manager} />
+    <EditPanel {manager} />
+  {/snippet}
+  {#snippet footer()}
+    <Button manager={manager?.finish_button_manager} />
+  {/snippet}
+</Popover>