@eturnity/eturnity_reusable_components 8.13.3-EPDM-14458.0 → 8.13.3-EPDM-14657.0

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@eturnity/eturnity_reusable_components",
-  "version": "8.13.3-EPDM-14458.0",
+  "version": "8.13.3-EPDM-14657.0",
   "files": [
     "dist",
     "src"

package/src/DemoCharts.vue

@@ -0,0 +1,424 @@
+<template>
+  <div class="demo-container">
+    <h1>BarChart Component Examples</h1>
+
+    <h2>1. Basic Bar Chart</h2>
+    <BarChart
+      :data="basicData"
+      :value-formatter="kwhFormatter"
+      height="300px"
+      width="800px"
+    />
+
+    <h2>2. Bar Chart with Custom Bar Width</h2>
+    <BarChart
+      :bar-width="80"
+      :data="basicData"
+      :value-formatter="kwhFormatter"
+      height="300px"
+      width="800px"
+    />
+
+    <h2>3. Stacked Bar Chart - 3 Series with Legend</h2>
+    <BarChart
+      :bar-width="80"
+      :data="quarterLabels"
+      :is-legend-shown="true"
+      :series="threeZoneSeries"
+      :value-formatter="kwhFormatter"
+      height="400px"
+      width="800px"
+    />
+
+    <h2>4. Stacked Bar Chart - 6 Series with Multi-Row Legend</h2>
+    <BarChart
+      :bar-width="60"
+      :data="monthLabels"
+      :is-legend-shown="true"
+      :legends-item-per-row="3"
+      :series="tariffZones"
+      :value-formatter="kwhFormatter"
+      height="400px"
+      width="800px"
+    />
+
+    <h2>5. Scrollable Chart with Many Data Points</h2>
+    <BarChart
+      :bar-width="40"
+      :data="dailyData"
+      :is-scrollable="true"
+      :value-formatter="kwhFormatter"
+      height="300px"
+      width="800px"
+    />
+
+    <h2>6. Scrollable Chart with Selection</h2>
+    <BarChart
+      :bar-width="40"
+      :data="dailyData"
+      :is-scrollable="true"
+      :is-selection-enabled="true"
+      :selection-size="5"
+      :value-formatter="kwhFormatter"
+      height="300px"
+      width="800px"
+      @selection-change="handleSelectionChange"
+    />
+
+    <h2>7. Chart with Top Controls & Time Frame Selector</h2>
+    <BarChart
+      :bar-width="70"
+      :data="quarterLabels"
+      :is-legend-shown="true"
+      :selected-split-button="selectedTimeFrame"
+      :series="threeZoneSeries"
+      :split-button-options="timeFrameOptions"
+      :value-formatter="kwhFormatter"
+      chart-controls-position="top"
+      height="350px"
+      width="800px"
+      @select-split-button="handleTimeFrameSelect"
+    />
+
+    <h2>8. Chart with Bottom Controls & Time Frame Selector</h2>
+    <BarChart
+      :bar-width="70"
+      :data="quarterLabels"
+      :is-legend-shown="true"
+      :selected-split-button="selectedTimeFrame"
+      :series="threeZoneSeries"
+      :split-button-options="timeFrameOptions"
+      :value-formatter="kwhFormatter"
+      chart-controls-position="bottom"
+      height="350px"
+      width="800px"
+      @select-split-button="handleTimeFrameSelect"
+    />
+
+    <h2>9. Chart with Custom Tooltip</h2>
+    <BarChart :bar-width="60" :data="basicData" height="300px" width="800px">
+      <template #tooltip="{ item }">
+        <div style="padding: 8px">
+          <div style="font-weight: bold">{{ item.label }}</div>
+          <div>Consumption: {{ kwhFormatter(item.segments[0].value) }}</div>
+          <div>Peak Time: {{ getPeakTime(item.label) }}</div>
+          <div>Efficiency: {{ getEfficiency(item.segments[0].value) }}</div>
+        </div>
+      </template>
+    </BarChart>
+
+    <h2>10. Chart with Bottom Fields</h2>
+    <BarChart
+      :bar-width="60"
+      :data="basicData"
+      :is-bottom-fields-shown="true"
+      :value-formatter="kwhFormatter"
+      height="300px"
+      width="800px"
+      @update-value="handleValueUpdate"
+    />
+
+    <h2>11. Scrollable Chart with Bottom Fields</h2>
+    <BarChart
+      :bar-width="40"
+      :data="monthlyData"
+      :is-bottom-fields-shown="true"
+      :is-scrollable="true"
+      :value-formatter="kwhFormatter"
+      height="300px"
+      width="800px"
+    />
+
+    <h2>12. Stacked Chart with Bottom Fields</h2>
+    <BarChart
+      :bar-width="70"
+      :data="quarterLabels"
+      :is-bottom-fields-shown="true"
+      :is-legend-shown="true"
+      :series="threeZoneSeries"
+      :value-formatter="kwhFormatter"
+      height="400px"
+      width="800px"
+    />
+
+    <h2>13. Scrollable Stacked Chart with Bottom Fields</h2>
+    <BarChart
+      :bar-width="60"
+      :data="monthLabels"
+      :is-bottom-fields-shown="true"
+      :is-legend-shown="true"
+      :is-scrollable="true"
+      :legends-item-per-row="3"
+      :series="tariffZones"
+      :value-formatter="kwhFormatter"
+      height="400px"
+      width="800px"
+    />
+
+    <h2>14. Chart with Selection and Bottom Fields</h2>
+    <BarChart
+      :bar-width="40"
+      :data="monthlyData"
+      :is-bottom-fields-shown="true"
+      :is-scrollable="true"
+      :is-selection-enabled="true"
+      :selection-size="6"
+      :value-formatter="kwhFormatter"
+      height="350px"
+      width="800px"
+      @selection-change="handleSelectionChange"
+    />
+
+    <h2>15. Stacked Chart and Bottom Fields</h2>
+    <BarChart
+      :bar-width="70"
+      :data="quarterLabels"
+      :is-bottom-fields-shown="true"
+      :is-legend-shown="true"
+      :series="threeZoneSeries"
+      :value-formatter="kwhFormatter"
+      height="400px"
+      width="800px"
+      @selection-change="handleSelectionChange"
+    />
+  </div>
+</template>
+
+<script setup>
+  import { ref } from 'vue'
+  import BarChart from './components/barchart/index.vue'
+
+  // Formatters
+  const kwhFormatter = (value) => `${value.toLocaleString()} kWh`
+
+  // Basic data
+  const basicData = [
+    { label: 'Jan', value: 1200 },
+    { label: 'Feb', value: 1800 },
+    { label: 'Mar', value: 2200 },
+    { label: 'Apr', value: 1600 },
+    { label: 'May', value: 2400 },
+    { label: 'Jun', value: 2800 },
+    { label: 'Jul', value: 2200 },
+    { label: 'Aug', value: 1600 },
+    { label: 'Sep', value: 2400 },
+    { label: 'Oct', value: 2800 },
+    { label: 'Nov', value: 2200 },
+    { label: 'Dec', value: 1600 },
+  ]
+
+  // Minimal data with fewer points
+  const minimalData = [
+    { label: 'Q1', value: 3500 },
+    { label: 'Q2', value: 4200 },
+    { label: 'Q3', value: 5100 },
+    { label: 'Q4', value: 4800 },
+  ]
+
+  // Labels for stacked charts
+  const quarterLabels = [
+    { label: 'Q1' },
+    { label: 'Q2' },
+    { label: 'Q3' },
+    { label: 'Q4' },
+  ]
+
+  const monthLabels = [
+    { label: 'Jan' },
+    { label: 'Feb' },
+    { label: 'Mar' },
+    { label: 'Apr' },
+    { label: 'May' },
+    { label: 'Jun' },
+    { label: 'Jul' },
+    { label: 'Aug' },
+    { label: 'Sep' },
+    { label: 'Oct' },
+    { label: 'Nov' },
+    { label: 'Dec' },
+  ]
+
+  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: 2000 },
+    { label: 'Aug', value: 2200 },
+    { label: 'Sep', value: 2400 },
+    { label: 'Oct', value: 2600 },
+    { label: 'Nov', value: 2800 },
+    { label: 'Dec', value: 3000 },
+    { label: 'Jan 2024', value: 2800 },
+    { label: 'Feb 2024', value: 2600 },
+    { label: 'Mar 2024', value: 2900 },
+    { label: 'Apr 2024', value: 3100 },
+    { label: 'May 2024', value: 2700 },
+    { label: 'Jun 2024', value: 2500 },
+  ]
+
+  // Three zone series data
+  const threeZoneSeries = [
+    {
+      name: 'Peak Hours',
+      data: [
+        { label: 'Q1', value: 800 },
+        { label: 'Q2', value: 1200 },
+        { label: 'Q3', value: 1600 },
+        { label: 'Q4', value: 1400 },
+      ],
+    },
+    {
+      name: 'Mid-Peak',
+      data: [
+        { label: 'Q1', value: 600 },
+        { label: 'Q2', value: 800 },
+        { label: 'Q3', value: 1000 },
+        { label: 'Q4', value: 900 },
+      ],
+    },
+    {
+      name: 'Off-Peak',
+      data: [
+        { label: 'Q1', value: 400 },
+        { label: 'Q2', value: 500 },
+        { label: 'Q3', value: 600 },
+        { label: 'Q4', value: 550 },
+      ],
+    },
+  ]
+
+  // Six zone series data
+  const tariffZones = [
+    {
+      name: 'Residential',
+      data: monthLabels.map(() => ({
+        label: 'Jan',
+        value: Math.floor(Math.random() * 300) + 100,
+      })),
+    },
+    {
+      name: 'Commercial',
+      data: monthLabels.map(() => ({
+        label: 'Jan',
+        value: Math.floor(Math.random() * 400) + 200,
+      })),
+    },
+    {
+      name: 'Industrial',
+      data: monthLabels.map(() => ({
+        label: 'Jan',
+        value: Math.floor(Math.random() * 500) + 300,
+      })),
+    },
+    {
+      name: 'Agricultural',
+      data: monthLabels.map(() => ({
+        label: 'Jan',
+        value: Math.floor(Math.random() * 200) + 100,
+      })),
+    },
+    {
+      name: 'Public',
+      data: monthLabels.map(() => ({
+        label: 'Jan',
+        value: Math.floor(Math.random() * 300) + 150,
+      })),
+    },
+    {
+      name: 'Special',
+      data: monthLabels.map(() => ({
+        label: 'Jan',
+        value: Math.floor(Math.random() * 250) + 100,
+      })),
+    },
+  ].map((zone) => ({
+    ...zone,
+    data: zone.data.map((item, index) => ({
+      ...item,
+      label: monthLabels[index].label,
+    })),
+  }))
+
+  // Daily data for scrollable example
+  const dailyData = Array.from({ length: 31 }, (_, i) => ({
+    label: `Day ${i + 1}`,
+    value: Math.floor(Math.random() * 200) + 50,
+  }))
+
+  // Time frame options
+  const timeFrameOptions = [
+    { label: 'Daily', value: 'daily' },
+    { label: 'Weekly', value: 'weekly' },
+    { label: 'Monthly', value: 'monthly' },
+    { label: 'Yearly', value: 'yearly' },
+  ]
+  const selectedTimeFrame = ref('monthly')
+
+  // View options
+  const viewOptions = [
+    { label: 'Chart', value: 'chart' },
+    { label: 'Table', value: 'table' },
+    { label: 'Combined', value: 'combined' },
+  ]
+  const selectedView = ref('chart')
+
+  // Handlers
+  const handleTimeFrameSelect = (value) => {
+    selectedTimeFrame.value = value
+    console.log(`Time frame changed to: ${value}`)
+  }
+
+  const handleViewSelect = (value) => {
+    selectedView.value = value
+    console.log(`View changed to: ${value}`)
+  }
+
+  const handleSelectionChange = (selection) => {
+    console.log('Selection changed:', selection)
+  }
+
+  const handleValueUpdate = (data) => {
+    console.log('Value updated:', data)
+  }
+
+  // Helper for custom tooltip
+  const getPeakTime = (month) => {
+    const peakTimes = {
+      Jan: '6-8 PM',
+      Feb: '5-7 PM',
+      Mar: '4-6 PM',
+      Apr: '3-5 PM',
+      May: '2-4 PM',
+      Jun: '1-3 PM',
+    }
+    return peakTimes[month] || 'N/A'
+  }
+
+  const getEfficiency = (value) => {
+    if (value < 1500) return 'High Efficiency'
+    if (value < 2500) return 'Medium Efficiency'
+    return 'Low Efficiency'
+  }
+</script>
+
+<style scoped>
+  .demo-container {
+    padding: 20px;
+    font-family: 'Figtree', sans-serif;
+  }
+
+  .demo-container > h2 {
+    margin: 40px 0 20px;
+    color: #333;
+    border-bottom: 1px solid #eee;
+    padding-bottom: 10px;
+  }
+
+  h1 {
+    color: #2c3e50;
+    margin-bottom: 30px;
+  }
+</style>

package/src/TestChart.vue

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

@@ -0,0 +1,3 @@
+<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/assets/theme.js

@@ -179,9 +179,25 @@ const theme = (() => {
     },
   }
 
+  const chartGradients = {
+    simple: {
+      from: semanticColors.purple[500],
+      to: semanticColors.purple[400],
+    },
+    stacked: [
+      { from: '#F5EDFF', to: '#DEC5FF' },
+      { from: '#CAA2FF', to: '#F2E8FF' },
+      { from: '#B987FC', to: '#904AEF' },
+      { from: '#8B40F2', to: '#4A1394' },
+      { from: '#6A05F2', to: '#4905A5' },
+      { from: '#5402C3', to: '#2B0362' },
+    ],
+  }
+
   return {
     colors,
     semanticColors,
+    chartGradients,
     fonts: {
       mainFont: '"Figtree", sans-serif',
     },