Integrate bjbrewster rerender fixes

README.md

@@ -100,7 +100,7 @@ The props for the chart:
 |-----------------|-----------------------------|----------------------------------------------------------------|------------------------|
 | id              | PropTypes.string.isRequired | Used for the identification of the div surrounding the chart   |                        |
 | className       | PropTypes.string            | Add `className` to the div container                           |                        |
-| style           | PropTypes.object            | Add `style` to the div container                               | { width: '100%' }      |
+| style           | PropTypes.object            | Add `style` to the div container                               |                        |
 | marginInPercent | PropTypes.number            | Margin for the chart inside the containing SVG element         | 0.05                   |
 | cornerRadius    | PropTypes.number            | Corner radius for the elements in the chart                    | 6                      |
 | nrOfLevels      | PropTypes.number            | The number of elements displayed in the arc                    | 3                      |

package.json

@@ -52,6 +52,7 @@
     "babel-preset-react-app": "^8.0.0",
     "cross-env": "^5.2.1",
     "gh-pages": "^2.1.1",
+    "prettier": "^2.6.2",
     "react": "^17.0.1",
     "react-bootstrap": "^1.4.0",
     "react-dom": "^17.0.1",

src/App.js

@@ -10,7 +10,7 @@ const App = () => {
 	useEffect(() => {
 		const timer = setTimeout(() => {
       setCurrentPercent(Math.random());
-      setArcs([0.1, 0.5, 0.4])
+      setArcs([Math.random(), Math.random(), Math.random()])
 		}, 3000);
 
 		return () => {

src/__tests__/App.test.js

@@ -0,0 +1,9 @@
+import React from 'react';
+import { render, unmountComponentAtNode } from 'react-dom';
+import App from '../App';
+
+it('renders without crashing', () => {
+  const container = document.createElement('div');
+  render(<App />, container);
+  unmountComponentAtNode(container);
+});

src/__tests__/GaugeChart.test.js

@@ -0,0 +1,90 @@
+import prettier from "prettier";
+import React from "react";
+import { render, unmountComponentAtNode } from "react-dom";
+import { act } from "react-dom/test-utils";
+
+import GaugeChart from "../lib/GaugeChart";
+
+const pretty = (html) => prettier.format(html, { parser: "html" });
+
+let container = null;
+beforeEach(() => {
+  // setup a DOM element as a render target
+  container = document.createElement("div");
+  document.body.appendChild(container);
+});
+
+afterEach(() => {
+  // cleanup on exiting
+  unmountComponentAtNode(container);
+  container.remove();
+  container = null;
+
+  jest.clearAllMocks();
+  jest.restoreAllMocks();
+});
+
+it("renders", async () => {
+  await act(async () => {
+    render(<GaugeChart />, container);
+  });
+
+  expect(pretty(container.innerHTML)).toMatchInlineSnapshot(`
+    "<div style=\\"width: 100%\\">
+      <svg width=\\"500\\" height=\\"225\\">
+        <g transform=\\"translate(75, 12.5)\\">
+          <g class=\\"doughnut\\" transform=\\"translate(175, 175)\\">
+            <g class=\\"arc\\">
+              <path
+                d=\\"M-168.60127553750542,-5.602150107897012A6,6,0,0,1,-174.5871196394287,-12.01406076261525A175,175,0,0,1,-97.69804164274903,-145.1898503999907A6,6,0,0,1,-89.15224207800527,-143.211912671991L-77.62074287924287,-123.23877017229483A6,6,0,0,1,-79.41346124844473,-115.29745085014572A140,140,0,0,0,-139.5572520520363,-11.125349418531352A6,6,0,0,1,-145.5382771399807,-5.60215010789698Z\\"
+                style=\\"fill: rgb(0, 255, 0)\\"
+              ></path>
+            </g>
+            <g class=\\"arc\\">
+              <path
+                d=\\"M-79.4490334595002,-148.81406277988805A6,6,0,0,1,-76.88907799667973,-157.20391116260598A175,175,0,0,1,76.88907799667976,-157.20391116260592A6,6,0,0,1,79.4490334595002,-148.81406277988802L67.91753426073781,-128.84092028019182A6,6,0,0,1,60.14379080359154,-126.4228002686771A140,140,0,0,0,-60.14379080359159,-126.42280026867705A6,6,0,0,1,-67.91753426073787,-128.8409202801918Z\\"
+                style=\\"fill: rgb(255, 255, 0)\\"
+              ></path>
+            </g>
+            <g class=\\"arc\\">
+              <path
+                d=\\"M89.15224207800526,-143.21191267199106A6,6,0,0,1,97.698041642749,-145.18985039999075A175,175,0,0,1,174.5871196394287,-12.014060762615255A6,6,0,0,1,168.60127553750544,-5.6021501078970175L145.5382771399807,-5.602150107897014A6,6,0,0,1,139.5572520520363,-11.125349418531385A140,140,0,0,0,79.41346124844475,-115.2974508501457A6,6,0,0,1,77.62074287924288,-123.23877017229479Z\\"
+                style=\\"fill: rgb(255, 0, 0)\\"
+              ></path>
+            </g>
+          </g>
+          <g class=\\"needle\\" transform=\\"translate(175, 175)\\">
+            <path
+              d=\\"M -12.839262969984572 -2.57827057593821 L -29.742885708588698 -98.28918969340855 L 12.839262969984572 -10.921729424061791\\"
+              fill=\\"#464A4F\\"
+            ></path>
+            <circle cx=\\"0\\" cy=\\"-6.75\\" r=\\"13.5\\" fill=\\"#464A4F\\"></circle>
+          </g>
+          <g class=\\"text-group\\" transform=\\"translate(175, 107.5)\\">
+            <text
+              style=\\"
+                font-size: 40.90909090909091px;
+                fill: #fff;
+                text-anchor: middle;
+              \\"
+            >
+              40%
+            </text>
+          </g>
+        </g>
+      </svg>
+    </div>
+    "
+  `);
+});
+
+it("should only render chart once", () => {
+  const utils = require("../lib/GaugeChart/utils");
+  const renderChart = jest.spyOn(utils, "renderChart");
+
+  act(() => {
+    render(<GaugeChart />, container);
+  });  
+
+  expect(renderChart).toHaveBeenCalledTimes(1);
+});

src/__tests__/hooks.test.js

@@ -0,0 +1,66 @@
+import React from "react";
+import { render, unmountComponentAtNode } from "react-dom";
+import { act } from "react-dom/test-utils";
+
+import { useDeepCompareEffect } from '../lib/GaugeChart/hooks'
+
+let container = null;
+beforeEach(() => {
+  // setup a DOM element as a render target
+  container = document.createElement("div");
+  document.body.appendChild(container);
+});
+
+afterEach(() => {
+  // cleanup on exiting
+  unmountComponentAtNode(container);
+  container.remove();
+  container = null;
+});
+
+describe("useDeepCompareEffect", () => {
+  const Test = ({ callback, dependencies }) => {
+    useDeepCompareEffect(callback, dependencies);
+    return null;
+  }
+
+  const callback = jest.fn()
+
+  beforeEach(() => {
+    callback.mockReset();
+  })
+
+  it('calls callback on initial render', () => {
+    act(() => {
+      render(<Test callback={callback} dependencies={['foo']} />, container);
+    });
+
+    expect(callback).toHaveBeenCalled();
+  });
+
+  it('calls callback when dependencies change', () => {
+    act(() => { render(<Test callback={callback} dependencies={['foo']} />, container); });
+    act(() => { render(<Test callback={callback} dependencies={['bar']} />, container); });
+    act(() => { render(<Test callback={callback} dependencies={['baz']} />, container); });
+    act(() => { render(<Test callback={callback} dependencies={[42]} />, container); });
+    act(() => { render(<Test callback={callback} dependencies={[true]} />, container); });
+
+    expect(callback).toHaveBeenCalledTimes(5);
+  });
+
+  it('does not call callback when dependencies do not change', () => { 
+    act(() => { render(<Test callback={callback} dependencies={['foo']} />, container); });
+    act(() => { render(<Test callback={callback} dependencies={['foo']} />, container); });
+    act(() => { render(<Test callback={callback} dependencies={['foo']} />, container); });
+
+    expect(callback).toHaveBeenCalledTimes(1);
+  });
+
+  it('does not call callback when callback function changed', () => { 
+    act(() => { render(<Test callback={() => callback()} dependencies={['foo']} />, container); });
+    act(() => { render(<Test callback={() => callback()} dependencies={['foo']} />, container); });
+    act(() => { render(<Test callback={() => callback()} dependencies={['foo']} />, container); });
+
+    expect(callback).toHaveBeenCalledTimes(1);
+  });
+});

src/lib/GaugeChart/hooks.js

@@ -0,0 +1,8 @@
+import { useEffect } from "react";
+
+// A simple useEffect alternative for dependencies with arrays/objects by serialising to JSON string.
+// As recommended by Facebook guru Dan Abramov (gaearon) for small objects:
+// https://github.com/facebook/react/issues/14476#issuecomment-471199055
+export const useDeepCompareEffect = (effect, deps) => {
+  useEffect(effect, [JSON.stringify(deps)]);
+};