├── docs ├── src │ ├── components │ │ ├── Logo.js │ │ ├── blog │ │ │ ├── intersection-observer │ │ │ │ ├── index.js │ │ │ │ ├── utils.js │ │ │ │ ├── manager.js │ │ │ │ └── intersection-observer.js │ │ │ ├── ExternalLink.js │ │ │ ├── dynamic.js │ │ │ ├── Heading.js │ │ │ └── Image.js │ │ ├── ExternalLink.js │ │ ├── Container.js │ │ ├── MDXComponents.js │ │ ├── Toc.module.css │ │ ├── Markdown.js │ │ ├── utils │ │ │ └── throttle.js │ │ ├── ArrowRight.js │ │ ├── clients │ │ │ ├── Client.js │ │ │ ├── ClientsMarquee.js │ │ │ └── Filters.js │ │ ├── Banner.js │ │ ├── Sticky.js │ │ ├── SidebarHeading.js │ │ ├── useClipboard.js │ │ ├── LazyImage.js │ │ ├── useIsMobile.js │ │ ├── useBytesSubmit.js │ │ ├── CarbonAds.js │ │ ├── useOverScroll.js │ │ ├── SidebarPost.js │ │ ├── BytesForm.js │ │ ├── Sidebar.js │ │ ├── Toc.js │ │ ├── TocNotion.js │ │ ├── SidebarNavLink.js │ │ ├── Search.js │ │ ├── forwardRefWithAs.js │ │ ├── Seo.js │ │ ├── ProgressiveImage.js │ │ ├── useTocHighlight.js │ │ ├── DocsPageFooter.js │ │ ├── Highlight2.js │ │ ├── useSearch.js │ │ ├── Nav.js │ │ ├── SidebarMobile.js │ │ ├── SidebarCategory.js │ │ ├── TWButton.js │ │ ├── Highlight.js │ │ ├── markdown.module.css │ │ ├── blog-markdown.module.css │ │ └── CodeBlock.js │ ├── images │ │ ├── favicon.png │ │ └── og-dark.png │ ├── styles │ │ ├── shared.module.css │ │ ├── post.module.css │ │ ├── blog.module.css │ │ └── index.css │ ├── lib │ │ ├── fs-utils.js │ │ ├── docs │ │ │ ├── findRouteByPath.js │ │ │ ├── utils.js │ │ │ └── md-loader.js │ │ └── get-route-context.js │ ├── manifests │ │ ├── getManifest.js │ │ └── manifest.json │ ├── pages │ │ ├── docs │ │ │ ├── installation.md │ │ │ ├── quick-start.md │ │ │ ├── overview.md │ │ │ └── getting-started.md │ │ ├── _document.js │ │ ├── examples │ │ │ ├── simple.md │ │ │ └── stress-test.md │ │ └── _app.js │ └── siteConfig.js ├── public │ ├── robots.txt │ └── images │ │ └── bytes-logo.png ├── jsconfig.json ├── .gitignore ├── postcss.config.js ├── README.md ├── tailwind.config.js ├── package.json └── next.config.js ├── examples └── simple │ ├── .prettierrc │ ├── src │ ├── react-app-env.d.ts │ ├── styles.css │ ├── components │ │ ├── Bar.tsx │ │ ├── Line.tsx │ │ ├── BarStacked.tsx │ │ ├── BarHorizontal.tsx │ │ ├── Area.tsx │ │ ├── BarHorizontalStacked.tsx │ │ ├── SparkChart.tsx │ │ ├── Band.tsx │ │ ├── Bubble.tsx │ │ ├── DarkMode.tsx │ │ ├── Steam.tsx │ │ ├── MultipleAxes.tsx │ │ ├── InteractionMode.tsx │ │ ├── DynamicContainer.tsx │ │ ├── SyncedCursors.tsx │ │ └── CustomStyles.tsx │ ├── ResizableBox.js │ ├── index.tsx │ └── useLagRadar.js │ ├── .babelrc │ ├── public │ ├── favicon.ico │ ├── manifest.json │ └── index.html │ ├── README.md │ ├── .eslintrc │ ├── .gitignore │ ├── tsconfig.json │ ├── .rescriptsrc.js │ └── package.json ├── .github ├── FUNDING.yml └── workflows │ └── publish.yml ├── media ├── logo.png ├── logo.sketch └── repo-dark.png ├── src ├── index.ts ├── hooks │ ├── useIsomorphicLayoutEffect.ts │ ├── useChanged.ts │ ├── useLatestWhen.ts │ ├── usePrevious.ts │ ├── useGetLatest.ts │ ├── usePortalElement.ts │ ├── useIsScrolling.ts │ ├── useRect.ts │ └── useSpring.ts ├── utils │ ├── chartContext.tsx │ ├── Utils.ts │ ├── curveMonotone.ts │ └── spring.ts └── components │ └── Tooltip.tsx ├── typedoc.json ├── typedocs └── assets │ └── images │ ├── icons.png │ ├── icons@2x.png │ ├── widgets.png │ └── widgets@2x.png ├── test └── placeholder.test.tsx ├── tsconfig.types.json ├── prettier.config.js ├── .vscode └── settings.json ├── tsconfig.json ├── .gitignore ├── .eslintrc ├── .babelrc.js ├── LICENSE ├── rollup.config.js ├── README.md └── package.json /docs/src/components/Logo.js: -------------------------------------------------------------------------------- 1 | -------------------------------------------------------------------------------- /examples/simple/.prettierrc: -------------------------------------------------------------------------------- 1 | {} 2 | -------------------------------------------------------------------------------- /.github/FUNDING.yml: -------------------------------------------------------------------------------- 1 | github: tannerlinsley 2 | -------------------------------------------------------------------------------- /docs/public/robots.txt: -------------------------------------------------------------------------------- 1 | User-agent: * 2 | Disallow: -------------------------------------------------------------------------------- /examples/simple/src/react-app-env.d.ts: -------------------------------------------------------------------------------- 1 | /// 2 | -------------------------------------------------------------------------------- /media/logo.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/TanStack/react-charts/HEAD/media/logo.png -------------------------------------------------------------------------------- /src/index.ts: -------------------------------------------------------------------------------- 1 | export { Chart } from './components/Chart' 2 | export * from './types' 3 | -------------------------------------------------------------------------------- /docs/jsconfig.json: -------------------------------------------------------------------------------- 1 | { 2 | "compilerOptions": { 3 | "baseUrl": "./src" 4 | } 5 | } 6 | -------------------------------------------------------------------------------- /media/logo.sketch: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/TanStack/react-charts/HEAD/media/logo.sketch -------------------------------------------------------------------------------- /media/repo-dark.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/TanStack/react-charts/HEAD/media/repo-dark.png -------------------------------------------------------------------------------- /docs/.gitignore: -------------------------------------------------------------------------------- 1 | .next 2 | .now 3 | .env 4 | .env.* 5 | node_modules 6 | *.log 7 | .DS_Store 8 | .vercel -------------------------------------------------------------------------------- /docs/postcss.config.js: -------------------------------------------------------------------------------- 1 | module.exports = { 2 | plugins: ['tailwindcss', 'postcss-preset-env'], 3 | }; 4 | -------------------------------------------------------------------------------- /examples/simple/.babelrc: -------------------------------------------------------------------------------- 1 | { 2 | "presets": ["react-app"], 3 | "plugins": ["styled-components"] 4 | } 5 | -------------------------------------------------------------------------------- /docs/src/components/blog/intersection-observer/index.js: -------------------------------------------------------------------------------- 1 | export { default } from './intersection-observer' 2 | -------------------------------------------------------------------------------- /docs/src/images/favicon.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/TanStack/react-charts/HEAD/docs/src/images/favicon.png -------------------------------------------------------------------------------- /docs/src/images/og-dark.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/TanStack/react-charts/HEAD/docs/src/images/og-dark.png -------------------------------------------------------------------------------- /typedoc.json: -------------------------------------------------------------------------------- 1 | { 2 | "entryPoints": ["src/index.ts"], 3 | "out": "typedocs", 4 | "theme": "minimal" 5 | } 6 | -------------------------------------------------------------------------------- /docs/public/images/bytes-logo.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/TanStack/react-charts/HEAD/docs/public/images/bytes-logo.png -------------------------------------------------------------------------------- /typedocs/assets/images/icons.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/TanStack/react-charts/HEAD/typedocs/assets/images/icons.png -------------------------------------------------------------------------------- /examples/simple/public/favicon.ico: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/TanStack/react-charts/HEAD/examples/simple/public/favicon.ico -------------------------------------------------------------------------------- /typedocs/assets/images/icons@2x.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/TanStack/react-charts/HEAD/typedocs/assets/images/icons@2x.png -------------------------------------------------------------------------------- /typedocs/assets/images/widgets.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/TanStack/react-charts/HEAD/typedocs/assets/images/widgets.png -------------------------------------------------------------------------------- /typedocs/assets/images/widgets@2x.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/TanStack/react-charts/HEAD/typedocs/assets/images/widgets@2x.png -------------------------------------------------------------------------------- /docs/src/styles/shared.module.css: -------------------------------------------------------------------------------- 1 | .layout img { 2 | margin: auto; 3 | max-width: 98%; 4 | display: block; 5 | height: auto; 6 | } 7 | -------------------------------------------------------------------------------- /examples/simple/README.md: -------------------------------------------------------------------------------- 1 | # Example 2 | 3 | To run this example: 4 | 5 | - `npm install` or `yarn` 6 | - `npm run start` or `yarn start` 7 | -------------------------------------------------------------------------------- /examples/simple/.eslintrc: -------------------------------------------------------------------------------- 1 | { 2 | "extends": ["react-app", "prettier"], 3 | "rules": { 4 | // "eqeqeq": 0, 5 | // "jsx-a11y/anchor-is-valid": 0 6 | } 7 | } 8 | -------------------------------------------------------------------------------- /src/hooks/useIsomorphicLayoutEffect.ts: -------------------------------------------------------------------------------- 1 | import React from 'react' 2 | 3 | export default typeof window !== 'undefined' 4 | ? React.useLayoutEffect 5 | : React.useEffect 6 | -------------------------------------------------------------------------------- /docs/src/lib/fs-utils.js: -------------------------------------------------------------------------------- 1 | import fs from 'fs'; 2 | import { promisify } from 'util'; 3 | export const readFile = promisify(fs.readFile); 4 | export const writeFile = promisify(fs.writeFile); -------------------------------------------------------------------------------- /test/placeholder.test.tsx: -------------------------------------------------------------------------------- 1 | import React from 'react' 2 | import * as ReactDOM from 'react-dom' 3 | 4 | describe('Placeholder', () => { 5 | it('Will add some tests', () => {}) 6 | }) 7 | -------------------------------------------------------------------------------- /docs/src/components/ExternalLink.js: -------------------------------------------------------------------------------- 1 | import * as React from 'react'; 2 | export function ExternalLink(props) { 3 | return ; 4 | } -------------------------------------------------------------------------------- /src/hooks/useChanged.ts: -------------------------------------------------------------------------------- 1 | import usePrevious from './usePrevious' 2 | 3 | export default function useChanged(val: any) { 4 | const previous = usePrevious(val) 5 | return val !== previous 6 | } 7 | -------------------------------------------------------------------------------- /docs/src/components/blog/ExternalLink.js: -------------------------------------------------------------------------------- 1 | import * as React from 'react'; 2 | export default function ExternalLink(props) { 3 | return ; 4 | } -------------------------------------------------------------------------------- /docs/src/components/Container.js: -------------------------------------------------------------------------------- 1 | import * as React from 'react'; 2 | import cn from 'classnames'; 3 | export const Container = props => { 4 | return
; 5 | }; 6 | Container.displayName = 'Container'; -------------------------------------------------------------------------------- /docs/src/manifests/getManifest.js: -------------------------------------------------------------------------------- 1 | import manifest from './manifest.json' 2 | 3 | const versions = {} 4 | 5 | export const versionList = Object.keys(versions) 6 | export const getManifest = tag => { 7 | return tag ? versions[tag] : manifest 8 | } 9 | -------------------------------------------------------------------------------- /docs/src/components/MDXComponents.js: -------------------------------------------------------------------------------- 1 | import * as React from 'react'; 2 | import dynamic from 'next/dynamic'; 3 | export default { 4 | // default tags 5 | pre: p => 
,
6 |   code: dynamic(() => import('./Highlight2')) // Counter: dynamic(() => import('./counter')),
7 | 
8 | };


