From 1b7595f94565cac1eebf2aa0c3d3adddd164ac4b Mon Sep 17 00:00:00 2001 From: Ganpat kakar Date: Tue, 12 Dec 2023 10:21:48 -0800 Subject: [PATCH] start code deployment process using github pages --- .github/workflows/chromatic.yml | 26 +++++++ .../workflows/github-pages.yml | 10 +-- website/.github/workflows/chromatic.yml | 26 ------- website/src/App.tsx | 4 +- website/src/testChart.tsx | 72 +++++++++---------- 5 files changed, 68 insertions(+), 70 deletions(-) create mode 100644 .github/workflows/chromatic.yml rename {website/.github => .github}/workflows/github-pages.yml (69%) delete mode 100644 website/.github/workflows/chromatic.yml diff --git a/.github/workflows/chromatic.yml b/.github/workflows/chromatic.yml new file mode 100644 index 00000000..a30692fd --- /dev/null +++ b/.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 }} diff --git a/website/.github/workflows/github-pages.yml b/.github/workflows/github-pages.yml similarity index 69% rename from website/.github/workflows/github-pages.yml rename to .github/workflows/github-pages.yml index 7e80a35d..be5f2b45 100644 --- a/website/.github/workflows/github-pages.yml +++ b/.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 diff --git a/website/.github/workflows/chromatic.yml b/website/.github/workflows/chromatic.yml deleted file mode 100644 index f3a1d0fa..00000000 --- a/website/.github/workflows/chromatic.yml +++ /dev/null @@ -1,26 +0,0 @@ -# .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 }} diff --git a/website/src/App.tsx b/website/src/App.tsx index 04c0cd1a..d3b67128 100644 --- a/website/src/App.tsx +++ b/website/src/App.tsx @@ -1,11 +1,11 @@ import React from "react"; -import { MultiBarChart } from './testChart'; +import { MeterChart } from './testChart'; function App() { return ( <> - + ); } diff --git a/website/src/testChart.tsx b/website/src/testChart.tsx index 8dc24e3d..ecb359e9 100644 --- a/website/src/testChart.tsx +++ b/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 ( <> -
+
); }