glib-web 0.6.1 → 0.6.2

package/components/label.vue

@@ -1,62 +1,62 @@
-<template>
-  <a
-    v-if="spec.onClick"
-    :href="$href()"
-    :rel="$rel()"
-    :style="textStyles()"
-    :class="$classes()"
-    @click="$onClick()"
-    >{{ text }}</a
-  >
-  <span v-else :style="$styles()" :class="$classes()">{{ text }}</span>
-</template>
-
-<script>
-import actionCableMixin from "./mixins/ws/actionCable";
-import textMixin from "./mixins/text.js";
-
-export default {
-  mixins: [actionCableMixin, textMixin],
-  props: {
-    spec: { type: Object, required: true }
-  },
-  data: function() {
-    return {
-      text: " "
-    };
-  },
-  methods: {
-    $ready() {
-      this.$wsInitActionCable(this.spec.actionCable);
-
-      this.text = this.spec.text;
-    },
-    action_set(spec) {
-      if (spec.user_id !== spec.filterKey) {
-        this.text = spec.text;
-      }
-    }
-  }
-};
-</script>
-
-<style lang="scss" scoped>
-span,
-a {
-  /* white-space: pre-line; */
-  white-space: pre-wrap;
-
-  /* Without this, padding-top doesn't work */
-  display: inline-block;
-  line-height: 1;
-}
-span.muted {
-  opacity: 0.7;
-}
-span.small {
-  font-size: 80%;
-}
-a:hover {
-  text-decoration: none;
-}
-</style>
+<template>
+  <a
+    v-if="spec.onClick"
+    :href="$href()"
+    :rel="$rel()"
+    :style="textStyles()"
+    :class="$classes()"
+    @click="$onClick()"
+    >{{ text }}</a
+  >
+  <span v-else :style="$styles()" :class="$classes()">{{ text }}</span>
+</template>
+
+<script>
+import actionCableMixin from "./mixins/ws/actionCable";
+import textMixin from "./mixins/text.js";
+
+export default {
+  mixins: [actionCableMixin, textMixin],
+  props: {
+    spec: { type: Object, required: true }
+  },
+  data: function() {
+    return {
+      text: " "
+    };
+  },
+  methods: {
+    $ready() {
+      this.$wsInitActionCable(this.spec.actionCable);
+
+      this.text = this.spec.text;
+    },
+    action_set(spec) {
+      if (spec.user_id !== spec.filterKey) {
+        this.text = spec.text;
+      }
+    }
+  }
+};
+</script>
+
+<style lang="scss" scoped>
+span,
+a {
+  /* white-space: pre-line; */
+  white-space: pre-wrap;
+
+  /* Without this, padding-top doesn't work */
+  display: inline-block;
+  line-height: 1;
+}
+span.muted {
+  opacity: 0.7;
+}
+span.small {
+  font-size: 80%;
+}
+a:hover {
+  text-decoration: none;
+}
+</style>

package/components/mixins/chart/annotation.js

