@topvisor/ui 1.0.42-dev.2 → 1.0.42-dev.4

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

@@ -1,66 +0,0 @@
-import type { Meta, StoryObj } from '@storybook/vue3-vite';
-
-import { ref, watch } from 'vue';
-import { genArgsTypes } from '@/components/helpersStories';
-import Component from './miniChart.vue';
-import ReadMe from './stories/README.md?raw';
-import { activeDates, dates, visibilities } from './stories/dummy';
-
-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: {
-		title: 'Видимость',
-		keysForDyn: {
-			start: 50,
-			end: 59,
-		},
-		valueSuffix: '%',
-		values: visibilities,
-		activeDates,
-		dates,
-	},
-	render: (args) => ({
-		components: {
-			TopMiniChart: Component,
-		},
-		setup() {
-			const item = ref(null);
-
-			watch(item, () => {
-				console.log(item.value);
-			});
-
-			return { args, item };
-		},
-		template: `
-			<div style="width: 400px; height: 100px; max-width: 100%;">
-				<TopMiniChart
-					:="args"
-					v-model="item"
-					:activeDates="args.activeDates"
-					:dates="args.dates"
-					:values="args.values"
-					:keysForDyn="args.keysForDyn"
-				/>
-			</div>
-		`,
-	}),
-} satisfies Story;
-
-export default meta;

package/src/components/charts/miniChart/miniChart.vue

@@ -1,158 +0,0 @@
-<script setup lang="ts">
-import type { Props } from './types';
-import { computed } from 'vue';
-import { dateFormat } from '@/core/utils/date';
-import { percentOfNumber } from '@/core/utils/number';
-import { defaultNumberCols, minHeight } from './utils/consts';
-
-const props = withDefaults(defineProps<Props>(), {
-	color: 'blue',
-	numberCols: defaultNumberCols,
-});
-const model = defineModel<Props['modelValue']>();
-
-/**
- * Расчет высоты колонки (в процентах)
- */
-const genColHeight = (value: number): number => {
-	let maximumValue = maxValue.value;
-
-	// для графиков средней и медианной делаем максимум 1
-	if (props.isInvert) {
-		value -= 1;
-		maximumValue -= 1;
-	}
-
-	let height = maximumValue > 0 ? Math.round((value / maximumValue) * (100 - minHeight)) : 0;
-	if (props.isInvert) return 100 - height;
-
-	return height + minHeight;
-};
-
-const isActiveDate = (date: string) => props.activeDates.includes(date);
-
-const maxValue = computed(() => Math.max(...props.values));
-
-/**
- * Из-за стиля .top-miniChart_chartGrid - direction: rtl
- */
-const reversedDates = computed(() => props.dates.slice().reverse());
-
-/**
- * Кол-во пустых колонок
- */
-const numOfEmptyCols = computed(() => {
-	if (!props.dates.length) return 0;
-
-	return props.numberCols - props.dates.length;
-});
-
-const resetModel = () => {
-	model.value = null;
-};
-
-const setModel = (e: Event, date: string, value: number | null) => {
-	if (!(e.target instanceof HTMLElement)) return;
-
-	model.value = {
-		elCol: e.target,
-		date: dateFormat(date),
-		value: value === null ? '--' : value + (props.valueSuffix ?? ''),
-	};
-};
-
-/**
- * Возвращает численный показатель динамики графика
- */
-const localDynamic = computed(() => {
-	let dynamic = props.dynamic;
-
-	if (typeof dynamic === 'undefined') {
-		const prevPeriodValue = props.values[props.keysForDyn.start];
-		const currentValue = props.values[props.keysForDyn.end];
-		dynamic = currentValue - prevPeriodValue;
-	}
-
-	const sign = dynamic < 0 ? -1 : 1;
-
-	return sign * (percentOfNumber(Math.abs(dynamic)) as number);
-});
-
-const dynamicDirection = computed(() => {
-	let direction: 'up' | 'stay' | 'down' = 'stay';
-
-	if (!props.isInvert) {
-		if (localDynamic.value > 0) direction = 'up';
-		if (localDynamic.value < 0) direction = 'down';
-	} else {
-		if (localDynamic.value > 0) direction = 'down';
-		if (localDynamic.value < 0) direction = 'up';
-	}
-
-	return direction;
-});
-
-</script>
-
-<template>
-	<div
-		:class="{
-			['top-miniChart']: true,
-			['top-miniChart_hideChartInMobile']: hideChartInMobile,
-			[`top-color_${color}`]: true
-		}"
-	>
-		<div
-			class="top-miniChart_title top-ellipsis"
-			:data-top-icon="gIcon"
-		>
-			{{ title }}
-		</div>
-
-		<div class="top-miniChart_chart">
-			<div
-				class="top-miniChart_chartGrid"
-				@mouseleave="resetModel()"
-			>
-				<div
-					v-for="(date, i) in reversedDates"
-					:class="{
-						['top-miniChart_chartGridCol']: true,
-						['top-active']: isActiveDate(date)
-					}"
-					@mouseenter="setModel($event, date, values[values.length - i - 1])"
-				>
-					<div :style="'height:' + genColHeight(values[values.length - i - 1]) + '%'"/>
-				</div>
-				<div
-					v-for="() in numOfEmptyCols"
-					class="top-miniChart_chartGridCol top-miniChart_chartGridCol-none"
-					@mouseenter="resetModel()"
-				>
-					<div></div>
-				</div>
-			</div>
-		</div>
-
-		<div class="top-miniChart_data">
-			<span :class="{
-				['top-miniChart_dataDynamic']: true,
-				[`top-miniChart_dataDynamic-direction_${dynamicDirection}`]: true,
-			}">
-				{{ Math.abs(localDynamic) || '' }}
-			</span>
-			<span class="top-miniChart_dataValue">
-				{{ percentOfNumber(values[values.length - 1]) || 0 }}
-			</span>
-		</div>
-
-		<div
-			v-if="additionalHTML"
-			v-html="additionalHTML"
-		/>
-	</div>
-
-</template>
-<style>
-@import "./styles/miniChart.css";
-</style>

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

