@loadsmart/data-visualization - npm Package Compare versions

Comparing version 2021.4.19 to 2021.4.21-1

dist/components/CircularGauge/CircularGauge.types.d.ts

@@ -8,5 +8,5 @@ import { ThemeType } from '../../theme';
     theme?: ThemeType;
-    width?: number;
+    responsive?: boolean;
 }
 export interface CircularGaugeComponent extends FC<CircularGaugePropsType> {
 }

dist/index.js

@@ -232,2 +232,4 @@ function _interopDefault (ex) { return (ex && (typeof ex === 'object') && 'default' in ex) ? ex['default'] : ex; }
   barBackground: colors.neutral.light,
+  barWidth: 4,
+  width: 40,
   value: {
@@ -607,6 +609,8 @@ color: colors.neutral.darker,
       showAsPercentage = _ref.showAsPercentage,
-      theme = _ref.theme;
+      theme = _ref.theme,
+      responsive = _ref.responsive;
   var contextTheme = React.useContext(styled.ThemeContext);
   var barFill = getFromClosestTheme('gauges.circular.barFill', theme, contextTheme);
   var barBackground = getFromClosestTheme('gauges.circular.barBackground', theme, contextTheme);
+  var barWidth = getFromClosestTheme('gauges.circular.barWidth', theme, contextTheme);
   var valueColor = getFromClosestTheme('gauges.circular.value.color', theme, contextTheme);
@@ -616,6 +620,4 @@ var valueSize = getFromClosestTheme('gauges.circular.value.size', theme, contextTheme);
   var width = getFromClosestTheme('gauges.circular.width', theme, contextTheme);
-  var height = getFromClosestTheme('gauges.circular.height', theme, contextTheme);
-
-  var renderLabel = function renderLabel(props) {
-    if (props.index) return;
+  var renderLabel = React.useCallback(function (props) {
+    if (props.index) return '';
     return React__default.createElement("text", {
@@ -630,17 +632,18 @@ x: props.cx + 1,
     }, "" + props.value + (showAsPercentage ? '%' : ''));
-  };
-
-  var data = [{
-    id: 'value',
-    value: showAsPercentage ? Math.round(value / max * 100) : value
-  }, {
-    id: 'backgorund',
-    value: showAsPercentage ? 100 - value / max * 100 : max - value
-  }];
+  }, [showAsPercentage, valueSize, valueColor, valueWeight]);
+  var data = React.useMemo(function () {
+    return [{
+      id: 'value',
+      value: showAsPercentage ? Math.round(value / max * 100) : value
+    }, {
+      id: 'background',
+      value: showAsPercentage ? 100 - value / max * 100 : max - value
+    }];
+  }, [showAsPercentage, value, max]);
   return React__default.createElement(recharts.ResponsiveContainer, {
-    width: width || '100%',
-    height: height || '100%'
+    width: responsive ? '100%' : width,
+    height: responsive ? '100%' : width
   }, React__default.createElement(recharts.PieChart, null, React__default.createElement(recharts.Pie, {
-    innerRadius: '80%',
-    outerRadius: '100%',
+    innerRadius: responsive ? '80%' : width / 2 - barWidth,
+    outerRadius: responsive ? '100%' : width / 2,
     data: data,
@@ -647,0 +650,0 @@ startAngle: 90,

dist/index.modern.js

@@ -1,2 +0,2 @@
-import React, { useState, useCallback, useEffect, useContext } from 'react';
+import React, { useState, useCallback, useEffect, useContext, useMemo } from 'react';
 import styled, { ThemeProvider, ThemeContext } from 'styled-components';
@@ -228,2 +228,4 @@ import get from 'lodash.get';
   barBackground: colors.neutral.light,
+  barWidth: 4,
+  width: 40,
   value: {
@@ -603,6 +605,8 @@ color: colors.neutral.darker,
       showAsPercentage = _ref.showAsPercentage,
-      theme = _ref.theme;
+      theme = _ref.theme,
+      responsive = _ref.responsive;
   var contextTheme = useContext(ThemeContext);
   var barFill = getFromClosestTheme('gauges.circular.barFill', theme, contextTheme);
   var barBackground = getFromClosestTheme('gauges.circular.barBackground', theme, contextTheme);
+  var barWidth = getFromClosestTheme('gauges.circular.barWidth', theme, contextTheme);
   var valueColor = getFromClosestTheme('gauges.circular.value.color', theme, contextTheme);
@@ -612,6 +616,4 @@ var valueSize = getFromClosestTheme('gauges.circular.value.size', theme, contextTheme);
   var width = getFromClosestTheme('gauges.circular.width', theme, contextTheme);
-  var height = getFromClosestTheme('gauges.circular.height', theme, contextTheme);
-
-  var renderLabel = function renderLabel(props) {
-    if (props.index) return;
+  var renderLabel = useCallback(function (props) {
+    if (props.index) return '';
     return React.createElement("text", {
@@ -626,17 +628,18 @@ x: props.cx + 1,
     }, "" + props.value + (showAsPercentage ? '%' : ''));
-  };
-
-  var data = [{
-    id: 'value',
-    value: showAsPercentage ? Math.round(value / max * 100) : value
-  }, {
-    id: 'backgorund',
-    value: showAsPercentage ? 100 - value / max * 100 : max - value
-  }];
+  }, [showAsPercentage, valueSize, valueColor, valueWeight]);
+  var data = useMemo(function () {
+    return [{
+      id: 'value',
+      value: showAsPercentage ? Math.round(value / max * 100) : value
+    }, {
+      id: 'background',
+      value: showAsPercentage ? 100 - value / max * 100 : max - value
+    }];
+  }, [showAsPercentage, value, max]);
   return React.createElement(ResponsiveContainer, {
-    width: width || '100%',
-    height: height || '100%'
+    width: responsive ? '100%' : width,
+    height: responsive ? '100%' : width
   }, React.createElement(PieChart, null, React.createElement(Pie, {
-    innerRadius: '80%',
-    outerRadius: '100%',
+    innerRadius: responsive ? '80%' : width / 2 - barWidth,
+    outerRadius: responsive ? '100%' : width / 2,
     data: data,
@@ -643,0 +646,0 @@ startAngle: 90,

dist/theme/types.d.ts

@@ -69,4 +69,4 @@ import * as CSS from 'csstype';
     barBackground?: CSS.Property.Fill;
+    barWidth?: number;
     width?: number;
-    height?: number;
     value?: {
@@ -73,0 +73,0 @@ size?: number;

package.json

 {
   "name": "@loadsmart/data-visualization",
-  "version": "2021.4.19",
+  "version": "2021.4.21-1",
   "description": "A library of data visualization React components to help in dashboard building and more!",
@@ -5,0 +5,0 @@ "author": "lipe-dev",

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

No v1

Quality

Package is not semver >=1. This means it is not stable and does not support ^ ranges.

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

137241

increased by1.6%

Lines of code

1566

increased by0.64%

Worsened metrics

Number of low quality alerts

1

increased byInfinity%

No dependency changes