├── .DS_Store ├── .commitlintrc ├── .czrc ├── .editorconfig ├── .github ├── ISSUE_TEMPLATE │ ├── bug-report.yml │ ├── config.yml │ └── feature-request.yml ├── dependabot.yml └── workflows │ ├── checks.yml │ ├── chromatic.yml │ ├── ci.yml │ ├── commit.yml │ └── publish.yml ├── .gitignore ├── .nano-staged.json ├── .simple-git-hooks.json ├── .size-limit ├── CHANGELOG.md ├── CONTRIBUTING.md ├── LICENSE ├── README.md ├── apps └── docs │ ├── .gitignore │ ├── README.md │ ├── babel.config.js │ ├── docs │ ├── examples │ │ ├── advanced-animations.mdx │ │ ├── advanced-chart-editor.mdx │ │ ├── advanced-controls.mdx │ │ ├── advanced-events.mdx │ │ ├── advanced-layout.mdx │ │ ├── advanced-spreadsheet.mdx │ │ ├── advanced-toolbar.mdx │ │ ├── area-chart.mdx │ │ ├── bar-chart-material.mdx │ │ ├── bar-chart.mdx │ │ ├── bubble-chart.mdx │ │ ├── calendar.mdx │ │ ├── candlestick-chart.mdx │ │ ├── column-chart.mdx │ │ ├── combo-chart.mdx │ │ ├── gantt.mdx │ │ ├── gauge.mdx │ │ ├── geo-chart.mdx │ │ ├── histogram.mdx │ │ ├── index.mdx │ │ ├── line-chart-material.mdx │ │ ├── line-chart.mdx │ │ ├── org-chart.mdx │ │ ├── pie-chart.mdx │ │ ├── sankey.mdx │ │ ├── scatter-chart-material.mdx │ │ ├── scatter-chart.mdx │ │ ├── stepped-area-chart.mdx │ │ ├── table.mdx │ │ ├── timeline.mdx │ │ ├── tree-map.mdx │ │ └── word-tree.mdx │ ├── index.mdx │ ├── quick-walkthrough.md │ └── sponsor.md │ ├── docusaurus.config.js │ ├── package-lock.json │ ├── package.json │ ├── scripts │ └── create-markdown-barrel.ts │ ├── src │ ├── components │ │ ├── ContextProvider.tsx │ │ ├── DocList.tsx │ │ └── PropsTable.tsx │ ├── css │ │ └── custom.css │ └── theme │ │ └── ReactLiveScope │ │ └── index.tsx │ ├── static │ ├── .nojekyll │ └── img │ │ ├── favicon.ico │ │ ├── logo-v2.svg │ │ └── logo.png │ └── tsconfig.json ├── package.json ├── packages └── react-google-charts │ ├── .clean-publish │ ├── .gitignore │ ├── .storybook │ ├── main.js │ ├── manager.js │ ├── package.json │ ├── preview.jsx │ └── theme.js │ ├── CHANGELOG.md │ ├── CNAME │ ├── README.md │ ├── jest.config.json │ ├── package-lock.json │ ├── package.json │ ├── rollup.config.js │ ├── scripts │ ├── generate-examples.js │ └── test-setup.js │ ├── src │ ├── Chart.tsx │ ├── Context.tsx │ ├── components │ │ ├── GoogleChart.tsx │ │ └── GoogleChartControls.tsx │ ├── constants.ts │ ├── default-props.ts │ ├── generate-unique-id.ts │ ├── hooks │ │ ├── index.ts │ │ ├── internal │ │ │ ├── useChartId.ts │ │ │ ├── useGoogleChartControls.tsx │ │ │ ├── useGoogleChartDataTable.ts │ │ │ └── useGoogleChartEvents.ts │ │ ├── useLoadGoogleCharts.ts │ │ └── useLoadScript.ts │ ├── index.tsx │ ├── load-data-table-from-spreadsheet.ts │ ├── types.ts │ └── utils │ │ ├── GoogleChartControlsInternal.ts │ │ ├── GoogleChartInternal.ts │ │ └── index.ts │ ├── stories │ ├── Animation.stories.tsx │ ├── AreaChart.stories.tsx │ ├── Bar.stories.tsx │ ├── BarChart.stories.tsx │ ├── BubbleChart.stories.tsx │ ├── Calendar.stories.tsx │ ├── CandlestickChart.stories.tsx │ ├── ColumnChart.stories.tsx │ ├── ComboChart.stories.tsx │ ├── DataTable.stories.tsx │ ├── EventListener.stories.tsx │ ├── Gantt.stories.tsx │ ├── Gauge.stories.tsx │ ├── GeoChart.stories.tsx │ ├── Histogram.stories.tsx │ ├── Layout.stories.tsx │ ├── LegendToggle.stories.tsx │ ├── Line.stories.tsx │ ├── LineChart.stories.tsx │ ├── OrgChart.stories.tsx │ ├── PieChart.stories.tsx │ ├── Sankey.stories.tsx │ ├── ScatterChart.stories.tsx │ ├── SteppedAreaChart.stories.tsx │ ├── Table.stories.tsx │ ├── Timeline.stories.tsx │ ├── TreeMap.stories.tsx │ └── WordTree.stories.tsx │ ├── test │ ├── AreaChart.spec.tsx │ ├── Bar.spec.tsx │ ├── BarChart.spec.tsx │ ├── BubbleChart.spec.tsx │ ├── Calendar.spec.tsx │ ├── CandlestickChart.spec.tsx │ ├── Chart.spec.tsx │ ├── ColumnChart.spec.tsx │ ├── ComboChart.spec.tsx │ ├── EventListening.spec.tsx │ ├── Gantt.spec.tsx │ ├── Gauge.spec.tsx │ ├── GeoChart.spec.tsx │ ├── Histogram.spec.tsx │ ├── Line.spec.tsx │ ├── LineChart.spec.tsx │ ├── OrgChart.spec.tsx │ ├── PieChart.spec.tsx │ ├── Sankey.spec.tsx │ ├── ScatterChart.spec.tsx │ ├── SteppedAreaChart.spec.tsx │ ├── Table.spec.tsx │ ├── Timeline.spec.tsx │ ├── TreeMap.spec.tsx │ └── WordTree.spec.tsx │ └── tsconfig.json ├── pnpm-lock.yaml ├── pnpm-workspace.yaml ├── sandboxes ├── .DS_Store ├── advanced-animations │ ├── .DS_Store │ ├── default │ │ ├── App.tsx │ │ ├── index.tsx │ │ └── package.json │ └── on-startup │ │ ├── App.tsx │ │ ├── index.tsx │ │ └── package.json ├── advanced-chart-editor │ └── default │ │ ├── App.tsx │ │ ├── index.tsx │ │ └── package.json ├── advanced-controls │ ├── .DS_Store │ ├── category-filter │ │ ├── App.tsx │ │ ├── index.tsx │ │ └── package.json │ ├── date-range-filter │ │ ├── App.tsx │ │ ├── index.tsx │ │ └── package.json │ ├── default │ │ ├── App.tsx │ │ ├── index.tsx │ │ └── package.json │ ├── meta.js │ ├── number-range-filter │ │ ├── App.tsx │ │ ├── index.tsx │ │ └── package.json │ ├── range-filter │ │ ├── App.tsx │ │ ├── index.tsx │ │ └── package.json │ └── string-filter │ │ ├── App.tsx │ │ ├── index.tsx │ │ └── package.json ├── advanced-events │ └── default │ │ ├── App.tsx │ │ ├── index.tsx │ │ └── package.json ├── advanced-layout │ ├── .DS_Store │ ├── customized │ │ ├── App.tsx │ │ ├── index.tsx │ │ └── package.json │ └── default │ │ ├── App.tsx │ │ ├── index.tsx │ │ └── package.json ├── advanced-spreadsheet │ ├── .DS_Store │ ├── default │ │ ├── App.tsx │ │ ├── index.tsx │ │ └── package.json │ ├── meta.js │ └── query │ │ ├── App.tsx │ │ ├── index.tsx │ │ └── package.json ├── advanced-toolbar │ ├── default │ │ ├── App.tsx │ │ ├── index.tsx │ │ └── package.json │ └── meta.js ├── area-chart │ ├── .DS_Store │ ├── default │ │ ├── App.tsx │ │ ├── index.tsx │ │ └── package.json │ ├── meta.js │ ├── stacked-relative │ │ ├── App.tsx │ │ ├── index.tsx │ │ └── package.json │ └── stacked │ │ ├── App.tsx │ │ ├── index.tsx │ │ └── package.json ├── bar-chart-material │ ├── .DS_Store │ ├── default │ │ ├── App.tsx │ │ ├── index.tsx │ │ └── package.json │ ├── horizontal │ │ ├── App.tsx │ │ ├── index.tsx │ │ └── package.json │ └── meta.js ├── bar-chart │ ├── .DS_Store │ ├── colors │ │ ├── App.tsx │ │ ├── index.tsx │ │ └── package.json │ ├── default │ │ ├── App.tsx │ │ ├── index.tsx │ │ └── package.json │ ├── diff │ │ ├── App.tsx │ │ ├── index.tsx │ │ └── package.json │ ├── labels │ │ ├── App.tsx │ │ ├── index.tsx │ │ └── package.json │ ├── meta.js │ └── stacked │ │ ├── App.tsx │ │ ├── index.tsx │ │ └── package.json ├── bubble-chart │ ├── .DS_Store │ ├── colors │ │ ├── App.tsx │ │ ├── index.tsx │ │ └── package.json │ ├── default │ │ ├── App.tsx │ │ ├── index.tsx │ │ └── package.json │ ├── labels │ │ ├── App.tsx │ │ ├── index.tsx │ │ └── package.json │ └── meta.js ├── calendar │ ├── .DS_Store │ ├── default │ │ ├── App.tsx │ │ ├── index.tsx │ │ └── package.json │ ├── meta.js │ └── negative-values │ │ ├── App.tsx │ │ ├── index.tsx │ │ └── package.json ├── candlestick-chart │ ├── .DS_Store │ ├── default │ │ ├── App.tsx │ │ ├── index.tsx │ │ └── package.json │ ├── meta.js │ └── waterfall │ │ ├── App.tsx │ │ ├── index.tsx │ │ └── package.json ├── column-chart │ ├── .DS_Store │ ├── default │ │ ├── App.tsx │ │ ├── index.tsx │ │ └── package.json │ ├── diff │ │ ├── App.tsx │ │ ├── index.tsx │ │ └── package.json │ └── meta.js ├── combo-chart │ ├── default │ │ ├── App.tsx │ │ ├── index.tsx │ │ └── package.json │ └── meta.js ├── gantt │ ├── .DS_Store │ ├── computed │ │ ├── App.tsx │ │ ├── index.tsx │ │ └── package.json │ ├── critical-path │ │ ├── App.tsx │ │ ├── index.tsx │ │ └── package.json │ ├── default │ │ ├── App.tsx │ │ ├── index.tsx │ │ └── package.json │ ├── grouping │ │ ├── App.tsx │ │ ├── index.tsx │ │ └── package.json │ ├── meta.js │ ├── no-dependencies │ │ ├── App.tsx │ │ ├── index.tsx │ │ └── package.json │ ├── styling-arrows │ │ ├── App.tsx │ │ ├── index.tsx │ │ └── package.json │ └── styling-tracks │ │ ├── App.tsx │ │ ├── index.tsx │ │ └── package.json ├── gauge │ ├── default │ │ ├── App.tsx │ │ ├── index.tsx │ │ └── package.json │ └── meta.js ├── geo-chart │ ├── .DS_Store │ ├── colors │ │ ├── App.tsx │ │ ├── index.tsx │ │ └── package.json │ ├── default │ │ ├── App.tsx │ │ ├── index.tsx │ │ └── package.json │ └── meta.js ├── histogram │ ├── .DS_Store │ ├── buckets │ │ ├── App.tsx │ │ ├── index.tsx │ │ └── package.json │ ├── colors │ │ ├── App.tsx │ │ ├── index.tsx │ │ └── package.json │ ├── default │ │ ├── App.tsx │ │ ├── index.tsx │ │ └── package.json │ ├── distribution │ │ ├── App.tsx │ │ ├── index.tsx │ │ └── package.json │ ├── meta.js │ └── multiple-series │ │ ├── App.tsx │ │ ├── index.tsx │ │ └── package.json ├── line-chart-material │ ├── .DS_Store │ ├── default │ │ ├── App.tsx │ │ ├── index.tsx │ │ └── package.json │ ├── dual-charts │ │ ├── App.tsx │ │ ├── index.tsx │ │ └── package.json │ └── meta.js ├── line-chart │ ├── .DS_Store │ ├── area-intervals │ │ ├── App.tsx │ │ ├── index.tsx │ │ └── package.json │ ├── bar-intervals │ │ ├── App.tsx │ │ ├── index.tsx │ │ └── package.json │ ├── box-intervals │ │ ├── App.tsx │ │ ├── index.tsx │ │ └── package.json │ ├── default │ │ ├── App.tsx │ │ ├── index.tsx │ │ └── package.json │ ├── formatted-date │ │ ├── App.tsx │ │ ├── index.tsx │ │ └── package.json │ ├── intervals-styles │ │ ├── App.tsx │ │ ├── index.tsx │ │ └── package.json │ ├── intervals-tailored │ │ ├── App.tsx │ │ ├── index.tsx │ │ └── package.json │ ├── intervals │ │ ├── App.tsx │ │ ├── index.tsx │ │ └── package.json │ ├── meta.js │ ├── multiple-types │ │ ├── App.tsx │ │ ├── index.tsx │ │ └── package.json │ ├── multiple │ │ ├── App.tsx │ │ ├── index.tsx │ │ └── package.json │ ├── point-intervals │ │ ├── App.tsx │ │ ├── index.tsx │ │ └── package.json │ └── stick-intervals │ │ ├── App.tsx │ │ ├── index.tsx │ │ └── package.json ├── org-chart │ ├── default │ │ ├── App.tsx │ │ ├── index.tsx │ │ └── package.json │ └── meta.js ├── pie-chart │ ├── .DS_Store │ ├── 3d │ │ ├── App.tsx │ │ ├── index.tsx │ │ └── package.json │ ├── default │ │ ├── App.tsx │ │ ├── index.tsx │ │ └── package.json │ ├── diff │ │ ├── App.tsx │ │ ├── index.tsx │ │ └── package.json │ ├── donut │ │ ├── App.tsx │ │ ├── index.tsx │ │ └── package.json │ ├── exploding │ │ ├── App.tsx │ │ ├── index.tsx │ │ └── package.json │ ├── meta.js │ ├── rm-slice │ │ ├── App.tsx │ │ ├── index.tsx │ │ └── package.json │ ├── rotation │ │ ├── App.tsx │ │ ├── index.tsx │ │ └── package.json │ └── threshold │ │ ├── App.tsx │ │ ├── index.tsx │ │ └── package.json ├── sankey │ ├── .DS_Store │ ├── colors │ │ ├── App.tsx │ │ ├── index.tsx │ │ └── package.json │ ├── default │ │ ├── App.tsx │ │ ├── index.tsx │ │ └── package.json │ ├── meta.js │ └── multilvel │ │ ├── App.tsx │ │ ├── index.tsx │ │ └── package.json ├── scatter-chart-material │ ├── .DS_Store │ ├── default │ │ ├── App.tsx │ │ ├── index.tsx │ │ └── package.json │ ├── dual-chart │ │ ├── App.tsx │ │ ├── index.tsx │ │ └── package.json │ ├── meta.js │ └── top-x │ │ ├── App.tsx │ │ ├── index.tsx │ │ └── package.json ├── scatter-chart │ ├── .DS_Store │ ├── colors │ │ ├── App.tsx │ │ ├── index.tsx │ │ └── package.json │ ├── default │ │ ├── App.tsx │ │ ├── index.tsx │ │ └── package.json │ ├── diff │ │ ├── App.tsx │ │ ├── index.tsx │ │ └── package.json │ ├── dynamic │ │ ├── App.tsx │ │ ├── index.tsx │ │ └── package.json │ ├── exponential-trendlines │ │ ├── App.tsx │ │ ├── index.tsx │ │ └── package.json │ ├── linear-trendlines │ │ ├── App.tsx │ │ ├── index.tsx │ │ └── package.json │ ├── meta.js │ ├── polynomial-trendlines │ │ ├── App.tsx │ │ ├── index.tsx │ │ └── package.json │ └── styling │ │ ├── App.tsx │ │ ├── index.tsx │ │ └── package.json ├── stepped-area-chart │ ├── .DS_Store │ ├── default │ │ ├── App.tsx │ │ ├── index.tsx │ │ └── package.json │ ├── meta.js │ └── stacked │ │ ├── App.tsx │ │ ├── index.tsx │ │ └── package.json ├── table │ ├── .DS_Store │ ├── arrow-format │ │ ├── App.tsx │ │ ├── index.tsx │ │ └── package.json │ ├── bar-format │ │ ├── App.tsx │ │ ├── index.tsx │ │ └── package.json │ ├── color-format │ │ ├── App.tsx │ │ ├── index.tsx │ │ └── package.json │ ├── date-format │ │ ├── App.tsx │ │ ├── index.tsx │ │ └── package.json │ ├── default │ │ ├── App.tsx │ │ ├── index.tsx │ │ └── package.json │ ├── meta.js │ ├── number-format │ │ ├── App.tsx │ │ ├── index.tsx │ │ └── package.json │ └── pattern-format │ │ ├── App.tsx │ │ ├── index.tsx │ │ └── package.json ├── timeline │ ├── .DS_Store │ ├── advanced │ │ ├── App.tsx │ │ ├── index.tsx │ │ └── package.json │ ├── colors │ │ ├── App.tsx │ │ ├── index.tsx │ │ └── package.json │ ├── default │ │ ├── App.tsx │ │ ├── index.tsx │ │ └── package.json │ ├── gridlines │ │ ├── App.tsx │ │ ├── index.tsx │ │ └── package.json │ ├── labels │ │ ├── App.tsx │ │ ├── index.tsx │ │ └── package.json │ ├── meta.js │ ├── row │ │ ├── App.tsx │ │ ├── index.tsx │ │ └── package.json │ └── tooltips │ │ ├── App.tsx │ │ ├── index.tsx │ │ └── package.json ├── tree-map │ ├── .DS_Store │ ├── default │ │ ├── App.tsx │ │ ├── index.tsx │ │ └── package.json │ ├── highlights │ │ ├── App.tsx │ │ ├── index.tsx │ │ └── package.json │ ├── meta.js │ └── tooltips │ │ ├── App.tsx │ │ ├── index.tsx │ │ └── package.json ├── tsconfig.json └── word-tree │ ├── .DS_Store │ ├── default │ ├── App.tsx │ ├── index.tsx │ └── package.json │ ├── eplicit │ ├── App.tsx │ ├── index.tsx │ └── package.json │ └── meta.js ├── turbo.json └── vercel.json /.DS_Store: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/rakannimer/react-google-charts/27d1ba8f55161dbb8b54fedc58d32df3597e9c1f/.DS_Store -------------------------------------------------------------------------------- /.commitlintrc: -------------------------------------------------------------------------------- 1 | { 2 | "extends": ["@commitlint/config-conventional"], 3 | "rules": { 4 | "body-max-line-length": [0] 5 | } 6 | } 7 | -------------------------------------------------------------------------------- /.czrc: -------------------------------------------------------------------------------- 1 | { 2 | "path": "@commitlint/cz-commitlint" 3 | } 4 | -------------------------------------------------------------------------------- /.editorconfig: -------------------------------------------------------------------------------- 1 | # This file is for unifying the coding style for different editors and IDEs 2 | # editorconfig.org 3 | root = true 4 | 5 | [*] 6 | end_of_line = lf 7 | charset = utf-8 8 | trim_trailing_whitespace = true 9 | insert_final_newline = true 10 | indent_style = space 11 | indent_size = 2 12 | -------------------------------------------------------------------------------- /.github/ISSUE_TEMPLATE/config.yml: -------------------------------------------------------------------------------- 1 | 2 | blank_issues_enabled: false 3 | contact_links: 4 | - name: 🤔 Have a Question? 5 | url: https://stackoverflow.com/questions/tagged/react-google-charts 6 | about: Feel free to ask questions on Stack Overflow. 7 | - name: 📊 Have a Problem With Google Charts? 8 | url: https://stackoverflow.com/questions/tagged/google-visualization 9 | about: react-google-charts is just the wrapper around Google Charts, so if you are experiencing an issue with charts rendering, please ask a related question on Stack Overflow. 10 | -------------------------------------------------------------------------------- /.github/dependabot.yml: -------------------------------------------------------------------------------- 1 | version: 2 2 | updates: 3 | - package-ecosystem: "npm" 4 | directory: "/" 5 | schedule: 6 | interval: "daily" 7 | open-pull-requests-limit: 5 8 | -------------------------------------------------------------------------------- /.github/workflows/chromatic.yml: -------------------------------------------------------------------------------- 1 | name: "Chromatic" 2 | 3 | on: push 4 | 5 | jobs: 6 | chromatic: 7 | name: Run Chromatic 8 | runs-on: ubuntu-latest 9 | steps: 10 | - name: Checkout code 11 | uses: actions/checkout@v4 12 | with: 13 | fetch-depth: 0 14 | - uses: actions/setup-node@v4 15 | with: 16 | node-version: 20 17 | - name: Setup pnpm 18 | uses: pnpm/action-setup@v2 19 | with: 20 | version: latest 21 | - name: Install dependencies 22 | # ⚠️ See your package manager's documentation for the correct command to install dependencies in a CI environment. 23 | run: pnpm install --frozen-lockfile 24 | - name: Run Chromatic 25 | uses: chromaui/action@latest 26 | with: 27 | # ⚠️ Make sure to configure a `CHROMATIC_PROJECT_TOKEN` repository secret 28 | projectToken: ${{ secrets.CHROMATIC_PROJECT_TOKEN }} 29 | -------------------------------------------------------------------------------- /.github/workflows/ci.yml: -------------------------------------------------------------------------------- 1 | name: CI 2 | on: 3 | push: 4 | pull_request: 5 | jobs: 6 | test: 7 | runs-on: ubuntu-latest 8 | name: Running tests 9 | if: "!contains(github.event.head_commit.message, '[ci skip]')" 10 | steps: 11 | - name: Checkout the repository 12 | uses: actions/checkout@v2 13 | - name: Install Node.js 14 | uses: actions/setup-node@v2 15 | with: 16 | node-version: 20 17 | - name: Setup pnpm 18 | uses: pnpm/action-setup@v2 19 | with: 20 | version: latest 21 | - name: Install dependencies 22 | run: pnpm install 23 | - name: Run tests 24 | run: pnpm test 25 | -------------------------------------------------------------------------------- /.github/workflows/commit.yml: -------------------------------------------------------------------------------- 1 | name: Commit 2 | on: 3 | push: 4 | jobs: 5 | conventional-commit: 6 | runs-on: ubuntu-latest 7 | name: Checking commit name 8 | steps: 9 | - name: Checkout the repository 10 | uses: actions/checkout@v2 11 | with: 12 | fetch-depth: 0 13 | - name: Run commitlint 14 | uses: wagoid/commitlint-github-action@v4 15 | -------------------------------------------------------------------------------- /.github/workflows/publish.yml: -------------------------------------------------------------------------------- 1 | name: Publish Package 2 | on: 3 | release: 4 | types: [created] 5 | jobs: 6 | build: 7 | runs-on: ubuntu-latest 8 | steps: 9 | - name: Checkout the repository 10 | uses: actions/checkout@v2 11 | - name: Install Node.js 12 | uses: actions/setup-node@v2 13 | with: 14 | node-version: 20 15 | registry-url: "https://registry.npmjs.org" 16 | - name: Setup pnpm 17 | uses: pnpm/action-setup@v2 18 | with: 19 | version: latest 20 | - name: Install dependencies 21 | run: pnpm install 22 | - name: Publish 23 | run: | 24 | cd packages/react-google-charts 25 | pnpm run cleanPublish 26 | cd package && pnpm publish 27 | env: 28 | NODE_AUTH_TOKEN: ${{ secrets.NPM_TOKEN }} 29 | -------------------------------------------------------------------------------- /.gitignore: -------------------------------------------------------------------------------- 1 | node_modules 2 | dist 3 | .turbo 4 | coverage -------------------------------------------------------------------------------- /.nano-staged.json: -------------------------------------------------------------------------------- 1 | { 2 | "*.{ts,tsx,js}": [ 3 | "prettier --write" 4 | ] 5 | } 6 | -------------------------------------------------------------------------------- /.simple-git-hooks.json: -------------------------------------------------------------------------------- 1 | { 2 | "commit-msg": "npm run commitlint", 3 | "pre-commit": "npm run nano-staged", 4 | "pre-push": "npm run build && npm run test && cd website && npm run build" 5 | } 6 | -------------------------------------------------------------------------------- /.size-limit: -------------------------------------------------------------------------------- 1 | [ 2 | { 3 | "path": "packages/react-google-charts/dist/index.cjs", 4 | "limit": "6.3 KB", 5 | "import": "{ Chart }" 6 | }, 7 | { 8 | "path": "packages/react-google-charts/dist/index.js", 9 | "limit": "6.3 KB", 10 | "import": "{ Chart }" 11 | } 12 | ] 13 | -------------------------------------------------------------------------------- /CONTRIBUTING.md: -------------------------------------------------------------------------------- 1 | ## Prerequisites 2 | 3 | [Node.js](http://nodejs.org/) must be installed. 4 | 5 | ## Installation 6 | 7 | - Running `npm i` in the components's root directory will install everything you need for development. 8 | 9 | ## Demo Development Server 10 | 11 | - `npm start` will run a development server with the component's demo app at [http://localhost:1234](http://localhost:1234) with hot module reloading. 12 | 13 | ## Build 14 | 15 | - `npm run build` 16 | -------------------------------------------------------------------------------- /apps/docs/.gitignore: -------------------------------------------------------------------------------- 1 | # Dependencies 2 | /node_modules 3 | 4 | # Production 5 | /build 6 | 7 | # Generated files 8 | .docusaurus 9 | .cache-loader 10 | 11 | # Misc 12 | .DS_Store 13 | .env.local 14 | .env.development.local 15 | .env.test.local 16 | .env.production.local 17 | 18 | npm-debug.log* 19 | yarn-debug.log* 20 | yarn-error.log* 21 | 22 | .env 23 | 24 | # Temporary 25 | src/pages-a 26 | docs.ts -------------------------------------------------------------------------------- /apps/docs/README.md: -------------------------------------------------------------------------------- 1 | # Website 2 | 3 | This website is built using [Docusaurus 2](https://docusaurus.io/), a modern static website generator. 4 | 5 | ### Installation 6 | 7 | ``` 8 | $ npm i 9 | ``` 10 | 11 | ### Local Development 12 | 13 | ``` 14 | $ npm run start 15 | ``` 16 | 17 | This command starts a local development server and opens up a browser window. Most changes are reflected live without having to restart the server. 18 | 19 | ### Build 20 | 21 | ``` 22 | $ npm run build 23 | ``` 24 | 25 | This command generates static content into the `build` directory and can be served using any static contents hosting service. 26 | 27 | ### Deployment 28 | 29 | ``` 30 | $ GIT_USER= USE_SSH=true npm run deploy 31 | ``` 32 | 33 | If you are using GitHub pages for hosting, this command is a convenient way to build the website and push to the `gh-pages` branch. 34 | -------------------------------------------------------------------------------- /apps/docs/babel.config.js: -------------------------------------------------------------------------------- 1 | module.exports = { 2 | presets: [require.resolve("@docusaurus/core/lib/babel/preset")], 3 | }; 4 | -------------------------------------------------------------------------------- /apps/docs/docs/examples/index.mdx: -------------------------------------------------------------------------------- 1 | --- 2 | title: Examples 3 | description: List of all React Google Charts examples 4 | --- 5 | 6 | import DocList from "../../src/components/DocList"; 7 | 8 | 9 | -------------------------------------------------------------------------------- /apps/docs/docs/sponsor.md: -------------------------------------------------------------------------------- 1 | --- 2 | title: Sponsors 3 | slug: /docs/sponsor 4 | --- 5 | 6 | - [ModelCompare.ai](https://www.modelcompare.ai/?ref=eco-react-google-charts) - A platform that lets you easily explore and compare AI models side by side for free. If you're developing an AI application or simply curious about how different models perform, it's a great resource to check out. You can experiment with system prompts, adjust temperature settings, and even compare costs to see what fits your project best. 7 | 8 | 9 | ModelCompare.ai Screenshot 10 | 11 | 12 | - Thanks to [Cube](https://cube.dev/?ref=eco-react-google-charts) for helping migrate the docs site to Docusaurus in 2021. 13 | -------------------------------------------------------------------------------- /apps/docs/src/components/ContextProvider.tsx: -------------------------------------------------------------------------------- 1 | import { ReactNode } from "react"; 2 | import useDocusaurusContext from "@docusaurus/useDocusaurusContext"; 3 | import { useColorMode } from "@docusaurus/theme-common"; 4 | 5 | interface IContext { 6 | branch: string; 7 | theme: "light" | "dark"; 8 | } 9 | 10 | export default function ContextProvider({ 11 | children, 12 | }: { 13 | children(context: IContext): ReactNode; 14 | }) { 15 | const ctx = useDocusaurusContext(); 16 | // const { isDarkTheme } = useColorMode(); 17 | const context = { 18 | branch: ctx.siteConfig.customFields.branch as string, 19 | // theme: isDarkTheme ? ("dark" as const) : ("light" as const), 20 | theme: "light" as const, 21 | }; 22 | 23 | return children(context); 24 | } 25 | -------------------------------------------------------------------------------- /apps/docs/src/theme/ReactLiveScope/index.tsx: -------------------------------------------------------------------------------- 1 | import React from "react"; 2 | import { Chart } from "react-google-charts"; 3 | // Add react-live imports you need here 4 | const ReactLiveScope = { 5 | React, 6 | ...React, 7 | Chart, 8 | }; 9 | 10 | export default ReactLiveScope; 11 | -------------------------------------------------------------------------------- /apps/docs/static/.nojekyll: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/rakannimer/react-google-charts/27d1ba8f55161dbb8b54fedc58d32df3597e9c1f/apps/docs/static/.nojekyll -------------------------------------------------------------------------------- /apps/docs/static/img/favicon.ico: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/rakannimer/react-google-charts/27d1ba8f55161dbb8b54fedc58d32df3597e9c1f/apps/docs/static/img/favicon.ico -------------------------------------------------------------------------------- /apps/docs/static/img/logo.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/rakannimer/react-google-charts/27d1ba8f55161dbb8b54fedc58d32df3597e9c1f/apps/docs/static/img/logo.png -------------------------------------------------------------------------------- /apps/docs/tsconfig.json: -------------------------------------------------------------------------------- 1 | { 2 | // This file is not used in compilation. It is here just for a nice editor experience. 3 | "extends": "@tsconfig/docusaurus/tsconfig.json", 4 | "compilerOptions": { 5 | "baseUrl": "." 6 | } 7 | } 8 | -------------------------------------------------------------------------------- /package.json: -------------------------------------------------------------------------------- 1 | { 2 | "name": "react-google-charts-monorepo", 3 | "private": true, 4 | "scripts": { 5 | "build": "turbo build", 6 | "start": "turbo start", 7 | "lint": "turbo lint", 8 | "test": "turbo test", 9 | "build-storybook": "turbo build-storybook --", 10 | "format": "prettier --write \"**/*.{ts,tsx,md}\"", 11 | "updateGitHooks": "simple-git-hooks", 12 | "nano-staged": "nano-staged", 13 | "commitlint": "commitlint --edit $1", 14 | "//": "//" 15 | }, 16 | "devDependencies": { 17 | "@size-limit/preset-big-lib": "^11.1.6", 18 | "nano-staged": "^0.8.0", 19 | "prettier": "^3.2.5", 20 | "size-limit": "^11.1.6", 21 | "turbo": "^2.4.4", 22 | "typescript": "^5.6.3" 23 | }, 24 | "engines": { 25 | "node": ">=18" 26 | }, 27 | "packageManager": "pnpm@9.14.2", 28 | "workspaces": [ 29 | "apps/*", 30 | "packages/*" 31 | ] 32 | } 33 | -------------------------------------------------------------------------------- /packages/react-google-charts/.clean-publish: -------------------------------------------------------------------------------- 1 | { 2 | "packageManager": "npm", 3 | "files": [ 4 | "website" 5 | ] 6 | } 7 | -------------------------------------------------------------------------------- /packages/react-google-charts/.gitignore: -------------------------------------------------------------------------------- 1 | build 2 | demo-build 3 | .cache 4 | dist 5 | node_modules 6 | .rpt2_cache 7 | .vscode 8 | .docz 9 | docs/react-google-charts/ 10 | cypress/videos 11 | docs/* 12 | 13 | # testing 14 | coverage 15 | 16 | # OS stuff 17 | ._* 18 | .DS_Store 19 | .env 20 | build-storybook.log 21 | .turbo 22 | storybook-static 23 | package -------------------------------------------------------------------------------- /packages/react-google-charts/.storybook/manager.js: -------------------------------------------------------------------------------- 1 | import { addons } from "@storybook/manager-api"; 2 | 3 | import { theme } from "./theme"; 4 | 5 | addons.setConfig({ 6 | theme, 7 | panelPosition: "right", 8 | }); 9 | -------------------------------------------------------------------------------- /packages/react-google-charts/.storybook/package.json: -------------------------------------------------------------------------------- 1 | { 2 | "type": "commonjs" 3 | } 4 | -------------------------------------------------------------------------------- /packages/react-google-charts/.storybook/preview.jsx: -------------------------------------------------------------------------------- 1 | import { configureActions } from "@storybook/addon-actions"; 2 | 3 | configureActions({ 4 | depth: 5, 5 | }); 6 | export const tags = ["autodocs"]; 7 | -------------------------------------------------------------------------------- /packages/react-google-charts/.storybook/theme.js: -------------------------------------------------------------------------------- 1 | import { create } from "@storybook/theming"; 2 | 3 | export const theme = create({ 4 | base: "light", 5 | brandTitle: "react-google-charts", 6 | brandUrl: "https://github.com/rakannimer/react-google-charts", 7 | }); 8 | -------------------------------------------------------------------------------- /packages/react-google-charts/CNAME: -------------------------------------------------------------------------------- 1 | react-google-charts.com -------------------------------------------------------------------------------- /packages/react-google-charts/jest.config.json: -------------------------------------------------------------------------------- 1 | { 2 | "testEnvironment": "jsdom", 3 | "testEnvironmentOptions": { 4 | "resources": "usable", 5 | "runScripts": "dangerously" 6 | }, 7 | "testRegex": "test/.*\\.spec\\.(jsx?|tsx?)$", 8 | "setupFilesAfterEnv": [ 9 | "@testing-library/jest-dom", 10 | "./scripts/test-setup.js" 11 | ], 12 | "transform": { 13 | "^.+\\.(t|j)sx?$": [ 14 | "@swc/jest", 15 | { 16 | "module": { 17 | "type": "commonjs" 18 | }, 19 | "env": { 20 | "targets": { 21 | "node": 12 22 | } 23 | } 24 | } 25 | ] 26 | }, 27 | "collectCoverage": true, 28 | "collectCoverageFrom": [ 29 | "src/**/*.{js,jsx,ts,tsx}", 30 | "!src/docs/**", 31 | "!**/node_modules/**" 32 | ], 33 | "coverageReporters": ["lcovonly", "text"], 34 | "testTimeout": 20000 35 | } 36 | -------------------------------------------------------------------------------- /packages/react-google-charts/scripts/test-setup.js: -------------------------------------------------------------------------------- 1 | import { configure } from "@testing-library/react"; 2 | 3 | // Set default timeout for all queries 4 | configure({ asyncUtilTimeout: 10000 }); 5 | -------------------------------------------------------------------------------- /packages/react-google-charts/src/Context.tsx: -------------------------------------------------------------------------------- 1 | import * as React from "react"; 2 | import { chartDefaultProps } from "./default-props"; 3 | import { ReactGoogleChartProps } from "./types"; 4 | 5 | export const ChartContext = React.createContext(chartDefaultProps); 6 | 7 | export const ContextProvider = ({ 8 | children, 9 | value, 10 | }: { 11 | children: any; 12 | value: ReactGoogleChartProps; 13 | }) => { 14 | return ( 15 | {children} 16 | ); 17 | }; 18 | -------------------------------------------------------------------------------- /packages/react-google-charts/src/components/GoogleChartControls.tsx: -------------------------------------------------------------------------------- 1 | import React from "react"; 2 | import { GoogleChartControlAndProp } from "../hooks/internal/useGoogleChartControls"; 3 | 4 | export type FilterControl = (control: GoogleChartControlAndProp) => boolean; 5 | 6 | type Props = { 7 | isReady: boolean; 8 | chartControls: GoogleChartControlAndProp[] | null; 9 | filter?: FilterControl; 10 | }; 11 | export const GoogleChartControls = (props: Props) => { 12 | const { isReady, chartControls, filter } = props; 13 | if (!isReady || !chartControls || !chartControls?.length) { 14 | return null; 15 | } 16 | return ( 17 | <> 18 | {chartControls 19 | .filter(({ controlProp, control }) => { 20 | return filter ? filter({ control, controlProp }) : true; 21 | }) 22 | .map(({ control }) => { 23 | return ( 24 |
25 | ); 26 | })} 27 | 28 | ); 29 | }; 30 | -------------------------------------------------------------------------------- /packages/react-google-charts/src/constants.ts: -------------------------------------------------------------------------------- 1 | export const DEFAULT_CHART_COLORS = [ 2 | "#3366CC", 3 | "#DC3912", 4 | "#FF9900", 5 | "#109618", 6 | "#990099", 7 | "#3B3EAC", 8 | "#0099C6", 9 | "#DD4477", 10 | "#66AA00", 11 | "#B82E2E", 12 | "#316395", 13 | "#994499", 14 | "#22AA99", 15 | "#AAAA11", 16 | "#6633CC", 17 | "#E67300", 18 | "#8B0707", 19 | "#329262", 20 | "#5574A6", 21 | "#3B3EAC", 22 | ]; 23 | -------------------------------------------------------------------------------- /packages/react-google-charts/src/default-props.ts: -------------------------------------------------------------------------------- 1 | import { ReactGoogleChartProps } from "./types"; 2 | 3 | export const chartDefaultProps: Partial = { 4 | // 5 | legend_toggle: false, 6 | // 7 | options: {}, 8 | legendToggle: false, 9 | getChartWrapper: () => {}, 10 | spreadSheetQueryParameters: { 11 | headers: 1, 12 | gid: 1, 13 | }, 14 | rootProps: {}, 15 | chartWrapperParams: {}, 16 | chartLoaderScriptUrl: "https://www.gstatic.com/charts/loader.js", 17 | }; 18 | -------------------------------------------------------------------------------- /packages/react-google-charts/src/generate-unique-id.ts: -------------------------------------------------------------------------------- 1 | let uniqueID = 0; 2 | export const generateUniqueID = () => { 3 | uniqueID += 1; 4 | return `reactgooglegraph-${uniqueID}`; 5 | }; 6 | -------------------------------------------------------------------------------- /packages/react-google-charts/src/hooks/index.ts: -------------------------------------------------------------------------------- 1 | export * from "./useLoadGoogleCharts"; 2 | export * from "./useLoadScript"; 3 | -------------------------------------------------------------------------------- /packages/react-google-charts/src/hooks/internal/useChartId.ts: -------------------------------------------------------------------------------- 1 | import * as React from "react"; 2 | import { ReactGoogleChartProps } from "../../types"; 3 | import { generateUniqueID } from "../../generate-unique-id"; 4 | 5 | export const useChartId = ( 6 | props: Pick, 7 | ) => { 8 | const chartIdRef = React.useRef(null); 9 | const getChartId = (): string => { 10 | const { graphID, graph_id } = props; 11 | const chartIdFromProps = graphID || graph_id; 12 | let currentChartId: string; 13 | if (chartIdFromProps) { 14 | currentChartId = chartIdFromProps as string; 15 | } else { 16 | currentChartId = chartIdRef.current || generateUniqueID(); 17 | } 18 | chartIdRef.current = currentChartId; 19 | return chartIdRef.current as string; 20 | }; 21 | const chartId = getChartId(); 22 | return { chartId }; 23 | }; 24 | -------------------------------------------------------------------------------- /packages/react-google-charts/src/index.tsx: -------------------------------------------------------------------------------- 1 | import { Chart } from "./Chart"; 2 | 3 | export * from "./types"; 4 | export { Chart }; 5 | export default Chart; 6 | -------------------------------------------------------------------------------- /packages/react-google-charts/src/utils/index.ts: -------------------------------------------------------------------------------- 1 | export const hasDOM = (window: Window) => { 2 | return typeof window !== "undefined" && typeof document !== "undefined"; 3 | }; 4 | export { GoogleChartInternal } from "./GoogleChartInternal"; 5 | -------------------------------------------------------------------------------- /packages/react-google-charts/stories/AreaChart.stories.tsx: -------------------------------------------------------------------------------- 1 | import React from "react"; 2 | import { Chart } from "../src"; 3 | import * as areaChartData from "../../../sandboxes/area-chart/default/App"; 4 | 5 | export default { 6 | title: "AreaChart", 7 | component: Chart, 8 | parameters: { 9 | layout: "centered", 10 | }, 11 | args: { 12 | chartType: "AreaChart", 13 | width: 800, 14 | height: 600, 15 | legendToggle: true, 16 | }, 17 | }; 18 | 19 | export function Default(args) { 20 | return ( 21 | <> 22 | 23 | 24 | 25 | ); 26 | } 27 | 28 | Default.args = { 29 | data: areaChartData.data, 30 | options: areaChartData.options, 31 | }; 32 | -------------------------------------------------------------------------------- /packages/react-google-charts/stories/Bar.stories.tsx: -------------------------------------------------------------------------------- 1 | import React from "react"; 2 | import { Chart } from "../src"; 3 | import * as barData from "../../../sandboxes/bar-chart-material/default/App"; 4 | 5 | export default { 6 | title: "Bar", 7 | component: Chart, 8 | parameters: { 9 | layout: "centered", 10 | }, 11 | args: { 12 | chartType: "Bar", 13 | width: 800, 14 | height: 600, 15 | }, 16 | }; 17 | 18 | export function Default(args) { 19 | return ; 20 | } 21 | 22 | Default.args = { 23 | data: barData.data, 24 | options: barData.options, 25 | }; 26 | -------------------------------------------------------------------------------- /packages/react-google-charts/stories/BarChart.stories.tsx: -------------------------------------------------------------------------------- 1 | import React from "react"; 2 | import { Chart } from "../src"; 3 | import * as barChartData from "../../../sandboxes/bar-chart/default/App"; 4 | 5 | export default { 6 | title: "BarChart", 7 | component: Chart, 8 | parameters: { 9 | layout: "centered", 10 | }, 11 | args: { 12 | chartType: "BarChart", 13 | width: 800, 14 | height: 600, 15 | }, 16 | }; 17 | 18 | export function Default(args) { 19 | return ; 20 | } 21 | 22 | Default.args = { 23 | data: barChartData.data, 24 | options: barChartData.options, 25 | }; 26 | -------------------------------------------------------------------------------- /packages/react-google-charts/stories/BubbleChart.stories.tsx: -------------------------------------------------------------------------------- 1 | import React from "react"; 2 | import { Chart } from "../src"; 3 | import * as bubbleChartData from "../../../sandboxes/bubble-chart/default/App"; 4 | 5 | export default { 6 | title: "BubbleChart", 7 | component: Chart, 8 | parameters: { 9 | layout: "centered", 10 | }, 11 | args: { 12 | chartType: "BubbleChart", 13 | width: 800, 14 | height: 600, 15 | }, 16 | }; 17 | 18 | export function Default(args) { 19 | return ; 20 | } 21 | 22 | Default.args = { 23 | data: bubbleChartData.data, 24 | options: bubbleChartData.options, 25 | }; 26 | -------------------------------------------------------------------------------- /packages/react-google-charts/stories/Calendar.stories.tsx: -------------------------------------------------------------------------------- 1 | import React from "react"; 2 | import { Chart } from "../src"; 3 | import * as calendarData from "../../../sandboxes/calendar/default/App"; 4 | 5 | export default { 6 | title: "Calendar", 7 | component: Chart, 8 | parameters: { 9 | layout: "centered", 10 | }, 11 | args: { 12 | chartType: "Calendar", 13 | width: 800, 14 | height: 600, 15 | }, 16 | }; 17 | 18 | export function Default(args) { 19 | return ; 20 | } 21 | 22 | Default.args = { 23 | data: calendarData.data, 24 | options: calendarData.options, 25 | }; 26 | -------------------------------------------------------------------------------- /packages/react-google-charts/stories/CandlestickChart.stories.tsx: -------------------------------------------------------------------------------- 1 | import React from "react"; 2 | import { Chart } from "../src"; 3 | import * as candlestickChartData from "../../../sandboxes/candlestick-chart/default/App"; 4 | 5 | export default { 6 | title: "CandlestickChart", 7 | component: Chart, 8 | parameters: { 9 | layout: "centered", 10 | }, 11 | args: { 12 | chartType: "CandlestickChart", 13 | width: 800, 14 | height: 600, 15 | }, 16 | }; 17 | 18 | export function Default(args) { 19 | return ; 20 | } 21 | 22 | Default.args = { 23 | data: candlestickChartData.data, 24 | options: candlestickChartData.options, 25 | }; 26 | -------------------------------------------------------------------------------- /packages/react-google-charts/stories/ColumnChart.stories.tsx: -------------------------------------------------------------------------------- 1 | import React from "react"; 2 | import { Chart } from "../src"; 3 | import * as columnChartData from "../../../sandboxes/column-chart/default/App"; 4 | import * as columnChartDataDiff from "../../../sandboxes/column-chart/diff/App"; 5 | 6 | export default { 7 | title: "ColumnChart", 8 | component: Chart, 9 | parameters: { 10 | layout: "centered", 11 | }, 12 | args: { 13 | chartType: "ColumnChart", 14 | width: 800, 15 | height: 600, 16 | }, 17 | }; 18 | 19 | export function Default(args) { 20 | return ; 21 | } 22 | 23 | Default.args = { 24 | data: columnChartData.data, 25 | }; 26 | 27 | export function Diff(args) { 28 | return ; 29 | } 30 | 31 | Diff.args = { 32 | diffdata: columnChartDataDiff.diffdata, 33 | }; 34 | -------------------------------------------------------------------------------- /packages/react-google-charts/stories/ComboChart.stories.tsx: -------------------------------------------------------------------------------- 1 | import React from "react"; 2 | import { Chart } from "../src"; 3 | import * as comboChartData from "../../../sandboxes/combo-chart/default/App"; 4 | 5 | export default { 6 | title: "ComboChart", 7 | component: Chart, 8 | parameters: { 9 | layout: "centered", 10 | }, 11 | args: { 12 | chartType: "ComboChart", 13 | width: 800, 14 | height: 600, 15 | }, 16 | }; 17 | 18 | export function Default(args) { 19 | return ; 20 | } 21 | 22 | Default.args = { 23 | data: comboChartData.data, 24 | options: comboChartData.options, 25 | }; 26 | -------------------------------------------------------------------------------- /packages/react-google-charts/stories/DataTable.stories.tsx: -------------------------------------------------------------------------------- 1 | import React from "react"; 2 | import { Chart, GoogleDataTable, GoogleViz } from "../src"; 3 | import * as barChartData from "../../../sandboxes/bar-chart/default/App"; 4 | 5 | export default { 6 | title: "DataTable", 7 | component: Chart, 8 | parameters: { 9 | layout: "centered", 10 | }, 11 | args: { 12 | chartType: "BarChart", 13 | width: 800, 14 | height: 600, 15 | }, 16 | }; 17 | 18 | export function Default({ data, chartType, ...rest }) { 19 | const [dataTable, setDataTable] = React.useState(null); 20 | 21 | const handleGoogleChartLoaded = (google: GoogleViz) => { 22 | const dataTable = google.visualization.arrayToDataTable(data); 23 | 24 | setDataTable(dataTable); 25 | }; 26 | 27 | return ; 28 | } 29 | 30 | Default.args = { 31 | data: barChartData.data, 32 | options: barChartData.options, 33 | }; 34 | -------------------------------------------------------------------------------- /packages/react-google-charts/stories/Gantt.stories.tsx: -------------------------------------------------------------------------------- 1 | import React from "react"; 2 | import { Chart } from "../src"; 3 | import * as ganttData from "../../../sandboxes/gantt/default/App"; 4 | 5 | export default { 6 | title: "Gantt", 7 | component: Chart, 8 | parameters: { 9 | layout: "centered", 10 | }, 11 | args: { 12 | chartType: "Gantt", 13 | width: 800, 14 | height: 600, 15 | }, 16 | }; 17 | 18 | export function Default(args) { 19 | return ; 20 | } 21 | 22 | Default.args = { 23 | data: ganttData.data, 24 | }; 25 | -------------------------------------------------------------------------------- /packages/react-google-charts/stories/Gauge.stories.tsx: -------------------------------------------------------------------------------- 1 | import React from "react"; 2 | import { Chart } from "../src"; 3 | import * as gaugeData from "../../../sandboxes/gauge/default/App"; 4 | 5 | export default { 6 | title: "Gauge", 7 | component: Chart, 8 | parameters: { 9 | layout: "centered", 10 | }, 11 | args: { 12 | chartType: "Gauge", 13 | }, 14 | }; 15 | 16 | export function Default(args) { 17 | return ; 18 | } 19 | 20 | Default.args = { 21 | data: gaugeData.getData(), 22 | options: gaugeData.options, 23 | }; 24 | -------------------------------------------------------------------------------- /packages/react-google-charts/stories/GeoChart.stories.tsx: -------------------------------------------------------------------------------- 1 | import React from "react"; 2 | import { Chart } from "../src"; 3 | import * as geoChartData from "../../../sandboxes/geo-chart/default/App"; 4 | 5 | export default { 6 | title: "GeoChart", 7 | component: Chart, 8 | parameters: { 9 | layout: "centered", 10 | }, 11 | args: { 12 | chartType: "GeoChart", 13 | width: 800, 14 | height: 600, 15 | }, 16 | }; 17 | 18 | export function Default(args) { 19 | return ; 20 | } 21 | 22 | Default.args = { 23 | data: geoChartData.data, 24 | }; 25 | -------------------------------------------------------------------------------- /packages/react-google-charts/stories/Histogram.stories.tsx: -------------------------------------------------------------------------------- 1 | import React from "react"; 2 | import { Chart } from "../src"; 3 | import * as histogramData from "../../../sandboxes/histogram/default/App"; 4 | 5 | export default { 6 | title: "Histogram", 7 | component: Chart, 8 | parameters: { 9 | layout: "centered", 10 | }, 11 | args: { 12 | chartType: "Histogram", 13 | width: 800, 14 | height: 600, 15 | }, 16 | }; 17 | 18 | export function Default(args) { 19 | return ; 20 | } 21 | 22 | Default.args = { 23 | data: histogramData.data, 24 | options: histogramData.options, 25 | }; 26 | -------------------------------------------------------------------------------- /packages/react-google-charts/stories/LegendToggle.stories.tsx: -------------------------------------------------------------------------------- 1 | import React from "react"; 2 | import { Chart } from "../src"; 3 | import * as lineChartData from "../../../sandboxes/line-chart/default/App"; 4 | 5 | export default { 6 | title: "Legend Toggle", 7 | component: Chart, 8 | parameters: { 9 | layout: "centered", 10 | }, 11 | args: { 12 | chartType: "LineChart", 13 | width: 800, 14 | height: 600, 15 | data: lineChartData.data, 16 | legendToggle: true, 17 | }, 18 | }; 19 | 20 | export function Default(args) { 21 | return ; 22 | } 23 | 24 | Default.args = { 25 | data: lineChartData.data, 26 | options: lineChartData.options, 27 | }; 28 | -------------------------------------------------------------------------------- /packages/react-google-charts/stories/Line.stories.tsx: -------------------------------------------------------------------------------- 1 | import React from "react"; 2 | import { Chart } from "../src"; 3 | import * as lineData from "../../../sandboxes/line-chart-material/default/App"; 4 | 5 | export default { 6 | title: "Line", 7 | component: Chart, 8 | parameters: { 9 | layout: "centered", 10 | }, 11 | args: { 12 | chartType: "Line", 13 | width: 800, 14 | height: 600, 15 | }, 16 | }; 17 | 18 | export function Default(args) { 19 | return ; 20 | } 21 | 22 | Default.args = { 23 | data: lineData.data, 24 | options: lineData.options, 25 | }; 26 | -------------------------------------------------------------------------------- /packages/react-google-charts/stories/LineChart.stories.tsx: -------------------------------------------------------------------------------- 1 | import React from "react"; 2 | import { Chart } from "../src"; 3 | import * as lineChartData from "../../../sandboxes/line-chart/default/App"; 4 | import * as lineChartDataIntervals from "../../../sandboxes/line-chart/intervals/App"; 5 | 6 | export default { 7 | title: "LineChart", 8 | component: Chart, 9 | parameters: { 10 | layout: "centered", 11 | }, 12 | args: { 13 | chartType: "LineChart", 14 | width: 800, 15 | height: 600, 16 | }, 17 | }; 18 | 19 | export function Default(args) { 20 | return ; 21 | } 22 | 23 | Default.args = { 24 | data: lineChartData.data, 25 | options: lineChartData.options, 26 | }; 27 | 28 | export function Intervals(args) { 29 | return ; 30 | } 31 | 32 | Intervals.args = { 33 | data: lineChartDataIntervals.data, 34 | options: lineChartDataIntervals.options, 35 | }; 36 | -------------------------------------------------------------------------------- /packages/react-google-charts/stories/OrgChart.stories.tsx: -------------------------------------------------------------------------------- 1 | import React from "react"; 2 | import { Chart } from "../src"; 3 | import * as orgChartData from "../../../sandboxes/org-chart/default/App"; 4 | 5 | export default { 6 | title: "OrgChart", 7 | component: Chart, 8 | parameters: { 9 | layout: "centered", 10 | }, 11 | args: { 12 | chartType: "OrgChart", 13 | width: 800, 14 | height: 600, 15 | }, 16 | }; 17 | 18 | export function Default(args) { 19 | return ; 20 | } 21 | 22 | Default.args = { 23 | data: orgChartData.data, 24 | options: orgChartData.options, 25 | }; 26 | -------------------------------------------------------------------------------- /packages/react-google-charts/stories/PieChart.stories.tsx: -------------------------------------------------------------------------------- 1 | import React from "react"; 2 | import { Chart } from "../src"; 3 | import * as pieChartData from "../../../sandboxes/pie-chart/default/App"; 4 | 5 | export default { 6 | title: "PieChart", 7 | component: Chart, 8 | parameters: { 9 | layout: "centered", 10 | }, 11 | args: { 12 | chartType: "PieChart", 13 | width: 800, 14 | height: 600, 15 | }, 16 | }; 17 | 18 | export function Default(args) { 19 | return ; 20 | } 21 | 22 | Default.args = { 23 | data: pieChartData.data, 24 | options: pieChartData.options, 25 | }; 26 | -------------------------------------------------------------------------------- /packages/react-google-charts/stories/Sankey.stories.tsx: -------------------------------------------------------------------------------- 1 | import React from "react"; 2 | import { Chart } from "../src"; 3 | import * as sankeyData from "../../../sandboxes/sankey/default/App"; 4 | 5 | export default { 6 | title: "Sankey", 7 | component: Chart, 8 | parameters: { 9 | layout: "centered", 10 | }, 11 | args: { 12 | chartType: "Sankey", 13 | width: 800, 14 | height: 600, 15 | }, 16 | }; 17 | 18 | export function Default(args) { 19 | return ; 20 | } 21 | 22 | Default.args = { 23 | data: sankeyData.data, 24 | options: sankeyData.options, 25 | }; 26 | -------------------------------------------------------------------------------- /packages/react-google-charts/stories/ScatterChart.stories.tsx: -------------------------------------------------------------------------------- 1 | import React from "react"; 2 | import { Chart } from "../src"; 3 | import * as scatterChartData from "../../../sandboxes/scatter-chart/default/App"; 4 | import * as scatterChartDataDiff from "../../../sandboxes/scatter-chart/diff/App"; 5 | 6 | export default { 7 | title: "ScatterChart", 8 | component: Chart, 9 | parameters: { 10 | layout: "centered", 11 | }, 12 | args: { 13 | chartType: "ScatterChart", 14 | width: 800, 15 | height: 600, 16 | }, 17 | }; 18 | 19 | export function Default(args) { 20 | return ; 21 | } 22 | 23 | Default.args = { 24 | data: scatterChartData.data, 25 | options: scatterChartData.options, 26 | }; 27 | 28 | export function Diff(args) { 29 | return ; 30 | } 31 | 32 | Diff.args = { 33 | diffdata: scatterChartDataDiff.diffdata, 34 | }; 35 | -------------------------------------------------------------------------------- /packages/react-google-charts/stories/SteppedAreaChart.stories.tsx: -------------------------------------------------------------------------------- 1 | import React from "react"; 2 | import { Chart } from "../src"; 3 | import * as steppedAreaChartData from "../../../sandboxes/stepped-area-chart/default/App"; 4 | 5 | export default { 6 | title: "SteppedAreaChart", 7 | component: Chart, 8 | parameters: { 9 | layout: "centered", 10 | }, 11 | args: { 12 | chartType: "SteppedAreaChart", 13 | width: 800, 14 | height: 600, 15 | }, 16 | }; 17 | 18 | export function Default(args) { 19 | return ; 20 | } 21 | 22 | Default.args = { 23 | data: steppedAreaChartData.data, 24 | options: steppedAreaChartData.options, 25 | }; 26 | -------------------------------------------------------------------------------- /packages/react-google-charts/stories/Table.stories.tsx: -------------------------------------------------------------------------------- 1 | import React from "react"; 2 | import { Chart } from "../src"; 3 | import * as tableData from "../../../sandboxes/table/default/App"; 4 | 5 | export default { 6 | title: "Table", 7 | component: Chart, 8 | parameters: { 9 | layout: "centered", 10 | }, 11 | args: { 12 | chartType: "Table", 13 | width: 800, 14 | height: 600, 15 | }, 16 | }; 17 | 18 | export function Default(args) { 19 | return ; 20 | } 21 | 22 | Default.args = { 23 | data: tableData.data, 24 | options: tableData.options, 25 | }; 26 | -------------------------------------------------------------------------------- /packages/react-google-charts/stories/Timeline.stories.tsx: -------------------------------------------------------------------------------- 1 | import React from "react"; 2 | import { Chart } from "../src"; 3 | import * as timelineData from "../../../sandboxes/timeline/default/App"; 4 | 5 | export default { 6 | title: "Timeline", 7 | component: Chart, 8 | parameters: { 9 | layout: "centered", 10 | }, 11 | args: { 12 | chartType: "Timeline", 13 | width: 800, 14 | height: 600, 15 | }, 16 | }; 17 | 18 | export function Default(args) { 19 | return ; 20 | } 21 | 22 | Default.args = { 23 | data: timelineData.data, 24 | }; 25 | -------------------------------------------------------------------------------- /packages/react-google-charts/stories/TreeMap.stories.tsx: -------------------------------------------------------------------------------- 1 | import React from "react"; 2 | import { Chart } from "../src"; 3 | import * as treeMapData from "../../../sandboxes/tree-map/default/App"; 4 | 5 | export default { 6 | title: "TreeMap", 7 | component: Chart, 8 | parameters: { 9 | layout: "centered", 10 | }, 11 | args: { 12 | chartType: "TreeMap", 13 | width: 800, 14 | height: 600, 15 | }, 16 | }; 17 | 18 | export function Default(args) { 19 | return ; 20 | } 21 | 22 | Default.args = { 23 | data: treeMapData.data, 24 | options: treeMapData.options, 25 | }; 26 | -------------------------------------------------------------------------------- /packages/react-google-charts/stories/WordTree.stories.tsx: -------------------------------------------------------------------------------- 1 | import React from "react"; 2 | import { Chart } from "../src"; 3 | import * as wordTreeData from "../../../sandboxes/word-tree/default/App"; 4 | 5 | export default { 6 | title: "WordTree", 7 | component: Chart, 8 | parameters: { 9 | layout: "centered", 10 | }, 11 | args: { 12 | chartType: "WordTree", 13 | width: 800, 14 | height: 600, 15 | }, 16 | }; 17 | 18 | export function Default(args) { 19 | return ; 20 | } 21 | 22 | Default.args = { 23 | data: wordTreeData.data, 24 | options: wordTreeData.options, 25 | }; 26 | -------------------------------------------------------------------------------- /packages/react-google-charts/test/Calendar.spec.tsx: -------------------------------------------------------------------------------- 1 | import React from "react"; 2 | import { render, cleanup, screen } from "@testing-library/react"; 3 | import { Chart } from "../src"; 4 | 5 | describe("", () => { 6 | describe("Calendar", () => { 7 | afterEach(() => { 8 | cleanup(); 9 | }); 10 | 11 | it("should draw Calendar", async () => { 12 | const { getByTestId } = render( 13 | , 27 | ); 28 | 29 | await screen.findByTestId("1"); 30 | 31 | const root = getByTestId("1"); 32 | 33 | expect(root).toBeVisible(); 34 | }); 35 | }); 36 | }); 37 | -------------------------------------------------------------------------------- /packages/react-google-charts/test/GeoChart.spec.tsx: -------------------------------------------------------------------------------- 1 | import React from "react"; 2 | import { render, cleanup, waitFor } from "@testing-library/react"; 3 | import { Chart } from "../src"; 4 | 5 | describe("", () => { 6 | describe("GeoChart", () => { 7 | afterEach(() => { 8 | cleanup(); 9 | }); 10 | 11 | it("should draw GeoChart", async () => { 12 | const { getByTestId } = render( 13 | , 23 | ); 24 | 25 | await waitFor(() => expect(getByTestId("1")).toContainHTML("svg"), { 26 | timeout: 5000, 27 | }); 28 | 29 | const root = getByTestId("1"); 30 | 31 | expect(root).toBeVisible(); 32 | expect(root.querySelector("svg")).toBeVisible(); 33 | }); 34 | }); 35 | }); 36 | -------------------------------------------------------------------------------- /packages/react-google-charts/test/PieChart.spec.tsx: -------------------------------------------------------------------------------- 1 | import React from "react"; 2 | import { render, cleanup, screen } from "@testing-library/react"; 3 | import { Chart } from "../src"; 4 | 5 | describe("", () => { 6 | describe("PieChart", () => { 7 | afterEach(() => { 8 | cleanup(); 9 | }); 10 | 11 | it("should draw PieChart", async () => { 12 | const { getByTestId } = render( 13 | , 28 | ); 29 | 30 | await screen.findByTestId("1"); 31 | 32 | const root = getByTestId("1"); 33 | 34 | expect(root).toBeVisible(); 35 | expect(root.querySelector("svg")).toBeVisible(); 36 | }); 37 | }); 38 | }); 39 | -------------------------------------------------------------------------------- /packages/react-google-charts/test/Sankey.spec.tsx: -------------------------------------------------------------------------------- 1 | import React from "react"; 2 | import { render, cleanup, waitFor } from "@testing-library/react"; 3 | import { Chart } from "../src"; 4 | 5 | describe("", () => { 6 | describe("Sankey", () => { 7 | afterEach(() => { 8 | cleanup(); 9 | }); 10 | 11 | it("should draw Sankey", async () => { 12 | const { getByTestId } = render( 13 | , 26 | ); 27 | 28 | await waitFor(() => expect(getByTestId("1")).toContainHTML("svg"), { 29 | timeout: 5000, 30 | }); 31 | 32 | const root = getByTestId("1"); 33 | 34 | expect(root).toBeVisible(); 35 | expect(root.querySelector("svg")).toBeVisible(); 36 | }); 37 | }); 38 | }); 39 | -------------------------------------------------------------------------------- /packages/react-google-charts/tsconfig.json: -------------------------------------------------------------------------------- 1 | { 2 | "compilerOptions": { 3 | "outDir": "dist", 4 | "module": "esnext", 5 | "lib": ["dom", "esnext"], 6 | "moduleResolution": "node", 7 | "jsx": "react", 8 | "sourceMap": true, 9 | "declaration": true, 10 | "esModuleInterop": true, 11 | "target": "esnext", 12 | "skipLibCheck": true, 13 | "strict": true, 14 | "removeComments": true 15 | }, 16 | "include": ["src"], 17 | "exclude": ["node_modules", "dist"] 18 | } 19 | -------------------------------------------------------------------------------- /pnpm-workspace.yaml: -------------------------------------------------------------------------------- 1 | packages: 2 | - "packages/*" 3 | - "apps/*" 4 | -------------------------------------------------------------------------------- /sandboxes/.DS_Store: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/rakannimer/react-google-charts/27d1ba8f55161dbb8b54fedc58d32df3597e9c1f/sandboxes/.DS_Store -------------------------------------------------------------------------------- /sandboxes/advanced-animations/.DS_Store: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/rakannimer/react-google-charts/27d1ba8f55161dbb8b54fedc58d32df3597e9c1f/sandboxes/advanced-animations/.DS_Store -------------------------------------------------------------------------------- /sandboxes/advanced-animations/default/index.tsx: -------------------------------------------------------------------------------- 1 | import React from "react"; 2 | import { render } from "react-dom"; 3 | 4 | import { App } from "./App"; 5 | 6 | const rootElement = document.getElementById("root"); 7 | render(, rootElement); 8 | -------------------------------------------------------------------------------- /sandboxes/advanced-animations/default/package.json: -------------------------------------------------------------------------------- 1 | { 2 | "description": "Animate by changing the data", 3 | "main": "index.tsx", 4 | "dependencies": { 5 | "faker": "5.5.3", 6 | "react": "17.0.2", 7 | "react-dom": "17.0.2", 8 | "react-google-charts": "*", 9 | "react-scripts": "4.0.3" 10 | }, 11 | "devDependencies": { 12 | "@types/react": "17.0.20", 13 | "@types/react-dom": "17.0.9", 14 | "typescript": "4.4.2" 15 | } 16 | } 17 | -------------------------------------------------------------------------------- /sandboxes/advanced-animations/on-startup/App.tsx: -------------------------------------------------------------------------------- 1 | import React from "react"; 2 | import { Chart } from "react-google-charts"; 3 | 4 | export const data = [ 5 | ["Age", "Weight"], 6 | [8, 12], 7 | [4, 5.5], 8 | [11, 14], 9 | [4, 5], 10 | [3, 3.5], 11 | [6.5, 7], 12 | ]; 13 | 14 | export const options = { 15 | title: "Age vs. Weight comparison", 16 | hAxis: { title: "Age", minValue: 0, maxValue: 15 }, 17 | vAxis: { title: "Weight", minValue: 0, maxValue: 15 }, 18 | legend: "none", 19 | animation: { 20 | startup: true, 21 | easing: "linear", 22 | duration: 1500, 23 | }, 24 | enableInteractivity: false, 25 | }; 26 | 27 | export function App() { 28 | return ( 29 | 36 | ); 37 | } 38 | -------------------------------------------------------------------------------- /sandboxes/advanced-animations/on-startup/index.tsx: -------------------------------------------------------------------------------- 1 | import React from "react"; 2 | import { render } from "react-dom"; 3 | 4 | import { App } from "./App"; 5 | 6 | const rootElement = document.getElementById("root"); 7 | render(, rootElement); 8 | -------------------------------------------------------------------------------- /sandboxes/advanced-animations/on-startup/package.json: -------------------------------------------------------------------------------- 1 | { 2 | "description": "Animate on startup", 3 | "main": "index.tsx", 4 | "dependencies": { 5 | "react": "17.0.2", 6 | "react-dom": "17.0.2", 7 | "react-google-charts": "*", 8 | "react-scripts": "4.0.3" 9 | }, 10 | "devDependencies": { 11 | "@types/react": "17.0.20", 12 | "@types/react-dom": "17.0.9", 13 | "typescript": "4.4.2" 14 | } 15 | } 16 | -------------------------------------------------------------------------------- /sandboxes/advanced-chart-editor/default/index.tsx: -------------------------------------------------------------------------------- 1 | import React from "react"; 2 | import { render } from "react-dom"; 3 | 4 | import { App } from "./App"; 5 | 6 | const rootElement = document.getElementById("root"); 7 | render(, rootElement); 8 | -------------------------------------------------------------------------------- /sandboxes/advanced-chart-editor/default/package.json: -------------------------------------------------------------------------------- 1 | { 2 | "description": "Simple Example", 3 | "main": "index.tsx", 4 | "dependencies": { 5 | "react": "17.0.2", 6 | "react-dom": "17.0.2", 7 | "react-google-charts": "*", 8 | "react-scripts": "4.0.3" 9 | }, 10 | "devDependencies": { 11 | "@types/react": "17.0.20", 12 | "@types/react-dom": "17.0.9", 13 | "typescript": "4.4.2" 14 | } 15 | } 16 | -------------------------------------------------------------------------------- /sandboxes/advanced-controls/.DS_Store: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/rakannimer/react-google-charts/27d1ba8f55161dbb8b54fedc58d32df3597e9c1f/sandboxes/advanced-controls/.DS_Store -------------------------------------------------------------------------------- /sandboxes/advanced-controls/category-filter/index.tsx: -------------------------------------------------------------------------------- 1 | import React from "react"; 2 | import { render } from "react-dom"; 3 | 4 | import { App } from "./App"; 5 | 6 | const rootElement = document.getElementById("root"); 7 | render(, rootElement); 8 | -------------------------------------------------------------------------------- /sandboxes/advanced-controls/category-filter/package.json: -------------------------------------------------------------------------------- 1 | { 2 | "description": "Category Filter Control", 3 | "main": "index.tsx", 4 | "dependencies": { 5 | "react": "17.0.2", 6 | "react-dom": "17.0.2", 7 | "react-google-charts": "*", 8 | "react-scripts": "4.0.3" 9 | }, 10 | "devDependencies": { 11 | "@types/react": "17.0.20", 12 | "@types/react-dom": "17.0.9", 13 | "typescript": "4.4.2" 14 | } 15 | } 16 | -------------------------------------------------------------------------------- /sandboxes/advanced-controls/date-range-filter/index.tsx: -------------------------------------------------------------------------------- 1 | import React from "react"; 2 | import { render } from "react-dom"; 3 | 4 | import { App } from "./App"; 5 | 6 | const rootElement = document.getElementById("root"); 7 | render(, rootElement); 8 | -------------------------------------------------------------------------------- /sandboxes/advanced-controls/date-range-filter/package.json: -------------------------------------------------------------------------------- 1 | { 2 | "description": "Date Range Filter Control", 3 | "main": "index.tsx", 4 | "dependencies": { 5 | "react": "17.0.2", 6 | "react-dom": "17.0.2", 7 | "react-google-charts": "*", 8 | "react-scripts": "4.0.3" 9 | }, 10 | "devDependencies": { 11 | "@types/react": "17.0.20", 12 | "@types/react-dom": "17.0.9", 13 | "typescript": "4.4.2" 14 | } 15 | } 16 | -------------------------------------------------------------------------------- /sandboxes/advanced-controls/default/index.tsx: -------------------------------------------------------------------------------- 1 | import React from "react"; 2 | import { render } from "react-dom"; 3 | 4 | import { App } from "./App"; 5 | 6 | const rootElement = document.getElementById("root"); 7 | render(, rootElement); 8 | -------------------------------------------------------------------------------- /sandboxes/advanced-controls/default/package.json: -------------------------------------------------------------------------------- 1 | { 2 | "description": "Category Filter Control", 3 | "main": "index.tsx", 4 | "dependencies": { 5 | "react": "17.0.2", 6 | "react-dom": "17.0.2", 7 | "react-google-charts": "*", 8 | "react-scripts": "4.0.3" 9 | }, 10 | "devDependencies": { 11 | "@types/react": "17.0.20", 12 | "@types/react-dom": "17.0.9", 13 | "typescript": "4.4.2" 14 | } 15 | } 16 | -------------------------------------------------------------------------------- /sandboxes/advanced-controls/meta.js: -------------------------------------------------------------------------------- 1 | module.exports = { 2 | Reference: 3 | "https://developers.google.com/chart/interactive/docs/gallery/controls", 4 | }; 5 | -------------------------------------------------------------------------------- /sandboxes/advanced-controls/number-range-filter/App.tsx: -------------------------------------------------------------------------------- 1 | import React from "react"; 2 | import { Chart } from "react-google-charts"; 3 | 4 | export const data = [ 5 | ["Name", "Age"], 6 | ["Michael", 12], 7 | ["Elisa", 20], 8 | ["Robert", 7], 9 | ["John", 54], 10 | ["Jessica", 22], 11 | ["Aaron", 3], 12 | ["Margareth", 42], 13 | ["Miranda", 33], 14 | ]; 15 | 16 | export const options = { 17 | hAxis: { minValue: 0, maxValue: 60 }, 18 | chartArea: { top: 0, right: 0, bottom: 0 }, 19 | }; 20 | 21 | export function App() { 22 | return ( 23 | 41 | ); 42 | } 43 | -------------------------------------------------------------------------------- /sandboxes/advanced-controls/number-range-filter/index.tsx: -------------------------------------------------------------------------------- 1 | import React from "react"; 2 | import { render } from "react-dom"; 3 | 4 | import { App } from "./App"; 5 | 6 | const rootElement = document.getElementById("root"); 7 | render(, rootElement); 8 | -------------------------------------------------------------------------------- /sandboxes/advanced-controls/number-range-filter/package.json: -------------------------------------------------------------------------------- 1 | { 2 | "description": "Number Range Filter Control", 3 | "main": "index.tsx", 4 | "dependencies": { 5 | "react": "17.0.2", 6 | "react-dom": "17.0.2", 7 | "react-google-charts": "*", 8 | "react-scripts": "4.0.3" 9 | }, 10 | "devDependencies": { 11 | "@types/react": "17.0.20", 12 | "@types/react-dom": "17.0.9", 13 | "typescript": "4.4.2" 14 | } 15 | } 16 | -------------------------------------------------------------------------------- /sandboxes/advanced-controls/range-filter/index.tsx: -------------------------------------------------------------------------------- 1 | import React from "react"; 2 | import { render } from "react-dom"; 3 | 4 | import { App } from "./App"; 5 | 6 | const rootElement = document.getElementById("root"); 7 | render(, rootElement); 8 | -------------------------------------------------------------------------------- /sandboxes/advanced-controls/range-filter/package.json: -------------------------------------------------------------------------------- 1 | { 2 | "description": "Chart Range Filter Control", 3 | "main": "index.tsx", 4 | "dependencies": { 5 | "react": "17.0.2", 6 | "react-dom": "17.0.2", 7 | "react-google-charts": "*", 8 | "react-scripts": "4.0.3" 9 | }, 10 | "devDependencies": { 11 | "@types/react": "17.0.20", 12 | "@types/react-dom": "17.0.9", 13 | "typescript": "4.4.2" 14 | } 15 | } 16 | -------------------------------------------------------------------------------- /sandboxes/advanced-controls/string-filter/App.tsx: -------------------------------------------------------------------------------- 1 | import React from "react"; 2 | import { Chart } from "react-google-charts"; 3 | 4 | export const data = [ 5 | ["Name", "Age"], 6 | ["Michael", 12], 7 | ["Elisa", 20], 8 | ["Robert", 7], 9 | ["John", 54], 10 | ["Jessica", 22], 11 | ["Aaron", 3], 12 | ["Margareth", 42], 13 | ["Miranda", 33], 14 | ]; 15 | 16 | export function App() { 17 | return ( 18 | 37 | ); 38 | } 39 | -------------------------------------------------------------------------------- /sandboxes/advanced-controls/string-filter/index.tsx: -------------------------------------------------------------------------------- 1 | import React from "react"; 2 | import { render } from "react-dom"; 3 | 4 | import { App } from "./App"; 5 | 6 | const rootElement = document.getElementById("root"); 7 | render(, rootElement); 8 | -------------------------------------------------------------------------------- /sandboxes/advanced-controls/string-filter/package.json: -------------------------------------------------------------------------------- 1 | { 2 | "description": "String Filter Control", 3 | "main": "index.tsx", 4 | "dependencies": { 5 | "react": "17.0.2", 6 | "react-dom": "17.0.2", 7 | "react-google-charts": "*", 8 | "react-scripts": "4.0.3" 9 | }, 10 | "devDependencies": { 11 | "@types/react": "17.0.20", 12 | "@types/react-dom": "17.0.9", 13 | "typescript": "4.4.2" 14 | } 15 | } 16 | -------------------------------------------------------------------------------- /sandboxes/advanced-events/default/index.tsx: -------------------------------------------------------------------------------- 1 | import React from "react"; 2 | import { render } from "react-dom"; 3 | 4 | import { App } from "./App"; 5 | 6 | const rootElement = document.getElementById("root"); 7 | render(, rootElement); 8 | -------------------------------------------------------------------------------- /sandboxes/advanced-events/default/package.json: -------------------------------------------------------------------------------- 1 | { 2 | "description": "Simple Example", 3 | "main": "index.tsx", 4 | "dependencies": { 5 | "react": "17.0.2", 6 | "react-dom": "17.0.2", 7 | "react-google-charts": "*", 8 | "react-scripts": "4.0.3" 9 | }, 10 | "devDependencies": { 11 | "@types/react": "17.0.20", 12 | "@types/react-dom": "17.0.9", 13 | "typescript": "4.4.2" 14 | } 15 | } 16 | -------------------------------------------------------------------------------- /sandboxes/advanced-layout/.DS_Store: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/rakannimer/react-google-charts/27d1ba8f55161dbb8b54fedc58d32df3597e9c1f/sandboxes/advanced-layout/.DS_Store -------------------------------------------------------------------------------- /sandboxes/advanced-layout/customized/index.tsx: -------------------------------------------------------------------------------- 1 | import React from "react"; 2 | import { render } from "react-dom"; 3 | 4 | import { App } from "./App"; 5 | 6 | const rootElement = document.getElementById("root"); 7 | render(, rootElement); 8 | -------------------------------------------------------------------------------- /sandboxes/advanced-layout/customized/package.json: -------------------------------------------------------------------------------- 1 | { 2 | "description": "A More Customized Dashboard Layout", 3 | "main": "index.tsx", 4 | "dependencies": { 5 | "react": "17.0.2", 6 | "react-dom": "17.0.2", 7 | "react-google-charts": "*", 8 | "react-scripts": "4.0.3" 9 | }, 10 | "devDependencies": { 11 | "@types/react": "17.0.20", 12 | "@types/react-dom": "17.0.9", 13 | "typescript": "4.4.2" 14 | } 15 | } 16 | -------------------------------------------------------------------------------- /sandboxes/advanced-layout/default/index.tsx: -------------------------------------------------------------------------------- 1 | import React from "react"; 2 | import { render } from "react-dom"; 3 | 4 | import { App } from "./App"; 5 | 6 | const rootElement = document.getElementById("root"); 7 | render(, rootElement); 8 | -------------------------------------------------------------------------------- /sandboxes/advanced-layout/default/package.json: -------------------------------------------------------------------------------- 1 | { 2 | "description": "A simple example", 3 | "main": "index.tsx", 4 | "dependencies": { 5 | "react": "17.0.2", 6 | "react-dom": "17.0.2", 7 | "react-google-charts": "*", 8 | "react-scripts": "4.0.3" 9 | }, 10 | "devDependencies": { 11 | "@types/react": "17.0.20", 12 | "@types/react-dom": "17.0.9", 13 | "typescript": "4.4.2" 14 | } 15 | } 16 | -------------------------------------------------------------------------------- /sandboxes/advanced-spreadsheet/.DS_Store: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/rakannimer/react-google-charts/27d1ba8f55161dbb8b54fedc58d32df3597e9c1f/sandboxes/advanced-spreadsheet/.DS_Store -------------------------------------------------------------------------------- /sandboxes/advanced-spreadsheet/default/App.tsx: -------------------------------------------------------------------------------- 1 | import React from "react"; 2 | import { Chart } from "react-google-charts"; 3 | 4 | export function App() { 5 | return ( 6 | 20 | ); 21 | } 22 | -------------------------------------------------------------------------------- /sandboxes/advanced-spreadsheet/default/index.tsx: -------------------------------------------------------------------------------- 1 | import React from "react"; 2 | import { render } from "react-dom"; 3 | 4 | import { App } from "./App"; 5 | 6 | const rootElement = document.getElementById("root"); 7 | render(, rootElement); 8 | -------------------------------------------------------------------------------- /sandboxes/advanced-spreadsheet/default/package.json: -------------------------------------------------------------------------------- 1 | { 2 | "description": "Simple Example", 3 | "main": "index.tsx", 4 | "dependencies": { 5 | "react": "17.0.2", 6 | "react-dom": "17.0.2", 7 | "react-google-charts": "*", 8 | "react-scripts": "4.0.3" 9 | }, 10 | "devDependencies": { 11 | "@types/react": "17.0.20", 12 | "@types/react-dom": "17.0.9", 13 | "typescript": "4.4.2" 14 | } 15 | } 16 | -------------------------------------------------------------------------------- /sandboxes/advanced-spreadsheet/meta.js: -------------------------------------------------------------------------------- 1 | module.exports = { 2 | Reference: 3 | "https://developers.google.com/chart/interactive/docs/spreadsheets", 4 | }; 5 | -------------------------------------------------------------------------------- /sandboxes/advanced-spreadsheet/query/App.tsx: -------------------------------------------------------------------------------- 1 | import React from "react"; 2 | import { Chart } from "react-google-charts"; 3 | 4 | export function App() { 5 | return ( 6 | 19 | ); 20 | } 21 | -------------------------------------------------------------------------------- /sandboxes/advanced-spreadsheet/query/index.tsx: -------------------------------------------------------------------------------- 1 | import React from "react"; 2 | import { render } from "react-dom"; 3 | 4 | import { App } from "./App"; 5 | 6 | const rootElement = document.getElementById("root"); 7 | render(, rootElement); 8 | -------------------------------------------------------------------------------- /sandboxes/advanced-spreadsheet/query/package.json: -------------------------------------------------------------------------------- 1 | { 2 | "description": "Query data from spreadsheet", 3 | "main": "index.tsx", 4 | "dependencies": { 5 | "react": "17.0.2", 6 | "react-dom": "17.0.2", 7 | "react-google-charts": "*", 8 | "react-scripts": "4.0.3" 9 | }, 10 | "devDependencies": { 11 | "@types/react": "17.0.20", 12 | "@types/react-dom": "17.0.9", 13 | "typescript": "4.4.2" 14 | } 15 | } 16 | -------------------------------------------------------------------------------- /sandboxes/advanced-toolbar/default/App.tsx: -------------------------------------------------------------------------------- 1 | import React from "react"; 2 | import { Chart } from "react-google-charts"; 3 | 4 | export function App() { 5 | return ( 6 | 17 | ); 18 | } 19 | -------------------------------------------------------------------------------- /sandboxes/advanced-toolbar/default/index.tsx: -------------------------------------------------------------------------------- 1 | import React from "react"; 2 | import { render } from "react-dom"; 3 | 4 | import { App } from "./App"; 5 | 6 | const rootElement = document.getElementById("root"); 7 | render(, rootElement); 8 | -------------------------------------------------------------------------------- /sandboxes/advanced-toolbar/default/package.json: -------------------------------------------------------------------------------- 1 | { 2 | "description": "Simple Example", 3 | "main": "index.tsx", 4 | "dependencies": { 5 | "react": "17.0.2", 6 | "react-dom": "17.0.2", 7 | "react-google-charts": "*", 8 | "react-scripts": "4.0.3" 9 | }, 10 | "devDependencies": { 11 | "@types/react": "17.0.20", 12 | "@types/react-dom": "17.0.9", 13 | "typescript": "4.4.2" 14 | } 15 | } 16 | -------------------------------------------------------------------------------- /sandboxes/advanced-toolbar/meta.js: -------------------------------------------------------------------------------- 1 | module.exports = { 2 | Reference: 3 | "https://developers.google.com/chart/interactive/docs/gallery/toolbar", 4 | }; 5 | -------------------------------------------------------------------------------- /sandboxes/area-chart/.DS_Store: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/rakannimer/react-google-charts/27d1ba8f55161dbb8b54fedc58d32df3597e9c1f/sandboxes/area-chart/.DS_Store -------------------------------------------------------------------------------- /sandboxes/area-chart/default/App.tsx: -------------------------------------------------------------------------------- 1 | import React from "react"; 2 | import { Chart } from "react-google-charts"; 3 | 4 | export const data = [ 5 | ["Year", "Sales", "Expenses"], 6 | ["2013", 1000, 400], 7 | ["2014", 1170, 460], 8 | ["2015", 660, 1120], 9 | ["2016", 1030, 540], 10 | ]; 11 | 12 | export const options = { 13 | title: "Company Performance", 14 | hAxis: { title: "Year", titleTextStyle: { color: "#333" } }, 15 | vAxis: { minValue: 0 }, 16 | chartArea: { width: "50%", height: "70%" }, 17 | }; 18 | 19 | export function App() { 20 | return ( 21 | 28 | ); 29 | } 30 | -------------------------------------------------------------------------------- /sandboxes/area-chart/default/index.tsx: -------------------------------------------------------------------------------- 1 | import React from "react"; 2 | import { render } from "react-dom"; 3 | 4 | import { App } from "./App"; 5 | 6 | const rootElement = document.getElementById("root"); 7 | render(, rootElement); 8 | -------------------------------------------------------------------------------- /sandboxes/area-chart/default/package.json: -------------------------------------------------------------------------------- 1 | { 2 | "description": "Simple Example", 3 | "main": "index.tsx", 4 | "dependencies": { 5 | "react": "17.0.2", 6 | "react-dom": "17.0.2", 7 | "react-google-charts": "*", 8 | "react-scripts": "4.0.3" 9 | }, 10 | "devDependencies": { 11 | "@types/react": "17.0.20", 12 | "@types/react-dom": "17.0.9", 13 | "typescript": "4.4.2" 14 | } 15 | } 16 | -------------------------------------------------------------------------------- /sandboxes/area-chart/meta.js: -------------------------------------------------------------------------------- 1 | module.exports = { 2 | "Data Format": 3 | "https://developers.google.com/chart/interactive/docs/gallery/areachart#data-format", 4 | Reference: 5 | "https://developers.google.com/chart/interactive/docs/gallery/areachart", 6 | }; 7 | -------------------------------------------------------------------------------- /sandboxes/area-chart/stacked-relative/App.tsx: -------------------------------------------------------------------------------- 1 | import React from "react"; 2 | import { Chart } from "react-google-charts"; 3 | 4 | export const data = [ 5 | ["Year", "Sales", "Expenses"], 6 | ["2013", 1000, 400], 7 | ["2014", 1170, 460], 8 | ["2015", 660, 1120], 9 | ["2016", 1030, 540], 10 | ]; 11 | 12 | export const options = { 13 | isStacked: "relative", 14 | height: 300, 15 | legend: { position: "top", maxLines: 3 }, 16 | vAxis: { 17 | minValue: 0, 18 | ticks: [0, 0.3, 0.6, 0.9, 1], 19 | }, 20 | }; 21 | 22 | export function App() { 23 | return ( 24 | 31 | ); 32 | } 33 | -------------------------------------------------------------------------------- /sandboxes/area-chart/stacked-relative/index.tsx: -------------------------------------------------------------------------------- 1 | import React from "react"; 2 | import { render } from "react-dom"; 3 | 4 | import { App } from "./App"; 5 | 6 | const rootElement = document.getElementById("root"); 7 | render(, rootElement); 8 | -------------------------------------------------------------------------------- /sandboxes/area-chart/stacked-relative/package.json: -------------------------------------------------------------------------------- 1 | { 2 | "description": "100 Percent Stacked Areas", 3 | "main": "index.tsx", 4 | "dependencies": { 5 | "react": "17.0.2", 6 | "react-dom": "17.0.2", 7 | "react-google-charts": "*", 8 | "react-scripts": "4.0.3" 9 | }, 10 | "devDependencies": { 11 | "@types/react": "17.0.20", 12 | "@types/react-dom": "17.0.9", 13 | "typescript": "4.4.2" 14 | } 15 | } 16 | -------------------------------------------------------------------------------- /sandboxes/area-chart/stacked/App.tsx: -------------------------------------------------------------------------------- 1 | import React from "react"; 2 | import { Chart } from "react-google-charts"; 3 | 4 | export const data = [ 5 | ["Year", "Sales", "Expenses"], 6 | ["2013", 1000, 400], 7 | ["2014", 1170, 460], 8 | ["2015", 660, 1120], 9 | ["2016", 1030, 540], 10 | ]; 11 | 12 | export const options = { 13 | isStacked: true, 14 | height: 300, 15 | legend: { position: "top", maxLines: 3 }, 16 | vAxis: { minValue: 0 }, 17 | }; 18 | 19 | export function App() { 20 | return ( 21 | 28 | ); 29 | } 30 | -------------------------------------------------------------------------------- /sandboxes/area-chart/stacked/index.tsx: -------------------------------------------------------------------------------- 1 | import React from "react"; 2 | import { render } from "react-dom"; 3 | 4 | import { App } from "./App"; 5 | 6 | const rootElement = document.getElementById("root"); 7 | render(, rootElement); 8 | -------------------------------------------------------------------------------- /sandboxes/area-chart/stacked/package.json: -------------------------------------------------------------------------------- 1 | { 2 | "description": "Stacking Areas", 3 | "main": "index.tsx", 4 | "dependencies": { 5 | "react": "17.0.2", 6 | "react-dom": "17.0.2", 7 | "react-google-charts": "*", 8 | "react-scripts": "4.0.3" 9 | }, 10 | "devDependencies": { 11 | "@types/react": "17.0.20", 12 | "@types/react-dom": "17.0.9", 13 | "typescript": "4.4.2" 14 | } 15 | } 16 | -------------------------------------------------------------------------------- /sandboxes/bar-chart-material/.DS_Store: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/rakannimer/react-google-charts/27d1ba8f55161dbb8b54fedc58d32df3597e9c1f/sandboxes/bar-chart-material/.DS_Store -------------------------------------------------------------------------------- /sandboxes/bar-chart-material/default/App.tsx: -------------------------------------------------------------------------------- 1 | import React from "react"; 2 | import { Chart } from "react-google-charts"; 3 | 4 | export const data = [ 5 | ["Year", "Sales", "Expenses", "Profit"], 6 | ["2014", 1000, 400, 200], 7 | ["2015", 1170, 460, 250], 8 | ["2016", 660, 1120, 300], 9 | ["2017", 1030, 540, 350], 10 | ]; 11 | 12 | export const options = { 13 | chart: { 14 | title: "Company Performance", 15 | subtitle: "Sales, Expenses, and Profit: 2014-2017", 16 | }, 17 | }; 18 | 19 | export function App() { 20 | return ( 21 | 29 | ); 30 | } 31 | -------------------------------------------------------------------------------- /sandboxes/bar-chart-material/default/index.tsx: -------------------------------------------------------------------------------- 1 | import React from "react"; 2 | import { render } from "react-dom"; 3 | 4 | import { App } from "./App"; 5 | 6 | const rootElement = document.getElementById("root"); 7 | render(, rootElement); 8 | -------------------------------------------------------------------------------- /sandboxes/bar-chart-material/default/package.json: -------------------------------------------------------------------------------- 1 | { 2 | "description": "Material design bar chart", 3 | "main": "index.tsx", 4 | "dependencies": { 5 | "react": "17.0.2", 6 | "react-dom": "17.0.2", 7 | "react-google-charts": "*", 8 | "react-scripts": "4.0.3" 9 | }, 10 | "devDependencies": { 11 | "@types/react": "17.0.20", 12 | "@types/react-dom": "17.0.9", 13 | "typescript": "4.4.2" 14 | } 15 | } 16 | -------------------------------------------------------------------------------- /sandboxes/bar-chart-material/horizontal/App.tsx: -------------------------------------------------------------------------------- 1 | import React from "react"; 2 | import { Chart } from "react-google-charts"; 3 | 4 | export const data = [ 5 | ["City", "2010 Population", "2000 Population"], 6 | ["New York City, NY", 8175000, 8008000], 7 | ["Los Angeles, CA", 3792000, 3694000], 8 | ["Chicago, IL", 2695000, 2896000], 9 | ["Houston, TX", 2099000, 1953000], 10 | ["Philadelphia, PA", 1526000, 1517000], 11 | ]; 12 | 13 | export const options = { 14 | chart: { 15 | title: "Population of Largest U.S. Cities", 16 | subtitle: "Based on most recent and previous census data", 17 | }, 18 | hAxis: { 19 | title: "Total Population", 20 | minValue: 0, 21 | }, 22 | vAxis: { 23 | title: "City", 24 | }, 25 | bars: "horizontal", 26 | axes: { 27 | y: { 28 | 0: { side: "right" }, 29 | }, 30 | }, 31 | }; 32 | 33 | export function App() { 34 | return ( 35 | 42 | ); 43 | } 44 | -------------------------------------------------------------------------------- /sandboxes/bar-chart-material/horizontal/index.tsx: -------------------------------------------------------------------------------- 1 | import React from "react"; 2 | import { render } from "react-dom"; 3 | 4 | import { App } from "./App"; 5 | 6 | const rootElement = document.getElementById("root"); 7 | render(, rootElement); 8 | -------------------------------------------------------------------------------- /sandboxes/bar-chart-material/horizontal/package.json: -------------------------------------------------------------------------------- 1 | { 2 | "description": "Material design horizontal bar chart", 3 | "main": "index.tsx", 4 | "dependencies": { 5 | "react": "17.0.2", 6 | "react-dom": "17.0.2", 7 | "react-google-charts": "*", 8 | "react-scripts": "4.0.3" 9 | }, 10 | "devDependencies": { 11 | "@types/react": "17.0.20", 12 | "@types/react-dom": "17.0.9", 13 | "typescript": "4.4.2" 14 | } 15 | } 16 | -------------------------------------------------------------------------------- /sandboxes/bar-chart-material/meta.js: -------------------------------------------------------------------------------- 1 | module.exports = { 2 | "Data Format": 3 | "https://developers.google.com/chart/interactive/docs/gallery/barchart#data-format", 4 | Reference: 5 | "https://developers.google.com/chart/interactive/docs/gallery/barchart#creating-material-bar-charts", 6 | }; 7 | -------------------------------------------------------------------------------- /sandboxes/bar-chart/.DS_Store: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/rakannimer/react-google-charts/27d1ba8f55161dbb8b54fedc58d32df3597e9c1f/sandboxes/bar-chart/.DS_Store -------------------------------------------------------------------------------- /sandboxes/bar-chart/colors/App.tsx: -------------------------------------------------------------------------------- 1 | import React from "react"; 2 | import { Chart } from "react-google-charts"; 3 | 4 | export const data = [ 5 | ["City", "2010 Population", "2000 Population"], 6 | ["New York City, NY", 8175000, 8008000], 7 | ["Los Angeles, CA", 3792000, 3694000], 8 | ["Chicago, IL", 2695000, 2896000], 9 | ["Houston, TX", 2099000, 1953000], 10 | ["Philadelphia, PA", 1526000, 1517000], 11 | ]; 12 | 13 | export const options = { 14 | title: "Population of Largest U.S. Cities", 15 | chartArea: { width: "50%" }, 16 | colors: ["#b0120a", "#ffab91"], 17 | hAxis: { 18 | title: "Total Population", 19 | minValue: 0, 20 | }, 21 | vAxis: { 22 | title: "City", 23 | }, 24 | }; 25 | 26 | export function App() { 27 | return ( 28 | 35 | ); 36 | } 37 | -------------------------------------------------------------------------------- /sandboxes/bar-chart/colors/index.tsx: -------------------------------------------------------------------------------- 1 | import React from "react"; 2 | import { render } from "react-dom"; 3 | 4 | import { App } from "./App"; 5 | 6 | const rootElement = document.getElementById("root"); 7 | render(, rootElement); 8 | -------------------------------------------------------------------------------- /sandboxes/bar-chart/colors/package.json: -------------------------------------------------------------------------------- 1 | { 2 | "description": "Customizable Bar Colors", 3 | "main": "index.tsx", 4 | "dependencies": { 5 | "react": "17.0.2", 6 | "react-dom": "17.0.2", 7 | "react-google-charts": "*", 8 | "react-scripts": "4.0.3" 9 | }, 10 | "devDependencies": { 11 | "@types/react": "17.0.20", 12 | "@types/react-dom": "17.0.9", 13 | "typescript": "4.4.2" 14 | } 15 | } 16 | -------------------------------------------------------------------------------- /sandboxes/bar-chart/default/App.tsx: -------------------------------------------------------------------------------- 1 | import React from "react"; 2 | import { Chart } from "react-google-charts"; 3 | 4 | export const data = [ 5 | ["City", "2010 Population", "2000 Population"], 6 | ["New York City, NY", 8175000, 8008000], 7 | ["Los Angeles, CA", 3792000, 3694000], 8 | ["Chicago, IL", 2695000, 2896000], 9 | ["Houston, TX", 2099000, 1953000], 10 | ["Philadelphia, PA", 1526000, 1517000], 11 | ]; 12 | 13 | export const options = { 14 | title: "Population of Largest U.S. Cities", 15 | chartArea: { width: "50%" }, 16 | hAxis: { 17 | title: "Total Population", 18 | minValue: 0, 19 | }, 20 | vAxis: { 21 | title: "City", 22 | }, 23 | }; 24 | 25 | export function App() { 26 | return ( 27 | 35 | ); 36 | } 37 | -------------------------------------------------------------------------------- /sandboxes/bar-chart/default/index.tsx: -------------------------------------------------------------------------------- 1 | import React from "react"; 2 | import { render } from "react-dom"; 3 | 4 | import { App } from "./App"; 5 | 6 | const rootElement = document.getElementById("root"); 7 | render(, rootElement); 8 | -------------------------------------------------------------------------------- /sandboxes/bar-chart/default/package.json: -------------------------------------------------------------------------------- 1 | { 2 | "description": "Basic bar chart with multiple series", 3 | "main": "index.tsx", 4 | "dependencies": { 5 | "react": "17.0.2", 6 | "react-dom": "17.0.2", 7 | "react-google-charts": "*", 8 | "react-scripts": "4.0.3" 9 | }, 10 | "devDependencies": { 11 | "@types/react": "17.0.20", 12 | "@types/react-dom": "17.0.9", 13 | "typescript": "4.4.2" 14 | } 15 | } 16 | -------------------------------------------------------------------------------- /sandboxes/bar-chart/diff/App.tsx: -------------------------------------------------------------------------------- 1 | import React from "react"; 2 | import { Chart } from "react-google-charts"; 3 | 4 | const dataOld = [ 5 | ["Name", "Popularity"], 6 | ["Cesar", 250], 7 | ["Rachel", 4200], 8 | ["Patrick", 2900], 9 | ["Eric", 8200], 10 | ]; 11 | 12 | const dataNew = [ 13 | ["Name", "Popularity"], 14 | ["Cesar", 370], 15 | ["Rachel", 600], 16 | ["Patrick", 700], 17 | ["Eric", 1500], 18 | ]; 19 | 20 | export const diffdata = { 21 | old: dataOld, 22 | new: dataNew, 23 | }; 24 | 25 | export const options = { 26 | legend: { position: "top" }, 27 | }; 28 | 29 | export function App() { 30 | return ( 31 | 38 | ); 39 | } 40 | -------------------------------------------------------------------------------- /sandboxes/bar-chart/diff/index.tsx: -------------------------------------------------------------------------------- 1 | import React from "react"; 2 | import { render } from "react-dom"; 3 | 4 | import { App } from "./App"; 5 | 6 | const rootElement = document.getElementById("root"); 7 | render(, rootElement); 8 | -------------------------------------------------------------------------------- /sandboxes/bar-chart/diff/package.json: -------------------------------------------------------------------------------- 1 | { 2 | "description": "Diff Bar Chart", 3 | "main": "index.tsx", 4 | "dependencies": { 5 | "react": "17.0.2", 6 | "react-dom": "17.0.2", 7 | "react-google-charts": "*", 8 | "react-scripts": "4.0.3" 9 | }, 10 | "devDependencies": { 11 | "@types/react": "17.0.20", 12 | "@types/react-dom": "17.0.9", 13 | "typescript": "4.4.2" 14 | } 15 | } 16 | -------------------------------------------------------------------------------- /sandboxes/bar-chart/labels/App.tsx: -------------------------------------------------------------------------------- 1 | import React from "react"; 2 | import { Chart } from "react-google-charts"; 3 | 4 | export const data = [ 5 | [ 6 | "Element", 7 | "Density", 8 | { role: "style" }, 9 | { 10 | role: "annotation", 11 | type: "string", 12 | }, 13 | ], 14 | ["Copper", 8.94, "#b87333", "Cu"], 15 | ["Silver", 10.49, "silver", "Ag"], 16 | ["Gold", 19.3, "gold", "Au"], 17 | ["Platinum", 21.45, "color: #e5e4e2", "Pt"], 18 | ]; 19 | 20 | export const options = { 21 | title: "Density of Precious Metals, in g/cm^3", 22 | width: 600, 23 | height: 400, 24 | bar: { groupWidth: "95%" }, 25 | legend: { position: "none" }, 26 | }; 27 | 28 | export function App() { 29 | return ( 30 | 37 | ); 38 | } 39 | -------------------------------------------------------------------------------- /sandboxes/bar-chart/labels/index.tsx: -------------------------------------------------------------------------------- 1 | import React from "react"; 2 | import { render } from "react-dom"; 3 | 4 | import { App } from "./App"; 5 | 6 | const rootElement = document.getElementById("root"); 7 | render(, rootElement); 8 | -------------------------------------------------------------------------------- /sandboxes/bar-chart/labels/package.json: -------------------------------------------------------------------------------- 1 | { 2 | "description": "Labeling Bars", 3 | "main": "index.tsx", 4 | "dependencies": { 5 | "react": "17.0.2", 6 | "react-dom": "17.0.2", 7 | "react-google-charts": "*", 8 | "react-scripts": "4.0.3" 9 | }, 10 | "devDependencies": { 11 | "@types/react": "17.0.20", 12 | "@types/react-dom": "17.0.9", 13 | "typescript": "4.4.2" 14 | } 15 | } 16 | -------------------------------------------------------------------------------- /sandboxes/bar-chart/meta.js: -------------------------------------------------------------------------------- 1 | module.exports = { 2 | "Data Format": 3 | "https://developers.google.com/chart/interactive/docs/gallery/barchart#data-format", 4 | Reference: 5 | "https://developers.google.com/chart/interactive/docs/gallery/barchart", 6 | "Diff Charts Data Format": 7 | "https://developers.google.com/chart/interactive/docs/gallery/diffchart#data-format", 8 | "Diff Charts Reference": 9 | "https://developers.google.com/chart/interactive/docs/gallery/diffchart", 10 | }; 11 | -------------------------------------------------------------------------------- /sandboxes/bar-chart/stacked/App.tsx: -------------------------------------------------------------------------------- 1 | import React from "react"; 2 | import { Chart } from "react-google-charts"; 3 | 4 | export const data = [ 5 | ["City", "2010 Population", "2000 Population"], 6 | ["New York City, NY", 8175000, 8008000], 7 | ["Los Angeles, CA", 3792000, 3694000], 8 | ["Chicago, IL", 2695000, 2896000], 9 | ["Houston, TX", 2099000, 1953000], 10 | ["Philadelphia, PA", 1526000, 1517000], 11 | ]; 12 | 13 | export const options = { 14 | title: "Population of Largest U.S. Cities", 15 | chartArea: { width: "50%" }, 16 | isStacked: true, 17 | hAxis: { 18 | title: "Total Population", 19 | minValue: 0, 20 | }, 21 | vAxis: { 22 | title: "City", 23 | }, 24 | }; 25 | 26 | export function App() { 27 | return ( 28 | 35 | ); 36 | } 37 | -------------------------------------------------------------------------------- /sandboxes/bar-chart/stacked/index.tsx: -------------------------------------------------------------------------------- 1 | import React from "react"; 2 | import { render } from "react-dom"; 3 | 4 | import { App } from "./App"; 5 | 6 | const rootElement = document.getElementById("root"); 7 | render(, rootElement); 8 | -------------------------------------------------------------------------------- /sandboxes/bar-chart/stacked/package.json: -------------------------------------------------------------------------------- 1 | { 2 | "description": "Stacked bar chart with multiple series", 3 | "main": "index.tsx", 4 | "dependencies": { 5 | "react": "17.0.2", 6 | "react-dom": "17.0.2", 7 | "react-google-charts": "*", 8 | "react-scripts": "4.0.3" 9 | }, 10 | "devDependencies": { 11 | "@types/react": "17.0.20", 12 | "@types/react-dom": "17.0.9", 13 | "typescript": "4.4.2" 14 | } 15 | } 16 | -------------------------------------------------------------------------------- /sandboxes/bubble-chart/.DS_Store: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/rakannimer/react-google-charts/27d1ba8f55161dbb8b54fedc58d32df3597e9c1f/sandboxes/bubble-chart/.DS_Store -------------------------------------------------------------------------------- /sandboxes/bubble-chart/colors/App.tsx: -------------------------------------------------------------------------------- 1 | import React from "react"; 2 | import { Chart } from "react-google-charts"; 3 | 4 | export const data = [ 5 | ["ID", "X", "Y", "Temperature"], 6 | ["", 80, 167, 120], 7 | ["", 79, 136, 130], 8 | ["", 78, 184, 50], 9 | ["", 72, 278, 230], 10 | ["", 81, 200, 210], 11 | ["", 72, 170, 100], 12 | ["", 68, 477, 80], 13 | ]; 14 | 15 | export const options = { 16 | colorAxis: { colors: ["yellow", "red"] }, 17 | }; 18 | 19 | export function App() { 20 | return ( 21 | 28 | ); 29 | } 30 | -------------------------------------------------------------------------------- /sandboxes/bubble-chart/colors/index.tsx: -------------------------------------------------------------------------------- 1 | import React from "react"; 2 | import { render } from "react-dom"; 3 | 4 | import { App } from "./App"; 5 | 6 | const rootElement = document.getElementById("root"); 7 | render(, rootElement); 8 | -------------------------------------------------------------------------------- /sandboxes/bubble-chart/colors/package.json: -------------------------------------------------------------------------------- 1 | { 2 | "description": "Color By Numbers", 3 | "main": "index.tsx", 4 | "dependencies": { 5 | "react": "17.0.2", 6 | "react-dom": "17.0.2", 7 | "react-google-charts": "*", 8 | "react-scripts": "4.0.3" 9 | }, 10 | "devDependencies": { 11 | "@types/react": "17.0.20", 12 | "@types/react-dom": "17.0.9", 13 | "typescript": "4.4.2" 14 | } 15 | } 16 | -------------------------------------------------------------------------------- /sandboxes/bubble-chart/default/index.tsx: -------------------------------------------------------------------------------- 1 | import React from "react"; 2 | import { render } from "react-dom"; 3 | 4 | import { App } from "./App"; 5 | 6 | const rootElement = document.getElementById("root"); 7 | render(, rootElement); 8 | -------------------------------------------------------------------------------- /sandboxes/bubble-chart/default/package.json: -------------------------------------------------------------------------------- 1 | { 2 | "description": "Series Example", 3 | "main": "index.tsx", 4 | "dependencies": { 5 | "react": "17.0.2", 6 | "react-dom": "17.0.2", 7 | "react-google-charts": "*", 8 | "react-scripts": "4.0.3" 9 | }, 10 | "devDependencies": { 11 | "@types/react": "17.0.20", 12 | "@types/react-dom": "17.0.9", 13 | "typescript": "4.4.2" 14 | } 15 | } 16 | -------------------------------------------------------------------------------- /sandboxes/bubble-chart/labels/index.tsx: -------------------------------------------------------------------------------- 1 | import React from "react"; 2 | import { render } from "react-dom"; 3 | 4 | import { App } from "./App"; 5 | 6 | const rootElement = document.getElementById("root"); 7 | render(, rootElement); 8 | -------------------------------------------------------------------------------- /sandboxes/bubble-chart/labels/package.json: -------------------------------------------------------------------------------- 1 | { 2 | "description": "Custom Labels", 3 | "main": "index.tsx", 4 | "dependencies": { 5 | "react": "17.0.2", 6 | "react-dom": "17.0.2", 7 | "react-google-charts": "*", 8 | "react-scripts": "4.0.3" 9 | }, 10 | "devDependencies": { 11 | "@types/react": "17.0.20", 12 | "@types/react-dom": "17.0.9", 13 | "typescript": "4.4.2" 14 | } 15 | } 16 | -------------------------------------------------------------------------------- /sandboxes/bubble-chart/meta.js: -------------------------------------------------------------------------------- 1 | module.exports = { 2 | "Data Format": 3 | "https://developers.google.com/chart/interactive/docs/gallery/bubblechart#data-format", 4 | Reference: 5 | "https://developers.google.com/chart/interactive/docs/gallery/bubblechart", 6 | }; 7 | -------------------------------------------------------------------------------- /sandboxes/calendar/.DS_Store: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/rakannimer/react-google-charts/27d1ba8f55161dbb8b54fedc58d32df3597e9c1f/sandboxes/calendar/.DS_Store -------------------------------------------------------------------------------- /sandboxes/calendar/default/index.tsx: -------------------------------------------------------------------------------- 1 | import React from "react"; 2 | import { render } from "react-dom"; 3 | 4 | import { App } from "./App"; 5 | 6 | const rootElement = document.getElementById("root"); 7 | render(, rootElement); 8 | -------------------------------------------------------------------------------- /sandboxes/calendar/default/package.json: -------------------------------------------------------------------------------- 1 | { 2 | "description": "Simple Example", 3 | "main": "index.tsx", 4 | "dependencies": { 5 | "react": "17.0.2", 6 | "react-dom": "17.0.2", 7 | "react-google-charts": "*", 8 | "react-scripts": "4.0.3" 9 | }, 10 | "devDependencies": { 11 | "@types/react": "17.0.20", 12 | "@types/react-dom": "17.0.9", 13 | "typescript": "4.4.2" 14 | } 15 | } 16 | -------------------------------------------------------------------------------- /sandboxes/calendar/meta.js: -------------------------------------------------------------------------------- 1 | module.exports = { 2 | "Data Format": 3 | "https://developers.google.com/chart/interactive/docs/gallery/calendar#data-format", 4 | Reference: 5 | "https://developers.google.com/chart/interactive/docs/gallery/calendar", 6 | }; 7 | -------------------------------------------------------------------------------- /sandboxes/calendar/negative-values/App.tsx: -------------------------------------------------------------------------------- 1 | import React from "react"; 2 | import { Chart } from "react-google-charts"; 3 | 4 | export const data = [ 5 | [ 6 | { type: "date", id: "Date" }, 7 | { type: "number", id: "Won/Loss" }, 8 | ], 9 | [new Date(2013, 2, 4), 10], 10 | [new Date(2013, 2, 5), 3], 11 | [new Date(2013, 2, 7), -1], 12 | [new Date(2013, 2, 8), 2], 13 | [new Date(2013, 2, 12), -1], 14 | [new Date(2013, 2, 13), 1], 15 | [new Date(2013, 2, 15), 1], 16 | [new Date(2013, 2, 16), -4], 17 | [new Date(2013, 1, 4), 10], 18 | [new Date(2013, 1, 5), 3], 19 | [new Date(2013, 1, 7), -1], 20 | [new Date(2013, 1, 8), 2], 21 | [new Date(2013, 1, 12), -1], 22 | [new Date(2013, 1, 13), 1], 23 | [new Date(2013, 1, 15), 1], 24 | [new Date(2013, 1, 16), -4], 25 | ]; 26 | 27 | export const options = { 28 | title: "Red Sox Attendance", 29 | }; 30 | 31 | export function App() { 32 | return ( 33 | 40 | ); 41 | } 42 | -------------------------------------------------------------------------------- /sandboxes/calendar/negative-values/index.tsx: -------------------------------------------------------------------------------- 1 | import React from "react"; 2 | import { render } from "react-dom"; 3 | 4 | import { App } from "./App"; 5 | 6 | const rootElement = document.getElementById("root"); 7 | render(, rootElement); 8 | -------------------------------------------------------------------------------- /sandboxes/calendar/negative-values/package.json: -------------------------------------------------------------------------------- 1 | { 2 | "description": "With negative values", 3 | "main": "index.tsx", 4 | "dependencies": { 5 | "react": "17.0.2", 6 | "react-dom": "17.0.2", 7 | "react-google-charts": "*", 8 | "react-scripts": "4.0.3" 9 | }, 10 | "devDependencies": { 11 | "@types/react": "17.0.20", 12 | "@types/react-dom": "17.0.9", 13 | "typescript": "4.4.2" 14 | } 15 | } 16 | -------------------------------------------------------------------------------- /sandboxes/candlestick-chart/.DS_Store: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/rakannimer/react-google-charts/27d1ba8f55161dbb8b54fedc58d32df3597e9c1f/sandboxes/candlestick-chart/.DS_Store -------------------------------------------------------------------------------- /sandboxes/candlestick-chart/default/App.tsx: -------------------------------------------------------------------------------- 1 | import React from "react"; 2 | import { Chart } from "react-google-charts"; 3 | 4 | export const data = [ 5 | ["day", "a", "b", "c", "d"], 6 | ["Mon", 20, 28, 38, 45], 7 | ["Tue", 31, 38, 55, 66], 8 | ["Wed", 50, 55, 77, 80], 9 | ["Thu", 50, 77, 66, 77], 10 | ["Fri", 15, 66, 22, 68], 11 | ]; 12 | 13 | export const options = { 14 | legend: "none", 15 | }; 16 | 17 | export function App() { 18 | return ( 19 | 26 | ); 27 | } 28 | -------------------------------------------------------------------------------- /sandboxes/candlestick-chart/default/index.tsx: -------------------------------------------------------------------------------- 1 | import React from "react"; 2 | import { render } from "react-dom"; 3 | 4 | import { App } from "./App"; 5 | 6 | const rootElement = document.getElementById("root"); 7 | render(, rootElement); 8 | -------------------------------------------------------------------------------- /sandboxes/candlestick-chart/default/package.json: -------------------------------------------------------------------------------- 1 | { 2 | "description": "Simple Example", 3 | "main": "index.tsx", 4 | "dependencies": { 5 | "react": "17.0.2", 6 | "react-dom": "17.0.2", 7 | "react-google-charts": "*", 8 | "react-scripts": "4.0.3" 9 | }, 10 | "devDependencies": { 11 | "@types/react": "17.0.20", 12 | "@types/react-dom": "17.0.9", 13 | "typescript": "4.4.2" 14 | } 15 | } 16 | -------------------------------------------------------------------------------- /sandboxes/candlestick-chart/meta.js: -------------------------------------------------------------------------------- 1 | module.exports = { 2 | "Data Format": 3 | "https://developers.google.com/chart/interactive/docs/gallery/candlestickchart#data-format", 4 | Reference: 5 | "https://developers.google.com/chart/interactive/docs/gallery/candlestickchart", 6 | }; 7 | -------------------------------------------------------------------------------- /sandboxes/candlestick-chart/waterfall/App.tsx: -------------------------------------------------------------------------------- 1 | import React from "react"; 2 | import { Chart } from "react-google-charts"; 3 | 4 | export const data = [ 5 | ["Day", "", "", "", ""], 6 | ["Mon", 20, 28, 38, 45], 7 | ["Tue", 31, 38, 55, 66], 8 | ["Wed", 50, 55, 77, 80], 9 | ["Thu", 77, 77, 66, 50], 10 | ["Fri", 68, 66, 22, 15], 11 | ]; 12 | 13 | export const options = { 14 | legend: "none", 15 | bar: { groupWidth: "100%" }, // Remove space between bars. 16 | candlestick: { 17 | fallingColor: { strokeWidth: 0, fill: "#a52714" }, // red 18 | risingColor: { strokeWidth: 0, fill: "#0f9d58" }, // green 19 | }, 20 | }; 21 | 22 | export function App() { 23 | return ( 24 | 31 | ); 32 | } 33 | -------------------------------------------------------------------------------- /sandboxes/candlestick-chart/waterfall/index.tsx: -------------------------------------------------------------------------------- 1 | import React from "react"; 2 | import { render } from "react-dom"; 3 | 4 | import { App } from "./App"; 5 | 6 | const rootElement = document.getElementById("root"); 7 | render(, rootElement); 8 | -------------------------------------------------------------------------------- /sandboxes/candlestick-chart/waterfall/package.json: -------------------------------------------------------------------------------- 1 | { 2 | "description": "Waterfall Chart", 3 | "main": "index.tsx", 4 | "dependencies": { 5 | "react": "17.0.2", 6 | "react-dom": "17.0.2", 7 | "react-google-charts": "*", 8 | "react-scripts": "4.0.3" 9 | }, 10 | "devDependencies": { 11 | "@types/react": "17.0.20", 12 | "@types/react-dom": "17.0.9", 13 | "typescript": "4.4.2" 14 | } 15 | } 16 | -------------------------------------------------------------------------------- /sandboxes/column-chart/.DS_Store: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/rakannimer/react-google-charts/27d1ba8f55161dbb8b54fedc58d32df3597e9c1f/sandboxes/column-chart/.DS_Store -------------------------------------------------------------------------------- /sandboxes/column-chart/default/App.tsx: -------------------------------------------------------------------------------- 1 | import React from "react"; 2 | import { Chart } from "react-google-charts"; 3 | 4 | export const data = [ 5 | ["Element", "Density", { role: "style" }], 6 | ["Copper", 8.94, "#b87333"], // RGB value 7 | ["Silver", 10.49, "silver"], // English color name 8 | ["Gold", 19.3, "gold"], 9 | ["Platinum", 21.45, "color: #e5e4e2"], // CSS-style declaration 10 | ]; 11 | 12 | export function App() { 13 | return ( 14 | 15 | ); 16 | } 17 | -------------------------------------------------------------------------------- /sandboxes/column-chart/default/index.tsx: -------------------------------------------------------------------------------- 1 | import React from "react"; 2 | import { render } from "react-dom"; 3 | 4 | import { App } from "./App"; 5 | 6 | const rootElement = document.getElementById("root"); 7 | render(, rootElement); 8 | -------------------------------------------------------------------------------- /sandboxes/column-chart/default/package.json: -------------------------------------------------------------------------------- 1 | { 2 | "description": "Basic column chart", 3 | "main": "index.tsx", 4 | "dependencies": { 5 | "react": "17.0.2", 6 | "react-dom": "17.0.2", 7 | "react-google-charts": "*", 8 | "react-scripts": "4.0.3" 9 | }, 10 | "devDependencies": { 11 | "@types/react": "17.0.20", 12 | "@types/react-dom": "17.0.9", 13 | "typescript": "4.4.2" 14 | } 15 | } 16 | -------------------------------------------------------------------------------- /sandboxes/column-chart/diff/App.tsx: -------------------------------------------------------------------------------- 1 | import React from "react"; 2 | import { Chart } from "react-google-charts"; 3 | 4 | const dataOld = [ 5 | ["Name", "Popularity"], 6 | ["Cesar", 250], 7 | ["Rachel", 4200], 8 | ["Patrick", 2900], 9 | ["Eric", 8200], 10 | ]; 11 | 12 | const dataNew = [ 13 | ["Name", "Popularity"], 14 | ["Cesar", 370], 15 | ["Rachel", 600], 16 | ["Patrick", 700], 17 | ["Eric", 1500], 18 | ]; 19 | 20 | export const diffdata = { 21 | old: dataOld, 22 | new: dataNew, 23 | }; 24 | 25 | export function App() { 26 | return ( 27 | 33 | ); 34 | } 35 | -------------------------------------------------------------------------------- /sandboxes/column-chart/diff/index.tsx: -------------------------------------------------------------------------------- 1 | import React from "react"; 2 | import { render } from "react-dom"; 3 | 4 | import { App } from "./App"; 5 | 6 | const rootElement = document.getElementById("root"); 7 | render(, rootElement); 8 | -------------------------------------------------------------------------------- /sandboxes/column-chart/diff/package.json: -------------------------------------------------------------------------------- 1 | { 2 | "description": "Diff Column Chart", 3 | "main": "index.tsx", 4 | "dependencies": { 5 | "react": "17.0.2", 6 | "react-dom": "17.0.2", 7 | "react-google-charts": "*", 8 | "react-scripts": "4.0.3" 9 | }, 10 | "devDependencies": { 11 | "@types/react": "17.0.20", 12 | "@types/react-dom": "17.0.9", 13 | "typescript": "4.4.2" 14 | } 15 | } 16 | -------------------------------------------------------------------------------- /sandboxes/column-chart/meta.js: -------------------------------------------------------------------------------- 1 | module.exports = { 2 | "Data Format": 3 | "https://developers.google.com/chart/interactive/docs/gallery/columnchart#data-format", 4 | Reference: 5 | "https://developers.google.com/chart/interactive/docs/gallery/columnchart", 6 | "Diff Charts Data Format": 7 | "https://developers.google.com/chart/interactive/docs/gallery/diffchart#data-format", 8 | "Diff Charts Reference": 9 | "https://developers.google.com/chart/interactive/docs/gallery/diffchart", 10 | }; 11 | -------------------------------------------------------------------------------- /sandboxes/combo-chart/default/App.tsx: -------------------------------------------------------------------------------- 1 | import React from "react"; 2 | import { Chart } from "react-google-charts"; 3 | 4 | export const data = [ 5 | [ 6 | "Month", 7 | "Bolivia", 8 | "Ecuador", 9 | "Madagascar", 10 | "Papua New Guinea", 11 | "Rwanda", 12 | "Average", 13 | ], 14 | ["2004/05", 165, 938, 522, 998, 450, 614.6], 15 | ["2005/06", 135, 1120, 599, 1268, 288, 682], 16 | ["2006/07", 157, 1167, 587, 807, 397, 623], 17 | ["2007/08", 139, 1110, 615, 968, 215, 609.4], 18 | ["2008/09", 136, 691, 629, 1026, 366, 569.6], 19 | ]; 20 | 21 | export const options = { 22 | title: "Monthly Coffee Production by Country", 23 | vAxis: { title: "Cups" }, 24 | hAxis: { title: "Month" }, 25 | seriesType: "bars", 26 | series: { 5: { type: "line" } }, 27 | }; 28 | 29 | export function App() { 30 | return ( 31 | 38 | ); 39 | } 40 | -------------------------------------------------------------------------------- /sandboxes/combo-chart/default/index.tsx: -------------------------------------------------------------------------------- 1 | import React from "react"; 2 | import { render } from "react-dom"; 3 | 4 | import { App } from "./App"; 5 | 6 | const rootElement = document.getElementById("root"); 7 | render(, rootElement); 8 | -------------------------------------------------------------------------------- /sandboxes/combo-chart/default/package.json: -------------------------------------------------------------------------------- 1 | { 2 | "description": "Simple Example", 3 | "main": "index.tsx", 4 | "dependencies": { 5 | "react": "17.0.2", 6 | "react-dom": "17.0.2", 7 | "react-google-charts": "*", 8 | "react-scripts": "4.0.3" 9 | }, 10 | "devDependencies": { 11 | "@types/react": "17.0.20", 12 | "@types/react-dom": "17.0.9", 13 | "typescript": "4.4.2" 14 | } 15 | } 16 | -------------------------------------------------------------------------------- /sandboxes/combo-chart/meta.js: -------------------------------------------------------------------------------- 1 | module.exports = { 2 | "Data Format": 3 | "https://developers.google.com/chart/interactive/docs/gallery/combochart#data-format", 4 | Reference: 5 | "https://developers.google.com/chart/interactive/docs/gallery/combochart", 6 | }; 7 | -------------------------------------------------------------------------------- /sandboxes/gantt/.DS_Store: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/rakannimer/react-google-charts/27d1ba8f55161dbb8b54fedc58d32df3597e9c1f/sandboxes/gantt/.DS_Store -------------------------------------------------------------------------------- /sandboxes/gantt/computed/index.tsx: -------------------------------------------------------------------------------- 1 | import React from "react"; 2 | import { render } from "react-dom"; 3 | 4 | import { App } from "./App"; 5 | 6 | const rootElement = document.getElementById("root"); 7 | render(, rootElement); 8 | -------------------------------------------------------------------------------- /sandboxes/gantt/computed/package.json: -------------------------------------------------------------------------------- 1 | { 2 | "description": "Computed Start End From Duration", 3 | "main": "index.tsx", 4 | "dependencies": { 5 | "react": "17.0.2", 6 | "react-dom": "17.0.2", 7 | "react-google-charts": "*", 8 | "react-scripts": "4.0.3" 9 | }, 10 | "devDependencies": { 11 | "@types/react": "17.0.20", 12 | "@types/react-dom": "17.0.9", 13 | "typescript": "4.4.2" 14 | } 15 | } 16 | -------------------------------------------------------------------------------- /sandboxes/gantt/critical-path/index.tsx: -------------------------------------------------------------------------------- 1 | import React from "react"; 2 | import { render } from "react-dom"; 3 | 4 | import { App } from "./App"; 5 | 6 | const rootElement = document.getElementById("root"); 7 | render(, rootElement); 8 | -------------------------------------------------------------------------------- /sandboxes/gantt/critical-path/package.json: -------------------------------------------------------------------------------- 1 | { 2 | "description": "Critical Path", 3 | "main": "index.tsx", 4 | "dependencies": { 5 | "react": "17.0.2", 6 | "react-dom": "17.0.2", 7 | "react-google-charts": "*", 8 | "react-scripts": "4.0.3" 9 | }, 10 | "devDependencies": { 11 | "@types/react": "17.0.20", 12 | "@types/react-dom": "17.0.9", 13 | "typescript": "4.4.2" 14 | } 15 | } 16 | -------------------------------------------------------------------------------- /sandboxes/gantt/default/index.tsx: -------------------------------------------------------------------------------- 1 | import React from "react"; 2 | import { render } from "react-dom"; 3 | 4 | import { App } from "./App"; 5 | 6 | const rootElement = document.getElementById("root"); 7 | render(, rootElement); 8 | -------------------------------------------------------------------------------- /sandboxes/gantt/default/package.json: -------------------------------------------------------------------------------- 1 | { 2 | "description": "Simple Example", 3 | "main": "index.tsx", 4 | "dependencies": { 5 | "react": "17.0.2", 6 | "react-dom": "17.0.2", 7 | "react-google-charts": "*", 8 | "react-scripts": "4.0.3" 9 | }, 10 | "devDependencies": { 11 | "@types/react": "17.0.20", 12 | "@types/react-dom": "17.0.9", 13 | "typescript": "4.4.2" 14 | } 15 | } 16 | -------------------------------------------------------------------------------- /sandboxes/gantt/grouping/index.tsx: -------------------------------------------------------------------------------- 1 | import React from "react"; 2 | import { render } from "react-dom"; 3 | 4 | import { App } from "./App"; 5 | 6 | const rootElement = document.getElementById("root"); 7 | render(, rootElement); 8 | -------------------------------------------------------------------------------- /sandboxes/gantt/grouping/package.json: -------------------------------------------------------------------------------- 1 | { 2 | "description": "Grouping Resources", 3 | "main": "index.tsx", 4 | "dependencies": { 5 | "react": "17.0.2", 6 | "react-dom": "17.0.2", 7 | "react-google-charts": "*", 8 | "react-scripts": "4.0.3" 9 | }, 10 | "devDependencies": { 11 | "@types/react": "17.0.20", 12 | "@types/react-dom": "17.0.9", 13 | "typescript": "4.4.2" 14 | } 15 | } 16 | -------------------------------------------------------------------------------- /sandboxes/gantt/meta.js: -------------------------------------------------------------------------------- 1 | module.exports = { 2 | "Data Format": 3 | "https://developers.google.com/chart/interactive/docs/gallery/ganttchart#data-format", 4 | Reference: 5 | "https://developers.google.com/chart/interactive/docs/gallery/ganttchart", 6 | }; 7 | -------------------------------------------------------------------------------- /sandboxes/gantt/no-dependencies/index.tsx: -------------------------------------------------------------------------------- 1 | import React from "react"; 2 | import { render } from "react-dom"; 3 | 4 | import { App } from "./App"; 5 | 6 | const rootElement = document.getElementById("root"); 7 | render(, rootElement); 8 | -------------------------------------------------------------------------------- /sandboxes/gantt/no-dependencies/package.json: -------------------------------------------------------------------------------- 1 | { 2 | "description": "No Dependencies", 3 | "main": "index.tsx", 4 | "dependencies": { 5 | "react": "17.0.2", 6 | "react-dom": "17.0.2", 7 | "react-google-charts": "*", 8 | "react-scripts": "4.0.3" 9 | }, 10 | "devDependencies": { 11 | "@types/react": "17.0.20", 12 | "@types/react-dom": "17.0.9", 13 | "typescript": "4.4.2" 14 | } 15 | } 16 | -------------------------------------------------------------------------------- /sandboxes/gantt/styling-arrows/index.tsx: -------------------------------------------------------------------------------- 1 | import React from "react"; 2 | import { render } from "react-dom"; 3 | 4 | import { App } from "./App"; 5 | 6 | const rootElement = document.getElementById("root"); 7 | render(, rootElement); 8 | -------------------------------------------------------------------------------- /sandboxes/gantt/styling-arrows/package.json: -------------------------------------------------------------------------------- 1 | { 2 | "description": "Styling Arrows", 3 | "main": "index.tsx", 4 | "dependencies": { 5 | "react": "17.0.2", 6 | "react-dom": "17.0.2", 7 | "react-google-charts": "*", 8 | "react-scripts": "4.0.3" 9 | }, 10 | "devDependencies": { 11 | "@types/react": "17.0.20", 12 | "@types/react-dom": "17.0.9", 13 | "typescript": "4.4.2" 14 | } 15 | } 16 | -------------------------------------------------------------------------------- /sandboxes/gantt/styling-tracks/index.tsx: -------------------------------------------------------------------------------- 1 | import React from "react"; 2 | import { render } from "react-dom"; 3 | 4 | import { App } from "./App"; 5 | 6 | const rootElement = document.getElementById("root"); 7 | render(, rootElement); 8 | -------------------------------------------------------------------------------- /sandboxes/gantt/styling-tracks/package.json: -------------------------------------------------------------------------------- 1 | { 2 | "description": "Styling Tracks", 3 | "main": "index.tsx", 4 | "dependencies": { 5 | "react": "17.0.2", 6 | "react-dom": "17.0.2", 7 | "react-google-charts": "*", 8 | "react-scripts": "4.0.3" 9 | }, 10 | "devDependencies": { 11 | "@types/react": "17.0.20", 12 | "@types/react-dom": "17.0.9", 13 | "typescript": "4.4.2" 14 | } 15 | } 16 | -------------------------------------------------------------------------------- /sandboxes/gauge/default/App.tsx: -------------------------------------------------------------------------------- 1 | import React, { useState, useEffect } from "react"; 2 | import { Chart } from "react-google-charts"; 3 | 4 | export function getData() { 5 | return [ 6 | ["Label", "Value"], 7 | ["Memory", 24], 8 | ["CPU", 51], 9 | ["Network", 90], 10 | ]; 11 | } 12 | 13 | export const options = { 14 | width: 400, 15 | height: 120, 16 | redFrom: 90, 17 | redTo: 100, 18 | yellowFrom: 75, 19 | yellowTo: 90, 20 | minorTicks: 5, 21 | }; 22 | 23 | export function App() { 24 | const [data, setData] = useState(getData); 25 | 26 | useEffect(() => { 27 | const id = setInterval(() => { 28 | setData(getData()); 29 | }, 3000); 30 | 31 | return () => { 32 | clearInterval(id); 33 | }; 34 | }); 35 | 36 | return ( 37 | 44 | ); 45 | } 46 | -------------------------------------------------------------------------------- /sandboxes/gauge/default/index.tsx: -------------------------------------------------------------------------------- 1 | import React from "react"; 2 | import { render } from "react-dom"; 3 | 4 | import { App } from "./App"; 5 | 6 | const rootElement = document.getElementById("root"); 7 | render(, rootElement); 8 | -------------------------------------------------------------------------------- /sandboxes/gauge/default/package.json: -------------------------------------------------------------------------------- 1 | { 2 | "description": "Simple Example", 3 | "main": "index.tsx", 4 | "dependencies": { 5 | "react": "17.0.2", 6 | "react-dom": "17.0.2", 7 | "react-google-charts": "*", 8 | "react-scripts": "4.0.3" 9 | }, 10 | "devDependencies": { 11 | "@types/react": "17.0.20", 12 | "@types/react-dom": "17.0.9", 13 | "typescript": "4.4.2" 14 | } 15 | } 16 | -------------------------------------------------------------------------------- /sandboxes/gauge/meta.js: -------------------------------------------------------------------------------- 1 | module.exports = { 2 | "Data Format": 3 | "https://developers.google.com/chart/interactive/docs/gallery/gauge#data-format", 4 | Reference: 5 | "https://developers.google.com/chart/interactive/docs/gallery/gauge", 6 | }; 7 | -------------------------------------------------------------------------------- /sandboxes/geo-chart/.DS_Store: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/rakannimer/react-google-charts/27d1ba8f55161dbb8b54fedc58d32df3597e9c1f/sandboxes/geo-chart/.DS_Store -------------------------------------------------------------------------------- /sandboxes/geo-chart/colors/index.tsx: -------------------------------------------------------------------------------- 1 | import React from "react"; 2 | import { render } from "react-dom"; 3 | 4 | import { App } from "./App"; 5 | 6 | const rootElement = document.getElementById("root"); 7 | render(, rootElement); 8 | -------------------------------------------------------------------------------- /sandboxes/geo-chart/colors/package.json: -------------------------------------------------------------------------------- 1 | { 2 | "description": "Coloring Your Chart", 3 | "main": "index.tsx", 4 | "dependencies": { 5 | "react": "17.0.2", 6 | "react-dom": "17.0.2", 7 | "react-google-charts": "*", 8 | "react-scripts": "4.0.3" 9 | }, 10 | "devDependencies": { 11 | "@types/react": "17.0.20", 12 | "@types/react-dom": "17.0.9", 13 | "typescript": "4.4.2" 14 | } 15 | } 16 | -------------------------------------------------------------------------------- /sandboxes/geo-chart/default/App.tsx: -------------------------------------------------------------------------------- 1 | import React from "react"; 2 | import { Chart } from "react-google-charts"; 3 | 4 | export const data = [ 5 | ["Country", "Popularity"], 6 | ["Germany", 200], 7 | ["United States", 300], 8 | ["Brazil", 400], 9 | ["Canada", 500], 10 | ["France", 600], 11 | ["RU", 700], 12 | ]; 13 | 14 | export function App() { 15 | return ( 16 | { 21 | const chart = chartWrapper.getChart(); 22 | const selection = chart.getSelection(); 23 | if (selection.length === 0) return; 24 | const region = data[selection[0].row + 1]; 25 | console.log("Selected : " + region); 26 | }, 27 | }, 28 | ]} 29 | chartType="GeoChart" 30 | width="100%" 31 | height="100%" 32 | data={data} 33 | /> 34 | ); 35 | } 36 | -------------------------------------------------------------------------------- /sandboxes/geo-chart/default/index.tsx: -------------------------------------------------------------------------------- 1 | import React from "react"; 2 | import { render } from "react-dom"; 3 | 4 | import { App } from "./App"; 5 | 6 | const rootElement = document.getElementById("root"); 7 | render(, rootElement); 8 | -------------------------------------------------------------------------------- /sandboxes/geo-chart/default/package.json: -------------------------------------------------------------------------------- 1 | { 2 | "description": "Region GeoCharts", 3 | "main": "index.tsx", 4 | "dependencies": { 5 | "react": "17.0.2", 6 | "react-dom": "17.0.2", 7 | "react-google-charts": "*", 8 | "react-scripts": "4.0.3" 9 | }, 10 | "devDependencies": { 11 | "@types/react": "17.0.20", 12 | "@types/react-dom": "17.0.9", 13 | "typescript": "4.4.2" 14 | } 15 | } 16 | -------------------------------------------------------------------------------- /sandboxes/geo-chart/meta.js: -------------------------------------------------------------------------------- 1 | module.exports = { 2 | "Data Format": 3 | "https://developers.google.com/chart/interactive/docs/gallery/geochart#data-format", 4 | Reference: 5 | "https://developers.google.com/chart/interactive/docs/gallery/geochart", 6 | }; 7 | -------------------------------------------------------------------------------- /sandboxes/histogram/.DS_Store: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/rakannimer/react-google-charts/27d1ba8f55161dbb8b54fedc58d32df3597e9c1f/sandboxes/histogram/.DS_Store -------------------------------------------------------------------------------- /sandboxes/histogram/buckets/index.tsx: -------------------------------------------------------------------------------- 1 | import React from "react"; 2 | import { render } from "react-dom"; 3 | 4 | import { App } from "./App"; 5 | 6 | const rootElement = document.getElementById("root"); 7 | render(, rootElement); 8 | -------------------------------------------------------------------------------- /sandboxes/histogram/buckets/package.json: -------------------------------------------------------------------------------- 1 | { 2 | "description": "Controlling Buckets", 3 | "main": "index.tsx", 4 | "dependencies": { 5 | "react": "17.0.2", 6 | "react-dom": "17.0.2", 7 | "react-google-charts": "*", 8 | "react-scripts": "4.0.3" 9 | }, 10 | "devDependencies": { 11 | "@types/react": "17.0.20", 12 | "@types/react-dom": "17.0.9", 13 | "typescript": "4.4.2" 14 | } 15 | } 16 | -------------------------------------------------------------------------------- /sandboxes/histogram/colors/index.tsx: -------------------------------------------------------------------------------- 1 | import React from "react"; 2 | import { render } from "react-dom"; 3 | 4 | import { App } from "./App"; 5 | 6 | const rootElement = document.getElementById("root"); 7 | render(, rootElement); 8 | -------------------------------------------------------------------------------- /sandboxes/histogram/colors/package.json: -------------------------------------------------------------------------------- 1 | { 2 | "description": "Controlling Colors", 3 | "main": "index.tsx", 4 | "dependencies": { 5 | "react": "17.0.2", 6 | "react-dom": "17.0.2", 7 | "react-google-charts": "*", 8 | "react-scripts": "4.0.3" 9 | }, 10 | "devDependencies": { 11 | "@types/react": "17.0.20", 12 | "@types/react-dom": "17.0.9", 13 | "typescript": "4.4.2" 14 | } 15 | } 16 | -------------------------------------------------------------------------------- /sandboxes/histogram/default/index.tsx: -------------------------------------------------------------------------------- 1 | import React from "react"; 2 | import { render } from "react-dom"; 3 | 4 | import { App } from "./App"; 5 | 6 | const rootElement = document.getElementById("root"); 7 | render(, rootElement); 8 | -------------------------------------------------------------------------------- /sandboxes/histogram/default/package.json: -------------------------------------------------------------------------------- 1 | { 2 | "description": "Simple Example", 3 | "main": "index.tsx", 4 | "dependencies": { 5 | "react": "17.0.2", 6 | "react-dom": "17.0.2", 7 | "react-google-charts": "*", 8 | "react-scripts": "4.0.3" 9 | }, 10 | "devDependencies": { 11 | "@types/react": "17.0.20", 12 | "@types/react-dom": "17.0.9", 13 | "typescript": "4.4.2" 14 | } 15 | } 16 | -------------------------------------------------------------------------------- /sandboxes/histogram/distribution/index.tsx: -------------------------------------------------------------------------------- 1 | import React from "react"; 2 | import { render } from "react-dom"; 3 | 4 | import { App } from "./App"; 5 | 6 | const rootElement = document.getElementById("root"); 7 | render(, rootElement); 8 | -------------------------------------------------------------------------------- /sandboxes/histogram/distribution/package.json: -------------------------------------------------------------------------------- 1 | { 2 | "description": "Distribution", 3 | "main": "index.tsx", 4 | "dependencies": { 5 | "react": "17.0.2", 6 | "react-dom": "17.0.2", 7 | "react-google-charts": "*", 8 | "react-scripts": "4.0.3" 9 | }, 10 | "devDependencies": { 11 | "@types/react": "17.0.20", 12 | "@types/react-dom": "17.0.9", 13 | "typescript": "4.4.2" 14 | } 15 | } 16 | -------------------------------------------------------------------------------- /sandboxes/histogram/meta.js: -------------------------------------------------------------------------------- 1 | module.exports = { 2 | "Data Format": 3 | "https://developers.google.com/chart/interactive/docs/gallery/histogram#data-format", 4 | Reference: 5 | "https://developers.google.com/chart/interactive/docs/gallery/histogram", 6 | }; 7 | -------------------------------------------------------------------------------- /sandboxes/histogram/multiple-series/App.tsx: -------------------------------------------------------------------------------- 1 | import React from "react"; 2 | import { Chart } from "react-google-charts"; 3 | 4 | export const data = [ 5 | ["Quarks", "Leptons", "Gauge Bosons", "Scalar Bosons"], 6 | [2 / 3, -1, 0, 0], 7 | [2 / 3, -1, 0, null], 8 | [2 / 3, -1, 0, null], 9 | [-1 / 3, 0, 1, null], 10 | [-1 / 3, 0, -1, null], 11 | [-1 / 3, 0, null, null], 12 | [-1 / 3, 0, null, null], 13 | ]; 14 | 15 | export const options = { 16 | title: "Charges of subatomic particles", 17 | legend: { position: "top", maxLines: 2 }, 18 | colors: ["#5C3292", "#1A8763", "#871B47", "#999999"], 19 | interpolateNulls: false, 20 | }; 21 | 22 | export function App() { 23 | return ( 24 | 31 | ); 32 | } 33 | -------------------------------------------------------------------------------- /sandboxes/histogram/multiple-series/index.tsx: -------------------------------------------------------------------------------- 1 | import React from "react"; 2 | import { render } from "react-dom"; 3 | 4 | import { App } from "./App"; 5 | 6 | const rootElement = document.getElementById("root"); 7 | render(, rootElement); 8 | -------------------------------------------------------------------------------- /sandboxes/histogram/multiple-series/package.json: -------------------------------------------------------------------------------- 1 | { 2 | "description": "Multiple Series", 3 | "main": "index.tsx", 4 | "dependencies": { 5 | "react": "17.0.2", 6 | "react-dom": "17.0.2", 7 | "react-google-charts": "*", 8 | "react-scripts": "4.0.3" 9 | }, 10 | "devDependencies": { 11 | "@types/react": "17.0.20", 12 | "@types/react-dom": "17.0.9", 13 | "typescript": "4.4.2" 14 | } 15 | } 16 | -------------------------------------------------------------------------------- /sandboxes/line-chart-material/.DS_Store: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/rakannimer/react-google-charts/27d1ba8f55161dbb8b54fedc58d32df3597e9c1f/sandboxes/line-chart-material/.DS_Store -------------------------------------------------------------------------------- /sandboxes/line-chart-material/default/App.tsx: -------------------------------------------------------------------------------- 1 | import React from "react"; 2 | import { Chart } from "react-google-charts"; 3 | 4 | export const data = [ 5 | [ 6 | "Day", 7 | "Guardians of the Galaxy", 8 | "The Avengers", 9 | "Transformers: Age of Extinction", 10 | ], 11 | [1, 37.8, 80.8, 41.8], 12 | [2, 30.9, 69.5, 32.4], 13 | [3, 25.4, 57, 25.7], 14 | [4, 11.7, 18.8, 10.5], 15 | [5, 11.9, 17.6, 10.4], 16 | [6, 8.8, 13.6, 7.7], 17 | [7, 7.6, 12.3, 9.6], 18 | [8, 12.3, 29.2, 10.6], 19 | [9, 16.9, 42.9, 14.8], 20 | [10, 12.8, 30.9, 11.6], 21 | [11, 5.3, 7.9, 4.7], 22 | [12, 6.6, 8.4, 5.2], 23 | [13, 4.8, 6.3, 3.6], 24 | [14, 4.2, 6.2, 3.4], 25 | ]; 26 | 27 | export const options = { 28 | chart: { 29 | title: "Box Office Earnings in First Two Weeks of Opening", 30 | subtitle: "in millions of dollars (USD)", 31 | }, 32 | }; 33 | 34 | export function App() { 35 | return ( 36 | 44 | ); 45 | } 46 | -------------------------------------------------------------------------------- /sandboxes/line-chart-material/default/index.tsx: -------------------------------------------------------------------------------- 1 | import React from "react"; 2 | import { render } from "react-dom"; 3 | 4 | import { App } from "./App"; 5 | 6 | const rootElement = document.getElementById("root"); 7 | render(, rootElement); 8 | -------------------------------------------------------------------------------- /sandboxes/line-chart-material/default/package.json: -------------------------------------------------------------------------------- 1 | { 2 | "description": "Material Design Line Chart", 3 | "main": "index.tsx", 4 | "dependencies": { 5 | "react": "17.0.2", 6 | "react-dom": "17.0.2", 7 | "react-google-charts": "*", 8 | "react-scripts": "4.0.3" 9 | }, 10 | "devDependencies": { 11 | "@types/react": "17.0.20", 12 | "@types/react-dom": "17.0.9", 13 | "typescript": "4.4.2" 14 | } 15 | } 16 | -------------------------------------------------------------------------------- /sandboxes/line-chart-material/dual-charts/index.tsx: -------------------------------------------------------------------------------- 1 | import React from "react"; 2 | import { render } from "react-dom"; 3 | 4 | import { App } from "./App"; 5 | 6 | const rootElement = document.getElementById("root"); 7 | render(, rootElement); 8 | -------------------------------------------------------------------------------- /sandboxes/line-chart-material/dual-charts/package.json: -------------------------------------------------------------------------------- 1 | { 2 | "description": "Material Design Dual Y Charts", 3 | "main": "index.tsx", 4 | "dependencies": { 5 | "react": "17.0.2", 6 | "react-dom": "17.0.2", 7 | "react-google-charts": "*", 8 | "react-scripts": "4.0.3" 9 | }, 10 | "devDependencies": { 11 | "@types/react": "17.0.20", 12 | "@types/react-dom": "17.0.9", 13 | "typescript": "4.4.2" 14 | } 15 | } 16 | -------------------------------------------------------------------------------- /sandboxes/line-chart-material/meta.js: -------------------------------------------------------------------------------- 1 | module.exports = { 2 | "Data Format": 3 | "https://developers.google.com/chart/interactive/docs/gallery/linechart#data-format", 4 | Reference: 5 | "https://developers.google.com/chart/interactive/docs/gallery/linechart#creating-material-line-charts", 6 | }; 7 | -------------------------------------------------------------------------------- /sandboxes/line-chart/.DS_Store: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/rakannimer/react-google-charts/27d1ba8f55161dbb8b54fedc58d32df3597e9c1f/sandboxes/line-chart/.DS_Store -------------------------------------------------------------------------------- /sandboxes/line-chart/area-intervals/index.tsx: -------------------------------------------------------------------------------- 1 | import React from "react"; 2 | import { render } from "react-dom"; 3 | 4 | import { App } from "./App"; 5 | 6 | const rootElement = document.getElementById("root"); 7 | render(, rootElement); 8 | -------------------------------------------------------------------------------- /sandboxes/line-chart/area-intervals/package.json: -------------------------------------------------------------------------------- 1 | { 2 | "description": "Area Intervals", 3 | "main": "index.tsx", 4 | "dependencies": { 5 | "react": "17.0.2", 6 | "react-dom": "17.0.2", 7 | "react-google-charts": "*", 8 | "react-scripts": "4.0.3" 9 | }, 10 | "devDependencies": { 11 | "@types/react": "17.0.20", 12 | "@types/react-dom": "17.0.9", 13 | "typescript": "4.4.2" 14 | } 15 | } 16 | -------------------------------------------------------------------------------- /sandboxes/line-chart/bar-intervals/index.tsx: -------------------------------------------------------------------------------- 1 | import React from "react"; 2 | import { render } from "react-dom"; 3 | 4 | import { App } from "./App"; 5 | 6 | const rootElement = document.getElementById("root"); 7 | render(, rootElement); 8 | -------------------------------------------------------------------------------- /sandboxes/line-chart/bar-intervals/package.json: -------------------------------------------------------------------------------- 1 | { 2 | "description": "Bar Intervals", 3 | "main": "index.tsx", 4 | "dependencies": { 5 | "react": "17.0.2", 6 | "react-dom": "17.0.2", 7 | "react-google-charts": "*", 8 | "react-scripts": "4.0.3" 9 | }, 10 | "devDependencies": { 11 | "@types/react": "17.0.20", 12 | "@types/react-dom": "17.0.9", 13 | "typescript": "4.4.2" 14 | } 15 | } 16 | -------------------------------------------------------------------------------- /sandboxes/line-chart/box-intervals/index.tsx: -------------------------------------------------------------------------------- 1 | import React from "react"; 2 | import { render } from "react-dom"; 3 | 4 | import { App } from "./App"; 5 | 6 | const rootElement = document.getElementById("root"); 7 | render(, rootElement); 8 | -------------------------------------------------------------------------------- /sandboxes/line-chart/box-intervals/package.json: -------------------------------------------------------------------------------- 1 | { 2 | "description": "Box Intervals", 3 | "main": "index.tsx", 4 | "dependencies": { 5 | "react": "17.0.2", 6 | "react-dom": "17.0.2", 7 | "react-google-charts": "*", 8 | "react-scripts": "4.0.3" 9 | }, 10 | "devDependencies": { 11 | "@types/react": "17.0.20", 12 | "@types/react-dom": "17.0.9", 13 | "typescript": "4.4.2" 14 | } 15 | } 16 | -------------------------------------------------------------------------------- /sandboxes/line-chart/default/App.tsx: -------------------------------------------------------------------------------- 1 | import React from "react"; 2 | import { Chart } from "react-google-charts"; 3 | 4 | export const data = [ 5 | ["Year", "Sales", "Expenses"], 6 | ["2004", 1000, 400], 7 | ["2005", 1170, 460], 8 | ["2006", 660, 1120], 9 | ["2007", 1030, 540], 10 | ]; 11 | 12 | export const options = { 13 | title: "Company Performance", 14 | curveType: "function", 15 | legend: { position: "bottom" }, 16 | }; 17 | 18 | export function App() { 19 | return ( 20 | 28 | ); 29 | } 30 | -------------------------------------------------------------------------------- /sandboxes/line-chart/default/index.tsx: -------------------------------------------------------------------------------- 1 | import React from "react"; 2 | import { render } from "react-dom"; 3 | 4 | import { App } from "./App"; 5 | 6 | const rootElement = document.getElementById("root"); 7 | render(, rootElement); 8 | -------------------------------------------------------------------------------- /sandboxes/line-chart/default/package.json: -------------------------------------------------------------------------------- 1 | { 2 | "description": "Basic line chart with default styling", 3 | "main": "index.tsx", 4 | "dependencies": { 5 | "react": "17.0.2", 6 | "react-dom": "17.0.2", 7 | "react-google-charts": "*", 8 | "react-scripts": "4.0.3" 9 | }, 10 | "devDependencies": { 11 | "@types/react": "17.0.20", 12 | "@types/react-dom": "17.0.9", 13 | "typescript": "4.4.2" 14 | } 15 | } 16 | -------------------------------------------------------------------------------- /sandboxes/line-chart/formatted-date/index.tsx: -------------------------------------------------------------------------------- 1 | import React from "react"; 2 | import { render } from "react-dom"; 3 | 4 | import { App } from "./App"; 5 | 6 | const rootElement = document.getElementById("root"); 7 | render(, rootElement); 8 | -------------------------------------------------------------------------------- /sandboxes/line-chart/formatted-date/package.json: -------------------------------------------------------------------------------- 1 | { 2 | "description": "Basic line chart with formatted time dates on hAxis", 3 | "main": "index.tsx", 4 | "dependencies": { 5 | "react": "17.0.2", 6 | "react-dom": "17.0.2", 7 | "react-google-charts": "*", 8 | "react-scripts": "4.0.3" 9 | }, 10 | "devDependencies": { 11 | "@types/react": "17.0.20", 12 | "@types/react-dom": "17.0.9", 13 | "typescript": "4.4.2" 14 | } 15 | } 16 | -------------------------------------------------------------------------------- /sandboxes/line-chart/intervals-styles/index.tsx: -------------------------------------------------------------------------------- 1 | import React from "react"; 2 | import { render } from "react-dom"; 3 | 4 | import { App } from "./App"; 5 | 6 | const rootElement = document.getElementById("root"); 7 | render(, rootElement); 8 | -------------------------------------------------------------------------------- /sandboxes/line-chart/intervals-styles/package.json: -------------------------------------------------------------------------------- 1 | { 2 | "description": "Combining Interval Styles", 3 | "main": "index.tsx", 4 | "dependencies": { 5 | "react": "17.0.2", 6 | "react-dom": "17.0.2", 7 | "react-google-charts": "*", 8 | "react-scripts": "4.0.3" 9 | }, 10 | "devDependencies": { 11 | "@types/react": "17.0.20", 12 | "@types/react-dom": "17.0.9", 13 | "typescript": "4.4.2" 14 | } 15 | } 16 | -------------------------------------------------------------------------------- /sandboxes/line-chart/intervals-tailored/index.tsx: -------------------------------------------------------------------------------- 1 | import React from "react"; 2 | import { render } from "react-dom"; 3 | 4 | import { App } from "./App"; 5 | 6 | const rootElement = document.getElementById("root"); 7 | render(, rootElement); 8 | -------------------------------------------------------------------------------- /sandboxes/line-chart/intervals-tailored/package.json: -------------------------------------------------------------------------------- 1 | { 2 | "description": "Line Intervals Tailored", 3 | "main": "index.tsx", 4 | "dependencies": { 5 | "react": "17.0.2", 6 | "react-dom": "17.0.2", 7 | "react-google-charts": "*", 8 | "react-scripts": "4.0.3" 9 | }, 10 | "devDependencies": { 11 | "@types/react": "17.0.20", 12 | "@types/react-dom": "17.0.9", 13 | "typescript": "4.4.2" 14 | } 15 | } 16 | -------------------------------------------------------------------------------- /sandboxes/line-chart/intervals/index.tsx: -------------------------------------------------------------------------------- 1 | import React from "react"; 2 | import { render } from "react-dom"; 3 | 4 | import { App } from "./App"; 5 | 6 | const rootElement = document.getElementById("root"); 7 | render(, rootElement); 8 | -------------------------------------------------------------------------------- /sandboxes/line-chart/intervals/package.json: -------------------------------------------------------------------------------- 1 | { 2 | "description": "Line Intervals", 3 | "main": "index.tsx", 4 | "dependencies": { 5 | "react": "17.0.2", 6 | "react-dom": "17.0.2", 7 | "react-google-charts": "*", 8 | "react-scripts": "4.0.3" 9 | }, 10 | "devDependencies": { 11 | "@types/react": "17.0.20", 12 | "@types/react-dom": "17.0.9", 13 | "typescript": "4.4.2" 14 | } 15 | } 16 | -------------------------------------------------------------------------------- /sandboxes/line-chart/meta.js: -------------------------------------------------------------------------------- 1 | module.exports = { 2 | "Data Format": 3 | "https://developers.google.com/chart/interactive/docs/gallery/linechart#data-format", 4 | Reference: 5 | "https://developers.google.com/chart/interactive/docs/gallery/linechart", 6 | "Intervals Data Format": 7 | "https://developers.google.com/chart/interactive/docs/gallery/intervals#data-format", 8 | "Intervals Reference": 9 | "https://developers.google.com/chart/interactive/docs/gallery/intervals", 10 | }; 11 | -------------------------------------------------------------------------------- /sandboxes/line-chart/multiple-types/App.tsx: -------------------------------------------------------------------------------- 1 | import React from "react"; 2 | import { Chart } from "react-google-charts"; 3 | 4 | export const data = [ 5 | ["x", "dogs", "cats"], 6 | [0, 0, 0], 7 | [1, 10, 5], 8 | [2, 23, 15], 9 | [3, 17, 9], 10 | [4, 18, 10], 11 | [5, 9, 5], 12 | [6, 11, 3], 13 | [7, 27, 19], 14 | ]; 15 | 16 | export const options = { 17 | hAxis: { 18 | title: "Time", 19 | }, 20 | vAxis: { 21 | title: "Popularity", 22 | }, 23 | series: { 24 | 1: { curveType: "function" }, 25 | }, 26 | }; 27 | 28 | export function App() { 29 | return ( 30 | 37 | ); 38 | } 39 | -------------------------------------------------------------------------------- /sandboxes/line-chart/multiple-types/index.tsx: -------------------------------------------------------------------------------- 1 | import React from "react"; 2 | import { render } from "react-dom"; 3 | 4 | import { App } from "./App"; 5 | 6 | const rootElement = document.getElementById("root"); 7 | render(, rootElement); 8 | -------------------------------------------------------------------------------- /sandboxes/line-chart/multiple-types/package.json: -------------------------------------------------------------------------------- 1 | { 2 | "description": "Multiple line types", 3 | "main": "index.tsx", 4 | "dependencies": { 5 | "react": "17.0.2", 6 | "react-dom": "17.0.2", 7 | "react-google-charts": "*", 8 | "react-scripts": "4.0.3" 9 | }, 10 | "devDependencies": { 11 | "@types/react": "17.0.20", 12 | "@types/react-dom": "17.0.9", 13 | "typescript": "4.4.2" 14 | } 15 | } 16 | -------------------------------------------------------------------------------- /sandboxes/line-chart/multiple/App.tsx: -------------------------------------------------------------------------------- 1 | import React from "react"; 2 | import { Chart } from "react-google-charts"; 3 | 4 | export const data = [ 5 | ["Year", "Sales", "Expenses"], 6 | ["2004", 1000, 400], 7 | ["2005", 1170, 460], 8 | ["2006", 660, 1120], 9 | ["2007", 1030, 540], 10 | ]; 11 | 12 | export const options = { 13 | title: "Company Performance", 14 | curveType: "function", 15 | legend: { position: "bottom" }, 16 | }; 17 | 18 | export function App() { 19 | return ( 20 | 27 | ); 28 | } 29 | -------------------------------------------------------------------------------- /sandboxes/line-chart/multiple/index.tsx: -------------------------------------------------------------------------------- 1 | import React from "react"; 2 | import { render } from "react-dom"; 3 | 4 | import { App } from "./App"; 5 | 6 | const rootElement = document.getElementById("root"); 7 | render(, rootElement); 8 | -------------------------------------------------------------------------------- /sandboxes/line-chart/multiple/package.json: -------------------------------------------------------------------------------- 1 | { 2 | "description": "Multiple Series", 3 | "main": "index.tsx", 4 | "dependencies": { 5 | "react": "17.0.2", 6 | "react-dom": "17.0.2", 7 | "react-google-charts": "*", 8 | "react-scripts": "4.0.3" 9 | }, 10 | "devDependencies": { 11 | "@types/react": "17.0.20", 12 | "@types/react-dom": "17.0.9", 13 | "typescript": "4.4.2" 14 | } 15 | } 16 | -------------------------------------------------------------------------------- /sandboxes/line-chart/point-intervals/index.tsx: -------------------------------------------------------------------------------- 1 | import React from "react"; 2 | import { render } from "react-dom"; 3 | 4 | import { App } from "./App"; 5 | 6 | const rootElement = document.getElementById("root"); 7 | render(, rootElement); 8 | -------------------------------------------------------------------------------- /sandboxes/line-chart/point-intervals/package.json: -------------------------------------------------------------------------------- 1 | { 2 | "description": "Point Intervals", 3 | "main": "index.tsx", 4 | "dependencies": { 5 | "react": "17.0.2", 6 | "react-dom": "17.0.2", 7 | "react-google-charts": "*", 8 | "react-scripts": "4.0.3" 9 | }, 10 | "devDependencies": { 11 | "@types/react": "17.0.20", 12 | "@types/react-dom": "17.0.9", 13 | "typescript": "4.4.2" 14 | } 15 | } 16 | -------------------------------------------------------------------------------- /sandboxes/line-chart/stick-intervals/index.tsx: -------------------------------------------------------------------------------- 1 | import React from "react"; 2 | import { render } from "react-dom"; 3 | 4 | import { App } from "./App"; 5 | 6 | const rootElement = document.getElementById("root"); 7 | render(, rootElement); 8 | -------------------------------------------------------------------------------- /sandboxes/line-chart/stick-intervals/package.json: -------------------------------------------------------------------------------- 1 | { 2 | "description": "Stick Intervals", 3 | "main": "index.tsx", 4 | "dependencies": { 5 | "react": "17.0.2", 6 | "react-dom": "17.0.2", 7 | "react-google-charts": "*", 8 | "react-scripts": "4.0.3" 9 | }, 10 | "devDependencies": { 11 | "@types/react": "17.0.20", 12 | "@types/react-dom": "17.0.9", 13 | "typescript": "4.4.2" 14 | } 15 | } 16 | -------------------------------------------------------------------------------- /sandboxes/org-chart/default/App.tsx: -------------------------------------------------------------------------------- 1 | import React from "react"; 2 | import { Chart } from "react-google-charts"; 3 | 4 | export const data = [ 5 | ["Destination", "Source", "Nickname"], 6 | [ 7 | { 8 | v: "Mike", 9 | f: 'Mike
President
', 10 | }, 11 | "", 12 | "The President", 13 | ], 14 | [ 15 | { 16 | v: "Jim", 17 | f: 'Jim
Vice President
', 18 | }, 19 | "Mike", 20 | "VP", 21 | ], 22 | ["Alice", "Mike", ""], 23 | ["Bob", "Jim", "Bob Sponge"], 24 | ["Carol", "Bob", ""], 25 | ]; 26 | 27 | export const options = { 28 | allowHtml: true, 29 | }; 30 | 31 | export function App() { 32 | return ( 33 | 40 | ); 41 | } 42 | -------------------------------------------------------------------------------- /sandboxes/org-chart/default/index.tsx: -------------------------------------------------------------------------------- 1 | import React from "react"; 2 | import { render } from "react-dom"; 3 | 4 | import { App } from "./App"; 5 | 6 | const rootElement = document.getElementById("root"); 7 | render(, rootElement); 8 | -------------------------------------------------------------------------------- /sandboxes/org-chart/default/package.json: -------------------------------------------------------------------------------- 1 | { 2 | "description": "Simple Example", 3 | "main": "index.tsx", 4 | "dependencies": { 5 | "react": "17.0.2", 6 | "react-dom": "17.0.2", 7 | "react-google-charts": "*", 8 | "react-scripts": "4.0.3" 9 | }, 10 | "devDependencies": { 11 | "@types/react": "17.0.20", 12 | "@types/react-dom": "17.0.9", 13 | "typescript": "4.4.2" 14 | } 15 | } 16 | -------------------------------------------------------------------------------- /sandboxes/org-chart/meta.js: -------------------------------------------------------------------------------- 1 | module.exports = { 2 | "Data Format": 3 | "https://developers.google.com/chart/interactive/docs/gallery/orgchart#data-format", 4 | Reference: 5 | "https://developers.google.com/chart/interactive/docs/gallery/orgchart", 6 | }; 7 | -------------------------------------------------------------------------------- /sandboxes/pie-chart/.DS_Store: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/rakannimer/react-google-charts/27d1ba8f55161dbb8b54fedc58d32df3597e9c1f/sandboxes/pie-chart/.DS_Store -------------------------------------------------------------------------------- /sandboxes/pie-chart/3d/index.tsx: -------------------------------------------------------------------------------- 1 | import React from "react"; 2 | import { render } from "react-dom"; 3 | 4 | import { App } from "./App"; 5 | 6 | const rootElement = document.getElementById("root"); 7 | render(, rootElement); 8 | -------------------------------------------------------------------------------- /sandboxes/pie-chart/3d/package.json: -------------------------------------------------------------------------------- 1 | { 2 | "description": "3D Pie Chart", 3 | "main": "index.tsx", 4 | "dependencies": { 5 | "react": "17.0.2", 6 | "react-dom": "17.0.2", 7 | "react-google-charts": "*", 8 | "react-scripts": "4.0.3" 9 | }, 10 | "devDependencies": { 11 | "@types/react": "17.0.20", 12 | "@types/react-dom": "17.0.9", 13 | "typescript": "4.4.2" 14 | } 15 | } 16 | -------------------------------------------------------------------------------- /sandboxes/pie-chart/default/App.tsx: -------------------------------------------------------------------------------- 1 | import React from "react"; 2 | import { Chart } from "react-google-charts"; 3 | 4 | export const data = [ 5 | ["Task", "Hours per Day"], 6 | ["Work", 10], 7 | ["Eat", 2], 8 | ["Commute", 2], 9 | ["Sleep", 8], 10 | ]; 11 | 12 | export const options = { 13 | title: "My Daily Activities", 14 | }; 15 | 16 | export function App() { 17 | return ( 18 | 25 | ); 26 | } 27 | -------------------------------------------------------------------------------- /sandboxes/pie-chart/default/index.tsx: -------------------------------------------------------------------------------- 1 | import React from "react"; 2 | import { render } from "react-dom"; 3 | 4 | import { App } from "./App"; 5 | 6 | const rootElement = document.getElementById("root"); 7 | render(, rootElement); 8 | -------------------------------------------------------------------------------- /sandboxes/pie-chart/default/package.json: -------------------------------------------------------------------------------- 1 | { 2 | "description": "Simple Example", 3 | "main": "index.tsx", 4 | "dependencies": { 5 | "react": "17.0.2", 6 | "react-dom": "17.0.2", 7 | "react-google-charts": "*", 8 | "react-scripts": "4.0.3" 9 | }, 10 | "devDependencies": { 11 | "@types/react": "17.0.20", 12 | "@types/react-dom": "17.0.9", 13 | "typescript": "4.4.2" 14 | } 15 | } 16 | -------------------------------------------------------------------------------- /sandboxes/pie-chart/diff/App.tsx: -------------------------------------------------------------------------------- 1 | import React from "react"; 2 | import { Chart } from "react-google-charts"; 3 | 4 | const dataOld = [ 5 | ["Major", "Degrees"], 6 | ["Business", 256070], 7 | ["Education", 108034], 8 | ["Social Sciences & History", 127101], 9 | ["Health", 81863], 10 | ["Psychology", 74194], 11 | ]; 12 | 13 | const dataNew = [ 14 | ["Major", "Degrees"], 15 | ["Business", 358293], 16 | ["Education", 101265], 17 | ["Social Sciences & History", 172780], 18 | ["Health", 129634], 19 | ["Psychology", 97216], 20 | ]; 21 | 22 | export const diffdata = { 23 | old: dataOld, 24 | new: dataNew, 25 | }; 26 | 27 | export const options = { 28 | pieSliceText: "none", 29 | }; 30 | 31 | export function App() { 32 | return ( 33 | 40 | ); 41 | } 42 | -------------------------------------------------------------------------------- /sandboxes/pie-chart/diff/index.tsx: -------------------------------------------------------------------------------- 1 | import React from "react"; 2 | import { render } from "react-dom"; 3 | 4 | import { App } from "./App"; 5 | 6 | const rootElement = document.getElementById("root"); 7 | render(, rootElement); 8 | -------------------------------------------------------------------------------- /sandboxes/pie-chart/diff/package.json: -------------------------------------------------------------------------------- 1 | { 2 | "description": "Diff Pie Chart", 3 | "main": "index.tsx", 4 | "dependencies": { 5 | "react": "17.0.2", 6 | "react-dom": "17.0.2", 7 | "react-google-charts": "*", 8 | "react-scripts": "4.0.3" 9 | }, 10 | "devDependencies": { 11 | "@types/react": "17.0.20", 12 | "@types/react-dom": "17.0.9", 13 | "typescript": "4.4.2" 14 | } 15 | } 16 | -------------------------------------------------------------------------------- /sandboxes/pie-chart/donut/App.tsx: -------------------------------------------------------------------------------- 1 | import React from "react"; 2 | import { Chart } from "react-google-charts"; 3 | 4 | export const data = [ 5 | ["Task", "Hours per Day"], 6 | ["Work", 11], 7 | ["Eat", 2], 8 | ["Commute", 2], 9 | ["Watch TV", 2], 10 | ["Sleep", 7], // CSS-style declaration 11 | ]; 12 | 13 | export const options = { 14 | title: "My Daily Activities", 15 | pieHole: 0.4, 16 | is3D: false, 17 | }; 18 | 19 | export function App() { 20 | return ( 21 | 28 | ); 29 | } 30 | -------------------------------------------------------------------------------- /sandboxes/pie-chart/donut/index.tsx: -------------------------------------------------------------------------------- 1 | import React from "react"; 2 | import { render } from "react-dom"; 3 | 4 | import { App } from "./App"; 5 | 6 | const rootElement = document.getElementById("root"); 7 | render(, rootElement); 8 | -------------------------------------------------------------------------------- /sandboxes/pie-chart/donut/package.json: -------------------------------------------------------------------------------- 1 | { 2 | "description": "Donut Chart", 3 | "main": "index.tsx", 4 | "dependencies": { 5 | "react": "17.0.2", 6 | "react-dom": "17.0.2", 7 | "react-google-charts": "*", 8 | "react-scripts": "4.0.3" 9 | }, 10 | "devDependencies": { 11 | "@types/react": "17.0.20", 12 | "@types/react-dom": "17.0.9", 13 | "typescript": "4.4.2" 14 | } 15 | } 16 | -------------------------------------------------------------------------------- /sandboxes/pie-chart/exploding/index.tsx: -------------------------------------------------------------------------------- 1 | import React from "react"; 2 | import { render } from "react-dom"; 3 | 4 | import { App } from "./App"; 5 | 6 | const rootElement = document.getElementById("root"); 7 | render(, rootElement); 8 | -------------------------------------------------------------------------------- /sandboxes/pie-chart/exploding/package.json: -------------------------------------------------------------------------------- 1 | { 2 | "description": "Exploding a slice", 3 | "main": "index.tsx", 4 | "dependencies": { 5 | "react": "17.0.2", 6 | "react-dom": "17.0.2", 7 | "react-google-charts": "*", 8 | "react-scripts": "4.0.3" 9 | }, 10 | "devDependencies": { 11 | "@types/react": "17.0.20", 12 | "@types/react-dom": "17.0.9", 13 | "typescript": "4.4.2" 14 | } 15 | } 16 | -------------------------------------------------------------------------------- /sandboxes/pie-chart/meta.js: -------------------------------------------------------------------------------- 1 | module.exports = { 2 | "Data Format": 3 | "https://developers.google.com/chart/interactive/docs/gallery/piechart#data-format", 4 | Reference: 5 | "https://developers.google.com/chart/interactive/docs/gallery/piechart", 6 | "Diff Charts Data Format": 7 | "https://developers.google.com/chart/interactive/docs/gallery/diffchart#data-format", 8 | "Diff Charts Reference": 9 | "https://developers.google.com/chart/interactive/docs/gallery/diffchart", 10 | }; 11 | -------------------------------------------------------------------------------- /sandboxes/pie-chart/rm-slice/App.tsx: -------------------------------------------------------------------------------- 1 | import React from "react"; 2 | import { Chart } from "react-google-charts"; 3 | 4 | export const data = [ 5 | ["Pac Man", "Percentage"], 6 | ["", 75], 7 | ["", 25], 8 | ]; 9 | 10 | export const options = { 11 | legend: "none", 12 | pieSliceText: "none", 13 | pieStartAngle: 135, 14 | tooltip: { trigger: "none" }, 15 | slices: { 16 | 0: { color: "yellow" }, 17 | 1: { color: "transparent" }, 18 | }, 19 | }; 20 | 21 | export function App() { 22 | return ( 23 | 30 | ); 31 | } 32 | -------------------------------------------------------------------------------- /sandboxes/pie-chart/rm-slice/index.tsx: -------------------------------------------------------------------------------- 1 | import React from "react"; 2 | import { render } from "react-dom"; 3 | 4 | import { App } from "./App"; 5 | 6 | const rootElement = document.getElementById("root"); 7 | render(, rootElement); 8 | -------------------------------------------------------------------------------- /sandboxes/pie-chart/rm-slice/package.json: -------------------------------------------------------------------------------- 1 | { 2 | "description": "Removing Slices", 3 | "main": "index.tsx", 4 | "dependencies": { 5 | "react": "17.0.2", 6 | "react-dom": "17.0.2", 7 | "react-google-charts": "*", 8 | "react-scripts": "4.0.3" 9 | }, 10 | "devDependencies": { 11 | "@types/react": "17.0.20", 12 | "@types/react-dom": "17.0.9", 13 | "typescript": "4.4.2" 14 | } 15 | } 16 | -------------------------------------------------------------------------------- /sandboxes/pie-chart/rotation/App.tsx: -------------------------------------------------------------------------------- 1 | import React from "react"; 2 | import { Chart } from "react-google-charts"; 3 | 4 | export const data = [ 5 | ["Language", "Speakers (in millions)"], 6 | ["German", 5.85], 7 | ["French", 1.66], 8 | ["Italian", 0.316], 9 | ["Romansh", 0.0791], 10 | ]; 11 | 12 | export const options = { 13 | legend: "none", 14 | pieSliceText: "label", 15 | title: "Swiss Language Use (100 degree rotation)", 16 | pieStartAngle: 100, 17 | }; 18 | 19 | export function App() { 20 | return ( 21 | 28 | ); 29 | } 30 | -------------------------------------------------------------------------------- /sandboxes/pie-chart/rotation/index.tsx: -------------------------------------------------------------------------------- 1 | import React from "react"; 2 | import { render } from "react-dom"; 3 | 4 | import { App } from "./App"; 5 | 6 | const rootElement = document.getElementById("root"); 7 | render(, rootElement); 8 | -------------------------------------------------------------------------------- /sandboxes/pie-chart/rotation/package.json: -------------------------------------------------------------------------------- 1 | { 2 | "description": "Rotating A Pie Chart", 3 | "main": "index.tsx", 4 | "dependencies": { 5 | "react": "17.0.2", 6 | "react-dom": "17.0.2", 7 | "react-google-charts": "*", 8 | "react-scripts": "4.0.3" 9 | }, 10 | "devDependencies": { 11 | "@types/react": "17.0.20", 12 | "@types/react-dom": "17.0.9", 13 | "typescript": "4.4.2" 14 | } 15 | } 16 | -------------------------------------------------------------------------------- /sandboxes/pie-chart/threshold/App.tsx: -------------------------------------------------------------------------------- 1 | import React from "react"; 2 | import { Chart } from "react-google-charts"; 3 | 4 | export const data = [ 5 | ["Pizza", "Popularity"], 6 | ["Pepperoni", 33], 7 | ["Hawaiian", 26], 8 | ["Mushroom", 22], 9 | ["Sausage", 10], // Below limit. 10 | ["Anchovies", 9], // Below limit. 11 | ]; 12 | 13 | export const options = { 14 | title: "Popularity of Types of Pizza", 15 | sliceVisibilityThreshold: 0.2, // 20% 16 | }; 17 | 18 | export function App() { 19 | return ( 20 | 27 | ); 28 | } 29 | -------------------------------------------------------------------------------- /sandboxes/pie-chart/threshold/index.tsx: -------------------------------------------------------------------------------- 1 | import React from "react"; 2 | import { render } from "react-dom"; 3 | 4 | import { App } from "./App"; 5 | 6 | const rootElement = document.getElementById("root"); 7 | render(, rootElement); 8 | -------------------------------------------------------------------------------- /sandboxes/pie-chart/threshold/package.json: -------------------------------------------------------------------------------- 1 | { 2 | "description": "Slice Visibility Threshold", 3 | "main": "index.tsx", 4 | "dependencies": { 5 | "react": "17.0.2", 6 | "react-dom": "17.0.2", 7 | "react-google-charts": "*", 8 | "react-scripts": "4.0.3" 9 | }, 10 | "devDependencies": { 11 | "@types/react": "17.0.20", 12 | "@types/react-dom": "17.0.9", 13 | "typescript": "4.4.2" 14 | } 15 | } 16 | -------------------------------------------------------------------------------- /sandboxes/sankey/.DS_Store: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/rakannimer/react-google-charts/27d1ba8f55161dbb8b54fedc58d32df3597e9c1f/sandboxes/sankey/.DS_Store -------------------------------------------------------------------------------- /sandboxes/sankey/colors/index.tsx: -------------------------------------------------------------------------------- 1 | import React from "react"; 2 | import { render } from "react-dom"; 3 | 4 | import { App } from "./App"; 5 | 6 | const rootElement = document.getElementById("root"); 7 | render(, rootElement); 8 | -------------------------------------------------------------------------------- /sandboxes/sankey/colors/package.json: -------------------------------------------------------------------------------- 1 | { 2 | "description": "Custom Colors", 3 | "main": "index.tsx", 4 | "dependencies": { 5 | "react": "17.0.2", 6 | "react-dom": "17.0.2", 7 | "react-google-charts": "*", 8 | "react-scripts": "4.0.3" 9 | }, 10 | "devDependencies": { 11 | "@types/react": "17.0.20", 12 | "@types/react-dom": "17.0.9", 13 | "typescript": "4.4.2" 14 | } 15 | } 16 | -------------------------------------------------------------------------------- /sandboxes/sankey/default/App.tsx: -------------------------------------------------------------------------------- 1 | import React from "react"; 2 | import { Chart } from "react-google-charts"; 3 | 4 | export const data = [ 5 | ["From", "To", "Weight"], 6 | ["A", "X", 5], 7 | ["A", "Y", 7], 8 | ["A", "Z", 6], 9 | ["B", "X", 2], 10 | ["B", "Y", 9], 11 | ["B", "Z", 4], 12 | ]; 13 | 14 | export const options = {}; 15 | 16 | export function App() { 17 | return ( 18 | 25 | ); 26 | } 27 | -------------------------------------------------------------------------------- /sandboxes/sankey/default/index.tsx: -------------------------------------------------------------------------------- 1 | import React from "react"; 2 | import { render } from "react-dom"; 3 | 4 | import { App } from "./App"; 5 | 6 | const rootElement = document.getElementById("root"); 7 | render(, rootElement); 8 | -------------------------------------------------------------------------------- /sandboxes/sankey/default/package.json: -------------------------------------------------------------------------------- 1 | { 2 | "description": "Simple Example", 3 | "main": "index.tsx", 4 | "dependencies": { 5 | "react": "17.0.2", 6 | "react-dom": "17.0.2", 7 | "react-google-charts": "*", 8 | "react-scripts": "4.0.3" 9 | }, 10 | "devDependencies": { 11 | "@types/react": "17.0.20", 12 | "@types/react-dom": "17.0.9", 13 | "typescript": "4.4.2" 14 | } 15 | } 16 | -------------------------------------------------------------------------------- /sandboxes/sankey/meta.js: -------------------------------------------------------------------------------- 1 | module.exports = { 2 | "Data Format": 3 | "https://developers.google.com/chart/interactive/docs/gallery/sankey#data-format", 4 | Reference: 5 | "https://developers.google.com/chart/interactive/docs/gallery/sankey", 6 | }; 7 | -------------------------------------------------------------------------------- /sandboxes/sankey/multilvel/index.tsx: -------------------------------------------------------------------------------- 1 | import React from "react"; 2 | import { render } from "react-dom"; 3 | 4 | import { App } from "./App"; 5 | 6 | const rootElement = document.getElementById("root"); 7 | render(, rootElement); 8 | -------------------------------------------------------------------------------- /sandboxes/sankey/multilvel/package.json: -------------------------------------------------------------------------------- 1 | { 2 | "description": "Multilvel Sankeys", 3 | "main": "index.tsx", 4 | "dependencies": { 5 | "react": "17.0.2", 6 | "react-dom": "17.0.2", 7 | "react-google-charts": "*", 8 | "react-scripts": "4.0.3" 9 | }, 10 | "devDependencies": { 11 | "@types/react": "17.0.20", 12 | "@types/react-dom": "17.0.9", 13 | "typescript": "4.4.2" 14 | } 15 | } 16 | -------------------------------------------------------------------------------- /sandboxes/scatter-chart-material/.DS_Store: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/rakannimer/react-google-charts/27d1ba8f55161dbb8b54fedc58d32df3597e9c1f/sandboxes/scatter-chart-material/.DS_Store -------------------------------------------------------------------------------- /sandboxes/scatter-chart-material/default/index.tsx: -------------------------------------------------------------------------------- 1 | import React from "react"; 2 | import { render } from "react-dom"; 3 | 4 | import { App } from "./App"; 5 | 6 | const rootElement = document.getElementById("root"); 7 | render(, rootElement); 8 | -------------------------------------------------------------------------------- /sandboxes/scatter-chart-material/default/package.json: -------------------------------------------------------------------------------- 1 | { 2 | "description": "Material Design Scatter Chart", 3 | "main": "index.tsx", 4 | "dependencies": { 5 | "react": "17.0.2", 6 | "react-dom": "17.0.2", 7 | "react-google-charts": "*", 8 | "react-scripts": "4.0.3" 9 | }, 10 | "devDependencies": { 11 | "@types/react": "17.0.20", 12 | "@types/react-dom": "17.0.9", 13 | "typescript": "4.4.2" 14 | } 15 | } 16 | -------------------------------------------------------------------------------- /sandboxes/scatter-chart-material/dual-chart/index.tsx: -------------------------------------------------------------------------------- 1 | import React from "react"; 2 | import { render } from "react-dom"; 3 | 4 | import { App } from "./App"; 5 | 6 | const rootElement = document.getElementById("root"); 7 | render(, rootElement); 8 | -------------------------------------------------------------------------------- /sandboxes/scatter-chart-material/dual-chart/package.json: -------------------------------------------------------------------------------- 1 | { 2 | "description": "Dual Y Material Design ScatterChart", 3 | "main": "index.tsx", 4 | "dependencies": { 5 | "react": "17.0.2", 6 | "react-dom": "17.0.2", 7 | "react-google-charts": "*", 8 | "react-scripts": "4.0.3" 9 | }, 10 | "devDependencies": { 11 | "@types/react": "17.0.20", 12 | "@types/react-dom": "17.0.9", 13 | "typescript": "4.4.2" 14 | } 15 | } 16 | -------------------------------------------------------------------------------- /sandboxes/scatter-chart-material/meta.js: -------------------------------------------------------------------------------- 1 | module.exports = { 2 | "Data Format": 3 | "https://developers.google.com/chart/interactive/docs/gallery/scatterchart#data-format", 4 | Reference: 5 | "https://developers.google.com/chart/interactive/docs/gallery/scatterchart#creating-material-scatter-charts", 6 | }; 7 | -------------------------------------------------------------------------------- /sandboxes/scatter-chart-material/top-x/index.tsx: -------------------------------------------------------------------------------- 1 | import React from "react"; 2 | import { render } from "react-dom"; 3 | 4 | import { App } from "./App"; 5 | 6 | const rootElement = document.getElementById("root"); 7 | render(, rootElement); 8 | -------------------------------------------------------------------------------- /sandboxes/scatter-chart-material/top-x/package.json: -------------------------------------------------------------------------------- 1 | { 2 | "description": "Top-X Chart", 3 | "main": "index.tsx", 4 | "dependencies": { 5 | "react": "17.0.2", 6 | "react-dom": "17.0.2", 7 | "react-google-charts": "*", 8 | "react-scripts": "4.0.3" 9 | }, 10 | "devDependencies": { 11 | "@types/react": "17.0.20", 12 | "@types/react-dom": "17.0.9", 13 | "typescript": "4.4.2" 14 | } 15 | } 16 | -------------------------------------------------------------------------------- /sandboxes/scatter-chart/.DS_Store: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/rakannimer/react-google-charts/27d1ba8f55161dbb8b54fedc58d32df3597e9c1f/sandboxes/scatter-chart/.DS_Store -------------------------------------------------------------------------------- /sandboxes/scatter-chart/colors/App.tsx: -------------------------------------------------------------------------------- 1 | import React from "react"; 2 | import { Chart } from "react-google-charts"; 3 | 4 | export const data = [ 5 | ["Generation", "Descendants"], 6 | [0, 1], 7 | [1, 33], 8 | [2, 269], 9 | [3, 2013], 10 | ]; 11 | 12 | export const options = { 13 | title: "Descendants by Generation", 14 | hAxis: { title: "Generation", minValue: 0, maxValue: 3 }, 15 | vAxis: { title: "Descendants", minValue: 0, maxValue: 2100 }, 16 | trendlines: { 17 | 0: { 18 | type: "exponential", 19 | color: "green", 20 | }, 21 | }, 22 | }; 23 | 24 | export function App() { 25 | return ( 26 | 33 | ); 34 | } 35 | -------------------------------------------------------------------------------- /sandboxes/scatter-chart/colors/index.tsx: -------------------------------------------------------------------------------- 1 | import React from "react"; 2 | import { render } from "react-dom"; 3 | 4 | import { App } from "./App"; 5 | 6 | const rootElement = document.getElementById("root"); 7 | render(, rootElement); 8 | -------------------------------------------------------------------------------- /sandboxes/scatter-chart/colors/package.json: -------------------------------------------------------------------------------- 1 | { 2 | "description": "Changing The Color", 3 | "main": "index.tsx", 4 | "dependencies": { 5 | "react": "17.0.2", 6 | "react-dom": "17.0.2", 7 | "react-google-charts": "*", 8 | "react-scripts": "4.0.3" 9 | }, 10 | "devDependencies": { 11 | "@types/react": "17.0.20", 12 | "@types/react-dom": "17.0.9", 13 | "typescript": "4.4.2" 14 | } 15 | } 16 | -------------------------------------------------------------------------------- /sandboxes/scatter-chart/default/App.tsx: -------------------------------------------------------------------------------- 1 | import React from "react"; 2 | import { Chart } from "react-google-charts"; 3 | 4 | export const data = [ 5 | ["Year", "Sales", "Expenses"], 6 | ["2004", 1000, 400], 7 | ["2005", 1170, 460], 8 | ["2006", 660, 1120], 9 | ["2008", 1030, 540], 10 | ["2009", 1000, 400], 11 | ["2010", 1170, 460], 12 | ["2011", 660, 1120], 13 | ["2012", 1030, 540], 14 | ]; 15 | 16 | export const options = { 17 | title: "Company Performance", 18 | curveType: "function", 19 | legend: { position: "bottom" }, 20 | }; 21 | 22 | export function App() { 23 | return ( 24 | 31 | ); 32 | } 33 | -------------------------------------------------------------------------------- /sandboxes/scatter-chart/default/index.tsx: -------------------------------------------------------------------------------- 1 | import React from "react"; 2 | import { render } from "react-dom"; 3 | 4 | import { App } from "./App"; 5 | 6 | const rootElement = document.getElementById("root"); 7 | render(, rootElement); 8 | -------------------------------------------------------------------------------- /sandboxes/scatter-chart/default/package.json: -------------------------------------------------------------------------------- 1 | { 2 | "description": "Simple Example", 3 | "main": "index.tsx", 4 | "dependencies": { 5 | "react": "17.0.2", 6 | "react-dom": "17.0.2", 7 | "react-google-charts": "*", 8 | "react-scripts": "4.0.3" 9 | }, 10 | "devDependencies": { 11 | "@types/react": "17.0.20", 12 | "@types/react-dom": "17.0.9", 13 | "typescript": "4.4.2" 14 | } 15 | } 16 | -------------------------------------------------------------------------------- /sandboxes/scatter-chart/diff/App.tsx: -------------------------------------------------------------------------------- 1 | import React from "react"; 2 | import { Chart } from "react-google-charts"; 3 | 4 | const dataOld = [ 5 | ["x", "y"], 6 | [1, 1000], 7 | [2, 1170], 8 | [3, 660], 9 | [4, 1030], 10 | ]; 11 | 12 | const dataNew = [ 13 | ["x", "y"], 14 | [1.1, 1100], 15 | [2.1, 1000], 16 | [2.8, 960], 17 | [4.4, 1300], 18 | ]; 19 | 20 | export const diffdata = { 21 | old: dataOld, 22 | new: dataNew, 23 | }; 24 | 25 | export function App() { 26 | return ( 27 | 33 | ); 34 | } 35 | -------------------------------------------------------------------------------- /sandboxes/scatter-chart/diff/index.tsx: -------------------------------------------------------------------------------- 1 | import React from "react"; 2 | import { render } from "react-dom"; 3 | 4 | import { App } from "./App"; 5 | 6 | const rootElement = document.getElementById("root"); 7 | render(, rootElement); 8 | -------------------------------------------------------------------------------- /sandboxes/scatter-chart/diff/package.json: -------------------------------------------------------------------------------- 1 | { 2 | "description": "Diff Scatter Chart", 3 | "main": "index.tsx", 4 | "dependencies": { 5 | "react": "17.0.2", 6 | "react-dom": "17.0.2", 7 | "react-google-charts": "*", 8 | "react-scripts": "4.0.3" 9 | }, 10 | "devDependencies": { 11 | "@types/react": "17.0.20", 12 | "@types/react-dom": "17.0.9", 13 | "typescript": "4.4.2" 14 | } 15 | } 16 | -------------------------------------------------------------------------------- /sandboxes/scatter-chart/dynamic/index.tsx: -------------------------------------------------------------------------------- 1 | import React from "react"; 2 | import { render } from "react-dom"; 3 | 4 | import { App } from "./App"; 5 | 6 | const rootElement = document.getElementById("root"); 7 | render(, rootElement); 8 | -------------------------------------------------------------------------------- /sandboxes/scatter-chart/dynamic/package.json: -------------------------------------------------------------------------------- 1 | { 2 | "description": "Changing Shapes And Animating Points", 3 | "main": "index.tsx", 4 | "dependencies": { 5 | "react": "17.0.2", 6 | "react-dom": "17.0.2", 7 | "react-google-charts": "*", 8 | "react-scripts": "4.0.3" 9 | }, 10 | "devDependencies": { 11 | "@types/react": "17.0.20", 12 | "@types/react-dom": "17.0.9", 13 | "typescript": "4.4.2" 14 | } 15 | } 16 | -------------------------------------------------------------------------------- /sandboxes/scatter-chart/exponential-trendlines/App.tsx: -------------------------------------------------------------------------------- 1 | import React from "react"; 2 | import { Chart } from "react-google-charts"; 3 | 4 | export const data = [ 5 | ["Generation", "Descendants"], 6 | [0, 1], 7 | [1, 33], 8 | [2, 269], 9 | [3, 2013], 10 | ]; 11 | 12 | export const options = { 13 | title: "Descendants by Generation", 14 | hAxis: { title: "Generation", minValue: 0, maxValue: 3 }, 15 | vAxis: { title: "Descendants", minValue: 0, maxValue: 2100 }, 16 | trendlines: { 17 | 0: { 18 | type: "exponential", 19 | visibleInLegend: true, 20 | }, 21 | }, 22 | }; 23 | 24 | export function App() { 25 | return ( 26 | 33 | ); 34 | } 35 | -------------------------------------------------------------------------------- /sandboxes/scatter-chart/exponential-trendlines/index.tsx: -------------------------------------------------------------------------------- 1 | import React from "react"; 2 | import { render } from "react-dom"; 3 | 4 | import { App } from "./App"; 5 | 6 | const rootElement = document.getElementById("root"); 7 | render(, rootElement); 8 | -------------------------------------------------------------------------------- /sandboxes/scatter-chart/exponential-trendlines/package.json: -------------------------------------------------------------------------------- 1 | { 2 | "description": "Exponential TrendLines", 3 | "main": "index.tsx", 4 | "dependencies": { 5 | "react": "17.0.2", 6 | "react-dom": "17.0.2", 7 | "react-google-charts": "*", 8 | "react-scripts": "4.0.3" 9 | }, 10 | "devDependencies": { 11 | "@types/react": "17.0.20", 12 | "@types/react-dom": "17.0.9", 13 | "typescript": "4.4.2" 14 | } 15 | } 16 | -------------------------------------------------------------------------------- /sandboxes/scatter-chart/linear-trendlines/App.tsx: -------------------------------------------------------------------------------- 1 | import React from "react"; 2 | import { Chart } from "react-google-charts"; 3 | 4 | export const data = [ 5 | ["Diameter", "Age"], 6 | [8, 37], 7 | [4, 19.5], 8 | [11, 52], 9 | [4, 22], 10 | [3, 16.5], 11 | [6.5, 32.8], 12 | [14, 72], 13 | ]; 14 | 15 | export const options = { 16 | title: "Age of sugar maples vs. trunk diameter, in inches", 17 | hAxis: { title: "Diameter" }, 18 | vAxis: { title: "Age" }, 19 | legend: "none", 20 | trendlines: { 0: {} }, 21 | }; 22 | 23 | export function App() { 24 | return ( 25 | 32 | ); 33 | } 34 | -------------------------------------------------------------------------------- /sandboxes/scatter-chart/linear-trendlines/index.tsx: -------------------------------------------------------------------------------- 1 | import React from "react"; 2 | import { render } from "react-dom"; 3 | 4 | import { App } from "./App"; 5 | 6 | const rootElement = document.getElementById("root"); 7 | render(, rootElement); 8 | -------------------------------------------------------------------------------- /sandboxes/scatter-chart/linear-trendlines/package.json: -------------------------------------------------------------------------------- 1 | { 2 | "description": "Linear TrendLines", 3 | "main": "index.tsx", 4 | "dependencies": { 5 | "react": "17.0.2", 6 | "react-dom": "17.0.2", 7 | "react-google-charts": "*", 8 | "react-scripts": "4.0.3" 9 | }, 10 | "devDependencies": { 11 | "@types/react": "17.0.20", 12 | "@types/react-dom": "17.0.9", 13 | "typescript": "4.4.2" 14 | } 15 | } 16 | -------------------------------------------------------------------------------- /sandboxes/scatter-chart/meta.js: -------------------------------------------------------------------------------- 1 | module.exports = { 2 | "Data Format": 3 | "https://developers.google.com/chart/interactive/docs/gallery/scatterchart#data-format", 4 | Reference: 5 | "https://developers.google.com/chart/interactive/docs/gallery/scatterchart", 6 | "Diff Charts Data Format": 7 | "https://developers.google.com/chart/interactive/docs/gallery/diffchart#data-format", 8 | "Diff Charts Reference": 9 | "https://developers.google.com/chart/interactive/docs/gallery/diffchart", 10 | "Trendlines Data Format": 11 | "https://developers.google.com/chart/interactive/docs/gallery/trendlines#data-format", 12 | "Trendlines Reference": 13 | "https://developers.google.com/chart/interactive/docs/gallery/trendlines", 14 | }; 15 | -------------------------------------------------------------------------------- /sandboxes/scatter-chart/polynomial-trendlines/App.tsx: -------------------------------------------------------------------------------- 1 | import React from "react"; 2 | import { Chart } from "react-google-charts"; 3 | 4 | export const data = [ 5 | ["Generation", "Descendants"], 6 | [0, 1], 7 | [1, 33], 8 | [2, 269], 9 | [3, 2013], 10 | ]; 11 | 12 | export const options = { 13 | title: "Age vs. Weight comparison", 14 | crosshair: { trigger: "both", orientation: "both" }, 15 | trendlines: { 16 | 0: { 17 | type: "polynomial", 18 | degree: 3, 19 | visibleInLegend: true, 20 | labelInLegend: "Trend", 21 | }, 22 | }, 23 | }; 24 | 25 | export function App() { 26 | return ( 27 | 34 | ); 35 | } 36 | -------------------------------------------------------------------------------- /sandboxes/scatter-chart/polynomial-trendlines/index.tsx: -------------------------------------------------------------------------------- 1 | import React from "react"; 2 | import { render } from "react-dom"; 3 | 4 | import { App } from "./App"; 5 | 6 | const rootElement = document.getElementById("root"); 7 | render(, rootElement); 8 | -------------------------------------------------------------------------------- /sandboxes/scatter-chart/polynomial-trendlines/package.json: -------------------------------------------------------------------------------- 1 | { 2 | "description": "Polynomial TrendLines", 3 | "main": "index.tsx", 4 | "dependencies": { 5 | "react": "17.0.2", 6 | "react-dom": "17.0.2", 7 | "react-google-charts": "*", 8 | "react-scripts": "4.0.3" 9 | }, 10 | "devDependencies": { 11 | "@types/react": "17.0.20", 12 | "@types/react-dom": "17.0.9", 13 | "typescript": "4.4.2" 14 | } 15 | } 16 | -------------------------------------------------------------------------------- /sandboxes/scatter-chart/styling/App.tsx: -------------------------------------------------------------------------------- 1 | import React from "react"; 2 | import { Chart } from "react-google-charts"; 3 | 4 | export const data = [ 5 | ["Generation", "Descendants"], 6 | [0, 1], 7 | [1, 33], 8 | [2, 269], 9 | [3, 2013], 10 | ]; 11 | 12 | export const options = { 13 | legend: "none", 14 | title: "Descendants by Generation", 15 | hAxis: { title: "Generation", minValue: 0, maxValue: 3 }, 16 | vAxis: { title: "Descendants", minValue: 0, maxValue: 2100 }, 17 | trendlines: { 18 | 0: { 19 | type: "exponential", 20 | color: "purple", 21 | lineWidth: 10, 22 | opacity: 0.2, 23 | }, 24 | }, 25 | }; 26 | 27 | export function App() { 28 | return ( 29 | 36 | ); 37 | } 38 | -------------------------------------------------------------------------------- /sandboxes/scatter-chart/styling/index.tsx: -------------------------------------------------------------------------------- 1 | import React from "react"; 2 | import { render } from "react-dom"; 3 | 4 | import { App } from "./App"; 5 | 6 | const rootElement = document.getElementById("root"); 7 | render(, rootElement); 8 | -------------------------------------------------------------------------------- /sandboxes/scatter-chart/styling/package.json: -------------------------------------------------------------------------------- 1 | { 2 | "description": "Changing Opacity And Line Width", 3 | "main": "index.tsx", 4 | "dependencies": { 5 | "react": "17.0.2", 6 | "react-dom": "17.0.2", 7 | "react-google-charts": "*", 8 | "react-scripts": "4.0.3" 9 | }, 10 | "devDependencies": { 11 | "@types/react": "17.0.20", 12 | "@types/react-dom": "17.0.9", 13 | "typescript": "4.4.2" 14 | } 15 | } 16 | -------------------------------------------------------------------------------- /sandboxes/stepped-area-chart/.DS_Store: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/rakannimer/react-google-charts/27d1ba8f55161dbb8b54fedc58d32df3597e9c1f/sandboxes/stepped-area-chart/.DS_Store -------------------------------------------------------------------------------- /sandboxes/stepped-area-chart/default/App.tsx: -------------------------------------------------------------------------------- 1 | import React from "react"; 2 | import { Chart } from "react-google-charts"; 3 | 4 | export const data = [ 5 | ["Director (Year)", "Rotten Tomatoes", "IMDB"], 6 | ["Alfred Hitchcock (1935)", 8.4, 7.9], 7 | ["Ralph Thomas (1959)", 6.9, 6.5], 8 | ["Don Sharp (1978)", 6.5, 6.4], 9 | ["James Hawes (2008)", 4.4, 6.2], 10 | ]; 11 | 12 | export const options = { 13 | title: "The decline of 'The 39 Steps'", 14 | vAxis: { title: "Accumulated Rating" }, 15 | isStacked: true, 16 | }; 17 | 18 | export function App() { 19 | return ( 20 | 28 | ); 29 | } 30 | -------------------------------------------------------------------------------- /sandboxes/stepped-area-chart/default/index.tsx: -------------------------------------------------------------------------------- 1 | import React from "react"; 2 | import { render } from "react-dom"; 3 | 4 | import { App } from "./App"; 5 | 6 | const rootElement = document.getElementById("root"); 7 | render(, rootElement); 8 | -------------------------------------------------------------------------------- /sandboxes/stepped-area-chart/default/package.json: -------------------------------------------------------------------------------- 1 | { 2 | "description": "Simple Example", 3 | "main": "index.tsx", 4 | "dependencies": { 5 | "react": "17.0.2", 6 | "react-dom": "17.0.2", 7 | "react-google-charts": "*", 8 | "react-scripts": "4.0.3" 9 | }, 10 | "devDependencies": { 11 | "@types/react": "17.0.20", 12 | "@types/react-dom": "17.0.9", 13 | "typescript": "4.4.2" 14 | } 15 | } 16 | -------------------------------------------------------------------------------- /sandboxes/stepped-area-chart/meta.js: -------------------------------------------------------------------------------- 1 | module.exports = { 2 | "Data Format": 3 | "https://developers.google.com/chart/interactive/docs/gallery/steppedareachart#data-format", 4 | Reference: 5 | "https://developers.google.com/chart/interactive/docs/gallery/steppedareachart", 6 | }; 7 | -------------------------------------------------------------------------------- /sandboxes/stepped-area-chart/stacked/App.tsx: -------------------------------------------------------------------------------- 1 | import React from "react"; 2 | import { Chart } from "react-google-charts"; 3 | 4 | export const data = [ 5 | ["Style", "Colonial", "Victorian", "Modern", "Contemporary"], 6 | ["2013", 5.2, 3.6, 2.8, 2], 7 | ["2014", 5.6, 4.0, 2.8, 3], 8 | ["2015", 7.2, 2.2, 2.2, 6.0], 9 | ["2016", 8.0, 1.7, 0.8, 4.0], 10 | ]; 11 | 12 | export const options = { 13 | isStacked: "relative", 14 | height: 300, 15 | legend: { position: "top", maxLines: 3 }, 16 | vAxis: { 17 | minValue: 0, 18 | ticks: [0, 0.3, 0.6, 0.9, 1], 19 | }, 20 | }; 21 | 22 | export function App() { 23 | return ( 24 | 32 | ); 33 | } 34 | -------------------------------------------------------------------------------- /sandboxes/stepped-area-chart/stacked/index.tsx: -------------------------------------------------------------------------------- 1 | import React from "react"; 2 | import { render } from "react-dom"; 3 | 4 | import { App } from "./App"; 5 | 6 | const rootElement = document.getElementById("root"); 7 | render(, rootElement); 8 | -------------------------------------------------------------------------------- /sandboxes/stepped-area-chart/stacked/package.json: -------------------------------------------------------------------------------- 1 | { 2 | "description": "100 Percent Stacked Stepped Area", 3 | "main": "index.tsx", 4 | "dependencies": { 5 | "react": "17.0.2", 6 | "react-dom": "17.0.2", 7 | "react-google-charts": "*", 8 | "react-scripts": "4.0.3" 9 | }, 10 | "devDependencies": { 11 | "@types/react": "17.0.20", 12 | "@types/react-dom": "17.0.9", 13 | "typescript": "4.4.2" 14 | } 15 | } 16 | -------------------------------------------------------------------------------- /sandboxes/table/.DS_Store: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/rakannimer/react-google-charts/27d1ba8f55161dbb8b54fedc58d32df3597e9c1f/sandboxes/table/.DS_Store -------------------------------------------------------------------------------- /sandboxes/table/arrow-format/App.tsx: -------------------------------------------------------------------------------- 1 | import React from "react"; 2 | import { Chart } from "react-google-charts"; 3 | 4 | export const data = [ 5 | ["Department", "Revenues Change"], 6 | ["Shoes", { v: 12, f: "12.0%" }], 7 | ["Sports", { v: -7.3, f: "-7.3%" }], 8 | ["Toys", { v: 0, f: "0%" }], 9 | ["Electronics", { v: -2.1, f: "-2.1%" }], 10 | ["Food", { v: 22, f: "22.0%" }], 11 | ]; 12 | 13 | export const options = { 14 | allowHtml: true, 15 | showRowNumber: true, 16 | }; 17 | 18 | export const formatters = [ 19 | { 20 | type: "ArrowFormat" as const, 21 | column: 1, 22 | }, 23 | ]; 24 | 25 | export function App() { 26 | return ( 27 | 35 | ); 36 | } 37 | -------------------------------------------------------------------------------- /sandboxes/table/arrow-format/index.tsx: -------------------------------------------------------------------------------- 1 | import React from "react"; 2 | import { render } from "react-dom"; 3 | 4 | import { App } from "./App"; 5 | 6 | const rootElement = document.getElementById("root"); 7 | render(, rootElement); 8 | -------------------------------------------------------------------------------- /sandboxes/table/arrow-format/package.json: -------------------------------------------------------------------------------- 1 | { 2 | "description": "Arrow format", 3 | "main": "index.tsx", 4 | "dependencies": { 5 | "react": "17.0.2", 6 | "react-dom": "17.0.2", 7 | "react-google-charts": "*", 8 | "react-scripts": "4.0.3" 9 | }, 10 | "devDependencies": { 11 | "@types/react": "17.0.20", 12 | "@types/react-dom": "17.0.9", 13 | "typescript": "4.4.2" 14 | } 15 | } 16 | -------------------------------------------------------------------------------- /sandboxes/table/bar-format/App.tsx: -------------------------------------------------------------------------------- 1 | import React from "react"; 2 | import { Chart } from "react-google-charts"; 3 | 4 | export const data = [ 5 | ["Department", "Revenues Change"], 6 | ["Shoes", 10700], 7 | ["Sports", -15400], 8 | ["Toys", 12500], 9 | ["Electronics", -2100], 10 | ["Food", 22600], 11 | ["Art", 1100], 12 | ]; 13 | 14 | export const options = { 15 | allowHtml: true, 16 | showRowNumber: true, 17 | }; 18 | 19 | export const formatters = [ 20 | { 21 | type: "BarFormat" as const, 22 | column: 1, 23 | options: { 24 | width: 120, 25 | }, 26 | }, 27 | ]; 28 | 29 | export function App() { 30 | return ( 31 | 39 | ); 40 | } 41 | -------------------------------------------------------------------------------- /sandboxes/table/bar-format/index.tsx: -------------------------------------------------------------------------------- 1 | import React from "react"; 2 | import { render } from "react-dom"; 3 | 4 | import { App } from "./App"; 5 | 6 | const rootElement = document.getElementById("root"); 7 | render(, rootElement); 8 | -------------------------------------------------------------------------------- /sandboxes/table/bar-format/package.json: -------------------------------------------------------------------------------- 1 | { 2 | "description": "Bar format", 3 | "main": "index.tsx", 4 | "dependencies": { 5 | "react": "17.0.2", 6 | "react-dom": "17.0.2", 7 | "react-google-charts": "*", 8 | "react-scripts": "4.0.3" 9 | }, 10 | "devDependencies": { 11 | "@types/react": "17.0.20", 12 | "@types/react-dom": "17.0.9", 13 | "typescript": "4.4.2" 14 | } 15 | } 16 | -------------------------------------------------------------------------------- /sandboxes/table/color-format/App.tsx: -------------------------------------------------------------------------------- 1 | import React from "react"; 2 | import { Chart } from "react-google-charts"; 3 | 4 | export const data = [ 5 | ["Department", "Revenues Change"], 6 | ["Shoes", 10700], 7 | ["Sports", -15400], 8 | ["Toys", 12500], 9 | ["Electronics", -2100], 10 | ["Food", 22600], 11 | ["Art", 1100], 12 | ]; 13 | 14 | export const options = { 15 | allowHtml: true, 16 | showRowNumber: true, 17 | }; 18 | 19 | export const formatters = [ 20 | { 21 | type: "ColorFormat" as const, 22 | column: 1, 23 | options: { 24 | width: 120, 25 | }, 26 | ranges: [ 27 | [-20000, 0, "white", "orange"], 28 | [20000, null, "red", "#33ff33"], 29 | ], 30 | }, 31 | ]; 32 | 33 | export function App() { 34 | return ( 35 | 43 | ); 44 | } 45 | -------------------------------------------------------------------------------- /sandboxes/table/color-format/index.tsx: -------------------------------------------------------------------------------- 1 | import React from "react"; 2 | import { render } from "react-dom"; 3 | 4 | import { App } from "./App"; 5 | 6 | const rootElement = document.getElementById("root"); 7 | render(, rootElement); 8 | -------------------------------------------------------------------------------- /sandboxes/table/color-format/package.json: -------------------------------------------------------------------------------- 1 | { 2 | "description": "Color format", 3 | "main": "index.tsx", 4 | "dependencies": { 5 | "react": "17.0.2", 6 | "react-dom": "17.0.2", 7 | "react-google-charts": "*", 8 | "react-scripts": "4.0.3" 9 | }, 10 | "devDependencies": { 11 | "@types/react": "17.0.20", 12 | "@types/react-dom": "17.0.9", 13 | "typescript": "4.4.2" 14 | } 15 | } 16 | -------------------------------------------------------------------------------- /sandboxes/table/date-format/index.tsx: -------------------------------------------------------------------------------- 1 | import React from "react"; 2 | import { render } from "react-dom"; 3 | 4 | import { App } from "./App"; 5 | 6 | const rootElement = document.getElementById("root"); 7 | render(, rootElement); 8 | -------------------------------------------------------------------------------- /sandboxes/table/date-format/package.json: -------------------------------------------------------------------------------- 1 | { 2 | "description": "Date format", 3 | "main": "index.tsx", 4 | "dependencies": { 5 | "react": "17.0.2", 6 | "react-dom": "17.0.2", 7 | "react-google-charts": "*", 8 | "react-scripts": "4.0.3" 9 | }, 10 | "devDependencies": { 11 | "@types/react": "17.0.20", 12 | "@types/react-dom": "17.0.9", 13 | "typescript": "4.4.2" 14 | } 15 | } 16 | -------------------------------------------------------------------------------- /sandboxes/table/default/App.tsx: -------------------------------------------------------------------------------- 1 | import React from "react"; 2 | import { Chart } from "react-google-charts"; 3 | 4 | export const data = [ 5 | ["Name", "Salary", "Full time employee"], 6 | ["Mike", { v: 10000, f: "$10,000" }, true], 7 | ["Jim", { v: 8000, f: "$8,000" }, false], 8 | ["Alice", { v: 12500, f: "$12,500" }, true], 9 | ["Bob", { v: 7000, f: "$7,000" }, true], 10 | ]; 11 | 12 | export const options = { 13 | title: "Company Performance", 14 | curveType: "function", 15 | legend: { position: "bottom" }, 16 | pageSize: 1, 17 | }; 18 | 19 | export function App() { 20 | return ( 21 | 28 | ); 29 | } 30 | -------------------------------------------------------------------------------- /sandboxes/table/default/index.tsx: -------------------------------------------------------------------------------- 1 | import React from "react"; 2 | import { render } from "react-dom"; 3 | 4 | import { App } from "./App"; 5 | 6 | const rootElement = document.getElementById("root"); 7 | render(, rootElement); 8 | -------------------------------------------------------------------------------- /sandboxes/table/default/package.json: -------------------------------------------------------------------------------- 1 | { 2 | "description": "Simple Example", 3 | "main": "index.tsx", 4 | "dependencies": { 5 | "react": "17.0.2", 6 | "react-dom": "17.0.2", 7 | "react-google-charts": "*", 8 | "react-scripts": "4.0.3" 9 | }, 10 | "devDependencies": { 11 | "@types/react": "17.0.20", 12 | "@types/react-dom": "17.0.9", 13 | "typescript": "4.4.2" 14 | } 15 | } 16 | -------------------------------------------------------------------------------- /sandboxes/table/meta.js: -------------------------------------------------------------------------------- 1 | module.exports = { 2 | "Data Format": 3 | "https://developers.google.com/chart/interactive/docs/gallery/table#data-format", 4 | Reference: 5 | "https://developers.google.com/chart/interactive/docs/gallery/table", 6 | "Formatters Reference": 7 | "https://developers.google.com/chart/interactive/docs/reference#formatters", 8 | }; 9 | -------------------------------------------------------------------------------- /sandboxes/table/number-format/App.tsx: -------------------------------------------------------------------------------- 1 | import React from "react"; 2 | import { Chart } from "react-google-charts"; 3 | 4 | export const data = [ 5 | ["Department", "Revenues Change"], 6 | ["Shoes", 10700], 7 | ["Sports", -15400], 8 | ["Toys", 12500], 9 | ["Electronics", -2100], 10 | ["Food", 22600], 11 | ["Art", 1100], 12 | ]; 13 | 14 | export const options = { 15 | allowHtml: true, 16 | showRowNumber: true, 17 | }; 18 | 19 | export const formatters = [ 20 | { 21 | type: "NumberFormat" as const, 22 | column: 1, 23 | options: { 24 | prefix: "$", 25 | negativeColor: "red", 26 | negativeParens: true, 27 | }, 28 | }, 29 | ]; 30 | 31 | export function App() { 32 | return ( 33 | 41 | ); 42 | } 43 | -------------------------------------------------------------------------------- /sandboxes/table/number-format/index.tsx: -------------------------------------------------------------------------------- 1 | import React from "react"; 2 | import { render } from "react-dom"; 3 | 4 | import { App } from "./App"; 5 | 6 | const rootElement = document.getElementById("root"); 7 | render(, rootElement); 8 | -------------------------------------------------------------------------------- /sandboxes/table/number-format/package.json: -------------------------------------------------------------------------------- 1 | { 2 | "description": "Number format", 3 | "main": "index.tsx", 4 | "dependencies": { 5 | "react": "17.0.2", 6 | "react-dom": "17.0.2", 7 | "react-google-charts": "*", 8 | "react-scripts": "4.0.3" 9 | }, 10 | "devDependencies": { 11 | "@types/react": "17.0.20", 12 | "@types/react-dom": "17.0.9", 13 | "typescript": "4.4.2" 14 | } 15 | } 16 | -------------------------------------------------------------------------------- /sandboxes/table/pattern-format/App.tsx: -------------------------------------------------------------------------------- 1 | import React from "react"; 2 | import { Chart } from "react-google-charts"; 3 | 4 | export const data = [ 5 | ["Name", "Email"], 6 | ["John Lennon", "john@beatles.co.uk"], 7 | ["Paul McCartney", "paul@beatles.co.uk"], 8 | ["George Harrison", "george@beatles.co.uk"], 9 | ["Ringo Starr", "ringo@beatles.co.uk"], 10 | ]; 11 | 12 | export const options = { 13 | allowHtml: true, 14 | showRowNumber: true, 15 | }; 16 | 17 | export const formatters = [ 18 | { 19 | type: "PatternFormat" as const, 20 | column: [0, 1], 21 | options: '{0}', 22 | }, 23 | ]; 24 | 25 | export function App() { 26 | return ( 27 | 35 | ); 36 | } 37 | -------------------------------------------------------------------------------- /sandboxes/table/pattern-format/index.tsx: -------------------------------------------------------------------------------- 1 | import React from "react"; 2 | import { render } from "react-dom"; 3 | 4 | import { App } from "./App"; 5 | 6 | const rootElement = document.getElementById("root"); 7 | render(, rootElement); 8 | -------------------------------------------------------------------------------- /sandboxes/table/pattern-format/package.json: -------------------------------------------------------------------------------- 1 | { 2 | "description": "Pattern format", 3 | "main": "index.tsx", 4 | "dependencies": { 5 | "react": "17.0.2", 6 | "react-dom": "17.0.2", 7 | "react-google-charts": "*", 8 | "react-scripts": "4.0.3" 9 | }, 10 | "devDependencies": { 11 | "@types/react": "17.0.20", 12 | "@types/react-dom": "17.0.9", 13 | "typescript": "4.4.2" 14 | } 15 | } 16 | -------------------------------------------------------------------------------- /sandboxes/timeline/.DS_Store: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/rakannimer/react-google-charts/27d1ba8f55161dbb8b54fedc58d32df3597e9c1f/sandboxes/timeline/.DS_Store -------------------------------------------------------------------------------- /sandboxes/timeline/advanced/index.tsx: -------------------------------------------------------------------------------- 1 | import React from "react"; 2 | import { render } from "react-dom"; 3 | 4 | import { App } from "./App"; 5 | 6 | const rootElement = document.getElementById("root"); 7 | render(, rootElement); 8 | -------------------------------------------------------------------------------- /sandboxes/timeline/advanced/package.json: -------------------------------------------------------------------------------- 1 | { 2 | "description": "An Advanced Example", 3 | "main": "index.tsx", 4 | "dependencies": { 5 | "react": "17.0.2", 6 | "react-dom": "17.0.2", 7 | "react-google-charts": "*", 8 | "react-scripts": "4.0.3" 9 | }, 10 | "devDependencies": { 11 | "@types/react": "17.0.20", 12 | "@types/react-dom": "17.0.9", 13 | "typescript": "4.4.2" 14 | } 15 | } 16 | -------------------------------------------------------------------------------- /sandboxes/timeline/colors/index.tsx: -------------------------------------------------------------------------------- 1 | import React from "react"; 2 | import { render } from "react-dom"; 3 | 4 | import { App } from "./App"; 5 | 6 | const rootElement = document.getElementById("root"); 7 | render(, rootElement); 8 | -------------------------------------------------------------------------------- /sandboxes/timeline/colors/package.json: -------------------------------------------------------------------------------- 1 | { 2 | "description": "Controlling The Colors", 3 | "main": "index.tsx", 4 | "dependencies": { 5 | "react": "17.0.2", 6 | "react-dom": "17.0.2", 7 | "react-google-charts": "*", 8 | "react-scripts": "4.0.3" 9 | }, 10 | "devDependencies": { 11 | "@types/react": "17.0.20", 12 | "@types/react-dom": "17.0.9", 13 | "typescript": "4.4.2" 14 | } 15 | } 16 | -------------------------------------------------------------------------------- /sandboxes/timeline/default/App.tsx: -------------------------------------------------------------------------------- 1 | import React from "react"; 2 | import { Chart } from "react-google-charts"; 3 | 4 | const columns = [ 5 | { type: "string", id: "President" }, 6 | { type: "date", id: "Start" }, 7 | { type: "date", id: "End" }, 8 | ]; 9 | 10 | const rows = [ 11 | ["Washington", new Date(1789, 3, 30), new Date(1797, 2, 4)], 12 | ["Adams", new Date(1797, 2, 4), new Date(1801, 2, 4)], 13 | ["Jefferson", new Date(1801, 2, 4), new Date(1809, 2, 4)], 14 | ]; 15 | 16 | export const data = [columns, ...rows]; 17 | 18 | export function App() { 19 | return ; 20 | } 21 | -------------------------------------------------------------------------------- /sandboxes/timeline/default/index.tsx: -------------------------------------------------------------------------------- 1 | import React from "react"; 2 | import { render } from "react-dom"; 3 | 4 | import { App } from "./App"; 5 | 6 | const rootElement = document.getElementById("root"); 7 | render(, rootElement); 8 | -------------------------------------------------------------------------------- /sandboxes/timeline/default/package.json: -------------------------------------------------------------------------------- 1 | { 2 | "description": "Simple Example", 3 | "main": "index.tsx", 4 | "dependencies": { 5 | "react": "17.0.2", 6 | "react-dom": "17.0.2", 7 | "react-google-charts": "*", 8 | "react-scripts": "4.0.3" 9 | }, 10 | "devDependencies": { 11 | "@types/react": "17.0.20", 12 | "@types/react-dom": "17.0.9", 13 | "typescript": "4.4.2" 14 | } 15 | } 16 | -------------------------------------------------------------------------------- /sandboxes/timeline/gridlines/App.tsx: -------------------------------------------------------------------------------- 1 | import React from "react"; 2 | import { Chart } from "react-google-charts"; 3 | 4 | export const data = [ 5 | [ 6 | { type: "string", id: "Room" }, 7 | { type: "string", id: "Name" }, 8 | { type: "date", id: "Start" }, 9 | { type: "date", id: "End" }, 10 | ], 11 | [ 12 | "Magnolia Room", 13 | "Google Charts", 14 | new Date(0, 0, 0, 14, 0, 0), 15 | new Date(0, 0, 0, 15, 0, 0), 16 | ], 17 | [ 18 | "Magnolia Room", 19 | "App Engine", 20 | new Date(0, 0, 0, 15, 0, 0), 21 | new Date(0, 0, 0, 16, 0, 0), 22 | ], 23 | ]; 24 | 25 | export const options = { 26 | timeline: { showRowLabels: false }, 27 | avoidOverlappingGridLines: false, 28 | }; 29 | 30 | export function App() { 31 | return ( 32 | 39 | ); 40 | } 41 | -------------------------------------------------------------------------------- /sandboxes/timeline/gridlines/index.tsx: -------------------------------------------------------------------------------- 1 | import React from "react"; 2 | import { render } from "react-dom"; 3 | 4 | import { App } from "./App"; 5 | 6 | const rootElement = document.getElementById("root"); 7 | render(, rootElement); 8 | -------------------------------------------------------------------------------- /sandboxes/timeline/gridlines/package.json: -------------------------------------------------------------------------------- 1 | { 2 | "description": "Overlapping GridLines", 3 | "main": "index.tsx", 4 | "dependencies": { 5 | "react": "17.0.2", 6 | "react-dom": "17.0.2", 7 | "react-google-charts": "*", 8 | "react-scripts": "4.0.3" 9 | }, 10 | "devDependencies": { 11 | "@types/react": "17.0.20", 12 | "@types/react-dom": "17.0.9", 13 | "typescript": "4.4.2" 14 | } 15 | } 16 | -------------------------------------------------------------------------------- /sandboxes/timeline/labels/App.tsx: -------------------------------------------------------------------------------- 1 | import React from "react"; 2 | import { Chart } from "react-google-charts"; 3 | 4 | export const data = [ 5 | [ 6 | { type: "string", id: "Term" }, 7 | { type: "string", id: "Name" }, 8 | { type: "date", id: "Start" }, 9 | { type: "date", id: "End" }, 10 | ], 11 | ["1", "George Washington", new Date(1789, 3, 30), new Date(1797, 2, 4)], 12 | ["2", "John Adams", new Date(1797, 2, 4), new Date(1801, 2, 4)], 13 | ["3", "Thomas Jefferson", new Date(1801, 2, 4), new Date(1809, 2, 4)], 14 | ]; 15 | 16 | export function App() { 17 | return ; 18 | } 19 | -------------------------------------------------------------------------------- /sandboxes/timeline/labels/index.tsx: -------------------------------------------------------------------------------- 1 | import React from "react"; 2 | import { render } from "react-dom"; 3 | 4 | import { App } from "./App"; 5 | 6 | const rootElement = document.getElementById("root"); 7 | render(, rootElement); 8 | -------------------------------------------------------------------------------- /sandboxes/timeline/labels/package.json: -------------------------------------------------------------------------------- 1 | { 2 | "description": "Labeling the bars", 3 | "main": "index.tsx", 4 | "dependencies": { 5 | "react": "17.0.2", 6 | "react-dom": "17.0.2", 7 | "react-google-charts": "*", 8 | "react-scripts": "4.0.3" 9 | }, 10 | "devDependencies": { 11 | "@types/react": "17.0.20", 12 | "@types/react-dom": "17.0.9", 13 | "typescript": "4.4.2" 14 | } 15 | } 16 | -------------------------------------------------------------------------------- /sandboxes/timeline/meta.js: -------------------------------------------------------------------------------- 1 | module.exports = { 2 | "Data Format": 3 | "https://developers.google.com/chart/interactive/docs/gallery/timeline#data-format", 4 | Reference: 5 | "https://developers.google.com/chart/interactive/docs/gallery/timeline", 6 | }; 7 | -------------------------------------------------------------------------------- /sandboxes/timeline/row/App.tsx: -------------------------------------------------------------------------------- 1 | import React from "react"; 2 | import { Chart } from "react-google-charts"; 3 | 4 | export const data = [ 5 | [ 6 | { type: "string", id: "Position" }, 7 | { type: "string", id: "Name" }, 8 | { type: "date", id: "Start" }, 9 | { type: "date", id: "End" }, 10 | ], 11 | [ 12 | "President", 13 | "George Washington", 14 | new Date(1789, 3, 30), 15 | new Date(1797, 2, 4), 16 | ], 17 | ["President", "John Adams", new Date(1797, 2, 4), new Date(1801, 2, 4)], 18 | ["President", "Thomas Jefferson", new Date(1801, 2, 4), new Date(1809, 2, 4)], 19 | ]; 20 | 21 | export const options = { 22 | timeline: { 23 | groupByRowLabel: true, 24 | }, 25 | }; 26 | 27 | export function App() { 28 | return ( 29 | 36 | ); 37 | } 38 | -------------------------------------------------------------------------------- /sandboxes/timeline/row/index.tsx: -------------------------------------------------------------------------------- 1 | import React from "react"; 2 | import { render } from "react-dom"; 3 | 4 | import { App } from "./App"; 5 | 6 | const rootElement = document.getElementById("root"); 7 | render(, rootElement); 8 | -------------------------------------------------------------------------------- /sandboxes/timeline/row/package.json: -------------------------------------------------------------------------------- 1 | { 2 | "description": "Putting bars on one row", 3 | "main": "index.tsx", 4 | "dependencies": { 5 | "react": "17.0.2", 6 | "react-dom": "17.0.2", 7 | "react-google-charts": "*", 8 | "react-scripts": "4.0.3" 9 | }, 10 | "devDependencies": { 11 | "@types/react": "17.0.20", 12 | "@types/react-dom": "17.0.9", 13 | "typescript": "4.4.2" 14 | } 15 | } 16 | -------------------------------------------------------------------------------- /sandboxes/timeline/tooltips/App.tsx: -------------------------------------------------------------------------------- 1 | import React from "react"; 2 | import { Chart } from "react-google-charts"; 3 | 4 | export const data = [ 5 | [ 6 | { type: "string", id: "President" }, 7 | { type: "string", id: "dummy bar label" }, 8 | { type: "string", role: "tooltip" }, 9 | { type: "date", id: "Start" }, 10 | { type: "date", id: "End" }, 11 | ], 12 | ["Washington", null, "George", new Date(1789, 3, 29), new Date(1797, 2, 3)], 13 | ["Adams", null, "John", new Date(1797, 2, 3), new Date(1801, 2, 3)], 14 | ["Jefferson", null, "Thomas", new Date(1801, 2, 3), new Date(1809, 2, 3)], 15 | ]; 16 | 17 | export const options = { 18 | allowHtml: true, 19 | }; 20 | 21 | export function App() { 22 | return ( 23 | 30 | ); 31 | } 32 | -------------------------------------------------------------------------------- /sandboxes/timeline/tooltips/index.tsx: -------------------------------------------------------------------------------- 1 | import React from "react"; 2 | import { render } from "react-dom"; 3 | 4 | import { App } from "./App"; 5 | 6 | const rootElement = document.getElementById("root"); 7 | render(, rootElement); 8 | -------------------------------------------------------------------------------- /sandboxes/timeline/tooltips/package.json: -------------------------------------------------------------------------------- 1 | { 2 | "description": "Customizing Tooltips", 3 | "main": "index.tsx", 4 | "dependencies": { 5 | "react": "17.0.2", 6 | "react-dom": "17.0.2", 7 | "react-google-charts": "*", 8 | "react-scripts": "4.0.3" 9 | }, 10 | "devDependencies": { 11 | "@types/react": "17.0.20", 12 | "@types/react-dom": "17.0.9", 13 | "typescript": "4.4.2" 14 | } 15 | } 16 | -------------------------------------------------------------------------------- /sandboxes/tree-map/.DS_Store: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/rakannimer/react-google-charts/27d1ba8f55161dbb8b54fedc58d32df3597e9c1f/sandboxes/tree-map/.DS_Store -------------------------------------------------------------------------------- /sandboxes/tree-map/default/index.tsx: -------------------------------------------------------------------------------- 1 | import React from "react"; 2 | import { render } from "react-dom"; 3 | 4 | import { App } from "./App"; 5 | 6 | const rootElement = document.getElementById("root"); 7 | render(, rootElement); 8 | -------------------------------------------------------------------------------- /sandboxes/tree-map/default/package.json: -------------------------------------------------------------------------------- 1 | { 2 | "description": "Simple Example", 3 | "main": "index.tsx", 4 | "dependencies": { 5 | "react": "17.0.2", 6 | "react-dom": "17.0.2", 7 | "react-google-charts": "*", 8 | "react-scripts": "4.0.3" 9 | }, 10 | "devDependencies": { 11 | "@types/react": "17.0.20", 12 | "@types/react-dom": "17.0.9", 13 | "typescript": "4.4.2" 14 | } 15 | } 16 | -------------------------------------------------------------------------------- /sandboxes/tree-map/highlights/index.tsx: -------------------------------------------------------------------------------- 1 | import React from "react"; 2 | import { render } from "react-dom"; 3 | 4 | import { App } from "./App"; 5 | 6 | const rootElement = document.getElementById("root"); 7 | render(, rootElement); 8 | -------------------------------------------------------------------------------- /sandboxes/tree-map/highlights/package.json: -------------------------------------------------------------------------------- 1 | { 2 | "description": "Highlights", 3 | "main": "index.tsx", 4 | "dependencies": { 5 | "react": "17.0.2", 6 | "react-dom": "17.0.2", 7 | "react-google-charts": "*", 8 | "react-scripts": "4.0.3" 9 | }, 10 | "devDependencies": { 11 | "@types/react": "17.0.20", 12 | "@types/react-dom": "17.0.9", 13 | "typescript": "4.4.2" 14 | } 15 | } 16 | -------------------------------------------------------------------------------- /sandboxes/tree-map/meta.js: -------------------------------------------------------------------------------- 1 | module.exports = { 2 | "Data Format": 3 | "https://developers.google.com/chart/interactive/docs/gallery/treemap#data-format", 4 | Reference: 5 | "https://developers.google.com/chart/interactive/docs/gallery/treemap", 6 | }; 7 | -------------------------------------------------------------------------------- /sandboxes/tree-map/tooltips/index.tsx: -------------------------------------------------------------------------------- 1 | import React from "react"; 2 | import { render } from "react-dom"; 3 | 4 | import { App } from "./App"; 5 | 6 | const rootElement = document.getElementById("root"); 7 | render(, rootElement); 8 | -------------------------------------------------------------------------------- /sandboxes/tree-map/tooltips/package.json: -------------------------------------------------------------------------------- 1 | { 2 | "description": "Custom Tooltips", 3 | "main": "index.tsx", 4 | "dependencies": { 5 | "react": "17.0.2", 6 | "react-dom": "17.0.2", 7 | "react-google-charts": "*", 8 | "react-scripts": "4.0.3" 9 | }, 10 | "devDependencies": { 11 | "@types/react": "17.0.20", 12 | "@types/react-dom": "17.0.9", 13 | "typescript": "4.4.2" 14 | } 15 | } 16 | -------------------------------------------------------------------------------- /sandboxes/tsconfig.json: -------------------------------------------------------------------------------- 1 | { 2 | "extends": "../tsconfig.json", 3 | "compilerOptions": { 4 | "paths": { 5 | "react-google-charts": ["../packages/react-google-charts/src"] 6 | } 7 | }, 8 | "include": ["./"] 9 | } 10 | -------------------------------------------------------------------------------- /sandboxes/word-tree/.DS_Store: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/rakannimer/react-google-charts/27d1ba8f55161dbb8b54fedc58d32df3597e9c1f/sandboxes/word-tree/.DS_Store -------------------------------------------------------------------------------- /sandboxes/word-tree/default/App.tsx: -------------------------------------------------------------------------------- 1 | import React from "react"; 2 | import { Chart } from "react-google-charts"; 3 | 4 | export const data = [ 5 | ["Phrases"], 6 | ["cats are better than dogs"], 7 | ["cats eat kibble"], 8 | ["cats are better than hamsters"], 9 | ["cats are awesome"], 10 | ["cats are people too"], 11 | ["cats eat mice"], 12 | ["cats meowing"], 13 | ["cats in the cradle"], 14 | ["cats eat mice"], 15 | ["cats in the cradle lyrics"], 16 | ["cats eat kibble"], 17 | ["cats for adoption"], 18 | ["cats are family"], 19 | ["cats eat mice"], 20 | ["cats are better than kittens"], 21 | ["cats are evil"], 22 | ["cats are weird"], 23 | ["cats eat mice"], 24 | ]; 25 | 26 | export const options = { 27 | wordtree: { 28 | format: "implicit", 29 | word: "cats", 30 | }, 31 | }; 32 | 33 | export function App() { 34 | return ( 35 | 42 | ); 43 | } 44 | -------------------------------------------------------------------------------- /sandboxes/word-tree/default/index.tsx: -------------------------------------------------------------------------------- 1 | import React from "react"; 2 | import { render } from "react-dom"; 3 | 4 | import { App } from "./App"; 5 | 6 | const rootElement = document.getElementById("root"); 7 | render(, rootElement); 8 | -------------------------------------------------------------------------------- /sandboxes/word-tree/default/package.json: -------------------------------------------------------------------------------- 1 | { 2 | "description": "Simple Example", 3 | "main": "index.tsx", 4 | "dependencies": { 5 | "react": "17.0.2", 6 | "react-dom": "17.0.2", 7 | "react-google-charts": "*", 8 | "react-scripts": "4.0.3" 9 | }, 10 | "devDependencies": { 11 | "@types/react": "17.0.20", 12 | "@types/react-dom": "17.0.9", 13 | "typescript": "4.4.2" 14 | } 15 | } 16 | -------------------------------------------------------------------------------- /sandboxes/word-tree/eplicit/index.tsx: -------------------------------------------------------------------------------- 1 | import React from "react"; 2 | import { render } from "react-dom"; 3 | 4 | import { App } from "./App"; 5 | 6 | const rootElement = document.getElementById("root"); 7 | render(, rootElement); 8 | -------------------------------------------------------------------------------- /sandboxes/word-tree/eplicit/package.json: -------------------------------------------------------------------------------- 1 | { 2 | "description": "Eplicit WordTree", 3 | "main": "index.tsx", 4 | "dependencies": { 5 | "react": "17.0.2", 6 | "react-dom": "17.0.2", 7 | "react-google-charts": "*", 8 | "react-scripts": "4.0.3" 9 | }, 10 | "devDependencies": { 11 | "@types/react": "17.0.20", 12 | "@types/react-dom": "17.0.9", 13 | "typescript": "4.4.2" 14 | } 15 | } 16 | -------------------------------------------------------------------------------- /sandboxes/word-tree/meta.js: -------------------------------------------------------------------------------- 1 | module.exports = { 2 | "Data Format": 3 | "https://developers.google.com/chart/interactive/docs/gallery/wordtree#data-format", 4 | Reference: 5 | "https://developers.google.com/chart/interactive/docs/gallery/wordtree", 6 | }; 7 | -------------------------------------------------------------------------------- /turbo.json: -------------------------------------------------------------------------------- 1 | { 2 | "$schema": "https://turbo.build/schema.json", 3 | "ui": "tui", 4 | "tasks": { 5 | "build": { 6 | "dependsOn": ["^build"], 7 | "outputs": ["dist/**", "build/**"] 8 | }, 9 | "lint": { 10 | "dependsOn": ["^lint"] 11 | }, 12 | "test": { 13 | "dependsOn": ["^test"] 14 | }, 15 | "start": {}, 16 | "build-storybook": { 17 | "dependsOn": ["^build-storybook"] 18 | }, 19 | "dev": { 20 | "cache": false, 21 | "persistent": true 22 | } 23 | } 24 | } 25 | -------------------------------------------------------------------------------- /vercel.json: -------------------------------------------------------------------------------- 1 | { 2 | "outputDirectory": "apps/docs/build" 3 | } 4 | --------------------------------------------------------------------------------