chore: added legend and tooltip formatters

juspay · Feb 24, 2025 · 0c53327 · 0c53327
1 parent 6628d52
commit 0c53327
Show file tree

Hide file tree

Showing 4 changed files with 76 additions and 3 deletions.
diff --git a/src/components/Graphs/ColumnGraph/ColumnGraphUtils.res b/src/components/Graphs/ColumnGraph/ColumnGraphUtils.res
@@ -51,3 +51,60 @@ let getColumnGraphOptions = (barGraphOptions: columnGraphPayload) => {
     },
   }
 }
+
+let columnGraphTooltipFormatter = (~title, ~metricType) => {
+  open LogicUtils
+
+  (
+    @this
+    (this: pointFormatter) => {
+      let title = `<div style="font-size: 16px; font-weight: bold;">${title}</div>`
+
+      let defaultValue = {color: "", x: "", y: 0.0, point: {index: 0}, key: ""}
+      let primartPoint = this.points->getValueFromArray(0, defaultValue)
+
+      let getRowsHtml = (~iconColor, ~date, ~value, ~comparisionComponent="") => {
+        let valueString = valueFormatter(value, metricType)
+        `<div style="display: flex; align-items: center;">
+            <div style="width: 10px; height: 10px; background-color:${iconColor}; border-radius:3px;"></div>
+            <div style="margin-left: 8px;">${date}${comparisionComponent}</div>
+            <div style="flex: 1; text-align: right; font-weight: bold;margin-left: 25px;">${valueString}</div>
+        </div>`
+      }
+
+      let tableItems =
+        [
+          getRowsHtml(~iconColor=primartPoint.color, ~date=primartPoint.key, ~value=primartPoint.y),
+        ]->Array.joinWith("")
+
+      let content = `
+          <div style=" 
+          padding:5px 12px;
+          display:flex;
+          flex-direction:column;
+          justify-content: space-between;
+          gap: 7px;">
+              ${title}
+              <div style="
+                margin-top: 5px;
+                display:flex;
+                flex-direction:column;
+                gap: 7px;">
+                ${tableItems}
+              </div>
+        </div>`
+
+      `<div style="
+    padding: 10px;
+    width:fit-content;
+    border-radius: 7px;
+    background-color:#FFFFFF;
+    padding:10px;
+    box-shadow: 0px 4px 8px rgba(0, 0, 0, 0.2);
+    border: 1px solid #E5E5E5;
+    position:relative;">
+        ${content}
+    </div>`
+    }
+  )->asTooltipPointFormatter
+}
diff --git a/src/components/Graphs/PieGraph/PieGraphTypes.res b/src/components/Graphs/PieGraph/PieGraphTypes.res
@@ -8,7 +8,7 @@ type pointFormatter = {
   series: toolTipSeris,
   point: point,
 }
-type legendLabelFormatter = {name: string}
+type legendLabelFormatter = {name: string, y: int}
 external asTooltipPointFormatter: Js_OO.Callback.arity1<'a> => pointFormatter => string =
   "%identity"
 external asLegendPointFormatter: Js_OO.Callback.arity1<'a> => legendLabelFormatter => string =

diff --git a/src/components/Graphs/PieGraph/PieGraphUtils.res b/src/components/Graphs/PieGraph/PieGraphUtils.res
@@ -15,7 +15,7 @@ let getPieChartOptions = (pieGraphOptions: pieGraphPayload<'t>) => {
     align: "center",
     verticalAlign: "middle", // Centered vertically within the chart
     y: 10, // Adjust this value to fine-tune vertical position
-    x: 50,
+    x: 55,
     style: {
       fontSize: "14px",
       fontWeight: "400",
@@ -137,7 +137,9 @@ let pieGraphLegendFormatter = () => {
   (
     @this
     (this: PieGraphTypes.legendLabelFormatter) => {
-      `${this.name->LogicUtils.snakeToTitle}`
+      let name = this.name->LogicUtils.snakeToTitle
+      let title = `<div style="font-size: 10px; font-weight: bold;">${name} | ${this.y->Int.toString}</div>`
+      title
     }
   )->PieGraphTypes.asLegendPointFormatter
 }

diff --git a/src/components/Graphs/StackedBarGraph/StackedBarGraphUtils.res b/src/components/Graphs/StackedBarGraph/StackedBarGraphUtils.res
@@ -61,3 +61,17 @@ let getStackedBarGraphOptions = (stackedBarGraphOptions: stackedBarGraphPayload)
     },
   }
 }
+
+let stackedBarGraphLabelFormatter = () => {
+  open LogicUtils
+
+  (
+    @this
+    (this: labelFormatter) => {
+      let name = this.name
+      let yData = this.yData->getValueFromArray(0, 0)
+      let title = `<div style="font-size: 10px; font-weight: bold;">${name} | ${yData->Int.toString}</div>`
+      title
+    }
+  )->asLabelFormatter
+}