--------------------------------------------------------------------------------
/src/hooks/useLatestWhen.ts:
--------------------------------------------------------------------------------
 1 | import React from 'react'
 2 | 
 3 | export default function useLatestWhen(obj: T, when: boolean = true) {
 4 |   const ref = React.useRef(when ? obj : null)
 5 | 
 6 |   if (when) {
 7 |     ref.current = obj
 8 |   }
 9 | 
10 |   return ref.current
11 | }
12 | 


--------------------------------------------------------------------------------
/docs/src/components/Toc.module.css:
--------------------------------------------------------------------------------
 1 | /* purgecss start ignore */
 2 | .contents__link {
 3 |   @apply text-gray-700;
 4 | }
 5 | 
 6 | .contents__link:hover {
 7 |   @apply text-blue-600;
 8 | }
 9 | 
10 | .contents__link--active {
11 |   @apply font-medium text-coral;
12 | }
13 | /* purgecss end ignore */
14 | 


--------------------------------------------------------------------------------
/tsconfig.types.json:
--------------------------------------------------------------------------------
 1 | {
 2 |   "extends": "./tsconfig.json",
 3 |   "compilerOptions": {
 4 |     "declaration": true,
 5 |     "declarationDir": "./types",
 6 |     "emitDeclarationOnly": true,
 7 |     "noEmit": false
 8 |   },
 9 |   "files": ["./src/index.ts"],
10 |   "exclude": ["./src/**/*"]
11 | }
12 | 


