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

package/src/TestChart.vue

@@ -1,241 +0,0 @@
-<template>
-  <div
-    style="
-      margin-top: 100px;
-      margin-left: 80px;
-      padding-bottom: 100px;
-      display: flex;
-      flex-direction: column-reverse;
-    "
-  >
-    <!-- Simple bar chart -->
-    <BarChart
-      :data="monthlyData"
-      width="700px"
-      height="400px"
-      :valueFormatter="valueFormatter"
-      :barWidth="60"
-      :isScrollable="false"
-      chartControlsPosition="bottom"
-      :isBottomFieldsShown="true"
-      :isSelectionEnabled="true"
-      :selectionSize="3"
-      @selection-change="handleSelectionChange"
-    >
-    </BarChart>
-    <br />
-    <br />
-
-    <!-- Stacked bar chart -->
-    <BarChart
-      yAxisTitle="Energy (kWh)"
-      :data="monthLabels"
-      :series="tariffZones"
-      width="700px"
-      height="400px"
-      :barWidth="60"
-      :valueFormatter="valueFormatter"
-      :legendsItemPerRow="4"
-      :splitButtonOptions="options"
-      :selectedSplitButton="selectedTimeFrame"
-      :isBottomFieldsShown="true"
-      :isLegendShown="true"
-      @select-split-button="handleSelectSplitButton"
-      @input-blur="handleInputBlur"
-    >
-      <!-- <template #tooltip="{ item, segment }">
-        <div style="display: flex; flex-direction: column">
-          {{ $c.log(item, segment) }}
-          <div>{{ item.label }}</div>
-          <div>{{ item.segments[0].value }} kWh</div>
-        </div>
-      </template> -->
-    </BarChart>
-
-    <!-- Stacked bar chart -->
-    <BarChart
-      yAxisTitle="Energy (kWh)"
-      :data="monthLabels"
-      :series="tariffZones"
-      width="700px"
-      height="400px"
-      :barWidth="60"
-      :valueFormatter="valueFormatter"
-      :legendsItemPerRow="4"
-      :isBottomFieldsShown="true"
-      :isLegendShown="false"
-      fieldMode="percentage"
-      @select-split-button="handleSelectSplitButton"
-      @input-blur="handleInputBlur"
-    >
-      <!-- <template #tooltip="{ item, segment }">
-        <div style="display: flex; flex-direction: column">
-          {{ $c.log(item, segment) }}
-          <div>{{ item.label }}</div>
-          <div>{{ item.segments[0].value }} kWh</div>
-        </div>
-      </template> -->
-    </BarChart>
-  </div>
-</template>
-
-<script setup>
-  import { ref } from 'vue'
-  import BarChart from '@/components/barchart/index.vue'
-
-  const options = [
-    { label: 'Day', value: 'day' },
-    { label: 'Month', value: 'month' },
-    { label: 'Year', value: 'year' },
-  ]
-
-  const selectedTimeFrame = ref('day')
-
-  const handleSelectSplitButton = (value) => {
-    selectedTimeFrame.value = value
-  }
-
-  const monthlyData = [
-    { label: 'Jan', value: 300 },
-    { label: 'Feb', value: 600 },
-    { label: 'Mar', value: 1000 },
-    { label: 'Apr', value: 1200 },
-    { label: 'May', value: 1400 },
-    { label: 'Jun', value: 1810 },
-    { label: 'Jul', value: 1400 },
-    { label: 'Aug', value: 1200 },
-    { label: 'Sep', value: 1000 },
-    // { label: 'Oct', value: 800 },
-    // { label: 'Nov', value: 600 },
-    // { label: 'Dec', value: 400 },
-    // { label: 'Jan', value: 300 },
-    // { label: 'Feb', value: 600 },
-    // { label: 'Mar', value: 1000 },
-    // { label: 'Apr', value: 1200 },
-    // { label: 'May', value: 1400 },
-    // { label: 'Jun', value: 1810 },
-    // { label: 'Jul', value: 1400 },
-    // { label: 'Aug', value: 1200 },
-    // { label: 'Sep', value: 1000 },
-    // { label: 'Oct', value: 800 },
-    // { label: 'Nov', value: 600 },
-    // { label: 'Dec', value: 400 },
-
-    // ... more months
-  ]
-
-  const monthLabels = [
-    { label: 'Jan' },
-    { label: 'Feb' },
-    { label: 'Mar' },
-    { label: 'Apr' },
-    { label: 'May' },
-    { label: 'Jun' },
-    // ... more months
-  ]
-
-  const tariffZones = ref([
-    {
-      name: 'Tariff Zone 1',
-      data: [
-        { label: 'Jan', value: 200 },
-        { label: 'Feb', value: 130 },
-        { label: 'Mar', value: 220 },
-        { label: 'Apr', value: 230 },
-        { label: 'May', value: 200 },
-        { label: 'Jun', value: 210 },
-        // ... more months
-      ],
-    },
-    {
-      name: 'Tariff Zone 2',
-      data: [
-        { label: 'Jan', value: 200 },
-        { label: 'Feb', value: 100 },
-        { label: 'Mar', value: 270 },
-        { label: 'Apr', value: 180 },
-        { label: 'May', value: 300 },
-        { label: 'Jun', value: 250 },
-        // ... more months
-      ],
-    },
-    {
-      name: 'Tariff Zone 3',
-      data: [
-        { label: 'Jan', value: 200 },
-        { label: 'Feb', value: 100 },
-        { label: 'Mar', value: 210 },
-        { label: 'Apr', value: 220 },
-        { label: 'May', value: 300 },
-        { label: 'Jun', value: 190 },
-        // ... more months
-      ],
-    },
-    {
-      name: 'Tariff Zone 4',
-      data: [
-        { label: 'Jan', value: 200 },
-        { label: 'Feb', value: 100 },
-        { label: 'Mar', value: 210 },
-        { label: 'Apr', value: 220 },
-        { label: 'May', value: 300 },
-        { label: 'Jun', value: 190 },
-        // ... more months
-      ],
-    },
-    {
-      name: 'Tariff Zone 5',
-      data: [
-        { label: 'Jan', value: 200 },
-        { label: 'Feb', value: 100 },
-        { label: 'Mar', value: 210 },
-        { label: 'Apr', value: 220 },
-        { label: 'May', value: 300 },
-        { label: 'Jun', value: 190 },
-        // ... more months
-      ],
-    },
-    {
-      name: 'Tariff Zone 6',
-      data: [
-        { label: 'Jan', value: 200 },
-        { label: 'Feb', value: 100 },
-        { label: 'Mar', value: 210 },
-        { label: 'Apr', value: 220 },
-        { label: 'May', value: 300 },
-        { label: 'Jun', value: 190 },
-        // ... more months
-      ],
-    },
-    // ... more tariff zones
-  ])
-
-  const valueFormatter = (value) => {
-    return `${value} kWh`
-  }
-
-  const handleSelectionChange = (selectedBars) => {
-    console.log('selectedBars', selectedBars)
-  }
-
-  const handleInputBlur = (payload) => {
-    console.log({ payload })
-    const newVal = [...tariffZones.value].map((zone) => {
-      if (zone.name === payload.seriesName) {
-        zone.data = zone.data.map((item) => {
-          if (item.label === payload.label) {
-            item.value = payload.value
-          }
-          return item
-        })
-      }
-      return zone
-    })
-
-    console.log({ newVal })
-
-    tariffZones.value = newVal
-  }
-</script>
-
-<style lang="scss" scoped></style>

