UNPKG

vue-google-charts

Version:
1 lines 16.8 kB
{"version":3,"file":"index.cjs","sources":["../src/lib/google-charts-loader.ts","../src/lib/debounce.ts","../src/utils.ts","src/components/GChart.vue","src/index.ts"],"sourcesContent":["/**\n * Usage:\n * import { loadGoogleCharts } from 'vue-google-charts'\n *\n * loadGoogleCharts('current', { packages: ['corechart', 'map'] })\n * .then(google => {\n * const chart = new google.visualization.Map ...\n * })\n */\n\nimport type {\n GoogleViz,\n GoogleChartLoader,\n GoogleChartVersion,\n GoogleChartLoaderOptions,\n} from '../types';\n\nconst chartsScriptUrl = 'https://www.gstatic.com/charts/loader.js';\n\nlet chartsLoaderPromise: null | Promise<GoogleChartLoader> = null;\n\nconst loadedPackages = new Map();\n\nexport function getChartsLoader(): Promise<GoogleChartLoader> {\n // If already included in the page:\n if (window.google !== undefined) {\n return Promise.resolve(window.google.charts);\n }\n\n if (chartsLoaderPromise === null) {\n chartsLoaderPromise = new Promise(resolve => {\n // Find script tag with same src in DOM.\n const foundScript = document.querySelector<HTMLScriptElement>(\n `script[src=\"${chartsScriptUrl}\"]`\n );\n\n // Create or get existed tag.\n const script = foundScript || document.createElement('script');\n\n // Set src if no script was found.\n if (!foundScript) {\n script.src = chartsScriptUrl;\n script.type = 'text/javascript';\n\n document.head.append(script);\n }\n\n script.onload = () => {\n if (window.google !== undefined) {\n resolve(window.google.charts);\n }\n };\n });\n }\n\n return chartsLoaderPromise;\n}\n\n/**\n * Function to load Google Charts JS API.\n * @param version - Chart version to load.\n * @param packages - Packages to load.\n * @param language - Languages to load.\n * @param mapsApiKey - Google Maps api key.\n * @returns\n */\nexport async function loadGoogleCharts(\n version: GoogleChartVersion = 'current',\n {\n packages = ['corechart', 'controls'],\n language = 'en',\n mapsApiKey,\n }: GoogleChartLoaderOptions\n): Promise<GoogleViz | undefined> {\n const loader = await getChartsLoader();\n\n const settingsKey = `${version}_${packages.join('_')}_${language}`;\n\n if (loadedPackages.has(settingsKey)) return loadedPackages.get(settingsKey);\n\n const loaderPromise: Promise<GoogleViz | undefined> = new Promise(resolve => {\n loader.load(version, {\n packages,\n language,\n mapsApiKey,\n });\n\n loader.setOnLoadCallback(() => resolve(window.google));\n });\n\n loadedPackages.set(settingsKey, loaderPromise);\n\n return loaderPromise;\n}\n","export interface DebouncedFunction<\n Args extends any[],\n F extends (...args: Args) => any\n> {\n (this: ThisParameterType<F>, ...args: Args & Parameters<F>): void;\n}\n\nexport function debounce<Args extends any[], F extends (...args: Args) => any>(\n func: F,\n waitMilliseconds = 50\n): DebouncedFunction<Args, F> {\n let timeoutId: ReturnType<typeof setTimeout> | undefined;\n function nextInvokeTimeout() {\n return waitMilliseconds;\n }\n\n const debouncedFunction = function (\n this: ThisParameterType<F>,\n ...args: Parameters<F>\n ) {\n const context = this;\n\n const invokeFunction = function () {\n timeoutId = undefined;\n\n func.apply(context, args);\n };\n\n if (timeoutId !== undefined) {\n clearTimeout(timeoutId);\n }\n\n timeoutId = setTimeout(invokeFunction, nextInvokeTimeout());\n };\n\n return debouncedFunction;\n}\n","import {\n GoogleChartWrapper,\n GoogleChartWrapperChartType,\n GoogleDataTable,\n GoogleDataView,\n GoogleViz,\n GoogleVizEventName,\n GoogleVizEvents,\n} from './types';\n\nexport interface ICreateChartFunction {\n (\n el: HTMLElement,\n google: GoogleViz,\n type: GoogleChartWrapperChartType\n ): GoogleChartWrapper;\n}\n\nexport function getValidChartData(\n chartsLib: null | GoogleViz,\n data: unknown[][] | GoogleDataTable | Record<string, any> | null,\n isFirstRowLabels?: boolean\n): GoogleDataTable | GoogleDataView | null {\n if (chartsLib !== null && data instanceof chartsLib.visualization.DataTable) {\n return data;\n }\n\n if (chartsLib !== null && data instanceof chartsLib.visualization.DataView) {\n return data;\n }\n\n if (chartsLib !== null && Array.isArray(data)) {\n return chartsLib.visualization.arrayToDataTable(data, isFirstRowLabels);\n }\n\n if (chartsLib !== null && data !== null && typeof data === 'object') {\n return new chartsLib.visualization.DataTable(data);\n }\n\n return null;\n}\n\nexport function createChartObject(\n chartsLib: GoogleViz | null,\n chartObject: GoogleChartWrapper | null,\n chartEl: HTMLElement | null,\n chartType: GoogleChartWrapperChartType,\n chartEvents: GoogleVizEvents | null,\n createChartFunction?: ICreateChartFunction\n): GoogleChartWrapper | null {\n const createChart: ICreateChartFunction = (\n el: HTMLElement,\n google: GoogleViz,\n type: GoogleChartWrapperChartType\n ): GoogleChartWrapper => {\n if (type === undefined) {\n throw new Error('please, provide chart type property');\n }\n\n return new google.visualization[type](el);\n };\n\n if (chartsLib === null) {\n throw new Error('please, provide charts lib property');\n }\n\n if (chartEl === null) {\n throw new Error('please, provide chart element property');\n }\n\n const fn = createChartFunction || createChart;\n\n chartObject = fn(chartEl, chartsLib, chartType);\n\n attachListeners(chartsLib, chartObject, chartEvents);\n\n return chartObject;\n}\n\nfunction attachListeners(\n chartsLib: null | GoogleViz,\n chartObject: GoogleChartWrapper | null,\n chartEvents: GoogleVizEvents | null\n): void {\n if (chartEvents === null) {\n return;\n }\n\n for (const [event, listener] of Object.entries(chartEvents)) {\n if (chartsLib !== null && chartObject !== null) {\n chartsLib.visualization.events.addListener(\n chartObject,\n event as GoogleVizEventName,\n listener as (chartWrapper: GoogleChartWrapper) => any\n );\n }\n }\n}\n","<template>\n <div ref=\"chart\" />\n</template>\n\n<script>\nimport { loadGoogleCharts } from '../../../src/lib/google-charts-loader';\nimport { debounce } from '../../../src/lib/debounce';\nimport { createChartObject, getValidChartData } from '../../../src/utils';\n\nlet chartsLib = null;\nexport default {\n name: 'GChart',\n\n props: {\n type: {\n type: String,\n required: true,\n },\n data: {\n type: [Array, Object],\n default: () => [],\n },\n isFirstRowLabels: {\n type: Boolean,\n default: false,\n },\n options: {\n type: Object,\n default: () => ({}),\n },\n version: {\n type: String,\n default: 'current',\n },\n settings: {\n type: Object,\n default: () => ({\n packages: ['corechart', 'table'],\n }),\n },\n events: {\n type: Object,\n default: null,\n },\n createChart: {\n type: Function,\n default: null,\n },\n resizeDebounce: {\n type: Number,\n default: 200,\n },\n },\n\n data() {\n return {\n chartObject: null,\n };\n },\n\n watch: {\n data: {\n deep: true,\n handler() {\n this.drawChart();\n },\n },\n options: {\n deep: true,\n handler() {\n this.drawChart();\n },\n },\n type() {\n this.chartObject = createChartObject(\n chartsLib,\n this.chartObject,\n this.$refs.chart,\n this.type,\n this.events,\n this.createChart\n );\n this.drawChart();\n },\n },\n\n mounted() {\n loadGoogleCharts(this.version, this.settings).then(api => {\n chartsLib = api;\n this.chartObject = createChartObject(\n chartsLib,\n this.chartObject,\n this.$refs.chart,\n this.type,\n this.events,\n this.createChart\n );\n\n this.$emit('ready', this.chartObject, api);\n this.drawChart();\n });\n\n if (this.resizeDebounce > 0)\n window.addEventListener(\n 'resize',\n debounce(this.drawChart, this.resizeDebounce)\n );\n },\n\n beforeDestroy() {\n if (\n this.chartObject !== null &&\n typeof this.chartObject.clearChart === 'function'\n ) {\n this.chartObject.clearChart();\n }\n },\n\n methods: {\n drawChart() {\n if (!chartsLib || !this.chartObject) return;\n const data = getValidChartData(\n chartsLib,\n this.data,\n this.isFirstRowLabels\n );\n if (data) this.chartObject.draw(data, this.options);\n },\n },\n};\n</script>\n","import Vue from 'vue';\n\nimport { loadGoogleCharts } from '../../src/lib/google-charts-loader';\nimport GChart from './components/GChart.vue';\n\n// Install the components\nexport function install(vue: typeof Vue) {\n vue.component('GChart', GChart);\n}\n\n// Expose the components\nexport { loadGoogleCharts, GChart };\n\n/* -- Plugin definition & Auto-install -- */\n/* You shouldn't have to modify the code below */\n\n// Plugin\nconst plugin = {\n version: process.env.VERSION,\n install,\n};\n\nexport default plugin;\n\n// Auto-install\nlet GlobalVue = null;\nif (typeof window !== 'undefined') {\n GlobalVue = window.Vue;\n} else if (typeof global !== 'undefined') {\n GlobalVue = global.Vue;\n}\nif (GlobalVue) {\n GlobalVue.use(plugin);\n}\n"],"names":["chartsScriptUrl","chartsLoaderPromise","loadedPackages","Map","getChartsLoader","window","google","undefined","Promise","resolve","charts","foundScript","document","querySelector","script","createElement","src","type","head","append","onload","loadGoogleCharts","version","packages","language","mapsApiKey","loader","settingsKey","join","has","get","loaderPromise","load","setOnLoadCallback","set","debounce","func","waitMilliseconds","timeoutId","nextInvokeTimeout","debouncedFunction","args","context","invokeFunction","apply","clearTimeout","setTimeout","getValidChartData","chartsLib","data","isFirstRowLabels","visualization","DataTable","DataView","Array","isArray","arrayToDataTable","createChartObject","chartObject","chartEl","chartType","chartEvents","createChartFunction","createChart","el","Error","fn","attachListeners","event","listener","Object","entries","events","addListener","name","props","String","required","default","Boolean","options","settings","Function","resizeDebounce","Number","watch","deep","handler","drawChart","$refs","chart","mounted","then","api","$emit","addEventListener","beforeDestroy","clearChart","methods","draw","install","vue","component","GChart","plugin","GlobalVue","Vue","global","use"],"mappings":"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"}