@policystudio/policy-studio-ui-vue 1.1.44 → 1.1.47

package/src/components/controls/PsSlider.vue

@@ -1,40 +1,109 @@
 <template>
-  <div class="psui-el-slider">
-    <div v-if="label" class="psui-el-slider-label">
-      <span>{{label}}</span> 
+  <div 
+    class="psui-el-slider"
+    :class="`layout-${layout}`"
+  >
+    <div 
+      v-if="label" 
+      class="psui-el-slider-label"
+    >
+      <span>{{ label }}</span> 
     </div>
-    <div :class="{'psui-flex psui-items-center': !label && !bubble }">
-      <div
-        v-if="bubble"
-        class="psui-relative psui-bg-gray-40 psui-text-gray-20 psui-rounded-md psui-text-white psui-font-bold psui-w-10 psui-text-center range-value"
-        :style="{ left: `${positionBubble}px` }"
+
+    <div 
+      class="psui-el-slider-wrapper"
+      :class="{ 'psui-flex psui-items-center' : !label && !bubble }"
+    >
+      <div class="psui-el-slider-wrapper-input">
+        <div
+          v-if="bubble"
+          class="psui-el-slider-range-value"
+          :style="{ left: positionBubble }"
+        >
+          {{ sliderValue }}
+        </div>
+
+        <div 
+          class="slider-bar" 
+          :style="{ width: progressWidth }"
+        ></div>
+
+        <div 
+          v-for="(barStyle, index) in bgBarStyles"
+          :key="index"
+          class="slider-bar-bg"
+          :style="bgBarStyles[index]"
+        ></div>
+
+        <div 
+          v-for="(bar, index) in barStyles"
+          :key="index"
+          class="slider-bar-dynamic"
+          :style="barStyles[index]"
+        ></div>
+        
+        <input
+          ref="slider"
+          type="range"
+          :min="min"
+          :max="max"
+          :step="step"
+          class="psui-el-slider-input psui-float-left"
+          v-model="sliderValue"
+          @input="updateSlider($event)"
+        />
+      </div>
+
+      <div 
+        v-if="dividers"
+        class="psui-el-slider-grid"
       >
-        {{ value }}
+        <div 
+          v-for="(grid, index) in gridData"
+          :key="index"
+          class="line"
+          :style="{ left: `${grid}%` }"
+        ></div>
+
+        <span class="info info-min">{{ min }}</span>
+        <span class="info info-max">{{ max }}</span>
       </div>
-      <input
-        type="range"
-        :min="min"
-        :max="max"
-        :value="value" 
-        @input="$emit('update:value', Number($event.target.value))"
-        class="slider psui-float-left"
-        ref="slider"
-      />
-      <span v-if="!label && !bubble" class="psui-bg-gray-20 psui-font-bold psui-text-gray-50 psui-px-2 psui-py-px psui-rounded-sm psui-float-left psui-ml-2">{{ value }}</span>
+
+      <span 
+        v-if="!label && !bubble" 
+        class="psui-el-slider-bubble"
+      >
+        {{ sliderValue }}
+      </span>
     </div>
   </div>
 </template>
 
 <script>
