[React + Typescript] React Component With Generic Data Type :: Props 받기

공통 컴포넌트 만들기 : recharts : Stacked Bar Chart

전제 : 여러개의 카테고리가 있고 Stacked bar 차트를 구현한다.
data는 어레이이지만 안에 들어있는 오브젝트는 모두 다른 타입이다.

type TProps<DataItem> = {
  data: DataItem[];
  barNmOrderBtmToTop: (keyof DataItem)[];
  barColorOrderBtmToTop: CSSProperties['color'][];
  xAixsColNm: keyof DataItem;
  yAxisTickCount?: number;
  stackId?: string;
  barLabelEachPosition?: LabelProps['position'];
};

function StackedBarChart<T extends object>({
  data,
  barNmOrderBtmToTop,
  barColorOrderBtmToTop,
  xAixsColNm,
  yAxisTickCount = 1,
  stackId = 'stack#1',
  barLabelEachPosition = 'insideTop',
}: TProps<T>) {

	return (
    <div style={{ width: '100%', height: '100%', padding: 16 }}>
      {/* <ResponsiveContainer> */}
      <BarChart data={data}>
        <XAxis dataKey={String(xAixsColNm)} />
        <YAxis tickCount={yAxisTickCount} />
        <CartesianGrid stroke={palette.chartLine} vertical={false} />
        {/* <Legend
              // width={"fit"}
              wrapperStyle={{
                top: -50,
                // right: 20,
                // backgroundColor: '#f5f5f5',
                // border: '1px solid #d5d5d5',
                borderRadius: 3,
                lineHeight: '40px',
              }}
            /> */}

        <Tooltip active cursor={{ fill: 'transparent' }} />

        {barNmOrderBtmToTop.map((colNm, idx) => {
          const dataKey = String(colNm);
          return (
            <Bar
              // minPointSize={18}
              // label={{ fill: 'white', fontSize: 12, position: 'insideTop' }}
              dataKey={dataKey}
              fill={barColorOrderBtmToTop[idx]}
              stackId={stackId}
            >
              <LabelList
                content={(e) => {
                  return renderLabel(e);
                }}
                style={{ textAnchor: 'middle', fontSize: 14, fill: 'white' }}
                dataKey={dataKey}
                position={barLabelEachPosition}
              />
            </Bar>
          );
        })}
      </BarChart>
      {/* </ResponsiveContainer> */}
    </div>

}