Comments (5)
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!
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:
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:
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 [1][2][3].
To continue talking to Dosu, mention @dosu.
from superset.
To fix the issue where two middle dimension boxes in a histogram chart overlay each other, you can adjust the binCount
property in the CustomHistogram
component. Increasing the binCount
will create more bins, which can help in reducing the overlap between the bars.
Here is the relevant part of the code where you can adjust the binCount
:
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} // Adjust this value
binType="numeric"
margin={{ top: 20, right: 20 }}
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>
)}
/>
);
}
}
CustomHistogram.propTypes = propTypes;
CustomHistogram.defaultProps = {
binCount: 15, // Default value
className: '',
colorScheme: '',
normalized: false,
cumulative: false,
opacity: 1,
xAxisLabel: '',
yAxisLabel: '',
};
export default styled(CustomHistogram)`
.superset-legacy-chart-histogram {
overflow: hidden;
}
`;
Try increasing the binCount
value from its default of 15 to a higher number to see if it resolves the overlay issue. Additionally, ensure that the transformProps
function in superset-frontend/plugins/plugin-chart-echarts/src/Histogram/transformProps.ts
is correctly processing the histogram data and properties, as this function is responsible for transforming the chart properties and data for rendering [1][2].
To continue talking to Dosu, mention @dosu.
from superset.
@rusackas Thanks I will try it. I'm using version 4.0.1
from superset.
@dosu This won't fix the issue is with 2 middle dimension boxes overlaying one another
from superset.
I'm not sure which version you're on, but there's a new ECharts based Histogram that just merged on the master
branch. It hasn't been released officially yet, but you're free to try it. There's even a migration to move over to it :)
from superset.
Related Issues (20)
- Alerts and Reports not working after updating SMTP credentials HOT 3
- 50 - Deprecate the KV_STORE feature flag HOT 3
- [SIP-137] Can we limit a user to only read certain tables in the database connection? HOT 6
- SPAM
- Version 4.0.1: Unable to adjust the size of a chart in a dashboard when the chart touches the right edge of the dashboard HOT 4
- SPAM
- SPAM
- SPAM
- SPAM
- SPAM
- SPAM
- SPAM
- SPAM
- SPAM
- SPAM
- Default native filters values don't set correctly HOT 1
- Superset 4.0.1 - Exported CSV Contains Garbled Chinese Characters and Numbers HOT 4
- Metric datatype incorrect when swap dataset HOT 1
- It is proposed to add the feature of grouping like folders HOT 3
- TimeSeries Chart is showing Year for the January month HOT 5
Recommend Projects
-
React
A declarative, efficient, and flexible JavaScript library for building user interfaces.
-
Vue.js
🖖 Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.
-
Typescript
TypeScript is a superset of JavaScript that compiles to clean JavaScript output.
-
TensorFlow
An Open Source Machine Learning Framework for Everyone
-
Django
The Web framework for perfectionists with deadlines.
-
Laravel
A PHP framework for web artisans
-
D3
Bring data to life with SVG, Canvas and HTML. 📊📈🎉
-
Recommend Topics
-
javascript
JavaScript (JS) is a lightweight interpreted programming language with first-class functions.
-
web
Some thing interesting about web. New door for the world.
-
server
A server is a program made to process requests and deliver data to clients.
-
Machine learning
Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.
-
Visualization
Some thing interesting about visualization, use data art
-
Game
Some thing interesting about game, make everyone happy.
Recommend Org
-
Facebook
We are working to build community through open source technology. NB: members must have two-factor auth.
-
Microsoft
Open source projects and samples from Microsoft.
-
Google
Google ❤️ Open Source for everyone.
-
Alibaba
Alibaba Open Source for everyone
-
D3
Data-Driven Documents codes.
-
Tencent
China tencent open source team.
from superset.