@loadsmart/data-visualization - npm Package Compare versions

Comparing version 2021.4.7 to 2021.4.19

dist/index.d.ts

@@ -7,1 +7,5 @@ export { default as Button } from './components/Button';
 export type { BarChartProps, BarChartDataType, BarChartColorsType } from './components/BarChart';
+export { default as CircularGauge } from './components/CircularGauge';
+export type { CircularGaugePropsType } from './components/CircularGauge';
+export type { ThemeType } from './theme';
+export { default as DefaultTheme, defaultValues } from './theme';

dist/index.js

@@ -98,2 +98,3 @@ function _interopDefault (ex) { return (ex && (typeof ex === 'object') && 'default' in ex) ? ex['default'] : ex; }
     darker: '#313336',
+    light: '#CFD8DC',
     lighter: '#E9EBEC',
@@ -141,3 +142,3 @@ lightest: '#FFFFFF'
     size: '12px',
-    weight: '600',
+    weight: 600,
     transform: 'uppercase'
@@ -148,7 +149,7 @@ },
       size: '14px',
-      weight: '400'
+      weight: 400
     },
     content: {
       size: '16px',
-      weight: '600'
+      weight: 600
     }
@@ -231,2 +232,11 @@ },
 };
+var circular = {
+  barFill: colors.neutral.darker,
+  barBackground: colors.neutral.light,
+  value: {
+    color: colors.neutral.darker,
+    size: typography.charts.size,
+    weight: typography.charts.weight
+  }
+};
 var defaultTheme = {
@@ -237,5 +247,14 @@ button: button,
     bar: bar
+  },
+  gauges: {
+    circular: circular
   }
 };
 
+var defaultValues = {
+  colors: colors,
+  dimensions: dimensions,
+  typography: typography
+};
+
 var getFromTheme = (function (customTheme, path) {
@@ -588,5 +607,64 @@ var defaultValue = get(defaultTheme, path, null);
 
+var CircularGauge = function CircularGauge(_ref) {
+  var value = _ref.value,
+      max = _ref.max,
+      showAsPercentage = _ref.showAsPercentage,
+      theme = _ref.theme;
+  var contextTheme = React.useContext(styled.ThemeContext);
+  var barFill = getFromClosestTheme('gauges.circular.barFill', theme, contextTheme);
+  var barBackground = getFromClosestTheme('gauges.circular.barBackground', 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 height = getFromClosestTheme('gauges.circular.height', theme, contextTheme);
+
+  var renderLabel = function renderLabel(props) {
+    if (props.index) return;
+    return React__default.createElement("text", {
+      x: props.cx + 1,
+      y: props.cy + 1,
+      textAnchor: 'middle',
+      alignmentBaseline: 'middle',
+      fontSize: valueSize,
+      fill: valueColor,
+      fontWeight: valueWeight
+    }, "" + 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
+  }];
+  return React__default.createElement(recharts.ResponsiveContainer, {
+    width: width || '100%',
+    height: height || '100%'
+  }, React__default.createElement(recharts.PieChart, null, React__default.createElement(recharts.Pie, {
+    innerRadius: '80%',
+    outerRadius: '100%',
+    data: data,
+    startAngle: 90,
+    endAngle: -270,
+    dataKey: 'value',
+    paddingAngle: 0,
+    label: renderLabel,
+    labelLine: false
+  }, data.map(function (entry, index) {
+    return React__default.createElement(recharts.Cell, {
+      key: "circularGaugeCell_" + entry.id,
+      fill: index ? barBackground : barFill,
+      stroke: 'none'
+    });
+  }))));
+};
+
 exports.BarChart = BarChart;
 exports.Button = Button;
 exports.Card = Card;
+exports.CircularGauge = CircularGauge;
+exports.DefaultTheme = defaultTheme;
+exports.defaultValues = defaultValues;
 //# sourceMappingURL=index.js.map

dist/index.modern.js

 import React, { useState, useCallback, useEffect, useContext } from 'react';
 import styled, { ThemeProvider, ThemeContext } from 'styled-components';
 import get from 'lodash.get';
-import { ResponsiveContainer, BarChart as BarChart$1, Bar, LabelList, Cell, XAxis, YAxis } from 'recharts';
+import { ResponsiveContainer, BarChart as BarChart$1, Bar, LabelList, Cell, XAxis, YAxis, PieChart, Pie } from 'recharts';
 
@@ -94,2 +94,3 @@ function _extends() {
     darker: '#313336',
+    light: '#CFD8DC',
     lighter: '#E9EBEC',
@@ -137,3 +138,3 @@ lightest: '#FFFFFF'
     size: '12px',
-    weight: '600',
+    weight: 600,
     transform: 'uppercase'
@@ -144,7 +145,7 @@ },
       size: '14px',
-      weight: '400'
+      weight: 400
     },
     content: {
       size: '16px',
-      weight: '600'
+      weight: 600
     }
@@ -227,2 +228,11 @@ },
 };
+var circular = {
+  barFill: colors.neutral.darker,
+  barBackground: colors.neutral.light,
+  value: {
+    color: colors.neutral.darker,
+    size: typography.charts.size,
+    weight: typography.charts.weight
+  }
+};
 var defaultTheme = {
@@ -233,5 +243,14 @@ button: button,
     bar: bar
+  },
+  gauges: {
+    circular: circular
   }
 };
 
