fluency-v8-components 1.3.5 → 1.3.7

package/src/fpl/Configs/Image.vue

@@ -0,0 +1,163 @@
+<template>
+  <UploadFile
+    :formats="['.svg', '.png', '.jpg']"
+    reader-function="data"
+    @upload="onFileChange"
+    @notify="triggerNotify"
+  />
+  <FormRow fieldName="Positioning">
+    <div class="flex justify-center">
+      <div class="grid grid-rows-3 grid-cols-3 w-40 h-40">
+        <div class="image-position-box top-left flex">
+          <RadioInput
+            v-model="local.panelConfig.positioning"
+            radio-value="top-left"
+          />
+        </div>
+        <div class="image-position-box top-center flex">
+          <RadioInput
+            v-model="local.panelConfig.positioning"
+            radio-value="top-center"
+          />
+        </div>
+        <div class="image-position-box top-right flex">
+          <RadioInput
+            v-model="local.panelConfig.positioning"
+            radio-value="top-right"
+          />
+        </div>
+        <div class="image-position-box center-left flex">
+          <RadioInput
+            v-model="local.panelConfig.positioning"
+            radio-value="center-left"
+          />
+        </div>
+        <div class="image-position-box center-center flex">
+          <RadioInput
+            v-model="local.panelConfig.positioning"
+            radio-value="center-center"
+          />
+        </div>
+        <div class="image-position-box center-right flex">
+          <RadioInput
+            v-model="local.panelConfig.positioning"
+            radio-value="center-right"
+          />
+        </div>
+        <div class="image-position-box bottom-left flex">
+          <RadioInput
+            v-model="local.panelConfig.positioning"
+            radio-value="bottom-left"
+          />
+        </div>
+        <div class="image-position-box bottom-center flex">
+          <RadioInput
+            v-model="local.panelConfig.positioning"
+            radio-value="bottom-center"
+          />
+        </div>
+        <div class="image-position-box bottom-right flex">
+          <RadioInput
+            v-model="local.panelConfig.positioning"
+            radio-value="bottom-right"
+          />
+        </div>
+      </div>
+    </div>
+  </FormRow>
+  <FormRow fieldName="Background Color">
+    <div class="flex justify-center">
+      <CheckBox v-model="backgroundColor" @change.stop="updateBackground" />
+      <input
+        v-if="backgroundColor"
+        type="color"
+        class="mx-2 block w-20 bg-white border border-gray-200 cursor-pointer rounded-lg disabled:opacity-50 disabled:pointer-events-none dark:bg-neutral-900 dark:border-neutral-700"
+        id="hs-color-input"
+        v-model="local.panelConfig.backgroundColor"
+      />
+    </div>
+  </FormRow>
+  <FormRow fieldName="Size">
+    <div class="flex justify-center">
+      <div class="p-2">
+        <RadioInput
+          v-model="local.panelConfig.size"
+          radio-value="100%"
+          label="100% of card"
+        />
+      </div>
+      <div class="p-2">
+        <RadioInput
+          v-model="local.panelConfig.size"
+          radio-value="75%"
+          label="75% of card"
+        />
+      </div>
+      <div class="p-2">
+        <RadioInput
+          v-model="local.panelConfig.size"
+          radio-value="50%"
+          label="50% of card"
+        />
+      </div>
+      <div class="p-2">
+        <RadioInput
+          v-model="local.panelConfig.size"
+          radio-value="pixels"
+          label="Pixels"
+        />
+      </div>
+      <div v-if="local.panelConfig.size === 'pixels'" class="p-1 w-24">
+        <GreyInput v-model.number="local.panelConfig.pixels" type="number" />
+      </div>
+    </div>
+  </FormRow>
+  <FormSection class="pt-4" sectionName="Image Preview">
+    <div class="flex justify-center">
+      <img
+        v-if="local.panelConfig.image"
+        :src="local.panelConfig.image"
+        class="w-40 h-40"
+        :style="`background-color: ${local.panelConfig.backgroundColor};`"
+      />
+      <span v-else>No image provided</span>
+    </div>
+  </FormSection>
+</template>
+<script setup>
+import { ref } from "vue";
+import {
+  RadioInput,
+  UploadFile,
+  FormRow,
+  FormSection,
+  CheckBox,
+  GreyInput,
+} from "@/components";
+
+const props = defineProps({
+  object: Object,
+  entry: Object,
+  errors: Object,
+});
+const local = ref(props.entry);
+const backgroundColor = ref(
+  local.value.panelConfig.backgroundColor !== "transparent"
+);
+
+function updateBackground() {
+  if (backgroundColor.value) {
+    local.value.panelConfig.backgroundColor = "transparent";
+  } else {
+    local.value.panelConfig.backgroundColor = "#FFFFFF";
+  }
+}
+
+function onFileChange(file) {
+  local.value.panelConfig.image = file;
+}
+
+function triggerNotify(title, message, success) {
+  console.log("invalid file format");
+}
+</script>

