Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Jump to bottom

feat(arc): added arcLength for gauge and optimized startingAngle #1849

Closed
wants to merge 8 commits into from
Closed

feat(arc): added arcLength for gauge and optimized startingAngle #1849

wants to merge 8 commits into from

Conversation

michkami
Copy link
Collaborator

@michkami michkami commented Jan 4, 2021

Issue

#1803
#1633

Details

Drawing gauge arcs is now possible from startingAngle to arcLength.

  • 'arcLength' values range is -100 to 100
  • arcLength < -100 will default to -100
  • arcLength > 100 will default to 100

If gauge_fullCircle: false, endAngle is now mirrored from 'startingAngle'

mirrored gauge

If gauge_fullCircle: false, there is no reason to use starting angle lower than our default angle (-0.5 PI) and greater than the opposite of our default angle, as it would draw the arc out of the svg.
If gauge_fullCircle: true, there is no reason to use starting angle lower than -PI and greater than PI as all relevant starting angles are already in this range. There are no benefits for accepting other values and it would make the future calculations for the text placements harder.

Values range for statingAngle:

  • If gauge_fullCircle: false:
    • startingAngle >== -1 * Math.PI / 2 defaults to -1 * PI / 2
    • startingAngle <== Math.PI / 2 defaults to PI / 2
  • If gauge_fullCircle: true:
    • startingAngle >== -1 * Math.PI defaults to -1 * PI
    • startingAngle <== Math.PI defaults to PI

Refactored drawing of the background arcs

Moved the functionality for drawing the background arcs form redrawArcText to redrawBackgroundArcs which is called BEFORE the text are generated.

Fixed a bug where the arcs had wrong width in some cases

In this case updateRadius has to be called on updateArc before svgArc is generated, to make sure that gaugeArcWidth is calculated correctly.

skip

  • Added and fixed tests
  • added 'GaugeStartingAngle' demo
  • added 'GaugeArcLength' demo

ToDo

  1. For now, the min and max labels are drawn at a fixed position. This has to be fully reworked in the future. I already have some ideas done in my prototyping branch, but I think I will need some help on this.
  2. In some use cases (see screenshot below), there is some empty space between the legend and the drawn arcs. It should be considered to calculate the svg height for gauge dynamically depending on the actual height of the drawn arcs.
    grafik
    grafik

michkami and others added 8 commits January 4, 2021 02:13
@michkami
feat(gauge): added support for drawing gauge from 'startingAngle' to …
eb0fbe5 
…'arcLength'

- updated gauge config options
- 'arcLength' is limited to: -100 <== arcLength (in percent) <== 100
- values <-100 and >100 will default to -100 or 100
@michkami
feat(gauge): when 'guage_fullCircle: false', endAngle is now mirrored…
12eadc8 
… from 'startingAngle'

Also defined accepted values for statingAngle:
- If 'gauge_fullCircle: false':
-- 'startingAngle >== -1 * Math.PI / 2' defaults to -1 * Math.PI / 2
-- 'startingAngle <== Math.PI / 2' defaults to Math.PI / 2
- If 'gauge_fullCircle: true':
-- 'startingAngle >== -1 * Math.PI' defaults to -1 * Math.PI
-- 'startingAngle <== Math.PI' defaults to Math.PI

If gauge is not full circled, there is no reason to use starting angle lower
than our default and greater than the opposite of our default, as it would
draw the arc out of the svg.
If gauge is full circled, there is no reason to use starting angle lower
than -PI and greater than PI as all relevant starting angles are already
in this range. There are no benefits for accepting other values and it would
make the calculations for the text placements harder.
@michkami
refactor(gauge): splitted text and background arc rendering
407da54 
# Conflicts:
#	src/ChartInternal/shape/arc.ts
@michkami
skip: updated and added tests
36a88f7 
# Conflicts:
#	test/shape/gauge-spec.ts
@michkami
skip: added 'GaugeStartingAngle' demo
eb5141a
@michkami
fix(arc): MultiArcGauge arcs are now generated correctly
ab6fe0b 
updateRadius() has to be called to make sure,
'gaugeArcWidth' is calculated correctly before
drawing arcs
@michkami
skip: updated tests
fcb9dcd
@michkami
skip: added 'GaugeArcLength' demo
5916a40
@coveralls
Copy link

Coverage Status

