diff --git a/.clean-publish b/.clean-publish new file mode 100644 index 00000000..4978ed22 --- /dev/null +++ b/.clean-publish @@ -0,0 +1,3 @@ +{ + "packageManager": "yarn" +} diff --git a/.github/dependabot.yml b/.github/dependabot.yml new file mode 100644 index 00000000..4872c5af --- /dev/null +++ b/.github/dependabot.yml @@ -0,0 +1,7 @@ +version: 2 +updates: +- package-ecosystem: npm + directory: "/" + schedule: + interval: daily + open-pull-requests-limit: 10 diff --git a/.github/workflows/checks.yml b/.github/workflows/checks.yml new file mode 100644 index 00000000..44b5830e --- /dev/null +++ b/.github/workflows/checks.yml @@ -0,0 +1,19 @@ +name: Checks +on: + pull_request: + branches: + - master +jobs: + size: + runs-on: ubuntu-latest + name: Checking size + if: "!contains(github.event.head_commit.message, '[ci skip]')" + env: + CI_JOB_NUMBER: 1 + steps: + - name: Checkout the repository + uses: actions/checkout@v2 + - name: Check size + uses: andresz1/size-limit-action@v1 + with: + github_token: ${{ secrets.GITHUB_TOKEN }} diff --git a/.size-limit b/.size-limit new file mode 100644 index 00000000..7b670c76 --- /dev/null +++ b/.size-limit @@ -0,0 +1,24 @@ +[ + { + "path": "dist/index.cjs", + "limit": "5.9 KB", + "webpack": false, + "running": false + }, + { + "path": "dist/index.cjs", + "limit": "4.7 KB", + "import": "{ Chart }" + }, + { + "path": "dist/index.mjs", + "limit": "5.7 KB", + "webpack": false, + "running": false + }, + { + "path": "dist/index.mjs", + "limit": "4.5 KB", + "import": "{ Chart }" + } +] diff --git a/.storybook/main.js b/.storybook/main.js new file mode 100644 index 00000000..9e06c36f --- /dev/null +++ b/.storybook/main.js @@ -0,0 +1,14 @@ +const path = require('path'); + +module.exports = { + stories: ['../stories/*.tsx'], + addons: [ + '@storybook/addon-docs', + '@storybook/addon-controls', + '@storybook/addon-actions', + ], + webpackFinal(config) { + config.resolve.alias['react-google-charts'] = path.resolve(__dirname, '../src'); + return config; + }, +}; diff --git a/.storybook/manager.js b/.storybook/manager.js new file mode 100644 index 00000000..d64c248b --- /dev/null +++ b/.storybook/manager.js @@ -0,0 +1,8 @@ +import { addons } from '@storybook/addons'; + +import { theme } from './theme'; + +addons.setConfig({ + theme, + panelPosition: 'right', +}); diff --git a/.storybook/preview.js b/.storybook/preview.js new file mode 100644 index 00000000..0578373f --- /dev/null +++ b/.storybook/preview.js @@ -0,0 +1,5 @@ +import { configureActions } from '@storybook/addon-actions'; + +configureActions({ + depth: 5, +}); diff --git a/.storybook/theme.js b/.storybook/theme.js new file mode 100644 index 00000000..44b5db26 --- /dev/null +++ b/.storybook/theme.js @@ -0,0 +1,7 @@ +import { create } from '@storybook/theming'; + +export const theme = create({ + base: 'light', + brandTitle: 'react-google-charts', + brandUrl: 'https://github.com/rakannimer/react-google-charts', +}); diff --git a/README.md b/README.md index 1524362d..837fd8d7 100644 --- a/README.md +++ b/README.md @@ -238,163 +238,163 @@ export default ExampleChart; #### Area Chart - [Demo](https://react-google-charts.com/area-chart) -- [Sandbox](https://codesandbox.io/s/github/rakannimer/react-google-charts/tree/master/sandboxes/area-chart) -- [Raw Code](./sandboxes/area-chart/index.js) +- [Sandbox](https://codesandbox.io/s/github/rakannimer/react-google-charts/tree/master/sandboxes/area-chart?file=/App.tsx) +- [Raw Code](./sandboxes/area-chart/App.tsx) #### Bar Chart - [Demo](https://react-google-charts.com/bar-chart) -- [Code](./sandboxes/bar-chart/index.js) -- [Sandbox](https://codesandbox.io/s/github/rakannimer/react-google-charts/tree/master/sandboxes/bar-chart) +- [Code](./sandboxes/bar-chart/App.tsx) +- [Sandbox](https://codesandbox.io/s/github/rakannimer/react-google-charts/tree/master/sandboxes/bar-chart?file=/App.tsx) #### Bubble Chart - [Demo](https://react-google-charts.com/bubble-chart) -- [Code](./sandboxes/bubble-chart/index.js) -- [Sandbox](https://codesandbox.io/s/github/rakannimer/react-google-charts/tree/master/sandboxes/bubble-chart) +- [Code](./sandboxes/bubble-chart/App.tsx) +- [Sandbox](https://codesandbox.io/s/github/rakannimer/react-google-charts/tree/master/sandboxes/bubble-chart?file=/App.tsx) #### Calendar Chart - [Demo](https://react-google-charts.com/calendar-chart) -- [Code](./sandboxes/calendar/index.js) -- [Sandbox](https://codesandbox.io/s/github/rakannimer/react-google-charts/tree/master/sandboxes/calendar) +- [Code](./sandboxes/calendar/App.tsx) +- [Sandbox](https://codesandbox.io/s/github/rakannimer/react-google-charts/tree/master/sandboxes/calendar?file=/App.tsx) #### Candlestick Chart - [Demo](https://react-google-charts.com/candleStick-chart) -- [Code](./sandboxes/candlestick/index.js) -- [Sandbox](https://codesandbox.io/s/github/rakannimer/react-google-charts/tree/master/sandboxes/candlestick) +- [Code](./sandboxes/candlestick-chart/App.tsx) +- [Sandbox](https://codesandbox.io/s/github/rakannimer/react-google-charts/tree/master/sandboxes/candlestick-chart?file=/App.tsx) #### Column Chart -- [Code](./sandboxes/column-chart/index.js) -- [Sandbox](https://codesandbox.io/s/github/rakannimer/react-google-charts/tree/master/sandboxes/column-chart) +- [Code](./sandboxes/column-chart/App.tsx) +- [Sandbox](https://codesandbox.io/s/github/rakannimer/react-google-charts/tree/master/sandboxes/column-chart?file=/App.tsx) #### Diff Scatter Chart - [Demo](https://react-google-charts.com/diff-chart) -- [Code](./sandboxes/diff-scatter-chart/index.js) -- [Sandbox](https://codesandbox.io/s/github/rakannimer/react-google-charts/tree/master/sandboxes/diff-scatter-chart) +- [Code](./sandboxes/scatter-chart-diff/App.tsx) +- [Sandbox](https://codesandbox.io/s/github/rakannimer/react-google-charts/tree/master/sandboxes/scatter-chart-diff?file=/App.tsx) #### Diff Column Chart - [Demo](https://react-google-charts.com/diff-chart#diff-column-charts) -- [Code](./sandboxes/diff-column-chart/index.js) -- [Sandbox](https://codesandbox.io/s/github/rakannimer/react-google-charts/tree/master/sandboxes/diff-column-chart) +- [Code](./sandboxes/column-chart-diff/App.tsx) +- [Sandbox](https://codesandbox.io/s/github/rakannimer/react-google-charts/tree/master/sandboxes/column-chart-diff?file=/App.tsx) #### Donut Chart -- [Code](./sandboxes/donut-chart/index.js) -- [Sandbox](https://codesandbox.io/s/github/rakannimer/react-google-charts/tree/master/sandboxes/donut-chart) +- [Code](./sandboxes/pie-chart-donut/App.tsx) +- [Sandbox](https://codesandbox.io/s/github/rakannimer/react-google-charts/tree/master/sandboxes/pie-chart-donut?file=/App.tsx) #### Gantt Chart - [Demo](https://react-google-charts.com/gantt-chart) -- [Code](./sandboxes/gantt-chart/index.js) -- [Sandbox](https://codesandbox.io/s/github/rakannimer/react-google-charts/tree/master/sandboxes/gantt-chart) +- [Code](./sandboxes/gantt/App.tsx) +- [Sandbox](https://codesandbox.io/s/github/rakannimer/react-google-charts/tree/master/sandboxes/gantt?file=/App.tsx) #### Gauge Chart - [Demo](https://react-google-charts.com/gauge-chart) -- [Code](./sandboxes/gauge/index.js) -- [Sandbox](https://codesandbox.io/s/github/rakannimer/react-google-charts/tree/master/sandboxes/gauge) +- [Code](./sandboxes/gauge/App.tsx) +- [Sandbox](https://codesandbox.io/s/github/rakannimer/react-google-charts/tree/master/sandboxes/gauge?file=/App.tsx) #### Geo Chart - [Demo](https://react-google-charts.com/geo-chart) -- [Code](./sandboxes/geo-chart/index.js) -- [Sandbox](https://codesandbox.io/s/github/rakannimer/react-google-charts/tree/master/sandboxes/geo-chart) +- [Code](./sandboxes/geo-chart/App.tsx) +- [Sandbox](https://codesandbox.io/s/github/rakannimer/react-google-charts/tree/master/sandboxes/geo-chart?file=/App.tsx) #### Histogram Chart - [Demo](https://react-google-charts.com/histogram-chart) -- [Code](./sandboxes/histogram/index.js) -- [Sandbox](https://codesandbox.io/s/github/rakannimer/react-google-charts/tree/master/sandboxes/histogram) +- [Code](./sandboxes/histogram/App.tsx) +- [Sandbox](https://codesandbox.io/s/github/rakannimer/react-google-charts/tree/master/sandboxes/histogram?file=/App.tsx) #### Line Chart - [Demo](https://react-google-charts.com/line-chart) -- [Code](./sandboxes/linechart/index.js) -- [Sandbox](https://codesandbox.io/s/github/rakannimer/react-google-charts/tree/master/sandboxes/linechart) +- [Code](./sandboxes/line-chart/App.tsx) +- [Sandbox](https://codesandbox.io/s/github/rakannimer/react-google-charts/tree/master/sandboxes/line-chart?file=/App.tsx) #### Material Bar Chart - [Demo](https://react-google-charts.com/bar-chart#material-design) -- [Code](./sandboxes/material-bar-chart/index.js) -- [Sandbox](https://codesandbox.io/s/github/rakannimer/react-google-charts/tree/master/sandboxes/material-bar-chart) +- [Code](./sandboxes/bar/App.tsx) +- [Sandbox](https://codesandbox.io/s/github/rakannimer/react-google-charts/tree/master/sandboxes/bar?file=/App.tsx) #### Material Line Chart - [Demo](https://react-google-charts.com/line-chart#material-design-linechart) -- [Code](./sandboxes/material-line-chart/index.js) -- [Sandbox](https://codesandbox.io/s/github/rakannimer/react-google-charts/tree/master/sandboxes/material-line-chart) +- [Code](./sandboxes/line/App.tsx) +- [Sandbox](https://codesandbox.io/s/github/rakannimer/react-google-charts/tree/master/sandboxes/line?file=/App.tsx) #### Org Chart - [Demo](https://react-google-charts.com/org-chart) -- [Code](./sandboxes/org-chart/index.js) -- [Sandbox](https://codesandbox.io/s/github/rakannimer/react-google-charts/tree/master/sandboxes/org-chart) +- [Code](./sandboxes/org-chart/App.tsx) +- [Sandbox](https://codesandbox.io/s/github/rakannimer/react-google-charts/tree/master/sandboxes/org-chart?file=/App.tsx) #### Pie Chart - [Demo](https://react-google-charts.com/pie-chart) -- [Code](./sandboxes/pie-chart/index.js) -- [Sandbox](https://codesandbox.io/s/github/rakannimer/react-google-charts/tree/master/sandboxes/pie-chart) +- [Code](./sandboxes/pie-chart/App.tsx) +- [Sandbox](https://codesandbox.io/s/github/rakannimer/react-google-charts/tree/master/sandboxes/pie-chart?file=/App.tsx) #### Sankey Chart - [Demo](https://react-google-charts.com/sankey-diagram) -- [Code](./sandboxes/sankey/index.js) -- [Sandbox](https://codesandbox.io/s/github/rakannimer/react-google-charts/tree/master/sandboxes/sankey) +- [Code](./sandboxes/sankey/App.tsx) +- [Sandbox](https://codesandbox.io/s/github/rakannimer/react-google-charts/tree/master/sandboxes/sankey?file=/App.tsx) #### Scatter Chart - [Demo](https://react-google-charts.com/scatter-chart) -- [Code](./sandboxes/scatter-chart/index.js) -- [Sandbox](https://codesandbox.io/s/github/rakannimer/react-google-charts/tree/master/sandboxes/scatter-chart) +- [Code](./sandboxes/scatter-chart/App.tsx) +- [Sandbox](https://codesandbox.io/s/github/rakannimer/react-google-charts/tree/master/sandboxes/scatter-chart?file=/App.tsx) #### Stepped Area Chart - [Demo](https://react-google-charts.com/stepped-area-chart) -- [Code](./sandboxes/stepped-area-chart/index.js) -- [Sandbox](https://codesandbox.io/s/github/rakannimer/react-google-charts/tree/master/sandboxes/stepped-area-chart) +- [Code](./sandboxes/stepped-area-chart/App.tsx) +- [Sandbox](https://codesandbox.io/s/github/rakannimer/react-google-charts/tree/master/sandboxes/stepped-area-chart?file=/App.tsx) #### Table Chart - [Demo](https://react-google-charts.com/table-chart) -- [Code](./sandboxes/table/index.js) -- [Sandbox](https://codesandbox.io/s/github/rakannimer/react-google-charts/tree/master/sandboxes/table) +- [Code](./sandboxes/table/App.tsx) +- [Sandbox](https://codesandbox.io/s/github/rakannimer/react-google-charts/tree/master/sandboxes/table?file=/App.tsx) #### Timeline Chart - [Demo](https://react-google-charts.com/timeline-chart) -- [Code](./sandboxes/timeline/index.js) -- [Sandbox](https://codesandbox.io/s/github/rakannimer/react-google-charts/tree/master/sandboxes/timeline) +- [Code](./sandboxes/timeline/App.tsx) +- [Sandbox](https://codesandbox.io/s/github/rakannimer/react-google-charts/tree/master/sandboxes/timeline?file=/App.tsx) #### Treemap Chart - [Demo](https://react-google-charts.com/treemap-chart) -- [Code](./sandboxes/treemap/index.js) -- [Sandbox](https://codesandbox.io/s/github/rakannimer/react-google-charts/tree/master/sandboxes/treemap) +- [Code](./sandboxes/tree-map/App.tsx) +- [Sandbox](https://codesandbox.io/s/github/rakannimer/react-google-charts/tree/master/sandboxes/tree-map?file=/App.tsx) #### Waterfall Chart -- [Code](./sandboxes/waterfall/index.js) -- [Sandbox](https://codesandbox.io/s/github/rakannimer/react-google-charts/tree/master/sandboxes/waterfall) +- [Code](./sandboxes/candlestick-chart-waterfall/App.tsx) +- [Sandbox](https://codesandbox.io/s/github/rakannimer/react-google-charts/tree/master/sandboxes/candlestick-chart-waterfall?file=/App.tsx) #### Wordtree Chart - [Demo](https://react-google-charts.com/wordtree-chart) -- [Code](./sandboxes/wordtree/index.js) -- [Sandbox](https://codesandbox.io/s/github/rakannimer/react-google-charts/tree/master/sandboxes/wordtree) +- [Code](./sandboxes/word-tree/App.tsx) +- [Sandbox](https://codesandbox.io/s/github/rakannimer/react-google-charts/tree/master/sandboxes/word-tree?file=/App.tsx) -### Run the example app +### Run the Storybook ```bash git clone https://www.github.com/rakannimer/react-google-charts cd react-google-charts -npm i -npm start +yarn +yarn start:storybook ``` ## Contributing @@ -413,8 +413,8 @@ Contributions are very welcome. Check out [CONTRIBUTING.md](CONTRIBUTING.md) - [Demo](https://rakannimer.github.io/react-google-charts/#/react-google-charts/bar-chart) [barchart-demo]: https://react-google-charts.com/bar-chart -[barchart-example-code]: ./sandboxes/bar-chart/index.js -[barchart-example-sandbox]: https://codesandbox.io/s/github/rakannimer/react-google-charts/tree/master/sandboxes/bar-chart +[barchart-example-code]: ./sandboxes/bar-chart/App.tsx +[barchart-example-sandbox]: https://codesandbox.io/s/github/rakannimer/react-google-charts/tree/master/sandboxes/bar-chart?file=/App.tsx [bubblechart-demo]: https://react-google-charts.com/bubble-chart -[bubblechart-example-code]: ./sandboxes/bubble-chart/index.js -[bubblechart-example-sandbox]: https://codesandbox.io/s/github/rakannimer/react-google-charts/tree/master/sandboxes/bubble-chart +[bubblechart-example-code]: ./sandboxes/bubble-chart/App.tsx +[bubblechart-example-sandbox]: https://codesandbox.io/s/github/rakannimer/react-google-charts/tree/master/sandboxes/bubble-chart?file=/App.tsx diff --git a/demo/index-interactive.html b/demo/index-interactive.html deleted file mode 100644 index 4c62db5e..00000000 --- a/demo/index-interactive.html +++ /dev/null @@ -1,22 +0,0 @@ - - - - - - -
-
Google charts should be available at this point.
-
To render the demo charts, click the button below.
-
To see that Google charts are available, check these in your browser's console: - 
-        console.log(google.charts)
-        console.log(google.visualization)
-
-
-
-
-
- - - - \ No newline at end of file diff --git a/demo/index.tsx b/demo/index.tsx deleted file mode 100644 index 265cf8f4..00000000 --- a/demo/index.tsx +++ /dev/null @@ -1,219 +0,0 @@ -import * as React from "react"; -import * as ReactDOM from "react-dom"; -import { Chart } from "../src"; -// Reference : https://developers.google.com/chart/interactive/docs/gallery/timeline -const columns = [ - { type: "string", id: "President" }, - { type: "date", id: "Start" }, - { type: "date", id: "End" } -]; - -const rows = [ - ["Washington", new Date(1789, 3, 30), new Date(1797, 2, 4)], - ["Adams", new Date(1797, 2, 4), new Date(1801, 2, 4)], - ["Jefferson", new Date(1801, 2, 4), new Date(1809, 2, 4)] -]; - -const companyOne = [ - ["Name", "Popularity"], - ["Cesar", 250], - ["Rachel", 4200], - ["Patrick", 2900], - ["Eric", 8200] -]; - -const companyTwo = [ - ["Name", "Popularity"], - ["Cesar", 370], - ["Rachel", 600], - ["Patrick", 700], - ["Eric", 1500] -]; -const DiffChart = () => { - return ( - - ); -}; - -class App extends React.Component { - componentDidMount() { - setInterval(() => { - this.setState({ refresh: Date.now() }); - }, 1000); - } - render() { - return ( -
- - -
- ); - } -} - -const gaugeOptions = { - width: 400, - height: 120, - redFrom: 90, - redTo: 100, - yellowFrom: 75, - yellowTo: 90, - minorTicks: 5 -}; - -const Issue317 = () => { - const [chartType, setChartType] = React.useState< - "AreaChart" | "BarChart" | "Table" - >("AreaChart"); - - const columns = [ - { - type: "string", - label: "year" - }, - { - label: "AttentionSpan", - type: "number" - } - ]; - const rows = [["2015", 5], ["2016", 3], ["2018", 1]]; - return ( -
- - -

{chartType}

- -
- ); -}; - -class InteractiveChart extends React.Component<{}, { data: any[][] }> { - constructor(props) { - super(props); - this.state = { - data: [ - [ - { - type: "number", - label: "Age" - }, - { - type: "number", - label: "Weight", - color: "green" - }, - { - type: "number", - label: "test" - } - ], - [4, 5.5, 1], - [8, 12, 2], - [11, 14, 3] - ] - }; - } - - componentDidMount() { - let i = 0; - setInterval(() => { - i++; - if (i > 10) return; - this.setState(state => { - return Object.assign({}, state, { - data: [ - ...state.data, - [20 * i, 10 * Math.random(), 10 * Math.random()] - ] - }); - }); - }, 500); - } - render() { - return ( -
- - - - - { - console.log("chart ", chartWrapper.getChart()); - }} - /> - -
- ); - } -} - -ReactDOM.render(, document.getElementById("app")); diff --git a/jest.config.json b/jest.config.json index f8fb06de..042ce3d5 100644 --- a/jest.config.json +++ b/jest.config.json @@ -21,6 +21,7 @@ "collectCoverage": true, "collectCoverageFrom": [ "src/**/*.{js,jsx,ts,tsx}", + "!src/docs/**", "!**/node_modules/**" ], "coverageReporters": [ diff --git a/package.json b/package.json index cc2d5231..f9291f38 100644 --- a/package.json +++ b/package.json @@ -2,39 +2,46 @@ "name": "react-google-charts", "version": "3.0.15", "description": "react-google-charts React component", - "main": "dist/index.cjs.js", - "module": "dist/index.esm.js", - "jsnext:main": "dist/index.esm.js", - "umd": "dist/index.umd.js", + "main": "dist/index.cjs", + "module": "dist/index.mjs", "types": "dist/index.d.ts", "scripts": { - "start": "parcel demo/index.html -d demo-build/", - "build": "rollup -c", + "start:storybook": "start-storybook -p 6006 --ci", + "emitDeclarations": "tsc --skipLibCheck --emitDeclarationOnly", + "build": "rollup -c & yarn emitDeclarations", "format:src": "prettier --write 'src/**/*.{js,jsx,ts,tsx}'", "format:test": "prettier --write 'test/**/*.{js,jsx,ts,tsx}'", - "format": "yarn format:src && yarn format:test", + "format:sandboxes": "prettier --write 'sandboxes/**/*.{js,jsx,ts,tsx}'", + "format:stories": "prettier --write 'stories/**/*.{js,jsx,ts,tsx}'", + "format": "yarn format:src && yarn format:test && yarn format:sandboxes && yarn format:stories", "jest": "jest -c jest.config.json", - "test:types": "echo 'Need to fix types' # tsc --skipLibCheck --noEmit", "test:unit": "yarn jest", - "test": "yarn test:types && yarn test:unit", - "prepublishOnly": "npm run build", + "test:size": "size-limit", + "test": "yarn test:unit && yarn build", + "prepublishOnly": "yarn build", "docz:dev": "docz dev", "docz:build": "docz build && mkdir docs/react-google-charts && cp -r docs/static docs/react-google-charts/static && mkdir docs/assets/ && cp -r assets/ docs/assets/", "docz:deploy": "yarn docz:build && cp now.json docs/ && cd docs/ && now && now alias", "commit": "cz", - "release": "standard-version" - }, - "dependencies": { - "react-load-script": "^0.0.6" + "release": "standard-version", + "cleanPublish": "yarn test && clean-publish" }, + "dependencies": {}, "peerDependencies": { - "prop-types": ">=15", "react": ">=16.3.0", "react-dom": ">=16.3.0" }, "devDependencies": { + "@babel/core": "^7.16.0", "@commitlint/cli": "^14.1.0", "@commitlint/config-conventional": "^14.1.0", + "@rollup/plugin-node-resolve": "^13.0.6", + "@size-limit/preset-big-lib": "^7.0.0", + "@storybook/addon-actions": "^6.3.12", + "@storybook/addon-controls": "^6.3.12", + "@storybook/addon-docs": "^6.3.12", + "@storybook/addons": "^6.3.12", + "@storybook/react": "^6.3.12", "@swc/core": "^1.2.108", "@swc/helpers": "^0.2.14", "@swc/jest": "^0.2.5", @@ -44,6 +51,8 @@ "@types/jquery": "^3.3.5", "@types/react": "^17.0.34", "@types/react-dom": "^17.0.11", + "browserslist": "^4.18.1", + "clean-publish": "^3.4.3", "commitizen": "^4.2.4", "cz-conventional-changelog": "^3.3.0", "docz": "^0.10.2", @@ -54,16 +63,17 @@ "kill-port": "^1.3.2", "lint-staged": "^12.0.2", "object-assign": "^4.1.0", - "parcel-bundler": "^1.12.2", "prettier": "^2.4.1", "react": "^16.9.0", "react-component-component": "^1.2.1", "react-dom": "^16.9.0", - "rollup": "^0.63.5", - "rollup-plugin-typescript2": "^0.19.3", + "rollup": "^2.60.0", + "rollup-plugin-swc": "^0.2.0", "simple-git-hooks": "^2.7.0", + "size-limit": "^7.0.0", "standard-version": "^9.3.2", - "typescript": "^3.4.5" + "typescript": "^4.5.2", + "webpack": "^5.64.2" }, "gh-pages-deploy": { "staticpath": "demo/dist/" diff --git a/rollup.config.js b/rollup.config.js index afd54bbf..425776a4 100644 --- a/rollup.config.js +++ b/rollup.config.js @@ -1,27 +1,56 @@ -import typescript from "rollup-plugin-typescript2"; +import swc from "rollup-plugin-swc"; +import { nodeResolve } from "@rollup/plugin-node-resolve"; +import pkg from "./package.json"; -export default { - input: "src/index.tsx", - output: [ - { - file: "dist/index.umd.js", - format: "umd", - name: "ReactGoogleCharts" +const extensions = [".js", ".ts", ".tsx"]; +const external = (_) => /node_modules/.test(_) && !/@swc\/helpers/.test(_); +const plugins = (targets) => [ + nodeResolve({ + extensions, + }), + swc({ + jsc: { + parser: { + syntax: "typescript", + tsx: true, + }, + transform: { + react: { + useBuiltins: true, + }, + }, + externalHelpers: true, }, - { - file: "dist/index.esm.js", - format: "esm" + env: { + targets, }, - { - file: "dist/index.cjs.js", - format: "cjs" - } - ], - external: ["react-load-script", "react"], - plugins: [ - typescript({ - typescript: require("typescript"), - abortOnError: false - }) - ] -}; + module: { + type: "es6", + }, + sourceMaps: true, + }), +]; + +export default [ + { + input: "src/index.tsx", + plugins: plugins("defaults, not ie 11, not ie_mob 11"), + external, + output: { + file: pkg.main, + format: "cjs", + exports: "named", + sourcemap: true, + }, + }, + { + input: "src/index.tsx", + plugins: plugins("defaults and supports es6-module"), + external, + output: { + file: pkg.module, + format: "es", + sourcemap: true, + }, + }, +]; diff --git a/sandboxes/area-chart/App.tsx b/sandboxes/area-chart/App.tsx new file mode 100644 index 00000000..0ef778b1 --- /dev/null +++ b/sandboxes/area-chart/App.tsx @@ -0,0 +1,29 @@ +import React from "react"; +import { Chart } from "react-google-charts"; + +export const data = [ + ["Year", "Sales", "Expenses"], + ["2013", 1000, 400], + ["2014", 1170, 460], + ["2015", 660, 1120], + ["2016", 1030, 540], +]; + +export const options = { + title: "Company Performance", + hAxis: { title: "Year", titleTextStyle: { color: "#333" } }, + vAxis: { minValue: 0 }, + chartArea: { width: "50%", height: "70%" }, +}; + +export function App() { + return ( + + ); +} diff --git a/sandboxes/area-chart/index.js b/sandboxes/area-chart/index.js deleted file mode 100644 index bbf934ad..00000000 --- a/sandboxes/area-chart/index.js +++ /dev/null @@ -1,35 +0,0 @@ -import React from "react"; -import ReactDOM from "react-dom"; -import Chart from "react-google-charts"; - -const columns = [ - { - type: "number", - label: "year" - }, - { - label: "AttentionSpan", - type: "number" - } -]; -const rows = [[2015, 5], [2016, 3], [2018, 1]]; - -class App extends React.Component { - render() { - return ( -
- -
- ); - } -} - -const rootElement = document.getElementById("root"); -ReactDOM.render(, rootElement); diff --git a/sandboxes/area-chart/index.tsx b/sandboxes/area-chart/index.tsx new file mode 100644 index 00000000..5021e58b --- /dev/null +++ b/sandboxes/area-chart/index.tsx @@ -0,0 +1,7 @@ +import React from "react"; +import { render } from "react-dom"; + +import { App } from "./App"; + +const rootElement = document.getElementById("root"); +render(, rootElement); diff --git a/sandboxes/area-chart/package.json b/sandboxes/area-chart/package.json index 45bf55ad..f0a582c1 100644 --- a/sandboxes/area-chart/package.json +++ b/sandboxes/area-chart/package.json @@ -1,9 +1,15 @@ { - "description": "Demo of Google AreaChart", - "main": "index.js", + "main": "index.tsx", "dependencies": { - "react": "^16", - "react-dom": "^16", - "react-google-charts": ">2.0.0" + "prop-types": "15.7.2", + "react": "17.0.2", + "react-dom": "17.0.2", + "react-google-charts": "^3.0.15", + "react-scripts": "4.0.3" + }, + "devDependencies": { + "@types/react": "17.0.20", + "@types/react-dom": "17.0.9", + "typescript": "4.4.2" } } diff --git a/sandboxes/bar-chart/App.tsx b/sandboxes/bar-chart/App.tsx new file mode 100644 index 00000000..3b95c69d --- /dev/null +++ b/sandboxes/bar-chart/App.tsx @@ -0,0 +1,35 @@ +import React from "react"; +import { Chart } from "react-google-charts"; + +export const data = [ + ["City", "2010 Population", "2000 Population"], + ["New York City, NY", 8175000, 8008000], + ["Los Angeles, CA", 3792000, 3694000], + ["Chicago, IL", 2695000, 2896000], + ["Houston, TX", 2099000, 1953000], + ["Philadelphia, PA", 1526000, 1517000], +]; + +export const options = { + title: "Population of Largest U.S. Cities", + chartArea: { width: "50%" }, + hAxis: { + title: "Total Population", + minValue: 0, + }, + vAxis: { + title: "City", + }, +}; + +export function App() { + return ( + + ); +} diff --git a/sandboxes/bar-chart/index.js b/sandboxes/bar-chart/index.js deleted file mode 100644 index 66f26176..00000000 --- a/sandboxes/bar-chart/index.js +++ /dev/null @@ -1,28 +0,0 @@ -import React from "react"; -import ReactDOM from "react-dom"; -import Chart from "react-google-charts"; - -const data = [ - ["Year", "Visitations", { role: "style" }], - ["2010", 10, "color: gray"], - ["2020", 14, "color: #76A7FA"], - ["2030", 16, "color: blue"], - ["2040", 22, "stroke-color: #703593; stroke-width: 4; fill-color: #C5A5CF"], - [ - "2050", - 28, - "stroke-color: #871B47; stroke-opacity: 0.6; stroke-width: 8; fill-color: #BC5679; fill-opacity: 0.2" - ] -]; -class App extends React.Component { - render() { - return ( -
- -
- ); - } -} - -const rootElement = document.getElementById("root"); -ReactDOM.render(, rootElement); diff --git a/sandboxes/bar-chart/index.tsx b/sandboxes/bar-chart/index.tsx new file mode 100644 index 00000000..5021e58b --- /dev/null +++ b/sandboxes/bar-chart/index.tsx @@ -0,0 +1,7 @@ +import React from "react"; +import { render } from "react-dom"; + +import { App } from "./App"; + +const rootElement = document.getElementById("root"); +render(, rootElement); diff --git a/sandboxes/bar-chart/package.json b/sandboxes/bar-chart/package.json index f5215297..f0a582c1 100644 --- a/sandboxes/bar-chart/package.json +++ b/sandboxes/bar-chart/package.json @@ -1,9 +1,15 @@ { - "description": "Demo of Google BarChart", - "main": "index.js", + "main": "index.tsx", "dependencies": { - "react": "^16", - "react-dom": "^16", - "react-google-charts": ">2.0.0" + "prop-types": "15.7.2", + "react": "17.0.2", + "react-dom": "17.0.2", + "react-google-charts": "^3.0.15", + "react-scripts": "4.0.3" + }, + "devDependencies": { + "@types/react": "17.0.20", + "@types/react-dom": "17.0.9", + "typescript": "4.4.2" } } diff --git a/sandboxes/bar/App.tsx b/sandboxes/bar/App.tsx new file mode 100644 index 00000000..95788a72 --- /dev/null +++ b/sandboxes/bar/App.tsx @@ -0,0 +1,29 @@ +import React from "react"; +import { Chart } from "react-google-charts"; + +export const data = [ + ["Year", "Sales", "Expenses", "Profit"], + ["2014", 1000, 400, 200], + ["2015", 1170, 460, 250], + ["2016", 660, 1120, 300], + ["2017", 1030, 540, 350], +]; + +export const options = { + chart: { + title: "Company Performance", + subtitle: "Sales, Expenses, and Profit: 2014-2017", + }, +}; + +export function App() { + return ( + + ); +} diff --git a/sandboxes/bar/index.tsx b/sandboxes/bar/index.tsx new file mode 100644 index 00000000..5021e58b --- /dev/null +++ b/sandboxes/bar/index.tsx @@ -0,0 +1,7 @@ +import React from "react"; +import { render } from "react-dom"; + +import { App } from "./App"; + +const rootElement = document.getElementById("root"); +render(, rootElement); diff --git a/sandboxes/bar/package.json b/sandboxes/bar/package.json new file mode 100644 index 00000000..f0a582c1 --- /dev/null +++ b/sandboxes/bar/package.json @@ -0,0 +1,15 @@ +{ + "main": "index.tsx", + "dependencies": { + "prop-types": "15.7.2", + "react": "17.0.2", + "react-dom": "17.0.2", + "react-google-charts": "^3.0.15", + "react-scripts": "4.0.3" + }, + "devDependencies": { + "@types/react": "17.0.20", + "@types/react-dom": "17.0.9", + "typescript": "4.4.2" + } +} diff --git a/sandboxes/bubble-chart/index.js b/sandboxes/bubble-chart/App.tsx similarity index 56% rename from sandboxes/bubble-chart/index.js rename to sandboxes/bubble-chart/App.tsx index 329fb87e..e167e4da 100644 --- a/sandboxes/bubble-chart/index.js +++ b/sandboxes/bubble-chart/App.tsx @@ -1,8 +1,7 @@ import React from "react"; -import ReactDOM from "react-dom"; -import Chart from "react-google-charts"; +import { Chart } from "react-google-charts"; -const data = [ +export const data = [ ["ID", "Life Expectancy", "Fertility Rate", "Region", "Population"], ["CAN", 80.66, 1.67, "North America", 33739900], ["DEU", 79.84, 1.36, "Europe", 81902307], @@ -13,32 +12,26 @@ const data = [ ["IRQ", 68.09, 4.77, "Middle East", 31090763], ["ISR", 81.55, 2.96, "Middle East", 7485600], ["RUS", 68.6, 1.54, "Europe", 141850000], - ["USA", 78.09, 2.05, "North America", 307007000] + ["USA", 78.09, 2.05, "North America", 307007000], ]; -const options = { +export const options = { title: "Correlation between life expectancy, fertility rate " + "and population of some world countries (2010)", hAxis: { title: "Life Expectancy" }, vAxis: { title: "Fertility Rate" }, - bubble: { textStyle: { fontSize: 11 } } + bubble: { textStyle: { fontSize: 11 } }, }; -class App extends React.Component { - render() { - return ( -
- -
- ); - } -} -const rootElement = document.getElementById("root"); -ReactDOM.render(, rootElement); +export function App() { + return ( + + ); +} diff --git a/sandboxes/bubble-chart/index.tsx b/sandboxes/bubble-chart/index.tsx new file mode 100644 index 00000000..5021e58b --- /dev/null +++ b/sandboxes/bubble-chart/index.tsx @@ -0,0 +1,7 @@ +import React from "react"; +import { render } from "react-dom"; + +import { App } from "./App"; + +const rootElement = document.getElementById("root"); +render(, rootElement); diff --git a/sandboxes/bubble-chart/package.json b/sandboxes/bubble-chart/package.json index ceae419a..f0a582c1 100644 --- a/sandboxes/bubble-chart/package.json +++ b/sandboxes/bubble-chart/package.json @@ -1,9 +1,15 @@ { - "description": "Demo of Google BubbleChart", - "main": "index.js", + "main": "index.tsx", "dependencies": { - "react": "^16", - "react-dom": "^16", - "react-google-charts": ">2.0.0" + "prop-types": "15.7.2", + "react": "17.0.2", + "react-dom": "17.0.2", + "react-google-charts": "^3.0.15", + "react-scripts": "4.0.3" + }, + "devDependencies": { + "@types/react": "17.0.20", + "@types/react-dom": "17.0.9", + "typescript": "4.4.2" } } diff --git a/sandboxes/calendar/index.js b/sandboxes/calendar/App.tsx similarity index 54% rename from sandboxes/calendar/index.js rename to sandboxes/calendar/App.tsx index cc907a88..7c9522a2 100644 --- a/sandboxes/calendar/index.js +++ b/sandboxes/calendar/App.tsx @@ -1,17 +1,16 @@ import React from "react"; -import ReactDOM from "react-dom"; -import Chart from "react-google-charts"; +import { Chart } from "react-google-charts"; -const data = [ +export const data = [ [ { type: "date", - id: "Date" + id: "Date", }, { type: "number", - id: "Won/Loss" - } + id: "Won/Loss", + }, ], [new Date(2012, 3, 13), 37032], [new Date(2012, 3, 14), 38024], @@ -26,17 +25,21 @@ const data = [ [new Date(2013, 9, 19), 38823], [new Date(2013, 9, 23), 38345], [new Date(2013, 9, 24), 38436], - [new Date(2013, 9, 30), 38447] + [new Date(2013, 9, 30), 38447], ]; -class App extends React.Component { - render() { - return ( -
- -
- ); - } -} -const rootElement = document.getElementById("root"); -ReactDOM.render(, rootElement); +export const options = { + title: "Red Sox Attendance", +}; + +export function App() { + return ( + + ); +} diff --git a/sandboxes/calendar/index.tsx b/sandboxes/calendar/index.tsx new file mode 100644 index 00000000..5021e58b --- /dev/null +++ b/sandboxes/calendar/index.tsx @@ -0,0 +1,7 @@ +import React from "react"; +import { render } from "react-dom"; + +import { App } from "./App"; + +const rootElement = document.getElementById("root"); +render(, rootElement); diff --git a/sandboxes/calendar/package.json b/sandboxes/calendar/package.json index a4336eb0..f0a582c1 100644 --- a/sandboxes/calendar/package.json +++ b/sandboxes/calendar/package.json @@ -1,9 +1,15 @@ { - "description": "Demo of Google CalendarChart", - "main": "index.js", + "main": "index.tsx", "dependencies": { - "react": "^16", - "react-dom": "^16", - "react-google-charts": ">2.0.0" + "prop-types": "15.7.2", + "react": "17.0.2", + "react-dom": "17.0.2", + "react-google-charts": "^3.0.15", + "react-scripts": "4.0.3" + }, + "devDependencies": { + "@types/react": "17.0.20", + "@types/react-dom": "17.0.9", + "typescript": "4.4.2" } } diff --git a/sandboxes/candlestick-chart-waterfall/App.tsx b/sandboxes/candlestick-chart-waterfall/App.tsx new file mode 100644 index 00000000..49493a4a --- /dev/null +++ b/sandboxes/candlestick-chart-waterfall/App.tsx @@ -0,0 +1,32 @@ +import React from "react"; +import { Chart } from "react-google-charts"; + +export const data = [ + ["Day", "", "", "", ""], + ["Mon", 20, 28, 38, 45], + ["Tue", 31, 38, 55, 66], + ["Wed", 50, 55, 77, 80], + ["Thu", 77, 77, 66, 50], + ["Fri", 68, 66, 22, 15], +]; + +export const options = { + legend: "none", + bar: { groupWidth: "100%" }, // Remove space between bars. + candlestick: { + fallingColor: { strokeWidth: 0, fill: "#a52714" }, // red + risingColor: { strokeWidth: 0, fill: "#0f9d58" }, // green + }, +}; + +export function App() { + return ( + + ); +} diff --git a/sandboxes/candlestick-chart-waterfall/index.tsx b/sandboxes/candlestick-chart-waterfall/index.tsx new file mode 100644 index 00000000..5021e58b --- /dev/null +++ b/sandboxes/candlestick-chart-waterfall/index.tsx @@ -0,0 +1,7 @@ +import React from "react"; +import { render } from "react-dom"; + +import { App } from "./App"; + +const rootElement = document.getElementById("root"); +render(, rootElement); diff --git a/sandboxes/candlestick-chart-waterfall/package.json b/sandboxes/candlestick-chart-waterfall/package.json new file mode 100644 index 00000000..f0a582c1 --- /dev/null +++ b/sandboxes/candlestick-chart-waterfall/package.json @@ -0,0 +1,15 @@ +{ + "main": "index.tsx", + "dependencies": { + "prop-types": "15.7.2", + "react": "17.0.2", + "react-dom": "17.0.2", + "react-google-charts": "^3.0.15", + "react-scripts": "4.0.3" + }, + "devDependencies": { + "@types/react": "17.0.20", + "@types/react-dom": "17.0.9", + "typescript": "4.4.2" + } +} diff --git a/sandboxes/candlestick-chart/App.tsx b/sandboxes/candlestick-chart/App.tsx new file mode 100644 index 00000000..62466f70 --- /dev/null +++ b/sandboxes/candlestick-chart/App.tsx @@ -0,0 +1,27 @@ +import React from "react"; +import { Chart } from "react-google-charts"; + +export const data = [ + ["day", "a", "b", "c", "d"], + ["Mon", 20, 28, 38, 45], + ["Tue", 31, 38, 55, 66], + ["Wed", 50, 55, 77, 80], + ["Thu", 50, 77, 66, 77], + ["Fri", 15, 66, 22, 68], +]; + +export const options = { + legend: "none", +}; + +export function App() { + return ( + + ); +} diff --git a/sandboxes/candlestick-chart/index.tsx b/sandboxes/candlestick-chart/index.tsx new file mode 100644 index 00000000..5021e58b --- /dev/null +++ b/sandboxes/candlestick-chart/index.tsx @@ -0,0 +1,7 @@ +import React from "react"; +import { render } from "react-dom"; + +import { App } from "./App"; + +const rootElement = document.getElementById("root"); +render(, rootElement); diff --git a/sandboxes/candlestick-chart/package.json b/sandboxes/candlestick-chart/package.json new file mode 100644 index 00000000..f0a582c1 --- /dev/null +++ b/sandboxes/candlestick-chart/package.json @@ -0,0 +1,15 @@ +{ + "main": "index.tsx", + "dependencies": { + "prop-types": "15.7.2", + "react": "17.0.2", + "react-dom": "17.0.2", + "react-google-charts": "^3.0.15", + "react-scripts": "4.0.3" + }, + "devDependencies": { + "@types/react": "17.0.20", + "@types/react-dom": "17.0.9", + "typescript": "4.4.2" + } +} diff --git a/sandboxes/candlestick/index.js b/sandboxes/candlestick/index.js deleted file mode 100644 index 95ce9238..00000000 --- a/sandboxes/candlestick/index.js +++ /dev/null @@ -1,50 +0,0 @@ -import React from "react"; -import ReactDOM from "react-dom"; -import Chart from "react-google-charts"; - -const data = [ - [ - { - type: "string", - id: "Date" - }, - { - type: "number", - label: "Something" - }, - { - type: "number", - label: "Something" - }, - { - type: "number", - label: "Something" - }, - { - type: "number", - label: "Something" - } - ], - ["Mon", 20, 28, 38, 45], - ["Tue", 31, 38, 55, 66], - ["Wed", 50, 55, 77, 80], - ["Thu", 77, 77, 66, 50], - ["Fri", 68, 66, 22, 15] -]; -class App extends React.Component { - render() { - return ( -
- -
- ); - } -} - -const rootElement = document.getElementById("root"); -ReactDOM.render(, rootElement); diff --git a/sandboxes/candlestick/package.json b/sandboxes/candlestick/package.json deleted file mode 100644 index 648ece01..00000000 --- a/sandboxes/candlestick/package.json +++ /dev/null @@ -1,9 +0,0 @@ -{ - "description": "Demo of Google CandleStickChart", - "main": "index.js", - "dependencies": { - "react": "^16", - "react-dom": "^16", - "react-google-charts": ">2.0.0" - } -} diff --git a/sandboxes/column-chart-diff/App.tsx b/sandboxes/column-chart-diff/App.tsx new file mode 100644 index 00000000..e3253a3c --- /dev/null +++ b/sandboxes/column-chart-diff/App.tsx @@ -0,0 +1,34 @@ +import React from "react"; +import { Chart } from "react-google-charts"; + +const dataOld = [ + ["Name", "Popularity"], + ["Cesar", 250], + ["Rachel", 4200], + ["Patrick", 2900], + ["Eric", 8200], +]; + +const dataNew = [ + ["Name", "Popularity"], + ["Cesar", 370], + ["Rachel", 600], + ["Patrick", 700], + ["Eric", 1500], +]; + +export const diffdata = { + old: dataOld, + new: dataNew, +}; + +export function App() { + return ( + + ); +} diff --git a/sandboxes/column-chart-diff/index.tsx b/sandboxes/column-chart-diff/index.tsx new file mode 100644 index 00000000..5021e58b --- /dev/null +++ b/sandboxes/column-chart-diff/index.tsx @@ -0,0 +1,7 @@ +import React from "react"; +import { render } from "react-dom"; + +import { App } from "./App"; + +const rootElement = document.getElementById("root"); +render(, rootElement); diff --git a/sandboxes/column-chart-diff/package.json b/sandboxes/column-chart-diff/package.json new file mode 100644 index 00000000..f0a582c1 --- /dev/null +++ b/sandboxes/column-chart-diff/package.json @@ -0,0 +1,15 @@ +{ + "main": "index.tsx", + "dependencies": { + "prop-types": "15.7.2", + "react": "17.0.2", + "react-dom": "17.0.2", + "react-google-charts": "^3.0.15", + "react-scripts": "4.0.3" + }, + "devDependencies": { + "@types/react": "17.0.20", + "@types/react-dom": "17.0.9", + "typescript": "4.4.2" + } +} diff --git a/sandboxes/column-chart/App.tsx b/sandboxes/column-chart/App.tsx new file mode 100644 index 00000000..32463e6c --- /dev/null +++ b/sandboxes/column-chart/App.tsx @@ -0,0 +1,16 @@ +import React from "react"; +import { Chart } from "react-google-charts"; + +export const data = [ + ["Element", "Density", { role: "style" }], + ["Copper", 8.94, "#b87333"], // RGB value + ["Silver", 10.49, "silver"], // English color name + ["Gold", 19.3, "gold"], + ["Platinum", 21.45, "color: #e5e4e2"], // CSS-style declaration +]; + +export function App() { + return ( + + ); +} diff --git a/sandboxes/column-chart/index.js b/sandboxes/column-chart/index.js deleted file mode 100644 index d9561f98..00000000 --- a/sandboxes/column-chart/index.js +++ /dev/null @@ -1,28 +0,0 @@ -import React from "react"; -import ReactDOM from "react-dom"; -import Chart from "react-google-charts"; - -const data = [ - ["Element", "Density", { role: "style" }], - ["Copper", 8.94, "#b87333"], // RGB value - ["Silver", 10.49, "silver"], // English color name - ["Gold", 19.3, "gold"], - ["Platinum", 21.45, "color: #e5e4e2"] // CSS-style declaration -]; -class App extends React.Component { - render() { - return ( -
- -
- ); - } -} - -const rootElement = document.getElementById("root"); -ReactDOM.render(, rootElement); diff --git a/sandboxes/column-chart/index.tsx b/sandboxes/column-chart/index.tsx new file mode 100644 index 00000000..5021e58b --- /dev/null +++ b/sandboxes/column-chart/index.tsx @@ -0,0 +1,7 @@ +import React from "react"; +import { render } from "react-dom"; + +import { App } from "./App"; + +const rootElement = document.getElementById("root"); +render(, rootElement); diff --git a/sandboxes/column-chart/package.json b/sandboxes/column-chart/package.json index 6a59caff..f0a582c1 100644 --- a/sandboxes/column-chart/package.json +++ b/sandboxes/column-chart/package.json @@ -1,9 +1,15 @@ { - "description": "Demo of Google ColumnChart", - "main": "index.js", + "main": "index.tsx", "dependencies": { - "react": "^16", - "react-dom": "^16", - "react-google-charts": ">2.0.0" + "prop-types": "15.7.2", + "react": "17.0.2", + "react-dom": "17.0.2", + "react-google-charts": "^3.0.15", + "react-scripts": "4.0.3" + }, + "devDependencies": { + "@types/react": "17.0.20", + "@types/react-dom": "17.0.9", + "typescript": "4.4.2" } } diff --git a/sandboxes/combo-chart/App.tsx b/sandboxes/combo-chart/App.tsx new file mode 100644 index 00000000..80dff902 --- /dev/null +++ b/sandboxes/combo-chart/App.tsx @@ -0,0 +1,39 @@ +import React from "react"; +import { Chart } from "react-google-charts"; + +export const data = [ + [ + "Month", + "Bolivia", + "Ecuador", + "Madagascar", + "Papua New Guinea", + "Rwanda", + "Average", + ], + ["2004/05", 165, 938, 522, 998, 450, 614.6], + ["2005/06", 135, 1120, 599, 1268, 288, 682], + ["2006/07", 157, 1167, 587, 807, 397, 623], + ["2007/08", 139, 1110, 615, 968, 215, 609.4], + ["2008/09", 136, 691, 629, 1026, 366, 569.6], +]; + +export const options = { + title: "Monthly Coffee Production by Country", + vAxis: { title: "Cups" }, + hAxis: { title: "Month" }, + seriesType: "bars", + series: { 5: { type: "line" } }, +}; + +export function App() { + return ( + + ); +} diff --git a/sandboxes/combo-chart/index.tsx b/sandboxes/combo-chart/index.tsx new file mode 100644 index 00000000..5021e58b --- /dev/null +++ b/sandboxes/combo-chart/index.tsx @@ -0,0 +1,7 @@ +import React from "react"; +import { render } from "react-dom"; + +import { App } from "./App"; + +const rootElement = document.getElementById("root"); +render(, rootElement); diff --git a/sandboxes/combo-chart/package.json b/sandboxes/combo-chart/package.json new file mode 100644 index 00000000..f0a582c1 --- /dev/null +++ b/sandboxes/combo-chart/package.json @@ -0,0 +1,15 @@ +{ + "main": "index.tsx", + "dependencies": { + "prop-types": "15.7.2", + "react": "17.0.2", + "react-dom": "17.0.2", + "react-google-charts": "^3.0.15", + "react-scripts": "4.0.3" + }, + "devDependencies": { + "@types/react": "17.0.20", + "@types/react-dom": "17.0.9", + "typescript": "4.4.2" + } +} diff --git a/sandboxes/diff-column-chart/index.js b/sandboxes/diff-column-chart/index.js deleted file mode 100644 index b116f0bb..00000000 --- a/sandboxes/diff-column-chart/index.js +++ /dev/null @@ -1,38 +0,0 @@ -import React from "react"; -import ReactDOM from "react-dom"; -import Chart from "react-google-charts"; -// Ref : https://developers.google.com/chart/interactive/docs/gallery/histogram - -const datasetOld = [ - ["Name", "Popularity"], - ["Cesar", 250], - ["Rachel", 4200], - ["Patrick", 2900], - ["Eric", 8200] -]; - -const datasetNew = [ - ["Name", "Popularity"], - ["Cesar", 370], - ["Rachel", 600], - ["Patrick", 700], - ["Eric", 1500] -]; - -class App extends React.Component { - render() { - return ( -
- -
- ); - } -} - -const rootElement = document.getElementById("root"); -ReactDOM.render(, rootElement); diff --git a/sandboxes/diff-column-chart/package.json b/sandboxes/diff-column-chart/package.json deleted file mode 100644 index 7815efb2..00000000 --- a/sandboxes/diff-column-chart/package.json +++ /dev/null @@ -1,9 +0,0 @@ -{ - "description": "Demo of Google Diff Column Chart.", - "main": "index.js", - "dependencies": { - "react": "^16", - "react-dom": "^16", - "react-google-charts": ">2.0.20" - } -} diff --git a/sandboxes/diff-scatter-chart/index.js b/sandboxes/diff-scatter-chart/index.js deleted file mode 100644 index 1aeae473..00000000 --- a/sandboxes/diff-scatter-chart/index.js +++ /dev/null @@ -1,32 +0,0 @@ -import React from "react"; -import ReactDOM from "react-dom"; -import Chart from "react-google-charts"; -// Ref : https://developers.google.com/chart/interactive/docs/gallery/histogram - -const datasetOld = [["x", "y"], [1, 1000], [2, 1170], [3, 660], [4, 1030]]; - -const datasetNew = [ - ["x", "y"], - [1.1, 1100], - [2.1, 1000], - [2.8, 960], - [4.4, 1300] -]; - -class App extends React.Component { - render() { - return ( -
- -
- ); - } -} - -const rootElement = document.getElementById("root"); -ReactDOM.render(, rootElement); diff --git a/sandboxes/diff-scatter-chart/package.json b/sandboxes/diff-scatter-chart/package.json deleted file mode 100644 index 13bb3f08..00000000 --- a/sandboxes/diff-scatter-chart/package.json +++ /dev/null @@ -1,9 +0,0 @@ -{ - "description": "Demo of Google Diff Scatter Chart.", - "main": "index.js", - "dependencies": { - "react": "^16", - "react-dom": "^16", - "react-google-charts": ">2.0.20" - } -} diff --git a/sandboxes/donut-chart/index.js b/sandboxes/donut-chart/index.js deleted file mode 100644 index 253a3b49..00000000 --- a/sandboxes/donut-chart/index.js +++ /dev/null @@ -1,35 +0,0 @@ -import React from "react"; -import ReactDOM from "react-dom"; -import Chart from "react-google-charts"; - -const data = [ - ["Task", "Hours per Day"], - ["Work", 11], - ["Eat", 2], - ["Commute", 2], - ["Watch TV", 2], - ["Sleep", 7] // CSS-style declaration -]; -const options = { - title: "My Daily Activities", - pieHole: 0.4, - is3D: false -}; -class App extends React.Component { - render() { - return ( -
- -
- ); - } -} - -const rootElement = document.getElementById("root"); -ReactDOM.render(, rootElement); diff --git a/sandboxes/donut-chart/package.json b/sandboxes/donut-chart/package.json deleted file mode 100644 index 9f3789db..00000000 --- a/sandboxes/donut-chart/package.json +++ /dev/null @@ -1,9 +0,0 @@ -{ - "description": "Demo of Google DonutChart", - "main": "index.js", - "dependencies": { - "react": "^16", - "react-dom": "^16", - "react-google-charts": ">2.0.0" - } -} diff --git a/sandboxes/gantt-chart/package.json b/sandboxes/gantt-chart/package.json deleted file mode 100644 index 6181b976..00000000 --- a/sandboxes/gantt-chart/package.json +++ /dev/null @@ -1,9 +0,0 @@ -{ - "description": "Demo of Google GeoChart", - "main": "index.js", - "dependencies": { - "react": "^16", - "react-dom": "^16", - "react-google-charts": ">2.0.0" - } -} diff --git a/sandboxes/gantt-chart/index.js b/sandboxes/gantt/App.tsx similarity index 55% rename from sandboxes/gantt-chart/index.js rename to sandboxes/gantt/App.tsx index 9f89e348..92ed9c26 100644 --- a/sandboxes/gantt-chart/index.js +++ b/sandboxes/gantt/App.tsx @@ -1,10 +1,10 @@ import React from "react"; -import ReactDOM from "react-dom"; -import Chart from "react-google-charts"; +import { Chart } from "react-google-charts"; -function daysToMilliseconds(days) { +function daysToMilliseconds(days: number) { return days * 24 * 60 * 60 * 1000; } + const columns = [ { type: "string", label: "Task ID" }, { type: "string", label: "Task Name" }, @@ -12,7 +12,7 @@ const columns = [ { type: "date", label: "End Date" }, { type: "number", label: "Duration" }, { type: "number", label: "Percent Complete" }, - { type: "string", label: "Dependencies" } + { type: "string", label: "Dependencies" }, ]; const rows = [ @@ -23,7 +23,7 @@ const rows = [ new Date(2015, 0, 5), null, 100, - null + null, ], [ "Write", @@ -32,7 +32,7 @@ const rows = [ new Date(2015, 0, 9), daysToMilliseconds(3), 25, - "Research,Outline" + "Research,Outline", ], [ "Cite", @@ -41,7 +41,7 @@ const rows = [ new Date(2015, 0, 7), daysToMilliseconds(1), 20, - "Research" + "Research", ], [ "Complete", @@ -50,7 +50,7 @@ const rows = [ new Date(2015, 0, 10), daysToMilliseconds(1), 0, - "Cite,Write" + "Cite,Write", ], [ "Outline", @@ -59,31 +59,12 @@ const rows = [ new Date(2015, 0, 6), daysToMilliseconds(1), 100, - "Research" - ] + "Research", + ], ]; -class App extends React.Component { - state = { - chartImageURI: "" - }; - render() { - return ( -
- -
- I'm a picture of the chart - -
-
- ); - } -} -const rootElement = document.getElementById("root"); -ReactDOM.render(, rootElement); +export const data = [columns, ...rows]; + +export function App() { + return ; +} diff --git a/sandboxes/gantt/index.tsx b/sandboxes/gantt/index.tsx new file mode 100644 index 00000000..5021e58b --- /dev/null +++ b/sandboxes/gantt/index.tsx @@ -0,0 +1,7 @@ +import React from "react"; +import { render } from "react-dom"; + +import { App } from "./App"; + +const rootElement = document.getElementById("root"); +render(, rootElement); diff --git a/sandboxes/gantt/package.json b/sandboxes/gantt/package.json new file mode 100644 index 00000000..f0a582c1 --- /dev/null +++ b/sandboxes/gantt/package.json @@ -0,0 +1,15 @@ +{ + "main": "index.tsx", + "dependencies": { + "prop-types": "15.7.2", + "react": "17.0.2", + "react-dom": "17.0.2", + "react-google-charts": "^3.0.15", + "react-scripts": "4.0.3" + }, + "devDependencies": { + "@types/react": "17.0.20", + "@types/react-dom": "17.0.9", + "typescript": "4.4.2" + } +} diff --git a/sandboxes/gauge/App.tsx b/sandboxes/gauge/App.tsx new file mode 100644 index 00000000..560481f0 --- /dev/null +++ b/sandboxes/gauge/App.tsx @@ -0,0 +1,49 @@ +import React, { useState, useEffect } from "react"; +import { Chart } from "react-google-charts"; + +function getRandomNumber() { + return Math.random() * 100; +} + +export function getData() { + return [ + ["Label", "Value"], + ["Memory", getRandomNumber()], + ["CPU", getRandomNumber()], + ["Network", getRandomNumber()], + ]; +} + +export const options = { + width: 400, + height: 120, + redFrom: 90, + redTo: 100, + yellowFrom: 75, + yellowTo: 90, + minorTicks: 5, +}; + +export function App() { + const [data, setData] = useState(getData); + + useEffect(() => { + const id = setInterval(() => { + setData(getData()); + }, 3000); + + return () => { + clearInterval(id); + }; + }); + + return ( + + ); +} diff --git a/sandboxes/gauge/index.js b/sandboxes/gauge/index.js deleted file mode 100644 index 463cf5e8..00000000 --- a/sandboxes/gauge/index.js +++ /dev/null @@ -1,67 +0,0 @@ -import React from "react"; -import ReactDOM from "react-dom"; -import Chart from "react-google-charts"; - -const options = { - width: 400, - height: 120, - redFrom: 90, - redTo: 100, - yellowFrom: 75, - yellowTo: 90, - minorTicks: 5 -}; - -const getRandomNumber = () => { - return Math.random() * 100; -}; - -class App extends React.Component { - state = { - networkSpeed: 1, - memory: 80, - cpu: 55 - }; - intervalID = null; - getData = () => { - return [ - ["Label", "Value"], - ["Memory", this.state.memory], - ["CPU", this.state.cpu], - ["Network", this.state.networkSpeed] - ]; - }; - componentWillUnmount() { - if (this.intervalID === null) return; - clearInterval(this.intervalID); - } - componentDidMount() { - this.intervalID = setInterval(() => { - this.setState(state => { - return { - ...state, - networkSpeed: getRandomNumber(), - cpu: getRandomNumber(), - memory: getRandomNumber() - }; - }); - }, 3000); - } - render() { - // console.log(this.getData()); - return ( -
- -
- ); - } -} - -const rootElement = document.getElementById("root"); -ReactDOM.render(, rootElement); diff --git a/sandboxes/gauge/index.tsx b/sandboxes/gauge/index.tsx new file mode 100644 index 00000000..5021e58b --- /dev/null +++ b/sandboxes/gauge/index.tsx @@ -0,0 +1,7 @@ +import React from "react"; +import { render } from "react-dom"; + +import { App } from "./App"; + +const rootElement = document.getElementById("root"); +render(, rootElement); diff --git a/sandboxes/gauge/package.json b/sandboxes/gauge/package.json index f42fb0fc..f0a582c1 100644 --- a/sandboxes/gauge/package.json +++ b/sandboxes/gauge/package.json @@ -1,9 +1,15 @@ { - "description": "Demo of Google GaugeChart", - "main": "index.js", + "main": "index.tsx", "dependencies": { - "react": "^16", - "react-dom": "^16", - "react-google-charts": ">2.0.0" + "prop-types": "15.7.2", + "react": "17.0.2", + "react-dom": "17.0.2", + "react-google-charts": "^3.0.15", + "react-scripts": "4.0.3" + }, + "devDependencies": { + "@types/react": "17.0.20", + "@types/react-dom": "17.0.9", + "typescript": "4.4.2" } } diff --git a/sandboxes/geo-chart/App.tsx b/sandboxes/geo-chart/App.tsx new file mode 100644 index 00000000..11b59d7b --- /dev/null +++ b/sandboxes/geo-chart/App.tsx @@ -0,0 +1,35 @@ +import React from "react"; +import { Chart } from "react-google-charts"; + +export const data = [ + ["Country", "Popularity"], + ["Germany", 200], + ["United States", 300], + ["Brazil", 400], + ["Canada", 500], + ["France", 600], + ["RU", 700], +]; + +export function App() { + return ( + { + const chart = chartWrapper.getChart(); + const selection = chart.getSelection(); + if (selection.length === 0) return; + const region = data[selection[0].row + 1]; + console.log("Selected : " + region); + }, + }, + ]} + chartType="GeoChart" + width="100%" + height="400px" + data={data} + /> + ); +} diff --git a/sandboxes/geo-chart/index.js b/sandboxes/geo-chart/index.js deleted file mode 100644 index 8b8d4326..00000000 --- a/sandboxes/geo-chart/index.js +++ /dev/null @@ -1,41 +0,0 @@ -import * as React from "react"; -import { render } from "react-dom"; -import { Chart } from "react-google-charts"; - -const data = [ - ["Country", "Popularity"], - ["Germany", 200], - ["United States", 300], - ["Brazil", 400], - ["Canada", 500], - ["France", 600], - ["RU", 700] -]; -class App extends React.Component { - render() { - return ( -
- { - const chart = chartWrapper.getChart(); - const selection = chart.getSelection(); - if (selection.length === 0) return; - const region = data[selection[0].row + 1]; - console.log("Selected : " + region); - } - } - ]} - chartType="GeoChart" - width="100%" - height="400px" - data={data} - /> -
- ); - } -} - -render(, document.getElementById("root")); diff --git a/sandboxes/geo-chart/index.tsx b/sandboxes/geo-chart/index.tsx new file mode 100644 index 00000000..5021e58b --- /dev/null +++ b/sandboxes/geo-chart/index.tsx @@ -0,0 +1,7 @@ +import React from "react"; +import { render } from "react-dom"; + +import { App } from "./App"; + +const rootElement = document.getElementById("root"); +render(, rootElement); diff --git a/sandboxes/geo-chart/package.json b/sandboxes/geo-chart/package.json index 6181b976..f0a582c1 100644 --- a/sandboxes/geo-chart/package.json +++ b/sandboxes/geo-chart/package.json @@ -1,9 +1,15 @@ { - "description": "Demo of Google GeoChart", - "main": "index.js", + "main": "index.tsx", "dependencies": { - "react": "^16", - "react-dom": "^16", - "react-google-charts": ">2.0.0" + "prop-types": "15.7.2", + "react": "17.0.2", + "react-dom": "17.0.2", + "react-google-charts": "^3.0.15", + "react-scripts": "4.0.3" + }, + "devDependencies": { + "@types/react": "17.0.20", + "@types/react-dom": "17.0.9", + "typescript": "4.4.2" } } diff --git a/sandboxes/histogram/index.js b/sandboxes/histogram/App.tsx similarity index 66% rename from sandboxes/histogram/index.js rename to sandboxes/histogram/App.tsx index 31239213..8ed0f97c 100644 --- a/sandboxes/histogram/index.js +++ b/sandboxes/histogram/App.tsx @@ -1,9 +1,7 @@ import React from "react"; -import ReactDOM from "react-dom"; -import Chart from "react-google-charts"; -// Ref : https://developers.google.com/chart/interactive/docs/gallery/histogram +import { Chart } from "react-google-charts"; -const data = [ +export const data = [ ["Dinosaur", "Length"], ["Acrocanthosaurus (top-spined lizard)", 12.2], ["Albertosaurus (Alberta lizard)", 9.1], @@ -32,27 +30,22 @@ const data = [ ["Supersaurus (super lizard)", 30.5], ["Tyrannosaurus (tyrant lizard)", 15.2], ["Ultrasaurus (ultra lizard)", 30.5], - ["Velociraptor (swift robber)", 1.8] + ["Velociraptor (swift robber)", 1.8], ]; -const options = { + +export const options = { title: "Lengths of dinosaurs, in meters", - legend: { position: "none" } + legend: { position: "none" }, }; -class App extends React.Component { - render() { - return ( -
- -
- ); - } -} -const rootElement = document.getElementById("root"); -ReactDOM.render(, rootElement); +export function App() { + return ( + + ); +} diff --git a/sandboxes/histogram/index.tsx b/sandboxes/histogram/index.tsx new file mode 100644 index 00000000..5021e58b --- /dev/null +++ b/sandboxes/histogram/index.tsx @@ -0,0 +1,7 @@ +import React from "react"; +import { render } from "react-dom"; + +import { App } from "./App"; + +const rootElement = document.getElementById("root"); +render(, rootElement); diff --git a/sandboxes/histogram/package.json b/sandboxes/histogram/package.json index d38dc1e9..f0a582c1 100644 --- a/sandboxes/histogram/package.json +++ b/sandboxes/histogram/package.json @@ -1,9 +1,15 @@ { - "description": "Demo of Google HistogramChart", - "main": "index.js", + "main": "index.tsx", "dependencies": { - "react": "^16", - "react-dom": "^16", - "react-google-charts": ">2.0.0" + "prop-types": "15.7.2", + "react": "17.0.2", + "react-dom": "17.0.2", + "react-google-charts": "^3.0.15", + "react-scripts": "4.0.3" + }, + "devDependencies": { + "@types/react": "17.0.20", + "@types/react-dom": "17.0.9", + "typescript": "4.4.2" } } diff --git a/sandboxes/line-chart-intervals/App.tsx b/sandboxes/line-chart-intervals/App.tsx new file mode 100644 index 00000000..1a642b25 --- /dev/null +++ b/sandboxes/line-chart-intervals/App.tsx @@ -0,0 +1,43 @@ +import React from "react"; +import { Chart } from "react-google-charts"; + +export const data = [ + [ + { type: "number", label: "x" }, + { type: "number", label: "values" }, + { id: "i0", type: "number", role: "interval" }, + { id: "i1", type: "number", role: "interval" }, + { id: "i2", type: "number", role: "interval" }, + { id: "i2", type: "number", role: "interval" }, + { id: "i2", type: "number", role: "interval" }, + { id: "i2", type: "number", role: "interval" }, + ], + [1, 100, 90, 110, 85, 96, 104, 120], + [2, 120, 95, 130, 90, 113, 124, 140], + [3, 130, 105, 140, 100, 117, 133, 139], + [4, 90, 85, 95, 85, 88, 92, 95], + [5, 70, 74, 63, 67, 69, 70, 72], + [6, 30, 39, 22, 21, 28, 34, 40], + [7, 80, 77, 83, 70, 77, 85, 90], + [8, 100, 90, 110, 85, 95, 102, 110], +]; + +export const options = { + title: "Line intervals, default", + curveType: "function", + lineWidth: 4, + intervals: { style: "line" }, + legend: "none", +}; + +export function App() { + return ( + + ); +} diff --git a/sandboxes/line-chart-intervals/index.tsx b/sandboxes/line-chart-intervals/index.tsx new file mode 100644 index 00000000..5021e58b --- /dev/null +++ b/sandboxes/line-chart-intervals/index.tsx @@ -0,0 +1,7 @@ +import React from "react"; +import { render } from "react-dom"; + +import { App } from "./App"; + +const rootElement = document.getElementById("root"); +render(, rootElement); diff --git a/sandboxes/line-chart-intervals/package.json b/sandboxes/line-chart-intervals/package.json new file mode 100644 index 00000000..f0a582c1 --- /dev/null +++ b/sandboxes/line-chart-intervals/package.json @@ -0,0 +1,15 @@ +{ + "main": "index.tsx", + "dependencies": { + "prop-types": "15.7.2", + "react": "17.0.2", + "react-dom": "17.0.2", + "react-google-charts": "^3.0.15", + "react-scripts": "4.0.3" + }, + "devDependencies": { + "@types/react": "17.0.20", + "@types/react-dom": "17.0.9", + "typescript": "4.4.2" + } +} diff --git a/sandboxes/line-chart/App.tsx b/sandboxes/line-chart/App.tsx new file mode 100644 index 00000000..98658989 --- /dev/null +++ b/sandboxes/line-chart/App.tsx @@ -0,0 +1,28 @@ +import React from "react"; +import { Chart } from "react-google-charts"; + +export const data = [ + ["Year", "Sales", "Expenses"], + ["2004", 1000, 400], + ["2005", 1170, 460], + ["2006", 660, 1120], + ["2007", 1030, 540], +]; + +export const options = { + title: "Company Performance", + curveType: "function", + legend: { position: "bottom" }, +}; + +export function App() { + return ( + + ); +} diff --git a/sandboxes/line-chart/index.tsx b/sandboxes/line-chart/index.tsx new file mode 100644 index 00000000..5021e58b --- /dev/null +++ b/sandboxes/line-chart/index.tsx @@ -0,0 +1,7 @@ +import React from "react"; +import { render } from "react-dom"; + +import { App } from "./App"; + +const rootElement = document.getElementById("root"); +render(, rootElement); diff --git a/sandboxes/line-chart/package.json b/sandboxes/line-chart/package.json new file mode 100644 index 00000000..f0a582c1 --- /dev/null +++ b/sandboxes/line-chart/package.json @@ -0,0 +1,15 @@ +{ + "main": "index.tsx", + "dependencies": { + "prop-types": "15.7.2", + "react": "17.0.2", + "react-dom": "17.0.2", + "react-google-charts": "^3.0.15", + "react-scripts": "4.0.3" + }, + "devDependencies": { + "@types/react": "17.0.20", + "@types/react-dom": "17.0.9", + "typescript": "4.4.2" + } +} diff --git a/sandboxes/line/App.tsx b/sandboxes/line/App.tsx new file mode 100644 index 00000000..a69c874c --- /dev/null +++ b/sandboxes/line/App.tsx @@ -0,0 +1,44 @@ +import React from "react"; +import { Chart } from "react-google-charts"; + +export const data = [ + [ + "Day", + "Guardians of the Galaxy", + "The Avengers", + "Transformers: Age of Extinction", + ], + [1, 37.8, 80.8, 41.8], + [2, 30.9, 69.5, 32.4], + [3, 25.4, 57, 25.7], + [4, 11.7, 18.8, 10.5], + [5, 11.9, 17.6, 10.4], + [6, 8.8, 13.6, 7.7], + [7, 7.6, 12.3, 9.6], + [8, 12.3, 29.2, 10.6], + [9, 16.9, 42.9, 14.8], + [10, 12.8, 30.9, 11.6], + [11, 5.3, 7.9, 4.7], + [12, 6.6, 8.4, 5.2], + [13, 4.8, 6.3, 3.6], + [14, 4.2, 6.2, 3.4], +]; + +export const options = { + chart: { + title: "Box Office Earnings in First Two Weeks of Opening", + subtitle: "in millions of dollars (USD)", + }, +}; + +export function App() { + return ( + + ); +} diff --git a/sandboxes/line/index.tsx b/sandboxes/line/index.tsx new file mode 100644 index 00000000..5021e58b --- /dev/null +++ b/sandboxes/line/index.tsx @@ -0,0 +1,7 @@ +import React from "react"; +import { render } from "react-dom"; + +import { App } from "./App"; + +const rootElement = document.getElementById("root"); +render(, rootElement); diff --git a/sandboxes/line/package.json b/sandboxes/line/package.json new file mode 100644 index 00000000..f0a582c1 --- /dev/null +++ b/sandboxes/line/package.json @@ -0,0 +1,15 @@ +{ + "main": "index.tsx", + "dependencies": { + "prop-types": "15.7.2", + "react": "17.0.2", + "react-dom": "17.0.2", + "react-google-charts": "^3.0.15", + "react-scripts": "4.0.3" + }, + "devDependencies": { + "@types/react": "17.0.20", + "@types/react-dom": "17.0.9", + "typescript": "4.4.2" + } +} diff --git a/sandboxes/linechart/index.js b/sandboxes/linechart/index.js deleted file mode 100644 index ca9d0123..00000000 --- a/sandboxes/linechart/index.js +++ /dev/null @@ -1,35 +0,0 @@ -import React from "react"; -import ReactDOM from "react-dom"; -import Chart from "react-google-charts"; -// Ref : https://developers.google.com/chart/interactive/docs/gallery/histogram - -const data = [ - ["Year", "Sales", "Expenses"], - ["2004", 1000, 400], - ["2005", 1170, 460], - ["2006", 660, 1120], - ["2007", 1030, 540] -]; -const options = { - title: "Company Performance", - curveType: "function", - legend: { position: "bottom" } -}; -class App extends React.Component { - render() { - return ( -
- -
- ); - } -} - -const rootElement = document.getElementById("root"); -ReactDOM.render(, rootElement); diff --git a/sandboxes/linechart/package.json b/sandboxes/linechart/package.json deleted file mode 100644 index 8ef89e1d..00000000 --- a/sandboxes/linechart/package.json +++ /dev/null @@ -1,9 +0,0 @@ -{ - "description": "Demo of Google LineChart", - "main": "index.js", - "dependencies": { - "react": "^16", - "react-dom": "^16", - "react-google-charts": ">2.0.0" - } -} diff --git a/sandboxes/material-bar-chart/index.js b/sandboxes/material-bar-chart/index.js deleted file mode 100644 index ad664245..00000000 --- a/sandboxes/material-bar-chart/index.js +++ /dev/null @@ -1,28 +0,0 @@ -import React from "react"; -import ReactDOM from "react-dom"; -import Chart from "react-google-charts"; - -const data = [ - ["Year", "Visitations", { role: "style" }], - ["2010", 10, "color: gray"], - ["2020", 14, "color: #76A7FA"], - ["2030", 16, "color: blue"], - ["2040", 22, "stroke-color: #703593; stroke-width: 4; fill-color: #C5A5CF"], - [ - "2050", - 28, - "stroke-color: #871B47; stroke-opacity: 0.6; stroke-width: 8; fill-color: #BC5679; fill-opacity: 0.2" - ] -]; -class App extends React.Component { - render() { - return ( -
- -
- ); - } -} - -const rootElement = document.getElementById("root"); -ReactDOM.render(, rootElement); diff --git a/sandboxes/material-bar-chart/package.json b/sandboxes/material-bar-chart/package.json deleted file mode 100644 index c010ddff..00000000 --- a/sandboxes/material-bar-chart/package.json +++ /dev/null @@ -1,9 +0,0 @@ -{ - "description": "Demo of Google Material BarChart", - "main": "index.js", - "dependencies": { - "react": "^16", - "react-dom": "^16", - "react-google-charts": ">2.0.0" - } -} diff --git a/sandboxes/material-line-chart/index.js b/sandboxes/material-line-chart/index.js deleted file mode 100644 index 3ecfa764..00000000 --- a/sandboxes/material-line-chart/index.js +++ /dev/null @@ -1,36 +0,0 @@ -import React from "react"; -import ReactDOM from "react-dom"; -import Chart from "react-google-charts"; -// Ref : https://developers.google.com/chart/interactive/docs/gallery/histogram - -const data = [ - ["Year", "Sales", "Expenses"], - ["2004", 1000, 400], - ["2005", 1170, 460], - ["2006", 660, 1120], - ["2007", 1030, 540] -]; -const options = { - chart: { - title: "Company Performance", - subtitle: "Sales & Expenses" - } -}; -class App extends React.Component { - render() { - return ( -
- -
- ); - } -} - -const rootElement = document.getElementById("root"); -ReactDOM.render(, rootElement); diff --git a/sandboxes/material-line-chart/package.json b/sandboxes/material-line-chart/package.json deleted file mode 100644 index 2e341413..00000000 --- a/sandboxes/material-line-chart/package.json +++ /dev/null @@ -1,9 +0,0 @@ -{ - "description": "Demo of Google Material LineChart", - "main": "index.js", - "dependencies": { - "react": "^16", - "react-dom": "^16", - "react-google-charts": ">2.0.0" - } -} diff --git a/sandboxes/org-chart/App.tsx b/sandboxes/org-chart/App.tsx new file mode 100644 index 00000000..5ab09798 --- /dev/null +++ b/sandboxes/org-chart/App.tsx @@ -0,0 +1,40 @@ +import React from "react"; +import { Chart } from "react-google-charts"; + +export const data = [ + [ + { + v: "Mike", + f: 'Mike
President
', + }, + "", + "The President", + ], + [ + { + v: "Jim", + f: 'Jim
Vice President
', + }, + "Mike", + "VP", + ], + ["Alice", "Mike", ""], + ["Bob", "Jim", "Bob Sponge"], + ["Carol", "Bob", ""], +]; + +export const options = { + allowHtml: true, +}; + +export function App() { + return ( + + ); +} diff --git a/sandboxes/org-chart/index.js b/sandboxes/org-chart/index.js deleted file mode 100644 index b48a70a5..00000000 --- a/sandboxes/org-chart/index.js +++ /dev/null @@ -1,46 +0,0 @@ -import React from "react"; -import ReactDOM from "react-dom"; -import Chart from "react-google-charts"; - -class App extends React.Component { - render() { - return ( -
- President
' - }, - "", - "The President" - ], - [ - { - v: "Jim", - f: - 'Jim
Vice President
' - }, - "Mike", - "VP" - ], - ["Alice", "Mike", ""], - ["Bob", "Jim", "Bob Sponge"], - ["Carol", "Bob", ""] - ]} - options={{ - allowHtml: true - }} - width="100%" - height="400px" - /> - - ); - } -} - -const rootElement = document.getElementById("root"); -ReactDOM.render(, rootElement); diff --git a/sandboxes/org-chart/index.tsx b/sandboxes/org-chart/index.tsx new file mode 100644 index 00000000..5021e58b --- /dev/null +++ b/sandboxes/org-chart/index.tsx @@ -0,0 +1,7 @@ +import React from "react"; +import { render } from "react-dom"; + +import { App } from "./App"; + +const rootElement = document.getElementById("root"); +render(, rootElement); diff --git a/sandboxes/org-chart/package.json b/sandboxes/org-chart/package.json index 52e5af5b..f0a582c1 100644 --- a/sandboxes/org-chart/package.json +++ b/sandboxes/org-chart/package.json @@ -1,9 +1,15 @@ { - "description": "Demo of Google OrgChart", - "main": "index.js", + "main": "index.tsx", "dependencies": { - "react": "^16", - "react-dom": "^16", - "react-google-charts": ">2.0.0" + "prop-types": "15.7.2", + "react": "17.0.2", + "react-dom": "17.0.2", + "react-google-charts": "^3.0.15", + "react-scripts": "4.0.3" + }, + "devDependencies": { + "@types/react": "17.0.20", + "@types/react-dom": "17.0.9", + "typescript": "4.4.2" } } diff --git a/sandboxes/pie-chart-donut/App.tsx b/sandboxes/pie-chart-donut/App.tsx new file mode 100644 index 00000000..8ed9e2d0 --- /dev/null +++ b/sandboxes/pie-chart-donut/App.tsx @@ -0,0 +1,29 @@ +import React from "react"; +import { Chart } from "react-google-charts"; + +export const data = [ + ["Task", "Hours per Day"], + ["Work", 11], + ["Eat", 2], + ["Commute", 2], + ["Watch TV", 2], + ["Sleep", 7], // CSS-style declaration +]; + +export const options = { + title: "My Daily Activities", + pieHole: 0.4, + is3D: false, +}; + +export function App() { + return ( + + ); +} diff --git a/sandboxes/pie-chart-donut/index.tsx b/sandboxes/pie-chart-donut/index.tsx new file mode 100644 index 00000000..5021e58b --- /dev/null +++ b/sandboxes/pie-chart-donut/index.tsx @@ -0,0 +1,7 @@ +import React from "react"; +import { render } from "react-dom"; + +import { App } from "./App"; + +const rootElement = document.getElementById("root"); +render(, rootElement); diff --git a/sandboxes/pie-chart-donut/package.json b/sandboxes/pie-chart-donut/package.json new file mode 100644 index 00000000..f0a582c1 --- /dev/null +++ b/sandboxes/pie-chart-donut/package.json @@ -0,0 +1,15 @@ +{ + "main": "index.tsx", + "dependencies": { + "prop-types": "15.7.2", + "react": "17.0.2", + "react-dom": "17.0.2", + "react-google-charts": "^3.0.15", + "react-scripts": "4.0.3" + }, + "devDependencies": { + "@types/react": "17.0.20", + "@types/react-dom": "17.0.9", + "typescript": "4.4.2" + } +} diff --git a/sandboxes/pie-chart/App.tsx b/sandboxes/pie-chart/App.tsx new file mode 100644 index 00000000..62f4d0f9 --- /dev/null +++ b/sandboxes/pie-chart/App.tsx @@ -0,0 +1,27 @@ +import React from "react"; +import { Chart } from "react-google-charts"; + +export const data = [ + ["Task", "Hours per Day"], + ["Work", 11], + ["Eat", 2], + ["Commute", 2], + ["Watch TV", 2], + ["Sleep", 7], +]; + +export const options = { + title: "My Daily Activities", +}; + +export function App() { + return ( + + ); +} diff --git a/sandboxes/pie-chart/index.js b/sandboxes/pie-chart/index.js deleted file mode 100644 index 82628543..00000000 --- a/sandboxes/pie-chart/index.js +++ /dev/null @@ -1,63 +0,0 @@ -import React from "react"; -import ReactDOM from "react-dom"; -import Chart from "react-google-charts"; - -const pieOptions = { - title: "", - pieHole: 0.6, - slices: [ - { - color: "#2BB673" - }, - { - color: "#d91e48" - }, - { - color: "#007fad" - }, - { - color: "#e9a227" - } - ], - legend: { - position: "bottom", - alignment: "center", - textStyle: { - color: "233238", - fontSize: 14 - } - }, - tooltip: { - showColorCode: true - }, - chartArea: { - left: 0, - top: 0, - width: "100%", - height: "80%" - }, - fontName: "Roboto" -}; -class App extends React.Component { - state = { - chartImageURI: "" - }; - render() { - return ( -
- -
- ); - } -} - -const rootElement = document.getElementById("root"); -ReactDOM.render(, rootElement); diff --git a/sandboxes/pie-chart/index.tsx b/sandboxes/pie-chart/index.tsx new file mode 100644 index 00000000..5021e58b --- /dev/null +++ b/sandboxes/pie-chart/index.tsx @@ -0,0 +1,7 @@ +import React from "react"; +import { render } from "react-dom"; + +import { App } from "./App"; + +const rootElement = document.getElementById("root"); +render(, rootElement); diff --git a/sandboxes/pie-chart/package.json b/sandboxes/pie-chart/package.json index 6181b976..f0a582c1 100644 --- a/sandboxes/pie-chart/package.json +++ b/sandboxes/pie-chart/package.json @@ -1,9 +1,15 @@ { - "description": "Demo of Google GeoChart", - "main": "index.js", + "main": "index.tsx", "dependencies": { - "react": "^16", - "react-dom": "^16", - "react-google-charts": ">2.0.0" + "prop-types": "15.7.2", + "react": "17.0.2", + "react-dom": "17.0.2", + "react-google-charts": "^3.0.15", + "react-scripts": "4.0.3" + }, + "devDependencies": { + "@types/react": "17.0.20", + "@types/react-dom": "17.0.9", + "typescript": "4.4.2" } } diff --git a/sandboxes/sankey/App.tsx b/sandboxes/sankey/App.tsx new file mode 100644 index 00000000..c3d45e4b --- /dev/null +++ b/sandboxes/sankey/App.tsx @@ -0,0 +1,26 @@ +import React from "react"; +import { Chart } from "react-google-charts"; + +export const data = [ + ["From", "To", "Weight"], + ["A", "X", 5], + ["A", "Y", 7], + ["A", "Z", 6], + ["B", "X", 2], + ["B", "Y", 9], + ["B", "Z", 4], +]; + +export const options = {}; + +export function App() { + return ( + + ); +} diff --git a/sandboxes/sankey/index.js b/sandboxes/sankey/index.js deleted file mode 100644 index 42888229..00000000 --- a/sandboxes/sankey/index.js +++ /dev/null @@ -1,33 +0,0 @@ -import React from "react"; -import ReactDOM from "react-dom"; -import Chart from "react-google-charts"; -// Ref : https://developers.google.com/chart/interactive/docs/gallery/histogram - -const data = [ - ["From", "To", "Weight"], - ["A", "X", 5], - ["A", "Y", 7], - ["A", "Z", 6], - ["B", "X", 2], - ["B", "Y", 9], - ["B", "Z", 4] -]; -const options = {}; -class App extends React.Component { - render() { - return ( -
- -
- ); - } -} - -const rootElement = document.getElementById("root"); -ReactDOM.render(, rootElement); diff --git a/sandboxes/sankey/index.tsx b/sandboxes/sankey/index.tsx new file mode 100644 index 00000000..5021e58b --- /dev/null +++ b/sandboxes/sankey/index.tsx @@ -0,0 +1,7 @@ +import React from "react"; +import { render } from "react-dom"; + +import { App } from "./App"; + +const rootElement = document.getElementById("root"); +render(, rootElement); diff --git a/sandboxes/sankey/package.json b/sandboxes/sankey/package.json index abafef3b..f0a582c1 100644 --- a/sandboxes/sankey/package.json +++ b/sandboxes/sankey/package.json @@ -1,9 +1,15 @@ { - "description": "Demo of Google SankeyChart", - "main": "index.js", + "main": "index.tsx", "dependencies": { - "react": "^16", - "react-dom": "^16", - "react-google-charts": ">2.0.0" + "prop-types": "15.7.2", + "react": "17.0.2", + "react-dom": "17.0.2", + "react-google-charts": "^3.0.15", + "react-scripts": "4.0.3" + }, + "devDependencies": { + "@types/react": "17.0.20", + "@types/react-dom": "17.0.9", + "typescript": "4.4.2" } } diff --git a/sandboxes/scatter-chart-diff/App.tsx b/sandboxes/scatter-chart-diff/App.tsx new file mode 100644 index 00000000..779bad60 --- /dev/null +++ b/sandboxes/scatter-chart-diff/App.tsx @@ -0,0 +1,34 @@ +import React from "react"; +import { Chart } from "react-google-charts"; + +const dataOld = [ + ["x", "y"], + [1, 1000], + [2, 1170], + [3, 660], + [4, 1030], +]; + +const dataNew = [ + ["x", "y"], + [1.1, 1100], + [2.1, 1000], + [2.8, 960], + [4.4, 1300], +]; + +export const diffdata = { + old: dataOld, + new: dataNew, +}; + +export function App() { + return ( + + ); +} diff --git a/sandboxes/scatter-chart-diff/index.tsx b/sandboxes/scatter-chart-diff/index.tsx new file mode 100644 index 00000000..5021e58b --- /dev/null +++ b/sandboxes/scatter-chart-diff/index.tsx @@ -0,0 +1,7 @@ +import React from "react"; +import { render } from "react-dom"; + +import { App } from "./App"; + +const rootElement = document.getElementById("root"); +render(, rootElement); diff --git a/sandboxes/scatter-chart-diff/package.json b/sandboxes/scatter-chart-diff/package.json new file mode 100644 index 00000000..f0a582c1 --- /dev/null +++ b/sandboxes/scatter-chart-diff/package.json @@ -0,0 +1,15 @@ +{ + "main": "index.tsx", + "dependencies": { + "prop-types": "15.7.2", + "react": "17.0.2", + "react-dom": "17.0.2", + "react-google-charts": "^3.0.15", + "react-scripts": "4.0.3" + }, + "devDependencies": { + "@types/react": "17.0.20", + "@types/react-dom": "17.0.9", + "typescript": "4.4.2" + } +} diff --git a/sandboxes/scatter-chart/App.tsx b/sandboxes/scatter-chart/App.tsx new file mode 100644 index 00000000..87880533 --- /dev/null +++ b/sandboxes/scatter-chart/App.tsx @@ -0,0 +1,32 @@ +import React from "react"; +import { Chart } from "react-google-charts"; + +export const data = [ + ["Year", "Sales", "Expenses"], + ["2004", 1000, 400], + ["2005", 1170, 460], + ["2006", 660, 1120], + ["2008", 1030, 540], + ["2009", 1000, 400], + ["2010", 1170, 460], + ["2011", 660, 1120], + ["2012", 1030, 540], +]; + +export const options = { + title: "Company Performance", + curveType: "function", + legend: { position: "bottom" }, +}; + +export function App() { + return ( + + ); +} diff --git a/sandboxes/scatter-chart/index.js b/sandboxes/scatter-chart/index.js deleted file mode 100644 index 1e1eb3de..00000000 --- a/sandboxes/scatter-chart/index.js +++ /dev/null @@ -1,40 +0,0 @@ -import React from "react"; -import ReactDOM from "react-dom"; -import Chart from "react-google-charts"; -// Ref : https://developers.google.com/chart/interactive/docs/gallery/histogram - -const data = [ - ["Year", "Sales", "Expenses"], - ["2004", 1000, 400], - ["2005", 1170, 460], - ["2006", 660, 1120], - ["2008", 1030, 540], - ["2009", 1000, 400], - ["2010", 1170, 460], - ["2011", 660, 1120], - ["2012", 1030, 540] -]; -const options = { - title: "Company Performance", - curveType: "function", - legend: { position: "bottom" } -}; -class App extends React.Component { - render() { - return ( -
- -
- ); - } -} - -const rootElement = document.getElementById("root"); -ReactDOM.render(, rootElement); diff --git a/sandboxes/scatter-chart/index.tsx b/sandboxes/scatter-chart/index.tsx new file mode 100644 index 00000000..5021e58b --- /dev/null +++ b/sandboxes/scatter-chart/index.tsx @@ -0,0 +1,7 @@ +import React from "react"; +import { render } from "react-dom"; + +import { App } from "./App"; + +const rootElement = document.getElementById("root"); +render(, rootElement); diff --git a/sandboxes/scatter-chart/package.json b/sandboxes/scatter-chart/package.json index b614a869..f0a582c1 100644 --- a/sandboxes/scatter-chart/package.json +++ b/sandboxes/scatter-chart/package.json @@ -1,9 +1,15 @@ { - "description": "Demo of Google ScatterChart", - "main": "index.js", + "main": "index.tsx", "dependencies": { - "react": "^16", - "react-dom": "^16", - "react-google-charts": ">2.0.0" + "prop-types": "15.7.2", + "react": "17.0.2", + "react-dom": "17.0.2", + "react-google-charts": "^3.0.15", + "react-scripts": "4.0.3" + }, + "devDependencies": { + "@types/react": "17.0.20", + "@types/react-dom": "17.0.9", + "typescript": "4.4.2" } } diff --git a/sandboxes/stepped-area-chart/App.tsx b/sandboxes/stepped-area-chart/App.tsx new file mode 100644 index 00000000..e0096e20 --- /dev/null +++ b/sandboxes/stepped-area-chart/App.tsx @@ -0,0 +1,29 @@ +import React from "react"; +import { Chart } from "react-google-charts"; + +export const data = [ + ["Director (Year)", "Rotten Tomatoes", "IMDB"], + ["Alfred Hitchcock (1935)", 8.4, 7.9], + ["Ralph Thomas (1959)", 6.9, 6.5], + ["Don Sharp (1978)", 6.5, 6.4], + ["James Hawes (2008)", 4.4, 6.2], +]; + +export const options = { + title: "The decline of 'The 39 Steps'", + vAxis: { title: "Accumulated Rating" }, + isStacked: true, +}; + +export function App() { + return ( + + ); +} diff --git a/sandboxes/stepped-area-chart/index.js b/sandboxes/stepped-area-chart/index.js deleted file mode 100644 index bdd3b701..00000000 --- a/sandboxes/stepped-area-chart/index.js +++ /dev/null @@ -1,36 +0,0 @@ -import React from "react"; -import ReactDOM from "react-dom"; -import Chart from "react-google-charts"; -// Ref : https://developers.google.com/chart/interactive/docs/gallery/histogram - -const data = [ - ["Director (Year)", "Rotten Tomatoes", "IMDB"], - ["Alfred Hitchcock (1935)", 8.4, 7.9], - ["Ralph Thomas (1959)", 6.9, 6.5], - ["Don Sharp (1978)", 6.5, 6.4], - ["James Hawes (2008)", 4.4, 6.2] -]; -const options = { - title: "The decline of 'The 39 Steps'", - vAxis: { title: "Accumulated Rating" }, - isStacked: true -}; -class App extends React.Component { - render() { - return ( -
- -
- ); - } -} - -const rootElement = document.getElementById("root"); -ReactDOM.render(, rootElement); diff --git a/sandboxes/stepped-area-chart/index.tsx b/sandboxes/stepped-area-chart/index.tsx new file mode 100644 index 00000000..5021e58b --- /dev/null +++ b/sandboxes/stepped-area-chart/index.tsx @@ -0,0 +1,7 @@ +import React from "react"; +import { render } from "react-dom"; + +import { App } from "./App"; + +const rootElement = document.getElementById("root"); +render(, rootElement); diff --git a/sandboxes/stepped-area-chart/package.json b/sandboxes/stepped-area-chart/package.json index 764dd1c3..f0a582c1 100644 --- a/sandboxes/stepped-area-chart/package.json +++ b/sandboxes/stepped-area-chart/package.json @@ -1,9 +1,15 @@ { - "description": "Demo of Google SteppedAreaChart", - "main": "index.js", + "main": "index.tsx", "dependencies": { - "react": "^16", - "react-dom": "^16", - "react-google-charts": ">2.0.0" + "prop-types": "15.7.2", + "react": "17.0.2", + "react-dom": "17.0.2", + "react-google-charts": "^3.0.15", + "react-scripts": "4.0.3" + }, + "devDependencies": { + "@types/react": "17.0.20", + "@types/react-dom": "17.0.9", + "typescript": "4.4.2" } } diff --git a/sandboxes/table/App.tsx b/sandboxes/table/App.tsx new file mode 100644 index 00000000..4a8b0b95 --- /dev/null +++ b/sandboxes/table/App.tsx @@ -0,0 +1,29 @@ +import React from "react"; +import { Chart } from "react-google-charts"; + +export const data = [ + ["Name", "Salary", "Full time employee"], + ["Mike", { v: 10000, f: "$10,000" }, true], + ["Jim", { v: 8000, f: "$8,000" }, false], + ["Alice", { v: 12500, f: "$12,500" }, true], + ["Bob", { v: 7000, f: "$7,000" }, true], +]; + +export const options = { + title: "Company Performance", + curveType: "function", + legend: { position: "bottom" }, + pageSize: 1, +}; + +export function App() { + return ( + + ); +} diff --git a/sandboxes/table/index.js b/sandboxes/table/index.js deleted file mode 100644 index dc540549..00000000 --- a/sandboxes/table/index.js +++ /dev/null @@ -1,36 +0,0 @@ -import React from "react"; -import ReactDOM from "react-dom"; -import Chart from "react-google-charts"; -// Ref : https://developers.google.com/chart/interactive/docs/gallery/histogram - -const data = [ - ["Name", "Salary", "Full time employee"], - ["Mike", { v: 10000, f: "$10,000" }, true], - ["Jim", { v: 8000, f: "$8,000" }, false], - ["Alice", { v: 12500, f: "$12,500" }, true], - ["Bob", { v: 7000, f: "$7,000" }, true] -]; -const options = { - title: "Company Performance", - curveType: "function", - legend: { position: "bottom" }, - pageSize: 1 -}; -class App extends React.Component { - render() { - return ( -
- -
- ); - } -} - -const rootElement = document.getElementById("root"); -ReactDOM.render(, rootElement); diff --git a/sandboxes/table/index.tsx b/sandboxes/table/index.tsx new file mode 100644 index 00000000..5021e58b --- /dev/null +++ b/sandboxes/table/index.tsx @@ -0,0 +1,7 @@ +import React from "react"; +import { render } from "react-dom"; + +import { App } from "./App"; + +const rootElement = document.getElementById("root"); +render(, rootElement); diff --git a/sandboxes/table/package.json b/sandboxes/table/package.json index c7b22d8c..f0a582c1 100644 --- a/sandboxes/table/package.json +++ b/sandboxes/table/package.json @@ -1,9 +1,15 @@ { - "description": "Demo of Google TableChart", - "main": "index.js", + "main": "index.tsx", "dependencies": { - "react": "^16", - "react-dom": "^16", - "react-google-charts": ">2.0.0" + "prop-types": "15.7.2", + "react": "17.0.2", + "react-dom": "17.0.2", + "react-google-charts": "^3.0.15", + "react-scripts": "4.0.3" + }, + "devDependencies": { + "@types/react": "17.0.20", + "@types/react-dom": "17.0.9", + "typescript": "4.4.2" } } diff --git a/sandboxes/timeline/App.tsx b/sandboxes/timeline/App.tsx new file mode 100644 index 00000000..0e94f076 --- /dev/null +++ b/sandboxes/timeline/App.tsx @@ -0,0 +1,20 @@ +import React from "react"; +import { Chart } from "react-google-charts"; + +const columns = [ + { type: "string", id: "President" }, + { type: "date", id: "Start" }, + { type: "date", id: "End" }, +]; + +const rows = [ + ["Washington", new Date(1789, 3, 30), new Date(1797, 2, 4)], + ["Adams", new Date(1797, 2, 4), new Date(1801, 2, 4)], + ["Jefferson", new Date(1801, 2, 4), new Date(1809, 2, 4)], +]; + +export const data = [columns, ...rows]; + +export function App() { + return ; +} diff --git a/sandboxes/timeline/index.js b/sandboxes/timeline/index.js deleted file mode 100644 index 07e3fc3d..00000000 --- a/sandboxes/timeline/index.js +++ /dev/null @@ -1,38 +0,0 @@ -import React from "react"; -import ReactDOM from "react-dom"; -import Chart from "react-google-charts"; - -// Reference : https://developers.google.com/chart/interactive/docs/gallery/timeline -const columns = [ - { type: "string", id: "President" }, - { type: "date", id: "Start" }, - { type: "date", id: "End" } -]; - -const rows = [ - ["Washington", new Date(1789, 3, 30), new Date(1797, 2, 4)], - ["Adams", new Date(1797, 2, 4), new Date(1801, 2, 4)], - ["Jefferson", new Date(1801, 2, 4), new Date(1809, 2, 4)] -]; -class App extends React.Component { - componentDidMount() { - setInterval(() => { - this.setState({ refresh: Date.now() }); - }, 1000); - } - render() { - return ( -
- -
- ); - } -} - -const rootElement = document.getElementById("root"); -ReactDOM.render(, rootElement); diff --git a/sandboxes/timeline/index.tsx b/sandboxes/timeline/index.tsx new file mode 100644 index 00000000..5021e58b --- /dev/null +++ b/sandboxes/timeline/index.tsx @@ -0,0 +1,7 @@ +import React from "react"; +import { render } from "react-dom"; + +import { App } from "./App"; + +const rootElement = document.getElementById("root"); +render(, rootElement); diff --git a/sandboxes/timeline/package.json b/sandboxes/timeline/package.json index e82d4679..f0a582c1 100644 --- a/sandboxes/timeline/package.json +++ b/sandboxes/timeline/package.json @@ -1,9 +1,15 @@ { - "description": "Demo of Google TimelineChart", - "main": "index.js", + "main": "index.tsx", "dependencies": { - "react": "^16", - "react-dom": "^16", - "react-google-charts": ">2.0.0" + "prop-types": "15.7.2", + "react": "17.0.2", + "react-dom": "17.0.2", + "react-google-charts": "^3.0.15", + "react-scripts": "4.0.3" + }, + "devDependencies": { + "@types/react": "17.0.20", + "@types/react-dom": "17.0.9", + "typescript": "4.4.2" } } diff --git a/sandboxes/treemap/index.js b/sandboxes/tree-map/App.tsx similarity index 62% rename from sandboxes/treemap/index.js rename to sandboxes/tree-map/App.tsx index 61567f48..40490b02 100644 --- a/sandboxes/treemap/index.js +++ b/sandboxes/tree-map/App.tsx @@ -1,14 +1,12 @@ import React from "react"; -import ReactDOM from "react-dom"; -import Chart from "react-google-charts"; -// Ref : https://developers.google.com/chart/interactive/docs/gallery/histogram +import { Chart } from "react-google-charts"; -const data = [ +export const data = [ [ "Location", "Parent", "Market trade volume (size)", - "Market increase/decrease (color)" + "Market increase/decrease (color)", ], ["Global", null, 0, 0], ["America", "Global", 0, 0], @@ -37,31 +35,26 @@ const data = [ ["S. Africa", "Africa", 30, 43], ["Sudan", "Africa", 12, 2], ["Congo", "Africa", 10, 12], - ["Zaire", "Africa", 8, 10] + ["Zaire", "Africa", 8, 10], ]; -const options = { + +export const options = { minColor: "#f00", midColor: "#ddd", maxColor: "#0d0", headerHeight: 15, fontColor: "black", - showScale: true + showScale: true, }; -class App extends React.Component { - render() { - return ( -
- -
- ); - } -} -const rootElement = document.getElementById("root"); -ReactDOM.render(, rootElement); +export function App() { + return ( + + ); +} diff --git a/sandboxes/tree-map/index.tsx b/sandboxes/tree-map/index.tsx new file mode 100644 index 00000000..5021e58b --- /dev/null +++ b/sandboxes/tree-map/index.tsx @@ -0,0 +1,7 @@ +import React from "react"; +import { render } from "react-dom"; + +import { App } from "./App"; + +const rootElement = document.getElementById("root"); +render(, rootElement); diff --git a/sandboxes/tree-map/package.json b/sandboxes/tree-map/package.json new file mode 100644 index 00000000..f0a582c1 --- /dev/null +++ b/sandboxes/tree-map/package.json @@ -0,0 +1,15 @@ +{ + "main": "index.tsx", + "dependencies": { + "prop-types": "15.7.2", + "react": "17.0.2", + "react-dom": "17.0.2", + "react-google-charts": "^3.0.15", + "react-scripts": "4.0.3" + }, + "devDependencies": { + "@types/react": "17.0.20", + "@types/react-dom": "17.0.9", + "typescript": "4.4.2" + } +} diff --git a/sandboxes/treemap/package.json b/sandboxes/treemap/package.json deleted file mode 100644 index 33a8763f..00000000 --- a/sandboxes/treemap/package.json +++ /dev/null @@ -1,9 +0,0 @@ -{ - "description": "Demo of Google TreemapChart", - "main": "index.js", - "dependencies": { - "react": "^16", - "react-dom": "^16", - "react-google-charts": ">2.0.0" - } -} diff --git a/sandboxes/tsconfig.json b/sandboxes/tsconfig.json new file mode 100644 index 00000000..f84fd939 --- /dev/null +++ b/sandboxes/tsconfig.json @@ -0,0 +1,9 @@ +{ + "extends": "../tsconfig.json", + "compilerOptions": { + "paths": { + "react-google-charts": ["../src"] + } + }, + "include": ["./"] +} diff --git a/sandboxes/waterfall/index.js b/sandboxes/waterfall/index.js deleted file mode 100644 index c00aa783..00000000 --- a/sandboxes/waterfall/index.js +++ /dev/null @@ -1,39 +0,0 @@ -import React from "react"; -import ReactDOM from "react-dom"; -import Chart from "react-google-charts"; - -// Ref : https://developers.google.com/chart/interactive/docs/gallery/candlestickchart#Waterfall -const data = [ - ["Day", "", "", "", ""], - ["Mon", 20, 28, 38, 45], - ["Tue", 31, 38, 55, 66], - ["Wed", 50, 55, 77, 80], - ["Thu", 77, 77, 66, 50], - ["Fri", 68, 66, 22, 15] -]; -const options = { - legend: "none", - bar: { groupWidth: "100%" }, // Remove space between bars. - candlestick: { - fallingColor: { strokeWidth: 0, fill: "#a52714" }, // red - risingColor: { strokeWidth: 0, fill: "#0f9d58" } // green - } -}; -class App extends React.Component { - render() { - return ( -
- -
- ); - } -} - -const rootElement = document.getElementById("root"); -ReactDOM.render(, rootElement); diff --git a/sandboxes/waterfall/package.json b/sandboxes/waterfall/package.json deleted file mode 100644 index f23e89e3..00000000 --- a/sandboxes/waterfall/package.json +++ /dev/null @@ -1,9 +0,0 @@ -{ - "description": "Demo of Google WaterfallChart", - "main": "index.js", - "dependencies": { - "react": "^16", - "react-dom": "^16", - "react-google-charts": ">2.0.0" - } -} diff --git a/sandboxes/word-tree/App.tsx b/sandboxes/word-tree/App.tsx new file mode 100644 index 00000000..d55f75ab --- /dev/null +++ b/sandboxes/word-tree/App.tsx @@ -0,0 +1,43 @@ +import React from "react"; +import { Chart } from "react-google-charts"; + +export const data = [ + ["Phrases"], + ["cats are better than dogs"], + ["cats eat kibble"], + ["cats are better than hamsters"], + ["cats are awesome"], + ["cats are people too"], + ["cats eat mice"], + ["cats meowing"], + ["cats in the cradle"], + ["cats eat mice"], + ["cats in the cradle lyrics"], + ["cats eat kibble"], + ["cats for adoption"], + ["cats are family"], + ["cats eat mice"], + ["cats are better than kittens"], + ["cats are evil"], + ["cats are weird"], + ["cats eat mice"], +]; + +export const options = { + wordtree: { + format: "implicit", + word: "cats", + }, +}; + +export function App() { + return ( + + ); +} diff --git a/sandboxes/word-tree/index.tsx b/sandboxes/word-tree/index.tsx new file mode 100644 index 00000000..5021e58b --- /dev/null +++ b/sandboxes/word-tree/index.tsx @@ -0,0 +1,7 @@ +import React from "react"; +import { render } from "react-dom"; + +import { App } from "./App"; + +const rootElement = document.getElementById("root"); +render(, rootElement); diff --git a/sandboxes/word-tree/package.json b/sandboxes/word-tree/package.json new file mode 100644 index 00000000..f0a582c1 --- /dev/null +++ b/sandboxes/word-tree/package.json @@ -0,0 +1,15 @@ +{ + "main": "index.tsx", + "dependencies": { + "prop-types": "15.7.2", + "react": "17.0.2", + "react-dom": "17.0.2", + "react-google-charts": "^3.0.15", + "react-scripts": "4.0.3" + }, + "devDependencies": { + "@types/react": "17.0.20", + "@types/react-dom": "17.0.9", + "typescript": "4.4.2" + } +} diff --git a/sandboxes/wordtree/index.js b/sandboxes/wordtree/index.js deleted file mode 100644 index 09a472c7..00000000 --- a/sandboxes/wordtree/index.js +++ /dev/null @@ -1,50 +0,0 @@ -import React from "react"; -import ReactDOM from "react-dom"; -import Chart from "react-google-charts"; - -// Ref : https://developers.google.com/chart/interactive/docs/gallery/candlestickchart#Waterfall -const data = [ - ["Phrases"], - ["cats are better than dogs"], - ["cats eat kibble"], - ["cats are better than hamsters"], - ["cats are awesome"], - ["cats are people too"], - ["cats eat mice"], - ["cats meowing"], - ["cats in the cradle"], - ["cats eat mice"], - ["cats in the cradle lyrics"], - ["cats eat kibble"], - ["cats for adoption"], - ["cats are family"], - ["cats eat mice"], - ["cats are better than kittens"], - ["cats are evil"], - ["cats are weird"], - ["cats eat mice"] -]; -const options = { - wordtree: { - format: "implicit", - word: "cats" - } -}; -class App extends React.Component { - render() { - return ( -
- -
- ); - } -} - -const rootElement = document.getElementById("root"); -ReactDOM.render(, rootElement); diff --git a/sandboxes/wordtree/package.json b/sandboxes/wordtree/package.json deleted file mode 100644 index 232f5f5b..00000000 --- a/sandboxes/wordtree/package.json +++ /dev/null @@ -1,9 +0,0 @@ -{ - "description": "Demo of Google Wordtree Chart", - "main": "index.js", - "dependencies": { - "react": "^16", - "react-dom": "^16", - "react-google-charts": ">2.0.0" - } -} diff --git a/src/Context.tsx b/src/Context.tsx index 56bae1c2..eaf7d61c 100644 --- a/src/Context.tsx +++ b/src/Context.tsx @@ -1,28 +1,28 @@ import * as React from "react"; import { chartDefaultProps } from "./default-props"; -import { ReactGoogleChartPropsWithDefaults } from "./types"; +import { ReactGoogleChartProps } from "./types"; const { Provider, Consumer } = React.createContext(chartDefaultProps); export const ContextProvider = ({ children, - value + value, }: { children: any; - value: ReactGoogleChartPropsWithDefaults; + value: ReactGoogleChartProps; }) => { return {children}; }; export const ContextConsumer = ({ - render + render, }: { - render: ((context: ReactGoogleChartPropsWithDefaults) => JSX.Element | null); + render: (context: ReactGoogleChartProps) => JSX.Element | null; }) => { return ( - {context => { - return render(context as ReactGoogleChartPropsWithDefaults); + {(context) => { + return render(context as ReactGoogleChartProps); }} ); diff --git a/src/ReactGoogleCharts.tsx b/src/ReactGoogleCharts.tsx index b36da9ec..73bd5fa5 100644 --- a/src/ReactGoogleCharts.tsx +++ b/src/ReactGoogleCharts.tsx @@ -4,10 +4,9 @@ import { GoogleViz, ReactGoogleChartProps, ReactGoogleChartState, - ReactGoogleChartPropsWithDefaults, } from "./types"; +import { LoadGoogleCharts } from "./hooks"; import { chartDefaultProps } from "./default-props"; -import { GoogleChartLoader } from "./components/GoogleChartLoader"; import { GoogleChart } from "./components/GoogleChart"; import { ContextProvider } from "./Context"; @@ -35,10 +34,10 @@ export class Chart extends React.Component< errorElement, } = this.props; return ( - + {this.state.loadingStatus === "ready" && this.state.google !== null ? ( ) : this.state.loadingStatus === "errored" && errorElement ? ( @@ -46,8 +45,11 @@ export class Chart extends React.Component< ) : ( loader )} - { - loadScript: boolean; - constructor(props: ReactGoogleChartsLoaderProps) { - super(props); - const documentScripts = document.getElementsByTagName("script"); - this.loadScript = true; - for (let i = 0; i < documentScripts.length; i += 1) { - if (documentScripts[i].src.includes("gstatic.com/charts/loader.js")) { - this.loadScript = false; - } - } - } - componentDidMount() { - if (this.loadScript === false) { - this.props.onLoad(); - } - } - render() { - const { onError, onLoad } = this.props; - if (this.loadScript === true) { - return ( -