build: output files to dir

src/components/bar-chart/h-bar.tsx

@@ -0,0 +1,61 @@
+import { Bar } from '@ant-design/plots';
+
+interface BarChartProps {
+  data: any[];
+  xField: string;
+  yField: string;
+  title?: string;
+  height?: number;
+}
+const BarChart: React.FC<BarChartProps> = (props) => {
+  const { data, xField, yField, title, height = 300 } = props;
+  const config = {
+    data,
+    xField,
+    yField,
+    title,
+    // colorField: 'name',
+    direction: 'vertical',
+    height,
+    group: true,
+    legend: {
+      color: {
+        position: 'top',
+        layout: {
+          justifyContent: 'center'
+        }
+      }
+    },
+    axis: {
+      x: {
+        xAxis: true
+      }
+    },
+
+    split: {
+      type: 'line',
+      line: {
+        color: 'red',
+        style: {
+          color: 'red',
+          lineDash: [4, 5]
+        }
+      }
+    },
+
+    style: {
+      fill: '#2fbf85',
+      radiusTopLeft: 8,
+      radiusTopRight: 8,
+      height: 30
+    }
+  };
+
+  return (
+    <>
+      <Bar {...config} />
+    </>
+  );
+};
+
+export default BarChart;

src/components/bar-chart/index.tsx

@@ -0,0 +1,61 @@
+import { Column } from '@ant-design/plots';
+
+interface BarChartProps {
+  data: any[];
+  xField: string;
+  yField: string;
+  title?: string;
+  height?: number;
+}
+const BarChart: React.FC<BarChartProps> = (props) => {
+  const { data, xField, yField, title, height = 260 } = props;
+  const config = {
+    data,
+    xField,
+    yField,
+    title,
+    // colorField: 'name',
+    direction: 'vertical',
+    height,
+    group: true,
+    legend: {
+      color: {
+        position: 'top',
+        layout: {
+          justifyContent: 'center'
+        }
+      }
+    },
+    axis: {
+      x: {
+        xAxis: true
+      }
+    },
+
+    split: {
+      type: 'line',
+      line: {
+        color: 'red',
+        style: {
+          color: 'red',
+          lineDash: [4, 5]
+        }
+      }
+    },
+
+    style: {
+      fill: '#2fbf85',
+      radiusTopLeft: 8,
+      radiusTopRight: 8,
+      width: 30
+    }
+  };
+
+  return (
+    <>
+      <Column {...config} />
+    </>
+  );
+};
+
+export default BarChart;

src/components/content-wrapper/index.less

@@ -0,0 +1,17 @@
+.content-wrapper {
+  .content {
+    padding-block-start: 0;
+    padding-block-end: 32px;
+    padding-inline: 40px;
+  }
+
+  .title {
+    font-size: var(--font-size-large);
+    font-weight: 600;
+    line-height: 32px;
+    padding-block-start: 8px;
+    padding-block-end: 16px;
+    padding-inline-start: 40px;
+    padding-inline-end: 40px;
+  }
+}

src/components/content-wrapper/index.tsx

@@ -0,0 +1,24 @@
+import React from 'react';
+import './index.less';
+
+const ContentWrapper: React.FC<{
+  children: React.ReactNode;
+  title: React.ReactNode;
+  titleStyle?: React.CSSProperties;
+  contentStyle?: React.CSSProperties;
+}> = ({ children, title = false, titleStyle, contentStyle }) => {
+  return (
+    <div className="content-wrapper">
+      {title && (
+        <div className="title" style={{ ...titleStyle }}>
+          {title}
+        </div>
+      )}
+      <div className="content" style={{ ...contentStyle }}>
+        {children}
+      </div>
+    </div>
+  );
+};
+
+export default ContentWrapper;