@@ -1,9 +0,0 @@
-Компонент для постороения миниграфика.
-
-Используется для вывода статистики изменений параметра.
-
-## Описание функционала
-
-- Есть возможность выбора цвета иконки и колонок графика (props.color)
-- Есть возможность получения данных о колонке, на которой расположен курсор. Данные возвращаются через modelValue (возможно получить эл-т выбранной
-  колонки, дату и значение)

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

@@ -1,25 +0,0 @@
-import { faker } from '@faker-js/faker';
-import { dateToString } from '@/core/utils/date';
-
-/**
- * Список дат всех проверок
- */
-export const dates = faker.date
-	.betweens({ from: '2020-01-01', to: Date.now(), count: 60 })
-	.map(date => dateToString(date, false, 0));
-
-/**
- * Список активных дат
- */
-export const activeDates = dates.slice(-10);
-
-/**
- * Список значений видимости
- */
-const visibilities: number[] = [];
-
-for (let i = 0; i < dates.length; i++) {
-	visibilities.push(faker.number.float({ min: 0, max: 100, fractionDigits: 2 }));
-}
-
-export { visibilities };

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

@@ -1,87 +0,0 @@
-.top-miniChart {
-	cursor: default;
-	box-sizing: border-box;
-	border-color: transparent; height: 100%;
-	position: relative;
-	display: flex; flex: 1 1 auto; flex-direction: column; align-items: stretch;
-	font-size: 12px;
-}
-.top-miniChart:not(:last-child) { margin-right: 32px; }
-.top-miniChart:not(:last-child):after {
-	content: "";
-	width: 1px; background-color: var(--color-line-1-opacity);
-	position: absolute; top: 0; right: -16px; bottom: 0;
-}
-
-.top-miniChart_title {
-	--top-icon-size: 16px;
-	--top-icon-width: 16px;
-
-	width: auto; max-height: 18px; max-width: 100%; padding-right: 24px; font-size: 14px;
-}
-.top-miniChart_title[data-top-icon]:before { border-radius: 50%; margin-right: 4px; }
-
-.top-miniChart.top-color_orange .top-miniChart_title[data-top-icon]:before { background: var(--color-layer-warning-2); }
-.top-miniChart.top-color_pink .top-miniChart_title[data-top-icon]:before { background: var(--color-layer-info-2); }
-.top-miniChart.top-color_blue .top-miniChart_title[data-top-icon]:before { background: var(--color-layer-primary-2); }
-
-.top-miniChart_data {
-	pointer-events: none; text-align: right;
-	position: absolute; top: 0; right: 0; bottom: 0;
-	display: flex; flex-direction: column; justify-content: space-between;
-}
-.top-miniChart_dataDynamic::before { content: "––"; }
-
-.top-miniChart_dataDynamic-direction_up { color: var(--color-text-positive); }
-.top-miniChart_dataDynamic-direction_up:before { content: "+"; }
-.top-miniChart_dataDynamic-direction_stay { color: var(--color-text-warning); }
-.top-miniChart_dataDynamic-direction_down { color: var(--color-text-negative); }
-.top-miniChart_dataDynamic-direction_down:before { content: "–"; }
-
-.top-miniChart_chart {
-	margin: 3px 0 20px 0; border-top: 1px solid var(--color-line-1); border-bottom: 1px solid var(--color-line-1); padding: 2px 0;
-	display: block; flex-grow: 1;
-}
-
-.top-miniChart_chartGrid {
-	height: 100%; width: 100%; overflow: hidden;
-	display: grid; grid-template-columns: repeat(auto-fill, 6px); grid-auto-rows: 100%;
-	gap: 2px 0; align-items: end; justify-content: space-between; direction: rtl;
-}
-
-.top-miniChart_chartGridCol { cursor: pointer; border-radius: 2px; height: 100%; padding: 0 1px; opacity: 1; display: flex;
-	flex-direction: column-reverse; }
-.top-miniChart_chartGridCol:not(.top-active) { opacity: 0.3; }
-.top-miniChart_chartGridCol:hover { background: var(--color-layer-3); opacity: 0.7; }
-
-.top-miniChart_chartGridCol > div { border-radius: inherit; background: var(--color-layer-3); }
-
-.top-miniChart.top-color_orange .top-miniChart_chartGridCol > div { background: var(--color-line-warning-1); }
-.top-miniChart.top-color_pink .top-miniChart_chartGridCol > div { background: var(--color-line-info-1); }
-.top-miniChart.top-color_blue .top-miniChart_chartGridCol > div { background: var(--color-line-primary-1); }
-
-.top-miniChart_chartGridCol-none { cursor: default; }
-.top-miniChart_chartGridCol-none > div { background: var(--color-theme-100) !important; height: 2px; }
-
-@media only screen and (max-width: 900px) {
-	.top-miniChart_hideChartInMobile {
-		width: 1px; align-items: center; justify-content: center; gap: var(--top-gap-1);
-		box-shadow: var(--top-shadow-s); border-radius: var(--top-radius-2);
-		padding: var(--top-padding-1); background: var(--color-layout-front-1);
-	}
-
-	.top-miniChart_hideChartInMobile:not(:last-child) { margin: 0; }
-
-	.top-miniChart_hideChartInMobile:not(:last-child):after { content: none; }
-
-	.top-miniChart_hideChartInMobile .top-miniChart_title { height: auto; padding: 0; line-height: 1; font-size: 12px; flex-grow: 0; }
-
-	.top-miniChart_hideChartInMobile .top-miniChart_chart { display: none; }
-
-	.top-miniChart_hideChartInMobile .top-miniChart_data {
-		font-size: 10px; line-height: 1;
-		pointer-events: unset; text-align: unset; position: unset; flex-direction: unset; justify-content: unset;
-	}
-
-	.top-miniChart_hideChartInMobile .top-miniChart_dataDynamic { order: 1; margin-left: 4px; }
-}

