content: import React from 'react';
  import { BarGroup } from '@vx/shape';
  import { Group } from '@vx/group';
  import { AxisBottom } from '@vx/axis';
  import { cityTemperature } from '@vx/mock-data';
  import { scaleBand, scaleLinear, scaleOrdinal } from '@vx/scale';
  import { timeParse, timeFormat } from 'd3-time-format';
  import { extent, max } from 'd3-array';
  
  const data = cityTemperature.slice(0, 8);
  const keys = Object.keys(data[0]).filter(d => d !== 'date');
  const parseDate = timeParse("%Y%m%d");
  const format = timeFormat("%b %d");
  const formatDate = (date) => format(parseDate(date));
  
  // accessors
  const x0 = d => d.date;
  const y = d => d.value;
  
  export default ({
    width,
    height,
    events = false,
    margin = {
      top: 40
    }
  }) => {
    if (width < 10) return null;
  
    // bounds
    const xMax = width;
    const yMax = height - margin.top - 100;
  
    // // scales
    const x0Scale = scaleBand({
      rangeRound: [0, xMax],
      domain: data.map(x0),
      padding: 0.2,
      tickFormat: () => (val) => formatDate(val)
    });
    const x1Scale = scaleBand({
      rangeRound: [0, x0Scale.bandwidth()],
      domain: keys,
      padding: .1
    });
    const yScale = scaleLinear({
      rangeRound: [yMax, 0],
      domain: [0, max(data, (d) => {
        return max(keys, (key) => d[key])
      })],
    });
    const zScale = scaleOrdinal({
      domain: keys,
      range: ['#aeeef8', '#e5fd3d', '#9caff6']
    })
  
    return (
      <svg width={width} height={height}>
        <rect
          x={0}
          y={0}
          width={width}
          height={height}
          fill={`#612efb`}
          rx={14}
        />
        <BarGroup
          top={margin.top}
          data={data}
          keys={keys}
          height={yMax}
          x0={x0}
          x0Scale={x0Scale}
          x1Scale={x1Scale}
          yScale={yScale}
          zScale={zScale}
          rx={4}
          onClick={data => event => {
            if (!events) return;
            alert(`clicked: ${JSON.stringify(data)}`)
          }}
        />
        <AxisBottom
          scale={x0Scale}
          top={yMax + margin.top}
          stroke='#e5fd3d'
          tickStroke='#e5fd3d'
          hideAxisLine
          tickLabelComponent={(
            <text
              fill='#e5fd3d'
              fontSize={11}
              textAnchor="middle"
            />
          )}
        />
      </svg>
    );
  }
  