@kalisio/kdk 2.3.2 → 2.4.0

package/core/client/units.js

@@ -215,8 +215,9 @@ const quantities = {
 export const Units = {
   initialize () {
     // Set the units object within the store
-    Store.set('units', _.merge(config.units || {},
-      quantities, {
+    Store.set('units', _.defaultsDeep(config.units || {},
+      quantities,
+      {
         default: {
           length: 'm',
           altitude: 'm',
@@ -230,7 +231,8 @@ export const Units = {
           notation: 'auto',
           precision: 3
         }
-      }))
+      }
+    ))
     // Create units not defined by default in mathjs
     this.getQuantities().forEach(quantity => {
       this.createUnits(quantity)
@@ -284,15 +286,31 @@ export const Units = {
   },
   // Get unit definition by name
   getUnit (unit) {
-    return _.find(this.getUnits(), { name: unit })
+    // Not optimized
+    // return _.find(this.getUnits(), { name: unit })
+    let definition
+    _.forOwn(this.get(), (units, quantity) => {
+      // Already found ?
+      if (!definition && _.has(units, unit)) definition = Object.assign({ name: unit, quantity }, _.get(units, unit))
+    })
+    if (!definition) {
+      // Check if that's a mathjs unit ? This will actually enforce a unit to be known by either our systelm or mathjs.
+      // We'd like to be able to mange unknown unit without braking the system just to perform unit display
+      // if (math.Unit.isValuelessUnit(unit)) definition = { name: unit, symbol: unit, label: unit }
+      // Create a fake unit definition for unknown units so tht it does not break others methods
+      definition = { name: unit, symbol: unit, label: unit }
+    }
+    return definition
   },
-  // Get unit symbol by unit name
+  // Get unit symbol by unit name/definition
   getUnitSymbol (unit) {
-    const definition = this.getUnit(unit)
-    return (definition ? i18n.tie(definition.symbol) : unit)
+    const definition = (typeof unit === 'object' ? unit : this.getUnit(unit))
+    return (definition && definition.symbol ? i18n.tie(definition.symbol) : unit)
   },
-  // Get default unit definition (if any) for a given quantity/unit name
+  // Get default unit definition (if any) for a given quantity/unit name/definition
   getDefaultUnit (quantityOrUnit) {
+    if (!quantityOrUnit) return null
+    if (typeof quantityOrUnit === 'object') quantityOrUnit = quantityOrUnit.name
     // Check for quantity first
     let defaultUnit = Store.get(`units.default.${quantityOrUnit}`)
     // If not check by matching quantity based on given unit
@@ -300,44 +318,48 @@ export const Units = {
       const baseUnit = this.getUnit(quantityOrUnit)
       // Get default unit for this quantity instead
       if (baseUnit) defaultUnit = this.getDefaultUnit(baseUnit.quantity)
+    } else {
+      // Jump from name to definition
+      defaultUnit = this.getUnit(defaultUnit)
     }
     return defaultUnit
   },
+  // Set default unit name for a quantity
   setDefaultUnit (quantity, unit) {
     Store.set(`units.default.${quantity}`, unit)
   },
-  // Get symbol of default unit (if any) for a given quantity/unit name
+  // Get symbol of default unit (if any) for a given quantity/unit name/definition
   getDefaultUnitSymbol (quantityOrUnit) {
     return this.getUnitSymbol(this.getDefaultUnit(quantityOrUnit))
   },
-  // Get target unit for a source unit, will be default unit (if any) or source unit
+  // Get target unit definition for a source unit name/definition, will be default unit (if any) or source unit
   getTargetUnit (sourceUnit) {
-    return this.getDefaultUnit(sourceUnit) || sourceUnit
+    return this.getDefaultUnit(sourceUnit) || (typeof sourceUnit === 'object' ? sourceUnit : this.getUnit(sourceUnit))
   },
-  // Get target unit symbol for a source unit, will be default unit symbol (if any) or source unit symbol
+  // Get target unit symbol for a source unit name/definition, will be default unit symbol (if any) or source unit symbol
   getTargetUnitSymbol (sourceUnit) {
     return this.getUnitSymbol(this.getTargetUnit(sourceUnit))
   },
-  // Convert between units by names
+  // Convert between units by names/definitions
   // If target unit is not specified will use default unit (if any) for source unit
   convert (value, sourceUnit, targetUnit) {
-    if (_.isNil(value)) {
-      logger.warn('[KDK] cannont convert a nil value')
-      return
-    }
+    if (_.isNil(value) || !_.isFinite(value)) return value
     if (value === Number.MIN_VALUE || value === Number.MAX_VALUE) return value
-    // If target unit is same as source unit does nothing
-    if (targetUnit === sourceUnit) return value
+    const sourceUnitDef = (typeof sourceUnit === 'string') ? this.getUnit(sourceUnit) : sourceUnit
+    let targetUnitDef = (typeof targetUnit === 'string') ? this.getUnit(targetUnit) : targetUnit
     // If target unit is not given use default one
-    if (!targetUnit) targetUnit = this.getDefaultUnit(sourceUnit)
-    // Check if the target unit does exist
-    if (!targetUnit) return value
-    // Check if the source unit does exist
-    if (!math.Unit.isValuelessUnit(sourceUnit)) return value
-    let n = math.unit(value, sourceUnit)
-    n = n.toNumber(targetUnit)
+    if (!targetUnitDef && sourceUnitDef) targetUnitDef = this.getDefaultUnit(sourceUnitDef)
+    // Check if the source/target unit does exist
+    if (!sourceUnitDef || !targetUnitDef) return value
+    // If target unit is same as source unit does nothing
+    if (targetUnitDef.name === sourceUnitDef.name) return value
+    // If target unit or source unit is unknown by unit system does nothing
+    if (!math.Unit.isValuelessUnit(sourceUnitDef.name) || !math.Unit.isValuelessUnit(targetUnitDef.name)) return value
+    // Now convert
+    let n = math.unit(value, sourceUnitDef.name)
+    n = n.toNumber(targetUnitDef.name)
     // Remap from [-180,+180[ to [0,360[ for angles
-    n = (targetUnit === 'deg' ? (n < 0.0 ? n + 360.0 : n) : n)
+    n = (targetUnitDef.name === 'deg' ? (n < 0.0 ? n + 360.0 : n) : n)
     return n
   },
   // Format display of source value in target unit, converting from source unit

package/core/client/utils/index.js

@@ -1,6 +1,5 @@
 import _ from 'lodash'
 import logger from 'loglevel'
-import moment from 'moment'
 import emailValidator from 'email-validator'
 import { Notify, Dialog, Loading, exportFile } from 'quasar'
 import { defineAsyncComponent, markRaw } from 'vue'
@@ -9,11 +8,13 @@ export * from './utils.account.js'
 export * from './utils.actions.js'
 export * from './utils.colors.js'
 export * from './utils.content.js'
-export * from './utils.data.js'
+export * from './utils.items.js'
 export * from './utils.locale.js'
+export * from './utils.math.js'
 export * from './utils.platform.js'
 export * from './utils.push.js'
 export * from './utils.pwa.js'
+export * from './utils.screen.js'
 export * from './utils.shapes.js'
 export * from './utils.session.js'
 export * from './utils.time.js'

package/core/client/utils/utils.actions.js

@@ -23,6 +23,10 @@ export const actionProps = {
     type: String,
     default: 'md'
   },
+  flat: {
+    type: Boolean,
+    default: true
+  },
   outline: {
     type: Boolean,
     default: false

package/core/client/utils/utils.colors.js

@@ -1,8 +1,159 @@
 import _ from 'lodash'
 import logger from 'loglevel'
-import { getCssVar } from 'quasar'
+import { colors } from 'quasar'
 import chroma from 'chroma-js'
 
+const HtmlColors = {
+  black: "#000000",
+  silver: "#C0C0C0",
+  gray: "#808080",
+  grey: "#808080",
+  white: "#FFFFFF",
+  maroon: "#800000",
+  red: "#FF0000",
+  purple: "#800080",
+  fuchsia: "#FF00FF",
+  green: "#008000",
+  lime: "#00FF00",
+  olive: "#808000",
+  yellow: "#FFFF00",
+  navy: "#000080",
+  blue: "#0000FF",
+  teal: "#008080",
+  aqua: "#00FFFF",
+  darkblue: "#00008B",
+  mediumblue: "#0000CD",
+  darkgreen: "#006400",
+  darkcyan: "#008B8B",
+  deepskyblue: "#00BFFF",
+  darkturquoise: "#00CED1",
+  mediumspringgreen: "#00FA9A",
+  springgreen: "#00FF7F",
+  cyan: "#00FFFF",
+  midnightblue: "#191970",
+  dodgerblue: "#1E90FF",
+  lightseagreen: "#20B2AA",
+  forestgreen: "#228B22",
+  seagreen: "#2E8B57",
+  darkslategray: "#2F4F4F",
+  darkslategrey: "#2F4F4F",
+  limegreen: "#32CD32",
+  mediumseagreen: "#3CB371",
+  turquoise: "#40E0D0",
+  royalblue: "#4169E1",
+  steelblue: "#4682B4",
+  darkslateblue: "#483D8B",
+  mediumturquoise: "#48D1CC",
+  indigo: "#4B0082",
+  darkolivegreen: "#556B2F",
+  cadetblue: "#5F9EA0",
+  cornflowerblue: "#6495ED",
+  rebeccapurple: "#663399",
+  mediumaquamarine: "#66CDAA",
+  dimgray: "#696969",
+  dimgrey: "#696969",
+  slateblue: "#6A5ACD",
+  olivedrab: "#6B8E23",
+  slategray: "#708090",
+  slategrey: "#708090",
+  lightslategray: "#778899",
+  lightslategrey: "#778899",
+  mediumslateblue: "#7B68EE",
+  lawngreen: "#7CFC00",
+  chartreuse: "#7FFF00",
+  aquamarine: "#7FFFD4",
+  skyblue: "#87CEEB",
+  lightskyblue: "#87CEFA",
+  blueviolet: "#8A2BE2",
+  darkred: "#8B0000",
+  darkmagenta: "#8B008B",
+  saddlebrown: "#8B4513",
+  darkseagreen: "#8FBC8F",
+  lightgreen: "#90EE90",
+  mediumpurple: "#9370DB",
+  darkviolet: "#9400D3",
+  palegreen: "#98FB98",
+  darkorchid: "#9932CC",
+  yellowgreen: "#9ACD32",
+  sienna: "#A0522D",
+  brown: "#A52A2A",
+  darkgray: "#A9A9A9",
+  darkgrey: "#A9A9A9",
+  lightblue: "#ADD8E6",
+  greenyellow: "#ADFF2F",
+  paleturquoise: "#AFEEEE",
+  lightsteelblue: "#B0C4DE",
+  powderblue: "#B0E0E6",
+  firebrick: "#B22222",
+  darkgoldenrod: "#B8860B",
+  mediumorchid: "#BA55D3",
+  rosybrown: "#BC8F8F",
+  darkkhaki: "#BDB76B",
+  mediumvioletred: "#C71585",
+  indianred: "#CD5C5C",
+  peru: "#CD853F",
+  chocolate: "#D2691E",
+  tan: "#D2B48C",
+  lightgray: "#D3D3D3",
+  lightgrey: "#D3D3D3",
+  thistle: "#D8BFD8",
+  orchid: "#DA70D6",
+  goldenrod: "#DAA520",
+  palevioletred: "#DB7093",
+  crimson: "#DC143C",
+  gainsboro: "#DCDCDC",
+  plum: "#DDA0DD",
+  burlywood: "#DEB887",
+  lightcyan: "#E0FFFF",
+  lavender: "#E6E6FA",
+  darksalmon: "#E9967A",
+  violet: "#EE82EE",
+  palegoldenrod: "#EEE8AA",
+  lightcoral: "#F08080",
+  khaki: "#F0E68C",
+  aliceblue: "#F0F8FF",
+  honeydew: "#F0FFF0",
+  azure: "#F0FFFF",
+  sandybrown: "#F4A460",
+  wheat: "#F5DEB3",
+  beige: "#F5F5DC",
+  whitesmoke: "#F5F5F5",
+  mintcream: "#F5FFFA",
+  ghostwhite: "#F8F8FF",
+  salmon: "#FA8072",
+  antiquewhite: "#FAEBD7",
+  linen: "#FAF0E6",
+  lightgoldenrodyellow: "#FAFAD2",
+  oldlace: "#FDF5E6",
+  magenta: "#FF00FF",
+  deeppink: "#FF1493",
+  orangered: "#FF4500",
+  tomato: "#FF6347",
+  hotpink: "#FF69B4",
+  coral: "#FF7F50",
+  darkorange: "#FF8C00",
+  lightsalmon: "#FFA07A",
+  orange: "#FFA500",
+  lightpink: "#FFB6C1",
+  pink: "#FFC0CB",
+  gold: "#FFD700",
+  peachpuff: "#FFDAB9",
+  navajowhite: "#FFDEAD",
+  moccasin: "#FFE4B5",
+  bisque: "#FFE4C4",
+  mistyrose: "#FFE4E1",
+  blanchedalmond: "#FFEBCD",
+  papayawhip: "#FFEFD5",
+  lavenderblush: "#FFF0F5",
+  seashell: "#FFF5EE",
+  cornsilk: "#FFF8DC",
+  lemonchiffon: "#FFFACD",
+  floralwhite: "#FFFAF0",
+  snow: "#FFFAFA",
+  lightyellow: "#FFFFE0",
+  ivory: "#FFFFF0"
+}
+
 export const Colors = {
   white: '#fff',
   dark: '#333',
@@ -29,7 +180,9 @@ export const Colors = {
 
 export function getHtmlColor (color, defaultColor) {
   if (!color) return defaultColor
-  return getCssVar(color) || color
+  if (color.startsWith('#')) return color
+  if (_.has(HtmlColors, color)) return color
+  return colors.getPaletteColor(color)
 }
 
 export function getPaletteFromColor (color) {

package/core/client/utils/utils.items.js

@@ -0,0 +1,26 @@
+export const CardSectionProps = {
+  title: {
+    type: String,
+    default: ''
+  },
+  item: {
+    type: Object,
+    default: () => null
+  },
+  actions: {
+    type: Array,
+    default: () => null
+  },
+  actionsFilter: {
+    type: [String, Array],
+    default: () => null
+  },
+  hideHeader: {
+    type: Boolean,
+    default: false
+  },
+  dense: {
+    type: Boolean,
+    default: false
+  }
+}

package/core/client/utils/utils.math.js

@@ -0,0 +1,3 @@
+export function clamp (value, min, max) {
+  return Math.min(Math.max(value, min), max)
+}

package/core/client/utils/utils.platform.js

@@ -1,10 +1,12 @@
 import { Platform } from 'quasar'
+import config from 'config'
 
 export function getPlatform () {
   return Object.assign(Platform.is, {
     touch: Platform.has.touch,
     storage: Platform.has.webStorage,
     iframe: Platform.within.frame,
-    agent: Platform.userAgent
+    agent: Platform.userAgent,
+    pwa: config.buildMode === 'pwa'
   })
 }

package/core/client/utils/utils.screen.js

@@ -0,0 +1,82 @@
+import _ from 'lodash'
+import logger from 'loglevel'
+import { toRef } from 'vue'
+import { Screen } from 'quasar'
+import { AppFullscreen } from 'quasar'
+
+export const Fullscreen = toRef(AppFullscreen, 'isActive')
+
+export function computeResponsiveWidth (width) {
+  if (_.isNumber(width)) {
+    if (width > 100) return width
+    return Screen.width * width / 100
+  }
+  if (!_.isObject(width)) {
+    logger.warn(`[KDK] Invalid width parameter ${width}`)
+    return undefined
+  }
+  let breakpointWidth = _.get(width, Screen.name)
+  if (!breakpointWidth) {
+    logger.warn(`[KDK] Cannot find width value for breakpoint ${Screen.name}`)
+    return undefined
+  }
+  if (!_.isNumber(breakpointWidth)) {
+    logger.warn(`[KDK] Invalid width value ${breakpointWidth} for breakpoint ${Screen.name}`)
+    return undefined
+  }
+  return computeResponsiveWidth(breakpointWidth)
+}
+
+export function computeResponsiveHeight (height) {
+  if (_.isNumber(height)) {
+    if (height > 100) return height
+    return Screen.height * height / 100
+  }
+  if (!_.isObject(height)) {
+    logger.warn(`[KDK] Invalid height parameter ${height}`)
+    return undefined
+  }
+  let breakpointHeight = _.get(height, Screen.name)
+  if (!breakpointHeight) {
+    logger.warn(`[KDK] Cannot find height value for breakpoint ${Screen.name}`)
+    return undefined
+  }
+  if (!_.isNumber(breakpointHeight)) {
+    logger.warn(`[KDK] Invalid height value ${breakpointHeight} for breakpoint ${Screen.name}`)
+    return undefined
+  }
+  return computeResponsiveHeight(breakpointHeight)
+}
+
+export function computeResponsiveSize (size) {
+  if (_.isArray(size)) {
+    if (size.length === 2) {
+      logger.warn(`[KDK] Invalid size parameter ${size}`)
+      return undefined
+    }
+    return size
+  }
+  if (!_.isObject(size)) {
+    logger.warn(`[KDK] Invalid size parameter ${size}`)
+    return undefined
+  }
+  let breakpointSize = _.get(size, Screen.name)
+  return [computeResponsiveWidth(breakpointSize[0]), computeResponsiveHeight(breakpointSize[1])]
+}
+
+export function getOrientation () {
+    return Screen.width > Screen.height ? 'portrait' : 'landscape'
+}
+
+export async function toggleFullscreen () {
+  return new Promise((resolve, reject) => {
+    AppFullscreen.toggle()
+      .then(() => {
+        resolve(true)
+      })
+      .catch(err => {
+        logger.warn(`[KDK] Cannot toggle fullscreen mode: ${err}`)
+        reject(false)
+      })
+  })
+}

package/core/client/utils/utils.time.js

@@ -33,5 +33,4 @@ export function fromQuasarTime (time, format) {
   return (Time.getFormatTimezone()
     ? moment.tz(time, format, Time.getFormatTimezone())
     : moment(time, format))
-    console.log()
 }

package/core/common/schemas/settings.update.json

@@ -130,6 +130,18 @@
         ]
       }
     },
+    "timeseriesGroupBy": {
+      "type": "string",
+      "group": "group-timeseries",
+      "field": {
+        "component": "form/KSelectField",
+        "label": "schemas.TIMESERIES_GROUP_BY",
+        "options": [
+          { "label": "schemas.TIMESERIES_GROUP_BY_VARIABLE", "value": "variable" },
+          { "label": "schemas.TIMESERIES_GROUP_BY_FEATURE", "value": "feature", "selected": true }
+        ]
+      }
+    },
     "restoreView": {
       "type": "boolean",
       "group": "group-map",