feat: klinecharts v9.0.1

klinecharts · Feb 16, 2023 · 6e1a681 · 6e1a681
1 parent 824f890
commit 6e1a681
Show file tree

Hide file tree

Showing 8 changed files with 40 additions and 34 deletions.
diff --git a/ng-sample/package-lock.json b/ng-sample/package-lock.json
diff --git a/ng-sample/package.json b/ng-sample/package.json
@@ -18,7 +18,7 @@
     "@angular/platform-browser": "^15.1.0",
     "@angular/platform-browser-dynamic": "^15.1.0",
     "@angular/router": "^15.1.0",
-    "klinecharts": "^9.0.0",
+    "klinecharts": "^9.0.1",
     "rxjs": "~7.8.0",
     "tslib": "^2.3.0",
     "zone.js": "~0.12.0"

diff --git a/ng-sample/src/app/components/tooltip.component.ts b/ng-sample/src/app/components/tooltip.component.ts
@@ -1,5 +1,5 @@
 import { Component, AfterViewInit, OnDestroy } from '@angular/core';
-import { init, dispose, Chart, Nullable, KLineData, TooltipShowRule, TooltipShowType } from 'klinecharts';
+import { init, dispose, Chart, Nullable, CandleTooltipCustomCallbackData, TooltipShowRule, TooltipShowType } from 'klinecharts';
 
 import generatedDataList from '../generatedDataList';
 
@@ -32,21 +32,22 @@ export class TooltipComponent implements AfterViewInit, OnDestroy {
         tooltip: {
           showType: candleShowType as TooltipShowType,
           showRule: candleShowRule as TooltipShowRule,
-          custom: function (kLineData: KLineData) {
-            const change =
-              ((kLineData.close - kLineData.open) / kLineData.open) * 100;
+          custom: (data: CandleTooltipCustomCallbackData) => {
+            const { prev, current } = data
+            const prevClose = (prev?.close ?? current.open)
+            const change = (current.close - prevClose) / prevClose * 100
             return [
-              { title: "open", value: kLineData.open.toFixed(2) },
-              { title: "close", value: kLineData.close.toFixed(2) },
+              { title: 'open', value: current.open.toFixed(2) },
+              { title: 'close', value: current.close.toFixed(2) },
               {
-                title: "Change: ",
+                title: 'Change: ',
                 value: {
                   text: `${change.toFixed(2)}%`,
-                  color: change < 0 ? "#EF5350" : "#26A69A",
-                },
-              },
-            ];
-          },
+                  color: change < 0 ? '#EF5350' : '#26A69A'
+                }
+              }
+            ]
+          }
         }
       },
       technicalIndicator: {

diff --git a/react-sample/package.json b/react-sample/package.json
@@ -10,7 +10,7 @@
     "@types/node": "^16.18.11",
     "@types/react": "^18.0.26",
     "@types/react-dom": "^18.0.10",
-    "klinecharts": "^9.0.0",
+    "klinecharts": "^9.0.1",
     "react": "^18.2.0",
     "react-dom": "^18.2.0",
     "react-scripts": "5.0.1",

diff --git a/react-sample/src/chart/ChartType.tsx b/react-sample/src/chart/ChartType.tsx
@@ -1,5 +1,5 @@
 import React, { useEffect, useRef } from 'react'
-import { init, dispose, Chart, CandleType,  } from 'klinecharts'
+import { init, dispose, Chart, CandleType, LineType } from 'klinecharts'
 import generatedDataList from '../generatedDataList'
 import Layout from '../Layout'
 
@@ -16,7 +16,9 @@ export default function ChartType () {
   const chart = useRef<Chart | null>()
 
   useEffect(() => {
-    chart.current = init('real-time-k-line')
+    chart.current = init('real-time-k-line', {
+    styles: { grid: { horizontal: { style: LineType.Dashed } } }
+    })
     chart.current?.applyNewData(generatedDataList())
     return () => {
       dispose('real-time-k-line')

diff --git a/react-sample/src/chart/Tooltip.tsx b/react-sample/src/chart/Tooltip.tsx
@@ -1,5 +1,5 @@
 import React, { useRef, useState, useEffect } from 'react'
-import { init, dispose, Chart, KLineData, TooltipShowRule, TooltipShowType } from 'klinecharts'
+import { init, dispose, Chart, TooltipShowRule, TooltipShowType, CandleTooltipCustomCallbackData } from 'klinecharts'
 import generatedDataList from '../generatedDataList'
 import Layout from '../Layout'
 
@@ -9,11 +9,13 @@ function getTooltipOptions (candleShowType: TooltipShowType, candleShowRule: Too
       tooltip: {
         showType: candleShowType,
         showRule: candleShowRule,
-        custom: (kLineData: KLineData) => {
-          const change = (kLineData.close - kLineData.open) / kLineData.open * 100
+        custom: (data: CandleTooltipCustomCallbackData) => {
+          const { prev, current } = data
+          const prevClose = (prev?.close ?? current.open)
+          const change = (current.close - prevClose) / prevClose * 100
           return [
-            { title: 'open', value: kLineData.open.toFixed(2) },
-            { title: 'close', value: kLineData.close.toFixed(2) },
+            { title: 'open', value: current.open.toFixed(2) },
+            { title: 'close', value: current.close.toFixed(2) },
             {
               title: 'Change: ',
               value: {

diff --git a/vue-sample/package.json b/vue-sample/package.json
@@ -9,7 +9,7 @@
     "lint": "eslint . --ext .vue,.js,.jsx,.cjs,.mjs --fix --ignore-path .gitignore"
   },
   "dependencies": {
-    "klinecharts": "^9.0.0",
+    "klinecharts": "^9.0.1",
     "vue": "^3.2.45"
   },
   "devDependencies": {

diff --git a/vue-sample/src/chart/Tooltip.vue b/vue-sample/src/chart/Tooltip.vue
@@ -40,12 +40,13 @@ function getTooltipOptions(candleShowType, candleShowRule, indicatorShowRule) {
       tooltip: {
         showType: candleShowType,
         showRule: candleShowRule,
-        custom: function (kLineData) {
-          const change =
-            ((kLineData.close - kLineData.open) / kLineData.open) * 100;
+        custom: (data) => {
+          const { prev, current } = data;
+          const prevClose = prev?.close ?? current.open;
+          const change = ((current.close - prevClose) / prevClose) * 100;
           return [
-            { title: "open", value: kLineData.open.toFixed(2) },
-            { title: "close", value: kLineData.close.toFixed(2) },
+            { title: "open", value: current.open.toFixed(2) },
+            { title: "close", value: current.close.toFixed(2) },
             {
               title: "Change: ",
               value: {