├── CHANGELOG.MD
├── Custom Bar Chart Samples.qvf
├── README.md
├── customBarChart.js
├── customBarChart.qext
├── echarts.min.js
└── properties.js
/CHANGELOG.MD:
--------------------------------------------------------------------------------
1 | # Changelog
2 |
3 | All notable changes to this project will be documented in this file.
4 |
5 | The format is based on [Keep a Changelog](https://keepachangelog.com/en/1.0.0/),
6 | and this project adheres to [Semantic Versioning](https://semver.org/spec/v2.0.0.html).
7 |
8 |
9 |
10 |
11 | ## [2.17.0] - 2023-06-08
12 |
13 | ### Added
14 |
15 | - Add option to chose between 'start' or 'end' to DataZoom propertie.
16 |
17 |
18 | ## [2.16.0] - 2023-05-10
19 |
20 | ### Added
21 |
22 | - Add option to change line symbol type
23 |
24 |
25 | ## [2.15.0] - 2023-04-28
26 |
27 | ### Added
28 |
29 | - Add option to hide measures in legend
30 |
31 | ## [2.14.0] - 2023-04-01
32 |
33 | ### Addded
34 |
35 | - Add line step option (Thanks to HG14 for this feature)
36 |
37 |
38 | ## [2.14.0] - 2023-04-01
39 |
40 | ### Addded
41 |
42 | - Add Tooltip Section
43 | - Add option to show/hide individual expression in tooltip
44 |
45 | ### Changed
46 |
47 | - e-charts version updated to 5.4.2;
48 |
49 | ## [2.13.0] - 2022-11-04
50 |
51 | ### Addded
52 |
53 | - Now you can pick custom font bold;
54 | - Now you can pick font bold for individual measures;
55 | - Now you can change font family of data label
56 |
57 | ### Changed
58 |
59 | - e-charts version updated to 5.4.0;
60 | - Data label rotation changed from slider to expression box
61 |
62 | ## [2.12.0] - 2022-08-13
63 |
64 | ### Addded
65 |
66 | - Add axis label formatter option in 'yAxis: Left' and 'yAxis: Right' section.
67 |
68 | ## [2.11.0] - 2022-02-25
69 |
70 | ### Changed
71 |
72 | - e-charts version updated to 5.3.3;
73 | - parseInt line size
74 |
75 | ## [2.10.0] - 2022-02-25
76 |
77 | ### Changed
78 |
79 | - e-charts version updated to 5.3;
80 |
81 | ### Addded
82 |
83 | - Now the extension get the whole dataset using getData function from the api.
84 |
85 | ## [2.9.0] - 2021-11-25
86 |
87 | ### Changed
88 |
89 | - 'Settings' section name changed to 'Global Settings'
90 | - e-charts version updated to 5.2.1;
91 |
92 | ### Addded
93 |
94 | - Option to use a custom data label;
95 | - Option 'Use Global Settings' in measure, now you can overwrite global settings for one particular measure giving more control in the visualization;
96 | - 'Switch Axis' option on 'Grid' section that invert 'X' and 'Y' axis;
97 | - Option to Show/Hide the data zoom.
98 | - Add more samples
99 |
100 |
101 | ## [2.8.1] - 2021-06-20
102 |
103 | ### Changed
104 |
105 | - fix bug problem that make line width always be 0
106 |
107 | ## [2.8.0] - 2021-06-15
108 |
109 | ### Addded
110 |
111 | - Now you can export the extension as image and PDF. ( It is working on StoryTelling);
112 | - e-charts version updated to 5.1.2;
113 | - Now can you select different icons to line and bar measure type;
114 | - Now can you change the symbol size of line measures.
115 |
116 |
117 | ## [2.7.0] - 2021-06-05
118 |
119 | ### Addded
120 |
121 | - Add 'Keep Colors' on 'On Focus' option;
122 |
123 |
124 |
125 | ## [2.6.0] - 2021-05-27
126 |
127 | ### Addded
128 |
129 | - Now you can change legend position;
130 | - Now you can change legend distance of the corner based in legend position.
131 |
132 | ### Changed
133 |
134 | - Now you can add 15 measures;
135 | - Paint method return qlik.promise.
136 |
137 | ## [2.5.0] - 2021-04-03
138 |
139 | ### Added
140 |
141 | - You can now change the line width;
142 | - Now you can choose between 'Solid','Dashed' or 'Dotted' line types;
143 | - Add option to put border on data labels and choose their color;
144 | - Option to allow users to drag and drop the position of the data label (only works when the border width is 0), with this functionality you can enable the label line option as well;
145 | - You can define axis label color with expression;
146 | - You can put border on axis label and choose its color;
147 | - You can put border on legend text and choose its color;
148 | - Add 'yAxis: Left' and 'yAxis: Right' settings to define custom max and min values and define its visibility
149 |
150 | ## [2.4.0] - 2021-03-31
151 |
152 | ### Added
153 |
154 | - Now you can change the chart position with Grid options.
155 |
156 | ### Changed
157 |
158 | - DataZoom appears correct now.
159 | - update 'README.md' file.
160 |
161 | ## [2.3.0] - 2021-03-26
162 |
163 | ### Added
164 |
165 | - Add legend text size option
166 |
167 | ## [2.2.0] - 2021-03-17
168 |
169 | ### Added
170 |
171 | - Add bar options in settings (barWidth,minBarWidth,maxBarWidth)
172 |
173 | ### Changed
174 |
175 | - Bar Gap options changed from 'Other' to 'Bar Options'
176 |
177 | ## [2.1.0] - 2021-03-10
178 |
179 | ### Added
180 |
181 | - Add option to change legend text color.
182 |
183 | ### Changed
184 |
185 | - Add label in 'change icon' dropdow.
186 |
187 |
188 | ## [2.0.0] - 2021-03-06
189 |
190 | ### Added
191 |
192 | - This changelog file
193 | - 'Legend' section is added into 'Settings', now you can: Hide/Show the legend and change legends icon.
194 | - 'On Focus' section is added into 'Settings', now you can hight the measures on mouse hover.
195 | - In 'Others' section you can hide zero values in graph.
196 |
197 | ### Changed
198 |
199 | - Echarts version updated to [5.0](https://echarts.apache.org/en/tutorial.html#New%20features%20in%20ECharts%205)
200 | - Metrics colors can be seted by expression.
201 | - Is possible choose between 'By expression' and 'Single Color' in expression section.
202 | - Don't shows 'Label Color' component when 'Label Color Auto' is setted as 'on'.
203 | - Now DataZoom only appear when the number of dimension values is greater than 'Number Visible Items' in 'Others' section.
204 |
--------------------------------------------------------------------------------
/Custom Bar Chart Samples.qvf:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/WedersonCD/customBarChart/8fe156323581101ae3554ccb1a37aca71a57a08d/Custom Bar Chart Samples.qvf
--------------------------------------------------------------------------------
/README.md:
--------------------------------------------------------------------------------
1 |
2 | ### Custom Bar Chart
3 |
4 | A custom bar/line chart created based in [echarts library](https://echarts.apache.org/en/index.html "echarts library").
5 |
6 | See the changes [here](https://github.com/WedersonCD/customBarChart/blob/main/CHANGELOG.MD "Changed Log"), updated in 2023-06-08.
7 |
8 | - Expression Options
9 | - Data Label Settings
10 | - Axis Label Settings
11 | - Legend
12 | - On Focus
13 | - Bar Options
14 | - yAxis
15 | - Grid Settings
16 | - Tooltip Settings
17 | - Others Settings
18 | - Samples
19 |
20 |
21 | ### Expression Options
22 |
23 | ------------
24 |
25 | - stack: Stack the measures on your on way! if two or more measures have the same stack property they are satcked;
26 |
27 | - type: How the measure will be presented, in bar or line;
28 |
29 | - line type: If 'type' option is 'Line' you can choose between 'Solid','Dashed' or 'Dotted' line types;
30 |
31 | - line width: If 'type' option is 'Line' you can define the line width;
32 |
33 | - line symbol size: change the line simbol size;
34 |
35 | - y-axis: Defines which y-axis the measure will follow;
36 |
37 | - color: Define the measure color;
38 |
39 | - label Weight: font thick weight.
40 |
41 | - label color auto: Let Echarts select the right color;
42 |
43 | - label color: select label color. (label color auto option must be off);
44 |
45 | - label border width: Change border width;
46 |
47 | - label border border: Change border color.
48 |
49 |
50 | ### Data Label Settings
51 |
52 | ------------
53 |
54 | - visibility: Show/Hide
55 |
56 | - distance: Distance to the host graphic element. Works when position is value 'top' ou 'insideRight'.
57 |
58 | - rotate: Rotate label, from -90 degree to 90, positive value represents rotate anti-clockwise.
59 |
60 | - position: label position
61 |
62 | - style: font style.
63 |
64 | - Weight: font thick weight.
65 |
66 | - Size: font size.
67 |
68 | - Align: Horizontal alignment of text.
69 |
70 | - Allow Drag&Drop: If this option is ennable allow to users change data label position. (Label border width must be 0)
71 |
72 | - Show Lable Line: Place a connected line between the label and the Bar/Line
73 |
74 |
75 | ### Axis Label Settings
76 |
77 | ------------
78 |
79 | - visibility: Show/Hide
80 |
81 | - rotate: Rotate label, from -90 degree to 90, positive value represents rotate anti-clockwise.
82 |
83 | - style: font style.
84 |
85 | - Weight: font thick weight.
86 |
87 | - Size: font size.
88 |
89 | - Align: Horizontal alignment of text.
90 |
91 | - text border width: Change border width
92 |
93 | - text border border: Change border color
94 |
95 |
96 | ### Legend Settings
97 |
98 | ------------
99 |
100 | - visibility: Show/Hide.
101 |
102 | - position: legend position.
103 |
104 | - distance: distance between the legend and the corner, can be absolute or relative values like 0,20,0%,20% etc.
105 |
106 | - bar legend icon: legend icon shape of the bar measures.
107 |
108 | - line legend icon: legend icon shape of the line measures.
109 |
110 | - text size: font size.
111 |
112 | - color type: change between single color or color by expression
113 |
114 | - text color: text color.
115 |
116 | - text border width: width value of the text vorder.
117 |
118 | - text border color: color of the border
119 |
120 |
121 | ### On Focus
122 |
123 | ------------
124 |
125 | - Focus: On/Off focus based in [emphasis](https://echarts.apache.org/en/option.html#series-bar.emphasis) echarts funcionality
126 |
127 | - Color: Bar/line color.
128 |
129 | - Label Color: Label color
130 |
131 | - Label Size: Label Size.
132 |
133 | ### Bar Options
134 |
135 | ------------
136 |
137 | - Bar Gap: gap between the bars in %, you can use '30%' or 0.3 values. Use '-100%' to overlap the bars.
138 |
139 | - Bar Width Auto: Enable width bar options.
140 |
141 | - Bar Width: Width of the bars, yout can use absolute values like '70' or percentage values like '20%'.
142 |
143 | - Max\Min Bar Width: Define max and min values for bar width.
144 |
145 | ### yAxis
146 |
147 | ------------
148 |
149 | - visibility: Show/Hide the axis.
150 |
151 | - Label Formatter Auto: Show/Hide formatter options.
152 |
153 | - Label Formatter Style: Style of the number.(Currency,percent and decimal)
154 |
155 | - Label Formatter Currency Symbol: Currency symbol. (in ISO 4217 partner,see more [here](https://www.six-group.com/en/products-services/financial-information/data-standards.html#scrollTo=isin) )
156 |
157 | - Label Formatter Currency Locales: Currency locales format. (in BCP 47 partner, see more [here](https://www.techonthenet.com/js/language_tags.php))
158 |
159 | - Interval: Choose between custom and auto axis interval. You can set custom Max and Min values.
160 |
161 | - Inverse: Invert the axis.
162 |
163 | ### Grid Options
164 |
165 | ------------
166 | - Switch Axis: Switch X and Y axis making the graph horizontal.
167 |
168 | - Contain Label: Change the grid size based on label. ( see more [here](https://echarts.apache.org/en/option.html#grid.containLabel) )
169 |
170 | - Custom Grid Position: Enable grid position options
171 |
172 | - Left\Right\Top\Bottom: Define the position of the chart relative to each side. Can be absolute values like '60' or percentage values like '10%'.
173 |
174 | - width\height: Define the Height and width of the chart, can be absolute values, percentage values or 'auto' to let eCharts define the values.
175 |
176 | ### Tooltip Settings
177 |
178 | ------------
179 |
180 | - Show: On/Off Tooltip
181 |
182 | - Always Show: Whether to show tooltip content all the time.
183 |
184 | - Group By Stack: Group measures by value on stack property in individual measures.
185 |
186 | - Transition Duration: Speed of tool tip.
187 |
188 | - Use Custom Formatter: You can write a javascript function to draw the tooltip. ( see more [here](https://echarts.apache.org/en/option.html#tooltip.formatter) )
189 |
190 |
191 |
192 | ### Others Settings
193 |
194 | ------------
195 |
196 | - Show Zero Values: Hide 0 values.
197 |
198 | - Number Visible Items: Number of visible items in X axis.
199 |
200 | ### Samples
201 |
202 | ------------
203 | 
204 | 
205 | 
206 | 
207 | 
208 | 
209 | 
210 | 
211 |
--------------------------------------------------------------------------------
/customBarChart.js:
--------------------------------------------------------------------------------
1 | define([
2 | 'jquery',
3 | './echarts.min',
4 | './properties',
5 | 'qlik'
6 | ],
7 | function ($, echarts, props, qlik) {
8 | //Number of initial rows used in qInitialDataFetch prop
9 | const initialRows = 625;
10 |
11 |
12 | function getDimensionArray(layout) {
13 |
14 |
15 | return layout.qHyperCube.qDataPages[0].qMatrix.map((item) => {
16 | return item[0].qText;
17 | });
18 | }
19 |
20 | function getDimensionArrayDistinct(layout){
21 |
22 | dimension=getDimensionArray(layout);
23 |
24 | return [...new Set(dimension)]
25 |
26 | }
27 |
28 | function getColorType(layout, measurePosition) {
29 |
30 | return layout.qHyperCube.qMeasureInfo[measurePosition].colorType;
31 | }
32 |
33 | function getSerieValueItemStyleColor(layout, measurePosition, qMatrixItem) {
34 |
35 | var colorType = getColorType(layout, measurePosition);
36 |
37 | var color;
38 |
39 | //0 is single color 1 is color by expression
40 | if (colorType == 0) {
41 | color = layout.qHyperCube.qMeasureInfo[measurePosition].color.color
42 | } else if (colorType == 1) {
43 | color = qMatrixItem[measurePosition + 1].qAttrExps.qValues[0].qText
44 | }
45 |
46 | return color;
47 | }
48 |
49 | function getSerieValue(layout, measurePosition) {
50 |
51 |
52 | return layout.qHyperCube.qDataPages[0].qMatrix.map((item) => {
53 |
54 | var value = item[measurePosition + 1].qNum;
55 |
56 | //check if the number will be showed
57 | if (value == 0 && !layout.settings.others.showZeroBars) {
58 | value = '-';
59 | }
60 |
61 | textValue = item[measurePosition + 1].qText
62 |
63 | //get custom label
64 | if (layout.qHyperCube.qMeasureInfo[measurePosition].customDataLabel && layout.qHyperCube.qMeasureInfo[measurePosition].customDataLabel.use) {
65 | textValue = item[measurePosition + 1].qAttrExps.qValues[1].qText
66 | }
67 |
68 | return {
69 | value: value
70 | , valueText: textValue
71 | //Make to get stack name in tool tip
72 | , stack: layout.qHyperCube.qMeasureInfo[measurePosition].stack
73 | , showInToolTip: layout.qHyperCube.qMeasureInfo[measurePosition].showInToolTip
74 | , itemStyle: {
75 | color: getSerieValueItemStyleColor(layout, measurePosition, item)
76 | }
77 | }
78 |
79 | });
80 | }
81 |
82 | function getSerieLabel(layout, measurePosition) {
83 |
84 | settings = layout.settings
85 |
86 | var labelSettings = {
87 | show: settings.dataLabel.visibility,
88 | align: settings.dataLabel.align,
89 | fontSize: parseInt(settings.dataLabel.size),
90 | fontStyle: settings.dataLabel.style,
91 | position: settings.dataLabel.position,
92 | distance: parseInt(settings.dataLabel.distance),
93 | rotate: settings.dataLabel.rotate,
94 | formatter: function (params) {
95 | return params.data.valueText;
96 | }
97 | }
98 | var measureInfo = layout.qHyperCube.qMeasureInfo[measurePosition];
99 |
100 | if (measureInfo.dataLabel.auto == false) {
101 |
102 | //set single color
103 | if (getColorType(layout, measurePosition) == 0) {
104 |
105 | labelSettings.color = measureInfo.dataLabel.color.color;
106 |
107 | //set color by expression
108 | } else if (getColorType(layout, measurePosition) == 1) {
109 |
110 | labelSettings.color = measureInfo.dataLabel.colorExpression;
111 | }
112 |
113 | //Color Border
114 | if (measureInfo.dataLabel.border) {
115 |
116 | labelSettings.textBorderWidth = measureInfo.dataLabel.border.width
117 |
118 | if (getColorType(layout, measurePosition) == 0) {
119 |
120 | labelSettings.textBorderColor = color = measureInfo.dataLabel.border.color.color;
121 |
122 | } else if (getColorType(layout, measurePosition) == 1) {
123 |
124 | labelSettings.textBorderColor = measureInfo.dataLabel.border.colorExpression;
125 | }
126 | }
127 |
128 | }
129 |
130 | if (settings.dataLabel.family) {
131 | labelSettings.fontFamily = settings.dataLabel.family
132 | }
133 |
134 | if (settings.dataLabel.weight === 'custom') {
135 | labelSettings.fontWeight = parseInt(settings.dataLabel.weightCustom)
136 | } else {
137 | labelSettings.fontWeight = settings.dataLabel.weight
138 | }
139 |
140 |
141 | //Overwrite global settings
142 | if (measureInfo.globalSettings && !measureInfo.globalSettings.use) {
143 |
144 | labelSettings.show = measureInfo.globalSettings.dataLabel.visibility;
145 | labelSettings.align = measureInfo.globalSettings.dataLabel.align;
146 | labelSettings.fontSize = parseInt(measureInfo.globalSettings.dataLabel.size);
147 | labelSettings.position = measureInfo.globalSettings.dataLabel.position;
148 | labelSettings.distance = parseInt(measureInfo.globalSettings.dataLabel.distance);
149 | labelSettings.rotate = measureInfo.globalSettings.dataLabel.rotate;
150 |
151 | if (measureInfo.globalSettings.dataLabel.weight && measureInfo.globalSettings.dataLabel.weight === 'custom') {
152 | labelSettings.fontWeight = parseInt(measureInfo.globalSettings.dataLabel.weightCustom)
153 | } else if (measureInfo.globalSettings.dataLabel.weight) {
154 | labelSettings.fontWeight = measureInfo.globalSettings.dataLabel.weight
155 | }
156 |
157 | if (measureInfo.globalSettings.dataLabel.family) {
158 | labelSettings.fontFamily = measureInfo.globalSettings.dataLabel.family
159 | }
160 |
161 | }
162 |
163 | return labelSettings;
164 |
165 | }
166 |
167 | function getAxisLabel(layout) {
168 |
169 | axisLabelLayout = layout.settings.axisLabel
170 |
171 | var labelSettings = {
172 | show: axisLabelLayout.visibility,
173 | align: axisLabelLayout.align,
174 | fontSize: parseInt(axisLabelLayout.size),
175 | fontWeight: axisLabelLayout.weight,
176 | fontStyle: axisLabelLayout.style,
177 | rotate: axisLabelLayout.rotate
178 | }
179 |
180 |
181 | //get text color
182 | if (axisLabelLayout.colorType >= 0) {
183 |
184 | if (axisLabelLayout.colorType == 0) {
185 | labelSettings.color = axisLabelLayout.color.color
186 |
187 | } else if (axisLabelLayout.colorType == 1) {
188 | labelSettings.color = axisLabelLayout.colorByExpression
189 |
190 | }
191 | }
192 |
193 | //Get text border
194 | if (axisLabelLayout.border) {
195 |
196 | labelSettings.textBorderWidth = axisLabelLayout.border.width
197 |
198 | if (axisLabelLayout.colorType == 0) {
199 |
200 | labelSettings.textBorderColor = axisLabelLayout.border.color.color
201 |
202 | } else if (axisLabelLayout.colorType == 1) {
203 |
204 | labelSettings.textBorderColor = axisLabelLayout.border.colorByExpression
205 |
206 | }
207 |
208 | }
209 |
210 |
211 | return labelSettings;
212 |
213 | }
214 |
215 | function getLabelLine(layout, measureInfo) {
216 |
217 | labelLineLayout = layout.settings.dataLabel.labelLine
218 |
219 | var labelLine = {
220 | show: true,
221 | length2: 5,
222 | lineStyle: {
223 | width: parseInt(labelLineLayout.width),
224 | opacity: labelLineLayout.opacity,
225 | type: labelLineLayout.type
226 | }
227 | }
228 |
229 |
230 | //Define line color
231 |
232 | //Single Color
233 | if (labelLineLayout.colorType == 0) {
234 |
235 | labelLine.lineStyle.color = labelLineLayout.color.color
236 | //Color by expression
237 | } else if (labelLineLayout.colorType == 1) {
238 |
239 | labelLine.lineStyle.color = labelLineLayout.color.colorExpression
240 |
241 | //Keep Label Color
242 | } else if (labelLineLayout.colorType == 2) {
243 |
244 | if (measureInfo.colorType == 0) {
245 | labelLine.lineStyle.color = measureInfo.dataLabel.color.color
246 | } else if (measureInfo.colorType == 1) {
247 | labelLine.lineStyle.color = measureInfo.dataLabel.colorExpression
248 | }
249 |
250 | }
251 |
252 | return labelLine;
253 |
254 | }
255 |
256 | function getLabellabelLayout(layout) {
257 |
258 | var labelDrag = function (param) {
259 | return {
260 | x: param.rect.x + (param.rect.width / 2),
261 | y: param.labelRect.y,
262 | draggable: true
263 | }
264 | };
265 |
266 | return labelDrag;
267 |
268 | }
269 |
270 | function getSerieCommumProperty(layout, measurePosition) {
271 |
272 | var measureInfo = layout.qHyperCube.qMeasureInfo[measurePosition];
273 | var settings = layout.settings;
274 |
275 | var commumProperty = {
276 |
277 | barGap: settings.barOptions.barGap,
278 | type: measureInfo.type,
279 | stack: measureInfo.stack,
280 | name: measureInfo.qFallbackTitle,
281 | largeThreshold: 7000
282 | };
283 |
284 |
285 | if (settings.grid.switchAxies) {
286 | commumProperty.xAxisIndex = measureInfo.yIndex;
287 | } else {
288 | commumProperty.yAxisIndex = measureInfo.yIndex;
289 | }
290 |
291 | if (measureInfo.line && measureInfo.type == 'line') {
292 |
293 | commumProperty.symbolSize = parseInt(measureInfo.line.symbolSize)
294 | commumProperty.symbol = measureInfo.line.symbolType || 'emptyCircle'
295 | commumProperty.lineStyle = {
296 | width: parseInt(measureInfo.line.width),
297 | type: measureInfo.line.type,
298 | }
299 |
300 | if (measureInfo.line.step)
301 | commumProperty.step = measureInfo.line.step;
302 | }
303 |
304 | if (settings.dataLabel.drag && settings.dataLabel.drag.isDraggable) {
305 | commumProperty.labelLayout = getLabellabelLayout(layout)
306 |
307 | //Only show label line if labeldrag is active"
308 | if (settings.dataLabel.labelLine && settings.dataLabel.labelLine.show) {
309 | commumProperty.labelLine = getLabelLine(layout, measureInfo)
310 | }
311 | }
312 |
313 | if (!settings.barOptions.barWidthAuto) {
314 |
315 | commumProperty.barWidth = settings.barOptions.barWidth
316 | commumProperty.barMaxWidth = settings.barOptions.maxBarWidth
317 | commumProperty.barMinWidth = settings.barOptions.minBarWidth
318 | }
319 |
320 | return commumProperty
321 | }
322 |
323 | function getEmphasis(layout) {
324 |
325 | var focus = layout.settings.focus
326 |
327 | //check if On Focus option is on
328 | if (!focus.on) {
329 | return { focus: 'none' }
330 | }
331 |
332 | var emphasis = {
333 | focus: 'series',
334 | label: {
335 | fontSize: focus.label.size
336 | },
337 | itemStyle: {},
338 | lineStyle: {},
339 |
340 | };
341 |
342 | //Set single color
343 | if (focus.colorType == 0) {
344 |
345 | emphasis.label.color = focus.label.color.color
346 | emphasis.itemStyle.color = focus.item.color.color
347 | emphasis.lineStyle.color = focus.item.color.color
348 |
349 | //set expression colors if they not are ''
350 | } else if (focus.colorType == 1) {
351 |
352 | if (!focus.label.colorExpression.color == '') {
353 |
354 | emphasis.label.color = focus.label.colorExpression.color
355 | }
356 | if (!focus.item.colorExpression.color == '') {
357 |
358 | emphasis.itemStyle.color = focus.item.colorExpression.color
359 | emphasis.lineStyle.color = focus.item.colorExpression.color
360 | }
361 | }
362 |
363 |
364 | return emphasis;
365 |
366 | }
367 |
368 | function getSerieArray(layout) {
369 | serieArray = [];
370 |
371 | var expressionNumber = layout.qHyperCube.qMeasureInfo.length;
372 |
373 | for (var x = 0; x < expressionNumber; x++) {
374 |
375 | serieArray[x] = getSerieCommumProperty(layout, x)
376 | serieArray[x].label = getSerieLabel(layout, x)
377 | serieArray[x].data = getSerieValue(layout, x)
378 | serieArray[x].emphasis = getEmphasis(layout)
379 | }
380 |
381 | if (layout.qHyperCube.qMeasureInfo)
382 | return serieArray;
383 | }
384 |
385 | function getExpressionColorArray(layout) {
386 |
387 | var expressionNumber = layout.qHyperCube.qMeasureInfo.length;
388 | var expressionColorArray = [];
389 |
390 | for (var x = 0; x < expressionNumber; x++) {
391 |
392 | expressionColorArray[x] = layout.qHyperCube.qMeasureInfo[x].color.color;
393 |
394 | }
395 |
396 | return expressionColorArray;
397 |
398 | }
399 |
400 | function getDimensionName(layout) {
401 |
402 | return layout.qHyperCube.qDimensionInfo[0].qGroupFieldDefs[0];
403 | }
404 |
405 | function getNumberVisibleItems(layout) {
406 |
407 | return layout.settings.others.numberVisibleItems - 1
408 | }
409 |
410 | function getDataZoom(layout) {
411 |
412 | visibleItens = getNumberVisibleItems(layout);
413 | qtdDimensionValues = getDimensionArrayDistinct(layout).length
414 |
415 |
416 | //if to keep compatibility
417 | if (typeof (layout.settings.others.showDataZoom) === 'undefined') {
418 |
419 | showDataZoom = qtdDimensionValues >= visibleItens
420 | } else {
421 |
422 | showDataZoom = layout.settings.others.showDataZoom
423 | }
424 |
425 | let dataZoomProperty = {
426 | type: 'slider',
427 | show: showDataZoom,
428 | filterMode: 'empty'
429 | }
430 |
431 | if (layout.settings.grid.switchAxies) {
432 | dataZoomProperty.id = 'dataZoomY';
433 | dataZoomProperty.yAxisIndex = 0;
434 | dataZoomProperty.start = 100;
435 | dataZoomProperty.end = (1 - visibleItens / qtdDimensionValues) * 100;
436 |
437 | } else {
438 | dataZoomProperty.id = 'dataZoomX';
439 | dataZoomProperty.xAxisIndex = 0;
440 |
441 | if(!layout.settings.others.dataZoomPosition || layout.settings.others.dataZoomPosition=='start'){
442 | dataZoomProperty.startValue = 0;
443 | dataZoomProperty.endValue = visibleItens
444 | }else{
445 | dataZoomProperty.startValue = qtdDimensionValues;
446 | dataZoomProperty.endValue = qtdDimensionValues-visibleItens
447 | }
448 |
449 |
450 | }
451 |
452 | return [
453 | dataZoomProperty
454 | ];
455 | }
456 |
457 |
458 | function getGrid(layout) {
459 |
460 | gridLayout = layout.settings.grid
461 |
462 | var grid = {
463 | containLabel: gridLayout.containLabel,
464 | width: gridLayout.width,
465 | height: gridLayout.height
466 | }
467 |
468 | if (gridLayout.customGridPosition) {
469 |
470 | grid.left = gridLayout.position.left
471 | grid.right = gridLayout.position.right
472 | grid.top = gridLayout.position.top
473 | grid.bottom = gridLayout.position.bottom
474 |
475 | }
476 |
477 |
478 | return grid
479 | }
480 |
481 | function getLegendTextStyle(layout) {
482 |
483 | legendLayout = layout.settings.legend.text;
484 |
485 | var legendTextStyle = {
486 | fontSize: legendLayout.size
487 | }
488 |
489 | if (layout.settings.legend.colorType == 0) {
490 |
491 | legendTextStyle.color = legendLayout.color.color
492 |
493 | } else if (layout.settings.legend.colorType == 1) {
494 |
495 | legendTextStyle.color = legendLayout.colorExpression
496 |
497 | }
498 |
499 | if (legendLayout.border) {
500 |
501 | legendTextStyle.textBorderWidth = legendLayout.border.width
502 |
503 | if (layout.settings.legend.colorType == 0) {
504 |
505 | legendTextStyle.textBorderColor = legendLayout.border.color.color
506 |
507 | } else if (layout.settings.legend.colorType == 1) {
508 |
509 | legendTextStyle.textBorderColor = legendLayout.border.colorExpression
510 |
511 | }
512 |
513 | }
514 |
515 |
516 |
517 | return legendTextStyle
518 |
519 | }
520 |
521 | function getLegendPosition(legendLayout) {
522 |
523 | legendPosition = {}
524 | legendPosition[legendLayout.position] = legendLayout.distance
525 |
526 | if (legendLayout.position == 'left' || legendLayout.position == 'right') {
527 | legendPosition.orient = 'vertical'
528 |
529 | }
530 |
531 | return legendPosition;
532 | }
533 |
534 | function getLegendIcon(legendProperty, measureType) {
535 |
536 | //If measure type is bar or iconline don't exists
537 | if (measureType == 'bar' || !legendProperty.iconLine) {
538 |
539 | legendType = 'icon'
540 |
541 | } else if (measureType == 'line') {
542 |
543 | legendType = 'iconLine'
544 |
545 | }
546 |
547 | return legendProperty[legendType]
548 | }
549 |
550 | function geLegendData(layout) {
551 |
552 | var legendDataArray = [];
553 | var expressionNumber = layout.qHyperCube.qMeasureInfo.length;
554 |
555 | for (var x = 0; x < expressionNumber; x++) {
556 |
557 | if (typeof (layout.qHyperCube.qMeasureInfo[x].showInLegend) === 'undefined' || layout.qHyperCube.qMeasureInfo[x].showInLegend) {
558 |
559 | measureInfo = layout.qHyperCube.qMeasureInfo[x];
560 |
561 | icon = getLegendIcon(layout.settings.legend, measureInfo.type)
562 | dataItem = {
563 | name: measureInfo.qFallbackTitle,
564 | icon: icon
565 | }
566 |
567 | legendDataArray.push(dataItem)
568 | }
569 |
570 |
571 | }
572 |
573 | return legendDataArray;
574 | }
575 |
576 | function getLegend(layout) {
577 |
578 | var legend = {
579 | show: layout.settings.legend.visibility,
580 | textStyle: getLegendTextStyle(layout),
581 | data: geLegendData(layout)
582 | }
583 |
584 | if (layout.settings.legend.position) {
585 |
586 | var legendPosition = getLegendPosition(layout.settings.legend)
587 |
588 | //put the selected position in legend object.
589 | for (x in legendPosition) {
590 | legend[x] = legendPosition[x]
591 | }
592 | }
593 |
594 | return legend;
595 |
596 | }
597 |
598 | function getXAxis(layout) {
599 |
600 | var xAxis = {
601 | data: getDimensionArray(layout),
602 | axisLabel: getAxisLabel(layout)
603 | }
604 |
605 |
606 | return xAxis;
607 |
608 | }
609 |
610 | function getYAxisProperty(yAxis) {
611 |
612 | yAxisProperty = {
613 | show: yAxis.show,
614 | inverse: yAxis.inverse
615 | }
616 |
617 | if (!yAxis.autoInterval) {
618 |
619 | if (yAxis.intervalType == 0 || yAxis.intervalType == 2) {
620 |
621 | yAxisProperty.min = yAxis.min
622 | }
623 |
624 | if (yAxis.intervalType == 1 || yAxis.intervalType == 2) {
625 |
626 | yAxisProperty.max = yAxis.max
627 | }
628 |
629 | }
630 |
631 | if (yAxis.label && !yAxis.label.on) {
632 | yAxisProperty.axisLabel = {
633 | formatter: function (value) {
634 |
635 | options = {
636 | style: yAxis.label.style,
637 | currency: yAxis.label.currencySymbol,
638 | minimumFractionDigits: parseInt(yAxis.label.minFractDigits)
639 | }
640 |
641 | return new Intl.NumberFormat(yAxis.label.locales, options).format(value)
642 |
643 | }
644 | }
645 | }
646 |
647 | return yAxisProperty;
648 |
649 | }
650 |
651 | function getYAxis(layout) {
652 |
653 | if (layout.settings.yAxis) {
654 |
655 | var yAxis = [
656 | getYAxisProperty(layout.settings.yAxis.left),
657 | getYAxisProperty(layout.settings.yAxis.right)
658 | ]
659 |
660 | } else {
661 |
662 | var yAxis = [{ show: false }, { show: false }]
663 | }
664 |
665 |
666 | return yAxis;
667 |
668 | }
669 |
670 | //Get all date from the cube
671 | async function getWholeHyperCube(layout, self) {
672 |
673 | const totalRows = layout.qHyperCube.qSize.qcy;
674 | const totalColuns = layout.qHyperCube.qSize.qcx;
675 |
676 | //check if the initial dataset already is full
677 | if (initialRows / totalColuns >= totalRows) {
678 | return layout;
679 |
680 | }
681 |
682 | async function fetchPage(arrayLen) {
683 |
684 | var requestPage = [{
685 | qTop: arrayLen,
686 | qLeft: 0,
687 | qWidth: totalColuns,
688 | qHeight: Math.min(initialRows, totalRows - arrayLen)
689 | }];
690 |
691 | const aux = await self.backendApi.getData(requestPage)
692 |
693 | return aux[0].qMatrix;
694 |
695 | }
696 |
697 | let tempArray = [...layout.qHyperCube.qDataPages[0].qMatrix];
698 | const maxRowsNumber = totalRows;
699 |
700 | while (tempArray.length < maxRowsNumber) {
701 | tempArray = tempArray.concat(await fetchPage(tempArray.length));
702 | }
703 |
704 | layout.qHyperCube.qDataPages[0].qMatrix = [...tempArray];
705 |
706 | return layout;
707 |
708 |
709 | }
710 |
711 | function getToolTipFormatter(layout, tooltipSettings) {
712 |
713 | if (tooltipSettings.customFormatter.use) {
714 | return new Function('params', tooltipSettings.customFormatter.function);
715 | }
716 |
717 | if (tooltipSettings.customFormatter.sortByStack) {
718 |
719 | return function (params) {
720 | tooltip = params[0].axisValue + '
'
721 | measureArray = {}
722 |
723 | params.forEach((variavel) => {
724 | if (variavel.data.showInToolTip) {
725 | if (!measureArray[variavel.data.stack])
726 | measureArray[variavel.data.stack] = [];
727 |
728 | tooltipTemp = ''
729 |
730 | tooltipTemp = tooltipTemp + '
'
731 | tooltipTemp = tooltipTemp + '' + variavel.marker + variavel.seriesName + ':' + variavel.data.valueText
732 | tooltipTemp = tooltipTemp + '
'
733 | measureArray[variavel.data.stack].push(tooltipTemp)
734 |
735 | }
736 | })
737 |
738 | for (stack in measureArray) {
739 | tooltip = tooltip + stack + '
'
740 | measureArray[stack].forEach((measures) => {
741 | tooltip = tooltip + measures
742 | })
743 | tooltip = tooltip + '
'
744 | }
745 |
746 | return tooltip
747 | }
748 | }
749 |
750 |
751 | return function (params) {
752 | tooltip = params[0].axisValue
753 |
754 | params.forEach((variavel) => {
755 | if (variavel.data.showInToolTip) {
756 | tooltip = tooltip + ''
757 | tooltip = tooltip + '' + variavel.marker + variavel.seriesName + ':' + variavel.data.valueText
758 | tooltip = tooltip + '
'
759 | }
760 |
761 | })
762 |
763 | return tooltip
764 | }
765 |
766 | }
767 |
768 | function getToolTip(layout) {
769 |
770 | var toolTip = {
771 | show: false,
772 | trigger: 'axis',
773 | textStyle: {}
774 | }
775 |
776 | if (!layout.settings.tooltip || !layout.settings.tooltip.show)
777 | return toolTip;
778 |
779 | tooltipSettings = layout.settings.tooltip
780 | toolTip.show = tooltipSettings.show
781 | toolTip.alwaysShowContent = tooltipSettings.alwaysShow
782 | toolTip.transitionDuration = tooltipSettings.transitionDuration
783 | toolTip.backgroundColor = tooltipSettings.backgroundColor
784 | toolTip.borderWidth = parseInt(tooltipSettings.borderWidth)
785 | toolTip.borderColor = tooltipSettings.borderColor
786 | toolTip.textStyle.textBorderWidth = tooltipSettings.text.border.width
787 | toolTip.textStyle.fontSize = parseInt(tooltipSettings.text.size)
788 |
789 | toolTip.formatter = getToolTipFormatter(layout, tooltipSettings)
790 |
791 |
792 | if (layout.settings.tooltip.colorType == 0) {
793 |
794 | toolTip.textStyle.color = tooltipSettings.text.color.color
795 | toolTip.textStyle.textBorderColor = tooltipSettings.text.border.color.color
796 |
797 | } else if (layout.settings.tooltip.colorType == 1) {
798 |
799 | toolTip.textStyle.color = tooltipSettings.text.colorExpression
800 | toolTip.textStyle.textBorderColor = tooltipSettings.text.border.colorByExpression
801 |
802 | }
803 |
804 | return toolTip;
805 |
806 | }
807 |
808 | return {
809 |
810 | initialProperties: {
811 | qHyperCubeDef: {
812 | qDimensions: [],
813 | qMeasures: [],
814 | qInitialDataFetch: [{
815 | qWidth: 16,
816 | qHeight: initialRows
817 | }]
818 | }
819 | },
820 | definition: props,
821 | support: { snapshot: true, export: true, exportData: true },
822 | paint: async function ($element, layout) {
823 |
824 | echarts.dispose($element[0]);
825 |
826 | try {
827 |
828 | layout = await getWholeHyperCube(layout, this);
829 |
830 | } catch (errorMsg) {
831 | console.log(errorMsg)
832 | }
833 |
834 |
835 | var dimensionName = getDimensionName(layout);
836 | var serieArray = getSerieArray(layout);
837 | var expressionColorArray = getExpressionColorArray(layout)
838 | var legend = getLegend(layout);
839 | var dataZoomArray = getDataZoom(layout);
840 | var grid = getGrid(layout);
841 | var xAxis = getXAxis(layout);
842 | var yAxis = getYAxis(layout);
843 | var toolTip = getToolTip(layout);
844 |
845 | //Switch Axies
846 | //Is needed change dataZoom prop too
847 | if (layout.settings.grid.switchAxies) {
848 | xAxis = getYAxis(layout);
849 | yAxis = getXAxis(layout);
850 | }
851 |
852 | var myChart = echarts.init($element[0]);
853 |
854 | var option = {
855 | color: expressionColorArray,
856 | legend: legend,
857 | dataZoom: dataZoomArray,
858 | grid: grid,
859 | xAxis: xAxis,
860 | yAxis: yAxis,
861 | tooltip: toolTip,
862 | series: serieArray
863 | };
864 |
865 |
866 | myChart.setOption(option);
867 |
868 | myChart.on('click', function (params) {
869 | qlik.currApp(this).field(dimensionName).selectValues([params.name], true, true)
870 |
871 | });
872 |
873 |
874 |
875 | var defer = qlik.Promise.defer();
876 |
877 | /*Alert when the extension finish the rendering and wait one second*/
878 | myChart.on('finished', function () {
879 | setTimeout(function () {
880 | defer.resolve();
881 | }, 1000);
882 |
883 | });
884 |
885 | return defer.promise;
886 |
887 | },
888 | resize: function ($element) {
889 |
890 | echarts.init($element[0]).resize()
891 |
892 | }
893 |
894 | }
895 | });
--------------------------------------------------------------------------------
/customBarChart.qext:
--------------------------------------------------------------------------------
1 | {
2 | "name" : "Custom Bar charts",
3 | "description" : "Custom chart based in e-charts library",
4 | "icon" : "extension",
5 | "type" : "visualization",
6 | "version": "2.17.0",
7 | "author": "Wederson Domingues"
8 | }
--------------------------------------------------------------------------------
/properties.js:
--------------------------------------------------------------------------------
1 |
2 | define([], function () {
3 |
4 | return {
5 | type: "items",
6 | component: "accordion",
7 | items: {
8 | dimensions: {
9 | uses: "dimensions",
10 | min: 1,
11 | max: 1
12 | },
13 | measures: {
14 | uses: "measures",
15 | min: 1,
16 | items: {
17 | ShowInToolTip: {
18 | ref: "qDef.showInToolTip",
19 | type: "boolean",
20 | component: "switch",
21 | label: "Show in Tooltip",
22 | options: [{
23 | value: true,
24 | label: "Show"
25 | }, {
26 | value: false,
27 | label: "hide"
28 | }],
29 | defaultValue: true
30 | },
31 | ShowInLegend: {
32 | ref: "qDef.showInLegend",
33 | type: "boolean",
34 | component: "switch",
35 | label: "Show in Legend",
36 | options: [{
37 | value: true,
38 | label: "Show"
39 | }, {
40 | value: false,
41 | label: "hide"
42 | }],
43 | defaultValue: true
44 | },
45 | CustomDataLabelUse: {
46 | ref: "qDef.customDataLabel.use",
47 | type: "boolean",
48 | component: "switch",
49 | label: "Use Custom Data Label",
50 | options: [{
51 | value: true,
52 | label: "On"
53 | }, {
54 | value: false,
55 | label: "Off"
56 | }],
57 | defaultValue: false
58 | },
59 | CustomDataLabel: {
60 | type: "string",
61 | ref: "qAttributeExpressions.1.qExpression",
62 | label: "Custom Data Label",
63 | component: "expression",
64 | defaultValue: "='My Measure Title'&chr(10)&Money(column(1))",
65 | show: function (param) {
66 | return param.qDef.customDataLabel && param.qDef.customDataLabel.use;
67 | }
68 | },
69 |
70 | GlobalSettingsUse: {
71 | ref: "qDef.globalSettings.use",
72 | type: "boolean",
73 | component: "switch",
74 | label: "Use Global Settings",
75 | options: [{
76 | value: true,
77 | label: "On"
78 | }, {
79 | value: false,
80 | label: "Off"
81 | }],
82 | defaultValue: true
83 | },
84 |
85 | GlobalSettingsDataLabelVisibility: {
86 | ref: "qDef.globalSettings.dataLabel.visibility",
87 | type: "boolean",
88 | component: "switch",
89 | label: "Data Label Visibility",
90 | options: [{
91 | value: true,
92 | label: "Show"
93 | }, {
94 | value: false,
95 | label: "Hide"
96 | }],
97 | defaultValue: true,
98 | show: function (param) {
99 | return param.qDef.globalSettings && !param.qDef.globalSettings.use
100 | }
101 | },
102 | LabelDistance: {
103 | ref: "qDef.globalSettings.dataLabel.distance",
104 | label: "Data Label Distance",
105 | type: "string",
106 | defaultValue: '5',
107 | expression: "optional",
108 | show: function (param) {
109 | return param.qDef.globalSettings && !param.qDef.globalSettings.use
110 | }
111 | },
112 | LabelRotate: {
113 | ref: "qDef.globalSettings.dataLabel.rotate",
114 | label: "Data Label Rotate",
115 | type: "string",
116 | defaultValue: '0',
117 | expression: "optional",
118 | show: function (param) {
119 | return param.qDef.globalSettings && !param.qDef.globalSettings.use
120 | }
121 | },
122 | LabelPosition: {
123 | ref: "qDef.globalSettings.dataLabel.position",
124 | label: "Data Label Position",
125 | type: "string",
126 | component: "dropdown",
127 | defaultValue: 'inside',
128 | options: [
129 | { value: "bottom", label: "bottom" },
130 | { value: "inside", label: "inside" },
131 | { value: "insideBottom", label: "insideBottom" },
132 | { value: "insideBottomLeft", label: "insideBottomLeft" },
133 | { value: "insideBottomRight", label: "insideBottomRight" },
134 | { value: "insideLeft", label: "insideLeft" },
135 | { value: "insideRight", label: "insideRight" },
136 | { value: "insideTop", label: "insideTop" },
137 | { value: "insideTopLeft", label: "insideTopLeft" },
138 | { value: "insideTopRight", label: "insideTopRight" },
139 | { value: "left", label: "left" },
140 | { value: "right", label: "right" },
141 | { value: "top", label: "top" }
142 | ],
143 | show: function (param) {
144 | return param.qDef.globalSettings && !param.qDef.globalSettings.use
145 | }
146 | },
147 | LabelFontWeight: {
148 | ref: "qDef.globalSettings.dataLabel.weight",
149 | label: "Weight",
150 | type: "string",
151 | component: "dropdown",
152 | defaultValue: 'normal',
153 | options: [
154 | { value: "normal", label: "normal" },
155 | { value: "bold", label: "bold" },
156 | { value: "bolder", label: "bolder" },
157 | { value: "lighter", label: "lighter" },
158 | { value: "custom", label: "custom"}
159 |
160 | ],
161 | show: function (param){
162 | return param.qDef.globalSettings && !param.qDef.globalSettings.use
163 | }
164 | },
165 | LabelFontWeightCustom: {
166 | ref: "qDef.globalSettings.dataLabel.weightCustom",
167 | label: "Weight Custom",
168 | type: "string",
169 | defaultValue: '300',
170 | expression: "optional",
171 | show: function (param) {
172 | return param.qDef.globalSettings && !param.qDef.globalSettings.use && param.qDef.globalSettings.dataLabel.weight==="custom"
173 | }
174 | },
175 | LabelFontFamily: {
176 | ref: "qDef.globalSettings.dataLabel.family",
177 | label: "Font Family",
178 | type: "string",
179 | component: "dropdown",
180 | defaultValue: 'sans-serif',
181 | options: [
182 | {value: "Arial", label: "Arial"},
183 | {value: "Verdana", label: "Verdana"},
184 | {value: "Tahoma", label: "Tahoma"},
185 | {value: "Trebuchet MS", label: "Trebuchet MS"},
186 | {value: "Times New Roman", label: "Times New Roman"},
187 | {value: "Georgia", label: "Georgia"},
188 | {value: "Garamond", label: "Garamond"},
189 | {value: "Courier New", label: "Courier New"},
190 | {value: "Brush Script MT", label: "Brush Script MT"},
191 | {value: "sans-serif", label: "sans-serif"}
192 | ],
193 | show: function (param) {
194 | return param.qDef.globalSettings && !param.qDef.globalSettings.use
195 | }
196 | },
197 | LabelFontSize: {
198 | ref: "qDef.globalSettings.dataLabel.size",
199 | label: "Data Label Size",
200 | type: "string",
201 | defaultValue: '15',
202 | expression: "optional",
203 | show: function (param) {
204 | return param.qDef.globalSettings && !param.qDef.globalSettings.use
205 | }
206 | },
207 | LabelFontAlign: {
208 | ref: "qDef.globalSettings.dataLabel.align",
209 | label: "Data Label Align",
210 | type: "string",
211 | component: "dropdown",
212 | defaultValue: 'center',
213 | options: [
214 | { value: "left", label: "left" },
215 | { value: "center", label: "center" },
216 | { value: "right", label: "right" }
217 | ],
218 | show: function (param) {
219 | return param.qDef.globalSettings && !param.qDef.globalSettings.use
220 | }
221 | },
222 | Stack: {
223 | ref: "qDef.stack",
224 | label: "stack",
225 | type: "string",
226 | defaultValue: '',
227 | expression: "optional"
228 | },
229 | Type: {
230 | ref: "qDef.type",
231 | label: "type",
232 | type: "string",
233 | component: "dropdown",
234 | defaultValue: 'bar',
235 | options: [{ value: "bar", label: "bar" }, { value: "line", label: "line" }]
236 | },
237 | LineType: {
238 | ref: "qDef.line.type",
239 | label: "Line Type",
240 | type: "string",
241 | component: "dropdown",
242 | defaultValue: 'solid',
243 | options: [{ value: "solid", label: "solid" }, { value: "dashed", label: "dashed" }, { value: "dotted", label: "dotted" }],
244 | show: function (param) {
245 | return param.qDef.type == "line";
246 | }
247 | },
248 | LineWidth: {
249 | ref: "qDef.line.width",
250 | label: "Line Width",
251 | type: "string",
252 | defaultValue: '2',
253 | expression: "optional",
254 | show: function (param) {
255 | return param.qDef.type == "line";
256 | }
257 | },
258 | LineSymbolType: {
259 | ref: "qDef.line.symbolType",
260 | label: "Line Symbol Type",
261 | type: "string",
262 | component: "dropdown",
263 | defaultValue: 'emptyCircle',
264 | options: [
265 | { value: "emptyCircle", label: "emptyCircle" },
266 | { value: "circle", label: "circle" },
267 | { value: "rect", label: "rect" },
268 | { value: "roundRect", label: "roundRect" },
269 | { value: "triangle", label: "triangle" },
270 | { value: "diamond", label: "diamond" },
271 | { value: "pin", label: "pin" },
272 | { value: "arrow", label: "arrow" },
273 | { value: "none", label: "none" }
274 | ],
275 | show: function (param) {
276 | return param.qDef.type == "line";
277 | }
278 | },
279 | LineSymbolSize: {
280 | ref: "qDef.line.symbolSize",
281 | label: "Line Symbol Size",
282 | type: "string",
283 | defaultValue: '4',
284 | expression: "optional",
285 | show: function (param) {
286 | return param.qDef.type == "line";
287 | }
288 | },
289 | LineStep: {
290 | ref: "qDef.line.step",
291 | label: "Line Step",
292 | type: "string",
293 | component: "dropdown",
294 | defaultValue: '',
295 | options: [{ value: "", label: "" }, { value: "start", label: "start" }, { value: "middle", label: "middle" }, { value: "end", label: "end" }],
296 | show: function (param) {
297 | return param.qDef.type == "line";
298 | }
299 | },
300 | Yindex: {
301 | ref: "qDef.yIndex",
302 | label: "y-axis",
303 | type: "string",
304 | component: "dropdown",
305 | defaultValue: '0',
306 | options: [{ value: "0", label: "left" }, { value: "1", label: "right" }]
307 | },
308 | ColorType: {
309 | ref: "qDef.colorType",
310 | type: "string",
311 | component: "dropdown",
312 | defaultValue: 0,
313 | options: [{ value: 0, label: "Single Color" }, { value: 1, label: "By Expression" }]
314 | },
315 | SingleColor: {
316 | ref: "qDef.color",
317 | component: "color-picker",
318 | label: "Item Color",
319 | type: "object",
320 | defaultValue: {
321 | color: "#4477aa",
322 | index: "-1"
323 | },
324 | show: function (param) {
325 | return param.qDef.colorType == 0;
326 | }
327 | },
328 | ColorByExpression: {
329 | type: "string",
330 | ref: "qAttributeExpressions.0.qExpression",
331 | label: "Item Color",
332 | component: "expression",
333 | defaultValue: "='#000'",
334 | show: function (param) {
335 | return param.qDef.colorType == 1;
336 | }
337 | },
338 | LabelAutoColor: {
339 | ref: "qDef.dataLabel.auto",
340 | type: "boolean",
341 | component: "switch",
342 | label: "Label Color Auto",
343 | options: [{
344 | value: true,
345 | label: "On"
346 | }, {
347 | value: false,
348 | label: "Off"
349 | }],
350 | defaultValue: true
351 | },
352 | LabelColor: {
353 | ref: "qDef.dataLabel.color",
354 | component: "color-picker",
355 | label: "Label Color",
356 | type: "object",
357 | defaultValue: {
358 | color: "#fff",
359 | index: "-1"
360 | },
361 | show: function (param) {
362 | return !param.qDef.dataLabel.auto && param.qDef.colorType == 0;
363 | }
364 | },
365 | LabelColorByExpression: {
366 | type: "string",
367 | ref: "qDef.dataLabel.colorExpression",
368 | label: "Label Color",
369 | defaultValue: '#000',
370 | expression: "optional",
371 | show: function (param) {
372 | return !param.qDef.dataLabel.auto && param.qDef.colorType == 1;
373 | }
374 | },
375 | LabelBorderWidth: {
376 | type: "string",
377 | ref: "qDef.dataLabel.border.width",
378 | label: "Label Border Width",
379 | defaultValue: '0',
380 | expression: "optional",
381 | show: function (param) {
382 | return !param.qDef.dataLabel.auto
383 | }
384 | },
385 | LabelBorderColor: {
386 | ref: "qDef.dataLabel.border.color",
387 | component: "color-picker",
388 | label: "Label Border Color",
389 | type: "object",
390 | defaultValue: {
391 | color: "#fff",
392 | index: "-1"
393 | },
394 | show: function (param) {
395 | return !param.qDef.dataLabel.auto && param.qDef.colorType == 0;
396 | }
397 | },
398 | LabelBorderColorByExpression: {
399 | type: "string",
400 | ref: "qDef.dataLabel.border.colorExpression",
401 | label: "Label Border Color",
402 | defaultValue: '#000',
403 | expression: "optional",
404 | show: function (param) {
405 | return !param.qDef.dataLabel.auto && param.qDef.colorType == 1;
406 | }
407 | },
408 |
409 | }
410 | },
411 | Settings: {
412 | component: "expandable-items",
413 | label: "Global Settings",
414 | items: {
415 | DataLabel: {
416 | type: "items",
417 | label: "Data Label",
418 | items: {
419 | LabelVisibility: {
420 | ref: "settings.dataLabel.visibility",
421 | type: "boolean",
422 | component: "switch",
423 | label: "Visibility",
424 | options: [{
425 | value: true,
426 | label: "Show"
427 | }, {
428 | value: false,
429 | label: "Hide"
430 | }],
431 | defaultValue: true
432 | },
433 | LabelDistance: {
434 | ref: "settings.dataLabel.distance",
435 | label: "Distance",
436 | type: "string",
437 | defaultValue: '5',
438 | expression: "optional"
439 | },
440 | LabelRotate: {
441 | ref: "settings.dataLabel.rotate",
442 | label: "Rotate",
443 | type: "string",
444 | defaultValue: '0',
445 | expression: "optional"
446 | },
447 | LabelPosition: {
448 | ref: "settings.dataLabel.position",
449 | label: "Position",
450 | type: "string",
451 | component: "dropdown",
452 | defaultValue: 'inside',
453 | options: [
454 | { value: "bottom", label: "bottom" },
455 | { value: "inside", label: "inside" },
456 | { value: "insideBottom", label: "insideBottom" },
457 | { value: "insideBottomLeft", label: "insideBottomLeft" },
458 | { value: "insideBottomRight", label: "insideBottomRight" },
459 | { value: "insideLeft", label: "insideLeft" },
460 | { value: "insideRight", label: "insideRight" },
461 | { value: "insideTop", label: "insideTop" },
462 | { value: "insideTopLeft", label: "insideTopLeft" },
463 | { value: "insideTopRight", label: "insideTopRight" },
464 | { value: "left", label: "left" },
465 | { value: "right", label: "right" },
466 | { value: "top", label: "top" }
467 | ]
468 | },
469 | LabelFontStyle: {
470 | ref: "settings.dataLabel.style",
471 | label: "Style",
472 | type: "string",
473 | component: "dropdown",
474 | defaultValue: 'normal',
475 | options: [
476 | { value: "normal", label: "normal" },
477 | { value: "italic", label: "italic" },
478 | { value: "oblique", label: "oblique" }
479 | ]
480 | },
481 | LabelFontWeight: {
482 | ref: "settings.dataLabel.weight",
483 | label: "Weight",
484 | type: "string",
485 | component: "dropdown",
486 | defaultValue: 'normal',
487 | options: [
488 | { value: "normal", label: "normal" },
489 | { value: "bold", label: "bold" },
490 | { value: "bolder", label: "bolder" },
491 | { value: "lighter", label: "lighter" },
492 | { value: "custom", label: "custom"}
493 |
494 | ]
495 | },
496 | LabelFontWeightCustom: {
497 | ref: "settings.dataLabel.weightCustom",
498 | label: "Weight Custom",
499 | type: "string",
500 | defaultValue: '300',
501 | expression: "optional",
502 | show: function (param) {
503 | return param.settings.dataLabel.weight==="custom"
504 | }
505 | },
506 | LabelFontSize: {
507 | ref: "settings.dataLabel.size",
508 | label: "Size",
509 | type: "string",
510 | defaultValue: '15',
511 | expression: "optional"
512 | },
513 | LabelFontFamily: {
514 | ref: "settings.dataLabel.family",
515 | label: "Font Family",
516 | type: "string",
517 | component: "dropdown",
518 | defaultValue: 'sans-serif',
519 | options: [
520 | {value: "Arial", label: "Arial"},
521 | {value: "Verdana", label: "Verdana"},
522 | {value: "Tahoma", label: "Tahoma"},
523 | {value: "Trebuchet MS", label: "Trebuchet MS"},
524 | {value: "Times New Roman", label: "Times New Roman"},
525 | {value: "Georgia", label: "Georgia"},
526 | {value: "Garamond", label: "Garamond"},
527 | {value: "Courier New", label: "Courier New"},
528 | {value: "Brush Script MT", label: "Brush Script MT"},
529 | {value: "sans-serif", label: "sans-serif"}
530 | ]
531 | },
532 | LabelFontAlign: {
533 | ref: "settings.dataLabel.align",
534 | label: "Align",
535 | type: "string",
536 | component: "dropdown",
537 | defaultValue: 'center',
538 | options: [
539 | { value: "left", label: "left" },
540 | { value: "center", label: "center" },
541 | { value: "right", label: "right" }
542 |
543 | ]
544 | },
545 | LabelDrag: {
546 | ref: "settings.dataLabel.drag.isDraggable",
547 | type: "boolean",
548 | component: "switch",
549 | label: "Allow Drag&Drop",
550 | options: [{
551 | value: true,
552 | label: "On"
553 | }, {
554 | value: false,
555 | label: "Off"
556 | }],
557 | defaultValue: false
558 | },
559 | LabelDragText: {
560 | label: "Label dragging only works when label border width is 0.",
561 | component: "text",
562 | show: function (param) {
563 | return param.settings.dataLabel.drag.isDraggable
564 | }
565 | },
566 | LabelLabelLine: {
567 | ref: "settings.dataLabel.labelLine.show",
568 | type: "boolean",
569 | component: "switch",
570 | label: "Show Lable Line",
571 | options: [{
572 | value: true,
573 | label: "Show"
574 | }, {
575 | value: false,
576 | label: "Off"
577 | }],
578 | defaultValue: false,
579 | show: function (param) {
580 | return param.settings.dataLabel.drag.isDraggable
581 | }
582 | },
583 | LabelLabelLineColorType: {
584 | ref: "settings.dataLabel.labelLine.colorType",
585 | label: "Line Color Mode",
586 | type: "string",
587 | component: "dropdown",
588 | defaultValue: 0,
589 | options: [{ value: 0, label: "Single Color" }, { value: 1, label: "By Expression" }, { value: 2, label: "Use Label Color" }],
590 | show: function (param) {
591 | return param.settings.dataLabel.labelLine.show && param.settings.dataLabel.drag.isDraggable
592 | }
593 | },
594 | LabelLabelLineColor: {
595 | ref: "settings.dataLabel.labelLine.color",
596 | component: "color-picker",
597 | label: "Line Color",
598 | type: "object",
599 | defaultValue: {
600 | color: "#000",
601 | index: "-1"
602 | },
603 | show: function (param) {
604 | thisParam = param.settings.dataLabel
605 | return param.settings.dataLabel.labelLine.show &&
606 | param.settings.dataLabel.drag.isDraggable &&
607 | param.settings.dataLabel.labelLine.colorType == 0
608 | }
609 | },
610 | LabelLabelLineColorExpression: {
611 | ref: "settings.dataLabel.labelLine.colorExpression",
612 | label: "Line Color",
613 | type: "string",
614 | defaultValue: '#000',
615 | expression: "optional",
616 | show: function (param) {
617 | return param.settings.dataLabel.labelLine.show &&
618 | param.settings.dataLabel.drag.isDraggable &&
619 | param.settings.dataLabel.labelLine.colorType == 1
620 | }
621 | },
622 | LabelLabelLineWidth: {
623 | ref: "settings.dataLabel.labelLine.width",
624 | label: "Line Width",
625 | type: "string",
626 | defaultValue: '1',
627 | expression: "optional",
628 | show: function (param) {
629 | return param.settings.dataLabel.labelLine.show &&
630 | param.settings.dataLabel.drag.isDraggable
631 | }
632 | },
633 | LabelLabelLineOpacity: {
634 | ref: "settings.dataLabel.labelLine.opacity",
635 | label: "Line Opacity (0 to 1)",
636 | type: "string",
637 | defaultValue: '1',
638 | expression: "optional",
639 | show: function (param) {
640 | thisParam = param.settings.dataLabel
641 | return thisParam.labelLine.show && thisParam.drag.isDraggable
642 | }
643 | },
644 | LabelLabelLineType: {
645 | ref: "settings.dataLabel.labelLine.type",
646 | label: "Line Type",
647 | type: "string",
648 | component: "dropdown",
649 | defaultValue: 'solid',
650 | options: [
651 | { value: "solid", label: "solid" },
652 | { value: "dashed", label: "dashed" },
653 | { value: "dotted", label: "dotted" }
654 | ],
655 | show: function (param) {
656 | thisParam = param.settings.dataLabel
657 | return thisParam.labelLine.show && thisParam.drag.isDraggable
658 | }
659 | },
660 | }
661 | },
662 | AxisLabel: {
663 | type: "items",
664 | label: "Axis Label",
665 | items: {
666 | LabelVisibility: {
667 | ref: "settings.axisLabel.visibility",
668 | type: "boolean",
669 | component: "switch",
670 | label: "Visibility",
671 | options: [{
672 | value: true,
673 | label: "Show"
674 | }, {
675 | value: false,
676 | label: "Hide"
677 | }],
678 | defaultValue: true
679 | },
680 | LabelRotate: {
681 | type: "number",
682 | component: "slider",
683 | label: "Rotate",
684 | ref: "settings.axisLabel.rotate",
685 | min: -90,
686 | max: 90,
687 | step: 1,
688 | defaultValue: 0
689 | },
690 | LabelFontStyle: {
691 | ref: "settings.axisLabel.style",
692 | label: "Style",
693 | type: "string",
694 | component: "dropdown",
695 | defaultValue: 'normal',
696 | options: [
697 | { value: "normal", label: "normal" },
698 | { value: "italic", label: "italic" },
699 | { value: "oblique", label: "oblique" }
700 | ]
701 | },
702 | LabelFontWeight: {
703 | ref: "settings.axisLabel.weight",
704 | label: "Weight",
705 | type: "string",
706 | component: "dropdown",
707 | defaultValue: 'normal',
708 | options: [
709 | { value: "normal", label: "normal" },
710 | { value: "bold", label: "bold" },
711 | { value: "bolder", label: "bolder" },
712 | { value: "lighter", label: "lighter" }
713 |
714 | ]
715 | },
716 | LabelFontSize: {
717 | ref: "settings.axisLabel.size",
718 | label: "Size",
719 | type: "string",
720 | defaultValue: '15',
721 | expression: "optional"
722 | },
723 | LabelFontAlign: {
724 | ref: "settings.axisLabel.align",
725 | label: "Align",
726 | type: "string",
727 | component: "dropdown",
728 | defaultValue: 'center',
729 | options: [
730 | { value: "left", label: "left" },
731 | { value: "center", label: "center" },
732 | { value: "right", label: "right" }
733 |
734 | ]
735 | },
736 | LabelColorType: {
737 | ref: "settings.axisLabel.colorType",
738 | type: "string",
739 | component: "dropdown",
740 | defaultValue: 0,
741 | options: [{ value: 0, label: "Single Color" }, { value: 1, label: "By Expression" }],
742 |
743 | },
744 | LabelColor: {
745 | ref: "settings.axisLabel.color",
746 | component: "color-picker",
747 | label: "Text Color",
748 | type: "object",
749 | defaultValue: {
750 | color: "#333",
751 | index: "-2"
752 | },
753 | show: function (param) {
754 | return param.settings.axisLabel.colorType == 0;
755 | }
756 | },
757 | LabelColorByExpression: {
758 | type: "string",
759 | ref: "settings.axisLabel.colorByExpression",
760 | label: "Text Color",
761 | defaultValue: '#333',
762 | expression: "optional",
763 | show: function (param) {
764 | return param.settings.axisLabel.colorType == 1;
765 | }
766 | },
767 | LabelBorderWidth: {
768 | type: "string",
769 | ref: "settings.axisLabel.border.width",
770 | label: "Text Border Width",
771 | defaultValue: '0',
772 | expression: "optional"
773 | },
774 | LabelBorderColor: {
775 | ref: "settings.axisLabel.border.color",
776 | component: "color-picker",
777 | label: "Text Border Color",
778 | type: "object",
779 | defaultValue: {
780 | color: "#fff",
781 | index: "-1"
782 | },
783 | show: function (param) {
784 | return param.settings.axisLabel.colorType == 0;
785 | }
786 | },
787 | LabelBorderColorByExpression: {
788 | type: "string",
789 | ref: "settings.axisLabel.border.colorByExpression",
790 | label: "Text Border Color",
791 | defaultValue: '#fff',
792 | expression: "optional",
793 | show: function (param) {
794 | return param.settings.axisLabel.colorType == 1;
795 | }
796 | },
797 | }
798 | },
799 | Legend: {
800 | type: "items",
801 | label: "Legend",
802 | items: {
803 | LegendVisibility: {
804 | ref: "settings.legend.visibility",
805 | type: "boolean",
806 | component: "switch",
807 | label: "Visibility",
808 | options: [{
809 | value: true,
810 | label: "On"
811 | }, {
812 | value: false,
813 | label: "Off"
814 | }],
815 | defaultValue: true
816 | },
817 | LegendPosition: {
818 | ref: "settings.legend.position",
819 | type: "string",
820 | label: "Position",
821 | component: "dropdown",
822 | defaultValue: 'top',
823 | options: [
824 | { value: 'top', label: "top" },
825 | { value: 'left', label: "left" },
826 | { value: 'right', label: "right" },
827 | { value: 'bottom', label: "bottom" },
828 | ]
829 | },
830 | LegendDistance: {
831 | type: "string",
832 | ref: "settings.legend.distance",
833 | label: "Distance",
834 | expression: "optional",
835 | defaultValue: '0%'
836 | },
837 | LegendIcon: {
838 | ref: "settings.legend.icon",
839 | type: "string",
840 | label: "Bar Icon Type",
841 | component: "dropdown",
842 | defaultValue: 'circle',
843 | options: [
844 | { value: 'none', label: "none" },
845 | { value: 'circle', label: "circle" },
846 | { value: 'rect', label: "rect" },
847 | { value: 'roundRect', label: "roundRect" },
848 | { value: 'triangle', label: "triangle" },
849 | { value: 'diamond', label: "diamond" },
850 | { value: 'pin', label: "pin" },
851 | { value: 'arrow', label: "arrow" },
852 | { value: 'emptyCircle', label: 'emptyCircle' }
853 | ]
854 | },
855 | LegendIconLine: {
856 | ref: "settings.legend.iconLine",
857 | type: "string",
858 | label: "Line Icon Type",
859 | component: "dropdown",
860 | defaultValue: 'emptyCircle',
861 | options: [
862 | { value: 'none', label: "none" },
863 | { value: 'circle', label: "circle" },
864 | { value: 'rect', label: "rect" },
865 | { value: 'roundRect', label: "roundRect" },
866 | { value: 'triangle', label: "triangle" },
867 | { value: 'diamond', label: "diamond" },
868 | { value: 'pin', label: "pin" },
869 | { value: 'arrow', label: "arrow" },
870 | { value: 'emptyCircle', label: 'emptyCircle' }
871 | ]
872 | },
873 | LegendTextSize: {
874 | type: "string",
875 | ref: "settings.legend.text.size",
876 | label: "Text Size",
877 | expression: "optional",
878 | defaultValue: '12',
879 | },
880 | LegendColorType: {
881 | ref: "settings.legend.colorType",
882 | type: "string",
883 | component: "dropdown",
884 | defaultValue: 0,
885 | options: [{ value: 0, label: "Single Color" }, { value: 1, label: "By Expression" }]
886 | },
887 | LegendSingleColor: {
888 | ref: "settings.legend.text.color",
889 | component: "color-picker",
890 | label: "Text Color",
891 | type: "object",
892 | defaultValue: {
893 | color: "#4477aa",
894 | index: "-1"
895 | },
896 | show: function (param) {
897 | return param.settings.legend.colorType == 0;
898 | }
899 | },
900 | LegendColorByExpression: {
901 | type: "string",
902 | ref: "settings.legend.text.colorExpression",
903 | label: "Text Color",
904 | expression: "optional",
905 | defaultValue: '',
906 | show: function (param) {
907 | return param.settings.legend.colorType == 1;
908 | }
909 | },
910 | LegendBorderWidth: {
911 | type: "string",
912 | ref: "settings.legend.text.border.width",
913 | label: "Text Border Width",
914 | defaultValue: '0',
915 | expression: "optional"
916 | },
917 | LegendBorderColor: {
918 | ref: "settings.legend.text.border.color",
919 | component: "color-picker",
920 | label: "Text Border Color",
921 | type: "object",
922 | defaultValue: {
923 | color: "#fff",
924 | index: "-1"
925 | },
926 | show: function (param) {
927 | return param.settings.legend.colorType == 0;
928 | }
929 | },
930 | LegendBorderColorByExpression: {
931 | type: "string",
932 | ref: "settings.legend.text.border.colorByExpression",
933 | label: "Text Border Color",
934 | defaultValue: '#fff',
935 | expression: "optional",
936 | show: function (param) {
937 | return param.settings.legend.colorType == 1;
938 | }
939 | },
940 | }
941 | },
942 | Focus: {
943 | type: "items",
944 | label: "On Focus",
945 | items: {
946 | FocusOn: {
947 | ref: "settings.focus.on",
948 | type: "boolean",
949 | component: "switch",
950 | label: "Focus",
951 | options: [{
952 | value: true,
953 | label: "on"
954 | }, {
955 | value: false,
956 | label: "off"
957 | }],
958 | defaultValue: false
959 | },
960 | FocusColorType: {
961 | ref: "settings.focus.colorType",
962 | type: "string",
963 | component: "dropdown",
964 | defaultValue: 0,
965 | options: [{ value: 0, label: "Single Color" }, { value: 1, label: "By Expression" }, { value: 2, label: "Keep Colors" }]
966 | },
967 | FocusSingleColor: {
968 | ref: "settings.focus.item.color",
969 | component: "color-picker",
970 | label: "Color",
971 | type: "object",
972 | defaultValue: {
973 | color: "#4477aa",
974 | index: "-1"
975 | },
976 | show: function (param) {
977 | return param.settings.focus.colorType == 0;
978 | }
979 | },
980 | FocusColorByExpression: {
981 | type: "string",
982 | ref: "settings.focus.item.colorExpression.color",
983 | label: "Color",
984 | expression: "optional",
985 | defaultValue: '',
986 | show: function (param) {
987 | return param.settings.focus.colorType == 1;
988 | }
989 | },
990 | FocusLabelSingleColor: {
991 | ref: "settings.focus.label.color",
992 | component: "color-picker",
993 | label: "Label Color",
994 | type: "object",
995 | defaultValue: {
996 | color: "#4477aa",
997 | index: "-1"
998 | },
999 | show: function (param) {
1000 | return param.settings.focus.colorType == 0;
1001 | }
1002 | },
1003 | FocusLabelColorByExpression: {
1004 | type: "string",
1005 | ref: "settings.focus.label.colorExpression.color",
1006 | label: "Label Color",
1007 | expression: "optional",
1008 | defaultValue: '',
1009 | show: function (param) {
1010 | return param.settings.focus.colorType == 1;
1011 | }
1012 | },
1013 | FocusLabelSize: {
1014 | type: "string",
1015 | ref: "settings.focus.label.size",
1016 | label: "Label Size",
1017 | defaultValue: "16",
1018 | expression: "optional"
1019 | }
1020 |
1021 | }
1022 |
1023 | },
1024 | BarOptions: {
1025 | type: "items",
1026 | label: "Bar Options",
1027 | items: {
1028 | BarGap: {
1029 | ref: "settings.barOptions.barGap",
1030 | label: "Bar Gap",
1031 | type: "string",
1032 | defaultValue: '0',
1033 | expression: "optional"
1034 | },
1035 | BarWidthAuto: {
1036 | ref: "settings.barOptions.barWidthAuto",
1037 | type: "boolean",
1038 | component: "switch",
1039 | label: "Bar Width Auto",
1040 | options: [{
1041 | value: true,
1042 | label: "On"
1043 | }, {
1044 | value: false,
1045 | label: "Off"
1046 | }],
1047 | defaultValue: true
1048 | },
1049 | BarWidth: {
1050 | ref: "settings.barOptions.barWidth",
1051 | label: "Bar Width",
1052 | type: "string",
1053 | defaultValue: '40',
1054 | expression: "optional",
1055 | show: function (param) {
1056 | return !param.settings.barOptions.barWidthAuto;
1057 | }
1058 | },
1059 | MaxBarWidth: {
1060 | ref: "settings.barOptions.maxBarWidth",
1061 | label: "Max Bar Width",
1062 | type: "string",
1063 | defaultValue: '100%',
1064 | expression: "optional",
1065 | show: function (param) {
1066 | return !param.settings.barOptions.barWidthAuto;
1067 | }
1068 | },
1069 | MinBarWidth: {
1070 | ref: "settings.barOptions.minBarWidth",
1071 | label: "Min Bar Width",
1072 | type: "string",
1073 | defaultValue: '1',
1074 | expression: "optional",
1075 | show: function (param) {
1076 | return !param.settings.barOptions.barWidthAuto;
1077 | }
1078 | },
1079 | }
1080 | },
1081 | yAxisLeft: {
1082 | type: "items",
1083 | label: "yAxis: Left",
1084 | items: {
1085 | yAxisLeftShow: {
1086 | label: "Visibility",
1087 | ref: "settings.yAxis.left.show",
1088 | type: "boolean",
1089 | component: "switch",
1090 | options: [{
1091 | value: true,
1092 | label: "Show"
1093 | }, {
1094 | value: false,
1095 | label: "Hide"
1096 | }],
1097 | defaultValue: false
1098 | },
1099 | yAxisLeftLabelFormatterAuto: {
1100 | label: "Label Formatter Auto",
1101 | ref: "settings.yAxis.left.label.on",
1102 | type: "boolean",
1103 | component: "switch",
1104 | options: [{
1105 | value: true,
1106 | label: "On"
1107 | }, {
1108 | value: false,
1109 | label: "Off"
1110 | }],
1111 | defaultValue: true,
1112 | show: function(param){
1113 | return param.settings.yAxis.left.show
1114 | }
1115 | },
1116 | yAxisLeftLabelMinFractionDigits: {
1117 | label: "Label Formatter Min Fraction Digits",
1118 | type: "string",
1119 | ref: "settings.yAxis.left.label.minFractDigits",
1120 | expression: "optional",
1121 | defaultValue: '0',
1122 | show: function (param) {
1123 | return param.settings.yAxis.left.show && param.settings.yAxis.left.label && !param.settings.yAxis.left.label.on;
1124 | }
1125 | },
1126 | yAxisLeftLabelInputType: {
1127 | ref: "settings.yAxis.left.label.inputType",
1128 | type: "string",
1129 | component: "dropdown",
1130 | defaultValue: 0,
1131 | options: [{ value: 0, label: "Single" }, { value: 1, label: "Expression"}],
1132 | show: function (param) {
1133 | return param.settings.yAxis.left.show && param.settings.yAxis.left.label && !param.settings.yAxis.left.label.on;
1134 | }
1135 | },
1136 | yAxisLeftLabelStyle: {
1137 | label: "Label Formatter Style",
1138 | ref: "settings.yAxis.left.label.style",
1139 | type: "string",
1140 | component: "dropdown",
1141 | defaultValue: "decimal",
1142 | options: [{ value: "decimal", label: "decimal" }, { value: "currency", label: "currency"},{ value: "percent", label: "percent"}],
1143 | show: function (param) {
1144 | return param.settings.yAxis.left.show && param.settings.yAxis.left.label && !param.settings.yAxis.left.label.on && param.settings.yAxis.left.label.inputType==0;
1145 | }
1146 | },
1147 | yAxisLeftLabelStyleByExpression: {
1148 | label: "Label Formatter Style",
1149 | type: "string",
1150 | ref: "settings.yAxis.left.label.style",
1151 | expression: "optional",
1152 | defaultValue: 'decimal',
1153 | show: function (param) {
1154 | return param.settings.yAxis.left.show && param.settings.yAxis.left.label && !param.settings.yAxis.left.label.on && param.settings.yAxis.left.label.inputType==1;
1155 | }
1156 | },
1157 | yAxisLeftLabelCurrencySymbol: {
1158 | label: "Label Formatter Currency Symbol",
1159 | ref: "settings.yAxis.left.label.currencySymbol",
1160 | type: "string",
1161 | component: "dropdown",
1162 | defaultValue: "USD",
1163 | options: [{ value: "BRL", label: "BRL" }, { value: "USD", label: "USD"},{ value: "EUR", label: "EUR"},{value:"INR", label: "INR"}],
1164 | show: function (param) {
1165 | return param.settings.yAxis.left.show && param.settings.yAxis.left.label && !param.settings.yAxis.left.label.on && settings.yAxis.left.label.style=="currency" && param.settings.yAxis.left.label.inputType==0;
1166 | }
1167 | },
1168 | yAxisLeftLabelCurrencySymbolByExpression: {
1169 | label: "Label Formatter Currency Symbol",
1170 | type: "string",
1171 | ref: "settings.yAxis.left.label.currencySymbol",
1172 | expression: "optional",
1173 | defaultValue: 'USD',
1174 | show: function (param) {
1175 | return param.settings.yAxis.left.show && param.settings.yAxis.left.label && !param.settings.yAxis.left.label.on && settings.yAxis.left.label.style=="currency" && param.settings.yAxis.left.label.inputType==1;
1176 | }
1177 | },
1178 | yAxisLeftLabelLocales: {
1179 | label: "Label Formatter Currency Locales",
1180 | ref: "settings.yAxis.left.label.locales",
1181 | type: "string",
1182 | component: "dropdown",
1183 | defaultValue: "en-US",
1184 | options: [{ value: "pt-BR", label: "pt-BR" }, { value: "en-US", label: "en-US"},{ value: "de-DE", label: "de-DE"}],
1185 | show: function (param) {
1186 | return param.settings.yAxis.left.show && param.settings.yAxis.left.label && !param.settings.yAxis.left.label.on && param.settings.yAxis.left.label.inputType==0;
1187 | }
1188 | },
1189 | yAxisLeftLabelLocalesByExpression: {
1190 | label: "Label Formatter Currency Locales",
1191 | type: "string",
1192 | ref: "settings.yAxis.left.label.locales",
1193 | expression: "optional",
1194 | defaultValue: 'en-US',
1195 | show: function (param) {
1196 | return param.settings.yAxis.left.show && param.settings.yAxis.left.label && !param.settings.yAxis.left.label.on && param.settings.yAxis.left.label.inputType==1;
1197 | }
1198 | },
1199 | yAxisLeftAutoValues: {
1200 | ref: "settings.yAxis.left.autoInterval",
1201 | type: "boolean",
1202 | component: "switch",
1203 | label: "Interval",
1204 | options: [{
1205 | value: true,
1206 | label: "Auto"
1207 | }, {
1208 | value: false,
1209 | label: "Custom"
1210 | }],
1211 | defaultValue: true
1212 | },
1213 | yAxisLeftIntervalCustom: {
1214 | ref: "settings.yAxis.left.intervalType",
1215 | type: "string",
1216 | component: "dropdown",
1217 | defaultValue: 0,
1218 | options: [{ value: 0, label: "Min" }, { value: 1, label: "Max" }, { value: 2, label: "Min/Max" }],
1219 | show: function (param) {
1220 | return !param.settings.yAxis.left.autoInterval
1221 | }
1222 | },
1223 | yAxisLeftMin: {
1224 | ref: "settings.yAxis.left.min",
1225 | label: "Min",
1226 | type: "string",
1227 | defaultValue: '0',
1228 | expression: "optional",
1229 | show: function (param) {
1230 | return !param.settings.yAxis.left.autoInterval &&
1231 | (
1232 | param.settings.yAxis.left.intervalType == 0 ||
1233 | param.settings.yAxis.left.intervalType == 2
1234 | )
1235 | }
1236 | },
1237 | yAxisLeftMax: {
1238 | ref: "settings.yAxis.left.max",
1239 | label: "Max",
1240 | type: "string",
1241 | defaultValue: '100',
1242 | expression: "optional",
1243 | show: function (param) {
1244 | return !param.settings.yAxis.left.autoInterval &&
1245 | (
1246 | param.settings.yAxis.left.intervalType == 1 ||
1247 | param.settings.yAxis.left.intervalType == 2
1248 | )
1249 | }
1250 | },
1251 | yAxisLeftInverse: {
1252 | ref: "settings.yAxis.left.inverse",
1253 | type: "boolean",
1254 | component: "switch",
1255 | label: "Inverse",
1256 | options: [{
1257 | value: true,
1258 | label: "On"
1259 | }, {
1260 | value: false,
1261 | label: "Off"
1262 | }],
1263 | defaultValue: false
1264 | }
1265 | }
1266 | },
1267 | yAxisRight: {
1268 | type: "items",
1269 | label: "yAxis: Right",
1270 | items: {
1271 | yAxisRightShow: {
1272 | label: "Visibility",
1273 | ref: "settings.yAxis.right.show",
1274 | type: "boolean",
1275 | component: "switch",
1276 | options: [{
1277 | value: true,
1278 | label: "Show"
1279 | }, {
1280 | value: false,
1281 | label: "Hide"
1282 | }],
1283 | defaultValue: false
1284 | },
1285 | yAxisRightLabelFormatterAuto: {
1286 | label: "Label Formatter Auto",
1287 | ref: "settings.yAxis.right.label.on",
1288 | type: "boolean",
1289 | component: "switch",
1290 | options: [{
1291 | value: true,
1292 | label: "On"
1293 | }, {
1294 | value: false,
1295 | label: "Off"
1296 | }],
1297 | defaultValue: true,
1298 | show: function(param){
1299 | return param.settings.yAxis.right.show
1300 | }
1301 | },
1302 | yAxisRightLabelMinFractionDigits: {
1303 | label: "Label Formatter Min Fraction Digits",
1304 | type: "string",
1305 | ref: "settings.yAxis.right.label.minFractDigits",
1306 | expression: "optional",
1307 | defaultValue: '0',
1308 | show: function (param) {
1309 | return param.settings.yAxis.right.show && param.settings.yAxis.right.label && !param.settings.yAxis.right.label.on;
1310 | }
1311 | },
1312 | yAxisRightLabelInputType: {
1313 | ref: "settings.yAxis.right.label.inputType",
1314 | type: "string",
1315 | component: "dropdown",
1316 | defaultValue: 0,
1317 | options: [{ value: 0, label: "Single" }, { value: 1, label: "Expression"}],
1318 | show: function (param) {
1319 | return param.settings.yAxis.right.show && param.settings.yAxis.right.label && !param.settings.yAxis.right.label.on;
1320 | }
1321 | },
1322 | yAxisRightLabelStyle: {
1323 | label: "Label Formatter Style",
1324 | ref: "settings.yAxis.right.label.style",
1325 | type: "string",
1326 | component: "dropdown",
1327 | defaultValue: "decimal",
1328 | options: [{ value: "decimal", label: "decimal" }, { value: "currency", label: "currency"},{ value: "percent", label: "percent"}],
1329 | show: function (param) {
1330 | return param.settings.yAxis.right.show && param.settings.yAxis.right.label && !param.settings.yAxis.right.label.on && param.settings.yAxis.right.label.inputType==0;
1331 | }
1332 | },
1333 | yAxisRightLabelStyleByExpression: {
1334 | label: "Label Formatter Style",
1335 | type: "string",
1336 | ref: "settings.yAxis.right.label.style",
1337 | expression: "optional",
1338 | defaultValue: 'decimal',
1339 | show: function (param) {
1340 | return param.settings.yAxis.right.show && param.settings.yAxis.right.label && !param.settings.yAxis.right.label.on && param.settings.yAxis.right.label.inputType==1;
1341 | }
1342 | },
1343 | yAxisRightLabelCurrencySymbol: {
1344 | label: "Label Formatter Currency Symbol",
1345 | ref: "settings.yAxis.right.label.currencySymbol",
1346 | type: "string",
1347 | component: "dropdown",
1348 | defaultValue: "USD",
1349 | options: [{ value: "BRL", label: "BRL" }, { value: "USD", label: "USD"},{ value: "EUR", label: "EUR"},{value:"INR", label: "INR"}],
1350 | show: function (param) {
1351 | return param.settings.yAxis.right.show && param.settings.yAxis.right.label && !param.settings.yAxis.right.label.on && settings.yAxis.right.label.style=="currency" && param.settings.yAxis.right.label.inputType==0;
1352 | }
1353 | },
1354 | yAxisRightLabelCurrencySymbolByExpression: {
1355 | label: "Label Formatter Currency Symbol",
1356 | type: "string",
1357 | ref: "settings.yAxis.right.label.currencySymbol",
1358 | expression: "optional",
1359 | defaultValue: 'USD',
1360 | show: function (param) {
1361 | return param.settings.yAxis.right.show && param.settings.yAxis.right.label && !param.settings.yAxis.right.label.on && settings.yAxis.right.label.style=="currency" && param.settings.yAxis.right.label.inputType==1;
1362 | }
1363 | },
1364 | yAxisRightLabelLocales: {
1365 | label: "Label Formatter Currency Locales",
1366 | ref: "settings.yAxis.right.label.locales",
1367 | type: "string",
1368 | component: "dropdown",
1369 | defaultValue: "en-US",
1370 | options: [{ value: "pt-BR", label: "pt-BR" }, { value: "en-US", label: "en-US"},{ value: "de-DE", label: "de-DE"}],
1371 | show: function (param) {
1372 | return param.settings.yAxis.right.show && param.settings.yAxis.right.label && !param.settings.yAxis.right.label.on && param.settings.yAxis.right.label.inputType==0;
1373 | }
1374 | },
1375 | yAxisRightLabelLocalesByExpression: {
1376 | label: "Label Formatter Currency Locales",
1377 | type: "string",
1378 | ref: "settings.yAxis.right.label.locales",
1379 | expression: "optional",
1380 | defaultValue: 'en-US',
1381 | show: function (param) {
1382 | return param.settings.yAxis.right.show && param.settings.yAxis.right.label && !param.settings.yAxis.right.label.on && param.settings.yAxis.right.label.inputType==1;
1383 | }
1384 | },
1385 | yAxisRightAutoValues: {
1386 | ref: "settings.yAxis.right.autoInterval",
1387 | type: "boolean",
1388 | component: "switch",
1389 | label: "Interval",
1390 | options: [{
1391 | value: true,
1392 | label: "Auto"
1393 | }, {
1394 | value: false,
1395 | label: "Custom"
1396 | }],
1397 | defaultValue: true
1398 | },
1399 | yAxisRightIntervalCustom: {
1400 | ref: "settings.yAxis.right.intervalType",
1401 | type: "string",
1402 | component: "dropdown",
1403 | defaultValue: 0,
1404 | options: [{ value: 0, label: "Min" }, { value: 1, label: "Max" }, { value: 2, label: "Min/Max" }],
1405 | show: function (param) {
1406 | return !param.settings.yAxis.right.autoInterval
1407 | }
1408 | },
1409 | yAxisRightMin: {
1410 | ref: "settings.yAxis.right.min",
1411 | label: "Min",
1412 | type: "string",
1413 | defaultValue: '0',
1414 | expression: "optional",
1415 | show: function (param) {
1416 | return !param.settings.yAxis.right.autoInterval &&
1417 | (
1418 | param.settings.yAxis.right.intervalType == 0 ||
1419 | param.settings.yAxis.right.intervalType == 2
1420 | )
1421 | }
1422 | },
1423 | yAxisRightMax: {
1424 | ref: "settings.yAxis.right.max",
1425 | label: "Max",
1426 | type: "string",
1427 | defaultValue: '100',
1428 | expression: "optional",
1429 | show: function (param) {
1430 | return !param.settings.yAxis.right.autoInterval &&
1431 | (
1432 | param.settings.yAxis.right.intervalType == 1 ||
1433 | param.settings.yAxis.right.intervalType == 2
1434 | )
1435 | }
1436 | },
1437 | yAxisRightInverse: {
1438 | ref: "settings.yAxis.right.inverse",
1439 | type: "boolean",
1440 | component: "switch",
1441 | label: "Inverse",
1442 | options: [{
1443 | value: true,
1444 | label: "On"
1445 | }, {
1446 | value: false,
1447 | label: "Off"
1448 | }],
1449 | defaultValue: false
1450 | },
1451 | }
1452 | },
1453 | Grid: {
1454 | type: "items",
1455 | label: "Grid",
1456 | items: {
1457 | SwitchAxies: {
1458 | ref: "settings.grid.switchAxies",
1459 | type: "boolean",
1460 | component: "switch",
1461 | label: "Switch Axis",
1462 | options: [{
1463 | value: true,
1464 | label: "On"
1465 | }, {
1466 | value: false,
1467 | label: "False"
1468 | }],
1469 | defaultValue: false
1470 | },
1471 | ContainLabel: {
1472 | ref: "settings.grid.containLabel",
1473 | type: "boolean",
1474 | component: "switch",
1475 | label: "Contain Label",
1476 | options: [{
1477 | value: true,
1478 | label: "On"
1479 | }, {
1480 | value: false,
1481 | label: "False"
1482 | }],
1483 | defaultValue: false
1484 | },
1485 | CustomGrid: {
1486 | ref: "settings.grid.customGridPosition",
1487 | type: "boolean",
1488 | component: "switch",
1489 | label: "Custom Grid Position",
1490 | options: [{
1491 | value: true,
1492 | label: "On"
1493 | }, {
1494 | value: false,
1495 | label: "Off"
1496 | }],
1497 | defaultValue: false
1498 | },
1499 | Left: {
1500 | ref: "settings.grid.position.left",
1501 | label: "Left",
1502 | type: "string",
1503 | defaultValue: '10%',
1504 | expression: "optional",
1505 | show: function (param) {
1506 | return param.settings.grid.customGridPosition;
1507 | }
1508 | },
1509 | Right: {
1510 | ref: "settings.grid.position.right",
1511 | label: "Right",
1512 | type: "string",
1513 | defaultValue: '10%',
1514 | expression: "optional",
1515 | show: function (param) {
1516 | return param.settings.grid.customGridPosition;
1517 | }
1518 | },
1519 | Top: {
1520 | ref: "settings.grid.position.top",
1521 | label: "Top",
1522 | type: "string",
1523 | defaultValue: '60',
1524 | expression: "optional",
1525 | show: function (param) {
1526 | return param.settings.grid.customGridPosition;
1527 | }
1528 | },
1529 | Bottom: {
1530 | ref: "settings.grid.position.bottom",
1531 | label: "Bottom",
1532 | type: "string",
1533 | defaultValue: '60',
1534 | expression: "optional",
1535 | show: function (param) {
1536 | return param.settings.grid.customGridPosition;
1537 | }
1538 | },
1539 | Width: {
1540 | ref: "settings.grid.width",
1541 | label: "Width",
1542 | type: "string",
1543 | defaultValue: 'auto',
1544 | expression: "optional"
1545 | },
1546 | Height: {
1547 | ref: "settings.grid.height",
1548 | label: "Height",
1549 | type: "string",
1550 | defaultValue: 'auto',
1551 | expression: "optional"
1552 | },
1553 | }
1554 |
1555 | },
1556 | Tooltip:{
1557 | type: 'items',
1558 | label: 'Tooltip',
1559 | items: {
1560 | TooltipsShow: {
1561 | ref: "settings.tooltip.show",
1562 | type: "boolean",
1563 | component: "switch",
1564 | label: "Show",
1565 | options: [{
1566 | value: true,
1567 | label: "Show"
1568 | }, {
1569 | value: false,
1570 | label: "Hide"
1571 | }],
1572 | defaultValue: false
1573 | },
1574 | TooltipsAlwaysShow: {
1575 | ref: "settings.tooltip.alwaysShow",
1576 | type: "boolean",
1577 | component: "switch",
1578 | label: "Always Show",
1579 | options: [{
1580 | value: true,
1581 | label: "On"
1582 | }, {
1583 | value: false,
1584 | label: "Off"
1585 | }],
1586 | defaultValue: false
1587 | },
1588 | TooltipsSortByStack: {
1589 | ref: "settings.tooltip.customFormatter.sortByStack",
1590 | type: "boolean",
1591 | component: "switch",
1592 | label: "Group By Stack",
1593 | options: [{
1594 | value: true,
1595 | label: "On"
1596 | }, {
1597 | value: false,
1598 | label: "Off"
1599 | }],
1600 | defaultValue: false
1601 | },
1602 | TooltipsTransitionDuration: {
1603 | ref: "settings.tooltip.transitionDuration",
1604 | label: "Transition Duration",
1605 | type: "string",
1606 | defaultValue: '0.4',
1607 | expression: "optional"
1608 | },
1609 | TooltipsBackgroundColor: {
1610 | ref: "settings.tooltip.backgroundColor",
1611 | label: "Background Color",
1612 | type: "string",
1613 | defaultValue: 'rgba(255,255,255,0.7)',
1614 | expression: "optional"
1615 | },
1616 | TooltipsBorderWidth: {
1617 | ref: "settings.tooltip.borderWidth",
1618 | label: "Border Width",
1619 | type: "string",
1620 | defaultValue: '1',
1621 | expression: "optional"
1622 | },
1623 | TooltipsBorderColor: {
1624 | ref: "settings.tooltip.borderColor",
1625 | label: "Border Color",
1626 | type: "string",
1627 | defaultValue: '#333',
1628 | expression: "optional"
1629 | },
1630 | TooltipMinWidth: {
1631 | type: "string",
1632 | ref: "settings.tooltip.minWidth",
1633 | label: "Min Width",
1634 | expression: "optional",
1635 | defaultValue: '150px',
1636 | },
1637 | TooltipTextSize: {
1638 | type: "string",
1639 | ref: "settings.tooltip.text.size",
1640 | label: "Text Size",
1641 | expression: "optional",
1642 | defaultValue: '12',
1643 | },
1644 | TooltipColorType: {
1645 | ref: "settings.tooltip.colorType",
1646 | type: "string",
1647 | component: "dropdown",
1648 | defaultValue: 0,
1649 | options: [{ value: 0, label: "Single Color" }, { value: 1, label: "By Expression" }]
1650 | },
1651 | TooltipSingleColor: {
1652 | ref: "settings.tooltip.text.color",
1653 | component: "color-picker",
1654 | label: "Text Color",
1655 | type: "object",
1656 | defaultValue: {
1657 | color: "#000",
1658 | index: "-1"
1659 | },
1660 | show: function (param) {
1661 | return param.settings.tooltip.colorType == 0;
1662 | }
1663 | },
1664 | TooltipColorByExpression: {
1665 | type: "string",
1666 | ref: "settings.tooltip.text.colorExpression",
1667 | label: "Text Color",
1668 | expression: "optional",
1669 | defaultValue: '',
1670 | show: function (param) {
1671 | return param.settings.tooltip.colorType == 1;
1672 | }
1673 | },
1674 | TooltipBorderWidth: {
1675 | type: "string",
1676 | ref: "settings.tooltip.text.border.width",
1677 | label: "Text Border Width",
1678 | defaultValue: '0',
1679 | expression: "optional"
1680 | },
1681 | TooltipBorderColor: {
1682 | ref: "settings.tooltip.text.border.color",
1683 | component: "color-picker",
1684 | label: "Text Border Color",
1685 | type: "object",
1686 | defaultValue: {
1687 | color: "#fff",
1688 | index: "-1"
1689 | },
1690 | show: function (param) {
1691 | return param.settings.tooltip.colorType == 0;
1692 | }
1693 | },
1694 | TooltipBorderColorByExpression: {
1695 | type: "string",
1696 | ref: "settings.tooltip.text.border.colorByExpression",
1697 | label: "Text Border Color",
1698 | defaultValue: '#fff',
1699 | expression: "optional",
1700 | show: function (param) {
1701 | return param.settings.tooltip.colorType == 1;
1702 | }
1703 | },
1704 | TooltipUseCustomFormatter: {
1705 | ref: "settings.tooltip.customFormatter.use",
1706 | type: "boolean",
1707 | component: "switch",
1708 | label: "Use Custom FOrmatter Function",
1709 | options: [{
1710 | value: true,
1711 | label: "On"
1712 | }, {
1713 | value: false,
1714 | label: "Off"
1715 | }],
1716 | defaultValue: false
1717 | },
1718 | TooltipUseCustomFormatterText: {
1719 | label: "Custom Formatter Function, see Echart toolip formatter documentation for more information. https://echarts.apache.org/en/option.html#tooltip.valueFormatter ",
1720 | component: "text",
1721 | show: function (param) {
1722 | return param.settings.tooltip.customFormatter.use
1723 | }
1724 | },
1725 | ToolTipFormatterFunction: {
1726 | component: "textarea",
1727 | rows: 7,
1728 | maxlength: 10000,
1729 | ref: "settings.tooltip.customFormatter.function",
1730 | label: "Formatter Function ",
1731 | show: function (param) {
1732 | return param.settings.tooltip.customFormatter.use
1733 | },
1734 | defaultValue: `tooltip = params[0].axisValue
1735 | params.forEach((variavel) => {
1736 | if(variavel.data.showInToolTip){
1737 | tooltip = tooltip + ''
1738 | tooltip = tooltip + '' + variavel.marker + variavel.seriesName + ':' + variavel.data.valueText
1739 | tooltip = tooltip + '
'
1740 | }
1741 |
1742 | })
1743 |
1744 | return tooltip;`
1745 | },
1746 | }
1747 | },
1748 | Others: {
1749 | type: "items",
1750 | label: "Others",
1751 | items: {
1752 | ShowZeroBars: {
1753 | ref: "settings.others.showZeroBars",
1754 | type: "boolean",
1755 | component: "switch",
1756 | label: "Show Zero Values",
1757 | options: [{
1758 | value: true,
1759 | label: "Show"
1760 | }, {
1761 | value: false,
1762 | label: "Hide"
1763 | }],
1764 | defaultValue: true
1765 | },
1766 | ShowDataZoom: {
1767 | ref: "settings.others.showDataZoom",
1768 | type: "boolean",
1769 | component: "switch",
1770 | label: "Show Data Zoom",
1771 | options: [{
1772 | value: true,
1773 | label: "Show"
1774 | }, {
1775 | value: false,
1776 | label: "Hide"
1777 | }],
1778 | defaultValue: true
1779 | },
1780 | DataZoomStartIn: {
1781 | ref: "settings.others.dataZoomPosition",
1782 | label: "Data Zoom Position",
1783 | type: "string",
1784 | component: "dropdown",
1785 | defaultValue: 0,
1786 | options: [{ value: 0, label: "Start" }, { value: 1, label: "End" }]
1787 | },
1788 | NumberVisibleItems: {
1789 | ref: "settings.others.numberVisibleItems",
1790 | label: "Number Visible Items",
1791 | type: "string",
1792 | defaultValue: '12',
1793 | expression: "optional"
1794 | }
1795 | }
1796 |
1797 | }
1798 | }
1799 | },
1800 | addons: {
1801 | uses: "addons",
1802 | items: {
1803 | dataHandling: {
1804 | uses: "dataHandling"
1805 | },
1806 | },
1807 | },
1808 | sorting: {
1809 | uses: "sorting"
1810 | },
1811 | appearance: {
1812 | uses: "settings",
1813 | }
1814 | }
1815 | };
1816 | });
--------------------------------------------------------------------------------