glib-web 3.0.7 → 3.0.8

package/components/_button.vue

@@ -2,7 +2,7 @@
   <common-badge v-if="spec.badge" :spec="spec">
     <internal-button :spec="spec" :disabled="$isBusy" />
   </common-badge>
-  <internal-button v-else :spec="spec" :disable="$isBusy" />
+  <internal-button v-else :spec="spec" :disabled="$isBusy" />
 </template>
 
 <script>

package/components/_responsive.vue

@@ -5,7 +5,7 @@
       browsers where full-height makes field typing laggy.
     -->
     <v-row no-gutters :class="fullHeight ? 'full-height' : null">
-    <!-- <v-row no-gutters> -->
+      <!-- <v-row no-gutters> -->
       <template v-for="(item, index) in spec.childViews" :key="viewKey(item, index)">
         <glib-component v-if="isColumn(item)" :spec="item" />
         <div v-else class="full-width" :style="innerStyles">

package/components/charts/area.vue

@@ -0,0 +1,12 @@
+<template>
+    <area-chart :style="genericStyles()" :class="$classes()" :data="series"></area-chart>
+</template>
+
+<script setup>
+import { computed } from 'vue';
+import { singleDataSeries } from './series';
+
+const { spec } = defineProps({ spec: Object })
+
+const series = computed(() => singleDataSeries(spec.dataSeries))
+</script>

package/components/charts/column.vue

@@ -1,47 +1,15 @@
 <template>
-  <column-chart
-    :data="groups"
-    :stacked="spec.stacked"
-    :library="options"
-  ></column-chart>
+  <column-chart :data="series" :stacked="spec.stacked"></column-chart>
 </template>
 
-<script>
-// https://chartkick.com/vue
+<script setup>
 
-import annotation from "../mixins/chart/annotation.js";
-// import tooltip from "../mixins/chart/tooltip.js";
+import { computed } from 'vue';
+import { multipleDataSeries } from './series';
+
+const { spec } = defineProps({ spec: Object })
+const series = computed(() => multipleDataSeries(spec.dataGroups))
 
-export default {
-  mixins: [annotation],
-  props: {
-    spec: { type: Object, required: true }
-  },
-  data: function() {
-    return {
-      groups: [],
-      dataName: "dataGroups"
-    };
-  },
-  methods: {
-    $ready() {
-      this.groups = this.spec.dataGroups.map(element => {
-        let data;
-        if (Array.isArray(element.points)) {
-          data = element.points.reduce((prev, curr) => {
-            let obj = {};
-            obj[curr.x] = curr.y;
-            return Object.assign(prev, obj);
-          }, {});
-        } else {
-          // Support for legacy code
-          data = element.points;
-        }
-        return { name: element.title, data: data };
-      });
-    }
-  }
-};
 </script>
 
 <style scoped></style>

package/components/charts/line-old.vue

@@ -0,0 +1,62 @@
+<template>
+  <line-chart :style="genericStyles()" :class="$classes()" :data="series"></line-chart>
+</template>
+
+<script>
+// import annotation from "../mixins/chart/annotation.js";
+// import tooltip from "../mixins/chart/tooltip.js";
+
+export default {
+  // mixins: [annotation],
+  props: {
+    spec: { type: Object, required: true }
+  },
+  data: function () {
+    return {
+      series: [],
+      dataName: "dataSeries"
+    };
+  },
+  methods: {
+    $ready() {
+      this.series.clear();
+      this.renderData(this.spec.dataSeries);
+      this.fetchNext(this.spec.nextPage);
+    },
+    fetchData(url) {
+      const vm = this;
+      Utils.type.ifString(url, val => {
+        Utils.http.execute({ url: val }, "GET", this, response => {
+          vm.renderData(response.dataSeries);
+          vm.fetchNext(response.nextPage);
+        });
+      });
+    },
+    fetchNext(nextPage) {
+      if (!Utils.type.isObject(nextPage)) {
+        return;
+      }
+      if (nextPage.autoload != "all") {
+        return;
+      }
+      this.fetchData(nextPage.url);
+    },
+    renderData(series) {
+      if (!Utils.type.isArray(series)) {
+        return;
+      }
+
+      const data = series.map(element => {
+        const dataPoints = {};
+        element.points.forEach(point => {
+          dataPoints[point.x] = point.y;
+        });
+        return { name: element.title, data: dataPoints };
+      });
+      this.series = this.series.concat(data);
+    }
+  }
+};
+</script>
+
+<style scoped></style>

package/components/charts/line.vue

@@ -1,67 +1,12 @@
 <template>
-  <line-chart
-    :style="genericStyles()"
-    :class="$classes()"
-    :data="series"
-    :library="options"
-  ></line-chart>
+    <line-chart :style="genericStyles()" :class="$classes()" :data="series"></line-chart>
 </template>
 
