fluency-v8-components 1.3.4 → 1.3.6

package/src/fpl/Outputs/FPLTable.vue

@@ -0,0 +1,77 @@
+<template>
+  <Table :data="dat">
+    <template #header>
+      <tr>
+        <TableHeader
+          v-for="col in data.columns"
+          :key="col.name"
+          :title="col.name"
+        />
+      </tr>
+    </template>
+    <template #rows>
+      <tr v-for="item in dat">
+        <td
+          v-for="col in data.columns"
+          :key="col.name"
+          class="table-font break-all"
+        >
+          {{ col.unit ? formatCol(item[col.name], col.unit) : item[col.name] }}
+        </td>
+      </tr>
+    </template>
+    <template #pagination>
+      <pagination
+        v-if="data.rows && data.rows.length"
+        :startPos="props.paginationStore.startPos"
+        :pageSize="props.paginationStore.pageSize"
+        :total="data.rows.length"
+        @previous="previousPage()"
+        @next="nextPage()"
+        @navtopage="skipToPage"
+      />
+    </template>
+  </Table>
+</template>
+<script setup>
+import { ref } from "vue";
+import { Table, TableHeader, Pagination } from "@/components";
+import {
+  costCount,
+  dataCount,
+  humanCount,
+  durationCount,
+} from "@/utils/formatOutput";
+
+const props = defineProps({
+  title: String,
+  data: Object,
+  paginationStore: Object,
+});
+const dat = ref([]);
+props.paginationStore.$reset;
+if (props.data.rows && props.data.rows.length > 0) {
+  dat.value = props.paginationStore.paginate(props.data.rows);
+}
+
+function previousPage() {
+  dat.value = props.paginationStore.previousPage(props.data.rows);
+}
+function nextPage() {
+  dat.value = props.paginationStore.nextPage(props.data.rows);
+}
+function skipToPage(page) {
+  dat.value = props.paginationStore.skipToPage(props.data.rows, page);
+}
+
+function formatCol(value, unit) {
+  if (unit === "B") {
+    return dataCount(value) + "B";
+  } else if (unit === "$") {
+    return costCount(value);
+  } else if (unit === "s") {
+    return durationCount(value);
+  }
+  return humanCount(value) + unit;
+}
+</script>

package/src/fpl/Panel.vue