package/src/assets/svgIcons/refresh.svg

@@ -1,3 +0,0 @@
-<svg width="16" height="16" viewBox="0 0 16 16" fill="none" xmlns="http://www.w3.org/2000/svg">
-<path class="fix" d="M11.3335 12.5833C12.7477 11.5529 13.6668 9.88392 13.6668 8.00023C13.6668 4.87061 11.1298 2.33356 8.00016 2.33356H7.66683M8.00016 13.6669C4.87055 13.6669 2.3335 11.1298 2.3335 8.00023C2.3335 6.11654 3.25261 4.44751 4.66683 3.41716M7.3335 14.9336L8.66683 13.6002L7.3335 12.2669M8.66683 3.73356L7.3335 2.40023L8.66683 1.06689" stroke="#6F20DC" fill="none" stroke-linecap="round" stroke-linejoin="round"/>
-</svg>

package/src/components/barchart/BottomFields.vue

@@ -1,253 +0,0 @@
-<template>
-  <Container :is-chart-controls-shown-in-bottom="isChartControlsShownInBottom">
-    <LabelsColumn :width="yAxisWidth">
-      <LabelRow v-for="series in props.series" :key="series.name">
-        {{ series.name }}
-      </LabelRow>
-      <TotalRow v-if="props.series.length && fieldMode === 'percentage'">
-        {{ $gettext ? $gettext('Total (%)') : 'Total (%)' }}
-      </TotalRow>
-      <TotalRow v-if="props.series.length">
-        {{ $gettext ? $gettext('Total (kWh)') : 'Total (kWh)' }}
-      </TotalRow>
-    </LabelsColumn>
-
-    <FieldsContainer
-      :class="`fields-container-${chartId}`"
-      @scroll="handleFieldsScroll"
-    >
-      <FieldsWrapper>
-        <!-- For stacked bar chart -->
-        <template v-if="props.series.length">
-          <InputRow
-            v-for="series in props.series"
-            :key="series.name"
-            :data-series-name="series.name"
-          >
-            <InputGroup
-              v-for="(item, index) in props.data"
-              :bar-width="barWidth"
-              :is-scrollable="isScrollable"
-              :key="index"
-            >
-              <InputNumber
-                :allow-negative="false"
-                input-height="36px"
-                :number-precision="0"
-                :min-decimals="0"
-                text-align="center"
-                :unit-name="fieldMode === 'percentage' ? '%' : ''"
-                :value="getDisplayValue(series.data, item.label)"
-                @input-blur="handleInputBlur($event, series.name, item.label)"
-                @input-focus="handleInputFocus(series.name, item.label)"
-              />
-            </InputGroup>
-          </InputRow>
-
-          <TotalInputRow v-if="fieldMode === 'percentage'">
-            <InputGroup
-              v-for="(item, index) in props.data"
-              :bar-width="barWidth"
-              :is-scrollable="isScrollable"
-              :key="index"
-            >
-              <InputNumber
-                :allow-negative="false"
-                input-height="36px"
-                :is-read-only="true"
-                :number-precision="0"
-                :min-decimals="0"
-                text-align="center"
-                :unit-name="fieldMode === 'percentage' ? '%' : ''"
-                :value="calculatePercentageTotal(item.label)"
-              />
-            </InputGroup>
-          </TotalInputRow>
-
-          <TotalInputRow>
-            <InputGroup
-              v-for="(item, index) in props.data"
-              :bar-width="barWidth"
-              :is-scrollable="isScrollable"
-              :key="index"
-            >
-              <InputNumber
-                input-height="36px"
-                :is-read-only="true"
-                :number-precision="2"
-                :min-decimals="0"
-                text-align="center"
-                :value="calculateTotal(item.label)"
-              />
-            </InputGroup>
-          </TotalInputRow>
-        </template>
-
-        <!-- For simple bar chart -->
-        <template v-else>
-          <InputRow>
-            <InputGroup
-              v-for="(item, index) in props.data"
-              :bar-width="barWidth"
-              :is-scrollable="isScrollable"
-              :key="index"
-            >
-              <InputNumber
-                input-height="36px"
-                :min-decimals="0"
-                :number-precision="2"
-                text-align="center"
-                :value="item.value"
-                @input-blur="handleInputBlur($event, null, item.label)"
-                @input-focus="handleInputFocus(null, item.label)"
-              />
-            </InputGroup>
-          </InputRow>
-        </template>
-      </FieldsWrapper>
-    </FieldsContainer>
-  </Container>
-</template>
-
-<script setup>
-  import { ref } from 'vue'
-  import InputNumber from '../inputs/inputNumber'
-
-  import {
-    Container,
-    LabelsColumn,
-    LabelRow,
-    TotalRow,
-    FieldsContainer,
-    FieldsWrapper,
-    InputRow,
-    TotalInputRow,
-    InputGroup,
-  } from './styles/bottomFields'
-
-  const props = defineProps({
-    chartId: {
-      type: String,
-      required: true,
-    },
-    data: {
-      type: Array,
-      required: true,
-    },
-    series: {
-      type: Array,
-      required: true,
-    },
-    barWidth: {
-      type: Number,
-      required: true,
-    },
-    yAxisWidth: {
-      type: String,
-      required: true,
-    },
-    isScrollable: {
-      type: Boolean,
-      default: false,
-    },
-    isChartControlsShownInBottom: {
-      type: Boolean,
-      default: false,
-    },
-    fieldMode: {
-      type: String,
-      default: 'absolute',
-      validator: (value) => ['absolute', 'percentage'].includes(value),
-    },
-  })
-
-  const emit = defineEmits([
-    'sync-scroll',
-    'input-blur',
-    'input-focus',
-    'input-blur-all',
-  ])
-
-  const focusedInput = ref(null)
-
-  const handleInputFocus = (seriesName, label) => {
-    focusedInput.value = { seriesName, label }
-    emit('input-focus', { seriesName, label })
-  }
-
-  const calculateTotal = (label) => {
-    return props.series.reduce((sum, series) => {
-      const value = series.data.find((d) => d.label === label)?.value || 0
-      return sum + value
-    }, 0)
-  }
-
-  const syncScroll = (scrollLeft) => {
-    const container = document.querySelector(
-      `.fields-container-${props.chartId}`
-    )
-    if (container) {
-      container.scrollLeft = scrollLeft
-    }
-  }
-  const getDisplayValue = (seriesData, label) => {
-    if (props.fieldMode === 'absolute') {
-      return seriesData.find((d) => d.label === label)?.value || ''
-    }
-
-    const value = seriesData.find((d) => d.label === label)?.value || 0
-    const total = calculateTotal(label)
-    return total ? Number(((value / total) * 100).toFixed(0)) : 0
-  }
-
-  const calculatePercentageTotal = (label) => {
-    return props.series.reduce((sum, series) => {
-      const value = series.data.find((d) => d.label === label)?.value || 0
-      const total = calculateTotal(label)
-      const percentage = total ? Number(((value / total) * 100).toFixed(0)) : 0
-      return sum + percentage
-    }, 0)
-  }
-
-  const handleInputBlur = (_value, seriesName, label) => {
-    let value = Number(_value)
-
-    if (props.fieldMode === 'percentage') {
-      const total = calculateTotal(label)
-      value = (value / 100) * total
-    }
-
-    const payload = seriesName ? { seriesName, label, value } : { label, value }
-    emit('input-blur', payload)
-    focusedInput.value = null
-
-    // Check if the related target (element receiving focus) is another input in our chart
-    const relatedTarget = document.activeElement
-    const currentChartContainer = document.querySelector(
-      `.fields-container-${props.chartId}`
-    )
-    const isMovingToAnotherInput =
-      currentChartContainer?.contains(relatedTarget) &&
-      relatedTarget?.classList.contains('input-number')
-
-    if (!isMovingToAnotherInput) {
-      emit('input-blur-all')
-    } else {
-      // If moving to another input, trigger focus event manually
-      const seriesName =
-        relatedTarget.closest('[data-series-name]')?.dataset.seriesName
-      const label = relatedTarget.closest('[data-label]')?.dataset.label
-      if (seriesName && label) {
-        handleInputFocus(seriesName, label)
-      }
-    }
-  }
-
-  const handleFieldsScroll = (event) => {
-    emit('sync-scroll', event.target.scrollLeft)
-  }
-
-  defineExpose({
-    syncScroll,
-  })
-</script>