-<script>
-import annotation from "../mixins/chart/annotation.js";
-// import tooltip from "../mixins/chart/tooltip.js";
+<script setup>
+import { computed } from 'vue';
+import { multipleDataSeries } from './series';
 
-export default {
-  mixins: [annotation],
-  props: {
-    spec: { type: Object, required: true }
-  },
-  data: function() {
-    return {
-      series: [],
-      dataName: "dataSeries"
-    };
-  },
-  methods: {
-    $ready() {
-      this.series.clear();
-      this.renderData(this.spec.dataSeries);
-      this.fetchNext(this.spec.nextPage);
-    },
-    fetchData(url) {
-      const vm = this;
-      Utils.type.ifString(url, val => {
-        Utils.http.execute({ url: val }, "GET", this, response => {
-          vm.renderData(response.dataSeries);
-          vm.fetchNext(response.nextPage);
-        });
-      });
-    },
-    fetchNext(nextPage) {
-      if (!Utils.type.isObject(nextPage)) {
-        return;
-      }
-      if (nextPage.autoload != "all") {
-        return;
-      }
-      this.fetchData(nextPage.url);
-    },
-    renderData(series) {
-      if (!Utils.type.isArray(series)) {
-        return;
-      }
+const { spec } = defineProps({ spec: Object })
 
-      const data = series.map(element => {
-        const dataPoints = {};
-        element.points.forEach(point => {
-          dataPoints[point.x] = point.y;
-        });
-        return { name: element.title, data: dataPoints };
-      });
-      this.series = this.series.concat(data);
-    }
-  }
-};
-</script>
-
-<style scoped></style>
+const series = computed(() => multipleDataSeries(spec.dataSeries))
+</script>

package/components/charts/pie.vue

@@ -1,34 +1,14 @@
 <template>
-  <pie-chart
-    :style="genericStyles()"
-    :class="$classes()"
-    :data="series"
-    :library="options"
-  ></pie-chart>
+  <pie-chart :style="genericStyles()" :class="$classes()" :data="series"></pie-chart>
 </template>
 
-<script>
-export default {
-  mixins: [],
-  props: {
-    spec: { type: Object, required: true }
-  },
-  data: function() {
-    return {
-      series: []
-    };
-  },
-  methods: {
-    $ready() {
-      this.series = this.spec.dataSeries.reduce((prev, curr) => {
-        let obj = {};
-        obj[curr.title] = curr.value;
+<script setup>
+import { computed } from 'vue';
+import { singleDataSeries } from './series';
+
+const { spec } = defineProps({ spec: Object })
+const series = computed(() => singleDataSeries(spec.dataSeries))
 
-        return Object.assign(prev, obj);
-      }, {});
-    }
-  }
-};
 </script>
 
 <style scoped></style>

package/components/charts/series.js

@@ -0,0 +1,18 @@
+const multipleDataSeries = (dataSeries) => {
+    return dataSeries.map((value) => {
+        let points = null
+        if (Array.isArray(value.points)) {
+            points = value.points.reduce((prev, curr) => {
+                return Object.assign(prev, { [curr.x]: curr.y })
+            }, {})
+        } else {
+            points = value.points
+        }
+        return { name: value.title, data: points }
+    })
+}
+
+const singleDataSeries = (dataSeries) => dataSeries.reduce((prev, curr) => Object.assign(prev, { [curr.title]: curr.value }), {})
+
+
+export { multipleDataSeries, singleDataSeries }

package/components/component.vue

@@ -113,6 +113,7 @@ import SelectBanner from "./banners/select.vue";
 import LineChart from "./charts/line.vue";
 import ColumnChart from "./charts/column.vue";
 import PieChart from "./charts/pie.vue";
+import AreaChart from "./charts/area.vue";
 
 import ShareButton from "./shareButton.vue";
 import Action from "../action";
