Merge pull request #2125 from xzmeng/scatter-symbol-size

feat: add support to chagne scatter symbol size

src/components.d.ts

@@ -35,6 +35,7 @@ declare module 'vue' {
     BFormRadio: typeof import('bootstrap-vue-next/components/BFormRadio')['BFormRadio']
     BFormRadioGroup: typeof import('bootstrap-vue-next/components/BFormRadio')['BFormRadioGroup']
     BFormSelect: typeof import('bootstrap-vue-next/components/BFormSelect')['BFormSelect']
+    BFormSpinbutton: typeof import('bootstrap-vue-next/components/BFormSpinbutton')['BFormSpinbutton']
     BFormTextarea: typeof import('bootstrap-vue-next/components/BFormTextarea')['BFormTextarea']
     BInputGroup: typeof import('bootstrap-vue-next/components/BInputGroup')['BInputGroup']
     BListGroup: typeof import('bootstrap-vue-next/components/BListGroup')['BListGroup']

src/components/charts/PlotIndicator.vue

@@ -1,8 +1,6 @@
 <script setup lang="ts">
 import { ChartType, ChartTypeString, IndicatorConfig } from '@/types';
 
-import { watchDebounced } from '@vueuse/core';
-
 const props = defineProps({
   modelValue: { required: true, type: Object as () => Record<string, IndicatorConfig> },
   columns: { required: true, type: Array as () => string[] },
@@ -16,6 +14,7 @@ const availableGraphTypes = ref<ChartTypeString[]>(Object.keys(ChartType) as Cha
 const selAvailableIndicator = ref('');
 const cancelled = ref(false);
 const fillTo = ref('');
+const scatterSymbolSize = ref(3);
 
 function newColor() {
   selColor.value = randomColor();
@@ -32,6 +31,9 @@ const combinedIndicator = computed<IndicatorConfig>(() => {
   if (fillTo.value && graphType.value === ChartType.line) {
     val.fill_to = fillTo.value;
   }
+  if (graphType.value == ChartType.scatter) {
+    val.scatterSymbolSize = scatterSymbolSize.value;
+  }
   return {
     [selAvailableIndicator.value]: val,
   };
@@ -59,7 +61,7 @@ watch(
 );
 
 watchDebounced(
-  [selColor, graphType, fillTo],
+  [selColor, graphType, fillTo, scatterSymbolSize],
   () => {
     emitIndicator();
   },
@@ -108,5 +110,12 @@ watchDebounced(
       class="mt-1"
       label="Area chart - Fill to (leave empty for line chart)"
     />
+    <BFormGroup
+      v-if="graphType === ChartType.scatter"
+      label="Scatter symbol size"
+      label-class="mt-1"
+    >
+      <BFormSpinbutton v-model="scatterSymbolSize" />
+    </BFormGroup>
   </div>
 </template>

src/types/plot.ts

@@ -10,6 +10,7 @@ export interface IndicatorConfig {
   color?: string;
   type?: ChartType | ChartTypeString;
   fill_to?: string;
+  scatterSymbolSize?: number;
 }
 
 export interface PlotConfig {

src/utils/charts/candleChartSeries.ts

@@ -24,6 +24,12 @@ export function generateCandleSeries(
     },
     showSymbol: false,
   };
+  if (value.type === ChartType.scatter) {
+    sp['symbolSize'] = value.scatterSymbolSize ?? 3;
+    sp['emphasis'] = {
+      disabled: true,
+    };
+  }
   return sp;
 }