Candlechartcontainer -> script setup

src/components/charts/CandleChartContainer.vue

@@ -90,7 +90,7 @@
   </div>
 </template>
 
-<script lang="ts">
+<script setup lang="ts">
 import { Trade, PairHistory, LoadingStatus, ChartSliderPosition } from '@/types';
 import CandleChart from '@/components/charts/CandleChart.vue';
 import PlotConfigurator from '@/components/charts/PlotConfigurator.vue';
@@ -98,13 +98,10 @@ import vSelect from 'vue-select';
 import { useSettingsStore } from '@/stores/settings';
 import { usePlotConfigStore } from '@/stores/plotConfig';
 
-import { defineComponent, ref, computed, onMounted, watch } from 'vue';
+import { ref, computed, onMounted, watch } from 'vue';
 import { useBotStore } from '@/stores/ftbotwrapper';
 
-export default defineComponent({
-  name: 'CandleChartContainer',
-  components: { CandleChart, PlotConfigurator, vSelect },
-  props: {
+const props = defineProps({
   trades: { required: false, default: () => [], type: Array as () => Trade[] },
   availablePairs: { required: true, type: Array as () => string[] },
   timeframe: { required: true, type: String },
@@ -119,8 +116,7 @@ export default defineComponent({
     type: Object as () => ChartSliderPosition,
     default: () => undefined,
   },
-  },
-  setup(props) {
+});
 const settingsStore = useSettingsStore();
 const botStore = useBotStore();
 const plotStore = usePlotConfigStore();
@@ -216,31 +212,10 @@ export default defineComponent({
     [pair.value] = props.availablePairs;
   }
   plotStore.plotConfigChanged();
-
-      if (!hasDataset) {
+  if (!hasDataset.value) {
     refresh();
   }
 });
-
-    return {
-      botStore,
-      settingsStore,
-      plotStore,
-      history,
-      dataset,
-      strategyName,
-      datasetColumns,
-      isLoadingDataset,
-      noDatasetText,
-      hasDataset,
-      showPlotConfig,
-      showConfigurator,
-      refresh,
-      pair,
-      showPlotConfigModal,
-    };
-  },
-});
 </script>
 
 <style scoped lang="scss">