Merge pull request #31 from tarkalabs/feat/24108-integration-high-charts

Feat/24108 integration high charts
tarkalabs · Feb 14, 2024 · 2a1a7d5 · 2a1a7d5
2 parents b102a3a + 84e6f2b
commit 2a1a7d5
Show file tree

Hide file tree

Showing 5 changed files with 58 additions and 5 deletions.
diff --git a/README.md b/README.md
@@ -10,6 +10,11 @@ Tarka Chat UI is a plug and play javascript library to integrate a chat assistan
  ```
  <script src="https://d1fmfone96g0x2.cloudfront.net/tarka-chat-2.0.2.umd.js"></script>
  ```
+  Include highcharts library to generate charts by highcharts
+  ```
+  <script src="https://code.highcharts.com/highcharts.js"></script>
+  <script src="https://code.highcharts.com/modules/exporting.js"></script>
+  ```
 
 
 2. Initialise the global `TarkaChat` component with options in any script tag
@@ -80,7 +85,13 @@ where,
       "name": "IMAGE_NAME",
     }
   ```
-
+  - _HighCharts config type:_
+  ```
+    {
+      "type": "highchart-config", 
+      "high_chart_config": { highcharts_config_obj }
+    }
+  ```
   3. _Array containing one/multiple of above mentioned types:_
      E.g.
 
@@ -98,7 +109,6 @@ where,
   ]
   ```
 
-
 ## Demo
 
 Demo is deployed from the application code in `demo/` folder.

diff --git a/demo/index.html b/demo/index.html
@@ -12,6 +12,8 @@
       }
     </style>
 
+    <script src="https://code.highcharts.com/highcharts.js"></script>
+    <script src="https://code.highcharts.com/modules/exporting.js"></script>
     <!-- Include this javscript -->
     <script src="https://d1fmfone96g0x2.cloudfront.net/tarka-chat-2.0.2.umd.js"></script>
   </head>

diff --git a/dev/index.html b/dev/index.html
@@ -3,6 +3,8 @@
   <head>
     <meta charset="UTF-8" />
     <meta name="viewport" content="width=device-width, initial-scale=1.0" />
+    <script src="https://code.highcharts.com/highcharts.js"></script>
+    <script src="https://code.highcharts.com/modules/exporting.js"></script>
     <title>TarkaChat DevMode</title>
   </head>
   <body>

diff --git a/src/main.js b/src/main.js
@@ -8,6 +8,29 @@ import downloadImg from "./images/download.png";
 
 const INITIAL_STATE = false;
 
+
+Highcharts.setOptions({
+  credits: {
+    enabled: false
+  },
+  title:{
+    style: {
+      fontSize: '12px',
+      fontWeight: 'normal',
+    }
+  },
+  plotOptions: {
+    series: {
+        dataLabels: {
+            style: {
+                fontSize: '10px',
+                fontWeight: 'normal'
+            }
+        }
+    }
+  },
+});  
+
 function loadLottie(element) {
   const animation = lottie.loadAnimation({
     container: element,
@@ -155,7 +178,6 @@ export default {
             </a>
           </div>`;
         return this.createNode("attachment", nodeContent);
-
       case "image":
         this.validateFieldPresent('link', data);
         const imageContent = `
@@ -164,8 +186,12 @@ export default {
               <img src="${downloadImg}" alt="Download Button" width="24" height="24">
         </a>
         `;
-        return this.createNode("image-container", imageContent);
-
+        return this.createNode("image-container", imageContent);  
+      case "highchart-config":
+        this.validateFieldPresent('high_chart_config', data);
+        let ele = this.createNode("high-chart-container");
+        Highcharts.chart(ele,data.high_chart_config);
+        return ele;
       default:
         throw new Error(`Invalid type: ${type}`);
     }

diff --git a/src/style.scss b/src/style.scss
@@ -123,6 +123,19 @@
             }
           }
 
+          .high-chart-container {
+            width: 110%;
+            height: 300px;
+            position: relative;
+            border: 1px solid var(--primary-primary-subtle, #f0dafb); /* Set border color as needed */
+            border-radius: 15px;
+            margin: 4px 0;
+
+            .highcharts-button-box {
+              fill: var(--primary-primary-subtle, #f0dafb) !important;
+            }
+          }
+
           .image-container {
             position: relative;
             border: 1px solid var(--primary-primary-subtle, #f0dafb); /* Set border color as needed */