docs: update

Author: liihuu

docs/.vitepress/config/share.js

@@ -31,8 +31,6 @@ export function getInstanceApiMenus (lang = '') {
     { text: 'getSize', link: `${prefix}/getSize` },
     { text: 'setStyles', link: `${prefix}/setStyles` },
     { text: 'getStyles', link: `${prefix}/getStyles` },
-    { text: 'setPrecision', link: `${prefix}/setPrecision` },
-    { text: 'getPrecision', link: `${prefix}/getPrecision` },
     { text: 'setFormatter', link: `${prefix}/setFormatter` },
     { text: 'getFormatter', link: `${prefix}/getFormatter` },
     { text: 'setLocale', link: `${prefix}/setLocale` },
@@ -51,12 +49,14 @@ export function getInstanceApiMenus (lang = '') {
     { text: 'setRightMinVisibleBarCount', link: `${prefix}/setRightMinVisibleBarCount` },
     { text: 'setBarSpace', link: `${prefix}/setBarSpace` },
     { text: 'getBarSpace', link: `${prefix}/getBarSpace` },
-    { text: 'applyNewData', link: `${prefix}/applyNewData` },
-    { text: 'updateData', link: `${prefix}/updateData` },
-    { text: 'setLoadMoreDataCallback', link: `${prefix}/setLoadMoreDataCallback` },
+    { text: 'setSymbol', link: `${prefix}/setSymbol` },
+    { text: 'getSymbol', link: `${prefix}/getSymbol` },
+    { text: 'setPeriod', link: `${prefix}/setPeriod` },
+    { text: 'getPeriod', link: `${prefix}/getPeriod` },
+    { text: 'setDataLoader', link: `${prefix}/setDataLoader` },
+    { text: 'resetData', link: `${prefix}/resetData` },
     { text: 'getDataList', link: `${prefix}/getDataList` },
     { text: 'getVisibleRange', link: `${prefix}/getVisibleRange` },
-    { text: 'clearData', link: `${prefix}/clearData` },
     { text: 'createIndicator', link: `${prefix}/createIndicator` },
     { text: 'overrideIndicator', link: `${prefix}/overrideIndicator` },
     { text: 'getIndicators', link: `${prefix}/getIndicators` },

docs/@views/api/references/instance/applyNewData.md

@@ -0,0 +1,3 @@
+```typescript
+() => Period | null
+```

docs/@views/api/references/instance/getPeriod.md

@@ -0,0 +1,3 @@
+```typescript
+() => SymbolInfo | null
+```

docs/@views/api/references/instance/getPrecision.md

@@ -0,0 +1,9 @@
+```typescript
+(
+  dataLoader: {
+    getBars: (params: object) => void | Promise<void>
+    subscribeBar?: (params: object) => void
+    unsubscribeBar?: (params: object) => void
+  }
+) => void
+```

docs/@views/api/references/instance/getSymbol.md

@@ -0,0 +1,8 @@
+```typescript
+(
+  period: {
+    type: 'second' | 'minute' | 'hour' | 'day' | 'week' | 'month' | 'year'
+    span: number
+  }
+) => void
+```

docs/@views/api/references/instance/clearData.md renamed to docs/@views/api/references/instance/resetData.md

@@ -0,0 +1,9 @@
+```typescript
+(
+  symbol: {
+    ticker: string
+    pricePrecision?: number
+    volumePrecision?: number
+  }
+) => void
+```

docs/@views/api/references/instance/setDataLoader.md

@@ -0,0 +1,19 @@
+import { init } from 'klinecharts'
+
+const chart = init('getPeriod-chart')
+
+chart.setSymbol({ ticker: 'TestSymbol' })
+chart.setPeriod({ span: 1, type: 'day' })
+chart.setDataLoader({
+  getBars: ({
+    callback
+  }) => {
+    fetch('https://klinecharts.com/datas/kline.json')
+      .then(res => res.json())
+      .then(dataList => {
+        callback(dataList)
+      })
+  }
+})
+
+const period = chart.getPeriod()

docs/@views/api/references/instance/setLoadMoreDataCallback.md

@@ -5,6 +5,6 @@ import { data } from './index.data'
 
 <template>
   <ChartPreview
-    chartId="getPrecision-chart"
+    chartId="getPeriod-chart"
     :code="data.js"/>
 </template>

docs/@views/api/references/instance/setPeriod.md

@@ -0,0 +1,19 @@
+import { init } from 'klinecharts'
+
+const chart = init('getSymbol-chart')
+
+chart.setSymbol({ ticker: 'TestSymbol' })
+chart.setPeriod({ span: 1, type: 'day' })
+chart.setDataLoader({
+  getBars: ({
+    callback
+  }) => {
+    fetch('https://klinecharts.com/datas/kline.json')
+      .then(res => res.json())
+      .then(dataList => {
+        callback(dataList)
+      })
+  }
+})
+
+const symbol = chart.getSymbol()

docs/@views/api/references/instance/setPrecision.md

@@ -5,6 +5,6 @@ import { data } from './index.data'
 
 <template>
   <ChartPreview
-    chartId="setPrecision-chart"
+    chartId="getSymbol-chart"
     :code="data.js"/>
 </template>

docs/@views/api/references/instance/setSymbol.md

@@ -2,8 +2,18 @@ import { init } from 'klinecharts'
 
 const chart = init('getThousandsSeparator-chart')
 
-fetch('https://klinecharts.com/datas/kline.json')
-  .then(res => res.json())
-  .then(dataList => { chart.applyNewData(dataList) })
+chart.setSymbol({ ticker: 'TestSymbol' })
+chart.setPeriod({ span: 1, type: 'day' })
+chart.setDataLoader({
+  getBars: ({
+    callback
+  }) => {
+    fetch('https://klinecharts.com/datas/kline.json')
+      .then(res => res.json())
+      .then(dataList => {
+        callback(dataList)
+      })
+  }
+})
 
 const thousandsSeparator = chart.getThousandsSeparator()

docs/@views/api/references/instance/updateData.md

@@ -0,0 +1,20 @@
+import fs from 'fs'
+
+export default {
+  watch: ['./index.js'],
+  load (watchedFiles) {
+    return watchedFiles.reduce((data, file) => {
+      const result = fs.readFileSync(file, 'utf-8')
+      let key
+      if (file.match('index.js')) {
+        key = 'js'
+      } else if (file.match('index.css')) {
+        key = 'css'
+      } else {
+        key = 'html'
+      }
+      data[key] = result
+      return data
+    }, {})
+  }
+}

docs/@views/api/samples/getPrecision/index.data.js renamed to docs/@views/api/samples/getPeriod/index.data.js

@@ -0,0 +1,20 @@
+import { init } from 'klinecharts'
+
+const chart = init('resetData-chart')
+
+chart.setSymbol({ ticker: 'TestSymbol' })
+chart.setPeriod({ span: 1, type: 'day' })
+chart.setDataLoader({
+  getBars: ({
+    callback
+  }) => {
+    fetch('https://klinecharts.com/datas/kline.json')
+      .then(res => res.json())
+      .then(dataList => {
+        callback(dataList)
+      })
+  }
+})
+setTimeout(() => {
+  chart.resetData()
+}, 5000)

docs/@views/api/samples/getPeriod/index.js

@@ -0,0 +1,10 @@
+<script setup>
+import ChartPreview from '../../../../@components/ChartPreview.vue';
+import { data } from './index.data'
+</script>
+
+<template>
+  <ChartPreview
+    chartId="resetData-chart"
+    :code="data.js"/>
+</template>

docs/@views/api/samples/getPrecision/index.vue renamed to docs/@views/api/samples/getPeriod/index.vue

@@ -0,0 +1,20 @@
+import fs from 'fs'
+
+export default {
+  watch: ['./index.js'],
+  load (watchedFiles) {
+    return watchedFiles.reduce((data, file) => {
+      const result = fs.readFileSync(file, 'utf-8')
+      let key
+      if (file.match('index.js')) {
+        key = 'js'
+      } else if (file.match('index.css')) {
+        key = 'css'
+      } else {
+        key = 'html'
+      }
+      data[key] = result
+      return data
+    }, {})
+  }
+}

docs/@views/api/samples/getPrecision/index.js

@@ -0,0 +1,19 @@
+import { init } from 'klinecharts'
+
+const chart = init('setDataLoader-chart')
+
+chart.setSymbol({ ticker: 'TestSymbol' })
+chart.setPeriod({ span: 1, type: 'day' })
+chart.setDataLoader({
+  getBars: ({
+    callback
+  }) => {
+    fetch('https://klinecharts.com/datas/kline.json')
+      .then(res => res.json())
+      .then(dataList => {
+        callback(dataList)
+      })
+  },
+  subscribe: (params) => {},
+  unsubscribe: (params) => {}
+})

docs/@views/api/samples/setPrecision/index.data.js renamed to docs/@views/api/samples/getSymbol/index.data.js

@@ -0,0 +1,10 @@
+<script setup>
+import ChartPreview from '../../../../@components/ChartPreview.vue';
+import { data } from './index.data'
+</script>
+
+<template>
+  <ChartPreview
+    chartId="setDataLoader-chart"
+    :code="data.js"/>
+</template>

docs/@views/api/samples/getSymbol/index.js

@@ -0,0 +1,20 @@
+import fs from 'fs'
+
+export default {
+  watch: ['./index.js'],
+  load (watchedFiles) {
+    return watchedFiles.reduce((data, file) => {
+      const result = fs.readFileSync(file, 'utf-8')
+      let key
+      if (file.match('index.js')) {
+        key = 'js'
+      } else if (file.match('index.css')) {
+        key = 'css'
+      } else {
+        key = 'html'
+      }
+      data[key] = result
+      return data
+    }, {})
+  }
+}

docs/@views/api/samples/setPrecision/index.vue renamed to docs/@views/api/samples/getSymbol/index.vue

@@ -0,0 +1,17 @@
+import { init } from 'klinecharts'
+
+const chart = init('setPeriod-chart')
+
+chart.setSymbol({ ticker: 'TestSymbol' })
+chart.setPeriod({ span: 1, type: 'day' })
+chart.setDataLoader({
+  getBars: ({
+    callback
+  }) => {
+    fetch('https://klinecharts.com/datas/kline.json')
+      .then(res => res.json())
+      .then(dataList => {
+        callback(dataList)
+      })
+  }
+})

docs/@views/api/samples/getThousandsSeparator/index.js

@@ -0,0 +1,10 @@
+<script setup>
+import ChartPreview from '../../../../@components/ChartPreview.vue';
+import { data } from './index.data'
+</script>
+
+<template>
+  <ChartPreview
+    chartId="setPeriod-chart"
+    :code="data.js"/>
+</template>

docs/@views/api/samples/resetData/index.data.js

@@ -0,0 +1,20 @@
+import fs from 'fs'
+
+export default {
+  watch: ['./index.js'],
+  load (watchedFiles) {
+    return watchedFiles.reduce((data, file) => {
+      const result = fs.readFileSync(file, 'utf-8')
+      let key
+      if (file.match('index.js')) {
+        key = 'js'
+      } else if (file.match('index.css')) {
+        key = 'css'
+      } else {
+        key = 'html'
+      }
+      data[key] = result
+      return data
+    }, {})
+  }
+}