Vue3 + ApexCharts.js + Toggl でGitHub風の草はやす

// 日付処理用
import dayjs from "dayjs";

const generateData = (togglData: Toggl) => {
  const formattedData: Heatmap[] = [];
  const _dayNames: string[] = [];
  const _weeks: string[] = [];

  // toggl apiのデータから作業した曜日と週を取得
  togglData.data.forEach((togglItem: TogglData) => {
    const dayName: string = dayjs(togglItem.start).format("dddd");
    if (!_dayNames.includes(dayName)) _dayNames.push(dayName);

    const week: string = dayjs(togglItem.start)
      .startOf("week")
      .format("YYYY/MM/DD");
    if (!_weeks.includes(week)) _weeks.push(week);
  });

  // 曜日と週を見やすい順序に並び替え
  const sortedDays = [
    "Monday",
    "Tuesday",
    "Wednesday",
    "Thursday",
    "Friday",
    "Saturday",
    "Sunday",
  ];
  _dayNames.sort((a: string, b: string) => {
    return sortedDays.indexOf(b) - sortedDays.indexOf(a);
  });
  _weeks.sort();

  // 作業した曜日ごとのデータを作成
  _dayNames.forEach((element) => {
    formattedData.push({ name: element, data: [] });
  });

  // 作業した週ごとのデータを作成
  _weeks.forEach((element) => {
    formattedData.forEach((heatmapItem) => {
      heatmapItem.data.push({
        x: element,
        y: 0,
      });
    });
  });

  // formattedData内の該当する曜日・週のデータにtogglデータをコピー
  togglData.data.forEach((togglItem: TogglData) => {
    const dayName: string = dayjs(togglItem.start).format("dddd");
    const week: string = dayjs(togglItem.start)
      .startOf("week")
      .format("YYYY/MM/DD");
    const workingTime = Math.floor(togglItem.dur / 1000 / 60);

    formattedData.forEach((heatmapItem: Heatmap) => {
      if (heatmapItem.name === dayName) {
        heatmapItem.data.forEach((heatmapDataItem: HeatmapData) => {
          if (heatmapDataItem.x === week) {
            heatmapDataItem.y += workingTime;
          }
        });
      }
    });
  });
  return formattedData;
};

import { defineStore } from "pinia";
// グラフ作成用
import axios, { AxiosResponse, AxiosError } from "axios";

export const useStore = defineStore("main", {
  state: () => {
    return {
      togglTags: [] as Tag[],
      togglData: {} as Toggl,
    };
  },
  getters: {
    series: (state): ApexAxisChartSeries => {
      if (!state.togglData.data || state.togglData.data.length === 0) return [];
      return generateData(state.togglData);
    },
    perPage: (state) => state.togglData.per_page,
    totalCount: (state) => state.togglData.total_count,
  },
  actions: {
    // タグの取得
    getTogglTagInfo() {
      const workspace_id = import.meta.env.VITE_TOGGL_WORKSPACE_ID;
      axios
        .get(
          `https://api.track.toggl.com/api/v8/workspaces/${workspace_id}/tags`,
          {
            ~~timeoutやauthのパラメータを記載~~
          }
        )
        .then((res: AxiosResponse<Tag[]>) => {
          this.togglTags.length = 0;
          console.log("get tag success log: ", res.data);
          this.togglTags.push(...res.data);
        })
        .catch((error: AxiosError<{ error: string }>) => {
          console.log("get tag error log: ", error.message);
        });
    },
    // 作業時間の取得
    getTogglData(params: {}) {
      axios
        .get("https://api.track.toggl.com/reports/api/v2/details", {
          ~~timeoutやauth, getのパラメータを記載~~
        })
        .then((res: AxiosResponse<Toggl>) => {
          console.log("get data success log: ", res.data);
          this.togglData = { ...res.data };
        })
        .catch((error: AxiosError<{ error: string }>) => {
          console.log("get data error log: ", error.message);
        });
    },
  },
});

interface ImportMetaEnv {
  readonly VITE_TOGGL_API_TOKEN: string;
  readonly VITE_TOGGL_WORKSPACE_ID: number;
}

interface ImportMeta {
  readonly env: ImportMetaEnv;
}

Access to XMLHttpRequest at 'https://api.track.toggl.com/api/v8/workspaces/xxxxx/tags' from origin '[CloudFrontのURL]' has been blocked by CORS policy: Response to preflight request doesn't pass access control check