@topvisor/ui 1.0.41 → 1.1.0-date.0

package/rollup.config.ts

@@ -0,0 +1,38 @@
+import type { PreRenderedAsset, RollupOptions } from 'rollup';
+
+export default {
+	external: [
+		'vue',
+		'require',
+		'@rive-app/canvas-lite',
+	],
+	output: {
+		globals: {
+			vue: 'Vue',
+			pinia: 'Pinia',
+		},
+
+		exports: 'named',
+
+		manualChunks: {
+			/**
+			 * forms это базовая бибилиотека, которая должна грузиться максмально быстро
+			 *
+			 * Объединить все js и css forms в один файл, необходимо для предзагрузки основных стилей UI на страницу
+			 *
+			 * При такой настройке в forms.js будут добавлены все ее зависимости
+			 */
+			forms: [
+				'./src/components/forms/forms.ts',
+			],
+		},
+		chunkFileNames: '.chunks/[name]-[hash].[format].js',
+		assetFileNames: (_chunkInfo: PreRenderedAsset) => {
+			if (_chunkInfo.originalFileName?.startsWith('src/resources/styles/themes/')) {
+				return `assets/themes/[name][extname]`;
+			}
+
+			return `assets/[name][extname]`;
+		},
+	},
+} satisfies RollupOptions;

package/scripts/afterBuild.sh

@@ -0,0 +1,13 @@
+#!/bin/bash
+
+echo ''
+echo 'run afterBuild...'
+
+echo '- remove /dist/for-delete/'
+rm -rf dist/for-delete/
+
+echo '- make package.json'
+cp package.json dist/
+npm pkg --prefix dist delete scripts devDependencies
+
+cp web-types.json dist/

package/scripts/cssModules.ts

@@ -0,0 +1,39 @@
+import stringHash from 'string-hash';
+
+// https://github.com/madyankin/postcss-modules/blob/325f0b33f1b746eae7aa827504a5efd0949022ef/src/scoping.js#L36
+function generateScopedNameDefault(name: string, filename: string, css: string) {
+	const i = css.indexOf(`.${name}`);
+	const lineNumber = css.substr(0, i).split(/[\r\n]/).length;
+	const hash = stringHash(css).toString(36).substr(0, 5);
+
+	return `_${name}_${hash}_${lineNumber}`;
+}
+
+export default {
+	/**
+	 * Оставить глобальные классы без преобразования
+	 * С глобальными классами нельзя работать через css module
+	 * С глобальными классами можно работать, определяя их их в интерфесе vue css module
+	 * @param name - имя класса
+	 * @param filename - файл стилей
+	 * @param css - стили
+	 * @returns Имя класса после предкомпиляции
+	 */
+	generateScopedName: (name: string, filename: string, css: string) => {
+		const isGlobalCSS = (name: string, filename: string) => {
+			// классы topvisor-ui
+			if (name.indexOf('top-') === 0) return true;
+
+			return false;
+		};
+
+		if (isGlobalCSS(name, filename)) {
+			return name;
+		}
+
+		return generateScopedNameDefault(name, filename, css);
+	},
+	// globalModulePaths: [],
+	//	scopeBehaviour: 'global',
+	//	exportGlobals: true,
+};

package/scripts/genDocs.sh

@@ -0,0 +1,20 @@
+#!/bin/bash
+
+echo "📚 Генерация документации по js функциям"
+
+git diff --quiet --cached || echo 'В репозитории не должно быть не закомиченных изменений'
+git diff --quiet --cached || exit 1
+
+npx typedoc --entryPoints "src/core/utils/*.ts" --out "src/core/utils/References" --publicPath "?path=/docs/core-utils-references"
+
+echo ''
+echo 'replace file link to storybook path format'
+
+sed -i 's/%5C/\//g' src/core/utils/References/*.mdx
+sed -i 's/%5C/\//g' src/core/utils/References/*/*.mdx
+
+sed -i 's/\(core-utils-references\)\/\(.\{1,99\}\)\/\(\w\{1,99\}\).mdx/\1-\2-\3--docs/' src/core/utils/References/*.mdx
+sed -i 's/\(core-utils-references\)\/\(.\{1,99\}\)\/\(\w\{1,99\}\)\/\(\w\{1,99\}\).mdx/\1-\2-\3-\4--docs/' src/core/utils/References/*/*.mdx
+
+git add src/core/utils/References
+git diff --quiet --cached || git commit -m "docs(js utils): Обновлена документация по утилитам"

package/scripts/plugin/amdFix.ts