package/src/fpl/Configs/MetricChart.vue

@@ -0,0 +1,20 @@
+<template>
+  <FormRow fieldName="Chart Type">
+    <GreySelect v-model="local.panelConfig.chart" :options="chartOptions" />
+  </FormRow>
+</template>
+<script setup>
+import { ref } from "vue";
+import { FormRow, GreySelect } from "@/components";
+
+const props = defineProps({
+  object: Object,
+  entry: Object,
+  errors: Object,
+});
+const local = ref(props.entry);
+const chartOptions = [
+  { label: "Bar Chart", value: "bar" },
+  { label: "Line Chart", value: "line" },
+];
+</script>

package/src/fpl/Configs/PieChart.vue

@@ -0,0 +1,37 @@
+<template>
+  <FormRow fieldName="Pie Area Value">
+    <GreySelect
+      v-model="local.panelConfig.categories.focus.name"
+      :options="
+        object.table.columns.map((col) => ({
+          label: col.name,
+          value: col.name,
+        }))
+      "
+      :error="errors.categories"
+    />
+  </FormRow>
+  <FormRow fieldName="Pie Area Label">
+    <GreySelect
+      v-model="local.panelConfig.value.column.name"
+      :options="
+        object.table.columns.map((col) => ({
+          label: col.name,
+          value: col.name,
+        }))
+      "
+      :error="errors.value"
+    />
+  </FormRow>
+</template>
+<script setup>
+import { ref } from "vue";
+import { FormRow, GreySelect } from "@/components";
+
+const props = defineProps({
+  object: Object,
+  entry: Object,
+  errors: Object,
+});
+const local = ref(props.entry);
+</script>

package/src/fpl/Configs/SparkChart.vue

@@ -0,0 +1,41 @@
+<template>
+  <FormRow v-if="object.table" fieldName="Table Column">
+    <GreySelect
+      v-model="local.panelConfig.field"
+      :options="
+        object.table.columns.map((col) => ({
+          label: col.name,
+          value: col.name,
+        }))
+      "
+    />
+  </FormRow>
+  <FormRow fieldName="Metric Type">
+    <GreySelect v-model="local.panelConfig.metrics" :options="metricOptions" />
+  </FormRow>
+  <FormRow fieldName="Unit">
+    <GreySelect v-model="local.panelConfig.unit" :options="unitOptions" />
+  </FormRow>
+  <FormRow fieldName="Show Sprite">
+    <CheckBox v-model="local.panelConfig.showline" />
+  </FormRow>
+</template>
+<script setup>
+import { ref } from "vue";
+import { FormRow, GreySelect, CheckBox } from "@/components";
+
+const props = defineProps({
+  object: Object,
+  entry: Object,
+  errors: Object,
+});
+const local = ref(props.entry);
+const metricOptions = [
+  { label: "Simple", value: "simple" },
+  { label: "Complex", value: "complex" },
+];
+const unitOptions = [
+  { label: "Bytes (B)", value: "bytes" },
+  { label: "Number", value: "count" },
+];
+</script>

