build: v9.6.0

README.md

@@ -1,6 +1,6 @@
 <div align="center">
   <a href="https://klinecharts.com">
-    <img style="height: 100px" src="https://cdn.nlark.com/yuque/0/2023/png/8403091/1682453956361-assets/web-upload/d21fec8e-7503-47ce-9f91-faceece21195.png"/>
+    <img style="height: 100px" src="./logo.svg"/>
   </a>
 </div>
 <h1 align="center">KLineChart</h1>

README.zh-CN.md

@@ -1,6 +1,6 @@
 <div align="center">
   <a href="https://klinecharts.com">
-    <img style="height: 100px" src="https://cdn.nlark.com/yuque/0/2023/png/8403091/1682453956361-assets/web-upload/d21fec8e-7503-47ce-9f91-faceece21195.png"/>
+    <img style="height: 100px" src="./logo.svg"/>
   </a>
 </div>
 <h1 align="center">KLineChart</h1>

docs/.vitepress/components/NotFound.vue

@@ -48,7 +48,7 @@ onMounted(() => {
 }
 
 .NotFound .logo img {
-  width: 76px;
+  width: 92px;
   margin: 0 16px
 }
 

docs/components/SampleChart.vue

@@ -68,8 +68,9 @@ watch(isDark, (newValue) => {
 })
 
 onUnmounted(() => {
-  if (observer) {
-    observer.unobserve(document.getElementById('container'))
+  const container = document.getElementById('container')
+  if (observer && container) {
+    observer.unobserve(container)
   }
   window.klinecharts.dispose('k-line-chart')
 })

docs/en-US/guide/changelog.md

@@ -1,5 +1,16 @@
 # 📠 Change Log
 
+## 9.6.0
+`2023-11-14`
++ 🖋️ Refactor the separator module.
++ 🆕 Chart api `init(ds, options)`, parameter `options` add `layout`.
++ 🆕 Instance api `createIndicator(value, isStack, paneOptions, callback)`, parameter `PaneOptions` add `position`.
++ 🆕 Style `candle.tooltip.custom` adds `turnover` string template.
++ 💄 Optimize the style `overlay.text` configuration.
++ 💄 Optimize the implementation of `utils.clone` and `utils.merge`.
++ 🐞 Fix the issue of multiple overlay styles display error.
++ 🐞 Fix the issue of multiple indicator styles display error.
+
 ## 9.5.4
 `2023-09-22`
 + 🐞 Fix the issue of not display the latest price line when the style `candle.type` is `area`.

docs/en-US/guide/chart-api.md

@@ -5,6 +5,11 @@
 (
    ds: string | HTMLElement,
    options?: {
+      layout?: Array<{
+         type: 'candle' | 'indicator' | 'xAxis'
+         content: Array<Indicator | string>
+         options: PaneOptions
+      }>
       locale?: string
       timezone?: string
       styles?: string | object
@@ -19,6 +24,7 @@
 Initialize a chart and return the chart instance.
 - `ds` container, can be dom element or element id.
 - `options` optional configuration items.
+   - `layout` custom layout, `content` and `options` refer to the input parameters `value` and `options` in the instance api [createIndicator](./instance-api#createindicator-value-isstack-paneoptions-callback).
    - `locale` language, built-in support for `zh-CN` and `en-US`.
    - `timezone` time zone name, such as 'Asia/Shanghai', if not set, it will automatically get the local time zone, please refer to [timezone list](https://en.wikipedia.org/wiki/List_of_tz_database_time_zones#List ).
    - `styles` It can be the style name registered through `klinecharts.registerStyles`, or it can be an object, a list of styles, see [styles](./styles.md) for details, and supports increments.

docs/en-US/guide/instance-api.md

@@ -304,6 +304,7 @@ Set load more callback function.
     height?: number
     minHeight?: number
     dragEnabled?: boolean
+    position?: 'top' | 'bottom'
     gap?: {
       top?: number
       bottom?: number
@@ -322,7 +323,8 @@ Create a technical indicator, the return value is a string that identifies the w
   - `id` window id, can be default
   - `height` window height, can be default
   - `minHeight` minimum height of the window, can be defaulted
-  - `dragEnbaled` Whether the window can be dragged to adjust the height, it can be defaulted
+  - `dragEnabled` Whether the window can be dragged to adjust the height, it can be defaulted
+  - `position` Only valid when creating a new pane
   - `gap` margins
     - `top` top margin, value less than 1 is a percentage
     - `bottom` bottom margin, value less than 1 is a percentage

docs/guide/changelog.md

@@ -1,5 +1,17 @@
 # 📠 更新日志
 
+## 9.6.0
+`2023-11-14`
++ 🖋️ 重构窗口之间的分割线模块。
++ 🆕 图表方法`init(ds, options)`，参数`options`新增`layout`。
++ 🆕 实例方法`createIndicator(value, isStack, paneOptions, callback)`，参数`paneOptions`新增`position`。
++ 🆕 样式`candle.tooltip.custom`新增`turnover`字符串模版。
++ 💄 优化样式`overlay.text`配置。
++ 💄 优化`utils.clone`和`utils.merge`实现。
++ 🐞 修复多个覆盖物样式显示不对问题。
++ 🐞 修复多个指标样式显示不对问题。
+
+
 ## 9.5.4
 `2023-09-22`
 + 🐞 修复样式`candle.type`是`area`时，最新价线不显示问题。

docs/guide/chart-api.md

@@ -5,6 +5,11 @@
 (
   ds: string | HTMLElement,
   options?: {
+    layout?: Array<{
+      type: 'candle' | 'indicator' | 'xAxis'
+      content: Array<Indicator | string>
+      options: PaneOptions
+    }>
     locale?: string
     styles?: string | object
     timezone?: string
@@ -19,6 +24,7 @@
 初始化一个图表，返回图表实例。
 - `ds` 容器，可以是dom元素或者元素id。
 - `options` 可选配置项。
+  - `layout` 自定义布局，`content`中的内容和`options`参考实例方法 [createIndicator](./instance-api#createindicator-value-isstack-paneoptions-callback) 中的入参`value`和`options`。
   - `locale` 语言，内置支持`zh-CN`和`en-US`。
   - `timezone` 时区名，如'Asia/Shanghai'，如果不设置会自动获取本机时区，时区对应名字列表请参阅[时区列表](https://en.wikipedia.org/wiki/List_of_tz_database_time_zones#List)。
   - `styles` 可以是通过`klinecharts.registerStyles`注册的样式名，也可以是object，样式列表，详情参阅[样式](./styles.md)，支持增量。

docs/guide/instance-api.md

@@ -306,6 +306,7 @@
     height?: number
     minHeight?: number
     dragEnabled?: boolean
+    position?: 'top' | 'bottom'
     gap?: {
       top?: number
       bottom?: number
@@ -324,7 +325,8 @@
   - `id` 窗口id，可缺省
   - `height` 窗口高度，可缺省
   - `minHeight` 窗口最小高度，可缺省
-  - `dragEnbaled` 窗口是否可以拖拽调整高度，可缺省
+  - `dragEnabled` 窗口是否可以拖拽调整高度，可缺省
+  - `position` 位置，仅仅在创建新的窗口时有效
   - `gap` 边距
     - `top` 上边距，值小余1则是百分比
     - `bottom` 下边距，值小余1则是百分比