@topvisor/ui 1.1.0 → 1.2.0

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

@@ -0,0 +1,158 @@
+<script setup lang="ts">
+import type { Props } from './miniChart';
+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

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

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

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

@@ -0,0 +1,87 @@
+.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/utils/consts.ts

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

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

@@ -0,0 +1,76 @@
+import { ref } from 'vue';
+import type { Meta, StoryObj } from '@storybook/vue3';
+
+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 * as ComponentsConst from './miniCharts';
+import type { Props } from './miniCharts';
+import { propsForMiniCharts } from './stories/dummy';
+import ReadMe from './stories/README.md?raw';
+
+const argTypes = genArgsTypes(Component, ComponentsConst);
+
+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/miniChart';
+
+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,128 @@
+<script setup lang="ts">
+import { ref, computed, watch, onMounted, onUnmounted } from 'vue';
+import type { Style, Props } 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/miniChart';
+
+/**
+ * Генерация списка дат всех проверок
+ */
+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 };