@eturnity/eturnity_reusable_components 8.13.13-qa-16-03-26.1 → 8.16.0

package/src/components/barchart/index.vue

@@ -1,376 +0,0 @@
-<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"
-        >
-          <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 {
-    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,
-  } 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),
-    },
-  })
-
-  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>

package/src/components/barchart/styles/bottomFields.js

@@ -1,66 +0,0 @@
-import styled from 'vue3-styled-components'
-
-export const Container = styled('div', {
-  isChartControlsShownInBottom: Boolean,
-})`
-  display: flex;
-  margin-top: ${(props) =>
-    props.isChartControlsShownInBottom ? '20px' : '44px'};
-`
-
-export const LabelsColumn = styled('div', { width: String })`
-  width: ${(props) => props.width};
-  display: flex;
-  flex-direction: column;
-  gap: 12px;
-`
-
-export const LabelRow = styled.div`
-  height: 32px;
-  font-size: 12px;
-  font-weight: 500;
-  color: ${(props) => props.theme.semanticColors.teal[600]};
-  display: flex;
-  align-items: flex-start;
-`
-
-export const TotalRow = styled(LabelRow)``
-
-export const FieldsContainer = styled.div`
-  flex: 1;
-  overflow-x: auto;
-  scrollbar-width: none;
-
-  &::-webkit-scrollbar {
-    display: none;
-  }
-`
-
-export const FieldsWrapper = styled.div`
-  display: flex;
-  flex-direction: column;
-  gap: 8px;
-`
-
-export const InputRow = styled.div`
-  display: flex;
-  align-items: center;
-  justify-content: space-around;
-  gap: 8px;
-  padding-left: 12px;
-  padding-right: 12px;
-`
-
-export const TotalInputRow = styled(InputRow)`
-  margin-top: 0;
-`
-
-export const InputGroup = styled('div', {
-  barWidth: Number,
-  isScrollable: Boolean,
-})`
-  ${(props) => (props.isScrollable ? 'min-width' : 'width')}:${(props) =>
-    props.barWidth}px;
-  display: flex;
-  justify-content: center;
-`

package/src/components/barchart/styles/chart.js

