dxd-style-code 0.1.7 → 0.1.8

package/src/components/organisms/DXChartContainer/DXChartContainer.stories.js

@@ -0,0 +1,286 @@
+import { ref } from 'vue';
+import DXChartContainer from './DXChartContainer.vue';
+import DXButton from '../../atoms/DXButton/DXButton.vue';
+import DXSelect from '../../molecules/DXSelect/DXSelect.vue';
+
+export default {
+  title: 'Organisms/DXChartContainer',
+  component: DXChartContainer,
+  tags: ['autodocs'],
+  parameters: {
+    docs: {
+      description: {
+        component: `
+# DXChartContainer
+
+Контейнер для графиков с легендой, контролами и настройками отображения.
+
+## Назначение
+
+DXChartContainer предоставляет UI-обертку для графиков различных библиотек (Chart.js, ApexCharts, ECharts и т.д.).
+Включает легенду, контролы и структуру для размещения графика.
+
+## Архитектура
+
+### Использует
+- \`DXCard\` - как базовый контейнер
+- \`DXSelect\` - для выбора типа графика
+- \`DXButton\` - для контролов
+- \`useClassComposition\` composable - для стилей
+- \`useSpacing\` composable - для отступов
+
+### Используется в
+- \`DXDashboardWidget\` - для виджетов с графиками
+- Отчеты с графиками
+- Дашборды с аналитикой
+
+## Внутренняя логика
+
+### Слоты
+- **chart**: Основной слот для размещения графика (обязателен)
+- **header**: Слот для кастомного заголовка
+- **controls**: Слот для кастомных контролов
+- **legend**: Слот для кастомной легенды
+
+### Легенда
+Легенда поддерживает переключение видимости серий через клик.
+
+### Контролы
+Можно добавить кастомные контролы через slot или использовать встроенный селект типов графиков.
+
+## Особенности
+
+### Независимость от библиотек
+Компонент не зависит от конкретной библиотеки графиков. Пользователь сам подключает библиотеку в slot "chart".
+
+### Гибкость
+Все элементы (заголовок, контролы, легенда) можно кастомизировать через slots.
+        `,
+      },
+    },
+  },
+  argTypes: {
+    type: {
+      control: 'text',
+      description: 'Тип графика (для информации, не влияет на рендеринг).',
+      table: {
+        type: { summary: 'string' },
+        defaultValue: { summary: 'line' },
+        category: 'Content',
+      },
+    },
+    legend: {
+      control: 'boolean',
+      description: 'Показывать легенду.',
+      table: {
+        type: { summary: 'boolean' },
+        defaultValue: { summary: 'true' },
+        category: 'Display',
+      },
+    },
+    controls: {
+      control: 'boolean',
+      description: 'Показывать контролы.',
+      table: {
+        type: { summary: 'boolean' },
+        defaultValue: { summary: 'false' },
+        category: 'Display',
+      },
+    },
+    height: {
+      control: 'text',
+      description: 'Высота графика.',
+      table: {
+        type: { summary: 'string' },
+        defaultValue: { summary: '400px' },
+        category: 'Display',
+      },
+    },
+  },
+};
+
+export const Default = {
+  args: {
+    title: 'График продаж',
+    legend: true,
+    controls: false,
+  },
+  parameters: {
+    docs: {
+      description: {
+        story: 'Базовый контейнер графика с заголовком и легендой. Используйте slot "chart" для вашей библиотеки графиков.',
+      },
+    },
+  },
+  render: (args) => ({
+    components: { DXChartContainer },
+    setup() {
+      const legendData = ref([
+        { label: 'Продажи', color: 'bg-blue-500', visible: true },
+        { label: 'Затраты', color: 'bg-red-500', visible: true },
+      ]);
+      
+      return { args, legendData };
+    },
+    template: `
+      <DXChartContainer v-bind="args" :legend-data="legendData">
+        <template #chart>
+          <div class="flex items-center justify-center h-full bg-slate-50 rounded-lg border-2 border-dashed border-slate-300">
+            <p class="text-slate-500 text-sm">Ваш график здесь</p>
+          </div>
+        </template>
+      </DXChartContainer>
+    `,
+  }),
+};
+
+export const WithControls = {
+  parameters: {
+    docs: {
+      description: {
+        story: 'Контейнер с контролами для выбора типа графика.',
+      },
+    },
+  },
+  render: () => ({
+    components: { DXChartContainer, DXSelect, DXButton },
+    setup() {
+      const chartType = ref('line');
+      const chartTypes = ref([
+        { value: 'line', label: 'Линейный' },
+        { value: 'bar', label: 'Столбчатый' },
+        { value: 'pie', label: 'Круговой' },
+      ]);
+      
+      const handleChartTypeChange = (newType) => {
+        console.log('Тип графика изменен:', newType);
+        chartType.value = newType;
+      };
+      
+      const handleExport = () => {
+        console.log('Экспорт графика');
+      };
+      
+      return { chartType, chartTypes, handleChartTypeChange, handleExport };
+    },
+    template: `
+      <DXChartContainer
+        title="График продаж"
+        :type="chartType"
+        :controls="true"
+        :chart-types="chartTypes"
+        @chart-type-change="handleChartTypeChange"
+        @export="handleExport"
+      >
+        <template #chart>
+          <div class="flex items-center justify-center h-full bg-slate-50 rounded-lg border-2 border-dashed border-slate-300">
+            <p class="text-slate-500 text-sm">График типа: {{ chartType }}</p>
+          </div>
+        </template>
+        <template #controls>
+          <DXButton variant="ghost" size="sm" @click="handleExport">
+            Экспорт
+          </DXButton>
+        </template>
+      </DXChartContainer>
+    `,
+  }),
+};
+
+export const WithLegend = {
+  parameters: {
+    docs: {
+      description: {
+        story: 'Контейнер с интерактивной легендой. Клик по элементу легенды переключает его видимость.',
+      },
+    },
+  },
+  render: () => ({
+    components: { DXChartContainer },
+    setup() {
+      const legendData = ref([
+        { label: 'Продажи', color: 'bg-blue-500', visible: true },
+        { label: 'Затраты', color: 'bg-red-500', visible: true },
+        { label: 'Прибыль', color: 'bg-green-500', visible: true },
+      ]);
+      
+      const handleLegendToggle = ({ index, visible }) => {
+        console.log('Легенда переключена:', index, visible);
+        legendData.value[index].visible = visible;
+      };
+      
+      return { legendData, handleLegendToggle };
+    },
+    template: `
+      <DXChartContainer
+        title="График продаж"
+        :legend="true"
+        :legend-data="legendData"
+        @legend-toggle="handleLegendToggle"
+      >
+        <template #chart>
+          <div class="flex items-center justify-center h-full bg-slate-50 rounded-lg border-2 border-dashed border-slate-300">
+            <p class="text-slate-500 text-sm">График с легендой</p>
+          </div>
+        </template>
+      </DXChartContainer>
+    `,
+  }),
+};
+
+export const CustomHeight = {
+  parameters: {
+    docs: {
+      description: {
+        story: 'Контейнер с кастомной высотой графика.',
+      },
+    },
+  },
+  render: () => ({
+    components: { DXChartContainer },
+    setup() {
+      return {};
+    },
+    template: `
+      <DXChartContainer
+        title="Высокий график"
+        height="600px"
+      >
+        <template #chart>
+          <div class="flex items-center justify-center h-full bg-slate-50 rounded-lg border-2 border-dashed border-slate-300">
+            <p class="text-slate-500 text-sm">Высота: 600px</p>
+          </div>
+        </template>
+      </DXChartContainer>
+    `,
+  }),
+};
+
+export const WithoutLegend = {
+  parameters: {
+    docs: {
+      description: {
+        story: 'Контейнер без легенды.',
+      },
+    },
+  },
+  render: () => ({
+    components: { DXChartContainer },
+    setup() {
+      return {};
+    },
+    template: `
+      <DXChartContainer
+        title="График без легенды"
+        :legend="false"
+      >
+        <template #chart>
+          <div class="flex items-center justify-center h-full bg-slate-50 rounded-lg border-2 border-dashed border-slate-300">
+            <p class="text-slate-500 text-sm">График без легенды</p>
+          </div>
+        </template>
+      </DXChartContainer>
+    `,
+  }),
+};
+

