fluency-v8-components 1.3.5 → 1.3.7

package/src/fpl/Panels/Image.vue

@@ -0,0 +1,35 @@
+<template>
+  <div
+    :class="['flex h-full w-full p-0', props.config.positioning]"
+    :style="`backgroundColor: ${config.backgroundColor}`"
+  >
+    <img :src="config.image" :style="getStyle()" />
+  </div>
+</template>
+<script setup>
+const props = defineProps({
+  config: Object,
+  obj: Object,
+  layout: Object,
+  id: String,
+  theme: {
+    type: String,
+    default: "light",
+  }
+});
+
+function getStyle() {
+  if (props.config.size === "pixels") {
+    return {
+      backgroundColor: props.config.backgroundColor,
+      width: props.config.pixels + "px",
+      height: props.config.pixels + "px",
+    };
+  } else {
+    return {
+      backgroundColor: props.config.backgroundColor,
+      width: props.config.size,
+    };
+  }
+}
+</script>

package/src/fpl/Panels/MetricChart.vue

@@ -0,0 +1,97 @@
+<template>
+  <div>
+    <LineChart
+      v-if="config.chart === 'line' && !redraw"
+      :data="data"
+      :id="id"
+      :unit="unit"
+      :height="props.layout.h * 60 - 40"
+      :width="props.layout.w * 69 - 155"
+      :hideZeros="false"
+      tooltipOffset="offset"
+      :theme="theme"
+    />
+    <StackedChart
+      v-if="config.chart === 'bar' && !redraw"
+      :data="data"
+      :names="data.names"
+      :id="id"
+      :unit="unit"
+      :height="props.layout.h * 60 - 50"
+      :width="props.layout.w * 69 - 20"
+      tooltipOffset="offset"
+      :theme="theme"
+    />
+  </div>
+</template>
+<script setup>
+import { ref, watch } from "vue";
+import { LineChart, StackedChart } from "@/components";
+
+// stores
+// props and emits
+const props = defineProps({
+  config: Object,
+  obj: Object,
+  layout: Object,
+  id: String,
+  theme: {
+    type: String,
+    default: "light",
+  }
+});
+// states
+const redraw = ref(false);
+const unit = ref("Value");
+const data = ref([]);
+// watcher
+watch(
+  () => [props.layout.w, props.layout.h],
+  () => {
+    redraw.value = true;
+    setInterval(() => {
+      redraw.value = false;
+    }, 1);
+  }
+);
+
+// mounted
+getData();
+
+// function defs
+function getData() {
+  const slots = props.obj.stream.slots.map((slot) => slot * 1000);
+  unit.value = props.obj.stream.unit || "Value";
+  if (props.config.chart === "line") {
+    data.value = props.obj.stream.metrics
+      ? props.obj.stream.metrics.map((series) => {
+          return {
+            slots: slots,
+            action: series.key,
+            values: series.values,
+          };
+        })
+      : [];
+  } else if (props.config.chart === "bar") {
+    const nameMap = {};
+    const values = [];
+    props.obj.stream.metrics.forEach((series) => {
+      nameMap[series.key] = series.key;
+      series.values.forEach((value, i) => {
+        values.push({
+          slot: slots[i],
+          name: series.key,
+          value: value,
+        });
+      });
+    });
+    data.value = {
+      slots: slots,
+      names: nameMap,
+      series: values,
+    };
+  } else {
+    data.value = [];
+  }
+}
+</script>

package/src/fpl/Panels/PieChart.vue

