base_ui/components/charts/TimeLine.vue

<template>
  <div>
    <v-chart
      :option="options"
      style="height: 500px; width: 90%"
      ref="chart"
      @click="onChartClick"
      lazy
    ></v-chart>
  </div>
</template>

<script>
import moment from "jalali-moment";
//
import { use } from "echarts/core";
import { CandlestickChart, LineChart } from "echarts/charts";
import {
  LegendComponent,
  DataZoomComponent,
  TooltipComponent,
  GridComponent,
} from "echarts/components";
import { CanvasRenderer } from "echarts/renderers";

use([
  LegendComponent,
  DataZoomComponent,
  GridComponent,
  TooltipComponent,
  CandlestickChart,
  LineChart,
  CanvasRenderer,
]);
/**
 * @vue-prop {Array} [dataChart=[]] - آرایه‌ای از داده‌های نمودار
 *
 * @vue-data {String} dates - تاریخ‌ها
 * @vue-data {String} modifiedData - داده‌های اصلاح شده
 * @vue-data {Object} options - تنظیمات نمودار
 * @vue-data {Object} options.legend - تنظیمات نمایش لجند
 * @vue-data {Array} options.legend.data - داده‌های لجند
 * @vue-data {String} options.legend.inactiveColor - رنگ غیرفعال لجند
 * @vue-data {Object} options.tooltip - تنظیمات نمایش ابزارک راهنما
 * @vue-data {String} options.tooltip.trigger - نوع راه‌اندازی ابزارک راهنما
 * @vue-data {Object} options.tooltip.axisPointer - تنظیمات نشانگر محور
 * @vue-data {Boolean} options.tooltip.axisPointer.animation - وضعیت انیمیشن نشانگر محور
 * @vue-data {String} options.tooltip.axisPointer.type - نوع نشانگر محور
 * @vue-data {Object} options.tooltip.axisPointer.lineStyle - سبک خط نشانگر محور
 * @vue-data {String} options.tooltip.axisPointer.lineStyle.color - رنگ خط نشانگر محور
 * @vue-data {Number} options.tooltip.axisPointer.lineStyle.width - عرض خط نشانگر محور
 * @vue-data {Number} options.tooltip.axisPointer.lineStyle.opacity - شفافیت خط نشانگر محور
 * @vue-data {Function} options.tooltip.formatter - تابع فرمت‌دهی ابزارک راهنما
 * @vue-data {Object} options.xAxis - تنظیمات محور افقی
 * @vue-data {String} options.xAxis.type - نوع محور افقی
 * @vue-data {Array} options.xAxis.data - داده‌های محور افقی
 * @vue-data {Object} options.xAxis.axisLine - خط محور افقی
 * @vue-data {Object} options.xAxis.axisLine.lineStyle - سبک خط محور افقی
 * @vue-data {String} options.xAxis.axisLine.lineStyle.color - رنگ خط محور افقی
 * @vue-data {Object} options.yAxis - تنظیمات محور عمودی
 * @vue-data {Boolean} options.yAxis.scale - مقیاس محور عمودی
 * @vue-data {Array} options.yAxis.data - داده‌های محور عمودی
 * @vue-data {Object} options.yAxis.axisLine - خط محور عمودی
 * @vue-data {Object} options.yAxis.axisLine.lineStyle - سبک خط محور عمودی
 * @vue-data {String} options.yAxis.axisLine.lineStyle.color - رنگ خط محور عمودی
 * @vue-data {Object} options.yAxis.splitLine - خطوط تقسیم‌کننده محور عمودی
 * @vue-data {Boolean} options.yAxis.splitLine.show - وضعیت نمایش خطوط تقسیم‌کننده محور عمودی
 * @vue-data {Object} options.grid - تنظیمات شبکه نمودار
 * @vue-data {Number} options.grid.bottom - موقعیت پایین شبکه نمودار
 * @vue-data {Object[]} options.dataZoom - تنظیمات بزرگ‌نمایی داده
 * @vue-data {Object} options.dataZoom[0] - تنظیمات بزرگ‌نمایی داده
 * @vue-data {Object} options.dataZoom[1] - تنظیمات داخلی بزرگ‌نمایی داده
 * @vue-data {Object} options.series - تنظیمات سری‌های نمودار
 * @vue-data {String} options.series[].type - نوع سری
 * @vue-data {String} options.series[].name - نام سری
 * @vue-data {Array} options.series[].data - داده‌های سری
 * @vue-data {Boolean} options.series[].smooth - وضعیت نمایش نرم نمودار
 * @vue-data {Boolean} options.series[].showSymbol - وضعیت نمایش نماد
 * @vue-data {Object} options.series[].lineStyle - سبک خط سری
 * @vue-data {Number} options.series[].lineStyle.width - عرض خط سری
 * @vue-data {Object} options.series[].itemStyle - سبک آیتم سری
 * @vue-data {String} options.series[].itemStyle.color - رنگ آیتم سری
 */

