From 942005f2e9ca595a170017bdf650325c04817105 Mon Sep 17 00:00:00 2001
From: Sambo Chea <sombochea@cubetiqs.com>
Date: Thu, 15 Oct 2020 12:18:07 +0700
Subject: [PATCH] updated and add bar chart example and readme

---
 README.md                              | 16 +++++-
 src/demos/BarChart/BarChartExample.tsx | 14 +++++
 src/demos/BarChart/index.ts            |  1 +
 src/demos/ChartProps.d.ts              |  3 +
 src/stories/BarChartDemo.tsx           | 77 ++++++++++++++++++++++++++
 src/stories/Chart.stories.tsx          | 15 +++--
 src/stories/LineChartDemo.tsx          |  5 +-
 7 files changed, 122 insertions(+), 9 deletions(-)
 create mode 100644 src/demos/BarChart/BarChartExample.tsx
 create mode 100644 src/demos/BarChart/index.ts
 create mode 100644 src/demos/ChartProps.d.ts
 create mode 100644 src/stories/BarChartDemo.tsx

diff --git a/README.md b/README.md
index 806d94f..33d9505 100644
--- a/README.md
+++ b/README.md
@@ -1,2 +1,16 @@
 # Chart.js Demos
-- Line Chart Example
\ No newline at end of file
+
+**Install**
+
+Using NPM
+```shell
+npm install @cubetiq/react-chart-js
+```
+
+OR using Yarn
+```shell
+yarn add @cubetiq/react-chart-js
+```
+
+- Line Chart Example
+- Bar Chart Example
\ No newline at end of file
diff --git a/src/demos/BarChart/BarChartExample.tsx b/src/demos/BarChart/BarChartExample.tsx
new file mode 100644
index 0000000..d89dc70
--- /dev/null
+++ b/src/demos/BarChart/BarChartExample.tsx
@@ -0,0 +1,14 @@
+import React from 'react';
+import { ReactChartJs } from '@cubetiq/react-chart-js';
+
+function BarChartExample(props: any) {
+    const { chartConfig } = props
+
+    return (
+        <ReactChartJs
+            chartConfig={chartConfig}
+        />
+    );
+}
+
+export default BarChartExample;
diff --git a/src/demos/BarChart/index.ts b/src/demos/BarChart/index.ts
new file mode 100644
index 0000000..8c23d9b
--- /dev/null
+++ b/src/demos/BarChart/index.ts
@@ -0,0 +1 @@
+export { default as BarChart } from './BarChartExample'
diff --git a/src/demos/ChartProps.d.ts b/src/demos/ChartProps.d.ts
new file mode 100644
index 0000000..ac86025
--- /dev/null
+++ b/src/demos/ChartProps.d.ts
@@ -0,0 +1,3 @@
+export interface ChartProps {
+  chartConfig?: object;
+}
diff --git a/src/stories/BarChartDemo.tsx b/src/stories/BarChartDemo.tsx
new file mode 100644
index 0000000..57e0e52
--- /dev/null
+++ b/src/stories/BarChartDemo.tsx
@@ -0,0 +1,77 @@
+import React from "react";
+import { ChartProps } from "../demos/ChartProps";
+import { LineChart } from "../demos/LineChart";
+import "./chart.css";
+
+/**
+ * Primary UI component for user interaction
+ */
+export const BarChartDemo: React.FC<ChartProps> = ({
+  chartConfig = {
+    type: "bar",
+    options: {
+      responsive: true,
+      title: {
+        display: true,
+        text: "Monthly Payments",
+      },
+      tooltips: {
+        mode: "index",
+        intersect: false,
+      },
+      hover: {
+        mode: "nearest",
+        intersect: true,
+      },
+      scales: {
+        yAxes: [
+          {
+            ticks: {
+              beginAtZero: true,
+            },
+          },
+        ],
+      },
+    },
+    data: {
+      datasets: [
+        {
+          label: "Part-time",
+          data: [5, 10, 30],
+          fill: false,
+          borderColor: [
+            "rgba(255, 99, 132, 1)",
+            "rgba(54, 162, 235, 1)",
+            "rgba(255, 206, 86, 1)",
+          ],
+          backgroundColor: [
+            "rgba(255, 99, 132, 0.2)",
+            "rgba(54, 162, 235, 0.2)",
+            "rgba(255, 206, 86, 0.2)",
+          ],
+          borderWidth: 1,
+        },
+        {
+          label: "Full-time",
+          data: [10, 15, 45],
+          fill: false,
+          borderColor: [
+            "rgba(75, 192, 192, 1)",
+            "rgba(153, 102, 255, 1)",
+            "rgba(255, 159, 64, 1)",
+          ],
+          backgroundColor: [
+            "rgba(75, 192, 192, 0.2)",
+            "rgba(153, 102, 255, 0.2)",
+            "rgba(255, 159, 64, 0.2)",
+          ],
+          borderWidth: 1,
+        },
+      ],
+      labels: ["Jan", "Feb", "Mar"],
+    },
+  },
+  ...props
+}) => {
+  return <LineChart chartConfig={chartConfig} />;
+};
diff --git a/src/stories/Chart.stories.tsx b/src/stories/Chart.stories.tsx
index cd2e872..5757b28 100644
--- a/src/stories/Chart.stories.tsx
+++ b/src/stories/Chart.stories.tsx
@@ -1,7 +1,9 @@
 import React from "react";
 import { Story, Meta } from "@storybook/react/types-6-0";
 
-import { LineChartDemo, ChartProps } from "./LineChartDemo";
+import { LineChartDemo } from "./LineChartDemo";
+import { BarChartDemo } from "./BarChartDemo";
+import { ChartProps } from "../demos/ChartProps";
 
 export default {
   title: "Example/Chart",
@@ -9,7 +11,12 @@ export default {
   argTypes: {},
 } as Meta;
 
-const Template: Story<ChartProps> = (args) => <LineChartDemo />;
+const LineChartDemoTemplate: Story<ChartProps> = (args) => <LineChartDemo />;
 
-export const LineChart = Template.bind({});
-LineChart.args = {};
\ No newline at end of file
+const BarChartDemoTemplate: Story<ChartProps> = (args) => <BarChartDemo />;
+
+export const LineChart = LineChartDemoTemplate.bind({});
+LineChart.args = { };
+
+export const BarChart = BarChartDemoTemplate.bind({});
+BarChart.args = { };
\ No newline at end of file
diff --git a/src/stories/LineChartDemo.tsx b/src/stories/LineChartDemo.tsx
index a5465d4..4ef0598 100644
--- a/src/stories/LineChartDemo.tsx
+++ b/src/stories/LineChartDemo.tsx
@@ -1,11 +1,8 @@
 import React from "react";
+import { ChartProps } from "../demos/ChartProps";
 import { LineChart } from "../demos/LineChart";
 import "./chart.css";
 
-export interface ChartProps {
-  chartConfig?: any;
-}
-
 /**
  * Primary UI component for user interaction
  */