@loadsmart/data-visualization - npm Package Compare versions

Comparing version 2021.4.21 to 2021.4.23

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.");
 }
@@ -619,5 +615,4 @@
   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", {
@@ -632,11 +627,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, {
@@ -643,0 +639,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';
@@ -6,86 +6,2 @@ import get from 'lodash.get';
 
-function _extends() {
-  _extends = Object.assign || function (target) {
-    for (var i = 1; i < arguments.length; i++) {
-      var source = arguments[i];
-
-      for (var key in source) {
-        if (Object.prototype.hasOwnProperty.call(source, key)) {
-          target[key] = source[key];
-        }
-      }
-    }
-
-    return target;
-  };
-
-  return _extends.apply(this, arguments);
-}
-
-function _objectWithoutPropertiesLoose(source, excluded) {
-  if (source == null) return {};
-  var target = {};
-  var sourceKeys = Object.keys(source);
-  var key, i;
-
-  for (i = 0; i < sourceKeys.length; i++) {
-    key = sourceKeys[i];
-    if (excluded.indexOf(key) >= 0) continue;
-    target[key] = source[key];
-  }
-
-  return target;
-}
-
-function _taggedTemplateLiteralLoose(strings, raw) {
-  if (!raw) {
-    raw = strings.slice(0);
-  }
-
-  strings.raw = raw;
-  return strings;
-}
-
-function _unsupportedIterableToArray(o, minLen) {
-  if (!o) return;
-  if (typeof o === "string") return _arrayLikeToArray(o, minLen);
-  var n = Object.prototype.toString.call(o).slice(8, -1);
-  if (n === "Object" && o.constructor) n = o.constructor.name;
-  if (n === "Map" || n === "Set") return Array.from(o);
-  if (n === "Arguments" || /^(?:Ui|I)nt(?:8|16|32)(?:Clamped)?Array$/.test(n)) return _arrayLikeToArray(o, minLen);
-}
-
-function _arrayLikeToArray(arr, len) {
-  if (len == null || len > arr.length) len = arr.length;
-
-  for (var i = 0, arr2 = new Array(len); i < len; i++) arr2[i] = arr[i];
-
-  return arr2;
-}
-
-function _createForOfIteratorHelperLoose(o, allowArrayLike) {
-  var 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++]
-        };
-      };
-    }
-
-    throw new TypeError("Invalid attempt to iterate non-iterable instance.\nIn order to be iterable, non-array objects must have a [Symbol.iterator]() method.");
-  }
-
-  it = o[Symbol.iterator]();
-  return it.next.bind(it);
-}
-
 var colors = {
@@ -157,3 +73,3 @@ neutral: {
 
-var baseButton = {
+const baseButton = {
   background: colors.neutral.lightest,
@@ -173,12 +89,13 @@ padding: dimensions.pixels.small,
 };
-var button = {
-  regular: _extends({}, baseButton),
-  active: _extends({}, baseButton, {
+const button = {
+  regular: { ...baseButton
+  },
+  active: { ...baseButton,
     background: colors.neutral.darkest,
-    text: _extends({}, baseButton.text, {
+    text: { ...baseButton.text,
       color: colors.neutral.lightest
-    })
-  })
+    }
+  }
 };
-var card = {
+const card = {
   background: colors.neutral.lightest,
@@ -199,3 +116,3 @@ padding: dimensions.pixels.large,
     color: colors.neutral.darker,
-    margin: dimensions.pixels.small + " 0 0 0",
+    margin: `${dimensions.pixels.small} 0 0 0`,
     editButton: {
@@ -215,3 +132,3 @@ padding: dimensions.pixels.medium,
 };
-var bar = {
+const bar = {
   fill: colors.status.danger.dark,
@@ -230,3 +147,3 @@ size: dimensions.number.large,
 };
-var circular = {
+const circular = {
   barFill: colors.neutral.darker,
@@ -242,185 +159,191 @@ barBackground: colors.neutral.light,
 };
-var defaultTheme = {
-  button: button,
-  card: card,
+const defaultTheme = {
+  button,
+  card,
   charts: {
-    bar: bar
+    bar
   },
   gauges: {
-    circular: circular
+    circular
   }
 };
 
-var defaultValues = {
-  colors: colors,
-  dimensions: dimensions,
-  typography: typography
+const defaultValues = {
+  colors,
+  dimensions,
+  typography
 };
 
-var getFromTheme = (function (customTheme, path) {
-  var defaultValue = get(defaultTheme, path, null);
-  var customValue = get(customTheme, path, null);
+var getFromTheme = ((customTheme, path) => {
+  const defaultValue = get(defaultTheme, path, null);
+  const customValue = get(customTheme, path, null);
   return customValue || defaultValue;
 });
 
-var getActivatableValue = (function (customTheme, active, path) {
-  var _path$split = path.split('.'),
-      element = _path$split[0],
-      subPath = _path$split.slice(1);
-
-  var fullPath = [element, active ? 'active' : 'regular'].concat(subPath);
+var getActivatableValue = ((customTheme, active, path) => {
+  const [element, ...subPath] = path.split('.');
+  const fullPath = [element, active ? 'active' : 'regular', ...subPath];
   return getFromTheme(customTheme, fullPath);
 });
 
-var _templateObject;
-var StyledButton = styled.button(_templateObject || (_templateObject = _taggedTemplateLiteralLoose(["\n  background: ", ";\n  border-color: ", ";\n  border-radius: ", ";\n  border-width: ", ";\n  color: ", ";\n  font-size: ", ";\n  font-weight: ", ";\n  text-transform: ", ";\n  padding: ", ";\n"])), function (_ref) {
-  var theme = _ref.theme,
-      active = _ref.active;
-  return getActivatableValue(theme, active, 'button.background');
-}, function (_ref2) {
-  var theme = _ref2.theme,
-      active = _ref2.active;
-  return getActivatableValue(theme, active, 'button.border.color');
-}, function (_ref3) {
-  var theme = _ref3.theme,
-      active = _ref3.active;
-  return getActivatableValue(theme, active, 'button.border.radius');
-}, function (_ref4) {
-  var theme = _ref4.theme,
-      active = _ref4.active;
-  return getActivatableValue(theme, active, 'button.border.width');
-}, function (_ref5) {
-  var theme = _ref5.theme,
-      active = _ref5.active;
-  return getActivatableValue(theme, active, 'button.text.color');
-}, function (_ref6) {
-  var theme = _ref6.theme,
-      active = _ref6.active;
-  return getActivatableValue(theme, active, 'button.text.size');
-}, function (_ref7) {
-  var theme = _ref7.theme,
-      active = _ref7.active;
-  return getActivatableValue(theme, active, 'button.text.weight');
-}, function (_ref8) {
-  var theme = _ref8.theme,
-      active = _ref8.active;
-  return getActivatableValue(theme, active, 'button.text.transform');
-}, function (_ref9) {
-  var theme = _ref9.theme,
-      active = _ref9.active;
-  return getActivatableValue(theme, active, 'button.padding');
-});
+let _ = t => t,
+    _t;
+const StyledButton = styled.button(_t || (_t = _`
+  background: ${0};
+  border-color: ${0};
+  border-radius: ${0};
+  border-width: ${0};
+  color: ${0};
+  font-size: ${0};
+  font-weight: ${0};
+  text-transform: ${0};
+  padding: ${0};
+`), ({
+  theme,
+  active
+}) => getActivatableValue(theme, active, 'button.background'), ({
+  theme,
+  active
+}) => getActivatableValue(theme, active, 'button.border.color'), ({
+  theme,
+  active
+}) => getActivatableValue(theme, active, 'button.border.radius'), ({
+  theme,
+  active
+}) => getActivatableValue(theme, active, 'button.border.width'), ({
+  theme,
+  active
+}) => getActivatableValue(theme, active, 'button.text.color'), ({
+  theme,
+  active
+}) => getActivatableValue(theme, active, 'button.text.size'), ({
+  theme,
+  active
+}) => getActivatableValue(theme, active, 'button.text.weight'), ({
+  theme,
+  active
+}) => getActivatableValue(theme, active, 'button.text.transform'), ({
+  theme,
+  active
+}) => getActivatableValue(theme, active, 'button.padding'));
 
-var Button = function Button(_ref) {
-  var theme = _ref.theme,
-      active = _ref.active,
-      props = _objectWithoutPropertiesLoose(_ref, ["theme", "active"]);
+const Button = ({
+  theme,
+  active,
+  ...props
+}) => React.createElement(StyledButton, Object.assign({}, props, {
+  theme: theme,
+  active: active
+}));
 
-  return React.createElement(StyledButton, Object.assign({}, props, {
-    theme: theme,
-    active: active
-  }));
-};
+let _$1 = t => t,
+    _t$1,
+    _t2,
+    _t3,
+    _t4,
+    _t5;
+const StyledCard = styled.div(_t$1 || (_t$1 = _$1`
+  background: ${0};
+  box-shadow: ${0};
+  border-radius: ${0};
+  padding: ${0};
+  font-family: ${0};
+  position: relative;
+`), ({
+  theme
+}) => getFromTheme(theme, 'card.background'), ({
+  theme
+}) => getFromTheme(theme, 'card.shadow'), ({
+  theme
+}) => getFromTheme(theme, 'card.border.radius'), ({
+  theme
+}) => getFromTheme(theme, 'card.padding'), ({
+  theme
+}) => getFromTheme(theme, 'card.fontFamily'));
+const StyledCardTitle = styled.div(_t2 || (_t2 = _$1`
+  font-size: ${0};
+  font-weight: ${0};
+  color: ${0};
+  font-family: ${0};
+`), ({
+  theme
+}) => getFromTheme(theme, 'card.title.size'), ({
+  theme
+}) => getFromTheme(theme, 'card.title.weight'), ({
+  theme
+}) => getFromTheme(theme, 'card.title.color'), ({
+  theme
+}) => getFromTheme(theme, 'card.title.fontFamily'));
+const StyledCardContent = styled.div(_t3 || (_t3 = _$1`
+  font-size: ${0};
+  font-weight: ${0};
+  color: ${0};
+  font-family: ${0};
+  margin: ${0};
+`), ({
+  theme
+}) => getFromTheme(theme, 'card.content.size'), ({
+  theme
+}) => getFromTheme(theme, 'card.content.weight'), ({
+  theme
+}) => getFromTheme(theme, 'card.content.color'), ({
+  theme
+}) => getFromTheme(theme, 'card.content.fontFamily'), ({
+  theme
+}) => getFromTheme(theme, 'card.content.margin'));
+const StyledCardTextArea = styled.textarea(_t4 || (_t4 = _$1`
+  width: 100%;
+`));
+const StyledEditButton = styled.button(_t5 || (_t5 = _$1`
+  padding: ${0};
+  background: ${0};
+  border-radius: ${0};
+  border-width: ${0};
+  width: ${0};
+  height: ${0};
 
-var _templateObject$1, _templateObject2, _templateObject3, _templateObject4, _templateObject5;
-var StyledCard = styled.div(_templateObject$1 || (_templateObject$1 = _taggedTemplateLiteralLoose(["\n  background: ", ";\n  box-shadow: ", ";\n  border-radius: ", ";\n  padding: ", ";\n  font-family: ", ";\n  position: relative;\n"])), function (_ref) {
-  var theme = _ref.theme;
-  return getFromTheme(theme, 'card.background');
-}, function (_ref2) {
-  var theme = _ref2.theme;
-  return getFromTheme(theme, 'card.shadow');
-}, function (_ref3) {
-  var theme = _ref3.theme;
-  return getFromTheme(theme, 'card.border.radius');
-}, function (_ref4) {
-  var theme = _ref4.theme;
-  return getFromTheme(theme, 'card.padding');
-}, function (_ref5) {
-  var theme = _ref5.theme;
-  return getFromTheme(theme, 'card.fontFamily');
-});
-var StyledCardTitle = styled.div(_templateObject2 || (_templateObject2 = _taggedTemplateLiteralLoose(["\n  font-size: ", ";\n  font-weight: ", ";\n  color: ", ";\n  font-family: ", ";\n"])), function (_ref6) {
-  var theme = _ref6.theme;
-  return getFromTheme(theme, 'card.title.size');
-}, function (_ref7) {
-  var theme = _ref7.theme;
-  return getFromTheme(theme, 'card.title.weight');
-}, function (_ref8) {
-  var theme = _ref8.theme;
-  return getFromTheme(theme, 'card.title.color');
-}, function (_ref9) {
-  var theme = _ref9.theme;
-  return getFromTheme(theme, 'card.title.fontFamily');
-});
-var StyledCardContent = styled.div(_templateObject3 || (_templateObject3 = _taggedTemplateLiteralLoose(["\n  font-size: ", ";\n  font-weight: ", ";\n  color: ", ";\n  font-family: ", ";\n  margin: ", ";\n"])), function (_ref10) {
-  var theme = _ref10.theme;
-  return getFromTheme(theme, 'card.content.size');
-}, function (_ref11) {
-  var theme = _ref11.theme;
-  return getFromTheme(theme, 'card.content.weight');
-}, function (_ref12) {
-  var theme = _ref12.theme;
-  return getFromTheme(theme, 'card.content.color');
-}, function (_ref13) {
-  var theme = _ref13.theme;
-  return getFromTheme(theme, 'card.content.fontFamily');
-}, function (_ref14) {
-  var theme = _ref14.theme;
-  return getFromTheme(theme, 'card.content.margin');
-});
-var StyledCardTextArea = styled.textarea(_templateObject4 || (_templateObject4 = _taggedTemplateLiteralLoose(["\n  width: 100%;\n"])));
-var StyledEditButton = styled.button(_templateObject5 || (_templateObject5 = _taggedTemplateLiteralLoose(["\n  padding: ", ";\n  background: ", ";\n  border-radius: ", ";\n  border-width: ", ";\n  width: ", ";\n  height: ", ";\n\n  position: absolute;\n  right: ", ";\n  top: ", ";\n\n  display: flex;\n  align-items: center;\n  justify-content: center;\n"])), function (_ref15) {
-  var theme = _ref15.theme;
-  return getFromTheme(theme, 'card.content.editButton.padding');
-}, function (_ref16) {
-  var theme = _ref16.theme;
-  return getFromTheme(theme, 'card.content.editButton.background');
-}, function (_ref17) {
-  var theme = _ref17.theme;
-  return getFromTheme(theme, 'card.content.editButton.border.radius');
-}, function (_ref18) {
-  var theme = _ref18.theme;
-  return getFromTheme(theme, 'card.content.editButton.border.width');
-}, function (_ref19) {
-  var theme = _ref19.theme;
-  return getFromTheme(theme, 'card.content.editButton.width');
-}, function (_ref20) {
-  var theme = _ref20.theme;
-  return getFromTheme(theme, 'card.content.editButton.height');
-}, function (_ref21) {
-  var theme = _ref21.theme;
-  return getFromTheme(theme, 'card.content.editButton.right');
-}, function (_ref22) {
-  var theme = _ref22.theme;
-  return getFromTheme(theme, 'card.content.editButton.top');
-});
+  position: absolute;
+  right: ${0};
+  top: ${0};
 
-var CardTitle = function CardTitle(_ref) {
-  var children = _ref.children;
-  return React.createElement(StyledCardTitle, null, children);
-};
+  display: flex;
+  align-items: center;
+  justify-content: center;
+`), ({
+  theme
+}) => getFromTheme(theme, 'card.content.editButton.padding'), ({
+  theme
+}) => getFromTheme(theme, 'card.content.editButton.background'), ({
+  theme
+}) => getFromTheme(theme, 'card.content.editButton.border.radius'), ({
+  theme
+}) => getFromTheme(theme, 'card.content.editButton.border.width'), ({
+  theme
+}) => getFromTheme(theme, 'card.content.editButton.width'), ({
+  theme
+}) => getFromTheme(theme, 'card.content.editButton.height'), ({
+  theme
+}) => getFromTheme(theme, 'card.content.editButton.right'), ({
+  theme
+}) => getFromTheme(theme, 'card.content.editButton.top'));
 
-var EditButton = function EditButton(props) {
-  return React.createElement(StyledEditButton, Object.assign({}, props));
-};
+const CardTitle = ({
+  children
+}) => React.createElement(StyledCardTitle, null, children);
 
-var CardContent = function CardContent(_ref) {
-  var children = _ref.children,
-      editable = _ref.editable,
-      editing = _ref.editing,
-      editEndButtonClickCallback = _ref.editEndButtonClickCallback,
-      editStartButtonClickCallback = _ref.editStartButtonClickCallback,
-      editEndButtonContent = _ref.editEndButtonContent,
-      editStartButtonContent = _ref.editStartButtonContent,
-      contentChangeCallback = _ref.contentChangeCallback;
+const EditButton = props => React.createElement(StyledEditButton, Object.assign({}, props));
 
-  var _useState = useState(children),
-      currentContent = _useState[0],
-      setCurrentContent = _useState[1];
-
-  var _useState2 = useState(editing),
-      isEditing = _useState2[0],
-      setIsEditing = _useState2[1];
-
-  var textAreaChangeCallback = useCallback(function (event) {
+const CardContent = ({
+  children,
+  editable,
+  editing,
+  editEndButtonClickCallback,
+  editStartButtonClickCallback,
+  editEndButtonContent,
+  editStartButtonContent,
+  contentChangeCallback
+}) => {
+  const [currentContent, setCurrentContent] = useState(children);
+  const [isEditing, setIsEditing] = useState(editing);
+  const textAreaChangeCallback = useCallback(event => {
     event.persist();
@@ -433,3 +356,3 @@ setCurrentContent(event.target.value);
   }, []);
-  var editStartButtonClick = useCallback(function (event) {
+  const editStartButtonClick = useCallback(event => {
     event.persist();
@@ -442,3 +365,3 @@ setIsEditing(true);
   }, []);
-  var editEndButtonClick = useCallback(function (event) {
+  const editEndButtonClick = useCallback(event => {
     event.persist();
@@ -451,10 +374,10 @@ setIsEditing(false);
   }, []);
-  useEffect(function () {
+  useEffect(() => {
     setCurrentContent(children);
   }, [children]);
-  useEffect(function () {
+  useEffect(() => {
     setIsEditing(editing);
   }, [editing]);
-  var showTextArea = editable && isEditing;
-  var showEditIcon = editable && !isEditing;
+  const showTextArea = editable && isEditing;
+  const showEditIcon = editable && !isEditing;
   return React.createElement(StyledCardContent, null, showTextArea && React.createElement(StyledCardTextArea, {
@@ -471,9 +394,8 @@ onChange: textAreaChangeCallback,
 
-var Card = function Card(_ref) {
-  var theme = _ref.theme,
-      children = _ref.children;
-  return React.createElement(ThemeProvider, {
-    theme: theme || {}
-  }, React.createElement(StyledCard, null, children));
-};
+const Card = ({
+  theme,
+  children
+}) => React.createElement(ThemeProvider, {
+  theme: theme || {}
+}, React.createElement(StyledCard, null, children));
 
@@ -485,6 +407,6 @@ Card.Title = CardTitle;
 
-var getFromClosestTheme = function getFromClosestTheme(path, localTheme, contextTheme) {
-  var localValue = get(localTheme, path, null);
+const getFromClosestTheme = (path, localTheme, contextTheme) => {
+  const localValue = get(localTheme, path, null);
   if (localValue) return localValue;
-  var contextValue = get(contextTheme, path, null);
+  const contextValue = get(contextTheme, path, null);
   if (contextValue) return contextValue;
@@ -494,25 +416,26 @@ return get(defaultTheme, path, null);
 
-var BarChart = function BarChart(_ref) {
-  var theme = _ref.theme,
-      data = _ref.data,
-      colors = _ref.colors,
-      valueFormatter = _ref.valueFormatter,
-      width = _ref.width;
-  var contextTheme = useContext(ThemeContext);
-  var fillColor = getFromClosestTheme('charts.bar.fill', theme, contextTheme);
-  var barSize = getFromClosestTheme('charts.bar.size', theme, contextTheme);
-  var valueColor = getFromClosestTheme('charts.bar.value.color', theme, contextTheme);
-  var valueWeight = getFromClosestTheme('charts.bar.value.weight', theme, contextTheme);
-  var valueSize = getFromClosestTheme('charts.bar.value.size', theme, contextTheme);
-  var nameColor = getFromClosestTheme('charts.bar.name.color', theme, contextTheme);
-  var nameWeight = getFromClosestTheme('charts.bar.name.weight', theme, contextTheme);
-  var nameSize = getFromClosestTheme('charts.bar.name.size', theme, contextTheme);
+const BarChart = ({
+  theme,
+  data,
+  colors,
+  valueFormatter,
+  width
+}) => {
+  const contextTheme = useContext(ThemeContext);
+  const fillColor = getFromClosestTheme('charts.bar.fill', theme, contextTheme);
+  const barSize = getFromClosestTheme('charts.bar.size', theme, contextTheme);
+  const valueColor = getFromClosestTheme('charts.bar.value.color', theme, contextTheme);
+  const valueWeight = getFromClosestTheme('charts.bar.value.weight', theme, contextTheme);
+  const valueSize = getFromClosestTheme('charts.bar.value.size', theme, contextTheme);
+  const nameColor = getFromClosestTheme('charts.bar.name.color', theme, contextTheme);
+  const nameWeight = getFromClosestTheme('charts.bar.name.weight', theme, contextTheme);
+  const nameSize = getFromClosestTheme('charts.bar.name.size', theme, contextTheme);
 
-  var getFillByValue = function getFillByValue(_ref2) {
-    var value = _ref2.value;
+  const getFillByValue = ({
+    value
+  }) => {
     if (!colors) return fillColor;
 
-    for (var _iterator = _createForOfIteratorHelperLoose(colors), _step; !(_step = _iterator()).done;) {
-      var color = _step.value;
-      var isInRange = true;
+    for (const color of colors) {
+      let isInRange = true;
       if (color.from && value < color.from) isInRange = false;
@@ -526,6 +449,8 @@ if (color.to && value > color.to) isInRange = false;
 
-  var renderValueLabel = function renderValueLabel(props) {
-    var value = props.value,
-        width = props.width,
-        y = props.y;
+  const renderValueLabel = props => {
+    const {
+      value,
+      width,
+      y
+    } = props;
     return React.createElement("g", null, React.createElement("text", {
@@ -542,6 +467,8 @@ x: width === barSize ? barSize / 2 + valueSize : width + valueSize / 2,
 
-  var renderNameLabel = function renderNameLabel(props) {
-    var value = props.value,
-        x = props.x,
-        y = props.y;
+  const renderNameLabel = props => {
+    const {
+      value,
+      x,
+      y
+    } = props;
     return React.createElement("g", null, React.createElement("text", {
@@ -582,8 +509,6 @@ x: x,
     content: renderNameLabel
-  }), data === null || data === void 0 ? void 0 : data.map(function (entry, index) {
-    return React.createElement(Cell, {
-      key: index,
-      fill: getFillByValue(entry)
-    });
-  })), React.createElement(XAxis, {
+  }), data === null || data === void 0 ? void 0 : data.map((entry, index) => React.createElement(Cell, {
+    key: index,
+    fill: getFillByValue(entry)
+  }))), React.createElement(XAxis, {
     type: 'number',
@@ -601,3 +526,3 @@ dataKey: 'value',
     fontWeight: 'bold',
-    tickFormatter: function tickFormatter(tick) {
+    tickFormatter: tick => {
       return valueFormatter ? valueFormatter(tick) : tick;
@@ -617,19 +542,19 @@ }
 
-var CircularGauge = function CircularGauge(_ref) {
-  var value = _ref.value,
-      max = _ref.max,
-      showAsPercentage = _ref.showAsPercentage,
-      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);
-  var valueSize = getFromClosestTheme('gauges.circular.value.size', theme, contextTheme);
-  var valueWeight = getFromClosestTheme('gauges.circular.value.weight', theme, contextTheme);
-  var width = getFromClosestTheme('gauges.circular.width', theme, contextTheme);
-
-  var renderLabel = function renderLabel(props) {
-    if (props.index) return;
+const CircularGauge = ({
+  value,
+  max,
+  showAsPercentage,
+  theme,
+  responsive
+}) => {
+  const contextTheme = useContext(ThemeContext);
+  const barFill = getFromClosestTheme('gauges.circular.barFill', theme, contextTheme);
+  const barBackground = getFromClosestTheme('gauges.circular.barBackground', theme, contextTheme);
+  const barWidth = getFromClosestTheme('gauges.circular.barWidth', theme, contextTheme);
+  const valueColor = getFromClosestTheme('gauges.circular.value.color', theme, contextTheme);
+  const valueSize = getFromClosestTheme('gauges.circular.value.size', theme, contextTheme);
+  const valueWeight = getFromClosestTheme('gauges.circular.value.weight', theme, contextTheme);
+  const width = getFromClosestTheme('gauges.circular.width', theme, contextTheme);
+  const renderLabel = useCallback(props => {
+    if (props.index) return '';
     return React.createElement("text", {
@@ -643,12 +568,11 @@ x: props.cx + 1,
       fontWeight: valueWeight
-    }, "" + props.value + (showAsPercentage ? '%' : ''));
-  };
-
-  var data = [{
+    }, `${props.value}${showAsPercentage ? '%' : ''}`);
+  }, [showAsPercentage, valueSize, valueColor, valueWeight]);
+  const data = useMemo(() => [{
     id: 'value',
     value: showAsPercentage ? Math.round(value / max * 100) : value
   }, {
-    id: 'backgorund',
+    id: 'background',
     value: showAsPercentage ? 100 - value / max * 100 : max - value
-  }];
+  }], [showAsPercentage, value, max]);
   return React.createElement(ResponsiveContainer, {
@@ -667,9 +591,7 @@ width: responsive ? '100%' : width,
     labelLine: false
-  }, data.map(function (entry, index) {
-    return React.createElement(Cell, {
-      key: "circularGaugeCell_" + entry.id,
-      fill: index ? barBackground : barFill,
-      stroke: 'none'
-    });
-  }))));
+  }, data.map((entry, index) => React.createElement(Cell, {
+    key: `circularGaugeCell_${entry.id}`,
+    fill: index ? barBackground : barFill,
+    stroke: 'none'
+  })))));
 };
@@ -676,0 +598,0 @@

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 {

package.json

 {
   "name": "@loadsmart/data-visualization",
-  "version": "2021.4.21",
+  "version": "2021.4.23",
   "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

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

Worsened metrics

Total package byte prevSize

130574

decreased by-4.07%

Number of package files

37

decreased by-2.63%

Lines of code

1510

decreased by-3.33%

No dependency changes