Skip to content

Commit 12e2f21

Browse files
BasttyyBasttyy
committed
feat (implement overlay properties): for flexible dynamic per overlay styling
1 parent b5fa74c commit 12e2f21

20 files changed

Lines changed: 1298 additions & 701 deletions

‎src/extension/abcd.ts‎

Lines changed: 81 additions & 39 deletions
Original file line numberDiff line numberDiff line change
@@ -12,47 +12,89 @@
1212
* limitations under the License.
1313
*/
1414

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-
}
15+
import { Coordinate, LineStyle, DeepPartial, TextStyle } from 'klinecharts'
16+
import { OverlayProperties, ProOverlayTemplate } from '../types'
17+
import loadash from "lodash"
18+
19+
const abcd = (): ProOverlayTemplate => {
20+
let properties: DeepPartial<OverlayProperties> = {}
21+
22+
const line1Style = (): DeepPartial<LineStyle> => {
23+
return {
24+
style: properties.lineStyle,
25+
size: properties.lineWidth,
26+
color: properties.lineColor ?? properties.borderColor,
27+
dashedValue: properties.lineDashedValue
3828
}
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-
]
5529
}
30+
const line2Style = (): DeepPartial<LineStyle> => {
31+
return {
32+
...line1Style(),
33+
style: 'dashed'
34+
}
35+
}
36+
const textStyle = (): DeepPartial<TextStyle> => {
37+
return {
38+
color: properties.textColor,
39+
family: properties.textFont,
40+
size: properties.textFontSize,
41+
weight: properties.textFontWeight,
42+
backgroundColor: properties.textBackgroundColor,
43+
paddingLeft: properties.textPaddingLeft,
44+
paddingRight: properties.textPaddingRight,
45+
paddingTop: properties.textPaddingTop,
46+
paddingBottom: properties.textPaddingBottom
47+
}
48+
}
49+
50+
return {
51+
name: 'abcd',
52+
totalStep: 5,
53+
needDefaultPointFigure: true,
54+
needDefaultXAxisFigure: true,
55+
needDefaultYAxisFigure: true,
56+
createPointFigures: ({ coordinates }) => {
57+
let acLineCoordinates: Coordinate[] = []
58+
let bdLineCoordinates: Coordinate[] = []
59+
60+
const tags = ['A', 'B', 'C', 'D']
61+
const texts = coordinates.map((coordinate, i) => ({
62+
...coordinate,
63+
baseline: 'bottom',
64+
text: `(${tags[i]})`
65+
}))
66+
if (coordinates.length > 2) {
67+
acLineCoordinates = [coordinates[0], coordinates[2]]
68+
if (coordinates.length > 3) {
69+
bdLineCoordinates = [coordinates[1], coordinates[3]]
70+
}
71+
}
72+
return [
73+
{
74+
type: 'line',
75+
attrs: { coordinates },
76+
styles: line1Style()
77+
},
78+
{
79+
type: 'line',
80+
attrs: [{ coordinates: acLineCoordinates }, { coordinates: bdLineCoordinates }],
81+
styles: line2Style()
82+
},
83+
{
84+
type: 'text',
85+
ignoreEvent: true,
86+
attrs: texts,
87+
styles: textStyle()
88+
}
89+
]
90+
},
91+
setProperties: (_properties: DeepPartial<OverlayProperties>) => {
92+
properties = loadash.merge({}, properties, _properties) as OverlayProperties
93+
},
94+
getProperties: (): DeepPartial<OverlayProperties> => {
95+
return properties
96+
}
97+
}
5698
}
5799

58100
export default abcd

‎src/extension/anyWaves.ts‎

Lines changed: 60 additions & 24 deletions
Original file line numberDiff line numberDiff line change
@@ -12,31 +12,67 @@
1212
* limitations under the License.
1313
*/
1414