@@ -1,259 +0,0 @@
-import styled from 'vue3-styled-components'
-import theme from '@/assets/theme'
-
-export const Container = styled('div', { width: String })`
-  display: flex;
-  flex-direction: column;
-  padding-top: 40px;
-  font-family: ${(props) => props.theme.fonts.mainFont};
-  width: ${(props) => props.width};
-`
-
-export const GraphSection = styled('div', { width: String, height: String })`
-  height: ${(props) => props.height};
-  width: ${(props) => props.width};
-  position: relative;
-  display: flex;
-`
-
-export const YAxis = styled('div', { width: String, height: String })`
-  width: ${(props) => props.width};
-  display: flex;
-  flex-direction: column;
-  position: relative;
-  height: ${(props) => props.height};
-`
-
-export const YAxisRow = styled('div', { percentage: Number })`
-  display: flex;
-  align-items: center;
-  width: 100%;
-  position: absolute;
-  height: 0;
-  bottom: ${(props) =>
-    Number.isFinite(props.percentage) ? `${props.percentage}%` : '0'};
-  transform: translateY(50%);
-`
-
-export const YAxisLabel = styled.div`
-  font-size: 12px;
-  color: ${(props) => props.theme.semanticColors.teal[600]};
-  width: 100%;
-  text-align: right;
-  padding-right: 16px;
-  position: relative;
-  z-index: 1;
-`
-
-export const YAxisLine = styled('div', { yAxisWidth: String })`
-  position: absolute;
-  right: -10px;
-  left: calc(${(props) => props.yAxisWidth} - 10px);
-  height: 1px;
-  background-color: rgba(0, 0, 0, 0.1);
-  width: 12px;
-  z-index: 0;
-  top: 50%;
-  transform: translateY(-50%);
-`
-
-export const YAxisTitleWrapper = styled('div', { height: String })`
-  position: absolute;
-  left: -66px;
-  top: ${(props) => props.height};
-  transform: rotate(-90deg) translateX(50%);
-  transform-origin: right;
-  font-size: 12px;
-  color: ${(props) => props.theme.semanticColors.teal[600]};
-  display: flex;
-  align-items: center;
-  white-space: nowrap;
-  font-family: ${(props) => props.theme.fonts.mainFont};
-`
-
-export const ScrollContainer = styled('div', {
-  isScrollable: Boolean,
-  height: String,
-})`
-  flex: 1;
-  overflow-x: auto;
-  overflow-y: hidden;
-  height: calc(${(props) => props.height} + 30px);
-`
-
-export const ChartContent = styled('div', {
-  totalBars: Number,
-  barWidth: Number,
-  isScrollable: Boolean,
-  height: String,
-})`
-  height: ${(props) => props.height};
-  position: relative;
-  background: ${(props) => props.theme.semanticColors.grey[100]};
-  ${(props) =>
-    props.isScrollable
-      ? ` min-width: ${props.totalBars * (props.barWidth + 8) + 24}px;`
-      : 'width: 100%;'}
-`
-
-export const BarsContainer = styled.div`
-  height: 100%;
-  display: flex;
-  align-items: flex-end;
-  justify-content: space-around;
-  gap: 8px;
-  padding-left: 12px;
-  padding-right: 12px;
-  position: relative;
-  z-index: 1;
-  pointer-events: none;
-`
-
-export const BarGroup = styled('div', {
-  barWidth: Number,
-  isScrollable: Boolean,
-})`
-  display: flex;
-  flex-direction: column;
-  align-items: center;
-  height: 100%;
-  position: relative;
-  ${(props) => (props.isScrollable ? 'min-width' : 'width')}:${(props) =>
-    props.barWidth}px;
-  pointer-events: none;
-`
-
-export const BarWrapper = styled.div`
-  height: 100%;
-  width: 100%;
-  position: relative;
-`
-
-export const BarSegment = styled('div', {
-  gradientFrom: String,
-  gradientTo: String,
-  height: String,
-  zIndex: Number,
-})`
-  position: absolute;
-  bottom: 0;
-  left: 0;
-  right: 0;
-  height: ${(props) => props.height};
-  z-index: ${(props) => props.zIndex};
-  transition: opacity 0.2s;
-  border-radius: 8px 8px 0 0;
-  background: ${(props) =>
-    `linear-gradient(180deg, ${props.gradientFrom} 0%, ${props.gradientTo} 100%)`};
-  transform-origin: bottom;
-  will-change: transform, height;
-  pointer-events: auto;
-  &:hover {
-    opacity: 0.8;
-  }
-`
-
-export const XAxisLabel = styled.div`
-  font-size: 12px;
-  color: ${(props) => props.theme.semanticColors.teal[600]};
-  position: absolute;
-  bottom: -12px;
-  transform: translateY(100%);
-  user-select: none;
-`
-
-export const XAxisLabelHighlight = styled.div`
-  background: ${theme.semanticColors.purple[500]};
-  color: white;
-  padding: 4px;
-  border-radius: 4px;
-  font-size: 12px;
-  position: absolute;
-  bottom: -8px;
-  transform: translateY(100%);
-  user-select: none;
-  text-align: center;
-`
-
-export const XAxisLine = styled.div`
-  width: 1px;
-  height: 6px;
-  background-color: rgba(0, 0, 0, 0.1);
-  position: absolute;
-  bottom: -6px;
-  left: 50%;
-  transform: translateX(-50%);
-`
-
-export const Tooltip = styled('div', {
-  top: String,
-  left: String,
-})`
-  position: fixed;
-  top: ${(props) => props.top};
-  left: ${(props) => props.left};
-  background: rgba(0, 0, 0, 0.8);
-  color: white;
-  padding: 4px 6px;
-  border-radius: 4px;
-  font-size: 14px;
-  pointer-events: none;
-  transform: translate(-50%, -100%);
-  z-index: 1000;
-  margin-top: -10px;
-
-  &::after {
-    content: '';
-    position: absolute;
-    bottom: -6px;
-    left: 50%;
-    transform: translateX(-50%);
-    border-left: 4px solid transparent;
-    border-right: 4px solid transparent;
-    border-top: 6px solid rgba(0, 0, 0, 0.8);
-    width: 0;
-    height: 0;
-  }
-`
-
-export const TooltipText = styled('div', {
-  fontWeight: String,
-})`
-  font-weight: ${(props) => props.fontWeight || '400'};
-  font-size: 12px;
-`
-
-export const TooltipTextWrapper = styled.div`
-  display: flex;
-  flex-direction: column;
-  gap: 4px;
-`
-
-export const TooltipRow = styled.div`
-  width: 100px;
-  display: flex;
-  flex-direction: row;
-  justify-content: space-between;
-  align-items: center;
-`
-
-export const TooltipGradientBox = styled('div', {
-  gradientFrom: String,
-  gradientTo: String,
-})`
-  background: ${(props) =>
-    `linear-gradient(180deg, ${props.gradientFrom} 0%, ${props.gradientTo} 100%)`};
-  width: 12px;
-  height: 12px;
-  border-radius: 4px;
-`
-
-export const ChartControlsWrapper = styled('div', { position: String })`
-  ${(props) =>
-    props.position === 'top' ? 'margin-bottom: 6px;' : 'margin-top: 36px;'}
-`
-
-export const BottomFieldsContainer = styled.div`
-  margin-top: 16px;
-  width: 100%;
-`