8

client.js

import React from "react";
import ReactDOM from "react-dom";
import {
  VictoryBar,
  VictoryChart,
  VictoryAxis,
  VictoryTheme,
  //VictoryStack import
  VictoryStack,
} from "victory";

//stack 개수 만큼 데이터 추가
const data1 = [
  { quarter: 1, earnings: 13000 },
  { quarter: 2, earnings: 16500 },
  { quarter: 3, earnings: 14250 },
  { quarter: 4, earnings: 19000 },
];

const data2 = [
  { quarter: 1, earnings: 17000 },
  { quarter: 2, earnings: 20500 },
  { quarter: 3, earnings: 11250 },
  { quarter: 4, earnings: 8000 },
];

const data3 = [
  { quarter: 1, earnings: 40000 },
  { quarter: 2, earnings: 33000 },
  { quarter: 3, earnings: 37890 },
  { quarter: 4, earnings: 18730 },
];

const data4 = [
  { quarter: 1, earnings: 27900 },
  { quarter: 2, earnings: 58390 },
  { quarter: 3, earnings: 73940 },
  { quarter: 4, earnings: 61020 },
];

const data5 = [
  { quarter: 1, earnings: 11200 },
  { quarter: 2, earnings: 20010 },
  { quarter: 3, earnings: 9910 },
  { quarter: 4, earnings: 4300 },
];

const data6 = [
  { quarter: 1, earnings: 21300 },
  { quarter: 2, earnings: 26890 },
  { quarter: 3, earnings: 29800 },
  { quarter: 4, earnings: 33580 },
];

class Main extends React.Component {
  render() {
    return (
      <div>
        <h1>Victory Tutorial</h1>
        <VictoryChart domainPadding={30} theme={VictoryTheme.material}>
          <VictoryAxis
            tickValues={[1, 2, 3, 4]}
            tickFormat={["Quarter 1", "Quarter 2", "Quarter 3", "Quarter 4"]}
          />
          <VictoryAxis dependentAxis tickFormat={(x) => `$${x / 1000}k`} />
          <VictoryStack
          // VictoryStack 컴포넌트 아래에 VictoryBar 컴포넌트 import 후, data 속성에 데이터를 넘김
          >
            <VictoryBar data={data1} x="quarter" y="earnings" />
            <VictoryBar data={data2} x="quarter" y="earnings" />
            <VictoryBar data={data3} x="quarter" y="earnings" />
            <VictoryBar data={data4} x="quarter" y="earnings" />
            <VictoryBar data={data5} x="quarter" y="earnings" />
            <VictoryBar data={data6} x="quarter" y="earnings" />
          </VictoryStack>
        </VictoryChart>
      </div>
    );
  }
}

const app = document.getElementById("app");
ReactDOM.render(<Main />, app);