@carbon/charts
Version:
Carbon Charts component library
1 lines • 110 kB
Source Map (JSON)
{"version":3,"file":"index.mjs","sources":["../../../node_modules/lodash-es/_castSlice.js","../../../node_modules/lodash-es/_hasUnicode.js","../../../node_modules/lodash-es/_asciiToArray.js","../../../node_modules/lodash-es/_unicodeToArray.js","../../../node_modules/lodash-es/_stringToArray.js","../../../node_modules/lodash-es/_createCaseFirst.js","../../../node_modules/lodash-es/upperFirst.js","../../../node_modules/lodash-es/capitalize.js","../../../node_modules/lodash-es/camelCase.js","../src/chart.ts","../src/axis-chart.ts","../src/charts/alluvial.ts","../src/charts/area.ts","../src/charts/boxplot.ts","../src/charts/bubble.ts","../src/charts/bullet.ts","../src/charts/choropleth.ts","../src/charts/circle-pack.ts","../src/charts/combo.ts","../src/charts/pie.ts","../src/charts/donut.ts","../src/charts/gauge.ts","../src/charts/bar-grouped.ts","../src/charts/heatmap.ts","../src/charts/histogram.ts","../src/charts/line.ts","../src/charts/lollipop.ts","../src/charts/meter.ts","../src/charts/radar.ts","../src/charts/scatter.ts","../src/charts/tree.ts","../src/charts/treemap.ts","../src/charts/bar-simple.ts","../src/charts/area-stacked.ts","../src/charts/bar-stacked.ts","../src/charts/wordcloud.ts"],"sourcesContent":["import baseSlice from './_baseSlice.js';\n\n/**\n * Casts `array` to a slice if it's needed.\n *\n * @private\n * @param {Array} array The array to inspect.\n * @param {number} start The start position.\n * @param {number} [end=array.length] The end position.\n * @returns {Array} Returns the cast slice.\n */\nfunction castSlice(array, start, end) {\n var length = array.length;\n end = end === undefined ? length : end;\n return (!start && end >= length) ? array : baseSlice(array, start, end);\n}\n\nexport default castSlice;\n","/** Used to compose unicode character classes. */\nvar rsAstralRange = '\\\\ud800-\\\\udfff',\n rsComboMarksRange = '\\\\u0300-\\\\u036f',\n reComboHalfMarksRange = '\\\\ufe20-\\\\ufe2f',\n rsComboSymbolsRange = '\\\\u20d0-\\\\u20ff',\n rsComboRange = rsComboMarksRange + reComboHalfMarksRange + rsComboSymbolsRange,\n rsVarRange = '\\\\ufe0e\\\\ufe0f';\n\n/** Used to compose unicode capture groups. */\nvar rsZWJ = '\\\\u200d';\n\n/** Used to detect strings with [zero-width joiners or code points from the astral planes](http://eev.ee/blog/2015/09/12/dark-corners-of-unicode/). */\nvar reHasUnicode = RegExp('[' + rsZWJ + rsAstralRange + rsComboRange + rsVarRange + ']');\n\n/**\n * Checks if `string` contains Unicode symbols.\n *\n * @private\n * @param {string} string The string to inspect.\n * @returns {boolean} Returns `true` if a symbol is found, else `false`.\n */\nfunction hasUnicode(string) {\n return reHasUnicode.test(string);\n}\n\nexport default hasUnicode;\n","/**\n * Converts an ASCII `string` to an array.\n *\n * @private\n * @param {string} string The string to convert.\n * @returns {Array} Returns the converted array.\n */\nfunction asciiToArray(string) {\n return string.split('');\n}\n\nexport default asciiToArray;\n","/** Used to compose unicode character classes. */\nvar rsAstralRange = '\\\\ud800-\\\\udfff',\n rsComboMarksRange = '\\\\u0300-\\\\u036f',\n reComboHalfMarksRange = '\\\\ufe20-\\\\ufe2f',\n rsComboSymbolsRange = '\\\\u20d0-\\\\u20ff',\n rsComboRange = rsComboMarksRange + reComboHalfMarksRange + rsComboSymbolsRange,\n rsVarRange = '\\\\ufe0e\\\\ufe0f';\n\n/** Used to compose unicode capture groups. */\nvar rsAstral = '[' + rsAstralRange + ']',\n rsCombo = '[' + rsComboRange + ']',\n rsFitz = '\\\\ud83c[\\\\udffb-\\\\udfff]',\n rsModifier = '(?:' + rsCombo + '|' + rsFitz + ')',\n rsNonAstral = '[^' + rsAstralRange + ']',\n rsRegional = '(?:\\\\ud83c[\\\\udde6-\\\\uddff]){2}',\n rsSurrPair = '[\\\\ud800-\\\\udbff][\\\\udc00-\\\\udfff]',\n rsZWJ = '\\\\u200d';\n\n/** Used to compose unicode regexes. */\nvar reOptMod = rsModifier + '?',\n rsOptVar = '[' + rsVarRange + ']?',\n rsOptJoin = '(?:' + rsZWJ + '(?:' + [rsNonAstral, rsRegional, rsSurrPair].join('|') + ')' + rsOptVar + reOptMod + ')*',\n rsSeq = rsOptVar + reOptMod + rsOptJoin,\n rsSymbol = '(?:' + [rsNonAstral + rsCombo + '?', rsCombo, rsRegional, rsSurrPair, rsAstral].join('|') + ')';\n\n/** Used to match [string symbols](https://mathiasbynens.be/notes/javascript-unicode). */\nvar reUnicode = RegExp(rsFitz + '(?=' + rsFitz + ')|' + rsSymbol + rsSeq, 'g');\n\n/**\n * Converts a Unicode `string` to an array.\n *\n * @private\n * @param {string} string The string to convert.\n * @returns {Array} Returns the converted array.\n */\nfunction unicodeToArray(string) {\n return string.match(reUnicode) || [];\n}\n\nexport default unicodeToArray;\n","import asciiToArray from './_asciiToArray.js';\nimport hasUnicode from './_hasUnicode.js';\nimport unicodeToArray from './_unicodeToArray.js';\n\n/**\n * Converts `string` to an array.\n *\n * @private\n * @param {string} string The string to convert.\n * @returns {Array} Returns the converted array.\n */\nfunction stringToArray(string) {\n return hasUnicode(string)\n ? unicodeToArray(string)\n : asciiToArray(string);\n}\n\nexport default stringToArray;\n","import castSlice from './_castSlice.js';\nimport hasUnicode from './_hasUnicode.js';\nimport stringToArray from './_stringToArray.js';\nimport toString from './toString.js';\n\n/**\n * Creates a function like `_.lowerFirst`.\n *\n * @private\n * @param {string} methodName The name of the `String` case method to use.\n * @returns {Function} Returns the new case function.\n */\nfunction createCaseFirst(methodName) {\n return function(string) {\n string = toString(string);\n\n var strSymbols = hasUnicode(string)\n ? stringToArray(string)\n : undefined;\n\n var chr = strSymbols\n ? strSymbols[0]\n : string.charAt(0);\n\n var trailing = strSymbols\n ? castSlice(strSymbols, 1).join('')\n : string.slice(1);\n\n return chr[methodName]() + trailing;\n };\n}\n\nexport default createCaseFirst;\n","import createCaseFirst from './_createCaseFirst.js';\n\n/**\n * Converts the first character of `string` to upper case.\n *\n * @static\n * @memberOf _\n * @since 4.0.0\n * @category String\n * @param {string} [string=''] The string to convert.\n * @returns {string} Returns the converted string.\n * @example\n *\n * _.upperFirst('fred');\n * // => 'Fred'\n *\n * _.upperFirst('FRED');\n * // => 'FRED'\n */\nvar upperFirst = createCaseFirst('toUpperCase');\n\nexport default upperFirst;\n","import toString from './toString.js';\nimport upperFirst from './upperFirst.js';\n\n/**\n * Converts the first character of `string` to upper case and the remaining\n * to lower case.\n *\n * @static\n * @memberOf _\n * @since 3.0.0\n * @category String\n * @param {string} [string=''] The string to capitalize.\n * @returns {string} Returns the capitalized string.\n * @example\n *\n * _.capitalize('FRED');\n * // => 'Fred'\n */\nfunction capitalize(string) {\n return upperFirst(toString(string).toLowerCase());\n}\n\nexport default capitalize;\n","import capitalize from './capitalize.js';\nimport createCompounder from './_createCompounder.js';\n\n/**\n * Converts `string` to [camel case](https://en.wikipedia.org/wiki/CamelCase).\n *\n * @static\n * @memberOf _\n * @since 3.0.0\n * @category String\n * @param {string} [string=''] The string to convert.\n * @returns {string} Returns the camel cased string.\n * @example\n *\n * _.camelCase('Foo Bar');\n * // => 'fooBar'\n *\n * _.camelCase('--foo-bar--');\n * // => 'fooBar'\n *\n * _.camelCase('__FOO_BAR__');\n * // => 'fooBar'\n */\nvar camelCase = createCompounder(function(result, word, index) {\n word = word.toLowerCase();\n return result + (index ? capitalize(word) : word);\n});\n\nexport default camelCase;\n","import { getProperty } from '@/tools'\nimport { ChartModel } from '@/model/model'\nimport { ChartConfig } from '@/interfaces/model'\nimport { BaseChartOptions } from '@/interfaces/charts'\nimport {\n\tLayoutGrowth,\n\tLayoutAlignItems,\n\tLayoutDirection,\n\tLegendOrientations,\n\tEvents as ChartEvents,\n\tRenderTypes\n} from '@/interfaces/enums'\nimport type { Component } from '@/components/component'\nimport { Toolbar } from '@/components/axes/toolbar'\nimport { LayoutComponent } from '@/components/layout'\nimport { Spacer } from '@/components/layout/spacer'\nimport { Modal } from '@/components/essentials/modal'\nimport { Title } from '@/components/essentials/title'\nimport { Legend } from '@/components/essentials/legend'\nimport { CanvasChartClip } from '@/components/essentials/canvas-chart-clip'\nimport { Tooltip } from '@/components/essentials/tooltip'\nimport { CanvasZoom } from '@/services/canvas-zoom'\nimport { DOMUtils } from '@/services/essentials/dom-utils'\nimport { Events } from '@/services/essentials/events'\nimport { Files } from '@/services/essentials/files'\nimport { GradientUtils } from '@/services/essentials/gradient-utils'\nimport { Transitions } from '@/services/essentials/transitions'\n\nexport class Chart {\n\tcomponents: Component[] = []\n\tservices: any = {\n\t\tcanvasZoom: CanvasZoom,\n\t\tdomUtils: DOMUtils,\n\t\tevents: Events,\n\t\tfiles: Files,\n\t\tgradientUtils: GradientUtils,\n\t\ttransitions: Transitions\n\t}\n\tmodel: ChartModel = new ChartModel(this.services)\n\n\t// eslint-disable-next-line @typescript-eslint/ban-ts-comment\n\t// @ts-ignore\n\t// eslint-disable-next-line @typescript-eslint/no-unused-vars\n\tconstructor(holder: HTMLDivElement, chartConfigs: ChartConfig<BaseChartOptions>) {\n\t\t// Allow for subclasses to override the constructor with additional parameters or initialization logic without breaking the API contract of the Chart class\n\t}\n\n\t// Contains the code that uses properties that are overridable by the super-class\n\tinit(holder: HTMLDivElement, chartConfigs: ChartConfig<BaseChartOptions>) {\n\t\t// Store the holder in the model\n\t\tthis.model.set({ holder }, { skipUpdate: true })\n\n\t\t// Initialize all services\n\t\tObject.keys(this.services).forEach(serviceName => {\n\t\t\tconst serviceObj = this.services[serviceName]\n\t\t\tthis.services[serviceName] = new serviceObj(this.model, this.services)\n\t\t})\n\n\t\t// Call update() when model has been updated\n\t\tthis.services.events.addEventListener(ChartEvents.Model.UPDATE, (e: CustomEvent) => {\n\t\t\tconst animate = !!getProperty(e, 'detail', 'animate')\n\t\t\tthis.update(animate)\n\t\t})\n\n\t\t// Set model data & options\n\t\tthis.model.setData(chartConfigs.data)\n\n\t\t// Set chart resize event listener\n\t\tthis.services.events.addEventListener(ChartEvents.Chart.RESIZE, () => {\n\t\t\tthis.update(false)\n\t\t})\n\n\t\tthis.components = this.getComponents()\n\n\t\tthis.update()\n\t}\n\n\t/**\n\t * Retrieves the components to be rendered inside the graph frame.\n\t *\n\t * @returns {Component[]} An array of components to be rendered.\n\t */\n\tgetComponents(): Component[] {\n\t\tconsole.error('getComponents() method is not implemented')\n\n\t\treturn []\n\t}\n\n\tupdate(animate = true) {\n\t\t// Called 4 times whenever a chart is displayed\n\t\tif (!this.components) {\n\t\t\treturn\n\t\t}\n\n\t\t// Update all services\n\t\tObject.keys(this.services).forEach((serviceName: string) => {\n\t\t\tconst serviceObj = this.services[serviceName]\n\t\t\tserviceObj.update()\n\t\t})\n\n\t\t// Render all components\n\t\tthis.components.forEach(component => component.render(animate))\n\n\t\t// Asynchronously dispatch a \"render-finished\" event\n\t\t// This is needed because of d3-transitions\n\t\t// Since at the start of the transition\n\t\t// Elements do not hold their final size or position\n\t\tconst pendingTransitions = this.services.transitions.getPendingTransitions()\n\t\tconst promises = Object.keys(pendingTransitions).map(transitionID => {\n\t\t\tconst transition = pendingTransitions[transitionID]\n\t\t\treturn transition.end().catch((e: any) => e) // Skip rejects since we don't care about those;\n\t\t})\n\n\t\tPromise.all(promises).then(() =>\n\t\t\tthis.services.events.dispatchEvent(ChartEvents.Chart.RENDER_FINISHED)\n\t\t)\n\t}\n\n\tdestroy() {\n\t\t// Call the destroy() method on all components\n\t\tthis.components.forEach(component => component.destroy())\n\n\t\t// Remove the chart holder\n\t\tthis.services.domUtils.getHolder().remove()\n\n\t\tthis.model.set({ destroyed: true }, { skipUpdate: true })\n\t}\n\n\tprotected getChartComponents(graphFrameComponents: any[], configs?: object) {\n\t\tconst options = this.model.getOptions()\n\n\t\tconst toolbarEnabled = getProperty(options, 'toolbar', 'enabled')\n\n\t\tconst legendComponent = {\n\t\t\tid: 'legend',\n\t\t\tcomponents: [new Legend(this.model, this.services)],\n\t\t\tgrowth: LayoutGrowth.PREFERRED\n\t\t}\n\n\t\t// if canvas zoom is enabled\n\t\tconst isZoomEnabled = getProperty(options, 'canvasZoom', 'enabled')\n\n\t\tif (isZoomEnabled && isZoomEnabled === true) {\n\t\t\tgraphFrameComponents.push(new CanvasChartClip(this.model, this.services))\n\t\t}\n\n\t\tconst titleAvailable = !!this.model.getOptions().title\n\t\tconst titleComponent = {\n\t\t\tid: 'title',\n\t\t\tcomponents: [new Title(this.model, this.services)],\n\t\t\tgrowth: LayoutGrowth.STRETCH\n\t\t}\n\n\t\tconst toolbarComponent = {\n\t\t\tid: 'toolbar',\n\t\t\tcomponents: [new Toolbar(this.model, this.services)],\n\t\t\tgrowth: LayoutGrowth.PREFERRED\n\t\t}\n\n\t\tconst headerComponent = {\n\t\t\tid: 'header',\n\t\t\tcomponents: [\n\t\t\t\tnew LayoutComponent(\n\t\t\t\t\tthis.model,\n\t\t\t\t\tthis.services,\n\t\t\t\t\t[\n\t\t\t\t\t\t// always add title to keep layout correct\n\t\t\t\t\t\ttitleComponent,\n\t\t\t\t\t\t...(toolbarEnabled ? [toolbarComponent] : [])\n\t\t\t\t\t],\n\t\t\t\t\t{\n\t\t\t\t\t\tdirection: LayoutDirection.ROW,\n\t\t\t\t\t\talignItems: LayoutAlignItems.CENTER\n\t\t\t\t\t}\n\t\t\t\t)\n\t\t\t],\n\t\t\tgrowth: LayoutGrowth.PREFERRED\n\t\t}\n\n\t\tconst graphFrameComponent = {\n\t\t\tid: 'graph-frame',\n\t\t\tcomponents: graphFrameComponents,\n\t\t\tgrowth: LayoutGrowth.STRETCH,\n\t\t\trenderType: getProperty(configs, 'graphFrameRenderType') || RenderTypes.SVG\n\t\t}\n\n\t\tconst isLegendEnabled =\n\t\t\tgetProperty(configs, 'excludeLegend') !== true && options.legend.enabled !== false\n\t\t// TODO: REUSE BETWEEN AXISCHART & CHART\n\t\t// Decide the position of the legend in reference to the chart\n\t\tlet fullFrameComponentDirection = LayoutDirection.COLUMN\n\t\tif (isLegendEnabled) {\n\t\t\tconst legendPosition = getProperty(options, 'legend', 'position')\n\t\t\tif (legendPosition === 'left') {\n\t\t\t\tfullFrameComponentDirection = LayoutDirection.ROW\n\n\t\t\t\tif (!options.legend.orientation) {\n\t\t\t\t\toptions.legend.orientation = LegendOrientations.VERTICAL\n\t\t\t\t}\n\t\t\t} else if (legendPosition === 'right') {\n\t\t\t\tfullFrameComponentDirection = LayoutDirection.ROW_REVERSE\n\n\t\t\t\tif (!options.legend.orientation) {\n\t\t\t\t\toptions.legend.orientation = LegendOrientations.VERTICAL\n\t\t\t\t}\n\t\t\t} else if (legendPosition === 'bottom') {\n\t\t\t\tfullFrameComponentDirection = LayoutDirection.COLUMN_REVERSE\n\t\t\t}\n\t\t}\n\n\t\tconst legendSpacerComponent = {\n\t\t\tid: 'spacer',\n\t\t\tcomponents: [new Spacer(this.model, this.services)],\n\t\t\tgrowth: LayoutGrowth.PREFERRED\n\t\t}\n\n\t\tconst fullFrameComponent = {\n\t\t\tid: 'full-frame',\n\t\t\tcomponents: [\n\t\t\t\tnew LayoutComponent(\n\t\t\t\t\tthis.model,\n\t\t\t\t\tthis.services,\n\t\t\t\t\t[\n\t\t\t\t\t\t...(isLegendEnabled ? [legendComponent] : []),\n\t\t\t\t\t\t...(isLegendEnabled ? [legendSpacerComponent] : []),\n\t\t\t\t\t\tgraphFrameComponent\n\t\t\t\t\t],\n\t\t\t\t\t{\n\t\t\t\t\t\tdirection: fullFrameComponentDirection\n\t\t\t\t\t}\n\t\t\t\t)\n\t\t\t],\n\t\t\tgrowth: LayoutGrowth.STRETCH\n\t\t}\n\n\t\t// Add chart title if it exists\n\t\tconst topLevelLayoutComponents: any[] = []\n\n\t\tif (titleAvailable || toolbarEnabled) {\n\t\t\ttopLevelLayoutComponents.push(headerComponent)\n\n\t\t\tconst titleSpacerComponent = {\n\t\t\t\tid: 'spacer',\n\t\t\t\tcomponents: [\n\t\t\t\t\tnew Spacer(this.model, this.services, toolbarEnabled ? { size: 15 } : undefined)\n\t\t\t\t],\n\t\t\t\tgrowth: LayoutGrowth.PREFERRED\n\t\t\t}\n\n\t\t\ttopLevelLayoutComponents.push(titleSpacerComponent)\n\t\t}\n\t\ttopLevelLayoutComponents.push(fullFrameComponent)\n\n\t\treturn [\n\t\t\tnew Tooltip(this.model, this.services),\n\t\t\tnew Modal(this.model, this.services),\n\t\t\tnew LayoutComponent(this.model, this.services, topLevelLayoutComponents, {\n\t\t\t\tdirection: LayoutDirection.COLUMN\n\t\t\t})\n\t\t]\n\t}\n}\n","import { Chart } from './chart'\nimport { getProperty } from './tools'\nimport { ChartModelCartesian } from '@/model/cartesian-charts'\nimport { AxisChartOptions } from '@/interfaces/charts'\nimport { ChartConfig } from '@/interfaces/model'\nimport {\n\tAxisPositions,\n\tLayoutAlignItems,\n\tLayoutDirection,\n\tLayoutGrowth,\n\tLegendOrientations,\n\tLegendPositions,\n\tRenderTypes,\n\tScaleTypes\n} from '@/interfaces/enums'\nimport { ChartBrush } from '@/components/axes/grid-brush'\nimport { ChartClip } from '@/components/axes/chart-clip'\nimport { Toolbar } from '@/components/axes/toolbar'\nimport { ZoomBar } from '@/components/axes/zoom-bar'\nimport { LayoutComponent } from '@/components/layout'\nimport { Spacer } from '@/components/layout/spacer'\nimport { Modal } from '@/components/essentials/modal'\nimport { Legend } from '@/components/essentials/legend'\nimport { Threshold } from '@/components/essentials/threshold'\nimport { Highlight } from '@/components/essentials/highlights'\nimport { Title } from '@/components/essentials/title'\nimport { AxisChartsTooltip } from '@/components/essentials/tooltip-axis'\nimport { CartesianScales } from '@/services/scales-cartesian'\nimport { Curves } from '@/services/curves'\nimport { Zoom } from '@/services/zoom'\n\nexport class AxisChart extends Chart {\n\tservices: any = Object.assign(this.services, {\n\t\tcartesianScales: CartesianScales,\n\t\tcurves: Curves,\n\t\tzoom: Zoom\n\t})\n\tmodel: ChartModelCartesian = new ChartModelCartesian(this.services)\n\n\tconstructor(holder: HTMLDivElement, chartConfigs: ChartConfig<AxisChartOptions>) {\n\t\tsuper(holder, chartConfigs)\n\t}\n\n\tprotected getAxisChartComponents(graphFrameComponents: any[], configs?: any) {\n\t\tconst options = this.model.getOptions()\n\t\tconst isZoomBarEnabled = getProperty(options, 'zoomBar', AxisPositions.TOP, 'enabled')\n\t\tconst toolbarEnabled = getProperty(options, 'toolbar', 'enabled')\n\n\t\tthis.services.cartesianScales.determineAxisDuality()\n\t\tthis.services.cartesianScales.findDomainAndRangeAxes() // need to do this before getMainXAxisPosition()\n\t\tthis.services.cartesianScales.determineOrientation()\n\n\t\tconst mainXAxisPosition = this.services.cartesianScales.getMainXAxisPosition()\n\t\tconst mainXScaleType = getProperty(options, 'axes', mainXAxisPosition, 'scaleType')\n\t\t// @todo - Zoom Bar only supports main axis at BOTTOM axis and time scale for now\n\t\tconst zoomBarEnabled =\n\t\t\tisZoomBarEnabled &&\n\t\t\tmainXAxisPosition === AxisPositions.BOTTOM &&\n\t\t\tmainXScaleType === ScaleTypes.TIME\n\n\t\t// @todo - should check if zoom bar in all axes are locked\n\t\tconst isZoomBarLocked = this.services.zoom.isZoomBarLocked(AxisPositions.TOP)\n\n\t\tconst titleAvailable = !!this.model.getOptions().title\n\t\tconst titleComponent = {\n\t\t\tid: 'title',\n\t\t\tcomponents: [new Title(this.model, this.services)],\n\t\t\tgrowth: LayoutGrowth.STRETCH\n\t\t}\n\n\t\tconst toolbarComponent = {\n\t\t\tid: 'toolbar',\n\t\t\tcomponents: [new Toolbar(this.model, this.services)],\n\t\t\tgrowth: LayoutGrowth.PREFERRED\n\t\t}\n\n\t\tconst headerComponent = {\n\t\t\tid: 'header',\n\t\t\tcomponents: [\n\t\t\t\tnew LayoutComponent(\n\t\t\t\t\tthis.model,\n\t\t\t\t\tthis.services,\n\t\t\t\t\t[\n\t\t\t\t\t\t// always add title to keep layout correct\n\t\t\t\t\t\ttitleComponent,\n\t\t\t\t\t\t...(toolbarEnabled ? [toolbarComponent] : [])\n\t\t\t\t\t],\n\t\t\t\t\t{\n\t\t\t\t\t\tdirection: LayoutDirection.ROW,\n\t\t\t\t\t\talignItems: LayoutAlignItems.CENTER\n\t\t\t\t\t}\n\t\t\t\t)\n\t\t\t],\n\t\t\tgrowth: LayoutGrowth.PREFERRED\n\t\t}\n\n\t\tconst legendComponent = {\n\t\t\tid: 'legend',\n\t\t\tcomponents: [new Legend(this.model, this.services)],\n\t\t\tgrowth: LayoutGrowth.PREFERRED\n\t\t}\n\n\t\t// if all zoom bars are locked, no need to add chart brush\n\t\tif (zoomBarEnabled && !isZoomBarLocked) {\n\t\t\tgraphFrameComponents.push(\n\t\t\t\tnew ChartClip(this.model, this.services),\n\t\t\t\tnew ChartBrush(this.model, this.services)\n\t\t\t)\n\t\t}\n\n\t\tgraphFrameComponents.push(new Threshold(this.model, this.services))\n\t\tgraphFrameComponents.push(new Highlight(this.model, this.services))\n\n\t\tconst graphFrameComponent = {\n\t\t\tid: 'graph-frame',\n\t\t\tcomponents: graphFrameComponents,\n\t\t\tgrowth: LayoutGrowth.STRETCH,\n\t\t\trenderType: RenderTypes.SVG\n\t\t}\n\n\t\tconst isLegendEnabled =\n\t\t\tgetProperty(configs, 'legend', 'enabled') !== false &&\n\t\t\tthis.model.getOptions().legend.enabled !== false\n\n\t\t// Decide the position of the legend in reference to the chart\n\t\tlet fullFrameComponentDirection = LayoutDirection.COLUMN\n\t\tif (isLegendEnabled) {\n\t\t\tconst legendPosition = getProperty(this.model.getOptions(), 'legend', 'position')\n\t\t\tif (legendPosition === LegendPositions.LEFT) {\n\t\t\t\tfullFrameComponentDirection = LayoutDirection.ROW\n\n\t\t\t\tif (!this.model.getOptions().legend.orientation) {\n\t\t\t\t\tthis.model.getOptions().legend.orientation = LegendOrientations.VERTICAL\n\t\t\t\t}\n\t\t\t} else if (legendPosition === LegendPositions.RIGHT) {\n\t\t\t\tfullFrameComponentDirection = LayoutDirection.ROW_REVERSE\n\n\t\t\t\tif (!this.model.getOptions().legend.orientation) {\n\t\t\t\t\tthis.model.getOptions().legend.orientation = LegendOrientations.VERTICAL\n\t\t\t\t}\n\t\t\t} else if (legendPosition === LegendPositions.BOTTOM) {\n\t\t\t\tfullFrameComponentDirection = LayoutDirection.COLUMN_REVERSE\n\t\t\t}\n\t\t}\n\n\t\tconst legendSpacerComponent = {\n\t\t\tid: 'spacer',\n\t\t\tcomponents: [new Spacer(this.model, this.services)],\n\t\t\tgrowth: LayoutGrowth.PREFERRED\n\t\t}\n\n\t\tconst fullFrameComponent = {\n\t\t\tid: 'full-frame',\n\t\t\tcomponents: [\n\t\t\t\tnew LayoutComponent(\n\t\t\t\t\tthis.model,\n\t\t\t\t\tthis.services,\n\t\t\t\t\t[\n\t\t\t\t\t\t...(isLegendEnabled ? [legendComponent] : []),\n\t\t\t\t\t\t...(isLegendEnabled ? [legendSpacerComponent] : []),\n\t\t\t\t\t\tgraphFrameComponent\n\t\t\t\t\t],\n\t\t\t\t\t{\n\t\t\t\t\t\tdirection: fullFrameComponentDirection\n\t\t\t\t\t}\n\t\t\t\t)\n\t\t\t],\n\t\t\tgrowth: LayoutGrowth.STRETCH\n\t\t}\n\n\t\tconst zoomBarComponent = {\n\t\t\tid: 'zoom-bar',\n\t\t\tcomponents: [new ZoomBar(this.model, this.services)],\n\t\t\tgrowth: LayoutGrowth.PREFERRED,\n\t\t\trenderType: RenderTypes.SVG\n\t\t}\n\n\t\tconst topLevelLayoutComponents = []\n\t\t// header component is required for either title or toolbar\n\t\tif (titleAvailable || toolbarEnabled) {\n\t\t\ttopLevelLayoutComponents.push(headerComponent)\n\n\t\t\tconst titleSpacerComponent = {\n\t\t\t\tid: 'spacer',\n\t\t\t\tcomponents: [\n\t\t\t\t\tnew Spacer(this.model, this.services, toolbarEnabled ? { size: 15 } : undefined)\n\t\t\t\t],\n\t\t\t\tgrowth: LayoutGrowth.PREFERRED\n\t\t\t}\n\n\t\t\ttopLevelLayoutComponents.push(titleSpacerComponent)\n\t\t}\n\t\tif (zoomBarEnabled) {\n\t\t\ttopLevelLayoutComponents.push(zoomBarComponent)\n\t\t}\n\t\ttopLevelLayoutComponents.push(fullFrameComponent)\n\n\t\treturn [\n\t\t\tnew AxisChartsTooltip(this.model, this.services),\n\t\t\tnew Modal(this.model, this.services),\n\t\t\tnew LayoutComponent(this.model, this.services, topLevelLayoutComponents, {\n\t\t\t\tdirection: LayoutDirection.COLUMN\n\t\t\t})\n\t\t]\n\t}\n}\n","import { Chart } from '@/chart'\nimport { AlluvialChartModel } from '@/model/alluvial'\nimport { options } from '@/configuration'\nimport type { ChartConfig } from '@/interfaces/model'\nimport type { AlluvialChartOptions } from '@/interfaces/charts'\nimport { mergeDefaultChartOptions } from '@/tools'\nimport { Alluvial } from '@/components/graphs/alluvial'\nimport type { Component } from '@/components/component'\n\nexport class AlluvialChart extends Chart {\n\tmodel = new AlluvialChartModel(this.services)\n\n\tconstructor(holder: HTMLDivElement, chartConfigs: ChartConfig<AlluvialChartOptions>) {\n\t\tsuper(holder, chartConfigs)\n\n\t\t// Merge the default options for this chart\n\t\t// With the user provided options\n\t\tthis.model.setOptions(mergeDefaultChartOptions(options.alluvialChart, chartConfigs.options))\n\n\t\t// Initialize data, services, components etc.\n\t\tthis.init(holder, chartConfigs)\n\t}\n\n\t/**\n\t * Retrieves the components to be rendered inside the graph frame.\n\t *\n\t * @returns {Component[]} An array of components to be rendered.\n\t */\n\tgetComponents() {\n\t\tconst graphFrameComponents: Component[] = [new Alluvial(this.model, this.services)]\n\n\t\tconst components: Component[] = this.getChartComponents(graphFrameComponents, {\n\t\t\texcludeLegend: true\n\t\t})\n\t\treturn components\n\t}\n}\n","import { cloneDeep } from 'lodash-es'\nimport { AxisChart } from '@/axis-chart'\nimport { options } from '@/configuration'\nimport { mergeDefaultChartOptions } from '@/tools'\nimport type { ChartConfig } from '@/interfaces/model'\nimport type { AreaChartOptions } from '@/interfaces/charts'\nimport { Skeletons } from '@/interfaces/enums'\nimport type { Component } from '@/components/component'\nimport { Grid } from '@/components/axes/grid'\nimport { Area } from '@/components/graphs/area'\nimport { Line } from '@/components/graphs/line'\nimport { Ruler } from '@/components/axes/ruler'\nimport { Scatter } from '@/components/graphs/scatter'\nimport { TwoDimensionalAxes } from '@/components/axes/two-dimensional-axes'\nimport { Skeleton } from '@/components/graphs/skeleton'\n\nexport class AreaChart extends AxisChart {\n\tconstructor(holder: HTMLDivElement, chartConfigs: ChartConfig<AreaChartOptions>) {\n\t\tsuper(holder, chartConfigs)\n\n\t\t// Merge the default options for this chart\n\t\t// With the user provided options\n\t\tthis.model.setOptions(\n\t\t\tmergeDefaultChartOptions(cloneDeep(options.areaChart), chartConfigs.options)\n\t\t)\n\n\t\t// Initialize data, services, components etc.\n\t\tthis.init(holder, chartConfigs)\n\t}\n\n\t/**\n\t * Retrieves the components to be rendered inside the graph frame.\n\t *\n\t * @returns {Component[]} An array of components to be rendered.\n\t */\n\tgetComponents() {\n\t\tconst graphFrameComponents: Component[] = [\n\t\t\tnew TwoDimensionalAxes(this.model, this.services),\n\t\t\tnew Grid(this.model, this.services),\n\t\t\tnew Ruler(this.model, this.services),\n\t\t\tnew Line(this.model, this.services),\n\t\t\tnew Area(this.model, this.services),\n\t\t\tnew Scatter(this.model, this.services, {\n\t\t\t\tfadeInOnChartHolderMouseover: true,\n\t\t\t\thandleThresholds: true\n\t\t\t}),\n\t\t\tnew Skeleton(this.model, this.services, {\n\t\t\t\tskeleton: Skeletons.GRID\n\t\t\t})\n\t\t]\n\n\t\tconst components: Component[] = this.getAxisChartComponents(graphFrameComponents)\n\t\treturn components\n\t}\n}\n","import { AxisChart } from '@/axis-chart'\nimport { options } from '@/configuration'\nimport { mergeDefaultChartOptions } from '@/tools'\nimport { BoxplotChartModel } from '@/model/boxplot'\nimport type { BoxplotChartOptions } from '@/interfaces/charts'\nimport type { ChartConfig } from '@/interfaces/model'\nimport { Skeletons } from '@/interfaces/enums'\nimport type { Component } from '@/components/component'\nimport { Grid } from '@/components/axes/grid'\nimport { Boxplot } from '@/components/graphs/boxplot'\nimport { TwoDimensionalAxes } from '@/components/axes/two-dimensional-axes'\nimport { ZeroLine } from '@/components/axes/zero-line'\nimport { Skeleton } from '@/components/graphs/skeleton'\n\nexport class BoxplotChart extends AxisChart {\n\tmodel = new BoxplotChartModel(this.services)\n\n\tconstructor(holder: HTMLDivElement, chartConfigs: ChartConfig<BoxplotChartOptions>) {\n\t\tsuper(holder, chartConfigs)\n\n\t\t// Merge the default options for this chart\n\t\t// With the user provided options\n\t\tthis.model.setOptions(mergeDefaultChartOptions(options.boxplotChart, chartConfigs.options))\n\n\t\t// Initialize data, services, components etc.\n\t\tthis.init(holder, chartConfigs)\n\t}\n\n\t/**\n\t * Retrieves the components to be rendered inside the graph frame.\n\t *\n\t * @returns {Component[]} An array of components to be rendered.\n\t */\n\tgetComponents() {\n\t\tconst graphFrameComponents: Component[] = [\n\t\t\tnew TwoDimensionalAxes(this.model, this.services),\n\t\t\tnew Grid(this.model, this.services),\n\t\t\tnew Boxplot(this.model, this.services),\n\t\t\tnew ZeroLine(this.model, this.services),\n\t\t\tnew Skeleton(this.model, this.services, {\n\t\t\t\tskeleton: Skeletons.VERT_OR_HORIZ\n\t\t\t})\n\t\t]\n\n\t\tconst components: Component[] = this.getAxisChartComponents(graphFrameComponents, {\n\t\t\tlegend: {\n\t\t\t\tenabled: false\n\t\t\t}\n\t\t})\n\t\treturn components\n\t}\n}\n","import { AxisChart } from '@/axis-chart'\nimport { options } from '@/configuration'\nimport { mergeDefaultChartOptions } from '@/tools'\nimport type { ChartConfig } from '@/interfaces/model'\nimport { Skeletons } from '@/interfaces/enums'\nimport type { BubbleChartOptions } from '@/interfaces/charts'\nimport type { Component } from '@/components/component'\nimport { Grid } from '@/components/axes/grid'\nimport { Ruler } from '@/components/axes/ruler'\nimport { Bubble } from '@/components/graphs/bubble'\nimport { TwoDimensionalAxes } from '@/components/axes/two-dimensional-axes'\nimport { Skeleton } from '@/components/graphs/skeleton'\n\nexport class BubbleChart extends AxisChart {\n\tconstructor(holder: HTMLDivElement, chartConfigs: ChartConfig<BubbleChartOptions>) {\n\t\tsuper(holder, chartConfigs)\n\n\t\t// Merge the default options for this chart\n\t\t// With the user provided options\n\t\tthis.model.setOptions(mergeDefaultChartOptions(options.bubbleChart, chartConfigs.options))\n\n\t\t// Initialize data, services, components etc.\n\t\tthis.init(holder, chartConfigs)\n\t}\n\n\t/**\n\t * Retrieves the components to be rendered inside the graph frame.\n\t *\n\t * @returns {Component[]} An array of components to be rendered.\n\t */\n\tgetComponents() {\n\t\tconst graphFrameComponents: Component[] = [\n\t\t\tnew TwoDimensionalAxes(this.model, this.services),\n\t\t\tnew Grid(this.model, this.services),\n\t\t\tnew Ruler(this.model, this.services),\n\t\t\tnew Bubble(this.model, this.services),\n\t\t\tnew Skeleton(this.model, this.services, {\n\t\t\t\tskeleton: Skeletons.GRID\n\t\t\t})\n\t\t]\n\n\t\tconst components: Component[] = this.getAxisChartComponents(graphFrameComponents)\n\t\treturn components\n\t}\n}\n","import { AxisChart } from '@/axis-chart'\nimport { options } from '@/configuration'\nimport { mergeDefaultChartOptions } from '@/tools'\nimport { BulletChartModel } from '@/model/bullet'\nimport type { BulletChartOptions } from '@/interfaces/charts'\nimport type { ChartConfig } from '@/interfaces/model'\nimport { Skeletons } from '@/interfaces/enums'\nimport { Bullet } from '@/components/graphs/bullet'\nimport type { Component } from '@/components/component'\nimport { Grid } from '@/components/axes/grid'\nimport { TwoDimensionalAxes } from '@/components/axes/two-dimensional-axes'\nimport { Skeleton } from '@/components/graphs/skeleton'\n\nexport class BulletChart extends AxisChart {\n\tmodel = new BulletChartModel(this.services)\n\n\tconstructor(holder: HTMLDivElement, chartConfigs: ChartConfig<BulletChartOptions>) {\n\t\tsuper(holder, chartConfigs)\n\n\t\t// Merge the default options for this chart\n\t\t// With the user provided options\n\t\tthis.model.setOptions(mergeDefaultChartOptions(options.bulletChart, chartConfigs.options))\n\n\t\t// Initialize data, services, components etc.\n\t\tthis.init(holder, chartConfigs)\n\t}\n\n\t/**\n\t * Retrieves the components to be rendered inside the graph frame.\n\t *\n\t * @returns {Component[]} An array of components to be rendered.\n\t */\n\tgetComponents() {\n\t\tconst graphFrameComponents: Component[] = [\n\t\t\tnew TwoDimensionalAxes(this.model, this.services),\n\t\t\tnew Grid(this.model, this.services),\n\t\t\tnew Bullet(this.model, this.services),\n\t\t\tnew Skeleton(this.model, this.services, {\n\t\t\t\tskeleton: Skeletons.GRID\n\t\t\t})\n\t\t]\n\n\t\tconst components: Component[] = this.getAxisChartComponents(graphFrameComponents)\n\t\treturn components\n\t}\n}\n","import { Chart } from '@/chart'\nimport { options as configOptions } from '@/configuration'\nimport { getProperty, mergeDefaultChartOptions } from '@/tools'\nimport { ChoroplethModel } from '@/model/choropleth'\nimport type { ChoroplethChartOptions } from '@/interfaces/charts'\nimport type { ChartConfig } from '@/interfaces/model'\nimport { LayoutDirection, LayoutGrowth, RenderTypes, LayoutAlignItems } from '@/interfaces/enums'\nimport type { Component } from '@/components/component'\nimport { Choropleth } from '@/components/graphs/choropleth'\nimport { Modal } from '@/components/essentials/modal'\nimport { LayoutComponent } from '@/components/layout/layout'\nimport { ColorScaleLegend } from '@/components/essentials/color-scale-legend'\nimport { Title } from '@/components/essentials/title'\nimport { Spacer } from '@/components/layout/spacer'\nimport { Toolbar } from '@/components/axes/toolbar'\nimport { Tooltip } from '@/components/essentials/tooltip'\n\nexport class ChoroplethChart extends Chart {\n\tmodel = new ChoroplethModel(this.services)\n\n\tconstructor(holder: HTMLDivElement, chartConfigs: ChartConfig<ChoroplethChartOptions>) {\n\t\tsuper(holder, chartConfigs)\n\n\t\t// Merge the default options for this chart\n\t\t// With the user provided options\n\t\tthis.model.setOptions(\n\t\t\tmergeDefaultChartOptions(configOptions.choroplethChart, chartConfigs.options)\n\t\t)\n\n\t\t// Initialize data, services, components etc.\n\t\tthis.init(holder, chartConfigs)\n\t}\n\n\t// Custom getChartComponents - Implements getChartComponents\n\t// Removes zoombar support and additional `features` that are not supported in heatmap\n\tprotected getChartComponents(graphFrameComponents: any[], configs?: any) {\n\t\tconst options = this.model.getOptions()\n\t\tconst toolbarEnabled = getProperty(options, 'toolbar', 'enabled')\n\n\t\tconst titleAvailable = !!this.model.getOptions().title\n\t\tconst titleComponent = {\n\t\t\tid: 'title',\n\t\t\tcomponents: [new Title(this.model, this.services)],\n\t\t\tgrowth: LayoutGrowth.STRETCH\n\t\t}\n\n\t\tconst toolbarComponent = {\n\t\t\tid: 'toolbar',\n\t\t\tcomponents: [new Toolbar(this.model, this.services)],\n\t\t\tgrowth: LayoutGrowth.PREFERRED\n\t\t}\n\n\t\tconst headerComponent = {\n\t\t\tid: 'header',\n\t\t\tcomponents: [\n\t\t\t\tnew LayoutComponent(\n\t\t\t\t\tthis.model,\n\t\t\t\t\tthis.services,\n\t\t\t\t\t[\n\t\t\t\t\t\t// always add title to keep layout correct\n\t\t\t\t\t\ttitleComponent,\n\t\t\t\t\t\t...(toolbarEnabled ? [toolbarComponent] : [])\n\t\t\t\t\t],\n\t\t\t\t\t{\n\t\t\t\t\t\tdirection: LayoutDirection.ROW,\n\t\t\t\t\t\talignItems: LayoutAlignItems.CENTER\n\t\t\t\t\t}\n\t\t\t\t)\n\t\t\t],\n\t\t\tgrowth: LayoutGrowth.PREFERRED\n\t\t}\n\n\t\tconst legendComponent = {\n\t\t\tid: 'legend',\n\t\t\tcomponents: [\n\t\t\t\tnew ColorScaleLegend(this.model, this.services, {\n\t\t\t\t\tchartType: 'choropleth'\n\t\t\t\t})\n\t\t\t],\n\t\t\tgrowth: LayoutGrowth.PREFERRED,\n\t\t\trenderType: RenderTypes.SVG\n\t\t}\n\n\t\tconst graphFrameComponent = {\n\t\t\tid: 'graph-frame',\n\t\t\tcomponents: graphFrameComponents,\n\t\t\tgrowth: LayoutGrowth.STRETCH,\n\t\t\trenderType: RenderTypes.SVG\n\t\t}\n\n\t\tconst isLegendEnabled =\n\t\t\tgetProperty(configs, 'legend', 'enabled') !== false &&\n\t\t\tthis.model.getOptions().legend.enabled !== false &&\n\t\t\tthis.model.getData().length > 0\n\n\t\t// Decide the position of the legend in reference to the chart\n\t\tconst fullFrameComponentDirection = LayoutDirection.COLUMN_REVERSE\n\n\t\tconst legendSpacerComponent = {\n\t\t\tid: 'spacer',\n\t\t\tcomponents: [new Spacer(this.model, this.services, { size: 15 })],\n\t\t\tgrowth: LayoutGrowth.PREFERRED\n\t\t}\n\n\t\tconst fullFrameComponent = {\n\t\t\tid: 'full-frame',\n\t\t\tcomponents: [\n\t\t\t\tnew LayoutComponent(\n\t\t\t\t\tthis.model,\n\t\t\t\t\tthis.services,\n\t\t\t\t\t[\n\t\t\t\t\t\t...(isLegendEnabled ? [legendComponent] : []),\n\t\t\t\t\t\t...(isLegendEnabled ? [legendSpacerComponent] : []),\n\t\t\t\t\t\tgraphFrameComponent\n\t\t\t\t\t],\n\t\t\t\t\t{\n\t\t\t\t\t\tdirection: fullFrameComponentDirection\n\t\t\t\t\t}\n\t\t\t\t)\n\t\t\t],\n\t\t\tgrowth: LayoutGrowth.STRETCH\n\t\t}\n\n\t\tconst topLevelLayoutComponents = []\n\t\t// header component is required for either title or toolbar\n\t\tif (titleAvailable || toolbarEnabled) {\n\t\t\ttopLevelLayoutComponents.push(headerComponent)\n\n\t\t\tconst titleSpacerComponent = {\n\t\t\t\tid: 'spacer',\n\t\t\t\tcomponents: [\n\t\t\t\t\tnew Spacer(this.model, this.services, toolbarEnabled ? { size: 15 } : undefined)\n\t\t\t\t],\n\t\t\t\tgrowth: LayoutGrowth.PREFERRED\n\t\t\t}\n\n\t\t\ttopLevelLayoutComponents.push(titleSpacerComponent)\n\t\t}\n\t\ttopLevelLayoutComponents.push(fullFrameComponent)\n\n\t\treturn [\n\t\t\tnew Tooltip(this.model, this.services),\n\t\t\tnew Modal(this.model, this.services),\n\t\t\tnew LayoutComponent(this.model, this.services, topLevelLayoutComponents, {\n\t\t\t\tdirection: LayoutDirection.COLUMN\n\t\t\t})\n\t\t]\n\t}\n\n\t/**\n\t * Retrieves the components to be rendered inside the graph frame.\n\t *\n\t * @returns {Component[]} An array of components to be rendered.\n\t */\n\tgetComponents() {\n\t\tconst graphFrameComponents: Component[] = [new Choropleth(this.model, this.services)]\n\n\t\tconst components: Component[] = this.getChartComponents(graphFrameComponents)\n\t\treturn components\n\t}\n}\n","import { Chart } from '@/chart'\nimport { options } from '@/configuration'\nimport { mergeDefaultChartOptions } from '@/tools'\nimport { CirclePackChartModel } from '@/model/circle-pack'\nimport type { ChartConfig } from '@/interfaces/model'\nimport type { CirclePackChartOptions } from '@/interfaces/charts'\nimport type { Component } from '@/components/component'\nimport { CirclePack } from '@/components/graphs/circle-pack'\n\nexport class CirclePackChart extends Chart {\n\tmodel = new CirclePackChartModel(this.services)\n\n\tconstructor(holder: HTMLDivElement, chartConfigs: ChartConfig<CirclePackChartOptions>) {\n\t\tsuper(holder, chartConfigs)\n\n\t\t// Merge the default options for this chart\n\t\t// With the user provided options\n\t\tthis.model.setOptions(mergeDefaultChartOptions(options.circlePackChart, chartConfigs.options))\n\n\t\t// Initialize data, services, components etc.\n\t\tthis.init(holder, chartConfigs)\n\t}\n\n\t/**\n\t * Retrieves the components to be rendered inside the graph frame.\n\t *\n\t * @returns {Component[]} An array of components to be rendered.\n\t */\n\tgetComponents() {\n\t\tconst graphFrameComponents: Component[] = [new CirclePack(this.model, this.services)]\n\n\t\t// get the base chart components and export with tooltip\n\t\tconst components: Component[] = this.getChartComponents(graphFrameComponents)\n\t\treturn components\n\t}\n}\n","import { camelCase, flatten, merge } from 'lodash-es'\nimport { AxisChart } from '@/axis-chart'\nimport { options as configOptions } from '@/configuration'\nimport { mergeDefaultChartOptions } from '@/tools'\nimport type { ChartConfig } from '@/interfaces/model'\nimport { ChartTypes, Skeletons } from '@/interfaces/enums'\nimport type { ComboChartOptions } from '@/interfaces/charts'\nimport type { Component } from '@/components/component'\nimport { Grid } from '@/components/axes/grid'\nimport { TwoDimensionalAxes } from '@/components/axes/two-dimensional-axes'\nimport { Line } from '@/components/graphs/line'\nimport { Skeleton } from '@/components/graphs/skeleton'\nimport { SimpleBar } from '@/components/graphs/bar-simple'\nimport { GroupedBar } from '@/components/graphs/bar-grouped'\nimport { StackedRuler } from '@/components/axes/ruler-stacked'\nimport { Area } from '@/components/graphs/area'\nimport { Ruler } from '@/components/axes/ruler'\nimport { Scatter } from '@/components/graphs/scatter'\nimport { ZeroLine } from '@/components/axes/zero-line'\nimport { StackedArea } from '@/components/graphs/area-stacked'\nimport { StackedBar } from '@/components/graphs/bar-stacked'\nimport { StackedScatter } from '@/components/graphs/scatter-stacked'\n\nconst graphComponentsMap = {\n\t[ChartTypes.LINE]: [Line, Scatter],\n\t[ChartTypes.SCATTER]: [Scatter],\n\t[ChartTypes.AREA]: [Area, Line, Scatter],\n\t[ChartTypes.STACKED_AREA]: [StackedArea, Line, StackedScatter, StackedRuler],\n\t[ChartTypes.SIMPLE_BAR]: [SimpleBar],\n\t[ChartTypes.GROUPED_BAR]: [GroupedBar, ZeroLine],\n\t[ChartTypes.STACKED_BAR]: [StackedBar, StackedRuler]\n}\n\nexport class ComboChart extends AxisChart {\n\tconstructor(holder: HTMLDivElement, chartConfigs: ChartConfig<ComboChartOptions>) {\n\t\tsuper(holder, chartConfigs)\n\n\t\t// Merge the default options for this chart\n\t\t// With the user provided options\n\t\tconst chartOptions = mergeDefaultChartOptions(configOptions.comboChart, chartConfigs.options)\n\n\t\t// Warn user if no comboChartTypes defined\n\t\t// Use skeleton chart instead\n\t\tif (!chartConfigs.options.comboChartTypes) {\n\t\t\tconsole.error('No comboChartTypes defined for the Combo Chart!')\n\t\t\t// add a default chart to get an empty chart\n\t\t\tchartOptions.comboChartTypes = [{ type: ChartTypes.LINE, correspondingDatasets: [] }]\n\t\t}\n\n\t\t// set the global options\n\t\tthis.model.setOptions(chartOptions)\n\n\t\t// Initialize data, services, components etc.\n\t\tthis.init(holder, chartConfigs)\n\t}\n\n\tgetGraphComponents() {\n\t\tconst { comboChartTypes }: { comboChartTypes: Component[] } = this.model.getOptions()\n\t\tlet counter = 0\n\t\tconst graphComponents: Component[] = comboChartTypes\n\t\t\t.map((graph: any) => {\n\t\t\t\tconst type = graph.type\n\t\t\t\tlet options: any\n\n\t\t\t\t// initializes the components using input strings with the base configs for each chart\n\t\t\t\tif (typeof graph.type === 'string') {\n\t\t\t\t\t// check if it is in the components map\n\t\t\t\t\t// if it isn't then it is not a valid carbon chart to use in combo\n\t\t\t\t\tif (!Object.keys(graphComponentsMap).includes(graph.type)) {\n\t\t\t\t\t\tconsole.error(\n\t\t\t\t\t\t\t`Invalid chart type \"${graph.type}\" specified for combo chart. Please refer to the ComboChart tutorial for more guidance.`\n\t\t\t\t\t\t)\n\t\t\t\t\t\treturn null\n\t\t\t\t\t}\n\t\t\t\t\tlet stacked = false\n\t\t\t\t\tconst key = `${camelCase(graph.type)}Chart` as keyof typeof configOptions\n\t\t\t\t\toptions = merge({}, configOptions[key], this.model.getOptions(), graph.options)\n\t\t\t\t\t// if we are creating a stacked area, the contained Line chart needs to know it is stacked\n\t\t\t\t\tif (graph.type === ChartTypes.STACKED_AREA) {\n\t\t\t\t\t\tstacked = true\n\t\t\t\t\t}\n\t\t\t\t\treturn graphComponentsMap[graph.type as keyof typeof graphComponentsMap].map(\n\t\t\t\t\t\t(Component: any) =>\n\t\t\t\t\t\t\tnew Component(this.model, this.services, {\n\t\t\t\t\t\t\t\tgroups: graph.correspondingDatasets,\n\t\t\t\t\t\t\t\tid: counter++,\n\t\t\t\t\t\t\t\toptions: options,\n\t\t\t\t\t\t\t\tstacked\n\t\t\t\t\t\t\t})\n\t\t\t\t\t)\n\t\t\t\t} else {\n\t\t\t\t\t// user has imported a type or custom component to instantiate\n\t\t\t\t\toptions = merge({}, this.model.getOptions(), graph.options)\n\t\t\t\t\treturn new type(this.model, this.services, {\n\t\t\t\t\t\tgroups: graph.correspondingDatasets,\n\t\t\t\t\t\tid: counter++,\n\t\t\t\t\t\toptions: options\n\t\t\t\t\t})\n\t\t\t\t}\n\t\t\t})\n\t\t\t.filter((item: any) => item !== null)\n\n\t\treturn flatten(graphComponents)\n\t}\n\n\t/**\n\t * Retrieves the components to be rendered inside the graph frame.\n\t *\n\t * @returns {Component[]} An array of components to be rendered.\n\t */\n\tgetComponents() {\n\t\tconst { comboChartTypes } = this.model.getOptions()\n\t\t// don't add the regular ruler if stacked ruler is added\n\t\tconst stackedRulerEnabled = comboChartTypes.some(\n\t\t\t(chartObject: any) =>\n\t\t\t\tchartObject.type === ChartTypes.STACKED_BAR || chartObject.type === ChartTypes.STACKED_AREA\n\t\t)\n\n\t\t// Specify what to render inside the graph-frame\n\t\tconst graphFrameComponents = [\n\t\t\tnew TwoDimensionalAxes(this.model, this.services),\n\t\t\tnew Grid(this.model, this.services),\n\t\t\tnew Skeleton(this.model, this.services, {\n\t\t\t\tskeleton: Skeletons.GRID\n\t\t\t}),\n\t\t\t...(stackedRulerEnabled ? [] : [new Ruler(this.model, this.services)]),\n\t\t\t...this.getGraphComponents()\n\t\t]\n\n\t\tconst components: Component[] = this.getAxisChartComponents(graphFrameComponents)\n\n\t\treturn components\n\t}\n}\n","import { Chart } from '@/chart'\nimport { options } from '@/configuration'\nimport { mergeDefaultChartOptions } from '@/tools'\nimport { PieChartModel } from '@/model/pie'\nimport type { ChartConfig } from '@/interfaces/model'\nimport type { PieChartOptions } from '@/interfaces/charts'\nimport { Skeletons } from '@/interfaces/enums'\nimport type { Component } from '@/components/component'\nimport { Pie } from '@/components/graphs/pie'\nimport { Skeleton } from '@/components/graphs/skeleton'\n\nexport class PieChart extends Chart {\n\tmodel = new PieChartModel(this.services)\n\n\t// TODO - Optimize the use of \"extending\"\n\tconstructor(\n\t\tholder: HTMLDivElement,\n\t\tchartConfigs: ChartConfig<PieChartOptions>,\n\t\textending = false\n\t) {\n\t\tsuper(holder, chartConfigs)\n\n\t\t// TODO - Optimize the use of \"extending\"\n\t\tif (extending) {\n\t\t\treturn\n\t\t}\n\n\t\t// Merge the default options for this chart\n\t\t// With the user provided options\n\t\tthis.model.setOptions(mergeDefaultChartOptions(options.pieChart, chartConfigs.options))\n\n\t\t// Initialize data, services, components etc.\n\t\tthis.init(holder, chartConfigs)\n\t}\n\n\t/**\n\t * Retrieves the components to be rendered inside the graph frame.\n\t *\n\t * @returns {Component[]} An array of components to be rendered.\n\t */\n\tgetComponents() {\n\t\tconst graphFrameComponents: Component[] = [\n\t\t\tnew Pie(this.model, this.services),\n\t\t\tnew Skeleton(this.model, this.services, {\n\t\t\t\tskeleton: Skeletons.PIE\n\t\t\t})\n\t\t]\n\n\t\t// get the base chart components and export with tooltip\n\t\tconst components: Component[] = this.getChartComponents(graphFrameComponents)\n\t\treturn components\n\t}\n}\n","import { PieChart } from './pie'\nimport { options } from '@/configuration'\nimport { mergeDefaultChartOptions } from '@/tools'\nimport type { ChartConfig } from '@/interfaces/model'\nimport type { PieChartOptions } from '@/interfaces/charts'\nimport { Skeletons } from '@/interfaces/enums'\nimport type { Component } from '@/components/component'\nimport { Donut } from '@/components/graphs/donut'\nimport { Skeleton } from '@/components/graphs/skeleton'\n\nexport class DonutChart extends PieChart {\n\tconstructor(holder: HTMLDivElement, chartConfigs: ChartConfig<PieChartOptions>) {\n\t\tsuper(holder, chartConfigs, true)\n\n\t\t// Merge the default options for this chart\n\t\t// With the user provided options\n\t\tthis.model.setOptions(mergeDefaultChartOptions(options.donutChart, chartConfigs.options))\n\n\t\t// Initialize data, services, components etc.\n\t\tthis.init(holder, chartConfigs)\n\t}\n\n\t/**\n\t * Retrieves the components to be rendered inside the graph frame.\n\t *\n\t * @returns {Component[]} An array of components to be rendered.\n\t */\n\tgetComponents() {\n\t\tconst graphFrameComponents: Component[] = [\n\t\t\tnew Donut(this.model, this.services),\n\t\t\tnew Skeleton(this.model, this.services, {\n\t\t\t\tskeleton: Skeletons.DONUT\n\t\t\t})\n\t\t]\n\n\t\tconst components: Component[] = this.getChartComponents(graphFrameComponents)\n\t\treturn components\n\t}\n}\n","import { Chart } from '@/chart'\nimport { options } from '@/configuration'\nimport { mergeDefaultChartOptions } from '@/tools'\nimport type { ChartConfig } from '@/interfaces/model'\nimport type { GaugeChartOptions } from '@/interfaces/charts'\nimport { GaugeChartModel } from '@/model/gauge'\nimport type { Component } from '@/components/component'\nimport { Gauge } from '@/components/graphs/gauge'\n\nexport class GaugeChart extends Chart {\n\tmodel = new GaugeChartModel(this.services)\n\tconstructor(holder: HTMLDivElement, chartConfigs: ChartConfig<GaugeChartOptions>) {\n\t\tsuper(holder, chartConfigs)\n\n\t\t// Merge the default options for this chart\n\t\t// With the user provided options\n\t\tthis.model.setOptions(mergeDefaultChartOptions(options.gaugeChart, chartConfigs.options))\n\n\t\t// Initialize data, services, components etc.\n\t\tthis.init(holder, chartConfigs)\n\t}\n\n\t/**\n\t * Retrieves the components to be rendered inside the graph frame.\n\t *\n\t * @returns {Component[]} An array of components to be rendered.\n\t */\n\tgetComponents() {\n\t\tconst graphFrameComponents: Component[] = [new Gauge(this.model, this.services)]\n\n\t\tconst components: Component[] = this.getChartComponents(graphFrameComponents)\n\n\t\treturn components\n\t}\n}\n","import { AxisChart } from '@/axis-chart'\nimport { options } from '@/configuration'\nimport { mergeDefaultChartOptions } from '@/tools'\nimport type { BarChartOptions } from '@/interfaces/charts'\nimport type { ChartConfig } from '@/interfaces/model'\nimport { Skeletons } from '@/interfaces/enums'\nimport type { Component } from '@/components/component'\nimport { Grid } from '@/components/axes/grid'\nimport { TwoDimensionalAxes } from '@/components/axes/two-dimensional-axes'\nimport { ZeroLine }