@kalisio/kdk 2.0.0 → 2.1.0

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

@@ -0,0 +1,197 @@
+<template>
+  <div class="fit">
+    <canvas :ref="onChartRefCreated" />
+    <div v-show="!hasData" class="absolute-center">
+      <slot name="empty-chart">
+        <KStamp
+          v-show="!hasData"
+          class="absolute-center"
+          icon="las la-exclamation-circle"
+          icon-size="3rem"
+          :text="$t('KChart.NO_DATA_AVAILABLE')"
+          text-size="1rem"
+        />
+      </slot>
+    </div>
+  </div>
+</template>
+
+<script>
+import _ from 'lodash'
+import chroma from 'chroma-js'
+import { Chart, registerables, Interaction, Tooltip } from 'chart.js'
+import { MatrixController, MatrixElement } from 'chartjs-chart-matrix'
+import ChartDataLabelsPlugin from 'chartjs-plugin-datalabels'
+import ChartAnnotationPlugin from 'chartjs-plugin-annotation'
+import ChartZoomPlugin from 'chartjs-plugin-zoom'
+import KStamp from '../KStamp.vue'
+
+/*
+ legendMarginPlugin
+ https://www.youtube.com/watch?v=87rnMzENg3U&ab_channel=ChartJS
+ This plugin works only if the legend is diplayed on top or left
+*/
+const legendMarginPlugin = {
+  id: 'legendMargin',
+  beforeInit (chart, args, options) {
+    if (chart.legend) {
+      const fitValue = chart.legend.fit
+      chart.legend.fit = function fit () {
+        fitValue.bind(chart.legend)()
+        if (options.width) this.width += options.width
+        if (options.height) this.height += options.height
+      }
+    }
+  }
+}
+
+Chart.register(...registerables, MatrixController, MatrixElement, ChartDataLabelsPlugin, ChartAnnotationPlugin, ChartZoomPlugin, legendMarginPlugin)
+
+// Additional interaction mode: xSingle, same as x but only returns a single value
+Interaction.modes.xSingle = (chart, e, options, useFinalPosition) => {
+  const items = Interaction.modes.x(chart, e, options, useFinalPosition)
+  // only keep one item per dataset
+  const mapping = {}
+  items.forEach((item) => { if (!mapping[item.datasetIndex]) mapping[item.datasetIndex] = item })
+  return _.values(mapping)
+}
+
+// Additional tootltip positioner: at cursor position
+Tooltip.positioners.cursorPosition = (elements, eventPosition) => {
+  return eventPosition
+}
+
+export default {
+  components: {
+    KStamp
+  },
+  props: {
+    maxLabelLength: {
+      type: Number,
+      default: 50
+    }
+  },
+  data () {
+    return {
+      hasData: false
+    }
+  },
+  methods: {
+    onChartRefCreated (reference) {
+      if (reference) {
+        this.chartRef = reference
+      }
+    },
+    getAspectRatio () {
+      const marginCoeff = 1.15
+      return this.$q.screen.height === 0 ? 1 : this.$q.screen.width * marginCoeff / this.$q.screen.height
+    },
+    isLegendDisplayed () {
+      return !this.$q.screen.lt.sm
+    },
+    clear () {
+      this.hasData = false
+      // clear the chart if needed
+      if (this.chart) {
+        this.chart.destroy()
+        this.chart = null
+      }
+    },
+    update (config) {
+      if (!this.chartRef) throw new Error('Cannot update the chart while not created')
+      if (!_.isEmpty(_.get(config, 'data.datasets'))) {
+        this.hasData = true
+        // Store whether the chart has a legend
+        this.hasLegend = _.get(config.options, 'plugins.legend.display')
+        // Csutomize the chart
+        this.customize(config)
+        if (!this.chart) {
+          this.chart = new Chart(this.chartRef.getContext('2d'), config)
+        } else {
+          if (this.chart.type !== config.type) {
+            this.chart.destroy()
+            this.chart = new Chart(this.chartRef.getContext('2d'), config)
+          } else {
+            // Update the existing chart
+            this.chart.data.labels = config.data.labels
+            this.chart.data.datasets = config.data.datasets
+            this.chart.options = config.options
+            this.chart.update()
+          }
+        }
+        // Force the chart to be reiszed
+        this.chart.resize()
+      } else {
+        this.clear()
+      }
+    },
+    customize (config) {
+      const data = config.data
+      if (data) {
+        // Colorize datasets
+        _.forEach(data.datasets, dataset => {
+          if (!dataset.backgroundColor) {
+            const colorScale = _.get(dataset, 'colorScale', 'Dark2')
+            dataset.backgroundColor = chroma.scale(colorScale).colors(config.type !== 'radar' ? dataset.data.length : 1)
+            if (!dataset.borderColor) dataset.borderColor = 'white'
+          }
+        })
+      }
+      const defaultOptions = {
+        responsive: true,
+        aspectRatio: this.getAspectRatio(),
+        onResize: this.onResized,
+        plugins: {
+          legend: {
+            labels: {
+              display: this.isLegendDisplayed(),
+              boxWidth: 15,
+              maxLength: this.maxLabelLength,
+              generateLabels (chart) {
+                // generate original labels according the type of the chart
+                const type = chart.config.type
+                let defaultGenerator = Chart.defaults.plugins.legend.labels.generateLabels
+                if (type === 'pie') defaultGenerator = Chart.overrides.pie.plugins.legend.labels.generateLabels
+                else if (type === 'doughnut') defaultGenerator = Chart.overrides.doughnut.plugins.legend.labels.generateLabels
+                else if (type === 'polarArea') defaultGenerator = Chart.overrides.polarArea.plugins.legend.labels.generateLabels
+                const labels = defaultGenerator.call(this, chart)
+                // iterate through the labels and truncate the text
+                _.forEach(labels, label => {
+                  label.text = _.truncate(label.text, { length: chart.config.options.plugins.legend.labels.maxLength })
+                })
+                return labels
+              }
+            }
+          },
+          legendMargin: {
+            height: 12
+          }
+        }
+      }
+      if (config.type === 'bar' || config.type === 'line') {
+        defaultOptions.scales = {
+          x: {
+            ticks: {
+              maxRotation: 90,
+              callback: function (value, index, ticks) {
+                // https://www.chartjs.org/docs/latest/axes/labelling.html#creating-custom-tick-formats
+                return _.truncate(this.getLabelForValue(value), { length: this.maxLabelLength })
+              }
+            }
+          }
+        }
+      }
+      _.defaultsDeep(config.options, defaultOptions)
+    },
+    onResized (chart) {
+      if (!this.chart) return
+      this.chart.options.aspectRatio = this.getAspectRatio()
+      if (this.hasLegend) this.chart.options.plugins.legend.display = this.isLegendDisplayed()
+    }
+  },
+  beforeUnmount () {
+    // Clear the chart if any
+    if (this.chart) this.chart.destroy()
+  }
+}
+</script>

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

