@loadsmart/data-visualization - npm Package Compare versions

Comparing version 2021.4.21 to 2021.4.23-beta1

dist/components/BarChart/BarChart.types.d.ts

@@ -0,1 +1,2 @@
+import { ThemeType } from '../../theme';
 export interface BarChartDataType {
@@ -13,5 +14,5 @@ name: string;
     colors?: BarChartColorsType[];
-    theme?: object;
+    theme?: ThemeType;
     valueFormatter?: (value: string) => string;
     width?: number | string;
 }

dist/components/Button/Button.types.d.ts

 import { ButtonHTMLAttributes } from 'react';
+import { ThemeType } from '../../theme';
 export interface ButtonProps extends ButtonHTMLAttributes<HTMLButtonElement> {
     active?: boolean;
-    theme?: object;
+    theme?: ThemeType;
 }

dist/components/Card/Card.types.d.ts

 import { DetailedHTMLProps, FC, HTMLAttributes, ReactNode, MouseEvent, ChangeEvent, ButtonHTMLAttributes } from 'react';
+import { ThemeType } from '../../theme';
 export interface CardProps extends DetailedHTMLProps<HTMLAttributes<HTMLDivElement>, HTMLDivElement> {
@@ -21,3 +22,3 @@ theme?: object;
 export interface EditButtonProps extends ButtonHTMLAttributes<HTMLButtonElement> {
-    theme?: object;
+    theme?: ThemeType;
 }

dist/index.js

@@ -70,24 +70,20 @@ function _interopDefault (ex) { return (ex && (typeof ex === 'object') && 'default' in ex) ? ex['default'] : ex; }
 function _createForOfIteratorHelperLoose(o, allowArrayLike) {
-  var it;
+  var it = typeof Symbol !== "undefined" && o[Symbol.iterator] || o["@@iterator"];
+  if (it) return (it = it.call(o)).next.bind(it);
 
-  if (typeof Symbol === "undefined" || o[Symbol.iterator] == null) {
-    if (Array.isArray(o) || (it = _unsupportedIterableToArray(o)) || allowArrayLike && o && typeof o.length === "number") {
-      if (it) o = it;
-      var i = 0;
-      return function () {
-        if (i >= o.length) return {
-          done: true
-        };
-        return {
-          done: false,
-          value: o[i++]
-        };
+  if (Array.isArray(o) || (it = _unsupportedIterableToArray(o)) || allowArrayLike && o && typeof o.length === "number") {
+    if (it) o = it;
+    var i = 0;
+    return function () {
+      if (i >= o.length) return {
+        done: true
       };
-    }
-
-    throw new TypeError("Invalid attempt to iterate non-iterable instance.\nIn order to be iterable, non-array objects must have a [Symbol.iterator]() method.");
+      return {
+        done: false,
+        value: o[i++]
+      };
+    };
   }
 
-  it = o[Symbol.iterator]();
-  return it.next.bind(it);
+  throw new TypeError("Invalid attempt to iterate non-iterable instance.\nIn order to be iterable, non-array objects must have a [Symbol.iterator]() method.");
 }
@@ -157,3 +153,4 @@
     size: 12,
-    weight: 600
+    weight: 600,
+    axisWeight: 300
   }
@@ -229,2 +226,6 @@ };
     size: typography.charts.size
+  },
+  axis: {
+    weight: typography.charts.axisWeight,
+    distance: dimensions.number.medium
   }
@@ -483,5 +484,5 @@ };
   var localValue = get(localTheme, path, null);
-  if (localValue) return localValue;
+  if (localValue !== null) return localValue;
   var contextValue = get(contextTheme, path, null);
-  if (contextValue) return contextValue;
+  if (contextValue !== null) return contextValue;
   return get(defaultTheme, path, null);
@@ -505,2 +506,4 @@ };
   var nameSize = getFromClosestTheme('charts.bar.name.size', theme, contextTheme);
+  var axisWeight = getFromClosestTheme('charts.bar.axis.weight', theme, contextTheme);
+  var axisDistance = getFromClosestTheme('charts.bar.axis.distance', theme, contextTheme);
 
