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,53 @@
+// 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,
+    },
+  }
+}

src/components/Graphs/PieGraph/PieGraphTypes.res

@@ -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: 50,
     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",
@@ -138,7 +143,7 @@ let pieGraphLegendFormatter = () => {
 }
 
 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>
+}

src/components/Graphs/StackedBarGraph/StackedBarGraphTypes.res

@@ -0,0 +1,119 @@
+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, visible: bool}
+type yAxisTitle = {text: string}
+type style = {
+  color: color,
+  fontFamily: string,
+  fontSize: string,
+}
+type enabled = {enabled: bool}
+type credits = {
+  ...enabled,
+}
+
+type bar = {
+  stacking: string,
+  dataLabels: enabled,
+  borderWidth: int,
+  pointWidth: int,
+  borderRadius: int,
+}
+type plotOptions = {bar: bar}
+type labels = {
+  align: align,
+  style: style,
+}
+type chart = {
+  \"type": \"type",
+  height: int,
+}
+
+type dataObj = {
+  name: name,
+  data: array<float>,
+  color: color,
+}
+
+type data = array<dataObj>
+
+type yAxis = {
+  title: yAxisTitle,
+  visible: bool,
+  stackLabels: enabled,
+}
+
+type xAxis = {
+  categories: categories,
+  visible: bool,
+}
+
+type point = {index: int}
+type pointFormatter = {point: point}
+
+type labelFormatter = {name: string, yData: array<int>}
+
+external asTooltipPointFormatter: Js_OO.Callback.arity1<'a> => pointFormatter => string =
+  "%identity"
+
+external asLabelFormatter: Js_OO.Callback.arity1<'a> => labelFormatter => string = "%identity"
+
+type cssStyle = {
+  fontFamily: string,
+  fontSize: string,
+  padding: string,
+}
+
+type tooltip = {enabled: bool}
+
+type legend = {
+  align: string,
+  verticalAlign: string,
+  floating: bool,
+  x: int,
+  y: int,
+  symbolHeight: int,
+  symbolWidth: int,
+  symbolRadius: int,
+  itemDistance: int,
+  reversed: bool,
+  labelFormatter: labelFormatter => string,
+}
+
+type stackedBarGraphOptions = {
+  chart: chart,
+  title: title,
+  xAxis: xAxis,
+  yAxis: yAxis,
+  plotOptions: plotOptions,
+  series: data,
+  credits: credits,
+  tooltip: tooltip,
+  legend: legend,
+}
+
+type payloadTitle = {text: string}
+
+type stackedBarGraphPayload = {
+  categories: categories,
+  data: data,
+  labelFormatter: labelFormatter => string,
+}