Coverage remained the same at 91.106% when pulling 5916a40 on michkami:issue/1803 into 24e1352 on naver:master.

@netil netil closed this in 25954ad Jan 8, 2021
@netil
Copy link
Member

netil commented Jan 8, 2021

@michkami, thanks for the contribution once again!

github-actions bot pushed a commit that referenced this pull request Jan 8, 2021
@semantic-release-bot
chore(release): 2.2.0-next.4 [skip ci]
b3a6f87 
# [2.2.0-next.4](2.2.0-next.3...2.2.0-next.4) (2021-01-08)

### Bug Fixes

* **color:** fix color callback mismatch ([86ef214](86ef214)), closes [#1847](#1847)
* **types:** fix .load() data type ([7108e7b](7108e7b)), closes [#1848](#1848)

### Features

* **gauge:** added support for drawing gauge from 'startingAngle' to 'arcLength' ([25954ad](25954ad)), closes [#1633](#1633) [#1803](#1803) [#1849](#1849)
@michkami michkami deleted the issue/1803 branch January 14, 2021 17:04
github-actions bot pushed a commit that referenced this pull request Jan 26, 2021
@semantic-release-bot
chore(release): 2.2.0 [skip ci]
211fdbf 
# [2.2.0](2.1.4...2.2.0) (2021-01-26)

### Bug Fixes

* **api:** fix incorrect legend text positioning ([f1ede3f](f1ede3f)), closes [#1888](#1888)
* **api:** fix zoom for timesries axis ([0421a50](0421a50)), closes [#1868](#1868)
* **arc:** fix setting color value ([fad9e86](fad9e86)), closes [#1857](#1857) [#1847](#1847)
* **axis:** fix incorrect tick interval calculation ([1a96f3e](1a96f3e)), closes [#1896](#1896)
* **axis:** rotated horizontal xAxisHeight is calculated correctly after loading new data ([ef2754f](ef2754f)), closes [#1786](#1786) [#1787](#1787)
* **bar:** fix bar width on zoom ([25e987a](25e987a)), closes [#1907](#1907)
* **bar:** fix bar width rendering for 'total' data key ([eacaecb](eacaecb)), closes [#1818](#1818)
* **browser:** fix referencing global order ([8f84cb3](8f84cb3)), closes [#1778](#1778)
* **browser:** fix retrieving global ([3474ac0](3474ac0)), closes [#1826](#1826)
* **color:** fix color callback mismatch ([86ef214](86ef214)), closes [#1847](#1847)
* **data:** fix data.order to work for arc types ([3a716a0](3a716a0)), closes [#1863](#1863)
* **eventrect:** fix resizing event rect element after .load() ([12bf547](12bf547)), closes [#1864](#1864)
* **eventRect:** fix data.onclick work for scatter/bubble ([109c87d](109c87d)), closes [#1795](#1795)
* **point:** fix usePoint defs id value ([6df4653](6df4653)), closes [#1887](#1887)
* **radar:** fix data label text position ([c69d674](c69d674)), closes [#1871](#1871)
* **text:** data labels are working in Internet Explorer again ([865224e](865224e)), closes [#1877](#1877)
* **tooltip:** fix arc's tooltip interaction ([a8586a3](a8586a3)), closes [#1859](#1859)
* **types:** fix .load() data type ([7108e7b](7108e7b)), closes [#1848](#1848)

### Features

* **api:** make return values for axis.labels() ([efa5174](efa5174)), closes [#1865](#1865)
* **data:** Intent to ship data.label multiline ([8903aa6](8903aa6)), closes [#1784](#1784)
* **data.labels.colors:** Add callback support ([ac1affa](ac1affa)), closes [#1845](#1845)
* **gauge:** added support for drawing gauge from 'startingAngle' to 'arcLength' ([25954ad](25954ad)), closes [#1633](#1633) [#1803](#1803) [#1849](#1849)
* **gauge:** Intent to ship gauge.background ([632c600](632c600)), closes [#1804](#1804)
* **pie:** Intent to ship pie.outerRadius ([ca67418](ca67418)), closes [#1825](#1825)
* **point:** Intent to ship point.opacity ([fc5ad35](fc5ad35)), closes [#1867](#1867)
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Reviewers
No reviews
Assignees
No one assigned
Labels
None yet
Projects
None yet
Milestone
No milestone
Development

Successfully merging this pull request may close these issues.

None yet
3 participants
@michkami @coveralls @netil