@danchitnis/react-fps-stats - npm Package Compare versions

Comparing version 0.2.0 to 0.3.0

dist/index.d.ts

 /// <reference types="react" />
 declare type Props = {
-    color?: string;
+    barColor?: string;
+    fontColor?: string;
     fontSize?: string;
     capacity: number;
 };
-export default function FPSStat({ color, fontSize, capacity }: Props): JSX.Element;
+export default function FPSStat({ fontColor, fontSize, barColor, capacity }: Props): JSX.Element;
 export {};

dist/index.esm.js

@@ -1,6 +0,9 @@
-import React, { useState, useEffect } from 'react';
+import React, { useState, useRef, useEffect } from 'react';
 
-const baseColor = "rgba(0,255,255,1)";
-function FPSStat({ color, fontSize, capacity }) {
+const baseBarColor = "rgba(0,255,255,1)";
+const baseFontColor = "rgba(0,255,255,1)";
+function FPSStat({ fontColor, fontSize, barColor, capacity }) {
     const [fps, setFps] = useState([0]);
+    const canvasMain = useRef(null);
+    //let ctx: CanvasRenderingContext2D;
     useEffect(() => {
@@ -25,2 +28,17 @@ let afRequest = 0;
                 prevTime = currentTime;
+                const maxFps = Math.max.apply(Math.max, fpsList);
+                if (canvasMain.current) {
+                    const ctx = canvasMain.current.getContext("2d");
+                    const w = canvasMain.current.width;
+                    const h = canvasMain.current.height;
+                    if (ctx) {
+                        ctx.clearRect(0, 0, w, h);
+                        ctx.fillStyle = barColor ? barColor : baseBarColor;
+                        fpsList.forEach((e, i) => {
+                            const rh = e / maxFps;
+                            const ri = capacity - i - 1;
+                            ctx.fillRect((ri * w) / capacity, h * (1 - rh), w / capacity, rh * h);
+                        });
+                    }
+                }
             }
@@ -41,3 +59,3 @@ afRequest = requestAnimationFrame(calcFPS);
         padding: "3px",
-        color: color == undefined ? baseColor : color,
+        color: fontColor == undefined ? baseFontColor : fontColor,
         fontSize: fontSize == undefined ? "0.75em" : fontSize,
@@ -47,4 +65,5 @@ fontFamily: "Helvetica, Arial, sans-serif",
     };
-    const maxFps = Math.max.apply(Math.max, fps);
-    const barWidth = 100 / capacity;
+    const canvasStyle = {
+        width: "100%",
+    };
     return (React.createElement("div", { style: wrapperStyle },
@@ -54,6 +73,3 @@ React.createElement("span", { style: { zIndex: 101 } },
             " FPS"),
-        React.createElement("svg", { style: { height: "100%", width: "100%", overflow: "visible" } }, fps.map((fpsNow, i) => {
-            const height = fpsNow == 0 ? 0 : (100 * fpsNow) / maxFps;
-            return (React.createElement("rect", { key: i, x: `${100 - barWidth - i * barWidth}%`, y: `${100 - height}%`, width: `${barWidth * 1.2}%`, height: `${height}%`, fill: color == undefined ? baseColor : color }));
-        }))));
+        React.createElement("canvas", { ref: canvasMain, style: canvasStyle })));
 }
@@ -60,0 +76,0 @@

dist/index.js

@@ -8,5 +8,8 @@ 'use strict';
 