@@ -0,0 +1,183 @@
+<template>
+  <div v-if="rows.length > 0">
+    <q-resize-observer @resize="onResized" />
+    <KScrollArea :maxHeight="height">
+      <q-table class="data-table-background"
+        :rows="rows"
+        :columns="columns"
+        :visible-columns="visibleColumns"
+        v-model:pagination="pagination"
+      >
+        <template v-slot:top>
+          <q-select v-model="visibleColumns" multiple borderless dense options-dense
+            :display-value="$t('KDataTable.TABLE_COLUMNS')" emit-value map-options
+            :options="columns" option-value="name" style="min-width: 150px"/>
+        </template>
+    </q-table>
+    </KScrollArea>
+  </div>
+  <div v-else>
+    <div slot="empty-section">
+      <div class="row justify-center">
+        <KStamp icon="las la-exclamation-circle" icon-size="1.6rem" :text="$t('KDataTable.NO_DATA_AVAILABLE')" direction="horizontal" />
+      </div>
+    </div>
+  </div>
+</template>
+
+<script setup>
+import _ from 'lodash'
+import moment from 'moment'
+import Papa from 'papaparse'
+import { ref, watch } from 'vue'
+import { downloadAsBlob } from '../../utils'
+import { useSchema } from '../../composables'
+import { Units } from '../../units'
+import { Time } from '../../time'
+import { i18n } from '../../i18n'
+
+// const timeserie = {
+//   variable: { } variable definition
+//   data:
+//   label:
+//   color:
+//   unit:
+// }
+
+const props = defineProps({
+  tables: { type: Array, default: () => [] },
+  schema: { type: [String, Object], default: null },
+  nbRowsPerPage: { type: Number, default: 10 }
+})
+
+defineExpose({
+  update,
+  exportData
+})
+
+// data
+const { schema, compile } = useSchema()
+const pagination = ref({
+  // sortBy: '_id',
+  descending: false,
+  page: 1,
+  rowsPerPage: props.nbRowsPerPage
+})
+const rows = ref([])
+const columns = ref([])
+const visibleColumns = ref([])
+const height = ref(0)
+// Used to store template compilers per field
+const compilers = {}
+const exportCompilers = {}
+
+// computed
+
+// watch
+watch(() => props.tables, update)
+watch(() => props.schema, update)
+
+async function update () {
+  await compile(props.schema)
+  columns.value = []
+  const invisibleColumns = []
+  _.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 visible = _.get(value, 'field.visible', true)
+    if (!visible) invisibleColumns.push(key)
+    const format = _.get(value, 'format')
+    const path = _.get(value, 'field.path', key)
+    if (_.has(value, 'field.template')) {
+      compilers[key] = _.template(_.get(value, 'field.template'))
+      // By default export as visualized
+      exportCompilers[key] = compilers[key]
+    } // Custom export template if any
+    if (_.has(value, 'field.exportTemplate')) {
+      exportCompilers[key] = _.template(_.get(value, 'field.exportTemplate'))
+    }
+    columns.value.push({
+      name: key,
+      // Check if we have a translation key or directly the label content
+      label: i18n.tie(label),
+      // This will support GeoJson out-of-the-box
+      field: row => _.get(row, path, _.get(row, `properties.${path}`)),
+      align: 'center',
+      sortable: true,
+      format: (value, row) => {
+        if (_.isNil(value)) return ''
+        if (compilers[key]) return compilers[key]({ value, row, i18n, Units, Time, moment })
+        switch (type) {
+          case 'number':
+            return Units.format(_.toNumber(value))
+          case 'integer':
+            return _.toNumber(value).toFixed(0)
+          case 'string':
+            if (format === 'date-time') return `${Time.format(value, 'date.short')}/${Time.format(value, 'year.short')} - ${Time.format(value, 'time.long')}`
+            if (format === 'date') return `${Time.format(value, 'date.short')}/${Time.format(value, 'year.short')}`
+            if (format === 'time') return `${Time.format(value, 'time.long')}`
+            return value
+          default:
+            return value.toString()
+        }
+      }
+    })
+  })
+  visibleColumns.value = _.map(columns.value.filter(column => !invisibleColumns.includes(column.name)), 'name')
+  rows.value = []
+  for (const table of props.tables) {
+    const data = await table.data
+    rows.value = rows.value.concat(data)
+  }
+}
+function onResized (size) {
+  height.value = size.height
+}
+async function exportData (options = {}) {
+  // Convert to json
+  const json = []
+  for (let i = 0; i < props.tables.length; i++) {
+    const table = props.tables[i]
+    const data = await table.data
+    for (const item of data) {
+      const row = {}
+      _.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 visible = visibleColumns.value.includes(key)
+        // Skip invisible columns in export
+        if (options.visibleOnly && !visible) return
+        const format = _.get(value, 'format')
+        const path = _.get(value, 'field.path', key)
+        // This will support GeoJson out-of-the-box
+        let data = _.get(item, path, _.get(item, `properties.${path}`))
+        if (_.isNil(data)) data = ''
+        else if (exportCompilers[key]) data = exportCompilers[key]({ value: data, row: item, i18n, Units, Time, moment })
+        else if (type === 'string') {
+          if (format === 'date-time') data = moment.utc(data).toISOString()
+          if (format === 'date') data = moment.utc(data).toISOString()
+          if (format === 'time') data = moment.utc(data).toISOString()
+        }
+        // Check if we have a translation key or directly the label content
+        row[options.labelAsHeader ? `${i18n.tie(label)}` : key] = data
+      })
+      json.push(row)
+    }
+  }
+  // Convert to csv
+  const csv = Papa.unparse(json)
+  downloadAsBlob(csv, _.template(options.filename || i18n.t('KDataTable.DATA_EXPORT_FILE'))(), 'text/csv;charset=utf-8;')
+}
+
+// immediate
+update()
+</script>
+<style lang="scss" scoped>
+.data-table-background {
+  background-color: $table-background
+}
+</style>

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