+export const sliderLayout = ['default', 'rich']
+
 export default {
   name: 'PsSlider',
   props: {
+    layout: {
+      type: String,
+      default: 'default',
+      validator: (value) => {
+        return sliderLayout.indexOf(value) !== -1
+      }
+    },
     min: {
       type: Number,
       default: 0,
     },    
     max: {
       type: Number,
+      default: 100,
+      required: true,
+    },
+    maxValue: {
+      type: Number,
+      default: 100,
       required: true,
     },
     label: {
@@ -42,6 +111,7 @@ export default {
     },
     value: {
       type: [Number, String],
+      default: 0,
     },
     baseValue: {
       type: [Number, Boolean]
@@ -55,81 +125,131 @@ export default {
     },
     bubble: {
       type: Boolean
+    },
+    dividers: {
+      type: Boolean,
+      default: false
+    },
+    modelValue: {
+      type: Number,
+      default: 50,
+    },
+    gridData: {
+      type: Array,
+      default() {
+        return [0, 30, 55, 80, 100]
+      }
+    },
+    sliderColors: {
+      type: Array,
+      default() {
+        return [
+          { start: 140, end: 170, bgColor: '#FF906D' },
+          { start: 170, end: 200, bgColor: '#D65C5A' },
+        ]
+      }
+    },
+    bgColors: {
+      type: Array,
+      default() {
+        return [
+          { start: 0, end: 170, bgColor: '#D6DDE5' },
+          { start: 170, end: 200, bgColor: '#A2ACB7' },
+        ]
+      }
     }
   },
-  data: () => {
-    return {
-      isMounted: false
-    }
-  },
+  data: () => ({
+    isMounted: false,
+    sliderWidth: 0,
+    sliderValue: 0,
+    progress: 0,
+    barStyles: [],
+    bgBarStyles: []
+  }),
   computed: {
     positionBubble() {
-      if (this.bubble && this.isMounted) {
-        return (this.$refs.slider.offsetWidth / this.max) * this.value - 15
+      const val = this.sliderValue
+      const width = this.sliderWidth - 24
+      const percent = (val - this.min) / (this.max - this.min)
+      const offset = -2
+      const position = width * percent + offset
+
+      return `${position}px`
+    },
+    progressWidth() {
+      if (this.sliderValue > this.maxValue) {
+        return '100%'
       }
-      return 0
-    }
+      return ((this.sliderValue - this.min) / (this.max - this.min)) * 100 + '%'
+    },
+  },
+  watch: {
+    sliderValue(newValue) {
+      this.updateProgress()
+      this.$emit('input', newValue)
+      this.updateBarStyles()
+    },
+    value(newValue) {
+      this.sliderValue = newValue
+    },
+    sliderColors: {
+      immediate: true,
+      handler() {
+        this.updateBarStyles()
+      },
+    },
+  },
+  created() {
+    window.addEventListener('resize', this.resizeHandler)
+  },
+  destroyed() {
+    window.removeEventListener('resize', this.resizeHandler)
   },
   mounted() {
     this.isMounted = true
+    this.updateProgress()
+    this.updateBarStyles()
   },
   methods: {
-    getValueToScale(value) {
-      return 100 * value / this.rangeDistanceMax
-    }
-  }
-}
-</script>
-
-<style scoped>
-.slider {
-  width: 100%;
-  -webkit-appearance: none;
-  height: 6px;
-  border-radius: 5px;
-  background: #d3d3d3;
-  outline: none;
-  opacity: 0.7;
-  -webkit-transition: .2s;
-  transition: opacity .2s;
-}
-
-.slider:hover {
-  opacity: 1;
-}
-
-.slider::-webkit-slider-thumb {
-  border: none;
-  -webkit-appearance: none;
-  appearance: none;
-  width: 20px;
-  height: 20px;
-  border-radius: 50%;
-  background: #64B5CE;
-  cursor: pointer;
-}
-
-.slider::-moz-range-thumb {
-  border: none;
-  width: 20px;
-  height: 20px;
-  border-radius: 50%;
-  background: #64B5CE;
-  cursor: pointer;
-}
-.slider::-webkit-slider-progress, .slider::-moz-range-progress {
-  border-top-left-radius: 5px;
-  border-bottom-left-radius: 5px;
-  -webkit-appearance: none;
-  box-shadow: none;
-  border: none;
-  background: #64B5CE;
-  height: 6px;
-}
+    updateProgress() {
+      this.progress = Math.round(
+        ((this.sliderValue - this.min) / (this.max - this.min)) * 100
+      )
+    },
+    updateSlider(event) {
+      this.sliderValue = Math.min(event.target.value, this.maxValue)
+    },
+    updateBarStyles() {
+      this.barStyles = this.sliderColors.map((bar) => this.getBarStyle(bar))
+      this.bgBarStyles = this.bgColors.map((bar) => this.getBarStyle(bar, false))
+    },
+    resizeHandler() {
+      this.sliderWidth = this.$refs.slider.clientWidth
+    },
+    getBarStyle(bar, normalizeByProgress = true) {
+      const start = (bar.start / this.max) * 100
+      const end = (bar.end / this.max) * 100
+      const progress = parseFloat(this.progressWidth)
+      let barWidth = end - start
+      let barLeft = start
 
-.range-value{
-  margin-bottom: 10px;
-  padding: 2px 4px;
+      if (normalizeByProgress) {
+        if (progress < start) {
+          barWidth = 0
+        } else if (progress < end) {
+          barWidth = progress - start
+        }
+      }
 
+      return {
+        left: `${barLeft}%`,
+        backgroundColor: bar.bgColor,
+        width: `${barWidth}%`
+      }
+    }
+  },
+  
 }
-</style>
+</script>
+<style> /* Please, use the file src/assets/scss/components/PsSlider.scss */ </style>

package/src/components/table-results/PsTableResults.vue

@@ -1,17 +1,20 @@
 <template>
   <div 
+    ref="tableWrapper"
     class="psui-el-table-results-wrapper"
+    :class="`table-${layout}`"
     :style="{ maxHeight: tableMaxHeight }"
   >
     <table
       ref="table"
       class="psui-el-table-results"
-      :class="`layout-${layout}`"
+      :class="[
+        `layout-${layout}`, 
+        { 'is-sticky': isSticky }
+      ]"
     >
       <slot name="header"></slot>
 
