UNPKG

vue3-calendar-heatmap

Version:

A lightweight calendar heatmap Vue 3 component built on SVG, inspired by julienr114's vue-calendar-heatmap ans github's contribution calendar graph

462 lines (461 loc) 21.1 kB
import { PropType } from 'vue'; import { Locale, Month, TooltipFormatter, Value } from '../components/Heatmap'; declare const _sfc_main: import("vue").DefineComponent<{ endDate: { required: true; }; max: { type: NumberConstructor; }; rangeColor: { type: PropType<string[]>; }; values: { type: PropType<Value[]>; required: true; }; locale: { type: PropType<Partial<Locale>>; }; tooltip: { type: BooleanConstructor; default: boolean; }; tooltipUnit: { type: StringConstructor; default: string; }; tooltipFormatter: { type: PropType<TooltipFormatter>; }; vertical: { type: BooleanConstructor; default: boolean; }; noDataText: { type: (BooleanConstructor | StringConstructor)[]; default: null; }; round: { type: NumberConstructor; default: number; }; darkMode: BooleanConstructor; }, { SQUARE_BORDER_SIZE: number; SQUARE_SIZE: number; LEFT_SECTION_WIDTH: number; RIGHT_SECTION_WIDTH: number; TOP_SECTION_HEIGHT: number; BOTTOM_SECTION_HEIGHT: number; svg: import("vue").Ref<SVGElement | null>; heatmap: import("vue").Ref<{ startDate: { toString: () => string; toDateString: () => string; toTimeString: () => string; toLocaleString: { (): string; (locales?: string | string[] | undefined, options?: Intl.DateTimeFormatOptions | undefined): string; (locales?: Intl.LocalesArgument, options?: Intl.DateTimeFormatOptions | undefined): string; }; toLocaleDateString: { (): string; (locales?: string | string[] | undefined, options?: Intl.DateTimeFormatOptions | undefined): string; (locales?: Intl.LocalesArgument, options?: Intl.DateTimeFormatOptions | undefined): string; }; toLocaleTimeString: { (): string; (locales?: string | string[] | undefined, options?: Intl.DateTimeFormatOptions | undefined): string; (locales?: Intl.LocalesArgument, options?: Intl.DateTimeFormatOptions | undefined): string; }; valueOf: () => number; getTime: () => number; getFullYear: () => number; getUTCFullYear: () => number; getMonth: () => number; getUTCMonth: () => number; getDate: () => number; getUTCDate: () => number; getDay: () => number; getUTCDay: () => number; getHours: () => number; getUTCHours: () => number; getMinutes: () => number; getUTCMinutes: () => number; getSeconds: () => number; getUTCSeconds: () => number; getMilliseconds: () => number; getUTCMilliseconds: () => number; getTimezoneOffset: () => number; setTime: (time: number) => number; setMilliseconds: (ms: number) => number; setUTCMilliseconds: (ms: number) => number; setSeconds: (sec: number, ms?: number | undefined) => number; setUTCSeconds: (sec: number, ms?: number | undefined) => number; setMinutes: (min: number, sec?: number | undefined, ms?: number | undefined) => number; setUTCMinutes: (min: number, sec?: number | undefined, ms?: number | undefined) => number; setHours: (hours: number, min?: number | undefined, sec?: number | undefined, ms?: number | undefined) => number; setUTCHours: (hours: number, min?: number | undefined, sec?: number | undefined, ms?: number | undefined) => number; setDate: (date: number) => number; setUTCDate: (date: number) => number; setMonth: (month: number, date?: number | undefined) => number; setUTCMonth: (month: number, date?: number | undefined) => number; setFullYear: (year: number, month?: number | undefined, date?: number | undefined) => number; setUTCFullYear: (year: number, month?: number | undefined, date?: number | undefined) => number; toUTCString: () => string; toISOString: () => string; toJSON: (key?: any) => string; [Symbol.toPrimitive]: { (hint: "default"): string; (hint: "string"): string; (hint: "number"): number; (hint: string): string | number; }; }; endDate: { toString: () => string; toDateString: () => string; toTimeString: () => string; toLocaleString: { (): string; (locales?: string | string[] | undefined, options?: Intl.DateTimeFormatOptions | undefined): string; (locales?: Intl.LocalesArgument, options?: Intl.DateTimeFormatOptions | undefined): string; }; toLocaleDateString: { (): string; (locales?: string | string[] | undefined, options?: Intl.DateTimeFormatOptions | undefined): string; (locales?: Intl.LocalesArgument, options?: Intl.DateTimeFormatOptions | undefined): string; }; toLocaleTimeString: { (): string; (locales?: string | string[] | undefined, options?: Intl.DateTimeFormatOptions | undefined): string; (locales?: Intl.LocalesArgument, options?: Intl.DateTimeFormatOptions | undefined): string; }; valueOf: () => number; getTime: () => number; getFullYear: () => number; getUTCFullYear: () => number; getMonth: () => number; getUTCMonth: () => number; getDate: () => number; getUTCDate: () => number; getDay: () => number; getUTCDay: () => number; getHours: () => number; getUTCHours: () => number; getMinutes: () => number; getUTCMinutes: () => number; getSeconds: () => number; getUTCSeconds: () => number; getMilliseconds: () => number; getUTCMilliseconds: () => number; getTimezoneOffset: () => number; setTime: (time: number) => number; setMilliseconds: (ms: number) => number; setUTCMilliseconds: (ms: number) => number; setSeconds: (sec: number, ms?: number | undefined) => number; setUTCSeconds: (sec: number, ms?: number | undefined) => number; setMinutes: (min: number, sec?: number | undefined, ms?: number | undefined) => number; setUTCMinutes: (min: number, sec?: number | undefined, ms?: number | undefined) => number; setHours: (hours: number, min?: number | undefined, sec?: number | undefined, ms?: number | undefined) => number; setUTCHours: (hours: number, min?: number | undefined, sec?: number | undefined, ms?: number | undefined) => number; setDate: (date: number) => number; setUTCDate: (date: number) => number; setMonth: (month: number, date?: number | undefined) => number; setUTCMonth: (month: number, date?: number | undefined) => number; setFullYear: (year: number, month?: number | undefined, date?: number | undefined) => number; setUTCFullYear: (year: number, month?: number | undefined, date?: number | undefined) => number; toUTCString: () => string; toISOString: () => string; toJSON: (key?: any) => string; [Symbol.toPrimitive]: { (hint: "default"): string; (hint: "string"): string; (hint: "number"): number; (hint: string): string | number; }; }; max: number; values: { date: string | { toString: () => string; toDateString: () => string; toTimeString: () => string; toLocaleString: { (): string; (locales?: string | string[] | undefined, options?: Intl.DateTimeFormatOptions | undefined): string; (locales?: Intl.LocalesArgument, options?: Intl.DateTimeFormatOptions | undefined): string; }; toLocaleDateString: { (): string; (locales?: string | string[] | undefined, options?: Intl.DateTimeFormatOptions | undefined): string; (locales?: Intl.LocalesArgument, options?: Intl.DateTimeFormatOptions | undefined): string; }; toLocaleTimeString: { (): string; (locales?: string | string[] | undefined, options?: Intl.DateTimeFormatOptions | undefined): string; (locales?: Intl.LocalesArgument, options?: Intl.DateTimeFormatOptions | undefined): string; }; valueOf: () => number; getTime: () => number; getFullYear: () => number; getUTCFullYear: () => number; getMonth: () => number; getUTCMonth: () => number; getDate: () => number; getUTCDate: () => number; getDay: () => number; getUTCDay: () => number; getHours: () => number; getUTCHours: () => number; getMinutes: () => number; getUTCMinutes: () => number; getSeconds: () => number; getUTCSeconds: () => number; getMilliseconds: () => number; getUTCMilliseconds: () => number; getTimezoneOffset: () => number; setTime: (time: number) => number; setMilliseconds: (ms: number) => number; setUTCMilliseconds: (ms: number) => number; setSeconds: (sec: number, ms?: number | undefined) => number; setUTCSeconds: (sec: number, ms?: number | undefined) => number; setMinutes: (min: number, sec?: number | undefined, ms?: number | undefined) => number; setUTCMinutes: (min: number, sec?: number | undefined, ms?: number | undefined) => number; setHours: (hours: number, min?: number | undefined, sec?: number | undefined, ms?: number | undefined) => number; setUTCHours: (hours: number, min?: number | undefined, sec?: number | undefined, ms?: number | undefined) => number; setDate: (date: number) => number; setUTCDate: (date: number) => number; setMonth: (month: number, date?: number | undefined) => number; setUTCMonth: (month: number, date?: number | undefined) => number; setFullYear: (year: number, month?: number | undefined, date?: number | undefined) => number; setUTCFullYear: (year: number, month?: number | undefined, date?: number | undefined) => number; toUTCString: () => string; toISOString: () => string; toJSON: (key?: any) => string; [Symbol.toPrimitive]: { (hint: "default"): string; (hint: "string"): string; (hint: "number"): number; (hint: string): string | number; }; }; count: number; }[]; readonly activities: import('../components/Heatmap').Activities; readonly weekCount: number; readonly calendar: { date: { toString: () => string; toDateString: () => string; toTimeString: () => string; toLocaleString: { (): string; (locales?: string | string[] | undefined, options?: Intl.DateTimeFormatOptions | undefined): string; (locales?: Intl.LocalesArgument, options?: Intl.DateTimeFormatOptions | undefined): string; }; toLocaleDateString: { (): string; (locales?: string | string[] | undefined, options?: Intl.DateTimeFormatOptions | undefined): string; (locales?: Intl.LocalesArgument, options?: Intl.DateTimeFormatOptions | undefined): string; }; toLocaleTimeString: { (): string; (locales?: string | string[] | undefined, options?: Intl.DateTimeFormatOptions | undefined): string; (locales?: Intl.LocalesArgument, options?: Intl.DateTimeFormatOptions | undefined): string; }; valueOf: () => number; getTime: () => number; getFullYear: () => number; getUTCFullYear: () => number; getMonth: () => number; getUTCMonth: () => number; getDate: () => number; getUTCDate: () => number; getDay: () => number; getUTCDay: () => number; getHours: () => number; getUTCHours: () => number; getMinutes: () => number; getUTCMinutes: () => number; getSeconds: () => number; getUTCSeconds: () => number; getMilliseconds: () => number; getUTCMilliseconds: () => number; getTimezoneOffset: () => number; setTime: (time: number) => number; setMilliseconds: (ms: number) => number; setUTCMilliseconds: (ms: number) => number; setSeconds: (sec: number, ms?: number | undefined) => number; setUTCSeconds: (sec: number, ms?: number | undefined) => number; setMinutes: (min: number, sec?: number | undefined, ms?: number | undefined) => number; setUTCMinutes: (min: number, sec?: number | undefined, ms?: number | undefined) => number; setHours: (hours: number, min?: number | undefined, sec?: number | undefined, ms?: number | undefined) => number; setUTCHours: (hours: number, min?: number | undefined, sec?: number | undefined, ms?: number | undefined) => number; setDate: (date: number) => number; setUTCDate: (date: number) => number; setMonth: (month: number, date?: number | undefined) => number; setUTCMonth: (month: number, date?: number | undefined) => number; setFullYear: (year: number, month?: number | undefined, date?: number | undefined) => number; setUTCFullYear: (year: number, month?: number | undefined, date?: number | undefined) => number; toUTCString: () => string; toISOString: () => string; toJSON: (key?: any) => string; [Symbol.toPrimitive]: { (hint: "default"): string; (hint: "string"): string; (hint: "number"): number; (hint: string): string | number; }; }; count?: number | undefined; colorIndex: number; }[][]; readonly firstFullWeekOfMonths: { value: number; index: number; }[]; getColorIndex: (count?: number | undefined) => number; getCountEmptyDaysAtStart: () => number; getCountEmptyDaysAtEnd: () => number; getDaysCount: () => number; }>; now: import("vue").Ref<{ toString: () => string; toDateString: () => string; toTimeString: () => string; toLocaleString: { (): string; (locales?: string | string[] | undefined, options?: Intl.DateTimeFormatOptions | undefined): string; (locales?: Intl.LocalesArgument, options?: Intl.DateTimeFormatOptions | undefined): string; }; toLocaleDateString: { (): string; (locales?: string | string[] | undefined, options?: Intl.DateTimeFormatOptions | undefined): string; (locales?: Intl.LocalesArgument, options?: Intl.DateTimeFormatOptions | undefined): string; }; toLocaleTimeString: { (): string; (locales?: string | string[] | undefined, options?: Intl.DateTimeFormatOptions | undefined): string; (locales?: Intl.LocalesArgument, options?: Intl.DateTimeFormatOptions | undefined): string; }; valueOf: () => number; getTime: () => number; getFullYear: () => number; getUTCFullYear: () => number; getMonth: () => number; getUTCMonth: () => number; getDate: () => number; getUTCDate: () => number; getDay: () => number; getUTCDay: () => number; getHours: () => number; getUTCHours: () => number; getMinutes: () => number; getUTCMinutes: () => number; getSeconds: () => number; getUTCSeconds: () => number; getMilliseconds: () => number; getUTCMilliseconds: () => number; getTimezoneOffset: () => number; setTime: (time: number) => number; setMilliseconds: (ms: number) => number; setUTCMilliseconds: (ms: number) => number; setSeconds: (sec: number, ms?: number | undefined) => number; setUTCSeconds: (sec: number, ms?: number | undefined) => number; setMinutes: (min: number, sec?: number | undefined, ms?: number | undefined) => number; setUTCMinutes: (min: number, sec?: number | undefined, ms?: number | undefined) => number; setHours: (hours: number, min?: number | undefined, sec?: number | undefined, ms?: number | undefined) => number; setUTCHours: (hours: number, min?: number | undefined, sec?: number | undefined, ms?: number | undefined) => number; setDate: (date: number) => number; setUTCDate: (date: number) => number; setMonth: (month: number, date?: number | undefined) => number; setUTCMonth: (month: number, date?: number | undefined) => number; setFullYear: (year: number, month?: number | undefined, date?: number | undefined) => number; setUTCFullYear: (year: number, month?: number | undefined, date?: number | undefined) => number; toUTCString: () => string; toISOString: () => string; toJSON: (key?: any) => string; [Symbol.toPrimitive]: { (hint: "default"): string; (hint: "string"): string; (hint: "number"): number; (hint: string): string | number; }; }>; width: import("vue").Ref<number>; height: import("vue").Ref<number>; viewbox: import("vue").Ref<string>; daysLabelWrapperTransform: import("vue").Ref<string>; monthsLabelWrapperTransform: import("vue").Ref<string>; yearWrapperTransform: string; legendWrapperTransform: import("vue").Ref<string>; lo: import("vue").Ref<{ months: string[]; days: string[]; on: string; less: string; more: string; }>; legendViewbox: import("vue").Ref<string>; curRangeColor: import("vue").Ref<string[]>; getWeekPosition: (index: number) => string; getDayPosition: (index: number) => string; getMonthLabelPosition: (month: Month) => { x: number; y: number; }; initTippyLazy: (e: MouseEvent) => void; }, unknown, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, "dayClick"[], "dayClick", import("vue").VNodeProps & import("vue").AllowedComponentProps & import("vue").ComponentCustomProps, Readonly<import("vue").ExtractPropTypes<{ endDate: { required: true; }; max: { type: NumberConstructor; }; rangeColor: { type: PropType<string[]>; }; values: { type: PropType<Value[]>; required: true; }; locale: { type: PropType<Partial<Locale>>; }; tooltip: { type: BooleanConstructor; default: boolean; }; tooltipUnit: { type: StringConstructor; default: string; }; tooltipFormatter: { type: PropType<TooltipFormatter>; }; vertical: { type: BooleanConstructor; default: boolean; }; noDataText: { type: (BooleanConstructor | StringConstructor)[]; default: null; }; round: { type: NumberConstructor; default: number; }; darkMode: BooleanConstructor; }>> & { onDayClick?: ((...args: any[]) => any) | undefined; }, { tooltip: boolean; tooltipUnit: string; vertical: boolean; noDataText: string | boolean; round: number; darkMode: boolean; }>; export default _sfc_main;