add new count component

CHANGELOG.md

@@ -1,3 +1,6 @@
+# 13.1.0 - 5/12/22
+- [feature] add new count component and remove countup
+
 # 13.0.11 - 5/10/22
 - [chore] bump rdk / realayers
 

README.md

@@ -125,6 +125,7 @@ Additional features:
 - Auto Sizing
 - Bar Guidelines
 - Range Lines
+- Animated Counts
 - SSR
 
 ## 📦 Install

docs/utils/Count.story.mdx

@@ -0,0 +1,15 @@
+import { Meta, Story, ArgsTable } from '@storybook/addon-docs/blocks';
+import { Count } from '../../src';
+
+<Meta title="Docs/Utils/Count" />
+
+# Count
+
+---
+
+Count from one number to another.
+
+## API
+
+### [Count](https://github.com/reaviz/reaviz/blob/master/src/common/Count/Count.tsx)
+<ArgsTable of={Count} />

package.json

@@ -1,6 +1,6 @@
 {
   "name": "reaviz",
-  "version": "13.0.11",
+  "version": "13.1.0",
   "description": "Data Visualization using React",
   "scripts": {
     "start": "start-storybook -p 9010 -s public",
@@ -91,7 +91,6 @@
     "memoize-one": "^5.2.1",
     "rdk": "^6.0.2",
     "react-cool-dimensions": "^2.0.7",
-    "react-countup": "4.2.0",
     "react-fast-compare": "^3.2.0",
     "realayers": "^3.0.3",
     "transformation-matrix": "^2.9.0"

src/BarChart/BarChart.tsx

@@ -43,7 +43,6 @@ import {
   ChartContainerChildProps,
   ChartProps
 } from '../common/containers/ChartContainer';
-import bind from 'memoize-bind';
 import { CloneElement } from 'rdk';
 
 export interface BarChartProps extends ChartProps {

src/RadialGauge/RadialGaugeSeries/RadialGaugeValueLabel.tsx

@@ -1,8 +1,8 @@
 import React, { FC } from 'react';
 import { ChartShallowDataShape } from '../../common/data';
-import CountUp from 'react-countup';
 import classNames from 'classnames';
 import css from './RadialGaugeValueLabel.module.css';
+import { useCount } from '../../common/Count';
 
 export interface RadialGaugeValueLabelProps {
   /**
@@ -19,23 +19,19 @@ export interface RadialGaugeValueLabelProps {
 export const RadialGaugeValueLabel: FC<Partial<RadialGaugeValueLabelProps>> = ({
   data,
   className
-}) => (
-  <CountUp
-    start={0}
-    end={data.data as number}
-    delay={0}
-    duration={1}
-    separator=","
-  >
-    {({ countUpRef }) => (
-      <text
-        dy="-0.5em"
-        x="0"
-        y="15"
-        textAnchor="middle"
-        className={classNames(className, css.valueLabel)}
-        ref={countUpRef}
-      />
-    )}
-  </CountUp>
-);
+}) => {
+  const ref = useCount({
+    to: data.data as number
+  });
+
+  return (
+    <text
+      dy="-0.5em"
+      x="0"
+      y="15"
+      textAnchor="middle"
+      className={classNames(className, css.valueLabel)}
+      ref={ref}
+    />
+  );
+};

src/common/Count/Count.story.tsx

@@ -0,0 +1,19 @@
+import React from 'react';
+import { Count } from './Count';
+
+export default {
+  title: 'Utils/Count',
+  component: Count
+};
+
+export const Simple = () => (
+  <h1 style={{ color: 'white ' }}>
+    <Count from={0} to={50} />
+  </h1>
+);
+
+export const NonZeroStart = () => (
+  <h1 style={{ color: 'white ' }}>
+    <Count from={33} to={50} />
+  </h1>
+);

src/common/Count/Count.tsx

@@ -0,0 +1,15 @@
+import React, { FC } from 'react';
+import { CountProps, useCount } from './useCount';
+
+export const Count: FC<CountProps> = (props) => {
+  const ref = useCount(props);
+  return <span ref={ref} />;
+};
+
+Count.defaultProps = {
+  from: 0,
+  duration: 1,
+  delay: 0,
+  localize: true,
+  decimalPlaces: 0
+};

src/common/Count/index.ts

@@ -0,0 +1,2 @@
+export * from './Count';
+export * from './useCount';

src/common/Count/useCount.tsx

@@ -0,0 +1,86 @@
+import { animate } from 'framer-motion';
+import { useEffect, useRef } from 'react';
+
+export interface CountProps {
+  /**
+   * Number to animate to
+   */
+  to: number;
+
+  /**
+   * Number to animate from. Defaults 0.
+   */
+  from?: number;
+
+  /**
+   * Duration of the animation in seconds. Defaults 1.
+   */
+  duration?: number;
+
+  /**
+   * Delay of the animation. Defaults 0.
+   */
+  delay?: number;
+
+  /**
+   * Localize the number. Defaults true.
+   */
+  format?: boolean;
+
+  /**
+   * Number of decimal places. Defaults 0.
+   */
+  decimalPlaces?: number;
+}
+
+export const COUNT_DEFAULTS = {
+  from: 0,
+  duration: 1,
+  delay: 0,
+  format: true,
+  decimalPlaces: 0
+};
+
+export const useCount = ({
+  from,
+  to,
+  duration,
+  delay,
+  decimalPlaces,
+  format
+}: CountProps) => {
+  const nodeRef = useRef<any | null>(null);
+
+  from = from || COUNT_DEFAULTS.from;
+  duration = duration || COUNT_DEFAULTS.duration;
+  delay = delay || COUNT_DEFAULTS.delay;
+  format = format || COUNT_DEFAULTS.format;
+  decimalPlaces = decimalPlaces || COUNT_DEFAULTS.decimalPlaces;
+
+  useEffect(() => {
+    const node = nodeRef.current;
+
+    const controls = animate(from, to, {
+      duration,
+      delay,
+      onUpdate(value) {
+        let formatted: number | string = value;
+        if (decimalPlaces) {
+          formatted = Number(value.toFixed(decimalPlaces));
+        } else {
+          formatted = Number(value.toFixed(0));
+        }
+
+        if (format) {
+          formatted = formatted.toLocaleString();
+        }
+
+        node.textContent = formatted as string;
+      }
+    });
+
+    return () => controls.stop();
+  }, [from, to, duration, delay, decimalPlaces, format]);
+
+  return nodeRef;
+};

src/common/index.ts

@@ -13,3 +13,4 @@ export * from './utils';
 export * from './ZoomPan';
 export * from './Motion';
 export * from './color';
+export * from './Count';

yarn.lock

@@ -5652,11 +5652,6 @@ cosmiconfig@^7.0.0:
     path-type "^4.0.0"
     yaml "^1.10.0"
 
-countup.js@^1.9.3:
-  version "1.9.3"
-  resolved "https://registry.yarnpkg.com/countup.js/-/countup.js-1.9.3.tgz#ce3e50cd7160441e478f07da31895edcc0f1c9dd"
-  integrity sha1-zj5QzXFgRB5HjwfaMYle3MDxyd0=
-
 cp-file@^7.0.0:
   version "7.0.0"
   resolved "https://registry.yarnpkg.com/cp-file/-/cp-file-7.0.0.tgz#b9454cfd07fe3b974ab9ea0e5f29655791a9b8cd"
@@ -13318,15 +13313,6 @@ react-cool-dimensions@^2.0.7:
   resolved "https://registry.yarnpkg.com/react-cool-dimensions/-/react-cool-dimensions-2.0.7.tgz#2fe6657608f034cd7c89f149ed14e79cf1cb2d50"
   integrity sha512-z1VwkAAJ5d8QybDRuYIXTE41RxGr5GYsv1bQhbOBE8cMfoZQZpcF0odL64vdgrQVzat2jayedj1GoYi80FWcbA==
 
-react-countup@4.2.0:
-  version "4.2.0"
-  resolved "https://registry.yarnpkg.com/react-countup/-/react-countup-4.2.0.tgz#ecbcd85182ceb27cea5a9227219f8fad8443cd52"
-  integrity sha512-CkmtvYOZV0iW8byfrZ96OKPDWwmvpS7rcfTKU9Ngn+oYRVoZrZ5quoKC2gbUS66Iona6vAoko6f8YxXJJuP2FQ==
-  dependencies:
-    countup.js "^1.9.3"
-    prop-types "^15.6.2"
-    warning "^4.0.2"
-
 react-docgen-typescript-loader@^3.7.2:
   version "3.7.2"
   resolved "https://registry.yarnpkg.com/react-docgen-typescript-loader/-/react-docgen-typescript-loader-3.7.2.tgz#45cb2305652c0602767242a8700ad1ebd66bbbbd"