@topvisor/ui 1.0.42-date.2 → 1.0.42-dev.1

package/src/components/charts/miniCharts/miniCharts.stories.ts

@@ -0,0 +1,75 @@
+import { ref } from 'vue';
+import type { Meta, StoryObj } from '@storybook/vue3-vite';
+
+import { genArgsTypes, genOverviewStory } from '@/components/helpersStories';
+import Component from './miniCharts.vue';
+import TopMiniChart from '@/components/charts/miniChart/miniChart.vue';
+import OverviewComponent from './stories/overview.vue';
+import type { Props } from './miniCharts';
+import { propsForMiniCharts } from './stories/dummy';
+import ReadMe from './stories/README.md?raw';
+
+const argTypes = genArgsTypes(Component);
+
+const meta = {
+	component: Component,
+	tags: ['autodocs'],
+	parameters: {
+		docs: {
+			description: {
+				component: ReadMe,
+			},
+		},
+	},
+	argTypes,
+} satisfies Meta<typeof Component>;
+
+type Story = StoryObj<typeof meta>;
+
+export const Playground = {
+	args: {
+		countCharts: 3,
+	},
+	render: (args) => ({
+		components: {
+			TopMiniCharts: Component,
+			TopMiniChart: TopMiniChart,
+		},
+		setup() {
+			const item = ref<Props['modelValue']>(null);
+
+			return {
+				args,
+				propsForMiniCharts,
+				item,
+			};
+		},
+		template: `
+			<div style="width: 100%; height: 88px">
+				<TopMiniCharts
+					v-model="item"
+					:="args"
+					:countCharts="3"
+				>
+					<TopMiniChart
+						v-for="props in propsForMiniCharts"
+						:="props"
+						:hideChartInMobile="args.hideChartInMobile"
+						:activeDates="props.activeDates"
+						:dates="props.dates"
+						:keysForDyn="props.keysForDyn"
+						:values="props.values"
+						v-model="item"
+					/>
+				</TopMiniCharts>
+			</div>
+
+		`,
+	}),
+} satisfies Story;
+
+export const Overview: Story = genOverviewStory({
+	args: Playground.args,
+}, OverviewComponent);
+
+export default meta;

package/src/components/charts/miniCharts/miniCharts.ts

@@ -0,0 +1,24 @@
+import type { Item } from '@/components/charts/miniChart/types';
+
+export interface Props {
+	modelValue?: Item | null;
+
+	/**
+	 * Кол-во миниграфиков (TopMiniChart)
+	 */
+	countCharts: number;
+
+	/**
+	 * Скрывать графики на адаптиве
+	 *
+	 * - true - скрыть
+	 * - false - показать
+	 */
+	hideChartInMobile?: boolean;
+}
+
+export interface Style {
+	top: string,
+	left?: string,
+	transform?: string,
+}

package/src/components/charts/miniCharts/miniCharts.vue

