@eturnity/eturnity_reusable_components 8.22.23-EPDM-13618.0 → 8.22.23-EPDM-14087.1

package/src/Test.vue

@@ -1,64 +1,64 @@
-<template>
-  <PageContainer>
-    <PanelRangeInfo
-      :arrow-color="value < 8 ? 'yellow' : 'lime'"
-      height="42px"
-      :max-value="12"
-      :min-value="8"
-      :value="value"
-      width="120px"
-  /></PageContainer>
-  <IconCollection color="red" />
-  <input v-model="value" max="30" min="0" type="range" />
-</template>
-
-<script>
-  import styled from 'vue3-styled-components'
-  import PanelRangeInfo from '@/components/panelRangeInfo'
-  import IconCollection from './components/icon/iconCollection.vue'
-
-  const PageContainer = styled.div`
-    padding: 40px;
-  `
-
-  export default {
-    name: 'App',
-    components: {
-      PageContainer,
-      PanelRangeInfo,
-      IconCollection,
-    },
-    data() {
-      return {
-        value: 42,
-      }
-    },
-    computed: {},
-    methods: {
-      blurHandler(e) {
-        console.log('blur', e)
-      },
-      changeHandler(e) {
-        console.log('change', e)
-      },
-      focusHandler(e) {
-        console.log('focus', e)
-      },
-      inputHandler(e) {
-        console.log('input', e)
-        //this.value = e
-        setTimeout(() => {
-          this.value = e
-        }, 1000)
-      },
-    },
-  }
-</script>
-
-<style>
-  html,
-  body {
-    height: 100%;
-    margin: 0;
-  }
-</style>
+<template>
+  <PageContainer>
+    <PanelRangeInfo
+      :arrow-color="value < 8 ? 'yellow' : 'lime'"
+      height="42px"
+      :max-value="12"
+      :min-value="8"
+      :value="value"
+      width="120px"
+  /></PageContainer>
+  <IconCollection color="red" />
+  <input v-model="value" max="30" min="0" type="range" />
+</template>
+
+<script>
+  import styled from 'vue3-styled-components'
+  import PanelRangeInfo from '@/components/panelRangeInfo'
+  import IconCollection from './components/icon/iconCollection.vue'
+
+  const PageContainer = styled.div`
+    padding: 40px;
+  `
+
+  export default {
+    name: 'App',
+    components: {
+      PageContainer,
+      PanelRangeInfo,
+      IconCollection,
+    },
+    data() {
+      return {
+        value: 42,
+      }
+    },
+    computed: {},
+    methods: {
+      blurHandler(e) {
+        console.log('blur', e)
+      },
+      changeHandler(e) {
+        console.log('change', e)
+      },
+      focusHandler(e) {
+        console.log('focus', e)
+      },
+      inputHandler(e) {
+        console.log('input', e)
+        //this.value = e
+        setTimeout(() => {
+          this.value = e
+        }, 1000)
+      },
+    },
+  }
+</script>
+
+<style>
+  html,
+  body {
+    height: 100%;
+    margin: 0;
+  }
+</style>

package/src/TestChart.vue

@@ -1,229 +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>
+<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/icons/arrow_down.svg

@@ -1,3 +1,3 @@
-<svg width="8" height="4" viewBox="0 0 8 4" fill="none" xmlns="http://www.w3.org/2000/svg">
-<path d="M4 4L8 0H0L4 4Z" fill="#263238"/>
-</svg>
+<svg width="8" height="4" viewBox="0 0 8 4" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path d="M4 4L8 0H0L4 4Z" fill="#263238"/>
+</svg>

package/src/assets/icons/arrow_up_red.svg

@@ -1,3 +1,3 @@
-<svg width="8" height="4" viewBox="0 0 8 4" fill="none" xmlns="http://www.w3.org/2000/svg">
-<path d="M4 0L8 4H0L4 0Z" fill="#FF5656"/>
-</svg>
+<svg width="8" height="4" viewBox="0 0 8 4" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path d="M4 0L8 4H0L4 0Z" fill="#FF5656"/>
+</svg>