--------------------------------------------------------------------------------
/examples/simple/src/styles.css:
--------------------------------------------------------------------------------
 1 | body {
 2 |   background: rgba(0, 0, 0, 0.02);
 3 | }
 4 | 
 5 | .react-resizable {
 6 |   max-width: 100%;
 7 | }
 8 | 
 9 | .react-resizable-handle {
10 |   bottom: -10px;
11 |   right: -10px;
12 | }
13 | 
14 | .lagRadar {
15 |   position: fixed;
16 |   bottom: 0.5rem;
17 |   right: 0.5rem;
18 | }
19 | 


--------------------------------------------------------------------------------
/docs/src/components/Markdown.js:
--------------------------------------------------------------------------------
 1 | import * as React from 'react';
 2 | import markdownStyles from './markdown.module.css';
 3 | export const Markdown = ({
 4 |   html: content
 5 | }) => {
 6 |   return 
;
 9 | };
10 | Markdown.displayName = 'PostBody';


--------------------------------------------------------------------------------
/src/hooks/usePrevious.ts:
--------------------------------------------------------------------------------
 1 | import React from 'react'
 2 | 
 3 | import useIsomorphicLayoutEffect from './useIsomorphicLayoutEffect'
 4 | 
 5 | export default function usePrevious(val: T) {
 6 |   const ref = React.useRef()
 7 | 
 8 |   useIsomorphicLayoutEffect(() => {
 9 |     ref.current = val
10 |   }, [val])
11 | 
12 |   return ref.current
13 | }
14 | 