@@ -0,0 +1,202 @@
+<template>
+  <div
+    :class="[
+      'relative pl-2 w-full',
+      panel.panelType === 'image' || panel.panelType === 'text' ? '' : 'py-1',
+    ]"
+  >
+    <div
+      v-if="panel.title"
+      class="block truncate overflow-hidden text-ellipsis pr-6 w-full pb-1.5"
+    >
+      <span class="leading-[1] font-semibold text-md">
+        {{ panel.title }}
+      </span>
+    </div>
+    <Menu v-if="!viewing" as="div" class="absolute right-1 top-2">
+      <MenuButton class="-m-2.5 block p-2.5 text-gray-400 hover:text-gray-500">
+        <span class="sr-only">Open options</span>
+        <EllipsisHorizontalIcon class="icon-md" aria-hidden="true" />
+      </MenuButton>
+      <transition
+        enter-active-class="transition ease-out duration-100"
+        enter-from-class="transform opacity-0 scale-95"
+        enter-to-class="transform opacity-100 scale-100"
+        leave-active-class="transition ease-in duration-75"
+        leave-from-class="transform opacity-100 scale-100"
+        leave-to-class="transform opacity-0 scale-95"
+      >
+        <MenuItems
+          class="absolute right-0 z-10 mt-0.5 w-32 origin-top-right rounded-md py-2 shadow-lg ring-1 ring-gray-900/5 focus:outline-hidden bg-white dark:bg-black"
+        >
+          <MenuItem v-slot="{ active }">
+            <div
+              :class="[
+                active ? 'cursor-pointer bg-gray-50 dark:bg-gray-800' : '',
+                'block px-3 py-1 text-sm leading-6',
+              ]"
+              @click="emits('edit', panel)"
+            >
+              Edit
+            </div>
+          </MenuItem>
+          <MenuItem v-if="panel.panelType === 'table'" v-slot="{ active }">
+            <div
+              :class="[
+                active ? 'cursor-pointer bg-gray-50 dark:bg-gray-800' : '',
+                'block px-3 py-1 text-sm leading-6',
+              ]"
+              @click="downloadTableCSV"
+            >
+              Download CSV
+            </div>
+          </MenuItem>
+          <MenuItem v-slot="{ active }">
+            <div
+              :class="[
+                active ? 'cursor-pointer bg-gray-50 dark:bg-gray-800' : '',
+                'block px-3 py-1 text-sm leading-6',
+              ]"
+              @click="emits('delete', panel.key)"
+            >
+              Delete
+            </div>
+          </MenuItem>
+        </MenuItems>
+      </transition>
+    </Menu>
+    <div
+      v-else-if="viewing && panel.panelType === 'table' && mouseover"
+      class="absolute right-2 top-2"
+    >
+      <ActionButtons download hideTooltip @download="downloadTableCSV" />
+    </div>
+  </div>
+  <component
+    v-if="!noData"
+    :is="getComponent()"
+    :config="panel.panelConfig"
+    :obj="obj"
+    :id="`panel${panel.key}${isMobile ? '-mobile' : ''}`"
+    :layout="layout"
+    :class="
+      panel.panelType === 'image' || panel.panelType === 'text' ? '' : 'p-2'
+    "
+    :theme="theme"
+    :paginationStore="paginationStore"
+    :apiKey="apiKey"
+  />
+  <span v-else class="flex justify-center pt-10 text-lg font-semibold">
+    No data available
+  </span>
+</template>
+<script setup>
+import { ref, computed } from "vue";
+import { Menu, MenuButton, MenuItem, MenuItems } from "@headlessui/vue";
+import { EllipsisHorizontalIcon } from "@heroicons/vue/20/solid";
+import { panelCSVDownload } from "@/utils/download";
+import { panelComponent } from "./Configs/Config";
+import { ActionButtons } from "@/components";
+import {
+  AlertPanel as Alert,
+  AlertSpritePanel as AlertSprite,
+  ChartPanel as Chart,
+  CounterPanel as Counter,
+  HistogramPanel as Histogram,
+  ImagePanel as Image,
+  IPMapPanel as IPMap,
+  MetricChartPanel as MetricChart,
+  PieChartPanel as PieChart,
+  SparkChartPanel as SparkChart,
+  StackedBarChartPanel as StackedBarChart,
+  TablePanel as Table,
+  TextPanel as Text,
+  TopNChartPanel as TopNChart,
+} from "../fpl";
+
+// constants
+const components = {
+  Alert,
+  AlertSprite,
+  Chart,
+  Counter,
+  Histogram,
+  Image,
+  IPMap,
+  MetricChart,
+  PieChart,
+  SparkChart,
+  StackedBarChart,
+  Table,
+  Text,
+  TopNChart,
+};
+
+// props and emits
+const props = defineProps({
+  objects: Array,
+  panel: Object,
+  layout: Object,
+  viewing: {
+    type: Boolean,
+    default: false,
+  },
+  mouseover: {
+    type: Boolean,
+    default: false,
+  },
+  isMobile: {
+    type: Boolean,
+    default: false,
+  },
+  theme: {
+    type: String,
+    default: "light",
+  },
+  paginationStore: {
+    type: Object,
+    default: () => ({}),
+  },
+  apiKey: {
+    type: String,
+    default: "",
+  },
+});
+const emits = defineEmits(["delete", "edit"]);
+const obj = ref(getPanelObject());
+
+const noData = computed(() => {
+  if (props.panel.panelType === "text") {
+    return false;
+  } else if (props.panel.panelType === "image") {
+    return false;
+  }
+  if (obj.value.table && obj.value.table.rows) {
+    return false;
+  } else if (obj.value.stream) {
+    return false;
+  } else if (obj.value.alert && obj.value.alert.alerts) {
+    return false;
+  }
+  return true;
+});
+
+function getComponent() {
+  if (!props.panel || !props.panel.panelType) return "";
+  return components[panelComponent[props.panel.panelType]];
+}
+
+function getPanelObject() {
+  const obj = props.objects.find((o) => o.name === props.panel.dataTable);
+  return obj ? obj : {};
+}
+
+function downloadTableCSV() {
+  // might need more error checking
+  panelCSVDownload(
+    props.panel.title,
+    props.panel.panelConfig.columns,
+    obj.value.table.rows
+  );
+}
+</script>

package/src/fpl/Panels/Alert.vue