-const baseColor = "rgba(0,255,255,1)";
-function FPSStat({ color, fontSize, capacity }) {
+const baseBarColor = "rgba(0,255,255,1)";
+const baseFontColor = "rgba(0,255,255,1)";
+function FPSStat({ fontColor, fontSize, barColor, capacity }) {
     const [fps, setFps] = React.useState([0]);
+    const canvasMain = React.useRef(null);
+    //let ctx: CanvasRenderingContext2D;
     React.useEffect(() => {
@@ -31,2 +34,17 @@ let afRequest = 0;
                 prevTime = currentTime;
+                const maxFps = Math.max.apply(Math.max, fpsList);
+                if (canvasMain.current) {
+                    const ctx = canvasMain.current.getContext("2d");
+                    const w = canvasMain.current.width;
+                    const h = canvasMain.current.height;
+                    if (ctx) {
+                        ctx.clearRect(0, 0, w, h);
+                        ctx.fillStyle = barColor ? barColor : baseBarColor;
+                        fpsList.forEach((e, i) => {
+                            const rh = e / maxFps;
+                            const ri = capacity - i - 1;
+                            ctx.fillRect((ri * w) / capacity, h * (1 - rh), w / capacity, rh * h);
+                        });
+                    }
+                }
             }
@@ -47,3 +65,3 @@ afRequest = requestAnimationFrame(calcFPS);
         padding: "3px",
-        color: color == undefined ? baseColor : color,
+        color: fontColor == undefined ? baseFontColor : fontColor,
         fontSize: fontSize == undefined ? "0.75em" : fontSize,
@@ -53,4 +71,5 @@ fontFamily: "Helvetica, Arial, sans-serif",
     };
-    const maxFps = Math.max.apply(Math.max, fps);
-    const barWidth = 100 / capacity;
+    const canvasStyle = {
+        width: "100%",
+    };
     return (React__default.createElement("div", { style: wrapperStyle },
@@ -60,6 +79,3 @@ React__default.createElement("span", { style: { zIndex: 101 } },
             " FPS"),
-        React__default.createElement("svg", { style: { height: "100%", width: "100%", overflow: "visible" } }, fps.map((fpsNow, i) => {
-            const height = fpsNow == 0 ? 0 : (100 * fpsNow) / maxFps;
-            return (React__default.createElement("rect", { key: i, x: `${100 - barWidth - i * barWidth}%`, y: `${100 - height}%`, width: `${barWidth * 1.2}%`, height: `${height}%`, fill: color == undefined ? baseColor : color }));
-        }))));
+        React__default.createElement("canvas", { ref: canvasMain, style: canvasStyle })));
 }
@@ -66,0 +82,0 @@

package.json

 {
   "name": "@danchitnis/react-fps-stats",
-  "version": "0.2.0",
+  "version": "0.3.0",
   "description": "FPS Stats in React",
@@ -19,3 +19,3 @@ "repository": "https://github.com/danchitnis/react-fps-stats",
   "peerDependencies": {
-    "@types/react": "^16.9.35",
+    "@types/react": "^16.9.36",
     "@types/react-dom": "^16.9.8",
@@ -29,3 +29,3 @@ "react": "^16.13.1",
     "react-dom": "^16.13.1",
-    "rollup": "^2.10.9",
+    "rollup": "^2.16.1",
     "rollup-plugin-commonjs": "^10.1.0",
@@ -38,6 +38,6 @@ "rollup-plugin-node-resolve": "^5.2.0",
   "devDependencies": {
-    "eslint": "^7.1.0",
+    "eslint": "^7.2.0",
     "eslint-config-standard": "^14.1.1",
     "eslint-config-standard-react": "^9.2.0",
-    "eslint-plugin-import": "^2.20.2",
+    "eslint-plugin-import": "^2.21.2",
     "eslint-plugin-node": "^11.1.0",
@@ -47,5 +47,5 @@ "eslint-plugin-promise": "^4.2.1",
     "eslint-plugin-standard": "^4.0.1",
-    "now": "^19.0.1",
+    "now": "^19.1.0",
     "prettier-eslint-cli": "^5.0.0",
-    "typescript": "^3.9.3"
+    "typescript": "^3.9.5"
   },
@@ -52,0 +52,0 @@ "licence": "MIT",

New alerts

License Policy Violation

License

This package is not allowed per your license policy. Review the package's license to ensure compliance.

Found 1 instance in 1 package

Fixed alerts

License Policy Violation

License

This package is not allowed per your license policy. Review the package's license to ensure compliance.

Found 1 instance in 1 package

Improved metrics

Total package byte prevSize

215262

increased by1.36%

Lines of code

335

increased by13.56%

Dependency changes

• Updatedrollup@^2.16.1