@kalisio/kdk 2.1.9 → 2.2.0

package/core/client/units.js

@@ -1,4 +1,5 @@
 import _ from 'lodash'
+import logger from 'loglevel'
 import * as math from 'mathjs'
 import config from 'config'
 import { i18n } from './i18n.js'
@@ -93,6 +94,106 @@ const angle = {
     label: 'units.RADIAN_LABEL'
   }
 }
+const fraction = {
+  ppm: {
+    symbol: 'units.PPM_SYMBOL',
+    label: 'units.PPM_LABEL'
+  }
+}
+const density = {
+  'ug/m^3': {
+    symbol: 'units.MICROGRAM_PER_M3_SYMBOL',
+    label: 'units.MICROGRAM_PER_M3_LABEL'
+  }
+}
+const volumeVelocity = {
+  'm^3/s': {
+    symbol: 'units.CUBIC_METER_PER_SECOND_SYMBOL',
+    label: 'units.CUBIC_METER_PER_SECOND_LABEL'
+  }
+}
+const radioactivity = {
+  bq: {
+    symbol: 'units.BEQUEREL_SYMBOL',
+    label: 'units.BEQUEREL_LABEL',
+    baseName: 'radioactivity'
+  }
+}
+const radioactivityDensity = {
+  'bq/m^2': {
+    symbol: 'units.BEQUEREL_PER_M2_SYMBOL',
+    label: 'units.BEQUEREL_PER_M2_LABEL'
+  },
+  'bq/m^3': {
+    symbol: 'units.BEQUEREL_PER_M3_SYMBOL',
+    label: 'units.BEQUEREL_PER_M3_LABEL'
+  }
+}
+const equivalentDose = {
+  sv: {
+    symbol: 'units.SIEVERT_SYMBOL',
+    label: 'units.SIEVERT_LABEL',
+    baseName: 'equivalentDose',
+    aliases: ['sievert']
+  },
+  msv: {
+    symbol: 'units.MILLISIEVERT_SYMBOL',
+    label: 'units.MILLISIEVERT_LABEL',
+    definition: '0.001 sv'
+  },
+  usv: {
+    symbol: 'units.MICROSIEVERT_SYMBOL',
+    label: 'units.MICROSIEVERT_LABEL',
+    definition: '0.000001 sv'
+  },
+  nsv: {
+    symbol: 'units.NANOSIEVERT_SYMBOL',
+    label: 'units.NANOSIEVERT_LABEL',
+    definition: '0.000000001 sv'
+  }
+}
+const equivalentDoseRate = {
+  svs: {
+    symbol: 'units.SIEVERT_PER_SECOND_SYMBOL',
+    label: 'units.SIEVERT_PER_SECOND_LABEL',
+    baseName: 'equivalentDoseRate'
+  },
+  msvs: {
+    symbol: 'units.MILLISIEVERT_PER_SECOND_SYMBOL',
+    label: 'units.MILLISIEVERT_PER_SECOND_LABEL',
+    definition: '0.001 svs'
+  },
+  usvs: {
+    symbol: 'units.MICROSIEVERT_PER_SECOND_SYMBOL',
+    label: 'units.MICROSIEVERT_PER_SECOND_LABEL',
+    definition: '0.000001 svs'
+  },
+  nsvs: {
+    symbol: 'units.NANOSIEVERT_PER_SECOND_SYMBOL',
+    label: 'units.NANOSIEVERT_PER_SECOND_LABEL',
+    definition: '0.000000001 svs'
+  },
+  svh: {
+    symbol: 'units.SIEVERT_PER_HOUR_SYMBOL',
+    label: 'units.SIEVERT_PER_HOUR_LABEL',
+    definition: '0.000277778 svs'
+  },
+  msvh: {
+    symbol: 'units.MILLISIEVERT_PER_HOUR_SYMBOL',
+    label: 'units.MILLISIEVERT_PER_HOUR_LABEL',
+    definition: '0.000000277778 svs'
+  },
+  usvh: {
+    symbol: 'units.MICROSIEVERT_PER_HOUR_SYMBOL',
+    label: 'units.MICROSIEVERT_PER_HOUR_LABEL',
+    definition: '0.000000000277778 svs'
+  },
+  nsvh: {
+    symbol: 'units.NANOSIEVERT_PER_HOUR_SYMBOL',
+    label: 'units.NANOSIEVERT_PER_HOUR_LABEL',
+    definition: '0.000000000000277778 svs'
+  }
+}
 
 const quantities = {
   length,
@@ -100,7 +201,14 @@ const quantities = {
   area,
   velocity,
   temperature,
-  angle
+  angle,
+  fraction,
+  density,
+  volumeVelocity,
+  radioactivity,
+  radioactivityDensity,
+  equivalentDose,
+  equivalentDoseRate
 }
 
 // Export singleton
@@ -116,6 +224,9 @@ export const Units = {
           velocity: 'm/s',
           temperature: 'degC',
           angle: 'deg',
+          radioactivity: 'bq',
+          equivalentDose: 'usv',
+          equivalentDoseRate: 'usvh',
           notation: 'auto',
           precision: 3
         }
@@ -171,33 +282,67 @@ export const Units = {
       return units
     }
   },