-      <!-- <slot name="body"></slot> -->
-
       <tbody>
         <tr
           v-for="(item, index) in getRows"
@@ -32,7 +35,10 @@
           @mouseenter="onRowHover(index)"
           @mouseleave="onRowHover(false)"
         >
-          <td :style="`background-color:${getBackgroundColor(item.background_color)};`">
+          <td 
+            :style="item.background_color ? `background-color: ${getBackgroundColor(item.background_color)};` : ''"
+            class="psui-transition"
+          >
             <div class="psui-flex psui-justify-between psui-relative">
               <div
                 class="psui-flex psui-items-center actions psui-space-x-3"
@@ -171,14 +177,17 @@
 
           <template v-for="(columnGroup, indexColumn) of columnGroups">
             <td
-              :style="`background-color:${getBackgroundColor(item.background_color)};`"
+              :style="item.background_color ? `background-color: ${getBackgroundColor(item.background_color)};` : ''"
               v-for="column of columnGroup.columns"
+              class="psui-transition"
               :key="indexColumn + '-' + columnGroup.key + '-' + column.key"
               :data-test-id="column.key"
+              :class="`column-${column.key}`"
             >
               <div 
                 v-if="layout != 'comparison'"
                 class="psui-space-x-2 psui-show-childrens-on-hover"
+                :class="column.isCenteredContent ? 'psui-justify-center' : 'psui-justify-end'"
               >
                 <PsTooltip v-if="isSelectedRow(column,item)">
                   <template v-slot:trigger>
@@ -212,48 +221,62 @@
                   </template>
                 </PsTooltip>
 
-                <p v-if="formatFunction && !item.is_disabled">
-                  {{ formatFunction(column.key, item.data[column.key], item.data, item.study_id) }}
-                </p>
+                <p v-if="!column.isSwitch">
+                  <template v-if="column.hasScoreHelper">
+                    <PsTooltip 
+                      layout="blue"
+                    >
+                      <template v-slot:trigger>
+                        {{ getItemContent(column, item) }}
+                      </template>
+                      <template v-slot:content>
+                        <p class="psui-text-xsmall psui-font-bold">{{ column.hasScoreHelper.title }}</p>
+                        {{ column.hasScoreHelper.description }}
+                      </template>
+                    </PsTooltip>
+                  </template>
 
-                <p 
-                  v-else-if="item.is_disabled"
-                  class="psui-text-gray-50"
-                >
-                  --
-                </p>
-                <p v-else>
-                  {{ item.data[column.key] }}
+                  <template v-else>
+                    {{ getItemContent(column, item) }}
+                  </template>
                 </p>
 
                 <PsProgressBar
-                  v-if="column.isChart && formatFunction"
+                  v-if="column.isChart && formatFunction && item.data[column.key] != null"
                   :value="formatFunction(column.key, item.data[column.key], item.data) == '--' ? 0 : item.data[column.key]"
                   :force-break-even="item.is_disabled || formatFunction(column.key, item.data[column.key], item.data) === '--' ? true : false"
                 />
 
                 <PsProgressBar
-                  v-else-if="column.isChart"
+                  v-else-if="column.isChart && item.data[column.key] != null"
                   :value="item.data[column.key] == '--' ? 0 : item.data[column.key]"
                   :force-break-even="item.is_disabled || item.data[column.key] === '--' ? true : false"
                 />
+
+                <PsSwitch
+                  v-if="column.isSwitch && item.data[column.key] != null"
+                  :value="item.data[column.key]"
+                  size="small"
+                />
               </div>
+              
+              <!-- only comparison layout -->
               <div v-else>
                 <div class="psui-py-4 psui-px-6">
                   <PsTagScope 