@@ -0,0 +1,94 @@
+<template>
+  <KChart :ref="onChartCreated" />
+</template>
+
+<script>
+import _ from 'lodash'
+import KChart from './KChart.vue'
+
+function labelValueFormatter (value, context) {
+  return value
+}
+
+function labelPercentFormatter (value, context) {
+  // This works for pie and polarArea charts
+  let sum = context.chart.getDatasetMeta(context.datasetIndex).total
+  if (_.isNil(sum)) {
+    // we need to compute the sum
+    sum = _.sum(context.dataset.data)
+  }
+  if (sum === 0) return 0
+  return (value * 100 / sum).toFixed(2) + '%'
+}
+
+export default {
+  components: {
+    KChart
+  },
+  props: {
+    format: {
+      type: String,
+      default: 'value'
+    }
+  },
+  methods: {
+    onChartCreated (ref) {
+      if (ref) this.chart = ref
+    },
+    customizeDatasets (type, datasets) {
+      _.forEach(datasets, dataset => {
+        // Clear the colors
+        dataset.backgroundColor = undefined
+        dataset.borderColor = undefined
+      })
+    },
+    customizeOptions (type, options) {
+      const defaultOptions = {
+        maintainAspectRatio: true,
+        layout: {
+          padding: {
+            left: 32,
+            right: 32,
+            top: 32,
+            bottom: 32
+          }
+        },
+        plugins: {
+          title: {
+            display: !!this.title,
+            text: this.title
+          },
+          legend: {
+            display: !['radar', 'bar'].includes(type),
+            position: 'top'
+          },
+          datalabels: {
+            backgroundColor: function (context) {
+              return context.dataset.backgroundColor
+            },
+            display: 'auto',
+            borderColor: 'white',
+            borderRadius: 3,
+            borderWidth: 1,
+            anchor: 'end',
+            align: 'center',
+            color: 'white',
+            font: {
+              weight: 'bold'
+            },
+            formatter: this.format === 'value' ? labelValueFormatter : labelPercentFormatter,
+            padding: 6
+          }
+        }
+      }
+      _.defaultsDeep(options, defaultOptions)
+    },
+    update (config) {
+      this.customizeDatasets(config.type, config.data.datasets)
+      this.customizeOptions(config.type, config.options)
+      // Update the chart
+      if (this.chart) this.chart.update(config)
+    }
+  }
+}
+</script>