search_ui/components/search/view/ChartContent.vue

<template>
  <div
    class="main-chart"
    :class="{ 'jahat-chart': activeSystemGetter?.link == 'jahat' }"
  >
    <div class="body" :class="bodyclass">
      <div class="body-chart">
        <TimeLine
          v-if="chartComponentName == 'MyTimeLine'"
          :ref="chartComponentName"
          class="component"
          :dataChart="dataChart"
          :PieOptions="PieOptions"
          :dataTreeMap="dataTreeMap"
          @on-chart-click="categoryValue"
          @breadcrumbs="breadcrumbs"
          width="90%"
          height="500px"
        ></TimeLine>

        <TreeSimple
          v-else-if="chartComponentName == 'HiChartTreegraph'"
          :ref="chartComponentName"
          class="component"
          :dataChart="dataChart"
          :PieOptions="PieOptions"
          :dataTreeMap="dataTreeMap"
          @list="categoryValue"
          @breadcrumbs="breadcrumbs"
          width="90%"
          height="500px"
        ></TreeSimple>

        <Bar
          v-else-if="chartComponentName == 'HiChartXy'"
          :ref="chartComponentName"
          class="component"
          :dataChart="dataChart"
          :PieOptions="PieOptions"
          :dataTreeMap="dataTreeMap"
          @list="categoryValue"
          @breadcrumbs="breadcrumbs"
          width="90%"
          height="500px"
        ></Bar>

        <Pie
          v-else-if="chartComponentName == 'HiChartPie'"
          :ref="chartComponentName"
          class="component"
          :dataChart="dataChart"
          :PieOptions="PieOptions"
          :dataTreeMap="dataTreeMap"
          @list="categoryValue"
          @breadcrumbs="breadcrumbs"
          width="90%"
          height="500px"
        ></Pie>

        <TreeMap
          v-else-if="chartComponentName == 'largeTreeMapChart'"
          :ref="chartComponentName"
          class="component"
          :dataChart="dataChart"
          :PieOptions="PieOptions"
          :dataTreeMap="dataTreeMap"
          @list="categoryValue"
          @breadcrumbs="breadcrumbs"
          width="90%"
          height="500px"
        ></TreeMap>

        <Gantt
          v-else-if="chartComponentName == 'gantt'"
          class="component"
          :dataChart="dataChart"
          :PieOptions="PieOptions"
          :dataTreeMap="dataTreeMap"
          @list="categoryValue"
          @breadcrumbs="breadcrumbs"
          width="90%"
          height="500px"
        ></Gantt>
      </div>
    </div>
    <base-modal-v2
      v-if="showList"
      modalSize="modal-lg"
      modalTitle="اطلاعات نقطه انتخاب شده"
      :hasFooter="false"
      @close="closeModal"
      :showHeaderCloseButton="true"
      :showDeleteButton="false"
    >
      <slot name="body">
        <MyContent
          :key="reRender"
          :pagination="pagination"
          :viewMode="'list'"
          @changePage="changePage"
          :schemaItems="activeTabGetter?.search_content"
          :items="listEntity"
          ref="searchContent"
        >
        </MyContent>
      </slot>
    </base-modal-v2>
  </div>
</template>
<script>
// import HttpService from "~/services/httpService";
// import searchApi from "~/apis/searchApi";
import searchApi from "@search/apis/searchApi";
// import repoApi from "~/apis/repoApi";
import chartType from "@search/json/search/chart.json";
import { mapState } from "pinia";
import { useSearchStore } from "@search/stores/searchStore";
import { useCommonStore } from "~/stores/commonStore";

