@eturnity/eturnity_reusable_components 8.13.13-epic-shading.1 → 8.13.13-qa-16-03-26.1

package/src/components/barchart/index.vue

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

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

@@ -0,0 +1,259 @@
+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%;
+`