<div id="app"></div>

* {

  font-family: 'Lato', sans-serif;

}

​

.recharts-cartesian-axis-line {

  display: none;

}

​

.recharts-cartesian-axis-tick-line {

  display: none;

}

const {AreaChart, Area, BarChart, Bar, XAxis, YAxis} = Recharts;

const sc = styled.default;

​

const StackedBarChart = React.createClass({

  render () {

    return (

      <BarChart width={400} height={400} data={barChartData}>

       <XAxis dataKey="name"/>

       <YAxis/>

       <Bar dataKey="pv" stackId="a" fill="#4bbff7" />

       <Bar dataKey="uv" stackId="a" fill="#c7edfd" />

      </BarChart>

    );

  }

})

​

const TinyAreaChart = React.createClass({

  render () {

    const {chartData} = this.props;

    return (

        <AreaChart width={150} height={60} data={chartData}

            margin={{top: 5, right: 0, left: 0, bottom: 5}}>

        <Area type='monotone' dataKey='uv' stroke='#4bbff7' fill='#4bbff7' />

      </AreaChart>

    );

  }

});

​

const GitHubIssuesTinyChartWithLabel = ({

  label,

  maxValue,

  chartData

}) => (

  <IssuesTinyChartContainer>

    <IssuesTinyChartLabel>{label}</IssuesTinyChartLabel>

    <IssuesTinyChartValue>{maxValue}</IssuesTinyChartValue>

    <TinyAreaChart chartData={chartData} />

  </IssuesTinyChartContainer>

);

​

const ChartsCard = () => {

  return (

    <ChartsCardContainer>

      <ChartCardHeading>Github Issues</ChartCardHeading>

      <Line></Line>

      <ChartCardContent>

        <StackedBarChart />

        <GitHubIssuesChartsContainer>

          <GitHubIssuesTinyChartWithLabel

            label="Created"

            maxValue={getMaxChartValue(CreatedIssuesChartData)}

            chartData={CreatedIssuesChartData}

          />

          <GitHubIssuesTinyChartWithLabel

            label="Closed"

            maxValue={getMaxChartValue(ClosedIssuesChartData)}

            chartData={ClosedIssuesChartData}

          />

          <GitHubIssuesTinyChartWithLabel

            label="Re-opened"

            maxValue={getMaxChartValue(ReOpenedIssuesChartData)}

            chartData={ReOpenedIssuesChartData}

          />

          <GitHubIssuesTinyChartWithLabel

            label="Won't fix"

            maxValue={getMaxChartValue(WontFixIssuesChartData)}

            chartData={WontFixIssuesChartData}

          />

          <GitHubIssuesTinyChartWithLabel

            label="Needs test"

            maxValue={getMaxChartValue(NeedsTestIssuesChartData)}

            chartData={NeedsTestIssuesChartData}

          />

          <GitHubIssuesTinyChartWithLabel

            label="Needs test"

            maxValue={getMaxChartValue(FixedIssuesChartData)}

            chartData={FixedIssuesChartData}

          />

        </GitHubIssuesChartsContainer>

      </ChartCardContent>

    </ChartsCardContainer>

  );

};

​

const getMaxChartValue = (chartData) => (

  chartData.reduce((prev, current) => (

     (prev.uv > current.uv) ? prev : current

  )).uv

);

​

const barChartData = [

      {name: 'Mon', uv: 18, pv: 42, amt: 2400},

      {name: 'Tue', uv: 10, pv: 29, amt: 2210},

      {name: 'Wed', uv: 13, pv: 45, amt: 2290},

      {name: 'Thu', uv: 13, pv: 35, amt: 2000},

      {name: 'Fri', uv: 10, pv: 19, amt: 2181},

      {name: 'Sat', uv: 11, pv: 23, amt: 2500},

      {name: 'Sun', uv: 17, pv: 20, amt: 2100},

];

​

