From f6c0fc894081fd17efec58dfc81c7f5cfd953079 Mon Sep 17 00:00:00 2001
From: ktx-vaidehi <134508096+ktx-vaidehi@users.noreply.github.com>
Date: Tue, 29 Oct 2024 10:54:33 +0530
Subject: [PATCH] feat: Dashboard Config Option (#4617)

- #4589

<!-- This is an auto-generated comment: release notes by coderabbit.ai
-->
## Summary by CodeRabbit

## Release Notes

- **New Features**
- Enhanced dashboard panel configuration with new options for line
thickness, label positioning, symbol visibility, and line interpolation.
- Introduced new icons for visual representation of chart options,
including Linear, NoSymbol, Smooth, StepBefore, StepAfter, and
StepMiddle.

- **Bug Fixes**
- Improved error handling and validation for dashboard panel
configurations.

- **Documentation**
- Added new localization entries for enhanced user interface labels
related to dashboard features.

These updates significantly improve the customization and usability of
dashboard panels, providing users with greater flexibility in
visualizing their data.
<!-- end of auto-generated comment: release notes by coderabbit.ai -->
---
 src/common/meta/dashboards/v5/mod.rs          |  38 +++
 .../dashboards/addPanel/ConfigPanel.vue       | 309 +++++++++++++++++-
 .../icons/dashboards/LinearIcon.vue           |  22 ++
 .../components/icons/dashboards/NoSymbol.vue  |  19 ++
 .../components/icons/dashboards/Smooth.vue    |  26 ++
 .../components/icons/dashboards/StepAfter.vue |  40 +++
 .../icons/dashboards/StepBefore.vue           |  22 ++
 .../icons/dashboards/StepMiddle.vue           |  33 ++
 web/src/composables/useDashboardPanel.ts      |   7 +
 web/src/locales/languages/en.json             |  18 +-
 web/src/utils/dashboard/convertSQLData.ts     |  97 +++++-
 11 files changed, 606 insertions(+), 25 deletions(-)
 create mode 100644 web/src/components/icons/dashboards/LinearIcon.vue
 create mode 100644 web/src/components/icons/dashboards/NoSymbol.vue
 create mode 100644 web/src/components/icons/dashboards/Smooth.vue
 create mode 100644 web/src/components/icons/dashboards/StepAfter.vue
 create mode 100644 web/src/components/icons/dashboards/StepBefore.vue
 create mode 100644 web/src/components/icons/dashboards/StepMiddle.vue

diff --git a/src/common/meta/dashboards/v5/mod.rs b/src/common/meta/dashboards/v5/mod.rs
index 53bed11ced..acf4363a6e 100644
--- a/src/common/meta/dashboards/v5/mod.rs
+++ b/src/common/meta/dashboards/v5/mod.rs
@@ -196,6 +196,8 @@ pub struct PanelConfig {
     #[serde(skip_serializing_if = "Option::is_none")]
     decimals: Option<f64>,
     #[serde(skip_serializing_if = "Option::is_none")]
+    line_thickness: Option<f64>,
+    #[serde(skip_serializing_if = "Option::is_none")]
     top_results: Option<f64>,
     #[serde(skip_serializing_if = "Option::is_none")]
     top_results_others: Option<bool>,
@@ -204,6 +206,12 @@ pub struct PanelConfig {
     #[serde(skip_serializing_if = "Option::is_none")]
     axis_border_show: Option<bool>,
     #[serde(skip_serializing_if = "Option::is_none")]
+    label_option: Option<LabelOption>,
+    #[serde(skip_serializing_if = "Option::is_none")]
+    show_symbol: Option<bool>,
+    #[serde(skip_serializing_if = "Option::is_none")]
+    line_interpolation: Option<LineInterpolation>,
+    #[serde(skip_serializing_if = "Option::is_none")]
     legend_width: Option<LegendWidth>,
     base_map: Option<BaseMap>,
     map_view: Option<MapView>,
@@ -427,3 +435,33 @@ pub struct LegendWidth {
     #[serde(skip_serializing_if = "Option::is_none")]
     pub unit: Option<String>,
 }
+
+#[derive(Debug, Clone, PartialEq, Serialize, Deserialize, ToSchema)]
+pub struct LabelOption {
+    #[serde(skip_serializing_if = "Option::is_none")]
+    pub position:  Option<LabelPosition>,
+    #[serde(skip_serializing_if = "Option::is_none")]
+    pub rotate: Option<f64>,
+}
+
+#[derive(Debug, Clone, PartialEq, Serialize, Deserialize, ToSchema)]
+#[serde(rename_all = "lowercase")]
+pub enum LineInterpolation {
+    Smooth,
+    Linear,
+    #[serde(rename = "step-start")]
+    StepStart,
+    #[serde(rename = "step-end")]
+    StepEnd,
+    #[serde(rename = "step-middle")]
+    StepMiddle,
+}
+
+#[derive(Debug, Clone, PartialEq, Serialize, Deserialize, ToSchema)]
+#[serde(rename_all = "lowercase")]
+pub enum LabelPosition {
+    Top,
+    Inside,
+    InsideTop,
+    InsideBottom
+}
\ No newline at end of file
diff --git a/web/src/components/dashboards/addPanel/ConfigPanel.vue b/web/src/components/dashboards/addPanel/ConfigPanel.vue
index 99449c99ce..b5a60f18f4 100644
--- a/web/src/components/dashboards/addPanel/ConfigPanel.vue
+++ b/web/src/components/dashboards/addPanel/ConfigPanel.vue
@@ -190,7 +190,7 @@ along with this program.  If not, see <http://www.gnu.org/licenses/>.
         :display-value="`${
           dashboardPanelData.data.config.unit
             ? unitOptions.find(
-                (it) => it.value == dashboardPanelData.data.config.unit
+                (it) => it.value == dashboardPanelData.data.config.unit,
               )?.label
             : 'Default'
         }`"
@@ -348,7 +348,7 @@ along with this program.  If not, see <http://www.gnu.org/licenses/>.
               handleBlur(
                 dashboardPanelData.data.config.map_symbol_style.size_by_value,
                 1,
-                'min'
+                'min',
               )
             "
             :label="t('dashboard.minimum')"
@@ -379,7 +379,7 @@ along with this program.  If not, see <http://www.gnu.org/licenses/>.
               handleBlur(
                 dashboardPanelData.data.config.map_symbol_style.size_by_value,
                 100,
-                'max'
+                'max',
               )
             "
             :label="t('dashboard.maximum')"
@@ -409,7 +409,7 @@ along with this program.  If not, see <http://www.gnu.org/licenses/>.
             handleBlur(
               dashboardPanelData.data.config.map_symbol_style,
               2,
-              'size_fixed'
+              'size_fixed',
             )
           "
           :label="t('dashboard.fixedValue')"
@@ -678,7 +678,7 @@ along with this program.  If not, see <http://www.gnu.org/licenses/>.
       <q-toggle
         v-if="
           ['area', 'line', 'area-stacked'].includes(
-            dashboardPanelData.data.type
+            dashboardPanelData.data.type,
           )
         "
         v-model="dashboardPanelData.data.config.connect_nulls"
@@ -691,7 +691,7 @@ along with this program.  If not, see <http://www.gnu.org/licenses/>.
       <q-input
         v-if="
           ['area', 'line', 'area-stacked', 'bar', 'stacked'].includes(
-            dashboardPanelData.data.type
+            dashboardPanelData.data.type,
           )
         "
         v-model="dashboardPanelData.data.config.no_value_replacement"
@@ -767,7 +767,7 @@ along with this program.  If not, see <http://www.gnu.org/licenses/>.
               dashboardPanelData.layout.currentQueryIndex
             ].config,
             1,
-            'weight_fixed'
+            'weight_fixed',
           )
         "
         :label="t('common.weight')"
@@ -895,10 +895,197 @@ along with this program.  If not, see <http://www.gnu.org/licenses/>.
       />
 
       <div class="space"></div>
+
+      <q-select
+        v-if="
+          [
+            'area',
+            'area-stacked',
+            'bar',
+            'h-bar',
+            'line',
+            'scatter',
+            'stacked',
+            'h-stacked',
+          ].includes(dashboardPanelData.data.type)
+        "
+        outlined
+        v-model="dashboardPanelData.data.config.label_option.position"
+        :options="labelPositionOptions"
+        dense
+        :label="t('dashboard.labelPosition')"
+        class="showLabelOnTop selectedLabel"
+        stack-label
+        emit-value
+        :display-value="`${
+          dashboardPanelData.data.config.label_option.position
+            ? labelPositionOptions.find(
+                (it) =>
+                  it.value ==
+                  dashboardPanelData.data.config.label_option.position,
+              )?.label
+            : 'None'
+        }`"
+        data-test="dashboard-config-label-position"
+      >
+      </q-select>
+
+      <div class="space"></div>
+
+      <q-input
+        v-if="
+          [
+            'area',
+            'area-stacked',
+            'bar',
+            'h-bar',
+            'line',
+            'scatter',
+            'stacked',
+            'h-stacked',
+          ].includes(dashboardPanelData.data.type)
+        "
+        v-model.number="dashboardPanelData.data.config.label_option.rotate"
+        :label="t('dashboard.labelRotate')"
+        color="input-border"
+        bg-color="input-bg"
+        class="q-py-md showLabelOnTop"
+        stack-label
+        outlined
+        filled
+        dense
+        label-slot
+        :type="'number'"
+        placeholder="0"
+        @update:model-value="
+          (value: any) =>
+            (dashboardPanelData.data.config.label_option.rotate =
+              value !== '' ? value : 0)
+        "
+        data-test="dashboard-config-label-rotate"
+      >
+      </q-input>
+
+      <div class="space"></div>
+
+      <q-select
+        v-if="
+          ['area', 'area-stacked', 'line'].includes(
+            dashboardPanelData.data.type,
+          )
+        "
+        outlined
+        v-model="dashboardPanelData.data.config.show_symbol"
+        :options="showSymbol"
+        dense
+        :label="t('dashboard.showSymbol')"
+        class="showLabelOnTop selectedLabel"
+        stack-label
+        emit-value
+        :display-value="`${
+          dashboardPanelData.data.config.show_symbol
+            ? showSymbol.find(
+                (it: any) =>
+                  it.value == dashboardPanelData.data.config.show_symbol,
+              )?.label
+            : 'No'
+        }`"
+        data-test="dashboard-config-show_symbol"
+      >
+        <template v-slot:option="scope">
+          <q-item v-bind="scope.itemProps">
+            <q-item-section avatar style="height: 20px">
+              <q-icon>
+                <component :is="scope.opt.iconComponent"></component>
+              </q-icon>
+            </q-item-section>
+            <q-item-section>
+              <q-item-label>{{ scope.opt.label }}</q-item-label>
+            </q-item-section>
+          </q-item>
+        </template>
+      </q-select>
+
+      <div class="space"></div>
+
+      <q-select
+        v-if="
+          ['area', 'area-stacked', 'line'].includes(
+            dashboardPanelData.data.type,
+          )
+        "
+        outlined
+        v-model="dashboardPanelData.data.config.line_interpolation"
+        :options="lineInterpolationOptions"
+        dense
+        :label="t('dashboard.lineInterpolation')"
+        class="showLabelOnTop selectedLabel"
+        stack-label
+        emit-value
+        :display-value="`${
+          dashboardPanelData.data.config.line_interpolation
+            ? lineInterpolationOptions.find(
+                (it: any) =>
+                  it.value == dashboardPanelData.data.config.line_interpolation,
+              )?.label
+            : 'smooth'
+        }`"
+        data-test="dashboard-config-line_interpolation"
+      >
+        <template v-slot:option="scope">
+          <q-item v-bind="scope.itemProps">
+            <q-item-section avatar>
+              <q-icon>
+                <component :is="scope.opt.iconComponent"></component>
+              </q-icon>
+            </q-item-section>
+            <q-item-section>
+              <q-item-label>{{ scope.opt.label }}</q-item-label>
+            </q-item-section>
+          </q-item>
+        </template>
+      </q-select>
+      <div class="space"></div>
+
+      <q-input
+        v-if="
+          !promqlMode &&
+          !dashboardPanelData.data.queries[
+            dashboardPanelData.layout.currentQueryIndex
+          ].customQuery &&
+          ['area', 'area-stacked', 'line'].includes(
+            dashboardPanelData.data.type,
+          )
+        "
+        v-model.number="dashboardPanelData.data.config.line_thickness"
+        :value="1.5"
+        :min="0"
+        @update:model-value="
+          (value: any) =>
+            (dashboardPanelData.data.config.line_thickness =
+              typeof value == 'number' && value >= 0 ? value : 1.5)
+        "
+        label="Line Thickness"
+        color="input-border"
+        bg-color="input-bg"
+        class="q-py-sm showLabelOnTop"
+        stack-label
+        outlined
+        filled
+        dense
+        label-slot
+        placeholder="Default: 1.5"
+        :type="'number'"
+        data-test="dashboard-config-line_thickness"
+      >
+      </q-input>
+
+      <div class="space"></div>
+
       <Drilldown
         v-if="
           !['html', 'markdown', 'geomap', 'maps'].includes(
-            dashboardPanelData.data.type
+            dashboardPanelData.data.type,
           )
         "
         :variablesData="variablesData"
@@ -1020,6 +1207,13 @@ import ValueMapping from "./ValueMapping.vue";
 import MarkLineConfig from "./MarkLineConfig.vue";
 import CommonAutoComplete from "@/components/dashboards/addPanel/CommonAutoComplete.vue";
 import CustomDateTimePicker from "@/components/CustomDateTimePicker.vue";
+import LinearIcon from "@/components/icons/dashboards/LinearIcon.vue";
+import NoSymbol from "@/components/icons/dashboards/NoSymbol.vue";
+import Smooth from "@/components/icons/dashboards/Smooth.vue";
+import StepBefore from "@/components/icons/dashboards/StepBefore.vue";
+import StepAfter from "@/components/icons/dashboards/StepAfter.vue";
+import StepMiddle from "@/components/icons/dashboards/StepMiddle.vue";
+import { markRaw } from "vue";
 
 export default defineComponent({
   components: {
@@ -1028,15 +1222,21 @@ export default defineComponent({
     CommonAutoComplete,
     MarkLineConfig,
     CustomDateTimePicker,
+    LinearIcon,
+    NoSymbol,
+    Smooth,
+    StepBefore,
+    StepAfter,
+    StepMiddle,
   },
   props: ["dashboardPanelData", "variablesData"],
   setup(props) {
     const dashboardPanelDataPageKey = inject(
       "dashboardPanelDataPageKey",
-      "dashboard"
+      "dashboard",
     );
     const { dashboardPanelData, promqlMode } = useDashboardPanelData(
-      dashboardPanelDataPageKey
+      dashboardPanelDataPageKey,
     );
     const { t } = useI18n();
 
@@ -1100,6 +1300,24 @@ export default defineComponent({
       if (!dashboardPanelData.data.config.table_dynamic_columns) {
         dashboardPanelData.data.config.table_dynamic_columns = false;
       }
+
+      // by default, use label_option position as null and rotate as 0
+      if (!dashboardPanelData.data.config.label_option) {
+        dashboardPanelData.data.config.label_option = {
+          position: null,
+          rotate: 0,
+        };
+      }
+
+      // by default, set show_symbol as false
+      if (!dashboardPanelData.data.config.show_symbol) {
+        dashboardPanelData.data.config.show_symbol = false;
+      }
+
+      // by default, set line interpolation as smooth
+      if (!dashboardPanelData.data.config.line_interpolation) {
+        dashboardPanelData.data.config.line_interpolation = "smooth";
+      }
     });
 
     const legendWidthValue = computed({
@@ -1246,6 +1464,70 @@ export default defineComponent({
         value: "custom",
       },
     ];
+
+    const labelPositionOptions = [
+      {
+        label: t("dashboard.none"),
+        value: null,
+      },
+      {
+        label: t("dashboard.top"),
+        value: "top",
+      },
+      {
+        label: t("dashboard.inside"),
+        value: "inside",
+      },
+      {
+        label: t("dashboard.insideTop"),
+        value: "insideTop",
+      },
+      {
+        label: t("dashboard.insideBottom"),
+        value: "insideBottom",
+      },
+    ];
+
+    const showSymbol = [
+      {
+        label: t("dashboard.no"),
+        value: false,
+        iconComponent: markRaw(NoSymbol),
+      },
+      {
+        label: t("dashboard.yes"),
+        value: true,
+        iconComponent: markRaw(LinearIcon),
+      },
+    ];
+
+    const lineInterpolationOptions = [
+      {
+        label: t("dashboard.smooth"),
+        value: "smooth",
+        iconComponent: markRaw(Smooth),
+      },
+      {
+        label: t("dashboard.linear"),
+        value: "linear",
+        iconComponent: markRaw(LinearIcon),
+      },
+      {
+        label: t("dashboard.stepBefore"),
+        value: "step-start",
+        iconComponent: markRaw(StepBefore),
+      },
+      {
+        label: t("dashboard.stepAfter"),
+        value: "step-end",
+        iconComponent: markRaw(StepAfter),
+      },
+      {
+        label: t("dashboard.stepMiddle"),
+        value: "step-middle",
+        iconComponent: markRaw(StepMiddle),
+      },
+    ];
     const isWeightFieldPresent = computed(() => {
       const layoutFields =
         dashboardPanelData.data.queries[
@@ -1289,8 +1571,8 @@ export default defineComponent({
             label: it.name,
             value: it.name,
           };
-        }
-      )
+        },
+      ),
     );
 
     const timeShifts = [];
@@ -1341,6 +1623,9 @@ export default defineComponent({
       symbolOptions,
       legendsPositionOptions,
       unitOptions,
+      labelPositionOptions,
+      showSymbol,
+      lineInterpolationOptions,
       isWeightFieldPresent,
       setUnit,
       handleBlur,
diff --git a/web/src/components/icons/dashboards/LinearIcon.vue b/web/src/components/icons/dashboards/LinearIcon.vue
new file mode 100644
index 0000000000..85d37ead8d
--- /dev/null
+++ b/web/src/components/icons/dashboards/LinearIcon.vue
@@ -0,0 +1,22 @@
+<template>
+  <svg
+    width="116"
+    height="87"
+    viewBox="0 0 116 87"
+    fill="none"
+    xmlns="http://www.w3.org/2000/svg"
+  >
+    <path d="M5.5 81L58.5 5.5L111 81" stroke="currentColor" stroke-width="4" />
+    <circle cx="59" cy="6" r="6" fill="currentColor" />
+    <circle cx="110" cy="81" r="6" fill="currentColor" />
+    <circle cx="6" cy="81" r="6" fill="currentColor" />
+  </svg>
+</template>
+
+<script lang="ts">
+import { defineComponent } from "vue";
+
+export default defineComponent({
+  name: "LinearIcon",
+});
+</script>
diff --git a/web/src/components/icons/dashboards/NoSymbol.vue b/web/src/components/icons/dashboards/NoSymbol.vue
new file mode 100644
index 0000000000..c16373a937
--- /dev/null
+++ b/web/src/components/icons/dashboards/NoSymbol.vue
@@ -0,0 +1,19 @@
+<template>
+  <svg
+    width="86"
+    height="90"
+    viewBox="0 0 86 90"
+    fill="none"
+    xmlns="http://www.w3.org/2000/svg"
+  >
+    <path d="M2.5 83L31.5 6.5L59 83L83.5 6.5" stroke="currentColor" stroke-width="4" />
+  </svg>
+</template>
+
+<script lang="ts">
+import { defineComponent } from "vue";
+
+export default defineComponent({
+  name: "NoSymbol",
+});
+</script>
diff --git a/web/src/components/icons/dashboards/Smooth.vue b/web/src/components/icons/dashboards/Smooth.vue
new file mode 100644
index 0000000000..30063400c6
--- /dev/null
+++ b/web/src/components/icons/dashboards/Smooth.vue
@@ -0,0 +1,26 @@
+<template>
+  <svg
+    width="132"
+    height="84"
+    viewBox="0 0 132 84"
+    fill="none"
+    xmlns="http://www.w3.org/2000/svg"
+  >
+    <path
+      d="M6.07188 78C2.5731 -18.122 127.973 -20.5371 125.976 78"
+      stroke="currentColor"
+      stroke-width="4"
+    />
+    <circle cx="66" cy="6" r="6" fill="currentColor" />
+    <circle cx="126" cy="78" r="6" fill="currentColor" />
+    <circle cx="6" cy="78" r="6" fill="currentColor" />
+  </svg>
+</template>
+
+<script lang="ts">
+import { defineComponent } from "vue";
+
+export default defineComponent({
+  name: "Smooth",
+});
+</script>
diff --git a/web/src/components/icons/dashboards/StepAfter.vue b/web/src/components/icons/dashboards/StepAfter.vue
new file mode 100644
index 0000000000..c6794e8525
--- /dev/null
+++ b/web/src/components/icons/dashboards/StepAfter.vue
@@ -0,0 +1,40 @@
+<template>
+  <svg
+    width="91"
+    height="83"
+    viewBox="0 0 91 83"
+    fill="none"
+    xmlns="http://www.w3.org/2000/svg"
+  >
+    <path d="M85 76V5.5H44V76H5" stroke="currentColor" stroke-width="4" />
+    <circle
+      cx="6"
+      cy="6"
+      r="6"
+      transform="matrix(-1 0 0 1 50 0)"
+      fill="currentColor"
+    />
+    <circle
+      cx="6"
+      cy="6"
+      r="6"
+      transform="matrix(-1 0 0 1 12 70)"
+      fill="currentColor"
+    />
+    <circle
+      cx="6"
+      cy="6"
+      r="6"
+      transform="matrix(-1 0 0 1 91 71)"
+      fill="currentColor"
+    />
+  </svg>
+</template>
+
+<script lang="ts">
+import { defineComponent } from "vue";
+
+export default defineComponent({
+  name: "StepAfter",
+});
+</script>
diff --git a/web/src/components/icons/dashboards/StepBefore.vue b/web/src/components/icons/dashboards/StepBefore.vue
new file mode 100644
index 0000000000..07d7cbf4e9
--- /dev/null
+++ b/web/src/components/icons/dashboards/StepBefore.vue
@@ -0,0 +1,22 @@
+<template>
+  <svg
+    width="91"
+    height="83"
+    viewBox="0 0 91 83"
+    fill="none"
+    xmlns="http://www.w3.org/2000/svg"
+  >
+    <path d="M6 76V5.5H47V76H86" stroke="currentColor" stroke-width="4" />
+    <circle cx="47" cy="6" r="6" fill="currentColor" />
+    <circle cx="85" cy="76" r="6" fill="currentColor" />
+    <circle cx="6" cy="77" r="6" fill="currentColor" />
+  </svg>
+</template>
+
+<script lang="ts">
+import { defineComponent } from "vue";
+
+export default defineComponent({
+  name: "StepBefore",
+});
+</script>
diff --git a/web/src/components/icons/dashboards/StepMiddle.vue b/web/src/components/icons/dashboards/StepMiddle.vue
new file mode 100644
index 0000000000..e55997effc
--- /dev/null
+++ b/web/src/components/icons/dashboards/StepMiddle.vue
@@ -0,0 +1,33 @@
+<template>
+  <svg
+    width="82"
+    height="83"
+    viewBox="0 0 82 83"
+    fill="none"
+    xmlns="http://www.w3.org/2000/svg"
+  >
+    <path d="M80 77V6.5H39V77H0" stroke="currentColor" stroke-width="4" />
+    <circle
+      cx="6"
+      cy="6"
+      r="6"
+      transform="matrix(-1 0 0 1 65 0)"
+      fill="currentColor"
+    />
+    <circle
+      cx="6"
+      cy="6"
+      r="6"
+      transform="matrix(-1 0 0 1 26 71)"
+      fill="currentColor"
+    />
+  </svg>
+</template>
+
+<script lang="ts">
+import { defineComponent } from "vue";
+
+export default defineComponent({
+  name: "StepMiddle",
+});
+</script>
diff --git a/web/src/composables/useDashboardPanel.ts b/web/src/composables/useDashboardPanel.ts
index 5601b33d46..55ad153f31 100644
--- a/web/src/composables/useDashboardPanel.ts
+++ b/web/src/composables/useDashboardPanel.ts
@@ -48,10 +48,17 @@ const getDefaultDashboardPanelData: any = () => ({
       unit: null,
       unit_custom: null,
       decimals: 2,
+      line_thickness: 1.5,
       top_results: null,
       top_results_others: false,
       axis_width: null,
       axis_border_show: false,
+      label_option: {
+        position: null,
+        rotate: 0,
+      },
+      show_symbol: false,
+      line_interpolation: "smooth",
       legend_width: {
         value: null,
         unit: "px",
diff --git a/web/src/locales/languages/en.json b/web/src/locales/languages/en.json
index 34c6d18433..99ec7c27da 100644
--- a/web/src/locales/languages/en.json
+++ b/web/src/locales/languages/en.json
@@ -582,6 +582,8 @@
     "showBorder": "Show Axis Border",
     "legendsPositionLabel": "Legends Positions",
     "unitLabel": "Unit",
+    "labelPosition": "Value Position",
+    "labelRotate": "Value Rotate",
     "basemapLabel": "Base Map",
     "customunitLabel": "Custom Unit",
     "currencyDollar": "Currency - Dollar ($)",
@@ -657,7 +659,21 @@
     "scheduledReports": "Scheduled Reports",
     "newReport": "New Report",
     "scheduledDashboards": "Scheduled Dashboards",
-    "panelHeight": "Panel Height"
+    "panelHeight": "Panel Height",
+    "none": "None",
+    "inside": "Inside",
+    "insideTop": "Inside Top",
+    "insideBottom": "Inside Bottom",
+    "top": "Top",
+    "showSymbol": "Show Symbol",
+    "yes": "Yes",
+    "no": "No",
+    "lineInterpolation": "Line Interpolation",
+    "linear": "Linear",
+    "smooth": "Smooth",
+    "stepBefore": "Step Before",
+    "stepAfter": "Step After",
+    "stepMiddle": "Step Middle"
   },
   "panel": {
     "header": "Panel",
diff --git a/web/src/utils/dashboard/convertSQLData.ts b/web/src/utils/dashboard/convertSQLData.ts
index 2b88d4c9e6..98a25bfd33 100644
--- a/web/src/utils/dashboard/convertSQLData.ts
+++ b/web/src/utils/dashboard/convertSQLData.ts
@@ -722,6 +722,12 @@ export const convertSQLData = async (
         // inverse data for h-stacked and h-bar
         inverse: ["h-stacked", "h-bar"].includes(panelSchema.type),
         name: index == 0 ? panelSchema.queries[0]?.fields?.x[index]?.label : "",
+        label: {
+          show:
+            panelSchema.config?.label_option?.position != null,
+          position: panelSchema.config?.label_option?.position || "None",
+          rotate: panelSchema.config?.label_option?.rotate || 0,
+        },
         nameLocation: "middle",
         nameGap: 25,
         nameTextStyle: {
@@ -830,7 +836,7 @@ export const convertSQLData = async (
     series: [],
   };
 
-  const defaultSeriesProps = getPropsByChartTypeForSeries(panelSchema.type);
+  const defaultSeriesProps = getPropsByChartTypeForSeries(panelSchema);
 
   // Now set the series values as per the chart data
   // Override any configs if required as per the chart type
@@ -897,11 +903,19 @@ export const convertSQLData = async (
               const data = missingValueData.filter(
                 (it: any) => it[key1] == key
               );
+
               const seriesObj = {
                 //only append if yaxiskeys length is more than 1
                 name:
                   yAxisKeys.length == 1 ? key : key + " (" + yAxisName + ")",
                 ...defaultSeriesProps,
+                label: {
+                  show:
+                    panelSchema.config?.label_option?.position != null,
+                  position:
+                    panelSchema.config?.label_option?.position || "None",
+                  rotate: panelSchema.config?.label_option?.rotate || 0,
+                },
                 // markLine if exist
                 markLine: {
                   silent: true,
@@ -928,6 +942,12 @@ export const convertSQLData = async (
             name: panelSchema?.queries[0]?.fields?.y.find(
               (it: any) => it.alias == key
             )?.label,
+            label: {
+              show:
+                panelSchema.config?.label_option?.position != null,
+              position: panelSchema.config?.label_option?.position || "None",
+              rotate: panelSchema.config?.label_option?.rotate || 0,
+            },
             // color:
             //   panelSchema.queries[0]?.fields?.y.find(
             //     (it: any) => it.alias == key,
@@ -1021,6 +1041,12 @@ export const convertSQLData = async (
             name: panelSchema?.queries[0]?.fields?.y.find(
               (it: any) => it.alias == key
             )?.label,
+            label: {
+              show:
+                panelSchema.config?.label_option?.position != null,
+              position: panelSchema.config?.label_option?.position || "None",
+              rotate: panelSchema.config?.label_option?.rotate || 0,
+            },
             // color:
             //   panelSchema.queries[0]?.fields?.y.find(
             //     (it: any) => it.alias == key,
@@ -1053,6 +1079,12 @@ export const convertSQLData = async (
           //     ?.color || "#5960b2",
           opacity: 0.8,
           ...defaultSeriesProps,
+          label: {
+            show:
+              panelSchema.config?.label_option?.position != null,
+            position: panelSchema.config?.label_option?.position || "None",
+            rotate: panelSchema.config?.label_option?.rotate || 0,
+          },
           // markLine if exist
           markLine: {
             silent: true,
@@ -1094,6 +1126,12 @@ export const convertSQLData = async (
             animation: false,
             data: getMarkLineData(panelSchema),
           },
+          label: {
+            show:
+              panelSchema.config?.label_option?.position != null,
+            position: panelSchema.config?.label_option?.position || "None",
+            rotate: panelSchema.config?.label_option?.rotate || 0,
+          },
           data: getAxisDataFromKey(key),
           barMinHeight: 1,
         };
@@ -1296,6 +1334,12 @@ export const convertSQLData = async (
         const seriesObj = {
           name: key,
           ...defaultSeriesProps,
+          label: {
+            show:
+              panelSchema.config?.label_option?.position != null,
+            position: panelSchema.config?.label_option?.position || "None",
+            rotate: panelSchema.config?.label_option?.rotate || 0,
+          },
           // markLine if exist
           markLine: {
             silent: true,
@@ -1357,6 +1401,7 @@ export const convertSQLData = async (
           {
             ...defaultSeriesProps,
             name: panelSchema?.queries[0]?.fields?.y[0].label,
+
             data: zValues
               .map((it: any, index: any) => {
                 return xAxisZerothPositionUniqueValue.map(
@@ -1506,6 +1551,12 @@ export const convertSQLData = async (
         const seriesObj = {
           name: key,
           ...defaultSeriesProps,
+          label: {
+            show:
+              panelSchema.config?.label_option?.position != null,
+            position: panelSchema.config?.label_option?.position || "None",
+            rotate: panelSchema.config?.label_option?.rotate || 0,
+          },
           // markLine if exist
           markLine: {
             silent: true,
@@ -2231,8 +2282,8 @@ const largestLabel = (data: any) => {
  * @param {string} type - The type of chart.
  * @return {Object} - The properties for the given chart type.
  */
-const getPropsByChartTypeForSeries = (type: string) => {
-  switch (type) {
+const getPropsByChartTypeForSeries = (panelSchema: any) => {
+  switch (panelSchema.type) {
     case "bar":
       return {
         type: "bar",
@@ -2243,10 +2294,18 @@ const getPropsByChartTypeForSeries = (type: string) => {
       return {
         type: "line",
         emphasis: { focus: "series" },
-        smooth: true,
-        showSymbol: false,
+        smooth:
+          panelSchema.config?.line_interpolation === "smooth" ||
+          panelSchema.config?.line_interpolation == null,
+        step: ["step-start", "step-end", "step-middle"].includes(
+          panelSchema.config?.line_interpolation,
+        )
+        // TODO: replace this with type integrations
+          ? panelSchema.config.line_interpolation.replace("step-", "")
+          : false,
+        showSymbol: panelSchema.config?.show_symbol ?? false,
         areaStyle: null,
-        lineStyle: { width: 1.5 },
+        lineStyle: { width: panelSchema.config?.line_thickness ?? 1.5 },
       };
     case "scatter":
       return {
@@ -2304,11 +2363,18 @@ const getPropsByChartTypeForSeries = (type: string) => {
     case "area":
       return {
         type: "line",
-        smooth: true,
+        smooth:
+          panelSchema.config?.line_interpolation === "smooth" ||
+          panelSchema.config?.line_interpolation == null,
+        step: ["step-start", "step-end", "step-middle"].includes(
+          panelSchema.config?.line_interpolation,
+        )
+          ? panelSchema.config.line_interpolation.replace("step-", "")
+          : false,
         emphasis: { focus: "series" },
         areaStyle: {},
-        showSymbol: false,
-        lineStyle: { width: 1.5 },
+        showSymbol: panelSchema.config?.show_symbol ?? false,
+        lineStyle: { width: panelSchema.config?.line_thickness ?? 1.5 },
       };
     case "stacked":
       return {
@@ -2336,14 +2402,21 @@ const getPropsByChartTypeForSeries = (type: string) => {
     case "area-stacked":
       return {
         type: "line",
-        smooth: true,
+        smooth:
+          panelSchema.config?.line_interpolation === "smooth" ||
+          panelSchema.config?.line_interpolation == null,
+        step: ["step-start", "step-end", "step-middle"].includes(
+          panelSchema.config?.line_interpolation,
+        )
+          ? panelSchema.config.line_interpolation.replace("step-", "")
+          : false,
         stack: "Total",
         areaStyle: {},
         emphasis: {
           focus: "series",
         },
-        showSymbol: false,
-        lineStyle: { width: 1.5 },
+        showSymbol: panelSchema.config?.show_symbol ?? false,
+        lineStyle: { width: panelSchema.config?.line_thickness ?? 1.5 },
       };
     case "metric":
       return {