From 6490f38f78507ba6d1700aea1d83a125aecb2a74 Mon Sep 17 00:00:00 2001
From: gitanjli525 <gitanjli525@gmail.com>
Date: Tue, 24 Sep 2024 14:20:33 +0530
Subject: [PATCH] feat: bar graph entity

---
 .../NewAnalytics/Graphs/BarGraph/BarGraph.res | 11 +++
 .../Graphs/BarGraph/BarGraphTypes.res         | 82 +++++++++++++++++++
 .../Graphs/BarGraph/BarGraphUtils.res         | 47 +++++++++++
 3 files changed, 140 insertions(+)
 create mode 100644 src/screens/NewAnalytics/Graphs/BarGraph/BarGraph.res
 create mode 100644 src/screens/NewAnalytics/Graphs/BarGraph/BarGraphTypes.res
 create mode 100644 src/screens/NewAnalytics/Graphs/BarGraph/BarGraphUtils.res

diff --git a/src/screens/NewAnalytics/Graphs/BarGraph/BarGraph.res b/src/screens/NewAnalytics/Graphs/BarGraph/BarGraph.res
new file mode 100644
index 000000000..5448e05f3
--- /dev/null
+++ b/src/screens/NewAnalytics/Graphs/BarGraph/BarGraph.res
@@ -0,0 +1,11 @@
+external barGraphOptionsToJson: BarGraphTypes.barGraphOptions => JSON.t = "%identity"
+@react.component
+let make = (~entity, ~data: JSON.t, ~className="") => {
+  open NewAnalyticsTypes
+  let object = entity.getObjects(data)
+  let options = entity.getChatOptions(object)->barGraphOptionsToJson
+
+  <div className>
+    <Highcharts.Chart options highcharts={Highcharts.highcharts} />
+  </div>
+}
diff --git a/src/screens/NewAnalytics/Graphs/BarGraph/BarGraphTypes.res b/src/screens/NewAnalytics/Graphs/BarGraph/BarGraphTypes.res
new file mode 100644
index 000000000..b4b9b85fc
--- /dev/null
+++ b/src/screens/NewAnalytics/Graphs/BarGraph/BarGraphTypes.res
@@ -0,0 +1,82 @@
+type \"type" = string
+type spacingLeft = int
+type spacingRight = int
+
+type categories = array<string>
+type crosshair = bool
+type barWidth = int
+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 min = int
+type showInLegend = bool
+type name = string
+
+type title = {text: string}
+type style = {color: color}
+type enabled = {enabled: bool}
+type credits = {
+  ...enabled,
+}
+type exporting = {
+  ...enabled,
+}
+type marker = {
+  ...enabled,
+}
+type bar = {marker: marker}
+type plotOptions = {bar: bar}
+type labels = {
+  align: align,
+  style: style,
+}
+type chart = {
+  \"type": \"type",
+  spacingLeft: spacingLeft,
+  spacingRight: spacingRight,
+}
+
+type dataObj = {
+  showInLegend: showInLegend,
+  name: name,
+  data: array<int>,
+  color: color,
+}
+
+type data = array<dataObj>
+
+type yAxis = {
+  title: title,
+  gridLineWidth: gridLineWidth,
+  gridLineColor: gridLineColor,
+  gridLineDashStyle: gridLineDashStyle,
+  tickmarkPlacement: tickmarkPlacement,
+  endOnTick: endOnTick,
+  startOnTick: startOnTick,
+  min: min,
+}
+
+type xAxis = {
+  categories: categories,
+  crosshair: crosshair,
+  barWidth: barWidth,
+  labels: labels,
+  gridLineDashStyle: gridLineDashStyle,
+}
+
+type barGraphOptions = {
+  chart: chart,
+  title: title,
+  xAxis: xAxis,
+  yAxis: yAxis,
+  plotOptions: plotOptions,
+  series: data,
+  credits: credits,
+}
+
+type barGraphPayload = {categories: categories, data: data, title: title}
diff --git a/src/screens/NewAnalytics/Graphs/BarGraph/BarGraphUtils.res b/src/screens/NewAnalytics/Graphs/BarGraph/BarGraphUtils.res
new file mode 100644
index 000000000..ce74b234c
--- /dev/null
+++ b/src/screens/NewAnalytics/Graphs/BarGraph/BarGraphUtils.res
@@ -0,0 +1,47 @@
+open BarGraphTypes
+let getBarGraphOptions = (barGraphOptions: barGraphPayload) => {
+  let {categories, data, title} = barGraphOptions
+  {
+    chart: {
+      \"type": "bar",
+      spacingLeft: 20,
+      spacingRight: 20,
+    },
+    title: {
+      text: "",
+    },
+    xAxis: {
+      categories,
+      crosshair: true,
+      barWidth: 1,
+      labels: {
+        align: "center",
+        style: {
+          color: "#999",
+        },
+      },
+      gridLineDashStyle: "Dash",
+    },
+    yAxis: {
+      title,
+      gridLineWidth: 1,
+      gridLineColor: "#e6e6e6",
+      gridLineDashStyle: "Solid",
+      tickmarkPlacement: "on",
+      endOnTick: false,
+      startOnTick: false,
+      min: 0,
+    },
+    plotOptions: {
+      bar: {
+        marker: {
+          enabled: false,
+        },
+      },
+    },
+    series: data,
+    credits: {
+      enabled: false,
+    },
+  }
+}