Update bubble chart UI (#317)

* Update bubble chart data * Change tooltip label
daxa-ai · Apr 10, 2024 · c4c5227 · c4c5227
1 parent 921e5dc
commit c4c5227
Show file tree

Hide file tree

Showing 3 changed files with 30 additions and 22 deletions.
diff --git a/pebblo/app/pebblo-ui/src/components/bubbleChart.js b/pebblo/app/pebblo-ui/src/components/bubbleChart.js
@@ -1,12 +1,13 @@
 import { waitForElement } from "../util.js";
 
 export const BubbleChart = (props) => {
-  //const { types, data: chartData } = props;
   waitForElement("#bubbleChart", 5000).then(function () {
-    const data = props.chartData;
+    const { showTitlesForValues, chartData: data } = props;
     // Set the dimensions and margins of the graph
-    const width = 950;
-    const height = 250;
+    const width =
+      document.getElementById("graph-container").offsetWidth || 1000;
+    const height =
+      document.getElementById("graph-container").offsetHeight || 250;
     const margin = 1;
 
     const color = d3
@@ -67,7 +68,7 @@ export const BubbleChart = (props) => {
         .html(
           /*html*/ `<div class="tooltip">
             <div class="tooltip-heading">${d.data.label}</div>
-            <div class="tooltip-body">Snippets: ${d.data.value}</div>
+            <div class="tooltip-body">Snippet Count: ${d.data.value}</div>
         <div>`
         )
         .style("left", xPos + 15 + "px")
@@ -97,7 +98,7 @@ export const BubbleChart = (props) => {
       .append("text")
       .attr("clip-path", (d) => `circle(${d.r})`)
       .attr("class", (d) => {
-        if (d.data.value > 0) {
+        if (showTitlesForValues.includes(d.data.value)) {
           return "show-node";
         } else {
           return "hide-node";
@@ -129,7 +130,7 @@ export const BubbleChart = (props) => {
   });
 
   return /*html*/ `
-  <div class="graph-container">
+  <div class="graph-container" id="graph-container">
     <div id="bubbleChart"></div>
   </div>
   `;

diff --git a/pebblo/app/pebblo-ui/src/components/chartCard.js b/pebblo/app/pebblo-ui/src/components/chartCard.js
@@ -1,27 +1,32 @@
-import { MEDIA_URL } from "../constants/constant.js";
+import { SORT_DATA } from "../util.js";
 import { EmptyState } from "./emptyState.js";
 import { BubbleChart, LegendBadge } from "./index.js";
 
 export const ChartCard = (props) => {
-  const { title, chartLegends, error } = props;
+  const { title, chartLegends, chartData, error } = props;
+  let sortedData = [];
+  let showTitlesForValues = [];
+  if (chartData?.length > 0) {
+    sortedData = SORT_DATA([...chartData], "desc", "value");
+    showTitlesForValues = [sortedData[0].value, sortedData[1].value];
+  }
   return /*html*/ `
     <div class="flex flex-col w-100 gap-4">
     <div class="inter surface-10 font-16 medium">${title}</div>
     ${
       error
         ? EmptyState({ variant: error })
-        : `<div class="flex gap-6">
-          <div class="flex flex-col gap-2">
-            ${chartLegends?.myMap(function (legend) {
-              return `${LegendBadge(legend)}`;
-            })}
-            <div class="flex gap-2 items-center">
-              <img src="${MEDIA_URL}/static/bubble-icon.svg" alt="bubble-icon" />
-              <div class="inter font-13 surface-10-opacity-50">N Number of Snippets</div>
-            </div>
-          </div>
-    ${BubbleChart(props)}
-    </div>`
+        : `<div class="flex flex-col gap-6">     
+          ${BubbleChart({ ...props, showTitlesForValues })}
+          <div class="flex gap-2">
+                  ${chartLegends?.myMap(function (legend) {
+                    return `${LegendBadge(legend)}`;
+                  })}
+
+                  <div class="divider bg-surface-10"></div>
+                  <div class="inter font-13 surface-10-opacity-50">Circle size represents the number of snippets</div>
+                </div>
+          </div>`
     }
     </div>
   `;

diff --git a/pebblo/app/pebblo-ui/static/index.css b/pebblo/app/pebblo-ui/static/index.css
@@ -1205,7 +1205,9 @@ dialog::backdrop {
 
 .graph-container {
   height: 100%;
-  width: 80%;
+  width: 100%;
+  min-width: 100%;
+  min-height: 250px;
 }
 
 .hide-node {