Mucho updates

Author: tannerlinsley

.github/workflows/publish.yml

@@ -0,0 +1,45 @@
+name: react-charts publish
+on:
+  push:
+    branches:
+      - 'master'
+  pull_request:
+
+jobs:
+  # test:
+  #   name: 'node ${{ matrix.node }} ${{ matrix.os }} '
+  #   runs-on: '${{ matrix.os }}'
+  #   strategy:
+  #     matrix:
+  #       os: [ubuntu-latest]
+  #       node: [12]
+  #   steps:
+  #     - uses: actions/setup-node@v1
+  #       with:
+  #         node-version: ${{ matrix.node }}
+  #     - uses: actions/checkout@v2
+  #       with:
+  #         fetch-depth: 1
+  #     - run: npm i -g yarn
+  #     - run: yarn --frozen-lockfile
+  #     - run: yarn test:ci
+
+  publish-module:
+    name: 'Publish Module to NPM'
+    # needs: test
+    if: github.ref == 'refs/heads/master' #publish only when merged in master, not on PR
+    runs-on: ubuntu-latest
+    steps:
+      - uses: actions/checkout@v2
+        with:
+          fetch-depth: 1
+      - uses: actions/setup-node@v1
+        with:
+          node-version: 12
+          registry-url: https://registry.npmjs.org/
+      - run: npm i -g yarn
+      - run: yarn --frozen-lockfile
+      - run: npx semantic-release@17
+        env:
+          NODE_AUTH_TOKEN: ${{secrets.npm_token}}
+          GH_TOKEN: ${{secrets.GH_TOKEN}}

README.md

@@ -29,6 +29,10 @@ Enjoy this library? Try them all! [React Table](https://github.com/tannerlinsley
 
 ### [Become a Sponsor](https://github.com/sponsors/tannerlinsley/)
 
+### React Charts 2.x.x is under-construction!
+
+> **The `@latest` distribution of the `react-charts` npm package currently points to version `2.0.0-beta.7` and will remain there until 2.x.x is stable. To use the bleeding-edge version of React Charts, please install using the `@next` distribution channel as directed in the docs.**
+
 ## Features
 
 - Line, Bar, Bubble, & Area Charts

package.json

@@ -1,6 +1,6 @@
 {
   "name": "react-charts",
-  "version": "2.0.0-beta.6",
+  "version": "2.0.0-beta.7",
   "description": "Charts for React",
   "author": "tannerlinsley",
   "license": "MIT",
@@ -23,6 +23,12 @@
     "format": "prettier {src,src/**,example/src,example/src/**}/*.{md,js,jsx,tsx} --write",
     "doctoc": "npx doctoc --maxlevel 2 README.md"
   },
+  "release": {
+    "branches": [
+      "master",
+      "next"
+    ]
+  },
   "files": [
     "dist"
   ],
@@ -40,6 +46,7 @@
     "@babel/preset-env": "^7.9.0",
     "@babel/preset-react": "^7.9.4",
     "@rollup/plugin-node-resolve": "^7.1.1",
+    "@rollup/plugin-replace": "^2.3.2",
     "@svgr/rollup": "^5.3.0",
     "babel-core": "7.0.0-bridge.0",
     "babel-eslint": "10.1.0",
@@ -57,6 +64,7 @@
     "eslint-plugin-react": "7.19.0",
     "eslint-plugin-react-hooks": "2.5.1",
     "eslint-plugin-standard": "^4.0.1",
+    "jest": "^26.0.1",
     "react": "^16.13.1",
     "react-dom": "^16.13.1",
     "rollup": "^2.2.0",
@@ -65,6 +73,7 @@
     "rollup-plugin-node-resolve": "^5.2.0",
     "rollup-plugin-peer-deps-external": "^2.2.2",
     "rollup-plugin-size": "^0.2.2",
-    "rollup-plugin-terser": "^5.3.0"
+    "rollup-plugin-terser": "^5.3.0",
+    "rollup-plugin-visualizer": "^4.0.4"
   }
 }

