@kalisio/kdk 2.3.2 → 2.4.0

package/core/client/components/app/KSettings.vue

@@ -1,18 +1,16 @@
 <template>
-  <Suspense>
-    <KForm
-      id="settings"
-      ref="formRef"
-      :values="settings"
-      schema="settings.update"
-      :filter="schemaFilter"
-    />
-  </Suspense>
+  <KForm
+    id="settings"
+    ref="formRef"
+    :values="settings"
+    :schema="schema"
+    :filter="schemaFilter"
+  />
 </template>
 
 <script setup>
 import _ from 'lodash'
-import { ref } from 'vue'
+import { ref, onMounted } from 'vue'
 import { api } from '../../api.js'
 import KForm from '../form/KForm.vue'
 
@@ -21,6 +19,7 @@ const serviceSettings = api.getService('settings')
 const formRef = ref(null)
 const settings = ref(null)
 const schemaFilter = ref(null)
+const schema = ref('settings.update')
 
 // Functions
 async function apply () {
@@ -31,10 +30,15 @@ async function apply () {
   }
 }
 
+// Hooks
+onMounted(async () => {
+  settings.value = await serviceSettings.get('settings')
+  const mapping = serviceSettings.getSettingsMapping()
+  schemaFilter.value = Object.keys(mapping).filter(value => _.get(mapping, value))
+})
+
 // Immediate
