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 2021/02/04 16:12:37 UTC
[GitHub] [echarts] susiwen8 opened a new pull request #14214: Fix(tooltip): width and overflow not working
susiwen8 opened a new pull request #14214:
URL: https://github.com/apache/echarts/pull/14214
<!-- Please fill in the following information to help us review your PR more efficiently. -->
## Brief Information
This pull request is in the type of:
- [x] bug fixing
- [ ] new feature
- [ ] others
### What does this PR do?
Add back missing `tooltip` opotions
### Fixed issues
Close #14211
## Details
### Before: What was the problem?
<img width="254" alt="Screen Shot 2021-02-05 at 00 10 41" src="https://user-images.githubusercontent.com/20318608/106921074-9af43780-6746-11eb-8803-7418759f3509.png">
<img width="117" alt="Screen Shot 2021-02-05 at 00 09 57" src="https://user-images.githubusercontent.com/20318608/106921105-a182af00-6746-11eb-8cf7-5c879565f75e.png">
### After: How is it fixed in this PR?
## 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
---------------------------------------------------------------------
To unsubscribe, e-mail: commits-unsubscribe@echarts.apache.org
For additional commands, e-mail: commits-help@echarts.apache.org
[GitHub] [echarts] plainheart commented on a change in pull request #14214: Fix(tooltip): width and overflow not working
Posted by GitBox <gi...@apache.org>.
plainheart commented on a change in pull request #14214:
URL: https://github.com/apache/echarts/pull/14214#discussion_r570666053
##########
File path: src/util/types.ts
##########
@@ -1345,6 +1345,8 @@ export interface CommonTooltipOption<FormatterParams> {
// Available when renderMode is html
decoration?: string
+ overflow?: 'none' | 'truncate' | 'break' | 'breakAll'
+ ellipsis?: string
Review comment:
The type definitions for `overflow` and `ellipsis` here are inappropriate and seems redundant. We can pick the `overflow` property from `LabelOption`. As for the `ellipsis` and `lineOverflow`, they can also be picked from the `TextStyleProps` in zrender. I think they are just missing in `LabelOption`. We should add them.
```ts
export interface LabelOption extends TextCommonOption {
overflow?: TextStyleProps['overflow']
ellipsis?: TextStyleProps['ellipsis']
lineOverflow?: TextStyleProps['lineOverflow']
}
```
Then add support for `ellipsis` after https://github.com/apache/echarts/blob/master/src/label/labelStyle.ts#L416-L419
```ts
const ellipsis = textStyleModel.get('ellipsis');
if (ellipsis) {
textStyle.ellipsis = ellipsis;
}
const lineOverflow = textStyleModel.get('lineOverflow');
if (lineOverflow) {
textStyle.lineOverflow = lineOverflow;
}
```
But there is a TODO
https://github.com/ecomfe/zrender/blob/master/src/graphic/helper/parseText.ts#L206-L213
So `lineOverflow: truncate` won't be truncated by `ellipsis` characters. We can fix it later.
Besides, `lineOverflow` may not be working in HTML rendering mode.
----------------------------------------------------------------
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
---------------------------------------------------------------------
To unsubscribe, e-mail: commits-unsubscribe@echarts.apache.org
For additional commands, e-mail: commits-help@echarts.apache.org
[GitHub] [echarts] echarts-bot[bot] commented on pull request #14214: Fix(tooltip): width and overflow not working
Posted by GitBox <gi...@apache.org>.
echarts-bot[bot] commented on pull request #14214:
URL: https://github.com/apache/echarts/pull/14214#issuecomment-773424679
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
---------------------------------------------------------------------
To unsubscribe, e-mail: commits-unsubscribe@echarts.apache.org
For additional commands, e-mail: commits-help@echarts.apache.org
[GitHub] [echarts] pissang commented on a change in pull request #14214: Fix(tooltip): width and overflow not working
Posted by GitBox <gi...@apache.org>.
pissang commented on a change in pull request #14214:
URL: https://github.com/apache/echarts/pull/14214#discussion_r672012855
##########
File path: src/component/tooltip/TooltipModel.ts
##########
@@ -170,7 +170,8 @@ class TooltipModel extends ComponentModel<TooltipOption> {
},
textStyle: {
color: '#666',
- fontSize: 14
+ fontSize: 14,
+ lineOverflow: 'truncate'
Review comment:
I don't think we should change the default overflow behavior.
--
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.
To unsubscribe, e-mail: commits-unsubscribe@echarts.apache.org
For queries about this service, please contact Infrastructure at:
users@infra.apache.org
---------------------------------------------------------------------
To unsubscribe, e-mail: commits-unsubscribe@echarts.apache.org
For additional commands, e-mail: commits-help@echarts.apache.org
[GitHub] [echarts] pissang commented on a change in pull request #14214: Fix(tooltip): width and overflow not working
Posted by GitBox <gi...@apache.org>.
pissang commented on a change in pull request #14214:
URL: https://github.com/apache/echarts/pull/14214#discussion_r571347295
##########
File path: src/component/tooltip/TooltipHTMLContent.ts
##########
@@ -358,6 +358,34 @@ class TooltipHTMLContent {
+ `border-color: ${nearPointColor};`
+ (tooltipModel.get('extraCssText') || '');
+ const userWidth = tooltipModel.get(['textStyle', 'width']);
+ if (userWidth != null) {
+ el.style.cssText += `;width:${userWidth}px;`;
+ // `text-overflow_string` has very humble compatibility
+ // shttps://caniuse.com/mdn-css_properties_text-overflow_string
+ const ellipsis = tooltipModel.get(['textStyle', 'ellipsis']);
+ const userOverflow = tooltipModel.get(['textStyle', 'overflow']);
+ switch (userOverflow) {
+ case 'truncate':
+ el.style.cssText += ';overflow:hidden;'
+ + `text-overflow:${ellipsis != null ? `\'${ellipsis}\'` : 'ellipsis'};`
+ + 'white-space:nowrap;';
+ break;
+
+ case 'break':
+ el.style.cssText += ';word-break:break-word;white-space:normal;';
+ break;
+
+ case 'breakAll':
+ el.style.cssText += ';word-break:break-all;white-space:normal;';
+ break;
+
+ default:
+ el.style.cssText += '';
+ break;
+ }
+ }
Review comment:
My humble option:
`switch...case...` and `if...else...` has minor performance in most cases. I think they both OK. Code size and readability are the main concerns in this case. I will prefer @plainheart solution. It reduces much redundant strings and is clear enough from my side.
----------------------------------------------------------------
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
---------------------------------------------------------------------
To unsubscribe, e-mail: commits-unsubscribe@echarts.apache.org
For additional commands, e-mail: commits-help@echarts.apache.org
[GitHub] [echarts] susiwen8 commented on a change in pull request #14214: Fix(tooltip): width and overflow not working
Posted by GitBox <gi...@apache.org>.
susiwen8 commented on a change in pull request #14214:
URL: https://github.com/apache/echarts/pull/14214#discussion_r570676878
##########
File path: src/util/types.ts
##########
@@ -1345,6 +1345,8 @@ export interface CommonTooltipOption<FormatterParams> {
// Available when renderMode is html
decoration?: string
+ overflow?: 'none' | 'truncate' | 'break' | 'breakAll'
+ ellipsis?: string
Review comment:
@plainheart Thanks, I will change it later.
----------------------------------------------------------------
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
---------------------------------------------------------------------
To unsubscribe, e-mail: commits-unsubscribe@echarts.apache.org
For additional commands, e-mail: commits-help@echarts.apache.org
[GitHub] [echarts] plainheart commented on a change in pull request #14214: Fix(tooltip): width and overflow not working
Posted by GitBox <gi...@apache.org>.
plainheart commented on a change in pull request #14214:
URL: https://github.com/apache/echarts/pull/14214#discussion_r570666229
##########
File path: src/component/tooltip/TooltipRichContent.ts
##########
@@ -106,7 +106,10 @@ class TooltipRichContent {
fill: tooltipModel.get(['textStyle', 'color']),
padding: getPaddingFromTooltipModel(tooltipModel, 'richText'),
verticalAlign: 'top',
- align: 'left'
+ align: 'left',
+ width: +tooltipModel.get(['textStyle', 'width']) || null,
Review comment:
`height` should also be specified.
##########
File path: src/component/tooltip/TooltipRichContent.ts
##########
@@ -106,7 +106,10 @@ class TooltipRichContent {
fill: tooltipModel.get(['textStyle', 'color']),
padding: getPaddingFromTooltipModel(tooltipModel, 'richText'),
verticalAlign: 'top',
- align: 'left'
+ align: 'left',
+ width: +tooltipModel.get(['textStyle', 'width']) || null,
+ overflow: tooltipModel.get(['textStyle', 'overflow']),
+ ellipsis: tooltipModel.get(['textStyle', 'ellipsis'])
Review comment:
`lineOverflow` needs to be added.
##########
File path: src/util/types.ts
##########
@@ -1345,6 +1345,8 @@ export interface CommonTooltipOption<FormatterParams> {
// Available when renderMode is html
decoration?: string
+ overflow?: 'none' | 'truncate' | 'break' | 'breakAll'
+ ellipsis?: string
Review comment:
The type definitions for `overflow` and `ellipsis` here are inappropriate and seems redundant. We can pick the `overflow` property from `LabelOption`. As for the `ellipsis` and `lineOverflow`, they can also be picked from the `TextStyleProps` in zrender. I think they are just missing in `LabelOption`. We should add them.
```ts
export interface LabelOption extends TextCommonOption {
overflow?: TextStyleProps['overflow']
ellipsis?: TextStyleProps['ellipsis']
lineOverflow?: TextStyleProps['lineOverflow']
}
```
Then add support for `ellipsis` after https://github.com/apache/echarts/blob/master/src/label/labelStyle.ts#L416-L419
```ts
const ellipsis = textStyleModel.get('ellipsis');
if (ellipsis) {
textStyle.ellipsis = ellipsis;
}
const lineOverflow = textStyleModel.get('lineOverflow');
if (lineOverflow) {
textStyle.lineOverflow = lineOverflow;
}
```
But there is a TODO
https://github.com/ecomfe/zrender/blob/master/src/graphic/helper/parseText.ts#L206-L213
So `lineOverflow: truncate` won't be truncated by `ellipsis` characters. We can fix it later.
##########
File path: src/component/tooltip/TooltipHTMLContent.ts
##########
@@ -358,6 +358,34 @@ class TooltipHTMLContent {
+ `border-color: ${nearPointColor};`
+ (tooltipModel.get('extraCssText') || '');
+ const userWidth = tooltipModel.get(['textStyle', 'width']);
+ if (userWidth != null) {
+ el.style.cssText += `;width:${userWidth}px;`;
+ // `text-overflow_string` has very humble compatibility
+ // shttps://caniuse.com/mdn-css_properties_text-overflow_string
+ const ellipsis = tooltipModel.get(['textStyle', 'ellipsis']);
+ const userOverflow = tooltipModel.get(['textStyle', 'overflow']);
+ switch (userOverflow) {
+ case 'truncate':
+ el.style.cssText += ';overflow:hidden;'
+ + `text-overflow:${ellipsis != null ? `\'${ellipsis}\'` : 'ellipsis'};`
+ + 'white-space:nowrap;';
+ break;
+
+ case 'break':
+ el.style.cssText += ';word-break:break-word;white-space:normal;';
+ break;
+
+ case 'breakAll':
+ el.style.cssText += ';word-break:break-all;white-space:normal;';
+ break;
+
+ default:
+ el.style.cssText += '';
+ break;
+ }
+ }
Review comment:
I'm thinking this logic can be simplified a bit. Just FYI.
```js
const ellipsis = retrieve(tooltipModel.get(['textStyle', 'ellipsis']), 'ellipsis');
const userOverflow = tooltipModel.get(['textStyle', 'overflow']);
if (userOverflow) {
let overflowStyle;
if (userOverflow === 'truncate') {
overflowStyle = `overflow:hidden;text-overflow:${ellipsis};white-space:nowrap;`
}
else {
const breakMode = userOverflow === 'break'
? 'break-word'
: userOverflow === 'breakAll'
? 'break-all' : '';
breakMode && (overflowStyle = `word-break:${breakMode};white-space:normal;`);
}
el.style.cssText += overflowStyle;
}
```
##########
File path: src/component/tooltip/TooltipHTMLContent.ts
##########
@@ -358,6 +358,34 @@ class TooltipHTMLContent {
+ `border-color: ${nearPointColor};`
+ (tooltipModel.get('extraCssText') || '');
+ const userWidth = tooltipModel.get(['textStyle', 'width']);
+ if (userWidth != null) {
+ el.style.cssText += `;width:${userWidth}px;`;
+ // `text-overflow_string` has very humble compatibility
+ // shttps://caniuse.com/mdn-css_properties_text-overflow_string
+ const ellipsis = tooltipModel.get(['textStyle', 'ellipsis']);
+ const userOverflow = tooltipModel.get(['textStyle', 'overflow']);
+ switch (userOverflow) {
+ case 'truncate':
+ el.style.cssText += ';overflow:hidden;'
+ + `text-overflow:${ellipsis != null ? `\'${ellipsis}\'` : 'ellipsis'};`
+ + 'white-space:nowrap;';
+ break;
+
+ case 'break':
+ el.style.cssText += ';word-break:break-word;white-space:normal;';
+ break;
+
+ case 'breakAll':
+ el.style.cssText += ';word-break:break-all;white-space:normal;';
+ break;
+
+ default:
+ el.style.cssText += '';
+ break;
+ }
+ }
Review comment:
I'm thinking this logic can be simplified a bit. Just FYI.
```js
const ellipsis = retrieve(tooltipModel.get(['textStyle', 'ellipsis']), 'ellipsis');
const userOverflow = tooltipModel.get(['textStyle', 'overflow']);
if (userOverflow) {
let overflowStyle = '';
if (userOverflow === 'truncate') {
overflowStyle = `overflow:hidden;text-overflow:${ellipsis};white-space:nowrap;`
}
else {
const breakMode = userOverflow === 'break'
? 'break-word'
: userOverflow === 'breakAll'
? 'break-all' : '';
breakMode && (overflowStyle = `word-break:${breakMode};white-space:normal;`);
}
el.style.cssText += overflowStyle;
}
```
##########
File path: src/util/types.ts
##########
@@ -1345,6 +1345,8 @@ export interface CommonTooltipOption<FormatterParams> {
// Available when renderMode is html
decoration?: string
+ overflow?: 'none' | 'truncate' | 'break' | 'breakAll'
+ ellipsis?: string
Review comment:
The type definitions for `overflow` and `ellipsis` here are inappropriate and seems redundant. We can pick the `overflow` property from `LabelOption`. As for the `ellipsis` and `lineOverflow`, they can also be picked from the `TextStyleProps` in zrender. I think they are just missing in `LabelOption`. We should add them.
```ts
export interface LabelOption extends TextCommonOption {
overflow?: TextStyleProps['overflow']
ellipsis?: TextStyleProps['ellipsis']
lineOverflow?: TextStyleProps['lineOverflow']
}
```
Then add support for `ellipsis` after https://github.com/apache/echarts/blob/master/src/label/labelStyle.ts#L416-L419
```ts
const ellipsis = textStyleModel.get('ellipsis');
if (ellipsis) {
textStyle.ellipsis = ellipsis;
}
const lineOverflow = textStyleModel.get('lineOverflow');
if (lineOverflow) {
textStyle.lineOverflow = lineOverflow;
}
```
But there is a TODO
https://github.com/ecomfe/zrender/blob/master/src/graphic/helper/parseText.ts#L206-L213
So `lineOverflow: truncate` won't be truncated by `ellipsis` characters. We can fix it later.
Besides, `lineOverflow` may not be working in HTML rendering mode.
##########
File path: src/util/types.ts
##########
@@ -1345,6 +1345,8 @@ export interface CommonTooltipOption<FormatterParams> {
// Available when renderMode is html
decoration?: string
+ overflow?: 'none' | 'truncate' | 'break' | 'breakAll'
+ ellipsis?: string
Review comment:
The type definitions for `overflow` and `ellipsis` here are inappropriate and seems redundant. We can pick the `overflow` property from `LabelOption`. As for the `ellipsis` and `lineOverflow`, they can also be picked from the `TextStyleProps` in zrender. I think they are just missing in `LabelOption`. We should add them.
```ts
export interface LabelOption extends TextCommonOption {
overflow?: TextStyleProps['overflow']
ellipsis?: TextStyleProps['ellipsis']
lineOverflow?: TextStyleProps['lineOverflow']
}
```
Then add support for `ellipsis` after https://github.com/apache/echarts/blob/master/src/label/labelStyle.ts#L416-L419
```ts
const ellipsis = textStyleModel.get('ellipsis');
if (ellipsis) {
textStyle.ellipsis = ellipsis;
}
const lineOverflow = textStyleModel.get('lineOverflow');
if (lineOverflow) {
textStyle.lineOverflow = lineOverflow;
}
```
But there is a TODO
https://github.com/ecomfe/zrender/blob/master/src/graphic/helper/parseText.ts#L206-L213
So `lineOverflow: truncate` won't be truncated by `ellipsis` characters. We can fix it later.
Besides, `lineOverflow` may not be working in HTML rendering mode. Though there is a CSS property `line-clamp`, it is an unsupported WebKit property and it may have poor compatibility in some browsers.
----------------------------------------------------------------
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
---------------------------------------------------------------------
To unsubscribe, e-mail: commits-unsubscribe@echarts.apache.org
For additional commands, e-mail: commits-help@echarts.apache.org
[GitHub] [echarts] pissang commented on a change in pull request #14214: Fix(tooltip): width and overflow not working
Posted by GitBox <gi...@apache.org>.
pissang commented on a change in pull request #14214:
URL: https://github.com/apache/echarts/pull/14214#discussion_r571419673
##########
File path: src/label/labelStyle.ts
##########
@@ -421,6 +421,14 @@ function setTextStyleCommon(
if (margin != null) {
textStyle.margin = margin;
}
+ const ellipsis = textStyleModel.get('ellipsis');
+ if (ellipsis) {
+ textStyle.ellipsis = ellipsis;
+ }
+ const lineOverflow = textStyleModel.get('lineOverflow');
+ if (lineOverflow) {
+ textStyle.lineOverflow = lineOverflow;
Review comment:
Should always set value. Or it can't be restored to default if the `lineOverlow` is changed to null
##########
File path: src/component/tooltip/TooltipRichContent.ts
##########
@@ -106,7 +106,12 @@ class TooltipRichContent {
fill: tooltipModel.get(['textStyle', 'color']),
padding: getPaddingFromTooltipModel(tooltipModel, 'richText'),
verticalAlign: 'top',
- align: 'left'
+ align: 'left',
+ width: +tooltipModel.get(['textStyle', 'width']) || null,
+ height: +tooltipModel.get(['textStyle', 'height']) || null,
+ overflow: tooltipModel.get(['textStyle', 'overflow']),
+ ellipsis: tooltipModel.get(['textStyle', 'ellipsis']),
+ lineOverflow: tooltipModel.get(['textStyle', 'lineOverflow'])
Review comment:
Should get a `textStyleModel` if it's used frequently
```ts
const textStyleModel = tooltipModel.getModel('textStyle');
```
----------------------------------------------------------------
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
---------------------------------------------------------------------
To unsubscribe, e-mail: commits-unsubscribe@echarts.apache.org
For additional commands, e-mail: commits-help@echarts.apache.org
[GitHub] [echarts] susiwen8 commented on a change in pull request #14214: Fix(tooltip): width and overflow not working
Posted by GitBox <gi...@apache.org>.
susiwen8 commented on a change in pull request #14214:
URL: https://github.com/apache/echarts/pull/14214#discussion_r570967291
##########
File path: src/component/tooltip/TooltipHTMLContent.ts
##########
@@ -358,6 +358,34 @@ class TooltipHTMLContent {
+ `border-color: ${nearPointColor};`
+ (tooltipModel.get('extraCssText') || '');
+ const userWidth = tooltipModel.get(['textStyle', 'width']);
+ if (userWidth != null) {
+ el.style.cssText += `;width:${userWidth}px;`;
+ // `text-overflow_string` has very humble compatibility
+ // shttps://caniuse.com/mdn-css_properties_text-overflow_string
+ const ellipsis = tooltipModel.get(['textStyle', 'ellipsis']);
+ const userOverflow = tooltipModel.get(['textStyle', 'overflow']);
+ switch (userOverflow) {
+ case 'truncate':
+ el.style.cssText += ';overflow:hidden;'
+ + `text-overflow:${ellipsis != null ? `\'${ellipsis}\'` : 'ellipsis'};`
+ + 'white-space:nowrap;';
+ break;
+
+ case 'break':
+ el.style.cssText += ';word-break:break-word;white-space:normal;';
+ break;
+
+ case 'breakAll':
+ el.style.cssText += ';word-break:break-all;white-space:normal;';
+ break;
+
+ default:
+ el.style.cssText += '';
+ break;
+ }
+ }
Review comment:
I have reservation on this, `swtich` makes code more readable when multiple conditional branch, but on the other hand `if else` has better performance. @plainheart
----------------------------------------------------------------
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
---------------------------------------------------------------------
To unsubscribe, e-mail: commits-unsubscribe@echarts.apache.org
For additional commands, e-mail: commits-help@echarts.apache.org
[GitHub] [echarts] susiwen8 commented on pull request #14214: Fix(tooltip): width and overflow not working
Posted by GitBox <gi...@apache.org>.
susiwen8 commented on pull request #14214:
URL: https://github.com/apache/echarts/pull/14214#issuecomment-774388678
@plainheart @pissang Hi, please review 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
---------------------------------------------------------------------
To unsubscribe, e-mail: commits-unsubscribe@echarts.apache.org
For additional commands, e-mail: commits-help@echarts.apache.org
[GitHub] [echarts] susiwen8 closed pull request #14214: Fix(tooltip): width and overflow not working
Posted by GitBox <gi...@apache.org>.
susiwen8 closed pull request #14214:
URL: https://github.com/apache/echarts/pull/14214
--
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.
To unsubscribe, e-mail: commits-unsubscribe@echarts.apache.org
For queries about this service, please contact Infrastructure at:
users@infra.apache.org
---------------------------------------------------------------------
To unsubscribe, e-mail: commits-unsubscribe@echarts.apache.org
For additional commands, e-mail: commits-help@echarts.apache.org
[GitHub] [echarts] plainheart commented on a change in pull request #14214: Fix(tooltip): width and overflow not working
Posted by GitBox <gi...@apache.org>.
plainheart commented on a change in pull request #14214:
URL: https://github.com/apache/echarts/pull/14214#discussion_r570666229
##########
File path: src/component/tooltip/TooltipRichContent.ts
##########
@@ -106,7 +106,10 @@ class TooltipRichContent {
fill: tooltipModel.get(['textStyle', 'color']),
padding: getPaddingFromTooltipModel(tooltipModel, 'richText'),
verticalAlign: 'top',
- align: 'left'
+ align: 'left',
+ width: +tooltipModel.get(['textStyle', 'width']) || null,
Review comment:
`height` should also be specified.
##########
File path: src/component/tooltip/TooltipRichContent.ts
##########
@@ -106,7 +106,10 @@ class TooltipRichContent {
fill: tooltipModel.get(['textStyle', 'color']),
padding: getPaddingFromTooltipModel(tooltipModel, 'richText'),
verticalAlign: 'top',
- align: 'left'
+ align: 'left',
+ width: +tooltipModel.get(['textStyle', 'width']) || null,
+ overflow: tooltipModel.get(['textStyle', 'overflow']),
+ ellipsis: tooltipModel.get(['textStyle', 'ellipsis'])
Review comment:
`lineOverflow` needs to be added.
##########
File path: src/util/types.ts
##########
@@ -1345,6 +1345,8 @@ export interface CommonTooltipOption<FormatterParams> {
// Available when renderMode is html
decoration?: string
+ overflow?: 'none' | 'truncate' | 'break' | 'breakAll'
+ ellipsis?: string
Review comment:
The type definitions for `overflow` and `ellipsis` here are inappropriate and seems redundant. We can pick the `overflow` property from `LabelOption`. As for the `ellipsis` and `lineOverflow`, they can also be picked from the `TextStyleProps` in zrender. I think they are just missing in `LabelOption`. We should add them.
```ts
export interface LabelOption extends TextCommonOption {
overflow?: TextStyleProps['overflow']
ellipsis?: TextStyleProps['ellipsis']
lineOverflow?: TextStyleProps['lineOverflow']
}
```
Then add support for `ellipsis` after https://github.com/apache/echarts/blob/master/src/label/labelStyle.ts#L416-L419
```ts
const ellipsis = textStyleModel.get('ellipsis');
if (ellipsis) {
textStyle.ellipsis = ellipsis;
}
const lineOverflow = textStyleModel.get('lineOverflow');
if (lineOverflow) {
textStyle.lineOverflow = lineOverflow;
}
```
But there is a TODO
https://github.com/ecomfe/zrender/blob/master/src/graphic/helper/parseText.ts#L206-L213
So `lineOverflow: truncate` won't be truncated by `ellipsis` characters. We can fix it later.
----------------------------------------------------------------
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
---------------------------------------------------------------------
To unsubscribe, e-mail: commits-unsubscribe@echarts.apache.org
For additional commands, e-mail: commits-help@echarts.apache.org
[GitHub] [echarts] plainheart commented on a change in pull request #14214: Fix(tooltip): width and overflow not working
Posted by GitBox <gi...@apache.org>.
plainheart commented on a change in pull request #14214:
URL: https://github.com/apache/echarts/pull/14214#discussion_r570672303
##########
File path: src/component/tooltip/TooltipHTMLContent.ts
##########
@@ -358,6 +358,34 @@ class TooltipHTMLContent {
+ `border-color: ${nearPointColor};`
+ (tooltipModel.get('extraCssText') || '');
+ const userWidth = tooltipModel.get(['textStyle', 'width']);
+ if (userWidth != null) {
+ el.style.cssText += `;width:${userWidth}px;`;
+ // `text-overflow_string` has very humble compatibility
+ // shttps://caniuse.com/mdn-css_properties_text-overflow_string
+ const ellipsis = tooltipModel.get(['textStyle', 'ellipsis']);
+ const userOverflow = tooltipModel.get(['textStyle', 'overflow']);
+ switch (userOverflow) {
+ case 'truncate':
+ el.style.cssText += ';overflow:hidden;'
+ + `text-overflow:${ellipsis != null ? `\'${ellipsis}\'` : 'ellipsis'};`
+ + 'white-space:nowrap;';
+ break;
+
+ case 'break':
+ el.style.cssText += ';word-break:break-word;white-space:normal;';
+ break;
+
+ case 'breakAll':
+ el.style.cssText += ';word-break:break-all;white-space:normal;';
+ break;
+
+ default:
+ el.style.cssText += '';
+ break;
+ }
+ }
Review comment:
I'm thinking this logic can be simplified a bit. Just FYI.
```js
const ellipsis = retrieve(tooltipModel.get(['textStyle', 'ellipsis']), 'ellipsis');
const userOverflow = tooltipModel.get(['textStyle', 'overflow']);
if (userOverflow) {
let overflowStyle;
if (userOverflow === 'truncate') {
overflowStyle = `overflow:hidden;text-overflow:${ellipsis};white-space:nowrap;`
}
else {
const breakMode = userOverflow === 'break'
? 'break-word'
: userOverflow === 'breakAll'
? 'break-all' : '';
breakMode && (overflowStyle = `word-break:${breakMode};white-space:normal;`);
}
el.style.cssText += overflowStyle;
}
```
----------------------------------------------------------------
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
---------------------------------------------------------------------
To unsubscribe, e-mail: commits-unsubscribe@echarts.apache.org
For additional commands, e-mail: commits-help@echarts.apache.org
[GitHub] [echarts] susiwen8 commented on a change in pull request #14214: Fix(tooltip): width and overflow not working
Posted by GitBox <gi...@apache.org>.
susiwen8 commented on a change in pull request #14214:
URL: https://github.com/apache/echarts/pull/14214#discussion_r571529649
##########
File path: src/component/tooltip/TooltipRichContent.ts
##########
@@ -90,7 +90,7 @@ class TooltipRichContent {
style: {
rich: markupStyleCreator.richTextStyles,
text: content as string,
- lineHeight: 22,
+ lineHeight: +tooltipModel.get(['textStyle', 'lineHeight']) || 22,
Review comment:
Done
----------------------------------------------------------------
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
---------------------------------------------------------------------
To unsubscribe, e-mail: commits-unsubscribe@echarts.apache.org
For additional commands, e-mail: commits-help@echarts.apache.org
[GitHub] [echarts] susiwen8 commented on a change in pull request #14214: Fix(tooltip): width and overflow not working
Posted by GitBox <gi...@apache.org>.
susiwen8 commented on a change in pull request #14214:
URL: https://github.com/apache/echarts/pull/14214#discussion_r570676878
##########
File path: src/util/types.ts
##########
@@ -1345,6 +1345,8 @@ export interface CommonTooltipOption<FormatterParams> {
// Available when renderMode is html
decoration?: string
+ overflow?: 'none' | 'truncate' | 'break' | 'breakAll'
+ ellipsis?: string
Review comment:
@plainheart Thanks, I will change it later.
----------------------------------------------------------------
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
---------------------------------------------------------------------
To unsubscribe, e-mail: commits-unsubscribe@echarts.apache.org
For additional commands, e-mail: commits-help@echarts.apache.org
[GitHub] [echarts] susiwen8 commented on pull request #14214: Fix(tooltip): width and overflow not working
Posted by GitBox <gi...@apache.org>.
susiwen8 commented on pull request #14214:
URL: https://github.com/apache/echarts/pull/14214#issuecomment-774034086
@plainheart Hi, Could you take a look again.
----------------------------------------------------------------
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
---------------------------------------------------------------------
To unsubscribe, e-mail: commits-unsubscribe@echarts.apache.org
For additional commands, e-mail: commits-help@echarts.apache.org
[GitHub] [echarts] plainheart commented on a change in pull request #14214: Fix(tooltip): width and overflow not working
Posted by GitBox <gi...@apache.org>.
plainheart commented on a change in pull request #14214:
URL: https://github.com/apache/echarts/pull/14214#discussion_r571339080
##########
File path: src/component/tooltip/TooltipHTMLContent.ts
##########
@@ -358,6 +358,34 @@ class TooltipHTMLContent {
+ `border-color: ${nearPointColor};`
+ (tooltipModel.get('extraCssText') || '');
+ const userWidth = tooltipModel.get(['textStyle', 'width']);
+ if (userWidth != null) {
+ el.style.cssText += `;width:${userWidth}px;`;
+ // `text-overflow_string` has very humble compatibility
+ // shttps://caniuse.com/mdn-css_properties_text-overflow_string
+ const ellipsis = tooltipModel.get(['textStyle', 'ellipsis']);
+ const userOverflow = tooltipModel.get(['textStyle', 'overflow']);
+ switch (userOverflow) {
+ case 'truncate':
+ el.style.cssText += ';overflow:hidden;'
+ + `text-overflow:${ellipsis != null ? `\'${ellipsis}\'` : 'ellipsis'};`
+ + 'white-space:nowrap;';
+ break;
+
+ case 'break':
+ el.style.cssText += ';word-break:break-word;white-space:normal;';
+ break;
+
+ case 'breakAll':
+ el.style.cssText += ';word-break:break-all;white-space:normal;';
+ break;
+
+ default:
+ el.style.cssText += '';
+ break;
+ }
+ }
Review comment:
I can understand it. The reason for the proposal is just for reducing the minimized code size by merging some conditions. Sure, except for that, we can also make the switch simpler.
----------------------------------------------------------------
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
---------------------------------------------------------------------
To unsubscribe, e-mail: commits-unsubscribe@echarts.apache.org
For additional commands, e-mail: commits-help@echarts.apache.org
[GitHub] [echarts] susiwen8 commented on a change in pull request #14214: Fix(tooltip): width and overflow not working
Posted by GitBox <gi...@apache.org>.
susiwen8 commented on a change in pull request #14214:
URL: https://github.com/apache/echarts/pull/14214#discussion_r571430735
##########
File path: src/label/labelStyle.ts
##########
@@ -421,6 +421,11 @@ function setTextStyleCommon(
if (margin != null) {
textStyle.margin = margin;
}
+ const ellipsis = textStyleModel.get('ellipsis');
+ if (ellipsis) {
+ textStyle.ellipsis = ellipsis;
+ }
+ textStyle.lineOverflow = textStyleModel.get('lineOverflow') || 'truncate';
Review comment:
Done
----------------------------------------------------------------
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
---------------------------------------------------------------------
To unsubscribe, e-mail: commits-unsubscribe@echarts.apache.org
For additional commands, e-mail: commits-help@echarts.apache.org
[GitHub] [echarts] susiwen8 closed pull request #14214: Fix(tooltip): width and overflow not working
Posted by GitBox <gi...@apache.org>.
susiwen8 closed pull request #14214:
URL: https://github.com/apache/echarts/pull/14214
--
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.
To unsubscribe, e-mail: commits-unsubscribe@echarts.apache.org
For queries about this service, please contact Infrastructure at:
users@infra.apache.org
---------------------------------------------------------------------
To unsubscribe, e-mail: commits-unsubscribe@echarts.apache.org
For additional commands, e-mail: commits-help@echarts.apache.org
[GitHub] [echarts] pissang commented on a change in pull request #14214: Fix(tooltip): width and overflow not working
Posted by GitBox <gi...@apache.org>.
pissang commented on a change in pull request #14214:
URL: https://github.com/apache/echarts/pull/14214#discussion_r672014267
##########
File path: src/util/types.ts
##########
@@ -1103,6 +1103,8 @@ export interface LabelOption extends TextCommonOption {
// formatter?: string | ((params: CallbackDataParams) => string)
rich?: Dictionary<TextCommonOption>
+ ellipsis?: TextStyleProps['ellipsis']
Review comment:
`ellipsis` and `lineOverflow` are not supported in the labels. We can't add them to general `LabelOption`
--
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.
To unsubscribe, e-mail: commits-unsubscribe@echarts.apache.org
For queries about this service, please contact Infrastructure at:
users@infra.apache.org
---------------------------------------------------------------------
To unsubscribe, e-mail: commits-unsubscribe@echarts.apache.org
For additional commands, e-mail: commits-help@echarts.apache.org
[GitHub] [echarts] pissang commented on a change in pull request #14214: Fix(tooltip): width and overflow not working
Posted by GitBox <gi...@apache.org>.
pissang commented on a change in pull request #14214:
URL: https://github.com/apache/echarts/pull/14214#discussion_r571419570
##########
File path: src/component/tooltip/TooltipRichContent.ts
##########
@@ -106,7 +106,12 @@ class TooltipRichContent {
fill: tooltipModel.get(['textStyle', 'color']),
padding: getPaddingFromTooltipModel(tooltipModel, 'richText'),
verticalAlign: 'top',
- align: 'left'
+ align: 'left',
+ width: +tooltipModel.get(['textStyle', 'width']) || null,
+ height: +tooltipModel.get(['textStyle', 'height']) || null,
+ overflow: tooltipModel.get(['textStyle', 'overflow']),
+ ellipsis: tooltipModel.get(['textStyle', 'ellipsis']),
+ lineOverflow: tooltipModel.get(['textStyle', 'lineOverflow'])
Review comment:
Should use a `textStyleModel` if it's used frequently
```ts
const textStyleModel = tooltipModel.getModel('textStyle');
```
----------------------------------------------------------------
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
---------------------------------------------------------------------
To unsubscribe, e-mail: commits-unsubscribe@echarts.apache.org
For additional commands, e-mail: commits-help@echarts.apache.org
[GitHub] [echarts] plainheart commented on a change in pull request #14214: Fix(tooltip): width and overflow not working
Posted by GitBox <gi...@apache.org>.
plainheart commented on a change in pull request #14214:
URL: https://github.com/apache/echarts/pull/14214#discussion_r570672303
##########
File path: src/component/tooltip/TooltipHTMLContent.ts
##########
@@ -358,6 +358,34 @@ class TooltipHTMLContent {
+ `border-color: ${nearPointColor};`
+ (tooltipModel.get('extraCssText') || '');
+ const userWidth = tooltipModel.get(['textStyle', 'width']);
+ if (userWidth != null) {
+ el.style.cssText += `;width:${userWidth}px;`;
+ // `text-overflow_string` has very humble compatibility
+ // shttps://caniuse.com/mdn-css_properties_text-overflow_string
+ const ellipsis = tooltipModel.get(['textStyle', 'ellipsis']);
+ const userOverflow = tooltipModel.get(['textStyle', 'overflow']);
+ switch (userOverflow) {
+ case 'truncate':
+ el.style.cssText += ';overflow:hidden;'
+ + `text-overflow:${ellipsis != null ? `\'${ellipsis}\'` : 'ellipsis'};`
+ + 'white-space:nowrap;';
+ break;
+
+ case 'break':
+ el.style.cssText += ';word-break:break-word;white-space:normal;';
+ break;
+
+ case 'breakAll':
+ el.style.cssText += ';word-break:break-all;white-space:normal;';
+ break;
+
+ default:
+ el.style.cssText += '';
+ break;
+ }
+ }
Review comment:
I'm thinking this logic can be simplified a bit. Just FYI.
```js
const ellipsis = retrieve(tooltipModel.get(['textStyle', 'ellipsis']), 'ellipsis');
const userOverflow = tooltipModel.get(['textStyle', 'overflow']);
if (userOverflow) {
let overflowStyle = '';
if (userOverflow === 'truncate') {
overflowStyle = `overflow:hidden;text-overflow:${ellipsis};white-space:nowrap;`
}
else {
const breakMode = userOverflow === 'break'
? 'break-word'
: userOverflow === 'breakAll'
? 'break-all' : '';
breakMode && (overflowStyle = `word-break:${breakMode};white-space:normal;`);
}
el.style.cssText += overflowStyle;
}
```
----------------------------------------------------------------
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
---------------------------------------------------------------------
To unsubscribe, e-mail: commits-unsubscribe@echarts.apache.org
For additional commands, e-mail: commits-help@echarts.apache.org
[GitHub] [echarts] plainheart commented on a change in pull request #14214: Fix(tooltip): width and overflow not working
Posted by GitBox <gi...@apache.org>.
plainheart commented on a change in pull request #14214:
URL: https://github.com/apache/echarts/pull/14214#discussion_r571340473
##########
File path: src/chart/treemap/TreemapSeries.ts
##########
@@ -54,7 +55,7 @@ interface BreadcrumbItemStyleOption extends ItemStyleOption {
}
interface TreemapSeriesLabelOption extends SeriesLabelOption {
- ellipsis?: boolean
+ ellipsis?: TextStyleProps['ellipsis']
Review comment:
This line can be removed since it's now `string` and is the same as the type in its extended `LabelOption`. So `TextStyleProps` doesn't need anymore accordingly.
----------------------------------------------------------------
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
---------------------------------------------------------------------
To unsubscribe, e-mail: commits-unsubscribe@echarts.apache.org
For additional commands, e-mail: commits-help@echarts.apache.org
[GitHub] [echarts] susiwen8 closed pull request #14214: Fix(tooltip): width and overflow not working
Posted by GitBox <gi...@apache.org>.
susiwen8 closed pull request #14214:
URL: https://github.com/apache/echarts/pull/14214
--
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.
To unsubscribe, e-mail: commits-unsubscribe@echarts.apache.org
For queries about this service, please contact Infrastructure at:
users@infra.apache.org
---------------------------------------------------------------------
To unsubscribe, e-mail: commits-unsubscribe@echarts.apache.org
For additional commands, e-mail: commits-help@echarts.apache.org
[GitHub] [echarts] pissang commented on a change in pull request #14214: Fix(tooltip): width and overflow not working
Posted by GitBox <gi...@apache.org>.
pissang commented on a change in pull request #14214:
URL: https://github.com/apache/echarts/pull/14214#discussion_r571429458
##########
File path: src/label/labelStyle.ts
##########
@@ -421,6 +421,11 @@ function setTextStyleCommon(
if (margin != null) {
textStyle.margin = margin;
}
+ const ellipsis = textStyleModel.get('ellipsis');
+ if (ellipsis) {
+ textStyle.ellipsis = ellipsis;
+ }
+ textStyle.lineOverflow = textStyleModel.get('lineOverflow') || 'truncate';
Review comment:
In this way, developers still can't disable it by setting the option to null. We should avoid applying default value in the code. Instead, default value is better to be managed in the `defaultOption`
----------------------------------------------------------------
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
---------------------------------------------------------------------
To unsubscribe, e-mail: commits-unsubscribe@echarts.apache.org
For additional commands, e-mail: commits-help@echarts.apache.org
[GitHub] [echarts] plainheart commented on a change in pull request #14214: Fix(tooltip): width and overflow not working
Posted by GitBox <gi...@apache.org>.
plainheart commented on a change in pull request #14214:
URL: https://github.com/apache/echarts/pull/14214#discussion_r570666053
##########
File path: src/util/types.ts
##########
@@ -1345,6 +1345,8 @@ export interface CommonTooltipOption<FormatterParams> {
// Available when renderMode is html
decoration?: string
+ overflow?: 'none' | 'truncate' | 'break' | 'breakAll'
+ ellipsis?: string
Review comment:
The type definitions for `overflow` and `ellipsis` here are inappropriate and seems redundant. We can pick the `overflow` property from `LabelOption`. As for the `ellipsis` and `lineOverflow`, they can also be picked from the `TextStyleProps` in zrender. I think they are just missing in `LabelOption`. We should add them.
```ts
export interface LabelOption extends TextCommonOption {
overflow?: TextStyleProps['overflow']
ellipsis?: TextStyleProps['ellipsis']
lineOverflow?: TextStyleProps['lineOverflow']
}
```
Then add support for `ellipsis` after https://github.com/apache/echarts/blob/master/src/label/labelStyle.ts#L416-L419
```ts
const ellipsis = textStyleModel.get('ellipsis');
if (ellipsis) {
textStyle.ellipsis = ellipsis;
}
const lineOverflow = textStyleModel.get('lineOverflow');
if (lineOverflow) {
textStyle.lineOverflow = lineOverflow;
}
```
But there is a TODO
https://github.com/ecomfe/zrender/blob/master/src/graphic/helper/parseText.ts#L206-L213
So `lineOverflow: truncate` won't be truncated by `ellipsis` characters. We can fix it later.
Besides, `lineOverflow` may not be working in HTML rendering mode. Though there is a CSS property `line-clamp`, it is an unsupported WebKit property and it may have poor compatibility in some browsers.
----------------------------------------------------------------
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
---------------------------------------------------------------------
To unsubscribe, e-mail: commits-unsubscribe@echarts.apache.org
For additional commands, e-mail: commits-help@echarts.apache.org
[GitHub] [echarts] susiwen8 commented on a change in pull request #14214: Fix(tooltip): width and overflow not working
Posted by GitBox <gi...@apache.org>.
susiwen8 commented on a change in pull request #14214:
URL: https://github.com/apache/echarts/pull/14214#discussion_r571341503
##########
File path: src/chart/treemap/TreemapSeries.ts
##########
@@ -54,7 +55,7 @@ interface BreadcrumbItemStyleOption extends ItemStyleOption {
}
interface TreemapSeriesLabelOption extends SeriesLabelOption {
- ellipsis?: boolean
+ ellipsis?: TextStyleProps['ellipsis']
Review comment:
That's right.
----------------------------------------------------------------
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
---------------------------------------------------------------------
To unsubscribe, e-mail: commits-unsubscribe@echarts.apache.org
For additional commands, e-mail: commits-help@echarts.apache.org
[GitHub] [echarts] gtzinos edited a comment on pull request #14214: Fix(tooltip): width and overflow not working
Posted by GitBox <gi...@apache.org>.
gtzinos edited a comment on pull request #14214:
URL: https://github.com/apache/echarts/pull/14214#issuecomment-1073549967
in which version is it fixed? I have the 5.2.2 and still is not working
--
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.
To unsubscribe, e-mail: commits-unsubscribe@echarts.apache.org
For queries about this service, please contact Infrastructure at:
users@infra.apache.org
---------------------------------------------------------------------
To unsubscribe, e-mail: commits-unsubscribe@echarts.apache.org
For additional commands, e-mail: commits-help@echarts.apache.org
[GitHub] [echarts] susiwen8 closed pull request #14214: Fix(tooltip): width and overflow not working
Posted by GitBox <gi...@apache.org>.
susiwen8 closed pull request #14214:
URL: https://github.com/apache/echarts/pull/14214
--
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.
To unsubscribe, e-mail: commits-unsubscribe@echarts.apache.org
For queries about this service, please contact Infrastructure at:
users@infra.apache.org
---------------------------------------------------------------------
To unsubscribe, e-mail: commits-unsubscribe@echarts.apache.org
For additional commands, e-mail: commits-help@echarts.apache.org
[GitHub] [echarts] echarts-bot[bot] commented on pull request #14214: Fix(tooltip): width and overflow not working
Posted by GitBox <gi...@apache.org>.
echarts-bot[bot] commented on pull request #14214:
URL: https://github.com/apache/echarts/pull/14214#issuecomment-773424679
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
---------------------------------------------------------------------
To unsubscribe, e-mail: commits-unsubscribe@echarts.apache.org
For additional commands, e-mail: commits-help@echarts.apache.org
[GitHub] [echarts] susiwen8 commented on a change in pull request #14214: Fix(tooltip): width and overflow not working
Posted by GitBox <gi...@apache.org>.
susiwen8 commented on a change in pull request #14214:
URL: https://github.com/apache/echarts/pull/14214#discussion_r571348328
##########
File path: src/component/tooltip/TooltipHTMLContent.ts
##########
@@ -358,6 +358,34 @@ class TooltipHTMLContent {
+ `border-color: ${nearPointColor};`
+ (tooltipModel.get('extraCssText') || '');
+ const userWidth = tooltipModel.get(['textStyle', 'width']);
+ if (userWidth != null) {
+ el.style.cssText += `;width:${userWidth}px;`;
+ // `text-overflow_string` has very humble compatibility
+ // shttps://caniuse.com/mdn-css_properties_text-overflow_string
+ const ellipsis = tooltipModel.get(['textStyle', 'ellipsis']);
+ const userOverflow = tooltipModel.get(['textStyle', 'overflow']);
+ switch (userOverflow) {
+ case 'truncate':
+ el.style.cssText += ';overflow:hidden;'
+ + `text-overflow:${ellipsis != null ? `\'${ellipsis}\'` : 'ellipsis'};`
+ + 'white-space:nowrap;';
+ break;
+
+ case 'break':
+ el.style.cssText += ';word-break:break-word;white-space:normal;';
+ break;
+
+ case 'breakAll':
+ el.style.cssText += ';word-break:break-all;white-space:normal;';
+ break;
+
+ default:
+ el.style.cssText += '';
+ break;
+ }
+ }
Review comment:
Ok, `if else` it is.
----------------------------------------------------------------
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
---------------------------------------------------------------------
To unsubscribe, e-mail: commits-unsubscribe@echarts.apache.org
For additional commands, e-mail: commits-help@echarts.apache.org
[GitHub] [echarts] plainheart commented on pull request #14214: Fix(tooltip): width and overflow not working
Posted by GitBox <gi...@apache.org>.
plainheart commented on pull request #14214:
URL: https://github.com/apache/echarts/pull/14214#issuecomment-815606878
It seems there are some conflicting files. Perhaps, we could go ahead to fix them in 5.1.1 or 5.2.0.
--
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
---------------------------------------------------------------------
To unsubscribe, e-mail: commits-unsubscribe@echarts.apache.org
For additional commands, e-mail: commits-help@echarts.apache.org
[GitHub] [echarts] gtzinos commented on pull request #14214: Fix(tooltip): width and overflow not working
Posted by GitBox <gi...@apache.org>.
gtzinos commented on pull request #14214:
URL: https://github.com/apache/echarts/pull/14214#issuecomment-1073549967
in which version is it fixed?
--
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.
To unsubscribe, e-mail: commits-unsubscribe@echarts.apache.org
For queries about this service, please contact Infrastructure at:
users@infra.apache.org
---------------------------------------------------------------------
To unsubscribe, e-mail: commits-unsubscribe@echarts.apache.org
For additional commands, e-mail: commits-help@echarts.apache.org
[GitHub] [echarts] plainheart commented on a change in pull request #14214: Fix(tooltip): width and overflow not working
Posted by GitBox <gi...@apache.org>.
plainheart commented on a change in pull request #14214:
URL: https://github.com/apache/echarts/pull/14214#discussion_r571529272
##########
File path: src/component/tooltip/TooltipRichContent.ts
##########
@@ -90,7 +90,7 @@ class TooltipRichContent {
style: {
rich: markupStyleCreator.richTextStyles,
text: content as string,
- lineHeight: 22,
+ lineHeight: +tooltipModel.get(['textStyle', 'lineHeight']) || 22,
Review comment:
This line may also be replaced by
```js
lineHeight: +textStyleModel.get('lineHeight') || 22
```
----------------------------------------------------------------
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
---------------------------------------------------------------------
To unsubscribe, e-mail: commits-unsubscribe@echarts.apache.org
For additional commands, e-mail: commits-help@echarts.apache.org