@topvisor/ui 1.0.20-selector2-3 → 1.0.20-selector2-4

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

package/src/components/charts/miniCharts/miniCharts.vue

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

@@ -1,18 +0,0 @@
-Компонент для постороения миниграфиков.
-
-Используется для обертки над несколькими миниграфиками 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

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

package/src/components/charts/miniCharts/stories/overview.vue

@@ -1,139 +0,0 @@
-<script setup lang="ts">
-import { ref } from 'vue';
-import TopMiniChart from '@/components/charts/miniChart/miniChart.vue';
-import TopMiniCharts from '../miniCharts.vue';
-import { propsForMiniCharts } from './dummy';
-import type { Props } from '../miniCharts';
-
-defineProps<Props>();
-
-const item1 = ref(null);
-const item2 = ref(null);
-const item3 = ref(null);
-</script>
-
-<template>
-	<div>
-		<h2>Ширина внешнего блока 200px:</h2>
-
-		<h3>Выводим миниграфики на адаптиве (props.hideChartInMobile = false)</h3>
-		<div style="width: 200px; height: 88px">
-			<TopMiniCharts
-				:="$props"
-				v-model="item1"
-			>
-				<TopMiniChart
-					v-for="props in propsForMiniCharts"
-					:="props"
-					v-model="item1"
-					:activeDates="props.activeDates"
-					:dates="props.dates"
-					:keysForDyn="props.keysForDyn"
-					:values="props.values"
-				/>
-			</TopMiniCharts>
-		</div>
-
-		<h3>Скрываем миниграфики на адаптиве (props.hideChartInMobile = true)</h3>
-		<div style="width: 200px; height: 88px">
-			<TopMiniCharts
-				:="$props"
-				v-model="item1"
-				:hideChartInMobile="true"
-			>
-				<TopMiniChart
-					v-for="props in propsForMiniCharts"
-					:="props"
-					v-model="item1"
-					:activeDates="props.activeDates"
-					:dates="props.dates"
-					:keysForDyn="props.keysForDyn"
-					:values="props.values"
-					:hideChartInMobile="true"
-				/>
-			</TopMiniCharts>
-		</div>
-
-		<h2>Ширина внешнего блока 300px: </h2>
-
-		<h3>Выводим миниграфики на адаптиве (props.hideChartInMobile = false)</h3>
-		<div style="width: 300px; height: 88px">
-			<TopMiniCharts
-				:="$props"
-				v-model="item2"
-			>
-				<TopMiniChart
-					v-for="props in propsForMiniCharts"
-					:="props"
-					v-model="item2"
-					:activeDates="props.activeDates"
-					:dates="props.dates"
-					:keysForDyn="props.keysForDyn"
-					:values="props.values"
-				/>
-			</TopMiniCharts>
-		</div>
-
-		<h3>Скрываем миниграфики на адаптиве (props.hideChartInMobile = true)</h3>
-		<div style="width: 300px; height: 88px">
-			<TopMiniCharts
-				:="$props"
-				v-model="item2"
-				:hideChartInMobile="true"
-			>
-				<TopMiniChart
-					v-for="props in propsForMiniCharts"
-					:="props"
-					v-model="item2"
-					:activeDates="props.activeDates"
-					:dates="props.dates"
-					:keysForDyn="props.keysForDyn"
-					:values="props.values"
-					:hideChartInMobile="true"
-				/>
-			</TopMiniCharts>
-		</div>
-
-		<h2>Ширина внешнего блока 100%: </h2>
-
-		<h3>Выводим миниграфики на адаптиве (props.hideChartInMobile = false)</h3>
-		<div style="width: 100%; height: 88px">
-			<TopMiniCharts
-				:="$props"
-				v-model="item3"
-			>
-				<TopMiniChart
-					v-for="props in propsForMiniCharts"
-					:="props"
-					v-model="item3"
-					:activeDates="props.activeDates"
-					:dates="props.dates"
-					:keysForDyn="props.keysForDyn"
-					:values="props.values"
-				/>
-			</TopMiniCharts>
-		</div>
-
-		<h3>Скрываем миниграфики на адаптиве (props.hideChartInMobile = true)</h3>
-		<div style="width: 100%; height: 88px">
-			<TopMiniCharts
-				:="$props"
-				v-model="item3"
-				:hideChartInMobile="true"
-			>
-				<TopMiniChart
-					v-for="props in propsForMiniCharts"
-					:="props"
-					v-model="item3"
-					:activeDates="props.activeDates"
-					:dates="props.dates"
-					:keysForDyn="props.keysForDyn"
-					:values="props.values"
-					:hideChartInMobile="true"
-				/>
-			</TopMiniCharts>
-		</div>
-
-	</div>
-</template>
-

package/src/components/charts/miniCharts/styles/miniCharts.css

@@ -1,32 +0,0 @@
-.top-miniCharts { position: relative; max-width: 1650px; height: 100%; overflow: hidden; row-gap: var(--top-gap-2); display: flex; flex-wrap: wrap; flex-grow: 1; }
-
-.top-miniCharts_pages {
-	height: 100%; margin-left: -6px;
-	position: sticky; top: 0; left: calc(100% - 6px); order: -1;
-	display: flex; flex-direction: column; justify-content: center;
-}
-.top-miniCharts_pages > span { cursor: pointer; border-radius: 50%; background: var(--color-layer-primary-2); width: 6px; height: 6px; margin: 8px 0 0; }
-.top-miniCharts_pages > span:first-child { margin-top: 0; }
-.top-miniCharts_pages > span.top-active,
-.top-miniCharts_pages > span:hover { background: var(--color-text-primary); }
-
-.top-miniCharts_tooltip {
-	cursor: default;
-	box-shadow: var(--top-shadow-b);
-	border-radius: var(--top-radius-2); background: var(--content-background-color); padding: var(--top-padding-2);
-	font-size: 12px; white-space: nowrap;
-	position: absolute; top: 0; left: 0; overflow: hidden; z-index: 200000;
-	display: flex; gap: 0 var(--top-gap-2); align-items: center;
-	transition: 0.2s;
-	pointer-events: none;
-}
-.top-miniCharts_tooltip > span:first-child { color: var(--color-text-3); }
-
-@media only screen and (max-width: 900px) {
-	.top-miniCharts_hideChartInMobile {
-		border: none; background: none; width: 100%; padding: 0;
-		gap: var(--top-gap-2); flex-grow: 1; flex-wrap: nowrap; overflow: hidden;
-	}
-
-	.top-miniCharts_hideChartInMobile > .top-miniCharts_pages { display: none; }
-}