rollup.config.js

@@ -1,7 +1,11 @@
 import babel from 'rollup-plugin-babel'
 import { terser } from 'rollup-plugin-terser'
 import size from 'rollup-plugin-size'
-import resolve from '@rollup/plugin-node-resolve'
+import externalDeps from 'rollup-plugin-peer-deps-external'
+import resolve from 'rollup-plugin-node-resolve'
+import commonJS from 'rollup-plugin-commonjs'
+import visualizer from 'rollup-plugin-visualizer'
+import replace from '@rollup/plugin-replace'
 
 const external = ['react']
 
@@ -10,6 +14,16 @@ const globals = {
 }
 
 export default [
+  {
+    input: 'src/index.js',
+    output: {
+      file: 'dist/react-charts.mjs',
+      format: 'es',
+      sourcemap: true,
+    },
+    external,
+    plugins: [resolve(), babel(), commonJS(), externalDeps()],
+  },
   {
     input: 'src/index.js',
     output: {
@@ -18,7 +32,7 @@ export default [
       sourcemap: true,
     },
     external,
-    plugins: [resolve(), babel(), terser()],
+    plugins: [resolve(), babel(), commonJS(), externalDeps(), terser()],
   },
   {
     input: 'src/index.js',
@@ -30,7 +44,7 @@ export default [
       globals,
     },
     external,
-    plugins: [resolve(), babel()],
+    plugins: [resolve(), babel(), commonJS(), externalDeps()],
   },
   {
     input: 'src/index.js',
@@ -42,6 +56,15 @@ export default [
       globals,
     },
     external,
-    plugins: [resolve(), babel(), terser(), size()],
+    plugins: [
+      replace({ 'process.env.NODE_ENV': `"production"`, delimiters: ['', ''] }),
+      resolve(),
+      babel(),
+      commonJS(),
+      externalDeps(),
+      terser(),
+      size(),
+      visualizer(),
+    ],
   },
 ]

size-plugin.json

@@ -1 +1 @@
-[{"timestamp":1585154943498,"files":[{"filename":"react-charts.production.min.js","size":16475,"delta":16475}]}]
+[{"timestamp":1590788251975,"files":[{"filename":"react-charts.production.min.js","size":36178,"delta":19703}]},{"timestamp":1585154943498,"files":[{"filename":"react-charts.production.min.js","size":16475,"delta":16475}]}]

src/components/AxisLinear.js

@@ -216,7 +216,7 @@ export default function AxisLinear({
         Math.max(tickSizeInner, tickSizeOuter) + // Add tick size
         tickPadding + // Add tick padding
         // Add the height of the largest label
-        Math.max(...labelDims.map(d => Math.ceil(d.height)))
+        Math.max(0, ...labelDims.map(d => Math.ceil(d.height)))
     } else {
       // Add height overflow from the first and last ticks
       top = Math.ceil(firstLabelDim.height / 2)
@@ -225,7 +225,7 @@ export default function AxisLinear({
         Math.max(tickSizeInner, tickSizeOuter) + // Add tick size
         tickPadding + // Add tick padding
         // Add the width of the largest label
-        Math.max(...labelDims.map(d => Math.ceil(d.width)))
+        Math.max(0, ...labelDims.map(d => Math.ceil(d.width)))
     }
 
     const newDimensions = {

src/components/Chart.js

@@ -90,7 +90,7 @@ export default function Chart({
   const onHoverRef = useLatestRef(onHover)
 
   const responsiveElRef = React.useRef()
-  const [{ width, height }] = useHyperResponsive(responsiveElRef)
+  const { width, height } = useHyperResponsive(responsiveElRef)
 
   getSeriesID = React.useCallback(Utils.normalizeGetter(getSeriesID), [
     getSeriesID,

src/components/TooltipRenderer.js

@@ -27,6 +27,7 @@ export default function TooltipRenderer(props) {
     formatTertiary,
     getStyle,
     dark,
+    tooltip,
   } = props
 
   if (!datum) {
@@ -65,6 +66,10 @@ export default function TooltipRenderer(props) {
     sortedGroupDatums.reverse()
   }
 
+  if (tooltip.invert) {
+    sortedGroupDatums.reverse()
+  }
+
   const resolvedShowCount = showCount % 2 === 0 ? showCount : showCount + 1
   const length = sortedGroupDatums.length
 

src/hooks/useHyperResponsive.js

@@ -1,78 +1,40 @@
-import React from "react";
-//
-import onResize from "../utils/detectElementResize";
+import React from 'react'
 
-export default function useHyperResponsive(ref) {
-  const [{ width, height }, setState] = React.useState({
-    width: 0,
-    height: 0
-  });
+import observeRect from '@reach/observe-rect'
 
-  const dimsRef = React.useRef();
-  dimsRef.current = {
-    width,
-    height
-  };
+import useIsomorphicLayoutEffect from './useIsomorphicLayoutEffect'
 
-  const resize = React.useCallback(
-    () => {
-      if (!ref.current) {
-        return;
-      }
+export default function useRect(nodeRef) {
+  const [element, setElement] = React.useState(nodeRef.current?.parentElement)
+  const [rect, setRect] = React.useState({ width: 0, height: 0 })
+  const initialRectSet = React.useRef(false)
 
-      const computed = window.getComputedStyle(ref.current.parentElement);
+  useIsomorphicLayoutEffect(() => {
+    if (nodeRef.current?.parentElement !== element) {
+      setElement(nodeRef.current?.parentElement)
+    }
+  })
 
-      const {
-        paddingTop,
-        paddingBottom,
-        paddingLeft,
-        paddingRight,
-        boxSizing,
-        borderTopWidth,
-        borderLeftWidth,
-        borderRightWidth,
-        borderBottomWidth
-      } = computed;
+  useIsomorphicLayoutEffect(() => {
+    if (element && !initialRectSet.current) {
+      initialRectSet.current = true
+      setRect(element.getBoundingClientRect())
+    }
+  }, [element])
 
-      let { width: newWidth, height: newHeight } = computed;
+  React.useEffect(() => {
+    if (!element) {
+      return
+    }
 
-      newWidth = parseInt(newWidth);
-      newHeight = parseInt(newHeight);
+    const observer = observeRect(element, setRect)
 
-      if (boxSizing === "border-box") {
-        newWidth -= parseInt(paddingLeft);
-        newWidth -= parseInt(paddingRight);
-        newHeight -= parseInt(paddingTop);
-        newHeight -= parseInt(paddingBottom);
+    observer.observe()
 
-        newWidth -= parseInt(borderLeftWidth);
-        newWidth -= parseInt(borderRightWidth);
-        newHeight -= parseInt(borderTopWidth);
-        newHeight -= parseInt(borderBottomWidth);
-      }
+    return () => {
+      observer.unobserve()
+    }
+  }, [element])
 
-      if (
-        newWidth !== dimsRef.current.width ||
-        newHeight !== dimsRef.current.height
-      ) {
-        setState(() => ({
-          width: newWidth,
-          height: newHeight
-        }));
-      }
-    },
-    [ref]
-  );
-
-  React.useEffect(
-    () => {
-      const stopListening = onResize(ref.current.parentElement, resize);
-      return () => {
-        stopListening();
-      };
-    },
-    [ref, resize]
-  );
-
-  return [{ width, height }];
+  return { width: rect.width, height: rect.height }
 }

src/hooks/useIsomorphicLayoutEffect.js

@@ -0,0 +1,5 @@
+import React from 'react'
+
+export default typeof window !== 'undefined'
+  ? React.useLayoutEffect
+  : React.useEffect