@@ -527,3 +530,3 @@ var getFillByValue = function getFillByValue(_ref2) {
     return React__default.createElement("g", null, React__default.createElement("text", {
-      x: width === barSize ? barSize / 2 + valueSize : width + valueSize / 2,
+      x: width === barSize ? barSize / 2 : width - barSize / 2,
       y: y + barSize / 2 + 1,
@@ -553,2 +556,16 @@ fill: valueColor,
 
+  var renderTick = function renderTick(props) {
+    var y = props.y,
+        index = props.index,
+        visibleTicksCount = props.visibleTicksCount;
+    var newY = y + axisDistance;
+    var newTextAnchor = 'middle';
+    if (index === 0) newTextAnchor = 'start';
+    if (index === visibleTicksCount - 1) newTextAnchor = 'end';
+    return React__default.createElement("text", Object.assign({}, props, {
+      y: newY,
+      textAnchor: newTextAnchor
+    }), props.tickFormatter(props.payload.value));
+  };
+
   return React__default.createElement(recharts.ResponsiveContainer, {
@@ -574,3 +591,2 @@ height: ((data === null || data === void 0 ? void 0 : data.length) || 0) * (barSize + nameSize + 8) + 50,
     position: 'insideLeft',
-    dy: -24,
     fontWeight: 'bold',
@@ -592,10 +608,7 @@ fontSize: 12,
     interval: 0,
-    padding: {
-      left: valueSize,
-      right: valueSize
-    },
-    fontWeight: 'bold',
+    fontWeight: axisWeight,
     tickFormatter: function tickFormatter(tick) {
       return valueFormatter ? valueFormatter(tick) : tick;
-    }
+    },
+    tick: renderTick
   }), React__default.createElement(recharts.YAxis, {
@@ -627,5 +640,4 @@ type: 'category',
   var width = getFromClosestTheme('gauges.circular.width', 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", {
@@ -640,11 +652,12 @@ 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, {
@@ -651,0 +664,0 @@ width: responsive ? '100%' : width,

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';
@@ -66,24 +66,20 @@ import get from 'lodash.get';
 function _createForOfIteratorHelperLoose(o, allowArrayLike) {
-  var it;
+  var it = typeof Symbol !== "undefined" && o[Symbol.iterator] || o["@@iterator"];
+  if (it) return (it = it.call(o)).next.bind(it);
 
-  if (typeof Symbol === "undefined" || o[Symbol.iterator] == null) {
-    if (Array.isArray(o) || (it = _unsupportedIterableToArray(o)) || allowArrayLike && o && typeof o.length === "number") {
-      if (it) o = it;
-      var i = 0;
-      return function () {
-        if (i >= o.length) return {
-          done: true
-        };
-        return {
-          done: false,
-          value: o[i++]
-        };
+  if (Array.isArray(o) || (it = _unsupportedIterableToArray(o)) || allowArrayLike && o && typeof o.length === "number") {
+    if (it) o = it;
+    var i = 0;
+    return function () {
+      if (i >= o.length) return {
+        done: true
       };
-    }
-
-    throw new TypeError("Invalid attempt to iterate non-iterable instance.\nIn order to be iterable, non-array objects must have a [Symbol.iterator]() method.");
+      return {
+        done: false,
+        value: o[i++]
+      };
+    };
   }
 
-  it = o[Symbol.iterator]();
-  return it.next.bind(it);
+  throw new TypeError("Invalid attempt to iterate non-iterable instance.\nIn order to be iterable, non-array objects must have a [Symbol.iterator]() method.");
 }
@@ -153,3 +149,4 @@
     size: 12,
-    weight: 600
+    weight: 600,
+    axisWeight: 300
   }
@@ -225,2 +222,6 @@ };
     size: typography.charts.size
+  },
+  axis: {
+    weight: typography.charts.axisWeight,
+    distance: dimensions.number.medium
   }
@@ -479,5 +480,5 @@ };
   var localValue = get(localTheme, path, null);
-  if (localValue) return localValue;
+  if (localValue !== null) return localValue;
   var contextValue = get(contextTheme, path, null);
-  if (contextValue) return contextValue;
+  if (contextValue !== null) return contextValue;
   return get(defaultTheme, path, null);
@@ -501,2 +502,4 @@ };
   var nameSize = getFromClosestTheme('charts.bar.name.size', theme, contextTheme);
+  var axisWeight = getFromClosestTheme('charts.bar.axis.weight', theme, contextTheme);
+  var axisDistance = getFromClosestTheme('charts.bar.axis.distance', theme, contextTheme);
 
@@ -523,3 +526,3 @@ var getFillByValue = function getFillByValue(_ref2) {
     return React.createElement("g", null, React.createElement("text", {
-      x: width === barSize ? barSize / 2 + valueSize : width + valueSize / 2,
+      x: width === barSize ? barSize / 2 : width - barSize / 2,
       y: y + barSize / 2 + 1,
@@ -549,2 +552,16 @@ fill: valueColor,
 
+  var renderTick = function renderTick(props) {
+    var y = props.y,
+        index = props.index,
+        visibleTicksCount = props.visibleTicksCount;
+    var newY = y + axisDistance;
+    var newTextAnchor = 'middle';
+    if (index === 0) newTextAnchor = 'start';
+    if (index === visibleTicksCount - 1) newTextAnchor = 'end';
+    return React.createElement("text", Object.assign({}, props, {
+      y: newY,
+      textAnchor: newTextAnchor
+    }), props.tickFormatter(props.payload.value));
+  };
+
   return React.createElement(ResponsiveContainer, {
@@ -570,3 +587,2 @@ height: ((data === null || data === void 0 ? void 0 : data.length) || 0) * (barSize + nameSize + 8) + 50,
     position: 'insideLeft',
-    dy: -24,
     fontWeight: 'bold',
@@ -588,10 +604,7 @@ fontSize: 12,
     interval: 0,
-    padding: {
-      left: valueSize,
-      right: valueSize
-    },
-    fontWeight: 'bold',
+    fontWeight: axisWeight,
     tickFormatter: function tickFormatter(tick) {
       return valueFormatter ? valueFormatter(tick) : tick;
-    }
+    },
+    tick: renderTick
   }), React.createElement(YAxis, {
@@ -623,5 +636,4 @@ type: 'category',
   var width = getFromClosestTheme('gauges.circular.width', theme, contextTheme);
-
-  var renderLabel = function renderLabel(props) {
-    if (props.index) return;
+  var renderLabel = useCallback(function (props) {
+    if (props.index) return '';
     return React.createElement("text", {
@@ -636,11 +648,12 @@ 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, {
@@ -647,0 +660,0 @@ width: responsive ? '100%' : width,

dist/theme/index.d.ts

@@ -65,4 +65,5 @@ export { default } from './default';
             weight: number;
+            axisWeight: number;
         };
     };
 };

dist/theme/types.d.ts

@@ -65,2 +65,6 @@ import * as CSS from 'csstype';
     };
+    axis?: {
+        weight?: CSS.Property.FontWeight;
+        distance?: number;
+    };
 }
@@ -67,0 +71,0 @@ export interface CircularGaugeType {

dist/theme/values/typography.d.ts

@@ -20,4 +20,5 @@ declare const _default: {
         weight: number;
+        axisWeight: number;
     };
 };
 export default _default;

package.json

 {
   "name": "@loadsmart/data-visualization",
-  "version": "2021.4.21",
+  "version": "2021.4.23-beta1",
   "description": "A library of data visualization React components to help in dashboard building and more!",
@@ -71,5 +71,2 @@ "author": "lipe-dev",
   },
-  "files": [
-    "dist"
-  ],
   "dependencies": {
@@ -80,2 +77,5 @@ "lodash.get": "^4.4.2",
   },
+  "files": [
+    "dist"
+  ],
   "config": {
@@ -86,2 +86,2 @@ "commitizen": {
   }
-}
+}

README.md

@@ -47,2 +47,2 @@ # @loadsmart/data-visualization
 
-[MIT](./LICENSE)
+[MIT](../LICENSE)

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

141453

increased by3.92%

Lines of code

1601

increased by2.5%

Worsened metrics

Number of package files

37

decreased by-2.63%

Number of low quality alerts

1

increased byInfinity%

No dependency changes