package/src/fpl/Configs/StackedBarChart.vue

@@ -0,0 +1,49 @@
+<template>
+  <FormRow fieldName="Value Column (Y-Axis)">
+    <GreySelect
+      v-model="local.panelConfig.categories.focus.name"
+      :options="
+        object.table.columns.map((col) => ({
+          label: col.name,
+          value: col.name,
+        }))
+      "
+      :error="errors.categories"
+    />
+  </FormRow>
+  <FormRow fieldName="Timestamp (X-Axis)">
+    <GreySelect
+      v-model="local.panelConfig.value.column.name"
+      :options="
+        object.table.columns.map((col) => ({
+          label: col.name,
+          value: col.name,
+        }))
+      "
+      :error="errors.value"
+    />
+  </FormRow>
+  <FormRow fieldName="Label Column">
+    <GreySelect
+      v-model="local.panelConfig.categories.type.name"
+      :options="
+        object.table.columns.map((col) => ({
+          label: col.name,
+          value: col.name,
+        }))
+      "
+      :error="errors.categories"
+    />
+  </FormRow>
+</template>
+<script setup>
+import { ref } from "vue";
+import { FormRow, GreySelect } from "@/components";
+
+const props = defineProps({
+  object: Object,
+  entry: Object,
+  errors: Object,
+});
+const local = ref(props.entry);
+</script>

package/src/fpl/Configs/Table.vue