@@ -0,0 +1,124 @@
+<script setup lang="ts">
+import { computed, onMounted, onUnmounted, ref, watch } from 'vue';
+import type { Props, Style } from './miniCharts';
+
+const props = defineProps<Props>();
+const model = defineModel<Props['modelValue']>();
+
+const elRef = ref<HTMLElement | null>(null);
+
+let pagesResizeObserver: ResizeObserver;
+
+/**
+ * Количество страниц
+ */
+const countPages = ref(1);
+
+/**
+ * Активная страница
+ */
+const activePage = ref(1);
+
+/**
+ * Установка количества страниц в блоке
+ */
+const setCountPages = () => {
+	countPages.value = Math.round(elRef.value!.scrollHeight / elRef.value!.clientHeight);
+};
+
+watch(countPages, () => {
+	if (countPages.value < activePage.value) {
+		activePage.value = 1;
+	}
+});
+
+watch(
+	() => props.countCharts,
+	() => setCountPages(),
+	{ flush: 'post' },
+);
+
+/**
+ * Расчет положения для подсказки
+ */
+const tooltipStyle = computed(() => {
+	if (!model.value) return {};
+
+	const box = model.value.elCol.getBoundingClientRect();
+
+	const style: Style = {
+		top: box.bottom + window.scrollY + 'px',
+	};
+
+	if (document.documentElement.clientWidth / 2 > box.right) {
+		style.left = box.right + window.scrollX + 10 + 'px';
+	} else {
+		style.left = box.left + window.scrollX - 10 + 'px';
+		style.transform = 'translate(-100%, 0)';
+	}
+
+	return style;
+});
+
+onMounted(() => {
+	/**
+	 * Функционал переключения экранов графиков
+	 */
+	pagesResizeObserver = new ResizeObserver(() => setCountPages());
+	pagesResizeObserver.observe(elRef.value!);
+
+	watch(activePage, () => {
+		const elMiniChart = elRef.value!.children[0];
+		const pageHeight = elMiniChart.clientHeight + parseInt(window.getComputedStyle(elRef.value!).getPropertyValue('row-gap'));
+		const scrollTop = pageHeight * (activePage.value - 1);
+
+		elRef.value!.scrollTo({ top: scrollTop, behavior: 'smooth' });
+	});
+});
+
+onUnmounted(() => {
+	pagesResizeObserver.disconnect();
+});
+</script>
+
+<template>
+	<div
+		class="top-miniCharts"
+		:class="{
+			['top-miniCharts']: true,
+			['scrollable']: countPages > 1,
+			['top-miniCharts_hideChartInMobile']: hideChartInMobile,
+		}"
+		ref="elRef"
+	>
+
+		<slot></slot>
+
+		<div
+			v-if="countPages > 1"
+			class="top-miniCharts_pages"
+		>
+			<span
+				v-for="n in countPages"
+				:class="{['top-active']: n === activePage}"
+				@click="activePage = n"
+			></span>
+		</div>
+
+		<Teleport to="body">
+			<div
+				v-if="model"
+				class="top-miniCharts_tooltip"
+				:style="tooltipStyle"
+			>
+				<span>{{ model.date }}</span>
+				<span>{{ model.value }}</span>
+			</div>
+		</Teleport>
+	</div>
+
+</template>
+
+<style>
+@import "./styles/miniCharts.css";
+</style>

package/src/components/charts/miniCharts/stories/README.md

@@ -0,0 +1,18 @@
+Компонент для постороения миниграфиков.
+
+Используется для обертки над несколькими миниграфиками TopMiniChart.
+
+## Описание функционала
+
+* Миниграфики (TopMiniChart) вставляются через **slot.default**.
+* Компонент (TopMiniCharts) растягивается на всю высоту внешнего блока. Максимальная ширина 1650px.
+* **props.hideChartInMobile** \- для скрытия графиков при ширине экрана < 900px необходимо указать этот параметр для обертки (TopMiniCharts) и для
+  всех миниграфиков (TopMiniChart) внутри обертки.
+* **modelValue** \- для вывода данных в tooltip при наведении курсора на колонку необходимо указать v-model для обертки (TopMiniCharts) и для всех
+  миниграфиков (TopMiniChart) внутри обертки.
+* **props.countCharts** \- кол-во миниграфиков (TopMiniCharts), обязательный параметр
+
+
+
+
+

package/src/components/charts/miniCharts/stories/dummy.ts

