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: notifications-unsubscr...@superset.apache.org For queries about this service, please contact Infrastructure at: us...@infra.apache.org --------------------------------------------------------------------- To unsubscribe, e-mail: notifications-unsubscr...@superset.apache.org For additional commands, e-mail: notifications-h...@superset.apache.org