@topvisor/ui 1.2.0 → 1.3.1-dev.2

package/public/jquery-ui.min.css

@@ -1,6 +0,0 @@
-/*! jQuery UI - v1.13.1 - 2022-04-12
-* http://jqueryui.com
-* Includes: draggable.css, core.css, resizable.css, selectable.css, sortable.css, autocomplete.css, menu.css, button.css, controlgroup.css, checkboxradio.css, datepicker.css, dialog.css, slider.css, tooltip.css
-* Copyright jQuery Foundation and other contributors; Licensed MIT */
-
-.ui-draggable-handle{-ms-touch-action:none;touch-action:none}.ui-helper-hidden{display:none}.ui-helper-hidden-accessible{border:0;clip:rect(0 0 0 0);height:1px;margin:-1px;overflow:hidden;padding:0;position:absolute;width:1px}.ui-helper-reset{margin:0;padding:0;border:0;outline:0;line-height:1.3;text-decoration:none;font-size:100%;list-style:none}.ui-helper-clearfix:before,.ui-helper-clearfix:after{content:"";display:table;border-collapse:collapse}.ui-helper-clearfix:after{clear:both}.ui-helper-zfix{width:100%;height:100%;top:0;left:0;position:absolute;opacity:0;-ms-filter:"alpha(opacity=0)"}.ui-front{z-index:100}.ui-state-disabled{cursor:default!important;pointer-events:none}.ui-icon{display:inline-block;vertical-align:middle;margin-top:-.25em;position:relative;text-indent:-99999px;overflow:hidden;background-repeat:no-repeat}.ui-widget-icon-block{left:50%;margin-left:-8px;display:block}.ui-widget-overlay{position:fixed;top:0;left:0;width:100%;height:100%}.ui-resizable{position:relative}.ui-resizable-handle{position:absolute;font-size:0.1px;display:block;-ms-touch-action:none;touch-action:none}.ui-resizable-disabled .ui-resizable-handle,.ui-resizable-autohide .ui-resizable-handle{display:none}.ui-resizable-n{cursor:n-resize;height:7px;width:100%;top:-5px;left:0}.ui-resizable-s{cursor:s-resize;height:7px;width:100%;bottom:-5px;left:0}.ui-resizable-e{cursor:e-resize;width:7px;right:-5px;top:0;height:100%}.ui-resizable-w{cursor:w-resize;width:7px;left:-5px;top:0;height:100%}.ui-resizable-se{cursor:se-resize;width:12px;height:12px;right:1px;bottom:1px}.ui-resizable-sw{cursor:sw-resize;width:9px;height:9px;left:-5px;bottom:-5px}.ui-resizable-nw{cursor:nw-resize;width:9px;height:9px;left:-5px;top:-5px}.ui-resizable-ne{cursor:ne-resize;width:9px;height:9px;right:-5px;top:-5px}.ui-selectable{-ms-touch-action:none;touch-action:none}.ui-selectable-helper{position:absolute;z-index:100;border:1px dotted black}.ui-sortable-handle{-ms-touch-action:none;touch-action:none}.ui-autocomplete{position:absolute;top:0;left:0;cursor:default}.ui-menu{list-style:none;padding:0;margin:0;display:block;outline:0}.ui-menu .ui-menu{position:absolute}.ui-menu .ui-menu-item{margin:0;cursor:pointer;list-style-image:url("data:image/gif;base64,R0lGODlhAQABAIAAAAAAAP///yH5BAEAAAAALAAAAAABAAEAAAIBRAA7")}.ui-menu .ui-menu-item-wrapper{position:relative;padding:3px 1em 3px .4em}.ui-menu .ui-menu-divider{margin:5px 0;height:0;font-size:0;line-height:0;border-width:1px 0 0 0}.ui-menu .ui-state-focus,.ui-menu .ui-state-active{margin:-1px}.ui-menu-icons{position:relative}.ui-menu-icons .ui-menu-item-wrapper{padding-left:2em}.ui-menu .ui-icon{position:absolute;top:0;bottom:0;left:.2em;margin:auto 0}.ui-menu .ui-menu-icon{left:auto;right:0}.ui-button{padding:.4em 1em;display:inline-block;position:relative;line-height:normal;margin-right:.1em;cursor:pointer;vertical-align:middle;text-align:center;-webkit-user-select:none;-moz-user-select:none;-ms-user-select:none;user-select:none;overflow:visible}.ui-button,.ui-button:link,.ui-button:visited,.ui-button:hover,.ui-button:active{text-decoration:none}.ui-button-icon-only{width:2em;box-sizing:border-box;text-indent:-9999px;white-space:nowrap}input.ui-button.ui-button-icon-only{text-indent:0}.ui-button-icon-only .ui-icon{position:absolute;top:50%;left:50%;margin-top:-8px;margin-left:-8px}.ui-button.ui-icon-notext .ui-icon{padding:0;width:2.1em;height:2.1em;text-indent:-9999px;white-space:nowrap}input.ui-button.ui-icon-notext .ui-icon{width:auto;height:auto;text-indent:0;white-space:normal;padding:.4em 1em}input.ui-button::-moz-focus-inner,button.ui-button::-moz-focus-inner{border:0;padding:0}.ui-controlgroup{vertical-align:middle;display:inline-block}.ui-controlgroup > .ui-controlgroup-item{float:left;margin-left:0;margin-right:0}.ui-controlgroup > .ui-controlgroup-item:focus,.ui-controlgroup > .ui-controlgroup-item.ui-visual-focus{z-index:9999}.ui-controlgroup-vertical > .ui-controlgroup-item{display:block;float:none;width:100%;margin-top:0;margin-bottom:0;text-align:left}.ui-controlgroup-vertical .ui-controlgroup-item{box-sizing:border-box}.ui-controlgroup .ui-controlgroup-label{padding:.4em 1em}.ui-controlgroup .ui-controlgroup-label span{font-size:80%}.ui-controlgroup-horizontal .ui-controlgroup-label + .ui-controlgroup-item{border-left:none}.ui-controlgroup-vertical .ui-controlgroup-label + .ui-controlgroup-item{border-top:none}.ui-controlgroup-horizontal .ui-controlgroup-label.ui-widget-content{border-right:none}.ui-controlgroup-vertical .ui-controlgroup-label.ui-widget-content{border-bottom:none}.ui-controlgroup-vertical .ui-spinner-input{width:75%;width:calc( 100% - 2.4em )}.ui-controlgroup-vertical .ui-spinner .ui-spinner-up{border-top-style:solid}.ui-checkboxradio-label .ui-icon-background{box-shadow:inset 1px 1px 1px #ccc;border-radius:.12em;border:none}.ui-checkboxradio-radio-label .ui-icon-background{width:16px;height:16px;border-radius:1em;overflow:visible;border:none}.ui-checkboxradio-radio-label.ui-checkboxradio-checked .ui-icon,.ui-checkboxradio-radio-label.ui-checkboxradio-checked:hover .ui-icon{background-image:none;width:8px;height:8px;border-width:4px;border-style:solid}.ui-checkboxradio-disabled{pointer-events:none}.ui-datepicker{width:17em;padding:.2em .2em 0;display:none}.ui-datepicker .ui-datepicker-header{position:relative;padding:.2em 0}.ui-datepicker .ui-datepicker-prev,.ui-datepicker .ui-datepicker-next{position:absolute;top:2px;width:1.8em;height:1.8em}.ui-datepicker .ui-datepicker-prev-hover,.ui-datepicker .ui-datepicker-next-hover{top:1px}.ui-datepicker .ui-datepicker-prev{left:2px}.ui-datepicker .ui-datepicker-next{right:2px}.ui-datepicker .ui-datepicker-prev-hover{left:1px}.ui-datepicker .ui-datepicker-next-hover{right:1px}.ui-datepicker .ui-datepicker-prev span,.ui-datepicker .ui-datepicker-next span{display:block;position:absolute;left:50%;margin-left:-8px;top:50%;margin-top:-8px}.ui-datepicker .ui-datepicker-title{margin:0 2.3em;line-height:1.8em;text-align:center}.ui-datepicker .ui-datepicker-title select{font-size:1em;margin:1px 0}.ui-datepicker select.ui-datepicker-month,.ui-datepicker select.ui-datepicker-year{width:45%}.ui-datepicker table{width:100%;font-size:.9em;border-collapse:collapse;margin:0 0 .4em}.ui-datepicker th{padding:.7em .3em;text-align:center;font-weight:bold;border:0}.ui-datepicker td{border:0;padding:1px}.ui-datepicker td span,.ui-datepicker td a{display:block;padding:.2em;text-align:right;text-decoration:none}.ui-datepicker .ui-datepicker-buttonpane{background-image:none;margin:.7em 0 0 0;padding:0 .2em;border-left:0;border-right:0;border-bottom:0}.ui-datepicker .ui-datepicker-buttonpane button{float:right;margin:.5em .2em .4em;cursor:pointer;padding:.2em .6em .3em .6em;width:auto;overflow:visible}.ui-datepicker .ui-datepicker-buttonpane button.ui-datepicker-current{float:left}.ui-datepicker.ui-datepicker-multi{width:auto}.ui-datepicker-multi .ui-datepicker-group{float:left}.ui-datepicker-multi .ui-datepicker-group table{width:95%;margin:0 auto .4em}.ui-datepicker-multi-2 .ui-datepicker-group{width:50%}.ui-datepicker-multi-3 .ui-datepicker-group{width:33.3%}.ui-datepicker-multi-4 .ui-datepicker-group{width:25%}.ui-datepicker-multi .ui-datepicker-group-last .ui-datepicker-header,.ui-datepicker-multi .ui-datepicker-group-middle .ui-datepicker-header{border-left-width:0}.ui-datepicker-multi .ui-datepicker-buttonpane{clear:left}.ui-datepicker-row-break{clear:both;width:100%;font-size:0}.ui-datepicker-rtl{direction:rtl}.ui-datepicker-rtl .ui-datepicker-prev{right:2px;left:auto}.ui-datepicker-rtl .ui-datepicker-next{left:2px;right:auto}.ui-datepicker-rtl .ui-datepicker-prev:hover{right:1px;left:auto}.ui-datepicker-rtl .ui-datepicker-next:hover{left:1px;right:auto}.ui-datepicker-rtl .ui-datepicker-buttonpane{clear:right}.ui-datepicker-rtl .ui-datepicker-buttonpane button{float:left}.ui-datepicker-rtl .ui-datepicker-buttonpane button.ui-datepicker-current,.ui-datepicker-rtl .ui-datepicker-group{float:right}.ui-datepicker-rtl .ui-datepicker-group-last .ui-datepicker-header,.ui-datepicker-rtl .ui-datepicker-group-middle .ui-datepicker-header{border-right-width:0;border-left-width:1px}.ui-datepicker .ui-icon{display:block;text-indent:-99999px;overflow:hidden;background-repeat:no-repeat;left:.5em;top:.3em}.ui-dialog{position:absolute;top:0;left:0;padding:.2em;outline:0}.ui-dialog .ui-dialog-titlebar{padding:.4em 1em;position:relative}.ui-dialog .ui-dialog-title{float:left;margin:.1em 0;white-space:nowrap;width:90%;overflow:hidden;text-overflow:ellipsis}.ui-dialog .ui-dialog-titlebar-close{position:absolute;right:.3em;top:50%;width:20px;margin:-10px 0 0 0;padding:1px;height:20px}.ui-dialog .ui-dialog-content{position:relative;border:0;padding:.5em 1em;background:none;overflow:auto}.ui-dialog .ui-dialotop-buttonpane{text-align:left;border-width:1px 0 0 0;background-image:none;margin-top:.5em;padding:.3em 1em .5em .4em}.ui-dialog .ui-dialotop-buttonpane .ui-dialotop-buttonset{float:right}.ui-dialog .ui-dialotop-buttonpane button{margin:.5em .4em .5em 0;cursor:pointer}.ui-dialog .ui-resizable-n{height:2px;top:0}.ui-dialog .ui-resizable-e{width:2px;right:0}.ui-dialog .ui-resizable-s{height:2px;bottom:0}.ui-dialog .ui-resizable-w{width:2px;left:0}.ui-dialog .ui-resizable-se,.ui-dialog .ui-resizable-sw,.ui-dialog .ui-resizable-ne,.ui-dialog .ui-resizable-nw{width:7px;height:7px}.ui-dialog .ui-resizable-se{right:0;bottom:0}.ui-dialog .ui-resizable-sw{left:0;bottom:0}.ui-dialog .ui-resizable-ne{right:0;top:0}.ui-dialog .ui-resizable-nw{left:0;top:0}.ui-draggable .ui-dialog-titlebar{cursor:move}.ui-slider{position:relative;text-align:left}.ui-slider .ui-slider-handle{position:absolute;z-index:2;width:1.2em;height:1.2em;cursor:pointer;-ms-touch-action:none;touch-action:none}.ui-slider .ui-slider-range{position:absolute;z-index:1;font-size:.7em;display:block;border:0;background-position:0 0}.ui-slider.ui-state-disabled .ui-slider-handle,.ui-slider.ui-state-disabled .ui-slider-range{filter:inherit}.ui-slider-horizontal{height:.8em}.ui-slider-horizontal .ui-slider-handle{top:-.3em;margin-left:-.6em}.ui-slider-horizontal .ui-slider-range{top:0;height:100%}.ui-slider-horizontal .ui-slider-range-min{left:0}.ui-slider-horizontal .ui-slider-range-max{right:0}.ui-slider-vertical{width:.8em;height:100px}.ui-slider-vertical .ui-slider-handle{left:-.3em;margin-left:0;margin-bottom:-.6em}.ui-slider-vertical .ui-slider-range{left:0;width:100%}.ui-slider-vertical .ui-slider-range-min{bottom:0}.ui-slider-vertical .ui-slider-range-max{top:0}.ui-tooltip{padding:8px;position:absolute;z-index:9999;max-width:300px}body .ui-tooltip{border-width:2px}

package/public/require/css.amd.js

@@ -1,12 +0,0 @@
-/**
- * Плагин requirejs для подгрузки css файлов
- */
-define({
-	load: (name, req, onload) => {
-		req(['../core/app.amd'], ({ Core }) => {
-			const cssURL = req.toUrl(name);
-
-			Core.insertCSSLinkToPage([cssURL]).then(onload).catch(onload.error);
-		});
-	},
-});

package/src/components/charts/charts.ts

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

@@ -1,67 +0,0 @@
-import type { Meta, StoryObj } from '@storybook/vue3';
-
-import { ref, watch } from 'vue';
-import { genArgsTypes } from '@/components/helpersStories';
-import Component from './miniChart.vue';
-import * as ComponentsConst from './miniChart';
-import ReadMe from './stories/README.md?raw';
-import { dates, activeDates, visibilities } from './stories/dummy';
-
-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: {
-		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.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/miniChart.vue

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

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

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

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

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

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