fluency-v8-components 1.6.0 → 1.6.2

package/src/components/charts/BarChartHorizontal.vue

@@ -91,15 +91,27 @@ export default {
         acc[i] = field ? field : "(no name)";
         return acc;
       }, {});
+      const valueMap = data.values.reduce((acc, value, i) => {
+        acc[i] = value || 0;
+        return acc;
+      }, {});
+
+      const formatValue = (value) => {
+        if (this.unit === "Bytes (B)" || this.unit === "B") {
+          return dataCount(value) + "B";
+        }
+        if (this.unit === "Cost ($)") {
+          return costCount(value);
+        }
+        if (this.unit === "Percent (%)") {
+          return value.toFixed(2) + "%";
+        }
+        return humanCount(value);
+      };
 
       // Declare the tooltip mouseover functions
       const mouseoverEmpty = (event, d) => {
-        const value =
-          this.unit === "Bytes (B)" || this.unit === "B"
-            ? dataCount(d.values) + "B"
-            : this.unit === "Percent (%)"
-            ? d.values.toFixed(2) + "%"
-            : humanCount(d.values);
+        const value = formatValue(d.values);
         event.target.style.opacity = 0.4;
         d3.select("#" + this.id + "tooltip")
           .html(
@@ -163,7 +175,11 @@ export default {
           .attr("y", (d, i) => y(i))
           .attr("width", (d) => 0)
           .attr("height", y.bandwidth())
-          .attr("fill", (d, i) => chartColors[i % chartColors.length])
+          .attr(
+            "fill",
+            (d, i) =>
+              `${chartColors[i % chartColors.length]}${this.theme === "dark" ? "CC" : "99"}`
+          )
           .style("opacity", 0.8);
         // Animation
         this.svg
@@ -185,7 +201,11 @@ export default {
           .attr("y", (d, i) => y(i))
           .attr("width", this.width - marginLeft)
           .attr("height", y.bandwidth())
-          .attr("fill", (d, i) => chartColors[i % chartColors.length])
+          .attr(
+            "fill",
+            (d, i) =>
+              `${chartColors[i % chartColors.length]}${this.theme === "dark" ? "CC" : "99"}`
+          )
           .style("opacity", 0)
           .on("mouseover", mouseoverEmpty)
           .on("mouseout", mouseoutEmpty);
@@ -215,7 +235,7 @@ export default {
               .axisRight(y)
               .tickSize(0)
               .tickFormat((d) => {
-                return domainMap[d];
+                return `${domainMap[d]} - ${formatValue(valueMap[d])}`;
               })
           )
           .call((g) => g.select(".domain").remove())

package/src/components/charts/LineChart.vue

@@ -286,7 +286,7 @@ export default {
           .attr("stroke", (d) => {
             return (
               platformMetricsLabels[this.theme][d.action] ||
-              chartColors[d.index % chartColors.length]
+              `${chartColors[d.index % chartColors.length]}${this.theme === "dark" ? "CC" : "99"}`
             );
           })
           .attr("stroke-width", 1.5)
@@ -330,7 +330,7 @@ export default {
               "fill",
               (d) =>
                 platformMetricsLabels[this.theme][series.action] ||
-                chartColors[d.index % chartColors.length]
+                `${chartColors[d.index % chartColors.length]}${this.theme === "dark" ? "CC" : "99"}`
             )
             .attr("r", 2.5)
             .attr("cx", (d) => x(d.slots))
@@ -384,7 +384,7 @@ export default {
         .style("fill", (d) => {
           return (
             platformMetricsLabels[this.theme][d.action] ||
-            chartColors[d.index % chartColors.length]
+            `${chartColors[d.index % chartColors.length]}${this.theme === "dark" ? "CC" : "99"}`
           );
         })
         .on("mouseover", legendMouseover)
@@ -403,7 +403,7 @@ export default {
         .style("fill", (d) => {
           return (
             platformMetricsLabels[this.theme][d.action] ||
-            chartColors[d.index % chartColors.length]
+            `${chartColors[d.index % chartColors.length]}${this.theme === "dark" ? "CC" : "99"}`
           );
         })
         .text((d) => d.action || "(no name)")

package/src/components/charts/PieChart.vue

@@ -1,9 +1,11 @@
 <template>
-  <div :id="id" class="float-left">
-    <div :id="id + 'tooltip'" role="tooltip" class="tooltip"></div>
-  </div>
-  <div class="overflow-auto" :style="`width: ${width}px; overflow: auto`">
-    <div :id="id + 'legend'"></div>
+  <div class="flex w-full flex-col items-center">
+    <div :id="id">
+      <div :id="id + 'tooltip'" role="tooltip" class="tooltip"></div>
+    </div>
+    <div class="overflow-auto" :style="`width: ${width}px; overflow: auto`">
+      <div :id="id + 'legend'"></div>
+    </div>
   </div>
 </template>
 <script>
@@ -57,6 +59,11 @@ export default {
     this.initializeChart();
     this.createChart();
   },
+  watch: {
+    theme() {
+      this.updateThemeStyles();
+    },
+  },
   methods: {
     initializeChart() {
       this.svg = d3
@@ -214,7 +221,9 @@ export default {
             return arc(d);
           })
           .attr("fill", (d, i) =>
-            !total ? chartColors[0] : chartColors[i % chartColors.length]
+            !total
+              ? chartColors[0]
+              : `${chartColors[i % chartColors.length]}${handle.theme === "dark" ? "CC" : "99"}`
           )
           .style("opacity", 0.8)
           .style("fill-opacity", 0)
@@ -288,6 +297,24 @@ export default {
         exit.call((g) => g.style("opacity", 0).remove());
       }
     },
+    updateThemeStyles() {
+      if (!this.svg) {
+        return;
+      }
+      const total = this.data.reduce((acc, d) => acc + (d.values || 0), 0);
+      const textColor = this.theme === "dark" ? "white" : "black";
+      this.svg
+        .selectAll("polyline." + this.id + "labels")
+        .style("stroke", textColor);
+      this.svg.selectAll("text." + this.id + "labels").style("fill", textColor);
+      this.svg
+        .selectAll("path." + this.id + "pie")
+        .attr("fill", (d, i) =>
+          !total
+            ? chartColors[0]
+            : `${chartColors[i % chartColors.length]}${this.theme === "dark" ? "CC" : "99"}`
+        );
+    },
   },
 };
 </script>

package/src/components/charts/StackedChart.vue

@@ -271,7 +271,7 @@ export default {
             "fill",
             (d) =>
               costLabels[this.theme][d.key] ||
-              chartColors[namesIndex.indexOf(d.key) % chartColors.length]
+              `${chartColors[namesIndex.indexOf(d.key) % chartColors.length]}${this.theme === "dark" ? "CC" : "99"}`
           )
           .selectAll("rect")
           .data((D) => D.map((d) => ((d.key = D.key), d)))
@@ -333,7 +333,8 @@ export default {
         .attr(
           "fill",
           (d, i) =>
-            costLabels[this.theme][d.key] || chartColors[i % chartColors.length]
+            costLabels[this.theme][d.key] ||
+            `${chartColors[i % chartColors.length]}${this.theme === "dark" ? "CC" : "99"}`
         )
         .on("mouseover", legendMouseover)
         .on("mouseout", legendMouseout)
@@ -351,7 +352,8 @@ export default {
         .attr(
           "fill",
           (d, i) =>
-            costLabels[this.theme][d.key] || chartColors[i % chartColors.length]
+            costLabels[this.theme][d.key] ||
+            `${chartColors[i % chartColors.length]}${this.theme === "dark" ? "CC" : "99"}`
         )
         .text((d, i) => adjustText(this.names[d[0].key], 700))
         .attr("font-weight", 500)

package/src/components/charts/StackedChartClustered.vue

@@ -239,9 +239,12 @@ export default {
                       instancesIndex.length +
                       0.5
                   ) ||
-                  chartColors[
-                    namesIndex.indexOf(d.key.split(":")[0]) % chartColors.length
-                  ]
+                  `${
+                    chartColors[
+                      namesIndex.indexOf(d.key.split(":")[0]) %
+                        chartColors.length
+                    ]
+                  }${this.theme === "dark" ? "CC" : "99"}`
               )
               .selectAll("rect")
               .data((D) => D.map((d) => ((d.key = D.key), d)))
@@ -363,7 +366,7 @@ export default {
           "fill",
           (d, i) =>
             platformMetricsLabels[this.theme][d] ||
-            chartColors[i % chartColors.length]
+            `${chartColors[i % chartColors.length]}${this.theme === "dark" ? "CC" : "99"}`
         )
         .on("mouseover", legendMouseover)
         .on("mouseout", legendMouseout)
@@ -382,7 +385,7 @@ export default {
           "fill",
           (d, i) =>
             platformMetricsLabels[this.theme][d] ||
-            chartColors[i % chartColors.length]
+            `${chartColors[i % chartColors.length]}${this.theme === "dark" ? "CC" : "99"}`
         )
         .text((d, i) => adjustText(d, 700))
         .attr("font-weight", 500)

package/src/components/charts/TimelinePlot.vue

@@ -0,0 +1,219 @@
+<template>
+  <div class="col items-center">
+    <div class="text-center">
+      <span>{{ title }} Timeline ({{ total }} Events)</span>
+    </div>
+    <div ref="myplot" :class="['px-4', { 'pb-4': !props.flow }]"></div>
+    <div class="flex justify-end w-full mr-2">
+      <div ref="myplotLegend"></div>
+    </div>
+  </div>
+</template>
+
+<script setup>
+import { ref, watch } from "vue";
+import * as d3 from "d3";
+import * as Plot from "@observablehq/plot";
+import { dateLocalTime } from "@/utils/timeUtils";
+
+// props
+const props = defineProps({
+  title: String,
+  buckets: Array,
+  total: Number,
+  from: Number,
+  to: Number,
+  flow: {
+    type: Boolean,
+    default: false,
+  },
+  width: {
+    type: Number,
+    default: 1200,
+  },
+  height: {
+    type: Number,
+    default: 300,
+  },
+  theme: {
+    type: String,
+    default: "light",
+  },
+  /** Key on each bucket for the risk score value (y-axis). Default "risk_score". */
+  valueKey: {
+    type: String,
+    default: "risk_score",
+  },
+});
+// states
+const myplot = ref(null);
+const myplotLegend = ref(null);
+// watch for changes in data
+watch([() => props.buckets], () => {
+  plotGraph();
+});
+watch([() => props.theme], () => {
+  plotGraph();
+});
+
+// function defs
+function plotGraph() {
+  if (!props.buckets) return;
+  const valueKey = props.valueKey;
+  let options = {
+    marginTop: 30,
+    marks: [
+      Plot.frame(),
+      Plot.text(["No data available!"], { frameAnchor: "middle" }),
+    ],
+  };
+  let marginLeft = 80;
+  let marginRight = 80;
+
+  if (props.buckets.length > 0) {
+    if (props.flow) {
+      const b = props.buckets;
+
+      // Left axis (flow) domain = max of rx/tx
+      const leftMax = Math.max(
+        1,
+        d3.max(b, (d) => Math.max(d?.rxHistogram?.value ?? 0, d?.txHistogram?.value ?? 0)) ?? 0
+      );
+
+      // Right axis (risk score) domain
+      const rightMax = Math.max(
+        1,
+        d3.max(b, (d) => d?.[valueKey] ?? 0) ?? 0
+      );
+
+      const k = leftMax / rightMax;
+      const rightTicks = d3.ticks(0, rightMax, 5);
+      const leftTicks = d3.ticks(0, leftMax, 5);
+
+      options = {
+        x: { type: "time", label: "Time", tickSpacing: 100 },
+        y: {
+          label: "Flow",
+          domain: [0, leftMax],
+        },
+        grid: true,
+        marks: [
+          Plot.lineY(b, {
+            x: "key",
+            y: (d) => d?.rxHistogram?.value ?? 0,
+            strokeWidth: 2.5,
+            curve: "catmull-rom",
+            stroke: "#22c55e",
+          }),
+          Plot.lineY(b, {
+            x: "key",
+            y: (d) => d?.txHistogram?.value ?? 0,
+            strokeWidth: 2.5,
+            curve: "catmull-rom",
+            stroke: "#eab308",
+          }),
+          Plot.dotY(b, {
+            x: "key",
+            y: (d) => (d?.[valueKey] ?? 0) * k,
+            stroke: "#71b6e0",
+            strokeWidth: 3,
+          }),
+          Plot.axisY({
+            anchor: "left",
+            ticks: leftTicks.map((t) => t),
+            tickFormat: (_, i) => d3.format("~s")(leftTicks[i]) + "B",
+            label: "Bytes",
+          }),
+          Plot.axisY({
+            anchor: "right",
+            ticks: rightTicks.map((t) => t * k),
+            tickFormat: (_, i) => d3.format("~s")(rightTicks[i]),
+            label: "Risk Score",
+          }),
+          Plot.tip(
+            b,
+            Plot.pointerX({
+              x: "key",
+              y: (d) => (d?.[valueKey] ?? 0) * k,
+              fill: props.theme === "light" ? "white" : "black",
+              title: (d) =>
+                `Time: ${dateLocalTime(d.key)}\n` +
+                `rx: ${d?.rxHistogram?.value ?? 0}B (~${d3.format(".0s")(d?.rxHistogram?.value)}B)\n` +
+                `tx: ${d?.txHistogram?.value ?? 0}B (~${d3.format(".0s")(d?.txHistogram?.value)}B)\n` +
+                `Risk Score: ${Math.round(d?.[valueKey] ?? 0)}`,
+            })
+          ),
+        ],
+      };
+    } else {
+      const dataMax = d3.max(props.buckets, (d) => d?.[valueKey] ?? 0) ?? 0;
+      const maxRisk = dataMax > 0 ? Math.max(1, dataMax) : 500;
+      const allZeros = dataMax === 0;
+      const tickFormat = d3.format("d");
+      const widestTickLabel = tickFormat(maxRisk).toString();
+      marginLeft = Math.max(marginLeft, 24 + widestTickLabel.length * 8);
+
+      options = {
+        x: {
+          type: "time",
+          label: "Time",
+          tickSpacing: 100,
+        },
+        y: {
+          label: "Risk Score",
+          domain: [0, maxRisk],
+          tickFormat,
+          ...(allZeros && { ticks: [0, 100, 200, 300, 400, 500] }),
+        },
+        grid: true,
+        marks: [
+          Plot.dotY(props.buckets, {
+            x: "key",
+            y: (d) => d?.[valueKey] ?? 0,
+            stroke: "#71b6e0",
+            strokeWidth: 3,
+          }),
+          Plot.tip(
+            props.buckets,
+            Plot.pointerX({
+              x: "key",
+              y: (d) => d?.[valueKey] ?? 0,
+              fill: props.theme === "light" ? "white" : "black",
+              title: (d) =>
+                `Time: ${dateLocalTime(d.key)}\nRisk Score: ${Math.round(d?.[valueKey] ?? 0)}`,
+            })
+          ),
+        ],
+      };
+    }
+  }
+
+  const plot = Plot.plot({
+    marginLeft,
+    marginRight,
+    width: props.width,
+    height: props.height,
+    marginBottom: 50,
+    inset: 20,
+    style: {
+      fontSize: "16px",
+      backgroundColor: props.theme === "light" ? "white" : "#1a202c",
+    },
+    ...options,
+  });
+  myplot.value.innerHTML = "";
+  myplot.value.appendChild(plot);
+  if (props.flow) {
+    const legend = Plot.legend({
+      color: {
+        type: "categorical",
+        domain: ["Received", "Sent", "Risk Score"],
+        range: ["#22c55e", "#eab308", "#71b6e0"],
+      },
+      swatchSize: 8,
+    });
+    myplotLegend.value.innerHTML = "";
+    myplotLegend.value.appendChild(legend);
+  }
+}
+</script>

package/src/components/index.js

@@ -119,6 +119,7 @@ export { default as StackedChartClustered } from "./charts/StackedChartClustered
 export { default as PieChart } from "./charts/PieChart.vue";
 export { default as ProgressChart } from "./charts/ProgressChart.vue";
 export { default as TimelineChart } from "./charts/TimelineChart.vue";
+export { default as TimelinePlot } from "./charts/TimelinePlot.vue";
 export { default as RangeSlider } from "./charts/RangeSlider.vue"
 export { default as EmptyChart } from "./charts/EmptyChart.vue";
 export { default as WorkflowChart } from "./charts/WorkflowChart.vue";

package/src/components/page-structure/FacetPage.vue

@@ -29,7 +29,7 @@
       </div>
       <div
         :class="[
-          'col-span-3 md:ml-5 md:overflow-auto',
+          'col-span-3 md:ml-5 md:overflow-auto custom-scrollbar',
           { 'md:max-h-[calc(100vh-255px)]': searchBar },
           { 'md:max-h-[calc(100vh-200px)]': !searchBar },
         ]"

package/src/constants/fpl2.js

@@ -1,7 +1,7 @@
 import Prism from "prismjs";
 
 const builtinfunction =
-  /#?(?!\s)\b(?:Add|After|Aggregate|alert|anomaly|append|Append|AWS_AccountRegionLambda|AWS_AccountLambda|AWS_GetCostUsage|AWS_GetMetric|AWS_GetPrice|AWS_LoadAsset|base64Encode|base64Decode|Before|Clone|coalesce|ColumnAggregate|concat|contains|content|Cylance_AddGlobalList|Cylance_GetDevice|Cylance_GetThreatDevices|Cylance_GetThreatDownload|Cylance_GetThreatInfo|Cylance_LoadDevice|Cylance_LoadThreat|decoder_CEF|decoder_CSV|decoder_MixedKeyValue|decoder_QuotedKeyValue|DimensionTable|Each|Emit|endsWith|Error|Find|Filter|Fluency_BehaviorSearch|Fluency_Device_Add|Fluency_Device_Delete|Fluency_DeviceSearch|Fluency_Device_Lookup|Fluency_Device_LookupName|Fluency_Device_Update|Fluency_EntityinfoLookup|Fluency_FusionEvent|fluencyLavadbFpl|Fluency_LavadbQuery|Fluency_LavaLakeFpl|Fluency_ResourceLoad|Fluency_SummarySearch|Fluency_Tenant_Device_Add|Fluency_Tenant_Device_Delete|Fluency_Tenant_Device_Lookup|Fluency_Tenant_Device_LookupName|Fluency_Tenant_Device_Update|Format|geoip|GetColumnValues|GetEnv|GetKeys|GetRow|gzipCompress|gzipDecompress|htmlTemplate|indexOf|isEmpty|IsEmpty|isIPv4|isIPv6|ipNormalize|isNull|isNumber|isString|isUndef|isValidIP|Join|JoinStream|jsonClone|jsonTable|len|Limit|main|Map|match|mergeTable|NewColumns|NewColumnLambda|parseBool|parseFloat|parseInt|parseJson|Platform_Action|Platform_Action_Endpoint|Platform_Asset_Lookup|Platform_Asset_Refresh|Platform_Asset_Register|Platform_Cache_Check|Platform_Cache_Delete|Platform_Cache_DeRegister|Platform_Cache_Get|Platform_Cache_Register|Platform_Cache_Replace|Platform_Cache_Set|Platform_Cache_SetMultiple|Platform_Channel|Platform_DataObject_Delete|Platform_DataObject_Get|Platform_DataObject_Save|Platform_DataObject_Search|Platform_EntityinfoCheck|Platform_EntityinfoLookup|Platform_EntityProvider_Lookup|Platform_EntityProvider_Refresh|Platform_Grok_Add_Pattern|Platform_Grok_Check|Platform_Grok_Parse|Platform_Grok_Register|Platform_LoadComponent|Platform_Metric_Alert_Counter_Stop|Platform_Metric_Counter|Platform_Metric_Query|Platform_Metric_QueryBuild|Platform_Metric_QueryRange|Platform_Metric_Sort|Platform_Metric_Sort_Histogram|Platform_Notification_Email|Platform_Notification_PagerDuty|Platform_Notification_Slack|Platform_Notification_ServiceNow|Platform_PluginLambda|Platform_REST_Call|Platform_Sink|Platform_Site_GetInfo|Platform_Site_GetTenants|Platform_Site_LoadTenantComponent|pluginLambda|Plugin_Bitdefender_LoadEndpoint|Plugin_Falcon_GetHost|Plugin_Falcon_GetIncident|Plugin_Falcon_LoadHost|Plugin_Falcon_LoadIncident|Plugin_InControl_LoadClient|Plugin_InControl_LoadDevice|printf|Prom_Push_Counter|Prom_Push_Gauge|regexp|replace|replaceAll|ReplaceKey|RenameColumn|RemoveColumn|Round|run|RxFPL_GetMetric|setEnv|split|Some|Sort|sprintf|startsWith|SetColumnUnit|SetDimensions|SetTags|SetUnit|sleep|SummaryTable|subString|template|TimeTable|toLower|timezoneOffset|toUpper|transform|trim|trimPrefix|trimSuffix|typeof|Unix|UnixMilli|window)\b(?:(?!\s)[$\w\xA0-\uFFFF])*(?=\s*(?:\.\s*(?:apply|bind|call)\s*)?\()/g;
+  /#?(?!\s)\b(?:Add|After|Aggregate|alert|anomaly|append|Append|AWS_AccountRegionLambda|AWS_AccountLambda|AWS_GetCostUsage|AWS_GetMetric|AWS_GetPrice|AWS_LoadAsset|base64Encode|base64Decode|Before|Clone|coalesce|ColumnAggregate|concat|contains|content|Cylance_AddGlobalList|Cylance_GetDevice|Cylance_GetThreatDevices|Cylance_GetThreatDownload|Cylance_GetThreatInfo|Cylance_LoadDevice|Cylance_LoadThreat|decoder_CEF|decoder_CSV|decoder_MixedKeyValue|decoder_QuotedKeyValue|DimensionTable|Each|Emit|endsWith|Error|Find|Filter|Fluency_BehaviorSearch|Fluency_Device_Add|Fluency_Device_Delete|Fluency_DeviceSearch|Fluency_Device_Lookup|Fluency_Device_LookupName|Fluency_Device_Update|Fluency_EntityinfoLookup|Fluency_FusionEvent|fluencyLavadbFpl|Fluency_LavadbQuery|fluencyLavaLakeFpl|Fluency_LavaLakeFpl|Fluency_ResourceLoad|Fluency_SummarySearch|Fluency_Tenant_Device_Add|Fluency_Tenant_Device_Delete|Fluency_Tenant_Device_Lookup|Fluency_Tenant_Device_LookupName|Fluency_Tenant_Device_Update|Format|geoip|GetColumnValues|GetEnv|GetKeys|GetRow|gzipCompress|gzipDecompress|htmlTemplate|indexOf|isEmpty|IsEmpty|isIPv4|isIPv6|ipNormalize|isNull|isNumber|isString|isUndef|isValidIP|Join|JoinStream|jsonClone|jsonTable|len|Limit|main|Map|match|mergeTable|NewColumns|NewColumnLambda|parseBool|parseFloat|parseInt|parseJson|Platform_Action|Platform_Action_Endpoint|Platform_Asset_Lookup|Platform_Asset_Refresh|Platform_Asset_Register|Platform_Cache_Check|Platform_Cache_Delete|Platform_Cache_DeRegister|Platform_Cache_Get|Platform_Cache_Register|Platform_Cache_Replace|Platform_Cache_Set|Platform_Cache_SetMultiple|Platform_Channel|Platform_DataObject_Delete|Platform_DataObject_Get|Platform_DataObject_Save|Platform_DataObject_Search|Platform_EntityinfoCheck|Platform_EntityinfoLookup|Platform_EntityProvider_Lookup|Platform_EntityProvider_Refresh|Platform_Grok_Add_Pattern|Platform_Grok_Check|Platform_Grok_Parse|Platform_Grok_Register|Platform_LoadComponent|Platform_Metric_Alert_Counter_Stop|Platform_Metric_Counter|Platform_Metric_Query|Platform_Metric_QueryBuild|Platform_Metric_QueryRange|Platform_Metric_Sort|Platform_Metric_Sort_Histogram|Platform_Notification_Email|Platform_Notification_PagerDuty|Platform_Notification_Slack|Platform_Notification_ServiceNow|Platform_PluginLambda|Platform_REST_Call|Platform_Sink|Platform_Site_GetInfo|Platform_Site_GetTenants|Platform_Site_LoadTenantComponent|pluginLambda|Plugin_Bitdefender_LoadEndpoint|Plugin_Falcon_GetHost|Plugin_Falcon_GetIncident|Plugin_Falcon_LoadHost|Plugin_Falcon_LoadIncident|Plugin_InControl_LoadClient|Plugin_InControl_LoadDevice|printf|Prom_Push_Counter|Prom_Push_Gauge|regexp|replace|replaceAll|ReplaceKey|RenameColumn|RemoveColumn|Round|run|RxFPL_GetMetric|setEnv|split|Some|Sort|sprintf|startsWith|SetColumnUnit|SetDimensions|SetTags|SetUnit|sleep|SummaryTable|subString|template|TimeTable|toLower|timezoneOffset|toUpper|transform|trim|trimPrefix|trimSuffix|typeof|Unix|UnixMilli|window)\b(?:(?!\s)[$\w\xA0-\uFFFF])*(?=\s*(?:\.\s*(?:apply|bind|call)\s*)?\()/g;
 
 const fpl2 = {
   regex: Prism.languages.javascript.regex,

package/src/fpl/Panel.vue

@@ -72,20 +72,21 @@
       <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"
-  />
+  <div v-if="!noData" class="flex w-full justify-center">
+    <component
+      :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"
+    />
+  </div>
   <span v-else class="flex justify-center pt-10 text-lg font-semibold">
     No data available
   </span>

package/src/fpl/Panels/Counter.vue

@@ -1,8 +1,11 @@
 <template>
-  <div class="w-full" style="height: calc(100% - 40px)">
+  <div
+    class="flex w-full items-center justify-center"
+    :style="`height: ${layout.h * 60 - 40}px`"
+  >
     <span
       :class="[
-        'flex items-center justify-center content-center h-full overflow-hidden',
+        'overflow-hidden text-center',
         layout.w > 4 ? 'text-7xl' : 'text-5xl',
       ]"
     >

package/src/fpl/Panels/PieChart.vue

@@ -1,12 +1,12 @@
 <template>
-  <div>
+  <div class="w-full overflow-hidden">
     <PieChart
       v-if="!redraw"
       :data="data"
       :id="id"
       unit="Value"
       :height="props.layout.h * 60 - 40"
-      :width="props.layout.w * 69 - 10"
+      :width="props.layout.w * 78"
       tooltipOffset="offset"
       :value-name="props.config.categories.focus.name"
       :theme="theme"

package/src/utils/download.js

@@ -64,8 +64,8 @@ const panelCSVDownload = (title, columns, rows) => {
 const exportAsCsv = (table) => {
   let csv =
     table.columns
-      .map((col) => col.replaceAll(", ", " ").replaceAll(",", " "))
-      .join(",") + "\n";
+      // .map((col) => col.replaceAll(", ", " ").replaceAll(",", " "))
+      .join("|") + "\n";
 
   const order = {};
   table.columns.forEach((col, index) => {
@@ -79,10 +79,10 @@ const exportAsCsv = (table) => {
         val = "";
       }
       if (typeof val === "string") {
-        val = val.replaceAll(", ", " ").replaceAll(",", " ");
+        // val = val.replaceAll(", ", " ").replaceAll(",", " ");
       }
       // add double quotes to csv export
-      r += '"' + val + '"' + ",";
+      r += '"' + val + '"' + "|";
     });
     csv += r.slice(0, -1) + "\n";
   });
@@ -128,20 +128,31 @@ const reportToPdf = async (name, layouts) => {
   const logoXOffset = 20;
   const logoYOffset = 10;
   const logo = await getLogo();
+  const clientLogo = await getClientLogo();
+  const poweredByText = "Powered by Fluency";
+  const poweredByTextWidth = pdf.getTextWidth(poweredByText);
 
   let pageIndexOffset = 0;
   let pageNumber = 1;
 
+  const addNewPageMeta = () => {
+    pdf.addImage(logo, "png", logoXOffset, logoYOffset, logoWidth, logoHeight);
+    if (clientLogo) {
+      pdf.addImage(clientLogo, "png", pageWidth - logoWidth - logoXOffset, logoYOffset, logoWidth, logoHeight);
+    }
+    pdf.text((pageWidth - poweredByTextWidth) / 2, pageHeight - 10, poweredByText);
+    pdf.text(pageWidth - 2 * xMargin, pageHeight - 10, `Page ${pageNumber}`);
+  };
+
   const widthUnit = Math.floor((pageWidth - xMargin) / layoutColumns);
   const heightUnit = widthUnit * 0.9;
   pdf.setFontSize(fontSize);
   pdf.setFont(undefined, "normal");
-  pdf.addImage(logo, "png", logoXOffset, logoYOffset, logoWidth, logoHeight);
-  pdf.text(pageWidth - 2 * xMargin, pageHeight - 10, `Page ${pageNumber}`);
+  addNewPageMeta();
 
   for (const layout of layouts.layout) {
     const widget = document.getElementById(`grid-item-${layout.i}`);
-    const canvasOptions = {};
+    const canvasOptions = { scale: 4 };
     const canvas = await html2canvas(widget, canvasOptions);
     const img = canvas.toDataURL("image/png");
     const x = layout.x * widthUnit;
@@ -151,15 +162,7 @@ const reportToPdf = async (name, layouts) => {
     if (endOfImg > pageHeight + pageIndexOffset) {
       pdf.addPage();
       pageNumber += 1;
-      pdf.addImage(
-        logo,
-        "png",
-        logoXOffset,
-        logoYOffset,
-        logoWidth,
-        logoHeight
-      );
-      pdf.text(pageWidth - 2 * xMargin, pageHeight - 10, `Page ${pageNumber}`);
+      addNewPageMeta();
       pageIndexOffset = y;
     }
     // check if panel is oversized for page
@@ -187,10 +190,18 @@ const reportToPdf = async (name, layouts) => {
   pdf.save(`${name}.pdf`);
 };
 
-const getLogo = () => {
+const getLogo = async () => {
   return document.getElementById("logo");
 };
 
+const getClientLogo = async () => {
+  const img = document.getElementById("client-logo");
+  if (img) {
+    return img;
+  }
+  return null;
+};
+
 const base64toImage = async (logo) => {
   let data = {};
   const img = new Image();