DailyAndHourlyChart

애플리케이션 현황 리뉴얼 화면에서 사용되는 일간/시간당 차트입니다.

Types

export type ChartType = 'bar' | 'column';

export interface ChartItem {
    name: string;
    count: number;
    time: number;
}

export interface TabItem {
    label: string;
    value: ChartType;
}

export interface MetricItem {
    label: string;
    value: string;
}

// DailyAndHourlyChart.vue
const props = defineProps<{
    width: number;
    height: number;
    type: ChartType;
    items: ChartItem[];
    hourlyItemMap: Record<number, ChartItem[]>;
    selectedDate: number;
    selectedHour: number;
    nameWidth: number;
    tooltipFormatter?: (item: ChartItem, type: ChartType) => string;
}>();

Sample Code

<template>
    <daily-and-hourly-chart
        :width="300"
        :height="600"
        :tab-items="VIEW_TYPES"
        :metric-items="METRIC_TYPES"
        :items="DAILY_CHART_DATA1"
        :hourly-item-map="hourlyMap"
        v-model:selected-metric="selectedMetric1"
        v-model:selected-date="selectedDate1"
        v-model:selected-hour="selectedHour1"
        @tab="onChangeTab"
        @select="onChangeSelect1"
    ></daily-and-hourly-chart>
    <daily-and-hourly-chart
        :width="300"
        :height="600"
        :tab-items="[]"
        :metric-items="METRIC_TYPES.slice(3)"
        :items="DAILY_CHART_DATA2"
        :hourly-item-map="{}"
        large
        v-model:selected-metric="selectedMetric2"
        v-model:selected-date="selectedDate2"
        v-model:selected-hour="selectedHour2"
        @tab="onChangeTab"
        @select="onChangeSelect2"
    ></daily-and-hourly-chart>
</template>

<script setup lang="ts">
import type { ChartType } from '@jennifersoft/apm-components';
import {
    VIEW_TYPES,
    METRIC_TYPES,
    DAILY_CHART_DATA1,
    DAILY_CHART_DATA2,
    getHourlyDataMap,
} from './data/service-chart';
import { MxDef } from '@jennifersoft/apm-apis';
import { ref, computed } from 'vue';
import { DailyAndHourlyChart } from '@jennifersoft/apm-components';

const selectedMetric1 = ref<string>(`daily:${MxDef.service_count}`);
const selectedDate1 = ref<number>(DAILY_CHART_DATA1[0].time);
const selectedHour1 = ref<number>(-1);
const selectedMetric2 = ref<string>(`hourly:${MxDef.service_count}`);
const selectedDate2 = ref<number>(DAILY_CHART_DATA2[0].time);
const selectedHour2 = ref<number>(-1);
const hourlyMap = computed(() => getHourlyDataMap());

const onChangeTab = (tab: ChartType) => {
    console.log('onChangeTab:', tab);
};
const onChangeSelect1 = (time: number, hour: number, duplicate: boolean) => {
    if (duplicate) {
        selectedDate1.value = -1;
        selectedHour1.value = -1;
    }
    console.log('onChangeSelect1:', time, hour, duplicate);
};
const onChangeSelect2 = (time: number, hour: number, duplicate: boolean) => {
    console.log('onChangeSelect2:', time, hour, duplicate);
};

const tooltipFormatter = (item: ChartItem, type: ChartType) => {
    const date = new Date(item.time);
    const month = String(date.getMonth() + 1).padStart(2, '0');
    const day = String(date.getDate()).padStart(2, '0');
    const hours = String(date.getHours()).padStart(2, '0');

    return `${month}/${day} ${hours}`;
};
</script>

Demo

일일 호출건수

시간당 호출건수