--------------------------------------------------------------------------------
/src/hooks/useGetLatest.ts:
--------------------------------------------------------------------------------
 1 | import React from 'react'
 2 | 
 3 | export default function useGetLatest(obj: T) {
 4 |   const ref = React.useRef(obj)
 5 |   const getterRef = React.useRef<() => T>()
 6 | 
 7 |   ref.current = obj
 8 |   if (!getterRef.current) {
 9 |     getterRef.current = () => ref.current
10 |   }
11 | 
12 |   return getterRef.current
13 | }
14 | 


--------------------------------------------------------------------------------
/prettier.config.js:
--------------------------------------------------------------------------------
 1 | module.exports = {
 2 |   printWidth: 80,
 3 |   tabWidth: 2,
 4 |   useTabs: false,
 5 |   semi: false,
 6 |   singleQuote: true,
 7 |   trailingComma: 'es5',
 8 |   bracketSpacing: true,
 9 |   jsxBracketSameLine: false,
10 |   arrowParens: 'avoid',
11 |   endOfLine: 'auto',
12 |   importOrder: ['^[@]', '[./]'],
13 |   importOrderSeparation: true,
14 | }
15 | 


--------------------------------------------------------------------------------
/docs/src/components/utils/throttle.js:
--------------------------------------------------------------------------------
 1 | export const throttle = (func, limit) => {
 2 |   let inThrottle;
 3 |   return function () {
 4 |     const args = arguments; // @ts-ignore
 5 | 
 6 |     const context = this;
 7 | 
 8 |     if (!inThrottle) {
 9 |       func.apply(context, args);
10 |       inThrottle = true;
11 |       setTimeout(() => inThrottle = false, limit);
12 |     }
13 |   };
14 | };


--------------------------------------------------------------------------------
/docs/src/components/ArrowRight.js:
--------------------------------------------------------------------------------
 1 | import * as React from 'react';
 2 | export function ArrowRight({
 3 |   fill = '#718096',
 4 |   width = 6,
 5 |   height = 10
 6 | }) {
 7 |   return 
 8 |       
 9 |     ;
10 | }


