Как сделать проект в котором будет окошко, а внутри график, внутри этого окошка нужно будет перемещаться перетягиванием мышкой?

В проекте должно быть окошко, а в нем может быть график любой высоты и ширины. На этот график можно будет нажимать и там возможно будет что-то происходить. По этому окошку можно будет перемещаться кликом и перетягиванием мышкой, еще чтобы можно было масштабировать это окошко.

Нужна помощь с разработкой подобного проекта. Я пишу его на vue3, было бы хорошо, чтобы вы подсказали хорошую библиотеку для отрисовки графиков с данными из апи.

Сейчас у меня есть такой код. Шахматную доску отрисовал, чтобы было понятнее когда передвигается это окошко, но пока не работает.

<template>
  <div class="main-container">
    <div class="main" ref="mainContainer" @mousedown="startDrag">
      <div
        class="line"
        v-for="(line, line_index) in 30"
        :key="line"
        :class="{ second_line: (line_index + 1) % 2 === 0 }"
      >
        <div
          class="block"
          v-for="(block, block_index) in 30"
          :key="block"
          :class="{ second_block: (block_index + 1) % 2 === 0 }"
        ></div>
      </div>
    </div>
  </div>
</template>

<script>

export default {
  name: "App",
  methods: {
    startDrag(e) {
      e.preventDefault();
      const container = this.$refs.mainContainer;
      const startX = e.clientX;
      const startY = e.clientY;
      const startScrollLeft = container.scrollLeft;
      const startScrollTop = container.scrollTop;
      const onMouseMove = (event) => {
        const dx = event.clientX - startX;
        const dy = event.clientY - startY;
        container.scrollLeft = startScrollLeft - dx;
        container.scrollTop = startScrollTop - dy;
      };
      const onMouseUp = () => {
        document.removeEventListener("mousemove", onMouseMove);
        document.removeEventListener("mouseup", onMouseUp);
      };
      document.addEventListener("mousemove", onMouseMove);
      document.addEventListener("mouseup", onMouseUp);
    },
  },
};
</script>

<style lang="sass">
#app
  width: 100vw
  height: 100vh
  padding: 20px
  overflow: hidden
  .main-container
    border: 1px solid red
    width: 100%
    height: 100%
    position: relative
    overflow: hidden
    .main
      width: 3000px
      height: 3000px
      position: absolute
      display: flex
      flex-direction: column
      cursor: grab
      .line
        display: flex
        height: 100%
        width: 100%
        background: #BBBABA
      .second_line
        background: #0D1F61
        .second_block
          background: #BBBABA
      .block
        display: flex
        height: 100%
        width: 100%
      .second_block
        background: #0D1F61
</style>

примерно так я представляю как должно выглядеть это приложение.

Опыта в разработке подобных приложений у меня крайне мало, нужна помощь опытных разрабов хоть чем-то.