@@ -0,0 +1,54 @@
+<template>
+  <div>
+    <PieChart
+      v-if="!redraw"
+      :data="data"
+      :id="id"
+      unit="Value"
+      :height="props.layout.h * 60 - 40"
+      :width="props.layout.w * 69 - 10"
+      tooltipOffset="offset"
+      :value-name="props.config.categories.focus.name"
+      :theme="theme"
+    />
+  </div>
+</template>
+<script setup lang="ts">
+import { ref, watch } from "vue";
+import { PieChart } from "@/components";
+
+// stores
+// props and emits
+const props = defineProps({
+  config: Object,
+  obj: Object,
+  id: String,
+  layout: Object,
+  theme: {
+    type: String,
+    default: "light",
+  }
+});
+// states
+const redraw = ref(false);
+const data = ref([]);
+// watcher
+watch(
+  () => [props.layout.w, props.layout.h],
+  () => {
+    redraw.value = true;
+    setInterval(() => {
+      redraw.value = false;
+    }, 1);
+  }
+);
+// mounted
+if (props.obj.table.rows) {
+  data.value = props.obj.table.rows.map((row) => {
+    return {
+      values: row[props.config.categories.focus.name],
+      field: row[props.config.value.column.name],
+    };
+  });
+}
+</script>

package/src/fpl/Panels/SparkChart.vue

@@ -0,0 +1,166 @@
+<template>
+  <div>
+    <div :class="config.showline ? 'grid grid-cols-2' : 'text-right'">
+      <GradientChart
+        v-if="config.showline"
+        :id="id"
+        :data="data.chart"
+        unit="Value"
+        :change="data.first <= data.last ? 'positive' : 'negative'"
+        :hideAxis="true"
+        :height="50"
+        :width="175"
+        :resizable="true"
+        :hideTooltip="true"
+        tooltipOffset="offset"
+        :theme="theme"
+      />
+      <div class="text-right content-center">
+        <Trend
+          :trend="data.first <= data.last ? 'positive' : 'negative'"
+          :value="
+            config.unit === 'bytes'
+              ? dataCount(Math.abs(data.first - data.last)) + 'B'
+              : humanCount(Math.abs(data.first - data.last)).toString()
+          "
+        />
+      </div>
+    </div>
+    <span
+      :class="[
+        'flex justify-center p-4 overflow-auto',
+        layout.w > 4 ? 'text-7xl' : 'text-4xl',
+      ]"
+    >
+      {{
+        config.unit === "bytes" || config.isData
+          ? dataCount(data.total) + "B"
+          : humanCount(data.total)
+      }}
+    </span>
+    <div
+      v-if="config.metrics === 'complex'"
+      class="grid grid-cols-2 grid-rows-2"
+    >
+      <span>
+        Min:
+        {{
+          config.unit === "bytes" || config.isData
+            ? dataCount(data.min) + "B"
+            : humanCount(data.min)
+        }}
+      </span>
+      <span class="text-right">
+        Max:
+        {{
+          config.unit === "bytes" || config.isData
+            ? dataCount(data.max) + "B"
+            : humanCount(data.max)
+        }}
+      </span>
+      <span>
+        First:
+        {{
+          config.unit === "bytes" || config.isData
+            ? dataCount(data.first) + "B"
+            : humanCount(data.first)
+        }}
+      </span>
+      <span class="text-right">
+        Last:
+        {{
+          config.unit === "bytes" || config.isData
+            ? dataCount(data.last) + "B"
+            : humanCount(data.last)
+        }}
+      </span>
+    </div>
+  </div>
+</template>
+<script setup>
+import { ref } from "vue";
+import { humanCount, dataCount } from "@/utils/formatOutput";
+import { Trend, GradientChart } from "@/components";
+
+// stores
+// props and emits
+const props = defineProps({
+  config: Object,
+  obj: Object,
+  layout: Object,
+  id: String,
+  theme: {
+    type: String,
+    default: "light",
+  }
+});
+// states
+const data = ref({
+  total: 0,
+  first: 0,
+  last: 0,
+  min: 0,
+  max: 0,
+  chart: {},
+});
+
+// watch(() => props.obj, processObject, { immediate: true, deep: true });
+// mounted
+processObject();
+// function defs
+function processObject() {
+  // check if obj is a stream or table
+  if (props.obj.table) {
+    if (props.obj.table.rows.length > 0) {
+      const values = props.obj.table.rows.map(
+        (row) => row[props.config.field] || 0
+      );
+      data.value.total = values.reduce((acc, val) => {
+        return acc + val;
+      }, 0);
+      data.value.first = values[0];
+      data.value.last = values.slice(-1);
+      data.value.min = Math.min(...values);
+      data.value.max = Math.max(...values);
+      if (props.config.showline) {
+        data.value.chart = {
+          slots: props.obj.table.rows.map((row, i) => 1000000000 + i * 1000),
+          values: values,
+        };
+      }
+    }
+    return;
+  } else if (props.obj.stream) {
+    if (props.obj.stream.metrics && props.obj.stream.metrics.length > 0) {
+      data.value.total = props.obj.stream.metrics[0].values.reduce(
+        (acc, val) => {
+          return acc + val;
+        },
+        0
+      );
+      data.value.first = props.obj.stream.metrics[0].values[0];
+      data.value.last = props.obj.stream.metrics[0].values.slice(-1)[0];
+      data.value.min = Math.min(...props.obj.stream.metrics[0].values);
+      data.value.max = Math.max(...props.obj.stream.metrics[0].values);
+      if (props.config.showline) {
+        data.value.chart = {
+          slots: props.obj.stream.slots.map((slot) => slot * 1000),
+          values: props.obj.stream.metrics[0].values,
+        };
+      }
+      return;
+    }
+  }
+  data.value = {
+    total: 0,
+    first: 0,
+    last: 0,
+    min: 0,
+    max: 0,
+    chart: {
+      slots: [],
+      values: [],
+    },
+  };
+}
+</script>

