feat: Added Column Graph, PieGraph, Stacked BarGraph

src/components/Graphs/ColumnGraph/ColumnGraph.res

@@ -0,0 +1,8 @@
+external barGraphOptionsToJson: ColumnGraphTypes.columnGraphOptions => JSON.t = "%identity"
+
+@react.component
+let make = (~options: ColumnGraphTypes.columnGraphOptions, ~className="") => {
+  <div className>
+    <Highcharts.Chart options={options->barGraphOptionsToJson} highcharts={Highcharts.highcharts} />
+  </div>
+}

src/components/Graphs/ColumnGraph/ColumnGraphTypes.res

@@ -0,0 +1,115 @@
+type \"type" = string
+type spacingLeft = int
+type spacingRight = int
+
+type categories = array<string>
+type align = string
+type color = string
+type gridLineWidth = int
+type gridLineColor = string
+type gridLineDashStyle = string
+type tickmarkPlacement = string
+type endOnTick = bool
+type startOnTick = bool
+type tickInterval = int
+type tickWidth = int
+type min = int
+type max = int
+type showInLegend = bool
+type name = string
+
+type title = {text: string}
+type style = {
+  color: color,
+  fontFamily: string,
+  fontSize: string,
+}
+type enabled = {enabled: bool}
+type credits = {
+  ...enabled,
+}
+
+type legend = {
+  ...enabled,
+}
+
+type marker = {
+  ...enabled,
+}
+
+type pointPadding = float
+type column = {
+  borderWidth: int,
+  borderRadius: int,
+  stacking: string,
+}
+type plotOptions = {series: column}
+type labels = {
+  align: align,
+  style: style,
+}
+type chart = {
+  \"type": string,
+  height: int,
+}
+
+type dataObj = {
+  name: string,
+  y: float,
+  color: string,
+}
+
+type seriesObj = {
+  name: name,
+  colorByPoint: bool,
+  data: array<dataObj>,
+}
+
+type series = array<seriesObj>
+
+type yAxis = {title: title}
+
+type xAxis = {\"type": string}
+
+type info = {index: int}
+type point = {color: string, x: string, y: float, point: info, key: string}
+type pointFormatter = {points: array<point>}
+
+external asTooltipPointFormatter: Js_OO.Callback.arity1<'a> => pointFormatter => string =
+  "%identity"
+
+type cssStyle = {
+  fontFamily: string,
+  fontSize: string,
+  padding: string,
+}
+
+type tooltip = {
+  shape: string,
+  backgroundColor: string,
+  borderColor: string,
+  useHTML: bool,
+  formatter: pointFormatter => string,
+  shared: bool,
+  style: cssStyle,
+  borderWidth: float,
+  shadow: bool,
+}
+
+type columnGraphOptions = {
+  chart: chart,
+  title: title,
+  xAxis: xAxis,
+  yAxis: yAxis,
+  legend: legend,
+  plotOptions: plotOptions,
+  series: series,
+  credits: credits,
+  tooltip: tooltip,
+}
+
+type columnGraphPayload = {
+  data: series,
+  title: title,
+  tooltipFormatter: pointFormatter => string,
+}

src/components/Graphs/ColumnGraph/ColumnGraphUtils.res

@@ -0,0 +1,110 @@
+// constants
+let fontFamily = "Arial, sans-serif"
+let darkGray = "#666666"
+let gridLineColor = "#e6e6e6"
+open ColumnGraphTypes
+let getColumnGraphOptions = (barGraphOptions: columnGraphPayload) => {
+  let {data, title, tooltipFormatter} = barGraphOptions
+
+  {
+    chart: {
+      \"type": "column",
+      height: 270,
+    },
+    title,
+    xAxis: {
+      \"type": "category",
+    },
+    yAxis: {
+      title: {
+        text: "",
+      },
+    },
+    tooltip: {
+      style: {
+        padding: "0px",
+        fontFamily,
+        fontSize: "14px",
+      },
+      shape: "square",
+      shadow: false,
+      backgroundColor: "transparent",
+      borderColor: "transparent",
+      borderWidth: 0.0,
+      formatter: tooltipFormatter,
+      useHTML: true,
+      shared: true,
+    },
+    legend: {
+      enabled: false,
+    },
+    plotOptions: {
+      series: {
+        borderWidth: 0,
+        borderRadius: 10,
+        stacking: "normal",
+      },
+    },
+    series: data,
+    credits: {
+      enabled: false,
+    },
+  }
+}
+
+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
+}

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 =
@@ -115,8 +115,14 @@ type dataObj<'t> = {
   pointPadding?: float,
 }
 
+type chart = {
+  \"type": string,
+  height: int,
+}
+
 type pieCartData<'t> = array<dataObj<'t>>
 type pieGraphOptions<'t> = {
+  chart: chart,
   accessibility: enabled,
   title?: title,
   plotOptions: plotOptions,

src/components/Graphs/PieGraph/PieGraphUtils.res

@@ -15,6 +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: 55,
     style: {
       fontSize: "14px",
       fontWeight: "400",
@@ -24,6 +25,10 @@ let getPieChartOptions = (pieGraphOptions: pieGraphPayload<'t>) => {
     useHTML: true,
   }
   {
+    chart: {
+      \"type": "pie",
+      height: 270,
+    },
     accessibility: {
       enabled: false, // Disables accessibility features
     },
@@ -60,20 +65,20 @@ let getPieChartOptions = (pieGraphOptions: pieGraphPayload<'t>) => {
     },
     legend: {
       enabled: true, // Ensures the legend is enabled
-      align: "right",
+      align: "left",
       verticalAlign: "middle",
       layout: "vertical",
-      itemMarginBottom: 16,
+      itemMarginBottom: 30,
       symbolRadius: 2,
       labelFormatter: legendFormatter,
     },
   }
 }
 
 let pieGraphColorSeries = [
-  "#BCBD22",
-  "#CB80DC",
   "#72BEF4",
+  "#CB80DC",
+  "#BCBD22",
   "#5CB7AF",
   "#F36960",
   "#9467BD",
@@ -132,13 +137,15 @@ 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
 }
 
 let getCategoryWisePieChartPayload = (
-  data: array<categoryWiseBreakDown>,
+  ~data: array<categoryWiseBreakDown>,
   ~chartSize,
   ~toolTipStyle: toolTipStyle,
   ~showInLegend: bool=true,

src/components/Graphs/StackedBarGraph/StackedBarGraph.res

@@ -0,0 +1,11 @@
+external stackedBarGraphOptionsToJson: StackedBarGraphTypes.stackedBarGraphOptions => JSON.t =
+  "%identity"
+
+@react.component
+let make = (~options: StackedBarGraphTypes.stackedBarGraphOptions, ~className="") => {
+  <div className>
+    <Highcharts.Chart
+      options={options->stackedBarGraphOptionsToJson} highcharts={Highcharts.highcharts}
+    />
+  </div>
+}