package/src/components/charts/miniChart/types.ts

@@ -1,110 +0,0 @@
-export interface Props {
-	/**
-	 * Имя графика
-	 */
-	title?: string;
-
-	/**
-	 * Иконка графика
-	 */
-	gIcon?: string;
-
-	/**
-	 * Цвет графика и иконки
-	 */
-	color?: Color;
-
-	/**
-	 * Список дат всех проверок (пример даты: 2020-01-01)
-	 */
-	dates: string[];
-
-	/**
-	 * Список значений параметра для каждой проверки (порядок соответсвует списку дат)
-	 */
-	values: number[];
-
-	/**
-	 * Список активных дат (пример даты: 2020-01-01)
-	 */
-	activeDates: string[];
-
-	/**
-	 * Индексы для получения значений из props.values.
-	 * Полученные значения используются для рассчета динамики изменения.
-	 * Если указан props.dynamic, то props.keysForDyn не используется в расчетах динамики.
-	 *
-	 * - start - индекс для получения значения в начале периода
-	 * - end - индекс для полученя значения в конце периода
-	 */
-	keysForDyn: {
-		start: number;
-		end: number;
-	};
-
-	/**
-	 * Динамика
-	 */
-	dynamic?: number;
-
-	/**
-	 * Необходимо ли инвертировать значения ячеек графика
-	 */
-	isInvert?: boolean;
-
-	/**
-	 * Кол-во столбцов всего
-	 */
-	numberCols?: number;
-
-	/**
-	 * Html для футера
-	 */
-	additionalHTML?: string;
-
-	/**
-	 * Выбранная проверка (колонка)
-	 */
-	modelValue?: Item | null;
-
-	/**
-	 * Суффикс для значения
-	 */
-	valueSuffix?: string;
-
-	/**
-	 * Скрыть график на адаптиве
-	 *
-	 * - true - скрыть
-	 * - false - показать
-	 */
-	hideChartInMobile?: boolean;
-}
-
-/**
- * Интерфейс проверки (используется для передачи данных о выбранной проверке через v-model)
- */
-export interface Item {
-	/**
-	 * Эл-т колонки выбранной проверки
-	 */
-	elCol: HTMLElement;
-
-	/**
-	 * Дата/время проверки
-	 */
-	date?: string;
-
-	/**
-	 * Значение параметра проверки
-	 */
-	value?: string;
-}
-
-export const colors = {
-	blue: 'blue',
-	orange: 'orange',
-	pink: 'pink',
-} as const;
-
-export type Color = typeof colors[keyof typeof colors];

package/src/components/charts/miniChart/utils/consts.ts

@@ -1,9 +0,0 @@
-/**
- * Кол-во столбцов по умолчанию
- */
-export const defaultNumberCols = 90;
-
-/**
- * Минимальная высота колонки (в процентах)
- */
-export const minHeight = 10; // %

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

@@ -1,75 +0,0 @@
-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

@@ -1,24 +0,0 @@
-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

@@ -1,124 +0,0 @@
-<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>