fluency-v8-components 1.6.1 → 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/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();