@eturnity/eturnity_reusable_components 8.16.8-EPDM-EPDM-14492.0 → 8.16.9-EPDM-13618.0

package/src/components/barchart/index.vue

@@ -1,385 +1,385 @@
-<template>
-  <Container :class="`barchart-${chartId}`" :width="width">
-    <ChartControlsWrapper
-      v-if="isChartControlsShown('top')"
-      :position="chartControlsPosition"
-    >
-      <ChartControls
-        :is-legend-shown="isLegendShown"
-        :legends-item-per-row="legendsItemPerRow"
-        :position="chartControlsPosition"
-        :selected-split-button="selectedSplitButton"
-        :series="series"
-        :split-button-options="splitButtonOptions"
-        :stacked-colors="getStackedColors"
-        :y-axis-width="yAxisWidth"
-        @select-split-button="handleSelectSplitButton"
-      />
-    </ChartControlsWrapper>
-    <GraphSection :height="height" :width="width">
-      <YAxis :width="yAxisWidth" :height="height">
-        <YAxisTitleWrapper v-if="yAxisTitle" :height="yAxisHeight">
-          {{ yAxisTitle }}
-        </YAxisTitleWrapper>
-        <YAxisRow
-          v-for="label in yAxisLabels"
-          :key="label"
-          :percentage="
-            Number(
-              ((label / yAxisLabels[yAxisLabels.length - 1]) * 100).toFixed(4)
-            )
-          "
-        >
-          <YAxisLabel>{{ label }}</YAxisLabel>
-          <YAxisLine :y-axis-width="yAxisWidth" />
-        </YAxisRow>
-      </YAxis>
-
-      <ScrollContainer
-        :class="`chart-scroll-container-${chartId}`"
-        :is-scrollable="isScrollable"
-        :height="height"
-        @scroll="handleChartScroll"
-      >
-        <ChartContent
-          ref="chartContent"
-          :bar-width="barWidth"
-          :height="height"
-          :is-scrollable="isScrollable"
-          :total-bars="normalizedData.length"
-        >
-          <LoadingOverlay v-if="isLoading">
-            <Spinner size="60px" />
-          </LoadingOverlay>
-          <SelectionBox
-            v-if="selectionSize && isSelectionEnabled"
-            :bar-width="barWidth"
-            :bars-to-show="selectionSize"
-            :container-width="chartContentWidth"
-            :is-scrollable="isScrollable"
-            :total-bars="normalizedData.length"
-            @drag-end="handleSelectionDragEnd"
-            @update-selection="updateSelectedBars"
-          />
-          <BarsContainer>
-            <BarGroup
-              v-for="(item, index) in normalizedData"
-              :bar-width="barWidth"
-              class="bar-group"
-              :is-scrollable="isScrollable"
-              :key="index"
-            >
-              <BarWrapper>
-                <BarSegment
-                  v-for="(segment, segIndex) in item.segments"
-                  class="bar-segment"
-                  :gradient-from="getSegmentGradient(index, segment).from"
-                  :gradient-to="getSegmentGradient(index, segment).to"
-                  :height="`${segment.percentage}%`"
-                  :key="segIndex"
-                  :z-index="item.segments.length - segIndex"
-                  @mouseenter="showTooltip(item, $event, series)"
-                  @mouseleave="hideTooltip"
-                />
-              </BarWrapper>
-              <XAxisLine />
-              <XAxisLabelHighlight v-if="isSelectionBoundary(index)">
-                {{ item.label }}
-              </XAxisLabelHighlight>
-              <XAxisLabel v-else>{{ item.label }}</XAxisLabel>
-            </BarGroup>
-          </BarsContainer>
-        </ChartContent>
-      </ScrollContainer>
-      <Tooltip
-        v-if="showTooltipContent"
-        :left="tooltipStyle.left"
-        :top="tooltipStyle.top"
-      >
-        <slot :item="tooltipData" name="tooltip" />
-        <TooltipTextWrapper v-if="!slots.tooltip && tooltipData">
-          <template v-if="!series.length">
-            <TooltipText font-weight="500">{{ tooltipData.label }}</TooltipText>
-            <TooltipText>
-              {{ handleValueFormatter(tooltipData.segments[0].value) }}
-            </TooltipText>
-          </template>
-
-          <template v-else>
-            <TooltipRow>
-              <TooltipText font-weight="500">{{
-                tooltipData.label
-              }}</TooltipText>
-              <TooltipText>
-                {{
-                  handleValueFormatter(
-                    getTotalSegmentValue(tooltipData.segments)
-                  )
-                }}
-              </TooltipText>
-            </TooltipRow>
-            <template
-              v-for="(segment, index) in [...tooltipData.segments].reverse()"
-              :key="index"
-            >
-              <TooltipRow>
-                <TooltipGradientBox
-                  :gradient-from="segment.gradientFrom"
-                  :gradient-to="segment.gradientTo"
-                />
-                <TooltipText>
-                  {{ handleValueFormatter(segment.value) }}
-                </TooltipText>
-              </TooltipRow>
-            </template>
-          </template>
-        </TooltipTextWrapper>
-      </Tooltip>
-    </GraphSection>
-    <ChartControlsWrapper
-      v-if="isChartControlsShown('bottom')"
-      :position="chartControlsPosition"
-    >
-      <ChartControls
-        :is-legend-shown="isLegendShown"
-        :legends-item-per-row="legendsItemPerRow"
-        :position="chartControlsPosition"
-        :selected-split-button="selectedSplitButton"
-        :series="series"
-        :split-button-options="splitButtonOptions"
-        :stacked-colors="getStackedColors"
-        :y-axis-width="yAxisWidth"
-        @select-split-button="handleSelectSplitButton"
-      />
-    </ChartControlsWrapper>
-    <BottomFields
-      v-if="isBottomFieldsShown"
-      :bar-width="barWidth"
-      :chart-id="chartId"
-      :data="data"
-      :field-mode="fieldMode"
-      :is-chart-controls-shown-in-bottom="isChartControlsShown('bottom')"
-      :is-scrollable="isScrollable"
-      :series="series"
-      :y-axis-width="yAxisWidth"
-      @input-blur="handleInputBlur"
-      @input-blur-all="handleInputBlurAll"
-      @input-focus="showTooltipFromInput"
-      @sync-scroll="handleBottomFieldsScroll"
-    />
-  </Container>
-</template>
-
-<script setup>
-  import { useSlots, computed } from 'vue'
-
-  import ChartControls from './ChartControls'
-  import BottomFields from './BottomFields'
-  import SelectionBox from './SelectionBox'
-  import Spinner from '../spinner'
-
-  import {
-    useTooltip,
-    useChartData,
-    useAxisCalculations,
-    useSelection,
-    useChartScroll,
-  } from './composables'
-
-  import {
-    Container,
-    GraphSection,
-    YAxis,
-    YAxisRow,
-    YAxisLabel,
-    YAxisLine,
-    YAxisTitleWrapper,
-    ScrollContainer,
-    ChartContent,
-    BarsContainer,
-    BarGroup,
-    BarWrapper,
-    BarSegment,
-    XAxisLabel,
-    XAxisLabelHighlight,
-    XAxisLine,
-    Tooltip,
-    TooltipText,
-    TooltipTextWrapper,
-    TooltipRow,
-    TooltipGradientBox,
-    ChartControlsWrapper,
-    LoadingOverlay,
-  } from './styles/chart'
-
-  const props = defineProps({
-    data: {
-      type: Array,
-      default: () => [],
-      validator: (value, ...args) => value.every((item) => 'label' in item),
-    },
-    series: {
-      type: Array,
-      default: () => [],
-      validator: (value) =>
-        value.every(
-          (item) => 'name' in item && 'data' in item && Array.isArray(item.data)
-        ),
-    },
-    width: {
-      type: String,
-      default: '100%',
-    },
-    height: {
-      type: String,
-      default: '400px',
-    },
-    barWidth: {
-      type: Number,
-      default: 60,
-    },
-    steps: {
-      type: Number,
-      default: null,
-    },
-    yAxisTitle: {
-      type: String,
-      default: '',
-    },
-    valueFormatter: {
-      type: Function,
-      default: null,
-    },
-    isLegendShown: {
-      type: Boolean,
-      default: false,
-    },
-    legendsItemPerRow: {
-      type: Number,
-      default: 4,
-    },
-    chartControlsPosition: {
-      type: String,
-      default: 'top',
-      validator: (value) => ['top', 'bottom'].includes(value),
-    },
-    splitButtonOptions: {
-      type: Array,
-      default: () => [],
-    },
-    selectedSplitButton: {
-      type: String,
-      default: '',
-    },
-    isScrollable: {
-      type: Boolean,
-      default: true,
-    },
-    isBottomFieldsShown: {
-      type: Boolean,
-      default: false,
-    },
-    selectionSize: {
-      type: Number,
-      default: 0,
-    },
-    isSelectionEnabled: {
-      type: Boolean,
-      default: false,
-    },
-    fieldMode: {
-      type: String,
-      default: 'absolute',
-      validator: (value) => ['absolute', 'percentage'].includes(value),
-    },
-    isLoading: {
-      type: Boolean,
-      default: false,
-    },
-  })
-
-  const generateChartId = () =>
-    `chart-${Date.now()}-${Math.floor(Math.random() * 1000)}`
-  const chartId = generateChartId()
-
-  const maxDataValue = computed(() => {
-    if (!props.data.length) return 0
-
-    return Math.max(
-      ...props.data.map((item) =>
-        props.series.length
-          ? props.series.reduce(
-              (sum, series) =>
-                sum +
-                (series.data.find((d) => d.label === item.label)?.value || 0),
-              0
-            )
-          : item.value
-      )
-    )
-  })
-
-  const {
-    yAxisLabels,
-    yAxisHeight,
-    yAxisWidth,
-    isChartControlsShown,
-    paddedMaxValue,
-  } = useAxisCalculations(props, maxDataValue)
-
-  const { normalizedData, getStackedColors, getTotalSegmentValue } =
-    useChartData(props, paddedMaxValue)
-
-  const {
-    updateSelectedBars,
-    handleSelectionDragEnd,
-    isSelectionBoundary,
-    getSegmentGradient,
-  } = useSelection(props, normalizedData, emit)
-
-  const {
-    showTooltipContent,
-    showTooltip,
-    hideTooltip,
-    tooltipData,
-    tooltipStyle,
-    isInputFocused,
-    focusedBarData,
-    showTooltipFromInput,
-    handleInputBlurAll,
-  } = useTooltip(chartId, normalizedData)
-
-  const {
-    chartContent,
-    chartContentWidth,
-    handleChartScroll,
-    handleBottomFieldsScroll,
-  } = useChartScroll(
-    chartId,
-    isInputFocused,
-    focusedBarData,
-    showTooltipFromInput
-  )
-
-  const emit = defineEmits([
-    'select-split-button',
-    'selection-change',
-    'input-blur',
-  ])
-
-  const slots = useSlots()
-
-  const handleSelectSplitButton = (value) => {
-    emit('select-split-button', value)
-  }
-
-  const handleInputBlur = (payload) => {
-    emit('input-blur', payload)
-  }
-
-  const handleValueFormatter = (value) => {
-    return props.valueFormatter
-      ? props.valueFormatter(Math.round(value))
-      : value
-  }
-</script>
+<template>
+  <Container :class="`barchart-${chartId}`" :width="width">
+    <ChartControlsWrapper
+      v-if="isChartControlsShown('top')"
+      :position="chartControlsPosition"
+    >
+      <ChartControls
+        :is-legend-shown="isLegendShown"
+        :legends-item-per-row="legendsItemPerRow"
+        :position="chartControlsPosition"
+        :selected-split-button="selectedSplitButton"
+        :series="series"
+        :split-button-options="splitButtonOptions"
+        :stacked-colors="getStackedColors"
+        :y-axis-width="yAxisWidth"
+        @select-split-button="handleSelectSplitButton"
+      />
+    </ChartControlsWrapper>
+    <GraphSection :height="height" :width="width">
+      <YAxis :width="yAxisWidth" :height="height">
+        <YAxisTitleWrapper v-if="yAxisTitle" :height="yAxisHeight">
+          {{ yAxisTitle }}
+        </YAxisTitleWrapper>
+        <YAxisRow
+          v-for="label in yAxisLabels"
+          :key="label"
+          :percentage="
+            Number(
+              ((label / yAxisLabels[yAxisLabels.length - 1]) * 100).toFixed(4)
+            )
+          "
+        >
+          <YAxisLabel>{{ label }}</YAxisLabel>
+          <YAxisLine :y-axis-width="yAxisWidth" />
+        </YAxisRow>
+      </YAxis>
+
+      <ScrollContainer
+        :class="`chart-scroll-container-${chartId}`"
+        :is-scrollable="isScrollable"
+        :height="height"
+        @scroll="handleChartScroll"
+      >
+        <ChartContent
+          ref="chartContent"
+          :bar-width="barWidth"
+          :height="height"
+          :is-scrollable="isScrollable"
+          :total-bars="normalizedData.length"
+        >
+          <LoadingOverlay v-if="isLoading">
+            <Spinner size="60px" />
+          </LoadingOverlay>
+          <SelectionBox
+            v-if="selectionSize && isSelectionEnabled"
+            :bar-width="barWidth"
+            :bars-to-show="selectionSize"
+            :container-width="chartContentWidth"
+            :is-scrollable="isScrollable"
+            :total-bars="normalizedData.length"
+            @drag-end="handleSelectionDragEnd"
+            @update-selection="updateSelectedBars"
+          />
+          <BarsContainer>
+            <BarGroup
+              v-for="(item, index) in normalizedData"
+              :bar-width="barWidth"
+              class="bar-group"
+              :is-scrollable="isScrollable"
+              :key="index"
+            >
+              <BarWrapper>
+                <BarSegment
+                  v-for="(segment, segIndex) in item.segments"
+                  class="bar-segment"
+                  :gradient-from="getSegmentGradient(index, segment).from"
+                  :gradient-to="getSegmentGradient(index, segment).to"
+                  :height="`${segment.percentage}%`"
+                  :key="segIndex"
+                  :z-index="item.segments.length - segIndex"
+                  @mouseenter="showTooltip(item, $event, series)"
+                  @mouseleave="hideTooltip"
+                />
+              </BarWrapper>
+              <XAxisLine />
+              <XAxisLabelHighlight v-if="isSelectionBoundary(index)">
+                {{ item.label }}
+              </XAxisLabelHighlight>
+              <XAxisLabel v-else>{{ item.label }}</XAxisLabel>
+            </BarGroup>
+          </BarsContainer>
+        </ChartContent>
+      </ScrollContainer>
+      <Tooltip
+        v-if="showTooltipContent"
+        :left="tooltipStyle.left"
+        :top="tooltipStyle.top"
+      >
+        <slot :item="tooltipData" name="tooltip" />
+        <TooltipTextWrapper v-if="!slots.tooltip && tooltipData">
+          <template v-if="!series.length">
+            <TooltipText font-weight="500">{{ tooltipData.label }}</TooltipText>
+            <TooltipText>
+              {{ handleValueFormatter(tooltipData.segments[0].value) }}
+            </TooltipText>
+          </template>
+
+          <template v-else>
+            <TooltipRow>
+              <TooltipText font-weight="500">{{
+                tooltipData.label
+              }}</TooltipText>
+              <TooltipText>
+                {{
+                  handleValueFormatter(
+                    getTotalSegmentValue(tooltipData.segments)
+                  )
+                }}
+              </TooltipText>
+            </TooltipRow>
+            <template
+              v-for="(segment, index) in [...tooltipData.segments].reverse()"
+              :key="index"
+            >
+              <TooltipRow>
+                <TooltipGradientBox
+                  :gradient-from="segment.gradientFrom"
+                  :gradient-to="segment.gradientTo"
+                />
+                <TooltipText>
+                  {{ handleValueFormatter(segment.value) }}
+                </TooltipText>
+              </TooltipRow>
+            </template>
+          </template>
+        </TooltipTextWrapper>
+      </Tooltip>
+    </GraphSection>
+    <ChartControlsWrapper
+      v-if="isChartControlsShown('bottom')"
+      :position="chartControlsPosition"
+    >
+      <ChartControls
+        :is-legend-shown="isLegendShown"
+        :legends-item-per-row="legendsItemPerRow"
+        :position="chartControlsPosition"
+        :selected-split-button="selectedSplitButton"
+        :series="series"
+        :split-button-options="splitButtonOptions"
+        :stacked-colors="getStackedColors"
+        :y-axis-width="yAxisWidth"
+        @select-split-button="handleSelectSplitButton"
+      />
+    </ChartControlsWrapper>
+    <BottomFields
+      v-if="isBottomFieldsShown"
+      :bar-width="barWidth"
+      :chart-id="chartId"
+      :data="data"
+      :field-mode="fieldMode"
+      :is-chart-controls-shown-in-bottom="isChartControlsShown('bottom')"
+      :is-scrollable="isScrollable"
+      :series="series"
+      :y-axis-width="yAxisWidth"
+      @input-blur="handleInputBlur"
+      @input-blur-all="handleInputBlurAll"
+      @input-focus="showTooltipFromInput"
+      @sync-scroll="handleBottomFieldsScroll"
+    />
+  </Container>
+</template>
+
+<script setup>
+  import { useSlots, computed } from 'vue'
+
+  import ChartControls from './ChartControls'
+  import BottomFields from './BottomFields'
+  import SelectionBox from './SelectionBox'
+  import Spinner from '../spinner'
+
+  import {
+    useTooltip,
+    useChartData,
+    useAxisCalculations,
+    useSelection,
+    useChartScroll,
+  } from './composables'
+
+  import {
+    Container,
+    GraphSection,
+    YAxis,
+    YAxisRow,
+    YAxisLabel,
+    YAxisLine,
+    YAxisTitleWrapper,
+    ScrollContainer,
+    ChartContent,
+    BarsContainer,
+    BarGroup,
+    BarWrapper,
+    BarSegment,
+    XAxisLabel,
+    XAxisLabelHighlight,
+    XAxisLine,
+    Tooltip,
+    TooltipText,
+    TooltipTextWrapper,
+    TooltipRow,
+    TooltipGradientBox,
+    ChartControlsWrapper,
+    LoadingOverlay,
+  } from './styles/chart'
+
+  const props = defineProps({
+    data: {
+      type: Array,
+      default: () => [],
+      validator: (value, ...args) => value.every((item) => 'label' in item),
+    },
+    series: {
+      type: Array,
+      default: () => [],
+      validator: (value) =>
+        value.every(
+          (item) => 'name' in item && 'data' in item && Array.isArray(item.data)
+        ),
+    },
+    width: {
+      type: String,
+      default: '100%',
+    },
+    height: {
+      type: String,
+      default: '400px',
+    },
+    barWidth: {
+      type: Number,
+      default: 60,
+    },
+    steps: {
+      type: Number,
+      default: null,
+    },
+    yAxisTitle: {
+      type: String,
+      default: '',
+    },
+    valueFormatter: {
+      type: Function,
+      default: null,
+    },
+    isLegendShown: {
+      type: Boolean,
+      default: false,
+    },
+    legendsItemPerRow: {
+      type: Number,
+      default: 4,
+    },
+    chartControlsPosition: {
+      type: String,
+      default: 'top',
+      validator: (value) => ['top', 'bottom'].includes(value),
+    },
+    splitButtonOptions: {
+      type: Array,
+      default: () => [],
+    },
+    selectedSplitButton: {
+      type: String,
+      default: '',
+    },
+    isScrollable: {
+      type: Boolean,
+      default: true,
+    },
+    isBottomFieldsShown: {
+      type: Boolean,
+      default: false,
+    },
+    selectionSize: {
+      type: Number,
+      default: 0,
+    },
+    isSelectionEnabled: {
+      type: Boolean,
+      default: false,
+    },
+    fieldMode: {
+      type: String,
+      default: 'absolute',
+      validator: (value) => ['absolute', 'percentage'].includes(value),
+    },
+    isLoading: {
+      type: Boolean,
+      default: false,
+    },
+  })
+
+  const generateChartId = () =>
+    `chart-${Date.now()}-${Math.floor(Math.random() * 1000)}`
+  const chartId = generateChartId()
+
+  const maxDataValue = computed(() => {
+    if (!props.data.length) return 0
+
+    return Math.max(
+      ...props.data.map((item) =>
+        props.series.length
+          ? props.series.reduce(
+              (sum, series) =>
+                sum +
+                (series.data.find((d) => d.label === item.label)?.value || 0),
+              0
+            )
+          : item.value
+      )
+    )
+  })
+
+  const {
+    yAxisLabels,
+    yAxisHeight,
+    yAxisWidth,
+    isChartControlsShown,
+    paddedMaxValue,
+  } = useAxisCalculations(props, maxDataValue)
+
+  const { normalizedData, getStackedColors, getTotalSegmentValue } =
+    useChartData(props, paddedMaxValue)
+
+  const {
+    updateSelectedBars,
+    handleSelectionDragEnd,
+    isSelectionBoundary,
+    getSegmentGradient,
+  } = useSelection(props, normalizedData, emit)
+
+  const {
+    showTooltipContent,
+    showTooltip,
+    hideTooltip,
+    tooltipData,
+    tooltipStyle,
+    isInputFocused,
+    focusedBarData,
+    showTooltipFromInput,
+    handleInputBlurAll,
+  } = useTooltip(chartId, normalizedData)
+
+  const {
+    chartContent,
+    chartContentWidth,
+    handleChartScroll,
+    handleBottomFieldsScroll,
+  } = useChartScroll(
+    chartId,
+    isInputFocused,
+    focusedBarData,
+    showTooltipFromInput
+  )
+
+  const emit = defineEmits([
+    'select-split-button',
+    'selection-change',
+    'input-blur',
+  ])
+
+  const slots = useSlots()
+
+  const handleSelectSplitButton = (value) => {
+    emit('select-split-button', value)
+  }
+
+  const handleInputBlur = (payload) => {
+    emit('input-blur', payload)
+  }
+
+  const handleValueFormatter = (value) => {
+    return props.valueFormatter
+      ? props.valueFormatter(Math.round(value))
+      : value
+  }
+</script>