search_ui/components/search/view/ChartContent.vue

<template>
  <div
    class="main-chart"
    :class="{ 'jahat-chart': this.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 repoApi from "~/apis/repoApi";
import chartType from "~/json/search/json/chart.json";
import { mapState } from "pinia";
// import TermContent from "~/components/search/view/TermContent.vue";
// import NeshaContent from "~/components/search/view/NeshaContent.vue";
// import SearchContent from "~/components/search/view/SearchContent.vue";
// import QanonContent from "~/components/search/view/QanonContent.vue";
// import MajlesQanonContent from "~/components/search/view/MajlesQanonContent.vue";
// import MajlesQavaninContent from "~/components/search/view/MajlesQavaninContent.vue";
// import MajlesSectionContent from "~/components/search/view/MajlesSectionContent.vue";
// import MajlesMashruhContent from "~/components/search/view/MajlesMashruhContent.vue";
// import EmamainContent from "~/components/search/view/EmamainContent.vue";
// import MyContent from "~/components/search/MyContent.vue";
// import MajlesQaSectionContent from "~/components/search/view/MajlesQaSectionContent.vue";
// import EntityContent from "~/components/search/view/EntityContent.vue";

/**
 * @vue-prop {String|null} [addressBarUrl=null] - آدرس بار
 * @vue-prop {String} [selectedCategory=""] - دسته‌بندی انتخاب شده
 * @vue-prop {Array} [dataChart=[]] - داده‌های نمودار
 * @vue-prop {Array} [dataTreeMap=[]] - داده‌های درخت نقشه
 * @vue-prop {String} [chartComponentName=""] - نام کامپوننت نمودار
 *
 * @vue-data {Object} [PieOptions={ radius: "60%", selectedMode: "single" }] - گزینه‌های نمودار دایره‌ای
 * @vue-data {Number} [reRender=1] - شمارنده برای رندر مجدد
 * @vue-data {String} [controlRequest=""] - درخواست کنترل
 * @vue-data {Number} [listType=1] - نوع لیست
 * @vue-data {Boolean} [hiden=false] - وضعیت پنهان شدن
 * @vue-data {Boolean} [showBodyDescription=false] - نمایش توضیحات بدنه
 * @vue-data {String} [name=""] - نام
 * @vue-data {String} [y=""] - مقدار محور y
 * @vue-data {Array} [chartAnswer=[]] - پاسخ نمودار
 * @vue-data {String} [listSelectedPoint=""] - نقطه انتخاب شده در لیست
 * @vue-data {Array} [listEntity=[]] - موجودیت‌های لیست
 * @vue-data {String} [selectedPoint=""] - نقطه انتخاب شده
 * @vue-data {Object|undefined} [httpService=undefined] - سرویس HTTP
 * @vue-data {Array} [chartTypeList=chartType] - لیست انواع نمودار
 * @vue-data {Number} [Status=2] - وضعیت
 * @vue-data {String} [filterUrl=""] - آدرس فیلتر
 * @vue-data {String} [navigationList=""] - لیست ناوبری
 * @vue-data {String} [navigationItemTitle=""] - عنوان آیتم ناوبری
 * @vue-data {String} [navigationItem=""] - آیتم ناوبری
 * @vue-data {String} [chartName=chartType[0].chartName] - نام نمودار
 * @vue-data {Object} [pagination={ page: 1, pages: 0, total: 0, offset: 0, limit: 10 }] - اطلاعات صفحه‌بندی
 * @vue-data {Boolean} [showList=false] - نمایش لیست
 *
 * @vue-computed {String} repoBaseUrl - آدرس پایه مخزن از محیط
 * @vue-computed {String} bodyclass - کلاس بدنه بر اساس نام کامپوننت نمودار
 * @vue-computed {Boolean} showNavigateItems - نمایش آیتم‌های ناوبری بر اساس نام کامپوننت نمودار
 * @vue-computed {String} contentComponentName - نام کامپوننت محتوا بر اساس وضعیت جستجو
 */

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",
    ]),
    // 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 =
        repoApi.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"),
  },
};
</script>
<style scoped lang="scss"></style>