CapsuleChart = ({ config = {}, className, style }) => {
  const [{ mergedConfig, labelData, capsuleLength, capsuleValue }, setState] = useState({
    mergedConfig: null,
    labelData: [],
    capsuleLength: [],
    capsuleValue: []
  })

  useEffect(() => {
    const mergedConfig = deepMerge(deepClone(defaultConfig, true), config || {})

    const { data } = mergedConfig

    if (!data.length) return

    const capsuleValue = data.map(({ value }) => value)

    const maxValue = Math.max(...capsuleValue)

    const oneFifth = maxValue / 5

    setState({
      mergedConfig,
      capsuleValue,
      capsuleLength: capsuleValue.map(v => (maxValue ? v / maxValue : 0)),
      labelData: [...new Set(new Array(6).fill(0).map((v, i) => Math.ceil(i * oneFifth)))]
    })
  }, [config])

  const classNames = useMemo(() => classnames('dv-capsule-chart', className), [
    className
  ])

  return (
    <div className={classNames} style={style}>
      {!!mergedConfig && (
        <React.Fragment>
          <div className='label-column'>
            {mergedConfig.data.map(({ name }) => (
              <div key={name}>{name}</div>
            ))}
            <div>&nbsp;</div>
          </div>

          <div className='capsule-container'>
            {capsuleLength.map((capsule, index) => (
              <div className='capsule-item' key={index}>
                <div
                  className='capsule-item-column'
                  style={{
                    width: `${capsule * 100}%`,
                    backgroundColor: `${
                      mergedConfig.colors[index % mergedConfig.colors.length]
                    }`
                  }}
                >
                  {
                    mergedConfig.showValue &&
                      <div className='capsule-item-value'>
                        { capsuleValue[index] }
                      </div>
                  }
                </div>
              </div>
            ))}

            <div className='unit-label'>
              {labelData.map((label, index) => (
                <div key={label + index}>{label}</div>
              ))}
            </div>
          </div>

          {!!mergedConfig.unit && (
            <div className='unit-text'>{mergedConfig.unit}</div>
          )}
        </React.Fragment>
      )}
    </div>
  )
}
@description Show item value
@type {Boolean}
@default showValue = false