content: /**
   * Licensed to the Apache Software Foundation (ASF) under one or more
   * contributor license agreements.  See the NOTICE file distributed with
   * this work for additional information regarding copyright ownership.
   * The ASF licenses this file to You under the Apache License, Version 2.0
   * (the "License"); you may not use this file except in compliance with
   * the License.  You may obtain a copy of the License at
   *
   *      http://www.apache.org/licenses/LICENSE-2.0
   *
   * Unless required by applicable law or agreed to in writing, software
   * distributed under the License is distributed on an "AS IS" BASIS,
   * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
   * See the License for the specific language governing permissions and
   * limitations under the License.
   */
  
  
  import React, { Component } from 'react';
  import { Chart, Axis, Tooltip, Geom } from 'bizcharts';
  import Debounce from 'lodash-decorators/debounce';
  import Bind from 'lodash-decorators/bind';
  import autoHeight from '../autoHeight';
  import styles from '../index.less';
  
  @autoHeight()
  class Bar extends Component {
    state = {
      autoHideXLabels: false,
    };
  
    componentDidMount() {
      window.addEventListener('resize', this.resize);
    }
  
    componentWillUnmount() {
      window.removeEventListener('resize', this.resize);
    }
  
    @Bind()
    @Debounce(400)
    resize() {
      if (!this.node) {
        return;
      }
      const canvasWidth = this.node.parentNode.clientWidth;
      const { data = [], autoLabel = true } = this.props;
      if (!autoLabel) {
        return;
      }
      const minWidth = data.length * 30;
      const { autoHideXLabels } = this.state;
  
      if (canvasWidth <= minWidth) {
        if (!autoHideXLabels) {
          this.setState({
            autoHideXLabels: true,
          });
        }
      } else if (autoHideXLabels) {
        this.setState({
          autoHideXLabels: false,
        });
      }
    }
  
    handleRoot = (n) => {
      this.root = n;
    };
  
    handleRef = (n) => {
      this.node = n;
    };
  
    render() {
      const {
        height,
        title,
        forceFit = true,
        data,
        color = 'rgba(24, 144, 255, 0.85)',
        padding,
      } = this.props;
  
      const { autoHideXLabels } = this.state;
  
      const scale = {
        x: {
          type: 'cat',
        },
        y: {
          min: 0,
        },
      };
  
      const tooltip = [
        'x*y',
        (x, y) => ({
          name: x,
          value: y,
        }),
      ];
  
      return (
        <div className={styles.chart} style={{ height }} ref={this.handleRoot}>
          <div ref={this.handleRef}>
            {title && <h4 style={{ marginBottom: 20 }}>{title}</h4>}
            <Chart
              scale={scale}
              height={title ? height - 41 : height}
              forceFit={forceFit}
              data={data}
              padding={padding || 'auto'}
            >
              <Axis
                name="x"
                title={false}
                label={autoHideXLabels ? false : {}}
                tickLine={autoHideXLabels ? false : {}}
              />
              <Axis name="y" min={0} />
              <Tooltip showTitle={false} crosshairs={false} />
              <Geom type="interval" position="x*y" color={color} tooltip={tooltip} />
            </Chart>
          </div>
        </div>
      );
    }
  }
  
  export default Bar;
  