@@ -0,0 +1,70 @@
+import { faker } from '@faker-js/faker';
+import { dateToString } from '@/core/utils/date';
+import type { Props as MiniChartProps } from '@/components/charts/miniChart/types';
+
+/**
+ * Генерация списка дат всех проверок
+ */
+const genDates = (count = 60) => {
+	return faker.date
+		.betweens({ from: '2020-01-01', to: '2024-01-01', count })
+		.map(date => dateToString(date, false, 0));
+};
+
+/**
+ * Генерация списка значений видимости
+ */
+const genValues = (count: number, fractionDigits = 0) => {
+	const values: number[] = [];
+
+	for (let i = 0; i < count; i++) {
+		values.push(faker.number.float({ min: 0, max: 100, fractionDigits }));
+	}
+
+	return values;
+};
+
+const dates = genDates();
+const activeDates = dates.slice(-10);
+const keysForDyn = {
+	start: dates.findIndex((value, index) => activeDates.includes(dates[index])),
+	end: dates.length - 1,
+};
+
+const visibilities = genValues(dates.length, 2);
+const avgs = genValues(dates.length, 2);
+const medians = genValues(dates.length);
+
+const generalProps = {
+	dates,
+	activeDates,
+	keysForDyn,
+};
+
+/**
+ * Список объектов props для мини графиков
+ */
+const propsForMiniCharts: MiniChartProps[] = [
+	{
+		...generalProps,
+		'color': 'pink',
+		'title': 'Видимость',
+		'values': visibilities,
+		'valueSuffix': '%',
+	},
+	{
+		...generalProps,
+		'title': 'Средняя',
+		'isInvert': true,
+		'values': avgs,
+	},
+	{
+		...generalProps,
+		'color': 'orange',
+		'title': 'Медианная',
+		'isInvert': true,
+		'values': medians,
+	},
+];
+
+export { propsForMiniCharts };

package/src/components/charts/miniCharts/stories/overview.vue

@@ -0,0 +1,139 @@
+<script setup lang="ts">
+import { ref } from 'vue';
+import TopMiniChart from '@/components/charts/miniChart/miniChart.vue';
+import TopMiniCharts from '../miniCharts.vue';
+import { propsForMiniCharts } from './dummy';
+import type { Props } from '../miniCharts';
+
+defineProps<Props>();
+
+const item1 = ref(null);
+const item2 = ref(null);
+const item3 = ref(null);
+</script>
+
+<template>
+	<div>
+		<h2>Ширина внешнего блока 200px:</h2>
+
+		<h3>Выводим миниграфики на адаптиве (props.hideChartInMobile = false)</h3>
+		<div style="width: 200px; height: 88px">
+			<TopMiniCharts
+				:="$props"
+				v-model="item1"
+			>
+				<TopMiniChart
+					v-for="props in propsForMiniCharts"
+					:="props"
+					v-model="item1"
+					:activeDates="props.activeDates"
+					:dates="props.dates"
+					:keysForDyn="props.keysForDyn"
+					:values="props.values"
+				/>
+			</TopMiniCharts>
+		</div>
+
+		<h3>Скрываем миниграфики на адаптиве (props.hideChartInMobile = true)</h3>
+		<div style="width: 200px; height: 88px">
+			<TopMiniCharts
+				:="$props"
+				v-model="item1"
+				:hideChartInMobile="true"
+			>
+				<TopMiniChart
+					v-for="props in propsForMiniCharts"
+					:="props"
+					v-model="item1"
+					:activeDates="props.activeDates"
+					:dates="props.dates"
+					:keysForDyn="props.keysForDyn"
+					:values="props.values"
+					:hideChartInMobile="true"
+				/>
+			</TopMiniCharts>
+		</div>
+
+		<h2>Ширина внешнего блока 300px: </h2>
+
+		<h3>Выводим миниграфики на адаптиве (props.hideChartInMobile = false)</h3>
+		<div style="width: 300px; height: 88px">
+			<TopMiniCharts
+				:="$props"
+				v-model="item2"
+			>
+				<TopMiniChart
+					v-for="props in propsForMiniCharts"
+					:="props"
+					v-model="item2"
+					:activeDates="props.activeDates"
+					:dates="props.dates"
+					:keysForDyn="props.keysForDyn"
+					:values="props.values"
+				/>
+			</TopMiniCharts>
+		</div>
+
+		<h3>Скрываем миниграфики на адаптиве (props.hideChartInMobile = true)</h3>
+		<div style="width: 300px; height: 88px">
+			<TopMiniCharts
+				:="$props"
+				v-model="item2"
+				:hideChartInMobile="true"
+			>
+				<TopMiniChart
+					v-for="props in propsForMiniCharts"
+					:="props"
+					v-model="item2"
+					:activeDates="props.activeDates"
+					:dates="props.dates"
+					:keysForDyn="props.keysForDyn"
+					:values="props.values"
+					:hideChartInMobile="true"
+				/>
+			</TopMiniCharts>
+		</div>
+
+		<h2>Ширина внешнего блока 100%: </h2>
+
+		<h3>Выводим миниграфики на адаптиве (props.hideChartInMobile = false)</h3>
+		<div style="width: 100%; height: 88px">
+			<TopMiniCharts
+				:="$props"
+				v-model="item3"
+			>
+				<TopMiniChart
+					v-for="props in propsForMiniCharts"
+					:="props"
+					v-model="item3"
+					:activeDates="props.activeDates"
+					:dates="props.dates"
+					:keysForDyn="props.keysForDyn"
+					:values="props.values"
+				/>
+			</TopMiniCharts>
+		</div>
+
+		<h3>Скрываем миниграфики на адаптиве (props.hideChartInMobile = true)</h3>
+		<div style="width: 100%; height: 88px">
+			<TopMiniCharts
+				:="$props"
+				v-model="item3"
+				:hideChartInMobile="true"
+			>
+				<TopMiniChart
+					v-for="props in propsForMiniCharts"
+					:="props"
+					v-model="item3"
+					:activeDates="props.activeDates"
+					:dates="props.dates"
+					:keysForDyn="props.keysForDyn"
+					:values="props.values"
+					:hideChartInMobile="true"
+				/>
+			</TopMiniCharts>
+		</div>
+
+	</div>
+</template>
+

