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

package/scripts/plugin/autoloadCSS.ts

@@ -0,0 +1,155 @@
+import path from 'path';
+import color from 'picocolors';
+import MagicString from 'magic-string';
+import type { BuildOptions, LibraryOptions, Plugin, ResolvedConfig } from 'vite';
+import type { RenderedChunk } from 'rollup';
+
+export interface LibOptions extends LibraryOptions {
+	build?: BuildOptions;
+	rollupOptions?: BuildOptions['rollupOptions'];
+}
+
+// ассоциативный список ссылок на css по имени модуля
+const cssFileNamesByModuleName = new Map();
+
+/**
+ * Генерация js кода, который должен инициировать загрузку css при исполнении в js модуле
+ * @param fileName - относительный путь к файлу стилей от js модуля
+ */
+const addImportCSSCode = (ms: MagicString, moduleName: string, fileNames: Array<string>): MagicString => {
+	if (cssFileNamesByModuleName.has(moduleName)) {
+		throw new Error('Имя модуля уже испоьзуется, неохбодимо изменить алогортим сохранения css ссылок');
+	}
+
+	/**
+	 * forms является базовой бибилиотекой UI
+	 *
+	 * Стили forms не должны блокировать загрузку js
+	 *
+	 * Стили form должны грузиться в html страницы
+	 */
+	fileNames = fileNames.filter(fileName => fileName !== '../assets/forms.css');
+
+	cssFileNamesByModuleName.set(moduleName, fileNames);
+
+	console.log(`autoloadCSS: ${color.yellow(moduleName)} ${color.cyan(fileNames.join())}`);
+
+	if (!fileNames.length) {
+		console.log(`- no exists required css`);
+
+		return ms;
+	}
+
+	const importCSSCode = `
+		import { Core as _autoloadCSSCore } from '../core/app.js';
+		const fileNames = ['${fileNames.join(`', '`)}'].map(fileName => import.meta.resolve(fileName));
+		_autoloadCSSCore.insertCSSLinkToPage(fileNames, true);
+	`;
+
+	ms.prepend(importCSSCode + `\n`);
+
+	return ms;
+};
+
+/**
+ * Генерация js кода, который должен инициировать загрузку css при исполнении в js модуле
+ *
+ * Для amd модуля
+ */
+export const addImportCSSCodeAMD = (ms: MagicString, moduleName: string): MagicString => {
+	if (!cssFileNamesByModuleName.has(moduleName)) {
+		return ms;
+	}
+
+	// работа без define с зависимостями не поддерживается
+	if (!ms.toString().match(/define\(\[/)) {
+		return ms;
+	}
+
+	const fileNames = cssFileNamesByModuleName.get(moduleName);
+
+	if (!fileNames.length) {
+		return ms;
+	}
+
+	const dependenciesString = '\'../require/css.amd!' + fileNames.join('\', \'../require/css.amd!') + '\'';
+
+	// полагаемся, что "]" это то, что нам нужно в define()
+	ms.replace(/\]/, ', ' + dependenciesString + ']');
+
+	return ms;
+};
+
+/**
+ * Загрузить css через Page.addCss()
+ *
+ * Для ES
+ */
+export default (libOptions?: LibOptions): Plugin => {
+	let skipLoad = false;
+
+	return {
+		name: 'vite:tv-autoload-css',
+		apply: 'build',
+		enforce: 'post',
+
+		load(id: string) {
+			cssFileNamesByModuleName.clear();
+		},
+
+		configResolved({ build }: ResolvedConfig) {
+			const messages: string[] = [];
+
+			if (!build.lib) {
+				skipLoad = true;
+				messages.push('Current build is not in library mode, skip code injection.');
+			}
+
+			if (build.lib && !build.cssCodeSplit) {
+				messages.push(
+					'`config.build.cssCodeSplit` is set to `true` by the plugin internally in library mode, ' +
+					'but it seems to be `false` now. This may cause style code injection to fail, ' +
+					'please check the configuration to prevent this option from being modified.',
+				);
+			}
+
+			if (build.ssr && !build.ssrEmitAssets) {
+				messages.push(
+					'`config.build.ssrEmitAssets` is set to `true` by the plugin internally in library mode, ' +
+					'but it seems to be `false` now. This may cause style code injection to fail on SSR, ' +
+					'please check the configuration to prevent this option from being modified.',
+				);
+			}
+
+			messages.forEach(msg => console.log(`\n${color.cyan('[vite:lib-inject-css]:')} ${color.yellow(msg)}\n`));
+		},
+
+		renderChunk(code: string, chunk: RenderedChunk) {
+			if (skipLoad || !chunk.viteMetadata) {
+				return;
+			}
+
+			const { importedCss } = chunk.viteMetadata;
+
+			if (!importedCss.size) {
+				return;
+			}
+
+			const ms = new MagicString(code);
+			const cssFilePathes: string[] = [];
+			for (const cssFileName of importedCss) {
+				let cssFilePath = path.relative(path.dirname(chunk.fileName), cssFileName).replaceAll(/[\\/]+/g, '/'); // Replace all backslash or multiple slashes, fixed #9
+				cssFilePath = cssFilePath.startsWith('.') ? cssFilePath : `./${cssFilePath}`;
+
+				cssFilePathes.push(cssFilePath);
+			}
+
+			addImportCSSCode(ms, chunk.name, cssFilePathes);
+
+			return {
+				code: ms.toString(),
+				map: ms.generateMap(),
+			};
+		},
+	};
+}

package/src/CHANGELOG.md.mdx

@@ -0,0 +1,4 @@
+import { Markdown } from '@storybook/addon-docs/blocks';
+import CHANGELOG from '../CHANGELOG.md?raw';
+
+<Markdown>{ CHANGELOG }</Markdown>

package/src/components/charts/charts.ts

@@ -0,0 +1,8 @@
+import type { ComponentCustomProps } from 'vue';
+
+import MiniChart from './miniChart/miniChart.vue';
+import MiniCharts from './miniCharts/miniCharts.vue';
+
+export const TopMiniChart = MiniChart as typeof MiniChart & ComponentCustomProps;
+
+export const TopMiniCharts = MiniCharts as typeof MiniCharts & ComponentCustomProps;

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

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

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

@@ -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/types.ts

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

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