Skip to content

Commit

Permalink
Merge pull request #151 from rsolomon/rs--remove-default-props
Browse files Browse the repository at this point in the history 
Refactor: Merge defaultProps with props in Component
  • Loading branch information
@Martin36
Martin36 authored Nov 20, 2023
2 parents c4bc1dd + 02faceb commit 8a9c63c
Show file tree
Hide file tree
Showing 2 changed files with 104 additions and 57 deletions.
79 changes: 50 additions & 29 deletions dist/GaugeChart/index.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -19,6 +19,12 @@ function _getRequireWildcardCache() { if (typeof WeakMap !== "function") return

function _interopRequireWildcard(obj) { if (obj && obj.__esModule) { return obj; } if (obj === null || typeof obj !== "object" && typeof obj !== "function") { return { default: obj }; } var cache = _getRequireWildcardCache(); if (cache && cache.has(obj)) { return cache.get(obj); } var newObj = {}; var hasPropertyDescriptor = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var key in obj) { if (Object.prototype.hasOwnProperty.call(obj, key)) { var desc = hasPropertyDescriptor ? Object.getOwnPropertyDescriptor(obj, key) : null; if (desc && (desc.get || desc.set)) { Object.defineProperty(newObj, key, desc); } else { newObj[key] = obj[key]; } } } newObj.default = obj; if (cache) { cache.set(obj, newObj); } return newObj; }

function ownKeys(object, enumerableOnly) { var keys = Object.keys(object); if (Object.getOwnPropertySymbols) { var symbols = Object.getOwnPropertySymbols(object); if (enumerableOnly) symbols = symbols.filter(function (sym) { return Object.getOwnPropertyDescriptor(object, sym).enumerable; }); keys.push.apply(keys, symbols); } return keys; }

function _objectSpread(target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i] != null ? arguments[i] : {}; if (i % 2) { ownKeys(Object(source), true).forEach(function (key) { _defineProperty(target, key, source[key]); }); } else if (Object.getOwnPropertyDescriptors) { Object.defineProperties(target, Object.getOwnPropertyDescriptors(source)); } else { ownKeys(Object(source)).forEach(function (key) { Object.defineProperty(target, key, Object.getOwnPropertyDescriptor(source, key)); }); } } return target; }

function _defineProperty(obj, key, value) { if (key in obj) { Object.defineProperty(obj, key, { value: value, enumerable: true, configurable: true, writable: true }); } else { obj[key] = value; } return obj; }

/*
GaugeChart creates a gauge chart using D3
The chart is responsive and will have the same width as the "container"
Expand All @@ -37,8 +43,35 @@ var defaultStyle = {
}; // Props that should cause an animation on update

var animateNeedleProps = ["marginInPercent", "arcPadding", "percent", "nrOfLevels", "animDelay"];
var defaultProps = {
style: defaultStyle,
marginInPercent: 0.05,
cornerRadius: 6,
nrOfLevels: 3,
percent: 0.4,
arcPadding: 0.05,
//The padding between arcs, in rad
arcWidth: 0.2,
//The width of the arc given in percent of the radius
colors: ["#00FF00", "#FF0000"],
//Default defined colors
textColor: "#fff",
needleColor: "#464A4F",
needleBaseColor: "#464A4F",
hideText: false,
animate: true,
animDelay: 500,
formatTextValue: null,
fontSize: null,
animateDuration: 3000,
textComponent: undefined,
needleScale: 0.55
};

var GaugeChart = function GaugeChart(props) {
var GaugeChart = function GaugeChart(initialProps) {
var props = (0, _react.useMemo)(function () {
return _objectSpread(_objectSpread({}, defaultProps), initialProps);
}, [initialProps]);
var svg = (0, _react.useRef)({});
var g = (0, _react.useRef)({});
var width = (0, _react.useRef)({});
Expand Down Expand Up @@ -113,46 +146,31 @@ var GaugeChart = function GaugeChart(props) {
window.addEventListener("resize", handleResize);
return function () {
window.removeEventListener("resize", handleResize);
};
}; // eslint-disable-next-line react-hooks/exhaustive-deps
}, [props]);
var id = props.id,
style = props.style,
className = props.className;
className = props.className,
textComponent = props.textComponent,
textComponentContainerClassName = props.textComponentContainerClassName;
return /*#__PURE__*/_react.default.createElement("div", {
id: id,
className: className,
style: style,
ref: function ref(svg) {
return selectedRef = svg;
}
});
}, /*#__PURE__*/_react.default.createElement("div", {
className: textComponentContainerClassName,
style: {
position: "relative",
top: "50%"
}
}, textComponent));
};

