├── 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 | ![](https://i.imgur.com/X32MBv4.png) 204 | ![](https://i.imgur.com/FNvoj4D.png) 205 | ![](https://i.imgur.com/iLLN8VO.png) 206 | ![](https://i.imgur.com/2x4x4nc.png) 207 | ![](https://i.imgur.com/iQHXxPH.png) 208 | ![](https://i.imgur.com/zgBTdmw.png) 209 | ![](https://i.imgur.com/TP99m1c.png) 210 | ![](https://i.imgur.com/KhJFj3D.png) 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 | }); --------------------------------------------------------------------------------