-                    v-if="item.data[column.key] != 0 && column.renderType && column.renderType == 'tag_scope'"
-                    :included="item.data[column.key] != 0 ? true : false"
+                    v-if="column.renderType && column.renderType == 'tag_scope'"
+                    :included="item.data[column.key] == true"
                   />
 
                   <PsBarChart 
                     v-else-if="item.data[column.key] != 0 && column.renderType && column.renderType == 'bar_chart'"
                     :show-number="item.data[column.key] != 0 ? true : false"
-                    :total="item.data[column.key]"
-                    :fill-width="Math.floor(Math.random() * 100)"
+                    :total="formatFunction ? formatFunction(column.key, item.data[column.key], item.data) == '--' ? 0 : formatFunction(column.key, item.data[column.key], item.data) : item.data[column.key]"
+                    :fill-width="getPsBarChartWidth(column.key, item.data[column.key])"
                   />
 
                   <p v-else-if="item.data[column.key] != 0">
-                    {{ item.data[column.key] }}
+                    {{ formatFunction(column.key, item.data[column.key], item.data) }}
                   </p>
                 </div>
               </div>
@@ -268,15 +291,17 @@
 </template>
 
 <script>
+import { eventBus } from '../../../.storybook/eventBus'
 import PsRichTooltip from '../tooltip/PsRichTooltip.vue'
 import PsIcon from '../ui/PsIcon.vue'
 import PsProgressBar from '../badges-and-tags/PsProgressBar.vue'
 import PsTagScope from '../badges-and-tags/PsTagScope.vue'
 import PsBarChart from '../data-graphics/PsBarChart.vue'
 import PsTooltip from '../tooltip/PsTooltip.vue'
+import PsSwitch from '../controls/PsSwitch.vue'
 import tailwindConfig from '../../../tailwind.config'
 