package/src/components/barchart/ChartControls.vue

@@ -1,113 +0,0 @@
-<template>
-  <Container>
-    <LegendAndControlsWrapper :leftMargin="yAxisWidth">
-      <LeftSection>
-        <SplitButtonsContainer
-          v-if="splitButtonOptions.length"
-          :position="position"
-        >
-          <SplitButtons
-            :modelValue="selectedSplitButton"
-            :options="splitButtonOptions"
-            @click="handleSplitButtonClick"
-          />
-        </SplitButtonsContainer>
-      </LeftSection>
-
-      <LegendGroups v-if="isLegendShown">
-        <LegendRow
-          v-for="(row, rowIndex) in groupedSeries"
-          :key="rowIndex"
-          :rowIndex="rowIndex"
-        >
-          <LegendItem v-for="(series, index) in row" :key="series.name">
-            <LegendColor
-              :gradientFrom="
-                reversedColors[rowIndex * legendsItemPerRow + index].from
-              "
-              :gradientTo="
-                reversedColors[rowIndex * legendsItemPerRow + index].to
-              "
-            />
-            <LegendText>{{ series.name }}</LegendText>
-          </LegendItem>
-        </LegendRow>
-      </LegendGroups>
-    </LegendAndControlsWrapper>
-  </Container>
-</template>
-
-<script setup>
-  import { computed } from 'vue'
-
-  import SplitButtons from '../buttons/splitButtons'
-
-  import {
-    Container,
-    LegendAndControlsWrapper,
-    LeftSection,
-    SplitButtonsContainer,
-    LegendGroups,
-    LegendRow,
-    LegendItem,
-    LegendColor,
-    LegendText,
-  } from './styles/chartControls'
-
-  const props = defineProps({
-    position: {
-      type: String,
-      required: true,
-    },
-    yAxisWidth: {
-      type: String,
-      required: true,
-    },
-    series: {
-      type: Array,
-      default: () => [],
-    },
-    stackedColors: {
-      type: Function,
-      required: true,
-    },
-    splitButtonOptions: {
-      type: Array,
-      default: () => [],
-    },
-    selectedSplitButton: {
-      type: String,
-      default: '',
-    },
-    isLegendShown: {
-      type: Boolean,
-      default: false,
-    },
-    legendsItemPerRow: {
-      type: Number,
-      required: true,
-    },
-  })
-
-  const emit = defineEmits(['select-split-button'])
-
-  const reversedColors = computed(() =>
-    [...props.stackedColors(props.series.length)].reverse()
-  )
-
-  const groupedSeries = computed(() => {
-    const { series, legendsItemPerRow } = props
-
-    return series.reduce((groups, item, index) => {
-      const groupIndex = Math.floor(index / legendsItemPerRow)
-      groups[groupIndex] = groups[groupIndex] || []
-      groups[groupIndex].push(item)
-
-      return groups
-    }, [])
-  })
-
-  const handleSplitButtonClick = (value) => {
-    emit('select-split-button', value)
-  }
-</script>