export default {
  props: {
    dataChart: {
      default() {
        return [];
      },
      type: Array,
    },
  },
  data() {
    return {
      dates: "",
      modifiedData: "",
      options: {
        legend: {
          data: ["داده"],
          inactiveColor: "#777",
        },
        tooltip: {
          trigger: "axis",
          axisPointer: {
            animation: false,
            type: "cross",
            lineStyle: {
              color: "#376df4",
              width: 2,
              opacity: 1,
            },
          },
          formatter: function (params) {
            // console.log(params)
            var dataIndex = params[1].dataIndex; // دریافت ایندکس داده
            var value = params[1].value; // دریافت مقدار داده
            return "مقدار: " + value; // نمایش مقدار داده
          },
        },

        xAxis: {
          type: "category",
          data: "",
          axisLine: { lineStyle: { color: "#8392A5" } },
        },
        yAxis: {
          scale: true,
          data: "",
          axisLine: { lineStyle: { color: "#8392A5" } },
          splitLine: { show: false },
        },
        grid: {
          bottom: 80,
          // width: "90%", // اندازه چارت
        },
        dataZoom: [
          {
            textStyle: {
              color: "#8392A5",
            },
            handleIcon:
              "path://M10.7,11.9v-1.3H9.3v1.3c-4.9,0.3-8.8,4.4-8.8,9.4c0,5,3.9,9.1,8.8,9.4v1.3h1.3v-1.3c4.9-0.3,8.8-4.4,8.8-9.4C19.5,16.3,15.6,12.2,10.7,11.9z M13.3,24.4H6.7V23h6.6V24.4z M13.3,19.6H6.7v-1.4h6.6V19.6z",
            dataBackground: {
              areaStyle: {
                color: "#8392A5",
              },
              lineStyle: {
                opacity: 0.8,
                color: "#8392A5",
              },
            },
            brushSelect: true,
          },
          {
            type: "inside",
          },
        ],
        series: [
          {
            type: "candlestick",
            name: "Day",
            data: [],

            itemStyle: {
              color: "#FD1050",
              color0: "#0CF49B",
              borderColor: "#FD1050",
              borderColor0: "#0CF49B",
            },
          },
          {
            name: "داده ",
            type: "line",
            data: "",
            smooth: true,
            showSymbol: false,
            lineStyle: {
              width: 1,
            },
          },
        ],
      },
    };
  },

  watch: {
    dataChart(navItem) {
      this.dataChartHandler(navItem);
    },
  },
  mounted() {
    moment.locale("fa");
    this.dataChartHandler(this.dataChart);
  },
  methods: {
    /**
     * پردازش داده‌های نمودار و به‌روزرسانی گزینه‌های نمودار.
     *
     * @param {Array} value - آرایه‌ای از نقاط داده. هر نقطه داده باید شامل یک تاریخ و یک مقدار عددی باشد.
     */
    dataChartHandler(value) {
      this.dates = value.map(function (item) {
        try {
          if (item[0] < 0) {
            let stringifiedItem = String(item[0]).length;
            if (stringifiedItem <= 11)
              return moment(item[0] * 1000).format("dddd jDD jMMMM jYYYY");
            else if (stringifiedItem > 11)
              return moment(item[0]).format("dddd jDD jMMMM jYYYY");
          } else {
            let stringifiedItem = String(item[0]).length;
            if (stringifiedItem <= 10)
              return moment(item[0] * 1000).format("dddd jDD jMMMM jYYYY");
            else if (stringifiedItem > 10)
              return moment(item[0]).format("dddd jDD jMMMM jYYYY");
          }
        } catch (error) {

        }
      });
      this.modifiedData = value.map(function (item) {
        return [+item[1]];
      });
      this.options.xAxis.data = this.dates;

      this.options.series[0].data = this.modifiedData;
      this.calculateMA(1, this.dataChart);
    },
    /**
     * محاسبه میانگین متحرک برای داده‌های نمودار.
     *
     * @param {number} dayCount - تعداد روزهایی که باید در محاسبه میانگین متحرک در نظر گرفته شوند.
     * @param {Array} data - آرایه‌ای از نقاط داده.
     */
    calculateMA(dayCount, data) {
      var result = [];
      for (var i = 0, len = data.length; i < len; i++) {
        if (i < dayCount) {
          result.push("-");
          continue;
        }
        var sum = 0;
        for (var j = 0; j < dayCount; j++) {
          sum += +data[i - j][1];
        }
        result.push(sum / dayCount);
      }
      this.options.series[1].data = result;
    },
    /**
     * مدیریت رویداد کلیک روی نمودار.
     *
     * @param {Object} event - شی رویداد که اطلاعات نقطه داده‌ای که روی آن کلیک شده را شامل می‌شود.
     */
    onChartClick(event) {
      var item = this.dataChart[event.dataIndex];
      const itemSelected = { category: item[0], y: item[1] };
      this.$emit("on-chart-click", itemSelected);
    },
  },
};
</script>
<style lang="scss">
.highcharts {
  height: 100%;
  .highcharts-container {
    height: 100%;
  }
}
</style>