@@ -0,0 +1,85 @@
+<template>
+  <div
+    v-if="!redraw"
+    class="overflow-auto"
+    :style="`height: ${layout.h * 61 - 10}px`"
+  >
+    <div v-for="(alert, i) in dat" class="py-2">
+      <h3 class="text-lg font-semibold">{{ alert.action }}</h3>
+      <Tag
+        v-for="(tag, i) in alert.tags"
+        :key="i"
+        :text="tag.key + ': ' + tag.values.join(', ')"
+        color="blue"
+      />
+      <AlertChart
+        :data="alert"
+        :id="id + i"
+        unit="Value"
+        :height="300"
+        :width="layout.w * 65 - 150"
+        :pannable="false"
+        :theme="theme"
+      />
+    </div>
+  </div>
+</template>
+<script setup>
+import { Tag, AlertChart } from "@/components";
+import { ref, watch } from "vue";
+
+// stores
+
+// props and emits
+const props = defineProps({
+  config: Object,
+  obj: Object,
+  layout: Object,
+  id: String,
+  theme: {
+    type: String,
+    default: "light",
+  }
+});
+const redraw = ref(false);
+const dat = ref([]);
+// watcher
+watch(
+  () => [props.layout.w, props.layout.h],
+  () => {
+    redraw.value = true;
+    setInterval(() => {
+      redraw.value = false;
+    }, 1);
+  }
+);
+
+// mounted
+parseData();
+
+// function defs
+function parseData() {
+  const slots = props.obj.alert.slots.map((slot) => slot * 1000);
+  dat.value = props.obj.alert.alerts
+    ? props.obj.alert.alerts.map((alert) => {
+        const associates = alert.associates || [];
+        return {
+          tags: alert.dimensionTags ? alert.dimensionTags[0].tags : [],
+          slots: slots,
+          action: alert.key,
+          metric: alert.alertMetric,
+          values: alert.values[0].metric.values,
+          series: associates
+            .filter((associate) => associate.name)
+            .map((associate) => {
+              return {
+                action: associate.name,
+                values: associate.metric.values,
+              };
+            }),
+        };
+      })
+    : [];
+  dat.value = dat.value.slice(0, props.config.topID);
+}
+</script>

package/src/fpl/Panels/AlertSprite.vue

@@ -0,0 +1,9 @@
+<template>
+  <div>AlertSprite</div>
+</template>
+<script setup>
+const props = defineProps({
+  config: Object,
+  obj: Object,
+});
+</script>

package/src/fpl/Panels/Chart.vue

@@ -0,0 +1,98 @@
+<template>
+  <div>
+    <LineChart
+      v-if="config.options.type === 'line' && !redraw"
+      :data="data"
+      :id="id"
+      unit="Value"
+      :height="props.layout.h * 60 - 40"
+      :width="props.layout.w * 69 - 155"
+      :hideZeros="false"
+      :isTime="false"
+      tooltipOffset="offset"
+      :slot-name="config.value.column.name"
+      :theme="theme"
+    />
+    <StackedChart
+      v-if="config.options.type === 'bar' && !redraw"
+      :data="data"
+      :names="data.names"
+      :id="id"
+      unit="Value"
+      :height="props.layout.h * 60 - 50"
+      :width="props.layout.w * 69 - 20"
+      :isTime="false"
+      tooltipOffset="offset"
+      :slot-name="config.value.column.name"
+      :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 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, i) => row[props.config.value.column.name]
+  );
+  if (props.config.options.type === "line") {
+    data.value = props.config.categories.focus.map((cat) => {
+      return {
+        action: cat.name,
+        slots: slots,
+        values: props.obj.table.rows.map((row) => row[cat.name]),
+      };
+    });
+  } else if (props.config.options.type === "bar") {
+    const nameMap = {};
+    const values = [];
+    props.config.categories.focus.forEach((cat) => {
+      nameMap[cat.name] = cat.name;
+      props.obj.table.rows.forEach((row, i) => {
+        values.push({
+          slot: slots[i],
+          name: cat.name,
+          value: row[cat.name],
+        });
+      });
+    });
+    data.value = {
+      slots: slots,
+      names: nameMap,
+      series: values,
+    };
+  } else {
+    data.value = [];
+  }
+}
+</script>

package/src/fpl/Panels/Counter.vue

@@ -0,0 +1,43 @@
+<template>
+  <div class="w-full" style="height: calc(100% - 40px)">
+    <span
+      :class="[
+        'flex items-center justify-center content-center h-full overflow-hidden',
+        layout.w > 4 ? 'text-7xl' : 'text-5xl',
+      ]"
+    >
+      {{ formatCol(total, config.format) }}
+    </span>
+  </div>
+</template>
+<script setup>
+import { ref } from "vue";
+import { dataCount, humanCount } from "@/utils/formatOutput";
+
+// props
+const props = defineProps({
+  config: Object,
+  obj: Object,
+  layout: Object,
+  id: String,
+  theme: {
+    type: String,
+    default: "light",
+  }
+});
+// states
+const total = ref(0);
+// mounted
+if (props.obj.table.rows[0]) {
+  total.value = props.obj.table.rows[0][props.config.field] || 0;
+}
+
+// function defs
+function formatCol(total, format) {
+  if (format === "Data") return dataCount(total) + "B";
+  if (format === "Readable Numbers") return humanCount(total.toPrecision(3));
+  if (format === "comma") return total.toString().replace(/\B(?=(\d{3})+(?!\d))/g, ",");
+  if (format === "comma_data") return total.toString().replace(/\B(?=(\d{3})+(?!\d))/g, ",") + "B";
+  return total;
+}
+</script>

