Merge pull request woocommerce/woocommerce-admin#944 from woocommerce/try/chart-package-part-2

Component: add external d3chart package
This commit is contained in:
Robert Elliott 2018-12-05 12:57:16 +02:00 committed by GitHub
commit ed32544c06
25 changed files with 235 additions and 243 deletions

View File

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

View File

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

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';

View File

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

View File

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

View File

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

View File

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

View File

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

View File

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

View File

@ -1,4 +1,8 @@
/** @format */ /** @format */
/**
* Internal Dependencies
*/
@import './legend.scss';
.d3-chart__container { .d3-chart__container {
position: relative; position: relative;

View File

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

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>
);
```

View File

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

View File

@ -7,6 +7,8 @@ import 'react-dates/initialize';
export { default as AdvancedFilters } from './filters/advanced'; export { default as AdvancedFilters } from './filters/advanced';
export { default as AnimationSlider } from './animation-slider'; 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 Card } from './card';
export { default as Count } from './count'; export { default as Count } from './count';
export { default as CompareFilter } from './filters/compare'; export { default as CompareFilter } from './filters/compare';

View File

@ -4,6 +4,9 @@
@import 'animation-slider/style.scss'; @import 'animation-slider/style.scss';
@import 'calendar/style.scss'; @import 'calendar/style.scss';
@import 'card/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 'count/style.scss';
@import 'dropdown-button/style.scss'; @import 'dropdown-button/style.scss';
@import 'ellipsis-menu/style.scss'; @import 'ellipsis-menu/style.scss';