@@ -0,0 +1,83 @@
+import color from 'picocolors';
+import MagicString from 'magic-string';
+import type { Plugin } from 'vite';
+import type { RenderedChunk } from 'rollup';
+import { addImportCSSCodeAMD } from './autoloadCSS';
+
+/**
+ * Добавить импорт requre в amd модуль, необходимо для переопределения глобального require для относитльной навигации
+ * @param {MagicString} ms - код amd модуля
+ */
+const addLocalRequire = (ms: MagicString): MagicString => {
+	// ничего не делать, если локальный require уже определен
+	if (ms.toString().match(/[\[,]\s?'require'[,\]]/)) {
+		return ms;
+	}
+
+	// работа без define с зависимостями не поддерживается
+	if (!ms.toString().match(/define\(\[/)) {
+		return ms;
+	}
+
+	// полагаемся, что первое определение define() это то, что нам нужно
+	ms.replace('define([', `define(['require', `);
+
+	// полагаемся, что первое определение calback это то, что нам нужно
+	ms.replace(/function\s?\(/, 'function(require, ');
+
+	return ms;
+};
+
+/**
+ * Добавить импорт Vue в amd модуль
+ * @param {MagicString} ms - код amd модуля
+ */
+const fixVue = (ms: MagicString): MagicString => {
+	ms.replace(/'use strict';/g, '\'use strict\'; if(typeof vue === \'undefined\') var vue = window.Vue;');
+
+	return ms;
+};
+
+/**
+ * Удалить вставленные стили из amd модуля, которые долждны загружаться из файла
+ * @param {MagicString} ms - код amd модуля
+ */
+const removeInlineCSS = (ms: MagicString): MagicString => {
+	// amd as legacy: https://github.com/vitejs/vite/issues/2062#issuecomment-782388010
+	ms.replace(/var __vite_style__.*?document\.head\.appendChild\(__vite_style__\);/g, '');
+
+	return ms;
+};
+
+/**
+ * Опеределить значение переменной vue в импорте requriejs
+ *
+ * Vue не предоставляет export для amd
+ */
+export default (): Plugin => {
+	return {
+		name: 'vite:tv-amd-fix',
+		apply: 'build',
+		enforce: 'post',
+
+		renderChunk(code: string, chunk: RenderedChunk) {
+			if (chunk.fileName.includes('.amd.js') && code.includes('define(')) {
+				const ms = new MagicString(code);
+
+				console.log(`amdFix: ${color.yellow(chunk.name)}`);
+
+				// MagicString не должен содержать пересекающихся replace
+				// https://github.com/Rich-Harris/magic-string/issues/208
+				addLocalRequire(ms);
+				fixVue(ms);
+				removeInlineCSS(ms);
+				addImportCSSCodeAMD(ms, chunk.name);
+
+				return {
+					code: ms.toString(),
+					map: ms.generateMap(),
+				};
+			}
+		},
+	};
+}

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/scripts/plugin/storybook-types-to-schema.ts

@@ -0,0 +1,53 @@
+import { resolve } from 'path';
+import MagicString from 'magic-string';
+import type { Plugin } from 'vite';
+import { createFilter } from 'vite';
+import { createChecker } from 'vue-component-meta';
+
+/**
+ * Добавление полных типов, вместо __docgenInfo
+ *
+ * По умолчанию используется `vue-docgen-api`, который не резолвит значения типов, выводя их имена, но работает быстрее при запуске storybook
+ *
+ * @deprecated После написания плагина нашлось решение, которое уже предоставляет storybook:
+ * ```
+ * const config: StorybookConfig = {
+ * 	framework: {
+ * 		name: '@storybook/vue3-vite',
+ * 		options: {
+ * 			docgen: {
+ * 				plugin: 'vue-component-meta',
+ * 				tsconfig: `tsconfig.json`,
+ * 			},
+ * 		},
+ * 	},
+ * };
+ * ```
+ */
+export default (): Plugin => {
+	const filterVue = createFilter(/hint\.vue$/);
+	const filterTS = createFilter(/\.ts$/);
+
+	const checker = createChecker(resolve(__dirname, '../../tsconfig.json'));
+
+	return {
+		name: 'storybook:types-to-schema',
+
+		async hotUpdate(options) {
+			if (!filterTS(options.file)) return;
+
+			const src = await options.read();
+			checker.updateFile(options.file, src);
+		},
+
+		async transform(code, id) {
+			if (!filterVue(id)) return;
+
+			const meta = checker.getComponentMeta(id);
+
+			const ms = new MagicString(code);
+
+			return ms.append(`;_sfc_main.__componentMeta = ${JSON.stringify(meta)}`), { code: ms.toString(), map: ms.generateMap({ hires: true, source: id }) };
+		},
+	};
+}

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 };