Showing preview only (1,943K chars total). Download the full file or copy to clipboard to get everything.
Repository: react-tools/react-charts
Branch: beta
Commit: fc02dbd328c2
Files: 160
Total size: 1.8 MB
Directory structure:
gitextract_mus8ytg7/
├── .babelrc.js
├── .eslintrc
├── .github/
│ ├── FUNDING.yml
│ └── workflows/
│ └── publish.yml
├── .gitignore
├── LICENSE
├── README.md
├── docs/
│ ├── .gitignore
│ ├── README.md
│ ├── jsconfig.json
│ ├── next.config.js
│ ├── package.json
│ ├── postcss.config.js
│ ├── public/
│ │ └── robots.txt
│ ├── src/
│ │ ├── components/
│ │ │ ├── ArrowRight.js
│ │ │ ├── Banner.js
│ │ │ ├── BytesForm.js
│ │ │ ├── CarbonAds.js
│ │ │ ├── CodeBlock.js
│ │ │ ├── Container.js
│ │ │ ├── DocsPageFooter.js
│ │ │ ├── ExternalLink.js
│ │ │ ├── Footer.js
│ │ │ ├── Highlight.js
│ │ │ ├── Highlight2.js
│ │ │ ├── LayoutDocs.js
│ │ │ ├── LazyImage.js
│ │ │ ├── Logo.js
│ │ │ ├── MDXComponents.js
│ │ │ ├── Markdown.js
│ │ │ ├── Nav.js
│ │ │ ├── ProgressiveImage.js
│ │ │ ├── Search.js
│ │ │ ├── Seo.js
│ │ │ ├── Sidebar.js
│ │ │ ├── SidebarCategory.js
│ │ │ ├── SidebarHeading.js
│ │ │ ├── SidebarMobile.js
│ │ │ ├── SidebarNavLink.js
│ │ │ ├── SidebarPost.js
│ │ │ ├── Sticky.js
│ │ │ ├── TWButton.js
│ │ │ ├── Toc.js
│ │ │ ├── Toc.module.css
│ │ │ ├── TocNotion.js
│ │ │ ├── blog/
│ │ │ │ ├── ExternalLink.js
│ │ │ │ ├── Heading.js
│ │ │ │ ├── Image.js
│ │ │ │ ├── dynamic.js
│ │ │ │ └── intersection-observer/
│ │ │ │ ├── index.js
│ │ │ │ ├── intersection-observer.js
│ │ │ │ ├── manager.js
│ │ │ │ └── utils.js
│ │ │ ├── blog-markdown.module.css
│ │ │ ├── clients/
│ │ │ │ ├── Client.js
│ │ │ │ ├── ClientsMarquee.js
│ │ │ │ └── Filters.js
│ │ │ ├── forwardRefWithAs.js
│ │ │ ├── markdown.module.css
│ │ │ ├── useBytesSubmit.js
│ │ │ ├── useClipboard.js
│ │ │ ├── useIsMobile.js
│ │ │ ├── useOverScroll.js
│ │ │ ├── useSearch.js
│ │ │ ├── useTocHighlight.js
│ │ │ └── utils/
│ │ │ └── throttle.js
│ │ ├── manifests/
│ │ │ ├── getManifest.js
│ │ │ └── manifest.json
│ │ ├── pages/
│ │ │ ├── _app.js
│ │ │ ├── _document.js
│ │ │ ├── docs/
│ │ │ │ ├── api.md
│ │ │ │ ├── getting-started.md
│ │ │ │ ├── installation.md
│ │ │ │ ├── overview.md
│ │ │ │ └── quick-start.md
│ │ │ ├── examples/
│ │ │ │ ├── simple.md
│ │ │ │ └── stress-test.md
│ │ │ └── index.js
│ │ ├── siteConfig.js
│ │ ├── styles/
│ │ │ ├── blog.module.css
│ │ │ ├── index.css
│ │ │ ├── post.module.css
│ │ │ └── shared.module.css
│ │ └── users.js
│ └── tailwind.config.js
├── examples/
│ └── simple/
│ ├── .babelrc
│ ├── .eslintrc
│ ├── .gitignore
│ ├── .prettierrc
│ ├── .rescriptsrc.js
│ ├── README.md
│ ├── package.json
│ ├── public/
│ │ ├── index.html
│ │ └── manifest.json
│ ├── report.20200723.110041.33247.0.001.json
│ ├── report.20200813.175012.49872.0.001.json
│ ├── report.20200818.145051.85738.0.001.json
│ ├── src/
│ │ ├── ResizableBox.js
│ │ ├── components/
│ │ │ ├── Area.tsx
│ │ │ ├── Band.tsx
│ │ │ ├── Bar.tsx
│ │ │ ├── BarHorizontal.tsx
│ │ │ ├── BarHorizontalStacked.tsx
│ │ │ ├── BarStacked.tsx
│ │ │ ├── Bubble.tsx
│ │ │ ├── CustomStyles.tsx
│ │ │ ├── DarkMode.tsx
│ │ │ ├── DynamicContainer.tsx
│ │ │ ├── InteractionMode.tsx
│ │ │ ├── Line.tsx
│ │ │ ├── MultipleAxes.tsx
│ │ │ ├── SparkChart.tsx
│ │ │ ├── Steam.tsx
│ │ │ ├── StressTest.tsx
│ │ │ └── SyncedCursors.tsx
│ │ ├── index.tsx
│ │ ├── react-app-env.d.ts
│ │ ├── styles.css
│ │ ├── useDemoConfig.tsx
│ │ └── useLagRadar.js
│ └── tsconfig.json
├── media/
│ └── logo.sketch
├── package.json
├── prettier.config.js
├── rollup.config.js
├── src/
│ ├── components/
│ │ ├── AxisLinear.tsx
│ │ ├── AxisLinear.useMeasure.ts
│ │ ├── Chart.tsx
│ │ ├── Cursors.tsx
│ │ ├── Tooltip.tsx
│ │ ├── TooltipRenderer.tsx
│ │ └── Voronoi.tsx
│ ├── hooks/
│ │ ├── useAnchor.tsx
│ │ ├── useChanged.ts
│ │ ├── useGetLatest.ts
│ │ ├── useIsScrolling.ts
│ │ ├── useIsomorphicLayoutEffect.ts
│ │ ├── useLatestWhen.ts
│ │ ├── usePortalElement.ts
│ │ ├── usePrevious.ts
│ │ ├── useRect.ts
│ │ └── useSpring.ts
│ ├── index.ts
│ ├── seriesTypes/
│ │ ├── Bar.tsx
│ │ └── Line.tsx
│ ├── types.ts
│ └── utils/
│ ├── Utils.ts
│ ├── buildAxis.linear.ts
│ ├── chartContext.tsx
│ ├── curveMonotone.ts
│ └── spring.ts
├── test/
│ └── placeholder.test.tsx
├── tsconfig.json
├── tsconfig.types.json
├── typedoc.json
└── typedocs/
├── assets/
│ ├── css/
│ │ └── main.css
│ └── js/
│ ├── main.js
│ └── search.js
├── index.html
└── modules.html
================================================
FILE CONTENTS
================================================
================================================
FILE: .babelrc.js
================================================
const { NODE_ENV, BABEL_ENV } = process.env
const cjs = NODE_ENV === 'test' || BABEL_ENV === 'commonjs'
const loose = true
module.exports = {
presets: [
[
'@babel/env',
{
loose,
modules: false,
exclude: ['@babel/plugin-transform-regenerator'],
},
],
'@babel/preset-typescript',
'@babel/react',
],
plugins: [
[
'const-enum',
{
transform: 'constObject',
},
],
'babel-plugin-transform-async-to-promises',
cjs && ['@babel/transform-modules-commonjs', { loose }],
[
'@babel/transform-runtime',
{
useESModules: !cjs,
version: require('./package.json').dependencies[
'@babel/runtime'
].replace(/^[^0-9]*/, ''),
},
],
].filter(Boolean),
}
================================================
FILE: .eslintrc
================================================
{
"parser": "@typescript-eslint/parser",
"parserOptions": {
"jsx": true,
"useJSXTextNode": true
},
"extends": [
// "plugin:@typescript-eslint/recommended",
"prettier"
],
"plugins": ["@typescript-eslint", "react-hooks"],
"rules": {
"@typescript-eslint/explicit-function-return-type": "off",
"@typescript-eslint/explicit-module-boundary-types": "off",
"@typescript-eslint/no-non-null-assertion": "off",
"@typescript-eslint/no-explicit-any": "off",
"react-hooks/rules-of-hooks": "error",
"react-hooks/exhaustive-deps": "warn"
}
}
================================================
FILE: .github/FUNDING.yml
================================================
github: tannerlinsley
================================================
FILE: .github/workflows/publish.yml
================================================
name: react-charts tests
on:
push:
branches:
- 'main'
- 'beta'
pull_request:
jobs:
test:
name: 'Node ${{ matrix.node }}'
runs-on: ubuntu-latest
strategy:
matrix:
node: [12, 14, 16]
steps:
- uses: actions/checkout@v2
- uses: actions/setup-node@v2
with:
node-version: ${{ matrix.node }}
- name: Install dependencies
uses: bahmutov/npm-install@v1
- run: yarn test:ci
publish-module:
name: 'Publish Module to NPM'
# needs: test
# publish only when merged in master on original repo, not on PR
if: github.repository == 'tanstack/react-charts' && (github.ref == 'refs/heads/main' || github.ref == 'refs/heads/beta')
runs-on: ubuntu-latest
steps:
- uses: actions/checkout@v2
- uses: actions/setup-node@v2
with:
node-version: 14
registry-url: https://registry.npmjs.org/
- name: Install dependencies
uses: bahmutov/npm-install@v1
- run: yarn build
- run: npx semantic-release@17
env:
NODE_AUTH_TOKEN: ${{secrets.npm_token}}
GH_TOKEN: ${{secrets.GH_TOKEN}}
================================================
FILE: .gitignore
================================================
# See https://help.github.com/ignore-files/ for more about ignoring files.
# dependencies
node_modules
# builds
types
build
dist
lib
es
artifacts
.rpt2_cache
coverage
*.tgz
# misc
.DS_Store
.env
.env.local
.env.development.local
.env.test.local
.env.production.local
.next
npm-debug.log*
yarn-debug.log*
yarn-error.log*
.history
size-plugin.json
stats-hydration.json
stats-react.json
stats.html
.vscode/settings.json
stats-react.json
================================================
FILE: LICENSE
================================================
MIT License
Copyright (c) 2021 Tanner Linsley
Permission is hereby granted, free of charge, to any person obtaining a copy
of this software and associated documentation files (the "Software"), to deal
in the Software without restriction, including without limitation the rights
to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
copies of the Software, and to permit persons to whom the Software is
furnished to do so, subject to the following conditions:
The above copyright notice and this permission notice shall be included in all
copies or substantial portions of the Software.
THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
SOFTWARE.
================================================
FILE: README.md
================================================
# ⚠️ No Longer Maintained ⚠️
This project is no longer actively maintained. No further updates, bug fixes, or support will be provided.
----
Simple, immersive and interactive charts for React
<a href="https://twitter.com/intent/tweet?button_hashtag=TanStack" target="\_parent">
<img alt="#TanStack" src="https://img.shields.io/twitter/url?color=%2308a0e9&label=%23TanStack&style=social&url=https%3A%2F%2Ftwitter.com%2Fintent%2Ftweet%3Fbutton_hashtag%3DTanStack">
</a>
<a href="https://npmjs.com/package/react-charts" target="\_parent">
<img alt="" src="https://img.shields.io/npm/dm/react-charts.svg" />
</a>
<a href="https://bundlephobia.com/result?p=react-charts" target="\_parent">
<img alt="" src="https://badgen.net/bundlephobia/minzip/react-charts" />
</a>
<a href="https://discord.com/invite/WrRKjPJ" target="\_parent">
<img alt="" src="https://img.shields.io/badge/Discord-TanStack-%235865F2" />
</a>
<a href="https://github.com/react-charts/react-charts" target="\_parent">
<img alt="" src="https://img.shields.io/github/stars/react-charts/react-charts.svg?style=social&label=Star" />
</a>
<a href="https://twitter.com/tannerlinsley" target="\_parent">
<img alt="" src="https://img.shields.io/twitter/follow/tannerlinsley.svg?style=social&label=Follow" />
</a>
<br />
<br />
Enjoy this library? Try the entire [TanStack](https://tanstack.com)! [React Table](https://github.com/tannerlinsley/react-table), [React Query](https://github.com/tannerlinsley/react-query), [React Form](https://github.com/tannerlinsley/react-form)
## Visit [react-charts.tanstack.com](https://react-charts.tanstack.com) for docs, guides, API and more!
## Quick Features
- Line Charts
- Bar Charts
- Column Charts
- Bubble Charts
- Area Charts
- Axis Stacking
- Inverted Axes
- Hyper Responsive
- Invisibly Powered by D3
- Declarative
- Mutliple Axes
### [Become a Sponsor!](https://github.com/sponsors/tannerlinsley/)
# Contributors ✨
Thanks goes to these wonderful people ([emoji key](https://allcontributors.org/docs/en/emoji-key)):
<!-- ALL-CONTRIBUTORS-LIST:START - Do not remove or modify this section -->
<!-- prettier-ignore-start -->
<!-- markdownlint-disable -->
<table>
<tr>
<td align="center"><a href="https://tannerlinsley.com"><img src="https://avatars0.githubusercontent.com/u/5580297?v=4" width="100px;" alt=""/><br /><sub><b>Tanner Linsley</b></sub></a><br /><a href="https://github.com/tannerlinsley/react-charts/commits?author=tannerlinsley" title="Code">💻</a> <a href="#ideas-tannerlinsley" title="Ideas, Planning, & Feedback">🤔</a> <a href="#example-tannerlinsley" title="Examples">💡</a> <a href="#maintenance-tannerlinsley" title="Maintenance">🚧</a> <a href="https://github.com/tannerlinsley/react-charts/pulls?q=is%3Apr+reviewed-by%3Atannerlinsley" title="Reviewed Pull Requests">👀</a></td>
</tr>
</table>
<!-- markdownlint-enable -->
<!-- prettier-ignore-end -->
<!-- ALL-CONTRIBUTORS-LIST:END -->
This project follows the [all-contributors](https://github.com/all-contributors/all-contributors) specification. Contributions of any kind welcome!
<!-- Force 2 -->
================================================
FILE: docs/.gitignore
================================================
.next
.now
.env
.env.*
node_modules
*.log
.DS_Store
.vercel
================================================
FILE: docs/README.md
================================================
# React Charts Docs
This is source code to react-charts.tanstack.com. It is forked from the [Formik](https://formik.org) docs and is built with:
- Next.js
- MDX
- Tailwind
- Algolia
- Notion
## Running locally
```sh
yarn install
```
At the moment, you need to signup for Notion, and [follow these instructions](https://github.com/ijjk/notion-blog#getting-blog-index-and-token) to get a token and create a blog in order to develop locally. Not ideal, but hopefully will fix soon.
With tokens and page index in hand, rename `.sample.env` and `.sample.env.build` to just `.env` and `.env.build`. In each one, add respective parameters:
```diff
-NOTION_TOKEN=XXXX
+NOTION_TOKEN=<YOUR_TOKEN>
-BLOG_INDEX_ID=XXXXX
+BLOG_INDEX_ID=<YOUR_BLOG_INDEX_ID>
```
Now it will work. Run `yarn dev` to get going.
If you get stuck or need help, [send a DM to Jared](https://twitter.com/jaredpalmer) on Twitter.
================================================
FILE: docs/jsconfig.json
================================================
{
"compilerOptions": {
"baseUrl": "./src"
}
}
================================================
FILE: docs/next.config.js
================================================
const path = require('path')
const dotenvLoad = require('dotenv-load')
const optimizedImages = require('next-optimized-images')
dotenvLoad()
const remarkPlugins = [
require('remark-slug'),
[
require('remark-autolink-headings'),
{
behavior: 'append',
linkProperties: {
class: ['anchor'],
title: 'Direct link to heading',
},
},
],
require('remark-emoji'),
require('remark-footnotes'),
require('remark-images'),
[
require('remark-github'),
{ repository: 'https://github.com/tannerlinsley/react-charts' },
],
require('remark-unwrap-images'),
[
require('remark-toc'),
{
skip: 'Reference',
maxDepth: 6,
},
],
]
module.exports = optimizedImages({
pageExtensions: ['jsx', 'js', 'mdx', 'md'],
env: {
GA_TRACKING_ID: process.env.GA_TRACKING_ID || '',
SENTRY_RELEASE: process.env.VERCEL_GITHUB_COMMIT_SHA || '',
},
experimental: {
plugins: true,
modern: true,
rewrites() {
return [
{
source: '/feed.xml',
destination: '/_next/static/feed.xml',
},
{
source: '/docs{/}?',
destination: '/docs/overview',
},
{
source: '/docs/tag/:tag{/}?',
destination: '/docs/tag/:tag/overview',
},
]
},
},
webpack: (config, { dev, isServer, ...options }) => {
config.module.rules.push({
test: /.mdx?$/, // load both .md and .mdx files
use: [
options.defaultLoaders.babel,
{
loader: '@mdx-js/loader',
options: {
remarkPlugins,
},
},
path.join(__dirname, './src/lib/docs/md-loader'),
],
})
// only compile build-rss in production server build
if (dev || !isServer) {
return config
}
// we're in build mode so enable shared caching for Notion data
process.env.USE_CACHE = 'true'
const originalEntry = config.entry
config.entry = async () => {
const entries = {
...(await originalEntry()),
}
// entries['./scripts/build-rss.js'] = './src/lib/build-rss.js'
return entries
}
return config
},
optimizeImages: {
/* config for next-optimized-images */
mozjpeg: {
quality: 70,
},
optipng: {
optimizationLevel: 3,
},
optimizeImagesInDev: true,
},
})
================================================
FILE: docs/package.json
================================================
{
"name": "fdocs3",
"version": "1.0.0",
"main": "index.js",
"author": "Jared Palmer <jared@palmer.net>",
"license": "MIT",
"scripts": {
"dev": "next",
"build": "next build",
"start": "next start",
"index-docs": "node ./.next/serverless/scripts/index-docs.js"
},
"dependencies": {
"@babel/preset-typescript": "^7.10.4",
"@docsearch/react": "1.0.0-alpha.14",
"@mdx-js/loader": "^1.5.1",
"@mdx-js/mdx": "^1.5.1",
"@mdx-js/react": "^1.5.1",
"@mdx-js/tag": "^0.20.3",
"@next/mdx": "^9.4.0",
"@next/plugin-google-analytics": "^9.4.4",
"@reactions/component": "^2.0.2",
"@visx/responsive": "^1.10.1",
"@zeit/fetch": "^6.0.0",
"@zeit/react-jsx-parser": "^2.0.0",
"async-sema": "^3.1.0",
"body-scroll-lock": "^3.0.1",
"classnames": "^2.2.6",
"copy-to-clipboard": "^3.3.1",
"date-fns": "^2.12.0",
"docsearch.js": "^2.6.3",
"framer-motion": "^1.11.1",
"gray-matter": "^4.0.2",
"imagemin-mozjpeg": "^9.0.0",
"imagemin-optipng": "^8.0.0",
"intersection-observer": "^0.10.0",
"isomorphic-unfetch": "^3.0.0",
"next": "^9.4.4",
"next-images": "^1.4.0",
"next-optimized-images": "^2.6.1",
"node-fetch": "^2.6.0",
"prismjs": "^1.20.0",
"react": "^16.13.1",
"react-dom": "^16.13.1",
"react-icons": "^3.9.0",
"react-live": "^2.2.2",
"rehype-format": "^3.0.1",
"rehype-stringify": "^7.0.0",
"remark": "^12.0.0",
"remark-autolink-headings": "^6.0.0",
"remark-emoji": "^2.1.0",
"remark-footnotes": "^1.0.0",
"remark-github": "^9.0.0",
"remark-images": "^2.0.0",
"remark-slug": "^6.0.0",
"remark-toc": "^7.0.0",
"remark-unwrap-images": "^2.0.0",
"scroll-into-view-if-needed": "^2.2.24",
"semver-regex": "^3.1.1",
"unist-util-visit": "^2.0.2"
},
"devDependencies": {
"@babel/cli": "^7.10.4",
"@babel/core": "^7.10.4",
"@babel/plugin-transform-typescript": "^7.10.4",
"@babel/preset-react": "^7.10.4",
"@tailwindcss/ui": "^0.3.0",
"algoliasearch": "3.35.1",
"babel-preset-react-app": "^9.1.2",
"dotenv-load": "^2.0.0",
"github-slugger": "^1.3.0",
"md5": "^2.2.1",
"mdast-util-to-string": "^1.1.0",
"postcss-preset-env": "^6.7.0",
"remark-parse": "^8.0.2",
"tailwindcss": "^1.4.6",
"unified": "^9.0.0",
"webp-loader": "^0.6.0"
},
"engines": {
"node": ">=12.x"
}
}
================================================
FILE: docs/postcss.config.js
================================================
module.exports = {
plugins: ['tailwindcss', 'postcss-preset-env'],
};
================================================
FILE: docs/public/robots.txt
================================================
User-agent: *
Disallow:
================================================
FILE: docs/src/components/ArrowRight.js
================================================
import * as React from 'react';
export function ArrowRight({
fill = '#718096',
width = 6,
height = 10
}) {
return <svg width={width} height={height} viewBox="0 0 6 10" fill="none" xmlns="http://www.w3.org/2000/svg">
<path d="M1.4 8.56L4.67 5M1.4 1.23L4.66 4.7" stroke={fill} strokeLinecap="square" />
</svg>;
}
================================================
FILE: docs/src/components/Banner.js
================================================
export function Banner() {
return null; // return (
// <div className="bg-gray-900">
// <div className="container mx-auto py-2 flex items-center justify-between">
// <img src="/logo.png" alt="formium" width="150px" className="-ml-3" />
// <div className="text-white font-bold flex items-center">
// Hassle-free form storage for static sites →
// </div>
// </div>
// </div>
// );
}
================================================
FILE: docs/src/components/BytesForm.js
================================================
import React from 'react'
import useBytesSubmit from './useBytesSubmit'
export default function BytesForm() {
const { state, handleSubmit, error } = useBytesSubmit()
if (state === 'submitted') {
return (
<p>Success! Please, check your email to confirm your subscription.</p>
)
}
return (
<form onSubmit={handleSubmit}>
<div data-element="fields" className="grid relative">
<figure
className="absolute right-0"
style={{ bottom: '72px', right: '-10px' }}
>
<img
height={40}
width={40}
src="/images/bytes-logo.png"
alt="Bytes"
/>
</figure>
<input
className="border rounded p-2 mb-2 w-full"
name="email_address"
placeholder="Your email address"
type="email"
required=""
/>
<button
type="submit"
className="mb-4 border rounded bg-coral border-none text-white p-2"
>
{state !== 'loading' ? (
<span>Subscribe</span>
) : (
<span>Loading...</span>
)}
</button>
</div>
<p className="text-gray-400 text-xs">
No spam. Unsubscribe at <em>any</em> time.
</p>
{error && <p className="text-red-600">{error}</p>}
</form>
)
}
================================================
FILE: docs/src/components/CarbonAds.js
================================================
import React from 'react'
function buildScript(src, attrs = {}) {
if (typeof document !== 'undefined') {
const script = document.createElement('script')
script.async = true
script.defer = true
Object.keys(attrs).forEach(attr => script.setAttribute(attr, attrs[attr]))
script.src = src
return script
}
}
export default function CarbonAds() {
const ref = React.useRef()
React.useEffect(() => {
const script = buildScript(
'//cdn.carbonads.com/carbon.js?serve=CESITK7L&placement=react-chartstanstackcom',
{
type: 'text/javascript',
id: '_carbonads_js',
}
)
ref.current.appendChild(script)
}, [])
React.useEffect(() => {
const interval = setInterval(() => {
;[...ref.current.children].forEach(child => {
if (child.id.startsWith('carbonads_')) {
ref.current.removeChild(child)
}
})
}, 100)
return () => {
clearInterval(interval)
}
})
return <div ref={ref} />
}
================================================
FILE: docs/src/components/CodeBlock.js
================================================
import React, { useState } from 'react';
import { LiveProvider, LiveEditor, LiveError, LivePreview } from 'react-live';
import { mdx } from '@mdx-js/react';
import { TWButton } from './TWButton';
import { useClipboard } from './useClipboard';
import Component from '@reactions/component';
export const liveEditorStyle = {
fontSize: 14,
overflowX: 'auto',
color: '#f8f8f2',
fontFamily: 'SFMono-Regular,Consolas,Liberation Mono,Menlo,monospace',
height: '100%',
background: '#161e2e'
};
export const liveErrorStyle = {
fontFamily: 'SFMono-Regular,Consolas,Liberation Mono,Menlo,monospace',
fontSize: 12,
padding: '1em',
overflowX: 'auto',
color: 'white',
backgroundColor: 'red'
};
const LiveCodePreview = props => <div className="font-sans text-gray-900 rounded-md p-4 overflow-x-scroll">
<LivePreview {...props} />
</div>;
const EditableNotice = props => {
return <div className="absolute right-0 top-0 p-3 text-gray-400 text-xs font-sans uppercase">
Editable Example
</div>;
};
const CodeBlock = ({
className,
live = false,
noInline = false,
collapsed = false,
isManual,
render,
children,
...props
}) => {
const initialCode = React.useRef(children.trim());
const [editorCode, setEditorCode] = useState(children.trim());
const language = className && className.replace(/language-/, '');
const [hasCopied, onCopy] = useClipboard(editorCode);
const [isCollapsed, setCollapse] = React.useState(collapsed);
const liveProviderProps = {
theme: {
plain: {},
styles: []
},
language,
code: editorCode,
transformCode: code => `<>${code}</>`,
scope: {
mdx,
Component
},
noInline,
...props
};
const handleCodeChange = newCode => setEditorCode(newCode ? newCode.trim() : '');
if (language === 'jsx' && live === true) {
return <LiveProvider {...liveProviderProps}>
<div className="border relative rounded shadow-sm">
<LiveCodePreview />
<EditableNotice />
{isCollapsed ? <div className="border-t">
<button className="text-gray-600 py-2 bg-gray-100 font-semibold w-full text-sm hover:bg-gray-200 transition duration-100 ease-in-out" onClick={() => setCollapse(false)}>
Show Code
</button>
</div> : <>
<div className="relative">
<LiveEditor onChange={handleCodeChange} style={liveEditorStyle} className="outline-none " />
<div className="absolute right-0 top-0 p-2">
<TWButton size="xs" className="font-sans mr-2" onClick={onCopy}>
{hasCopied ? 'Copied' : 'Copy'}
</TWButton>
<TWButton size="xs" className="font-sans" onClick={() => setEditorCode(initialCode.current)}>
Reset
</TWButton>
</div>
</div>
<LiveError style={liveErrorStyle} />
<div className="border-t">
<button className="text-gray-600 py-2 bg-gray-100 font-semibold w-full text-sm hover:bg-gray-200 transition duration-100 ease-in-out" onClick={() => setCollapse(true)}>
Hide Code
</button>
</div>
</>}
</div>
</LiveProvider>;
}
if (render) {
return <div style={{
marginTop: '40px'
}}>
<LiveProvider {...liveProviderProps}>
<LiveCodePreview className="font-sans" />
</LiveProvider>
</div>;
}
return <LiveProvider disabled {...liveProviderProps}>
<div className="relative">
<LiveEditor style={liveEditorStyle} className="rounded shadow-sm" />
<div className="absolute right-0 top-0 p-2">
<TWButton size="xs" className="font-sans" onClick={onCopy}>
{hasCopied ? 'Copied' : 'Copy'}
</TWButton>
</div>
</div>
</LiveProvider>;
};
CodeBlock.defaultProps = {
mountStylesheet: false
};
export default CodeBlock;
================================================
FILE: docs/src/components/Container.js
================================================
import * as React from 'react';
import cn from 'classnames';
export const Container = props => {
return <div className={cn('container mx-auto')} {...props} />;
};
Container.displayName = 'Container';
================================================
FILE: docs/src/components/DocsPageFooter.js
================================================
import * as React from 'react'
import NextLink from 'next/link'
import { removeFromLast } from '../lib/docs/utils'
import { siteConfig } from 'siteConfig'
import { FiThumbsDown, FiThumbsUp } from 'react-icons/fi'
import { TWButton } from './TWButton'
function areEqual(prevProps, props) {
return prevProps.route?.path === props.route?.path
}
export const DocsPageFooter = React.memo(({ route, prevRoute, nextRoute }) => {
const editUrl = `${siteConfig.editUrl}${route?.editUrl || route?.path}`
return (
<>
<div className="py-8">
<div className="flex space-between items-center">
{prevRoute && prevRoute.path ? (
<NextLink href={removeFromLast(prevRoute.path, '.')}>
<a className="flex-grow block">
<span className="text-sm block text-gray-500 mb-1 font-semibold">
← Prev
</span>
<span className="text-xl block text-blue-600 font-semibold">
{prevRoute.title}
</span>
</a>
</NextLink>
) : (
<div />
)}
{nextRoute && nextRoute.path && (
<NextLink href={removeFromLast(nextRoute.path, '.')}>
<a className="flex-grow text-right block">
<span className="text-sm block text-gray-500 mb-1 font-semibold">
Next →
</span>
<span className="text-xl block text-blue-600 font-semibold">
{nextRoute.title}
</span>
</a>
</NextLink>
)}
</div>
</div>
<div className="mb-8">
<a
href={editUrl}
target="_blank"
rel="noopener noreferrer"
className="text-gray-600 underline"
>
Edit this page on GitHub
</a>
</div>
<div className="py-8 md:flex md:items-center md:py-8 border-t border-b">
<div className="font-semibold text-xl mr-4 text-center mb-4 md:mb-0 md:text-left">
Was this page helpful?
</div>
<div className="grid grid-cols-2 gap-3 w-auto max-w-xs mx-auto md:mx-2">
<TWButton icon={<FiThumbsUp />}>Yes</TWButton>
<TWButton icon={<FiThumbsDown />}>No</TWButton>
</div>
</div>
</>
)
}, areEqual)
DocsPageFooter.displayName = 'DocsPageFooter'
================================================
FILE: docs/src/components/ExternalLink.js
================================================
import * as React from 'react';
export function ExternalLink(props) {
return <a {...props} rel="noopener" target={props.target || '_blank'} />;
}
================================================
FILE: docs/src/components/Footer.js
================================================
import * as React from 'react'
import Link from 'next/link'
import CarbonAds from './CarbonAds'
import BytesForm from './BytesForm'
export const Footer = props => {
return (
<div className="bg-gray-50 border-t border-gray-200">
<div className="container mx-auto py-12 px-4 sm:px-6 lg:py-16 lg:px-8">
<div className="grid-cols-2 md:grid xl:grid-cols-4 md:gap-8">
<div>
<h4 className="text-sm leading-5 font-semibold tracking-wider text-gray-400 uppercase">
Resources
</h4>
<ul className="mt-4">
<li>
<Link href="/docs/overview">
<a className="text-base leading-6 text-gray-500 hover:text-gray-900">
Docs
</a>
</Link>
</li>
<li className="mt-4">
<Link href="/examples/simple">
<a className="text-base leading-6 text-gray-500 hover:text-gray-900">
Examples
</a>
</Link>
</li>
<li className="mt-4">
<Link href="/docs/api">
<a className="text-base leading-6 text-gray-500 hover:text-gray-900">
API Reference
</a>
</Link>
</li>
</ul>
</div>
<div className="mt-12 md:mt-0">
<h4 className="text-sm leading-5 font-semibold tracking-wider text-gray-400 uppercase">
Community
</h4>
<ul className="mt-4">
<li className="mt-4">
<a
href="https://github.com/tannerlinsley/react-charts/discussions"
className="text-base leading-6 text-gray-500 hover:text-gray-900"
>
Forum & Support
</a>
</li>
<li className="mt-4">
<a
href="https://discord.gg/WrRKjPJ"
className="text-base leading-6 text-gray-500 hover:text-gray-900"
>
#TanStack Discord
</a>
</li>
<li className="mt-4">
<a
href="http://stackoverflow.com/questions/tagged/react-charts"
className="text-base leading-6 text-gray-500 hover:text-gray-900"
>
Stack Overflow
</a>
</li>
<li className="mt-4">
<a
href="https://github.com/tannerlinsley/react-charts/releases"
className="text-base leading-6 text-gray-500 hover:text-gray-900"
>
Releases
</a>
</li>
<li className="mt-4">
<a
className="github-button"
href="https://github.com/tannerlinsley/react-charts"
data-color-scheme="no-preference: light; light: light; dark: dark;"
data-icon="octicon-star"
data-size="large"
data-show-count="true"
aria-label="Star tannerlinsley/react-charts on GitHub"
>
Star
</a>
</li>
</ul>
</div>
<div className="mt-12 md:mt-0">
<CarbonAds />
</div>
<div className="mt-8 xl:mt-0">
<h4 className="text-sm leading-5 font-semibold tracking-wider text-gray-400 uppercase">
Subscribe to Bytes
</h4>
<p className="mt-4 text-gray-500 text-base leading-6 mb-4">
The best JavaScript newsletter! Delivered every Monday to over
76,000 devs.
</p>
<BytesForm />
</div>
</div>
<div className="mt-8 border-t border-gray-200 pt-8 md:flex md:items-center md:justify-between">
<div className="flex md:order-2">
<a
href="https://twitter.com/tannerlinsley"
className="ml-6 text-gray-400 hover:text-gray-500"
>
<span className="sr-only">Twitter</span>
<svg className="h-6 w-6" fill="currentColor" viewBox="0 0 24 24">
<path d="M8.29 20.251c7.547 0 11.675-6.253 11.675-11.675 0-.178 0-.355-.012-.53A8.348 8.348 0 0022 5.92a8.19 8.19 0 01-2.357.646 4.118 4.118 0 001.804-2.27 8.224 8.224 0 01-2.605.996 4.107 4.107 0 00-6.993 3.743 11.65 11.65 0 01-8.457-4.287 4.106 4.106 0 001.27 5.477A4.072 4.072 0 012.8 9.713v.052a4.105 4.105 0 003.292 4.022 4.095 4.095 0 01-1.853.07 4.108 4.108 0 003.834 2.85A8.233 8.233 0 012 18.407a11.616 11.616 0 006.29 1.84" />
</svg>
</a>
<a
href="https://github.com/tannerlinsley"
className="ml-6 text-gray-400 hover:text-gray-500"
>
<span className="sr-only">GitHub</span>
<svg className="h-6 w-6" fill="currentColor" viewBox="0 0 24 24">
<path
fillRule="evenodd"
d="M12 2C6.477 2 2 6.484 2 12.017c0 4.425 2.865 8.18 6.839 9.504.5.092.682-.217.682-.483 0-.237-.008-.868-.013-1.703-2.782.605-3.369-1.343-3.369-1.343-.454-1.158-1.11-1.466-1.11-1.466-.908-.62.069-.608.069-.608 1.003.07 1.531 1.032 1.531 1.032.892 1.53 2.341 1.088 2.91.832.092-.647.35-1.088.636-1.338-2.22-.253-4.555-1.113-4.555-4.951 0-1.093.39-1.988 1.029-2.688-.103-.253-.446-1.272.098-2.65 0 0 .84-.27 2.75 1.026A9.564 9.564 0 0112 6.844c.85.004 1.705.115 2.504.337 1.909-1.296 2.747-1.027 2.747-1.027.546 1.379.202 2.398.1 2.651.64.7 1.028 1.595 1.028 2.688 0 3.848-2.339 4.695-4.566 4.943.359.309.678.92.678 1.855 0 1.338-.012 2.419-.012 2.747 0 .268.18.58.688.482A10.019 10.019 0 0022 12.017C22 6.484 17.522 2 12 2z"
clipRule="evenodd"
/>
</svg>
</a>
</div>
<p className="mt-8 text-base leading-6 text-gray-400 md:mt-0 md:order-1">
© 2020 Tanner Linsley. All rights reserved.
</p>
</div>
</div>
</div>
)
}
Footer.displayName = 'Footer'
================================================
FILE: docs/src/components/Highlight.js
================================================
import * as React from 'react';
import Highlight, { defaultProps } from 'prism-react-renderer';
import { LiveProvider, LiveEditor, LiveError, LivePreview } from 'react-live'; // Original: https://raw.githubusercontent.com/PrismJS/prism-themes/master/themes/prism-ghcolors.css
/*:: import type { PrismTheme } from '../src/types' */
const theme
/*: PrismTheme */
= {
plain: {
color: '#293742',
borderRadius: 12,
fontFamily: `SFMono-Regular,Consolas,Liberation Mono,Menlo,Courier,monospace`,
fontSize: 14,
lineHeight: '1.5'
},
styles: [{
types: ['comment', 'prolog', 'doctype', 'cdata'],
style: {
color: '#A7B6C2',
fontStyle: 'italic'
}
}, {
types: ['namespace'],
style: {
opacity: 0.7
}
}, {
types: ['string', 'attr-value'],
style: {
color: '#DB2C6F'
}
}, {
types: ['punctuation', 'operator'],
style: {
color: '#394B59'
}
}, {
types: ['entity', 'url', 'symbol', 'number', 'boolean', 'variable', 'constant', 'property', 'regex', 'inserted'],
style: {
color: '#36acaa'
}
}, {
types: ['atrule', 'keyword', 'attr-name', 'selector'],
style: {
color: '#00B3A4'
}
}, {
types: ['function', 'deleted', 'tag'],
style: {
color: '#DB2C6F'
}
}, {
types: ['function-variable'],
style: {
color: '#634DBF'
}
}, {
types: ['tag', 'selector', 'keyword'],
style: {
color: '#1a56db'
}
}]
};
const Code = ({
children,
codeString,
className = 'language-js',
...props
}) => {
const language = className.replace(/language-/, '');
const [key, setKey] = React.useState(`${Math.random() * 7}`);
if (props['live']) {
return <div>
<LiveProvider key={key} code={children.trim()} theme={theme} noInline>
<div className="flex items-center justify-between">
<div>Live JSX Editor</div>
<div>
<button onClick={() => setKey(k => `${k * Math.random()}`)}>
Reset
</button>
</div>
</div>
<div style={{
paddingRight: 10,
paddingLeft: 10
}}>
<LiveEditor />
</div>
<div>
<div>
<div>Live Preview</div>
</div>
<div>
<LiveError style={{
fontSize: 13,
background: '#FED7D7',
color: '#9B2C2C',
lineHeight: '1.5',
margin: -4,
padding: 4
}} />
<LivePreview />
</div>
</div>
</LiveProvider>
</div>;
} else {
return <Highlight {...defaultProps} code={children.trim()} language={language} theme={theme}>
{({
className,
style,
tokens,
getLineProps,
getTokenProps
}) => <pre className={className + ' bg-gray-50 pb-4 pt-4 pr-4 overflow-scroll'} style={{ ...style,
border: '1px solid #eee',
fontSize: 13,
lineHeight: '1.5'
}}>
{tokens.map((line, i) => <div key={i} {...getLineProps({
line,
key: i
})}>
{tokens.length > 1 ? <span aria-hidden="true" className="select-none text-gray-300 text-right w-5 inline-block mx-2">
{i + 1}
</span> : <span className="mx-2 w-5" />}{' '}
{line.map((token, key) => <span key={key} {...getTokenProps({
token,
key
})} />)}
</div>)}
</pre>}
</Highlight>;
}
};
export default Code;
================================================
FILE: docs/src/components/Highlight2.js
================================================
import * as React from 'react';
import Highlight, { defaultProps } from 'prism-react-renderer';
// Original: https://raw.githubusercontent.com/PrismJS/prism-themes/master/themes/prism-ghcolors.css
/*:: import type { PrismTheme } from '../src/types' */
const theme
/*: PrismTheme */
= {
plain: {
color: '#293742',
borderRadius: 12,
fontFamily: `SFMono-Regular,Consolas,Liberation Mono,Menlo,Courier,monospace`,
fontSize: 14,
lineHeight: '1.5'
},
styles: [{
types: ['comment', 'prolog', 'doctype', 'cdata'],
style: {
color: '#A7B6C2',
fontStyle: 'italic'
}
}, {
types: ['namespace'],
style: {
opacity: 0.7
}
}, {
types: ['string', 'attr-value'],
style: {
color: '#DB2C6F'
}
}, {
types: ['punctuation', 'operator'],
style: {
color: '#394B59'
}
}, {
types: ['entity', 'url', 'symbol', 'number', 'boolean', 'variable', 'constant', 'property', 'regex', 'inserted'],
style: {
color: '#36acaa'
}
}, {
types: ['atrule', 'keyword', 'attr-name', 'selector'],
style: {
color: '#00B3A4'
}
}, {
types: ['function', 'deleted', 'tag'],
style: {
color: '#DB2C6F'
}
}, {
types: ['function-variable'],
style: {
color: '#634DBF'
}
}, {
types: ['tag', 'selector', 'keyword'],
style: {
color: '#1a56db'
}
}]
};
const Code = ({
children,
codeString,
className = 'language-js',
...props
}) => {
const language = className.replace(/language-/, '');
return <Highlight {...defaultProps} code={children.trim()} language={language} theme={theme}>
{({
className,
style,
tokens,
getLineProps,
getTokenProps
}) => <pre className={className + ' bg-gray-50 pb-4 pt-4 pr-4 overflow-scroll'} style={{ ...style,
border: '1px solid #eee',
fontSize: 13,
lineHeight: '1.5'
}}>
{tokens.map((line, i) => <div key={i} {...getLineProps({
line,
key: i
})}>
{tokens.length > 1 ? <span aria-hidden="true" className="select-none text-gray-300 text-right w-5 inline-block mx-2">
{i + 1}
</span> : <span className="mx-2 w-5" />}{' '}
{line.map((token, key) => <span key={key} {...getTokenProps({
token,
key
})} />)}
</div>)}
</pre>}
</Highlight>;
};
export default Code;
================================================
FILE: docs/src/components/LayoutDocs.js
================================================
import * as React from 'react'
import { MDXProvider } from '@mdx-js/react'
import { Nav } from 'components/Nav'
import { Sidebar } from 'components/Sidebar'
import { SidebarCategory } from 'components/SidebarCategory'
import { SidebarHeading } from 'components/SidebarHeading'
import { SidebarMobile } from 'components/SidebarMobile'
import { SidebarPost } from 'components/SidebarPost'
import { Sticky } from 'components/Sticky'
import { useIsMobile } from 'components/useIsMobile'
import { findRouteByPath } from 'lib/docs/findRouteByPath'
import { removeFromLast } from 'lib/docs/utils'
import { getRouteContext } from 'lib/get-route-context'
import { useRouter } from 'next/router'
import { Toc } from './Toc'
import s from './markdown.module.css'
import { Footer } from './Footer'
import { DocsPageFooter } from './DocsPageFooter'
import { Seo } from './Seo'
import MDXComponents from './MDXComponents'
import Head from 'next/head'
import { getManifest } from 'manifests/getManifest'
import BytesForm from './BytesForm'
const getSlugAndTag = path => {
const parts = path.split('/')
if (parts[2] === '1.5.8' || parts[2] === '2.1.4') {
return {
tag: parts[2],
slug: `/docs/${parts.slice(2).join('/')}`,
}
}
return {
slug: path,
}
}
const addTagToSlug = (slug, tag) => {
return tag ? `/docs/${tag}/${slug.replace('/docs/', '')}` : slug
}
export const LayoutDocs = props => {
const router = useRouter()
const { slug, tag } = getSlugAndTag(router.asPath)
const { routes } = getManifest(tag)
const _route = findRouteByPath(removeFromLast(slug, '#'), routes) // @ts-ignore
const isMobile = useIsMobile()
const { route, prevRoute, nextRoute } = getRouteContext(_route, routes)
const title = route && `${route.title}`
return (
<>
{tag && (
<Head>
<meta name="robots" content="noindex" />
</Head>
)}
<div>
{isMobile ? (
<>
<Nav />
<Sticky shadow>
<SidebarMobile>
<SidebarRoutes isMobile={true} routes={routes} />
</SidebarMobile>
</Sticky>
</>
) : (
<Sticky>
<Nav />
</Sticky>
)}
<Seo
title={title || props.meta.title}
description={props.meta.description}
/>
<div className="block">
<>
<div className="container mx-auto pb-12 pt-6 content">
<div className="flex relative">
{!isMobile && (
<Sidebar fixed>
<SidebarRoutes routes={routes} />
</Sidebar>
)}
<div className={s['markdown'] + ' w-full docs'}>
<h1>{props.meta.title}</h1>
<MDXProvider components={MDXComponents}>
{props.children}
</MDXProvider>
<DocsPageFooter
href={route?.path || ''}
route={route}
prevRoute={prevRoute}
nextRoute={nextRoute}
/>
</div>
{props.meta.toc === false ? null : (
<div
className="hidden xl:block ml-10 flex-shrink-0"
style={{
width: 200,
}}
>
<div className="sticky top-24 ">
<h4 className="font-semibold uppercase text-sm mb-2 mt-2 text-gray-500">
On this page
</h4>
<Toc />
<div className="mt-12 relative">
<h4 className="font-semibold uppercase text-sm mb-2 mt-2 text-gray-500">
Subscribe to Bytes
</h4>
<p className="mt-4 text-sm leading-6 mb-4">
The best JavaScript newsletter! Delivered every
Monday to over 76,000 devs.
</p>
<BytesForm />
</div>
</div>
</div>
)}
</div>
</div>
</>
</div>
</div>
<Footer />
<style jsx>{`
.docs {
min-width: calc(100% - 300px - 1rem - 200px);
word-wrap: break-word;
}
`}</style>
</>
)
}
function getCategoryPath(routes) {
const route = routes.find(r => r.path)
return route && removeFromLast(route.path, '/')
}
function SidebarRoutes({ isMobile, routes: currentRoutes, level = 1 }) {
const { asPath } = useRouter()
let { slug, tag } = getSlugAndTag(asPath)
return currentRoutes.map(({ path, title, routes, heading, open }) => {
if (routes) {
const pathname = getCategoryPath(routes)
const selected = slug.startsWith(pathname)
const opened = selected || isMobile ? false : open
if (heading) {
return (
<SidebarHeading key={'parent' + pathname} title={title}>
<SidebarRoutes
isMobile={isMobile}
routes={routes}
level={level + 1}
/>
</SidebarHeading>
)
}
return (
<SidebarCategory
key={pathname}
isMobile={isMobile}
level={level}
title={title}
selected={selected}
opened={opened}
>
<SidebarRoutes
isMobile={isMobile}
routes={routes}
level={level + 1}
/>
</SidebarCategory>
)
}
const pagePath = removeFromLast(path, '.')
const pathname = addTagToSlug(pagePath, tag)
const selected = slug === pagePath
const route = {
href: pagePath,
path,
title,
pathname,
selected,
}
return (
<SidebarPost
key={title}
isMobile={isMobile}
level={level}
route={route}
/>
)
})
}
LayoutDocs.displayName = 'LayoutDocs'
================================================
FILE: docs/src/components/LazyImage.js
================================================
import * as React from 'react';
import { ProgressiveImage } from './ProgressiveImage';
import cn from 'classnames';
export class LazyImage extends React.Component {
render() {
const {
height,
width,
src,
alt,
className,
style
} = this.props;
return <ProgressiveImage src={src} placeholder={'data:image/gif;base64,R0lGODlhAQABAPABAP///wAAACH5BAEKAAAALAAAAAABAAEAAAICRAEAOw%3D%3D'}>
{({
image,
isLoading
}) => <img className={cn('transition duration-100 ease-in', {
'opacity-0': isLoading,
'opacity-100': !isLoading
}, className)} src={image} alt={alt} width={width} style={style} height={height} />}
</ProgressiveImage>;
}
}
================================================
FILE: docs/src/components/Logo.js
================================================
================================================
FILE: docs/src/components/MDXComponents.js
================================================
import * as React from 'react';
import dynamic from 'next/dynamic';
export default {
// default tags
pre: p => <pre {...p} />,
code: dynamic(() => import('./Highlight2')) // Counter: dynamic(() => import('./counter')),
};
================================================
FILE: docs/src/components/Markdown.js
================================================
import * as React from 'react';
import markdownStyles from './markdown.module.css';
export const Markdown = ({
html: content
}) => {
return <div className={markdownStyles['markdown']} dangerouslySetInnerHTML={{
__html: content
}} />;
};
Markdown.displayName = 'PostBody';
================================================
FILE: docs/src/components/Nav.js
================================================
import * as React from 'react'
import Link from 'next/link'
import logoSrc from '../images/logo-light.svg'
import { siteConfig } from 'siteConfig'
import { Search } from './Search'
export const Nav = () => (
<div className="bg-white border-b border-gray-200">
<div className="container mx-auto">
<div className="flex flex-wrap items-center">
<div className="w-60 flex items-center h-16 pt-4 md:pt-0">
<Link href="/" as="/">
<a>
<span className="sr-only">Home</span>
<img src={logoSrc} alt="React Charts" />
</a>
</Link>
</div>
<div className="flex-grow hidden lg:block ml-8">
<Search />
</div>
<div className="flex flex-grow items-center justify-between w-3/4 md:w-auto md:justify-end space-x-4 md:space-x-8 h-16">
<div className="flex space-x-4 md:space-x-8 text-sm md:text-base">
<div>
<Link href="/docs/overview">
<a className="leading-6 font-medium">Docs</a>
</Link>
</div>
<div>
<Link href="/examples/simple">
<a className="leading-6 font-medium">Examples</a>
</Link>
</div>
<div>
<Link href="/docs/api">
<a className="leading-6 font-medium">API</a>
</Link>
</div>
<div>
<a href="https://tanstack.com" className="leading-6 font-medium">
TanStack
</a>
</div>
</div>
<div>
<a
href={siteConfig.repoUrl}
target="_blank"
rel="noopener noreferrer"
>
<span className="sr-only">GitHub</span>
<svg className="h-6 w-6" fill="currentColor" viewBox="0 0 24 24">
<path
fillRule="evenodd"
d="M12 2C6.477 2 2 6.484 2 12.017c0 4.425 2.865 8.18 6.839 9.504.5.092.682-.217.682-.483 0-.237-.008-.868-.013-1.703-2.782.605-3.369-1.343-3.369-1.343-.454-1.158-1.11-1.466-1.11-1.466-.908-.62.069-.608.069-.608 1.003.07 1.531 1.032 1.531 1.032.892 1.53 2.341 1.088 2.91.832.092-.647.35-1.088.636-1.338-2.22-.253-4.555-1.113-4.555-4.951 0-1.093.39-1.988 1.029-2.688-.103-.253-.446-1.272.098-2.65 0 0 .84-.27 2.75 1.026A9.564 9.564 0 0112 6.844c.85.004 1.705.115 2.504.337 1.909-1.296 2.747-1.027 2.747-1.027.546 1.379.202 2.398.1 2.651.64.7 1.028 1.595 1.028 2.688 0 3.848-2.339 4.695-4.566 4.943.359.309.678.92.678 1.855 0 1.338-.012 2.419-.012 2.747 0 .268.18.58.688.482A10.019 10.019 0 0022 12.017C22 6.484 17.522 2 12 2z"
clipRule="evenodd"
/>
</svg>
</a>
</div>
</div>
</div>
</div>
</div>
)
================================================
FILE: docs/src/components/ProgressiveImage.js
================================================
import * as React from 'react';
export class ProgressiveImage extends React.Component {
constructor(props) {
super(props);
this.state = {
image: props.placeholder,
isLoading: true
};
}
componentDidMount() {
const {
src
} = this.props;
if (src) {
this.loadImage(src);
}
}
componentDidUpdate(prevProps) {
const {
src,
placeholder
} = prevProps; // We only invalidate the current image if the src has changed.
if (src && src !== this.props.src) {
this.setState({
image: placeholder,
isLoading: true
}, () => {
this.loadImage(src);
});
}
}
componentWillUnmount() {
if (this.image) {
this.image.onload = null;
this.image.onerror = null;
}
}
loadImage = src => {
// If there is already an image we nullify the onload
// and onerror props so it does not incorrectly set state
// when it resolves
if (this.image) {
this.image.onload = null;
this.image.onerror = null;
}
const image = new Image();
this.image = image;
image.onload = this.onLoad;
image.onerror = this.onError;
image.src = src;
};
onLoad = () => {
const {
naturalWidth,
naturalHeight
} = this.image; // use this.image.src instead of this.props.src to
// avoid the possibility of props being updated and the
// new imageisLoading before the new props are available as
// this.props.
this.setState({
naturalHeight,
naturalWidth,
aspectRatio: naturalHeight / naturalWidth,
orientation: naturalWidth > naturalHeight ? 'landscape' : 'portrait',
image: this.image.src,
isLoading: false
});
};
onError = errorEvent => {
const {
onError
} = this.props;
if (onError) {
onError(errorEvent);
}
};
render() {
const {
children
} = this.props;
if (!children || typeof children !== 'function') {
throw new Error(`ProgressiveImage requires a function as its only child`);
}
return children(this.state);
}
}
================================================
FILE: docs/src/components/Search.js
================================================
import * as React from 'react'
import { useSearch } from './useSearch'
export const Search = () => {
const { onOpen } = useSearch()
return (
<div>
<button
type="button"
className="group form-input hover:text-gray-600 hover:border-gray-300 transition duration-150 ease-in-out pointer flex items-center bg-gray-50 text-left w-full text-gray-500 rounded-lg text-sm align-middle"
onClick={onOpen}
>
<svg
width="1em"
height="1em"
className="mr-3 align-middle text-gray-600 flex-shrink-0 group-hover:text-gray-700"
style={{
marginBottom: 2,
}}
viewBox="0 0 20 20"
>
<path
d="M14.386 14.386l4.0877 4.0877-4.0877-4.0877c-2.9418 2.9419-7.7115 2.9419-10.6533 0-2.9419-2.9418-2.9419-7.7115 0-10.6533 2.9418-2.9419 7.7115-2.9419 10.6533 0 2.9419 2.9418 2.9419 7.7115 0 10.6533z"
stroke="currentColor"
fill="none"
strokeWidth="2"
fillRule="evenodd"
strokeLinecap="round"
strokeLinejoin="round"
></path>
</svg>
Search docs
<span className="ml-auto invisible lg:visible">
<kbd
className="border border-gray-300 mr-1 bg-gray-100 align-middle p-0 inline-flex justify-center items-center text-xs text-center mr-0 rounded group-hover:border-gray-300 transition duration-150 ease-in-out "
style={{
minWidth: '1.8em',
}}
>
⌘
</kbd>
<kbd
className="border border-gray-300 bg-gray-100 align-middle p-0 inline-flex justify-center items-center text-xs text-center ml-auto mr-0 rounded group-hover:border-gray-300 transition duration-150 ease-in-out "
style={{
minWidth: '1.8em',
}}
>
K
</kbd>
</span>
</button>
</div>
)
}
Search.displayName = 'Search'
================================================
FILE: docs/src/components/Seo.js
================================================
import React from 'react'
import Head from 'next/head'
import { withRouter } from 'next/router'
const ogImage = require('images/og-dark.png?url')
const favicon = require('images/favicon.png?url')
export const Seo = withRouter(
({ title, description, image = ogImage, router, children }) => (
<Head>
{/* DEFAULT */}
{title != undefined && (
<title key="title">{title} | React Charts | TanStack</title>
)}
{description != undefined && (
<meta name="description" key="description" content={description} />
)}
<link rel="icon" type="image/x-icon" href={favicon} />
<link rel="apple-touch-icon" href={favicon} />
{/* OPEN GRAPH */}
<meta property="og:type" key="og:type" content="website" />
<meta
property="og:url"
key="og:url"
content={`https://react-charts.tanstack.com${router.pathname}`}
/>
{title != undefined && (
<meta property="og:title" content={title} key="og:title" />
)}
{description != undefined && (
<meta
property="og:description"
key="og:description"
content={description}
/>
)}
{image != undefined && (
<meta
property="og:image"
key="og:image"
content={`https://react-charts.tanstack.com${image}`}
/>
)}
{/* TWITTER */}
<meta
name="twitter:card"
key="twitter:card"
content="summary_large_image"
/>
<meta name="twitter:site" key="twitter:site" content="@tannerlinsley" />
<meta
name="twitter:creator"
key="twitter:creator"
content="@tannerlinsley"
/>
{title != undefined && (
<meta name="twitter:title" key="twitter:title" content={title} />
)}
{description != undefined && (
<meta
name="twitter:description"
key="twitter:description"
content={description}
/>
)}
{image != undefined && (
<meta
name="twitter:image"
key="twitter:image"
content={`https://react-charts.tanstack.com${image}`}
/>
)}
{children}
</Head>
)
)
================================================
FILE: docs/src/components/Sidebar.js
================================================
import { useState } from 'react'
import cn from 'classnames'
import { Search } from './Search'
import CarbonAds from './CarbonAds'
export const Sidebar = ({ active, children, fixed }) => {
const [searching, setSearching] = useState(false)
return (
<aside
className={cn('sidebar bg-white top-24 flex-shrink-0 pr-2', {
active,
['pb-0 flex flex-col z-1 sticky']: fixed,
fixed,
searching,
})}
>
<div className="sidebar-search my-2 lg:hidden">
<Search />
</div>
<div className="sidebar-content overflow-y-auto pb-4">{children}</div>
<CarbonAds />
<style jsx>{`
.sidebar {
-webkit-overflow-scrolling: touch;
}
.sidebar.fixed {
width: 300px;
padding-right: 2.5rem;
/* Full page - content margin - header size - banner */
height: calc(100vh - 1.5rem - 64px - 42px);
}
.sidebar.fixed.searching > .sidebar-content {
display: none;
}
.sidebar-search {
position: relative;
z-index: 1;
}
@media screen and (max-width: 1024px) {
.sidebar,
.sidebar.fixed {
display: none;
}
.sidebar.active {
display: block;
}
}
`}</style>
</aside>
)
}
================================================
FILE: docs/src/components/SidebarCategory.js
================================================
import { useRef, useState, useEffect } from 'react';
import cn from 'classnames';
import { FiChevronDown } from 'react-icons/fi';
export function SidebarCategory({
isMobile,
level = 1,
title,
selected,
opened,
children
}) {
const ref = useRef(null);
const [{
toggle,
shouldScroll = false
}, setToggle] = useState({
toggle: selected || opened
});
const toggleCategory = () => {
setToggle({
toggle: !toggle,
shouldScroll: true
});
};
const levelClass = `level-${level}`; // If a category is selected indirectly, open it. This can happen when using the search input
useEffect(() => {
if (selected) {
setToggle({
toggle: true
});
}
}, [selected]); // Navigate to the start of the category when manually opened
useEffect(() => {
if (toggle && shouldScroll && ref.current != null) {
const content = document.querySelector(isMobile ? '.docs-dropdown' : '.sidebar-content');
if (content) {
// 10 is added for better margin
const height = ref.current.offsetTop - (isMobile ? 10 : content.offsetTop);
content.scrollTop = height;
setToggle({
toggle
});
}
}
}, [toggle, shouldScroll, isMobile]);
return <div ref={ref} className={cn('category', levelClass, {
open: toggle,
selected
})}>
<a className="label" onClick={toggleCategory}>
{title}
<FiChevronDown className="text-gray-600" />
</a>
<div className="posts">{children}</div>
<style jsx>{`
.category {
margin: 12px 0;
}
.category:first-child {
margin-top: 0;
}
.category:last-child {
margin-bottom: 0;
}
.label {
font-size: 1rem;
line-height: 1.5rem;
font-weight: 400;
cursor: pointer;
display: flex;
align-items: center;
justify-content: space-between;
color: #4b5563;
}
.label > :global(svg) {
margin-right: 16px;
transform-origin: center;
transition: transform 0.15s ease;
}
.selected > .label {
font-weight: 600;
color: #161e2e;
}
.open > .label {
color: #161e2e;
}
.open > .label > :global(svg) {
margin-left: 1px;
transform-origin: center;
transform: rotate(180deg);
}
.level-2 .label {
text-transform: none;
letter-spacing: 0;
}
.label:hover {
color: #1a202c;
}
.separated {
margin-bottom: 32px;
}
.posts {
border-left: 1px solid #e5e7eb;
margin-top: 0;
height: 0;
overflow: hidden;
padding-left: 19px;
margin-left: 3px;
}
.open > .posts {
margin-top: 12px;
height: auto;
}
@media screen and (max-width: 950px) {
.category {
margin: 24px 0;
}
}
`}</style>
</div>;
}
================================================
FILE: docs/src/components/SidebarHeading.js
================================================
import * as React from 'react';
export const SidebarHeading = ({
title,
children
}) => {
return (// <div>
// <h4 className="font-semibold uppercase text-sm my-4">{title}</h4>
// <div>{children}</div>
// </div>
<div className="heading">
<h4>{title}</h4>
<div>{children}</div>
<style jsx>{`
h4 {
margin: 1.25rem 0;
font-size: 1.2rem;
font-weight: 600;
}
`}</style>
</div>
);
};
SidebarHeading.displayName = 'SidebarHeading';
================================================
FILE: docs/src/components/SidebarMobile.js
================================================
import * as React from 'react';
import { disableBodyScroll, enableBodyScroll, clearAllBodyScrollLocks } from 'body-scroll-lock';
import cn from 'classnames';
import { Container } from './Container';
import { FiChevronRight as ArrowRightSidebar } from 'react-icons/fi';
import { Search } from './Search';
import { useRouter } from 'next/router';
export function SidebarMobile({
children
}) {
const [opened, setOpen] = React.useState(false);
const menuRef = React.useRef(null);
const searchRef = React.useRef(null);
const router = useRouter();
const openMenu = () => {
if (menuRef.current != null) {
disableBodyScroll(menuRef.current);
setOpen(true);
}
};
const closeMenu = () => {
if (menuRef.current != null) {
enableBodyScroll(menuRef.current);
setOpen(false);
}
};
const toggleOpen = () => {
if (opened) {
closeMenu();
} else {
openMenu();
}
};
const onRouteChange = () => {
closeMenu();
};
React.useEffect(() => {
onRouteChange();
return () => {
clearAllBodyScrollLocks();
};
}, [router.asPath]);
return <div className="lg:hidden">
<Container>
<div className="sidebar-search py-2 z-10">
<Search />
</div>
<label htmlFor="dropdown-input" className={cn('w-full', {
opened
})}>
<input id="dropdown-input" className="hidden" type="checkbox" checked={opened} onChange={toggleOpen} />
<div className="docs-select flex w-full items-center">
<ArrowRightSidebar className="text-gray-600 -ml-1" />
Menu
</div>
</label>
<div className="docs-dropdown shadow-xl" ref={menuRef}>
<Container>
<nav>{children}</nav>
</Container>
</div>
<style jsx>{`
.docs-select {
display: flex;
height: 2.5rem;
width: 100%;
line-height: 3rem;
align-items: center;
text-align: left;
cursor: pointer;
}
.docs-dropdown {
position: absolute;
left: 0;
right: 0;
top: 100%;
bottom: 100%;
background: white;
overflow-y: auto;
-webkit-overflow-scrolling: touch;
}
.docs-dropdown nav {
padding: 10px 0;
}
.opened ~ .docs-dropdown {
min-height: 80px;
bottom: calc(153px - 90vh);
border-top: 1px solid #eaeaea;
}
.docs-select :global(svg) {
margin-left: 1px;
margin-right: 14px;
transition: transform 0.15s ease;
}
.opened > .docs-select :global(svg) {
transform: rotate(90deg);
}
@media screen and (max-width: 640px) {
.opened ~ .docs-dropdown {
bottom: calc(203px - 90vh);
}
}
`}</style>
</Container>
</div>;
}
================================================
FILE: docs/src/components/SidebarNavLink.js
================================================
import * as React from 'react'
import Link from 'next/link'
import { useRouter } from 'next/router'
import cn from 'classnames'
export function SidebarNavLink({
route: { href, pathname, title, selected },
onClick,
}) {
const router = useRouter()
const onlyHashChange = pathname === router.pathname
return (
<div
className={cn('nav-link', {
selected,
})}
>
{
// NOTE: use just anchor element for triggering `hashchange` event
onlyHashChange ? (
<a className={selected ? 'selected' : ''} href={pathname}>
{title}
</a>
) : (
<Link href={href} as={pathname}>
<a>{title}</a>
</Link>
)
}
<style jsx>{`
div.selected {
box-sizing: border-box;
}
.nav-link {
display: flex;
width: 100%;
}
.nav-link :global(a) {
text-decoration: none;
font-size: 1rem;
line-height: 1.5rem;
color: #4b5563;
width: 100%;
box-sizing: border-box;
}
.selected :global(a) {
font-weight: 600;
color: #161e2e;
}
.nav-link:hover :global(a) {
color: #161e2e;
}
span {
color: #a0aec0;
}
@media screen and (max-width: 950px) {
div {
padding-top: 0;
padding-left: 0;
padding-bottom: 0;
}
div.selected {
border-left: none;
padding-left: 0;
}
.nav-link :global(a) {
display: flex;
align-items: center;
}
}
`}</style>
</div>
)
}
SidebarNavLink.displayName = 'SidebarNavLink'
================================================
FILE: docs/src/components/SidebarPost.js
================================================
import * as React from 'react';
import { SidebarNavLink } from './SidebarNavLink';
import cn from 'classnames';
export const SidebarPost = ({
isMobile,
route,
level = 1,
onClick,
...props
}) => {
const selectedRef = React.useRef(null);
const ref = route.selected ? selectedRef : null;
React.useEffect(() => {
if (ref && ref.current && !isMobile) {
const content = document.querySelector('.sidebar-content'); // 32 is the top and bottom margin for `.link`
const height = ref.current.offsetTop - 32;
if (content) {
content.scrollTop = height - content.offsetHeight / 2;
}
}
}, [ref, isMobile]);
return <div ref={ref} className={cn('link', `level-${level}`)}>
<SidebarNavLink route={route} scrollSelectedIntoView={props.scrollSelectedIntoView} categorySelected={props.categorySelected} level={level} onClick={onClick} />
<style jsx>{`
.link {
margin: 12px 0;
display: flex;
align-items: center;
}
.link:first-child {
margin-top: 0;
}
.link:last-child {
margin-bottom: 0;
}
@media screen and (max-width: 950px) {
.link {
margin: 24px 0;
}
}
`}</style>
</div>;
};
================================================
FILE: docs/src/components/Sticky.js
================================================
import * as React from 'react';
import cn from 'classnames';
export const Sticky = ({
offset,
children,
shadow
}) => {
return <div style={{
top: offset || 0
}} className={cn({
shadow
}, 'z-10')}>
{children}
<style jsx>{`
div {
background: #fff;
position: sticky;
}
div.shadow {
box-shadow: rgba(0, 0, 0, 0.06) 0px 6px 20px;
}
`}</style>
</div>;
};
Sticky.displayName = 'Sticky';
================================================
FILE: docs/src/components/TWButton.js
================================================
import * as React from 'react';
import { forwardRefWithAs } from './forwardRefWithAs';
import cx from 'classnames';
const mapIntentToColor = {
primary: 'blue',
success: 'green',
danger: 'red',
warning: 'yellow'
};
export const TWButton = forwardRefWithAs(({
as: is = 'button',
children,
color,
intent = 'none',
size = 'md',
className,
icon,
minimal,
onClick,
iconRight,
...props
}, ref) => {
const tailwindColor = mapIntentToColor[intent] ?? color;
const iconIsOnlyChild = !!(icon && !iconRight && !children || iconRight && !icon && !children);
let sizeClasses;
let iconClasses;
if (size === 'xs') {
sizeClasses = 'text-xs rounded-md leading-4';
sizeClasses += iconIsOnlyChild ? ' p-1.5' : ' py-1.5 px-2.5';
iconClasses = 'h-3 w-3';
}
if (size === 'sm') {
sizeClasses = 'text-sm rounded-md leading-4';
sizeClasses += iconIsOnlyChild ? ' p-2' : ' py-2 px-3';
iconClasses = 'h-3 w-3';
}
if (size === 'md') {
sizeClasses = 'text-sm rounded-md leading-5';
sizeClasses += iconIsOnlyChild ? ' p-2' : ' py-2 px-4';
iconClasses = 'h-5 w-5';
}
if (size === 'lg') {
sizeClasses = 'text-base rounded-md leading-6';
sizeClasses += iconIsOnlyChild ? ' p-2' : ' py-2 px-4';
iconClasses = 'h-6 w-6';
}
if (size === 'xl') {
sizeClasses = 'text-base rounded-md leading-6';
sizeClasses += iconIsOnlyChild ? ' p-3' : ' py-3 px-6';
iconClasses = 'h-6 w-6';
}
const leftIcon = icon ? React.cloneElement(icon, { ...icon.props,
height: '1em',
width: '1em',
className: cx('block', {
'text-white': !!tailwindColor && !minimal,
[`text-${tailwindColor}-700`]: !!tailwindColor && !!minimal,
'text-gray-600': !tailwindColor,
'-ml-1 mr-2': !iconIsOnlyChild
}, iconClasses, icon?.props.className)
}) : null;
const rightIcon = iconRight ? React.cloneElement(iconRight, { ...iconRight.props,
height: '1em',
width: '1em',
className: cx('block ', {
'text-white': !!tailwindColor && !minimal,
[`text-${tailwindColor}-700`]: !!tailwindColor && !!minimal,
'text-gray-600': !tailwindColor,
'-mr-1 ml-2': !iconIsOnlyChild
}, iconClasses, iconRight?.props.className)
}) : null;
const propsToPass = { ...props,
className: cx('font-medium inline-flex items-center justify-center focus:outline-none transition duration-150 ease-in-out', {
[`shadow-xs border border-transparent text-white bg-${tailwindColor}-600 hover:bg-${tailwindColor}-500 focus:border-${tailwindColor}-700 focus:shadow-outline-${tailwindColor} active:border-${tailwindColor}-700`]: !!tailwindColor && !minimal,
[`shadow-xs border border-gray-300 text-gray-700 bg-white hover:text-gray-500 focus:shadow-outline-blue focus:border-blue-300 active:text-gray-800 active:bg-gray-50`]: !tailwindColor && !minimal,
[`hover:bg-${tailwindColor}-100 active:bg-${tailwindColor}-200 text-${tailwindColor}-700 focus:shadow-outline-${tailwindColor} border-transparent`]: minimal && tailwindColor,
[`hover:bg-gray-200 active:bg-gray-300 text-gray-900 focus:shadow-outline-blue border-transparent`]: minimal && !tailwindColor
}, sizeClasses, className),
children: <>
{leftIcon}
{children}
{rightIcon}
</>
};
return React.createElement(is, { ...propsToPass,
ref,
onClick,
className: propsToPass.className
});
});
TWButton.displayName = 'TWButton';
================================================
FILE: docs/src/components/Toc.js
================================================
import * as React from 'react'
import cx from 'classnames'
import { useTocHighlight } from './useTocHighlight'
import styles from './Toc.module.css'
const TOP_OFFSET = 100
function getHeaderAnchors() {
return Array.prototype.filter.call(
document.getElementsByClassName('anchor'),
function (testElement) {
return (
testElement.parentNode.nodeName === 'H2' ||
testElement.parentNode.nodeName === 'H3'
)
}
)
}
function getHeaderDataFromAnchors(el) {
return {
url: el.getAttribute('href'),
text: el.parentElement?.innerText,
depth: Number(el.parentElement?.nodeName.replace('H', '')),
}
}
export const Toc = () => {
const headings = useTocHighlight(
styles.contents__link,
styles['contents__link--active'],
TOP_OFFSET,
getHeaderAnchors,
getHeaderDataFromAnchors,
el => el?.parentElement?.id
)
return (
<ul className="space-y-3">
{headings &&
headings.length > 0 &&
headings.map((h, i) =>
h.url ? (
<li
key={`heading-${h.url}-${i}`}
className={cx('text-sm ', {
'pl-2': h?.depth === 3,
hidden: h.depth && h.depth > 3,
})}
>
<a className={styles.contents__link} href={h.url}>
{h.text}
</a>
</li>
) : null
)}
</ul>
)
}
================================================
FILE: docs/src/components/Toc.module.css
================================================
/* purgecss start ignore */
.contents__link {
@apply text-gray-700;
}
.contents__link:hover {
@apply text-blue-600;
}
.contents__link--active {
@apply font-medium text-coral;
}
/* purgecss end ignore */
================================================
FILE: docs/src/components/TocNotion.js
================================================
import * as React from 'react';
import cx from 'classnames';
import { useTocHighlight } from './useTocHighlight';
import styles from './Toc.module.css';
import { NOTION_ANCHOR_CLASSNAME } from './blog/Heading';
const TOP_OFFSET = 100;
const getHeadingDataFromAnchor = el => {
return {
text: el.getAttribute('data-heading-text'),
depth: Number(el.getAttribute('data-heading-depth')),
url: el.getAttribute('href')
};
};
export function getHeaderNotionAnchors() {
/**
* .filter() does not exist on HTMLCollectionOf<Element>
* (the return type of document.getElementByClassName()),
* so we use this as a workaround.
*/
return Array.prototype.filter.call(document.getElementsByClassName(NOTION_ANCHOR_CLASSNAME), function (testElement) {
return testElement.firstElementChild?.nodeName === 'H2' || testElement.firstElementChild?.nodeName === 'H3';
});
}
export const TocNotion = () => {
const headings = useTocHighlight(styles.contents__link, styles['contents__link--active'], TOP_OFFSET, getHeaderNotionAnchors, getHeadingDataFromAnchor, el => el?.id);
return <>
<h4 className="text-gray-700 font-semibold mb-3">Table of Contents</h4>
<ul className="space-y-3">
{headings && headings.length > 0 && headings.map((h, i) => h.url ? <li key={`heading-${h.url}-${i}`} className={cx('text-base ', {
['pl-2']: h?.depth === 3,
['hidden']: h.depth && h.depth > 3
})}>
<a className={styles.contents__link} href={h.url}>
{h.text}
</a>
</li> : null)}
</ul>
</>;
};
================================================
FILE: docs/src/components/blog/ExternalLink.js
================================================
import * as React from 'react';
export default function ExternalLink(props) {
return <a {...props} rel="noopener" target={props.target || '_blank'} />;
}
================================================
FILE: docs/src/components/blog/Heading.js
================================================
import * as React from 'react';
const collectText = (el, acc = []) => {
if (el) {
if (typeof el === 'string') acc.push(el);
if (Array.isArray(el)) el.map(item => collectText(item, acc));
if (typeof el === 'object') collectText(el.props && el.props.children, acc);
}
return acc.join('').trim();
}; // Structure is in Heading
export const getTocDataFromHeading = el => {
return {
text: el.parentElement?.getAttribute('[data-text]'),
url: el.parentElement?.getAttribute('href')
};
};
export const NOTION_ANCHOR_CLASSNAME = 'notion-anchor';
export default (({
children: component,
id
}) => {
const children = component.props.children || '';
let text = children;
if (null == id) {
id = collectText(text).toLowerCase().replace(/\s/g, '-').replace(/[?!:]/g, '');
}
return <a href={`#${id}`} id={id} className={NOTION_ANCHOR_CLASSNAME} style={{
color: 'inherit'
}} data-heading-text={collectText(text)} data-heading-depth={component.type.replace('h', '')}>
{component}
</a>;
});
================================================
FILE: docs/src/components/blog/Image.js
================================================
import React, { Component } from 'react';
import IObserver from './intersection-observer';
import cn from 'classnames';
// import VideoComponent from '../styleguide/video';
// This component might look a little complex
// because one could argue that keeping the aspect ratio
// of an image can be solved with `height: auto`,
// but it's actually not that easy if you want to prevent
// element flickering
// Because if you want to do that, you need to set the aspect
// ratio of the image's container BEFORE the image loads
class Image extends Component {
constructor(props) {
super(props);
}
static defaultProps = {
lazy: true,
};
state = {
src: !this.props.lazy ? this.props.videoSrc || this.props.src : undefined,
};
handleIntersect = (entry) => {
if (entry.isIntersecting) {
this.setState({ src: this.props.src });
}
};
onLoad = () => {
this.setState({
loaded: true,
});
};
render() {
const {
caption,
height: origHeight,
lazy,
margin = 40,
video = false,
videoSrc,
width: origWidth,
captionSpacing = null,
oversize = true,
borderRadius = false,
alt,
imageProps,
className,
children,
...props
} = this.props;
const height = parseInt(origHeight);
const width = parseInt(origWidth);
const aspectRatio = String((height / width) * 100) + '%';
// if (video || videoSrc) {
// return <VideoComponent src={videoSrc} {...this.props} />;
// }
let src = this.state.src;
// if (src && src.indexOf('assets.zeit.co') > -1) {
// if (src.indexOf('/q_auto') === -1) {
// src = src.replace('upload/', 'upload/q_auto/');
// }
// }
return (
<IObserver
once
onIntersect={this.handleIntersect}
rootMargin="20%"
disabled={!lazy}
>
<figure
className={cn(className, {
oversize: width > 650 && oversize,
fadeIn: this.state.loaded,
})}
{...props}
>
<main style={{ width }}>
<div className="container" style={{ paddingBottom: aspectRatio }}>
{src ? (
<img
decoding="async"
loading="lazy"
src={src || null}
onLoad={this.onLoad}
alt={alt}
{...imageProps}
/>
) : (
children
)}
</div>
{caption && (
<p style={captionSpacing ? { marginTop: captionSpacing } : {}}>
{caption}
</p>
)}
</main>
<style jsx>{`
figure {
display: block;
text-align: center;
margin: ${margin}px 0;
}
figure.fadeIn {
animation: fade-in 0.2s cubic-bezier(0.455, 0.03, 0.515, 0.955)
forwards;
}
figure.fadeIn img {
display: block;
}
@keyframes fade-in {
from {
/* Don't begin with 0, it gives a feeling of flickering. */
opacity: 0.3;
}
to {
opacity: 1;
}
}
main {
margin: 0 auto;
max-width: 100%;
}
div {
position: relative;
}
img {
display: none;
height: 100%;
left: 0;
position: absolute;
top: 0;
width: 100%;
${borderRadius ? `border-radius: var(--geist-radius);` : ''};
}
.container {
display: flex;
justify-content: center;
}
p {
color: var(--accents-5);
font-size: 14px;
margin: 10px 0 0 0;
text-align: center;
}
@media (min-width: 992px) {
figure.oversize {
width: ${width}px;
margin: ${margin}px 0 ${margin}px
calc(((${width}px - 768px) / 2) * -1);
}
p {
margin: 0;
}
}
`}</style>
</figure>
</IObserver>
);
}
}
// export const Video = (props) => <Image {...props} video />;
export default Image;
================================================
FILE: docs/src/components/blog/dynamic.js
================================================
import dynamic from 'next/dynamic';
import ExtLink from './ExternalLink';
export default {
// default tags
ol: 'ol',
ul: 'ul',
li: 'li',
p: 'p',
blockquote: 'blockquote',
a: ExtLink,
Image: dynamic(() => import('./Image')),
Code: dynamic(() => import('../Highlight')) // Counter: dynamic(() => import('./counter')),
};
================================================
FILE: docs/src/components/blog/intersection-observer/index.js
================================================
export { default } from './intersection-observer'
================================================
FILE: docs/src/components/blog/intersection-observer/intersection-observer.js
================================================
// Packages
import { Component, cloneElement, Children } from 'react';
import { findDOMNode } from 'react-dom';
import PropTypes from 'prop-types';
// Private Observer Manager functions and manager
import { getObserver, observeTarget, unobserveTarget } from './manager';
import { hasEqualOptions, isDOMNode } from './utils';
export default class Observer extends Component {
static propTypes = {
disabled: PropTypes.bool,
once: PropTypes.bool,
onIntersect: PropTypes.func.isRequired,
render: PropTypes.func,
root: PropTypes.element,
rootMargin: PropTypes.string,
threshold: PropTypes.oneOfType([
PropTypes.arrayOf(PropTypes.number),
PropTypes.number,
]),
value: PropTypes.string,
};
static defaultProps = {
disabled: false,
once: false,
};
shouldReobserve = false;
componentDidMount() {
this.observer = getObserver(getOptions(this.props));
this.observe();
}
componentDidUpdate(prevProps) {
const nextOptions = getOptions(this.props);
if (!hasEqualOptions(this.observer, nextOptions)) {
this.unobserve();
this.observer = getObserver(nextOptions);
this.shouldReobserve = true;
}
if (prevProps.disabled && !this.props.disabled) {
this.shouldReobserve = true;
}
if (!prevProps.disabled && this.props.disabled) {
this.unobserve();
}
if (this.shouldReobserve) {
this.observe();
this.shouldReobserve = false;
}
}
componentWillUnmount() {
this.unobserve();
}
handleTarget = (node) => {
// eslint-disable-next-line
const element = isDOMNode(node) ? node : findDOMNode(node);
if (this.target && this.target !== element) {
this.unobserve();
this.shouldReobserve = true;
}
this.target = element;
};
observe() {
if (!this.props.disabled && this.target) {
observeTarget(this.observer, this.target, this.handleIntersect);
}
}
unobserve() {
if (this.target) {
unobserveTarget(this.observer, this.target);
}
}
handleIntersect = (entry) => {
this.props.onIntersect(entry, this.props.value);
if (this.props.once && entry.isIntersecting) {
this.unobserve();
}
};
render() {
return this.props.render
? this.props.render({ innerRef: this.handleTarget })
: cloneElement(Children.only(this.props.children), {
ref: this.handleTarget,
});
}
}
const getOptions = (props) => ({
root: props.root,
rootMargin: props.rootMargin,
threshold: props.threshold,
});
================================================
FILE: docs/src/components/blog/intersection-observer/manager.js
================================================
import { hasEqualOptions, parseOptions } from './utils'
if (typeof window !== 'undefined') {
require('intersection-observer')
}
const manager = (function makeManager() {
const observers = new Map()
function getObserver(options) {
return (
findObserver(options) ||
new IntersectionObserver(intersectionCallback, options)
)
}
function findObserver(options = {}) {
const parsedOptions = parseOptions(options)
for (const observer of observers.keys()) {
if (hasEqualOptions(observer, parsedOptions)) {
return observer
}
}
return null
}
function getObserverTargets(observer) {
return !observers.has(observer)
? observers.set(observer, new Map()).get(observer)
: observers.get(observer)
}
function observeTarget(observer, target, handler) {
const targets = getObserverTargets(observer)
targets.set(target, handler)
observer.observe(target)
}
function unobserveTarget(observer, target) {
const handlers = getObserverTargets(observer)
handlers.delete(target)
observer.unobserve(target)
}
function intersectionCallback(entries, observer) {
for (let entry of entries) {
const handlers = getObserverTargets(observer)
const handler = handlers.get(entry.target)
if (handler) {
handler(entry)
}
}
}
return {
getObserver,
observeTarget,
unobserveTarget
}
})()
export default manager
export const { getObserver } = manager
export const { observeTarget } = manager
export const { unobserveTarget } = manager
================================================
FILE: docs/src/components/blog/intersection-observer/utils.js
================================================
export function isDOMNode(node) {
return (
node && Object.prototype.hasOwnProperty.call(node, 'getBoundingClientRect')
)
}
export function parseOptions(options = {}) {
return {
root: options.root || null,
rootMargin: parseRootMargin(options.rootMargin),
threshold: parseThreshold(options.threshold)
}
}
export function hasEqualOptions(observer, options) {
return (
equalPair(options.root, observer.root) &&
equalPair(options.rootMargin, observer.rootMargin) &&
equalPair(options.threshold, observer.thresholds)
)
}
function parseRootMargin(rootMargin) {
const margins = (rootMargin || '0px').trim().split(/\s+/)
margins.forEach(validateRootMargin)
margins[1] = margins[1] || margins[0]
margins[2] = margins[2] || margins[0]
margins[3] = margins[3] || margins[1]
return margins.join(' ')
}
function validateRootMargin(margin) {
if (!/^-?\d*\.?\d+(px|%)$/.test(margin)) {
throw new Error('rootMargin must be specified as a CSS margin property')
}
}
function parseThreshold(threshold) {
return !Array.isArray(threshold)
? [typeof threshold !== 'undefined' ? threshold : 0]
: threshold
}
function equalPair(optionA, optionB) {
if (Array.isArray(optionA) && Array.isArray(optionB)) {
if (optionA.length === optionB.length) {
return optionA.every((element, idx) =>
equalPair(optionA[idx], optionB[idx])
)
}
}
return optionA === optionB
}
================================================
FILE: docs/src/components/blog-markdown.module.css
================================================
/* purgecss start ignore */
.markdown {
@apply leading-relaxed text-gray-800 text-base;
}
/*
Add fake margin to offset the nav. This technique is stolen right from the Tailwind docs
@see https://tailwindcss.com/docs/customizing-colors/#app
*/
.markdown > h1:before,
.markdown > a > h1:before,
.markdown > h2:before,
.markdown > a > h2:before,
.markdown > h3:before,
.markdown > a > h3:before,
.markdown > h4:before,
.markdown > a > h4:before,
.markdown > h5:before,
.markdown > a > h5:before,
.markdown > h6:before,
.markdown > a > h6:before {
display: block;
height: 6rem;
margin-top: -6rem;
visibility: hidden;
content: '';
}
.markdown > h1,
.markdown > a > h1 {
@apply mb-6 text-3xl lg:text-4xl font-semibold leading-snug tracking-tighter text-gray-900;
}
.markdown > h2,
.markdown > a > h2 {
@apply mt-12 mb-4 text-2xl font-semibold text-gray-900;
}
.markdown > h2 code,
.markdown > a > h2 code {
@apply text-xl;
}
.markdown > h3,
.markdown > a > h3 {
@apply mt-8 mb-3 text-xl font-semibold text-gray-900;
}
.markdown > h3 code,
.markdown > a > h3 code {
@apply text-lg;
}
.markdown > h4,
.markdown > a > h4 {
@apply pt-8 mb-3 text-lg font-semibold text-gray-900;
}
.markdown > h4 code,
.markdown > a > h4 code {
@apply text-base;
}
.markdown > p > a,
.markdown > ul > li > a,
.markdown > ol > li > a,
.markdown > table > tbody > tr > td > a {
@apply text-blue-600 font-semibold transition-colors duration-150 ease-out;
}
.markdown > p > a:hover,
.markdown > ul > li > a:hover,
.markdown > ol > li > a:hover,
.markdown > table > tbody > tr > td > a:hover {
@apply text-blue-800 transition-colors duration-150 ease-out;
}
.markdown strong {
@apply font-bold;
}
.markdown > p,
.markdown > ul,
.markdown > ol,
.markdown > blockquote,
.markdown > pre,
.markdown > div > .code-block {
@apply mb-4;
}
.markdown > ul,
.markdown > ul > li > ul {
@apply ml-8 list-disc;
}
.markdown > ol {
@apply ml-8 list-decimal;
}
.markdown > pre,
.markdown > div > .code-block > pre {
color: #f8f8f2;
overflow: auto;
}
.markdown > table {
@apply mb-6 w-full text-gray-700 text-sm;
}
.markdown > table > thead > tr {
@apply border-b border-t;
}
.markdown > table > thead > tr > th {
@apply px-3 py-2 text-left text-sm font-bold bg-gray-100 text-gray-700;
}
.markdown > table > tbody > tr {
@apply border-b;
}
.markdown > table > tbody > tr > td {
@apply p-3;
}
.markdown > :not(pre):not(h3) > code,
.markdown > ul > li > code,
.markdown > blockquote > code,
.markdown > blockquote > p > code,
.markdown > ul > li > ul > li > code,
.markdown > ol > li > code,
.markdown > ol > li > ol > li > code,
.markdown > p a > code,
.markdown > table > tbody > tr > td:not(:first-child) > code {
@apply bg-gray-100 rounded-md px-1 border border-gray-300 text-gray-900;
margin-left: 2px;
margin-right: 2px;
padding-top: 2px;
padding-bottom: 2px;
word-break: keep-all;
font-size: 0.875em;
}
.markdown > table > tbody > tr > td:not(:first-child) > code {
@apply text-xs;
}
.markdown > table > tbody > tr > td > a > code,
.markdown > table > tbody > tr > td > code {
@apply text-sm;
}
.markdown > h2 > code {
@apply text-xl;
}
.markdown > .markdown ul {
@apply list-disc;
}
.markdown > hr {
@apply my-6 block border-b;
}
.markdown pre {
@apply p-3 rounded-lg mb-6 overflow-y-scroll text-sm bg-gray-100;
background: #292d3e;
}
/* Blockquotes */
.markdown blockquote {
@apply p-3 bg-gray-100 mb-6 border border-gray-300 border-l-4 rounded-sm text-sm leading-5;
}
.markdown blockquote > p {
@apply mb-0;
}
/* purgecss end ignore */
================================================
FILE: docs/src/components/clients/Client.js
================================================
import React from 'react'
import { LazyImage } from '../LazyImage'
export const Client = React.memo(({ name, image, style, ...rest }) => (
<span title={name} {...rest}>
<LazyImage
src={image}
alt={name}
width={150}
style={style}
className="inline"
/>
</span>
))
================================================
FILE: docs/src/components/clients/ClientsMarquee.js
================================================
import React from 'react'
import { users } from 'users'
// const pinnedLogos = users.filter(p => p.pinned)
export const ClientsMarquee = React.memo(props => {
return (
<div className="overflow-x-hidden">
<div className="relative translate-x-1/2" {...props}>
<div className="wrapper inline-block">
{[...users, ...users, ...users].map((user, i) => (
<span
key={user + i}
className={`text-gray-300 inline-block text-2xl font-black m-1 ${i %
2 && 'text-gray-400'}`}
>
{user}
</span>
))}
</div>
<style jsx global>{`
@keyframes slidein {
from {
transform: translate3d(0, 0, 0);
}
to {
transform: translate3d(-50%, 0, 0);
}
}
.wrapper {
position: relative;
white-space: nowrap;
display: inline-block;
animation: slidein 100s linear infinite;
}
`}</style>
</div>
</div>
)
})
ClientsMarquee.displayName = 'ClientsMarquee'
================================================
FILE: docs/src/components/clients/Filters.js
================================================
import React from 'react'
export const Filters = () => (
<>
<svg width={0} height={0}>
<defs>
<filter id="high-threshold">
<feColorMatrix type="saturate" values="0" />
<feComponentTransfer>
<feFuncR type="discrete" tableValues="0" />
<feFuncG type="discrete" tableValues="0" />
<feFuncB type="discrete" tableValues="0" />
</feComponentTransfer>
</filter>
</defs>
</svg>
<svg width={0} height={0}>
<defs>
<filter id="medium-threshold">
<feColorMatrix type="saturate" values="0" />
<feComponentTransfer>
<feFuncR type="discrete" tableValues="0 1" />
<feFuncG type="discrete" tableValues="0 1" />
<feFuncB type="discrete" tableValues="0 1" />
</feComponentTransfer>
</filter>
</defs>
</svg>
<svg width={0} height={0}>
<defs>
<filter id="low-threshold">
<feColorMatrix type="saturate" values="0" />
<feComponentTransfer>
<feFuncR type="discrete" tableValues="0 0 0 0 1" />
<feFuncG type="discrete" tableValues="0 0 0 0 1" />
<feFuncB type="discrete" tableValues="0 0 0 0 1" />
</feComponentTransfer>
</filter>
</defs>
</svg>
</>
)
================================================
FILE: docs/src/components/forwardRefWithAs.js
================================================
import * as React from 'react';
/**
* React.Ref uses the readonly type `React.RefObject` instead of
* `React.MutableRefObject`, We pretty much always assume ref objects are
* mutable (at least when we create them), so this type is a workaround so some
* of the weird mechanics of using refs with TS.
*/
/**
* This is a hack for sure. The thing is, getting a component to intelligently
* infer props based on a component or JSX string passed into an `as` prop is
* kind of a huge pain. Getting it to work and satisfy the constraints of
* `forwardRef` seems dang near impossible. To avoid needing to do this awkward
* type song-and-dance every time we want to forward a ref into a component
* that accepts an `as` prop, we abstract all of that mess to this function for
* the time time being.
*
* TODO: Eventually we should probably just try to get the type defs above
* working across the board, but ain't nobody got time for that mess!
*
* @param Comp
*/
export function forwardRefWithAs(comp) {
return React.forwardRef(comp);
}
/*
Test components to make sure our dynamic As prop components work as intended
type PopupProps = {
lol: string;
children?: React.ReactNode | ((value?: number) => JSX.Element);
};
export const Popup = forwardRefWithAs<PopupProps, 'input'>(
({ as: Comp = 'input', lol, className, children, ...props }, ref) => {
return (
<Comp ref={ref} {...props}>
{typeof children === 'function' ? children(56) : children}
</Comp>
);
}
);
export const TryMe1: React.FC = () => {
return <Popup as="input" lol="lol" name="me" />;
};
export const TryMe2: React.FC = () => {
let ref = React.useRef(null);
return <Popup ref={ref} as="div" lol="lol" />;
};
export const TryMe4: React.FC = () => {
return <Popup as={Whoa} lol="lol" test="123" name="boop" />;
};
export const Whoa: React.FC<{
help?: boolean;
lol: string;
name: string;
test: string;
}> = props => {
return <input {...props} />;
};
*/
// export const TryMe3: React.FC = () => {
// return <Popup as={Cool} lol="lol" name="me" test="123" />;
// };
// let Cool = styled(Whoa)`
// padding: 10px;
// `
================================================
FILE: docs/src/components/markdown.module.css
================================================
/* purgecss start ignore */
.markdown {
@apply leading-relaxed text-gray-800 text-base;
}
/*
Add fake margin to offset the nav. This technique is stolen right from the Tailwind docs
@see https://tailwindcss.com/docs/customizing-colors/#app
*/
.markdown > h1:before,
.markdown > a > h1:before,
.markdown > h2:before,
.markdown > a > h2:before,
.markdown > h3:before,
.markdown > a > h3:before,
.markdown > h4:before,
.markdown > a > h4:before,
.markdown > h5:before,
.markdown > a > h5:before,
.markdown > h6:before,
.markdown > a > h6:before {
display: block;
height: 6rem;
margin-top: -6rem;
visibility: hidden;
content: '';
}
.markdown > h1,
.markdown > a > h1 {
@apply mb-6 text-4xl font-semibold leading-snug tracking-tighter text-gray-900;
}
.markdown > h2,
.markdown > a > h2 {
@apply mt-12 mb-4 text-2xl font-semibold text-gray-900;
}
.markdown > h2 code,
.markdown > a > h2 code {
@apply text-xl;
}
.markdown > h3,
.markdown > a > h3 {
@apply mt-8 mb-3 text-xl font-semibold text-gray-900;
}
.markdown > h3 code,
.markdown > a > h3 code {
@apply text-lg;
}
.markdown > h4,
.markdown > a > h4 {
@apply pt-8 mb-3 text-lg font-semibold text-gray-900;
}
.markdown > h4 code,
.markdown > a > h4 code {
@apply text-base;
}
.markdown > p > a,
.markdown > ul > li > a,
.markdown > ol > li > a,
.markdown > table > tbody > tr > td > a {
@apply text-blue-600 font-semibold transition-colors duration-150 ease-out;
}
.markdown > p > a:hover,
.markdown > ul > li > a:hover,
.markdown > ol > li > a:hover,
.markdown > table > tbody > tr > td > a:hover {
@apply text-blue-800 transition-colors duration-150 ease-out;
}
.markdown strong {
@apply font-bold;
}
.markdown > p,
.markdown > ul,
.markdown > ol,
.markdown > blockquote,
.markdown > pre,
.markdown > div > .code-block {
@apply mb-4;
}
.markdown > ul,
.markdown > ul > li > ul {
@apply ml-8 list-disc;
}
.markdown > ol {
@apply ml-8 list-decimal;
}
.markdown > pre,
.markdown > div > .code-block > pre {
color: #f8f8f2;
overflow: auto;
}
.markdown > table {
@apply mb-6 w-full text-gray-700 text-sm;
}
.markdown > table > thead > tr {
@apply border-b border-t;
}
.markdown > table > thead > tr > th {
@apply px-3 py-2 text-left text-sm font-bold bg-gray-100 text-gray-700;
}
.markdown > table > tbody > tr {
@apply border-b;
}
.markdown > table > tbody > tr > td {
@apply p-3;
}
.markdown > :not(pre):not(h3) > code,
.markdown > ul > li > code,
.markdown > blockquote > code,
.markdown > blockquote > p > code,
.markdown > ul > li > ul > li > code,
.markdown > ol > li > code,
.markdown > ol > li > ol > li > code,
.markdown > p a > code,
.markdown > table > tbody > tr > td:not(:first-child) > code {
@apply bg-gray-100 rounded-md px-1 border border-gray-300 text-gray-900;
margin-left: 2px;
margin-right: 2px;
padding-top: 2px;
padding-bottom: 2px;
word-break: keep-all;
font-size: 0.875em;
}
.markdown > table > tbody > tr > td:not(:first-child) > code {
@apply text-xs;
}
.markdown > table > tbody > tr > td > a > code,
.markdown > table > tbody > tr > td > code {
@apply text-sm;
}
.markdown > h2 > code {
@apply text-xl;
}
.markdown > .markdown ul {
@apply list-disc;
}
.markdown > hr {
@apply my-6 block border-b;
}
/* Blockquotes */
.markdown blockquote {
@apply p-3 bg-gray-100 mb-6 border border-gray-300 border-l-4 rounded-sm text-sm leading-5;
}
.markdown blockquote > p {
@apply mb-0;
}
/* purgecss end ignore */
================================================
FILE: docs/src/components/useBytesSubmit.js
================================================
import { useState } from 'react';
function sendBytesOptIn({ email, influencer, source, referral }) {
return fetch(`https://bytes.dev/api/bytes-optin-cors`, {
method: 'POST',
body: JSON.stringify({ email, influencer, source, referral }),
headers: {
Accept: 'application/json',
'Content-Type': 'application/json',
},
}).then((res) => res.json())
}
export default function useBytesSubmit() {
const [state, setState] = useState("initial");
const [error, setError] = useState(null);
const handleSubmit = (e) => {
e.preventDefault();
const email = e.target.email_address.value;
setState("loading");
sendBytesOptIn({ email, influencer: "tanstack" })
.then(() => {
setState("submitted");
})
.catch((err) => {
setError(err);
});
};
return { handleSubmit, state, error };
}
================================================
FILE: docs/src/components/useClipboard.js
================================================
import * as React from 'react';
import copy from 'copy-to-clipboard';
/**
* React hook to copy content to clipboard
*
* @param text the text or value to copy
* @param timeout delay (in ms) to switch back to initial state once copied.
*/
export function useClipboard(text, timeout = 1500) {
const [hasCopied, setHasCopied] = React.useState(false);
const onCopy = React.useCallback(() => {
const didCopy = copy(text);
setHasCopied(didCopy);
}, [text]); // @ts-ignore
React.useEffect(() => {
if (hasCopied) {
const id = setTimeout(() => {
setHasCopied(false);
}, timeout);
return () => clearTimeout(id);
}
}, [timeout, hasCopied]);
return [hasCopied, onCopy];
}
================================================
FILE: docs/src/components/useIsMobile.js
================================================
import { useState, useCallback, useEffect } from 'react'
const useMediaQuery = width => {
const [targetReached, setTargetReached] = useState(false)
const updateTarget = useCallback(e => {
if (e.matches) {
setTargetReached(true)
} else {
setTargetReached(false)
}
}, [])
useEffect(() => {
const media = window.matchMedia(`(max-width: ${width}px)`)
media.addListener(updateTarget) // Check on mount (callback is not called until a change occurs)
if (media.matches) {
setTargetReached(true)
}
return () => media.removeListener(updateTarget)
}, [])
return targetReached
}
const useIsMobile = () => {
return useMediaQuery(1024)
}
export { useMediaQuery, useIsMobile }
================================================
FILE: docs/src/components/useOverScroll.js
================================================
import * as React from 'react';
import { useViewportScroll, useTransform } from 'framer-motion';
import { throttle } from './utils/throttle';
const throttleFn = cb => throttle(cb, 100);
export const useOverScroll = () => {
const {
scrollY
} = useViewportScroll();
const ref = React.useRef(null);
const refInner = React.useRef(null);
const [height, setHeight] = React.useState(typeof window !== 'undefined' ? window.innerHeight : 0);
const [rect, setRect] = React.useState({
top: 0,
left: 0,
right: 0,
bottom: 0,
x: 0,
y: 0
});
const [rectInner, setRectInner] = React.useState({
top: 0,
left: 0,
right: 0,
bottom: 0,
x: 0,
y: 0
});
const y = useTransform(scrollY, [rect.bottom - height, rect.top + 300], [0, -rectInner.height + rect.height]);
React.useEffect(() => {
if (ref.current) {
setRect(ref.current.getBoundingClientRect());
}
}, [setRect, ref]);
React.useEffect(() => {
if (refInner.current) {
setRectInner(refInner.current.getBoundingClientRect());
}
}, [setRectInner, refInner]);
return {
ref,
refInner,
y
};
};
================================================
FILE: docs/src/components/useSearch.js
================================================
import React from 'react'
import { createPortal } from 'react-dom'
import Router from 'next/router'
import Head from 'next/head'
import Link from 'next/link'
import { useDocSearchKeyboardEvents } from '@docsearch/react'
import { siteConfig } from 'siteConfig'
const SearchContext = React.createContext()
let DocSearchModal = null
export const useSearch = () => React.useContext(SearchContext)
export function SearchProvider({
children,
searchParameters = {
hitsPerPage: 5,
},
}) {
const [isShowing, setIsShowing] = React.useState(false)
const onOpen = React.useCallback(function onOpen() {
function importDocSearchModalIfNeeded() {
if (DocSearchModal) {
return Promise.resolve()
}
return import('@docsearch/react/modal').then(
({ DocSearchModal: Modal }) => (DocSearchModal = Modal)
)
}
importDocSearchModalIfNeeded().then(() => {
setIsShowing(true)
})
}, [])
const onClose = React.useCallback(() => setIsShowing(false), [])
useDocSearchKeyboardEvents({
isOpen: isShowing,
onOpen,
onClose,
})
const options = {
appId: siteConfig.algolia.appId,
apiKey: siteConfig.algolia.apiKey,
indexName: siteConfig.algolia.indexName,
renderModal: true,
}
return (
<>
<Head>
<link
key="algolia"
rel="preconnect"
href={`https://${options.appId}-dsn.algolia.net`}
crossOrigin="true"
/>
</Head>
<SearchContext.Provider value={{ DocSearchModal, onOpen }}>
{children}
</SearchContext.Provider>
{isShowing &&
createPortal(
<DocSearchModal
{...options}
searchParameters={searchParameters}
onClose={onClose}
navigator={{
navigate({ suggestionUrl }) {
Router.push(suggestionUrl)
},
}}
transformItems={items => {
return items.map(item => {
const url = new URL(item.url)
return {
...item,
url: item.url
.replace(url.origin, '')
.replace('#__next', '')
.replace('/docs/#', '/docs/overview#'),
}
})
}}
hitComponent={Hit}
/>,
document.body
)}
</>
)
}
function Hit({ hit, children }) {
return (
<Link href={hit.url.replace()}>
<a>{children}</a>
</Link>
)
}
================================================
FILE: docs/src/components/useTocHighlight.js
================================================
import React from 'react';
/**
* Sets up Table of Contents highlighting. It requires that
*/
export function useTocHighlight(linkClassName, linkActiveClassName, topOffset, getHeaderAnchors, getHeaderDataFromAnchor, getAnchorHeaderIdentifier) {
const [lastActiveLink, setLastActiveLink] = React.useState(undefined);
const [headings, setHeadings] = React.useState([]);
React.useEffect(() => {
setHeadings(getHeaderAnchors().map(getHeaderDataFromAnchor));
}, [setHeadings]);
React.useEffect(() => {
let headersAnchors = [];
let links = [];
function setActiveLink() {
function getActiveHeaderAnchor() {
let index = 0;
let activeHeaderAnchor = null;
headersAnchors = getHeaderAnchors();
while (index < headersAnchors.length && !activeHeaderAnchor) {
const headerAnchor = headersAnchors[index];
const {
top
} = headerAnchor.getBoundingClientRect();
if (top >= 0 && top <= topOffset) {
activeHeaderAnchor = headerAnchor;
}
index += 1;
}
return activeHeaderAnchor;
}
const activeHeaderAnchor = getActiveHeaderAnchor();
if (activeHeaderAnchor) {
let index = 0;
let itemHighlighted = false;
links = document.getElementsByClassName(linkClassName);
while (index < links.length && !itemHighlighted) {
const link = links[index];
const {
href
} = link;
const anchorValue = decodeURIComponent(href.substring(href.indexOf('#') + 1));
if (getAnchorHeaderIdentifier(activeHeaderAnchor) === anchorValue) {
if (lastActiveLink) {
lastActiveLink.classList.remove(linkActiveClassName);
}
link.classList.add(linkActiveClassName);
setLastActiveLink(link);
itemHighlighted = true;
}
index += 1;
}
}
}
document.addEventListener('scroll', setActiveLink);
document.addEventListener('resize', setActiveLink);
setActiveLink();
return () => {
document.removeEventListener('scroll', setActiveLink);
document.removeEventListener('resize', setActiveLink);
};
});
return headings;
}
================================================
FILE: docs/src/components/utils/throttle.js
================================================
export const throttle = (func, limit) => {
let inThrottle;
return function () {
const args = arguments; // @ts-ignore
const context = this;
if (!inThrottle) {
func.apply(context, args);
inThrottle = true;
setTimeout(() => inThrottle = false, limit);
}
};
};
================================================
FILE: docs/src/manifests/getManifest.js
================================================
import manifest from './manifest.json'
const versions = {}
export const versionList = Object.keys(versions)
export const getManifest = tag => {
return tag ? versions[tag] : manifest
}
================================================
FILE: docs/src/manifests/manifest.json
================================================
{
"routes": [
{
"title": "Documentation",
"heading": true,
"routes": [
{
"title": "Overview",
"path": "/docs/overview",
"editUrl": "/docs/overview.md"
},
{
"title": "Installation",
"path": "/docs/installation",
"editUrl": "/docs/installation.md"
},
{
"title": "Getting Started",
"path": "/docs/getting-started",
"editUrl": "/docs/getting-started.md"
},
{
"title": "API Reference",
"path": "/docs/api",
"editUrl": "/docs/api.md"
}
]
},
{
"title": "Examples",
"open": true,
"routes": [
{
"title": "Simple",
"path": "/examples/simple",
"editUrl": "/examples/simple.md"
}
]
}
]
}
================================================
FILE: docs/src/pages/_app.js
================================================
import React from 'react'
import '@docsearch/react/dist/style.css'
import '../styles/index.css'
import Head from 'next/head'
import { SearchProvider } from 'components/useSearch'
function loadScript(src, attrs = {}) {
if (typeof document !== 'undefined') {
const script = document.createElement('script')
script.async = true
script.defer = true
Object.keys(attrs).forEach(attr => script.setAttribute(attr, attrs[attr]))
script.src = src
document.body.appendChild(script)
}
}
function MyApp({ Component, pageProps }) {
React.useEffect(() => {
loadScript('https://buttons.github.io/buttons.js')
}, [])
return (
<>
<Head>
<link
href="https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700&display=swap"
rel="stylesheet"
/>
<style
dangerouslySetInnerHTML={{
__html: `
@media (max-width: 390px) {
.formkit-slide-in {
display: none;
}
}
@media (max-height: 740px) {
.formkit-slide-in {
display: none;
}
}
`,
}}
/>
</Head>
<SearchProvider>
<Component {...pageProps} />
</SearchProvider>
</>
)
}
export default MyApp
================================================
FILE: docs/src/pages/_document.js
================================================
import Document, { Html, Head, Main, NextScript } from 'next/document'
class MyDocument extends Document {
static async getInitialProps(ctx) {
const initialProps = await Document.getInitialProps(ctx)
return { ...initialProps }
}
render() {
return (
<Html>
<Head />
<body className="font-sans antialiased text-gray-900">
<Main />
<NextScript />
</body>
</Html>
)
}
}
export default MyDocument
================================================
FILE: docs/src/pages/docs/api.md
================================================
---
id: api
title: API
---
> 🚨 This documentation is for **Version 3.0.0, which is currently in beta and is a work-in-progress**. For now, please refer to the examples for any missing documentation.
## Memoize your Props!
The React Charts `<Chart>` component has a few options that need to be **stable** or **memoized using either `React.useMemo` or `React.useCallback`**. Using an unstable option incorrectly shouldn't severly break any basic functionality, but could results in infinite change-detection loops in your app or at the very least, your charts will be severly non-performant. If an option says it needs to be stable, it's not kidding around!
## Data Model
React Charts uses a data shape based on **arrays of series and nested arrays of datums in those series**.
```js
const data = [
{
label: 'Purchases',
data: [
{
date: new Date(),
stars: 299320,
},
// ...etc
],
},
]
```
Visualization data can come in practically any shape and size, so **memoization of data into this shape is almost always necessary**.
```tsx
const data = React.useMemo(
() => [
{
label: 'Series 1',
data: [
// ...
],
},
{
label: 'Series 2',
data: [
// ...
],
},
{
label: 'Series 3',
data: [
// ...
],
},
],
[]
)
```
The individual datums in a series' `data` array can be anything you want! Just remember that most of the types for React Charts will require you to pass the type of your `Datum`s as the first generic type to work correctly.
## Chart Component Props
The Chart component props can be passed in its `options` property object:
```javascript
<Chart
options={{
data,
primaryAxis,
secondaryAxes,
}}
/>
```
The data property should be an array of series, each series should be an array of objects.
Each object should have two properties, by convention called primary and secondary, but it can be named as you want. One of these properties will be used as the primary axis and the other as the secondary axes.
```javascript
const data = [
{
label: 'Series 1',
data: [
{
primary: '2022-02-03T00:00:00.000Z',
likes: 130,
},
{
primary: '2022-03-03T00:00:00.000Z',
likes: 150,
},
],
},
{
label: 'Series 2',
data: [
{
primary: '2022-04-03T00:00:00.000Z',
likes: 200,
},
{
primary: '2022-05-03T00:00:00.000Z',
likes: 250,
},
],
},
]
```
The `primaryAxis` and `secondaryAxes` options, should have a prop called getValue, which is a getter function that returns the axis value for the datum. Example:
```javascript
const primaryAxis = React.useMemo(
() => ({
getValue: (datum: { primary: string }) => datum.primary,
}),
[]
)
const secondaryAxes = React.useMemo(
() => [
{
getValue: (datum: { likes: number }) => datum.likes,
elementType: 'area',
},
],
[]
)
```
The `initialHeight` and `initialWidth` expect a number, a default value is applied for each of those, 300 and 200 respectively. It's important to mention that these options are available SSR only.
If you'd like to have a custom height and width in the client side you may have a wrapper div that sets the width and height CSS attributes
`interactionMode` expect an string wich can be "primary" or "closest". It's been using for the tooltip position. By default, primary is being set.
`showVoronoi` expect a boolean, it's a debug option to visualize the interaction click-map that sits on top of the chart.
`getSeriesOrder` expect a function, this option will allows you to reorder the series if you want.
`primaryCursor` and `secondaryCursor` take the options that configure the line/rectangle that is drawn underneath your cursor when you hover over the chart. When both are used, it produces a kind of cross-hair. Both are set to true by default.
## Axes
React Charts use axes to configure a fair amount of the charts. Axes handle many things like:
- Accessing chart values from your series' `Datum`s
- Optionally positioning your axis on the grid
- Optionally configuring the scale type for your axis
- Optionally configuring the element type for series that are tied to your axis
To date, we have the following scale types available:
- `linear` - A continuous axis used for plotting numerical data on an evenly distributed scale. Works well both as a **primary and secondary** axis.
- `band` - A banded axis commonly used to plot categories or ordinal information. Works well as the **primary** axis for bar charts with ordinal domains.
- `time` - A continuous axis used for plotting UTC `Date`s on an evenly distributed scale. Works well as a **primary** axis.
- `timeLocal` - Similar to the `time` scale, but uses localized `Date` objects instead of UTC. Works well as a **primary** axis.
- `log` - A continuous axis used for plotting numerical data on a logarithmically distributed scale. Works well as a **secondary** axis
Axes are a required component of a React Chart. Both a `primaryAxis` and at least one axis vis `secondaryAxes` must be configured.
```javascript
import { Chart } from 'react-charts'
type MyDatum = { date: Date, stars: number }
function MyChart() {
const data = [
{
label: 'React Charts',
data: [
{
date: new Date(),
stars: 23467238,
},
],
},
]
const primaryAxis = React.useMemo(
(): AxisOptions<MyDatum> => ({
getValue: datum => datum.date,
}),
[]
)
const secondaryAxes = React.useMemo(
(): AxisOptions<MyDatum>[] => [
{
getValue: datum => datum.stars,
},
],
[]
)
return (
<Chart
options={{
data,
primaryAxis,
secondaryAxes,
}}
/>
)
}
```
## Secondary Axis Element Types
Secondary axes for the most part are automatic, but can be optionally configured to render their respective series using 3 different element types using the `AxisOptions<TDatum>['scaleType']` property:
- `line`
- 1 Line per series (optional, eg. for Bubble/Scatter charts)
- 1 Circle per datum (optional)
- `area`
- 1 Enclosed area per series
- 1 Line per series (optional)
- 1 Circle per datum (optional)
- `bar`
- 1 Rectangle per datum
Example
```javascript
const secondaryAxes = React.useMemo(
(): AxisOptions<MyDatum>[] => [
{
getValue: datum => datum.stars,
elementType: 'bar',
},
],
[]
)
```
### Chart Component Props
The Chart component props can be passed in its **options** property object:
```javascript
<Chart
options={{
data,
primaryAxis,
secondaryAxes,
}}
/>
```
The data property should be an array of series, each series should be an array of objects.
Each object should have two properties, by convention called primary and secondary, but it can be named as you want. One of these properties will be used as the primary axis and the other as the secondary axes.
```javascript
const data = [
{
label: 'Series 1',
data: [
{
primary: '2022-02-03T00:00:00.000Z',
likes: 130,
},
{
primary: '2022-03-03T00:00:00.000Z',
likes: 150,
},
],
},
{
label: 'Series 2',
data: [
{
primary: '2022-04-03T00:00:00.000Z',
likes: 200,
},
{
primary: '2022-05-03T00:00:00.000Z',
likes: 250,
},
],
},
]
```
The **primaryAxis** and **secondaryAxes** options, should have a prop called getValue, which is a getter function that returns the axis value for the datum. Example:
```javascript
const primaryAxis = React.useMemo(
() => ({
getValue: (datum: { primary: string }) => datum.primary,
}),
[]
)
const secondaryAxes = React.useMemo(
() => [
{
getValue: (datum: { likes: number }) => datum.likes,
elementType: 'area',
},
],
[]
)
```
**initialHeight** and **initialWidth** expect a number, a default value is applied for each of those, 300 and 200 respectively. It's important to mention that these options are available SSR onoly. If you'd like to have a custom height and width in the client side you may have a wrapper div that sets the width and height CSS attributes
**interactionMode** expect an string wich can be "primary" or "closest". It's been using for the tooltip position. By default, primary is being set.
**showVoronoi** expect a boolean, it's a debug option to visualize the interaction click-map that sits on top of the chart.
**getSeriesOrder** expect a function, this option will allows you to reorder the series if you want.
**primaryCursor** and **secondaryCursor** take the options that configure the line/rectangle that is drawn underneath your cursor when you hover over the chart. When both are used, it produces a kind of cross-hair. Both are set to true by default.
### Curve Types
All element types that support lines or curves can be configured by passing any `curve` generator function as the `AxisOptions<TDatum>['curve']` option. By default, horizontal and vertical series default to using `monotoneX` and `monotoneY` curves, respectively. More information can be found at [`d3-shape curves`](https://github.com/d3/d3-shape#curves)
# API
> Coming Soon! Feel free to consult the **[examples](/examples/simple)** or refer to the exported types in your favorite IDE for now.
================================================
FILE: docs/src/pages/docs/getting-started.md
================================================
---
id: getting-started
title: Getting Started
---
Out of the box, React Charts is very forgiving and requires very little to use. Let's get started by going over the bare minimum configuration required to render a chart!
- An array of `Series` objects (more on this in a bit), each with a `data` property that is an array of `Datums` (be patient, we'll explain soon!)
```ts
type DailyStars = {
date: Date,
stars: number,
}
type Series = {
label: string,
data: DailyStars[]
}
const data: Series[] = [
{
label: 'React Charts',
data: [
{
date: new Date(),
stars: 202123,
}
// ...
]
},
{
label: 'React Query',
data: [
{
date: new Date(),
stars: 10234230,
}
// ...
]
}
]
```
- `primaryAxis: AxisOptions<TDatum>`
- Primary Value Accessor
- `secondaryAxes: AxisOptions<TDatum>[]`
- Primary Value Accessor
```tsx
function App() {
const primaryAxis = React.useMemo(
(): AxisOptions<DailyStars> => ({
getValue: datum => datum.date,
}),
[]
)
const secondaryAxes = React.useMemo(
(): AxisOptions<DailyStars>[] => [
{
getValue: datum => datum.stars,
},
],
[]
)
return (
<Chart
options={{
data,
primaryAxis,
secondaryAxes,
}}
/>
)
}
```
Now that you know how to build a simple chart, let's dive deeper!
================================================
FILE: docs/src/pages/docs/installation.md
================================================
---
id: installation
title: Installation
---
You can install React Charts with [NPM](https://npmjs.com),
[Yarn](https://yarnpkg.com), or a good ol' `<script>` via
[unpkg.com](https://unpkg.com).
### NPM
```sh
npm install react-charts@beta --save
```
or
```sh
yarn add react-charts@beta
```
React Charts is compatible with React v16.8+ and is compatible with ReactDOM only
================================================
FILE: docs/src/pages/docs/overview.md
================================================
---
id: overview
title: Overview
---
React Charts is first and foremost a React component for rendering many many different variations of X/Y charts including, but not limited to, **line, area, bar, column and bubble charts**.
Outside of providing custom styling and interfacing with some D3-supported options, you do not need any knowledge of SVG to use React Charts, nor should you, since you probably have better things to do than remember how to transpose the attributes of a `rect` from a vertical to horizontal orientation or heaven forbid, calculate an columnar-voronoi for faster closest-to-point tooltip performance.
You will, however, need general knowledge of:
- Your data. If you don't know the data you want to visualize, you're not going to get far at all!
It's optional for basic charting, but if you really want to be productive, you'll want to understand:
- High-level Scale Architypes, the differences in what they do, and why you would use one over the other. Again, you do not need to know how to build your own scales or use `d3-scale`, but knowing the concepts and ideas behind scale types like `time`, `linear/continuous`, and `ordinal/band` will go a long way. [Learn more at Observerble](https://observablehq.com/@d3/learn-d3-scales).
I think that's it TBH! But this list might grow/shrink in the future. If you think something should be added to this list or changed in anyway, hit the **Edit this page on Github** link at the bottom!
================================================
FILE: docs/src/pages/docs/quick-start.md
================================================
---
id: quick-start
title: Quick Start
---
## Quick Start
React
This will render a very basic line chart:
```javascript
import React from 'react'
import { Chart } from 'react-charts'
function MyChart() {
const data = React.useMemo(
() => [
{
label: 'Series 1',
data: [
[0, 1],
[1, 2],
[2, 4],
[3, 2],
[4, 7],
],
},
{
label: 'Series 2',
data: [
[0, 3],
[1, 1],
[2, 5],
[3, 6],
[4, 4],
],
},
],
[]
)
const axes = React.useMemo(
() => [
{ primary: true, type: 'linear', position: 'bottom' },
{ type: 'linear', position: 'left' },
],
[]
)
const lineChart = (
// A react-chart hyper-responsively and continuously fills the available
// space of its parent element automatically
<div
style={{
width: '400px',
height: '300px',
}}
>
<Chart data={data} axes={axes} />
</div>
)
}
```
================================================
FILE: docs/src/pages/examples/simple.md
================================================
---
id: simple
title: Simple Examples
toc: false
---
- [Open in CodeSandbox](https://codesandbox.io/s/github/tannerlinsley/react-charts/tree/beta/examples/simple)
- [View Source](https://github.com/tannerlinsley/react-charts/tree/beta/examples/simple)
<iframe
src="https://codesandbox.io/embed/github/tannerlinsley/react-charts/tree/beta/examples/simple?autoresize=1&fontsize=14&theme=dark"
title="tannerlinsley/react-charts: simple"
sandbox="allow-forms allow-modals allow-popups allow-presentation allow-same-origin allow-scripts"
style={{
width: '100%',
height: '80vh',
border: '0',
borderRadius: 8,
overflow: 'hidden',
position: 'static',
zIndex: 0,
}}
></iframe>
================================================
FILE: docs/src/pages/examples/stress-test.md
================================================
---
id: stress-test
title: Stress Test
toc: false
---
- [Open in CodeSandbox](https://codesandbox.io/s/github/tannerlinsley/react-charts/tree/beta/examples/stress-test)
- [View Source](https://github.com/tannerlinsley/react-charts/tree/beta/examples/stress-test)
<iframe
src="https://codesandbox.io/embed/github/tannerlinsley/react-charts/tree/beta/examples/stress-test?autoresize=1&fontsize=14&theme=dark"
title="tannerlinsley/react-charts: stress-test"
sandbox="allow-forms allow-modals allow-popups allow-presentation allow-same-origin allow-scripts"
style={{
width: '100%',
height: '80vh',
border: '0',
borderRadius: 8,
overflow: 'hidden',
position: 'static',
zIndex: 0,
}}
></iframe>
================================================
FILE: docs/src/pages/index.js
================================================
import * as React from 'react'
import { Banner } from 'components/Banner'
import { Sticky } from 'components/Sticky'
import { Nav } from 'components/Nav'
import { siteConfig } from 'siteConfig'
import Link from 'next/link'
import { Footer } from 'components/Footer'
import { Seo } from 'components/Seo'
import Head from 'next/head'
import { ParentSize } from '@visx/responsive'
const Home = props => {
return (
<>
<Seo
title="React Charts"
description="Hooks for building lightweight, fast and extendable datagrids for React"
/>
<Head>
<title>
React Charts - Simple, immersive & interactive charts for React
</title>
</Head>
<div className="bg-gray-50 h-full min-h-full">
<Banner />
<Sticky>
<Nav />
</Sticky>
<div className="relative bg-white overflow-hidden">
<div className="py-24 mx-auto container px-4 sm:mt-12 relative">
<img
src={require('images/emblem-light.svg')}
className="absolute transform right-0 top-1/2 h-0 lg:h-full scale-150 translate-x-1/2 xl:translate-x-1/5 -translate-y-1/2"
alt="React Charts Emblem"
/>
<div className="grid grid-cols-12 gap-8">
<div className="col-span-12 lg:col-span-6 ">
<div className="text-center lg:text-left md:max-w-2xl md:mx-auto ">
<h1 className="text-4xl tracking-tight leading-10 font-extrabold text-gray-900 sm:leading-none sm:text-6xl lg:text-5xl xl:text-6xl">
Beautiful, flexible, highly-performant
<br className="hidden md:inline xl:hidden" />{' '}
<span>charts for React</span>
</h1>
<p className="mt-3 text-base text-gray-700 sm:mt-5 sm:text-xl lg:text-lg xl:text-xl">
So automagical and easy, you'll find any excuse to use it!
</p>
<div className="mt-5 mx-auto sm:flex sm:justify-center lg:justify-start lg:mx-0 md:mt-8">
<div className="rounded-md shadow">
<Link href="/docs/overview">
<a className="w-full flex items-center justify-center px-8 py-3 border border-transparent text-base leading-6 font-medium rounded-md text-white bg-coral hover:bg-coral-light focus:outline-none focus:border-coral focus:shadow-outline-coral transition duration-150 ease-in-out md:py-4 md:text-lg md:px-10">
Get Started
</a>
</Link>
</div>
<div className="mt-3 rounded-md shadow sm:mt-0 sm:ml-3">
<a
href={siteConfig.repoUrl}
target="_blank"
rel="noopener noreferrer"
className="w-full flex items-center justify-center px-8 py-3 border border-transparent text-base leading-6 font-medium rounded-md text-coral bg-white hover:text-coral-light focus:outline-none focus:border-coral-light focus:shadow-outline-coral transition duration-150 ease-in-out md:py-4 md:text-lg md:px-10"
>
GitHub
</a>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
<div className="text-lg border-t border-gray-200 bg-gray-50 ">
<div className="py-24 ">
<div className="mx-auto container">
<div className="lg:grid lg:grid-cols-3 lg:gap-8">
<div>
<div>
<h3 className="text-xl leading-6 xl:text-2xl font-bold text-gray-900">
Succinct & Declarative
</h3>
<p className="mt-2 lg:mt-4 text-base xl:text-lg lg:leading-normal leading-6 text-gray-600">
Time is short for front-end developers as it is, so having
a charting system that is great out of the box,
declarative, succinct and requires as little imperative
scripting as possible not only helps you keep moving
forward but lets you express your data visualization needs
at the speed of your creativity.
</p>
</div>
</div>
<div className="mt-10 lg:mt-0">
<div>
<h3 className="text-xl leading-6 xl:text-2xl font-bold text-gray-900">
X/Y-Only Charts
</h3>
<div className="mt-2 lg:mt-4 text-base xl:text-lg lg:leading-normal leading-6 text-gray-600">
We believe data visualization is all about{' '}
<strong>effectively conveying information</strong> to your
users, and not about building <em>new</em> and
<em>"exciting"</em> methods of indirection or{' '}
<em>"art"</em> for them to ponder and decipher. To that
end, React Charts only supports X/Y chart layouts and{' '}
<a
href="https://www.businessinsider.com/pie-charts-are-the-worst-2013-6"
target="_blank"
className="text-blue-800"
>
purposefully does not have support for pie charts, radar
charts, or other circular nonsense.
</a>
<br />
<br />
<div className="leading-none">
<sup>
* Okay, there is a time and place for them, but not
often and certainly not here 😜.
</sup>
</div>
</div>
</div>
</div>
<div className="mt-10 lg:mt-0">
<div>
<h3 className="text-xl leading-6 xl:text-2xl font-bold text-gray-900">
SVG Knowledge Optional
</h3>
<p className="mt-2 lg:mt-4 text-base xl:text-lg lg:leading-normal leading-6 text-gray-600">
React Chart's API's goal is to remove the necessity of
knowing how to write and manipulate SVG elements. While
powerful, SVG elements can often create a new layer of
indirection for accomplishing simple customization tasks
like tooltips, labels, annotations, etc. React Charts make
this a breeze!
</p>
</div>
</div>
</div>
</div>
</div>
{/* <div className="py-6">
<div className="uppercase tracking-wider text-sm font-semibold text-center text-gray-400 mb-3">
Trusted in Production by
</div>
<ClientsMarquee />
</div> */}
</div>
<div className="relative text-lg border-t border-gray-200 bg-gray-100 overflow-hidden">
<div className="lg:block lg:absolute lg:inset-0">
<svg
className="absolute top-1/2 left-1/2 transform -translate-y-1/2 -translate-x-1/2"
width="2400"
height="2400"
fill="none"
viewBox="0 0 2400 2400"
>
<defs>
<pattern
id="9ebea6f4-a1f5-4d96-8c4e-4c2abf658047"
x="0"
y="0"
width="20"
height="20"
patternUnits="userSpaceOnUse"
>
<rect
x="0"
y="0"
width="4"
height="4"
className="text-gray-200"
fill="currentColor"
/>
</pattern>
</defs>
<rect
x="0"
width="2400"
height="2400"
fill="url(#9ebea6f4-a1f5-4d96-8c4e-4c2abf658047)"
/>
</svg>
</div>
<div className="relative">
<h3 className="text-center text-3xl leading-8 font-extrabold tracking-tight text-gray-900 sm:text-4xl sm:leading-10 lg:leading-none mt-8">
Sponsors
</h3>
<div className="py-4 flex flex-wrap mx-auto" style={{ maxWidth: '95%' }}>
<ParentSize>
{({ width }) => {
return (
<iframe
title="sponsors"
src="https://tanstack.com/sponsors-embed"
style={{
width: width,
height: width,
overflow: 'hidden',
}}
/>
)
}}
</ParentSize>
</div>
<div className="text-center mb-8">
<a
href="https://github.com/sponsors/tannerlinsley"
className="inline-block bg-green-500 px-4 py-2 text-xl mx-auto leading-tight font-extrabold tracking-tight text-white rounded-full"
>
Become a Sponsor!
</a>
</div>
</div>
</div>
<div className="bg-gray-100 relative py-24 border-t border-gray-200 ">
<div className="px-4 sm:px-6 lg:px-8 mx-auto container max-w-3xl sm:text-center">
<h3 className="text-3xl leading-8 font-extrabold tracking-tight text-gray-900 sm:text-4xl sm:leading-10 lg:leading-none mt-2">
Try it out! Right here. Right now!
</h3>
<p className="my-4 text-xl leading-7 text-gray-600">
Get your data, pick your chart type and get your datavis on.
</p>
</div>
<div
style={{
height: 224,
}}
/>
</div>
<section className="bg-gray-900 body-font">
<div className="container max-w-7xl px-4 mx-auto -mt-72 relative">
<iframe
src="https://codesandbox.io/embed/github/tannerlinsley/react-charts/tree/beta/examples/simple?autoresize=1&fontsize=16&theme=dark"
title="tannerlinsley/react-charts: simple"
sandbox="allow-forms allow-modals allow-popups allow-presentation allow-same-origin allow-scripts"
className="shadow-2xl"
style={{
width: '100%',
height: '80vh',
border: '0',
borderRadius: 8,
overflow: 'hidden',
position: 'static',
zIndex: 0,
}}
></iframe>
</div>
<div className="py-24 px-4 sm:px-6 lg:px-8 mx-auto container">
<div className=" sm:text-center pb-16">
<h3 className="text-3xl mx-auto leading-tight font-extrabold tracking-tight text-white sm:text-4xl lg:leading-none mt-2">
A knob, toggle and function for everything!
</h3>
<p className="mt-4 text-xl max-w-3xl mx-auto leading-7 text-gray-300">
React Charts is designed to get out of your way. Inversion of
control is our name, and control is your game. If you want to
customize something, we'll give you a way to do it. Just be
careful what you wish for!
</p>
</div>
<div>
<div className="grid grid-flow-row grid-cols-1 sm:grid-cols-2 md:grid-cols-3 gap-4 text-white max-w-screen-lg mx-auto text-lg">
{[
'Hyper Responsive',
'Line Charts',
'Bar/Column Charts',
'Bubble/Scatter Charts',
'Area/Steam Charts',
'Axis Stacking',
'Inverted Axes',
'Invisibly Powered by D3',
'Declarative',
'Mutliple Axes',
].map(d => {
return (
<a className="mb-2" key={d}>
<span className="bg-coral text-gray-800 w-4 h-4 mr-2 rounded-full inline-flex items-center justify-center">
<Check />
</span>
{d}
</a>
)
})}
</div>
</div>
</div>
</section>
<div className="bg-gray-200 border-b border-gray-300">
<div className="container mx-auto py-12 text-center">
<h3 className="text-2xl md:text-5xl mx-auto leading-tight font-extrabold tracking-tight text-gray-800 lg:leading-none mt-2">
Feeling Chatty?
</h3>
<a
href="https://discord.gg/WrRKjPJ"
target="_blank"
className="inline-block bg-gray-800 p-5 text-2xl mx-auto leading-tight font-extrabold tracking-tight text-white mt-12 rounded-full"
>
Join the #TanStack Discord!
</a>
</div>
</div>
<div className="bg-gray-50 border-b border-gray-100">
<div className="container mx-auto py-24 px-4 flex flex-wrap md:flex-no-wrap items-center justify-between md:space-x-8">
<h2 className="text-3xl leading-9 font-extrabold tracking-tight text-gray-900 sm:text-4xl sm:leading-10">
Wow, you've come a long way!
</h2>
<div className="mt-8 flex lg:flex-shrink-0 md:mt-0">
<div className="inline-flex rounded-md shadow">
<Link href="/docs/overview">
<a className="inline-flex items-center justify-center text-center px-5 py-3 border border-transparent text-base leading-6 font-medium rounded-md text-white bg-coral hover:bg-coral-light focus:outline-none focus:shadow-outline transition duration-150 ease-in-out">
Okay, let's get started!
</a>
</Link>
</div>
<div className="ml-3 inline-flex rounded-md shadow">
<a
href={siteConfig.repoUrl}
className="inline-flex items-center justify-center text-center px-5 py-3 border border-transparent text-base leading-6 font-medium rounded-md text-coral bg-white hover:text-coral-light focus:outline-none focus:shadow-outline transition duration-150 ease-in-out"
>
Take me to the GitHub repo.
</a>
</div>
</div>
</div>
</div>
<Footer />
<style jsx global>{`
.gradient {
-webkit-mask-image: linear-gradient(
180deg,
transparent 0,
#000 30px,
#000 calc(100% - 200px),
transparent calc(100% - 100px)
);
}
`}</style>
</div>
</>
)
}
export default Home
Home.displayName = 'Home'
const Check = React.memo(() => (
<svg
fill="none"
stroke="currentColor"
strokeLinecap="round"
strokeLinejoin="round"
strokeWidth="3"
className="w-3 h-3"
viewBox="0 0 24 24"
aria-hidden="true"
>
<path d="M20 6L9 17l-5-5"></path>
</svg>
))
================================================
FILE: docs/src/siteConfig.js
================================================
// List of projects/orgs using your project for the users page.
export const siteConfig = {
editUrl:
'https://github.com/tannerlinsley/react-charts/edit/master/docs/src/pages',
copyright: `Copyright © ${new Date().getFullYear()} Tanner Linsley. All Rights Reserved.`,
repoUrl: 'https://github.com/tannerlinsley/react-charts',
algolia: {
appId: 'BH4D9OD16A',
apiKey: 'f501b7d59335fb8731d2c76764c3fc86',
indexName: 'tanstack_react-charts', // algoliaOptions: {
// facetFilters: ['version:VERSION'],
// },
},
}
================================================
FILE: docs/src/styles/blog.module.css
================================================
.previewAlertContainer {
display: flex;
justify-content: center;
}
.previewAlert {
display: inline-flex;
align-items: center;
justify-content: space-between;
text-align: center;
border: 1px solid #eaeaea;
width: 400px;
padding: 16px;
border-radius: 5px;
}
.escapePreview {
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
border: none;
background-color: black;
border: 1px solid black;
color: white;
padding: 10px;
height: 24px;
border-radius: 5px;
transition: all 0.2s ease 0s;
}
.escapePreview:hover {
background-color: white;
color: black;
border: 1px solid black;
cursor: pointer;
}
.titleContainer {
display: inline-flex;
align-items: center;
justify-content: flex-start;
}
.draftBadge {
border-radius: 16px;
background-color: black;
color: white;
font-size: 14px;
font-weight: 200;
padding: 2px 7px;
margin-right: 6px;
}
.noPosts {
text-align: center;
}
================================================
FILE: docs/src/styles/index.css
================================================
/* purgecss start ignore */
@tailwind base;
@tailwind components;
/* purgecss end ignore */
body,
html {
text-rendering: optimizeLegibility;
-webkit-font-smoothing: antialiased;
-moz-osx-font-smoothing: grayscale;
}
.top-24 {
top: 6rem;
}
.focus-ring {
outline: none;
@apply shadow-outline border-blue-400;
}
/* purgecss start ignore */
.embed-responsive {
position: relative;
display: block;
height: 0;
padding: 0;
overflow: hidden;
}
.embed-responsive .embed-responsive-item,
.embed-responsive iframe,
.embed-responsive embed,
.embed-responsive object,
.embed-responsive video {
position: absolute;
top: 0;
left: 0;
bottom: 0;
height: 100%;
width: 100%;
border: 0;
}
.aspect-ratio-square {
padding-top: 100%;
}
.aspect-ratio-16-9 {
padding-top: 56.25%;
}
.aspect-ratio-4-3 {
padding-top: 75%;
}
.aspect-ratio-21-9 {
padding-top: 42.86%;
}
.anchor {
@apply text-gray-500 absolute ml-2 pr-1 underline;
}
.anchor::after {
content: '#';
visibility: hidden;
}
h1:hover .anchor::after,
h2:hover .anchor::after,
h3:hover .anchor::after,
h4:hover .anchor::after,
h5:hover .anchor::after,
h6:hover .anchor::after {
visibility: visible;
}
/* Algolia v3 overrides */
:root {
--docsearch-modal-background: #fff;
--docsearch-highlight-color: #1965e0;
--docsearch-primary-color: #0052cc;
--docsearch-searchbox-shadow: 0 0 0 3px rgba(66, 153, 225, 0.5);
--ifm-z-index-fixed: 1000;
--docsearch-searchbox-height: 48px;
--docsearch-icon-stroke-width: 1.4;
--hover-overlay: rgba(0, 0, 0, 0.05);
--fds-animation-fade-in: cubic-bezier(0, 0, 1, 1);
--fds-animation-fade-out: cubic-bezier(0, 0, 1, 1);
}
.DocSearch--active #__next {
-webkit-filter: blur(2px);
filter: blur(2px);
}
.DocSearch-SearchBar {
@apply mb-2;
}
.DocSearch-Form {
@apply rounded-md;
}
.DocSearch-Search-Icon {
height: 20px;
width: 20px;
stroke-width: 1.6;
@apply text-gray-600;
}
/* Custom Remark alerts */
.alert {
@apply p-4 border-l-4 mb-4;
}
.alert.alert-danger {
@apply bg-red-50 text-red-800 border-red-500;
}
.alert.alert-success {
@apply bg-green-50 text-green-700 border-green-500;
}
.alert.alert-warning {
@apply bg-yellow-50 text-yellow-800 border-yellow-500;
}
.alert.alert-info {
@apply bg-blue-50 text-blue-800 border-blue-500;
}
.font-mono {
font-family: monospace;
}
details > p > a,
details > ul > li > a,
details > ol > li > a,
details > ul > li a,
details > ol > li a,
details > table > tbody > tr > td > a {
@apply text-blue-600 font-semibold transition-colors duration-150 ease-out;
}
details > p > a:hover,
details > ul > li > a:hover,
details > ol > li > a:hover,
details > table > tbody > tr > td > a:hover {
@apply text-blue-800 transition-colors duration-150 ease-out;
}
details strong {
@apply font-bold;
}
details > p,
details > ul,
details > ol,
details > blockquote,
details > pre,
details > div > .code-block {
@apply mb-4;
}
details > ul,
details > ul > li > ul {
@apply ml-8 list-disc;
}
details > ol {
@apply ml-8 list-decimal;
}
details {
@apply p-3 bg-gray-50 rounded-md border mb-3 text-sm leading-5 shadow-sm;
}
details > p {
@apply mt-2;
}
details > summary {
@apply font-bold text-base;
}
@tailwind utilities;
/* purgecss end ignore */
#carbonads * {
margin: initial;
padding: initial;
}
#carbonads {
font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto,
Oxygen-Sans, Ubuntu, Cantarell, 'Helvetica Neue', Helvetica, Arial,
sans-serif;
}
#carbonads {
display: flex;
max-width: 330px;
background-color: hsl(0, 0%, 98%);
box-shadow: 0 1px 4px 1px hsla(0, 0%, 0%, 0.1);
z-index: 100;
}
#carbonads a {
color: inherit;
text-decoration: none;
}
#carbonads a:hover {
color: inherit;
}
#carbonads span {
position: relative;
display: block;
overflow: hidden;
}
#carbonads .carbon-wrap {
display: flex;
}
#carbonads .carbon-img {
display: block;
margin: 0;
line-height: 1;
}
#carbonads .carbon-img img {
display: block;
}
#carbonads .carbon-text {
font-size: 13px;
padding: 10px;
margin-bottom: 16px;
line-height: 1.5;
text-align: left;
}
#carbonads .carbon-poweredby {
display: block;
padding: 6px 8px;
background: #f1f1f2;
text-align: center;
text-transform: uppercase;
letter-spacing: 0.5px;
font-weight: 600;
font-size: 8px;
line-height: 1;
border-top-left-radius: 3px;
position: absolute;
bottom: 0;
right: 0;
}
================================================
FILE: docs/src/styles/post.module.css
================================================
/* .post :global(video),
.post :global(img), */
.post :global(.asset-wrapper) {
margin: 2rem auto;
/* box-shadow: 0 8px 8px rgba(0, 0, 0, 0.3); */
max-width: 100%;
display: block;
}
.post :global(.twitter-tweet) {
margin: 2rem auto !important;
text-align: center;
}
.post :global(.callout) {
padding: 16px 16px 16px 12px;
display: flex;
width: 100%;
border-radius: 3px;
border-width: 1px;
border-style: solid;
border-color: transparent;
background: rgba(235, 236, 237, 0.6);
margin-top: 1rem;
}
.post :global(.callout .text) {
margin-left: 8px;
}
.postPreview :global(.posted) {
margin-bottom: 0.5em;
}
.post :global(hr) {
margin-bottom: 2em;
}
/* .post :global(a + p) {
margin-top: 0;
} */
/* purgecss end ignore */
================================================
FILE: docs/src/styles/shared.module.css
================================================
.layout img {
margin: auto;
max-width: 98%;
display: block;
height: auto;
}
================================================
FILE: docs/src/users.js
================================================
export const users = [
'Intuit',
'Google',
'Amazon',
'Apple',
'AutoZone',
'Microsoft',
'Cisco',
'Uber',
'Salesforce',
'Walmart',
'Wix',
'HP',
'Docusign',
'Tripwire',
'Yahoo!',
'Ocado',
'Nordstrom',
'TicketMaster',
'Comcast Business',
'Nozzle.io',
// {
// caption: 'Walmart',
// image: require('images/logos/walmart.svg'),
// infoLink: 'https://walmart.com',
// pinned: true,
// },
// {
// caption: 'Lyft',
// image: require('images/logos/lyft.svg'),
// infoLink: 'https://lyft.com',
// pinned: true,
// style: {
// maxWidth: 75,
// },
// },
// {
// caption: 'Nasa',
// image: require('images/logos/nasa.svg'),
// infoLink: 'https://www.nasa.gov',
// pinned: true,
// style: {
// maxWidth: 80,
// },
// },
// {
// caption: 'Stripe',
// image: require('images/logos/stripe.svg'),
// infoLink: 'https://stripe.com',
// pinned: true,
// },
// {
// caption: 'US Army',
// image: require('images/logos/army.svg'),
// infoLink: 'https://www.army.mil',
// pinned: true,
// style: {
// maxWidth: 80,
// },
// },
// {
// caption: 'OpenTable',
// image: require('images/logos/opentable.svg'),
// infoLink: 'https://opentable.com',
// pinned: true,
// },
// {
// caption: 'Priceline.com',
// image: require('images/logos/priceline.png'),
// infoLink: 'https://priceline.com',
// pinned: true,
// },
// {
// caption: 'Booking.com',
// image: require('images/logos/booking.svg'),
// infoLink: 'https://booking.com',
// pinned: true,
// },
// {
// caption: 'NASDAQ',
// image: require('images/logos/nasdaq.svg'),
// infoLink: 'https://www.nasdaq.com',
// pinned: true,
// },
// {
// caption: 'PWC',
// image: require('images/logos/pwc.svg'),
// infoLink: 'https://www.pwc.com',
// pinned: true,
// style: {
// maxWidth: 80,
// },
// },
// {
// caption: 'NOAA',
// image: require('images/logos/noaa.svg'),
// infoLink: 'https://www.noaa.gov',
// pinned: true,
// style: {
// maxWidth: 80,
// },
// },
// {
// caption: 'Docker',
// image: require('images/logos/docker.svg'),
// infoLink: 'https://docker.com',
// pinned: true,
// },
// {
// caption: 'Viacom',
// image: require('images/logos/viacom.svg'),
// infoLink: 'https://viacom.com',
// pinned: true,
// },
// {
// caption: 'Nokia',
// image: require('images/logos/nokia.svg'),
// infoLink: 'https://nokia.com',
// pinned: true,
// },
// {
// caption: 'Sony',
// image: require('images/logos/sony.svg'),
// infoLink: 'https://sony.com',
// pinned: true,
// },
// {
// caption: 'State Street',
// image: require('images/logos/state-street.png'),
// infoLink: 'https://statestreet.com',
// },
// {
// caption: 'Wayfair',
// image: require('images/logos/wayfair.svg'),
// infoLink: 'https://wayfair.com',
// pinned: true,
// },
// {
// caption: 'Artsy',
// image: require('images/logos/artsy.png'),
// infoLink: 'https://artsy.com',
// pinned: true,
// },
// {
// caption: 'Postmates',
// image: require('images/logos/postmates.svg'),
// infoLink: 'https://postmates.com',
// pinned: true,
// },
// {
// caption: 'Capsule Health',
// image: require('images/logos/capsule.svg'),
// infoLink: 'https://capsulecares.com',
// pinned: true,
// },
// {
// caption: 'Egghead',
// image: require('images/logos/egghead.svg'),
// infoLink: 'https://egghead.io',
// pinned: true,
// },
// {
// caption: 'Frame.io',
// image: require('images/logos/frameio.png'),
// infoLink: 'https://frame.io',
// },
// {
// caption: 'RVshare',
// image: require('images/logos/rvshare.svg'),
// infoLink: 'https://rvshare.com',
// },
// {
// caption: 'Extendi',
// image: require('images/logos/extendi.svg'),
// infoLink: 'https://www.extendi.it',
// },
// {
// caption: 'Gusto',
// image: require('images/logos/gusto.svg'),
// infoLink: 'https://gusto.com',
// },
// {
// caption: 'Campusjäger',
// image: require('images/logos/campusjaeger.png'),
// infoLink: 'https://www.campusjaeger.de/',
// },
// {
// caption: 'Letgo',
// image: require('images/logos/letgo-logo.png'),
// infoLink: 'https://we.letgo.com/',
// style: {
// maxWidth: 100,
// },
// },
// {
// caption: 'gitconnected',
// image: require('images/logos/gitconnected-logo.png'),
// infoLink: 'https://gitconnected.com',
// },
// {
// caption: 'zauberware',
// image: require('images/logos/zauberware-logo.svg'),
// infoLink: 'https://www.zauberware.com',
// },
// {
// caption: 'brightwheel',
// image: require('images/logos/brightwheel.svg'),
// infoLink: 'https://mybrightwheel.com',
// },
// {
// caption: 'restaurant365',
// image: require('images/logos/restaurant365.svg'),
// infoLink: 'https://restaurant365.com',
// },
// {
// caption: 'CarGurus',
// image: require('images/logos/cargurus.svg'),
// infoLink: 'https://www.cargurus.com',
// },
// {
// caption: 'Gremlin',
// image: require('images/logos/gremlin.svg'),
// infoLink: 'https://www.gremlin.com',
// },
// {
// caption: 'Ubidots',
// image: require('images/logos/ubidots.svg'),
// infoLink: 'https://www.ubidots.com',
// },
// {
// caption: 'SwissDev DevOps Jobs',
// image: require('images/logos/swissdev-devops-jobs.svg'),
// infoLink: 'https://swissdevjobs.ch/jobs/Dev-Ops/All',
// style: {
// maxWidth: 100,
// },
// },
]
================================================
FILE: docs/tailwind.config.js
================================================
// tailwind.config.js
const defaultTheme = require('tailwindcss/defaultTheme')
module.exports = {
corePlugins: {
preflight: true,
float: false,
},
purge: {
enabled: process.env.NODE_ENV !== 'development',
content: ['./src/**/*.js'],
options: {
defaultExtractor: content => content.match(/[\w-/.:]+(?<!:)/g) || [],
},
},
theme: {
extend: {
colors: {
coral: {
light: '#FF6070',
default: '#FF4154',
dark: '#EB2135',
},
},
},
fontFamily: {
sans: ['Inter', ...defaultTheme.fontFamily.sans],
serif: ['Inter', ...defaultTheme.fontFamily.serif],
},
screens: {
sm: '640px',
md: '768px',
lg: '1024px',
xl: '1400px',
},
rotate: {
...defaultTheme.rotate,
'-30': '-30deg',
},
container: {
padding: '1rem',
},
customForms: theme => ({
sm: {
'input, textarea, multiselect, select': {
fontSize: theme('fontSize.sm'),
padding: `${theme('spacing.1')} ${theme('spacing.2')}`,
},
select: {
paddingRight: `${theme('spacing.4')}`,
},
'checkbox, radio': {
width: theme('spacing.3'),
height: theme('spacing.3'),
},
},
}),
},
variants: {},
plugins: [require('@tailwindcss/ui')],
}
================================================
FILE: examples/simple/.babelrc
================================================
{
"presets": ["react-app"],
"plugins": ["styled-components"]
}
================================================
FILE: examples/simple/.eslintrc
================================================
{
"extends": ["react-app", "prettier"],
"rules": {
// "eqeqeq": 0,
// "jsx-a11y/anchor-is-valid": 0
}
}
================================================
FILE: examples/simple/.gitignore
================================================
# See https://help.github.com/articles/ignoring-files/ for more about ignoring files.
# dependencies
/node_modules
/.pnp
.pnp.js
# testing
/coverage
# production
/build
# misc
.DS_Store
.env.local
.env.development.local
.env.test.local
.env.production.local
npm-debug.log*
yarn-debug.log*
yarn-error.log*
================================================
FILE: examples/simple/.prettierrc
================================================
{}
================================================
FILE: examples/simple/.rescriptsrc.js
================================================
const path = require("path");
const resolveFrom = require("resolve-from");
const fixLinkedDependencies = (config) => {
config.resolve = {
...config.resolve,
alias: {
...config.resolve.alias,
react$: resolveFrom(path.resolve("node_modules"), "react"),
"react-dom$": resolveFrom(path.resolve("node_modules"), "react-dom"),
},
};
return config;
};
const includeSrcDirectory = (config) => {
config.resolve = {
...config.resolve,
modules: [path.resolve("src"), ...config.resolve.modules],
};
return config;
};
module.exports = [
["use-babel-config", ".babelrc"],
["use-eslint-config", ".eslintrc"],
fixLinkedDependencies,
// includeSrcDirectory,
];
================================================
FILE: examples/simple/README.md
================================================
# Example
To run this example:
- `npm install` or `yarn`
- `npm run start` or `yarn start`
================================================
FILE: examples/simple/package.json
================================================
{
"private": true,
"scripts": {
"start": "SKIP_PREFLIGHT_CHECK=true rescripts start",
"build": "SKIP_PREFLIGHT_CHECK=true rescripts build",
"test": "rescripts test",
"eject": "rescripts eject",
"serve": "serve build -s -p 3001"
},
"dependencies": {
"@react-hook/window-size": "3.0.7",
"d3": "^5.16.0",
"react": "^17.0.2",
"react-charts": "^3.0.0-beta.30",
"react-dom": "^17.0.2",
"react-json-tree": "^0.15.0",
"react-resizable": "^1.10.1",
"react-scripts": "3.4.3",
"styled-components": "^5.1.1"
},
"devDependencies": {
"@rescripts/cli": "^0.0.14",
"@rescripts/rescript-use-babel-config": "^0.0.10",
"@rescripts/rescript-use-eslint-config": "^0.0.11",
"babel-eslint": "10.1.0",
"serve": "^12.0.0"
},
"resolutions": {
"typescript": "^4.3.2"
},
"browserslist": {
"production": [
">0.2%",
"not dead",
"not op_mini all"
],
"development": [
"last 1 chrome version",
"last 1 firefox version",
"last 1 safari version"
]
}
}
================================================
FILE: examples/simple/public/index.html
================================================
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8" />
<link rel="shortcut icon" href="%PUBLIC_URL%/favicon.ico" />
<meta name="viewport" content="width=device-width, initial-scale=1" />
<meta name="theme-color" content="#000000" />
<!--
manifest.json provides metadata used when your web app is installed on a
user's mobile device or desktop. See https://developers.google.com/web/fundamentals/web-app-manifest/
-->
<link rel="manifest" href="%PUBLIC_URL%/manifest.json" />
<!--
Notice the use of %PUBLIC_URL% in the tags above.
It will be replaced with the URL of the `public` folder during the build.
Only files inside the `public` folder can be referenced from the HTML.
Unlike "/favicon.ico" or "favicon.ico", "%PUBLIC_URL%/favicon.ico" will
work correctly both with client-side routing and a non-root public URL.
Learn how to configure a non-root public URL by running `npm run build`.
-->
<title>React App</title>
</head>
<body>
<noscript>You need to enable JavaScript to run this app.</noscript>
<div id="root"></div>
<!--
This HTML file is a template.
If you open it directly in the browser, you will see an empty page.
You can add webfonts, meta tags, or analytics to this file.
The build step will place the bundled scripts into the <body> tag.
To begin the development, run `npm start` or `yarn start`.
To create a production bundle, use `npm run build` or `yarn build`.
-->
</body>
</html>
================================================
FILE: examples/simple/public/manifest.json
================================================
{
"short_name": "React App",
"name": "Create React App Sample",
"icons": [
{
"src": "favicon.ico",
"sizes": "64x64 32x32 24x24 16x16",
"type": "image/x-icon"
}
],
"start_url": ".",
"display": "standalone",
"theme_color": "#000000",
"background_color": "#ffffff"
}
================================================
FILE: examples/simple/report.20200723.110041.33247.0.001.json
================================================
{
"header": {
"reportVersion": 2,
"event": "Allocation failed - JavaScript heap out of memory",
"trigger": "FatalError",
"filename": "report.20200723.110041.33247.0.001.json",
"dumpEventTime": "2020-07-23T11:00:41Z",
"dumpEventTimeStamp": "1595523641766",
"processId": 33247,
"threadId": null,
"cwd": "/Users/tannerlinsley/GitHub/react-charts/examples/line-chart",
"commandLine": [
"/Users/tannerlinsley/.nvm/versions/node/v12.16.3/bin/node",
"/Users/tannerlinsley/GitHub/react-charts/examples/line-chart/node_modules/@rescripts/cli/scripts/start.js"
],
"nodejsVersion": "v12.16.3",
"wordSize": 64,
"arch": "x64",
"platform": "darwin",
"componentVersions": {
"node": "12.16.3",
"v8": "7.8.279.23-node.35",
"uv": "1.34.2",
"zlib": "1.2.11",
"brotli": "1.0.7",
"ares": "1.16.0",
"modules": "72",
"nghttp2": "1.40.0",
"napi": "5",
"llhttp": "2.0.4",
"http_parser": "2.9.3",
"openssl": "1.1.1g",
"cldr": "36.0",
"icu": "65.1",
"tz": "2019c",
"unicode": "12.1"
},
"release": {
"name": "node",
"lts": "Erbium",
"headersUrl": "https://nodejs.org/download/release/v12.16.3/node-v12.16.3-headers.tar.gz",
"sourceUrl": "https://nodejs.org/download/release/v12.16.3/node-v12.16.3.tar.gz"
},
"osName": "Darwin",
"osRelease": "19.3.0",
"osVersion": "Darwin Kernel Version 19.3.0: Thu Jan 9 20:58:23 PST 2020; root:xnu-6153.81.5~1/RELEASE_X86_64",
"osMachine": "x86_64",
"cpus": [
{
"model": "Intel(R) Core(TM) i9-9880H CPU @ 2.30GHz",
"speed": 2300,
"user": 241595570,
"nice": 0,
"sys": 123482110,
"idle": 1100271500,
"irq": 0
},
{
"model": "Intel(R) Core(TM) i9-9880H CPU @ 2.30GHz",
"speed": 2300,
"user": 8093830,
"nice": 0,
"sys": 6772640,
"idle": 1449279340,
"irq": 0
},
{
"model": "Intel(R) Core(TM) i9-9880H CPU @ 2.30GHz",
"speed": 2300,
"user": 207372690,
"nice": 0,
"sys": 85894480,
"idle": 1170885840,
"irq": 0
},
{
"model": "Intel(R) Core(TM) i9-9880H CPU @ 2.30GHz",
"speed": 2300,
"user": 7622170,
"nice": 0,
"sys": 5469170,
"idle": 1451054130,
"irq": 0
},
{
"model": "Intel(R) Core(TM) i9-9880H CPU @ 2.30GHz",
"speed": 2300,
"user": 173097980,
"nice": 0,
"sys": 68941440,
"idle": 1222113280,
"irq": 0
},
{
"model": "Intel(R) Core(TM) i9-9880H CPU @ 2.30GHz",
"speed": 2300,
"user": 7864830,
"nice": 0,
"sys": 4912180,
"idle": 1451368090,
"irq": 0
},
{
"model": "Intel(R) Core(TM) i9-9880H CPU @ 2.30GHz",
"speed": 2300,
"user": 136232820,
"nice": 0,
"sys": 51614520,
"idle": 1276305030,
"irq": 0
},
{
"model": "Intel(R) Core(TM) i9-9880H CPU @ 2.30GHz",
"speed": 2300,
"user": 8146130,
"nice": 0,
"sys": 4410640,
"idle": 1451587970,
"irq": 0
},
{
"model": "Intel(R) Core(TM) i9-9880H CPU @ 2.30GHz",
"speed": 2300,
"user": 118000110,
"nice": 0,
"sys": 41710950,
"idle": 1304440990,
"irq": 0
},
{
"model": "Intel(R) Core(TM) i9-9880H CPU @ 2.30GHz",
"speed": 2300,
"user": 8269890,
"nice": 0,
"sys": 3924550,
"idle": 1451949920,
"irq": 0
},
{
"model": "Intel(R) Core(TM) i9-9880H CPU @ 2.30GHz",
"speed": 2300,
"user": 88590360,
"nice": 0,
"sys": 27513370,
"idle": 1348047980,
"irq": 0
},
{
"model": "Intel(R) Core(TM) i9-9880H CPU @ 2.30GHz",
"speed": 2300,
"user": 8415110,
"nice": 0,
"sys": 3506460,
"idle": 1452222430,
"irq": 0
},
{
"model": "Intel(R) Core(TM) i9-9880H CPU @ 2.30GHz",
"speed": 2300,
"user": 71700770,
"nice": 0,
"sys": 20526120,
"idle": 1371924440,
"irq": 0
},
{
"model": "Intel(R) Core(TM) i9-9880H CPU @ 2.30GHz",
"speed": 2300,
"user": 8494980,
"nice": 0,
"sys": 3171550,
"idle": 1452477080,
"irq": 0
},
{
"model": "Intel(R) Core(TM) i9-9880H CPU @ 2.30GHz",
"speed": 2300,
"user": 60481730,
"nice": 0,
"sys": 15739790,
"idle": 1387929420,
"irq": 0
},
{
"model": "Intel(R) Core(TM) i9-9880H CPU @ 2.30GHz",
"speed": 2300,
"user": 8588150,
"nice": 0,
"sys": 2914910,
"idle": 1452640170,
"irq": 0
}
],
"networkInterfaces": [
{
"name": "lo0",
"internal": true,
"mac": "00:00:00:00:00:00",
"address": "127.0.0.1",
"netmask": "255.0.0.0",
"family": "IPv4"
},
{
"name": "lo0",
"internal": true,
"mac": "00:00:00:00:00:00",
"address": "::1",
"netmask": "ffff:ffff:ffff:ffff:ffff:ffff:ffff:ffff",
"family": "IPv6",
"scopeid": 0
},
{
"name": "lo0",
"internal": true,
"mac": "00:00:00:00:00:00",
"address": "fe80::1",
"netmask": "ffff:ffff:ffff:ffff::",
"family": "IPv6",
"scopeid": 1
},
{
"name": "en0",
"internal": false,
"mac": "f8:ff:c2:46:3b:67",
"address": "fe80::4ed:ee34:a73:c21e",
"netmask": "ffff:ffff:ffff:ffff::",
"family": "IPv6",
"scopeid": 6
},
{
"name": "en0",
"internal": false,
"mac": "f8:ff:c2:46:3b:67",
"address": "192.168.0.23",
"netmask": "255.255.255.0",
"family": "IPv4"
},
{
"name": "en0",
"internal": false,
"mac": "f8:ff:c2:46:3b:67",
"address": "2601:680:cb00:154b:8f6:51ab:3fe1:5491",
"netmask": "ffff:ffff:ffff:ffff::",
"family": "IPv6",
"scopeid": 0
},
{
"name": "en0",
"internal": false,
"mac": "f8:ff:c2:46:3b:67",
"address": "2601:680:cb00:154b:e5a6:a81a:eb94:9701",
"netmask": "ffff:ffff:ffff:ffff::",
"family": "IPv6",
"scopeid": 0
},
{
"name": "awdl0",
"internal": false,
"mac": "fa:7a:9b:3b:9e:30",
"address": "fe80::f87a:9bff:fe3b:9e30",
"netmask": "ffff:ffff:ffff:ffff::",
"family": "IPv6",
"scopeid": 8
},
{
"name": "llw0",
"internal": false,
"mac": "fa:7a:9b:3b:9e:30",
"address": "fe80::f87a:9bff:fe3b:9e30",
"netmask": "ffff:ffff:ffff:ffff::",
"family": "IPv6",
"scopeid": 9
},
{
"name": "utun0",
"internal": false,
"mac": "00:00:00:00:00:00",
"address": "fe80::6fc3:e997:275a:7897",
"netmask": "ffff:ffff:ffff:ffff::",
"family": "IPv6",
"scopeid": 15
},
{
"name": "utun1",
"internal": false,
"mac": "00:00:00:00:00:00",
"address": "fe80::f5d5:557f:1fd4:8f69",
"netmask": "ffff:ffff:ffff:ffff::",
"family": "IPv6",
"scopeid": 16
},
{
"name": "utun2",
"internal": false,
"mac": "00:00:00:00:00:00",
"address": "fe80::7db8:ff11:6199:49ee",
"netmask": "ffff:ffff:ffff:ffff::",
"family": "IPv6",
"scopeid": 17
},
{
"name": "utun3",
"internal": false,
"mac": "00:00:00:00:00:00",
"address": "fe80::77dc:6930:1ef9:6f6f",
"netmask": "ffff:ffff:ffff:ffff::",
"family": "IPv6",
"scopeid": 18
},
{
"name": "utun4",
"internal": false,
"mac": "00:00:00:00:00:00",
"address": "fe80::e2d9:a7f1:dfb1:bdec",
"netmask": "ffff:ffff:ffff:ffff::",
"family": "IPv6",
"scopeid": 19
},
{
"name": "utun5",
"internal": false,
"mac": "00:00:00:00:00:00",
"address": "fe80::cbd8:8517:456c:2ab7",
"netmask": "ffff:ffff:ffff:ffff::",
"family": "IPv6",
"scopeid": 20
},
{
"name": "en5",
"internal": false,
"mac": "ac:de:48:00:11:22",
"address": "fe80::aede:48ff:fe00:1122",
"netmask": "ffff:ffff:ffff:ffff::",
"family": "IPv6",
"scopeid": 4
}
],
"host": "Tanner-Linsleys-Macbook-Pro.local"
},
"javascriptStack": {
"message": "No stack.",
"stack": [
"Unavailable."
]
},
"nativeStack": [
{
"pc": "0x0000000100164e03",
"symbol": "report::TriggerNodeReport(v8::Isolate*, node::Environment*, char const*, char const*, std::__1::basic_string<char, std::__1::char_traits<char>, std::__1::allocator<char> > const&, v8::Local<v8::String>) [/Users/tannerlinsley/.nvm/versions/node/v12.16.3/bin/node]"
},
{
"pc": "0x000000010008645a",
"symbol": "node::OnFatalError(char const*, char const*) [/Users/tannerlinsley/.nvm/versions/node/v12.16.3/bin/node]"
},
{
"pc": "0x0000000100187c07",
"symbol": "v8::Utils::ReportOOMFailure(v8::internal::Isolate*, char const*, bool) [/Users/tannerlinsley/.nvm/versions/node/v12.16.3/bin/node]"
},
{
"pc": "0x0000000100187ba7",
"symbol": "v8::internal::V8::FatalProcessOutOfMemory(v8::internal::Isolate*, char const*, bool) [/Users/tannerlinsley/.nvm/versions/node/v12.16.3/bin/node]"
},
{
"pc": "0x0000000100315955",
"symbol": "v8::internal::Heap::FatalProcessOutOfMemory(char const*) [/Users/tannerlinsley/.nvm/versions/node/v12.16.3/bin/node]"
},
{
"pc": "0x00000001003171ca",
"symbol": "v8::internal::Heap::RecomputeLimits(v8::internal::GarbageCollector) [/Users/tannerlinsley/.nvm/versions/node/v12.16.3/bin/node]"
},
{
"pc": "0x0000000100313bfc",
"symbol": "v8::internal::Heap::PerformGarbageCollection(v8::internal::GarbageCollector, v8::GCCallbackFlags) [/Users/tannerlinsley/.nvm/versions/node/v12.16.3/bin/node]"
},
{
"pc": "0x00000001003119fe",
"symbol": "v8::internal::Heap::CollectGarbage(v8::internal::AllocationSpace, v8::internal::GarbageCollectionReason, v8::GCCallbackFlags) [/Users/tannerlinsley/.nvm/versions/node/v12.16.3/bin/node]"
},
{
"pc": "0x000000010031d8ca",
"symbol": "v8::internal::Heap::AllocateRawWithLightRetry(int, v8::internal::AllocationType, v8::internal::AllocationOrigin, v8::internal::AllocationAlignment) [/Users/tannerlinsley/.nvm/versions/node/v12.16.3/bin/node]"
},
{
"pc": "0x000000010031d951",
"symbol": "v8::internal::Heap::AllocateRawWithRetryOrFail(int, v8::internal::AllocationType, v8::internal::AllocationOrigin, v8::internal::AllocationAlignment) [/Users/tannerlinsley/.nvm/versions/node/v12.16.3/bin/node]"
},
{
"pc": "0x00000001002eb58a",
"symbol": "v8::internal::Factory::NewFillerObject(int, bool, v8::internal::AllocationType, v8::internal::AllocationOrigin) [/Users/tannerlinsley/.nvm/versions/node/v12.16.3/bin/node]"
},
{
"pc": "0x000000010063e698",
"symbol": "v8::internal::Runtime_AllocateInYoungGeneration(int, unsigned long*, v8::internal::Isolate*) [/Users/tannerlinsley/.nvm/versions/node/v12.16.3/bin/node]"
},
{
"pc": "0x000000010097cc39",
"symbol": "Builtins_CEntry_Return1_DontSaveFPRegs_ArgvOnStack_NoBuiltinExit [/Users/tannerlinsley/.nvm/versions/node/v12.16.3/bin/node]"
}
],
"javascriptHeap": {
"totalMemory": 2155511808,
"totalCommittedMemory": 2154040696,
"usedMemory": 2125733056,
"availableMemory": 44552400,
"memoryLimit": 2197815296,
"heapSpaces": {
"read_only_space": {
"memorySize": 262144,
"committedMemory": 33088,
"capacity": 32808,
"used": 32808,
"available": 0
},
"new_space": {
"memorySize": 2097152,
"committedMemory": 1050424,
"capacity": 1047456,
"used": 1080,
"available": 1046376
},
"old_space": {
"memorySize": 2093621248,
"committedMemory": 2093479496,
"capacity": 2067962752,
"used": 2067807672,
"available": 155080
},
"code_space": {
"memorySize": 1478656,
"committedMemory": 1425472,
"capacity": 1262272,
"used": 1262272,
"available": 0
},
"map_space": {
"memorySize": 3674112,
"committedMemory": 3673720,
"capacity": 2413440,
"used": 2413440,
"available": 0
},
"large_object_space": {
"memorySize": 53755904,
"committedMemory": 53755904,
"capacity": 53671240,
"used": 53671240,
"available": 0
},
"code_large_object_space": {
"memorySize": 622592,
"committedMemory": 622592,
"capacity": 544544,
"used": 544544,
"available": 0
},
"new_large_object_space": {
"memorySize": 0,
"committedMemory": 0,
"capacity": 1047456,
"used": 0,
"available": 1047456
}
}
},
"resourceUsage": {
"userCpuSeconds": 99.2202,
"kernelCpuSeconds": 47.6506,
"cpuConsumptionPercent": 206.86,
"maxRss": 3027431849984,
"pageFaults": {
"IORequired": 33,
"IONotRequired": 977733
},
"fsActivity": {
"reads": 0,
"writes": 0
}
},
"libuv": [
],
"workers": [
],
"environmentVariables": {
"npm_package_dependencies_react_charts": "next",
"TERM_PROGRAM": "Hyper",
"NODE": "/Users/tannerlinsley/.nvm/versions/node/v12.16.3/bin/node",
"npm_config_version_git_tag": "true",
"NVM_CD_FLAGS": "-q",
"INIT_CWD": "/Users/tannerlinsley/GitHub/react-charts/examples/line-chart",
"TERM": "xterm-256color",
"SHELL": "/bin/zsh",
"TMPDIR": "/var/folders/wg/wzqxvxfn61sb5cxpkp9j5pg80000gn/T/",
"npm_config_email": "tannerlinsley@gmail.com",
"npm_config_init_license": "MIT",
"TERM_PROGRAM_VERSION": "3.0.2",
"npm_config_registry": "https://registry.yarnpkg.com",
"npm_package_private": "true",
"npm_package_dependencies_react_dom": "^16.8.6",
"ZSH": "/Users/tannerlinsley/.oh-my-zsh",
"npm_package_readmeFilename": "README.md",
"npm_package_description": "To run this example:",
"NVM_DIR": "/Users/tannerlinsley/.nvm",
"USER": "tannerlinsley",
"npm_package_browserslist_development_1": "last 1 firefox version",
"npm_package_browserslist_development_0": "last 1 chrome version",
"SSH_AUTH_SOCK": "/private/tmp/com.apple.launchd.w4HS6hadY4/Listeners",
"npm_package_dependencies_styled_components": "^4.3.2",
"npm_package_browserslist_development_2": "last 1 safari version",
"__CF_USER_TEXT_ENCODING": "0x1F5:0x0:0x0",
"npm_execpath": "/Users/tannerlinsley/.nvm/versions/node/v12.16.3/lib/node_modules/yarn/bin/yarn.js",
"PAGER": "less",
"LSCOLORS": "Gxfxcxdxbxegedabagacad",
"npm_config_argv": "{\"remain\":[],\"cooked\":[\"run\",\"start\"],\"original\":[\"start\"]}",
"PATH": "/var/folders/wg/wzqxvxfn61sb5cxpkp9j5pg80000gn/T/yarn--1595523570170-0.38719529019435006:/Users/tannerlinsley/GitHub/react-charts/examples/line-chart/node_modules/.bin:/Users/tannerlinsley/.config/yarn/link/node_modules/.bin:/Users/tannerlinsley/.nvm/versions/node/v12.16.3/libexec/lib/node_modules/npm/bin/node-gyp-bin:/Users/tannerlinsley/.nvm/versions/node/v12.16.3/lib/node_modules/npm/bin/node-gyp-bin:/Users/tannerlinsley/.nvm/versions/node/v12.16.3/bin/node_modules/npm/bin/node-gyp-bin:/Users/tannerlinsley/.nvm/versions/node/v12.16.3/bin:/usr/local/bin:/usr/bin:/bin:/usr/sbin:/sbin:/Applications/Postgres.app/Contents/Versions/latest/bin:/Applications/Visual Studio Code.app/Contents/Resources/app/bin",
"npm_package_devDependencies__rescripts_cli": "^0.0.11",
"_": "/Users/tannerlinsley/GitHub/react-charts/examples/line-chart/node_modules/.bin/rescripts",
"npm_package_browserslist_production_1": "not dead",
"npm_package_browserslist_production_0": ">0.2%",
"PWD": "/Users/tannerlinsley/GitHub/react-charts/examples/line-chart",
"npm_package_browserslist_production_2": "not op_mini all",
"npm_lifecycle_event": "start",
"EDITOR": "code",
"npm_package_name": "",
"LANG": "en_US.UTF-8",
"npm_config_version_commit_hooks": "true",
"npm_package_scripts_start": "rescripts start",
"npm_package_scripts_build": "rescripts build",
"npm_config_username": "tannerlinsley",
"XPC_FLAGS": "0x0",
"npm_config_bin_links": "true",
"npm_package_devDependencies__rescripts_rescript_use_eslint_config": "^0.0.9",
"npm_package_version": "",
"XPC_SERVICE_NAME": "0",
"npm_package_devDependencies__rescripts_rescript_use_babel_config": "^0.0.8",
"SHLVL": "2",
"HOME": "/Users/tannerlinsley",
"npm_package_scripts_test": "rescripts test",
"npm_config_strict_ssl": "true",
"npm_config_save_prefix": "^",
"npm_config_version_git_message": "v%s",
"npm_package_devDependencies_babel_eslint": "10.0.1",
"npm_package_dependencies_react_scripts": "3.0.1",
"YARN_WRAP_OUTPUT": "false",
"LESS": "-R",
"LOGNAME": "tannerlinsley",
"npm_lifecycle_script": "rescripts start",
"npm_package_dependencies_react": "^16.8.6",
"NVM_BIN": "/Users/tannerlinsley/.nvm/versions/node/v12.16.3/bin",
"npm_config_user_agent": "yarn/1.22.4 npm/? node/v12.16.3 darwin x64",
"npm_config_ignore_scripts": "",
"npm_config_version_git_sign": "",
"npm_config_ignore_optional": "",
"npm_config_init_version": "1.0.0",
"npm_config_init_author_name": "Tanner Linsley",
"npm_package_scripts_eject": "rescripts eject",
"npm_config_version_tag_prefix": "v",
"npm_node_execpath": "/Users/tannerlinsley/.nvm/versions/node/v12.16.3/bin/node",
"COLORTERM": "truecolor",
"BABEL_ENV": "development",
"NODE_ENV": "development",
"SKIP_PREFLIGHT_CHECK": "true",
"NODE_PATH": ""
},
"userLimits": {
"core_file_size_blocks": {
"soft": 0,
"hard": "unlimited"
},
"data_seg_size_kbytes": {
"soft": "unlimited",
"hard": "unlimited"
},
"file_size_blocks": {
"soft": "unlimited",
"hard": "unlimited"
},
"max_locked_memory_bytes": {
"soft": "unlimited",
"hard": "unlimited"
},
"max_memory_size_kbytes": {
"soft": "unlimited",
"hard": "unlimited"
},
"open_files": {
"soft": 49152,
"hard": "unlimited"
},
"stack_size_bytes": {
"soft": 8388608,
"hard": 67104768
},
"cpu_time_seconds": {
"soft": "unlimited",
"hard": "unlimited"
},
"max_user_processes": {
"soft": 5568,
"hard": 8352
},
"virtual_memory_kbytes": {
"soft": "unlimited",
"hard": "unlimited"
}
},
"sharedObjects": [
"/Users/tannerlinsley/.nvm/versions/node/v12.16.3/bin/node",
"/System/Library/Frameworks/CoreFoundation.framework/Versions/A/CoreFoundation",
"/usr/lib/libSystem.B.dylib",
"/usr/lib/libc++.1.dylib",
"/usr/lib/libobjc.A.dylib",
"/usr/lib/libfakelink.dylib",
"/usr/lib/libDiagnosticMessagesClient.dylib",
"/usr/lib/libicucore.A.dylib",
"/usr/lib/libz.1.dylib",
"/usr/lib/libc++abi.dylib",
"/usr/lib/system/libcache.dylib",
"/usr/lib/system/libcommonCrypto.dylib",
"/usr/lib/system/libcompiler_rt.dylib",
"/usr/lib/system/libcopyfile.dylib",
"/usr/lib/system/libcorecrypto.dylib",
"/usr/lib/system/libdispatch.dylib",
"/usr/lib/system/libdyld.dylib",
"/usr/lib/system/libkeymgr.dylib",
"/usr/lib/system/liblaunch.dylib",
"/usr/lib/system/libmacho.dylib",
"/usr/lib/system/libquarantine.dylib",
"/usr/lib/system/libremovefile.dylib",
"/usr/lib/system/libsystem_asl.dylib",
"/usr/lib/system/libsystem_blocks.dylib",
"/usr/lib/system/libsystem_c.dylib",
"/usr/lib/system/libsystem_configuration.dylib",
"/usr/lib/system/libsystem_coreservices.dylib",
"/usr/lib/system/libsystem_darwin.dylib",
"/usr/lib/system/libsystem_dnssd.dylib",
"/usr/lib/system/libsystem_featureflags.dylib",
"/usr/lib/system/libsystem_info.dylib",
"/usr/lib/system/libsystem_m.dylib",
"/usr/lib/system/libsystem_malloc.dylib",
"/usr/lib/system/libsystem_networkextension.dylib",
"/usr/lib/system/libsystem_notify.dylib",
"/usr/lib/system/libsystem_sandbox.dylib",
"/usr/lib/system/libsystem_secinit.dylib",
"/usr/lib/system/libsystem_kernel.dylib",
"/usr/lib/system/libsystem_platform.dylib",
"/usr/lib/system/libsystem_pthread.dylib",
"/usr/lib/system/libsystem_symptoms.dylib",
"/usr/lib/system/libsystem_trace.dylib",
"/usr/lib/system/libunwind.dylib",
"/usr/lib/system/libxpc.dylib",
"/Users/tannerlinsley/GitHub/react-charts/examples/line-chart/node_modules/fsevents/build/Release/fse.node",
"/System/Library/Frameworks/CoreServices.framework/Versions/A/CoreServices",
"/System/Library/Frameworks/CFNetwork.framework/Versions/A/CFNetwork",
"/System/Library/Frameworks/CoreServices.framework/Versions/A/Frameworks/FSEvents.framework/Versions/A/FSEvents",
"/System/Library/Frameworks/CoreServices.framework/Versions/A/Frameworks/CarbonCore.framework/Versions/A/CarbonCore",
"/System/Library/Frameworks/CoreServices.framework/Versions/A/Frameworks/Metadata.framework/Versions/A/Metadata",
"/System/Library/Frameworks/CoreServices.framework/Versions/A/Frameworks/OSServices.framework/Versions/A/OSServices",
"/System/Library/Frameworks/CoreServices.framework/Versions/A/Frameworks/SearchKit.framework/Versions/A/SearchKit",
"/System/Library/Frameworks/CoreServices.framework/Versions/A/Frameworks/AE.framework/Versions/A/AE",
"/System/Library/Frameworks/CoreServices.framework/Versions/A/Frameworks/LaunchServices.framework/Versions/A/LaunchServices",
"/System/Library/Frameworks/CoreServices.framework/Versions/A/Frameworks/DictionaryServices.framework/Versions/A/DictionaryServices",
"/System/Library/Frameworks/CoreServices.framework/Versions/A/Frameworks/SharedFileList.framework/Versions/A/SharedFileList",
"/System/Library/Frameworks/Foundation.framework/Versions/C/Foundation",
"/System/Library/Frameworks/IOKit.framework/Versions/A/IOKit",
"/System/Library/Frameworks/SystemConfiguration.framework/Versions/A/SystemConfiguration",
"/System/Library/Frameworks/Security.framework/Versions/A/Security",
"/usr/lib/libsqlite3.dylib",
"/usr/lib/libxml2.2.dylib",
"/usr/lib/libnetwork.dylib",
"/usr/lib/libapple_nghttp2.dylib",
"/usr/lib/libauto.dylib",
"/usr/lib/libcompression.dylib",
"/System/Library/Frameworks/DiskArbitration.framework/Versions/A/DiskArbitration",
"/usr/lib/libarchive.2.dylib",
"/usr/lib/liblangid.dylib",
"/usr/lib/libCRFSuite.dylib",
"/usr/lib/liblzma.5.dylib",
"/usr/lib/libenergytrace.dylib",
"/usr/lib/libbsm.0.dylib",
"/usr/lib/system/libkxld.dylib",
"/System/Library/PrivateFrameworks/AppleFSCompression.framework/Versions/A/AppleFSCompression",
"/usr/lib/libcoretls.dylib",
"/usr/lib/libcoretls_cfhelpers.dylib",
"/usr/lib/libpam.2.dylib",
"/usr/lib/libxar.1.dylib",
"/usr/lib/libbz2.1.0.dylib",
"/usr/lib/libiconv.2.dylib",
"/usr/lib/libcharset.1.dylib",
"/usr/lib/libpcap.A.dylib",
"/System/Library/Frameworks/NetFS.framework/Versions/A/NetFS",
"/System/Library/PrivateFrameworks/NetAuth.framework/Versions/A/NetAuth",
"/System/Library/PrivateFrameworks/login.framework/Versions/A/Frameworks/loginsupport.framework/Versions/A/loginsupport",
"/System/Library/PrivateFrameworks/TCC.framework/Versions/A/TCC",
"/System/Library/PrivateFrameworks/CoreNLP.framework/Versions/A/CoreNLP",
"/System/Library/PrivateFrameworks/MetadataUtilities.framework/Versions/A/MetadataUtilities",
"/usr/lib/libmecabra.dylib",
"/System/Library/Frameworks/Accelerate.framework/Versions/A/Accelerate",
"/usr/lib/libmecab.dylib",
"/usr/lib/libgermantok.dylib",
"/usr/lib/libThaiTokenizer.dylib",
"/usr/lib/libChineseTokenizer.dylib",
"/System/Library/Frameworks/Accelerate.framework/Versions/A/Frameworks/vImage.framework/Versions/A/vImage",
"/System/Library/Frameworks/Accelerate.framework/Versions/A/Frameworks/vecLib.framework/Versions/A/vecLib",
"/System/Library/Frameworks/Accelerate.framework/Versions/A/Frameworks/vecLib.framework/Versions/A/libvMisc.dylib",
"/System/Library/Frameworks/Accelerate.framework/Versions/A/Frameworks/vecLib.framework/Versions/A/libvDSP.dylib",
"/System/Library/Frameworks/Accelerate.framework/Versions/A/Frameworks/vecLib.framework/Versions/A/libBLAS.dylib",
"/System/Library/Frameworks/Accelerate.framework/Versions/A/Frameworks/vecLib.framework/Versions/A/libLAPACK.dylib",
"/System/Library/Frameworks/Accelerate.framework/Versions/A/Frameworks/vecLib.framework/Versions/A/libLinearAlgebra.dylib",
"/System/Library/Frameworks/Accelerate.framework/Versions/A/Frameworks/vecLib.framework/Versions/A/libSparseBLAS.dylib",
"/System/Library/Frameworks/Accelerate.framework/Versions/A/Frameworks/vecLib.framework/Versions/A/libQuadrature.dylib",
"/System/Library/Frameworks/Accelerate.framework/Versions/A/Frameworks/vecLib.framework/Versions/A/libBNNS.dylib",
"/System/Library/Frameworks/Accelerate.framework/Versions/A/Frameworks/vecLib.framework/Versions/A/libSparse.dylib",
"/System/Library/PrivateFrameworks/LanguageModeling.framework/Versions/A/LanguageModeling",
"/System/Library/PrivateFrameworks/CoreEmoji.framework/Versions/A/CoreEmoji",
"/System/Library/PrivateFrameworks/LinguisticData.framework/Versions/A/LinguisticData",
"/System/Library/PrivateFrameworks/Lexicon.framework/Versions/A/Lexicon",
"/usr/lib/libcmph.dylib",
"/System/Library/Frameworks/OpenDirectory.framework/Versions/A/Frameworks/CFOpenDirectory.framework/Versions/A/CFOpenDirectory",
"/System/Library/Frameworks/OpenDirectory.framework/Versions/A/OpenDirectory",
"/System/Library/PrivateFrameworks/APFS.framework/Versions/A/APFS",
"/System/Library/Frameworks/SecurityFoundation.framework/Versions/A/SecurityFoundation",
"/usr/lib/libutil.dylib",
"/System/Library/PrivateFrameworks/CoreServicesStore.framework/Versions/A/CoreServicesStore",
"/System/Library/Frameworks/ServiceManagement.framework/Versions/A/ServiceManagement",
"/System/Library/PrivateFrameworks/BackgroundTaskManagement.framework/Versions/A/BackgroundTaskManagement",
"/usr/lib/libxslt.1.dylib"
]
}
================================================
FILE: examples/simple/report.20200813.175012.49872.0.001.json
================================================
{
"header": {
"reportVersion": 2,
"event": "Allocation failed - JavaScript heap out of memory",
"trigger": "FatalError",
"filename": "report.20200813.175012.49872.0.001.json",
"dumpEventTime": "2020-08-13T17:50:12Z",
"dumpEventTimeStamp": "1597362612676",
"processId": 49872,
"threadId": null,
"cwd": "/Users/tannerlinsley/GitHub/react-charts/examples/line",
"commandLine": [
"/Users/tannerlinsley/.nvm/versions/node/v12.16.3/bin/node",
"/Users/tannerlinsley/GitHub/react-charts/examples/line/node_modules/@rescripts/cli/scripts/start.js"
],
"nodejsVersion": "v12.16.3",
"wordSize": 64,
"arch": "x64",
"platform": "darwin",
"componentVersions": {
"node": "12.16.3",
"v8": "7.8.279.23-node.35",
"uv": "1.34.2",
"zlib": "1.2.11",
"brotli": "1.0.7",
"ares": "1.16.0",
"modules": "72",
"nghttp2": "1.40.0",
"napi": "5",
"llhttp": "2.0.4",
"http_parser": "2.9.3",
"openssl": "1.1.1g",
"cldr": "36.0",
"icu": "65.1",
"tz": "2019c",
"unicode": "12.1"
},
"release": {
"name": "node",
"lts": "Erbium",
"headersUrl": "https://nodejs.org/download/release/v12.16.3/node-v12.16.3-headers.tar.gz",
"sourceUrl": "https://nodejs.org/download/release/v12.16.3/node-v12.16.3.tar.gz"
},
"osName": "Darwin",
"osRelease": "19.3.0",
"osVersion": "Darwin Kernel Version 19.3.0: Thu Jan 9 20:58:23 PST 2020; root:xnu-6153.81.5~1/RELEASE_X86_64",
"osMachine": "x86_64",
"cpus": [
{
"model": "Intel(R) Core(TM) i9-9880H CPU @ 2.30GHz",
"speed": 2300,
"user": 17514740,
"nice": 0,
"sys": 9813680,
"idle": 115668610,
"irq": 0
},
{
"model": "Intel(R) Core(TM) i9-9880H CPU @ 2.30GHz",
"speed": 2300,
"user": 318080,
"nice": 0,
"sys": 405290,
"idle": 142101350,
"irq": 0
},
{
"model": "Intel(R) Core(TM) i9-9880H CPU @ 2.30GHz",
"speed": 2300,
"user": 15020620,
"nice": 0,
"sys": 6857850,
"idle": 120948630,
"irq": 0
},
{
"model": "Intel(R) Core(TM) i9-9880H CPU @ 2.30GHz",
"speed": 2300,
"user": 302700,
"nice": 0,
"sys": 340950,
"idle": 142180990,
"irq": 0
},
{
"model": "Intel(R) Core(TM) i9-9880H CPU @ 2.30GHz",
"speed": 2300,
"user": 11840570,
"nice": 0,
"sys": 5239790,
"idle": 125746680,
"irq": 0
},
{
"model": "Intel(R) Core(TM) i9-9880H CPU @ 2.30GHz",
"speed": 2300,
"user": 304730,
"nice": 0,
"sys": 296250,
"idle": 142223580,
"irq": 0
},
{
"model": "Intel(R) Core(TM) i9-9880H CPU @ 2.30GHz",
"speed": 2300,
"user": 8507770,
"nice": 0,
"sys": 3626680,
"idle": 130692500,
"irq": 0
},
{
"model": "Intel(R) Core(TM) i9-9880H CPU @ 2.30GHz",
"speed": 2300,
"user": 295110,
"nice": 0,
"sys": 251350,
"idle": 142278020,
"irq": 0
},
{
"model": "Intel(R) Core(TM) i9-9880H CPU @ 2.30GHz",
"speed": 2300,
"user": 7206650,
"nice": 0,
"sys": 2872930,
"idle": 132747300,
"irq": 0
},
{
"model": "Intel(R) Core(TM) i9-9880H CPU @ 2.30GHz",
"speed": 2300,
"user": 282440,
"nice": 0,
"sys": 211290,
"idle": 142330670,
"irq": 0
},
{
"model": "Intel(R) Core(TM) i9-9880H CPU @ 2.30GHz",
"speed": 2300,
"user": 5096910,
"nice": 0,
"sys": 1803740,
"idle": 135926150,
"irq": 0
},
{
"model": "Intel(R) Core(TM) i9-9880H CPU @ 2.30GHz",
"speed": 2300,
"user": 270580,
"nice": 0,
"sys": 177310,
"idle": 142376410,
"irq": 0
},
{
"model": "Intel(R) Core(TM) i9-9880H CPU @ 2.30GHz",
"speed": 2300,
"user": 3922120,
"nice": 0,
"sys": 1307970,
"idle": 137596640,
"irq": 0
},
{
"model": "Intel(R) Core(TM) i9-9880H CPU @ 2.30GHz",
"speed": 2300,
"user": 260510,
"nice": 0,
"sys": 154120,
"idle": 142409590,
"irq": 0
},
{
"model": "Intel(R) Core(TM) i9-9880H CPU @ 2.30GHz",
"speed": 2300,
"user": 3134130,
"nice": 0,
"sys": 976570,
"idle": 138715940,
"irq": 0
gitextract_mus8ytg7/
├── .babelrc.js
├── .eslintrc
├── .github/
│ ├── FUNDING.yml
│ └── workflows/
│ └── publish.yml
├── .gitignore
├── LICENSE
├── README.md
├── docs/
│ ├── .gitignore
│ ├── README.md
│ ├── jsconfig.json
│ ├── next.config.js
│ ├── package.json
│ ├── postcss.config.js
│ ├── public/
│ │ └── robots.txt
│ ├── src/
│ │ ├── components/
│ │ │ ├── ArrowRight.js
│ │ │ ├── Banner.js
│ │ │ ├── BytesForm.js
│ │ │ ├── CarbonAds.js
│ │ │ ├── CodeBlock.js
│ │ │ ├── Container.js
│ │ │ ├── DocsPageFooter.js
│ │ │ ├── ExternalLink.js
│ │ │ ├── Footer.js
│ │ │ ├── Highlight.js
│ │ │ ├── Highlight2.js
│ │ │ ├── LayoutDocs.js
│ │ │ ├── LazyImage.js
│ │ │ ├── Logo.js
│ │ │ ├── MDXComponents.js
│ │ │ ├── Markdown.js
│ │ │ ├── Nav.js
│ │ │ ├── ProgressiveImage.js
│ │ │ ├── Search.js
│ │ │ ├── Seo.js
│ │ │ ├── Sidebar.js
│ │ │ ├── SidebarCategory.js
│ │ │ ├── SidebarHeading.js
│ │ │ ├── SidebarMobile.js
│ │ │ ├── SidebarNavLink.js
│ │ │ ├── SidebarPost.js
│ │ │ ├── Sticky.js
│ │ │ ├── TWButton.js
│ │ │ ├── Toc.js
│ │ │ ├── Toc.module.css
│ │ │ ├── TocNotion.js
│ │ │ ├── blog/
│ │ │ │ ├── ExternalLink.js
│ │ │ │ ├── Heading.js
│ │ │ │ ├── Image.js
│ │ │ │ ├── dynamic.js
│ │ │ │ └── intersection-observer/
│ │ │ │ ├── index.js
│ │ │ │ ├── intersection-observer.js
│ │ │ │ ├── manager.js
│ │ │ │ └── utils.js
│ │ │ ├── blog-markdown.module.css
│ │ │ ├── clients/
│ │ │ │ ├── Client.js
│ │ │ │ ├── ClientsMarquee.js
│ │ │ │ └── Filters.js
│ │ │ ├── forwardRefWithAs.js
│ │ │ ├── markdown.module.css
│ │ │ ├── useBytesSubmit.js
│ │ │ ├── useClipboard.js
│ │ │ ├── useIsMobile.js
│ │ │ ├── useOverScroll.js
│ │ │ ├── useSearch.js
│ │ │ ├── useTocHighlight.js
│ │ │ └── utils/
│ │ │ └── throttle.js
│ │ ├── manifests/
│ │ │ ├── getManifest.js
│ │ │ └── manifest.json
│ │ ├── pages/
│ │ │ ├── _app.js
│ │ │ ├── _document.js
│ │ │ ├── docs/
│ │ │ │ ├── api.md
│ │ │ │ ├── getting-started.md
│ │ │ │ ├── installation.md
│ │ │ │ ├── overview.md
│ │ │ │ └── quick-start.md
│ │ │ ├── examples/
│ │ │ │ ├── simple.md
│ │ │ │ └── stress-test.md
│ │ │ └── index.js
│ │ ├── siteConfig.js
│ │ ├── styles/
│ │ │ ├── blog.module.css
│ │ │ ├── index.css
│ │ │ ├── post.module.css
│ │ │ └── shared.module.css
│ │ └── users.js
│ └── tailwind.config.js
├── examples/
│ └── simple/
│ ├── .babelrc
│ ├── .eslintrc
│ ├── .gitignore
│ ├── .prettierrc
│ ├── .rescriptsrc.js
│ ├── README.md
│ ├── package.json
│ ├── public/
│ │ ├── index.html
│ │ └── manifest.json
│ ├── report.20200723.110041.33247.0.001.json
│ ├── report.20200813.175012.49872.0.001.json
│ ├── report.20200818.145051.85738.0.001.json
│ ├── src/
│ │ ├── ResizableBox.js
│ │ ├── components/
│ │ │ ├── Area.tsx
│ │ │ ├── Band.tsx
│ │ │ ├── Bar.tsx
│ │ │ ├── BarHorizontal.tsx
│ │ │ ├── BarHorizontalStacked.tsx
│ │ │ ├── BarStacked.tsx
│ │ │ ├── Bubble.tsx
│ │ │ ├── CustomStyles.tsx
│ │ │ ├── DarkMode.tsx
│ │ │ ├── DynamicContainer.tsx
│ │ │ ├── InteractionMode.tsx
│ │ │ ├── Line.tsx
│ │ │ ├── MultipleAxes.tsx
│ │ │ ├── SparkChart.tsx
│ │ │ ├── Steam.tsx
│ │ │ ├── StressTest.tsx
│ │ │ └── SyncedCursors.tsx
│ │ ├── index.tsx
│ │ ├── react-app-env.d.ts
│ │ ├── styles.css
│ │ ├── useDemoConfig.tsx
│ │ └── useLagRadar.js
│ └── tsconfig.json
├── media/
│ └── logo.sketch
├── package.json
├── prettier.config.js
├── rollup.config.js
├── src/
│ ├── components/
│ │ ├── AxisLinear.tsx
│ │ ├── AxisLinear.useMeasure.ts
│ │ ├── Chart.tsx
│ │ ├── Cursors.tsx
│ │ ├── Tooltip.tsx
│ │ ├── TooltipRenderer.tsx
│ │ └── Voronoi.tsx
│ ├── hooks/
│ │ ├── useAnchor.tsx
│ │ ├── useChanged.ts
│ │ ├── useGetLatest.ts
│ │ ├── useIsScrolling.ts
│ │ ├── useIsomorphicLayoutEffect.ts
│ │ ├── useLatestWhen.ts
│ │ ├── usePortalElement.ts
│ │ ├── usePrevious.ts
│ │ ├── useRect.ts
│ │ └── useSpring.ts
│ ├── index.ts
│ ├── seriesTypes/
│ │ ├── Bar.tsx
│ │ └── Line.tsx
│ ├── types.ts
│ └── utils/
│ ├── Utils.ts
│ ├── buildAxis.linear.ts
│ ├── chartContext.tsx
│ ├── curveMonotone.ts
│ └── spring.ts
├── test/
│ └── placeholder.test.tsx
├── tsconfig.json
├── tsconfig.types.json
├── typedoc.json
└── typedocs/
├── assets/
│ ├── css/
│ │ └── main.css
│ └── js/
│ ├── main.js
│ └── search.js
├── index.html
└── modules.html
SYMBOL INDEX (242 symbols across 74 files)
FILE: docs/next.config.js
method rewrites (line 45) | rewrites() {
FILE: docs/src/components/ArrowRight.js
function ArrowRight (line 2) | function ArrowRight({
FILE: docs/src/components/Banner.js
function Banner (line 1) | function Banner() {
FILE: docs/src/components/BytesForm.js
function BytesForm (line 4) | function BytesForm() {
FILE: docs/src/components/CarbonAds.js
function buildScript (line 3) | function buildScript(src, attrs = {}) {
function CarbonAds (line 15) | function CarbonAds() {
FILE: docs/src/components/DocsPageFooter.js
function areEqual (line 8) | function areEqual(prevProps, props) {
FILE: docs/src/components/ExternalLink.js
function ExternalLink (line 2) | function ExternalLink(props) {
FILE: docs/src/components/LayoutDocs.js
function getCategoryPath (line 145) | function getCategoryPath(routes) {
function SidebarRoutes (line 150) | function SidebarRoutes({ isMobile, routes: currentRoutes, level = 1 }) {
FILE: docs/src/components/LazyImage.js
class LazyImage (line 4) | class LazyImage extends React.Component {
method render (line 5) | render() {
FILE: docs/src/components/ProgressiveImage.js
class ProgressiveImage (line 2) | class ProgressiveImage extends React.Component {
method constructor (line 3) | constructor(props) {
method componentDidMount (line 11) | componentDidMount() {
method componentDidUpdate (line 21) | componentDidUpdate(prevProps) {
method componentWillUnmount (line 37) | componentWillUnmount() {
method render (line 87) | render() {
FILE: docs/src/components/SidebarCategory.js
function SidebarCategory (line 4) | function SidebarCategory({
FILE: docs/src/components/SidebarMobile.js
function SidebarMobile (line 8) | function SidebarMobile({
FILE: docs/src/components/SidebarNavLink.js
function SidebarNavLink (line 5) | function SidebarNavLink({
FILE: docs/src/components/Toc.js
constant TOP_OFFSET (line 5) | const TOP_OFFSET = 100
function getHeaderAnchors (line 7) | function getHeaderAnchors() {
function getHeaderDataFromAnchors (line 19) | function getHeaderDataFromAnchors(el) {
FILE: docs/src/components/TocNotion.js
constant TOP_OFFSET (line 6) | const TOP_OFFSET = 100;
function getHeaderNotionAnchors (line 16) | function getHeaderNotionAnchors() {
FILE: docs/src/components/blog/ExternalLink.js
function ExternalLink (line 2) | function ExternalLink(props) {
FILE: docs/src/components/blog/Heading.js
constant NOTION_ANCHOR_CLASSNAME (line 20) | const NOTION_ANCHOR_CLASSNAME = 'notion-anchor';
FILE: docs/src/components/blog/Image.js
class Image (line 16) | class Image extends Component {
method constructor (line 17) | constructor(props) {
method render (line 41) | render() {
FILE: docs/src/components/blog/intersection-observer/intersection-observer.js
class Observer (line 10) | class Observer extends Component {
method componentDidMount (line 32) | componentDidMount() {
method componentDidUpdate (line 37) | componentDidUpdate(prevProps) {
method componentWillUnmount (line 59) | componentWillUnmount() {
method observe (line 73) | observe() {
method unobserve (line 79) | unobserve() {
method render (line 92) | render() {
FILE: docs/src/components/blog/intersection-observer/manager.js
function getObserver (line 10) | function getObserver(options) {
function findObserver (line 17) | function findObserver(options = {}) {
function getObserverTargets (line 27) | function getObserverTargets(observer) {
function observeTarget (line 33) | function observeTarget(observer, target, handler) {
function unobserveTarget (line 39) | function unobserveTarget(observer, target) {
function intersectionCallback (line 45) | function intersectionCallback(entries, observer) {
FILE: docs/src/components/blog/intersection-observer/utils.js
function isDOMNode (line 1) | function isDOMNode(node) {
function parseOptions (line 7) | function parseOptions(options = {}) {
function hasEqualOptions (line 15) | function hasEqualOptions(observer, options) {
function parseRootMargin (line 23) | function parseRootMargin(rootMargin) {
function validateRootMargin (line 32) | function validateRootMargin(margin) {
function parseThreshold (line 38) | function parseThreshold(threshold) {
function equalPair (line 44) | function equalPair(optionA, optionB) {
FILE: docs/src/components/forwardRefWithAs.js
function forwardRefWithAs (line 23) | function forwardRefWithAs(comp) {
FILE: docs/src/components/useBytesSubmit.js
function sendBytesOptIn (line 3) | function sendBytesOptIn({ email, influencer, source, referral }) {
function useBytesSubmit (line 14) | function useBytesSubmit() {
FILE: docs/src/components/useClipboard.js
function useClipboard (line 10) | function useClipboard(text, timeout = 1500) {
FILE: docs/src/components/useSearch.js
function SearchProvider (line 14) | function SearchProvider({
function Hit (line 99) | function Hit({ hit, children }) {
FILE: docs/src/components/useTocHighlight.js
function useTocHighlight (line 6) | function useTocHighlight(linkClassName, linkActiveClassName, topOffset, ...
FILE: docs/src/pages/_app.js
function loadScript (line 7) | function loadScript(src, attrs = {}) {
function MyApp (line 18) | function MyApp({ Component, pageProps }) {
FILE: docs/src/pages/_document.js
class MyDocument (line 3) | class MyDocument extends Document {
method getInitialProps (line 4) | static async getInitialProps(ctx) {
method render (line 9) | render() {
FILE: examples/simple/src/ResizableBox.js
function ResizableBox (line 6) | function ResizableBox({
FILE: examples/simple/src/components/Area.tsx
function Bar (line 6) | function Bar() {
FILE: examples/simple/src/components/Band.tsx
function Band (line 7) | function Band() {
FILE: examples/simple/src/components/Bar.tsx
function Bar (line 6) | function Bar() {
FILE: examples/simple/src/components/BarHorizontal.tsx
function Bar (line 6) | function Bar() {
FILE: examples/simple/src/components/BarHorizontalStacked.tsx
function BarHorizontalStacked (line 6) | function BarHorizontalStacked() {
FILE: examples/simple/src/components/BarStacked.tsx
function BarStacked (line 6) | function BarStacked() {
FILE: examples/simple/src/components/Bubble.tsx
function Bubble (line 6) | function Bubble() {
FILE: examples/simple/src/components/CustomStyles.tsx
function CustomStyles (line 6) | function CustomStyles() {
function MyChart (line 37) | function MyChart({
FILE: examples/simple/src/components/DarkMode.tsx
function DarkMode (line 6) | function DarkMode() {
FILE: examples/simple/src/components/DynamicContainer.tsx
function DyanmicContainer (line 5) | function DyanmicContainer() {
FILE: examples/simple/src/components/InteractionMode.tsx
function GroupingModes (line 7) | function GroupingModes() {
FILE: examples/simple/src/components/Line.tsx
function Line (line 6) | function Line() {
FILE: examples/simple/src/components/MultipleAxes.tsx
function MultipleAxes (line 6) | function MultipleAxes() {
FILE: examples/simple/src/components/SparkChart.tsx
function Line (line 6) | function Line() {
FILE: examples/simple/src/components/Steam.tsx
function Steam (line 7) | function Steam() {
FILE: examples/simple/src/components/StressTest.tsx
function StressTest (line 6) | function StressTest() {
FILE: examples/simple/src/components/SyncedCursors.tsx
function SyncedCursors (line 6) | function SyncedCursors() {
FILE: examples/simple/src/index.tsx
function App (line 46) | function App() {
FILE: examples/simple/src/useDemoConfig.tsx
type DataType (line 45) | type DataType = "time" | "ordinal" | "linear";
type ElementType (line 46) | type ElementType = typeof options["elementType"][number];
type PrimaryAxisType (line 47) | type PrimaryAxisType = typeof options["primaryAxisType"][number];
type SecondaryAxisType (line 48) | type SecondaryAxisType = typeof options["secondaryAxisType"][number];
type PrimaryAxisPosition (line 49) | type PrimaryAxisPosition = typeof options["primaryAxisPosition"][number];
type SecondaryAxisPosition (line 50) | type SecondaryAxisPosition = typeof options["secondaryAxisPosition"][num...
type TooltipAnchor (line 51) | type TooltipAnchor = typeof options["tooltipAnchor"][number];
type TooltipAlign (line 52) | type TooltipAlign = typeof options["tooltipAlign"][number];
type InteractionMode (line 53) | type InteractionMode = typeof options["interactionMode"][number];
type TooltipGroupingMode (line 54) | type TooltipGroupingMode = typeof options["tooltipGroupingMode"][number];
function useChartConfig (line 58) | function useChartConfig({
function makeDataFrom (line 175) | function makeDataFrom(
function makeSeries (line 186) | function makeSeries(
FILE: examples/simple/src/useLagRadar.js
function useLagRadar (line 5) | function useLagRadar() {
function lagRadar (line 24) | function lagRadar(config = {}) {
FILE: src/components/AxisLinear.tsx
function AxisLinearComp (line 9) | function AxisLinearComp<TDatum>(axis: Axis<TDatum>) {
function getTickPx (line 233) | function getTickPx<TDatum>(scale: Axis<TDatum>['scale'], value: any) {
FILE: src/components/AxisLinear.useMeasure.ts
function useMeasure (line 21) | function useMeasure<TDatum>({
FILE: src/components/Chart.tsx
function defaultChartOptions (line 61) | function defaultChartOptions<TDatum>(
function Chart (line 82) | function Chart<TDatum>({
function ChartInner (line 218) | function ChartInner<TDatum>({
function getFirstDefinedValue (line 742) | function getFirstDefinedValue<TDatum>(
function axisOptionsWithScaleType (line 761) | function axisOptionsWithScaleType<TDatum>(
function sortDatumsBySecondaryPx (line 785) | function sortDatumsBySecondaryPx<TDatum>(
FILE: src/components/Cursors.tsx
type ResolvedCursorOptions (line 16) | type ResolvedCursorOptions = TSTB.Object.Required<
function defaultCursor (line 31) | function defaultCursor(options: CursorOptions): ResolvedCursorOptions {
function Cursors (line 40) | function Cursors<TDatum>() {
function Cursor (line 82) | function Cursor<TDatum>(props: {
FILE: src/components/Tooltip.tsx
function defaultTooltip (line 17) | function defaultTooltip<TDatum>(
function Tooltip (line 48) | function Tooltip<TDatum>(): React.ReactPortal | null {
FILE: src/components/TooltipRenderer.tsx
type TooltipRendererProps (line 24) | type TooltipRendererProps<TDatum> = {
function tooltipRenderer (line 34) | function tooltipRenderer<TDatum>(
function TooltipRenderer (line 40) | function TooltipRenderer<TDatum>(props: TooltipRendererProps<TDatum>) {
FILE: src/components/Voronoi.tsx
function Voronoi (line 11) | function Voronoi<TDatum>() {
function PrimaryVoronoi (line 60) | function PrimaryVoronoi<TDatum>({
function SingleVoronoi (line 306) | function SingleVoronoi<TDatum>({
function getX (line 415) | function getX<TDatum>(
function getY (line 426) | function getY<TDatum>(
function getPrimary (line 437) | function getPrimary<TDatum>(
function getSecondary (line 457) | function getSecondary<TDatum>(
FILE: src/hooks/useAnchor.tsx
type AlignMode (line 9) | type AlignMode =
type Side (line 18) | type Side = 'left' | 'right' | 'top' | 'bottom'
type SideOption (line 19) | type SideOption = Side | `${Side} ${AlignMode}`
type SideAlign (line 20) | type SideAlign = [Side, AlignMode]
type StartKey (line 22) | type StartKey = 'left' | 'top'
type LengthKey (line 23) | type LengthKey = 'width' | 'height'
type Dims (line 25) | type Dims = {
function useAnchor (line 75) | function useAnchor(options: {
function fitOnBestSide (line 161) | function fitOnBestSide({
function measureFit (line 195) | function measureFit({
FILE: src/hooks/useChanged.ts
function useChanged (line 3) | function useChanged(val: any) {
FILE: src/hooks/useGetLatest.ts
function useGetLatest (line 3) | function useGetLatest<T>(obj: T) {
FILE: src/hooks/useIsScrolling.ts
function useIsScrolling (line 8) | function useIsScrolling(debounce: number) {
FILE: src/hooks/useLatestWhen.ts
function useLatestWhen (line 3) | function useLatestWhen<T>(obj: T, when: boolean = true) {
FILE: src/hooks/usePortalElement.ts
function usePortalElement (line 5) | function usePortalElement() {
FILE: src/hooks/usePrevious.ts
function usePrevious (line 5) | function usePrevious<T>(val: T) {
FILE: src/hooks/useRect.ts
function useRect (line 3) | function useRect(
FILE: src/hooks/useSpring.ts
function useSpring (line 5) | function useSpring(
function useRaf (line 46) | function useRaf(callback: () => any) {
FILE: src/seriesTypes/Bar.tsx
function BarComponent (line 9) | function BarComponent<TDatum>({
function getWidth (line 84) | function getWidth<TDatum>(
function getHeight (line 94) | function getHeight<TDatum>(
function getPrimaryGroupLength (line 104) | function getPrimaryGroupLength<TDatum>(
function getPrimaryLength (line 111) | function getPrimaryLength<TDatum>(
function getSecondaryLength (line 135) | function getSecondaryLength<TDatum>(
function getRectX (line 147) | function getRectX<TDatum>(
function getRectY (line 157) | function getRectY<TDatum>(
function getPrimary (line 167) | function getPrimary<TDatum>(
function getSecondaryStart (line 187) | function getSecondaryStart<TDatum>(
function getSecondary (line 201) | function getSecondary<TDatum>(
function clampPxToAxis (line 215) | function clampPxToAxis<TDatum>(
FILE: src/seriesTypes/Line.tsx
function Line (line 10) | function Line<TDatum>({
function getX (line 142) | function getX<TDatum>(
function getY (line 152) | function getY<TDatum>(
function getPrimary (line 162) | function getPrimary<TDatum>(
function getSecondary (line 175) | function getSecondary<TDatum>(
function getSecondaryStart (line 186) | function getSecondaryStart<TDatum>(
function clampPxToAxis (line 197) | function clampPxToAxis<TDatum>(px: number, axis: Axis<TDatum>) {
FILE: src/types.ts
type ChartOptions (line 8) | type ChartOptions<TDatum> = {
type RequiredChartOptions (line 61) | type RequiredChartOptions<TDatum> = TSTB.Object.Required<
type ResolvedChartOptions (line 77) | type ResolvedChartOptions<TDatum> = Omit<
type ChartContextValue (line 84) | type ChartContextValue<TDatum> = {
type TooltipOptions (line 115) | type TooltipOptions<TDatum> = {
type ResolvedTooltipOptions (line 131) | type ResolvedTooltipOptions<TDatum> = TSTB.Object.Required<
type SeriesStyles (line 136) | type SeriesStyles = CSSProperties & {
type DatumStyles (line 143) | type DatumStyles = CSSProperties & {
type Position (line 150) | type Position = 'top' | 'right' | 'bottom' | 'left'
type InteractionMode (line 152) | type InteractionMode = 'closest' | 'primary'
type TooltipGroupingMode (line 153) | type TooltipGroupingMode = 'single' | 'primary' | 'secondary' | 'series'
type AlignMode (line 155) | type AlignMode =
type AlignPosition (line 167) | type AlignPosition =
type AxisType (line 177) | type AxisType = 'ordinal' | 'time' | 'localTime' | 'linear' | 'log'
type AnchorMode (line 179) | type AnchorMode =
type Side (line 193) | type Side = 'left' | 'right' | 'top' | 'bottom'
type PointerBase (line 195) | type PointerBase = {
type PointerUnpressed (line 201) | type PointerUnpressed = PointerBase & {
type PointerPressed (line 205) | type PointerPressed = PointerBase & {
type Pointer (line 211) | type Pointer = PointerUnpressed | PointerPressed
type ChartOffset (line 213) | type ChartOffset = {
type AxisDimension (line 220) | type AxisDimension = {
type AxisDimensions (line 229) | type AxisDimensions = {
type AxisOptionsBase (line 236) | type AxisOptionsBase = {
type AxisTimeOptions (line 265) | type AxisTimeOptions<TDatum> = AxisOptionsBase & {
type AxisLinearOptions (line 289) | type AxisLinearOptions<TDatum> = AxisOptionsBase & {
type AxisBandOptions (line 313) | type AxisBandOptions<TDatum> = AxisOptionsBase & {
type AxisOptions (line 333) | type AxisOptions<TDatum> =
type AxisOptionsWithScaleType (line 338) | type AxisOptionsWithScaleType<TDatum> = TSTB.Object.Required<
type BuildAxisOptions (line 343) | type BuildAxisOptions<TDatum> = TSTB.Object.Required<
type ResolvedAxisOptions (line 348) | type ResolvedAxisOptions<TAxisOptions> = TSTB.Object.Required<
type ChartValue (line 362) | type ChartValue<T> = T | null | undefined
type AxisBase (line 364) | type AxisBase = {
type AxisTime (line 370) | type AxisTime<TDatum> = Omit<
type AxisLinear (line 389) | type AxisLinear<TDatum> = Omit<
type AxisBand (line 408) | type AxisBand<TDatum> = Omit<
type Axis (line 427) | type Axis<TDatum> =
type UserSerie (line 432) | type UserSerie<TDatum> = {
type Series (line 443) | type Series<TDatum> = {
type Datum (line 454) | type Datum<TDatum> = {
type StackDatum (line 472) | type StackDatum<TDatum> = {
type Measurement (line 481) | type Measurement = Side | 'width' | 'height'
type GridDimensions (line 483) | type GridDimensions = {
type CursorOptions (line 492) | type CursorOptions = {
type SeriesFocusStatus (line 500) | type SeriesFocusStatus = 'none' | 'focused'
type DatumFocusStatus (line 502) | type DatumFocusStatus = 'none' | 'focused' | 'groupFocused'
FILE: src/utils/Utils.ts
function getSeriesStatus (line 10) | function getSeriesStatus<TDatum>(
function getDatumStatus (line 21) | function getDatumStatus<TDatum>(
function materializeStyles (line 43) | function materializeStyles(
function translate (line 57) | function translate(x: number, y: number) {
function normalizeColor (line 63) | function normalizeColor(
function isDefined (line 74) | function isDefined(num: number) {
FILE: src/utils/buildAxis.linear.ts
function defaultAxisOptions (line 48) | function defaultAxisOptions<TDatum>(
function buildAxisLinear (line 66) | function buildAxisLinear<TDatum>(
function buildTimeAxis (line 118) | function buildTimeAxis<TDatum>(
function buildLinearAxis (line 356) | function buildLinearAxis<TDatum>(
function buildBandAxis (line 509) | function buildBandAxis<TDatum>(
function stackSeries (line 595) | function stackSeries<TDatum>(
function buildPrimaryBandScale (line 643) | function buildPrimaryBandScale<TDatum>(
function buildSeriesBandScale (line 695) | function buildSeriesBandScale<TDatum>(
FILE: src/utils/chartContext.tsx
function ChartContextProvider (line 7) | function ChartContextProvider<TDatum>({
function useChartContext (line 17) | function useChartContext<TDatum>() {
FILE: src/utils/curveMonotone.ts
function sign (line 4) | function sign(x) {
function slope3 (line 12) | function slope3(that, x2, y2) {
function slope2 (line 25) | function slope2(that, t) {
function point (line 33) | function point(that, t0, t1) {
function MonotoneX (line 49) | function MonotoneX(context) {
function MonotoneY (line 105) | function MonotoneY(context) {
function ReflectContext (line 116) | function ReflectContext(context) {
FILE: src/utils/spring.ts
type Solution (line 8) | type Solution = {
function almostEqual (line 15) | function almostEqual(a: number, b: number) {
function almostZero (line 22) | function almostZero(a: number) {
class Spring (line 26) | class Spring {
method constructor (line 34) | constructor(
method x (line 48) | x(dt?: number) {
method dx (line 57) | private dx(dt?: number) {
method setEnd (line 64) | setEnd(x: number) {
method snap (line 86) | snap(x: number) {
method done (line 99) | done() {
method _solve (line 123) | private _solve(initial: number, velocity: number): Solution {
FILE: typedocs/assets/js/main.js
function __webpack_require__ (line 182) | function __webpack_require__(moduleId) {
Condensed preview — 160 files, each showing path, character count, and a content snippet. Download the .json file or copy for the full structured content (2,002K chars).
[
{
"path": ".babelrc.js",
"chars": 800,
"preview": "const { NODE_ENV, BABEL_ENV } = process.env\nconst cjs = NODE_ENV === 'test' || BABEL_ENV === 'commonjs'\nconst loose = tr"
},
{
"path": ".eslintrc",
"chars": 583,
"preview": "{\n \"parser\": \"@typescript-eslint/parser\",\n \"parserOptions\": {\n \"jsx\": true,\n \"useJSXTextNode\": true\n },\n \"exte"
},
{
"path": ".github/FUNDING.yml",
"chars": 22,
"preview": "github: tannerlinsley\n"
},
{
"path": ".github/workflows/publish.yml",
"chars": 1173,
"preview": "name: react-charts tests\n\non:\n push:\n branches:\n - 'main'\n - 'beta'\n pull_request:\n\njobs:\n test:\n nam"
},
{
"path": ".gitignore",
"chars": 439,
"preview": "\n# See https://help.github.com/ignore-files/ for more about ignoring files.\n\n# dependencies\nnode_modules\n\n# builds\ntypes"
},
{
"path": "LICENSE",
"chars": 1070,
"preview": "MIT License\n\nCopyright (c) 2021 Tanner Linsley\n\nPermission is hereby granted, free of charge, to any person obtaining a "
},
{
"path": "README.md",
"chars": 3203,
"preview": "\n\n\n# ⚠️ No Longer Maintaine"
},
{
"path": "docs/.gitignore",
"chars": 59,
"preview": ".next\n.now\n.env\n.env.*\nnode_modules\n*.log\n.DS_Store\n.vercel"
},
{
"path": "docs/README.md",
"chars": 901,
"preview": "# React Charts Docs\n\nThis is source code to react-charts.tanstack.com. It is forked from the [Formik](https://formik.org"
},
{
"path": "docs/jsconfig.json",
"chars": 54,
"preview": "{\n \"compilerOptions\": {\n \"baseUrl\": \"./src\"\n }\n}\n"
},
{
"path": "docs/next.config.js",
"chars": 2388,
"preview": "const path = require('path')\nconst dotenvLoad = require('dotenv-load')\nconst optimizedImages = require('next-optimized-i"
},
{
"path": "docs/package.json",
"chars": 2435,
"preview": "{\n \"name\": \"fdocs3\",\n \"version\": \"1.0.0\",\n \"main\": \"index.js\",\n \"author\": \"Jared Palmer <jared@palmer.net>\",\n \"lice"
},
{
"path": "docs/postcss.config.js",
"chars": 72,
"preview": "module.exports = {\n plugins: ['tailwindcss', 'postcss-preset-env'],\n};\n"
},
{
"path": "docs/public/robots.txt",
"chars": 23,
"preview": "User-agent: *\nDisallow:"
},
{
"path": "docs/src/components/ArrowRight.js",
"chars": 328,
"preview": "import * as React from 'react';\nexport function ArrowRight({\n fill = '#718096',\n width = 6,\n height = 10\n}) {\n retur"
},
{
"path": "docs/src/components/Banner.js",
"chars": 438,
"preview": "export function Banner() {\n return null; // return (\n // <div className=\"bg-gray-900\">\n // <div className=\"cont"
},
{
"path": "docs/src/components/BytesForm.js",
"chars": 1355,
"preview": "import React from 'react'\nimport useBytesSubmit from './useBytesSubmit'\n\nexport default function BytesForm() {\n const {"
},
{
"path": "docs/src/components/CarbonAds.js",
"chars": 1010,
"preview": "import React from 'react'\n\nfunction buildScript(src, attrs = {}) {\n if (typeof document !== 'undefined') {\n const sc"
},
{
"path": "docs/src/components/CodeBlock.js",
"chars": 4027,
"preview": "import React, { useState } from 'react';\nimport { LiveProvider, LiveEditor, LiveError, LivePreview } from 'react-live';\n"
},
{
"path": "docs/src/components/Container.js",
"chars": 201,
"preview": "import * as React from 'react';\nimport cn from 'classnames';\nexport const Container = props => {\n return <div className"
},
{
"path": "docs/src/components/DocsPageFooter.js",
"chars": 2401,
"preview": "import * as React from 'react'\nimport NextLink from 'next/link'\nimport { removeFromLast } from '../lib/docs/utils'\nimpor"
},
{
"path": "docs/src/components/ExternalLink.js",
"chars": 147,
"preview": "import * as React from 'react';\nexport function ExternalLink(props) {\n return <a {...props} rel=\"noopener\" target={prop"
},
{
"path": "docs/src/components/Footer.js",
"chars": 6266,
"preview": "import * as React from 'react'\nimport Link from 'next/link'\nimport CarbonAds from './CarbonAds'\nimport BytesForm from '."
},
{
"path": "docs/src/components/Highlight.js",
"chars": 3642,
"preview": "import * as React from 'react';\nimport Highlight, { defaultProps } from 'prism-react-renderer';\nimport { LiveProvider, L"
},
{
"path": "docs/src/components/Highlight2.js",
"chars": 2455,
"preview": "import * as React from 'react';\nimport Highlight, { defaultProps } from 'prism-react-renderer';\n// Original: https://raw"
},
{
"path": "docs/src/components/LayoutDocs.js",
"chars": 6131,
"preview": "import * as React from 'react'\nimport { MDXProvider } from '@mdx-js/react'\nimport { Nav } from 'components/Nav'\nimport {"
},
{
"path": "docs/src/components/LazyImage.js",
"chars": 734,
"preview": "import * as React from 'react';\nimport { ProgressiveImage } from './ProgressiveImage';\nimport cn from 'classnames';\nexpo"
},
{
"path": "docs/src/components/Logo.js",
"chars": 0,
"preview": ""
},
{
"path": "docs/src/components/MDXComponents.js",
"chars": 228,
"preview": "import * as React from 'react';\nimport dynamic from 'next/dynamic';\nexport default {\n // default tags\n pre: p => <pre "
},
{
"path": "docs/src/components/Markdown.js",
"chars": 281,
"preview": "import * as React from 'react';\nimport markdownStyles from './markdown.module.css';\nexport const Markdown = ({\n html: c"
},
{
"path": "docs/src/components/Nav.js",
"chars": 2851,
"preview": "import * as React from 'react'\nimport Link from 'next/link'\nimport logoSrc from '../images/logo-light.svg'\nimport { site"
},
{
"path": "docs/src/components/ProgressiveImage.js",
"chars": 2121,
"preview": "import * as React from 'react';\nexport class ProgressiveImage extends React.Component {\n constructor(props) {\n super"
},
{
"path": "docs/src/components/Search.js",
"chars": 1996,
"preview": "import * as React from 'react'\nimport { useSearch } from './useSearch'\n\nexport const Search = () => {\n const { onOpen }"
},
{
"path": "docs/src/components/Seo.js",
"chars": 2216,
"preview": "import React from 'react'\nimport Head from 'next/head'\nimport { withRouter } from 'next/router'\n\nconst ogImage = require"
},
{
"path": "docs/src/components/Sidebar.js",
"chars": 1361,
"preview": "import { useState } from 'react'\nimport cn from 'classnames'\nimport { Search } from './Search'\nimport CarbonAds from './"
},
{
"path": "docs/src/components/SidebarCategory.js",
"chars": 3127,
"preview": "import { useRef, useState, useEffect } from 'react';\nimport cn from 'classnames';\nimport { FiChevronDown } from 'react-i"
},
{
"path": "docs/src/components/SidebarHeading.js",
"chars": 524,
"preview": "import * as React from 'react';\nexport const SidebarHeading = ({\n title,\n children\n}) => {\n return (// <div>\n // "
},
{
"path": "docs/src/components/SidebarMobile.js",
"chars": 3040,
"preview": "import * as React from 'react';\nimport { disableBodyScroll, enableBodyScroll, clearAllBodyScrollLocks } from 'body-scrol"
},
{
"path": "docs/src/components/SidebarNavLink.js",
"chars": 1783,
"preview": "import * as React from 'react'\nimport Link from 'next/link'\nimport { useRouter } from 'next/router'\nimport cn from 'clas"
},
{
"path": "docs/src/components/SidebarPost.js",
"chars": 1289,
"preview": "import * as React from 'react';\nimport { SidebarNavLink } from './SidebarNavLink';\nimport cn from 'classnames';\nexport c"
},
{
"path": "docs/src/components/Sticky.js",
"chars": 483,
"preview": "import * as React from 'react';\nimport cn from 'classnames';\nexport const Sticky = ({\n offset,\n children,\n shadow\n}) "
},
{
"path": "docs/src/components/TWButton.js",
"chars": 3463,
"preview": "import * as React from 'react';\nimport { forwardRefWithAs } from './forwardRefWithAs';\nimport cx from 'classnames';\ncons"
},
{
"path": "docs/src/components/Toc.js",
"chars": 1420,
"preview": "import * as React from 'react'\nimport cx from 'classnames'\nimport { useTocHighlight } from './useTocHighlight'\nimport st"
},
{
"path": "docs/src/components/Toc.module.css",
"chars": 211,
"preview": "/* purgecss start ignore */\n.contents__link {\n @apply text-gray-700;\n}\n\n.contents__link:hover {\n @apply text-blue-600;"
},
{
"path": "docs/src/components/TocNotion.js",
"chars": 1609,
"preview": "import * as React from 'react';\nimport cx from 'classnames';\nimport { useTocHighlight } from './useTocHighlight';\nimport"
},
{
"path": "docs/src/components/blog/ExternalLink.js",
"chars": 155,
"preview": "import * as React from 'react';\nexport default function ExternalLink(props) {\n return <a {...props} rel=\"noopener\" targ"
},
{
"path": "docs/src/components/blog/Heading.js",
"chars": 1040,
"preview": "import * as React from 'react';\n\nconst collectText = (el, acc = []) => {\n if (el) {\n if (typeof el === 'string') acc"
},
{
"path": "docs/src/components/blog/Image.js",
"chars": 4538,
"preview": "import React, { Component } from 'react';\nimport IObserver from './intersection-observer';\nimport cn from 'classnames';\n"
},
{
"path": "docs/src/components/blog/dynamic.js",
"chars": 337,
"preview": "import dynamic from 'next/dynamic';\nimport ExtLink from './ExternalLink';\nexport default {\n // default tags\n ol: 'ol',"
},
{
"path": "docs/src/components/blog/intersection-observer/index.js",
"chars": 50,
"preview": "export { default } from './intersection-observer'\n"
},
{
"path": "docs/src/components/blog/intersection-observer/intersection-observer.js",
"chars": 2552,
"preview": "// Packages\nimport { Component, cloneElement, Children } from 'react';\nimport { findDOMNode } from 'react-dom';\nimport P"
},
{
"path": "docs/src/components/blog/intersection-observer/manager.js",
"chars": 1580,
"preview": "import { hasEqualOptions, parseOptions } from './utils'\n\nif (typeof window !== 'undefined') {\n require('intersection-ob"
},
{
"path": "docs/src/components/blog/intersection-observer/utils.js",
"chars": 1442,
"preview": "export function isDOMNode(node) {\n return (\n node && Object.prototype.hasOwnProperty.call(node, 'getBoundingClientRe"
},
{
"path": "docs/src/components/blog-markdown.module.css",
"chars": 3616,
"preview": "/* purgecss start ignore */\n.markdown {\n @apply leading-relaxed text-gray-800 text-base;\n}\n\n/* \n Add fake margin to of"
},
{
"path": "docs/src/components/clients/Client.js",
"chars": 304,
"preview": "import React from 'react'\nimport { LazyImage } from '../LazyImage'\nexport const Client = React.memo(({ name, image, styl"
},
{
"path": "docs/src/components/clients/ClientsMarquee.js",
"chars": 1151,
"preview": "import React from 'react'\nimport { users } from 'users'\n\n// const pinnedLogos = users.filter(p => p.pinned)\n\nexport cons"
},
{
"path": "docs/src/components/clients/Filters.js",
"chars": 1337,
"preview": "import React from 'react'\nexport const Filters = () => (\n <>\n <svg width={0} height={0}>\n <defs>\n <filte"
},
{
"path": "docs/src/components/forwardRefWithAs.js",
"chars": 2148,
"preview": "import * as React from 'react';\n/**\n * React.Ref uses the readonly type `React.RefObject` instead of\n * `React.MutableRe"
},
{
"path": "docs/src/components/markdown.module.css",
"chars": 3495,
"preview": "/* purgecss start ignore */\n.markdown {\n @apply leading-relaxed text-gray-800 text-base;\n}\n\n/* \n Add fake margin to of"
},
{
"path": "docs/src/components/useBytesSubmit.js",
"chars": 866,
"preview": "import { useState } from 'react';\n\nfunction sendBytesOptIn({ email, influencer, source, referral }) {\n return fetch(`ht"
},
{
"path": "docs/src/components/useClipboard.js",
"chars": 719,
"preview": "import * as React from 'react';\nimport copy from 'copy-to-clipboard';\n/**\n * React hook to copy content to clipboard\n *\n"
},
{
"path": "docs/src/components/useIsMobile.js",
"chars": 732,
"preview": "import { useState, useCallback, useEffect } from 'react'\n\nconst useMediaQuery = width => {\n const [targetReached, setTa"
},
{
"path": "docs/src/components/useOverScroll.js",
"chars": 1146,
"preview": "import * as React from 'react';\nimport { useViewportScroll, useTransform } from 'framer-motion';\nimport { throttle } fro"
},
{
"path": "docs/src/components/useSearch.js",
"chars": 2538,
"preview": "import React from 'react'\nimport { createPortal } from 'react-dom'\nimport Router from 'next/router'\nimport Head from 'ne"
},
{
"path": "docs/src/components/useTocHighlight.js",
"chars": 2284,
"preview": "import React from 'react';\n\n/**\n * Sets up Table of Contents highlighting. It requires that\n */\nexport function useTocHi"
},
{
"path": "docs/src/components/utils/throttle.js",
"chars": 299,
"preview": "export const throttle = (func, limit) => {\n let inThrottle;\n return function () {\n const args = arguments; // @ts-i"
},
{
"path": "docs/src/manifests/getManifest.js",
"chars": 188,
"preview": "import manifest from './manifest.json'\n\nconst versions = {}\n\nexport const versionList = Object.keys(versions)\nexport con"
},
{
"path": "docs/src/manifests/manifest.json",
"chars": 874,
"preview": "{\n \"routes\": [\n {\n \"title\": \"Documentation\",\n \"heading\": true,\n \"routes\": [\n {\n \"titl"
},
{
"path": "docs/src/pages/_app.js",
"chars": 1314,
"preview": "import React from 'react'\nimport '@docsearch/react/dist/style.css'\nimport '../styles/index.css'\nimport Head from 'next/h"
},
{
"path": "docs/src/pages/_document.js",
"chars": 475,
"preview": "import Document, { Html, Head, Main, NextScript } from 'next/document'\n\nclass MyDocument extends Document {\n static asy"
},
{
"path": "docs/src/pages/docs/api.md",
"chars": 9458,
"preview": "---\nid: api\ntitle: API\n---\n\n> 🚨 This documentation is for **Version 3.0.0, which is currently in beta and is a work-in-p"
},
{
"path": "docs/src/pages/docs/getting-started.md",
"chars": 1418,
"preview": "---\nid: getting-started\ntitle: Getting Started\n---\n\nOut of the box, React Charts is very forgiving and requires very lit"
},
{
"path": "docs/src/pages/docs/installation.md",
"chars": 378,
"preview": "---\nid: installation\ntitle: Installation\n---\n\nYou can install React Charts with [NPM](https://npmjs.com),\n[Yarn](https:/"
},
{
"path": "docs/src/pages/docs/overview.md",
"chars": 1468,
"preview": "---\nid: overview\ntitle: Overview\n---\n\nReact Charts is first and foremost a React component for rendering many many diffe"
},
{
"path": "docs/src/pages/docs/quick-start.md",
"chars": 1055,
"preview": "---\nid: quick-start\ntitle: Quick Start\n---\n\n## Quick Start\n\nReact\n\nThis will render a very basic line chart:\n\n```javascr"
},
{
"path": "docs/src/pages/examples/simple.md",
"chars": 708,
"preview": "---\nid: simple\ntitle: Simple Examples\ntoc: false\n---\n\n- [Open in CodeSandbox](https://codesandbox.io/s/github/tannerlins"
},
{
"path": "docs/src/pages/examples/stress-test.md",
"chars": 729,
"preview": "---\nid: stress-test\ntitle: Stress Test\ntoc: false\n---\n\n- [Open in CodeSandbox](https://codesandbox.io/s/github/tannerlin"
},
{
"path": "docs/src/pages/index.js",
"chars": 15772,
"preview": "import * as React from 'react'\nimport { Banner } from 'components/Banner'\nimport { Sticky } from 'components/Sticky'\nimp"
},
{
"path": "docs/src/siteConfig.js",
"chars": 544,
"preview": "// List of projects/orgs using your project for the users page.\nexport const siteConfig = {\n editUrl:\n 'https://gith"
},
{
"path": "docs/src/styles/blog.module.css",
"chars": 974,
"preview": ".previewAlertContainer {\n display: flex;\n justify-content: center;\n}\n\n.previewAlert {\n display: inline-flex;\n align-"
},
{
"path": "docs/src/styles/index.css",
"chars": 4444,
"preview": "/* purgecss start ignore */\n@tailwind base;\n@tailwind components;\n/* purgecss end ignore */\n\nbody,\nhtml {\n text-renderi"
},
{
"path": "docs/src/styles/post.module.css",
"chars": 761,
"preview": "/* .post :global(video),\n.post :global(img), */\n.post :global(.asset-wrapper) {\n margin: 2rem auto;\n /* box-shadow: 0 "
},
{
"path": "docs/src/styles/shared.module.css",
"chars": 84,
"preview": ".layout img {\n margin: auto;\n max-width: 98%;\n display: block;\n height: auto;\n}\n"
},
{
"path": "docs/src/users.js",
"chars": 5850,
"preview": "export const users = [\n 'Intuit',\n 'Google',\n 'Amazon',\n 'Apple',\n 'AutoZone',\n 'Microsoft',\n 'Cisco',\n 'Uber',\n"
},
{
"path": "docs/tailwind.config.js",
"chars": 1374,
"preview": "// tailwind.config.js\n\nconst defaultTheme = require('tailwindcss/defaultTheme')\n\nmodule.exports = {\n corePlugins: {\n "
},
{
"path": "examples/simple/.babelrc",
"chars": 67,
"preview": "{\n \"presets\": [\"react-app\"],\n \"plugins\": [\"styled-components\"]\n}\n"
},
{
"path": "examples/simple/.eslintrc",
"chars": 118,
"preview": "{\n \"extends\": [\"react-app\", \"prettier\"],\n \"rules\": {\n // \"eqeqeq\": 0,\n // \"jsx-a11y/anchor-is-valid\": 0\n }\n}\n"
},
{
"path": "examples/simple/.gitignore",
"chars": 310,
"preview": "# See https://help.github.com/articles/ignoring-files/ for more about ignoring files.\n\n# dependencies\n/node_modules\n/.pn"
},
{
"path": "examples/simple/.prettierrc",
"chars": 3,
"preview": "{}\n"
},
{
"path": "examples/simple/.rescriptsrc.js",
"chars": 705,
"preview": "const path = require(\"path\");\nconst resolveFrom = require(\"resolve-from\");\n\nconst fixLinkedDependencies = (config) => {\n"
},
{
"path": "examples/simple/README.md",
"chars": 93,
"preview": "# Example\n\nTo run this example:\n\n- `npm install` or `yarn`\n- `npm run start` or `yarn start`\n"
},
{
"path": "examples/simple/package.json",
"chars": 1071,
"preview": "{\n \"private\": true,\n \"scripts\": {\n \"start\": \"SKIP_PREFLIGHT_CHECK=true rescripts start\",\n \"build\": \"SKIP_PREFLIG"
},
{
"path": "examples/simple/public/index.html",
"chars": 1564,
"preview": "<!DOCTYPE html>\n<html lang=\"en\">\n <head>\n <meta charset=\"utf-8\" />\n <link rel=\"shortcut icon\" href=\"%PUBLIC_URL%/"
},
{
"path": "examples/simple/public/manifest.json",
"chars": 306,
"preview": "{\n \"short_name\": \"React App\",\n \"name\": \"Create React App Sample\",\n \"icons\": [\n {\n \"src\": \"favicon.ico\",\n "
},
{
"path": "examples/simple/report.20200723.110041.33247.0.001.json",
"chars": 27162,
"preview": "\n{\n \"header\": {\n \"reportVersion\": 2,\n \"event\": \"Allocation failed - JavaScript heap out of memory\",\n \"trigger\""
},
{
"path": "examples/simple/report.20200813.175012.49872.0.001.json",
"chars": 26707,
"preview": "\n{\n \"header\": {\n \"reportVersion\": 2,\n \"event\": \"Allocation failed - JavaScript heap out of memory\",\n \"trigger\""
},
{
"path": "examples/simple/report.20200818.145051.85738.0.001.json",
"chars": 26898,
"preview": "\n{\n \"header\": {\n \"reportVersion\": 2,\n \"event\": \"Allocation failed - JavaScript heap out of memory\",\n \"trigger\""
},
{
"path": "examples/simple/src/ResizableBox.js",
"chars": 1190,
"preview": "import React from \"react\";\nimport { ResizableBox as ReactResizableBox } from \"react-resizable\";\n\nimport \"react-resizable"
},
{
"path": "examples/simple/src/components/Area.tsx",
"chars": 1032,
"preview": "import ResizableBox from \"../ResizableBox\";\nimport useDemoConfig from \"../useDemoConfig\";\nimport React from \"react\";\nimp"
},
{
"path": "examples/simple/src/components/Band.tsx",
"chars": 1138,
"preview": "import ResizableBox from \"../ResizableBox\";\nimport useDemoConfig from \"../useDemoConfig\";\nimport { stackOffsetWiggle } f"
},
{
"path": "examples/simple/src/components/Bar.tsx",
"chars": 957,
"preview": "import ResizableBox from \"../ResizableBox\";\nimport useDemoConfig from \"../useDemoConfig\";\nimport React from \"react\";\nimp"
},
{
"path": "examples/simple/src/components/BarHorizontal.tsx",
"chars": 1009,
"preview": "import ResizableBox from \"../ResizableBox\";\nimport useDemoConfig from \"../useDemoConfig\";\nimport React from \"react\";\nimp"
},
{
"path": "examples/simple/src/components/BarHorizontalStacked.tsx",
"chars": 1050,
"preview": "import ResizableBox from \"../ResizableBox\";\nimport useDemoConfig from \"../useDemoConfig\";\nimport React from \"react\";\nimp"
},
{
"path": "examples/simple/src/components/BarStacked.tsx",
"chars": 988,
"preview": "import ResizableBox from \"../ResizableBox\";\nimport useDemoConfig from \"../useDemoConfig\";\nimport React from \"react\";\nimp"
},
{
"path": "examples/simple/src/components/Bubble.tsx",
"chars": 1205,
"preview": "import ResizableBox from \"../ResizableBox\";\nimport useDemoConfig from \"../useDemoConfig\";\nimport React from \"react\";\nimp"
},
{
"path": "examples/simple/src/components/CustomStyles.tsx",
"chars": 5170,
"preview": "import ResizableBox from \"../ResizableBox\";\nimport useDemoConfig from \"../useDemoConfig\";\nimport React from \"react\";\nimp"
},
{
"path": "examples/simple/src/components/DarkMode.tsx",
"chars": 1231,
"preview": "import ResizableBox from \"../ResizableBox\";\nimport useDemoConfig from \"../useDemoConfig\";\nimport React from \"react\";\nimp"
},
{
"path": "examples/simple/src/components/DynamicContainer.tsx",
"chars": 1832,
"preview": "import useDemoConfig from \"../useDemoConfig\";\nimport React from \"react\";\nimport { AxisOptions, Chart } from \"react-chart"
},
{
"path": "examples/simple/src/components/InteractionMode.tsx",
"chars": 1818,
"preview": "import ResizableBox from \"../ResizableBox\";\nimport useDemoConfig from \"../useDemoConfig\";\nimport React from \"react\";\nimp"
},
{
"path": "examples/simple/src/components/Line.tsx",
"chars": 975,
"preview": "import ResizableBox from \"../ResizableBox\";\nimport useDemoConfig from \"../useDemoConfig\";\nimport React from \"react\";\nimp"
},
{
"path": "examples/simple/src/components/MultipleAxes.tsx",
"chars": 1339,
"preview": "import ResizableBox from \"../ResizableBox\";\nimport useDemoConfig from \"../useDemoConfig\";\nimport React from \"react\";\nimp"
},
{
"path": "examples/simple/src/components/SparkChart.tsx",
"chars": 1072,
"preview": "import ResizableBox from \"../ResizableBox\";\nimport useDemoConfig from \"../useDemoConfig\";\nimport React from \"react\";\nimp"
},
{
"path": "examples/simple/src/components/Steam.tsx",
"chars": 1246,
"preview": "import ResizableBox from \"../ResizableBox\";\nimport useDemoConfig from \"../useDemoConfig\";\nimport { stackOffsetWiggle } f"
},
{
"path": "examples/simple/src/components/StressTest.tsx",
"chars": 6564,
"preview": "import ResizableBox from \"../ResizableBox\";\nimport useDemoConfig from \"../useDemoConfig\";\nimport React from \"react\";\nimp"
},
{
"path": "examples/simple/src/components/SyncedCursors.tsx",
"chars": 3016,
"preview": "import ResizableBox from \"../ResizableBox\";\nimport useDemoConfig from \"../useDemoConfig\";\nimport React from \"react\";\nimp"
},
{
"path": "examples/simple/src/index.tsx",
"chars": 1972,
"preview": "import \"./styles.css\";\nimport useLagRadar from \"./useLagRadar\";\nimport React from \"react\";\nimport ReactDOM from \"react-d"
},
{
"path": "examples/simple/src/react-app-env.d.ts",
"chars": 40,
"preview": "/// <reference types=\"react-scripts\" />\n"
},
{
"path": "examples/simple/src/styles.css",
"chars": 216,
"preview": "body {\n background: rgba(0, 0, 0, 0.02);\n}\n\n.react-resizable {\n max-width: 100%;\n}\n\n.react-resizable-handle {\n bottom"
},
{
"path": "examples/simple/src/useDemoConfig.tsx",
"chars": 6214,
"preview": "import React from \"react\";\n\n//\n\nconst options = {\n elementType: [\"line\", \"area\", \"bar\"],\n primaryAxisType: [\"linear\", "
},
{
"path": "examples/simple/src/useLagRadar.js",
"chars": 3661,
"preview": "import React from \"react\";\n\nimport { useWindowSize } from \"@react-hook/window-size\";\n\nexport default function useLagRada"
},
{
"path": "examples/simple/tsconfig.json",
"chars": 491,
"preview": "{\n \"compilerOptions\": {\n \"target\": \"es5\",\n \"lib\": [\n \"dom\",\n \"dom.iterable\",\n \"esnext\"\n ],\n "
},
{
"path": "package.json",
"chars": 5441,
"preview": "{\n \"name\": \"react-charts\",\n \"version\": \"1.0.0-semantic-release\",\n \"description\": \"Simple, immersive & interactive cha"
},
{
"path": "prettier.config.js",
"chars": 294,
"preview": "module.exports = {\n printWidth: 80,\n tabWidth: 2,\n useTabs: false,\n semi: false,\n singleQuote: true,\n trailingComm"
},
{
"path": "rollup.config.js",
"chars": 1908,
"preview": "import babel from 'rollup-plugin-babel'\nimport commonJS from 'rollup-plugin-commonjs'\nimport resolve from 'rollup-plugin"
},
{
"path": "src/components/AxisLinear.tsx",
"chars": 7104,
"preview": "import React from 'react'\n\nimport { Axis, AxisLinear } from '../types'\nimport { translate } from '../utils/Utils'\nimport"
},
{
"path": "src/components/AxisLinear.useMeasure.ts",
"chars": 5241,
"preview": "import React, { MutableRefObject } from 'react'\n\nimport useIsomorphicLayoutEffect from '../hooks/useIsomorphicLayoutEffe"
},
{
"path": "src/components/Chart.tsx",
"chars": 21692,
"preview": "import { groups, sort, sum } from 'd3-array'\nimport React, { ComponentPropsWithoutRef } from 'react'\n\nimport useGetLates"
},
{
"path": "src/components/Cursors.tsx",
"chars": 9143,
"preview": "import React from 'react'\nimport ReactDOM from 'react-dom'\nimport * as TSTB from 'ts-toolbelt'\n\nimport usePrevious from "
},
{
"path": "src/components/Tooltip.tsx",
"chars": 5215,
"preview": "import React from 'react'\nimport ReactDOM from 'react-dom'\n\nimport { useAnchor } from '../hooks/useAnchor'\nimport useLat"
},
{
"path": "src/components/TooltipRenderer.tsx",
"chars": 12866,
"preview": "import { sum } from 'd3-array'\nimport React, { CSSProperties } from 'react'\n\nimport { useAnchor } from '../hooks/useAnch"
},
{
"path": "src/components/Voronoi.tsx",
"chars": 12364,
"preview": "import React from 'react'\nimport { Delaunay } from 'd3-delaunay'\n\n//\nimport { Axis, Datum } from '../types'\nimport { tra"
},
{
"path": "src/hooks/useAnchor.tsx",
"chars": 6998,
"preview": "import React from 'react'\n\nimport useRect from './useRect'\n\n//\n\n//\n\ntype AlignMode =\n | 'center'\n | 'start'\n | 'end'\n"
},
{
"path": "src/hooks/useChanged.ts",
"chars": 152,
"preview": "import usePrevious from './usePrevious'\n\nexport default function useChanged(val: any) {\n const previous = usePrevious(v"
},
{
"path": "src/hooks/useGetLatest.ts",
"chars": 281,
"preview": "import React from 'react'\n\nexport default function useGetLatest<T>(obj: T) {\n const ref = React.useRef<T>(obj)\n const "
},
{
"path": "src/hooks/useIsScrolling.ts",
"chars": 917,
"preview": "import * as React from 'react'\nimport ReactDOM from 'react-dom'\n\nexport const unstable_batchedUpdates = ReactDOM.unstabl"
},
{
"path": "src/hooks/useIsomorphicLayoutEffect.ts",
"chars": 118,
"preview": "import React from 'react'\n\nexport default typeof window !== 'undefined'\n ? React.useLayoutEffect\n : React.useEffect\n"
},
{
"path": "src/hooks/useLatestWhen.ts",
"chars": 221,
"preview": "import React from 'react'\n\nexport default function useLatestWhen<T>(obj: T, when: boolean = true) {\n const ref = React."
},
{
"path": "src/hooks/usePortalElement.ts",
"chars": 841,
"preview": "import * as React from 'react'\n\nimport useIsomorphicLayoutEffect from './useIsomorphicLayoutEffect'\n\nexport default func"
},
{
"path": "src/hooks/usePrevious.ts",
"chars": 272,
"preview": "import React from 'react'\n\nimport useIsomorphicLayoutEffect from './useIsomorphicLayoutEffect'\n\nexport default function "
},
{
"path": "src/hooks/useRect.ts",
"chars": 1234,
"preview": "import React from 'react'\n\nexport default function useRect(\n element: Element | null | undefined,\n enabled: boolean\n):"
},
{
"path": "src/hooks/useSpring.ts",
"chars": 1404,
"preview": "import React from 'react'\nimport { Spring } from '../utils/spring'\nimport useGetLatest from './useGetLatest'\n\nexport fun"
},
{
"path": "src/index.ts",
"chars": 67,
"preview": "export { Chart } from './components/Chart'\nexport * from './types'\n"
},
{
"path": "src/seriesTypes/Bar.tsx",
"chars": 5772,
"preview": "import React from 'react'\n\nimport { Axis, AxisBand, Datum, Series } from '../types'\nimport { translate } from '../utils/"
},
{
"path": "src/seriesTypes/Line.tsx",
"chars": 5632,
"preview": "import { area, line } from 'd3-shape'\nimport React from 'react'\n\nimport { Axis, Series, Datum } from '../types'\nimport {"
},
{
"path": "src/types.ts",
"chars": 11877,
"preview": "import { ScaleBand, ScaleLinear, ScaleTime } from 'd3-scale'\nimport { CurveFactory, stackOffsetNone } from 'd3-shape'\nim"
},
{
"path": "src/utils/Utils.ts",
"chars": 1725,
"preview": "import {\n Datum,\n DatumFocusStatus,\n DatumStyles,\n Series,\n SeriesFocusStatus,\n SeriesStyles,\n} from '../types'\n\ne"
},
{
"path": "src/utils/buildAxis.linear.ts",
"chars": 18762,
"preview": "import { extent, max, median, min, range as d3Range } from 'd3-array'\nimport { stack, stackOffsetNone } from 'd3-shape'\n"
},
{
"path": "src/utils/chartContext.tsx",
"chars": 476,
"preview": "import * as React from 'react'\n\nimport { ChartContextValue } from '../types'\n\nconst chartContext = React.createContext<a"
},
{
"path": "src/utils/curveMonotone.ts",
"chars": 3423,
"preview": "// @ts-nocheck\nimport { CurveFactory } from 'd3-shape'\n\nfunction sign(x) {\n return x < 0 ? -1 : 1\n}\n\n// Calculate the s"
},
{
"path": "src/utils/spring.ts",
"chars": 4968,
"preview": "// Super fast physics simulations for JavaScript\n// Copyright 2014 Ralph Thomas\n// Licensed under the Apache License, Ve"
},
{
"path": "test/placeholder.test.tsx",
"chars": 138,
"preview": "import React from 'react'\nimport * as ReactDOM from 'react-dom'\n\ndescribe('Placeholder', () => {\n it('Will add some tes"
},
{
"path": "tsconfig.json",
"chars": 419,
"preview": "{\n \"compilerOptions\": {\n \"esModuleInterop\": true,\n \"isolatedModules\": true,\n \"jsx\": \"react\",\n \"lib\": [\"ESNe"
},
{
"path": "tsconfig.types.json",
"chars": 234,
"preview": "{\n \"extends\": \"./tsconfig.json\",\n \"compilerOptions\": {\n \"declaration\": true,\n \"declarationDir\": \"./types\",\n \""
},
{
"path": "typedoc.json",
"chars": 81,
"preview": "{\n \"entryPoints\": [\"src/index.ts\"],\n \"out\": \"typedocs\",\n \"theme\": \"minimal\"\n}\n"
},
{
"path": "typedocs/assets/css/main.css",
"chars": 123936,
"preview": ":root {\n --color-background: #fdfdfd;\n --color-text: #222;\n --color-text-aside: #707070;\n --color-link: #4da6ff;\n -"
},
{
"path": "typedocs/assets/js/main.js",
"chars": 155546,
"preview": "/*\n * ATTENTION: The \"eval\" devtool has been used (maybe by default in mode: \"development\").\n * This devtool is not neit"
},
{
"path": "typedocs/assets/js/search.js",
"chars": 68098,
"preview": "window.searchData = {\n kinds: {\n 64: 'Function',\n 1024: 'Property',\n 65536: 'Type literal',\n 4194304: 'Type"
},
{
"path": "typedocs/index.html",
"chars": 569040,
"preview": "<!DOCTYPE html>\n<html class=\"minimal no-js\">\n <head>\n <meta charset=\"utf-8\" />\n <meta http-equiv=\"X-UA-Compatible"
},
{
"path": "typedocs/modules.html",
"chars": 568921,
"preview": "<!DOCTYPE html>\n<html class=\"minimal no-js\">\n <head>\n <meta charset=\"utf-8\" />\n <meta http-equiv=\"X-UA-Compatible"
}
]
// ... and 1 more files (download for full content)
About this extraction
This page contains the full source code of the react-tools/react-charts GitHub repository, extracted and formatted as plain text for AI agents and large language models (LLMs). The extraction includes 160 files (1.8 MB), approximately 559.8k tokens, and a symbol index with 242 extracted functions, classes, methods, constants, and types. Use this with OpenClaw, Claude, ChatGPT, Cursor, Windsurf, or any other AI tool that accepts text input. You can copy the full output to your clipboard or download it as a .txt file.
Extracted by GitExtract — free GitHub repo to text converter for AI. Built by Nikandr Surkov.