package/src/fpl/Panels/Histogram.vue

@@ -0,0 +1,138 @@
+<template>
+  <div>
+    <LineChart
+      v-if="config.options.type === 'line' && !redraw"
+      :data="data"
+      :id="id"
+      unit="Value"
+      :height="props.layout.h * 60 - 40"
+      :width="props.layout.w * 69 - 155"
+      :hideZeros="false"
+      tooltipOffset="offset"
+      :theme="theme"
+    />
+    <StackedChart
+      v-if="config.options.type === 'bar' && !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 { LineChart, StackedChart } from "@/components";
+import { parseTime } from "@/utils/timeUtils";
+
+// 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() {
+  data.value = [];
+  const slots = props.obj.table.rows
+    .sort(
+      (a, b) =>
+        parseTime(a[props.config.value.column.name]) -
+        parseTime(b[props.config.value.column.name])
+    )
+    .map((row) => parseTime(row[props.config.value.column.name]));
+  // check if using all columns
+  const columns = props.config.allColumns
+    ? props.obj.table.columns.map((col) => col.name)
+    : props.obj.table.columns
+        .map((col) => col.name)
+        .filter((row) =>
+          props.config.categories.focus.some((col) => col.name === row)
+        );
+  if (props.config.options.type === "line") {
+    columns.forEach((key) => {
+      if (key !== props.config.value.column.name) {
+        data.value.push({
+          action: key,
+          slots: slots,
+          values: props.obj.table.rows.map((row) => row[key]),
+        });
+        // flatten the data by combining the slots of same value
+        const temp = [];
+        data.value.forEach((d) => {
+          const flattenSlot = [];
+          const falttenValues = [];
+          let curr = d.slots[0];
+          let val = 0;
+          d.slots.forEach((slot, i) => {
+            const currVal = d.values[i] || 0;
+            if (slot.valueOf() === curr.valueOf()) {
+              val += currVal;
+            } else {
+              flattenSlot.push(curr);
+              falttenValues.push(val);
+              curr = slot;
+              val = currVal;
+            }
+          });
+          flattenSlot.push(curr);
+          falttenValues.push(val);
+          temp.push({
+            action: d.action,
+            slots: flattenSlot,
+            values: falttenValues,
+          });
+        });
+        data.value = temp;
+      }
+    });
+  } else if (props.config.options.type === "bar") {
+    const nameMap = {};
+    const values = [];
+    columns.forEach((key) => {
+      if (key !== props.config.value.column.name) {
+        nameMap[key] = key;
+        props.obj.table.rows.forEach((row, i) => {
+          values.push({
+            slot: slots[i],
+            name: key,
+            value: row[key],
+          });
+        });
+      }
+    });
+    data.value = {
+      slots: slots,
+      names: nameMap,
+      series: values,
+    };
+  }
+}
+</script>

package/src/fpl/Panels/IPMap.vue

@@ -0,0 +1,48 @@
+<template>
+  <div>
+    <GoogleMap
+      :api-key="apiKey"
+      :style="`width: 100%; height: ${layout.h * 60 - 40}px`"
+      :center="
+        markers.length
+          ? markers[0].position
+          : { lat: 40.689247, lng: -74.044502 }
+      "
+      :zoom="15"
+    >
+      <Marker v-for="marker in markers" :options="marker" />
+    </GoogleMap>
+  </div>
+</template>
+<script setup>
+import { ref } from "vue";
+import { GoogleMap, Marker } from "vue3-google-map";
+
+const props = defineProps({
+  config: Object,
+  obj: Object,
+  layout: Object,
+  id: String,
+  theme: {
+    type: String,
+    default: "light",
+  },
+  apiKey: String,
+});
+
+const markers = ref([]);
+getMarkers();
+
+function getMarkers() {
+  markers.value = props.obj.table.rows.map((row) => {
+    return {
+      title: row[props.config.valueColumn],
+      label: row[props.config.ipColumn],
+      position: {
+        lat: row.latitude,
+        lng: row.longitude,
+      },
+    };
+  });
+}
+</script>