package/src/fpl/Panels/StackedBarChart.vue

@@ -0,0 +1,74 @@
+<template>
+  <div>
+    <StackedChart
+      v-if="!redraw"
+      :data="data"
+      :names="data.names || {}"
+      :id="id"
+      unit="Value"
+      :height="props.layout.h * 60 - 50"
+      :width="props.layout.w * 69 - 20"
+      :is-time="true"
+      tooltipOffset="offset"
+      :theme="theme"
+    />
+  </div>
+</template>
+<script setup>
+import { ref, watch } from "vue";
+import { parseTime } from "@/utils/timeUtils";
+import { StackedChart } from "@/components";
+
+// stores
+// props and emits
+const props = defineProps({
+  config: Object,
+  obj: Object,
+  layout: Object,
+  id: String,
+  theme: {
+    type: String,
+    default: "light",
+  }
+});
+// states
+const redraw = ref(false);
+const data = ref([]);
+// watcher
+watch(
+  () => [props.layout.w, props.layout.h],
+  () => {
+    redraw.value = true;
+    setInterval(() => {
+      redraw.value = false;
+    }, 1);
+  }
+);
+// mounted
+getData();
+// function defs
+function getData() {
+  const slots = props.obj.table.rows.map((row) =>
+    parseTime(row[props.config.value.column.name])
+  );
+  const colName = props.config.categories.focus.name;
+  const label = props.config.categories.type.name;
+  const labelMap = {};
+  const values = [];
+  props.obj.table.rows.forEach((row, i) => {
+    if (!labelMap[row[label]]) {
+      labelMap[row[label]] = row[label];
+    }
+    values.push({
+      slot: parseTime(row[props.config.value.column.name]),
+      name: row[label],
+      value: row[colName],
+    });
+  });
+  data.value = {
+    slots: slots,
+    series: values,
+    names: labelMap,
+  };
+}
+</script>

package/src/fpl/Panels/Table.vue