@@ -206,6 +207,7 @@ export default {
     "charts-line": LineChart,
     "charts-column": ColumnChart,
     "charts-pie": PieChart,
+    "charts-area": AreaChart
   },
   props: {
     spec: { type: Object, required: true },

package/components/fields/submit.vue

@@ -3,18 +3,20 @@
 </template>
 
 <script>
+import { nextTick } from 'vue';
+
 export default {
   props: {
     spec: { type: Object, required: true }
   },
-  data: function() {
+  data: function () {
     return {
       data: this.$data
     };
   },
   methods: {
-    $ready() {
-      this.$dispatchEvent("forms/addSubmit", this.$data);
+    $mounted() {
+      nextTick(() => this.$dispatchEvent("forms/addSubmit", this.$data))
     },
     action_merge(mergedSpec) {
       Object.assign(this.spec, mergedSpec);

package/components/panels/horizontal.vue

@@ -182,6 +182,12 @@ a.panels-horizontal {
   //   background: rgba(0, 0, 0, 0.4);
   // }
 }
+
+.child-wrapper {
+  // This is to prevent inline components (e.g `avatar`) to be displayed with some invisible margins
+  // below the component.
+  line-height: 1;
+}
 </style>
 
 <style>

package/index.js

@@ -39,11 +39,10 @@ import "./styles/test.scss";
 import "./styles/test.sass";
 
 
-// import Chartkick from "vue-chartkick";
-// import Chart from "chart.js";
-// import annotationPlugin from "chartjs-plugin-annotation";
-// Chart.plugins.register(annotationPlugin);
-// Vue.use(Chartkick.use(Chart));
+import VueChartkick from 'vue-chartkick'
+import 'chartkick/chart.js'
+
+Vue.use(VueChartkick)
 
 // import VueAnalytics from 'vue-analytics'
 // // TODO: Avoid hardcoding

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "glib-web",
-  "version": "3.0.7",
+  "version": "3.0.8",
   "description": "",
   "main": "index.js",
   "scripts": {
@@ -14,8 +14,7 @@
     "@rails/activestorage": "^6.0.0-alpha",
     "@vueup/vue-quill": "^1.2.0",
     "awesome-phonenumber": "2.15.0",
-    "chart.js": "^2.8.0",
-    "chartjs-plugin-annotation": "^0.5.7",
+    "chart.js": "^4.3.1",
     "driver.js": "^0.9.8",
     "json-logic-js": "^2.0.0",
     "lodash.merge": "^4.6.2",
@@ -27,7 +26,7 @@
     "turndown": "^7.1.1",
     "turndown-plugin-gfm": "^1.0.2",
     "vue": "3.2.47",
-    "vue-chartkick": "^0.6.1",
+    "vue-chartkick": "^1.1.0",
     "vue-social-sharing": "^4.0.0-alpha4",
     "vue2-gmap-custom-marker": "^6.1.1",
     "vue2-google-maps": "^0.10.6",

package/templates/thumbnail.vue

@@ -11,29 +11,17 @@
         </template>
       </div> -->
 
-      <v-list-item
-        v-longclick="$onLongPress"
-        class="item-content"
-        :style="columnStyles()"
-
-      >
+      <v-list-item v-longclick="$onLongPress" class="item-content" :style="columnStyles()">
         <!-- <v-icon v-if="spec.onReorder" class="handle">drag_indicator</v-icon> -->
 
         <!-- Specify a key to prevent reuse which causes an issue where the checkbox would use the previous name. -->
-        <fields-check
-          v-if="checkSpec"
-          :key="checkSpec.name"
-          :spec="checkSpec"
-        />
+        <fields-check v-if="checkSpec" :key="checkSpec.name" :spec="checkSpec" />
 
         <template v-slot:prepend>
           <div style="display: flex">
             <div v-if="spec.leftButtons">
               <template v-for="(item, index) in spec.leftButtons" :key="index">
-                <glib-button
-                  :spec="buttonSpec(item)"
-                  :disabled="$isBusy"
-                />
+                <glib-button :spec="buttonSpec(item)" :disabled="$isBusy" />
               </template>
             </div>
 
@@ -58,11 +46,7 @@
         </div> -->
 
         <div>
-          <v-text-field
-            v-if="spec.fieldTitleName"
-            :name="spec.fieldTitleName"
-            :value="spec.title"
-          />
+          <v-text-field v-if="spec.fieldTitleName" :name="spec.fieldTitleName" :value="spec.title" />
           <v-list-item-title v-else>{{ spec.title }}</v-list-item-title>
 
           <v-list-item-subtitle v-if="spec.subtitle">{{
@@ -83,10 +67,7 @@
 
         <template v-slot:append>
           <template v-for="(item, index) in spec.rightButtons" :key="index">
-            <glib-button
-              :spec="buttonSpec(item)"
-              :disabled="$isBusy"
-            />
+            <glib-button :spec="buttonSpec(item)" :disabled="$isBusy" />
           </template>
         </template>
 
@@ -201,7 +182,7 @@ export default {
 </script>
 
 <style lang="scss">
-.chips > * {
+.chips>* {
   margin-right: 10px;
 }
 
@@ -210,6 +191,7 @@ export default {
 }
 
 .thumbnail {
+
   // Override this when using the `right` property.
   .item-content {
     width: 100%;
@@ -239,10 +221,12 @@ a.thumbnail {
     width: 60px;
     height: 60px;
   }
+
   .left-icon {
     // margin-left: 16px;
     margin-left: 4px;
   }
+
   // .left-universal {
   //   padding-left: 16px;
   // }