@shopify/polaris-viz - npm Package Compare versions

Comparing version 0.0.4 to 0.0.5

CHANGELOG.md

 # Changelog
 
-<!-- ## [Unreleased] -->
+## Unreleased
 
+## [0.0.5] - 2020-02-24
+
+### Added
+
+Sparkline component
+
 ## [0.0.4] - 2020-02-04
@@ -17,3 +23,3 @@
 - Remove use of Emotion styled components in favour of Sass
-- Use .esnext file extensions in esnext directory, as required for consumption of esnext files by Sewing Kit
+- Use .esnext file extensions in esnext directory, as required for consumption of Esnext files by Sewing Kit
 
@@ -20,0 +26,0 @@ ## [0.0.2] - 2020-01-15

index.es.js

@@ -1,2 +0,2 @@
-import React from 'react';
+import React, { useState, useLayoutEffect, useRef } from 'react';
 import { sum } from 'd3-array';
@@ -6,2 +6,5 @@ import { scaleLinear } from 'd3-scale';
 import tokens, { colorPurpleDark, colorBlue, colorTeal, colorSkyDark } from '@shopify/polaris-tokens';
+import { area } from 'd3-shape';
+import { useSpring, animated } from 'react-spring';
+import { useDebouncedCallback } from 'use-debounce';
 
