@topvisor/ui 1.0.19 → 1.0.20-selector2-3

package/public/jquery-ui.min.css

@@ -0,0 +1,6 @@
+/*! 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

@@ -0,0 +1,12 @@
+/**
+ * Плагин 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

@@ -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,67 @@
+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

@@ -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/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,
+}