{
62 | const ck = !innerChecked();
63 | props.onChange && props.onChange(ck);
64 | setInnderChecked(ck);
65 | }}>
66 | {innerChecked() ?
70 | )
71 | }
72 |
73 | export default Checkbox
74 |
--------------------------------------------------------------------------------
/src/component/empty/index.less:
--------------------------------------------------------------------------------
1 | @import (reference) '../../base.less';
2 |
3 | .@{prefix-cls}-empty {
4 | display: flex;
5 | flex-direction: column;
6 | align-items: center;
7 | justify-content: center;
8 | position: absolute;
9 | left: 0;
10 | top: 0;
11 | width: 100%;
12 | height: 100%;
13 | justify-content: center;
14 | align-items: center;
15 | z-index: 99;
16 | fill: var(--klinecharts-pro-text-second-color);
17 | color: var(--klinecharts-pro-text-second-color);
18 | .icon {
19 | width: 50px;
20 | height: 50px;
21 | }
22 | }
23 |
--------------------------------------------------------------------------------
/src/component/empty/index.tsx:
--------------------------------------------------------------------------------
1 | /**
2 | * Licensed under the Apache License, Version 2.0 (the "License");
3 | * you may not use this file except in compliance with the License.
4 | * You may obtain a copy of the License at
5 |
6 | * http://www.apache.org/licenses/LICENSE-2.0
7 |
8 | * Unless required by applicable law or agreed to in writing, software
9 | * distributed under the License is distributed on an "AS IS" BASIS,
10 | * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
11 | * See the License for the specific language governing permissions and
12 | * limitations under the License.
13 | */
14 |
15 |
16 | import { VoidComponent } from 'solid-js'
17 |
18 | const Empty: VoidComponent = () => {
19 | return (
20 |
22 |
28 |
29 | )
30 | }
31 |
32 | export default Empty
33 |
--------------------------------------------------------------------------------
/src/component/index.less:
--------------------------------------------------------------------------------
1 | @import './button/index.less';
2 | @import './checkbox/index.less';
3 | @import './list/index.less';
4 | @import './modal/index.less';
5 | @import './select/index.less';
6 | @import './input/index.less';
7 | @import './loading/index.less';
8 | @import './empty/index.less';
9 | @import './switch/index.less';
--------------------------------------------------------------------------------
/src/component/index.tsx:
--------------------------------------------------------------------------------
1 | /**
2 | * Licensed under the Apache License, Version 2.0 (the "License");
3 | * you may not use this file except in compliance with the License.
4 | * You may obtain a copy of the License at
5 |
6 | * http://www.apache.org/licenses/LICENSE-2.0
7 |
8 | * Unless required by applicable law or agreed to in writing, software
9 | * distributed under the License is distributed on an "AS IS" BASIS,
10 | * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
11 | * See the License for the specific language governing permissions and
12 | * limitations under the License.
13 | */
14 |
15 | import Button from './button'
16 | import Checkbox from './checkbox'
17 | import List from './list'
18 | import Modal from './modal'
19 | import Select, { SelectDataSourceItem } from './select'
20 | import Input from './input'
21 | import Loading from './loading'
22 | import Switch from './switch'
23 |
24 | export {
25 | Button, Checkbox, List, Modal, Select, Input, Loading, Switch
26 | }
27 |
28 | export type { SelectDataSourceItem }
--------------------------------------------------------------------------------
/src/component/input/index.less:
--------------------------------------------------------------------------------
1 | @import (reference) '../../base.less';
2 |
3 | .@{prefix-cls}-input {
4 | display: flex;
5 | flex-direction: row;
6 | align-items: center;
7 | position: relative;
8 | height: 34px;
9 | border: solid 1px var(--klinecharts-pro-border-color);
10 | border-radius: 2px;
11 | padding: 0 12px;
12 | font-size: 12px;
13 | color: var(--klinecharts-pro-text-color);
14 | box-sizing: border-box;
15 | cursor: pointer;
16 | &[data-status="focus"] {
17 | border-color: var(--klinecharts-pro-primary-color);
18 | }
19 | .prefix {
20 | display: flex;
21 | white-space: nowrap;
22 | padding-right: 10px;
23 | }
24 | .suffix {
25 | display: flex;
26 | white-space: nowrap;
27 | padding-left: 10px;
28 | }
29 | .value {
30 | width: 100%;
31 | border: none;
32 | outline: none;
33 | border: none;
34 | background: transparent;
35 | color: var(--klinecharts-pro-text-color);
36 | font-size: 14px;
37 | cursor: pointer;
38 | }
39 | }
40 |
--------------------------------------------------------------------------------
/src/component/input/index.tsx:
--------------------------------------------------------------------------------
1 | /**
2 | * Licensed under the Apache License, Version 2.0 (the "License");
3 | * you may not use this file except in compliance with the License.
4 | * You may obtain a copy of the License at
5 |
6 | * http://www.apache.org/licenses/LICENSE-2.0
7 |
8 | * Unless required by applicable law or agreed to in writing, software
9 | * distributed under the License is distributed on an "AS IS" BASIS,
10 | * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
11 | * See the License for the specific language governing permissions and
12 | * limitations under the License.
13 | */
14 |
15 | import { JSX, Component, mergeProps, Show, createSignal } from 'solid-js'
16 |
17 | export interface InputProps {
18 | class?: string
19 | style?: JSX.CSSProperties
20 | prefix?: JSX.Element
21 | suffix?: JSX.Element
22 | precision?: number
23 | min?: number
24 | max?: number
25 | placeholder?: string
26 | value: string | number
27 | disabled?: boolean
28 | onChange?: (v: string | number) => void
29 | }
30 |
31 | const Input: Component { input?.focus() }}>
43 |
44 | {props.prefix}
45 |
46 | { input = el }}
48 | class="value"
49 | placeholder={props.placeholder ?? ''}
50 | value={props.value}
51 | onFocus={() => { setStatus('focus') }}
52 | onBlur={() => { setStatus('normal') }}
53 | onChange={(e) => {
54 | // @ts-expect-error
55 | const v = e.target.value
56 | if ('precision' in props) {
57 | let reg
58 | const decimalDigit = Math.max(0, Math.floor(props.precision!))
59 | if (decimalDigit <= 0) {
60 | reg = new RegExp(/^[1-9]\d*$/)
61 | } else {
62 | reg = new RegExp('^\\d+\\.?\\d{0,' + decimalDigit + '}$')
63 | }
64 | if (v === '' || (reg.test(v) && +v >= props.min && +v <= props.max)) {
65 | props.onChange?.(v === '' ? v : +v)
66 | }
67 | } else {
68 | props.onChange?.(v)
69 | }
70 | }}/>
71 |
72 | {props.suffix}
73 |
74 |
75 | )
76 | }
77 |
78 | export default Input
79 |
--------------------------------------------------------------------------------
/src/component/list/index.less:
--------------------------------------------------------------------------------
1 | @import (reference) '../../base.less';
2 |
3 | .@{prefix-cls}-list {
4 | position: relative;
5 | list-style: none;
6 | margin: 0;
7 | padding: 0;
8 | overflow-y: auto;
9 | font-size: 14px;
10 | color: var(---klinecharts-pro-text-color);
11 | min-height: 200px;
12 | &::-webkit-scrollbar {
13 | width: 8px;
14 | height: 8px;
15 | }
16 | &::-webkit-scrollbar-thumb {
17 | width: 8px;
18 | height: 8px;
19 | border-radius: 4px;
20 | background-color: var(--klinecharts-pro-border-color);
21 | }
22 | li {
23 | display: flex;
24 | flex-direction: row;
25 | align-items: center;
26 | height: 40px;
27 | padding: 0 20px;
28 | box-sizing: border-box;
29 | cursor: pointer;
30 | &:hover {
31 | background-color: var(--klinecharts-pro-hover-background-color);
32 | }
33 | }
34 | }
--------------------------------------------------------------------------------
/src/component/list/index.tsx:
--------------------------------------------------------------------------------
1 | /**
2 | * Licensed under the Apache License, Version 2.0 (the "License");
3 | * you may not use this file except in compliance with the License.
4 | * You may obtain a copy of the License at
5 |
6 | * http://www.apache.org/licenses/LICENSE-2.0
7 |
8 | * Unless required by applicable law or agreed to in writing, software
9 | * distributed under the License is distributed on an "AS IS" BASIS,
10 | * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
11 | * See the License for the specific language governing permissions and
12 | * limitations under the License.
13 | */
14 |
15 | import { ParentComponent, ParentProps, JSX, Show } from 'solid-js'
16 |
17 | import Loading from '../loading'
18 | import Empty from '../empty'
19 |
20 | export interface ListProps extends ParentProps {
21 | class?: string
22 | style?: JSX.CSSProperties | string
23 | loading?: boolean
24 | dataSource?: any[]
25 | renderItem?: (data: any) => JSX.Element
26 | }
27 |
28 | const List: ParentComponent-
33 |
20 |
21 |
22 |
23 |
24 | )
25 | }
26 |
27 | export default Loding
28 |
--------------------------------------------------------------------------------
/src/component/modal/index.less:
--------------------------------------------------------------------------------
1 | @import (reference) '../../base.less';
2 |
3 | .@{prefix-cls}-modal {
4 | position: absolute;
5 | display: flex;
6 | flex-direction: row;
7 | justify-content: center;
8 | align-items: center;
9 | width: 100%;
10 | height: 100%;
11 | left: 0;
12 | top: 0;
13 | background-color: rgba(0, 0, 0, .2);
14 | z-index: 99;
15 | .inner {
16 | background-color: var(--klinecharts-pro-popover-background-color);
17 | box-shadow: 0 6px 12px 0 rgba(0, 0, 0, .3);
18 | border-radius: 4px;
19 | .title-container {
20 | display: flex;
21 | flex-direction: row;
22 | align-items: center;
23 | justify-content: space-between;
24 | height: 52px;
25 | padding: 0 26px;
26 | font-size: 18px;
27 | font-weight: bold;
28 | color: var(--klinecharts-pro-text-color);
29 | position: relative;
30 | box-sizing: border-box;
31 | border-bottom: solid 1px var(--klinecharts-pro-border-color);
32 | .close-icon {
33 | width: 14px;
34 | height: 14px;
35 | cursor: pointer;
36 | fill: var(--klinecharts-pro-text-color);
37 | &:hover {
38 | fill: var(--klinecharts-pro-primary-color);
39 | }
40 | }
41 | }
42 | .content-container {
43 | padding: 0 26px;
44 | min-height: 140px;
45 | }
46 | .button-container {
47 | display: flex;
48 | flex-direction: row;
49 | justify-content: flex-end;
50 | padding: 20px 20px 26px 20px;
51 | }
52 | }
53 | }
--------------------------------------------------------------------------------
/src/component/modal/index.tsx:
--------------------------------------------------------------------------------
1 | /**
2 | * Licensed under the Apache License, Version 2.0 (the "License");
3 | * you may not use this file except in compliance with the License.
4 | * You may obtain a copy of the License at
5 |
6 | * http://www.apache.org/licenses/LICENSE-2.0
7 |
8 | * Unless required by applicable law or agreed to in writing, software
9 | * distributed under the License is distributed on an "AS IS" BASIS,
10 | * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
11 | * See the License for the specific language governing permissions and
12 | * limitations under the License.
13 | */
14 |
15 | import { ParentComponent, ParentProps, JSX } from 'solid-js'
16 |
17 | import Button, { ButtonProps } from '../button'
18 |
19 | export interface ModalProps extends ParentProps {
20 | width?: number
21 | title?: JSX.Element
22 | buttons?: ButtonProps[]
23 | onClose?: () => void
24 | }
25 |
26 | const Modal: ParentComponent
30 |
66 | )
67 | }
68 |
69 | export default Modal
70 |
--------------------------------------------------------------------------------
/src/component/select/index.less:
--------------------------------------------------------------------------------
1 | @import (reference) '../../base.less';
2 |
3 | .@{prefix-cls}-select {
4 | position: relative;
5 | display: flex;
6 | flex-direction: row;
7 | align-items: center;
8 | cursor: pointer;
9 | height: 34px;
10 | width: 100px;
11 | outline: none;
12 | color: var(--klinecharts-pro-text-color);
13 | font-size: 14px;
14 | .selector-container {
15 | display: flex;
16 | flex-direction: row;
17 | align-items: center;
18 | height: 100%;
19 | width: 100%;
20 | padding: 0 10px;
21 | justify-content: space-between;
22 | border: solid 1px var(--klinecharts-pro-border-color);
23 | border-radius: 2px;
24 | box-sizing: border-box;
25 | .arrow {
26 | display: inline;
27 | width: 0;
28 | height: 0;
29 | border-left: 5px solid transparent;
30 | border-right: 5px solid transparent;
31 | border-top: 6px solid var(--klinecharts-pro-text-color);
32 | transition: all .2s;
33 | }
34 | }
35 | .drop-down-container {
36 | background-color: var(--klinecharts-pro-popover-background-color);
37 | box-shadow: 0 6px 12px 0 rgba(0, 0, 0, .3);
38 | position: absolute;
39 | left: 0;
40 | width: 100%;
41 | top: calc(100% + 1px);
42 | transition: all .2s;
43 | transform: scaleY(0);
44 | transform-origin: top;
45 | opacity: 0;
46 | z-index: 100;
47 | border-radius: 2px;
48 | max-height: 200px;
49 | overflow-y: auto;
50 | ul {
51 | list-style: none;
52 | margin: 0;
53 | padding: 0;
54 | overflow: hidden;
55 | li {
56 | display: flex;
57 | flex-direction: row;
58 | align-items: center;
59 | height: 40px;
60 | padding: 0 10px;
61 | &:first-child {
62 | border-top-left-radius: 2px;
63 | border-top-right-radius: 2px;
64 | }
65 | &:last-child {
66 | border-bottom-left-radius: 2px;
67 | border-bottom-right-radius: 2px;
68 | }
69 | &:hover {
70 | background-color: var(--klinecharts-pro-hover-background-color);
71 | }
72 | }
73 | }
74 | }
75 | }
76 |
77 | .@{prefix-cls}-select-show {
78 | .selector-container {
79 | border-color: var(--klinecharts-pro-primary-color)!important;
80 | .value {
81 | color: var(--klinecharts-pro-primary-color);
82 | }
83 | .arrow {
84 | transform: rotate(180deg);
85 | }
86 | }
87 | .drop-down-container {
88 | transform: scaleY(1)!important;
89 | opacity: 1!important;
90 | }
91 | }
92 |
--------------------------------------------------------------------------------
/src/component/select/index.tsx:
--------------------------------------------------------------------------------
1 | /**
2 | * Licensed under the Apache License, Version 2.0 (the "License");
3 | * you may not use this file except in compliance with the License.
4 | * You may obtain a copy of the License at
5 |
6 | * http://www.apache.org/licenses/LICENSE-2.0
7 |
8 | * Unless required by applicable law or agreed to in writing, software
9 | * distributed under the License is distributed on an "AS IS" BASIS,
10 | * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
11 | * See the License for the specific language governing permissions and
12 | * limitations under the License.
13 | */
14 |
15 | import { createSignal, Component, JSX } from 'solid-js'
16 |
17 | export interface SelectDataSourceItem {
18 | key: string
19 | text: JSX.Element
20 | }
21 |
22 | export interface SelectProps {
23 | class?: string
24 | style?: JSX.CSSProperties | string
25 | value?: JSX.Element
26 | valueKey?: string
27 | dataSource?: SelectDataSourceItem[] | string[]
28 | onSelected?: (data: SelectDataSourceItem | string) => void
29 | }
30 |
31 | const Select: Component
33 |
65 |
35 | {props.title}
36 |
43 |
44 |
46 | {props.children}
47 |
48 | {
49 | (props.buttons && props.buttons.length > 0) && (
50 |
62 | )
63 | }
64 | { setOpen(o => !o) }}
40 | onBlur={_ => { setOpen(false) }}>
41 |
74 | )
75 | }
76 |
77 | export default Select
78 |
--------------------------------------------------------------------------------
/src/component/switch/index.less:
--------------------------------------------------------------------------------
1 | @import (reference) '../../base.less';
2 |
3 | .@{prefix-cls}-switch {
4 | display: flex;
5 | flex-direction: row;
6 | position: relative;
7 | width: 36px;
8 | height: 18px;
9 | border-radius: 9px;
10 | cursor: pointer;
11 | .thumb {
12 | display: inline-block;
13 | position: absolute;
14 | top: 2px;
15 | width: 14px;
16 | height: 14px;
17 | border-radius: 50%;
18 | z-index: 10;
19 | background-color: #ffffff;
20 | transition: all .2s;
21 | }
22 |
23 | &.turn-off {
24 | background-color: var(--klinecharts-pro-border-color);
25 | .thumb {
26 | left: 2px;
27 | }
28 | }
29 | &.turn-on {
30 | background-color: var(--klinecharts-pro-primary-color);
31 | .thumb {
32 | left: 20px;
33 | }
34 | }
35 | }
36 |
--------------------------------------------------------------------------------
/src/component/switch/index.tsx:
--------------------------------------------------------------------------------
1 | /**
2 | * Licensed under the Apache License, Version 2.0 (the "License");
3 | * you may not use this file except in compliance with the License.
4 | * You may obtain a copy of the License at
5 |
6 | * http://www.apache.org/licenses/LICENSE-2.0
7 |
8 | * Unless required by applicable law or agreed to in writing, software
9 | * distributed under the License is distributed on an "AS IS" BASIS,
10 | * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
11 | * See the License for the specific language governing permissions and
12 | * limitations under the License.
13 | */
14 |
15 | import { Component, JSX } from 'solid-js'
16 |
17 | export interface SwitchProps {
18 | class?: string
19 | style?: JSX.CSSProperties | string
20 | open: boolean
21 | onChange: () => void
22 | }
23 |
24 | const Switch: Component
43 | {props.value}
44 |
45 |
46 | {
47 | (props.dataSource && props.dataSource.length > 0) &&
48 |
50 |
72 | }
73 | -
51 | {
52 | props.dataSource.map(data => {
53 | const d = data as SelectDataSourceItem
54 | // @ts-expect-error
55 | const v = d[props.valueKey ?? 'text'] ?? data
56 | return (
57 |
- { 59 | e.stopPropagation() 60 | if (props.value !== v) { 61 | props.onSelected?.(data) 62 | } 63 | setOpen(false) 64 | }}> 65 | {v} 66 | 67 | ) 68 | }) 69 | } 70 |
{
30 | props.onChange && props.onChange()
31 | }}>
32 |
34 |
35 | )
36 | }
37 |
38 | export default Switch
39 |
--------------------------------------------------------------------------------
/src/extension/abcd.ts:
--------------------------------------------------------------------------------
1 | /**
2 | * Licensed under the Apache License, Version 2.0 (the "License");
3 | * you may not use this file except in compliance with the License.
4 | * You may obtain a copy of the License at
5 |
6 | * http://www.apache.org/licenses/LICENSE-2.0
7 |
8 | * Unless required by applicable law or agreed to in writing, software
9 | * distributed under the License is distributed on an "AS IS" BASIS,
10 | * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
11 | * See the License for the specific language governing permissions and
12 | * limitations under the License.
13 | */
14 |
15 | import { OverlayTemplate, Coordinate } from 'klinecharts'
16 |
17 | const abcd: OverlayTemplate = {
18 | name: 'abcd',
19 | totalStep: 5,
20 | needDefaultPointFigure: true,
21 | needDefaultXAxisFigure: true,
22 | needDefaultYAxisFigure: true,
23 | createPointFigures: ({ coordinates }) => {
24 | let acLineCoordinates: Coordinate[] = []
25 | let bdLineCoordinates: Coordinate[] = []
26 |
27 | const tags = ['A', 'B', 'C', 'D']
28 | const texts = coordinates.map((coordinate, i) => ({
29 | ...coordinate,
30 | baseline: 'bottom',
31 | text: `(${tags[i]})`
32 | }))
33 | if (coordinates.length > 2) {
34 | acLineCoordinates = [coordinates[0], coordinates[2]]
35 | if (coordinates.length > 3) {
36 | bdLineCoordinates = [coordinates[1], coordinates[3]]
37 | }
38 | }
39 | return [
40 | {
41 | type: 'line',
42 | attrs: { coordinates }
43 | },
44 | {
45 | type: 'line',
46 | attrs: [{ coordinates: acLineCoordinates }, { coordinates: bdLineCoordinates }],
47 | styles: { style: 'dashed' }
48 | },
49 | {
50 | type: 'text',
51 | ignoreEvent: true,
52 | attrs: texts
53 | }
54 | ]
55 | }
56 | }
57 |
58 | export default abcd
59 |
--------------------------------------------------------------------------------
/src/extension/anyWaves.ts:
--------------------------------------------------------------------------------
1 | /**
2 | * Licensed under the Apache License, Version 2.0 (the "License");
3 | * you may not use this file except in compliance with the License.
4 | * You may obtain a copy of the License at
5 |
6 | * http://www.apache.org/licenses/LICENSE-2.0
7 |
8 | * Unless required by applicable law or agreed to in writing, software
9 | * distributed under the License is distributed on an "AS IS" BASIS,
10 | * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
11 | * See the License for the specific language governing permissions and
12 | * limitations under the License.
13 | */
14 |
15 | import { OverlayTemplate } from 'klinecharts'
16 |
17 | const anyWaves: OverlayTemplate = {
18 | name: 'anyWaves',
19 | totalStep: Number.MAX_SAFE_INTEGER,
20 | needDefaultPointFigure: true,
21 | needDefaultXAxisFigure: true,
22 | needDefaultYAxisFigure: true,
23 | createPointFigures: ({ coordinates }) => {
24 | const texts = coordinates.map((coordinate, i) => ({
25 | ...coordinate,
26 | text: `(${i})`,
27 | baseline: 'bottom'
28 | }))
29 | return [
30 | {
31 | type: 'line',
32 | attrs: { coordinates }
33 | },
34 | {
35 | type: 'text',
36 | ignoreEvent: true,
37 | attrs: texts
38 | }
39 | ]
40 | }
41 | }
42 |
43 | export default anyWaves
44 |
--------------------------------------------------------------------------------
/src/extension/arrow.ts:
--------------------------------------------------------------------------------
1 | /**
2 | * Licensed under the Apache License, Version 2.0 (the "License");
3 | * you may not use this file except in compliance with the License.
4 | * You may obtain a copy of the License at
5 |
6 | * http://www.apache.org/licenses/LICENSE-2.0
7 |
8 | * Unless required by applicable law or agreed to in writing, software
9 | * distributed under the License is distributed on an "AS IS" BASIS,
10 | * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
11 | * See the License for the specific language governing permissions and
12 | * limitations under the License.
13 | */
14 |
15 | import { OverlayTemplate, utils } from 'klinecharts'
16 |
17 | import { getRotateCoordinate } from './utils'
18 |
19 | const arrow: OverlayTemplate = {
20 | name: 'arrow',
21 | totalStep: 3,
22 | needDefaultPointFigure: true,
23 | needDefaultXAxisFigure: true,
24 | needDefaultYAxisFigure: true,
25 | createPointFigures: ({ coordinates }) => {
26 | if (coordinates.length > 1) {
27 | const flag = coordinates[1].x > coordinates[0].x ? 0 : 1
28 | const kb = utils.getLinearSlopeIntercept(coordinates[0], coordinates[1])
29 | let offsetAngle
30 | if (kb) {
31 | offsetAngle = Math.atan(kb[0]) + Math.PI * flag
32 | } else {
33 | if (coordinates[1].y > coordinates[0].y) {
34 | offsetAngle = Math.PI / 2
35 | } else {
36 | offsetAngle = Math.PI / 2 * 3
37 | }
38 | }
39 | const rotateCoordinate1 = getRotateCoordinate({ x: coordinates[1].x - 8, y: coordinates[1].y + 4 }, coordinates[1], offsetAngle)
40 | const rotateCoordinate2 = getRotateCoordinate({ x: coordinates[1].x - 8, y: coordinates[1].y - 4 }, coordinates[1], offsetAngle)
41 | return [
42 | {
43 | type: 'line',
44 | attrs: { coordinates }
45 | },
46 | {
47 | type: 'line',
48 | ignoreEvent: true,
49 | attrs: { coordinates: [rotateCoordinate1, coordinates[1], rotateCoordinate2] }
50 | }
51 | ]
52 | }
53 | return []
54 | }
55 | }
56 |
57 | export default arrow
58 |
--------------------------------------------------------------------------------
/src/extension/circle.ts:
--------------------------------------------------------------------------------
1 | /**
2 | * Licensed under the Apache License, Version 2.0 (the "License");
3 | * you may not use this file except in compliance with the License.
4 | * You may obtain a copy of the License at
5 |
6 | * http://www.apache.org/licenses/LICENSE-2.0
7 |
8 | * Unless required by applicable law or agreed to in writing, software
9 | * distributed under the License is distributed on an "AS IS" BASIS,
10 | * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
11 | * See the License for the specific language governing permissions and
12 | * limitations under the License.
13 | */
14 |
15 | import { OverlayTemplate } from 'klinecharts'
16 |
17 | import { getDistance } from './utils'
18 |
19 | const circle: OverlayTemplate = {
20 | name: 'circle',
21 | totalStep: 3,
22 | needDefaultPointFigure: true,
23 | needDefaultXAxisFigure: true,
24 | needDefaultYAxisFigure: true,
25 | styles: {
26 | circle: {
27 | color: 'rgba(22, 119, 255, 0.15)'
28 | }
29 | },
30 | createPointFigures: ({ coordinates }) => {
31 | if (coordinates.length > 1) {
32 | const radius = getDistance(coordinates[0], coordinates[1])
33 | return {
34 | type: 'circle',
35 | attrs: {
36 | ...coordinates[0],
37 | r: radius
38 | },
39 | styles: { style: 'stroke_fill' }
40 | }
41 | }
42 | return []
43 | }
44 | }
45 |
46 | export default circle
47 |
--------------------------------------------------------------------------------
/src/extension/eightWaves.ts:
--------------------------------------------------------------------------------
1 | /**
2 | * Licensed under the Apache License, Version 2.0 (the "License");
3 | * you may not use this file except in compliance with the License.
4 | * You may obtain a copy of the License at
5 |
6 | * http://www.apache.org/licenses/LICENSE-2.0
7 |
8 | * Unless required by applicable law or agreed to in writing, software
9 | * distributed under the License is distributed on an "AS IS" BASIS,
10 | * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
11 | * See the License for the specific language governing permissions and
12 | * limitations under the License.
13 | */
14 |
15 | import { OverlayTemplate } from 'klinecharts'
16 |
17 | const eightWaves: OverlayTemplate = {
18 | name: 'eightWaves',
19 | totalStep: 10,
20 | needDefaultPointFigure: true,
21 | needDefaultXAxisFigure: true,
22 | needDefaultYAxisFigure: true,
23 | createPointFigures: ({ coordinates }) => {
24 | const texts = coordinates.map((coordinate, i) => ({
25 | ...coordinate,
26 | text: `(${i})`,
27 | baseline: 'bottom'
28 | }))
29 | return [
30 | {
31 | type: 'line',
32 | attrs: { coordinates }
33 | },
34 | {
35 | type: 'text',
36 | ignoreEvent: true,
37 | attrs: texts
38 | }
39 | ]
40 | }
41 | }
42 |
43 | export default eightWaves
44 |
--------------------------------------------------------------------------------
/src/extension/fibonacciCircle.ts:
--------------------------------------------------------------------------------
1 | /**
2 | * Licensed under the Apache License, Version 2.0 (the "License");
3 | * you may not use this file except in compliance with the License.
4 | * You may obtain a copy of the License at
5 |
6 | * http://www.apache.org/licenses/LICENSE-2.0
7 |
8 | * Unless required by applicable law or agreed to in writing, software
9 | * distributed under the License is distributed on an "AS IS" BASIS,
10 | * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
11 | * See the License for the specific language governing permissions and
12 | * limitations under the License.
13 | */
14 |
15 | import { OverlayTemplate, CircleAttrs, TextAttrs } from 'klinecharts'
16 |
17 | const fibonacciCircle: OverlayTemplate = {
18 | name: 'fibonacciCircle',
19 | totalStep: 3,
20 | needDefaultPointFigure: true,
21 | needDefaultXAxisFigure: true,
22 | needDefaultYAxisFigure: true,
23 | createPointFigures: ({ coordinates }) => {
24 | if (coordinates.length > 1) {
25 | const xDis = Math.abs(coordinates[0].x - coordinates[1].x)
26 | const yDis = Math.abs(coordinates[0].y - coordinates[1].y)
27 | const radius = Math.sqrt(xDis * xDis + yDis * yDis)
28 | const percents = [0.236, 0.382, 0.5, 0.618, 0.786, 1]
29 | const circles: CircleAttrs[] = []
30 | const texts: TextAttrs[] = []
31 | percents.forEach(percent => {
32 | const r = radius * percent
33 | circles.push(
34 | { ...coordinates[0], r }
35 | )
36 | texts.push({
37 | x: coordinates[0].x,
38 | y: coordinates[0].y + r + 6,
39 | text: `${(percent * 100).toFixed(1)}%`
40 | })
41 | })
42 | return [
43 | {
44 | type: 'circle',
45 | attrs: circles,
46 | styles: { style: 'stroke' }
47 | },
48 | {
49 | type: 'text',
50 | ignoreEvent: true,
51 | attrs: texts
52 | }
53 | ]
54 | }
55 | return []
56 | }
57 | }
58 |
59 | export default fibonacciCircle
60 |
--------------------------------------------------------------------------------
/src/extension/fibonacciExtension.ts:
--------------------------------------------------------------------------------
1 | /**
2 | * Licensed under the Apache License, Version 2.0 (the "License");
3 | * you may not use this file except in compliance with the License.
4 | * You may obtain a copy of the License at
5 |
6 | * http://www.apache.org/licenses/LICENSE-2.0
7 |
8 | * Unless required by applicable law or agreed to in writing, software
9 | * distributed under the License is distributed on an "AS IS" BASIS,
10 | * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
11 | * See the License for the specific language governing permissions and
12 | * limitations under the License.
13 | */
14 |
15 | import { OverlayTemplate, LineAttrs, TextAttrs } from 'klinecharts'
16 |
17 | const fibonacciExtension: OverlayTemplate = {
18 | name: 'fibonacciExtension',
19 | totalStep: 4,
20 | needDefaultPointFigure: true,
21 | needDefaultXAxisFigure: true,
22 | needDefaultYAxisFigure: true,
23 | createPointFigures: ({ coordinates, overlay, precision }) => {
24 | const fbLines: LineAttrs[] = []
25 | const texts: TextAttrs[] = []
26 | if (coordinates.length > 2) {
27 | const points = overlay.points
28 | // @ts-expect-error
29 | const valueDif = points[1].value - points[0].value
30 | const yDif = coordinates[1].y - coordinates[0].y
31 | const percents = [0, 0.236, 0.382, 0.5, 0.618, 0.786, 1]
32 | const textX = coordinates[2].x > coordinates[1].x ? coordinates[1].x : coordinates[2].x
33 | percents.forEach(percent => {
34 | const y = coordinates[2].y + yDif * percent
35 | // @ts-expect-error
36 | const price = (points[2].value + valueDif * percent).toFixed(precision.price)
37 | fbLines.push({ coordinates: [{ x: coordinates[1].x, y }, { x: coordinates[2].x, y }] })
38 | texts.push({
39 | x: textX,
40 | y,
41 | text: `${price} (${(percent * 100).toFixed(1)}%)`,
42 | baseline: 'bottom'
43 | })
44 | })
45 | }
46 | return [
47 | {
48 | type: 'line',
49 | attrs: { coordinates },
50 | styles: { style: 'dashed' }
51 | },
52 | {
53 | type: 'line',
54 | attrs: fbLines
55 | },
56 | {
57 | type: 'text',
58 | ignoreEvent: true,
59 | attrs: texts
60 | }
61 | ]
62 | }
63 | }
64 |
65 | export default fibonacciExtension
66 |
--------------------------------------------------------------------------------
/src/extension/fibonacciSegment.ts:
--------------------------------------------------------------------------------
1 | /**
2 | * Licensed under the Apache License, Version 2.0 (the "License");
3 | * you may not use this file except in compliance with the License.
4 | * You may obtain a copy of the License at
5 |
6 | * http://www.apache.org/licenses/LICENSE-2.0
7 |
8 | * Unless required by applicable law or agreed to in writing, software
9 | * distributed under the License is distributed on an "AS IS" BASIS,
10 | * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
11 | * See the License for the specific language governing permissions and
12 | * limitations under the License.
13 | */
14 |
15 | import { OverlayTemplate, LineAttrs, TextAttrs } from 'klinecharts'
16 |
17 | const fibonacciSegment: OverlayTemplate = {
18 | name: 'fibonacciSegment',
19 | totalStep: 3,
20 | needDefaultPointFigure: true,
21 | needDefaultXAxisFigure: true,
22 | needDefaultYAxisFigure: true,
23 | createPointFigures: ({ coordinates, overlay, precision }) => {
24 | const lines: LineAttrs[] = []
25 | const texts: TextAttrs[] = []
26 | if (coordinates.length > 1) {
27 | const textX = coordinates[1].x > coordinates[0].x ? coordinates[0].x : coordinates[1].x
28 | const percents = [1, 0.786, 0.618, 0.5, 0.382, 0.236, 0]
29 | const yDif = coordinates[0].y - coordinates[1].y
30 | const points = overlay.points
31 | // @ts-expect-error
32 | const valueDif = points[0].value - points[1].value
33 | percents.forEach(percent => {
34 | const y = coordinates[1].y + yDif * percent
35 | // @ts-expect-error
36 | const price = (points[1].value + valueDif * percent).toFixed(precision.price)
37 | lines.push({ coordinates: [{ x: coordinates[0].x, y }, { x: coordinates[1].x, y }] })
38 | texts.push({
39 | x: textX,
40 | y,
41 | text: `${price} (${(percent * 100).toFixed(1)}%)`,
42 | baseline: 'bottom'
43 | })
44 | })
45 | }
46 | return [
47 | {
48 | type: 'line',
49 | attrs: lines
50 | }, {
51 | type: 'text',
52 | ignoreEvent: true,
53 | attrs: texts
54 | }
55 | ]
56 | }
57 | }
58 |
59 | export default fibonacciSegment
60 |
--------------------------------------------------------------------------------
/src/extension/fibonacciSpeedResistanceFan.ts:
--------------------------------------------------------------------------------
1 | /**
2 | * Licensed under the Apache License, Version 2.0 (the "License");
3 | * you may not use this file except in compliance with the License.
4 | * You may obtain a copy of the License at
5 |
6 | * http://www.apache.org/licenses/LICENSE-2.0
7 |
8 | * Unless required by applicable law or agreed to in writing, software
9 | * distributed under the License is distributed on an "AS IS" BASIS,
10 | * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
11 | * See the License for the specific language governing permissions and
12 | * limitations under the License.
13 | */
14 |
15 | import { OverlayTemplate, LineAttrs, TextAttrs } from 'klinecharts'
16 |
17 | import { getRayLine } from './utils'
18 |
19 | const fibonacciSpeedResistanceFan: OverlayTemplate = {
20 | name: 'fibonacciSpeedResistanceFan',
21 | totalStep: 3,
22 | needDefaultPointFigure: true,
23 | needDefaultXAxisFigure: true,
24 | needDefaultYAxisFigure: true,
25 | createPointFigures: ({ coordinates, bounding }) => {
26 | const lines1: LineAttrs[] = []
27 | let lines2: LineAttrs[] = []
28 | const texts: TextAttrs[] = []
29 | if (coordinates.length > 1) {
30 | const xOffset = coordinates[1].x > coordinates[0].x ? -38 : 4
31 | const yOffset = coordinates[1].y > coordinates[0].y ? -2 : 20
32 | const xDistance = coordinates[1].x - coordinates[0].x
33 | const yDistance = coordinates[1].y - coordinates[0].y
34 | const percents = [1, 0.75, 0.618, 0.5, 0.382, 0.25, 0]
35 | percents.forEach(percent => {
36 | const x = coordinates[1].x - xDistance * percent
37 | const y = coordinates[1].y - yDistance * percent
38 | lines1.push({ coordinates: [{ x, y: coordinates[0].y }, { x, y: coordinates[1].y }] })
39 | lines1.push({ coordinates: [{ x: coordinates[0].x, y }, { x: coordinates[1].x, y }] })
40 | lines2 = lines2.concat(getRayLine([coordinates[0], { x, y: coordinates[1].y }], bounding))
41 | lines2 = lines2.concat(getRayLine([coordinates[0], { x: coordinates[1].x, y }], bounding))
42 | texts.unshift({
43 | x: coordinates[0].x + xOffset,
44 | y: y + 10,
45 | text: `${percent.toFixed(3)}`
46 | })
47 | texts.unshift({
48 | x: x - 18,
49 | y: coordinates[0].y + yOffset,
50 | text: `${percent.toFixed(3)}`
51 | })
52 | })
53 | }
54 | return [
55 | {
56 | type: 'line',
57 | attrs: lines1
58 | },
59 | {
60 | type: 'line',
61 | attrs: lines2
62 | },
63 | {
64 | type: 'text',
65 | ignoreEvent: true,
66 | attrs: texts
67 | }
68 | ]
69 | }
70 | }
71 |
72 | export default fibonacciSpeedResistanceFan
73 |
--------------------------------------------------------------------------------
/src/extension/fibonacciSpiral.ts:
--------------------------------------------------------------------------------
1 | /**
2 | * Licensed under the Apache License, Version 2.0 (the "License");
3 | * you may not use this file except in compliance with the License.
4 | * You may obtain a copy of the License at
5 |
6 | * http://www.apache.org/licenses/LICENSE-2.0
7 |
8 | * Unless required by applicable law or agreed to in writing, software
9 | * distributed under the License is distributed on an "AS IS" BASIS,
10 | * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
11 | * See the License for the specific language governing permissions and
12 | * limitations under the License.
13 | */
14 |
15 | import { OverlayTemplate, utils, registerFigure } from 'klinecharts'
16 |
17 | import { getDistance, getRotateCoordinate, getRayLine } from './utils'
18 |
19 | const fibonacciSpiral: OverlayTemplate = {
20 | name: 'fibonacciSpiral',
21 | totalStep: 3,
22 | needDefaultPointFigure: true,
23 | needDefaultXAxisFigure: true,
24 | needDefaultYAxisFigure: true,
25 | createPointFigures: ({ coordinates, bounding }) => {
26 | if (coordinates.length > 1) {
27 | const startRadius = getDistance(coordinates[0], coordinates[1]) / Math.sqrt(24)
28 | const flag = coordinates[1].x > coordinates[0].x ? 0 : 1
29 | const kb = utils.getLinearSlopeIntercept(coordinates[0], coordinates[1])
30 | let offsetAngle
31 | if (kb) {
32 | offsetAngle = Math.atan(kb[0]) + Math.PI * flag
33 | } else {
34 | if (coordinates[1].y > coordinates[0].y) {
35 | offsetAngle = Math.PI / 2
36 | } else {
37 | offsetAngle = Math.PI / 2 * 3
38 | }
39 | }
40 | const rotateCoordinate1 = getRotateCoordinate(
41 | { x: coordinates[0].x - startRadius, y: coordinates[0].y },
42 | coordinates[0],
43 | offsetAngle
44 | )
45 | const rotateCoordinate2 = getRotateCoordinate(
46 | { x: coordinates[0].x - startRadius, y: coordinates[0].y - startRadius },
47 | coordinates[0],
48 | offsetAngle
49 | )
50 | const arcs = [{
51 | ...rotateCoordinate1,
52 | r: startRadius,
53 | startAngle: offsetAngle,
54 | endAngle: offsetAngle + Math.PI / 2
55 | }, {
56 | ...rotateCoordinate2,
57 | r: startRadius * 2,
58 | startAngle: offsetAngle + Math.PI / 2,
59 | endAngle: offsetAngle + Math.PI
60 | }]
61 | let x = coordinates[0].x - startRadius
62 | let y = coordinates[0].y - startRadius
63 | for (let i = 2; i < 9; i++) {
64 | const r = arcs[i - 2].r + arcs[i - 1].r
65 | let startAngle = 0
66 | switch (i % 4) {
67 | case 0: {
68 | startAngle = offsetAngle
69 | x -= (arcs[i - 2].r)
70 | break
71 | }
72 | case 1: {
73 | startAngle = offsetAngle + Math.PI / 2
74 | y -= arcs[i - 2].r
75 | break
76 | }
77 | case 2: {
78 | startAngle = offsetAngle + Math.PI
79 | x += (arcs[i - 2].r)
80 | break
81 | }
82 | case 3: {
83 | startAngle = offsetAngle + Math.PI / 2 * 3
84 | y += arcs[i - 2].r
85 | break
86 | }
87 | }
88 | const endAngle = startAngle + Math.PI / 2
89 | const rotateCoordinate = getRotateCoordinate({ x, y }, coordinates[0], offsetAngle)
90 | arcs.push({
91 | ...rotateCoordinate,
92 | r,
93 | startAngle,
94 | endAngle
95 | })
96 | }
97 | return [
98 | {
99 | type: 'arc',
100 | attrs: arcs
101 | },
102 | {
103 | type: 'line',
104 | attrs: getRayLine(coordinates, bounding)
105 | }
106 | ]
107 | }
108 | return []
109 | }
110 | }
111 |
112 | export default fibonacciSpiral
113 |
--------------------------------------------------------------------------------
/src/extension/fiveWaves.ts:
--------------------------------------------------------------------------------
1 | /**
2 | * Licensed under the Apache License, Version 2.0 (the "License");
3 | * you may not use this file except in compliance with the License.
4 | * You may obtain a copy of the License at
5 |
6 | * http://www.apache.org/licenses/LICENSE-2.0
7 |
8 | * Unless required by applicable law or agreed to in writing, software
9 | * distributed under the License is distributed on an "AS IS" BASIS,
10 | * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
11 | * See the License for the specific language governing permissions and
12 | * limitations under the License.
13 | */
14 |
15 | import { OverlayTemplate } from 'klinecharts'
16 |
17 | const fiveWaves: OverlayTemplate = {
18 | name: 'fiveWaves',
19 | totalStep: 7,
20 | needDefaultPointFigure: true,
21 | needDefaultXAxisFigure: true,
22 | needDefaultYAxisFigure: true,
23 | createPointFigures: ({ coordinates }) => {
24 | const texts = coordinates.map((coordinate, i) => ({
25 | ...coordinate,
26 | text: `(${i})`,
27 | baseline: 'bottom'
28 | }))
29 | return [
30 | {
31 | type: 'line',
32 | attrs: { coordinates }
33 | },
34 | {
35 | type: 'text',
36 | ignoreEvent: true,
37 | attrs: texts
38 | }
39 | ]
40 | }
41 | }
42 |
43 | export default fiveWaves
44 |
--------------------------------------------------------------------------------
/src/extension/gannBox.ts:
--------------------------------------------------------------------------------
1 | /**
2 | * Licensed under the Apache License, Version 2.0 (the "License");
3 | * you may not use this file except in compliance with the License.
4 | * You may obtain a copy of the License at
5 |
6 | * http://www.apache.org/licenses/LICENSE-2.0
7 |
8 | * Unless required by applicable law or agreed to in writing, software
9 | * distributed under the License is distributed on an "AS IS" BASIS,
10 | * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
11 | * See the License for the specific language governing permissions and
12 | * limitations under the License.
13 | */
14 |
15 | import { OverlayTemplate } from 'klinecharts'
16 |
17 | const gannBox: OverlayTemplate = {
18 | name: 'gannBox',
19 | totalStep: 3,
20 | needDefaultPointFigure: true,
21 | needDefaultXAxisFigure: true,
22 | needDefaultYAxisFigure: true,
23 | styles: {
24 | polygon: {
25 | color: 'rgba(22, 119, 255, 0.15)'
26 | }
27 | },
28 | createPointFigures: ({ coordinates }) => {
29 | if (coordinates.length > 1) {
30 | const quarterYDis = (coordinates[1].y - coordinates[0].y) / 4
31 | const xDis = coordinates[1].x - coordinates[0].x
32 | const dashedLines = [
33 | { coordinates: [coordinates[0], { x: coordinates[1].x, y: coordinates[1].y - quarterYDis }] },
34 | { coordinates: [coordinates[0], { x: coordinates[1].x, y: coordinates[1].y - quarterYDis * 2 }] },
35 | { coordinates: [{ x: coordinates[0].x, y: coordinates[1].y }, { x: coordinates[1].x, y: coordinates[0].y + quarterYDis }] },
36 | { coordinates: [{ x: coordinates[0].x, y: coordinates[1].y }, { x: coordinates[1].x, y: coordinates[0].y + quarterYDis * 2 }] },
37 |
38 | { coordinates: [{ ...coordinates[0] }, { x: coordinates[0].x + xDis * 0.236, y: coordinates[1].y }] },
39 | { coordinates: [{ ...coordinates[0] }, { x: coordinates[0].x + xDis * 0.5, y: coordinates[1].y }] },
40 |
41 | { coordinates: [{ x: coordinates[0].x, y: coordinates[1].y }, { x: coordinates[0].x + xDis * 0.236, y: coordinates[0].y }]},
42 | { coordinates: [{ x: coordinates[0].x, y: coordinates[1].y }, { x: coordinates[0].x + xDis * 0.5, y: coordinates[0].y }] }
43 | ]
44 | const solidLines = [
45 | { coordinates: [coordinates[0], coordinates[1]] },
46 | { coordinates: [{ x: coordinates[0].x, y: coordinates[1].y }, { x: coordinates[1].x, y: coordinates[0].y }] }
47 | ]
48 | return [
49 | {
50 | type: 'line',
51 | attrs: [
52 | { coordinates: [coordinates[0], { x: coordinates[1].x, y: coordinates[0].y }] },
53 | { coordinates: [{ x: coordinates[1].x, y: coordinates[0].y }, coordinates[1]] },
54 | { coordinates: [coordinates[1], { x: coordinates[0].x, y: coordinates[1].y }] },
55 | { coordinates: [{ x: coordinates[0].x, y: coordinates[1].y }, coordinates[0]] }
56 | ]
57 | },
58 | {
59 | type: 'polygon',
60 | ignoreEvent: true,
61 | attrs: {
62 | coordinates: [
63 | coordinates[0],
64 | { x: coordinates[1].x, y: coordinates[0].y },
65 | coordinates[1],
66 | { x: coordinates[0].x, y: coordinates[1].y }
67 | ]
68 | },
69 | styles: { style: 'fill' }
70 | },
71 | {
72 | type: 'line',
73 | attrs: dashedLines,
74 | styles: { style: 'dashed' }
75 | },
76 | {
77 | type: 'line',
78 | attrs: solidLines
79 | }
80 | ]
81 | }
82 | return []
83 | }
84 | }
85 |
86 | export default gannBox
87 |
--------------------------------------------------------------------------------
/src/extension/index.ts:
--------------------------------------------------------------------------------
1 | import arrow from './arrow'
2 |
3 | import circle from './circle'
4 | import rect from './rect'
5 | import parallelogram from './parallelogram'
6 | import triangle from './triangle'
7 | import fibonacciCircle from './fibonacciCircle'
8 | import fibonacciSegment from './fibonacciSegment'
9 | import fibonacciSpiral from './fibonacciSpiral'
10 | import fibonacciSpeedResistanceFan from './fibonacciSpeedResistanceFan'
11 | import fibonacciExtension from './fibonacciExtension'
12 | import gannBox from './gannBox'
13 | import threeWaves from './threeWaves'
14 | import fiveWaves from './fiveWaves'
15 | import eightWaves from './eightWaves'
16 | import anyWaves from './anyWaves'
17 | import abcd from './abcd'
18 | import xabcd from './xabcd'
19 |
20 | const overlays = [
21 | arrow,
22 | circle, rect, triangle, parallelogram,
23 | fibonacciCircle, fibonacciSegment, fibonacciSpiral,
24 | fibonacciSpeedResistanceFan, fibonacciExtension, gannBox,
25 | threeWaves, fiveWaves, eightWaves, anyWaves, abcd, xabcd
26 | ]
27 |
28 | export default overlays
29 |
--------------------------------------------------------------------------------
/src/extension/parallelogram.ts:
--------------------------------------------------------------------------------
1 | /**
2 | * Licensed under the Apache License, Version 2.0 (the "License");
3 | * you may not use this file except in compliance with the License.
4 | * You may obtain a copy of the License at
5 |
6 | * http://www.apache.org/licenses/LICENSE-2.0
7 |
8 | * Unless required by applicable law or agreed to in writing, software
9 | * distributed under the License is distributed on an "AS IS" BASIS,
10 | * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
11 | * See the License for the specific language governing permissions and
12 | * limitations under the License.
13 | */
14 |
15 | import { OverlayTemplate } from 'klinecharts'
16 |
17 | const parallelogram: OverlayTemplate = {
18 | name: 'parallelogram',
19 | totalStep: 4,
20 | needDefaultPointFigure: true,
21 | needDefaultXAxisFigure: true,
22 | needDefaultYAxisFigure: true,
23 | styles: {
24 | polygon: {
25 | color: 'rgba(22, 119, 255, 0.15)'
26 | }
27 | },
28 | createPointFigures: ({ coordinates }) => {
29 | if (coordinates.length === 2) {
30 | return [
31 | {
32 | type: 'line',
33 | ignoreEvent: true,
34 | attrs: { coordinates }
35 | }
36 | ]
37 | }
38 | if (coordinates.length === 3) {
39 | const coordinate = { x: coordinates[0].x + (coordinates[2].x - coordinates[1].x), y: coordinates[2].y }
40 | return [
41 | {
42 | type: 'polygon',
43 | attrs: { coordinates: [coordinates[0], coordinates[1], coordinates[2], coordinate] },
44 | styles: { style: 'stroke_fill' }
45 | }
46 | ]
47 | }
48 | return []
49 | },
50 | performEventPressedMove: ({ points, performPointIndex, performPoint }) => {
51 | if (performPointIndex < 2) {
52 | // @ts-expect-error
53 | points[0].price = performPoint.price
54 | // @ts-expect-error
55 | points[1].price = performPoint.price
56 | }
57 | },
58 | performEventMoveForDrawing: ({ currentStep, points, performPoint }) => {
59 | if (currentStep === 2) {
60 | // @ts-expect-error
61 | points[0].price = performPoint.price
62 | }
63 | }
64 | }
65 |
66 | export default parallelogram
67 |
--------------------------------------------------------------------------------
/src/extension/rect.ts:
--------------------------------------------------------------------------------
1 | /**
2 | * Licensed under the Apache License, Version 2.0 (the "License");
3 | * you may not use this file except in compliance with the License.
4 | * You may obtain a copy of the License at
5 |
6 | * http://www.apache.org/licenses/LICENSE-2.0
7 |
8 | * Unless required by applicable law or agreed to in writing, software
9 | * distributed under the License is distributed on an "AS IS" BASIS,
10 | * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
11 | * See the License for the specific language governing permissions and
12 | * limitations under the License.
13 | */
14 |
15 | import { OverlayTemplate } from 'klinecharts'
16 |
17 | const rect: OverlayTemplate = {
18 | name: 'rect',
19 | totalStep: 3,
20 | needDefaultPointFigure: true,
21 | needDefaultXAxisFigure: true,
22 | needDefaultYAxisFigure: true,
23 | styles: {
24 | polygon: {
25 | color: 'rgba(22, 119, 255, 0.15)'
26 | }
27 | },
28 | createPointFigures: ({ coordinates }) => {
29 | if (coordinates.length > 1) {
30 | return [
31 | {
32 | type: 'polygon',
33 | attrs: {
34 | coordinates: [
35 | coordinates[0],
36 | { x: coordinates[1].x, y: coordinates[0].y },
37 | coordinates[1],
38 | { x: coordinates[0].x, y: coordinates[1].y }
39 | ]
40 | },
41 | styles: { style: 'stroke_fill' }
42 | }
43 | ]
44 | }
45 | return []
46 | }
47 | }
48 |
49 | export default rect
50 |
--------------------------------------------------------------------------------
/src/extension/threeWaves.ts:
--------------------------------------------------------------------------------
1 | /**
2 | * Licensed under the Apache License, Version 2.0 (the "License");
3 | * you may not use this file except in compliance with the License.
4 | * You may obtain a copy of the License at
5 |
6 | * http://www.apache.org/licenses/LICENSE-2.0
7 |
8 | * Unless required by applicable law or agreed to in writing, software
9 | * distributed under the License is distributed on an "AS IS" BASIS,
10 | * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
11 | * See the License for the specific language governing permissions and
12 | * limitations under the License.
13 | */
14 |
15 | import { OverlayTemplate } from 'klinecharts'
16 |
17 | const threeWaves: OverlayTemplate = {
18 | name: 'threeWaves',
19 | totalStep: 5,
20 | needDefaultPointFigure: true,
21 | needDefaultXAxisFigure: true,
22 | needDefaultYAxisFigure: true,
23 | createPointFigures: ({ coordinates }) => {
24 | const texts = coordinates.map((coordinate, i) => ({
25 | ...coordinate,
26 | text: `(${i})`,
27 | baseline: 'bottom'
28 | }))
29 | return [
30 | {
31 | type: 'line',
32 | attrs: { coordinates }
33 | },
34 | {
35 | type: 'text',
36 | ignoreEvent: true,
37 | attrs: texts
38 | }
39 | ]
40 | }
41 | }
42 |
43 | export default threeWaves
44 |
--------------------------------------------------------------------------------
/src/extension/triangle.ts:
--------------------------------------------------------------------------------
1 | /**
2 | * Licensed under the Apache License, Version 2.0 (the "License");
3 | * you may not use this file except in compliance with the License.
4 | * You may obtain a copy of the License at
5 |
6 | * http://www.apache.org/licenses/LICENSE-2.0
7 |
8 | * Unless required by applicable law or agreed to in writing, software
9 | * distributed under the License is distributed on an "AS IS" BASIS,
10 | * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
11 | * See the License for the specific language governing permissions and
12 | * limitations under the License.
13 | */
14 |
15 | import { OverlayTemplate } from 'klinecharts'
16 |
17 | const triangle: OverlayTemplate = {
18 | name: 'triangle',
19 | totalStep: 4,
20 | needDefaultPointFigure: true,
21 | needDefaultXAxisFigure: true,
22 | needDefaultYAxisFigure: true,
23 | styles: {
24 | polygon: {
25 | color: 'rgba(22, 119, 255, 0.15)'
26 | }
27 | },
28 | createPointFigures: ({ coordinates }) => {
29 | return [
30 | {
31 | type: 'polygon',
32 | attrs: { coordinates },
33 | styles: { style: 'stroke_fill' }
34 | }
35 | ]
36 | }
37 | }
38 |
39 | export default triangle
40 |
--------------------------------------------------------------------------------
/src/extension/utils.ts:
--------------------------------------------------------------------------------
1 | /**
2 | * Licensed under the Apache License, Version 2.0 (the "License");
3 | * you may not use this file except in compliance with the License.
4 | * You may obtain a copy of the License at
5 |
6 | * http://www.apache.org/licenses/LICENSE-2.0
7 |
8 | * Unless required by applicable law or agreed to in writing, software
9 | * distributed under the License is distributed on an "AS IS" BASIS,
10 | * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
11 | * See the License for the specific language governing permissions and
12 | * limitations under the License.
13 | */
14 |
15 | import { Coordinate, Bounding, LineAttrs, utils } from 'klinecharts'
16 |
17 | export function getRotateCoordinate (coordinate: Coordinate, targetCoordinate: Coordinate, angle: number): Coordinate {
18 | const x = (coordinate.x - targetCoordinate.x) * Math.cos(angle) - (coordinate.y - targetCoordinate.y) * Math.sin(angle) + targetCoordinate.x
19 | const y = (coordinate.x - targetCoordinate.x) * Math.sin(angle) + (coordinate.y - targetCoordinate.y) * Math.cos(angle) + targetCoordinate.y
20 | return { x, y }
21 | }
22 |
23 | export function getRayLine (coordinates: Coordinate[], bounding: Bounding): LineAttrs | LineAttrs[] {
24 | if (coordinates.length > 1) {
25 | let coordinate: Coordinate
26 | if (coordinates[0].x === coordinates[1].x && coordinates[0].y !== coordinates[1].y) {
27 | if (coordinates[0].y < coordinates[1].y) {
28 | coordinate = {
29 | x: coordinates[0].x,
30 | y: bounding.height
31 | }
32 | } else {
33 | coordinate = {
34 | x: coordinates[0].x,
35 | y: 0
36 | }
37 | }
38 | } else if (coordinates[0].x > coordinates[1].x) {
39 | coordinate = {
40 | x: 0,
41 | y: utils.getLinearYFromCoordinates(coordinates[0], coordinates[1], { x: 0, y: coordinates[0].y })
42 | }
43 | } else {
44 | coordinate = {
45 | x: bounding.width,
46 | y: utils.getLinearYFromCoordinates(coordinates[0], coordinates[1], { x: bounding.width, y: coordinates[0].y })
47 | }
48 | }
49 | return { coordinates: [coordinates[0], coordinate] }
50 | }
51 | return []
52 | }
53 |
54 | export function getDistance (coordinate1: Coordinate, coordinate2: Coordinate,): number {
55 | const xDis = Math.abs(coordinate1.x - coordinate2.x)
56 | const yDis = Math.abs(coordinate1.y - coordinate2.y)
57 | return Math.sqrt(xDis * xDis + yDis * yDis)
58 | }
--------------------------------------------------------------------------------
/src/extension/xabcd.ts:
--------------------------------------------------------------------------------
1 | /**
2 | * Licensed under the Apache License, Version 2.0 (the "License");
3 | * you may not use this file except in compliance with the License.
4 | * You may obtain a copy of the License at
5 |
6 | * http://www.apache.org/licenses/LICENSE-2.0
7 |
8 | * Unless required by applicable law or agreed to in writing, software
9 | * distributed under the License is distributed on an "AS IS" BASIS,
10 | * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
11 | * See the License for the specific language governing permissions and
12 | * limitations under the License.
13 | */
14 |
15 | import { OverlayTemplate, PolygonAttrs, LineAttrs } from 'klinecharts'
16 |
17 | const xabcd: OverlayTemplate = {
18 | name: 'xabcd',
19 | totalStep: 6,
20 | needDefaultPointFigure: true,
21 | needDefaultXAxisFigure: true,
22 | needDefaultYAxisFigure: true,
23 | styles: {
24 | polygon: {
25 | color: 'rgba(22, 119, 255, 0.15)'
26 | }
27 | },
28 | createPointFigures: ({ coordinates, overlay }) => {
29 | const dashedLines: LineAttrs[] = []
30 | const polygons: PolygonAttrs[] = []
31 | const tags = ['X', 'A', 'B', 'C', 'D']
32 | const texts = coordinates.map((coordinate, i) => ({
33 | ...coordinate,
34 | baseline: 'bottom',
35 | text: `(${tags[i]})`
36 | }))
37 | if (coordinates.length > 2) {
38 | dashedLines.push({ coordinates: [coordinates[0], coordinates[2]] })
39 | polygons.push({ coordinates: [coordinates[0], coordinates[1], coordinates[2]] })
40 | if (coordinates.length > 3) {
41 | dashedLines.push({ coordinates: [coordinates[1], coordinates[3]] })
42 | if (coordinates.length > 4) {
43 | dashedLines.push({ coordinates: [coordinates[2], coordinates[4]] })
44 | polygons.push({ coordinates: [coordinates[2], coordinates[3], coordinates[4]] })
45 | }
46 | }
47 | }
48 | return [
49 | {
50 | type: 'line',
51 | attrs: { coordinates }
52 | },
53 | {
54 | type: 'line',
55 | attrs: dashedLines,
56 | styles: { style: 'dashed' }
57 | },
58 | {
59 | type: 'polygon',
60 | ignoreEvent: true,
61 | attrs: polygons
62 | },
63 | {
64 | type: 'text',
65 | ignoreEvent: true,
66 | attrs: texts
67 | }
68 | ]
69 | }
70 | }
71 |
72 | export default xabcd
73 |
--------------------------------------------------------------------------------
/src/i18n/index.ts:
--------------------------------------------------------------------------------
1 | /**
2 | * Licensed under the Apache License, Version 2.0 (the "License");
3 | * you may not use this file except in compliance with the License.
4 | * You may obtain a copy of the License at
5 |
6 | * http://www.apache.org/licenses/LICENSE-2.0
7 |
8 | * Unless required by applicable law or agreed to in writing, software
9 | * distributed under the License is distributed on an "AS IS" BASIS,
10 | * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
11 | * See the License for the specific language governing permissions and
12 | * limitations under the License.
13 | */
14 |
15 | import zhCN from './zh-CN.json'
16 | import enUS from './en-US.json'
17 |
18 | const locales = {
19 | 'zh-CN': zhCN,
20 | 'en-US': enUS
21 | }
22 |
23 | export function load (key: string, ls: any) {
24 | // @ts-expect-error
25 | locales[key] = ls
26 | }
27 |
28 | export default (key: string, locale: string) => {
29 | // @ts-expect-error
30 | return locales[locale]?.[key] ?? key
31 | }
32 |
--------------------------------------------------------------------------------
/src/i18n/zh-CN.json:
--------------------------------------------------------------------------------
1 | {
2 | "indicator": "指标",
3 | "main_indicator": "主图指标",
4 | "sub_indicator": "副图指标",
5 | "setting": "设置",
6 | "timezone": "时区",
7 | "screenshot": "截屏",
8 | "full_screen": "全屏",
9 | "exit_full_screen": "退出全屏",
10 | "save": "保存",
11 | "confirm": "确定",
12 | "cancel": "取消",
13 |
14 | "ma": "MA(移动平均线)",
15 | "ema": "EMA(指数平滑移动平均线)",
16 | "sma": "SMA",
17 | "boll": "BOLL(布林线)",
18 | "bbi": "BBI(多空指数)",
19 | "sar": "SAR(停损点指向指标)",
20 | "vol": "VOL(成交量)",
21 | "macd": "MACD(指数平滑异同移动平均线)",
22 | "kdj": "KDJ(随机指标)",
23 | "rsi": "RSI(相对强弱指标)",
24 | "bias": "BIAS(乖离率)",
25 | "brar": "BRAR(情绪指标)",
26 | "cci": "CCI(顺势指标)",
27 | "dmi": "DMI(动向指标)",
28 | "cr": "CR(能量指标)",
29 | "psy": "PSY(心理线)",
30 | "dma": "DMA(平行线差指标)",
31 | "trix": "TRIX(三重指数平滑平均线)",
32 | "obv": "OBV(能量潮指标)",
33 | "vr": "VR(成交量变异率)",
34 | "wr": "WR(威廉指标)",
35 | "mtm": "MTM(动量指标)",
36 | "emv": "EMV(简易波动指标)",
37 | "roc": "ROC(变动率指标)",
38 | "pvt": "PVT(价量趋势指标)",
39 | "ao": "AO(动量震荡指标)",
40 |
41 | "utc": "世界统一时间",
42 | "honolulu": "(UTC-10) 檀香山",
43 | "juneau": "(UTC-8) 朱诺",
44 | "los_angeles": "(UTC-7) 洛杉矶",
45 | "chicago": "(UTC-5) 芝加哥",
46 | "toronto": "(UTC-4) 多伦多",
47 | "sao_paulo": "(UTC-3) 圣保罗",
48 | "london": "(UTC+1) 伦敦",
49 | "berlin": "(UTC+2) 柏林",
50 | "bahrain": "(UTC+3) 巴林",
51 | "dubai": "(UTC+4) 迪拜",
52 | "ashkhabad": "(UTC+5) 阿什哈巴德",
53 | "almaty": "(UTC+6) 阿拉木图",
54 | "bangkok": "(UTC+7) 曼谷",
55 | "shanghai": "(UTC+8) 上海",
56 | "tokyo": "(UTC+9) 东京",
57 | "sydney": "(UTC+10) 悉尼",
58 | "norfolk": "(UTC+12) 诺福克岛",
59 |
60 | "horizontal_straight_line": "水平直线",
61 | "horizontal_ray_line": "水平射线",
62 | "horizontal_segment": "水平线段",
63 | "vertical_straight_line": "垂直直线",
64 | "vertical_ray_line": "垂直射线",
65 | "vertical_segment": "垂直线段",
66 | "straight_line": "直线",
67 | "ray_line": "射线",
68 | "segment": "线段",
69 | "arrow": "箭头",
70 | "price_line": "价格线",
71 | "price_channel_line": "价格通道线",
72 | "parallel_straight_line": "平行直线",
73 | "fibonacci_line": "斐波那契回调直线",
74 | "fibonacci_segment": "斐波那契回调线段",
75 | "fibonacci_circle": "斐波那契圆环",
76 | "fibonacci_spiral": "斐波那契螺旋",
77 | "fibonacci_speed_resistance_fan": "斐波那契速度阻力扇",
78 | "fibonacci_extension": "斐波那契趋势扩展",
79 | "gann_box": "江恩箱",
80 | "rect": "矩形",
81 | "parallelogram": "平行四边形",
82 | "circle": "圆",
83 | "triangle": "三角形",
84 | "three_waves": "三浪",
85 | "five_waves": "五浪",
86 | "eight_waves": "八浪",
87 | "any_waves": "任意浪",
88 | "abcd": "ABCD形态",
89 | "xabcd": "XABCD形态",
90 |
91 | "weak_magnet": "弱磁模式",
92 | "strong_magnet": "强磁模式",
93 |
94 | "symbol_search": "商品搜索",
95 | "symbol_code": "商品代码",
96 | "params_1": "参数1",
97 | "params_2": "参数2",
98 | "params_3": "参数3",
99 | "params_4": "参数4",
100 | "params_5": "参数5",
101 | "period": "周期",
102 | "standard_deviation": "标准差",
103 |
104 | "candle_type": "蜡烛图类型",
105 | "candle_solid": "全实心",
106 | "candle_stroke": "全空心",
107 | "candle_up_stroke": "涨空心",
108 | "candle_down_stroke": "跌空心",
109 | "ohlc": "OHLC",
110 | "area": "面积图",
111 |
112 | "last_price_show": "最新价显示",
113 | "high_price_show": "最高价显示",
114 | "low_price_show": "最低价显示",
115 | "indicator_last_value_show": "指标最新值显示",
116 | "price_axis_type": "价格轴类型",
117 | "normal": "线性轴",
118 | "percentage": "百分比轴",
119 | "log": "对数轴",
120 | "reverse_coordinate": "倒置坐标",
121 | "grid_show": "网格线显示",
122 | "restore_default": "恢复默认"
123 | }
--------------------------------------------------------------------------------
/src/iconfonts/fonts/icomoon.eot:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/klinecharts/pro/4234b79f0bcfc26734d0a721c38cbd6d23aa38f5/src/iconfonts/fonts/icomoon.eot
--------------------------------------------------------------------------------
/src/iconfonts/fonts/icomoon.ttf:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/klinecharts/pro/4234b79f0bcfc26734d0a721c38cbd6d23aa38f5/src/iconfonts/fonts/icomoon.ttf
--------------------------------------------------------------------------------
/src/iconfonts/fonts/icomoon.woff:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/klinecharts/pro/4234b79f0bcfc26734d0a721c38cbd6d23aa38f5/src/iconfonts/fonts/icomoon.woff
--------------------------------------------------------------------------------
/src/iconfonts/style.css:
--------------------------------------------------------------------------------
1 | @font-face {
2 | font-family: 'icomoon';
3 | src: url('fonts/icomoon.eot?f4efml');
4 | src: url('fonts/icomoon.eot?f4efml#iefix') format('embedded-opentype'),
5 | url('fonts/icomoon.ttf?f4efml') format('truetype'),
6 | url('fonts/icomoon.woff?f4efml') format('woff'),
7 | url('fonts/icomoon.svg?f4efml#icomoon') format('svg');
8 | font-weight: normal;
9 | font-style: normal;
10 | font-display: block;
11 | }
12 |
13 | [class^="icon-"], [class*=" icon-"] {
14 | /* use !important to prevent issues with browser extensions that change fonts */
15 | font-family: 'icomoon' !important;
16 | speak: never;
17 | font-style: normal;
18 | font-weight: normal;
19 | font-variant: normal;
20 | text-transform: none;
21 | line-height: 1;
22 |
23 | /* Better Font Rendering =========== */
24 | -webkit-font-smoothing: antialiased;
25 | -moz-osx-font-smoothing: grayscale;
26 | }
27 |
28 | .icon-icon-close:before {
29 | content: "\e900";
30 | color: #fff;
31 | }
32 | .icon-icon-invisible:before {
33 | content: "\e901";
34 | color: #fff;
35 | }
36 | .icon-icon-setting:before {
37 | content: "\e902";
38 | color: #fff;
39 | }
40 | .icon-icon-visible:before {
41 | content: "\e903";
42 | color: #fff;
43 | }
44 |
--------------------------------------------------------------------------------
/src/index.less:
--------------------------------------------------------------------------------
1 | @import (reference) './base.less';
2 | @import './component/index.less';
3 | @import './widget/index.less';
4 | @import './iconfonts/style.css';
5 |
6 | .@{prefix-cls} {
7 | --klinecharts-pro-primary-color: @c-primary;
8 | --klinecharts-pro-hover-background-color: @c-hover-background-light;
9 | --klinecharts-pro-background-color: @c-background-light;
10 | --klinecharts-pro-popover-background-color: @c-popover-background-light;
11 | --klinecharts-pro-text-color: @c-text-light;
12 | --klinecharts-pro-text-second-color: @c-text-second-light;
13 | --klinecharts-pro-border-color: @c-border-light;
14 | --klinecharts-pro-selected-color: fade(@c-primary, 15%);
15 | &[data-theme="dark"] {
16 | --klinecharts-pro-hover-background-color: @c-hover-background-dark;
17 | --klinecharts-pro-background-color: @c-background-dark;
18 | --klinecharts-pro-popover-background-color: @c-popover-background-dark;
19 | --klinecharts-pro-text-color: @c-text-dark;
20 | --klinecharts-pro-text-second-color: @c-text-second-dark;
21 | --klinecharts-pro-border-color: @c-border-dark;
22 | }
23 | position: relative;
24 | display: flex;
25 | flex-direction: column;
26 | color: var(--klinecharts-pro-text-color);
27 | background-color: var(--klinecharts-pro-background-color);
28 | font-size: 14px;
29 | height: 80vh;
30 | &-watermark {
31 | position: absolute;
32 | left: 50%;
33 | top: 50%;
34 | z-index: 1;
35 | transform: translateX(-50%) translateY(-50%);
36 | .logo {
37 | width: 160px;
38 | height: 184px;
39 | fill: var(--klinecharts-pro-border-color);
40 | }
41 | }
42 | &-price-unit {
43 | display: none;
44 | position: absolute;
45 | left: 50%;
46 | top: 50%;
47 | z-index: 30;
48 | top: 4px;
49 | left: 50%;
50 | transform: translateX(-50%);
51 | border-radius: 4px;
52 | font-size: 10px;
53 | font-weight: bold;
54 | padding: 1px 4px;
55 | color: var(--klinecharts-pro-text-second-color);
56 | box-shadow: 0 3px 3px 0 rgba(50, 50, 50, .3);
57 | border: solid 1px var(--klinecharts-pro-border-color);
58 | background-color: var(--klinecharts-pro-background-color);
59 | }
60 | &-load-icon {
61 | position: absolute;
62 | left: 0;
63 | height: 0;
64 | z-index: -1;
65 | opacity: 0;
66 | }
67 | &-content {
68 | position: relative;
69 | display: flex;
70 | flex-direction: row;
71 | width: 100%;
72 | height: @widget-height;
73 | }
74 | &-widget {
75 | width: @widget-width;
76 | height: 100%;
77 | margin-left: 0;
78 | &[data-drawing-bar-visible="false"] {
79 | width: 100%;
80 | }
81 | }
82 | }
83 |
--------------------------------------------------------------------------------
/src/index.ts:
--------------------------------------------------------------------------------
1 | /**
2 | * Licensed under the Apache License, Version 2.0 (the "License");
3 | * you may not use this file except in compliance with the License.
4 | * You may obtain a copy of the License at
5 |
6 | * http://www.apache.org/licenses/LICENSE-2.0
7 |
8 | * Unless required by applicable law or agreed to in writing, software
9 | * distributed under the License is distributed on an "AS IS" BASIS,
10 | * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
11 | * See the License for the specific language governing permissions and
12 | * limitations under the License.
13 | */
14 |
15 | import { registerOverlay } from 'klinecharts'
16 |
17 | import overlays from './extension'
18 |
19 | import DefaultDatafeed from './DefaultDatafeed'
20 | import KLineChartPro from './KLineChartPro'
21 |
22 | import { load } from './i18n'
23 |
24 | import { Datafeed, SymbolInfo, Period, DatafeedSubscribeCallback, ChartProOptions, ChartPro } from './types'
25 |
26 | import './index.less'
27 |
28 | overlays.forEach(o => { registerOverlay(o) })
29 |
30 | export {
31 | DefaultDatafeed,
32 | KLineChartPro,
33 | load as loadLocales
34 | }
35 |
36 | export type {
37 | Datafeed, SymbolInfo, Period, DatafeedSubscribeCallback, ChartProOptions, ChartPro
38 | }
39 |
--------------------------------------------------------------------------------
/src/types.ts:
--------------------------------------------------------------------------------
1 | /**
2 | * Licensed under the Apache License, Version 2.0 (the "License");
3 | * you may not use this file except in compliance with the License.
4 | * You may obtain a copy of the License at
5 |
6 | * http://www.apache.org/licenses/LICENSE-2.0
7 |
8 | * Unless required by applicable law or agreed to in writing, software
9 | * distributed under the License is distributed on an "AS IS" BASIS,
10 | * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
11 | * See the License for the specific language governing permissions and
12 | * limitations under the License.
13 | */
14 |
15 | import { KLineData, Styles, DeepPartial } from 'klinecharts'
16 |
17 | export interface SymbolInfo {
18 | ticker: string
19 | name?: string
20 | shortName?: string
21 | exchange?: string
22 | market?: string
23 | pricePrecision?: number
24 | volumePrecision?: number
25 | priceCurrency?: string
26 | type?: string
27 | logo?: string
28 | }
29 |
30 | export interface Period {
31 | multiplier: number
32 | timespan: string
33 | text: string
34 | }
35 |
36 | export type DatafeedSubscribeCallback = (data: KLineData) => void
37 |
38 | export interface Datafeed {
39 | searchSymbols (search?: string): Promise-
47 |
- (
58 |
64 |
65 | 
66 |
67 | {symbol.shortName ?? symbol.ticker}{`${symbol.name ? `(${symbol.name})` : ''}`}
68 |
69 | {symbol.exchange ?? ''}
70 |