const CreatedIssuesChartData = [

      {name: 'Mon', uv: 25, amt: 2400},

      {name: 'Tue', uv: 10, amt: 2210},

      {name: 'Wed', uv: 28, amt: 2290},

      {name: 'Thu', uv: 44, amt: 2000},

      {name: 'Fri', uv: 54, amt: 2181},

      {name: 'Sat', uv: 50, amt: 2500},

      {name: 'Sun', uv: 32, amt: 2500},

];

​

const ClosedIssuesChartData = [

      {name: 'Mon', uv: 25, amt: 2400},

      {name: 'Tue', uv: 15, amt: 2210},

      {name: 'Wed', uv: 22, amt: 2290},

      {name: 'Thu', uv: 20, amt: 2000},

      {name: 'Fri', uv: 18, amt: 2181},

      {name: 'Sat', uv: 15, amt: 2500},

      {name: 'Sun', uv: 26, amt: 2500},

];

​

const ReOpenedIssuesChartData = [

      {name: 'Mon', uv: 0, amt: 2400},

      {name: 'Tue', uv: 1, amt: 2210},

      {name: 'Wed', uv: 1, amt: 2290},

      {name: 'Thu', uv: 1, amt: 2000},

      {name: 'Fri', uv: 2, amt: 2181},

      {name: 'Sat', uv: 1, amt: 2500},

      {name: 'Sun', uv: 1, amt: 2500},

];

​

const WontFixIssuesChartData = [

      {name: 'Mon', uv: 3, amt: 2400},

      {name: 'Tue', uv: 2, amt: 2210},

      {name: 'Wed', uv: 1, amt: 2290},

      {name: 'Thu', uv: 2, amt: 2000},

      {name: 'Fri', uv: 3, amt: 2181},

      {name: 'Sat', uv: 2, amt: 2500},

      {name: 'Sun', uv: 4, amt: 2500},

];

​

const NeedsTestIssuesChartData = [

      {name: 'Mon', uv: 6, amt: 2400},

      {name: 'Tue', uv: 4, amt: 2210},

      {name: 'Wed', uv: 6, amt: 2290},

      {name: 'Thu', uv: 5, amt: 2000},

      {name: 'Fri', uv: 4, amt: 2181},

      {name: 'Sat', uv: 6, amt: 2500},

      {name: 'Sun', uv: 8, amt: 2500},

];

​

const FixedIssuesChartData = [

      {name: 'Mon', uv: 10, amt: 2400},

      {name: 'Tue', uv: 14, amt: 2210},

      {name: 'Wed', uv: 9, amt: 2290},

      {name: 'Thu', uv: 11, amt: 2000},

      {name: 'Fri', uv: 9, amt: 2181},

      {name: 'Sat', uv: 6, amt: 2500},

      {name: 'Sun', uv: 3, amt: 2500},

];

​

const IssuesTinyChartContainer = sc.div`

  display: flex;

  flex-direction: column;

`;

​

const IssuesTinyChartLabel = sc.span`

  text-transform: uppercase;

  color: #929292;

  font-weight: 300;

`;

​

const IssuesTinyChartValue = sc.span`

  font-size: 28px;

  font-weight: 500;

`;

​

const ChartsCardContainer = sc.div`

  display: flex;

  flex-direction: column;

  border: 1px solid silver;

  border-radius: 10px;

  width: max-content;

`;

​

const ChartCardHeading = sc.h4`

  margin-left: 20px;

`;

​

const Line = sc.hr`

  width: 100%;

  color: #e7e7e7;

  border: 1px solid;

`;

​

const ChartCardContent = sc.div`

  display: flex;

  padding: 20px 0;

`;

​

const GitHubIssuesChartsContainer = sc.div`

  display: grid;

  margin-left: 20px;

  grid-template-columns: repeat(2, 1fr);

  grid-gap: 20px;

  margin: 0 20px;

`;

​

ReactDOM.render(

  <ChartsCard />,

  document.getElementById('app')

);