+var defaultValues = {
+  colors: colors,
+  dimensions: dimensions,
+  typography: typography
+};
+
 var getFromTheme = (function (customTheme, path) {
@@ -584,3 +603,59 @@ var defaultValue = get(defaultTheme, path, null);
 
-export { BarChart, Button, Card };
+var CircularGauge = function CircularGauge(_ref) {
+  var value = _ref.value,
+      max = _ref.max,
+      showAsPercentage = _ref.showAsPercentage,
+      theme = _ref.theme;
+  var contextTheme = useContext(ThemeContext);
+  var barFill = getFromClosestTheme('gauges.circular.barFill', theme, contextTheme);
+  var barBackground = getFromClosestTheme('gauges.circular.barBackground', 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 height = getFromClosestTheme('gauges.circular.height', theme, contextTheme);
+
+  var renderLabel = function renderLabel(props) {
+    if (props.index) return;
+    return React.createElement("text", {
+      x: props.cx + 1,
+      y: props.cy + 1,
+      textAnchor: 'middle',
+      alignmentBaseline: 'middle',
+      fontSize: valueSize,
+      fill: valueColor,
+      fontWeight: valueWeight
+    }, "" + 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
+  }];
+  return React.createElement(ResponsiveContainer, {
+    width: width || '100%',
+    height: height || '100%'
+  }, React.createElement(PieChart, null, React.createElement(Pie, {
+    innerRadius: '80%',
+    outerRadius: '100%',
+    data: data,
+    startAngle: 90,
+    endAngle: -270,
+    dataKey: 'value',
+    paddingAngle: 0,
+    label: renderLabel,
+    labelLine: false
+  }, data.map(function (entry, index) {
+    return React.createElement(Cell, {
+      key: "circularGaugeCell_" + entry.id,
+      fill: index ? barBackground : barFill,
+      stroke: 'none'
+    });
+  }))));
+};
+
+export { BarChart, Button, Card, CircularGauge, defaultTheme as DefaultTheme, defaultValues };
 //# sourceMappingURL=index.modern.js.map

dist/theme/default.d.ts

@@ -1,82 +0,3 @@
-declare const _default: {
-    button: {
-        regular: {
-            background: string;
-            padding: string;
-            border: {
-                color: string;
-                width: string;
-                radius: string;
-            };
-            text: {
-                color: string;
-                size: string;
-                weight: string;
-                transform: string;
-            };
-        };
-        active: {
-            background: string;
-            text: {
-                color: string;
-                size: string;
-                weight: string;
-                transform: string;
-            };
-            padding: string;
-            border: {
-                color: string;
-                width: string;
-                radius: string;
-            };
-        };
-    };
-    card: {
-        background: string;
-        padding: string;
-        shadow: string;
-        border: {
-            radius: string;
-        };
-        title: {
-            size: string;
-            weight: string;
-            color: string;
-        };
-        content: {
-            size: string;
-            weight: string;
-            color: string;
-            margin: string;
-            editButton: {
-                padding: string;
-                background: string;
-                border: {
-                    radius: string;
-                    width: number;
-                };
-                width: string;
-                height: string;
-                right: string;
-                top: string;
-            };
-        };
-    };
-    charts: {
-        bar: {
-            fill: string;
-            size: number;
-            value: {
-                color: string;
-                weight: number;
-                size: number;
-            };
-            name: {
-                color: string;
-                weight: number;
-                size: number;
-            };
-        };
-    };
-};
-export default _default;
+import { ThemeType } from './types';
+declare const defaultTheme: ThemeType;
+export default defaultTheme;

dist/theme/index.d.ts

 export { default } from './default';
+export type { ThemeType } from './types';
+export declare const defaultValues: {
+    colors: {
+        neutral: {
+            darkest: string;
+            darker: string;
+            light: string;
+            lighter: string;
+            lightest: string;
+        };
+        status: {
+            danger: {
+                dark: string;
+            };
+            warning: {
+                dark: string;
+            };
+            success: {
+                light: string;
+            };
+        };
+    };
+    dimensions: {
+        pixels: {
+            zero: number;
+            smallest: string;
+            smaller: string;
+            small: string;
+            medium: string;
+            large: string;
+            larger: string;
+            largest: string;
+        };
+        number: {
+            zero: number;
+            smallest: number;
+            smaller: number;
+            small: number;
+            medium: number;
+            large: number;
+            larger: number;
+            largest: number;
+        };
+    };
+    typography: {
+        button: {
+            size: string;
+            weight: number;
+            transform: string;
+        };
+        card: {
+            title: {
+                size: string;
+                weight: number;
+            };
+            content: {
+                size: string;
+                weight: number;
+            };
+        };
+        charts: {
+            size: number;
+            weight: number;
+        };
+    };
+};

dist/theme/values/colors.d.ts

@@ -5,2 +5,3 @@ declare const _default: {
         darker: string;
+        light: string;
         lighter: string;
@@ -7,0 +8,0 @@ lightest: string;

dist/theme/values/typography.d.ts

 declare const _default: {
     button: {
         size: string;
-        weight: string;
+        weight: number;
         transform: string;
@@ -10,7 +10,7 @@ };
             size: string;
-            weight: string;
+            weight: number;
         };
         content: {
             size: string;
-            weight: string;
+            weight: number;
         };
@@ -17,0 +17,0 @@ };

package.json

 {
   "name": "@loadsmart/data-visualization",
-  "version": "2021.4.7",
+  "version": "2021.4.19",
   "description": "A library of data visualization React components to help in dashboard building and more!",
@@ -49,2 +49,3 @@ "author": "lipe-dev",
     "cross-env": "^7.0.2",
+    "csstype": "^3.0.7",
     "cz-conventional-changelog": "3.3.0",
@@ -51,0 +52,0 @@ "eslint": "^6.8.0",

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

135077

increased by18.82%

Number of package files

38

increased by15.15%

Lines of code

1556

increased by18.24%

Worsened metrics

Dev dependency count

36

increased by2.86%

No dependency changes