From b40a5e600e93c8364fef0b5a591b9dce99114abf Mon Sep 17 00:00:00 2001
From: Qiuxia Fan <fine0830@outlook.com>
Date: Wed, 5 Jan 2022 19:36:47 +0800
Subject: [PATCH] feat: add standard options

---
 src/locales/lang/en.ts                        |   8 ++
 src/locales/lang/zh.ts                        |   8 ++
 .../dashboard/configuration/ConfigEdit.vue    |  10 +-
 .../configuration/StandardOptions.vue         | 131 ++++++++++++++++++
 .../{WidgetConfig.vue => WidgetOptions.vue}   |   9 +-
 5 files changed, 159 insertions(+), 7 deletions(-)
 create mode 100644 src/views/dashboard/configuration/StandardOptions.vue
 rename src/views/dashboard/configuration/{WidgetConfig.vue => WidgetOptions.vue} (86%)

diff --git a/src/locales/lang/en.ts b/src/locales/lang/en.ts
index bcf3b8b1..6c3657a8 100644
--- a/src/locales/lang/en.ts
+++ b/src/locales/lang/en.ts
@@ -57,6 +57,14 @@ const msg = {
   graphStyles: "Graph styles",
   widgetOptions: "Widget options",
   standardOptions: "Standard options",
+  max: "Max",
+  min: "Min",
+  plus: "Plus",
+  minus: "Minus",
+  multiply: "Multiply",
+  divide: "Divide",
+  convertToMilliseconds: "Convert Unix Timestamp(milliseconds)",
+  convertToSeconds: "Convert Unix Timestamp(seconds)",
   hourTip: "Select Hour",
   minuteTip: "Select Minute",
   secondTip: "Select Second",
diff --git a/src/locales/lang/zh.ts b/src/locales/lang/zh.ts
index 8259d099..3331467b 100644
--- a/src/locales/lang/zh.ts
+++ b/src/locales/lang/zh.ts
@@ -55,6 +55,14 @@ const msg = {
   graphStyles: "图形样式",
   widgetOptions: "组件选项",
   standardOptions: "标准选项",
+  max: "最大值",
+  min: "最小值",
+  plus: "加法",
+  minus: "减法",
+  multiply: "乘法",
+  divide: "除法",
+  convertToMilliseconds: "转换Unix时间戳（毫秒）",
+  convertToSeconds: "转换Unix时间戳（秒）",
   hourTip: "选择小时",
   minuteTip: "选择分钟",
   secondTip: "选择秒数",
diff --git a/src/views/dashboard/configuration/ConfigEdit.vue b/src/views/dashboard/configuration/ConfigEdit.vue
index 2602afba..6723ec79 100644
--- a/src/views/dashboard/configuration/ConfigEdit.vue
+++ b/src/views/dashboard/configuration/ConfigEdit.vue
@@ -65,10 +65,10 @@ limitations under the License. -->
         <component :is="`${states.chartType}Config`" />
       </el-collapse-item>
       <el-collapse-item :title="t('widgetOptions')" name="4">
-        <WidgetConfig />
+        <WidgetOptions />
       </el-collapse-item>
       <el-collapse-item :title="t('standardOptions')" name="5">
-        Standard options
+        <StandardOptions />
       </el-collapse-item>
     </el-collapse>
     <div class="footer">
@@ -93,7 +93,8 @@ import Loading from "@/utils/loading";
 import graphs from "../graphs";
 import controls from "../controls";
 import configs from "./graph-styles";
-import WidgetConfig from "./WidgetConfig.vue";
+import WidgetOptions from "./WidgetOptions.vue";
+import StandardOptions from "./StandardOptions.vue";
 
 export default defineComponent({
   name: "ConfigEdit",
@@ -101,7 +102,8 @@ export default defineComponent({
     ...graphs,
     ...controls,
     ...configs,
-    WidgetConfig,
+    WidgetOptions,
+    StandardOptions,
     ElButton,
     ElCollapse,
     ElCollapseItem,
diff --git a/src/views/dashboard/configuration/StandardOptions.vue b/src/views/dashboard/configuration/StandardOptions.vue
new file mode 100644
index 00000000..ba90702a
--- /dev/null
+++ b/src/views/dashboard/configuration/StandardOptions.vue
@@ -0,0 +1,131 @@
+<!-- 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. -->
+<template>
+  <div class="item">
+    <span class="label">{{ t("title") }}</span>
+    <el-input
+      class="input"
+      v-model="state.unit"
+      size="mini"
+      placeholder="Please input Unit"
+    />
+  </div>
+  <div class="item">
+    <span class="label">{{ t("max") }}</span>
+    <el-input
+      class="input"
+      v-model="state.max"
+      size="mini"
+      placeholder="auto"
+    />
+  </div>
+  <div class="item">
+    <span class="label">{{ t("min") }}</span>
+    <el-input
+      class="input"
+      v-model="state.min"
+      size="mini"
+      placeholder="auto"
+    />
+  </div>
+  <div class="item">
+    <span class="label">{{ t("plus") }}</span>
+    <el-input
+      class="input"
+      v-model="state.plus"
+      size="mini"
+      placeholder="none"
+    />
+  </div>
+  <div class="item">
+    <span class="label">{{ t("minus") }}</span>
+    <el-input
+      class="input"
+      v-model="state.minus"
+      size="mini"
+      placeholder="none"
+    />
+  </div>
+  <div class="item">
+    <span class="label">{{ t("multiply") }}</span>
+    <el-input
+      class="input"
+      v-model="state.multiply"
+      size="mini"
+      placeholder="none"
+    />
+  </div>
+  <div class="item">
+    <span class="label">{{ t("divide") }}</span>
+    <el-input
+      class="input"
+      v-model="state.divide"
+      size="mini"
+      placeholder="none"
+    />
+  </div>
+  <div class="item">
+    <span class="label">{{ t("convertToMilliseconds") }}</span>
+    <el-input
+      class="input"
+      v-model="state.milliseconds"
+      size="mini"
+      placeholder="none"
+    />
+  </div>
+  <div class="item">
+    <span class="label">{{ t("convertToSeconds") }}</span>
+    <el-input
+      class="input"
+      v-model="state.seconds"
+      size="mini"
+      placeholder="none"
+    />
+  </div>
+</template>
+<script lang="ts" setup>
+import { ElInput } from "element-plus";
+import { reactive } from "vue";
+import { useI18n } from "vue-i18n";
+
+const { t } = useI18n();
+const state = reactive({
+  unit: "",
+  max: "",
+  min: "",
+  plus: "",
+  minus: "",
+  multiply: "",
+  divide: "",
+  milliseconds: "",
+  seconds: "",
+});
+</script>
+<style lang="scss" scoped>
+.label {
+  font-size: 13px;
+  font-weight: 500;
+  display: block;
+  margin-bottom: 5px;
+}
+
+.input {
+  width: 500px;
+}
+
+.item {
+  margin-bottom: 10px;
+}
+</style>
diff --git a/src/views/dashboard/configuration/WidgetConfig.vue b/src/views/dashboard/configuration/WidgetOptions.vue
similarity index 86%
rename from src/views/dashboard/configuration/WidgetConfig.vue
rename to src/views/dashboard/configuration/WidgetOptions.vue
index 32fdce89..a90ad721 100644
--- a/src/views/dashboard/configuration/WidgetConfig.vue
+++ b/src/views/dashboard/configuration/WidgetOptions.vue
@@ -14,7 +14,7 @@ See the License for the specific language governing permissions and
 limitations under the License. -->
 <template>
   <div class="item">
-    <span class="label">Title</span>
+    <span class="label">{{ t("title") }}</span>
     <el-input
       class="input"
       v-model="title"
@@ -23,18 +23,21 @@ limitations under the License. -->
     />
   </div>
   <div class="item">
-    <span class="label">Tooltip</span>
+    <span class="label">{{ t("tooltipsContent") }}</span>
     <el-input
       class="input"
       v-model="tooltip"
       size="mini"
-      placeholder="Please input tooltip"
+      placeholder="Please input tooltip content"
     />
   </div>
 </template>
 <script lang="ts" setup>
 import { ElInput } from "element-plus";
 import { ref } from "vue";
+import { useI18n } from "vue-i18n";
+
+const { t } = useI18n();
 const title = ref<string>("");
 const tooltip = ref<string>("");
 </script>