export default {
  props: {
    // addressBarUrl: {
    //   default: null,
    // },
    selectedCategory: {
      default: "",
    },
    dataChart: {
      default() {
        return [];
      },
    },
    activeTabGetter: {
      default() {
        return {};
      },
    },
    dataTreeMap: {
      default() {
        return [];
      },
    },
    chartComponentName: "",
  },
  // beforeMount() {
  // this.httpService = new HttpService(
  //   import.meta.env.VITE_BASE_URL + this.repoBaseUrl
  // );
  // },
  mounted() {
    if (this.activeSystemGetter?.link == "jahat") {
      this.chartName = chartType[3].chartName;
      this.chartComponentName = chartType[3].componentName;
      this.hiden = true;

      // this.getTreeChartInitialList();
    }
    // if (this.activeSystemGetter.link != "jahat") this.getNavigetion();
  },
  watch: {
    // addressBarUrl() {
    //   // this.getChartData();
    //   // this.getTreeChartInitialList();
    // },
    listSelectedPoint(newVal) {
      this.chartAnswer = newVal;
    },
  },
  data() {
    return {
      PieOptions: {
        radius: "60%",
        selectedMode: "single",
      },
      reRender: 1,
      controlRequest: "",
      listType: 1,
      hiden: false,
      showBodyDescription: false,
      name: "",
      y: "",
      chartAnswer: [],
      listSelectedPoint: "",
      listEntity: [],
      selectedPoint: "",
      // httpService: undefined,
      chartTypeList: chartType,
      Status: 2,
      filterUrl: "",
      navigationList: "",
      navigationItemTitle: "",
      navigationItem: "",
      chartName: chartType[0].chartName,
      pagination: {
        page: 1,
        pages: 0,
        total: 0,
        offset: 0, // page * per_page
        limit: 10, //per_page
      },
      showList: false,
    };
  },
  computed: {
    ...mapState(useSearchStore, [
      "searchChartSchemaGetter",
      "searchChartActiveSchemaGetter",
      "activeTabGetter",
    ]),
    ...mapState(useCommonStore, ["activeSystemGetter"]),
    // repoBaseUrl() {
    //   return import.meta.env.VITE_REPO;
    // },
    bodyclass() {
      let key = this.chartComponentName;
      if (key == "MyTimeLine") return "time-line";
      else if (key == "largeTreeMapChart") return "TreeMap";
      else if (key == "HiChartTreegraph") return "TreeSimple";
      return "another";
    },

    showNavigateItems() {
      return (
        this.chartComponentName != "MyTimeLine" &&
        this.chartComponentName != "largeTreeMapChart"
      );
    },
    contentComponentName() {
      if (this.activeTabGetter.searchContent)
        return this.activeTabGetter.searchContent;
      return "SearchContent";
    },
  },
  methods: {
    /**
     * هندلر برای دریافت اطلاعات در هر کدام از چارت ها.
     * @param {Object} event - شیء رویداد که شامل اطلاعات دسته‌بندی و مقدار است.
     */
    categoryValue(event) {
      this.openModal();

      if (this.chartComponentName == "MyTimeLine") {
        this.name = event.category;
        this.y = event.y;
        this.getChartItems(this.name, this.y);
      } else if (this.chartComponentName == "HiChartPie") {
        this.name = event.name;
        this.y = event.y;
        this.getChartItems(this.name, this.y);
      } else if (this.chartComponentName == "HiChartXy") {
        this.name = event.name;
        this.y = event.y;
        this.getChartItems(this.name, this.y);
      } else if (
        this.chartComponentName == "largeTreeMapChart" ||
        this.chartComponentName == "HiChartTreegraph"
      ) {
        this.name = event.name;
        this.y = event.y;

        this.getChartTreeItems(this.name, this.y);
      }
    },

    /**
     * دریافت داده‌های نمودار و تنظیم آنها برای نمایش در کامپوننت SearchContent.
     * @param {string} value - مقدار فیلتر.
     * @param {number} y - مقدار محور Y.
     */
    async getChartItems(value, y) {
      this.showBodyDescription = true;
      this.controlRequest = "getChartItems";
      let type = this.activeTabGetter?.key || "sanad";

      let url = searchApi.chart.items
        .replace("{{index_key}}", type)
        .replace("{{filter}}", "")
        .replace("{{offset}}", this.pagination.offset)
        .replace("{{limit}}/", this.pagination.limit);

      let field_key =
        this.chartComponentName == "MyTimeLine"
          ? "sort_date_timestamp"
          : this.selectedCategory;
      let filter = field_key + "=" + value;

      const payload = {
        filter: filter,
      };

      try {
        const { $api } = useNuxtApp();
        const res = await $api(url, {
          method: "post",
          baseURL: repoUrl(),
          body: payload,
        });

        // this.$refs.searchContent.setAnswer(
        //   res.hits.hits,
        //   res.hits.total.value,
        //   res.hits.total.relation
        // );
        this.listEntity = res.hits.hits;

        const total = res.hits.total.value;
        const pages = Math.ceil(total / this.pagination.limit);
        const pagination = {
          total: total,
          pages: pages == 0 ? 1 : pages,
        };
        this.pagination = { ...this.pagination, ...pagination };
      } catch (err) {}

      // this.httpService.postRequest(url, payload).then((res) => {
      //   this.$refs.searchContent.setAnswer(
      //     res.hits.hits,
      //     res.hits.total.value,
      //     res.hits.total.relation
      //   );
      //   const total = res.hits.total.value;
      //   const pages = Math.ceil(total / this.pagination.limit);
      //   const pagination = {
      //     total: total,
      //     pages: pages == 0 ? 1 : pages,
      //   };
      //   this.pagination = { ...this.pagination, ...pagination };
      // });
    },

    /**
     * دریافت داده‌های درخت نمودار و تنظیم آنها برای نمایش در کامپوننت EntityContent.
     * @param {string} value - مقدار فیلتر.
     * @param {number} y - مقدار محور Y.
     */
    async getChartTreeItems(value, y) {
      this.controlRequest = "getChartTreeItems";
      this.showBodyDescription = true;

      var filter = "";
      let field_key = "subject";
      filter = field_key + "=" + value;

      let url = searchApi.chart.treeItems;
      url = url.replace("{{index_key}}", this.activeTabGetter?.key);
      url = url.replace("{{filter}}", filter);
      url = url.replace("{{offset}}", this.pagination.offset);
      url = url.replace("{{limit}}", this.pagination.limit);

      try {
        const { $api } = useNuxtApp();
        const res = await $api(url, {
          baseURL: repoUrl(),
        });

        // this.$refs[this.chartComponentName].setAnswer(
        //   res.hits.hits,
        //   res.hits.total.value,
        //   res.hits.total.relation
        // );

        this.listEntity = res.hits.hits;

        const total = res.hits.total.value;
        const pages = Math.ceil(total / this.pagination.limit);
        const pagination = {
          total: total,
          pages: pages == 0 ? 1 : pages,
        };
        this.pagination = { ...this.pagination, ...pagination };
      } catch (err) {}

      // this.httpService.getRequest(url).then((res) => {
      //   // this.listEntity = res.hits.hits;

      //   this.$refs.SearchContent.setAnswer(
      //     res.hits.hits,
      //     res.hits.total.value,
      //     res.hits.total.relation
      //   );
      //   const total = res.hits.total.value;
      //   const pages = Math.ceil(total / this.pagination.limit);
      //   const pagination = {
      //     total: total,
      //     pages: pages == 0 ? 1 : pages,
      //   };
      //   this.pagination = { ...this.pagination, ...pagination };
      // });
    },

    /**
     * تغییر صفحه و بارگذاری مجدد داده‌های نمودار.
     * @param {Object} item - اطلاعات صفحه‌بندی.
     */
    changePage(item) {
      this.pagination = item;
      this.getChartItems(this.name, this.y);
    },

    /**
     * مدیریت رویداد بازگشت به سطح قبلی در نمودار بزرگ درختی.
     * @param {Object} event - شیء رویداد که شامل اطلاعات سطح و نقطه است.
     */
    breadcrumbs(event) {
      if (event.level == 0) {
        this.getTreeChartInitialList();
      } else {
        this.name = event.levelOptions.point.options.name;
        this.y = event.levelOptions.point.options.value;
        this.getChartTreeItems(this.name, this.y);
      }
    },

    /**
     * دریافت لیست اولیه برای نمودار درختی هنگام باز شدن صفحه برای اولین بار.
     */
    async getTreeChartInitialList() {
      this.controlRequest = "getTreeChartInitialList";
      this.showBodyDescription = true;
      let url =
        searchApi.entity.blist
          .replace("{{index_key}}", this.activeTabGetter.key)
          .replace("{{type}}", this.activeTabGetter.key) +
        `/${this.pagination.offset}/${this.pagination.limit}`;

      try {
        const { $api } = useNuxtApp();
        const res = await $api(url, {
          baseURL: repoUrl(),
        });

        this.listEntity = res.hits.hits;
        const total = res.hits.total.value;
        const pages = Math.ceil(total / this.pagination.limit);
        const pagination = {
          total: total,
          pages: pages == 0 ? 1 : pages,
        };
        this.pagination = { ...this.pagination, ...pagination };
      } catch (err) {}

      // this.httpService.getRequest(url).then((res) => {
      //   this.listEntity = res.hits.hits;
      //   const total = res.hits.total.value;
      //   const pages = Math.ceil(total / this.pagination.limit);
      //   const pagination = {
      //     total: total,
      //     pages: pages == 0 ? 1 : pages,
      //   };
      //   this.pagination = { ...this.pagination, ...pagination };
      // });
    },

    /**
     * فراخوانی درخواست‌های مرتبط با صفحه‌بندی.
     */
    controlRequestFromPagination() {
      if (this.controlRequest == "getChartTreeItems") {
        return this.getChartTreeItems(this.name, this.y);
      } else if (this.controlRequest == "getTreeChartInitialList") {
        return this.getTreeChartInitialList();
      }
    },

    /**
     * تغییر حد صفحه‌بندی و بارگذاری مجدد داده‌ها.
     * @param {Object} paging - اطلاعات صفحه‌بندی.
     */
    pageLimitChanged(paging) {
      this.resetPagination();
      this.pagination.limit = paging.limit;
      this.controlRequestFromPagination();
    },

    /**
     * تغییر صفحه و بارگذاری مجدد داده‌ها.
     * @param {Object} paging - اطلاعات صفحه‌بندی.
     */
    pageChanged(paging) {
      let page = paging.pageNumber - 1;
      this.pagination.offset = page * paging.limit;
      this.pagination.limit = paging.limit;
      this.pagination.page = paging.pageNumber;
      this.controlRequestFromPagination();
    },

    /**
     * تغییر مرتب‌سازی و بارگذاری مجدد داده‌ها.
     * @param {Object} sorting - اطلاعات مرتب‌سازی.
     */
    sortChanged(sorting) {
      this.pagination.page = this.pagination.offset = 0;
      this.sorting = sorting;
      this.controlRequestFromPagination();
    },

    /**
     * بازنشانی اطلاعات صفحه‌بندی.
     */
    resetPagination() {
      this.pagination = {
        pages: 0,
        total: 0,
        page: 1,
        offset: 0,
        limit: 10,
      };
    },

    /**
     * مدیریت نام نمودار.
     * @param {string} name - نام نمودار.
     * @returns {string} - نام کلید نمودار.
     */
    // handlerChartName(name) {
    //   let key = name;
    //   if (key == "MyTimeLine") return "TimeLine";
    //   else if (key == "HiChartPie") return "Pie";
    //   else if (key == "HiChartXy") return "Bar";
    //   else if (key == "HiChartTreegraph") return "TreeSimple";
    //   else if (key == "largeTreeMapChart") return "TreeMap";
    // },

    /**
     * بستن مدال.
     * @returns {Promise} - بازگشت یک وعده برای بستن مدال.
     */
    closeModal() {
      this.selectedItem = {};

      // $("#base-modal").modal({
      //   show: false,
      // });

      //  setTimeout(() => {
      this.showList = false;
      // }, 50);
    },

    /**
     * باز کردن مدال.
     * @returns {Promise} - بازگشت یک وعده برای باز کردن مدال.
     */
    openModal() {
      this.showList = true;

      //  setTimeout(() => {
      // $("#base-modal").modal({
      // backdrop: "static",
      // keyboard: false,
      // show: true,
      // });
      // }, 50);
    },
  },
  components: {
    // QanonContent,
    // MajlesQanonContent,
    // MajlesQavaninContent,
    // MajlesSectionContent,
    // MajlesMashruhContent,
    // MajlesQaSectionContent,
    // SearchContent,
    // NeshaContent,
    // EmamainContent,
    // MyContent,
    // TermContent,
    // EntityContent,
    // TreeSimple: () => import("~/components/charts/TreeSimple.vue"),
    // Bar: () => import("~/components/charts/Bar.vue"),
    // Pie: () => import("~/components/charts/Pie.vue"),
    // TreeMap: () => import("~/components/charts/TreeMap.vue"),
    // TimeLine: () => import("~/components/charts/TimeLine.vue"),
    // Gantt: () => import("~/components/charts/Gantt.vue"),

    // BaseModal: defineAsyncComponent(() =>
    //   import("~/components/global/BaseModal.vue")
    // ),
    // EntityContent: defineAsyncComponent(() =>
    //   import("~/components/search/view/EntityContent.vue")
    // ),
    TreeSimple: defineAsyncComponent(() =>
      import("~/components/charts/TreeSimple.vue")
    ),
    Bar: defineAsyncComponent(() =>
      import("~/components/charts/Bar.vue")
    ),
    Pie: defineAsyncComponent(() =>
      import("~/components/charts/Pie.vue")
    ),
    TreeMap: defineAsyncComponent(() =>
      import("~/components/charts/TreeMap.vue")
    ),
    // TimeLine: defineAsyncComponent(() =>
    //   import("~/components/charts/TimeLine.vue")
    // ),
    // Gantt: defineAsyncComponent(() =>
    //   import("~/components/charts/Gantt.vue")
    // ),
  },
};
</script>
<style scoped lang="scss"></style>