dosubot[bot] commented on issue #29114:
URL: https://github.com/apache/superset/issues/29114#issuecomment-2154900281
<!-- Greeting -->
Hey @YoussefEgla! 👋 I'm here to help you with any bugs, questions, or
contributions you have for the repository. Let's work together to resolve this!
<!-- Answer -->
To fix the CSS bug where the dimensions of a histogram overlay each other,
making it difficult to read, you can adjust the margins and axis properties in
the `CustomHistogram` component. Specifically, you can increase the margins to
ensure that the elements do not overlap.
Here is the relevant part of the code with the adjustments:
```jsx
class CustomHistogram extends PureComponent {
render() {
const {
className,
data,
width,
height,
binCount,
colorScheme,
normalized,
cumulative,
opacity,
xAxisLabel,
yAxisLabel,
showLegend,
sliceId,
} = this.props;
const colorFn = CategoricalColorNamespace.getScale(colorScheme);
const keys = data.map(d => d.key);
const colorScale = scaleOrdinal({
domain: keys,
range: keys.map(x => colorFn(x, sliceId)),
});
return (
<WithLegend
className={`superset-legacy-chart-histogram ${className}`}
width={width}
height={height}
position="top"
renderLegend={({ direction, style }) =>
showLegend && (
<LegendOrdinal
style={style}
scale={colorScale}
direction={direction}
shape="rect"
labelMargin="0 15px 0 0"
/>
)
}
renderChart={parent => (
<Histogram
width={parent.width}
height={parent.height}
ariaLabel="Histogram"
normalized={normalized}
cumulative={cumulative}
binCount={binCount}
binType="numeric"
margin={{ top: 30, right: 30, bottom: 50, left: 50 }} //
Increased margins
renderTooltip={({ datum, color }) => (
<div>
<strong style={{ color }}>
{datum.bin0} {t('to')} {datum.bin1}
</strong>
<div>
<strong>{t('count')} </strong>
{datum.count}
</div>
<div>
<strong>{t('cumulative')} </strong>
{datum.cumulative}
</div>
<div>
<strong>{t('percentile (exclusive)')} </strong>
{`${(
(datum.cumulativeDensity - datum.density) *
100
).toPrecision(4)}th`}
</div>
</div>
)}
valueAccessor={datum => datum}
theme={chartTheme}
>
{data.map(series => (
<BarSeries
key={series.key}
animated
rawData={series.values}
fill={colorScale(series.key)}
fillOpacity={opacity}
/>
))}
<XAxis label={xAxisLabel} />
<YAxis label={yAxisLabel} />
</Histogram>
)}
/>
);
}
}
```
Additionally, ensure that the `WithLegend` component is properly configured
to handle the layout and positioning of the legend and chart. The `WithLegend`
component should manage the flex direction and justify content based on the
position of the legend:
```jsx
class WithLegend extends Component {
getContainerDirection() {
const { position } = this.props;
switch (position) {
case 'left':
return 'row';
case 'right':
return 'row-reverse';
case 'bottom':
return 'column-reverse';
default:
case 'top':
return 'column';
}
}
getLegendJustifyContent() {
const { legendJustifyContent, position } = this.props;
if (legendJustifyContent) {
return legendJustifyContent;
}
switch (position) {
case 'left':
return 'flex-start';
case 'right':
return 'flex-start';
case 'bottom':
return 'flex-end';
default:
case 'top':
return 'flex-end';
}
}
render() {
const { className, width, height, position, renderChart, renderLegend } =
this.props;
const isHorizontal = position === 'left' || position === 'right';
const style = {
display: 'flex',
flexDirection: this.getContainerDirection(),
};
if (width) {
style.width = width;
}
if (height) {
style.height = height;
}
const chartStyle = { ...CHART_STYLE_BASE };
if (isHorizontal) {
chartStyle.width = 0;
} else {
chartStyle.height = 0;
}
const legendDirection = isHorizontal ? 'column' : 'row';
const legendStyle = {
...LEGEND_STYLE_BASE,
flexDirection: legendDirection,
justifyContent: this.getLegendJustifyContent(),
};
const legendContainerStyle = {
flexWrap: 'wrap',
display: 'flex',
flexDirection: legendDirection,
};
return (
<div className={`with-legend ${className}`} style={style}>
<div className="legend-container" style={legendStyle}>
{renderLegend({
direction: legendDirection,
style: legendContainerStyle,
})}
</div>
<div className="main-container" style={chartStyle}>
<ParentSize>
{parent =>
parent.width > 0 && parent.height > 0
? renderChart(parent)
: null
}
</ParentSize>
</div>
</div>
);
}
}
WithLegend.propTypes = propTypes;
WithLegend.defaultProps = defaultProps;
export default WithLegend;
```
These changes increase the margins around the histogram and ensure that the
legend and chart are properly aligned, which should help prevent the dimensions
from overlapping and make it easier to read
<sup>[[1]](https://github.com/apache/superset/blob/master/superset-frontend/plugins/plugin-chart-echarts/src/Histogram/transformProps.ts)</sup><sup>[[2]](https://github.com/apache/superset/blob/master/superset-frontend/plugins/legacy-plugin-chart-histogram/src/Histogram.jsx)</sup><sup>[[3]](https://github.com/apache/superset/blob/master/superset-frontend/plugins/legacy-plugin-chart-histogram/src/WithLegend.jsx)</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: [email protected]
For queries about this service, please contact Infrastructure at:
[email protected]
---------------------------------------------------------------------
To unsubscribe, e-mail: [email protected]
For additional commands, e-mail: [email protected]