package/src/components/organisms/DXChartContainer/DXChartContainer.vue

@@ -0,0 +1,273 @@
+<template>
+  <DXCard
+    :class="containerClasses"
+    :variant="cardVariant"
+    :padding="padding"
+    data-component="DXChartContainer"
+    :data-type="type"
+  >
+    <!-- Заголовок -->
+    <div v-if="title || $slots.header" :class="headerClasses">
+      <slot name="header">
+        <h3 v-if="title" class="text-lg font-semibold text-slate-900">
+          {{ title }}
+        </h3>
+      </slot>
+    </div>
+
+    <!-- Контролы -->
+    <div v-if="controls || $slots.controls" :class="controlsClasses">
+      <slot name="controls">
+        <div class="flex items-center gap-2">
+          <DXSelect
+            v-if="chartTypes && chartTypes.length > 0"
+            v-model="internalChartType"
+            :options="chartTypes"
+            size="sm"
+            @update:model-value="handleChartTypeChange"
+          />
+        </div>
+      </slot>
+    </div>
+
+    <!-- График -->
+    <div :class="chartClasses" :style="chartStyles">
+      <slot name="chart">
+        <div class="flex items-center justify-center h-full text-slate-400">
+          <p class="text-sm">Используйте slot "chart" для вашей библиотеки графиков</p>
+        </div>
+      </slot>
+    </div>
+
+    <!-- Легенда -->
+    <div v-if="legend && (legendData || $slots.legend)" :class="legendClasses">
+      <slot name="legend">
+        <div class="flex flex-wrap items-center gap-4">
+          <div
+            v-for="(item, index) in legendData"
+            :key="index"
+            :class="legendItemClasses"
+            @click="toggleLegendItem(index)"
+          >
+            <div
+              :class="[
+                'w-3 h-3 rounded-full',
+                item.color || 'bg-slate-400',
+                { 'opacity-50': !item.visible },
+              ]"
+            ></div>
+            <span
+              :class="[
+                'text-sm text-slate-700',
+                { 'line-through opacity-50': !item.visible },
+              ]"
+            >
+              {{ item.label }}
+            </span>
+          </div>
+        </div>
+      </slot>
+    </div>
+  </DXCard>
+</template>
+
+<script setup>
+import { ref, computed, watch } from "vue";
+import { useClassComposition } from "@/composables/useClassComposition";
+import { useSpacing } from "@/composables/useSpacing";
+import DXCard from "../../atoms/DXCard/DXCard.vue";
+import DXSelect from "../../molecules/DXSelect/DXSelect.vue";
+
+const props = defineProps({
+  /**
+   * Тип графика (для информации, не влияет на рендеринг)
+   */
+  type: { type: String, default: "line" },
+  /**
+   * Данные графика (передаются в slot для использования библиотекой)
+   */
+  data: { type: Object, default: () => ({}) },
+  /**
+   * Опции графика (передаются в slot для использования библиотекой)
+   */
+  options: { type: Object, default: () => ({}) },
+  /**
+   * Заголовок графика
+   */
+  title: { type: String, default: "" },
+  /**
+   * Показывать легенду
+   * @default true
+   */
+  legend: { type: Boolean, default: true },
+  /**
+   * Данные легенды
+   * Формат: [{ label, color, visible }]
+   */
+  legendData: {
+    type: Array,
+    default: () => [],
+  },
+  /**
+   * Показывать контролы
+   * @default false
+   */
+  controls: { type: Boolean, default: false },
+  /**
+   * Типы графиков для селекта
+   * Формат: [{ value, label }]
+   */
+  chartTypes: {
+    type: Array,
+    default: () => [],
+  },
+  /**
+   * Высота графика
+   */
+  height: { type: String, default: "400px" },
+  /**
+   * Вариант DXCard
+   * @default 'default'
+   */
+  cardVariant: {
+    type: String,
+    default: "default",
+    validator: (v) => ["default", "bordered", "elevated", "flat"].includes(v),
+  },
+  /**
+   * Padding для DXCard
+   * @default 'md'
+   */
+  padding: {
+    type: String,
+    default: "md",
+    validator: (v) => ["none", "xs", "sm", "md", "lg", "xl"].includes(v),
+  },
+});
+
+const emit = defineEmits(["export", "legend-toggle", "chart-type-change"]);
+
+const internalChartType = ref(props.type);
+
+/**
+ * Классы для контейнера
+ * 
+ * @description
+ * Базовые классы для контейнера графика.
+ * 
+ * @returns {Array} Массив классов
+ */
+const containerClasses = computed(() => useClassComposition("w-full"));
+
+/**
+ * Классы для header
+ * 
+ * @description
+ * Классы для секции заголовка.
+ * 
+ * @returns {Array} Массив классов
+ */
+const headerClasses = computed(() =>
+  useClassComposition("mb-4")
+);
+
+/**
+ * Классы для контролов
+ * 
+ * @description
+ * Классы для секции контролов.
+ * 
+ * @returns {Array} Массив классов
+ */
+const controlsClasses = computed(() =>
+  useClassComposition("mb-4 flex items-center justify-end gap-2")
+);
+
+/**
+ * Классы для области графика
+ * 
+ * @description
+ * Классы для области отображения графика.
+ * 
+ * @returns {Array} Массив классов
+ */
+const chartClasses = computed(() =>
+  useClassComposition("w-full relative")
+);
+
+/**
+ * Стили для области графика
+ * 
+ * @description
+ * Инлайн стили для высоты графика.
+ * 
+ * @returns {Object} Объект стилей
+ */
+const chartStyles = computed(() => ({
+  height: props.height,
+  minHeight: props.height,
+}));
+
+/**
+ * Классы для легенды
+ * 
+ * @description
+ * Классы для секции легенды.
+ * 
+ * @returns {Array} Массив классов
+ */
+const legendClasses = computed(() =>
+  useClassComposition("mt-4 pt-4 border-t border-slate-200")
+);
+
+/**
+ * Классы для элемента легенды
+ * 
+ * @description
+ * Классы для каждого элемента легенды.
+ * 
+ * @returns {Array} Массив классов
+ */
+const legendItemClasses = computed(() =>
+  useClassComposition(
+    "flex items-center gap-2 cursor-pointer hover:opacity-80 transition-opacity"
+  )
+);
+
+/**
+ * Переключение видимости элемента легенды
+ * 
+ * @description
+ * Переключает видимость элемента легенды и эмитит событие.
+ * 
+ * @param {number} index - Индекс элемента легенды
+ */
+function toggleLegendItem(index) {
+  if (props.legendData && props.legendData[index]) {
+    const item = props.legendData[index];
+    item.visible = !item.visible;
+    emit("legend-toggle", { index, item, visible: item.visible });
+  }
+}
+
+/**
+ * Обработчик изменения типа графика
+ * 
+ * @description
+ * Обрабатывает изменение типа графика через селект.
+ * 
+ * @param {string} newType - Новый тип графика
+ */
+function handleChartTypeChange(newType) {
+  emit("chart-type-change", newType);
+}
+
+// Синхронизация с prop type
+watch(
+  () => props.type,
+  (newType) => {
+    internalChartType.value = newType;
+  }
+);
+</script>
+

package/src/components/organisms/DXChartContainer/index.js

@@ -0,0 +1,2 @@
+export { default } from './DXChartContainer.vue';
+