@eturnity/eturnity_reusable_components 8.22.4 → 8.22.6

package/src/TestChart.vue

@@ -0,0 +1,229 @@
+<template>
+  <div
+    style="
+      margin-top: 100px;
+      margin-left: 80px;
+      padding-bottom: 100px;
+      display: flex;
+      flex-direction: column;
+    "
+  >
+    <!-- Simple bar chart -->
+    <BarChart
+      :bar-width="60"
+      chart-controls-position="bottom"
+      :data="monthlyData"
+      height="400px"
+      :is-bottom-fields-shown="true"
+      :is-scrollable="false"
+      :is-selection-enabled="true"
+      :selection-size="3"
+      :value-formatter="valueFormatter"
+      width="700px"
+      @selection-change="handleSelectionChange"
+    />
+    <br />
+    <br />
+
+    <!-- Stacked bar chart -->
+    <BarChart
+      :bar-width="60"
+      :data="monthLabels"
+      height="400px"
+      :is-bottom-fields-shown="true"
+      :is-legend-shown="true"
+      :legends-item-per-row="4"
+      :selected-split-button="selectedTimeFrame"
+      :series="tariffZones"
+      :show-percentage-on-tooltip="true"
+      :split-button-options="options"
+      :value-formatter="valueFormatter"
+      width="700px"
+      y-axis-title="Energy (kWh)"
+      @input-blur="handleInputBlur"
+      @select-split-button="handleSelectSplitButton"
+    />
+
+    <!-- Stacked bar chart -->
+    <BarChart
+      :bar-width="60"
+      :data="monthLabels"
+      field-mode="percentage"
+      height="400px"
+      :is-bottom-fields-shown="true"
+      :is-legend-shown="false"
+      :legends-item-per-row="4"
+      :series="tariffZones"
+      :value-formatter="valueFormatter"
+      width="700px"
+      @input-blur="handleInputBlur"
+      @select-split-button="handleSelectSplitButton"
+    >
+      <!-- <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) => {
+    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
+    })
+
+    tariffZones.value = newVal
+  }
+</script>
+
+<style lang="scss" scoped></style>

package/src/assets/theme.js

@@ -416,6 +416,30 @@ const theme = (() => {
             },
           },
         },