-settings.value = await serviceSettings.get('settings')
-const mapping = serviceSettings.getSettingsMapping()
-schemaFilter.value = Object.keys(mapping).filter(value => _.get(mapping, value))
+schema.value = serviceSettings.getSchema()
 
 // Expose
 defineExpose({

package/core/client/components/chart/KDataTable.vue

@@ -30,7 +30,7 @@ import _ from 'lodash'
 import moment from 'moment'
 import Papa from 'papaparse'
 import { ref, watch } from 'vue'
-import { downloadAsBlob, convertTimeSerie } from '../../utils'
+import { downloadAsBlob } from '../../utils'
 import { useSchema } from '../../composables'
 import { Units } from '../../units.js'
 import { Time } from '../../time.js'
@@ -71,25 +71,23 @@ const height = ref(0)
 // Used to store template compilers per field
 const compilers = {}
 const exportCompilers = {}
-let propertiesToConvert = []
 
 // Watch
-watch(() => props.tables, update)
-watch(() => props.schema, update)
+// We use debounce here to avoid multiple refresh when initializing props
+const requestUpdate = _.debounce(() => update(), 250)
+watch(() => props.tables, requestUpdate)
+watch(() => props.schema, requestUpdate)
 
 // Functions
 async function update () {
   await compile(props.schema)
   columns.value = []
   const invisibleColumns = []
-  propertiesToConvert = []
   _.forOwn(schema.value.properties, (value, key) => {
     const type = _.get(value, 'type')
     // FIXME: allow for custom representation of complex objects
     if (type === 'object') return
     const label = _.get(value, 'field.label', _.get(value, 'field.helper', key))
-    const convertToDefaultUnit = _.get(value, 'field.defaultUnit', false)
-    if (convertToDefaultUnit) propertiesToConvert.push(key)
     const visible = _.get(value, 'field.visible', true)
     if (!visible) invisibleColumns.push(key)
     const formatter = _.has(value, 'field.formatter') ? _.get(props.formatters, value.field.formatter) : null
@@ -135,7 +133,6 @@ async function update () {
   rows.value = []
   for (const table of props.tables) {
     const data = await table.data
-    convertTimeSerie(data, table.variable, propertiesToConvert)
     rows.value = rows.value.concat(data)
   }
 }
@@ -148,7 +145,6 @@ async function exportData (options = {}) {
   for (let i = 0; i < props.tables.length; i++) {
     const table = props.tables[i]
     const data = await table.data
-    await convertTimeSerie(data, table.variable, propertiesToConvert)
     for (const item of data) {
       const row = {}
       _.forOwn(schema.value.properties, (value, key) => {
@@ -187,6 +183,7 @@ update()
 // Exposed
 defineExpose({
   update,
+  requestUpdate,
   exportData
 })
 </script>

package/core/client/components/chart/KTimeSeriesChart.vue

@@ -1,6 +1,8 @@
 <template>
-  <div class="fit">
+  <div class="fit position-relative">
     <canvas :ref="onCanvasRef" />
+    <KStamp v-if="!hasData" icon="las la-exclamation-circle" icon-size="3rem"
+        :text="$t('KTimeSeriesChart.NO_DATA_AVAILABLE')" text-size="1rem" class="absolute-center" />
   </div>
 </template>
 
@@ -47,36 +49,31 @@ const emit = defineEmits(['zoom-start', 'zoom-end', 'legend-click'])
 let canvas = null
 let chart = null
 const unit2axis = new Map()
+const hasData = ref(false)
+// Min/Max time (ie for x axis)
 const startTime = ref(props.startTime ? moment.utc(props.startTime) : null)
 const endTime = ref(props.endTime ? moment.utc(props.endTime) : null)
-let min = null
-let max = null
+// Min/max value by unit (ie for y axes)
+let min = {}
+let max = {}
 
 // Watch
-watch(() => props.timeSeries, update)
-watch(() => props.xAxisKey, update)
-watch(() => props.yAxisKey, update)
-watch(() => props.startTime, update)
-watch(() => props.endTime, update)
-watch(() => props.zoomable, update)
-watch(() => props.logarithmic, update)
-watch(() => props.currentTime, update)
-watch(() => props.options, update)
+// We use debounce here to avoid multiple refresh when initializing props
+const requestUpdate = _.debounce(() => update(), 250)
+watch(() => props.timeSeries, requestUpdate)
+watch(() => props.xAxisKey, requestUpdate)
+watch(() => props.yAxisKey, requestUpdate)
+watch(() => props.startTime, requestUpdate)
+watch(() => props.endTime, requestUpdate)
+watch(() => props.zoomable, requestUpdate)
+watch(() => props.logarithmic, requestUpdate)
+watch(() => props.currentTime, requestUpdate)
+watch(() => props.options, requestUpdate)
 
 // Functions
 async function onCanvasRef (ref) {
-  if (ref) {
-    if (!chart) {
-      const config = await makeChartConfig()
-      chart = new Chart(ref.getContext('2d'), config)
-    }
-  } else {
-    if (chart) {
-      chart.destroy()
-      chart = null
-    }
-  }
   canvas = ref
+  update()
 }
 function getUnit (timeSerie) {
   return _.get(timeSerie, 'variable.unit')
@@ -84,9 +81,6 @@ function getUnit (timeSerie) {
 function getTargetUnit (timeSerie) {
   return _.get(timeSerie, 'variable.targetUnit')
 }
-function setUnit (timeserie, targetUnit) {
-  _.set(timeserie, 'variable.unit', targetUnit)
-}
 function getZoom () {
   const start = moment.utc(_.get(chart, 'scales.x.min'))
   const end = moment.utc(_.get(chart, 'scales.x.max'))
@@ -112,7 +106,9 @@ function computeScaleBound (scale, property, min, max) {
 async function makeChartConfig () {
   // Order matters as we compute internals like data time range
   const datasets = await makeDatasets()
-  const scales = makeScales()
+  // No data ?
+  if (_.isEmpty(datasets)) return null
+  const scales = makeScales(datasets)
   const annotation = makeAnnotation()
   const config = {
     type: 'line',
@@ -194,7 +190,7 @@ async function makeChartConfig () {
   computeScaleBound(scales.x, 'suggestedMax', startTime.value, endTime.value)
   return config
 }
-function makeScales () {
+function makeScales (datasets) {
   // Setup time ticks unit
   const hours = endTime.value.diff(startTime.value, 'hours')
   const days = endTime.value.diff(startTime.value, 'days')
@@ -247,30 +243,36 @@ function makeScales () {
   let axisId = 0
   for (const timeSerie of props.timeSeries) {
     const unit = getUnit(timeSerie)
-    const targetUnit = getTargetUnit(timeSerie) || unit
-    if (!unit2axis.has(targetUnit.name)) {
+    const targetUnit = getTargetUnit(timeSerie)
+    const unitName = (targetUnit ? targetUnit.name : unit.name)
+    if (!unit2axis.has(unitName)) {
+      // Ensure a related dataset does exist
+      const axisDatasets = _.filter(datasets, dataset => (_.get(dataset, 'targetUnit.name', _.get(dataset, 'unit.name')) === unitName))
+      if (axisDatasets.length === 0) continue
       const axis = `y${axisId}`
-      unit2axis.set(targetUnit.name, axis)
+      // Set axis to related datasets
+      axisDatasets.forEach(dataset => Object.assign(dataset, { yAxisID: axis }))
+      unit2axis.set(unitName, axis)
       scales[axis] = _.merge({
-        targetUnit: targetUnit.name,
         type: props.logarithmic ? 'logarithmic' : 'linear',
         position: (axisId + 1) % 2 ? 'left' : 'right',
         title: {
           display: true,
-          text: i18n.tie(targetUnit.symbol)
+          text: i18n.tie(targetUnit ? targetUnit.symbol : unit.symbol)
         },
         ticks: {
           callback: function (value, index, values) {
             if (values[index] !== undefined) {
+              // We do not convert using units here as data should have already be converted
               return Units.format(values[index].value, null, null, { symbol: false })
             }
           }
         }
       }, _.get(timeSerie.variable.chartjs, 'yAxis', {}))
-      computeScaleBound(scales[axis], 'min', min, max)
-      computeScaleBound(scales[axis], 'max', min, max)
-      computeScaleBound(scales[axis], 'suggestedMin', min, max)
-      computeScaleBound(scales[axis], 'suggestedMax', min, max)
+      computeScaleBound(scales[axis], 'min', min[unitName], max[unitName])
+      computeScaleBound(scales[axis], 'max', min[unitName], max[unitName])
+      computeScaleBound(scales[axis], 'suggestedMin', min[unitName], max[unitName])
+      computeScaleBound(scales[axis], 'suggestedMax', min[unitName], max[unitName])
       ++axisId
     }
   }
@@ -282,28 +284,28 @@ async function makeDatasets () {
     const label = _.get(timeSerie, 'variable.label')
     const unit = getUnit(timeSerie)
     const targetUnit = getTargetUnit(timeSerie)
-    if (targetUnit) setUnit(timeSerie, targetUnit)
     const data = await timeSerie.data
+    // No data ?
+    if (_.isEmpty(data)) continue
+    const unitName = (targetUnit ? targetUnit.name : unit.name)
     const dataset = Object.assign({
       label,
       data,
       unit,
-      targetUnit,
-      yAxisID: unit2axis.get(unit.name)
+      targetUnit
     }, _.omit(_.get(timeSerie, 'variable.chartjs', {}), 'yAxis'))
     const xAxisKey = _.get(dataset, 'parsing.xAxisKey', props.xAxisKey)
     const yAxisKey = _.get(dataset, 'parsing.yAxisKey', props.yAxisKey)
     // Update time/value range
     data.forEach(item => {
       const time = moment.utc(_.get(item, xAxisKey))
-      let value = _.get(item, yAxisKey)
-      if (value) {
-        if (targetUnit) {
-          value = Units.convert(value, unit.name, targetUnit.name)
-          _.set(item, yAxisKey, value)
+      // Take zero into account
+      if (_.has(item, yAxisKey)) {
+        const value = _.get(item, yAxisKey)
+        if (_.isFinite(value)) {
+          if (_.isNil(min[unitName]) || (value < min[unitName])) min[unitName] = value
+          if (_.isNil(max[unitName]) || (value > max[unitName])) max[unitName] = value
         }
-        if (_.isNil(min) || (value < min)) min = value
-        if (_.isNil(max) || (value > max)) max = value
         if (!props.startTime) {
           if (!startTime.value || time.isBefore(startTime.value)) startTime.value = time
         }
@@ -398,12 +400,22 @@ async function update () {
   // Reset time/value range
   startTime.value = (props.startTime ? moment.utc(props.startTime) : null)
   endTime.value = (props.endTime ? moment.utc(props.endTime) : null)
-  min = null
-  max = null
+  min = {}
+  max = {}
 
   const config = await makeChartConfig()
+  if (!config) {
+    if (chart) {
+      chart.clear()
+      chart.destroy()
+    }
+    chart = null
+    hasData.value = false
+    return
+  }
   if (!chart) {
     chart = new Chart(canvas.getContext('2d'), config)
+    hasData.value = true
   } else {
     Object.assign(chart, config)
     chart.update()
@@ -425,6 +437,7 @@ onBeforeUnmount(() => {
 // Expose
 defineExpose({
   update,
+  requestUpdate,
   getZoom,
   exportSeries
 })

package/core/client/components/collection/KBoard.vue

@@ -1,48 +1,32 @@
 <template>
-  <div class="row justify-between q-gutter-x-sm no-wrap">
-    <div class="col-*" />
-    <template v-for="column in columns" :key="column.value">
-      <KColumn
-        :id="column.value"
-        ref="columnRefs"
-        :name="column.value"
-        :header="[{
-          component: 'QSpace'
-        }, {
-          component: 'QChip',
-          label: $tie(column.label),
-          color: 'grey-10',
-          'text-color': 'white',
-          square: true,
-          class: 'justify-center'
-        }, {
-          component: 'QSpace'
-        }]"
-        v-bind="column.props"
-        :height="height"
-        :width="column.width"
-        :style="{ minWidth: `${column.width}px`, maxWidth: `${column.width}px` }"
-      >
-      </KColumn>
-    </template>
-    <div class="col-*" />
-  </div>
+  <q-scroll-area class="fit">
+    <div class="fit row justify-between q-gutter-x-sm no-wrap">
+      <template v-for="column in columns" :key="column.value">
+        <KGrid
+          ref="columnRefs"
+          :id="column.value"
+          :name="column.value"
+          v-bind="column.props"
+          :append-items="true"
+          :header="getHeader(column.label)"
+          headerClass="full-width justify-center"
+        />
+      </template>
+    </div>
+  </q-scroll-area>
 </template>
 
 <script setup>
 import _ from 'lodash'
 import { ref } from 'vue'
-import KColumn from './KColumn.vue'
+import { i18n } from '../../i18n.js'
+import KGrid from './KGrid.vue'
 
 // Props
 defineProps({
   columns: {
     type: Array,
     default: () => null
-  },
-  height: {
-    type: Number,
-    required: true
   }
 })
 
@@ -56,6 +40,11 @@ function getColumn (value) {
 function getColumns (values) {
   return values.map(value => getColumn(value))
 }
+function getHeader (label) {
+  return [{
+    component: 'QChip', label: i18n.tie(label), color: 'grey-10', 'text-color': 'white', square: true
+  }]
+}
 
 // Expose
 defineExpose({

package/core/client/components/collection/KCard.vue

@@ -9,22 +9,22 @@
     -->
     <div v-if="hasHeader">
       <div v-bind:class="{ 'q-px-sm q-pt-xs': dense, 'q-px-md q-pt-sm': !dense }">
-        <slot name="card-header">
-          <KPanel
-            id="card-header-panel"
-            :content="computedHeader"
-            :context="$props"
-            class="full-width no-wrap"
-          />
-        </slot>
+        <KPanel
+          id="card-header-panel"
+          :content="computedHeader"
+          :context="$props"
+          class="full-width no-wrap"
+        />
       </div>
     </div>
     <!--
-      Title section
+      Heading section
     -->
-    <div class="column full-width"
-      v-bind:class="{ 'q-px-sm q-pt-xs q-gutter-y-xs': dense, 'q-px-md q-pt-sm q-gutter-y-sm': !dense }">
-      <slot name="card-title">
+    <div
+      class="column full-width"
+      v-bind:class="{ 'q-px-sm q-pt-xs': dense, 'q-px-md q-pt-sm': !dense }"
+    >
+      <slot name="card-heading">
         <div class="row full-width items-center no-wrap">
           <div
             v-if="avatar"
@@ -47,54 +47,56 @@
           </div>
         </div>
       </slot>
-      <slot name="card-description">
-        <!-- Description -->
-        <KCardSection
-          :title="$t('KCard.DESCRIPTION_SECTION')"
-          :actions="descriptionActions"
-          :hideHeader="!isExpanded"
-          :dense="dense"
-        >
-          <div class="q-pb-xs">
-            <KTextArea
-              :text="description || $tie('KCard.NO_DESCRIPTION_LABEL')"
-              :minHeight="44"
-              :dense="dense"
-            />
-          </div>
-        </KCardSection>
-      </slot>
     </div>
     <!--
       Content section
     -->
     <div v-bind:class="{ 'q-px-sm': dense, 'q-px-md': !dense }">
-      <slot name="card-content" />
+      <slot name="card-content">
+        <!-- Visible sections -->
+        <KPanel
+          :content="visibleSections"
+          :context="$props"
+          direction="vertical"
+        />
+        <!-- Expansion sections -->
+        <KPanel v-if="isExpanded"
+          :content="expandableSections"
+          :context="$props"
+          direction="vertical"
+        />
+      </slot>
     </div>
     <!--
       Footer section
     -->
     <div v-if="hasFooter">
       <q-separator />
-      <div v-bind:class="{ 'q-px-sm q-py-xs': dense, 'q-px-md q-py-sm': !dense }">
-        <slot name="card-footer">
-          <k-panel id="card-footer-panel" :content="computedFooter" :context="$props" class="full-width no-wrap" />
-        </slot>
+      <div :class="{ 'q-px-sm q-pt-xs': dense, 'q-px-md q-pt-sm': !dense }">
+        <KPanel
+          id="card-footer-panel"
+          :content="computedFooter"
+          :context="$props"
+          class="full-width no-wrap"
+        />
       </div>
     </div>
     <!--
       Expand action
     -->
-    <div v-if="expandable">
-      <div class="row justify-center">
-        <k-action
-          id="expand-action"
-          :icon="isExpanded ? 'las la-angle-up' : 'las la-angle-down'"
-          :tooltip="isExpanded ? 'KCard.LESS_ACTION' : 'KCard.MORE_ACTION'"
-          size="sm"
-          @triggered="onExpandTriggered" />
-      </div>
+    <div v-if="isExpandable" class="row justify-center">
+      <KAction
+        id="expand-action"
+        icon="las la-angle-down"
+        tooltip="KCard.MORE_DETAILS"
+        :toggle="{ icon: 'las la-angle-up', tooltip: 'KCard.LESS_DETAILS', color: 'grey-7' }"
+        :size="dense ? 'xs' : 'sm'"
+        dense
+        @triggered="onExpandTriggered"
+      />
     </div>
+    <!-- Extra bottom padding if no expand action -->
+    <div v-else :class="{ 'q-pt-xs': dense, 'q-pt-sm': !dense }" />
   </q-card>
 </template>
 
@@ -102,18 +104,16 @@
 import _ from 'lodash'
 import KAction from '../action/KAction.vue'
 import KPanel from '../KPanel.vue'
-import KTextArea from '../KTextArea.vue'
 import KAvatar from '../KAvatar.vue'
-import KCardSection from './KCardSection.vue'
+import KDescriptionCardSection from './KDescriptionCardSection.vue'
 import { baseItem } from '../../mixins'
 
 export default {
   components: {
     KPanel,
     KAvatar,
-    KTextArea,
     KAction,
-    KCardSection
+    KDescriptionCardSection
   },
   mixins: [baseItem],
   emits: [
@@ -125,14 +125,14 @@ export default {
       type: [Object, Array],
       default: () => null
     },
+    sections: {
+      type: Object,
+      default: () => null
+    },
     footer: {
       type: [Object, Array],
       default: () => null
     },
-    expandable: {
-      type: Boolean,
-      default: false
-    },
     avatar: {
       type: Boolean,
       default: true
@@ -163,11 +163,26 @@ export default {
     hasHeader () {
       return !_.isEmpty(this.computedHeader)
     },
-    hasDescription () {
-      return !_.isEmpty(this.description)
+    computedSections () {
+      return _.map(this.sections, (value, key) => {
+        return {
+          ...value,
+          item: this.item,
+          actions: _.filter(this.itemActions, { scope: key }),
+          dense: this.dense
+        }
+      })
+    },
+    visibleSections () {
+      return _.filter(this.computedSections, section => {
+        return section.scope !== 'expansion'
+      })
+    },
+    expandableSections () {
+      return _.filter(this.computedSections, { scope: 'expansion' })
     },
-    descriptionActions () {
-      return _.filter(this.itemActions, { scope: 'description' })
+    isExpandable () {
+      return !_.isEmpty(this.expandableSections)
     },
     computedFooter () {
       if (this.footer) return this.footer
@@ -182,7 +197,7 @@ export default {
   },
   data () {
     return {
-      isExpanded: !this.expandable
+      isExpanded: false
     }
   },
   methods: {

package/core/client/components/collection/KCardSection.vue

@@ -4,15 +4,13 @@
     <!--
       Header section
      -->
-    <div v-if="!hideHeader" class="row full-width items-center no-wrap" style="min-height: 30px">
+    <div v-if="!hideHeader" class="row full-width justify-between items-center no-wrap">
       <span class="text-grey-7 text-body-2 ellipsis">
         {{ title }}
       </span>
-      <q-space />
       <KPanel
-        v-if="actions"
-        :content="actions"
-        :context="context"
+        v-if="filteredActions"
+        :content="filteredActions"
         class="no-wrap"
       />
     </div>
@@ -26,9 +24,11 @@
 </template>
 
 <script setup>
+import _ from 'lodash'
+import { computed } from 'vue'
 
 // Props
-defineProps({
+const props = defineProps({
   title: {
     type: String,
     default: ''
@@ -37,6 +37,10 @@ defineProps({
     type: Array,
     default: () => null
   },
+  actionsFilter: {
+    type: [String, Array],
+    default: () => null
+  },
   hideHeader: {
     type: Boolean,
     default: false
@@ -44,10 +48,16 @@ defineProps({
   dense: {
     type: Boolean,
     default: false
-  },
-  context: {
-    type: Object,
-    default: () => null
   }
 })
+
+// Computed
+const filteredActions = computed(() => {
+  if (!props.actionsFilter) return props.actions
+  let filter = props.actionsFilter
+  if (_.isString(filter)) filter = [filter]
+  return _.filter(props.actions, action => {
+    return _.indexOf(filter, action.id) >= 0
+  })
+})
 </script>