You are viewing a plain text version of this content. The canonical link for it is here.
Posted to commits@echarts.apache.org by GitBox <gi...@apache.org> on 2020/04/10 10:49:52 UTC
[GitHub] [incubator-echarts] yufeng04 opened a new pull request #12414:
showLoading align center
yufeng04 opened a new pull request #12414: showLoading align center
URL: https://github.com/apache/incubator-echarts/pull/12414
<!-- Please fill in the following information to help us review your PR more efficiently. -->
## Brief Information
* showLoading align center
1. Choose the center position of text and animation
* Add configuration items
1. fontSize：font size of text，the default value is 12px
2. showAnimation：show animation or not，the default value is true
3. arcRadius：radius of circle in animation，the default value is 10
4. lineWidth：lineWidth of circle in animation， the default value is 5
This pull request is in the type of:
- [ ] bug fixing
- [ ] new feature
- [x] others
### What does this PR do?
Enhance the showLoading
<!-- USE ONCE SENTENCE TO DESCRIBE WHAT THIS PR DOES. -->
### Fixed issues
<!--
- #xxxx: ...
-->
## Details
### Before: What was the problem?
showLoading align center by the center of circle in animation
<!-- DESCRIBE THE BUG OR REQUIREMENT HERE. -->
<!-- ADD SCREENSHOT HERE IF APPLICABLE. -->
### After: How is it fixed in this PR?
showLoading align center by the center of animation and text
<!-- THE RESULT AFTER FIXING AND A SIMPLE EXPLANATION ABOUT HOW IT IS FIXED. -->
<!-- ADD SCREENSHOT HERE IF APPLICABLE. -->
## Usage
### Are there any API changes?
- [ ] The API has been changed.
<!-- LIST THE API CHANGES HERE -->
### Related test cases or examples to use the new APIs
NA.
## Others
### Merging options
- [ ] Please squash the commits into a single one when merge.
### Other information
----------------------------------------------------------------
This is an automated message from the Apache Git Service.
To respond to the message, please log on to GitHub and use the
URL above to go to the specific comment.
For queries about this service, please contact Infrastructure at:
users@infra.apache.org
With regards,
Apache Git Services
---------------------------------------------------------------------
To unsubscribe, e-mail: commits-unsubscribe@echarts.apache.org
For additional commands, e-mail: commits-help@echarts.apache.org
[GitHub] [incubator-echarts] echarts-bot[bot] commented on issue #12414:
showLoading align center
Posted by GitBox <gi...@apache.org>.
echarts-bot[bot] commented on issue #12414: showLoading align center
URL: https://github.com/apache/incubator-echarts/pull/12414#issuecomment-611981616
Thanks for your contribution!
The community will review it ASAP. In the meanwhile, please checkout [the coding standard](https://echarts.apache.org/en/coding-standard.html) and Wiki about [How to make a pull request](https://github.com/apache/incubator-echarts/wiki/How-to-make-a-pull-request).
The pull request is marked to be `PR: author is committer` because you are a committer of this project.
----------------------------------------------------------------
This is an automated message from the Apache Git Service.
To respond to the message, please log on to GitHub and use the
URL above to go to the specific comment.
For queries about this service, please contact Infrastructure at:
users@infra.apache.org
With regards,
Apache Git Services
---------------------------------------------------------------------
To unsubscribe, e-mail: commits-unsubscribe@echarts.apache.org
For additional commands, e-mail: commits-help@echarts.apache.org
[GitHub] [incubator-echarts] pissang commented on a change in pull request
#12414: showLoading align center
Posted by GitBox <gi...@apache.org>.
pissang commented on a change in pull request #12414: showLoading align center
URL: https://github.com/apache/incubator-echarts/pull/12414#discussion_r407025567
##########
File path: src/loading/default.js
##########
@@ -34,69 +35,80 @@ export default function (api, opts) {
opts = opts || {};
zrUtil.defaults(opts, {
text: 'loading',
- color: '#c23531',
textColor: '#000',
+ fontSize: '12px',
maskColor: 'rgba(255, 255, 255, 0.8)',
+ showSpinner: true,
+ color: '#c23531',
+ spinnerRadius: 10,
+ lineWidth: 5,
zlevel: 0
});
+ var group = new graphic.Group();
var mask = new graphic.Rect({
style: {
fill: opts.maskColor
},
zlevel: opts.zlevel,
z: 10000
});
- var arc = new graphic.Arc({
- shape: {
- startAngle: -PI / 2,
- endAngle: -PI / 2 + 0.1,
- r: 10
- },
- style: {
- stroke: opts.color,
- lineCap: 'round',
- lineWidth: 5
- },
- zlevel: opts.zlevel,
- z: 10001
- });
+ group.add(mask);
+ var font = opts.fontSize + ' sans-serif';
var labelRect = new graphic.Rect({
style: {
fill: 'none',
text: opts.text,
+ font: font,
textPosition: 'right',
textDistance: 10,
textFill: opts.textColor
},
zlevel: opts.zlevel,
z: 10001
});
-
- arc.animateShape(true)
- .when(1000, {
- endAngle: PI * 3 / 2
- })
- .start('circularInOut');
- arc.animateShape(true)
- .when(1000, {
- startAngle: PI * 3 / 2
- })
- .delay(300)
- .start('circularInOut');
-
- var group = new graphic.Group();
- group.add(arc);
group.add(labelRect);
- group.add(mask);
+ if (opts.showSpinner) {
+ var arc = new graphic.Arc({
+ shape: {
+ startAngle: -PI / 2,
+ endAngle: -PI / 2 + 0.1,
+ r: opts.spinnerRadius
+ },
+ style: {
+ stroke: opts.color,
+ lineCap: 'round',
+ lineWidth: opts.lineWidth
+ },
+ zlevel: opts.zlevel,
+ z: 10001
+ });
+ arc.animateShape(true)
+ .when(1000, {
+ endAngle: PI * 3 / 2
+ })
+ .start('circularInOut');
+ arc.animateShape(true)
+ .when(1000, {
+ startAngle: PI * 3 / 2
+ })
+ .delay(300)
+ .start('circularInOut');
+ group.add(arc);
+ }
// Inject resize
group.resize = function () {
- var cx = api.getWidth() / 2;
+ var textWidth = textContain.getWidth(opts.text, font);
+ var r = opts.showSpinner ? arc.shape.r : 0;
+ // cx = (containerWidth - (arcDiameter + labelRectWidth) - textDistance - textWidth) / 2
+ // textDistance needs to be calculated when both animation and text exist
+ var cx = (api.getWidth() - r * 4 - (opts.showSpinner && textWidth ? 10 : 0) - textWidth) / 2
Review comment:
Why it's `r * 4` instead of `r * 2`?
----------------------------------------------------------------
This is an automated message from the Apache Git Service.
To respond to the message, please log on to GitHub and use the
URL above to go to the specific comment.
For queries about this service, please contact Infrastructure at:
users@infra.apache.org
With regards,
Apache Git Services
---------------------------------------------------------------------
To unsubscribe, e-mail: commits-unsubscribe@echarts.apache.org
For additional commands, e-mail: commits-help@echarts.apache.org
[GitHub] [incubator-echarts] pissang commented on a change in pull request
#12414: showLoading align center
Posted by GitBox <gi...@apache.org>.
pissang commented on a change in pull request #12414: showLoading align center
URL: https://github.com/apache/incubator-echarts/pull/12414#discussion_r406758576
##########
File path: src/loading/default.js
##########
@@ -34,69 +35,80 @@ export default function (api, opts) {
opts = opts || {};
zrUtil.defaults(opts, {
text: 'loading',
- color: '#c23531',
textColor: '#000',
+ fontSize: '12px',
maskColor: 'rgba(255, 255, 255, 0.8)',
+ showAnimation: true,
+ color: '#c23531',
+ arcRadius: 10,
+ lineWidth: 5,
Review comment:
`spinnerRadius`?
----------------------------------------------------------------
This is an automated message from the Apache Git Service.
To respond to the message, please log on to GitHub and use the
URL above to go to the specific comment.
For queries about this service, please contact Infrastructure at:
users@infra.apache.org
With regards,
Apache Git Services
---------------------------------------------------------------------
To unsubscribe, e-mail: commits-unsubscribe@echarts.apache.org
For additional commands, e-mail: commits-help@echarts.apache.org
[GitHub] [incubator-echarts] pissang commented on a change in pull request
#12414: showLoading align center
Posted by GitBox <gi...@apache.org>.
pissang commented on a change in pull request #12414: showLoading align center
URL: https://github.com/apache/incubator-echarts/pull/12414#discussion_r406760113
##########
File path: test/runTest/actions/loading.json
##########
@@ -0,0 +1 @@
+[{"name":"Action 1","ops":[],"scrollY":0,"scrollX":0,"timestamp":1586513969778},{"name":"Action 2","ops":[],"scrollY":502,"scrollX":0,"timestamp":1586514012325}]
Review comment:
It seems there is nothing in the action. Please remove it.
----------------------------------------------------------------
This is an automated message from the Apache Git Service.
To respond to the message, please log on to GitHub and use the
URL above to go to the specific comment.
For queries about this service, please contact Infrastructure at:
users@infra.apache.org
With regards,
Apache Git Services
---------------------------------------------------------------------
To unsubscribe, e-mail: commits-unsubscribe@echarts.apache.org
For additional commands, e-mail: commits-help@echarts.apache.org
[GitHub] [incubator-echarts] pissang commented on a change in pull request
#12414: showLoading align center
Posted by GitBox <gi...@apache.org>.
pissang commented on a change in pull request #12414: showLoading align center
URL: https://github.com/apache/incubator-echarts/pull/12414#discussion_r406757917
##########
File path: src/loading/default.js
##########
@@ -34,69 +35,80 @@ export default function (api, opts) {
opts = opts || {};
zrUtil.defaults(opts, {
text: 'loading',
- color: '#c23531',
textColor: '#000',
+ fontSize: '12px',
maskColor: 'rgba(255, 255, 255, 0.8)',
+ showAnimation: true,
+ color: '#c23531',
Review comment:
Perhaps the name is better to be `showSpinner`?
----------------------------------------------------------------
This is an automated message from the Apache Git Service.
To respond to the message, please log on to GitHub and use the
URL above to go to the specific comment.
For queries about this service, please contact Infrastructure at:
users@infra.apache.org
With regards,
Apache Git Services
---------------------------------------------------------------------
To unsubscribe, e-mail: commits-unsubscribe@echarts.apache.org
For additional commands, e-mail: commits-help@echarts.apache.org
[GitHub] [incubator-echarts] pissang merged pull request #12414: showLoading
align center
Posted by GitBox <gi...@apache.org>.
pissang merged pull request #12414: showLoading align center
URL: https://github.com/apache/incubator-echarts/pull/12414
----------------------------------------------------------------
This is an automated message from the Apache Git Service.
To respond to the message, please log on to GitHub and use the
URL above to go to the specific comment.
For queries about this service, please contact Infrastructure at:
users@infra.apache.org
With regards,
Apache Git Services
---------------------------------------------------------------------
To unsubscribe, e-mail: commits-unsubscribe@echarts.apache.org
For additional commands, e-mail: commits-help@echarts.apache.org
[GitHub] [incubator-echarts] echarts-bot[bot] commented on issue #12414:
showLoading align center
Posted by GitBox <gi...@apache.org>.
echarts-bot[bot] commented on issue #12414: showLoading align center
URL: https://github.com/apache/incubator-echarts/pull/12414#issuecomment-613768769
Congratulations! Your PR has been merged. Thanks for your contribution! 👍
----------------------------------------------------------------
This is an automated message from the Apache Git Service.
To respond to the message, please log on to GitHub and use the
URL above to go to the specific comment.
For queries about this service, please contact Infrastructure at:
users@infra.apache.org
With regards,
Apache Git Services
---------------------------------------------------------------------
To unsubscribe, e-mail: commits-unsubscribe@echarts.apache.org
For additional commands, e-mail: commits-help@echarts.apache.org
[GitHub] [incubator-echarts] pissang commented on a change in pull request
#12414: showLoading align center
Posted by GitBox <gi...@apache.org>.
pissang commented on a change in pull request #12414: showLoading align center
URL: https://github.com/apache/incubator-echarts/pull/12414#discussion_r407025476
##########
File path: src/loading/default.js
##########
@@ -34,69 +35,80 @@ export default function (api, opts) {
opts = opts || {};
zrUtil.defaults(opts, {
text: 'loading',
- color: '#c23531',
textColor: '#000',
+ fontSize: '12px',
maskColor: 'rgba(255, 255, 255, 0.8)',
+ showSpinner: true,
+ color: '#c23531',
+ spinnerRadius: 10,
+ lineWidth: 5,
zlevel: 0
});
+ var group = new graphic.Group();
var mask = new graphic.Rect({
style: {
fill: opts.maskColor
},
zlevel: opts.zlevel,
z: 10000
});
- var arc = new graphic.Arc({
- shape: {
- startAngle: -PI / 2,
- endAngle: -PI / 2 + 0.1,
- r: 10
- },
- style: {
- stroke: opts.color,
- lineCap: 'round',
- lineWidth: 5
- },
- zlevel: opts.zlevel,
- z: 10001
- });
+ group.add(mask);
+ var font = opts.fontSize + ' sans-serif';
var labelRect = new graphic.Rect({
style: {
fill: 'none',
text: opts.text,
+ font: font,
textPosition: 'right',
textDistance: 10,
textFill: opts.textColor
},
zlevel: opts.zlevel,
z: 10001
});
-
- arc.animateShape(true)
- .when(1000, {
- endAngle: PI * 3 / 2
- })
- .start('circularInOut');
- arc.animateShape(true)
- .when(1000, {
- startAngle: PI * 3 / 2
- })
- .delay(300)
- .start('circularInOut');
-
- var group = new graphic.Group();
- group.add(arc);
group.add(labelRect);
- group.add(mask);
+ if (opts.showSpinner) {
+ var arc = new graphic.Arc({
+ shape: {
+ startAngle: -PI / 2,
+ endAngle: -PI / 2 + 0.1,
+ r: opts.spinnerRadius
+ },
+ style: {
+ stroke: opts.color,
+ lineCap: 'round',
+ lineWidth: opts.lineWidth
+ },
+ zlevel: opts.zlevel,
+ z: 10001
+ });
+ arc.animateShape(true)
+ .when(1000, {
+ endAngle: PI * 3 / 2
+ })
+ .start('circularInOut');
+ arc.animateShape(true)
+ .when(1000, {
+ startAngle: PI * 3 / 2
+ })
+ .delay(300)
+ .start('circularInOut');
+ group.add(arc);
+ }
// Inject resize
group.resize = function () {
- var cx = api.getWidth() / 2;
+ var textWidth = textContain.getWidth(opts.text, font);
+ var r = opts.showSpinner ? arc.shape.r : 0;
+ // cx = (containerWidth - (arcDiameter + labelRectWidth) - textDistance - textWidth) / 2
Review comment:
arc is in the scope of `if (opts.showSpinner)` above. It should not been accessed here. Consider it's a `let` instead of `var`
----------------------------------------------------------------
This is an automated message from the Apache Git Service.
To respond to the message, please log on to GitHub and use the
URL above to go to the specific comment.
For queries about this service, please contact Infrastructure at:
users@infra.apache.org
With regards,
Apache Git Services
---------------------------------------------------------------------
To unsubscribe, e-mail: commits-unsubscribe@echarts.apache.org
For additional commands, e-mail: commits-help@echarts.apache.org
[GitHub] [incubator-echarts] yufeng04 commented on a change in pull request
#12414: showLoading align center
Posted by GitBox <gi...@apache.org>.
yufeng04 commented on a change in pull request #12414: showLoading align center
URL: https://github.com/apache/incubator-echarts/pull/12414#discussion_r407286066
##########
File path: src/loading/default.js
##########
@@ -34,69 +35,80 @@ export default function (api, opts) {
opts = opts || {};
zrUtil.defaults(opts, {
text: 'loading',
- color: '#c23531',
textColor: '#000',
+ fontSize: '12px',
maskColor: 'rgba(255, 255, 255, 0.8)',
+ showSpinner: true,
+ color: '#c23531',
+ spinnerRadius: 10,
+ lineWidth: 5,
zlevel: 0
});
+ var group = new graphic.Group();
var mask = new graphic.Rect({
style: {
fill: opts.maskColor
},
zlevel: opts.zlevel,
z: 10000
});
- var arc = new graphic.Arc({
- shape: {
- startAngle: -PI / 2,
- endAngle: -PI / 2 + 0.1,
- r: 10
- },
- style: {
- stroke: opts.color,
- lineCap: 'round',
- lineWidth: 5
- },
- zlevel: opts.zlevel,
- z: 10001
- });
+ group.add(mask);
+ var font = opts.fontSize + ' sans-serif';
var labelRect = new graphic.Rect({
style: {
fill: 'none',
text: opts.text,
+ font: font,
textPosition: 'right',
textDistance: 10,
textFill: opts.textColor
},
zlevel: opts.zlevel,
z: 10001
});
-
- arc.animateShape(true)
- .when(1000, {
- endAngle: PI * 3 / 2
- })
- .start('circularInOut');
- arc.animateShape(true)
- .when(1000, {
- startAngle: PI * 3 / 2
- })
- .delay(300)
- .start('circularInOut');
-
- var group = new graphic.Group();
- group.add(arc);
group.add(labelRect);
- group.add(mask);
+ if (opts.showSpinner) {
+ var arc = new graphic.Arc({
+ shape: {
+ startAngle: -PI / 2,
+ endAngle: -PI / 2 + 0.1,
+ r: opts.spinnerRadius
+ },
+ style: {
+ stroke: opts.color,
+ lineCap: 'round',
+ lineWidth: opts.lineWidth
+ },
+ zlevel: opts.zlevel,
+ z: 10001
+ });
+ arc.animateShape(true)
+ .when(1000, {
+ endAngle: PI * 3 / 2
+ })
+ .start('circularInOut');
+ arc.animateShape(true)
+ .when(1000, {
+ startAngle: PI * 3 / 2
+ })
+ .delay(300)
+ .start('circularInOut');
+ group.add(arc);
+ }
// Inject resize
group.resize = function () {
- var cx = api.getWidth() / 2;
+ var textWidth = textContain.getWidth(opts.text, font);
+ var r = opts.showSpinner ? arc.shape.r : 0;
+ // cx = (containerWidth - (arcDiameter + labelRectWidth) - textDistance - textWidth) / 2
+ // textDistance needs to be calculated when both animation and text exist
+ var cx = (api.getWidth() - r * 4 - (opts.showSpinner && textWidth ? 10 : 0) - textWidth) / 2
Review comment:
`4 * r === arcDiameter + labelRectWidth`
1. the diameter of spinner is 2*r
2. `labelRect.setShape({..., width: r * 2, ...})`
----------------------------------------------------------------
This is an automated message from the Apache Git Service.
To respond to the message, please log on to GitHub and use the
URL above to go to the specific comment.
For queries about this service, please contact Infrastructure at:
users@infra.apache.org
With regards,
Apache Git Services
---------------------------------------------------------------------
To unsubscribe, e-mail: commits-unsubscribe@echarts.apache.org
For additional commands, e-mail: commits-help@echarts.apache.org