+        protag: {
+          main: {
+            default: {
+              backgroundColor: semanticColors.yellow[300],
+              textColor: semanticColors.teal[800],
+              borderColor: 'transparent',
+            },
+            hover: {
+              backgroundColor: semanticColors.yellow[300],
+              textColor: semanticColors.teal[800],
+              borderColor: '',
+            },
+            active: {
+              backgroundColor: semanticColors.yellow[300],
+              textColor: semanticColors.teal[800],
+              borderColor: '',
+            },
+            disabled: {
+              backgroundColor: semanticColors.yellow[300],
+              textColor: semanticColors.teal[400],
+              borderColor: '',
+            },
+          },
+        },
         filter: {
           main: {
             default: {
@@ -590,6 +614,55 @@ const theme = (() => {
             },
           },
         },
+        tertiary: {
+          // type
+          main: {
+            // variant: this is the default variant
+            default: {
+              backgroundColor: 'transparent',
+              textColor: semanticColors.purple[50],
+              borderColor: semanticColors.teal[500],
+            },
+            hover: {
+              backgroundColor: semanticColors.teal[600],
+              textColor: semanticColors.purple[50],
+              borderColor: semanticColors.teal[400],
+            },
+            active: {
+              backgroundColor: semanticColors.teal[700],
+              textColor: semanticColors.purple[50],
+              borderColor: semanticColors.teal[300],
+            },
+            disabled: {
+              textColor: semanticColors.grey[600],
+              backgroundColor: semanticColors.grey[500],
+              borderColor: semanticColors.grey[800],
+            },
+          },
+          cancel: {
+            // variant
+            default: {
+              backgroundColor: semanticColors.teal[200],
+              textColor: semanticColors.red[400],
+              borderColor: semanticColors.teal[500],
+            },
+            hover: {
+              backgroundColor: semanticColors.red[700],
+              textColor: semanticColors.red[700],
+              borderColor: semanticColors.teal[400],
+            },
+            active: {
+              backgroundColor: semanticColors.red[600],
+              textColor: semanticColors.red[200],
+              borderColor: semanticColors.teal[300],
+            },
+            disabled: {
+              textColor: semanticColors.grey[600],
+              backgroundColor: semanticColors.grey[500],
+              borderColor: semanticColors.grey[800],
+            },
+          },
+        },
         ghost: {
           // type
           main: {
@@ -680,6 +753,11 @@ const theme = (() => {
           fontSize: '14px',
           iconWidth: '26px',
         },
+        tiny: {
+          padding: '2px 5px',
+          fontSize: '10px',
+          iconWidth: '18px',
+        },
       },
     },
   }

package/src/components/banner/actionBanner/actionBanner.spec.js

@@ -1,58 +1,70 @@
 /* eslint-disable */
-import { h } from 'vue'
 import { mount } from '@vue/test-utils'
 import ActionBanner from '@/components/banner/actionBanner'
 import theme from '@/assets/theme'
 
+// Mock Modal component
+jest.mock('@/components/modals/modal', () => ({
+  name: 'Modal',
+  template: `
+    <div v-if="isOpen" data-test-id="action_banner_wrapper">
+      <slot></slot>
+      <button class="close" @click="$emit('on-close')"></button>
+    </div>
+  `,
+  props: ['isOpen'],
+}))
+
 describe('Action Banner Component', () => {
-  it('action banner is shown when isOpen props is true', async () => {
-    const wrapper = mount(ActionBanner, {
+  let wrapper
+
+  beforeEach(() => {
+    wrapper = mount(ActionBanner, {
       props: {
         isOpen: false,
       },
+      slots: {
+        title: 'Test Title',
+        body: 'Test Body',
+        buttons: 'Test Buttons',
+      },
       global: {
         provide: {
           theme,
         },
       },
     })
+  })
 
+  it('action banner is shown when isOpen props is true', async () => {
+    // Initially, the banner should not exist because isOpen is false
     const bannerWrapper = wrapper.find('[data-test-id="action_banner_wrapper"]')
-    expect(bannerWrapper.exists()).toBe(true)
-    expect(bannerWrapper.classes()).not.toContain('visible')
-    expect(bannerWrapper.classes()).toContain('hidden')
+    expect(bannerWrapper.exists()).toBe(false)
+
+    // After setting isOpen to true, the banner should exist
     await wrapper.setProps({ isOpen: true })
-    expect(bannerWrapper.classes()).toContain('visible')
-    expect(bannerWrapper.classes()).not.toContain('hidden')
+    await wrapper.vm.$nextTick()
+
+    const updatedBannerWrapper = wrapper.find(
+      '[data-test-id="action_banner_wrapper"]'
+    )
+    expect(updatedBannerWrapper.exists()).toBe(true)
   })
 
-  it('action banner slots is display when user passed slots content', async () => {
-    const titleText = 'Sample title'
-    const bodyText = 'Sample body text'
-    const buttonText = 'Sample button'
+  it('renders slots correctly when banner is open', async () => {
+    await wrapper.setProps({ isOpen: true })
+    await wrapper.vm.$nextTick()
 
-    const wrapper = mount(ActionBanner, {
-      props: {
-        isOpen: false,
-      },
-      slots: {
-        title: titleText,
-        body: bodyText,
-        buttons: h('button', {}, buttonText),
-      },
-      global: {
-        provide: {
-          theme,
-        },
-      },
-    })
+    const title = wrapper.find('[data-test-id="modal_title"]')
+    const body = wrapper.find('[data-test-id="modal_body"]')
+    const buttons = wrapper.find('[data-test-id="modal_buttons"]')
 
-    const modalTitleEl = wrapper.find('[data-test-id="modal_title"]')
-    expect(modalTitleEl.text()).toBe(titleText)
-    const modalBodyEl = wrapper.find('[data-test-id="modal_body"]')
-    expect(modalBodyEl.text()).toBe(bodyText)
-    const modalButtonsEl = wrapper.find('[data-test-id="modal_buttons"]')
-    expect(modalButtonsEl.text()).toBe(buttonText)
+    expect(title.exists()).toBe(true)
+    expect(title.text()).toBe('Test Title')
+    expect(body.exists()).toBe(true)
+    expect(body.text()).toBe('Test Body')
+    expect(buttons.exists()).toBe(true)
+    expect(buttons.text()).toBe('Test Buttons')
   })
 
   it('action banner on-close event is emitted when modal close button is clicked', async () => {