-export const tableLayout = ['results', 'comparison']
+export const tableLayout = ['results', 'comparison', 'flexible']
 
 export default {
   name: 'PsTableResults',
@@ -286,7 +311,7 @@ export default {
     PsRichTooltip, 
     PsTagScope, 
     PsBarChart, 
-    PsTooltip 
+    PsTooltip, PsSwitch 
   },
   props: {
     /**
@@ -406,7 +431,8 @@ export default {
     isHoveringRow : false,
     selectedRow : null,
     policyItemSelected: null,
-    columnSelectedKey : null
+    columnSelectedKey : null,
+    isSticky: false
   }),
   computed: {
     getRows() {
@@ -436,13 +462,15 @@ export default {
   },
   mounted () {
     this.setCollapsedRows()
-    this.$eventBus.$on('resetPolicyImpactItemSelected', (item, columnKey = 'forecast_emissions_savings') => {
-      this.$eventBus.$emit('setPolicyItemSelected', { item, columnSelectedKey: columnKey })
+    this.$refs.tableWrapper.addEventListener('scroll', this.handleTableScroll)
+    eventBus.$on('resetPolicyImpactItemSelected', (item, columnKey = 'forecast_emissions_savings') => {
+      eventBus.$emit('setPolicyItemSelected', { item, columnSelectedKey: columnKey })
       this.selectedRow = null
     })
   },
   beforeDestroy() {
-    this.$eventBus.$off('resetPolicyImpactItemSelected')
+    eventBus.$off('resetPolicyImpactItemSelected')
+    this.$refs.tableWrapper.removeEventListener('scroll', this.handleTableScroll)
   },
   methods: {
     setCollapsedRows() {
@@ -519,6 +547,17 @@ export default {
     getText(item) {
       if(item?.actions?.length === 1) return item.actions[0].text
     },
+    getItemContent(column, item) {
+      if ( column.isSwitch ) return
+      
+      if (this.formatFunction && !item.is_disabled) {
+        return this.formatFunction(column.key, item.data[column.key], item.data, item.study_id)
+      } else if (item.is_disabled) {
+        return '--'
+      } else {
+        return item.data[column.key]
+      }
+    },
     executeCallback(item, action) {
       if(item?.actions?.length === 1) item.actions[0].callback(item)
       else action?.callback(item)
@@ -539,7 +578,7 @@ export default {
       this.$emit('policy-selected', { item: item, column: column })
     },
     onCloseSelectRow(item, column) {
-      this.$eventBus.$emit('resetPolicyImpactItemSelected', item, column)
+      eventBus.$emit('resetPolicyImpactItemSelected', item, column)
     },
     isSelectedRow(column,item) {
       if(!item.id){
@@ -561,6 +600,20 @@ export default {
         content = `<p class="psui-font-bold psui-text-gray-80 psui-text-xsmall">${item.title} buildings are <br>not allowed.</p>`
       }
       return content
+    },
+
+    getPsBarChartWidth(key, value) {
+      const max = Math.max(...this.getRows.map(item => item.data[key]))
+      return (value * 100) / max
+    },
+
+    handleTableScroll() {
+      const tableWrapper = this.$refs.tableWrapper
+      if (tableWrapper.scrollLeft > 0) {
+        this.isSticky = true
+      } else {
+        this.isSticky = false
+      }
     }
   },
 }

package/src/components/table-results/PsTableResultsHeadFlexible.vue

@@ -0,0 +1,117 @@
+<template>
+  <thead>
+    <tr>
+      <th
+        v-for="columnGroup of header"
+        :key="columnGroup.key"
+        :colspan="columnGroup.columns.reduce( (prev, cur) => cur.isActive ? prev + 1 : prev, 0 )"
+      >
+        <div class="psui-flex psui-space-x-1 psui-items-center psui-show-childrens-on-hover">
+          <p class="title">{{ columnGroup.title }}</p>
+          <PsIcon
+            icon="info"
+            size="18"
+            class="psui-cursor-pointer"
+            icon-classes="psui-text-blue-50 psui-opacity-0 psui-leading-none psui-transition"
+            :style="{ display: 'flex' }"
+            @click.native="$emit('click-column-group-helper', columnGroup, $event)"
+          />
+        </div>
+      </th>
+    </tr>
+
+    <tr>
+      <template v-for="(columnGroup, columnGroupIndex) of header">
+        <th 
+          v-for="column of columnGroup.columns" 
+          :key="`${columnGroup.key}-${column.key}`"
+          :data-test-id="column.key"
+        >
+          <div 
+            class="psui-flex psui-flex-col psui-justify-center"
+            :class="columnGroupIndex == 0 ? 'psui-items-center' : 'psui-items-end'"
+            :data-index="columnGroupIndex"
+          >
+            <div class="psui-show-childrens-on-hover absolute-childrens psui-mb-px">
+              <p class="title" v-if="column.title">{{ column.title }}</p>
+
+              <PsIcon
+                icon="info"
+                size="16"
+                class="psui-cursor-pointer helper"
+                icon-classes="psui-text-blue-50 psui-opacity-0 psui-leading-none psui-transition"
+                :style="{ display: 'flex' }"
+                @click.native="$emit('click-column-helper', column, $event)"
+              />
+              
+              <PsIcon
+                v-if="showOrder"
+                :icon="orderDirection == 'asc' ? 'arrow_downward' : 'arrow_upward'"
+                :type="orderDirection == 'asc' ? 'arrow_upward' : 'arrow_upward'"
+                size="16"
+                class="psui-cursor-pointer helper"
+                icon-classes="psui-text-blue-50 psui-opacity-0 psui-leading-none psui-transition"
+                :style="{ display: 'flex' }"
+                @click.native="$emit('click-order-column', column)" 
+              />
+            </div>
+            <p class="description" v-if="column.description">{{ column.description }}</p>
+          </div>
+        </th>
+      </template>
+    </tr>
+  </thead>
+</template>
+
+<script>
+import PsIcon from '../ui/PsIcon.vue'
+export default {
+  name: 'PsTableResultsHeadFlexible',
+  components: { PsIcon },
+  props: {
+    /**
+    * It sets the title for the first column.
+    */
+    firstColumnTitle: {
+      type: String,
+      default: ''
+    },
+    /**
+    * It sets the description for the first column.
+    */
+    firstColumnDescription: {
+      type: String,
+      default: ''
+    },
+    /**
+    * It sets the values which will be use to render the header.
+    */
+    header: {
+      type: Array,
+      required: true,
+      default: () => {
+        return []
+      },
+    },
+    /**
+    * this sets whether sorting will be displayed.
+    */
+    showOrder: {
+      type: Boolean,
+      default: false
+    }
+  },
+  computed: {
+    columnsSelectedForStudy() {
+      return this.$parent.columnsSelectedForStudy
+    },
+    orderColumn() {
+      return this.$parent.orderColumn
+    },
+    orderDirection() {
+      return this.$parent.orderDirection
+    },
+  }
+}
+</script>
+<style> /* Please, use the file src/assets/scss/components/PsTableResults.scss */ </style>