--------------------------------------------------------------------------------
/docs/src/components/clients/Client.js:
--------------------------------------------------------------------------------
 1 | import React from 'react'
 2 | import { LazyImage } from '../LazyImage'
 3 | export const Client = React.memo(({ name, image, style, ...rest }) => (
 4 |   
 5 |     
12 |   
13 | ))
14 | 


--------------------------------------------------------------------------------
/examples/simple/public/manifest.json:
--------------------------------------------------------------------------------
 1 | {
 2 |   "short_name": "React App",
 3 |   "name": "Create React App Sample",
 4 |   "icons": [
 5 |     {
 6 |       "src": "favicon.ico",
 7 |       "sizes": "64x64 32x32 24x24 16x16",
 8 |       "type": "image/x-icon"
 9 |     }
10 |   ],
11 |   "start_url": ".",
12 |   "display": "standalone",
13 |   "theme_color": "#000000",
14 |   "background_color": "#ffffff"
15 | }
16 | 


--------------------------------------------------------------------------------
/.vscode/settings.json:
--------------------------------------------------------------------------------
 1 | {
 2 |   "workbench.colorCustomizations": {
 3 |     "titleBar.activeBackground": "#a08600", // change this color!
 4 |     "titleBar.inactiveBackground": "#a08600", // change this color!
 5 |     "titleBar.activeForeground": "#ffffff", // change this color!
 6 |     "titleBar.inactiveForeground": "#ffffff" // change this color!
 7 |   },
 8 |   "typescript.tsdk": "node_modules/typescript/lib"
 9 | }
10 | 


--------------------------------------------------------------------------------
/docs/src/components/blog/dynamic.js:
--------------------------------------------------------------------------------
 1 | import dynamic from 'next/dynamic';
 2 | import ExtLink from './ExternalLink';
 3 | export default {
 4 |   // default tags
 5 |   ol: 'ol',
 6 |   ul: 'ul',
 7 |   li: 'li',
 8 |   p: 'p',
 9 |   blockquote: 'blockquote',
10 |   a: ExtLink,
11 |   Image: dynamic(() => import('./Image')),
12 |   Code: dynamic(() => import('../Highlight')) // Counter: dynamic(() => import('./counter')),
13 | 
14 | };


--------------------------------------------------------------------------------
/examples/simple/.gitignore:
--------------------------------------------------------------------------------
 1 | # See https://help.github.com/articles/ignoring-files/ for more about ignoring files.
 2 | 
 3 | # dependencies
 4 | /node_modules
 5 | /.pnp
 6 | .pnp.js
 7 | 
 8 | # testing
 9 | /coverage
10 | 
11 | # production
12 | /build
13 | 
14 | # misc
15 | .DS_Store
16 | .env.local
17 | .env.development.local
18 | .env.test.local
19 | .env.production.local
20 | 
21 | npm-debug.log*
22 | yarn-debug.log*
23 | yarn-error.log*
24 | 


--------------------------------------------------------------------------------
/docs/src/lib/docs/findRouteByPath.js:
--------------------------------------------------------------------------------
 1 | import { removeFromLast } from './utils';
 2 | // @ts-ignore
 3 | export function findRouteByPath(path, routes) {
 4 |   // eslint-disable-next-line
 5 |   for (const route of routes) {
 6 |     if (route.path && removeFromLast(route.path, '.') === path) {
 7 |       return route;
 8 |     }
 9 | 
10 |     const childPath = route.routes && findRouteByPath(path, route.routes);
11 |     if (childPath) return childPath;
12 |   }
13 | }


--------------------------------------------------------------------------------
/docs/src/components/Banner.js:
--------------------------------------------------------------------------------
 1 | export function Banner() {
 2 |   return null; // return (
 3 |   //   

 4 |   //     

 5 |   //       formium
 6 |   //       

 7 |   //         Hassle-free form storage for static sites →
 8 |   //       

 9 |   //     

10 |   //   

11 |   // );
12 | }


--------------------------------------------------------------------------------
/docs/src/pages/docs/installation.md:
--------------------------------------------------------------------------------
 1 | ---
 2 | id: installation
 3 | title: Installation
 4 | ---
 5 | 
 6 | You can install React Charts with [NPM](https://npmjs.com),
 7 | [Yarn](https://yarnpkg.com), or a good ol' `