15-
import { OverlayTemplate } from 'klinecharts'
15+
import { DeepPartial, LineStyle, TextStyle } from 'klinecharts'
16+
import { OverlayProperties, ProOverlayTemplate } from '../types'
17+
import loadash from "lodash"
1618

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-
]
19+
const anyWaves = (): ProOverlayTemplate => {
20+
let properties: DeepPartial<OverlayProperties> = {}
21+
22+
const lineStyle = (): DeepPartial<LineStyle> => {
23+
return {
24+
style: properties.lineStyle,
25+
size: properties.lineWidth,
26+
color: properties.lineColor ?? properties.borderColor,
27+
dashedValue: properties.lineDashedValue
28+
}
29+
}
30+
const textStyle = (): DeepPartial<TextStyle> => {
31+
return {
32+
color: properties.textColor,
33+
family: properties.textFont,
34+
size: properties.textFontSize,
35+
weight: properties.textFontWeight,
36+
backgroundColor: properties.textBackgroundColor,
37+
paddingLeft: properties.textPaddingLeft,
38+
paddingRight: properties.textPaddingRight,
39+
paddingTop: properties.textPaddingTop,
40+
paddingBottom: properties.textPaddingBottom
41+
}
42+
}
43+
44+
return {
45+
name: 'anyWaves',
46+
totalStep: Number.MAX_SAFE_INTEGER,
47+
needDefaultPointFigure: true,
48+
needDefaultXAxisFigure: true,
49+
needDefaultYAxisFigure: true,
50+
createPointFigures: ({ coordinates }) => {
51+
const texts = coordinates.map((coordinate, i) => ({
52+
...coordinate,
53+
text: `(${i})`,
54+
baseline: 'bottom'
55+
}))
56+
return [
57+
{
58+
type: 'line',
59+
attrs: { coordinates },
60+
styles: lineStyle()
61+
},
62+
{
63+
type: 'text',
64+
ignoreEvent: true,
65+
attrs: texts,
66+
styles: textStyle()
67+
}
68+
]
69+
},
70+
setProperties: (_properties: DeepPartial<OverlayProperties>) => {
71+
properties = loadash.merge({}, properties, _properties) as OverlayProperties
72+
},
73+
getProperties: (): DeepPartial<OverlayProperties> => {
74+
return properties
75+
}
4076
}
4177
}
4278

‎src/extension/arrow.ts‎

Lines changed: 55 additions & 32 deletions
Original file line numberDiff line numberDiff line change
@@ -12,45 +12,68 @@
1212
* limitations under the License.
1313
*/
1414

15-
import { OverlayTemplate, utils } from 'klinecharts'
15+
import { DeepPartial, LineStyle, utils } from 'klinecharts'
1616

1717
import { getRotateCoordinate } from './utils'
18+
import { OverlayProperties, ProOverlayTemplate } from '../types'
19+
import loadash from "lodash"
1820

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
21+
const arrow = (): ProOverlayTemplate => {
22+
let properties: DeepPartial<OverlayProperties> = {}
23+
24+
const lineStyle = (): DeepPartial<LineStyle> => {
25+
return {
26+
style: properties.lineStyle,
27+
size: properties.lineWidth,
28+
color: properties.lineColor ?? properties.borderColor,
29+
dashedValue: properties.lineDashedValue
30+
}
31+
}
32+
33+
return {
34+
name: 'arrow',
35+
totalStep: 3,
36+
needDefaultPointFigure: true,
37+
needDefaultXAxisFigure: true,
38+
needDefaultYAxisFigure: true,
39+
createPointFigures: ({ coordinates }) => {
40+
if (coordinates.length > 1) {
41+
const flag = coordinates[1].x > coordinates[0].x ? 0 : 1
42+
const kb = utils.getLinearSlopeIntercept(coordinates[0], coordinates[1])
43+
let offsetAngle
44+
if (kb) {
45+
offsetAngle = Math.atan(kb[0]) + Math.PI * flag
3546
} else {
36-
offsetAngle = Math.PI / 2 * 3
47+
if (coordinates[1].y > coordinates[0].y) {
48+
offsetAngle = Math.PI / 2
49+
} else {
50+
offsetAngle = Math.PI / 2 * 3
51+
}
3752
}
53+
const rotateCoordinate1 = getRotateCoordinate({ x: coordinates[1].x - 8, y: coordinates[1].y + 4 }, coordinates[1], offsetAngle)
54+
const rotateCoordinate2 = getRotateCoordinate({ x: coordinates[1].x - 8, y: coordinates[1].y - 4 }, coordinates[1], offsetAngle)
55+
return [
56+
{
57+
type: 'line',
58+
attrs: { coordinates },
59+
styles: lineStyle()
60+
},
61+
{
62+
type: 'line',
63+
ignoreEvent: true,
64+
attrs: { coordinates: [rotateCoordinate1, coordinates[1], rotateCoordinate2] },
65+
styles: lineStyle()
66+
}
67+
]
3868
}
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-
]
69+
return []
70+
},
71+
setProperties: (_properties: DeepPartial<OverlayProperties>) => {
72+
properties = loadash.merge({}, properties, _properties) as OverlayProperties
73+
},
74+
getProperties: (): DeepPartial<OverlayProperties> => {
75+
return properties
5276
}
53-
return []
5477
}
5578
}
5679

0 commit comments

Comments
 (0)