@@ -0,0 +1,211 @@
+<template>
+  <table class="w-full select-none std-table">
+    <thead class="text-left bg-neutral-200 dark:dark-bg">
+      <tr>
+        <TableHeader title="" />
+        <TableHeader title="Selected" />
+        <TableHeader title="Column" />
+        <TableHeader title="Display Name" />
+        <TableHeader title="Format" />
+        <TableHeader title="Alignment" />
+      </tr>
+    </thead>
+    <tbody class="std-table-body">
+      <tr v-for="(col, i) in columns" :class="`cursor-grab draggable${i}`">
+        <TableData>
+          <Bars4Icon class="icon-xs" />
+        </TableData>
+        <TableData>
+          <CheckBox v-model="col.selected" @change.stop="toggleColumn(col)" />
+        </TableData>
+        <TableData :title="col.field" />
+        <TableData>
+          <GreyInput
+            v-model="col.header"
+            :readonly="!col.selected"
+            @change.stop="updateHeader(col)"
+          />
+        </TableData>
+        <TableData>
+          <GreySelect
+            v-model="col.dateTimeFormat"
+            :readonly="!col.selected"
+            :options="formatOption"
+            @update:modelValue="updateHeader(col)"
+          />
+        </TableData>
+        <TableData>
+          <RadioButtons
+            v-model="col.alignment"
+            :options="alignmentOption"
+            :useValue="false"
+            @update:modelValue="updateHeader(col)"
+          >
+            <template #option-0><Bars3BottomLeftIcon class="icon" /></template>
+            <template #option-1><Bars3Icon class="icon" /></template>
+            <template #option-2><Bars3BottomRightIcon class="icon" /></template>
+          </RadioButtons>
+        </TableData>
+      </tr>
+    </tbody>
+  </table>
+</template>
+<script setup>
+import { ref } from "vue";
+import {
+  TableData,
+  TableHeader,
+  CheckBox,
+  GreyInput,
+  GreySelect,
+  RadioButtons,
+} from "@/components";
+import { Bars3BottomLeftIcon, Bars3Icon, Bars3BottomRightIcon, Bars4Icon } from "@heroicons/vue/24/outline";
+import interact from "interactjs";
+// constants
+const formatOption = [
+  { label: "Default", value: "default" },
+  { label: "Cost ($)", value: "cost" },
+  { label: "Data (B)", value: "data" },
+  { label: "Duration (seconds)", value: "duration" },
+  { label: "Compact", value: "readable" },
+  { label: "Thousands Seperated", value: "comma" },
+  { label: "Time (MMM DDD YYYY, HH:mm)", value: "MMM DDD YYYY, HH:mm" },
+  { label: "Time (MMM D, HH:mm)", value: "MMM D, HH:mm" },
+  { label: "Time (ddd HH:mm)", value: "ddd HH:mm" },
+];
+const alignmentOption = [
+  { label: "Left", value: "left" },
+  { label: "Center", value: "center" },
+  { label: "Right", value: "right" },
+];
+// props
+const props = defineProps({
+  object: Object,
+  entry: Object,
+  errors: Object,
+});
+// states
+const local = ref(props.entry);
+const position = ref({ x: 0, y: 0 });
+const columns = ref(
+  JSON.parse(JSON.stringify(local.value.panelConfig.columns))
+);
+
+// mounted
+columns.value.forEach((col) => {
+  col.selected = true;
+});
+if (props.object.table.columns) {
+  props.object.table.columns.forEach((col) => {
+    if (!columns.value.some((c) => c.field === col.name)) {
+      columns.value.push({
+        field: col.name,
+        header: col.name,
+        dateTimeFormat: "default",
+        alignment: "",
+        selected: false,
+      });
+    }
+  });
+  // set all to true if none are selected
+  if (columns.value.every((col) => !col.selected)) {
+    columns.value.forEach((col) => {
+      col.selected = true;
+    });
+    local.value.panelConfig.columns = columns.value.map((col) => {
+      return {
+        field: col.field,
+        header: col.header,
+        dateTimeFormat: col.dateTimeFormat,
+        alignment: col.alignment,
+      };
+    });
+  }
+}
+setDraggable();
+
+function toggleColumn(entry) {
+  if (!entry.selected) {
+    setTimeout(() => {
+      const getSelected = columns.value.filter((col) => col.selected);
+      const loc = getSelected.findIndex((col) => col.field === entry.field);
+      local.value.panelConfig.columns.splice(loc, 0, {
+        field: entry.field,
+        header: entry.field,
+        dateTimeFormat: "default",
+        alignment: "",
+      });
+    }, 100);
+  } else {
+    const loc = local.value.panelConfig.columns.findIndex(
+      (col) => col.field === entry.field
+    );
+    local.value.panelConfig.columns.splice(loc, 1);
+  }
+}
+
+function updateHeader(newCol) {
+  local.value.panelConfig.columns.forEach((col) => {
+    if (col.field === newCol.field) {
+      col.header = newCol.header;
+      col.dateTimeFormat = newCol.dateTimeFormat;
+      col.alignment = newCol.alignment;
+    }
+  });
+}
+
+function reorderColumns(newIndex, entry) {
+  columns.value[columns.value.indexOf(entry)] = columns.value[newIndex];
+  columns.value[newIndex] = entry;
+}
+
+function setDraggable() {
+  columns.value.forEach((col, i) => {
+    const relativePositions = columns.value.map((col, j) => {
+      const start = 0 - i * 53;
+      return start + j * 53;
+    });
+    interact(`.draggable${i}`).draggable({
+      listeners: {
+        start(event) {
+          position.value.x = 0;
+          position.value.y = 0;
+        },
+        move(event) {
+          position.value.x += event.dx;
+          position.value.y += event.dy;
+          // if touch something, change the order
+          const target = relativePositions.find(
+            (pos) => position.value.y > pos - 1 && position.value.y < pos + 1
+          );
+          if (target || target === 0) {
+            reorderColumns(relativePositions.indexOf(target), col);
+          } else {
+            event.target.style.transform = `translate(${position.value.x}px, ${position.value.y}px)`;
+          }
+        },
+        end(event) {
+          local.value.panelConfig.columns = columns.value
+            .filter((col) => col.selected)
+            .map((col) => {
+              return {
+                field: col.field,
+                header: col.header,
+                dateTimeFormat: col.dateTimeFormat,
+                alignment: col.alignment,
+              };
+            });
+          setDraggable();
+        },
+      },
+      modifiers: [
+        interact.modifiers.snap({
+          targets: relativePositions.map((pos) => ({ x: 0, y: pos })),
+          offset: "startCoords",
+        }),
+      ],
+    });
+  });
+}
+</script>

