Commit Graph

88 Commits

Author SHA1 Message Date
Kelly Dwan c29043a3bc Switch to using `@wordpress/viewport` for responsive screen layouts (https://github.com/woocommerce/woocommerce-admin/pull/761)
* Switch to Gutenberg viewport package

* Switch CSS breakpoints to core-supported values

* Fix double-calendar logic
2018-11-02 15:20:11 -04:00
Jonathan Belcher b16c056c32 Makes stylelint config match prettier settings (https://github.com/woocommerce/woocommerce-admin/pull/733)
* Makes stylelint config match prettier settings

* Fix/all css lints (https://github.com/woocommerce/woocommerce-admin/pull/734)

* Fix all sass lints!

* Delete settings.json

* Update newline rule, which also conflicts with prettier

* Fix remaining stylelint issues

* Disable stylelint rule for a line to avoid prettier/linter fights
2018-11-01 17:03:00 -04:00
Albert Juhé Lluveras 33cdba6945 Fix charts redirecting to previous path when changing interval value (https://github.com/woocommerce/woocommerce-admin/pull/731)
* Fix charts redirecting to previous path when changing interval value

* Fix chart being reset when changing interval

* Fix chart being reset when changing filters
2018-11-01 10:13:45 +01:00
Kelly Dwan f62537fc17 Try: Add Lerna to split out utility packages (https://github.com/woocommerce/woocommerce-admin/pull/678)
* Add lerna & GB package-building script

* Move currency library to lerna module

* Update lerna config

* Add publish commands

* Add currency as an faux-external module

* Add separate command to build just core files

* Update dependency path

* Update build script to build all packages into `dist`

* Add packages to the jest test setup

* Move date library to packages

* Update imports to use @woocommerce/date

* Output wcSettings definition before any scripts are output

Fixes issues where wc-dates lib relies on settings object

* Add the build step into travis

* Update jest config to dynamically get package paths

* Update package postcss config to match wc-admin’s main config

* Add combined watch scripts for package+app, add a `clean` command to clean up old build files

* Ignore PHPCS error (leave todo message to fix)

* Concat files with a space, fix issue where all files join in one continuous string and fail the check
2018-10-30 14:57:48 -04:00
Albert Juhé Lluveras e5fe8b1c66 Move tooltip below the chart when there is limited horizontal space (https://github.com/woocommerce/woocommerce-admin/pull/716)
* Show tooltip below the chart on mobile

* Fix tooltips not correctly centered in bar chart
2018-10-30 19:07:34 +01:00
Jonathan Belcher 3446c0814b Stylint autofixes (https://github.com/woocommerce/woocommerce-admin/pull/729) 2018-10-30 09:17:17 -04:00
Albert Juhé Lluveras eda609126e Reverse the order highlighted points are rendered in charts (https://github.com/woocommerce/woocommerce-admin/pull/701) 2018-10-26 16:47:44 +02:00
Robert Elliott fd846b3396 Merge pull request woocommerce/woocommerce-admin#684 from woocommerce/bug/x2-axis-dups
Bug: ensure duplicate parts of date removed from x2 ticks
2018-10-26 10:43:57 +02:00
Robert Elliott 36ef0a9459 updated dotRadius and lineStroke based on viewport size 2018-10-26 10:10:29 +02:00
Robert Elliott 2551696c6a show circles if the width to x-tick ratio is greater than 36px 2018-10-26 09:57:55 +02:00
Robert Elliott a538ef7234 adjust chart height and dots 2018-10-26 09:57:55 +02:00
Robert Elliott e6a609ae7a fix compareStrings issue 2018-10-25 13:47:31 +02:00
Robert Elliott 97a819a44d Merge pull request woocommerce/woocommerce-admin#635 from woocommerce/add/chart-uneven-ticks
Chart: remove last x-axis tick in an uneven series
2018-10-25 11:10:31 +02:00
Robert Elliott 6b2bd1e11d tests and jsdocs 2018-10-24 13:13:17 +02:00
Robert Elliott bc098e58d4 refactor compareStrings 2018-10-24 13:00:29 +02:00
Robert Elliott d152686a65 approach to remove duplicate string characters from prev x-tick 2018-10-24 12:42:43 +02:00
Robert Elliott 133e0a7646 remove 'or last' 2018-10-24 12:39:55 +02:00
Robert Elliott cf3d3eb0f0 remove last tick in an uneven series 2018-10-24 12:39:55 +02:00
Albert Juhé Lluveras 508141b709 IE11: fix tooltip not correctly positioned in charts (https://github.com/woocommerce/woocommerce-admin/pull/602) 2018-10-19 17:39:14 +02:00
Jonathan Belcher 0828ea5258 Fixes number formatting on charts (https://github.com/woocommerce/woocommerce-admin/pull/529) 2018-10-19 09:23:47 -04:00
Albert Juhé Lluveras e545ae4d22 Remove unnecessary opacity values from charts code (https://github.com/woocommerce/woocommerce-admin/pull/569) 2018-10-18 14:56:54 +02:00
Robert Elliott 141179b154 Component - Chart: focus data points on hover with tooltip (https://github.com/woocommerce/woocommerce-admin/pull/468)
* focus data points on hover with tooltip

* Add new proprty to getdateSpaces test
2018-10-17 11:08:34 -07:00
Albert Juhé Lluveras 36c37afe49 Hide day from X axis when the time period is too long (https://github.com/woocommerce/woocommerce-admin/pull/525)
* Refactor getXTicks

* Hide day from X axis when the time period is too long

* Fix X axis labels misaligned in charts

* Align axis ticks to the first day of the month when not displaying the day number

* Store threshold in a variable

* Add missing JSDoc

* Fix charts hanging when the number of days selected was exactly 180

* Improve function naming

* Fix dayTicksThreshold mismatch between date format and chart layout
2018-10-17 15:44:43 +02:00
David Levin b64fc4f0a1 Fix y-axis ticks 2018-10-12 13:39:38 -07:00
David Levin 564e4cfd66 change reverse line chart zindex and remove decinmals from yaxis ticks 2018-10-12 09:08:57 -07:00
David Levin aeac3a2e30 Update chart interval select alignment 2018-09-26 15:15:16 -07:00
Albert Juhé Lluveras 3e3dbad408 Update chart header layout according to design (https://github.com/woocommerce/woocommerce-admin/pull/476)
* Update chart header layout according to design

* Add RTL support
2018-09-26 14:17:45 +02:00
Albert Juhé Lluveras 80449c6c57 Make tooltip position be relative to the hovered elements instead of the mouse (https://github.com/woocommerce/woocommerce-admin/pull/471)
* Make tooltip position be relative to the hovered elements instead of the mouse

* Set tooltip margin to 24px to match CSS 'gap-large'

* When focusing a bar with value 0, set the target node to its parent so the tooltip is displayed next to it

* Make sure 'mouseout' event is not triggered when hover the tooltip box

* Make sure the tooltip is never rendered too much to the left/top of the chart

* Get the size of the tooltip box from the DOM when it's available

* Minor fixes
2018-09-26 14:17:29 +02:00
Albert Juhé Lluveras 5649b6b1e2 Use 'H' component for chart header (https://github.com/woocommerce/woocommerce-admin/pull/480)
* Use 'H' component for chart header

* Set 'Section' component below the 'H'
2018-09-26 09:20:29 +02:00
Albert Juhé Lluveras 0088581fcb Fix: chart legend was not visible at 1340px width (https://github.com/woocommerce/woocommerce-admin/pull/472) 2018-09-25 20:19:32 +02:00
Albert Juhé Lluveras 1900bb0917 Improve charts accessibility (https://github.com/woocommerce/woocommerce-admin/pull/421)
* Add aria roles to chart elements

* Make individual points (in line charts) and individual bar (in bar charts) focusable

* Remove methods which are never used

* Reduce the number of parameters required by functions that display/hide the tooltip

* Use tooltipFormat for accessibility dates

* Rename 'formatVoiceDate' function to 'getTooltipDate'

* Use string literals for aria-label

* Remove table role which was no longer needed

* Add aria-hidden to X-axis in charts

* Remove 'key' from points/bar aria-label in charts

* Set different ARIA properties depending on chart mode (time or item comparison)

* Label should default to an empty string instead of a 0

* Use date format from params instead of hardcoded
2018-09-25 11:42:08 +02:00
Kelly Dwan 62276fb361 Add visual component docs from markdown examples (https://github.com/woocommerce/woocommerce-admin/pull/470)
* Remove content from README, leaving only the example

* Rename edited READMEs

* Add a devdocs page rendering from markdown example files

* Add more components to devdocs

* Add the rest of the component examples

* Add navigation to single components, show generated readme on single component view

* Style devdocs like calypso

* Split devdocs into two columns at “desktop” sizes

* Update segmented selection example

* Update link

* Add header to avoid notices error
2018-09-24 11:36:35 -04:00
Albert Juhé Lluveras 31289e8c82 Transpose and update format of chart tooltip dates (https://github.com/woocommerce/woocommerce-admin/pull/467)
* Fix dates transposed in revenue chart

* Update date format in revenue chart tooltip labels

* Load point label date formats from lib/date

* Pass point label format as a prop to the chart component
2018-09-24 13:11:18 +02:00
Albert Juhé Lluveras ccde0effe2 Remove opacity property from chart tooltip title styles (https://github.com/woocommerce/woocommerce-admin/pull/466) 2018-09-21 17:03:06 +02:00
Albert Juhé Lluveras a18a9cd89a Update tooltip title and labels in standard graphs (https://github.com/woocommerce/woocommerce-admin/pull/458)
* Allow adding a label for each specific point in a chart

* Update test fixtures

* Update README with new data format

* Simplify getPreviousDate function code

* Update tooltip dates format

* Add new prop to charts 'tooltipTitle' to override the date tooltip title

* Fix totals not being calculated in charts legend

* Fix JS error when hiding lines in chart

* Fix a couple of issues with chart README

* Add quotes around prop names

* Remove unused variable

* Remove colon after tooltip label
2018-09-20 16:28:22 +02:00
Albert Juhé Lluveras 18be372cad Increase contrast of the tooltip title color (https://github.com/woocommerce/woocommerce-admin/pull/460) 2018-09-20 16:21:21 +02:00
Albert Juhé Lluveras a877f45471 Change default date format for chart tooltips (https://github.com/woocommerce/woocommerce-admin/pull/459) 2018-09-20 16:21:03 +02:00
Albert Juhé Lluveras 5e87febf04 Chart Legend: Update checkbox styles to outline when unchecked (https://github.com/woocommerce/woocommerce-admin/pull/426)
Chart Legend: Update checkbox styles to outline when unchecked and add focus state
2018-09-19 16:41:13 +02:00
Albert Juhé Lluveras d5657c879d Make buttons to switch between bar and line chart accessible (https://github.com/woocommerce/woocommerce-admin/pull/422)
* Make buttons to switch between bar and line chart accessible

* Use better ARIA roles for line/bar chart buttons
2018-09-18 16:53:55 +02:00
Albert Juhé Lluveras 9d5cd880dd Don't allow unselecting all items in chart legends (https://github.com/woocommerce/woocommerce-admin/pull/427)
* Don't allow unselecting all items in chart legends

* Add correct color to chart legend labels

* Add tests for chart legend enable/disable items logic
2018-09-18 16:53:30 +02:00
Robert Elliott e79a4b9025 remove he package and rename uniqueDates to ticks 2018-09-17 11:07:11 +02:00
Robert Elliott ddc2645bef check if second x axis tick required 2018-09-14 10:49:07 -07:00
Robert Elliott ac8952d7ec Component - Chart: factorial spacing of x-axis ticks (https://github.com/woocommerce/woocommerce-admin/pull/398)
* remove circles on more than 50 x points

* x-axis interval spacing

* factorial spacing of x-axis ticks

* limit pipes too

* catch recursion infinity issue and add layout
2018-09-14 10:43:53 -07:00
Timmy Crawford 8eb0906287 Chart: Add styling needed to not be wrapped by card. (https://github.com/woocommerce/woocommerce-admin/pull/408)
* Chart: Add styling needed to not be wrapped by card.

* Add negative top margin back

* Fix placeholder css.
2018-09-14 09:17:39 -07:00
Albert Juhé Lluveras 5669eb4b1a Make it possible to navigate charts with the keyboard (https://github.com/woocommerce/woocommerce-admin/pull/399)
* Hide tooltip when mouse leaves chart bars

* Allow focus on chart lines/bars and show tooltip

* Extract position calculation to a function

* Make columns focusable instead of individual points in line charts
2018-09-14 14:57:09 +02:00
Robert Elliott a08cb0dd70 remove d 2018-09-14 11:57:50 +02:00
Robert Elliott 45089c1602 2nd x-axis format 2018-09-14 11:53:54 +02:00
Robert Elliott abe27333ae remove uncommented style 2018-09-12 15:24:45 +02:00
Robert Elliott b276750955 html encoder for currency symbols 2018-09-12 13:16:44 +02:00
Robert Elliott a7ed5f0c85 html encoder for currency symbols 2018-09-12 13:16:36 +02:00