Code Monkey home page Code Monkey logo

Comments (5)

dosubot avatar dosubot commented on June 30, 2024 2

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.

dosubot avatar dosubot commented on June 30, 2024 2

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.

YoussefEgla avatar YoussefEgla commented on June 30, 2024 1

@rusackas Thanks I will try it. I'm using version 4.0.1

from superset.

YoussefEgla avatar YoussefEgla commented on June 30, 2024

@dosu This won't fix the issue is with 2 middle dimension boxes overlaying one another

from superset.

rusackas avatar rusackas commented on June 30, 2024

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)

Recommend Projects

  • React photo React

    A declarative, efficient, and flexible JavaScript library for building user interfaces.

  • Vue.js photo Vue.js

    🖖 Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.

  • Typescript photo Typescript

    TypeScript is a superset of JavaScript that compiles to clean JavaScript output.

  • TensorFlow photo TensorFlow

    An Open Source Machine Learning Framework for Everyone

  • Django photo Django

    The Web framework for perfectionists with deadlines.

  • D3 photo 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.

  • Game

    Some thing interesting about game, make everyone happy.

Recommend Org

  • Facebook photo Facebook

    We are working to build community through open source technology. NB: members must have two-factor auth.

  • Microsoft photo Microsoft

    Open source projects and samples from Microsoft.

  • Google photo Google

    Google ❤️ Open Source for everyone.

  • D3 photo D3

    Data-Driven Documents codes.