https://tourisme-hautvaldesevre.fr/app/dist/hautvaldesevre-tourism…/Extensions/ScrollablePlotArea.js
1/* * 2 * 3 * (c) 2010-2024 Torstein Honsi 4 * 5 * License: www.highcharts.com/license 6 * 7 * !!!!!!! SOURCE GETS TRANSPILED BY TYPESCRIPT. EDIT TS FILE ONLY. !!!!!!! 8 * 9 * Highcharts feature to make the Y axis stay fixed when scrolling the chart 10 * horizontally on mobile devices. Supports left and right side axes. 11 */ 12'use strict'; 13import A from '../Core/Animation/AnimationUtilities.js'; 14const { stop } = A; 15import H from '../Core/Globals.js'; 16const { composed } = H; 17import RendererRegistry from '../Core/Renderer/RendererRegistry.js'; 18import U from '../Core/Utilities.js'; 19const { addEvent, createElement, css, defined, erase, merge, pushUnique } = U; 20/* * 21 * 22 * Functions 23 * 24 * */ 25/** @private */ 26function onChartRender() { 27 let scrollablePlotArea = this.scrollablePlotArea; 28 if ((this.scrollablePixelsX || this.scrollablePixelsY) && 29 !scrollablePlotArea) { 30 this.scrollablePlotArea = scrollablePlotArea = new ScrollablePlotArea(this); 31 } 32 scrollablePlotArea?.applyFixed(); 33} 34/** @private */ 35function markDirty() { 36 if (this.chart.scrollablePlotArea) { 37 this.chart.scrollablePlotArea.isDirty = true; 38 } 39} 40class ScrollablePlotArea { 41 static compose(AxisClass, ChartClass, SeriesClass) { 42 if (pushUnique(composed, this.compose)) { 43 addEvent(AxisClass, 'afterInit', markDirty); 44 addEvent(ChartClass, 'afterSetChartSize', (e) => this.afterSetSize(e.target, e)); 45 addEvent(ChartClass, 'render', onChartRender); 46 addEvent(SeriesClass, 'show', markDirty); 47 } 48 } 49 static afterSetSize(chart, e) { 50 const { minWidth, minHeight } = chart.options.chart.scrollablePlotArea || {}, { clipBox, plotBox, inverted, renderer } = chart; 51 let scrollablePixelsX, scrollablePixelsY, recalculateHoriz; 52 if (!renderer.forExport) { 53 // The amount of pixels to scroll, the difference between chart 54 // width and scrollable width 55 if (minWidth) { 56 chart.scrollablePixelsX = scrollablePixelsX = Math.max(0, minWidth - chart.chartWidth); 57 if (scrollablePixelsX) { 58 chart.scrollablePlotBox = merge(chart.plotBox); 59 plotBox.width = chart.plotWidth += scrollablePixelsX; 60 clipBox[inverted ? 'height' : 'width'] += scrollablePixelsX; 61 recalculateHoriz = true; 62 } 63 // Currently we can only do either X or Y 64 } 65 else if (minHeight) { 66 chart.scrollablePixelsY = scrollablePixelsY = Math.max(0, minHeight - chart.chartHeight); 67 if (defined(scrollablePixelsY)) { 68 chart.scrollablePlotBox = merge(chart.plotBox); 69 plotBox.height = chart.plotHeight += scrollablePixelsY; 70 clipBox[inverted ? 'width' : 'height'] += scrollablePixelsY; 71 recalculateHoriz = false; 72 } 73 } 74 if (defined(recalculateHoriz) && !e.skipAxes) { 75 for (const axis of chart.axes) { 76 // Apply the corrected plot size to the axes of the other 77 // orientation than the scrolling direction 78 if (axis.horiz === recalculateHoriz || 79 // Or parallel axes 80 (chart.hasParallelCoordinates && axis.coll === 'yAxis')) { 81 axis.setAxisSize(); 82 axis.setAxisTranslation(); 83 } 84 } 85 } 86 } 87 } 88 constructor(chart) { 89 const chartOptions = chart.options.chart, Renderer = RendererRegistry.getRendererType(), scrollableOptions = chartOptions.scrollablePlotArea || {}, moveFixedElements = this.moveFixedElements.bind(this), styles = { 90 WebkitOverflowScrolling: 'touch', 91 overflowX: 'hidden', 92 overflowY: 'hidden' 93 }; 94 if (chart.scrollablePixelsX) { 95 styles.overflowX = 'auto'; 96 } 97 if (chart.scrollablePixelsY) { 98 styles.overflowY = 'auto'; 99 } 100 this.chart = chart; 101 // Insert a container with relative position that scrolling and fixed 102 // container renders to (#10555) 103 const parentDiv = this.parentDiv = createElement('div', { 104 className: 'highcharts-scrolling-parent' 105 }, { 106 position: 'relative' 107 }, chart.renderTo), 108 // Add the necessary divs to provide scrolling 109 scrollingContainer = this.scrollingContainer = createElement('div', { 110 'className': 'highcharts-scrolling' 111 }, styles, parentDiv), innerContainer = this.innerContainer = createElement('div', { 112 'className': 'highcharts-inner-container' 113 }, void 0, scrollingContainer), fixedDiv = this.fixedDiv = createElement('div', { 114 className: 'highcharts-fixed' 115 }, { 116 position: 'absolute', 117 overflow: 'hidden', 118 pointerEvents: 'none', 119 zIndex: (chartOptions.style?.zIndex || 0) + 2, 120 top: 0 121 }, void 0, true), fixedRenderer = this.fixedRenderer = new Renderer(fixedDiv, chart.chartWidth, chart.chartHeight, chartOptions.style); 122 // Mask 123 this.mask = fixedRenderer 124 .path() 125 .attr({ 126 fill: chartOptions.backgroundColor || '#fff', 127 'fill-opacity': scrollableOptions.opacity ?? 0.85, 128 zIndex: -1 129 }) 130 .addClass('highcharts-scrollable-mask') 131 .add(); 132 scrollingContainer.parentNode.insertBefore(fixedDiv, scrollingContainer); 133 css(chart.renderTo, { overflow: 'visible' }); 134 addEvent(chart, 'afterShowResetZoom', moveFixedElements); 135 addEvent(chart, 'afterApplyDrilldown', moveFixedElements); 136 addEvent(chart, 'afterLayOutTitles', moveFixedElements); 137 // On scroll, reset the chart position because it applies to the 138 // scrolled container 139 let lastHoverPoint; 140 addEvent(scrollingContainer, 'scroll', () => { 141 const { pointer, hoverPoint } = chart; 142 if (pointer) { 143 delete pointer.chartPosition; 144 if (hoverPoint) { 145 lastHoverPoint = hoverPoint; 146 } 147 pointer.runPointActions(void 0, lastHoverPoint, true); 148 } 149 }); 150 // Now move the container inside 151 innerContainer.appendChild(chart.container); 152 } 153 applyFixed() { 154 const { chart, fixedRenderer, isDirty, scrollingContainer }
vendor: 8,294 bytes, lines 154-375
154 = this, { axisOffset, chartWidth, chartHeight, container, plotHeight, plotLeft, plotTop, plotWidth, scrollablePixelsX = 0, scrollablePixelsY = 0 } = chart, chartOptions = chart.options.chart, scrollableOptions = chartOptions.scrollablePlotArea || {}, { scrollPositionX = 0, scrollPositionY = 0 } = scrollableOptions, scrollableWidth = chartWidth + scrollablePixelsX, scrollableHeight = chartHeight + scrollablePixelsY; 155 // Set the size of the fixed renderer to the visible width 156 fixedRenderer.setSize(chartWidth, chartHeight); 157 if (isDirty ?? true) { 158 this.isDirty = false; 159 this.moveFixedElements(); 160 } 161 // Increase the size of the scrollable renderer and background 162 stop(chart.container); 163 css(container, { 164 width: `${scrollableWidth}px`, 165 height: `${scrollableHeight}px` 166 }); 167 chart.renderer.boxWrapper.attr({ 168 width: scrollableWidth, 169 height: scrollableHeight, 170 viewBox: [0, 0, scrollableWidth, scrollableHeight].join(' ') 171 }); 172 chart.chartBackground?.attr({ 173 width: scrollableWidth, 174 height: scrollableHeight 175 }); 176 css(scrollingContainer, { 177 width: `${chartWidth}px`, 178 height: `${chartHeight}px` 179 }); 180 // Set scroll position the first time (this.isDirty was undefined at 181 // the top of this function) 182 if (!defined(isDirty)) { 183 scrollingContainer.scrollLeft = scrollablePixelsX * scrollPositionX; 184 scrollingContainer.scrollTop = scrollablePixelsY * scrollPositionY; 185 } 186 // Mask behind the left and right side 187 const maskTop = plotTop - axisOffset[0] - 1, maskLeft = plotLeft - axisOffset[3] - 1, maskBottom = plotTop + plotHeight + axisOffset[2] + 1, maskRight = plotLeft + plotWidth + axisOffset[1] + 1, maskPlotRight = plotLeft + plotWidth - scrollablePixelsX, maskPlotBottom = plotTop + plotHeight - scrollablePixelsY; 188 let d = [['M', 0, 0]]; 189 if (scrollablePixelsX) { 190 d = [ 191 // Left side 192 ['M', 0, maskTop], 193 ['L', plotLeft - 1, maskTop], 194 ['L', plotLeft - 1, maskBottom], 195 ['L', 0, maskBottom], 196 ['Z'], 197 // Right side 198 ['M', maskPlotRight, maskTop], 199 ['L', chartWidth, maskTop], 200 ['L', chartWidth, maskBottom], 201 ['L', maskPlotRight, maskBottom], 202 ['Z'] 203 ]; 204 } 205 else if (scrollablePixelsY) { 206 d = [ 207 // Top side 208 ['M', maskLeft, 0], 209 ['L', maskLeft, plotTop - 1], 210 ['L', maskRight, plotTop - 1], 211 ['L', maskRight, 0], 212 ['Z'], 213 // Bottom side 214 ['M', maskLeft, maskPlotBottom], 215 ['L', maskLeft, chartHeight], 216 ['L', maskRight, chartHeight], 217 ['L', maskRight, maskPlotBottom], 218 ['Z'] 219 ]; 220 } 221 if (chart.redrawTrigger !== 'adjustHeight') { 222 this.mask.attr({ d }); 223 } 224 } 225 /** 226 * These elements are moved over to the fixed renderer and stay fixed when 227 * the user scrolls the chart 228 * @private 229 */ 230 moveFixedElements() { 231 const { container, inverted, scrollablePixelsX, scrollablePixelsY } = this.chart, fixedRenderer = this.fixedRenderer, fixedSelectors = ScrollablePlotArea.fixedSelectors; 232 let axisClass; 233 if (scrollablePixelsX && !inverted) { 234 axisClass = '.highcharts-yaxis'; 235 } 236 else if (scrollablePixelsX && inverted) { 237 axisClass = '.highcharts-xaxis'; 238 } 239 else if (scrollablePixelsY && !inverted) { 240 axisClass = '.highcharts-xaxis'; 241 } 242 else if (scrollablePixelsY && inverted) { 243 axisClass = '.highcharts-yaxis'; 244 } 245 if (axisClass && !(this.chart.hasParallelCoordinates && 246 axisClass === '.highcharts-yaxis')) { 247 // Add if not added yet 248 for (const className of [ 249 `${axisClass}:not(.highcharts-radial-axis)`, 250 `${axisClass}-labels:not(.highcharts-radial-axis-labels)` 251 ]) { 252 pushUnique(fixedSelectors, className); 253 } 254 } 255 else { 256 // Clear all axis related selectors 257 for (const classBase of [ 258 '.highcharts-xaxis', 259 '.highcharts-yaxis' 260 ]) { 261 for (const className of [ 262 `${classBase}:not(.highcharts-radial-axis)`, 263 `${classBase}-labels:not(.highcharts-radial-axis-labels)` 264 ]) { 265 erase(fixedSelectors, className); 266 } 267 } 268 } 269 for (const className of fixedSelectors) { 270 [].forEach.call(container.querySelectorAll(className), (elem) => { 271 (elem.namespaceURI === fixedRenderer.SVG_NS ? 272 fixedRenderer.box : 273 fixedRenderer.box.parentNode).appendChild(elem); 274 elem.style.pointerEvents = 'auto'; 275 }); 276 } 277 } 278} 279ScrollablePlotArea.fixedSelectors = [ 280 '.highcharts-breadcrumbs-group', 281 '.highcharts-contextbutton', 282 '.highcharts-caption', 283 '.highcharts-credits', 284 '.highcharts-drillup-button', 285 '.highcharts-legend', 286 '.highcharts-legend-checkbox', 287 '.highcharts-navigator-series', 288 '.highcharts-navigator-xaxis', 289 '.highcharts-navigator-yaxis', 290 '.highcharts-navigator', 291 '.highcharts-range-selector-group', 292 '.highcharts-reset-zoom', 293 '.highcharts-scrollbar', 294 '.highcharts-subtitle', 295 '.highcharts-title' 296]; 297/* * 298 * 299 * Default Export 300 * 301 * */ 302export default ScrollablePlotArea; 303/* * 304 * 305 * API Declarations 306 * 307 * */ 308/** 309 * Options for a scrollable plot area. This feature provides a minimum size for 310 * the plot area of the chart. If the size gets smaller than this, typically 311 * on mobile devices, a native browser scrollbar is presented. This scrollbar 312 * provides smooth scrolling for the contents of the plot area, whereas the 313 * title, legend and unaffected axes are fixed. 314 * 315 * Since v7.1.2, a scrollable plot area can be defined for either horizontal or 316 * vertical scrolling, depending on whether the `minWidth` or `minHeight` 317 * option is set. 318 * 319 * @sample highcharts/chart/scrollable-plotarea 320 * Scrollable plot area 321 * @sample highcharts/chart/scrollable-plotarea-vertical 322 * Vertically scrollable plot area 323 * @sample {gantt} gantt/chart/scrollable-plotarea-vertical 324 * Gantt chart with vertically scrollable plot area 325 * 326 * @since 6.1.0 327 * @product highcharts gantt 328 * @apioption chart.scrollablePlotArea 329 */ 330/** 331 * The minimum height for the plot area. If it gets smaller than this, the plot 332 * area will become scrollable. 333 * 334 * @type {number} 335 * @since 7.1.2 336 * @apioption chart.scrollablePlotArea.minHeight 337 */ 338/** 339 * The minimum width for the plot area. If it gets smaller than this, the plot 340 * area will become scrollable. 341 * 342 * @type {number} 343 * @since 6.1.0 344 * @apioption chart.scrollablePlotArea.minWidth 345 */ 346/** 347 * The initial scrolling position of the scrollable plot area. Ranges from 0 to 348 * 1, where 0 aligns the plot area to the left and 1 aligns it to the right. 349 * Typically we would use 1 if the chart has right aligned Y axes. 350 * 351 * @type {number} 352 * @since 6.1.0 353 * @apioption chart.scrollablePlotArea.scrollPositionX 354 */ 355/** 356 * The initial scrolling position of the scrollable plot area. Ranges from 0 to 357 * 1, where 0 aligns the plot area to the top and 1 aligns it to the bottom. 358 * 359 * @type {number} 360 * @since 7.1.2 361 * @apioption chart.scrollablePlotArea.scrollPositionY 362 */ 363/** 364 * The opacity of mask applied on one of the sides of the plot 365 * area. 366 * 367 * @sample {highcharts} highcharts/chart/scrollable-plotarea-opacity 368 * Disabled opacity for the mask 369 * 370 * @type {number} 371 * @default 0.85 372 * @since 7.1.1 373 * @apioption chart.scrollablePlotArea.opacity 374 */ 375(''); // Keep doclets above in transpiled file
Line numbers count LF bytes from the start of the resource, as the search results do. Vendor segments are library code the classifier recognised; they are stored but not indexed. Bytes are shown as Latin1 characters, one per byte.