package/src/fpl/Configs/Text.vue

@@ -0,0 +1,14 @@
+<template>
+  <Editor v-model="local.panelConfig.text" />
+</template>
+<script setup>
+import { ref } from "vue";
+import { Editor } from "@/components";
+
+const props = defineProps({
+  object: Object,
+  entry: Object,
+  errors: Object,
+});
+const local = ref(props.entry);
+</script>

package/src/fpl/Configs/TopNChart.vue

@@ -0,0 +1,37 @@
+<template>
+  <FormRow fieldName="Value (X-Axis)">
+    <GreySelect
+      v-model="local.panelConfig.categories.focus.name"
+      :options="
+        object.table.columns.map((col) => ({
+          label: col.name,
+          value: col.name,
+        }))
+      "
+      :error="errors.categories"
+    />
+  </FormRow>
+  <FormRow fieldName="Label (Y-Axis)">
+    <GreySelect
+      v-model="local.panelConfig.value.column.name"
+      :options="
+        object.table.columns.map((col) => ({
+          label: col.name,
+          value: col.name,
+        }))
+      "
+      :error="errors.value"
+    />
+  </FormRow>
+</template>
+<script setup>
+import { ref } from "vue";
+import { FormRow, GreySelect } from "@/components";
+
+const props = defineProps({
+  object: Object,
+  entry: Object,
+  errors: Object,
+});
+const local = ref(props.entry);
+</script>

package/src/fpl/Outputs/FPLAlert.vue

@@ -0,0 +1,64 @@
+<template>
+  <div v-for="(alert, i) in dat" class="py-2 overflow-x-auto">
+    <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="title + i"
+      unit="Value"
+      :height="300"
+      :width="800"
+      :theme="theme"
+    />
+  </div>
+  <EmptyChart v-if="dat.length === 0" :id="title" :height="300" :width="800" />
+</template>
+<script setup>
+import { Tag, AlertChart, EmptyChart } from "@/components";
+import { ref } from "vue";
+
+// stores
+// props and emits
+const props = defineProps({
+  title: String,
+  data: Object,
+  theme: {
+    type: String,
+    default: "light",
+  },
+});
+// states
+const dat = ref([]);
+// mounted
+if (props.data.alerts) parseData();
+
+function parseData() {
+  const slots = props.data.slots.map((slot) => slot * 1000);
+  dat.value = props.data.alerts
+    ? props.data.alerts.map((alert) => {
+        return {
+          tags: alert.dimensionTags ? alert.dimensionTags[0].tags : [],
+          slots: slots,
+          action: alert.key,
+          metric: alert.alertMetric,
+          values: alert.values[0].metric.values,
+          series: alert.associates
+            ? alert.associates
+                .filter((associate) => associate.name)
+                .map((associate) => {
+                  return {
+                    action: associate.name,
+                    values: associate.metric.values,
+                  };
+                })
+            : [],
+        };
+      })
+    : [];
+}
+</script>

package/src/fpl/Outputs/FPLStream.vue

@@ -0,0 +1,41 @@
+<template>
+  <div class="overflow-x-auto">
+    <LineChart
+      :data="dat"
+      :id="title"
+      :unit="data.unit ? data.unit : 'Value'"
+      :height="300"
+      :width="900"
+      :hideZeros="false"
+      :theme="theme"
+    />
+  </div>
+</template>
+<script setup>
+import { ref } from "vue";
+import { LineChart } from "@/components";
+
+// stores
+// props and emits
+const props = defineProps({
+  title: String,
+  data: Object,
+  theme: {
+    type: String,
+    default: "light",
+  },
+});
+// states
+const dat = ref([]);
+const slots = props.data.slots.map((slot) => slot * 1000);
+// mounted
+dat.value = props.data.metrics
+  ? props.data.metrics.map((series) => {
+      return {
+        slots: slots,
+        action: series.key,
+        values: series.values,
+      };
+    })
+  : [];
+</script>