You are viewing a plain text version of this content. The canonical link for it is here.
Posted to commits@echarts.apache.org by "AllenAttuned (via GitHub)" <gi...@apache.org> on 2023/09/05 09:47:13 UTC
[GitHub] [echarts] AllenAttuned opened a new issue, #19080: [Feature] Implement a way to specify data attributes for a chart's key components
AllenAttuned opened a new issue, #19080:
URL: https://github.com/apache/echarts/issues/19080
### What problem does this feature solve?
## Feature description:
At my organization, we recently started migrating our data visualizations to ECharts and our product has many features that depend on standard HTML `data` attributes. The ability to specify `data` attributes on chart components such as, the data items, axis labels, etc. would be wonderful.
I was able to come up with a pattern to work around the lack of this feature. I essentially insert my data into a label
that uses rich formatting to hide it (`opaciy: 0`, etc...). Then during my chart's instance's `finished` lifecycle
event, I select all `text` elements with a specific text pattern, and then parse their text. This content will then be
applied to the hidden `text` element as data attributes.
This feature would be really awesome, and I would be happy to work on it.
Here's an example of how I would set data attributes on the dots of a scatter plot using the above pattern.
```javascript
class SomeScatterChart {
constructor(d) {
// ...
this.options = {
series: [
{
// scatter series option
// ...
// scatter dot label to be parsed into data attribute
label: {
show: true,
slient: true,
rich: {
dataAttr: {
opacity: 0,
width: 0,
height: 0,
},
},
formatter: ({ data }) => {
return `{dataAttr|${this._formatDataAttribute({
"echarts-instance-id": this.instance.id,
value: data.value,
})}}`;
},
}
// ...
}
]
}
// ...
}
mountInstance(el) {
// initialize ECharts instance with HTML element `el`
// register callback function to invoke `_parseTextDataAttributes` when lifecycle event `finished` occurs
// set chart options to `this.options`
}
_parseTextDataAttributes() {
// select all SVG `text` elements whom are children of the ECharts instance's container element
// filter selected elements by those whose inner HTML have the phrase `data-attr-anchor=true` (`el`)
// for each of these elements (`d`), split their inner HTML by commas
// for each of these strings (`t`), split them by equals to create a pair of `attibute` and `value`
// set a data attribute with the name `attribute` and value of `value` the element `d`
}
_formatDataAttribute(data) {
// reduce specified data by keys (`k`)
// create string with the pattern of `data-<k>=<data[k]>,` + previous iteration
// initial string will be `data-attr-anchor=true`
// return the created string
}
}
```
### What does the proposed API look like?
## Proposed API
The API that I have in mind would behave similarly to that of the current ECharts label formatter function. It would be
a function that accepts an object with a `data` property. This property would directly correlate with the data in the
series. It would return an object with the exact properties which are to be added as data attributes to the element.
The function should be able to return an object with string keys. The API should be able to convert any key which
are `camelCase` to `kabob-case`.
```javascript
// ...
options = {
series: [
{
// scatter series option
dataAttibutes: ({ data }) => {
return {
id: data.id,
value: data.value,
productName: data.name
}
}
}
]
}
// ...
```
### Example:
Given, a chart will have the following data:
``` javascript
data = [
{
id: '1-a',
value: '42',
name: 'cylon',
},
{
id: '1-b',
value: '22',
name: 'pyramid ball',
},
]
```
The rendered chart will contain the following SVG `path` elements:
``` svg
<path d="M1 0A1 1 0 1 1 1 -0.0001" transform="matrix(...)" fill="red" data-id="1-a" data-value="42" data-product-name="cyclon"></path>
<path d="M1 0A1 1 0 1 1 1 -0.0001" transform="matrix(...)" fill="red" data-id="1-b" data-value="22" data-product-name="pyramid ball"></path>
```
--
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.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
Re: [I] [Feature] Implement a way to specify data attributes for a chart's key components [echarts]
Posted by "github-actions[bot] (via GitHub)" <gi...@apache.org>.
github-actions[bot] commented on issue #19080:
URL: https://github.com/apache/echarts/issues/19080#issuecomment-4308199858
This issue has been automatically closed because it did not have recent activity. If this remains to be a problem with the latest version of Apache ECharts, please open a new issue and link this to it. Thanks!
--
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
Re: [I] [Feature] Implement a way to specify data attributes for a chart's key components [echarts]
Posted by "jstebenne (via GitHub)" <gi...@apache.org>.
jstebenne commented on issue #19080:
URL: https://github.com/apache/echarts/issues/19080#issuecomment-2057001113
This would also be very useful when testing custom render functions. Right now, we have no reliable way to select rendered SVGs.
--
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
Re: [I] [Feature] Implement a way to specify data attributes for a chart's key components [echarts]
Posted by "github-actions[bot] (via GitHub)" <gi...@apache.org>.
github-actions[bot] commented on issue #19080:
URL: https://github.com/apache/echarts/issues/19080#issuecomment-4255568263
This issue has been automatically marked as stale because it did not have recent activity. It will be closed in 7 days if no further activity occurs. If you wish not to mark it as stale, please leave a comment in this issue.
--
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
Re: [I] [Feature] Implement a way to specify data attributes for a chart's key components [echarts]
Posted by "github-actions[bot] (via GitHub)" <gi...@apache.org>.
github-actions[bot] closed issue #19080: [Feature] Implement a way to specify data attributes for a chart's key components
URL: https://github.com/apache/echarts/issues/19080
--
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