feat: Implement templates for dashboards (#28)

src/views/dashboard/configuration/widget/graph-styles/Card.vue

@@ -20,8 +20,8 @@ limitations under the License. -->
       v-model="fontSize"
       show-input
       input-size="small"
-      :min="10"
-      :max="20"
+      :min="12"
+      :max="50"
       :step="1"
       @change="updateConfig({ fontSize })"
     />

src/views/dashboard/configuration/widget/graph-styles/Line.vue

@@ -13,6 +13,24 @@ 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>
+    <span class="label">{{ t("showXAxis") }}</span>
+    <el-switch
+      v-model="selectedGrid.graph.showXAxis"
+      active-text="Yes"
+      inactive-text="No"
+      @change="updateConfig({ showXAxis: selectedGrid.graph.showXAxis })"
+    />
+  </div>
+  <div>
+    <span class="label">{{ t("showYAxis") }}</span>
+    <el-switch
+      v-model="selectedGrid.graph.showYAxis"
+      active-text="Yes"
+      inactive-text="No"
+      @change="updateConfig({ showYAxis: selectedGrid.graph.showYAxis })"
+    />
+  </div>
   <div>
     <span class="label">{{ t("smooth") }}</span>
     <el-switch

src/views/dashboard/configuration/widget/graph-styles/ServiceList.vue

@@ -13,7 +13,16 @@ 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>
+  <div class="item">
+    <span class="label">{{ t("showGroup") }}</span>
+    <el-switch
+      v-model="selectedGrid.graph.showGroup"
+      active-text="Yes"
+      inactive-text="No"
+      @change="updateConfig({ showGroup: selectedGrid.graph.showGroup })"
+    />
+  </div>
+  <div class="item">
     <span class="label">{{ t("fontSize") }}</span>
     <el-slider
       class="slider"
@@ -38,6 +47,7 @@ const { selectedGrid } = dashboardStore;
 const fontSize = ref(selectedGrid.graph.fontSize);
 
 function updateConfig(param: { [key: string]: unknown }) {
+  const { selectedGrid } = dashboardStore;
   const graph = {
     ...selectedGrid.graph,
     ...param,
@@ -57,4 +67,8 @@ function updateConfig(param: { [key: string]: unknown }) {
   display: block;
   margin-bottom: 5px;
 }
+
+.item {
+  margin-top: 5px;
+}
 </style>

src/views/dashboard/configuration/widget/graph-styles/Table.vue

@@ -75,4 +75,8 @@ function updateConfig(param: { [key: string]: unknown }) {
   display: block;
   margin-bottom: 5px;
 }
+
+.item {
+  margin-top: 10px;
+}
 </style>