@@ -0,0 +1,103 @@
+<template>
+  <div>
+    <div
+      class="overflow-auto"
+      :style="`max-height: ${
+        hasPagination ? layout.h * 70 - 120 : layout.h * 67 - 45
+      }px; width: ${layout.w * 68}px;`"
+    >
+      <table class="std-table whitespace-nowrap">
+        <thead>
+          <tr>
+            <TableHeader
+              v-for="cols in config.columns"
+              :key="cols.field"
+              :title="cols.header"
+              class="text-xs"
+            />
+          </tr>
+        </thead>
+        <tbody v-if="!obj.table.rows || obj.table.rows.length === 0">
+          <tr>
+            <td colspan="100%" class="h-24 text-center">No data available</td>
+          </tr>
+        </tbody>
+        <tbody class="std-table-body">
+          <tr v-for="row in dataTable">
+            <TableData
+              v-for="cols in config.columns"
+              :title="formatCol(row[cols.field], cols.dateTimeFormat)"
+              :center="cols.alignment === 'center' || !cols.alignment"
+              :right="cols.alignment === 'right'"
+              class="text-xs"
+            />
+          </tr>
+        </tbody>
+      </table>
+    </div>
+    <Pagination
+      v-if="hasPagination"
+      :startPos="props.paginationStore.startPos"
+      :pageSize="props.paginationStore.pageSize"
+      :total="obj.table.rows.length"
+      :style="`width: ${layout.w * 68}px;`"
+      @previous="previousPage()"
+      @next="nextPage()"
+      @navtopage="skipToPage"
+    />
+  </div>
+</template>
+
+<script setup>
+import { ref, computed } from "vue";
+import { Pagination, TableHeader, TableData } from "@/components";
+import {
+  costCount,
+  dataCount,
+  durationCount,
+  humanCount,
+} from "@/utils/formatOutput";
+import moment from "moment";
+
+const props = defineProps({
+  config: Object,
+  obj: Object,
+  layout: Object,
+  id: String,
+  theme: {
+    type: String,
+    default: "light",
+  },
+  paginationStore: Object,
+});
+
+const hasPagination = computed(() => {
+  return (
+    props.obj.table.rows &&
+    props.obj.table.rows.length > 0 &&
+    props.obj.table.rows.length > props.paginationStore.pageSize
+  );
+});
+
+props.paginationStore.$reset;
+const dataTable = ref(props.paginationStore.paginate(props.obj.table.rows));
+function previousPage() {
+  dataTable.value = props.paginationStore.previousPage(props.obj.table.rows);
+}
+function nextPage() {
+  dataTable.value = props.paginationStore.nextPage(props.obj.table.rows);
+}
+function skipToPage(page) {
+  dataTable.value = props.paginationStore.skipToPage(props.obj.table.rows, page);
+}
+
+function formatCol(value, format) {
+  if (format === "default") return value;
+  if (format === "data") return dataCount(value) + "B";
+  if (format === "readable") return humanCount(value);
+  if (format === "cost") return costCount(value);
+  if (format === "duration") return durationCount(value);
+  if (format === "comma") return value.toString().replace(/\B(?=(\d{3})+(?!\d))/g, ",");
+  return moment(value).format(format);
+}
+</script>

package/src/fpl/Panels/Text.vue

@@ -0,0 +1,24 @@
+<template>
+  <div v-html="config.text" class="ql-editor text-panel" />
+</template>
+<script setup>
+import { onMounted } from "vue";
+
+const props = defineProps({
+  config: Object,
+  obj: Object,
+  id: String,
+  layout: Object,
+  theme: {
+    type: String,
+    default: "light",
+  }
+});
+
+onMounted(() => {
+  const textPanels = document.querySelectorAll(".text-panel");
+  Array.prototype.forEach.call(textPanels, (el) => {
+    el.style.padding = "0";
+  });
+});
+</script>

package/src/fpl/Panels/TopNChart.vue

@@ -0,0 +1,69 @@
+<template>
+  <div>
+    <BarChartHorizontal
+      v-if="!redraw"
+      :id="id"
+      :data="data"
+      :unit="unit"
+      tooltipOffset="offset"
+      :height="props.layout.h * 65 - 40"
+      :width="props.layout.w * 65"
+      :value-name="props.config.categories.focus.name"
+      :theme="theme"
+    />
+  </div>
+</template>
+<script setup>
+import { ref, watch } from "vue";
+import { BarChartHorizontal } from "@/components";
+
+// stores
+// props and emits
+const props = defineProps({
+  config: Object,
+  obj: Object,
+  id: String,
+  layout: Object,
+  theme: {
+    type: String,
+    default: "light",
+  }
+});
+// states
+const data = ref({});
+const redraw = ref(false);
+const unit = ref("Value");
+// watcher
+watch(
+  () => [props.layout.w, props.layout.h],
+  () => {
+    redraw.value = true;
+    setInterval(() => {
+      redraw.value = false;
+    }, 1);
+  }
+);
+// mounted
+if (props.obj.table.columns) {
+  const col = props.obj.table.columns.find(
+    (col) => col.name === props.config.categories.focus.name
+  );
+  unit.value = col?.unit || "Value";
+}
+
+if (props.obj.table.rows) {
+  const rows = JSON.parse(
+    JSON.stringify(
+      props.obj.table.rows.sort(
+        (a, b) =>
+          a[props.config.categories.focus.name] -
+          b[props.config.categories.focus.name]
+      )
+    )
+  );
+  data.value.fields = rows.map((row) => row[props.config.value.column.name]);
+  data.value.values = rows.map(
+    (row) => row[props.config.categories.focus.name]
+  );
+}
+</script>

package/src/fpl/index.js

@@ -0,0 +1,39 @@
+// Outputs
+export { default as FPLAlert } from "./Outputs/FPLAlert.vue";
+export { default as FPLStream } from "./Outputs/FPLStream.vue";
+export { default as FPLTable } from "./Outputs/FPLTable.vue";
+
+// Panels
+export { default as AlertPanel } from "./Panels/Alert.vue";
+export { default as AlertSpritePanel } from "./Panels/AlertSprite.vue";
+export { default as ChartPanel } from "./Panels/Chart.vue";
+export { default as CounterPanel } from "./Panels/Counter.vue";
+export { default as IPMapPanel } from "./Panels/IPMap.vue";
+export { default as HistogramPanel } from "./Panels/Histogram.vue";
+export { default as ImagePanel } from "./Panels/Image.vue";
+export { default as MetricChartPanel } from "./Panels/MetricChart.vue";
+export { default as PieChartPanel } from "./Panels/PieChart.vue";
+export { default as SparkChartPanel } from "./Panels/SparkChart.vue";
+export { default as StackedBarChartPanel } from "./Panels/StackedBarChart.vue";
+export { default as TablePanel } from "./Panels/Table.vue";
+export { default as TextPanel } from "./Panels/Text.vue";
+export { default as TopNChartPanel } from "./Panels/TopNChart.vue";
+
+// Configs
+export { default as AlertConfig } from "./Configs/Alert.vue";
+export { default as AlertSpriteConfig } from "./Configs/AlertSprite.vue";
+export { default as ChartConfig } from "./Configs/Chart.vue";
+export { default as CounterConfig } from "./Configs/Counter.vue";
+export { default as IPMapConfig } from "./Configs/IPMap.vue";
+export { default as HistogramConfig } from "./Configs/Histogram.vue";
+export { default as ImageConfig } from "./Configs/Image.vue";
+export { default as MetricChartConfig } from "./Configs/MetricChart.vue";
+export { default as PieChartConfig } from "./Configs/PieChart.vue";
+export { default as SparkChartConfig } from "./Configs/SparkChart.vue";
+export { default as StackedBarChartConfig } from "./Configs/StackedBarChart.vue";
+export { default as TableConfig } from "./Configs/Table.vue";
+export { default as TextConfig } from "./Configs/Text.vue";
+export { default as TopNChartConfig } from "./Configs/TopNChart.vue";
+
+export { default as AddPanel } from "./AddPanel.vue";
+export { default as Panel } from "./Panel.vue";