How to use the carbon-components/src/globals/js/settings.prefix function in carbon-components

To help you get started, we’ve selected a few carbon-components examples, based on popular ways it is used in public projects.

Secure your code as it's written. Use Snyk Code to scan source code in minutes - no build needed - and fix issues immediately.

github carbon-design-system / carbon-charts / packages / core / src / components / essentials / tooltip.ts View on Github external
init() {
		// Grab the tooltip element
		const holder = select(this.services.domUtils.getHolder());
		const chartprefix = Tools.getProperty(this.model.getOptions(), "style", "prefix");
		this.tooltip = DOMUtils.appendOrSelect(holder, `div.${settings.prefix}--${chartprefix}--tooltip`);

		// Apply html content to the tooltip
		const tooltipTextContainer = DOMUtils.appendOrSelect(this.tooltip, "div.content-box");

		// listen to show-tooltip Custom Events to render the tooltip
		this.services.events.addEventListener("show-tooltip", e => {
			// check the type of tooltip and that it is enabled
			if ((e.detail.type === TooltipTypes.DATAPOINT && Tools.getProperty(this.model.getOptions(), "tooltip", "datapoint", "enabled"))
				|| (e.detail.type === TooltipTypes.GRIDLINE && Tools.getProperty(this.model.getOptions(), "tooltip", "gridline", "enabled")) ) {

				let data = select(event.target).datum() as any;

				// if there is a provided tooltip HTML function
				if (Tools.getProperty(this.model.getOptions(), "tooltip", "customHTML")) {
					tooltipTextContainer.html(this.model.getOptions().tooltip.customHTML(data));
				} else if (e.detail.multidata) {
github carbon-design-system / carbon-charts / packages / core / src / components / essentials / title.spec.ts View on Github external
const renderCb = () => {
				const title = select(`g.${settings.prefix}--${options.chart.style.prefix}--title`);

				// Remove event listener for when chart render is finished
				chartEventsService.removeEventListener("render-finished", renderCb);

				expect(title.select("text").html()).toEqual(sampleTitle);

				done();
			};
github carbon-design-system / carbon-charts / packages / core / src / services / essentials / dom-utils.ts View on Github external
styleHolderElement() {
		const holderElement = this.getHolder() as HTMLElement;
		const { width, height } = this.model.getOptions();

		// Add class to chart holder
		select(this.getHolder()).classed(`${settings.prefix}--chart-holder`, true);

		// If width exists in options
		if (width) {
			// Apply formatted width attribute to chart
			holderElement.style.width = Tools.formatWidthHeightValues(width);
		}

		// If height exists in options
		if (height) {
			// Apply formatted height attribute to chart
			holderElement.style.height = Tools.formatWidthHeightValues(height);
		}
	}
github carbon-design-system / carbon-charts / packages / core / src / components / essentials / tooltip-bar.ts View on Github external
// if there is a provided tooltip HTML function call it and pass the defaultTooltip
				if (Tools.getProperty(this.model.getOptions(), "tooltip", "customHTML")) {
					tooltipTextContainer.html(this.model.getOptions().tooltip.customHTML(hoveredElement, defaultTooltip));
				} else {
					// default tooltip
					tooltipTextContainer.html(defaultTooltip);
				}

				const position = this.getTooltipPosition(hoveredElement);
				// Position the tooltip relative to the bars
				this.positionTooltip(e.detail.multidata ? undefined : position);

			} else if (e.detail.type === TooltipTypes.TITLE) {
				// use the chart size to enforce a max width on the tooltip
				const chart = DOMUtils.appendOrSelect(holder, `svg.${settings.prefix}--${chartprefix}--chart-svg`);
				// use the configs to determine how large the tooltip should be
				const tooltipMax = DOMUtils.getSVGElementSize(chart).width * Tools.getProperty(this.model.getOptions(), "tooltip", "title", "width");
				this.tooltip.style("max-width", tooltipMax);

				// use tooltip.ts to get the tooltip html for titles
				tooltipTextContainer.html(super.getTooltipHTML(e.detail.hoveredElement, TooltipTypes.TITLE));

				// get the position based on the title positioning (static)
				const position = super.getTooltipPosition(e.detail.hoveredElement.node());
				this.positionTooltip(position);
			}

			// Fade in
			this.tooltip.classed("hidden", false);
		});
github carbon-design-system / carbon-charts / packages / core / src / components / essentials / legend.spec.ts View on Github external
const renderCb = () => {
				// Remove render event listener
				chartEventsService.removeEventListener("render-finished", renderCb);

				const numberOfLegendItems = select(`g.${settings.prefix}--${options.chart.style.prefix}--legend`).selectAll("g.legend-item").size();
				expect(numberOfLegendItems).toEqual(numberOfDatasets);

				done();
			};
github carbon-design-system / carbon-charts / packages / core / src / components / component.ts View on Github external
setParent(parent) {
		const oldParent = this.parent;
		this.parent = parent;

		if (oldParent && oldParent.node() === parent.node()) {
			return;
		}

		if (this.type) {
			const chartprefix = Tools.getProperty(this.model.getOptions(), "style", "prefix");
			this.parent.classed(`${settings.prefix}--${chartprefix}--${this.type}`, true);

			if (oldParent) {
				oldParent.classed(`${settings.prefix}--${chartprefix}--${this.type}`, false);
			}
		}
	}