deno.land / x / billboardjs@3.6.0 / ChartInternal / shape / polar.ts

نووسراو ببینە
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
/** * Copyright (c) 2017 ~ present NAVER Corp. * billboard.js project is licensed under the MIT license */import {$LEVEL} from "../../config/classes";import {getRange} from "../../module/util";import type {IArcData, IData} from "../data/IData";
/** * Get data max value * @param {object} $$ ChartInternal instance * @returns {number} max value * @private */function getDataMax($$): number { const levelMax = $$.config.polar_level_max; let dataMax = $$.getMinMaxData().max[0].value;
// Apply level max only when is greater than the data max value if (levelMax && levelMax > dataMax) { dataMax = levelMax; }
return dataMax;}
export default { /** * Initialize polar * @private */ initPolar(): void { const $$ = this; const {$el: {arcs}, config} = $$; const levelTextShow: boolean = config.polar_level_text_show; const levelTextBgColor: string = config.polar_level_text_backgroundColor;
// append <g> for level arcs.levels = arcs.append("g") .attr("class", $LEVEL.levels);
// set level text background color if (levelTextShow && levelTextBgColor) { $$.generateDataLabelBackgroundColorFilter(levelTextBgColor); } },
/** * Get polar outer radius according to the data value * @param {object} d Data object * @param {numbet} outerRadius Outer radius * @returns {number} outer radius * @private */ getPolarOuterRadius(d: IArcData, outerRadius: number): number { const dataMax = getDataMax(this);
return ((d?.data.values[0].value ?? 0) / dataMax) * outerRadius; },
/** * Update polar based on given data array * @param {object} targets Data object * @private */ updateTargetsForPolar(targets: IData[]): void { // borrow from Arc this.updateTargetsForArc(targets); },
/** * Called whenever redraw happens * @private */ redrawPolar(): void { const $$ = this; const {config} = $$;
config.polar_level_show && $$.updatePolarLevel(); },
/** * Update polar level circle * @private */ updatePolarLevel(): void { const $$ = this; const {config, state, $el: {arcs: {levels}}} = $$;
const depth: number = config.polar_level_depth; const dataMax = getDataMax($$); const levelData = getRange(0, depth); const outerRadius = state.radius; const levelRatio = levelData.map(l => outerRadius * ((l + 1) / depth)); const levelTextFormat = (config.polar_level_text_format || function() {}).bind($$.api);
const level = levels .selectAll(`.${$LEVEL.level}`) .data(levelData);
level.exit().remove();
const levelEnter = level.enter().append("g") .attr("class", (d, i) => `${$LEVEL.level} ${$LEVEL.level}-${i}`);
// cx, cy, translate: Set center as origin (0,0) so that it can share same center with arcs levelEnter.append("circle");
levelEnter .merge(level) .selectAll("circle") .style("visibility", config.polar_level_show ? null : "hidden") .attr("cx", 0) .attr("cy", 0) .attr("r", d => levelRatio[d]);
if (config.polar_level_text_show) { const levelTextBackgroundColor = config.polar_level_text_backgroundColor; const defsId = `#${state.datetimeId}-labels-bg${$$.getTargetSelectorSuffix(levelTextBackgroundColor)}`;
levelEnter.append("text") .style("text-anchor", "middle");
levelEnter .merge(level) .selectAll("text") .attr("dy", d => -levelRatio[d] + 5) .attr("filter", levelTextBackgroundColor ? `url(${defsId})` : null) .text(d => levelTextFormat(dataMax / levelData.length * (d + 1))); } }};
billboardjs

Version Info

Tagged at
a year ago