package/src/components/charts/miniCharts/styles/miniCharts.css

@@ -0,0 +1,32 @@
+.top-miniCharts { position: relative; max-width: 1650px; height: 100%; overflow: hidden; row-gap: var(--top-gap-2); display: flex; flex-wrap: wrap; flex-grow: 1; }
+
+.top-miniCharts_pages {
+	height: 100%; margin-left: -6px;
+	position: sticky; top: 0; left: calc(100% - 6px); order: -1;
+	display: flex; flex-direction: column; justify-content: center;
+}
+.top-miniCharts_pages > span { cursor: pointer; border-radius: 50%; background: var(--color-layer-primary-2); width: 6px; height: 6px; margin: 8px 0 0; }
+.top-miniCharts_pages > span:first-child { margin-top: 0; }
+.top-miniCharts_pages > span.top-active,
+.top-miniCharts_pages > span:hover { background: var(--color-text-primary); }
+
+.top-miniCharts_tooltip {
+	cursor: default;
+	box-shadow: var(--top-shadow-b);
+	border-radius: var(--top-radius-2); background: var(--content-background-color); padding: var(--top-padding-2);
+	font-size: 12px; white-space: nowrap;
+	position: absolute; top: 0; left: 0; overflow: hidden; z-index: 200000;
+	display: flex; gap: 0 var(--top-gap-2); align-items: center;
+	transition: 0.2s;
+	pointer-events: none;
+}
+.top-miniCharts_tooltip > span:first-child { color: var(--color-text-3); }
+
+@media only screen and (max-width: 900px) {
+	.top-miniCharts_hideChartInMobile {
+		border: none; background: none; width: 100%; padding: 0;
+		gap: var(--top-gap-2); flex-grow: 1; flex-wrap: nowrap; overflow: hidden;
+	}
+
+	.top-miniCharts_hideChartInMobile > .top-miniCharts_pages { display: none; }
+}

package/src/components/component.ts

