start code deployment process using github pages

.github/workflows/chromatic.yml

@@ -0,0 +1,26 @@
+## .github/workflows/chromatic.yml
+#
+## Workflow name
+#name: "Chromatic"
+#
+## Event for the workflow
+#on: push
+#
+## List of jobs
+#jobs:
+#  chromatic-deployment:
+#    # Operating System
+#    runs-on: ubuntu-latest
+#    # Job steps
+#    steps:
+#      - uses: actions/checkout@v1
+#      - name: Install dependencies
+#        # 👇 Install dependencies with the same package manager used in the project (replace it as needed), e.g. yarn, npm, pnpm
+#        run: yarn
+#        # 👇 Adds Chromatic as a step in the workflow
+#      - name: Publish to Chromatic
+#        uses: chromaui/action@v1
+#        # Chromatic GitHub Action options
+#        with:
+#          # 👇 Chromatic projectToken, refer to the manage page to obtain it.
+#          projectToken: ${{ secrets.CHROMATIC_PROJECT_TOKEN }}

website/.github/workflows/github-pages.yml → .github/workflows/github-pages.yml

@@ -1,8 +1,8 @@
 name: Build and Deploy
-on:
-  push:
-#    paths: [ "src/stories/**" ] # Trigger the action only when files change in the folders defined here
-    paths: [ "src/**" ] # Trigger the action only when files change in the folders defined here
+on: push
+defaults:
+  run:
+    working-directory: website
 jobs:
   build-and-deploy:
     runs-on: ubuntu-latest
@@ -19,7 +19,7 @@ jobs:
         uses: JamesIves/github-pages-deploy-action@v4
         with:
           token: ${{ secrets.GITHUB_TOKEN }}
-          branch: main
+          branch: master
           folder: docs-build
           clean: true
           target-folder: docs

website/src/App.tsx

@@ -1,11 +1,11 @@
 import React from "react";
-import { MultiBarChart } from './testChart';
+import { MeterChart } from './testChart';
 
 function App() {
 
   return (
     <>
-        <MultiBarChart />
+        <MeterChart />
     </>
   );
 }

website/src/testChart.tsx

@@ -1,54 +1,52 @@
 import React, { useEffect } from "react";
-import {GkColumnChart} from 'gk-chart';
-import {datapoints, datapoints1, datapoints2, datapoints3} from './data';
+import {GkMeterChart} from 'gk-chart';
 
-const chartMultiColumn = {
+
+const meterData = {
     "config": {
-        "title": "Multi Column Chart Comparision",
-        "chartType": 'column-chart',
+        "title": "Meter Gauge Chart",
+        "chartType": "meter-chart",
         "printEnable": true
     },
-    yaxis : {
-        min : 0,
-        numOfRows : 5,
-        title : "Hours"
-    },
-    "data": [
-        {
-            chartColor: "#5d62b5",
-            dataLabel: "Data Set 1",
-            datapoints: datapoints
-        },
-        {
-            chartColor: "#29c3be",
-            dataLabel: "Data Set 2",
-            datapoints: datapoints1
-        },
-        {
-            chartColor: "#ff00dd",
-            dataLabel: "Data Set 3",
-            datapoints: datapoints2
-        },
-        {
-            chartColor: "#f2726f",
-            dataLabel: "Data Set 4",
-            datapoints: datapoints3
-        }
-    ]
+    "data": [ /*Give as required data in given formate, syntax error with json will cause of error in charts*/ {
+        "chartColor": "#29c3be",
+        "datapoints": [{
+            "label": "Poor",
+            "y": 50,
+            "color": "#29c3be"
+        }, {
+            "label": "Blw Avg",
+            "y": 25,
+            "color": "#29c3be"
+        }, {
+            "label": "Average",
+            "y": 25,
+            "color": "#00ff00"
+        }, {
+            "label": "Abv Avg",
+            "y": 35,
+            "color": "#00ff00"
+        }, {
+            "label": "Exceed",
+            "y": 10,
+            "color": "#00ff00"
+        }],
+        dataval: 77
+    }]
 };
 
-export const MultiBarChart = () => {
+export const MeterChart = () => {
 
     useEffect(() => {
-        GkColumnChart({
-            id: "multiBarChart",
-            data: chartMultiColumn
+        GkMeterChart({
+            id: "meterChartId",
+            data: meterData
         })
     }, []);
 
     return (
         <>
-            <div id="multiBarChart" style={{width: "100%", height: "500px"}} />
+            <div id="meterChartId" style={{width: "100%", height: "400px"}}/>
         </>
     );
 }