var _default = GaugeChart;
exports.default = _default;
GaugeChart.defaultProps = {
style: defaultStyle,
marginInPercent: 0.05,
cornerRadius: 6,
nrOfLevels: 3,
percent: 0.4,
arcPadding: 0.05,
//The padding between arcs, in rad
arcWidth: 0.2,
//The width of the arc given in percent of the radius
colors: ["#00FF00", "#FF0000"],
//Default defined colors
textColor: "#fff",
needleColor: "#464A4F",
needleBaseColor: "#464A4F",
hideText: false,
animate: true,
animDelay: 500,
formatTextValue: null,
fontSize: null,
animateDuration: 3000,
needleScale: 0.55
};
GaugeChart.propTypes = {
id: _propTypes.default.string,
className: _propTypes.default.string,
Expand All @@ -174,6 +192,8 @@ GaugeChart.propTypes = {
fontSize: _propTypes.default.string,
animateDuration: _propTypes.default.number,
animDelay: _propTypes.default.number,
textComponent: _propTypes.default.element,
textComponentContainerClassName: _propTypes.default.string,
needleScale: _propTypes.default.number
}; // This function update arc's datas when component is mounting or when one of arc's props is updated

Expand Down Expand Up @@ -250,7 +270,8 @@ var drawNeedle = function drawNeedle(resize, prevProps, props, width, needle, co
needleBaseColor = props.needleBaseColor,
hideText = props.hideText,
animate = props.animate,
needleScale = props.needleScale;
needleScale = props.needleScale,
textComponent = props.textComponent;
var needleRadius = 15 * (width.current / 500),
// Make the needle radius responsive
centerPoint = [0, -needleRadius / 2]; //Draw the triangle
Expand All @@ -262,7 +283,7 @@ var drawNeedle = function drawNeedle(resize, prevProps, props, width, needle, co

needle.current.append("circle").attr("cx", centerPoint[0]).attr("cy", centerPoint[1]).attr("r", needleRadius).attr("fill", needleBaseColor);

if (!hideText) {
if (!hideText && !textComponent) {
addText(percent, props, outerRadius, width, g);
} //Rotate the needle

Expand Down
82 changes: 54 additions & 28 deletions src/lib/GaugeChart/index.js
View file
Original file line number Diff line number Diff line change
@@ -1,4 +1,10 @@
import React, { useCallback, useEffect, useRef, useLayoutEffect } from "react";
import React, {
useCallback,
useEffect,
useRef,
useMemo,
useLayoutEffect,
} from "react";
import {
arc,
pie,
Expand Down Expand Up @@ -37,7 +43,33 @@ const animateNeedleProps = [
"animDelay",
];

const GaugeChart = (props) => {
const defaultProps = {
style: defaultStyle,
marginInPercent: 0.05,
cornerRadius: 6,
nrOfLevels: 3,
percent: 0.4,
arcPadding: 0.05, //The padding between arcs, in rad
arcWidth: 0.2, //The width of the arc given in percent of the radius
colors: ["#00FF00", "#FF0000"], //Default defined colors
textColor: "#fff",
needleColor: "#464A4F",
needleBaseColor: "#464A4F",
hideText: false,
animate: true,
animDelay: 500,
formatTextValue: null,
fontSize: null,
animateDuration: 3000,
textComponent: undefined,
needleScale: 0.55,
};

const GaugeChart = (initialProps) => {
const props = useMemo(
() => ({ ...defaultProps, ...initialProps }),
[initialProps]
);
const svg = useRef({});
const g = useRef({});
const width = useRef({});
Expand Down Expand Up @@ -205,28 +237,6 @@ const GaugeChart = (props) => {

export default GaugeChart;

GaugeChart.defaultProps = {
style: defaultStyle,
marginInPercent: 0.05,
cornerRadius: 6,
nrOfLevels: 3,
percent: 0.4,
arcPadding: 0.05, //The padding between arcs, in rad
arcWidth: 0.2, //The width of the arc given in percent of the radius
colors: ["#00FF00", "#FF0000"], //Default defined colors
textColor: "#fff",
needleColor: "#464A4F",
needleBaseColor: "#464A4F",
hideText: false,
animate: true,
animDelay: 500,
formatTextValue: null,
fontSize: null,
animateDuration: 3000,
textComponent: undefined,
needleScale: 0.55
};

GaugeChart.propTypes = {
id: PropTypes.string,
className: PropTypes.string,
Expand All @@ -250,7 +260,7 @@ GaugeChart.propTypes = {
animDelay: PropTypes.number,
textComponent: PropTypes.element,
textComponentContainerClassName: PropTypes.string,
needleScale: PropTypes.number
needleScale: PropTypes.number,
};

// This function update arc's datas when component is mounting or when one of arc's props is updated
Expand Down Expand Up @@ -387,13 +397,26 @@ const drawNeedle = (
outerRadius,
g
) => {
const { percent, needleColor, needleBaseColor, hideText, animate, needleScale, textComponent } = props;
const {
percent,
needleColor,
needleBaseColor,
hideText,
animate,
needleScale,
textComponent,
} = props;
var needleRadius = 15 * (width.current / 500), // Make the needle radius responsive
centerPoint = [0, -needleRadius / 2];
//Draw the triangle
//var pathStr = `M ${leftPoint[0]} ${leftPoint[1]} L ${topPoint[0]} ${topPoint[1]} L ${rightPoint[0]} ${rightPoint[1]}`;
const prevPercent = prevProps ? prevProps.percent : 0;
var pathStr = calculateRotation(prevPercent || percent, outerRadius, width, needleScale);
var pathStr = calculateRotation(
prevPercent || percent,
outerRadius,
width,
needleScale
);
needle.current.append("path").attr("d", pathStr).attr("fill", needleColor);
//Add a circle at the bottom of needle
needle.current
Expand All @@ -418,7 +441,10 @@ const drawNeedle = (
const progress = currentPercent(percentOfPercent);
return container.current
.select(`.needle path`)
.attr("d", calculateRotation(progress, outerRadius, width, needleScale));
.attr(
"d",
calculateRotation(progress, outerRadius, width, needleScale)
);
};
});
} else {
Expand Down

0 comments on commit 8a9c63c

Please sign in to comment.