Updated examples and package

.npmignore

@@ -8,3 +8,18 @@
 # Lock File
 yarn.lock
 package.lock.json
+examples
+test
+jest.config.js
+yarn-error.log
+.eslintrc.js
+.prettierrc.js
+.stylelintrc.js
+.babelrc
+.eslintignore
+.prettierignore
+.stylelintignore
+.gitignore
+.gitattributes
+.editorconfig
+.env

examples/line-chart-example/package.json

@@ -3,16 +3,16 @@
   "version": "0.1.0",
   "private": true,
   "dependencies": {
-    "@cubetiq/react-chart-js": "^1.0.0",
+    "@cubetiq/react-chart-js": "^1.1.9",
     "@testing-library/jest-dom": "^4.2.4",
     "@testing-library/react": "^9.3.2",
     "@testing-library/user-event": "^7.1.2",
     "@types/jest": "^24.0.0",
     "@types/node": "^12.0.0",
-    "@types/react": "^16.9.0",
-    "@types/react-dom": "^16.9.0",
-    "react": "^16.14.0",
-    "react-dom": "^16.14.0",
+    "@types/react": "^17.0.2",
+    "@types/react-dom": "^17.0.2",
+    "react": "^17.0.2",
+    "react-dom": "^17.0.2",
     "react-scripts": "3.4.3",
     "typescript": "~3.7.2"
   },

examples/line-chart-example/src/LineChartExample.tsx

@@ -5,38 +5,17 @@ function LineChartExample(props: any) {
     return (
         <ReactChartJs
             chartConfig={{
-                type: 'line',
-                options: {
-                    responsive: true,
-                    title: {
-                        display: true,
-                        text: 'Monthly Payments',
-                    },
-                    tooltips: {
-                        mode: 'index',
-                        intersect: false,
-                    },
-                    hover: {
-                        mode: 'nearest',
-                        intersect: true,
-                    },
-                },
+                type: 'pie',
                 data: {
+                    labels: ['Red', 'Blue', 'Yellow'],
                     datasets: [
                         {
-                            label: 'Part-time',
-                            data: [5, 10, 30],
-                            fill: false,
-                            borderColor: '#ff6384',
-                        },
-                        {
-                            label: 'Full-time',
-                            data: [10, 15, 45],
-                            fill: false,
-                            borderColor: '#36a2eb',
+                            label: 'My First Dataset',
+                            data: [300, 50, 100],
+                            backgroundColor: ['rgb(255, 99, 132)', 'rgb(54, 162, 235)', 'rgb(255, 205, 86)'],
+                            hoverOffset: 4,
                         },
                     ],
-                    labels: ['Jan', 'Feb', 'Mar'],
                 },
             }}
         />

package.json

@@ -1,6 +1,6 @@
 {
     "name": "@cubetiq/react-chart-js",
-    "version": "1.1.5",
+    "version": "1.1.9",
     "description": "Chart.js for React and TypeScript",
     "main": "./dist/index.js",
     "types": "./dist/index.d.ts",
@@ -30,7 +30,7 @@
     "scripts": {
         "build": "tsc",
         "test": "jest",
-        "pub": "npm publish --access public",
+        "pub": "npm publish --access public --registry https://registry.npmjs.org",
         "build:test": "yarn jest && yarn build",
         "run:example": "cd examples/line-chart-example && yarn start"
     },
@@ -41,7 +41,7 @@
         "@types/chart.js": "^2.9.25",
         "@types/jest": "^26.0.10",
         "@types/node": "^14.6.1",
-        "@types/react": "^16.9.52",
+        "@types/react": "^17.0.34",
         "@typescript-eslint/eslint-plugin": "^3.10.1",
         "@typescript-eslint/parser": "^3.10.1",
         "babel-jest": "^26.3.0",
@@ -52,10 +52,10 @@
         "jest": "^26.4.2",
         "lint-staged": "^10.2.13",
         "prettier": "^2.1.1",
-        "react": "^16.14.0",
+        "react": "^17.0.2",
         "ts-jest": "^26.3.0",
         "tsc": "^1.20150623.0",
-        "typescript": "^4.0.2"
+        "typescript": "^4.4.4"
     },
     "husky": {
         "hooks": {
@@ -71,6 +71,6 @@
         ]
     },
     "dependencies": {
-        "chart.js": "^2.9.3"
+        "chart.js": "^3.6.0"
     }
 }

src/ReactChartJs.tsx

@@ -1,8 +1,13 @@
-import { Chart, ChartConfiguration } from 'chart.js';
+import Chart from 'chart.js/auto';
+import { ChartConfiguration } from 'chart.js';
 import React, { FunctionComponent, useEffect, useRef } from 'react';
 
 interface ReactChartJSProps {
-    chartConfig?: ChartConfiguration;
+    chartConfig: ChartConfiguration;
+    width?: number;
+    height?: number;
+    containerProps?: any;
+    canvasProps?: any;
 }
 
 interface RefForChartInstance {
@@ -10,7 +15,7 @@ interface RefForChartInstance {
 }
 
 const ReactChartJs: FunctionComponent<ReactChartJSProps> = (props: any) => {
-    const { chartConfig } = props;
+    const { chartConfig, containerProps, canvasProps } = props;
 
     const canvasDomRef = useRef<HTMLCanvasElement>();
 
@@ -27,13 +32,14 @@ const ReactChartJs: FunctionComponent<ReactChartJSProps> = (props: any) => {
     }, [chartConfig]);
 
     return (
-        <div>
+        <div {...containerProps}>
             <canvas
                 ref={(instance: any) => {
                     canvasDomRef.current = instance!;
                 }}
-                width="400"
-                height="200"
+                width={props.width || 'auto'}
+                height={props.height || 'auto'}
+                {...canvasProps}
             />
         </div>
     );