[Feature][UI Next] Add charts setting. (#7547)

dolphinscheduler-ui-next/src/components/chart/modules/Bar.tsx

@@ -0,0 +1,95 @@
+/*
+ * Licensed to the Apache Software Foundation (ASF) under one or more
+ * contributor license agreements.  See the NOTICE file distributed with
+ * this work for additional information regarding copyright ownership.
+ * The ASF licenses this file to You under the Apache License, Version 2.0
+ * (the "License"); you may not use this file except in compliance with
+ * the License.  You may obtain a copy of the License at
+ *
+ *    http://www.apache.org/licenses/LICENSE-2.0
+ *
+ * Unless required by applicable law or agreed to in writing, software
+ * distributed under the License is distributed on an "AS IS" BASIS,
+ * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+ * See the License for the specific language governing permissions and
+ * limitations under the License.
+ */
+
+import { defineComponent, PropType, ref } from 'vue'
+import initChart from '@/components/chart'
+import type { Ref } from 'vue'
+
+const props = {
+  height: {
+    type: [String, Number] as PropType<string | number>,
+    default: 400,
+  },
+  width: {
+    type: [String, Number] as PropType<string | number>,
+    default: '100%',
+  },
+}
+
+const BarChart = defineComponent({
+  name: 'BarChart',
+  props,
+  setup() {
+    const barChartRef: Ref<HTMLDivElement | null> = ref(null)
+
+    const option = {
+      tooltip: {
+        trigger: 'axis',
+        axisPointer: {
+          type: 'shadow',
+        },
+        backgroundColor: '#fff',
+      },
+      grid: {
+        left: '3%',
+        right: '4%',
+        bottom: '3%',
+        containLabel: true,
+      },
+      xAxis: [
+        {
+          type: 'category',
+          data: ['Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat', 'Sun'],
+          axisTick: {
+            alignWithLabel: true,
+          },
+        },
+      ],
+      yAxis: [
+        {
+          type: 'value',
+        },
+      ],
+      series: [
+        {
+          name: 'Direct',
+          type: 'bar',
+          barWidth: '60%',
+          data: [10, 52, 200, 334, 390, 330, 220],
+        },
+      ],
+    }
+
+    initChart(barChartRef, option)
+
+    return { barChartRef }
+  },
+  render() {
+    const { height, width } = this
+    return (
+      <div
+        ref='barChartRef'
+        style={{
+          height: typeof height === 'number' ? height + 'px' : height,
+          width: typeof width === 'number' ? width + 'px' : width,
+        }}
+      />
+    )
+  },
+})
+
+export default BarChart

dolphinscheduler-ui-next/src/views/home/index.tsx

@@ -19,6 +19,7 @@ import { defineComponent } from 'vue'
 import styles from './index.module.scss'
 import PieChart from '@/components/chart/modules/Pie'
 import GaugeChart from '@/components/chart/modules/Gauge'
+import BarChart from '@/components/chart/modules/Bar'
 
 export default defineComponent({
   name: 'home',
@@ -29,6 +30,7 @@ export default defineComponent({
         Home Test
         <PieChart />
         <GaugeChart />
+        <BarChart />
       </div>
     )
   },