@@ -1,73 +1,73 @@
-export default {
-  data() {
-    return {
-      options: {
-        annotation: {
-          drawTime: "afterDraw",
-          events: ["mouseleave", "mouseenter"],
-          annotations: []
-        }
-      }
-    };
-  },
-  created() {
-    if (this.spec.lineVertical) {
-      this.options.annotation.annotations = this.spec.lineVertical.map(
-        (element, index) => this.annotation(element, index)
-      );
-    }
-  },
-  methods: {
-    annotation(options, index) {
-      const { text, x } = options;
-
-      return {
-        type: "line",
-        mode: "vertical",
-        scaleID: "x-axis-0",
-        value: new Date(x).getTime(),
-        borderColor: "rgba(0,0,255,0.3)",
-        borderWidth: 3,
-        borderDash: [5, 10],
-        label: {
-          content: text,
-          enabled: true,
-          position: "top",
-          backgroundColor: "rgba(0,0,0,0.3)"
-        },
-        onMouseenter: function(e) {
-          Object.assign(
-            this.chartInstance.options.annotation.annotations[index],
-            { borderColor: "rgba(0,0,255,0.8)" },
-            {
-              label: {
-                content: text,
-                enabled: true,
-                position: "top",
-                backgroundColor: "rgba(0,0,0,0.8)"
-              }
-            }
-          );
-
-          this.chartInstance.update();
-        },
-        onMouseleave: function(e) {
-          Object.assign(
-            this.chartInstance.options.annotation.annotations[index],
-            { borderColor: "rgba(0,0,255,0.3)" },
-            {
-              label: {
-                content: text,
-                enabled: true,
-                position: "top",
-                backgroundColor: "rgba(0,0,0,0.3)"
-              }
-            }
-          );
-
-          this.chartInstance.update();
-        }
-      };
-    }
-  }
-};
+export default {
+  data() {
+    return {
+      options: {
+        annotation: {
+          drawTime: "afterDraw",
+          events: ["mouseleave", "mouseenter"],
+          annotations: []
+        }
+      }
+    };
+  },
+  created() {
+    if (this.spec.lineVertical) {
+      this.options.annotation.annotations = this.spec.lineVertical.map(
+        (element, index) => this.annotation(element, index)
+      );
+    }
+  },
+  methods: {
+    annotation(options, index) {
+      const { text, x } = options;
+
+      return {
+        type: "line",
+        mode: "vertical",
+        scaleID: "x-axis-0",
+        value: new Date(x).getTime(),
+        borderColor: "rgba(0,0,255,0.3)",
+        borderWidth: 3,
+        borderDash: [5, 10],
+        label: {
+          content: text,
+          enabled: true,
+          position: "top",
+          backgroundColor: "rgba(0,0,0,0.3)"
+        },
+        onMouseenter: function(e) {
+          Object.assign(
+            this.chartInstance.options.annotation.annotations[index],
+            { borderColor: "rgba(0,0,255,0.8)" },
+            {
+              label: {
+                content: text,
+                enabled: true,
+                position: "top",
+                backgroundColor: "rgba(0,0,0,0.8)"
+              }
+            }
+          );
+
+          this.chartInstance.update();
+        },
+        onMouseleave: function(e) {
+          Object.assign(
+            this.chartInstance.options.annotation.annotations[index],
+            { borderColor: "rgba(0,0,255,0.3)" },
+            {
+              label: {
+                content: text,
+                enabled: true,
+                position: "top",
+                backgroundColor: "rgba(0,0,0,0.3)"
+              }
+            }
+          );
+
+          this.chartInstance.update();
+        }
+      };
+    }
+  }
+};

package/components/mixins/chart/tooltip.js

@@ -1,28 +1,31 @@
-export default {
-  data() {
-    return {
-      options: {
-        dataName: "",
-        tooltips: {
-          intersect: false,
-          callbacks: {
-            afterLabel: this.afterLabel
-          }
-        }
-      }
-    };
-  },
-  methods: {
-    afterLabel(tooltipItem) {
-      if (!this.dataName) {
-        console.error("dataName is empty");
-      }
-      const selectedSeries = this.spec[this.dataName][tooltipItem.datasetIndex];
-      const points = selectedSeries.points[tooltipItem.index];
-      const tooltip = points ? points.tooltip : null;
-      if (tooltip) {
-        return tooltip;
-      }
-    }
-  }
-};
+export default {
+  data() {
+    return {
+      options: {
+        dataName: "",
+        tooltips: {
+          intersect: false,
+          callbacks: {
+            afterLabel: this.afterLabel
+          }
+        }
+      }
+    };
+  },
+  methods: {
+    afterLabel(tooltipItem) {
+      if (!this.dataName) {
+        console.error("dataName is empty");
+      }
+
+      const selectedSeries = this.spec[this.dataName][tooltipItem.datasetIndex];
+      const point = selectedSeries.points.find(
+        point => point.x == tooltipItem.xLabel
+      );
+      const tooltip = point ? point.tooltip : null;
+      if (tooltip) {
+        return tooltip;
+      }
+    }
+  }
+};