@@ -145,2 +148,220 @@ var styles = {
 
-export { NormalizedStackedBar };
+function _slicedToArray(arr, i) {
+  return _arrayWithHoles(arr) || _iterableToArrayLimit(arr, i) || _nonIterableRest();
+}
+
+function _toConsumableArray(arr) {
+  return _arrayWithoutHoles(arr) || _iterableToArray(arr) || _nonIterableSpread();
+}
+
+function _arrayWithoutHoles(arr) {
+  if (Array.isArray(arr)) {
+    for (var i = 0, arr2 = new Array(arr.length); i < arr.length; i++) arr2[i] = arr[i];
+
+    return arr2;
+  }
+}
+
+function _arrayWithHoles(arr) {
+  if (Array.isArray(arr)) return arr;
+}
+
+function _iterableToArray(iter) {
+  if (Symbol.iterator in Object(iter) || Object.prototype.toString.call(iter) === "[object Arguments]") return Array.from(iter);
+}
+
+function _iterableToArrayLimit(arr, i) {
+  if (!(Symbol.iterator in Object(arr) || Object.prototype.toString.call(arr) === "[object Arguments]")) {
+    return;
+  }
+
+  var _arr = [];
+  var _n = true;
+  var _d = false;
+  var _e = undefined;
+
+  try {
+    for (var _i = arr[Symbol.iterator](), _s; !(_n = (_s = _i.next()).done); _n = true) {
+      _arr.push(_s.value);
+
+      if (i && _arr.length === i) break;
+    }
+  } catch (err) {
+    _d = true;
+    _e = err;
+  } finally {
+    try {
+      if (!_n && _i["return"] != null) _i["return"]();
+    } finally {
+      if (_d) throw _e;
+    }
+  }
+
+  return _arr;
+}
+
+function _nonIterableSpread() {
+  throw new TypeError("Invalid attempt to spread non-iterable instance");
+}
+
+function _nonIterableRest() {
+  throw new TypeError("Invalid attempt to destructure non-iterable instance");
+}
+
+var ONE_SECOND = 1000;
+function useWindowSize() {
+  var _useState = useState([0, 0]),
+      _useState2 = _slicedToArray(_useState, 2),
+      size = _useState2[0],
+      setWindowDimensions = _useState2[1];
+
+  var _useDebouncedCallback = useDebouncedCallback(function () {
+    setWindowDimensions([window.innerWidth, window.innerHeight]);
+  }, ONE_SECOND),
+      _useDebouncedCallback2 = _slicedToArray(_useDebouncedCallback, 1),
+      debouncedCallback = _useDebouncedCallback2[0];
+
+  useLayoutEffect(function () {
+    window.addEventListener('resize', debouncedCallback);
+    return function () {
+      return window.removeEventListener('resize', debouncedCallback);
+    };
+  }, [debouncedCallback]);
+  return size;
+}
+
+function getPathLength(element) {
+  if (element == null) {
+    return 0;
+  }
+
+  return element.getTotalLength();
+}
+
+var styles$3 = {
+  "VisuallyHidden": "PolarisViz-Sparkline__VisuallyHidden"
+};
+
+var MAX_AREA_OPACITY = 0.4;
+var SVG_MARGIN = 2;
+var STROKE_WIDTH = 1.5;
+var ANIMATION_CONFIG = {
+  duration: 1000
+};
+function Sparkline(_ref) {
+  var data = _ref.data,
+      accessibilityLabel = _ref.accessibilityLabel,
+      _ref$color = _ref.color,
+      color = _ref$color === void 0 ? 'colorTeal' : _ref$color,
+      _ref$useAnimation = _ref.useAnimation,
+      useAnimation = _ref$useAnimation === void 0 ? false : _ref$useAnimation,
+      _ref$includeArea = _ref.includeArea,
+      includeArea = _ref$includeArea === void 0 ? false : _ref$includeArea;
+  var pathRef = useRef(null);
+  var containerRef = useRef(null);
+
+  var _useState = useState({
+    width: 0,
+    height: 0
+  }),
+      _useState2 = _slicedToArray(_useState, 2),
+      svgDimensions = _useState2[0],
+      setSvgDimensions = _useState2[1];
+
+  var _useState3 = useState(getPathLength(pathRef.current)),
+      _useState4 = _slicedToArray(_useState3, 2),
+      pathLength = _useState4[0],
+      setPathLength = _useState4[1];
+
+  var _useWindowSize = useWindowSize(),
+      _useWindowSize2 = _slicedToArray(_useWindowSize, 2),
+      windowWidth = _useWindowSize2[0],
+      windowHeight = _useWindowSize2[1];
+
+  var containerWidth = containerRef != null && containerRef.current != null ? containerRef.current.clientWidth : 0;
+  useLayoutEffect(function () {
+    setPathLength(getPathLength(pathRef.current));
+  }, [containerWidth]);
+  useLayoutEffect(function () {
+    if (containerRef.current == null) {
+      throw new Error('No SVG rendered');
+    }
+
+    setSvgDimensions({
+      height: containerRef.current.clientHeight,
+      width: containerRef.current.clientWidth
+    });
+  }, [containerRef, windowWidth, windowHeight]);
+  var prefersReducedMotion = window.matchMedia('(prefers-reduced-motion: reduce)').matches;
+  var areaAnimation = useSpring({
+    config: ANIMATION_CONFIG,
+    immediate: !useAnimation || prefersReducedMotion,
+    opacity: MAX_AREA_OPACITY,
+    from: {
+      opacity: 0
+    },
+    reset: true
+  });
+  var pathAnimation = useSpring({
+    config: ANIMATION_CONFIG,
+    immediate: !useAnimation || prefersReducedMotion,
+    strokeDashoffset: 0,
+    from: {
+      strokeDashoffset: pathLength
+    },
+    reset: true
+  });
+  var width = svgDimensions.width,
+      height = svgDimensions.height;
+  var xValues = data.map(function (_ref2) {
+    var x = _ref2.x;
+    return x;
+  });
+  var xScale = scaleLinear().range([SVG_MARGIN, width - SVG_MARGIN]).domain([Math.min.apply(Math, _toConsumableArray(xValues)), Math.max.apply(Math, _toConsumableArray(xValues))]);
+  var yValues = data.map(function (_ref3) {
+    var y = _ref3.y;
+    return y;
+  });
+  var yScale = scaleLinear().range([height - SVG_MARGIN, SVG_MARGIN]).domain([Math.min.apply(Math, _toConsumableArray(yValues)), Math.max.apply(Math, _toConsumableArray(yValues))]);
+  var lineShape = area().x(function (_ref4) {
+    var x = _ref4.x;
+    return xScale(x);
+  }).y(function (_ref5) {
+    var y = _ref5.y;
+    return yScale(y);
+  })(data);
+  var areaShape = area().x(function (_ref6) {
+    var x = _ref6.x;
+    return xScale(x);
+  }).y0(height).y1(function (_ref7) {
+    var y = _ref7.y;
+    return yScale(y);
+  })(data);
+  return React.createElement("div", {
+    style: {
+      width: '100%',
+      height: '100%'
+    },
+    ref: containerRef
+  }, accessibilityLabel ? React.createElement("span", {
+    className: styles$3.VisuallyHidden
+  }, accessibilityLabel) : null, React.createElement("svg", {
+    "aria-hidden": true,
+    width: width,
+    height: height,
+    color: tokens[color]
+  }, React.createElement("g", null, React.createElement(animated.path, {
+    ref: pathRef,
+    stroke: "currentColor",
+    strokeWidth: STROKE_WIDTH,
+    d: lineShape == null ? '' : lineShape,
+    strokeDasharray: "".concat(pathLength, " ").concat(pathLength),
+    strokeDashoffset: pathAnimation.strokeDashoffset
+  }), includeArea ? React.createElement(animated.path, {
+    opacity: areaAnimation.opacity,
+    fill: "currentColor",
+    d: areaShape == null ? '' : areaShape
+  }) : null)));
+}
+
+export { NormalizedStackedBar, Sparkline };

index.js

@@ -7,3 +7,4 @@ 'use strict';
 
-var React = _interopDefault(require('react'));
+var React = require('react');
+var React__default = _interopDefault(React);
 var d3Array = require('d3-array');
@@ -14,2 +15,5 @@ var d3Scale = require('d3-scale');
 var tokens__default = _interopDefault(tokens);
+var d3Shape = require('d3-shape');
+var reactSpring = require('react-spring');
+var useDebounce = require('use-debounce');
 
@@ -27,5 +31,5 @@ var styles = {
       color = _ref.color;
-  return React.createElement("div", {
+  return React__default.createElement("div", {
     className: styles.Container
-  }, React.createElement("div", {
+  }, React__default.createElement("div", {
     style: {
@@ -35,5 +39,5 @@ background: color
     className: styles.LabelColor
-  }), React.createElement("div", {
+  }), React__default.createElement("div", {
     className: styles.Label
-  }, React.createElement("strong", null, label), React.createElement("div", {
+  }, React__default.createElement("strong", null, label), React__default.createElement("div", {
     className: styles.Value
@@ -60,3 +64,3 @@ }, value)));
   var safeScale = scaleNeedsRounding ? 1.5 : scale;
-  return React.createElement("div", {
+  return React__default.createElement("div", {
     className: cssUtilities.classNames(styles$1.Segment, styles$1["".concat(orientation, "-").concat(size)]),
@@ -126,7 +130,7 @@ style: {
   var colorPalette = Array.isArray(colors) ? getTokensFromColors(colors) : getColorPalette(colors);
-  return React.createElement("div", {
+  return React__default.createElement("div", {
     className: cssUtilities.classNames(styles$2.Container, isVertical ? styles$2.VerticalContainer : styles$2.HorizontalContainer),
     "aria-label": accessibilityLabel,
     role: "img"
-  }, React.createElement("div", {
+  }, React__default.createElement("div", {
     className: isVertical ? styles$2.VerticalLabelContainer : styles$2.HorizontailLabelContainer
@@ -136,3 +140,3 @@ }, slicedData.map(function (_ref4, index) {
         formattedValue = _ref4.formattedValue;
-    return React.createElement(BarLabel, {
+    return React__default.createElement(BarLabel, {
       key: "".concat(label, "-").concat(formattedValue),
@@ -143,3 +147,3 @@ label: label,
     });
-  })), React.createElement("div", {
+  })), React__default.createElement("div", {
     className: cssUtilities.classNames(styles$2.BarContainer, isVertical ? styles$2.VerticalBarContainer : styles$2.HorizontalBarContainer)
@@ -149,3 +153,3 @@ }, slicedData.map(function (_ref5, index) {
         label = _ref5.label;
-    return React.createElement(BarSegment, {
+    return React__default.createElement(BarSegment, {
       orientation: orientation,
@@ -160,2 +164,221 @@ size: size,
 
+function _slicedToArray(arr, i) {
+  return _arrayWithHoles(arr) || _iterableToArrayLimit(arr, i) || _nonIterableRest();
+}
+
+function _toConsumableArray(arr) {
+  return _arrayWithoutHoles(arr) || _iterableToArray(arr) || _nonIterableSpread();
+}
+
+function _arrayWithoutHoles(arr) {
+  if (Array.isArray(arr)) {
+    for (var i = 0, arr2 = new Array(arr.length); i < arr.length; i++) arr2[i] = arr[i];
+
+    return arr2;
+  }
+}
+
+function _arrayWithHoles(arr) {
+  if (Array.isArray(arr)) return arr;
+}
+
+function _iterableToArray(iter) {
+  if (Symbol.iterator in Object(iter) || Object.prototype.toString.call(iter) === "[object Arguments]") return Array.from(iter);
+}
+
+function _iterableToArrayLimit(arr, i) {
+  if (!(Symbol.iterator in Object(arr) || Object.prototype.toString.call(arr) === "[object Arguments]")) {
+    return;
+  }
+
+  var _arr = [];
+  var _n = true;
+  var _d = false;
+  var _e = undefined;
+
+  try {
+    for (var _i = arr[Symbol.iterator](), _s; !(_n = (_s = _i.next()).done); _n = true) {
+      _arr.push(_s.value);
+
+      if (i && _arr.length === i) break;
+    }
+  } catch (err) {
+    _d = true;
+    _e = err;
+  } finally {
+    try {
+      if (!_n && _i["return"] != null) _i["return"]();
+    } finally {
+      if (_d) throw _e;
+    }
+  }
+
+  return _arr;
+}
+
+function _nonIterableSpread() {
+  throw new TypeError("Invalid attempt to spread non-iterable instance");
+}
+
+function _nonIterableRest() {
+  throw new TypeError("Invalid attempt to destructure non-iterable instance");
+}
+
+var ONE_SECOND = 1000;
+function useWindowSize() {
+  var _useState = React.useState([0, 0]),
+      _useState2 = _slicedToArray(_useState, 2),
+      size = _useState2[0],
+      setWindowDimensions = _useState2[1];
+
+  var _useDebouncedCallback = useDebounce.useDebouncedCallback(function () {
+    setWindowDimensions([window.innerWidth, window.innerHeight]);
+  }, ONE_SECOND),
+      _useDebouncedCallback2 = _slicedToArray(_useDebouncedCallback, 1),
+      debouncedCallback = _useDebouncedCallback2[0];
+
+  React.useLayoutEffect(function () {
+    window.addEventListener('resize', debouncedCallback);
+    return function () {
+      return window.removeEventListener('resize', debouncedCallback);
+    };
+  }, [debouncedCallback]);
+  return size;
+}
+
+function getPathLength(element) {
+  if (element == null) {
+    return 0;
+  }
+
+  return element.getTotalLength();
+}
+
+var styles$3 = {
+  "VisuallyHidden": "PolarisViz-Sparkline__VisuallyHidden"
+};
+
+var MAX_AREA_OPACITY = 0.4;
+var SVG_MARGIN = 2;
+var STROKE_WIDTH = 1.5;
+var ANIMATION_CONFIG = {
+  duration: 1000
+};
+function Sparkline(_ref) {
+  var data = _ref.data,
+      accessibilityLabel = _ref.accessibilityLabel,
+      _ref$color = _ref.color,
+      color = _ref$color === void 0 ? 'colorTeal' : _ref$color,
+      _ref$useAnimation = _ref.useAnimation,
+      useAnimation = _ref$useAnimation === void 0 ? false : _ref$useAnimation,
+      _ref$includeArea = _ref.includeArea,
+      includeArea = _ref$includeArea === void 0 ? false : _ref$includeArea;
+  var pathRef = React.useRef(null);
+  var containerRef = React.useRef(null);
+
+  var _useState = React.useState({
+    width: 0,
+    height: 0
+  }),
+      _useState2 = _slicedToArray(_useState, 2),
+      svgDimensions = _useState2[0],
+      setSvgDimensions = _useState2[1];
+
+  var _useState3 = React.useState(getPathLength(pathRef.current)),
+      _useState4 = _slicedToArray(_useState3, 2),
+      pathLength = _useState4[0],
+      setPathLength = _useState4[1];
+
+  var _useWindowSize = useWindowSize(),
+      _useWindowSize2 = _slicedToArray(_useWindowSize, 2),
+      windowWidth = _useWindowSize2[0],
+      windowHeight = _useWindowSize2[1];
+
+  var containerWidth = containerRef != null && containerRef.current != null ? containerRef.current.clientWidth : 0;
+  React.useLayoutEffect(function () {
+    setPathLength(getPathLength(pathRef.current));
+  }, [containerWidth]);
+  React.useLayoutEffect(function () {
+    if (containerRef.current == null) {
+      throw new Error('No SVG rendered');
+    }
+
+    setSvgDimensions({
+      height: containerRef.current.clientHeight,
+      width: containerRef.current.clientWidth
+    });
+  }, [containerRef, windowWidth, windowHeight]);
+  var prefersReducedMotion = window.matchMedia('(prefers-reduced-motion: reduce)').matches;
+  var areaAnimation = reactSpring.useSpring({
+    config: ANIMATION_CONFIG,
+    immediate: !useAnimation || prefersReducedMotion,
+    opacity: MAX_AREA_OPACITY,
+    from: {
+      opacity: 0
+    },
+    reset: true
+  });
+  var pathAnimation = reactSpring.useSpring({
+    config: ANIMATION_CONFIG,
+    immediate: !useAnimation || prefersReducedMotion,
+    strokeDashoffset: 0,
+    from: {
+      strokeDashoffset: pathLength
+    },
+    reset: true
+  });
+  var width = svgDimensions.width,
+      height = svgDimensions.height;
+  var xValues = data.map(function (_ref2) {
+    var x = _ref2.x;
+    return x;
+  });
+  var xScale = d3Scale.scaleLinear().range([SVG_MARGIN, width - SVG_MARGIN]).domain([Math.min.apply(Math, _toConsumableArray(xValues)), Math.max.apply(Math, _toConsumableArray(xValues))]);
+  var yValues = data.map(function (_ref3) {
+    var y = _ref3.y;
+    return y;
+  });
+  var yScale = d3Scale.scaleLinear().range([height - SVG_MARGIN, SVG_MARGIN]).domain([Math.min.apply(Math, _toConsumableArray(yValues)), Math.max.apply(Math, _toConsumableArray(yValues))]);
+  var lineShape = d3Shape.area().x(function (_ref4) {
+    var x = _ref4.x;
+    return xScale(x);
+  }).y(function (_ref5) {
+    var y = _ref5.y;
+    return yScale(y);
+  })(data);
+  var areaShape = d3Shape.area().x(function (_ref6) {
+    var x = _ref6.x;
+    return xScale(x);
+  }).y0(height).y1(function (_ref7) {
+    var y = _ref7.y;
+    return yScale(y);
+  })(data);
+  return React__default.createElement("div", {
+    style: {
+      width: '100%',
+      height: '100%'
+    },
+    ref: containerRef
+  }, accessibilityLabel ? React__default.createElement("span", {
+    className: styles$3.VisuallyHidden
+  }, accessibilityLabel) : null, React__default.createElement("svg", {
+    "aria-hidden": true,
+    width: width,
+    height: height,
+    color: tokens__default[color]
+  }, React__default.createElement("g", null, React__default.createElement(reactSpring.animated.path, {
+    ref: pathRef,
+    stroke: "currentColor",
+    strokeWidth: STROKE_WIDTH,
+    d: lineShape == null ? '' : lineShape,
+    strokeDasharray: "".concat(pathLength, " ").concat(pathLength),
+    strokeDashoffset: pathAnimation.strokeDashoffset
+  }), includeArea ? React__default.createElement(reactSpring.animated.path, {
+    opacity: areaAnimation.opacity,
+    fill: "currentColor",
+    d: areaShape == null ? '' : areaShape
+  }) : null)));
+}
+
 exports.NormalizedStackedBar = NormalizedStackedBar;
+exports.Sparkline = Sparkline;

package.json

 {
   "name": "@shopify/polaris-viz",
   "description": "Shopify’s viz component library",
-  "version": "0.0.4",
+  "version": "0.0.5",
   "private": false,
@@ -67,2 +67,3 @@ "license": "SEE LICENSE IN LICENSE.md",
     "@types/d3-scale": "^2.1.1",
+    "@types/d3-shape": "^1.3.2",
     "@types/jest": "24.0.19",
@@ -78,2 +79,3 @@ "@types/node": "^12.7.5",
     "cssnano": "^4.1.10",
+    "csstype": "^2.6.8",
     "fs-extra": "^7.0.1",
@@ -125,5 +127,8 @@ "glob": "^7.1.4",
     "d3-scale": "^1.0.7",
+    "d3-shape": "^1.3.7",
     "react": "16.9.0-alpha.0",
-    "react-dom": "16.9.0-alpha.0"
+    "react-dom": "16.9.0-alpha.0",
+    "react-spring": "^8.0.27",
+    "use-debounce": "^3.3.0"
   }
 }

README.md

@@ -31,2 +31,4 @@ # Polaris Viz
 
+Components inherit their sizes from their containers, so place your component inside an element with a width and height specified.
+
 <table>
@@ -38,2 +40,3 @@ <thead>
   <thead>
+
   <tbody>
@@ -68,3 +71,30 @@ <tr>
     </tr>
-
+      <tr>
+    <td>
+     Sparkline
+      <br />
+      <br />
+      <img src="https://github.com/Shopify/polaris-viz/raw/master/documentation/images/sparkline.png"/>
+    </td>
+    <td>
+      Used in small sizes to give an overview of how a metric has performed over time.
+    </td>
+    <td><ul>
+    <li><strong>data (required):</strong>
+    <code>{x: number, y: number}[]</code>
+    </li>
+    <li><strong>accessibilityLabel:</strong>
+    <code>string</code>
+    </li>
+    <li><strong>color:</strong>
+    <code><a href="https://github.com/Shopify/polaris-viz/blob/master/src/components/NormalizedStackedBar/types.ts#L13">Color</a></code>
+    </li>
+    <li><strong>useAnimation:</strong>
+    <code>boolean</code>
+    </li>
+    <li><strong>showArea:</strong>
+    <code>boolean</code>
+    </li>
+    </ul></td>
+    </tr>
   </tbody>
@@ -71,0 +101,0 @@ </table>

types/components/index.d.ts

 export { NormalizedStackedBar } from './NormalizedStackedBar';
+export { Sparkline } from './Sparkline';

types/components/NormalizedStackedBar/index.d.ts

 export { NormalizedStackedBar } from './NormalizedStackedBar';
-export { Orientation, Size, ColorScheme, Color } from './types';
+export { Orientation, Size, ColorScheme } from './types';

types/components/NormalizedStackedBar/NormalizedStackedBar.d.ts

 /// <reference types="react" />
-import { Size, ColorScheme, Color, Data, Orientation } from './types';
+import { Color } from 'types';
+import { Size, ColorScheme, Data, Orientation } from './types';
 interface Props {
@@ -4,0 +5,0 @@ data: Data[];

types/components/NormalizedStackedBar/types.d.ts

@@ -9,2 +9,1 @@ export declare type Orientation = 'horizontal' | 'vertical';
 }
-export declare type Color = 'colorBlack' | 'colorBlue' | 'colorBlueDark' | 'colorBlueDarker' | 'colorBlueLight' | 'colorBlueLighter' | 'colorBlueText' | 'colorGreen' | 'colorGreenDark' | 'colorGreenDarker' | 'colorGreenLight' | 'colorGreenLighter' | 'colorGreenText' | 'colorIndigo' | 'colorIndigoDark' | 'colorIndigoDarker' | 'colorIndigoLight' | 'colorIndigoLighter' | 'colorIndigoText' | 'colorInk' | 'colorInkLight' | 'colorInkLighter' | 'colorInkLightest' | 'colorOrange' | 'colorOrangeDark' | 'colorOrangeDarker' | 'colorOrangeLight' | 'colorOrangeLighter' | 'colorOrangeText' | 'colorPurple' | 'colorPurpleDark' | 'colorPurpleDarker' | 'colorPurpleLight' | 'colorPurpleLighter' | 'colorPurpleText' | 'colorRed' | 'colorRedDark' | 'colorRedDarker' | 'colorRedLight' | 'colorRedLighter' | 'colorRedText' | 'colorSky' | 'colorSkyDark' | 'colorSkyLight' | 'colorSkyLighter' | 'colorTeal' | 'colorTealDark' | 'colorTealDarker' | 'colorTealLight' | 'colorTealLighter' | 'colorTealText' | 'colorWhite' | 'colorYellow' | 'colorYellowDark' | 'colorYellowDarker' | 'colorYellowLight' | 'colorYellowLighter';

types/components/NormalizedStackedBar/utilities.d.ts

@@ -1,3 +0,4 @@
-import { ColorScheme, Color } from './types';
+import { Color } from 'types';
+import { ColorScheme } from './types';
 export declare function getColorPalette(colors: ColorScheme): string[] | ("rgb(0, 111, 187)" | "rgb(80, 36, 143)" | "rgb(196, 205, 213)" | "rgb(71, 193, 191)")[];
 export declare function getTokensFromColors(colors: Color[]): ("rgb(0, 0, 0)" | "rgb(0, 111, 187)" | "rgb(8, 78, 138)" | "rgb(0, 20, 41)" | "rgb(180, 225, 250)" | "rgb(235, 245, 250)" | "rgb(62, 78, 87)" | "rgb(80, 184, 60)" | "rgb(16, 128, 67)" | "rgb(23, 54, 48)" | "rgb(187, 229, 179)" | "rgb(227, 241, 223)" | "rgb(65, 79, 62)" | "rgb(92, 106, 196)" | "rgb(32, 46, 120)" | "rgb(0, 6, 57)" | "rgb(179, 188, 245)" | "rgb(244, 245, 250)" | "rgb(62, 65, 85)" | "rgb(33, 43, 54)" | "rgb(69, 79, 91)" | "rgb(99, 115, 129)" | "rgb(145, 158, 171)" | "rgb(244, 147, 66)" | "rgb(192, 87, 23)" | "rgb(74, 21, 4)" | "rgb(255, 197, 139)" | "rgb(252, 235, 219)" | "rgb(89, 68, 48)" | "rgb(156, 106, 222)" | "rgb(80, 36, 143)" | "rgb(35, 0, 81)" | "rgb(227, 208, 255)" | "rgb(246, 240, 253)" | "rgb(80, 73, 90)" | "rgb(222, 54, 24)" | "rgb(191, 7, 17)" | "rgb(51, 1, 1)" | "rgb(254, 173, 154)" | "rgb(251, 234, 229)" | "rgb(88, 60, 53)" | "rgb(223, 227, 232)" | "rgb(196, 205, 213)" | "rgb(244, 246, 248)" | "rgb(249, 250, 251)" | "rgb(71, 193, 191)" | "rgb(0, 132, 142)" | "rgb(0, 49, 53)" | "rgb(183, 236, 236)" | "rgb(224, 245, 245)" | "rgb(64, 83, 82)" | "rgb(255, 255, 255)" | "rgb(238, 194, 0)" | "rgb(138, 97, 22)" | "rgb(87, 59, 0)" | "rgb(255, 234, 138)" | "rgb(252, 241, 205)")[];

types/index.d.ts

@@ -1,1 +0,1 @@
-export { NormalizedStackedBar } from './components';
+export { NormalizedStackedBar, Sparkline } from './components';

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

53762

increased by61.17%

Number of package files

48

increased by23.08%

Lines of code

810

increased by109.84%

Number of lines in readme file

107

increased by38.96%

Worsened metrics

Dependency count

11

increased by37.5%

Dev dependency count

43

increased by4.88%

Number of downloads

14854

decreased by-9.52%

Dependency changes

• + Addedd3-shape@^1.3.7

• + Addedreact-spring@^8.0.27

• + Addeduse-debounce@^3.3.0

• + Added@babel/runtime@7.26.0(transitive)

• + Addedd3-path@1.0.9(transitive)

• + Addedd3-shape@1.3.7(transitive)

• + Addedreact@19.0.0(transitive)

• + Addedreact-dom@19.0.0(transitive)

• + Addedreact-spring@8.0.27(transitive)

• + Addedregenerator-runtime@0.14.1(transitive)

• + Addedscheduler@0.25.0(transitive)

• + Addeduse-debounce@3.4.3(transitive)