{"version":3,"sources":["webpack://@verndale/toolkit/./src/js/components/simpleBarGraph.ts","webpack://@verndale/toolkit/./src/js/helpers/index.ts"],"names":["SimpleBarGraph","Component","el","__publicField","debounce","pieChartObserver","entries","chart","percent","mediaQuery","barContainerWidth","barDimHeight","barDimWidth","percentageH","percentageW","line","text","orientation","barLine","callback","wait","timerId","args","darkColorPalette","lightColorPalette","getRandomColor","background"],"mappings":"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","file":"scripts/8982.d24434ecde4b27fd6a7f.js","sourcesContent":["import { Component } from '@verndale/core';\nimport { debounce } from '../helpers';\n\nclass SimpleBarGraph extends Component {\n preferReducedMotion = window.matchMedia('(prefers-reduced-motion: reduce)')\n .matches;\n\n constructor(el: HTMLElement) {\n super(el);\n\n this.init();\n }\n\n setupDefaults() {\n this.dom = {\n svg: this.el.querySelector(\n '.bar-graph__progress-bar-container'\n ) as HTMLElement\n };\n }\n\n addListeners() {\n window.addEventListener('resize', debounce(this.init.bind(this), 100));\n }\n\n init() {\n const pieChartObserver = new IntersectionObserver(\n entries => {\n entries.forEach(chart => {\n if (chart.isIntersecting) {\n // let speed = Number(this.el.dataset.speed) || 0;\n // this.preferReducedMotion && (speed = 0);\n // const delay = Number(this.el.dataset.delay) || 0;\n const percent = Number(this.el.dataset.percent) || 0;\n const mediaQuery = window.matchMedia('(max-width: 768px)');\n //const barContainerHeight = this.el.querySelector('.bar-graph__box') as HTMLElement;\n const barContainerWidth = this.el.querySelector(\n '.bar-graph__box'\n ) as HTMLElement;\n const barContainerHeight = 300;\n const barDimHeight = barContainerHeight;\n const barDimWidth = barContainerWidth.offsetWidth;\n console.log(barDimWidth, 'static width');\n const percentageH = (barDimHeight / 100) * percent;\n const percentageW = (barDimWidth / 100) * percent;\n console.log(percentageW, 'width');\n\n const line = chart.target.querySelector('.bar-graph__progress-bar');\n\n if (mediaQuery.matches) {\n line?.setAttribute('style', `width:${percentageW}px`);\n line?.animate(\n [\n {\n //width: 0,\n opacity: 0\n },\n {\n //width: 100 - percent\n opacity: 1\n }\n ],\n {\n duration: this.preferReducedMotion ? 0 : 1000,\n easing: 'cubic-bezier(0.57,-0.04, 0.41, 1.13)',\n fill: 'forwards'\n }\n );\n } else {\n line?.setAttribute('style', `height:${percentageH}px`);\n line?.animate(\n [\n {\n //height: 0,\n opacity: 0\n },\n {\n //height: 100 - percent,\n opacity: 1\n }\n ],\n {\n duration: this.preferReducedMotion ? 0 : 1000,\n easing: 'cubic-bezier(0.57,-0.04, 0.41, 1.13)',\n fill: 'forwards'\n }\n );\n }\n\n const text = chart.target.querySelector(\n '.bar-graph__progress-bar-text'\n );\n if (text) {\n text.textContent = `${percent}%`;\n\n text.animate(\n [\n {\n opacity: 0\n //transform: 'translateY(20%)'\n },\n {\n opacity: 1\n //transform: 'translateY(0%)'\n }\n ],\n {\n //delay: this.preferReducedMotion ? 0 : delay,\n duration: this.preferReducedMotion ? 0 : 1000,\n easing: 'cubic-bezier(0.57,-0.04, 0.41, 1.13)',\n fill: 'forwards'\n }\n );\n }\n\n const orientation = this.el.querySelector(\n '.graph-card__cards-container'\n ) as HTMLElement;\n const barLine = this.el.querySelector(\n '.graph-card--horizontal .bar-graph__progress-bar'\n );\n\n if (!orientation?.classList.contains('graph-card--horizontal')) {\n //alert('Hooray');\n barLine?.setAttribute('style', `width:${percentageW}px`);\n barLine?.animate(\n [\n {\n //width: 0,\n opacity: 0\n },\n {\n //width: 100 - percent\n opacity: 1\n }\n ],\n {\n duration: this.preferReducedMotion ? 0 : 1000,\n easing: 'cubic-bezier(0.57,-0.04, 0.41, 1.13)',\n fill: 'forwards'\n }\n );\n } else {\n line?.setAttribute('style', `height:${percent}px`);\n line?.animate(\n [\n {\n //height: 0\n opacity: 0\n },\n {\n //height: 100 - percent\n opacity: 1\n }\n ],\n {\n duration: this.preferReducedMotion ? 0 : 1000,\n easing: 'cubic-bezier(0.57,-0.04, 0.41, 1.13)',\n fill: 'forwards'\n }\n );\n }\n pieChartObserver.unobserve(chart.target);\n }\n });\n },\n {\n threshold: 0.8\n }\n );\n\n if (this.dom.svg) {\n pieChartObserver.observe(this.dom.svg as HTMLElement);\n }\n }\n}\n\nexport default SimpleBarGraph;\n","// /**\n// * debounce function\n// * Delays the processing of the event\n// */\nexport const debounce = (callback: (args: unknown) => void, wait: number) => {\n let timerId: ReturnType;\n\n return (...args: [unknown]) => {\n clearTimeout(timerId);\n timerId = setTimeout(() => {\n callback(...args);\n }, wait);\n };\n};\n\ninterface IColorPalette {\n name: string;\n code: string;\n}\n\nexport const darkColorPalette: Array = [\n { name: 'orange', code: '#f47920' },\n { name: 'yellow', code: '#f4b450' },\n { name: 'green', code: '#0f9d58' },\n { name: 'light-blue', code: '#009cde' }\n];\n\nexport const lightColorPalette: Array = [\n { name: 'red', code: '#da291c' },\n { name: 'purple', code: '#492d8c' },\n { name: 'blue', code: '#2e67b2' },\n { name: 'orange', code: '#f47920' },\n { name: 'yellow', code: '#f4b450' },\n { name: 'green', code: '#0f9d58' },\n { name: 'light-blue', code: '#009cde' }\n];\n\nexport const getRandomColor = (\n background: 'light' | 'dark' = 'light'\n): IColorPalette => {\n if (background === 'light') {\n const lightRandomColor =\n lightColorPalette[Math.floor(Math.random() * lightColorPalette.length)];\n return lightRandomColor;\n }\n\n const darkRandomColor =\n darkColorPalette[Math.floor(Math.random() * darkColorPalette.length)];\n return darkRandomColor;\n};\n"],"sourceRoot":""}