+  // Get unit definition by name
   getUnit (unit) {
     return _.find(this.getUnits(), { name: unit })
   },
+  // Get unit symbol by unit name
   getUnitSymbol (unit) {
     const definition = this.getUnit(unit)
     return (definition ? i18n.t(definition.symbol) : unit)
   },
+  // Get default unit definition (if any) for a given quantity/unit name
   getDefaultUnit (quantityOrUnit) {
     // Check for quantity first
     let defaultUnit = Store.get(`units.default.${quantityOrUnit}`)
     // If not check by matching quantity based on given unit
     if (!defaultUnit) {
-      const baseUnit = Units.getUnit(quantityOrUnit)
+      const baseUnit = this.getUnit(quantityOrUnit)
       // Get default unit for this quantity instead
-      if (baseUnit) defaultUnit = Units.getDefaultUnit(baseUnit.quantity)
+      if (baseUnit) defaultUnit = this.getDefaultUnit(baseUnit.quantity)
     }
     return defaultUnit
   },
+  // Get symbol of default unit (if any) for a given quantity/unit name
+  getDefaultUnitSymbol (quantityOrUnit) {
+    return this.getUnitSymbol(this.getDefaultUnit(quantityOrUnit))
+  },
+  // Get target unit for a source unit, will be default unit (if any) or source unit
+  getTargetUnit (sourceUnit) {
+    return this.getDefaultUnit(sourceUnit) || sourceUnit
+  },
+  // Get target unit symbol for a source unit, will be default unit symbol (if any) or source unit symbol
+  getTargetUnitSymbol (sourceUnit) {
+    return this.getUnitSymbol(this.getTargetUnit(sourceUnit))
+  },
+  // Convert between units by names
+  // If target unit is not specified will use default unit (if any) for source unit
   convert (value, sourceUnit, targetUnit) {
-    if (sourceUnit === targetUnit) return value
+    if (_.isNil(value)) {
+      logger.warn(`[KDK] cannont convert an nil value`)
+      return
+    }
+    if (value === Number.MIN_VALUE || value === Number.MAX_VALUE) return value
+    // 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)
     // Remap from [-180,+180[ to [0,360[ for angles
     n = (targetUnit === 'deg' ? (n < 0.0 ? n + 360.0 : n) : n)
     return n
   },
