mirror of
https://github.com/shlinkio/shlink-web-client.git
synced 2025-01-09 09:47:28 +03:00
Merge pull request #124 from acelaya/feature/paginated-charts
Feature/paginated charts
This commit is contained in:
Alejandro Celaya
GitHub
commit
2ba86767fe
25 changed files with 445 additions and 161 deletions
|
|
@ -26,6 +26,7 @@
|
|||
"no-console": "warn",
|
||||
"template-curly-spacing": ["error", "never"],
|
||||
"no-warning-comments": "off",
|
||||
"no-magic-numbers": "off",
|
||||
"no-undefined": "off",
|
||||
"indent": ["error", 2, {
|
||||
"SwitchCase": 1
|
||||
|
|
|
|||
|
|
@ -4,7 +4,7 @@ All notable changes to this project will be documented in this file.
|
|||
|
||||
The format is based on [Keep a Changelog](https://keepachangelog.com/en/1.0.0/), and this project adheres to [Semantic Versioning](https://semver.org).
|
||||
|
||||
## [Unreleased]
|
||||
## 2.0.3 - 2019-03-16
|
||||
|
||||
#### Added
|
||||
|
||||
|
|
@ -26,6 +26,7 @@ The format is based on [Keep a Changelog](https://keepachangelog.com/en/1.0.0/),
|
|||
|
||||
* [#120](https://github.com/shlinkio/shlink-web-client/issues/120) Fixed crash when visits page is loaded and there are no visits with known cities.
|
||||
* [#113](https://github.com/shlinkio/shlink-web-client/issues/113) Ensured visits loading is cancelled when the visits page is unmounted. Requests on flight will still finish.
|
||||
* [#118](https://github.com/shlinkio/shlink-web-client/issues/118) Fixed chart crashing when trying to render lots of bars by adding pagination.
|
||||
|
||||
|
||||
## 2.0.2 - 2019-03-04
|
||||
|
|
|
|||
|
|
@ -38,13 +38,13 @@
|
|||
"prop-types": "^15.6.2",
|
||||
"qs": "^6.5.2",
|
||||
"ramda": "^0.26.1",
|
||||
"react": "^16.7.0",
|
||||
"react": "^16.8.0",
|
||||
"react-autosuggest": "^9.4.0",
|
||||
"react-chartjs-2": "^2.7.4",
|
||||
"react-color": "^2.14.1",
|
||||
"react-copy-to-clipboard": "^5.0.1",
|
||||
"react-datepicker": "~1.5.0",
|
||||
"react-dom": "^16.7.0",
|
||||
"react-dom": "^16.8.0",
|
||||
"react-leaflet": "^2.2.1",
|
||||
"react-moment": "^0.7.6",
|
||||
"react-redux": "^5.0.7",
|
||||
|
|
|
|||
|
|
@ -51,3 +51,11 @@ body,
|
|||
margin: 0 auto !important;
|
||||
}
|
||||
}
|
||||
|
||||
.pagination .page-link {
|
||||
cursor: pointer;
|
||||
}
|
||||
|
||||
.paddingless {
|
||||
padding: 0;
|
||||
}
|
||||
|
|
|
|||
|
|
@ -2,7 +2,7 @@ import React from 'react';
|
|||
import { Link } from 'react-router-dom';
|
||||
import { Pagination, PaginationItem, PaginationLink } from 'reactstrap';
|
||||
import PropTypes from 'prop-types';
|
||||
import { range } from 'ramda';
|
||||
import { rangeOf } from '../utils/utils';
|
||||
|
||||
const propTypes = {
|
||||
serverId: PropTypes.string.isRequired,
|
||||
|
|
@ -20,7 +20,7 @@ export default function Paginator({ paginator = {}, serverId }) {
|
|||
}
|
||||
|
||||
const renderPages = () =>
|
||||
range(1, pagesCount + 1).map((pageNumber) => (
|
||||
rangeOf(pagesCount, (pageNumber) => (
|
||||
<PaginationItem key={pageNumber} active={currentPage === pageNumber}>
|
||||
<PaginationLink
|
||||
tag={Link}
|
||||
|
|
|
|||
33
src/utils/PaginationDropdown.js
Normal file
33
src/utils/PaginationDropdown.js
Normal file
|
|
@ -0,0 +1,33 @@
|
|||
import React from 'react';
|
||||
import { DropdownItem, DropdownMenu, DropdownToggle, UncontrolledDropdown } from 'reactstrap';
|
||||
import * as PropTypes from 'prop-types';
|
||||
|
||||
const propTypes = {
|
||||
toggleClassName: PropTypes.string,
|
||||
ranges: PropTypes.arrayOf(PropTypes.number).isRequired,
|
||||
value: PropTypes.number.isRequired,
|
||||
setValue: PropTypes.func.isRequired,
|
||||
};
|
||||
|
||||
const PaginationDropdown = ({ toggleClassName, ranges, value, setValue }) => (
|
||||
<UncontrolledDropdown>
|
||||
<DropdownToggle caret color="link" className={toggleClassName}>
|
||||
Paginate
|
||||
</DropdownToggle>
|
||||
<DropdownMenu right>
|
||||
{ranges.map((itemsPerPage) => (
|
||||
<DropdownItem key={itemsPerPage} active={itemsPerPage === value} onClick={() => setValue(itemsPerPage)}>
|
||||
<b>{itemsPerPage}</b> items per page
|
||||
</DropdownItem>
|
||||
))}
|
||||
<DropdownItem divider />
|
||||
<DropdownItem disabled={value === Infinity} onClick={() => setValue(Infinity)}>
|
||||
<i>Clear pagination</i>
|
||||
</DropdownItem>
|
||||
</DropdownMenu>
|
||||
</UncontrolledDropdown>
|
||||
);
|
||||
|
||||
PaginationDropdown.propTypes = propTypes;
|
||||
|
||||
export default PaginationDropdown;
|
||||
|
|
@ -33,7 +33,7 @@ const SortingDropdown = ({ items, orderField, orderDir, onChange, isButton, righ
|
|||
<DropdownToggle
|
||||
caret
|
||||
color={isButton ? 'secondary' : 'link'}
|
||||
className={classNames({ 'btn-block': isButton, 'btn-sm sorting-dropdown__paddingless': !isButton })}
|
||||
className={classNames({ 'btn-block': isButton, 'btn-sm paddingless': !isButton })}
|
||||
>
|
||||
Order by
|
||||
</DropdownToggle>
|
||||
|
|
|
|||
|
|
@ -10,7 +10,3 @@
|
|||
margin: 3.5px 0 0;
|
||||
float: right;
|
||||
}
|
||||
|
||||
.sorting-dropdown__paddingless.sorting-dropdown__paddingless {
|
||||
padding: 0;
|
||||
}
|
||||
|
|
|
|||
|
|
@ -1,15 +1,11 @@
|
|||
import { range } from 'ramda';
|
||||
import PropTypes from 'prop-types';
|
||||
import { rangeOf } from '../utils';
|
||||
|
||||
const HEX_COLOR_LENGTH = 6;
|
||||
const { floor, random } = Math;
|
||||
const letters = '0123456789ABCDEF';
|
||||
const buildRandomColor = () =>
|
||||
`#${
|
||||
range(0, HEX_COLOR_LENGTH)
|
||||
.map(() => letters[floor(random() * letters.length)])
|
||||
.join('')
|
||||
}`;
|
||||
`#${rangeOf(HEX_COLOR_LENGTH, () => letters[floor(random() * letters.length)]).join('')}`;
|
||||
const normalizeKey = (key) => key.toLowerCase().trim();
|
||||
|
||||
export default class ColorGenerator {
|
||||
|
|
|
|||
|
|
@ -2,8 +2,11 @@ import L from 'leaflet';
|
|||
import marker2x from 'leaflet/dist/images/marker-icon-2x.png';
|
||||
import marker from 'leaflet/dist/images/marker-icon.png';
|
||||
import markerShadow from 'leaflet/dist/images/marker-shadow.png';
|
||||
import { range } from 'ramda';
|
||||
|
||||
const TEN_ROUNDING_NUMBER = 10;
|
||||
const DEFAULT_TIMEOUT_DELAY = 2000;
|
||||
const { ceil } = Math;
|
||||
|
||||
export const stateFlagTimeout = (setTimeout) => (
|
||||
setState,
|
||||
|
|
@ -37,3 +40,7 @@ export const fixLeafletIcons = () => {
|
|||
shadowUrl: markerShadow,
|
||||
});
|
||||
};
|
||||
|
||||
export const rangeOf = (size, mappingFn, startAt = 1) => range(startAt, size + 1).map(mappingFn);
|
||||
|
||||
export const roundTen = (number) => ceil(number / TEN_ROUNDING_NUMBER) * TEN_ROUNDING_NUMBER;
|
||||
|
|
|
|||
|
|
@ -1,18 +1,16 @@
|
|||
import { Card, CardHeader, CardBody } from 'reactstrap';
|
||||
import { Card, CardHeader, CardBody, CardFooter } from 'reactstrap';
|
||||
import { Doughnut, HorizontalBar } from 'react-chartjs-2';
|
||||
import PropTypes from 'prop-types';
|
||||
import React from 'react';
|
||||
import { keys, values } from 'ramda';
|
||||
import './GraphCard.scss';
|
||||
|
||||
const propTypes = {
|
||||
title: PropTypes.string,
|
||||
children: PropTypes.node,
|
||||
title: PropTypes.oneOfType([ PropTypes.string, PropTypes.func ]),
|
||||
footer: PropTypes.oneOfType([ PropTypes.string, PropTypes.node ]),
|
||||
isBarChart: PropTypes.bool,
|
||||
stats: PropTypes.object,
|
||||
matchMedia: PropTypes.func,
|
||||
};
|
||||
const defaultProps = {
|
||||
matchMedia: global.window ? global.window.matchMedia : () => {},
|
||||
max: PropTypes.number,
|
||||
};
|
||||
|
||||
const generateGraphData = (title, isBarChart, labels, data) => ({
|
||||
|
|
@ -36,62 +34,43 @@ const generateGraphData = (title, isBarChart, labels, data) => ({
|
|||
],
|
||||
});
|
||||
|
||||
const determineGraphAspectRatio = (barsCount, isBarChart, matchMedia) => {
|
||||
const determineAspectRationModifier = () => {
|
||||
switch (true) {
|
||||
case matchMedia('(max-width: 1200px)').matches:
|
||||
return 1.5; // eslint-disable-line no-magic-numbers
|
||||
case matchMedia('(max-width: 992px)').matches:
|
||||
return 1.75; // eslint-disable-line no-magic-numbers
|
||||
case matchMedia('(max-width: 768px)').matches:
|
||||
return 2; // eslint-disable-line no-magic-numbers
|
||||
case matchMedia('(max-width: 576px)').matches:
|
||||
return 2.25; // eslint-disable-line no-magic-numbers
|
||||
default:
|
||||
return 1;
|
||||
}
|
||||
};
|
||||
const dropLabelIfHidden = (label) => label.startsWith('hidden') ? '' : label;
|
||||
|
||||
const MAX_BARS_WITHOUT_HEIGHT = 20;
|
||||
const DEFAULT_ASPECT_RATION = 2;
|
||||
const shouldCalculateAspectRatio = isBarChart && barsCount > MAX_BARS_WITHOUT_HEIGHT;
|
||||
|
||||
return shouldCalculateAspectRatio
|
||||
? MAX_BARS_WITHOUT_HEIGHT / determineAspectRationModifier() * DEFAULT_ASPECT_RATION / barsCount
|
||||
: DEFAULT_ASPECT_RATION;
|
||||
};
|
||||
|
||||
const renderGraph = (title, isBarChart, stats, matchMedia) => {
|
||||
const renderGraph = (title, isBarChart, stats, max) => {
|
||||
const Component = isBarChart ? HorizontalBar : Doughnut;
|
||||
const labels = keys(stats);
|
||||
const labels = keys(stats).map(dropLabelIfHidden);
|
||||
const data = values(stats);
|
||||
const aspectRatio = determineGraphAspectRatio(labels.length, isBarChart, matchMedia);
|
||||
const options = {
|
||||
aspectRatio,
|
||||
legend: isBarChart ? { display: false } : { position: 'right' },
|
||||
scales: isBarChart ? {
|
||||
scales: isBarChart && {
|
||||
xAxes: [
|
||||
{
|
||||
ticks: { beginAtZero: true },
|
||||
ticks: { beginAtZero: true, max },
|
||||
},
|
||||
],
|
||||
} : null,
|
||||
},
|
||||
tooltips: {
|
||||
intersect: !isBarChart,
|
||||
|
||||
// Do not show tooltip on items with empty label when in a bar chart
|
||||
filter: ({ yLabel }) => !isBarChart || yLabel !== '',
|
||||
},
|
||||
};
|
||||
const graphData = generateGraphData(title, isBarChart, labels, data);
|
||||
const height = isBarChart && labels.length > 20 ? labels.length * 8 : null;
|
||||
|
||||
return <Component data={generateGraphData(title, isBarChart, labels, data)} options={options} height={null} />;
|
||||
// Provide a key based on the height, so that every time the dataset changes, a new graph is rendered
|
||||
return <Component key={height} data={graphData} options={options} height={height} />;
|
||||
};
|
||||
|
||||
const GraphCard = ({ title, children, isBarChart, stats, matchMedia }) => (
|
||||
const GraphCard = ({ title, footer, isBarChart, stats, max }) => (
|
||||
<Card className="mt-4">
|
||||
<CardHeader className="graph-card__header">{children || title}</CardHeader>
|
||||
<CardBody>{renderGraph(title, isBarChart, stats, matchMedia)}</CardBody>
|
||||
<CardHeader className="graph-card__header">{typeof title === 'function' ? title() : title}</CardHeader>
|
||||
<CardBody>{renderGraph(title, isBarChart, stats, max)}</CardBody>
|
||||
{footer && <CardFooter className="graph-card__footer--sticky">{footer}</CardFooter>}
|
||||
</Card>
|
||||
);
|
||||
|
||||
GraphCard.propTypes = propTypes;
|
||||
GraphCard.defaultProps = defaultProps;
|
||||
|
||||
export default GraphCard;
|
||||
|
|
|
|||
4
src/visits/GraphCard.scss
Normal file
4
src/visits/GraphCard.scss
Normal file
|
|
@ -0,0 +1,4 @@
|
|||
.graph-card__footer--sticky {
|
||||
position: sticky;
|
||||
bottom: 0;
|
||||
}
|
||||
|
|
@ -12,9 +12,11 @@ import VisitsHeader from './VisitsHeader';
|
|||
import GraphCard from './GraphCard';
|
||||
import { shortUrlDetailType } from './reducers/shortUrlDetail';
|
||||
import './ShortUrlVisits.scss';
|
||||
import OpenMapModalBtn from './helpers/OpenMapModalBtn';
|
||||
|
||||
const ShortUrlVisits = ({ processStatsFromVisits }) => class ShortUrlVisits extends React.PureComponent {
|
||||
const ShortUrlVisits = (
|
||||
{ processStatsFromVisits },
|
||||
OpenMapModalBtn
|
||||
) => class ShortUrlVisits extends React.PureComponent {
|
||||
static propTypes = {
|
||||
match: PropTypes.shape({
|
||||
params: PropTypes.object,
|
||||
|
|
@ -94,6 +96,7 @@ const ShortUrlVisits = ({ processStatsFromVisits }) => class ShortUrlVisits exte
|
|||
<div className="col-xl-4">
|
||||
<SortableBarGraph
|
||||
stats={referrers}
|
||||
withPagination={false}
|
||||
title="Referrers"
|
||||
sortingItems={{
|
||||
name: 'Referrer name',
|
||||
|
|
@ -115,8 +118,9 @@ const ShortUrlVisits = ({ processStatsFromVisits }) => class ShortUrlVisits exte
|
|||
<SortableBarGraph
|
||||
stats={cities}
|
||||
title="Cities"
|
||||
extraHeaderContent={
|
||||
[ () => mapLocations.length > 0 && <OpenMapModalBtn modalTitle="Cities" locations={mapLocations} /> ]
|
||||
extraHeaderContent={(activeCities) =>
|
||||
mapLocations.length > 0 &&
|
||||
<OpenMapModalBtn modalTitle="Cities" locations={mapLocations} activeCities={activeCities} />
|
||||
}
|
||||
sortingItems={{
|
||||
name: 'City name',
|
||||
|
|
|
|||
|
|
@ -1,61 +1,124 @@
|
|||
import React from 'react';
|
||||
import PropTypes from 'prop-types';
|
||||
import { fromPairs, head, keys, pipe, prop, reverse, sortBy, toLower, toPairs, type } from 'ramda';
|
||||
import { fromPairs, head, keys, pipe, prop, reverse, sortBy, splitEvery, toLower, toPairs, type } from 'ramda';
|
||||
import { Pagination, PaginationItem, PaginationLink } from 'reactstrap';
|
||||
import SortingDropdown from '../utils/SortingDropdown';
|
||||
import PaginationDropdown from '../utils/PaginationDropdown';
|
||||
import { rangeOf, roundTen } from '../utils/utils';
|
||||
import GraphCard from './GraphCard';
|
||||
|
||||
const { max } = Math;
|
||||
const toLowerIfString = (value) => type(value) === 'String' ? toLower(value) : value;
|
||||
const pickValueFromPair = ([ , value ]) => value;
|
||||
|
||||
export default class SortableBarGraph extends React.Component {
|
||||
static propTypes = {
|
||||
stats: PropTypes.object.isRequired,
|
||||
title: PropTypes.string.isRequired,
|
||||
sortingItems: PropTypes.object.isRequired,
|
||||
extraHeaderContent: PropTypes.arrayOf(PropTypes.func),
|
||||
extraHeaderContent: PropTypes.func,
|
||||
withPagination: PropTypes.bool,
|
||||
};
|
||||
|
||||
state = {
|
||||
orderField: undefined,
|
||||
orderDir: undefined,
|
||||
currentPage: 1,
|
||||
itemsPerPage: Infinity,
|
||||
};
|
||||
|
||||
render() {
|
||||
const { stats, sortingItems, title, extraHeaderContent } = this.props;
|
||||
const sortStats = () => {
|
||||
if (!this.state.orderField) {
|
||||
return stats;
|
||||
}
|
||||
determineStats(stats, sortingItems) {
|
||||
const pairs = toPairs(stats);
|
||||
const sortedPairs = !this.state.orderField ? pairs : sortBy(
|
||||
pipe(
|
||||
prop(this.state.orderField === head(keys(sortingItems)) ? 0 : 1),
|
||||
toLowerIfString
|
||||
),
|
||||
pairs
|
||||
);
|
||||
const directionalPairs = !this.state.orderDir || this.state.orderDir === 'ASC' ? sortedPairs : reverse(sortedPairs);
|
||||
|
||||
const sortedPairs = sortBy(
|
||||
pipe(
|
||||
prop(this.state.orderField === head(keys(sortingItems)) ? 0 : 1),
|
||||
toLowerIfString
|
||||
),
|
||||
toPairs(stats)
|
||||
);
|
||||
if (directionalPairs.length <= this.state.itemsPerPage) {
|
||||
return { currentPageStats: fromPairs(directionalPairs) };
|
||||
}
|
||||
|
||||
return fromPairs(this.state.orderDir === 'ASC' ? sortedPairs : reverse(sortedPairs));
|
||||
const pages = splitEvery(this.state.itemsPerPage, directionalPairs);
|
||||
|
||||
return {
|
||||
currentPageStats: fromPairs(this.determineCurrentPagePairs(pages)),
|
||||
pagination: this.renderPagination(pages.length),
|
||||
max: roundTen(max(...directionalPairs.map(pickValueFromPair))),
|
||||
};
|
||||
}
|
||||
|
||||
determineCurrentPagePairs(pages) {
|
||||
const page = pages[this.state.currentPage - 1];
|
||||
|
||||
if (this.state.currentPage < pages.length) {
|
||||
return page;
|
||||
}
|
||||
|
||||
const firstPageLength = pages[0].length;
|
||||
|
||||
// Using the "hidden" key, the chart will just replace the label by an empty string
|
||||
return [ ...page, ...rangeOf(firstPageLength - page.length, (i) => [ `hidden_${i}`, 0 ]) ];
|
||||
}
|
||||
|
||||
renderPagination(pagesCount) {
|
||||
const { currentPage } = this.state;
|
||||
|
||||
return (
|
||||
<GraphCard stats={sortStats()} isBarChart>
|
||||
<Pagination listClassName="flex-wrap mb-0">
|
||||
<PaginationItem disabled={currentPage === 1}>
|
||||
<PaginationLink previous tag="span" onClick={() => this.setState({ currentPage: currentPage - 1 })} />
|
||||
</PaginationItem>
|
||||
{rangeOf(pagesCount, (page) => (
|
||||
<PaginationItem key={page} active={page === currentPage}>
|
||||
<PaginationLink tag="span" onClick={() => this.setState({ currentPage: page })}>{page}</PaginationLink>
|
||||
</PaginationItem>
|
||||
))}
|
||||
<PaginationItem disabled={currentPage >= pagesCount}>
|
||||
<PaginationLink next tag="span" onClick={() => this.setState({ currentPage: currentPage + 1 })} />
|
||||
</PaginationItem>
|
||||
</Pagination>
|
||||
);
|
||||
}
|
||||
|
||||
render() {
|
||||
const { stats, sortingItems, title, extraHeaderContent, withPagination = true } = this.props;
|
||||
const { currentPageStats, pagination, max } = this.determineStats(stats, sortingItems);
|
||||
const activeCities = keys(currentPageStats);
|
||||
const computeTitle = () => (
|
||||
<React.Fragment>
|
||||
{title}
|
||||
<div className="float-right">
|
||||
<SortingDropdown
|
||||
isButton={false}
|
||||
right
|
||||
items={sortingItems}
|
||||
orderField={this.state.orderField}
|
||||
orderDir={this.state.orderDir}
|
||||
items={sortingItems}
|
||||
onChange={(orderField, orderDir) => this.setState({ orderField, orderDir })}
|
||||
onChange={(orderField, orderDir) => this.setState({ orderField, orderDir, currentPage: 1 })}
|
||||
/>
|
||||
</div>
|
||||
{extraHeaderContent && extraHeaderContent.map((content, index) => (
|
||||
<div key={index} className="float-right">
|
||||
{content()}
|
||||
{withPagination && keys(stats).length > 50 && (
|
||||
<div className="float-right">
|
||||
<PaginationDropdown
|
||||
toggleClassName="btn-sm paddingless mr-3"
|
||||
ranges={[ 50, 100, 200, 500 ]}
|
||||
value={this.state.itemsPerPage}
|
||||
setValue={(itemsPerPage) => this.setState({ itemsPerPage, currentPage: 1 })}
|
||||
/>
|
||||
</div>
|
||||
))}
|
||||
</GraphCard>
|
||||
)}
|
||||
{extraHeaderContent && (
|
||||
<div className="float-right">
|
||||
{extraHeaderContent(pagination ? activeCities : undefined)}
|
||||
</div>
|
||||
)}
|
||||
</React.Fragment>
|
||||
);
|
||||
|
||||
return <GraphCard isBarChart title={computeTitle} stats={currentPageStats} footer={pagination} max={max} />;
|
||||
}
|
||||
}
|
||||
|
|
|
|||
|
|
@ -27,6 +27,10 @@ const OpenStreetMapTile = () => (
|
|||
);
|
||||
|
||||
const calculateMapProps = (locations) => {
|
||||
if (locations.length === 0) {
|
||||
return {};
|
||||
}
|
||||
|
||||
if (locations.length > 1) {
|
||||
return { bounds: locations.map(prop('latLong')) };
|
||||
}
|
||||
|
|
|
|||
|
|
@ -1,32 +1,60 @@
|
|||
import React from 'react';
|
||||
import React, { useState } from 'react';
|
||||
import { FontAwesomeIcon } from '@fortawesome/react-fontawesome';
|
||||
import { faMapMarkedAlt as mapIcon } from '@fortawesome/free-solid-svg-icons';
|
||||
import { UncontrolledTooltip } from 'reactstrap';
|
||||
import { Dropdown, DropdownItem, DropdownMenu, UncontrolledTooltip } from 'reactstrap';
|
||||
import * as PropTypes from 'prop-types';
|
||||
import MapModal from './MapModal';
|
||||
import './OpenMapModalBtn.scss';
|
||||
|
||||
export default class OpenMapModalBtn extends React.Component {
|
||||
static propTypes = {
|
||||
modalTitle: PropTypes.string.isRequired,
|
||||
locations: PropTypes.arrayOf(PropTypes.object),
|
||||
};
|
||||
const propTypes = {
|
||||
modalTitle: PropTypes.string.isRequired,
|
||||
locations: PropTypes.arrayOf(PropTypes.object),
|
||||
activeCities: PropTypes.arrayOf(PropTypes.string),
|
||||
};
|
||||
|
||||
state = { mapIsOpened: false };
|
||||
const OpenMapModalBtn = (MapModal) => {
|
||||
const OpenMapModalBtn = ({ modalTitle, locations = [], activeCities }) => {
|
||||
const [ mapIsOpened, setMapIsOpened ] = useState(false);
|
||||
const [ dropdownIsOpened, setDropdownIsOpened ] = useState(false);
|
||||
const [ locationsToShow, setLocationsToShow ] = useState([]);
|
||||
|
||||
render() {
|
||||
const { modalTitle, locations = [] } = this.props;
|
||||
const toggleMap = () => this.setState(({ mapIsOpened }) => ({ mapIsOpened: !mapIsOpened }));
|
||||
const buttonRef = React.createRef();
|
||||
const filterLocations = (locations) => locations.filter(({ cityName }) => activeCities.includes(cityName));
|
||||
const toggleMap = () => setMapIsOpened(!mapIsOpened);
|
||||
const onClick = () => {
|
||||
if (!activeCities) {
|
||||
setLocationsToShow(locations);
|
||||
setMapIsOpened(true);
|
||||
|
||||
return;
|
||||
}
|
||||
|
||||
setDropdownIsOpened(true);
|
||||
};
|
||||
const openMapWithLocations = (filtered) => () => {
|
||||
setLocationsToShow(filtered ? filterLocations(locations) : locations);
|
||||
setMapIsOpened(true);
|
||||
};
|
||||
|
||||
return (
|
||||
<React.Fragment>
|
||||
<button className="btn btn-link open-map-modal-btn__btn" ref={buttonRef} onClick={toggleMap}>
|
||||
<button className="btn btn-link open-map-modal-btn__btn" ref={buttonRef} onClick={onClick}>
|
||||
<FontAwesomeIcon icon={mapIcon} />
|
||||
</button>
|
||||
<UncontrolledTooltip placement="bottom" target={() => buttonRef.current}>Show in map</UncontrolledTooltip>
|
||||
<MapModal toggle={toggleMap} isOpen={this.state.mapIsOpened} title={modalTitle} locations={locations} />
|
||||
<UncontrolledTooltip placement="left" target={() => buttonRef.current}>Show in map</UncontrolledTooltip>
|
||||
<Dropdown isOpen={dropdownIsOpened} toggle={() => setDropdownIsOpened(!dropdownIsOpened)} inNavbar>
|
||||
<DropdownMenu right>
|
||||
<DropdownItem onClick={openMapWithLocations(false)}>Show all locations</DropdownItem>
|
||||
<DropdownItem onClick={openMapWithLocations(true)}>Show locations in current page</DropdownItem>
|
||||
</DropdownMenu>
|
||||
</Dropdown>
|
||||
<MapModal toggle={toggleMap} isOpen={mapIsOpened} title={modalTitle} locations={locationsToShow} />
|
||||
</React.Fragment>
|
||||
);
|
||||
}
|
||||
}
|
||||
};
|
||||
|
||||
OpenMapModalBtn.propTypes = propTypes;
|
||||
|
||||
return OpenMapModalBtn;
|
||||
};
|
||||
|
||||
export default OpenMapModalBtn;
|
||||
|
|
|
|||
|
|
@ -1,11 +1,15 @@
|
|||
import ShortUrlVisits from '../ShortUrlVisits';
|
||||
import { cancelGetShortUrlVisits, getShortUrlVisits } from '../reducers/shortUrlVisits';
|
||||
import { getShortUrlDetail } from '../reducers/shortUrlDetail';
|
||||
import OpenMapModalBtn from '../helpers/OpenMapModalBtn';
|
||||
import MapModal from '../helpers/MapModal';
|
||||
import * as visitsParser from './VisitsParser';
|
||||
|
||||
const provideServices = (bottle, connect) => {
|
||||
// Components
|
||||
bottle.serviceFactory('ShortUrlVisits', ShortUrlVisits, 'VisitsParser');
|
||||
bottle.serviceFactory('OpenMapModalBtn', OpenMapModalBtn, 'MapModal');
|
||||
bottle.serviceFactory('MapModal', () => MapModal);
|
||||
bottle.serviceFactory('ShortUrlVisits', ShortUrlVisits, 'VisitsParser', 'OpenMapModalBtn');
|
||||
bottle.decorator('ShortUrlVisits', connect(
|
||||
[ 'shortUrlVisits', 'shortUrlDetail' ],
|
||||
[ 'getShortUrlVisits', 'getShortUrlDetail', 'cancelGetShortUrlVisits' ]
|
||||
|
|
|
|||
|
|
@ -53,7 +53,7 @@ describe('<ShortUrlsRow />', () => {
|
|||
});
|
||||
|
||||
it('renders long URL in third row', () => {
|
||||
const col = wrapper.find('td').at(2); // eslint-disable-line no-magic-numbers
|
||||
const col = wrapper.find('td').at(2);
|
||||
const link = col.find(ExternalLink);
|
||||
|
||||
expect(link.prop('href')).toEqual(shortUrl.longUrl);
|
||||
|
|
@ -61,7 +61,7 @@ describe('<ShortUrlsRow />', () => {
|
|||
|
||||
describe('renders list of tags in fourth row', () => {
|
||||
it('with tags', () => {
|
||||
const col = wrapper.find('td').at(3); // eslint-disable-line no-magic-numbers
|
||||
const col = wrapper.find('td').at(3);
|
||||
const tags = col.find(Tag);
|
||||
|
||||
expect(tags).toHaveLength(shortUrl.tags.length);
|
||||
|
|
@ -75,20 +75,20 @@ describe('<ShortUrlsRow />', () => {
|
|||
it('without tags', () => {
|
||||
wrapper.setProps({ shortUrl: assoc('tags', [], shortUrl) });
|
||||
|
||||
const col = wrapper.find('td').at(3); // eslint-disable-line no-magic-numbers
|
||||
const col = wrapper.find('td').at(3);
|
||||
|
||||
expect(col.text()).toContain('No tags');
|
||||
});
|
||||
});
|
||||
|
||||
it('renders visits count in fifth row', () => {
|
||||
const col = wrapper.find('td').at(4); // eslint-disable-line no-magic-numbers
|
||||
const col = wrapper.find('td').at(4);
|
||||
|
||||
expect(col.text()).toEqual(toString(shortUrl.visitsCount));
|
||||
});
|
||||
|
||||
it('updates state when copied to clipboard', () => {
|
||||
const col = wrapper.find('td').at(5); // eslint-disable-line no-magic-numbers
|
||||
const col = wrapper.find('td').at(5);
|
||||
const menu = col.find(ShortUrlsRowMenu);
|
||||
|
||||
expect(menu).toHaveLength(1);
|
||||
|
|
@ -98,7 +98,6 @@ describe('<ShortUrlsRow />', () => {
|
|||
});
|
||||
|
||||
it('shows copy hint when state prop is true', () => {
|
||||
// eslint-disable-next-line no-magic-numbers
|
||||
const isHidden = () => wrapper.find('td').at(5).find('.short-urls-row__copy-hint').prop('hidden');
|
||||
|
||||
expect(isHidden()).toEqual(true);
|
||||
|
|
|
|||
|
|
@ -1,10 +1,11 @@
|
|||
import React from 'react';
|
||||
import { shallow } from 'enzyme';
|
||||
import { identity, range } from 'ramda';
|
||||
import { identity } from 'ramda';
|
||||
import * as sinon from 'sinon';
|
||||
import createTagsList from '../../src/tags/TagsList';
|
||||
import MuttedMessage from '../../src/utils/MuttedMessage';
|
||||
import SearchField from '../../src/utils/SearchField';
|
||||
import { rangeOf } from '../../src/utils/utils';
|
||||
|
||||
describe('<TagsList />', () => {
|
||||
let wrapper;
|
||||
|
|
@ -53,7 +54,7 @@ describe('<TagsList />', () => {
|
|||
it('renders the proper amount of groups and cards based on the amount of tags', () => {
|
||||
const amountOfTags = 10;
|
||||
const amountOfGroups = 4;
|
||||
const wrapper = createWrapper({ filteredTags: range(0, amountOfTags).map((i) => `tag_${i}`) });
|
||||
const wrapper = createWrapper({ filteredTags: rangeOf(amountOfTags, (i) => `tag_${i}`) });
|
||||
const cards = wrapper.find(TagCard);
|
||||
const groups = wrapper.find('.col-md-6');
|
||||
|
||||
|
|
|
|||
|
|
@ -3,7 +3,13 @@ import L from 'leaflet';
|
|||
import marker2x from 'leaflet/dist/images/marker-icon-2x.png';
|
||||
import marker from 'leaflet/dist/images/marker-icon.png';
|
||||
import markerShadow from 'leaflet/dist/images/marker-shadow.png';
|
||||
import { stateFlagTimeout as stateFlagTimeoutFactory, determineOrderDir, fixLeafletIcons } from '../../src/utils/utils';
|
||||
import {
|
||||
stateFlagTimeout as stateFlagTimeoutFactory,
|
||||
determineOrderDir,
|
||||
fixLeafletIcons,
|
||||
rangeOf,
|
||||
roundTen,
|
||||
} from '../../src/utils/utils';
|
||||
|
||||
describe('utils', () => {
|
||||
describe('stateFlagTimeout', () => {
|
||||
|
|
@ -57,4 +63,46 @@ describe('utils', () => {
|
|||
expect(shadowUrl).toEqual(markerShadow);
|
||||
});
|
||||
});
|
||||
|
||||
describe('rangeOf', () => {
|
||||
const func = (i) => `result_${i}`;
|
||||
const size = 5;
|
||||
|
||||
it('builds a range of specified size invike provided function', () => {
|
||||
expect(rangeOf(size, func)).toEqual([
|
||||
'result_1',
|
||||
'result_2',
|
||||
'result_3',
|
||||
'result_4',
|
||||
'result_5',
|
||||
]);
|
||||
});
|
||||
|
||||
it('builds a range starting at provided pos', () => {
|
||||
const startAt = 3;
|
||||
|
||||
expect(rangeOf(size, func, startAt)).toEqual([
|
||||
'result_3',
|
||||
'result_4',
|
||||
'result_5',
|
||||
]);
|
||||
});
|
||||
});
|
||||
|
||||
describe('roundTen', () => {
|
||||
it('rounds provided number to the next multiple of ten', () => {
|
||||
const expectationsPairs = [
|
||||
[ 10, 10 ],
|
||||
[ 12, 20 ],
|
||||
[ 158, 160 ],
|
||||
[ 5, 10 ],
|
||||
[ -42, -40 ],
|
||||
];
|
||||
|
||||
expect.assertions(expectationsPairs.length);
|
||||
expectationsPairs.forEach(([ number, expected ]) => {
|
||||
expect(roundTen(number)).toEqual(expected);
|
||||
});
|
||||
});
|
||||
});
|
||||
});
|
||||
|
|
|
|||
|
|
@ -39,7 +39,7 @@ describe('<GraphCard />', () => {
|
|||
]);
|
||||
expect(borderColor).toEqual('white');
|
||||
expect(legend).toEqual({ position: 'right' });
|
||||
expect(scales).toBeNull();
|
||||
expect(scales).toBeUndefined();
|
||||
});
|
||||
|
||||
it('renders HorizontalBar when is not a bar chart', () => {
|
||||
|
|
|
|||
|
|
@ -104,6 +104,6 @@ describe('<ShortUrlVisits />', () => {
|
|||
const extraHeaderContent = citiesGraph.prop('extraHeaderContent');
|
||||
|
||||
expect(extraHeaderContent).toHaveLength(1);
|
||||
expect(typeof extraHeaderContent[0]).toEqual('function');
|
||||
expect(typeof extraHeaderContent).toEqual('function');
|
||||
});
|
||||
});
|
||||
|
|
|
|||
|
|
@ -1,9 +1,11 @@
|
|||
import React from 'react';
|
||||
import { shallow } from 'enzyme';
|
||||
import { keys, values } from 'ramda';
|
||||
import { keys, range, values } from 'ramda';
|
||||
import SortableBarGraph from '../../src/visits/SortableBarGraph';
|
||||
import GraphCard from '../../src/visits/GraphCard';
|
||||
import SortingDropdown from '../../src/utils/SortingDropdown';
|
||||
import PaginationDropdown from '../../src/utils/PaginationDropdown';
|
||||
import { rangeOf } from '../../src/utils/utils';
|
||||
|
||||
describe('<SortableBarGraph />', () => {
|
||||
let wrapper;
|
||||
|
|
@ -15,9 +17,14 @@ describe('<SortableBarGraph />', () => {
|
|||
Foo: 100,
|
||||
Bar: 50,
|
||||
};
|
||||
const createWrapper = (extraHeaderContent = []) => {
|
||||
const createWrapper = (withPagination = false, extraStats = {}) => {
|
||||
wrapper = shallow(
|
||||
<SortableBarGraph title="Foo" stats={stats} sortingItems={sortingItems} extraHeaderContent={extraHeaderContent} />
|
||||
<SortableBarGraph
|
||||
title="Foo"
|
||||
stats={{ ...stats, ...extraStats }}
|
||||
sortingItems={sortingItems}
|
||||
withPagination={withPagination}
|
||||
/>
|
||||
);
|
||||
|
||||
return wrapper;
|
||||
|
|
@ -37,7 +44,7 @@ describe('<SortableBarGraph />', () => {
|
|||
|
||||
beforeEach(() => {
|
||||
const wrapper = createWrapper();
|
||||
const dropdown = wrapper.find(SortingDropdown);
|
||||
const dropdown = wrapper.renderProp('title')().find(SortingDropdown);
|
||||
|
||||
assert = (sortName, sortDir, expectedKeys, expectedValues, done) => {
|
||||
dropdown.prop('onChange')(sortName, sortDir);
|
||||
|
|
@ -53,26 +60,62 @@ describe('<SortableBarGraph />', () => {
|
|||
};
|
||||
});
|
||||
|
||||
// eslint-disable-next-line no-magic-numbers
|
||||
it('name - ASC', (done) => assert('name', 'ASC', [ 'Bar', 'Foo' ], [ 50, 100 ], done));
|
||||
|
||||
// eslint-disable-next-line no-magic-numbers
|
||||
it('name - DESC', (done) => assert('name', 'DESC', [ 'Foo', 'Bar' ], [ 100, 50 ], done));
|
||||
|
||||
// eslint-disable-next-line no-magic-numbers
|
||||
it('value - ASC', (done) => assert('value', 'ASC', [ 'Bar', 'Foo' ], [ 50, 100 ], done));
|
||||
|
||||
// eslint-disable-next-line no-magic-numbers
|
||||
it('value - DESC', (done) => assert('value', 'DESC', [ 'Foo', 'Bar' ], [ 100, 50 ], done));
|
||||
});
|
||||
|
||||
it('renders extra header functions', () => {
|
||||
const wrapper = createWrapper([
|
||||
() => <span className="foo-span">Foo</span>,
|
||||
() => <span className="bar-span">Bar</span>,
|
||||
]);
|
||||
describe('renders properly paginated stats when pagination is set', () => {
|
||||
let assert;
|
||||
|
||||
expect(wrapper.find('.foo-span')).toHaveLength(1);
|
||||
expect(wrapper.find('.bar-span')).toHaveLength(1);
|
||||
beforeEach(() => {
|
||||
const wrapper = createWrapper(true, range(1, 159).reduce((accum, value) => {
|
||||
accum[`key_${value}`] = value;
|
||||
|
||||
return accum;
|
||||
}, {}));
|
||||
const dropdown = wrapper.renderProp('title')().find(PaginationDropdown);
|
||||
|
||||
assert = (itemsPerPage, expectedStats, done) => {
|
||||
dropdown.prop('setValue')(itemsPerPage);
|
||||
setImmediate(() => {
|
||||
const graphCard = wrapper.find(GraphCard);
|
||||
const statsKeys = keys(graphCard.prop('stats'));
|
||||
|
||||
expect(statsKeys).toEqual(expectedStats);
|
||||
done();
|
||||
});
|
||||
};
|
||||
});
|
||||
|
||||
const buildExpected = (size) => [ 'Foo', 'Bar', ...rangeOf(size - 2, (i) => `key_${i}`) ];
|
||||
|
||||
it('50 items per page', (done) => assert(50, buildExpected(50), done));
|
||||
it('100 items per page', (done) => assert(100, buildExpected(100), done));
|
||||
it('200 items per page', (done) => assert(200, buildExpected(160), done));
|
||||
it('500 items per page', (done) => assert(500, buildExpected(160), done));
|
||||
});
|
||||
|
||||
it('renders extra header content', () => {
|
||||
wrapper = shallow(
|
||||
<span>
|
||||
<SortableBarGraph
|
||||
title="Foo"
|
||||
stats={stats}
|
||||
sortingItems={sortingItems}
|
||||
extraHeaderContent={() => (
|
||||
<span>
|
||||
<span className="foo-span">Foo</span>
|
||||
<span className="bar-span">Bar</span>
|
||||
</span>
|
||||
)}
|
||||
/>
|
||||
</span>
|
||||
).find(SortableBarGraph);
|
||||
const header = wrapper.renderProp('extraHeaderContent')();
|
||||
|
||||
expect(header.find('.foo-span')).toHaveLength(1);
|
||||
expect(header.find('.bar-span')).toHaveLength(1);
|
||||
});
|
||||
});
|
||||
|
|
|
|||
|
|
@ -1,42 +1,97 @@
|
|||
import React from 'react';
|
||||
import { shallow } from 'enzyme';
|
||||
import { UncontrolledTooltip } from 'reactstrap';
|
||||
import OpenMapModalBtn from '../../../src/visits/helpers/OpenMapModalBtn';
|
||||
import MapModal from '../../../src/visits/helpers/MapModal';
|
||||
import { mount } from 'enzyme';
|
||||
import { Dropdown, DropdownItem, UncontrolledTooltip } from 'reactstrap';
|
||||
import createOpenMapModalBtn from '../../../src/visits/helpers/OpenMapModalBtn';
|
||||
|
||||
describe('<OpenMapModalBtn />', () => {
|
||||
let wrapper;
|
||||
const title = 'Foo';
|
||||
const locations = [];
|
||||
const locations = [
|
||||
{
|
||||
cityName: 'foo',
|
||||
count: 30,
|
||||
},
|
||||
{
|
||||
cityName: 'bar',
|
||||
count: 45,
|
||||
},
|
||||
];
|
||||
const MapModal = () => '';
|
||||
const OpenMapModalBtn = createOpenMapModalBtn(MapModal);
|
||||
const createWrapper = (activeCities) => {
|
||||
wrapper = mount(<OpenMapModalBtn modalTitle={title} locations={locations} activeCities={activeCities} />);
|
||||
|
||||
beforeEach(() => {
|
||||
wrapper = shallow(<OpenMapModalBtn modalTitle={title} locations={locations} />);
|
||||
});
|
||||
return wrapper;
|
||||
};
|
||||
|
||||
afterEach(() => wrapper.unmount());
|
||||
afterEach(() => wrapper && wrapper.unmount());
|
||||
|
||||
it('Renders expected content', () => {
|
||||
it('renders expected content', () => {
|
||||
const wrapper = createWrapper();
|
||||
const button = wrapper.find('.open-map-modal-btn__btn');
|
||||
const tooltip = wrapper.find(UncontrolledTooltip);
|
||||
const dropdown = wrapper.find(Dropdown);
|
||||
const modal = wrapper.find(MapModal);
|
||||
|
||||
expect(button).toHaveLength(1);
|
||||
expect(tooltip).toHaveLength(1);
|
||||
expect(dropdown).toHaveLength(1);
|
||||
expect(modal).toHaveLength(1);
|
||||
});
|
||||
|
||||
it('changes modal visibility when toggled', () => {
|
||||
const modal = wrapper.find(MapModal);
|
||||
it('sets provided props to the map', (done) => {
|
||||
const wrapper = createWrapper();
|
||||
const button = wrapper.find('.open-map-modal-btn__btn');
|
||||
|
||||
expect(wrapper.state('mapIsOpened')).toEqual(false);
|
||||
modal.prop('toggle')();
|
||||
expect(wrapper.state('mapIsOpened')).toEqual(true);
|
||||
button.simulate('click');
|
||||
setImmediate(() => {
|
||||
const modal = wrapper.find(MapModal);
|
||||
|
||||
expect(modal.prop('title')).toEqual(title);
|
||||
expect(modal.prop('locations')).toEqual(locations);
|
||||
expect(modal.prop('isOpen')).toEqual(true);
|
||||
done();
|
||||
});
|
||||
});
|
||||
|
||||
it('sets provided props to the map', () => {
|
||||
const modal = wrapper.find(MapModal);
|
||||
it('opens dropdown instead of modal when a list of active cities has been provided', (done) => {
|
||||
const wrapper = createWrapper([ 'bar' ]);
|
||||
const button = wrapper.find('.open-map-modal-btn__btn');
|
||||
|
||||
expect(modal.prop('title')).toEqual(title);
|
||||
expect(modal.prop('locations')).toEqual(locations);
|
||||
button.simulate('click');
|
||||
|
||||
setImmediate(() => {
|
||||
const dropdown = wrapper.find(Dropdown);
|
||||
const modal = wrapper.find(MapModal);
|
||||
|
||||
expect(dropdown.prop('isOpen')).toEqual(true);
|
||||
expect(modal.prop('isOpen')).toEqual(false);
|
||||
done();
|
||||
});
|
||||
});
|
||||
|
||||
it('filters out non-active cities from list of locations', (done) => {
|
||||
const wrapper = createWrapper([ 'bar' ]);
|
||||
const button = wrapper.find('.open-map-modal-btn__btn');
|
||||
|
||||
button.simulate('click');
|
||||
setImmediate(() => {
|
||||
const dropdown = wrapper.find(Dropdown);
|
||||
const item = dropdown.find(DropdownItem).at(1);
|
||||
|
||||
item.simulate('click');
|
||||
setImmediate(() => {
|
||||
const modal = wrapper.find(MapModal);
|
||||
|
||||
expect(modal.prop('title')).toEqual(title);
|
||||
expect(modal.prop('locations')).toEqual([
|
||||
{
|
||||
cityName: 'bar',
|
||||
count: 45,
|
||||
},
|
||||
]);
|
||||
done();
|
||||
});
|
||||
});
|
||||
});
|
||||
});
|
||||
|
|
|
|||
26
yarn.lock
26
yarn.lock
|
|
@ -8064,14 +8064,15 @@ react-dev-utils@^7.0.1:
|
|||
strip-ansi "4.0.0"
|
||||
text-table "0.2.0"
|
||||
|
||||
react-dom@^16.7.0:
|
||||
version "16.7.0"
|
||||
resolved "https://registry.yarnpkg.com/react-dom/-/react-dom-16.7.0.tgz#a17b2a7ca89ee7390bc1ed5eb81783c7461748b8"
|
||||
react-dom@^16.8.0:
|
||||
version "16.8.4"
|
||||
resolved "https://registry.yarnpkg.com/react-dom/-/react-dom-16.8.4.tgz#1061a8e01a2b3b0c8160037441c3bf00a0e3bc48"
|
||||
integrity sha512-Ob2wK7XG2tUDt7ps7LtLzGYYB6DXMCLj0G5fO6WeEICtT4/HdpOi7W/xLzZnR6RCG1tYza60nMdqtxzA8FaPJQ==
|
||||
dependencies:
|
||||
loose-envify "^1.1.0"
|
||||
object-assign "^4.1.1"
|
||||
prop-types "^15.6.2"
|
||||
scheduler "^0.12.0"
|
||||
scheduler "^0.13.4"
|
||||
|
||||
react-error-overlay@^5.1.2:
|
||||
version "5.1.2"
|
||||
|
|
@ -8187,14 +8188,15 @@ react-transition-group@^2.3.1:
|
|||
prop-types "^15.6.2"
|
||||
react-lifecycles-compat "^3.0.4"
|
||||
|
||||
react@^16.7.0:
|
||||
version "16.7.0"
|
||||
resolved "https://registry.yarnpkg.com/react/-/react-16.7.0.tgz#b674ec396b0a5715873b350446f7ea0802ab6381"
|
||||
react@^16.8.0:
|
||||
version "16.8.4"
|
||||
resolved "https://registry.yarnpkg.com/react/-/react-16.8.4.tgz#fdf7bd9ae53f03a9c4cd1a371432c206be1c4768"
|
||||
integrity sha512-0GQ6gFXfUH7aZcjGVymlPOASTuSjlQL4ZtVC5YKH+3JL6bBLCVO21DknzmaPlI90LN253ojj02nsapy+j7wIjg==
|
||||
dependencies:
|
||||
loose-envify "^1.1.0"
|
||||
object-assign "^4.1.1"
|
||||
prop-types "^15.6.2"
|
||||
scheduler "^0.12.0"
|
||||
scheduler "^0.13.4"
|
||||
|
||||
reactcss@^1.2.0:
|
||||
version "1.2.3"
|
||||
|
|
@ -8731,6 +8733,14 @@ scheduler@^0.12.0:
|
|||
loose-envify "^1.1.0"
|
||||
object-assign "^4.1.1"
|
||||
|
||||
scheduler@^0.13.4:
|
||||
version "0.13.4"
|
||||
resolved "https://registry.yarnpkg.com/scheduler/-/scheduler-0.13.4.tgz#8fef05e7a3580c76c0364d2df5e550e4c9140298"
|
||||
integrity sha512-cvSOlRPxOHs5dAhP9yiS/6IDmVAVxmk33f0CtTJRkmUWcb1Us+t7b1wqdzoC0REw2muC9V5f1L/w5R5uKGaepA==
|
||||
dependencies:
|
||||
loose-envify "^1.1.0"
|
||||
object-assign "^4.1.1"
|
||||
|
||||
schema-utils@^0.4.4:
|
||||
version "0.4.7"
|
||||
resolved "https://registry.yarnpkg.com/schema-utils/-/schema-utils-0.4.7.tgz#ba74f597d2be2ea880131746ee17d0a093c68187"
|
||||
|
|
|
|||
Loading…
Reference in a new issue