Steve-Dee-Designs
/
woocommerce
mirror of https://github.com/woocommerce/woocommerce.git
1
0
Fork 0
Code Issues Packages Projects Releases Wiki Activity

move chart and d3chart components into @woocommerce/components package

This commit is contained in:
Robert Elliott 2018-11-27 20:30:54 +02:00
parent 5d3c771d45
commit c9ccc015ca
25 changed files with 366 additions and 377 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

2
plugins/woocommerce-admin/client/analytics/components/report-chart/index.js
View File

@ -21,11 +21,11 @@ import {
getChartTypeForQuery,
getPreviousDate,
} from '@woocommerce/date';
import { Chart } from '@woocommerce/components';
/**
* Internal dependencies
*/
import { Chart } from 'components';
import { getReportChartData, getTooltipValueFormat } from 'store/reports/utils';
import ReportError from 'analytics/components/report-error';

4
plugins/woocommerce-admin/client/analytics/components/report-chart/test/index.js
View File

@ -9,8 +9,8 @@ import { shallow } from 'enzyme';
*/
import { ReportChart } from '../';
jest.mock( 'components', () => ( {
...require.requireActual( 'components' ),
jest.mock( '@woocommerce/components', () => ( {
...require.requireActual( '@woocommerce/components' ),
Chart: () => null,
} ) );

134
plugins/woocommerce-admin/client/components/d3chart/style.scss
View File

@ -1,134 +0,0 @@
/** @format */
.d3-chart__container {
position: relative;
width: 100%;
svg {
overflow: visible;
}
.d3-chart__tooltip {
border: 1px solid $core-grey-light-700;
position: absolute;
display: flex;
min-width: 324px;
height: auto;
background-color: $white;
text-align: left;
padding: 17px;
box-shadow: 0 3px 20px 0 rgba(18, 24, 30, 0.1), 0 1px 3px 0 rgba(18, 24, 30, 0.1);
flex-direction: column;
flex-wrap: nowrap;
justify-content: flex-start;
pointer-events: none;
visibility: hidden;
z-index: 1;
@include breakpoint( '<600px' ) {
min-width: auto;
width: calc(100% - #{$gap-large * 2});
}
h4 {
text-align: left;
line-height: 18px;
width: 100%;
text-transform: uppercase;
font-size: 11px;
color: $core-grey-dark-300;
margin-top: 0;
}
ul {
list-style: none;
margin-bottom: 2px;
margin-top: 2px;
font-size: 14px;
li {
display: flex;
flex-direction: row;
flex-wrap: nowrap;
justify-content: flex-start;
align-items: center;
&.key-row {
display: flex;
flex-direction: row;
justify-content: space-between;
width: 100%;
.key-container {
width: 100%;
min-width: 100px;
.key-color {
display: inline-block;
width: 16px;
height: 16px;
margin-right: 8px;
}
.key-key {
margin-right: 6px;
}
}
.key-value {
font-weight: 600;
}
}
}
}
}
.bargroup {
&rect {
shape-rendering: crispEdges;
}
}
.grid {
.tick {
line {
stroke: $core-grey-light-500;
stroke-width: 1;
shape-rendering: crispEdges;
}
&:first-child {
line {
stroke: $core-grey-dark-500;
}
}
&:last-child {
line {
opacity: 0;
}
}
}
}
.tick {
padding-top: 10px;
stroke-width: 1;
}
.y-axis {
text-anchor: start;
&.tick {
&text {
fill: $core-grey-dark-500;
}
}
}
.y-axis,
.axis-month {
.tick text {
font-size: 10px;
}
}
.focus-grid {
line {
stroke: $core-grey-light-700;
stroke-width: 1px;
}
}
}

6
plugins/woocommerce-admin/client/components/index.js
View File

@ -1,6 +0,0 @@
/** @format */
export { default as Chart } from './chart';
export { default as ChartLegend } from './d3chart/legend';
export { default as ChartPlaceholder } from './chart/placeholder';
export { default as D3Chart } from './d3chart';

327
plugins/woocommerce-admin/package-lock.json generated
View File

@ -5203,11 +5203,11 @@
"integrity": "sha512-eTVLrBSt7fjbDygz805pMnstIs2VTBNkRm0qxZd+M7A5XDdxVRWO5MxGBXZhjY4cqLYLdtrGqRf8mBPmzwSpWQ==",
"dev": true,
"requires": {
"nice-try": "1.0.5",
"path-key": "2.0.1",
"semver": "5.6.0",
"shebang-command": "1.2.0",
"which": "1.3.1"
"nice-try": "^1.0.4",
"path-key": "^2.0.1",
"semver": "^5.5.0",
"shebang-command": "^1.2.0",
"which": "^1.2.9"
}
},
"execa": {
@ -5216,13 +5216,13 @@
"integrity": "sha512-7XOMnz8Ynx1gGo/3hyV9loYNPWM94jG3+3T3Y8tsfSstFmETmENCMU/A/zj8Lyaj1lkgEepKepvd6240tBRvlw==",
"dev": true,
"requires": {
"cross-spawn": "6.0.5",
"get-stream": "3.0.0",
"is-stream": "1.1.0",
"npm-run-path": "2.0.2",
"p-finally": "1.0.0",
"signal-exit": "3.0.2",
"strip-eof": "1.0.0"
"cross-spawn": "^6.0.0",
"get-stream": "^3.0.0",
"is-stream": "^1.1.0",
"npm-run-path": "^2.0.0",
"p-finally": "^1.0.0",
"signal-exit": "^3.0.0",
"strip-eof": "^1.0.0"
}
},
"find-up": {
@ -5231,7 +5231,7 @@
"integrity": "sha512-1yD6RmLI1XBfxugvORwlck6f75tYL+iR0jqwsOrOxMZyGYqUuDhJ0l4AXdO1iX/FTs9cBAMEk1gWSEx1kSbylg==",
"dev": true,
"requires": {
"locate-path": "3.0.0"
"locate-path": "^3.0.0"
}
},
"has-flag": {
@ -5252,7 +5252,7 @@
"integrity": "sha512-avPEb8P8EGnwXKClwsNUgryVjllcRqtMYa49NTsbQagYuT1DcXnl1915oxWjoyGrXR6zH/Y0Zc96xWsPcoDKeA==",
"dev": true,
"requires": {
"invert-kv": "2.0.0"
"invert-kv": "^2.0.0"
}
},
"locate-path": {
@ -5261,8 +5261,8 @@
"integrity": "sha512-7AO748wWnIhNqAuaty2ZWHkQHRSNfPVIsPIfwEOWO22AmaoVrWavlOcMR5nzTLNYvp36X220/maaRsrec1G65A==",
"dev": true,
"requires": {
"p-locate": "3.0.0",
"path-exists": "3.0.0"
"p-locate": "^3.0.0",
"path-exists": "^3.0.0"
}
},
"mem": {
@ -5271,9 +5271,9 @@
"integrity": "sha512-WQxG/5xYc3tMbYLXoXPm81ET2WDULiU5FxbuIoNbJqLOOI8zehXFdZuiUEgfdrU2mVB1pxBZUGlYORSrpuJreA==",
"dev": true,
"requires": {
"map-age-cleaner": "0.1.3",
"mimic-fn": "1.2.0",
"p-is-promise": "1.1.0"
"map-age-cleaner": "^0.1.1",
"mimic-fn": "^1.0.0",
"p-is-promise": "^1.1.0"
}
},
"os-locale": {
@ -5282,9 +5282,9 @@
"integrity": "sha512-7g5e7dmXPtzcP4bgsZ8ixDVqA7oWYuEz4lOSujeWyliPai4gfVDiFIcwBg3aGCPnmSGfzOKTK3ccPn0CKv3DBw==",
"dev": true,
"requires": {
"execa": "0.10.0",
"lcid": "2.0.0",
"mem": "4.0.0"
"execa": "^0.10.0",
"lcid": "^2.0.0",
"mem": "^4.0.0"
}
},
"p-limit": {
@ -5293,7 +5293,7 @@
"integrity": "sha512-fl5s52lI5ahKCernzzIyAP0QAZbGIovtVHGwpcu1Jr/EpzLVDI2myISHwGqK7m8uQFugVWSrbxH7XnhGtvEc+A==",
"dev": true,
"requires": {
"p-try": "2.0.0"
"p-try": "^2.0.0"
}
},
"p-locate": {
@ -5302,7 +5302,7 @@
"integrity": "sha512-x+12w/To+4GFfgJhBEpiDcLozRJGegY+Ei7/z0tSLkMmxGZNybVMSfWj9aJn8Z5Fc7dBUNJOOVgPv2H7IwulSQ==",
"dev": true,
"requires": {
"p-limit": "2.0.0"
"p-limit": "^2.0.0"
}
},
"p-try": {
@ -5317,8 +5317,8 @@
"integrity": "sha1-vjX1Qlvh9/bHRxhPmKeIy5lHfuA=",
"dev": true,
"requires": {
"error-ex": "1.3.2",
"json-parse-better-errors": "1.0.2"
"error-ex": "^1.3.1",
"json-parse-better-errors": "^1.0.1"
}
},
"pify": {
@ -5333,9 +5333,9 @@
"integrity": "sha1-ljYlN48+HE1IyFhytabsfV0JMjc=",
"dev": true,
"requires": {
"normalize-package-data": "2.4.0",
"parse-json": "4.0.0",
"pify": "3.0.0"
"normalize-package-data": "^2.3.2",
"parse-json": "^4.0.0",
"pify": "^3.0.0"
}
},
"rxjs": {
@ -5353,7 +5353,7 @@
"integrity": "sha1-vnoN5ITexcXN34s9WRJQRJEvY1s=",
"dev": true,
"requires": {
"has-flag": "2.0.0"
"has-flag": "^2.0.0"
}
},
"yargs": {
@ -5612,10 +5612,10 @@
"integrity": "sha1-L19Fq5HjMhYjT9U62rZo607AmTs=",
"dev": true,
"requires": {
"graceful-fs": "4.1.15",
"parse-json": "4.0.0",
"pify": "3.0.0",
"strip-bom": "3.0.0"
"graceful-fs": "^4.1.2",
"parse-json": "^4.0.0",
"pify": "^3.0.0",
"strip-bom": "^3.0.0"
}
},
"meow": {
@ -5624,15 +5624,15 @@
"integrity": "sha512-xcSBHD5Z86zaOc+781KrupuHAzeGXSLtiAOmBsiLDiPSaYSB6hdew2ng9EBAnZ62jagG9MHAOdxpDi/lWBFJ/A==",
"dev": true,
"requires": {
"camelcase-keys": "4.2.0",
"decamelize-keys": "1.1.0",
"loud-rejection": "1.6.0",
"minimist": "1.2.0",
"minimist-options": "3.0.2",
"normalize-package-data": "2.4.0",
"read-pkg-up": "3.0.0",
"redent": "2.0.0",
"trim-newlines": "2.0.0"
"camelcase-keys": "^4.0.0",
"decamelize-keys": "^1.0.0",
"loud-rejection": "^1.0.0",
"minimist": "^1.1.3",
"minimist-options": "^3.0.1",
"normalize-package-data": "^2.3.4",
"read-pkg-up": "^3.0.0",
"redent": "^2.0.0",
"trim-newlines": "^2.0.0"
}
},
"minimist": {
@ -5647,8 +5647,8 @@
"integrity": "sha1-vjX1Qlvh9/bHRxhPmKeIy5lHfuA=",
"dev": true,
"requires": {
"error-ex": "1.3.2",
"json-parse-better-errors": "1.0.2"
"error-ex": "^1.3.1",
"json-parse-better-errors": "^1.0.1"
}
},
"path-type": {
@ -5657,7 +5657,7 @@
"integrity": "sha512-T2ZUsdZFHgA3u4e5PfPbjd7HDDpxPnQb5jN0SrDsjNSuVXHJqtwTnWqG0B1jZrgmJ/7lj1EmVIByWt1gxGkWvg==",
"dev": true,
"requires": {
"pify": "3.0.0"
"pify": "^3.0.0"
}
},
"pify": {
@ -5672,9 +5672,9 @@
"integrity": "sha1-nLxoaXj+5l0WwA4rGcI3/Pbjg4k=",
"dev": true,
"requires": {
"load-json-file": "4.0.0",
"normalize-package-data": "2.4.0",
"path-type": "3.0.0"
"load-json-file": "^4.0.0",
"normalize-package-data": "^2.3.2",
"path-type": "^3.0.0"
}
},
"read-pkg-up": {
@ -5683,8 +5683,8 @@
"integrity": "sha1-PtSWaF26D4/hGNBpHcUfSh/5bwc=",
"dev": true,
"requires": {
"find-up": "2.1.0",
"read-pkg": "3.0.0"
"find-up": "^2.0.0",
"read-pkg": "^3.0.0"
}
},
"strip-bom": {
@ -5726,10 +5726,10 @@
"integrity": "sha1-L19Fq5HjMhYjT9U62rZo607AmTs=",
"dev": true,
"requires": {
"graceful-fs": "4.1.15",
"parse-json": "4.0.0",
"pify": "3.0.0",
"strip-bom": "3.0.0"
"graceful-fs": "^4.1.2",
"parse-json": "^4.0.0",
"pify": "^3.0.0",
"strip-bom": "^3.0.0"
}
},
"meow": {
@ -5738,15 +5738,15 @@
"integrity": "sha512-xcSBHD5Z86zaOc+781KrupuHAzeGXSLtiAOmBsiLDiPSaYSB6hdew2ng9EBAnZ62jagG9MHAOdxpDi/lWBFJ/A==",
"dev": true,
"requires": {
"camelcase-keys": "4.2.0",
"decamelize-keys": "1.1.0",
"loud-rejection": "1.6.0",
"minimist": "1.2.0",
"minimist-options": "3.0.2",
"normalize-package-data": "2.4.0",
"read-pkg-up": "3.0.0",
"redent": "2.0.0",
"trim-newlines": "2.0.0"
"camelcase-keys": "^4.0.0",
"decamelize-keys": "^1.0.0",
"loud-rejection": "^1.0.0",
"minimist": "^1.1.3",
"minimist-options": "^3.0.1",
"normalize-package-data": "^2.3.4",
"read-pkg-up": "^3.0.0",
"redent": "^2.0.0",
"trim-newlines": "^2.0.0"
}
},
"minimist": {
@ -5761,8 +5761,8 @@
"integrity": "sha1-vjX1Qlvh9/bHRxhPmKeIy5lHfuA=",
"dev": true,
"requires": {
"error-ex": "1.3.2",
"json-parse-better-errors": "1.0.2"
"error-ex": "^1.3.1",
"json-parse-better-errors": "^1.0.1"
}
},
"path-type": {
@ -5771,7 +5771,7 @@
"integrity": "sha512-T2ZUsdZFHgA3u4e5PfPbjd7HDDpxPnQb5jN0SrDsjNSuVXHJqtwTnWqG0B1jZrgmJ/7lj1EmVIByWt1gxGkWvg==",
"dev": true,
"requires": {
"pify": "3.0.0"
"pify": "^3.0.0"
}
},
"pify": {
@ -5786,9 +5786,9 @@
"integrity": "sha1-nLxoaXj+5l0WwA4rGcI3/Pbjg4k=",
"dev": true,
"requires": {
"load-json-file": "4.0.0",
"normalize-package-data": "2.4.0",
"path-type": "3.0.0"
"load-json-file": "^4.0.0",
"normalize-package-data": "^2.3.2",
"path-type": "^3.0.0"
}
},
"read-pkg-up": {
@ -5797,8 +5797,8 @@
"integrity": "sha1-PtSWaF26D4/hGNBpHcUfSh/5bwc=",
"dev": true,
"requires": {
"find-up": "2.1.0",
"read-pkg": "3.0.0"
"find-up": "^2.0.0",
"read-pkg": "^3.0.0"
}
},
"strip-bom": {
@ -5831,10 +5831,10 @@
"integrity": "sha1-L19Fq5HjMhYjT9U62rZo607AmTs=",
"dev": true,
"requires": {
"graceful-fs": "4.1.15",
"parse-json": "4.0.0",
"pify": "3.0.0",
"strip-bom": "3.0.0"
"graceful-fs": "^4.1.2",
"parse-json": "^4.0.0",
"pify": "^3.0.0",
"strip-bom": "^3.0.0"
}
},
"meow": {
@ -5843,15 +5843,15 @@
"integrity": "sha512-xcSBHD5Z86zaOc+781KrupuHAzeGXSLtiAOmBsiLDiPSaYSB6hdew2ng9EBAnZ62jagG9MHAOdxpDi/lWBFJ/A==",
"dev": true,
"requires": {
"camelcase-keys": "4.2.0",
"decamelize-keys": "1.1.0",
"loud-rejection": "1.6.0",
"minimist": "1.2.0",
"minimist-options": "3.0.2",
"normalize-package-data": "2.4.0",
"read-pkg-up": "3.0.0",
"redent": "2.0.0",
"trim-newlines": "2.0.0"
"camelcase-keys": "^4.0.0",
"decamelize-keys": "^1.0.0",
"loud-rejection": "^1.0.0",
"minimist": "^1.1.3",
"minimist-options": "^3.0.1",
"normalize-package-data": "^2.3.4",
"read-pkg-up": "^3.0.0",
"redent": "^2.0.0",
"trim-newlines": "^2.0.0"
}
},
"minimist": {
@ -5866,8 +5866,8 @@
"integrity": "sha1-vjX1Qlvh9/bHRxhPmKeIy5lHfuA=",
"dev": true,
"requires": {
"error-ex": "1.3.2",
"json-parse-better-errors": "1.0.2"
"error-ex": "^1.3.1",
"json-parse-better-errors": "^1.0.1"
}
},
"path-type": {
@ -5876,7 +5876,7 @@
"integrity": "sha512-T2ZUsdZFHgA3u4e5PfPbjd7HDDpxPnQb5jN0SrDsjNSuVXHJqtwTnWqG0B1jZrgmJ/7lj1EmVIByWt1gxGkWvg==",
"dev": true,
"requires": {
"pify": "3.0.0"
"pify": "^3.0.0"
}
},
"pify": {
@ -5891,9 +5891,9 @@
"integrity": "sha1-nLxoaXj+5l0WwA4rGcI3/Pbjg4k=",
"dev": true,
"requires": {
"load-json-file": "4.0.0",
"normalize-package-data": "2.4.0",
"path-type": "3.0.0"
"load-json-file": "^4.0.0",
"normalize-package-data": "^2.3.2",
"path-type": "^3.0.0"
}
},
"read-pkg-up": {
@ -5902,8 +5902,8 @@
"integrity": "sha1-PtSWaF26D4/hGNBpHcUfSh/5bwc=",
"dev": true,
"requires": {
"find-up": "2.1.0",
"read-pkg": "3.0.0"
"find-up": "^2.0.0",
"read-pkg": "^3.0.0"
}
},
"strip-bom": {
@ -6002,8 +6002,8 @@
"integrity": "sha1-vjX1Qlvh9/bHRxhPmKeIy5lHfuA=",
"dev": true,
"requires": {
"error-ex": "1.3.2",
"json-parse-better-errors": "1.0.2"
"error-ex": "^1.3.1",
"json-parse-better-errors": "^1.0.1"
}
}
}
@ -6219,9 +6219,9 @@
"integrity": "sha1-hqdj9Y7k18L2sQLkdkBQ3n7ZDGs=",
"dev": true,
"requires": {
"regenerate": "1.4.0",
"regjsgen": "0.2.0",
"regjsparser": "0.1.5"
"regenerate": "^1.2.1",
"regjsgen": "^0.2.0",
"regjsparser": "^0.1.4"
}
},
"regjsgen": {
@ -6236,7 +6236,7 @@
"integrity": "sha1-fuj4Tcb6eS0/0K4ijSS9lJ6tIFw=",
"dev": true,
"requires": {
"jsesc": "0.5.0"
"jsesc": "~0.5.0"
}
}
}
@ -6421,9 +6421,9 @@
"resolved": "https://registry.npmjs.org/whatwg-url/-/whatwg-url-7.0.0.tgz",
"integrity": "sha512-37GeVSIJ3kn1JgKyjiYNmSLP1yzbpb29jdmwBSgkD9h40/hyrR/OifpVUndji3tmwGgD8qpw7iQu3RSbCrBpsQ==",
"requires": {
"lodash.sortby": "4.7.0",
"tr46": "1.0.1",
"webidl-conversions": "4.0.2"
"lodash.sortby": "^4.7.0",
"tr46": "^1.0.1",
"webidl-conversions": "^4.0.2"
}
}
}
@ -8678,8 +8678,7 @@
"ansi-regex": {
"version": "2.1.1",
"resolved": "https://registry.npmjs.org/ansi-regex/-/ansi-regex-2.1.1.tgz",
"integrity": "sha1-w7M6te42DYbg5ijwRorn7yfWVN8=",
"optional": true
"integrity": "sha1-w7M6te42DYbg5ijwRorn7yfWVN8="
},
"aproba": {
"version": "1.2.0",
@ -8700,14 +8699,12 @@
"balanced-match": {
"version": "1.0.0",
"resolved": "https://registry.npmjs.org/balanced-match/-/balanced-match-1.0.0.tgz",
"integrity": "sha1-ibTRmasr7kneFk6gK4nORi1xt2c=",
"optional": true
"integrity": "sha1-ibTRmasr7kneFk6gK4nORi1xt2c="
},
"brace-expansion": {
"version": "1.1.11",
"resolved": "https://registry.npmjs.org/brace-expansion/-/brace-expansion-1.1.11.tgz",
"integrity": "sha512-iCuPHDFgrHX7H2vEI/5xpz07zSHB00TpugqhmYtVmMO6518mCuRMoOYFldEBl0g187ufozdaHgWKcYFb61qGiA==",
"optional": true,
"requires": {
"balanced-match": "^1.0.0",
"concat-map": "0.0.1"
@ -8722,20 +8719,17 @@
"code-point-at": {
"version": "1.1.0",
"resolved": "https://registry.npmjs.org/code-point-at/-/code-point-at-1.1.0.tgz",
"integrity": "sha1-DQcLTQQ6W+ozovGkDi7bPZpMz3c=",
"optional": true
"integrity": "sha1-DQcLTQQ6W+ozovGkDi7bPZpMz3c="
},
"concat-map": {
"version": "0.0.1",
"resolved": "https://registry.npmjs.org/concat-map/-/concat-map-0.0.1.tgz",
"integrity": "sha1-2Klr13/Wjfd5OnMDajug1UBdR3s=",
"optional": true
"integrity": "sha1-2Klr13/Wjfd5OnMDajug1UBdR3s="
},
"console-control-strings": {
"version": "1.1.0",
"resolved": "https://registry.npmjs.org/console-control-strings/-/console-control-strings-1.1.0.tgz",
"integrity": "sha1-PXz0Rk22RG6mRL9LOVB/mFEAjo4=",
"optional": true
"integrity": "sha1-PXz0Rk22RG6mRL9LOVB/mFEAjo4="
},
"core-util-is": {
"version": "1.0.2",
@ -8852,8 +8846,7 @@
"inherits": {
"version": "2.0.3",
"resolved": "https://registry.npmjs.org/inherits/-/inherits-2.0.3.tgz",
"integrity": "sha1-Yzwsg+PaQqUC9SRmAiSA9CCCYd4=",
"optional": true
"integrity": "sha1-Yzwsg+PaQqUC9SRmAiSA9CCCYd4="
},
"ini": {
"version": "1.3.5",
@ -8865,7 +8858,6 @@
"version": "1.0.0",
"resolved": "https://registry.npmjs.org/is-fullwidth-code-point/-/is-fullwidth-code-point-1.0.0.tgz",
"integrity": "sha1-754xOG8DGn8NZDr4L95QxFfvAMs=",
"optional": true,
"requires": {
"number-is-nan": "^1.0.0"
}
@ -8880,7 +8872,6 @@
"version": "3.0.4",
"resolved": "https://registry.npmjs.org/minimatch/-/minimatch-3.0.4.tgz",
"integrity": "sha512-yJHVQEhyqPLUTgt9B83PXu6W3rx4MvvHvSUvToogpwoGDOUQ+yDrR0HRot+yOCdCO7u4hX3pWft6kWBBcqh0UA==",
"optional": true,
"requires": {
"brace-expansion": "^1.1.7"
}
@ -8888,14 +8879,12 @@
"minimist": {
"version": "0.0.8",
"resolved": "https://registry.npmjs.org/minimist/-/minimist-0.0.8.tgz",
"integrity": "sha1-hX/Kv8M5fSYluCKCYuhqp6ARsF0=",
"optional": true
"integrity": "sha1-hX/Kv8M5fSYluCKCYuhqp6ARsF0="
},
"minipass": {
"version": "2.2.4",
"resolved": "https://registry.npmjs.org/minipass/-/minipass-2.2.4.tgz",
"integrity": "sha512-hzXIWWet/BzWhYs2b+u7dRHlruXhwdgvlTMDKC6Cb1U7ps6Ac6yQlR39xsbjWJE377YTCtKwIXIpJ5oP+j5y8g==",
"optional": true,
"requires": {
"safe-buffer": "^5.1.1",
"yallist": "^3.0.0"
@ -8914,7 +8903,6 @@
"version": "0.5.1",
"resolved": "https://registry.npmjs.org/mkdirp/-/mkdirp-0.5.1.tgz",
"integrity": "sha1-MAV0OOrGz3+MR2fzhkjWaX11yQM=",
"optional": true,
"requires": {
"minimist": "0.0.8"
}
@ -8995,8 +8983,7 @@
"number-is-nan": {
"version": "1.0.1",
"resolved": "https://registry.npmjs.org/number-is-nan/-/number-is-nan-1.0.1.tgz",
"integrity": "sha1-CXtgK1NCKlIsGvuHkDGDNpQaAR0=",
"optional": true
"integrity": "sha1-CXtgK1NCKlIsGvuHkDGDNpQaAR0="
},
"object-assign": {
"version": "4.1.1",
@ -9008,7 +8995,6 @@
"version": "1.4.0",
"resolved": "https://registry.npmjs.org/once/-/once-1.4.0.tgz",
"integrity": "sha1-WDsap3WWHUsROsF9nFC6753Xa9E=",
"optional": true,
"requires": {
"wrappy": "1"
}
@ -9094,8 +9080,7 @@
"safe-buffer": {
"version": "5.1.1",
"resolved": "https://registry.npmjs.org/safe-buffer/-/safe-buffer-5.1.1.tgz",
"integrity": "sha512-kKvNJn6Mm93gAczWVJg7wH+wGYWNrDHdWvpUmHyEsgCtIwwo3bqPtV4tR5tuPaUhTOo/kvhVwd8XwwOllGYkbg==",
"optional": true
"integrity": "sha512-kKvNJn6Mm93gAczWVJg7wH+wGYWNrDHdWvpUmHyEsgCtIwwo3bqPtV4tR5tuPaUhTOo/kvhVwd8XwwOllGYkbg=="
},
"safer-buffer": {
"version": "2.1.2",
@ -9131,7 +9116,6 @@
"version": "1.0.2",
"resolved": "https://registry.npmjs.org/string-width/-/string-width-1.0.2.tgz",
"integrity": "sha1-EYvfW4zcUaKn5w0hHgfisLmxB9M=",
"optional": true,
"requires": {
"code-point-at": "^1.0.0",
"is-fullwidth-code-point": "^1.0.0",
@ -9151,7 +9135,6 @@
"version": "3.0.1",
"resolved": "https://registry.npmjs.org/strip-ansi/-/strip-ansi-3.0.1.tgz",
"integrity": "sha1-ajhfuIU9lS1f8F0Oiq+UJ43GPc8=",
"optional": true,
"requires": {
"ansi-regex": "^2.0.0"
}
@ -9195,14 +9178,12 @@
"wrappy": {
"version": "1.0.2",
"resolved": "https://registry.npmjs.org/wrappy/-/wrappy-1.0.2.tgz",
"integrity": "sha1-tSQ9jz7BqjXxNkYFvA0QNuMKtp8=",
"optional": true
"integrity": "sha1-tSQ9jz7BqjXxNkYFvA0QNuMKtp8="
},
"yallist": {
"version": "3.0.2",
"resolved": "https://registry.npmjs.org/yallist/-/yallist-3.0.2.tgz",
"integrity": "sha1-hFK0u36Dx8GI2AQcGoN8dz1ti7k=",
"optional": true
"integrity": "sha1-hFK0u36Dx8GI2AQcGoN8dz1ti7k="
}
}
},
@ -9577,10 +9558,10 @@
"integrity": "sha1-L19Fq5HjMhYjT9U62rZo607AmTs=",
"dev": true,
"requires": {
"graceful-fs": "4.1.15",
"parse-json": "4.0.0",
"pify": "3.0.0",
"strip-bom": "3.0.0"
"graceful-fs": "^4.1.2",
"parse-json": "^4.0.0",
"pify": "^3.0.0",
"strip-bom": "^3.0.0"
}
},
"meow": {
@ -9589,15 +9570,15 @@
"integrity": "sha512-xcSBHD5Z86zaOc+781KrupuHAzeGXSLtiAOmBsiLDiPSaYSB6hdew2ng9EBAnZ62jagG9MHAOdxpDi/lWBFJ/A==",
"dev": true,
"requires": {
"camelcase-keys": "4.2.0",
"decamelize-keys": "1.1.0",
"loud-rejection": "1.6.0",
"minimist": "1.2.0",
"minimist-options": "3.0.2",
"normalize-package-data": "2.4.0",
"read-pkg-up": "3.0.0",
"redent": "2.0.0",
"trim-newlines": "2.0.0"
"camelcase-keys": "^4.0.0",
"decamelize-keys": "^1.0.0",
"loud-rejection": "^1.0.0",
"minimist": "^1.1.3",
"minimist-options": "^3.0.1",
"normalize-package-data": "^2.3.4",
"read-pkg-up": "^3.0.0",
"redent": "^2.0.0",
"trim-newlines": "^2.0.0"
}
},
"minimist": {
@ -9612,8 +9593,8 @@
"integrity": "sha1-vjX1Qlvh9/bHRxhPmKeIy5lHfuA=",
"dev": true,
"requires": {
"error-ex": "1.3.2",
"json-parse-better-errors": "1.0.2"
"error-ex": "^1.3.1",
"json-parse-better-errors": "^1.0.1"
}
},
"path-type": {
@ -9622,7 +9603,7 @@
"integrity": "sha512-T2ZUsdZFHgA3u4e5PfPbjd7HDDpxPnQb5jN0SrDsjNSuVXHJqtwTnWqG0B1jZrgmJ/7lj1EmVIByWt1gxGkWvg==",
"dev": true,
"requires": {
"pify": "3.0.0"
"pify": "^3.0.0"
}
},
"pify": {
@ -9637,9 +9618,9 @@
"integrity": "sha1-nLxoaXj+5l0WwA4rGcI3/Pbjg4k=",
"dev": true,
"requires": {
"load-json-file": "4.0.0",
"normalize-package-data": "2.4.0",
"path-type": "3.0.0"
"load-json-file": "^4.0.0",
"normalize-package-data": "^2.3.2",
"path-type": "^3.0.0"
}
},
"read-pkg-up": {
@ -9648,8 +9629,8 @@
"integrity": "sha1-PtSWaF26D4/hGNBpHcUfSh/5bwc=",
"dev": true,
"requires": {
"find-up": "2.1.0",
"read-pkg": "3.0.0"
"find-up": "^2.0.0",
"read-pkg": "^3.0.0"
}
},
"strip-bom": {
@ -12393,7 +12374,7 @@
"integrity": "sha512-GMat4EJ5161kIy2HevLlr4luNjBgvmj413KaQA7jt4V8B4RDsfpHk7WQ9GVqfYyyx8OS/L66Kox+rJRNklLK7w==",
"dev": true,
"requires": {
"pump": "3.0.0"
"pump": "^3.0.0"
}
},
"pump": {
@ -12402,8 +12383,8 @@
"integrity": "sha512-LwZy+p3SFs1Pytd/jYct4wpv49HiYCqd9Rlc5ZVdk0V+8Yzv6jR5Blk3TRmPL1ft69TxP0IMZGJ+WPFU2BFhww==",
"dev": true,
"requires": {
"end-of-stream": "1.4.1",
"once": "1.4.0"
"end-of-stream": "^1.1.0",
"once": "^1.3.1"
}
}
}
@ -14425,7 +14406,7 @@
"integrity": "sha512-GMat4EJ5161kIy2HevLlr4luNjBgvmj413KaQA7jt4V8B4RDsfpHk7WQ9GVqfYyyx8OS/L66Kox+rJRNklLK7w==",
"dev": true,
"requires": {
"pump": "3.0.0"
"pump": "^3.0.0"
}
},
"mississippi": {
@ -14434,16 +14415,16 @@
"integrity": "sha512-x471SsVjUtBRtcvd4BzKE9kFC+/2TeWgKCgw0bZcw1b9l2X3QX5vCWgF+KaZaYm87Ss//rHnWryupDrgLvmSkA==",
"dev": true,
"requires": {
"concat-stream": "1.6.2",
"duplexify": "3.6.1",
"end-of-stream": "1.4.1",
"flush-write-stream": "1.0.3",
"from2": "2.3.0",
"parallel-transform": "1.1.0",
"pump": "3.0.0",
"pumpify": "1.5.1",
"stream-each": "1.2.3",
"through2": "2.0.5"
"concat-stream": "^1.5.0",
"duplexify": "^3.4.2",
"end-of-stream": "^1.1.0",
"flush-write-stream": "^1.0.0",
"from2": "^2.1.0",
"parallel-transform": "^1.1.0",
"pump": "^3.0.0",
"pumpify": "^1.3.3",
"stream-each": "^1.1.0",
"through2": "^2.0.0"
}
},
"pump": {
@ -14452,8 +14433,8 @@
"integrity": "sha512-LwZy+p3SFs1Pytd/jYct4wpv49HiYCqd9Rlc5ZVdk0V+8Yzv6jR5Blk3TRmPL1ft69TxP0IMZGJ+WPFU2BFhww==",
"dev": true,
"requires": {
"end-of-stream": "1.4.1",
"once": "1.4.0"
"end-of-stream": "^1.1.0",
"once": "^1.3.1"
}
},
"ssri": {
@ -14462,7 +14443,7 @@
"integrity": "sha512-3Wge10hNcT1Kur4PDFwEieXSCMCJs/7WvSACcrMYrNp+b8kDL1/0wJch5Ni2WrtwEa2IO8OsVfeKIciKCDx/QA==",
"dev": true,
"requires": {
"figgy-pudding": "3.5.1"
"figgy-pudding": "^3.5.1"
}
},
"tar": {
@ -18836,9 +18817,9 @@
"integrity": "sha512-5h+MvEjnzu1qy6MabjuoPatsGAjjDV9B24e7Cktjl+ClNtjVjmvAXjOFQr1u7RlWULKNGYaYVE4s+DIIQ4bOGA==",
"dev": true,
"requires": {
"cssesc": "1.0.1",
"indexes-of": "1.0.1",
"uniq": "1.0.1"
"cssesc": "^1.0.1",
"indexes-of": "^1.0.1",
"uniq": "^1.0.1"
}
}
}

3
plugins/woocommerce-admin/client/components/d3chart/index.js → plugins/woocommerce-admin/packages/components/src/chart/d3chart/chart.js vendored
View File

@ -13,8 +13,7 @@ import { select as d3Select } from 'd3-selection';
/**
* Internal dependencies
*/
import './style.scss';
import D3Base from './d3-base';
import D3Base from './d3base';
import {
drawAxis,
drawBars,

0
plugins/woocommerce-admin/client/components/d3chart/d3-base/README.md → plugins/woocommerce-admin/packages/components/src/chart/d3chart/d3base/README.md
View File

5
plugins/woocommerce-admin/client/components/d3chart/d3-base/index.js → plugins/woocommerce-admin/packages/components/src/chart/d3chart/d3base/index.js vendored
View File

@ -9,11 +9,6 @@ import { Component, createRef } from '@wordpress/element';
import { isEqual } from 'lodash';
import { select as d3Select } from 'd3-selection';
/**
* Internal dependencies
*/
import './style.scss';
/**
* Provides foundation to use D3 within React.
*

0
plugins/woocommerce-admin/client/components/d3chart/d3-base/style.scss → plugins/woocommerce-admin/packages/components/src/chart/d3chart/d3base/style.scss
View File

0
plugins/woocommerce-admin/client/components/d3chart/d3-base/test/index.js → plugins/woocommerce-admin/packages/components/src/chart/d3chart/d3base/test/index.js vendored
View File

6
plugins/woocommerce-admin/client/components/d3chart/example.md → plugins/woocommerce-admin/packages/components/src/chart/d3chart/example.md
View File

@ -1,7 +1,5 @@
```jsx
import { D3Chart, Legend } from 'components';
const noop = () => {};
import { D3Chart, D3Legend } from 'react-d3-chart';
const data = [
{
@ -32,7 +30,7 @@ const data = [
const MyChart = () => (
<div>
<Chart data={ data } title="Example Chart" layout="comparison" />
<D3Chart data={ data } title="Example Chart" layout="item-comparison" />
</div>
);
```

3
plugins/woocommerce-admin/packages/components/src/chart/d3chart/index.js vendored Normal file
View File

@ -0,0 +1,3 @@
export { default as D3Chart } from './chart';
export { default as D3Legend } from './legend';
export { default as D3Base } from './d3base';

57
plugins/woocommerce-admin/client/components/d3chart/legend.js → plugins/woocommerce-admin/packages/components/src/chart/d3chart/legend.js vendored
View File

@ -5,38 +5,16 @@
import classNames from 'classnames';
import { Component, createRef } from '@wordpress/element';
import PropTypes from 'prop-types';
import { sprintf } from '@wordpress/i18n';
/**
* WooCommerce dependencies
*/
import { formatCurrency } from '@woocommerce/currency';
/**
* Internal dependencies
*/
import './legend.scss';
import { getColor } from './utils';
function getFormatedTotal( total, valueType ) {
let rowTotal = total;
switch ( valueType ) {
case 'average':
rowTotal = Math.round( total );
break;
case 'currency':
rowTotal = formatCurrency( total );
break;
case 'number':
break;
}
return rowTotal;
}
import { getColor, getFormatter } from './utils';
/**
* A legend specifically designed for the WooCommerce admin charts.
*/
class Legend extends Component {
class D3Legend extends Component {
constructor() {
super();
@ -56,13 +34,13 @@ class Legend extends Component {
window.removeEventListener( 'resize', this.updateListScroll );
}
updateListScroll = () => {
updateListScroll() {
const list = this.listRef.current;
const scrolledToEnd = list.scrollHeight - list.scrollTop <= list.offsetHeight;
this.setState( {
isScrollable: ! scrolledToEnd,
} );
};
}
render() {
const {
@ -70,9 +48,9 @@ class Legend extends Component {
data,
handleLegendHover,
handleLegendToggle,
itemsLabel,
legendDirection,
valueType,
legendValueFormat,
totalLabel,
} = this.props;
const { isScrollable } = this.state;
const colorParams = {
@ -80,7 +58,7 @@ class Legend extends Component {
colorScheme,
};
const numberOfRowsVisible = data.filter( row => row.visible ).length;
const showTotalLabel = legendDirection === 'column' && data.length > 5 && itemsLabel;
const showTotalLabel = legendDirection === 'column' && data.length > 5 && totalLabel;
return (
<div
@ -128,7 +106,7 @@ class Legend extends Component {
{ row.key }
</span>
<span className="woocommerce-legend__item-total" id={ row.key }>
{ getFormatedTotal( row.total, valueType ) }
{ getFormatter( legendValueFormat )( row.total ) }
</span>
</div>
</button>
@ -136,14 +114,14 @@ class Legend extends Component {
) ) }
</ul>
{ showTotalLabel && (
<div className="woocommerce-legend__total">{ sprintf( itemsLabel, data.length ) }</div>
<div className="woocommerce-legend__total">{ totalLabel }</div>
) }
</div>
);
}
}
Legend.propTypes = {
D3Legend.propTypes = {
/**
* Additional CSS classes.
*/
@ -168,19 +146,20 @@ Legend.propTypes = {
* Display legend items as a `row` or `column` inside a flex-box.
*/
legendDirection: PropTypes.oneOf( [ 'row', 'column' ] ),
/**
* A number formatting string or function to format the value displayed in the legend.
*/
legendValueFormat: PropTypes.oneOfType( [ PropTypes.string, PropTypes.func ] ),
/**
* Label to describe the legend items. It will be displayed in the legend of
* comparison charts when there are many.
*/
itemsLabel: PropTypes.string,
/**
* What type of data is to be displayed? Number, Average, String?
*/
valueType: PropTypes.string,
totalLabel: PropTypes.string,
};
Legend.defaultProps = {
D3Legend.defaultProps = {
legendDirection: 'row',
legendValueFormat: ',',
};
export default Legend;
export default D3Legend;

135
plugins/woocommerce-admin/client/components/d3chart/legend.scss → plugins/woocommerce-admin/packages/components/src/chart/d3chart/style.scss
View File

@ -1,5 +1,140 @@
/** @format */
.d3-chart__container {
position: relative;
width: 100%;
svg {
overflow: visible;
}
.d3-chart__tooltip {
border: 1px solid $core-grey-light-700;
position: absolute;
display: flex;
min-width: 324px;
height: auto;
background-color: $white;
text-align: left;
padding: 17px;
box-shadow: 0 3px 20px 0 rgba(18, 24, 30, 0.1), 0 1px 3px 0 rgba(18, 24, 30, 0.1);
flex-direction: column;
flex-wrap: nowrap;
justify-content: flex-start;
pointer-events: none;
visibility: hidden;
z-index: 1;
@include breakpoint( '<600px' ) {
min-width: auto;
width: calc(100% - #{$gap-large * 2});
}
h4 {
text-align: left;
line-height: 18px;
width: 100%;
text-transform: uppercase;
font-size: 11px;
color: $core-grey-dark-300;
margin-top: 0;
}
ul {
list-style: none;
margin-bottom: 2px;
margin-top: 2px;
font-size: 14px;
li {
display: flex;
flex-direction: row;
flex-wrap: nowrap;
justify-content: flex-start;
align-items: center;
&.key-row {
display: flex;
flex-direction: row;
justify-content: space-between;
width: 100%;
.key-container {
width: 100%;
min-width: 100px;
.key-color {
display: inline-block;
width: 16px;
height: 16px;
margin-right: 8px;
}
.key-key {
margin-right: 6px;
}
}
.key-value {
font-weight: 600;
}
}
}
}
}
.bargroup {
&rect {
shape-rendering: crispEdges;
}
}
.grid {
.tick {
line {
stroke: $core-grey-light-500;
stroke-width: 1;
shape-rendering: crispEdges;
}
&:first-child {
line {
stroke: $core-grey-dark-500;
}
}
&:last-child {
line {
opacity: 0;
}
}
}
}
.tick {
padding-top: 10px;
stroke-width: 1;
}
.y-axis {
text-anchor: start;
&.tick {
&text {
fill: $core-grey-dark-500;
}
}
}
.y-axis,
.axis-month {
.tick text {
font-size: 10px;
}
}
.focus-grid {
line {
stroke: $core-grey-light-700;
stroke-width: 1px;
}
}
}
/** @format */
.woocommerce-legend {
&.has-total {
padding-bottom: 50px;

0
plugins/woocommerce-admin/client/components/d3chart/test/fixtures/dummy-hour.js → plugins/woocommerce-admin/packages/components/src/chart/d3chart/test/fixtures/dummy-hour.js vendored
View File

0
plugins/woocommerce-admin/client/components/d3chart/test/fixtures/dummy.js → plugins/woocommerce-admin/packages/components/src/chart/d3chart/test/fixtures/dummy.js vendored
View File

6
plugins/woocommerce-admin/client/components/d3chart/test/legend.js → plugins/woocommerce-admin/packages/components/src/chart/d3chart/test/legend.js vendored
View File

@ -8,7 +8,7 @@ import { mount } from 'enzyme';
/**
* Internal dependencies
*/
import Legend from '../legend';
import D3Legend from '../legend';
const colorScheme = jest.fn();
const data = [
@ -26,7 +26,7 @@ const data = [
describe( 'Legend', () => {
test( 'should not disable any button if more than one is active', () => {
const legend = mount( <Legend colorScheme={ colorScheme } data={ data } /> );
const legend = mount( <D3Legend colorScheme={ colorScheme } data={ data } /> );
expect( legend.find( 'button' ).get( 0 ).props.disabled ).toBeFalsy();
expect( legend.find( 'button' ).get( 1 ).props.disabled ).toBeFalsy();
@ -35,7 +35,7 @@ describe( 'Legend', () => {
test( 'should disable the last active button', () => {
data[ 1 ].visible = false;
const legend = mount( <Legend colorScheme={ colorScheme } data={ data } /> );
const legend = mount( <D3Legend colorScheme={ colorScheme } data={ data } /> );
expect( legend.find( 'button' ).get( 0 ).props.disabled ).toBeTruthy();
expect( legend.find( 'button' ).get( 1 ).props.disabled ).toBeFalsy();

0
plugins/woocommerce-admin/client/components/d3chart/test/utils.js → plugins/woocommerce-admin/packages/components/src/chart/d3chart/test/utils.js vendored
View File

0
plugins/woocommerce-admin/client/components/d3chart/utils.js → plugins/woocommerce-admin/packages/components/src/chart/d3chart/utils.js vendored
View File

36
plugins/woocommerce-admin/packages/components/src/chart/example.md Normal file
View File

@ -0,0 +1,36 @@
```jsx
import { Chart } from '@woocommerce/components';
const data = [
{
date: '2018-05-30T00:00:00',
Hoodie: { value: 21599 },
Sunglasses: { value: 38537 },
Cap: { value: 106010 },
},
{
date: '2018-05-31T00:00:00',
Hoodie: { value: 14205 },
Sunglasses: { value: 24721 },
Cap: { value: 70131 },
},
{
date: '2018-06-01T00:00:00',
Hoodie: { value: 10581 },
Sunglasses: { value: 19991 },
Cap: { value: 53552 },
},
{
date: '2018-06-02T00:00:00',
Hoodie: { value: 9250 },
Sunglasses: { value: 16072 },
Cap: { value: 47821 },
},
];
const MyChart = () => (
<div>
<Chart data={ data } title="Example Chart" layout="item-comparison" />
</div>
);
```

14
plugins/woocommerce-admin/client/components/chart/index.js → plugins/woocommerce-admin/packages/components/src/chart/index.js
View File

@ -2,7 +2,7 @@
/**
* External dependencies
*/
import { __ } from '@wordpress/i18n';
import { __, sprintf } from '@wordpress/i18n';
import classNames from 'classnames';
import { Component, createRef, Fragment } from '@wordpress/element';
import { decodeEntities } from '@wordpress/html-entities';
@ -18,15 +18,13 @@ import { withViewportMatch } from '@wordpress/viewport';
* WooCommerce dependencies
*/
import { updateQueryString } from '@woocommerce/navigation';
import { H, Section } from '@woocommerce/components';
/**
* Internal dependencies
*/
import './style.scss';
import D3Chart from 'components/d3chart';
import Legend from 'components/d3chart/legend';
import ChartPlaceholder from './placeholder';
import { H, Section } from '../section';
import { D3Chart, D3Legend } from './d3chart';
d3FormatDefaultLocale( {
decimal: '.',
@ -235,14 +233,14 @@ class Chart extends Component {
const chartHeight = this.getChartHeight();
const legend = (
<Legend
<D3Legend
colorScheme={ d3InterpolateViridis }
data={ orderedKeys }
handleLegendHover={ this.handleLegendHover }
handleLegendToggle={ this.handleLegendToggle }
legendDirection={ legendDirection }
itemsLabel={ itemsLabel }
valueType={ valueType }
legendValueFormat={ tooltipValueFormat }
totalLabel={ sprintf( itemsLabel, orderedKeys.length ) }
/>
);
const margin = {

0
plugins/woocommerce-admin/client/components/chart/placeholder.js → plugins/woocommerce-admin/packages/components/src/chart/placeholder.js
View File

0
plugins/woocommerce-admin/client/components/chart/style.scss → plugins/woocommerce-admin/packages/components/src/chart/style.scss
View File

2
plugins/woocommerce-admin/packages/components/src/index.js
View File

@ -7,6 +7,8 @@ import 'react-dates/initialize';
export { default as AdvancedFilters } from './filters/advanced';
export { default as AnimationSlider } from './animation-slider';
export { default as Chart } from './chart';
export { default as ChartPlaceholder } from './chart/placeholder';
export { default as Card } from './card';
export { default as Count } from './count';
export { default as CompareFilter } from './filters/compare';

3
plugins/woocommerce-admin/packages/components/src/style.scss
View File

@ -4,6 +4,9 @@
@import 'animation-slider/style.scss';
@import 'calendar/style.scss';
@import 'card/style.scss';
@import 'chart/style.scss';
@import 'chart/d3chart/style.scss';
@import 'chart/d3chart/d3base/style.scss';
@import 'count/style.scss';
@import 'dropdown-button/style.scss';
@import 'ellipsis-menu/style.scss';