+  // Format display of source value in target unit, converting from source unit
+  // If target unit is not specified will use default unit (if any) for source unit
+  // options are mathjs format options
   format (value, sourceUnit, targetUnit, options) {
+    if (_.isNil(value)) {
+      logger.warn(`[KDK] cannot format a nil value`)
+      return
+    }
     // If target unit is not given use default one
     if (!targetUnit) targetUnit = this.getDefaultUnit(sourceUnit)
     const n = (targetUnit ? this.convert(value, sourceUnit, targetUnit) : value)

package/core/client/utils/index.js

@@ -12,7 +12,9 @@ export * from './utils.locale.js'
 export * from './utils.platform.js'
 export * from './utils.push.js'
 export * from './utils.pwa.js'
+export * from './utils.shapes.js'
 export * from './utils.session.js'
+export * from './utils.time.js'
 
 Notify.setDefaults({
   position: 'bottom-left',
@@ -107,6 +109,17 @@ export function dataUriToBlob (dataUri) {
   return new Blob([ab], { type: mimeType })
 }
 
+// Taken from https://github.com/juanelas/base64
+export const base64Encode = function (bytes) {
+  bytes = new Uint8Array(bytes)
+  const CHUNK_SIZE = 0x8000
+  const array = []
+  for (let i = 0; i < bytes.length; i += CHUNK_SIZE) {
+    array.push(String.fromCharCode.apply(null, bytes.subarray(i, i + CHUNK_SIZE)))
+  }
+  return btoa(array.join(''))
+}
+
 export function downloadAsBlob (data, filename, mimeType) {
   const blob = new Blob([data], { type: mimeType })
   exportFile(filename, blob)
@@ -174,12 +187,6 @@ export function isObjectID (id) {
   return (id.length === 24 && checkForHexRegExp.test(id))
 }
 
-// Add UTC offset to timezone name
-export function getTimezoneLabel (timezone) {
-  const offset = moment().tz(timezone).format('Z')
-  return `${timezone} (${offset})`
-}
-
 // Helper function to load a schema
 // @schema alias shoud be added in the quasar.config build section
 export async function loadSchema (schemaName) {

package/core/client/utils/utils.account.js

@@ -2,7 +2,7 @@ import { api } from '../api.js'
 
 export async function verifyEmail (email) {
   const response = await api.getService('account').verifyEmail({ email })
-  return response.status === 200 ? true : false
+  return response.status === 200
 }
 
 export function resendVerifySignup (email) {

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

@@ -1,6 +1,10 @@
 import _ from 'lodash'
+import logger from 'loglevel'
+import { getCssVar } from 'quasar'
+import chroma from 'chroma-js'
 
 export const Colors = {
+  white: '#fff',
   dark: '#333',
   red: '#f44336',
   pink: '#e91e63',
@@ -23,6 +27,11 @@ export const Colors = {
   'blue-grey': '#607d8b'
 }
 
+export function getHtmlColor (color, defaultColor) {
+  if (!color) return defaultColor
+  return getCssVar(color) || color
+}
+
 export function getPaletteFromColor (color) {
   // Check if already a color of the palette
   if (Colors[color]) return color
@@ -34,3 +43,37 @@ export function getColorFromPalette (color) {
   if (color.startsWith('#')) return color
   else return Colors[color] || '#ffffff'
 }
+
+export function buildColorScale (options) {
+  if (!options) {
+    logger.warn(`[KDK] buildColorScale: 'options' argument must be defined`)
+    return
+  }
+  let colors = options.colors 
+  if (!colors)  {
+    // For backward compatibility
+    if (options.scale) {
+      logger.warn(`[KDK] buildColorScale: please update 'scale' property to 'colors'`)
+      colors = options.scale
+    } else {
+      logger.warn(`[KDK] buildColorScale: no colors defined, using default default colors 'Spectral'`)
+      colors = 'Spectral'
+    }
+  }
+  let scale = chroma.scale(colors)
+  if (options.classes) {
+    if (Array.isArray(options.classes)) {
+      // The provided classes implicitly define the domain, then we omit the domain
+      scale = scale.classes(options.classes)
+    }
+    else {
+      // In this case, we need to take into account an optional domain
+      if (options.domain) scale = scale.domain(options.domain).classes(options.classes)
+      else scale = scale.classes(options.classes)
+    }
+  } else {
+    // No classes defined, we need to take into account an optional domain
+    if (options.domain) scale = scale.domain(options.domain)
+  }
+  return scale
+}

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

@@ -8,4 +8,3 @@ export function getPlatform () {
     agent: Platform.userAgent
   })
 }
-

package/core/client/utils/utils.pwa.js

@@ -1,4 +1,4 @@
-import { useQuasar } from 'quasar'
+import { Dialog } from 'quasar'
 import { i18n } from '../i18n.js'
 
 export let InstallPwaPrompt = null
@@ -6,22 +6,22 @@ export let InstallPwaPrompt = null
 window.addEventListener('beforeinstallprompt', (e) => {
   e.preventDefault()
   // Stash the event so it can be triggered later
-  InstallPwaPrompt = e 
+  InstallPwaPrompt = e
 })
 
 export function installDefaultPrompt () {
-  useQuasar().dialog({
-    title: i18n.t('composables.pwa.INSTALL_TITLE'),
-    message: i18n.t('composables.pwa.INSTALL_MESSAGE'),
+  Dialog.create({
+    title: i18n.t('utils.pwa.INSTALL_TITLE'),
+    message: i18n.t('utils.pwa.INSTALL_MESSAGE'),
     cancel: {
       id: 'ignore-button',
-      label: i18n.t('composables.pwa.IGNORE'),
+      label: i18n.t('utils.pwa.IGNORE'),
       color: 'primary',
       outline: true
     },
     ok: {
       id: 'install-button',
-      label: i18n.t('composables.pwa.INSTALL'),
+      label: i18n.t('utils.pwa.INSTALL'),
       color: 'primary'
     },
     persistent: true,
@@ -37,9 +37,9 @@ export function installDefaultPrompt () {
 }
 
 export function installSafariPrompt () {
-  useQuasar().dialog({
-    title: i18n.t('composables.pwa.INSTALL_TITLE'),
-    message: i18n.t('composables.pwa.IOS_INSTALL_MESSAGE'),
+  Dialog.create({
+    title: i18n.t('utils.pwa.INSTALL_TITLE'),
+    message: i18n.t('utils.pwa.IOS_INSTALL_MESSAGE'),
     ok: {
       color: 'primary'
     },
@@ -50,9 +50,9 @@ export function installSafariPrompt () {
 }
 
 export function installFFDesktopPrompt () {
-  useQuasar().dialog({
-    title: i18n.t('composables.pwa.INSTALL_TITLE'),
-    message: i18n.t('composables.pwa.FIREFOX_DESKTOP_INSTALL_MESSAGE'),
+  Dialog.create({
+    title: i18n.t('utils.pwa.INSTALL_TITLE'),
+    message: i18n.t('utils.pwa.FIREFOX_DESKTOP_INSTALL_MESSAGE'),
     ok: {
       color: 'primary'
     },
@@ -60,4 +60,4 @@ export function installFFDesktopPrompt () {
     position: 'bottom',
     html: true
   })
-}
+}

package/core/client/utils/utils.session.js

@@ -1,3 +1,4 @@
+import _ from 'lodash'
 import logger from 'debug'
 import { Store } from '../store.js'
 import { api } from '../api.js'
@@ -34,7 +35,6 @@ export async function logout () {
     // Rethrow for caller to handle
     throw error
   }
-  
 }
 
 export async function restoreSession () {

package/core/client/utils/utils.shapes.js

@@ -0,0 +1,270 @@
+import _ from 'lodash'
+import logger from 'loglevel'
+import { uid } from 'quasar'
+import { getHtmlColor } from './utils.colors.js'
+
+const defaultSize = { width: 24, height: 24 }
+const defaultColor = 'black'
+const defaultIconSize = 12
+const defaultTextSize = 12
+
+function defaultRadiusToSize (r) {
+  return { width: r * 2, height: r * 2 }
+}
+
+// Predefined shapes
+// see https://www.svgrepo.com/ to look for a shape
+export const Shapes = {
+  circle: {
+    viewBox: [0, 0, 100, 100],
+    content: '<circle cx="50" cy="50" r="50" />'
+  },
+  rect: {
+    viewBox: [0, 0, 100, 100],
+    content: '<rect cx="0" cy="0" width="100" height="100" />',
+    radiusToSize: (r) => { return { width: Math.round(r * 2 * 0.9), height: Math.round(r * 2 * 0.9) } }
+  },
+  'rounded-rect': {
+    viewBox: [0, 0, 100, 100],
+    content: '<rect cx="0" cy="0" width="100" height="100" rx="20" ry="20" />',
+    radiusToSize: (r) => { return { width: Math.round(r * 2 * 0.9), height: Math.round(r * 2 * 0.9) } }
+  },
+  diamond: {
+    viewBox: [0, 0, 100, 100],
+    content: '<polygon points="50 0, 100 50, 50 100, 0 50" />',
+    radiusToSize: (r) => { return { width: Math.round(r * 2 * 1.2), height: Math.round(r * 2 * 1.2) } }
+  },
+  triangle: {
+    viewBox: [0, 0, 100, 100],
+    content: '<polygon points="50 0, 100 100, 0 100" />',
+    radiusToSize: (r) => { return { width: Math.round(r * 2 * 1.125), height: Math.round(r * 2 * 1.025) } }
+  },
+  'triangle-down': {
+    viewBox: [0, 0, 100, 100],
+    content: '<polygon points="0 0, 100 0, 50 100" />',
+    radiusToSize: (r) => { return { width: Math.round(r * 2 * 1.125), height: Math.round(r * 2 * 1.025) } }
+  },
+  'triangle-left': {
+    viewBox: [0, 0, 100, 100],
+    content: '<polygon points="0 50, 100 0, 100 100" />',
+    radiusToSize: (r) => { return { width: Math.round(r * 2 * 1.025), height: Math.round(r * 2 * 1.125) } }
+  },
+  'triangle-right': {
+    viewBox: [0, 0, 100, 100],
+    content: '<polygon points="0 0, 100 50, 0 100" />',
+    radiusToSize: (r) => { return { width: Math.round(r * 2 * 1.025), height: Math.round(r * 2 * 1.125) } }
+  },
+  star: {
+    viewBox: [0, 0, 48, 48],
+    content: '<path d="m24,1 6,17h18l-14,11 5,17-15-10-15,10 5-17-14-11h18z" />',
+    radiusToSize: (r) => { return { width: Math.round(r * 2 * 1.4), height: Math.round(r * 2 * 1.4) } }
+  },
+  'marker-pin': {
+    viewBox: [0, 0, 384, 512],
+    content: '<path d="M384 192c0 87.4-117 243-168.3 307.2c-12.3 15.3-35.1 15.3-47.4 0C117 435 0 279.4 0 192C0 86 86 0 192 0s192 86 192 192z" />',
+    icon: {
+      translation: ['-50%', '-70%']
+    },
+    text: {
+      translation: ['-50%', '-70%']
+    },
+    anchor: 'bottom-center'
+  },
+  'square-pin': {
+    viewBox: [0, 0, 56, 56],
+    content: '<path d="M 27.9532 52.3633 C 29.0079 52.3633 29.9923 51.9180 30.9298 50.3008 L 35.2657 43.0586 L 43.0938 43.0586 C 50.0783 43.0586 53.8280 39.1914 53.8280 32.3242 L 53.8280 14.3711 C 53.8280 7.5039 50.0783 3.6367 43.0938 3.6367 L 12.9064 3.6367 C 5.9454 3.6367 2.1720 7.4805 2.1720 14.3711 L 2.1720 32.3242 C 2.1720 39.2148 5.9454 43.0586 12.9064 43.0586 L 20.6407 43.0586 L 24.9766 50.3008 C 25.9142 51.9180 26.8985 52.3633 27.9532 52.3633 Z"/>',
+    icon: {
+      translation: ['-50%', '-75%']
+    },
+    text: {
+      translation: ['-50%', '-60%']
+    },
+    anchor: 'bottom-center'
+  }
+}
+
+/*
+  Helper functions
+*/
+function addTagAttribute (tag, attibute, value) {
+  return tag.slice(0, -1) + ` ${attibute}="${value}">`
+}
+function addSvgAttribute (svg, attibute, value) {
+  return svg.slice(0, -2) + ` ${attibute}="${value}" />`
+}
+
+function getSize (size) {
+  if (!Array.isArray(size)) return { width: size, height: size }
+  return { width: size[0], height: size[1] }
+}
+
+/*
+ Utility to create a shape with the following options:
+  - shape: String | Object - name of the predefined shape or object specifyinfg the viewBox and the content
+  - size : Array - [width, height] of the maker
+  - radius: Number - the radius to compute a "visual" size. If the size is defined, the radius is omitted.
+  - color: String - the fill color
+  - opacity: Number - the fill opacity
+  - stroke: Object specifying the stroke properties
+    - color: String - the stroke color
+    - width: Number - the stroke width - 0
+    - opacity: Number - the stroke opacity - 1
+    - cap: String - the stroke linecap - 'butt'
+    - join: String - the stroke linejoin - 'miter'
+    - dashArray: String - the stroke dasharray - 'none'
+    - dashOffset: Number - the stroke dashoffset - 0
+  - icon: Object specifying an icon overlay
+    - classes: String - the icon class
+    - url: String - the icon url
+    - color: String - the icon color
+    - opacity: Number - the icon opacity
+    - size: Number - the icon size in pixel - 14
+    - translation: Array - the translation to apply from the center of the shape ['-50%', '-50%']
+    - rotation: Number - the rotation to apply in degree
+  - text: Object specifying a text overlay
+    - label: String - the label to display
+    - classes: extra classes to apply to the text
+    - color: String - the text color
+    - size: Number - the font size in pixel - 14
+    - translation: Array - the translation to apply from the center of the shape ['-50%', '-50%']
+    - rotation: Number - the rotation to apply in degree
+  - html: Object specifyinng an html overlay
+
+*/
+export function createShape (options) {
+  // Check arguments
+  if (!options) {
+    logger.warn(`[KDK] 'options' argument is required`)
+    return
+  }
+  // Define the anchor
+  let anchor = 'middle-center'
+  // Define the shape
+  let shape
+  if (options.shape && options.shape !== 'none') {
+    if (typeof options.shape === 'object') shape = options.shape
+    else {
+      shape = Shapes[options.shape]
+      if (!shape) {
+        logger.warn(`[KDK] unknown shape '${options.shape}'. Using default shape 'circle'`)
+        shape = Shapes['circle']
+      }
+    }
+    anchor = shape.anchor || anchor
+  }
+  // Define the size
+  let size = defaultSize
+  if (options.size) {
+    size = getSize(options.size)
+  } else {
+    if (options.radius) {
+      const radiusToSize = _.get(shape, 'radiusToSize', defaultRadiusToSize)
+      size = radiusToSize(options.radius)
+    }
+  }
+  // Set div container vars
+  const beginDivTag = `<div style="position: relative; width: ${size.width}px; height: ${size.height}px;">`
+  const endDivTag = '</div>'
+  // Render shape
+  let beginSvgTag = ''
+  let svgShapeContent = ''
+  let svgClipPath = ''
+  let endSvgTag = ''
+  if (shape) {
+    beginSvgTag = `<svg xmlns="http://www.w3.org/2000/svg" width="${size.width}" height="${size.height}" preserveAspectRatio="none">`
+    beginSvgTag = addTagAttribute(beginSvgTag, 'viewBox', _.join(shape.viewBox, ' '))
+    svgShapeContent = shape.content
+    svgClipPath = ''
+    endSvgTag = '</svg>'
+    // Apply fill style
+    const color = getHtmlColor(options.color, defaultColor)
+    svgShapeContent = addSvgAttribute(svgShapeContent, 'fill', color)
+    if (options.opacity) svgShapeContent = addSvgAttribute(svgShapeContent, 'fill-opacity', options.opacity)
+    // Aply stroke style
+    if (options.stroke) {
+      // Ensure the stroke color is defined and not transparent
+      const strokeColor = getHtmlColor(options.stroke.color, defaultColor)
+      if (strokeColor !== 'transparent') {
+        svgShapeContent = addSvgAttribute(svgShapeContent, 'stroke', strokeColor)
+        // draw inner stroke by double the width and clip the shape by itself
+        // see https://stackoverflow.com/questions/7241393/can-you-control-how-an-svgs-stroke-width-is-drawn
+        const strokeWidth = options.stroke.width || 1
+        svgShapeContent = addSvgAttribute(svgShapeContent, 'stroke-width', strokeWidth * 2)
+        // prevent scaling stroke
+        svgShapeContent = addSvgAttribute(svgShapeContent, 'vector-effect', 'non-scaling-stroke')
+        // additional properties
+        if (options.stroke.cap) svgShapeContent = addSvgAttribute(svgShapeContent, 'stroke-linecap', options.stroke.cap)
+        if (options.stroke.join) svgShapeContent = addSvgAttribute(svgShapeContent, 'stroke-linejoin', options.stroke.join)
+        if (options.stroke.dashArray) svgShapeContent = addSvgAttribute(svgShapeContent, 'stroke-dasharray', options.stroke.dashArray)
+        if (options.stroke.dashOffset) svgShapeContent = addSvgAttribute(svgShapeContent, 'stroke-dashoffset', options.stroke.dashOffset)
+        const clipId = uid()
+        // clip the shape to avoid stroke overflow
+        svgShapeContent = addSvgAttribute(svgShapeContent, 'clip-path', `url(#${clipId})`)
+        svgClipPath = `<clipPath id="${clipId}">${_.clone(shape.content)}</clipPath>`
+      }
+    }
+  }
+  // Render icon 
+  let iconTag = ''
+  if (options.icon) {
+    if (!_.isNil(options.icon.classes) || !_.isNil(options.icon.url)) {
+      if (!_.isEmpty(options.icon.classes) || !_.isEmpty(options.icon.url)) {
+        let specificStyle = ''
+        if (options.icon.url) {
+          let iconSize = options.icon.size ? getSize(options.icon.size) : size
+          iconTag = `<img src="${options.icon.url}" `
+          // handle size
+          iconTag += `width=${iconSize.width} height=${iconSize.height} `
+        } else {
+          iconTag += `<i class="${options.icon.classes}" `
+          // handle color
+          const color = getHtmlColor(options.icon.color, defaultColor)
+          specificStyle += `color: ${color};`
+          // handle size
+          let iconSize = options.icon.size || defaultIconSize
+          specificStyle += `font-size: ${iconSize}px;`
+        }
+        const opacity = options.icon.opacity || 1
+        const translation = options.icon.translation || _.get(shape, 'icon.translation', ['-50%', '-50%'])
+        const rotation = options.icon.rotation || _.get(shape, 'icon.rotation', 0)
+        iconTag += `style="position: absolute; top: 50%; left: 50%; transform: translate(${translation[0]},${translation[1]}) rotate(${rotation}deg); opacity: ${opacity}; ${specificStyle}"`
+        iconTag += '/>'
+      }
+    } else {
+      logger.warn(`[KDK] icon must contain either the 'classes' property or the 'url' property`)
+    }
+  }
+  // Render text 
+  let textTag = ''
+  if (options.text) {
+    if (!_.isNil(options.text.label)) {
+      if (!_.isEmpty(options.text.label)) {
+        textTag = '<span '
+        if (options.text.classes) textTag += `classes="${options.text.classes}" `
+        const color = getHtmlColor(options.text.color, defaultColor)
+        const textSize = options.text.size || defaultTextSize
+        const translation = options.text.translation || _.get(shape, 'text.translation', ['-50%', '-50%'])
+        const rotation = options.text.rotation || _.get(shape, 'icon.rotation', 0)
+        textTag += `style="position: absolute; top: 50%; left: 50%; transform: translate(${translation[0]},${translation[1]}) rotate(${rotation}deg); color: ${color}; font-size: ${textSize}px;"`
+        textTag += '>'
+        textTag += options.text.label
+        textTag += '</span>'
+      }
+    } else {
+      logger.warn(`[KDK] text must contain the 'label' property`)
+    }
+  }
+  // Render html
+  let htmlTag = ''
+  if (options.html) {
+    htmlTag = '<div style="position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%);">'
+    htmlTag += options.html
+    htmlTag += '</div>'
+  }
+  return {
+    html: beginDivTag + beginSvgTag + svgClipPath + svgShapeContent + endSvgTag + iconTag + textTag + htmlTag + endDivTag,
+    size,
+    anchor
+  }
+}
+