You are viewing a plain text version of this content. The canonical link for it is here.
Posted to notifications@superset.apache.org by "Yobi-Aditias (via GitHub)" <gi...@apache.org> on 2024/07/11 03:51:45 UTC
[I] Annotation Layers at Horizontal Barchart [superset]
Yobi-Aditias opened a new issue, #29555:
URL: https://github.com/apache/superset/issues/29555
Hi everyone,
I Would ask about annotation layers on horizontal barchart.
## Screenshot
## Description
First, we aim to add annotation layers to a horizontal bar chart. When I do this on a regular vertical bar chart, it works fine, but it doesn't seem to work when I try it on a horizontal bar chart.
And, is it possible to have different annotation layers for each bar in the bar chart?
And then, can I add a color alert to the horizontal bar chart that changes as it approaches the annotation layer? For example, the bar chart is green, but if the value decreases and gets close to the annotation layer, it turns yellow, and when it drops below the annotation layer, it turns red. Is this possible?
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: notifications-unsubscribe@superset.apache.org.apache.org
For queries about this service, please contact Infrastructure at:
users@infra.apache.org
---------------------------------------------------------------------
To unsubscribe, e-mail: notifications-unsubscribe@superset.apache.org
For additional commands, e-mail: notifications-help@superset.apache.org
Re: [I] Annotation Layers at Horizontal Barchart [superset]
Posted by "rusackas (via GitHub)" <gi...@apache.org>.
rusackas commented on issue #29555:
URL: https://github.com/apache/superset/issues/29555#issuecomment-2224411342
I doubt he has time to chip in here, but @villebro _might_ be able to point you in the direction of a good code entry point if you're willing to dig deeper and open a PR.
--
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: notifications-unsubscribe@superset.apache.org
For queries about this service, please contact Infrastructure at:
users@infra.apache.org
---------------------------------------------------------------------
To unsubscribe, e-mail: notifications-unsubscribe@superset.apache.org
For additional commands, e-mail: notifications-help@superset.apache.org
Re: [I] Annotation Layers at Horizontal Barchart [superset]
Posted by "rusackas (via GitHub)" <gi...@apache.org>.
rusackas closed issue #29555: Annotation Layers at Horizontal Barchart
URL: https://github.com/apache/superset/issues/29555
--
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: notifications-unsubscribe@superset.apache.org
For queries about this service, please contact Infrastructure at:
users@infra.apache.org
---------------------------------------------------------------------
To unsubscribe, e-mail: notifications-unsubscribe@superset.apache.org
For additional commands, e-mail: notifications-help@superset.apache.org
Re: [I] Annotation Layers at Horizontal Barchart [superset]
Posted by "dosubot[bot] (via GitHub)" <gi...@apache.org>.
dosubot[bot] commented on issue #29555:
URL: https://github.com/apache/superset/issues/29555#issuecomment-2221975078
<!-- Answer -->
To add annotation layers to a horizontal bar chart, have different annotation layers for each bar, and implement a color alert that changes as the value approaches the annotation layer, you can follow these steps:
1. **Add Annotation Layers**: Use the `annotationLayers` property to manage annotation layers. This property allows you to add, edit, and remove annotation layers.
2. **Different Annotation Layers for Each Bar**: Ensure that each bar in your chart has a unique annotation layer. This can be managed by mapping each annotation to a specific bar.
3. **Color Alert Implementation**: Implement a color alert that changes as the value approaches the annotation layer. This can be done by dynamically adjusting the color based on the value's proximity to the annotation.
Here is a simplified example of how you might implement this in your React component using Apache Superset's `NVD3Vis`:
```jsx
import React from 'react';
import { Bar } from 'react-chartjs-2';
import { nvd3Vis } from 'superset-frontend/plugins/legacy-preset-chart-nvd3/src/NVD3Vis';
class HorizontalBarChartWithAnnotations extends React.Component {
constructor(props) {
super(props);
this.state = {
annotations: [],
data: {
labels: ['Bar 1', 'Bar 2', 'Bar 3'],
datasets: [
{
label: 'Dataset',
data: [10, 20, 30],
backgroundColor: ['#FF6384', '#36A2EB', '#FFCE56'],
},
],
},
};
this.handleAnnotationChange = this.handleAnnotationChange.bind(this);
}
handleAnnotationChange(annotations) {
this.setState({ annotations });
}
getBarColor(value, annotation) {
if (value >= annotation) {
return 'red';
}
return 'green';
}
render() {
const { data, annotations } = this.state;
const updatedData = {
...data,
datasets: data.datasets.map((dataset, index) => ({
...dataset,
backgroundColor: dataset.data.map((value, i) =>
this.getBarColor(value, annotations[i]?.value || 0)
),
})),
};
return (
<div>
<Bar data={updatedData} options={{ indexAxis: 'y' }} />
<AnnotationLayer
value={annotations}
onChange={this.handleAnnotationChange}
/>
</div>
);
}
}
export default HorizontalBarChartWithAnnotations;
```
In this example:
- `AnnotationLayer` is used to manage the annotation layers.
- `getBarColor` function changes the bar color based on the value's proximity to the annotation.
- The `Bar` component from `react-chartjs-2` is used to render the horizontal bar chart.
This approach ensures that each bar can have a different annotation layer and the color changes dynamically based on the value. Additionally, the `nvd3Vis` function from Apache Superset can be used to handle more complex visualization requirements, including annotations and tooltips <sup>[[1]](https://github.com/apache/superset/blob/master/superset-frontend/src/explore/components/controls/AnnotationLayerControl/index.jsx)</sup><sup>[[2]](https://github.com/apache/superset/blob/master/superset-frontend/src/explore/components/controls/AnnotationLayerControl/AnnotationLayer.jsx)</sup><sup>[[3]](https://github.com/apache/superset/blob/master/superset-frontend/plugins/legacy-preset-chart-nvd3/src/NVD3Vis.js)</sup>.
<!-- Dosu Comment Footer -->
*To continue talking to [Dosu](https://dosu.dev), mention @dosu.*
--
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: notifications-unsubscribe@superset.apache.org
For queries about this service, please contact Infrastructure at:
users@infra.apache.org
---------------------------------------------------------------------
To unsubscribe, e-mail: notifications-unsubscribe@superset.apache.org
For additional commands, e-mail: notifications-help@superset.apache.org
Re: [I] Annotation Layers at Horizontal Barchart [superset]
Posted by "rusackas (via GitHub)" <gi...@apache.org>.
rusackas commented on issue #29555:
URL: https://github.com/apache/superset/issues/29555#issuecomment-2224409198
Hmm... this sounds valid, but it might be tricky to fix, as the horizontal chart option basically transposes axes. I'm not sure how difficult it'd be to do the same (or not!) for the annotation layer display.
--
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: notifications-unsubscribe@superset.apache.org
For queries about this service, please contact Infrastructure at:
users@infra.apache.org
---------------------------------------------------------------------
To unsubscribe, e-mail: notifications-unsubscribe@superset.apache.org
For additional commands, e-mail: notifications-help@superset.apache.org
Re: [I] Annotation Layers at Horizontal Barchart [superset]
Posted by "rusackas (via GitHub)" <gi...@apache.org>.
rusackas commented on issue #29555:
URL: https://github.com/apache/superset/issues/29555#issuecomment-2768112818
Closing this since it's gone stale, and seems more like a feature request than a bug. Honeslty, I think the Annotation Layers feature is due for a MAJOR overhaul, but it's not a high priority item on the roadmap (yet).
--
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: notifications-unsubscribe@superset.apache.org
For queries about this service, please contact Infrastructure at:
users@infra.apache.org
---------------------------------------------------------------------
To unsubscribe, e-mail: notifications-unsubscribe@superset.apache.org
For additional commands, e-mail: notifications-help@superset.apache.org