@@ -0,0 +1,130 @@
+import DOM from '@/core/utils/dom';
+
+/**
+ * Базовый компонент для js компонентов, не имеет отношения к Vue
+ */
+class Component {
+
+	static componentName = 'Top';
+
+	componentName: string | undefined; // имя класса компонента
+	className: string | undefined; // имя css класса компонента
+	uid: string | undefined; // уникальный id компонента
+	el: HTMLElement | undefined; // элемент, связанный с компонентом
+	options = {}; // параметры компонента
+
+	unmountEls: HTMLElement[] = [];
+	unmountEvents: any[] = [];
+
+	// переопредлять нельзя
+	// если компонент инициирован, необходимо сразу его вернуть и выполнить reInit() вместо mount()
+	// используется init вместо constructor, так как super constructor выполняется до Object.defineProperty() параметров класса
+	init(componentName: string, el: HTMLElement, options: object): Component | void {
+		if (!el) {
+			throw componentName + ': el is undefined';
+		}
+
+		const component = Component.getComponent(el, componentName);
+
+		if (component) {
+			component.reInit(options);
+
+			return component;
+		}
+
+		this.componentName = componentName;
+		this.className = 'top' + componentName[0].toUpperCase() + componentName.substring(1);
+		this.uid = this.componentName + (Math.random() + '').replace('.', '');
+
+		this._setComponent(el);
+		this.el = el;
+		this.el.classList.add(this.className);
+		this.options = Object.assign(this.options, options);
+
+		this.mount();
+	}
+
+	// получить инициированный компонент
+	static getComponent(el: HTMLElement, componentName: string): any {
+		return DOM.storage(el, '#' + componentName);
+	}
+
+	// устанвоить компонент
+	_setComponent(el: HTMLElement) {
+		DOM.storage(el, '#' + this.componentName, this);
+	}
+
+	// функция подключения компонента
+	mount(): void {
+		throw 'Please, add method mount() to component: ' + this.componentName;
+	}
+
+	// функция отключения компонента
+	unmount(): void {
+		DOM.storage(this.el, '#' + this.componentName, null);
+
+		this.unmountEls.forEach((el) => {
+			el.remove();
+		});
+
+		this.unmountEls = [];
+
+		this.unmountEvents.forEach((eventData) => {
+			eventData.el.removeEventListener(eventData.type, eventData.listener, eventData.options);
+		});
+
+		this.unmountEvents = [];
+	}
+
+	// указание новые элементы, которые должны будут удалиться после unmount
+	registerElForUnmount(el: HTMLElement): void {
+		this.unmountEls.push(el);
+	}
+
+	// указание новые события, которые должны будут удалиться после unmount
+	addEventListenerWithUnmount(
+		el: HTMLElement | Document | Window,
+		type: keyof GlobalEventHandlersEventMap,
+		listener: (this: HTMLElement, e: Event) => any,
+		options?: any,
+	): void {
+		el.addEventListener(type, listener, options);
+
+		this.registerEventForUnmount(el, type, listener, options);
+	}
+
+	// указание новые события, которые должны будут удалиться после unmount
+	registerEventForUnmount(
+		el: HTMLElement | Document | Window,
+		type: keyof GlobalEventHandlersEventMap,
+		listener: (this: HTMLElement, e: Event) => any,
+		options?: any,
+	): void {
+		const eventData = {
+			el: el,
+			type: type,
+			listener: listener,
+			options: options,
+		};
+
+		this.unmountEvents.push(eventData);
+	}
+
+	// функция перенастройки уже подключенного компонента
+	reInit(_options: object): void {
+		throw 'Please, add method reInit() to component: ' + this.componentName;
+	}
+
+	// удалить элементы из DOM, но не из памяти
+	static detach(nodes: NodeList | HTMLElement): void {
+		if (nodes instanceof NodeList) {
+			nodes.forEach((node) => node.parentElement?.removeChild(node));
+		} else {
+			const el = nodes;
+			el.parentElement?.removeChild(el);
+		}
+	}
+
+}
+
+export default Component;

package/src/components/core/core.mdx

@@ -0,0 +1,7 @@
+# Компоненты ядра
+
+Компоненты ядра представляют собой компоненты, которые работают через объект `Core` или **плагины**.
+
+Такие компоненты привязываются к приложению на этапе его создания и не могут работать без такой привязки.
+
+См. документацию по объекту [Core](?path=/docs/core-core--docs).