index.ts

/*-
 * ========================LICENSE_START=================================
 * TeamApps
 * ---
 * Copyright (C) 2014 - 2019 TeamApps.org
 * ---
 * Licensed under the Apache License, Version 2.0 (the "License");
 * you may not use this file except in compliance with the License.
 * You may obtain a copy of the License at
 * 
 *      http://www.apache.org/licenses/LICENSE-2.0
 * 
 * Unless required by applicable law or agreed to in writing, software
 * distributed under the License is distributed on an "AS IS" BASIS,
 * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
 * See the License for the specific language governing permissions and
 * limitations under the License.
 * =========================LICENSE_END==================================
 */
import "@less/teamapps";

(window as any).jQuery = (window as any).$ = require("jquery"); // needs to be global for fullcalendar (at least)
require("jquery-ui/ui/version.js");
require("jquery-ui/ui/position.js");
require("jquery-ui/ui/widgets/draggable.js");
require("jquery-ui/ui/widgets/resizable.js");

(window as any).moment = require("moment"); // needs to be a global variable for fullcalendar

require("../lib/jquery.event.drag-2.3.0-fixed.js");
require("slickgrid/slick.core");
require("slickgrid/plugins/slick.checkboxselectcolumn");
require("slickgrid/plugins/slick.autotooltips");
require("slickgrid/plugins/slick.cellselectionmodel");
require("slickgrid/plugins/slick.rowselectionmodel");
require("slickgrid/controls/slick.columnpicker");
require("slickgrid/slick.formatters");
require("slickgrid/slick.editors");
require("slickgrid/slick.grid");

require("webui-popover");

require("slick-carousel");

export {DefaultTeamAppsUiContext} from "./DefaultTeamAppsUiContext";
export {UiWorkSpaceLayoutChildWindowTeamAppsUiContext} from "./workspace-layout/UiWorkSpaceLayoutChildWindowTeamAppsUiContext";
export {TeamAppsConnectionImpl} from "../shared/TeamAppsConnectionImpl";

export {UiApplicationLayout} from "./UiApplicationLayout";
export {UiCalendar} from "./UiCalendar";
export {UiDocumentViewer} from "./UiDocumentViewer";
export {UiDummyComponent} from "./UiDummyComponent";
export {UiElegantPanel} from "./UiElegantPanel";
export {UiStaticGridLayout} from "./UiStaticGridLayout";
export {UiResponsiveGridLayout} from "./UiResponsiveGridLayout";
export {UiGridForm} from "./UiGridForm";
export {UiImageCropper} from "./UiImageCropper";
export {UiImageDisplay} from "./UiImageDisplay";
export {UiInfiniteItemView} from "./UiInfiniteItemView";
export {UiLiveStreamComponent} from "./UiLiveStreamComponent";
export {UiMap} from "./UiMap";
export {UiMediaTrackGraph} from "./UiMediaTrackGraph";
export {UiMobileLayout} from "./UiMobileLayout";
export {UiNavigationBar} from "./UiNavigationBar";
export {UiNetworkGraph} from "./UiNetworkGraph";
export {UiPageView} from "./UiPageView";
export {UiPanel} from "./UiPanel";
export {UiRootPanel} from "./UiRootPanel";
export {UiSplitPane} from "./UiSplitPane";
export {UiItemView} from "./UiItemView";
export {UiTable} from "./table/UiTable";
export {UiTabPanel} from "./UiTabPanel";
export {UiTemplateTestContainer} from "./UiTemplateTestContainer";
export {UiTimeGraph} from "./UiTimeGraph";
export {UiToolAccordion} from "./tool-container/tool-accordion/UiToolAccordion";
export {UiToolbar} from "./tool-container/toolbar/UiToolbar";
export {UiTree} from "./UiTree";
export {UiVerticalLayout} from "./UiVerticalLayout";
export {UiVideoPlayer} from "./UiVideoPlayer";
export {UiWebRtcPublisher} from "./UiWebRtcPublisher";
export {UiWebRtcPlayer} from "./UiWebRtcPlayer";
export {UiWindow} from "./UiWindow";                        
export {UiWorkSpaceLayout} from "./workspace-layout/UiWorkSpaceLayout";
export {UiIFrame} from "./UiIFrame";
export {WebWorkerTeamAppsConnection} from "./WebWorkerTeamAppsConnection";
export {UiFlexContainer} from "./UiFlexContainer";
export {UiChatDisplay} from "./UiChatDisplay";
export {UiChatInput} from "./UiChatInput";
export {UiAbsoluteLayout} from "./UiAbsoluteLayout";

export {UiGauge} from "./UiGauge";

export {UiButton} from "./formfield/UiButton";
export {UiCheckBox} from "./formfield/UiCheckBox";
export {UiComboBox} from "./formfield/UiComboBox";
export {UiComponentField} from "./formfield/UiComponentField";
export {UiCompositeField} from "./formfield/UiCompositeField";
export {UiCurrencyField} from "./formfield/UiCurrencyField";
export {UiInstantDateField} from "./formfield/datetime/UiInstantDateField";
export {UiLocalDateField} from "./formfield/datetime/UiLocalDateField";
export {UiInstantDateTimeField} from "./formfield/datetime/UiInstantDateTimeField";
export {UiLocalDateTimeField} from "./formfield/datetime/UiLocalDateTimeField";
export {UiInstantTimeField} from "./formfield/datetime/UiInstantTimeField";
export {UiLocalTimeField} from "./formfield/datetime/UiLocalTimeField";
export {UiDisplayField} from "./formfield/UiDisplayField";
export {UiField} from "./formfield/UiField";
export {UiNumberField} from "./formfield/UiNumberField";
export {UiImageField} from "./formfield/UiImageField";
export {UiLabel} from "./formfield/UiLabel";
export {UiFileField} from "./formfield/UiFileField";
export {UiMultiLineTextField} from "./formfield/UiMultiLineTextField";
export {UiPasswordField} from "./formfield/UiPasswordField";
export {UiTagComboBox} from "./formfield/UiTagComboBox";
export {UiTextField} from "./formfield/UiTextField";
export {UiRichTextEditor} from "./formfield/UiRichTextEditor";
export {UiSlider} from "./formfield/UiSlider";
export {UiColorPicker} from "./formfield/UiColorPicker";

export {UiToolButton} from "./micro-components/UiToolButton";

export {UiPieChart} from "./UiPieChart";

 export {UiTestHarness} from "./UiTestHarness";

// export {typescriptDeclarationFixConstant as AbstractUiChartConfig} from "./../generated/AbstractUiChartConfig";

import * as log from "loglevel";
(window as any).log = log;

pattern.ts

function Chart() {
	// Exposed variables
	var attrs:any = {
		id: 'ID' + Math.floor(Math.random() * 1000000), // Id for event handlings
		svgWidth: 400,
		svgHeight: 400,
		marginTop: 5,
		marginBottom: 5,
		marginRight: 5,
		marginLeft: 5,
		container: 'body',
		defaultTextFill: '#2C3E50',
		defaultFont: 'Helvetica',
		data: null
	};

	//InnerFunctions which will update visuals
	var updateData:(...x:any[])=>any;

	//Main chart object
	var main = function() {
		//Drawing containers
		var container:any = d3.select(attrs.container);
		var containerRect = container.node().getBoundingClientRect();
		if (containerRect.width > 0) attrs.svgWidth = containerRect.width;

		//Calculated properties
		var calc:any = {
			id:null,
			chartTopMargin:null,
			chartLeftMargin:null,
			chartWidth:null,
			chartHeight:null
		};
		calc.id = 'ID' + Math.floor(Math.random() * 1000000); // id for event handlings
		calc.chartLeftMargin = attrs.marginLeft;
		calc.chartTopMargin = attrs.marginTop;
		calc.chartWidth = attrs.svgWidth - attrs.marginRight - calc.chartLeftMargin;
		calc.chartHeight = attrs.svgHeight - attrs.marginBottom - calc.chartTopMargin;

		//Add svg
		var svg = container
			.patternify({ tag: 'svg', selector: 'svg-chart-container' })
			.attr('width', attrs.svgWidth)
			.attr('height', attrs.svgHeight)
			.attr('font-family', attrs.defaultFont);

		//Add container g element
		var chart = svg
			.patternify({ tag: 'g', selector: 'chart' })
			.attr('transform', 'translate(' + calc.chartLeftMargin + ',' + calc.chartTopMargin + ')');

		// REMOVE THIS SNIPPET AFTER YOU START THE DEVELOPMENT
		chart
			.patternify({ tag: 'text', selector: 'example-text', data: [ attrs.data.message ] })
			.text((d:string) => d)
			.attr('x', 10)
			.attr('y', 20);

		// Smoothly handle data updating
		updateData = function() {};

		//#########################################  UTIL FUNCS ##################################

		d3.select(window).on('resize.' + attrs.id, function() {
			var containerRect = container.node().getBoundingClientRect();
			if (containerRect.width > 0) attrs.svgWidth = containerRect.width;
			main();
		});
	};

	//----------- PROTOTYPE FUNCTIONS  ----------------------
	d3.selection.prototype.patternify = function(params:PatternifyParameter) {
		var container = this;
		var selector = params.selector;
		var elementTag = params.tag;
		var data = params.data || [ selector ];

		// Pattern in action
		var selection = container.selectAll('.' + selector).data(data, (d:any, i:number) => {
			if (typeof d === 'object') {
				if (d.id) {
					return d.id;
				}
			}
			return i;
		});
		selection.exit().remove();
		selection = selection.enter().append(elementTag).merge(selection);
		selection.attr('class', selector);
		return selection;
	};

	//Dynamic keys functions
	Object.keys(attrs).forEach((key) => {
		// Attach variables to main function
		//@ts-ignore
		main[key] = function(_) {
			var string = `attrs['${key}'] = _`;
			if (!arguments.length) {
				return eval(` attrs['${key}'];`);
			}
			eval(string);
			return main;
		};
		return main;
	});

	//Set attrs as property
	//@ts-ignore
	main['attrs'] = attrs;

	//Exposed update functions
	//@ts-ignore
	main['data'] = function(value) {
		if (!arguments.length) return attrs.data;
		attrs.data = value;
		if (typeof updateData === 'function') {
			updateData();
		}
		return main;
	};

	// Run  visual
	//@ts-ignore
	main['render'] = function() {
		main();
		return main;
	};

	return main;
}


export interface PatternifyParameter {
	selector:string,
	tag:string,
	data?:any
}

testHarness.ts

import { UiDummyComponent } from "./UiDummyComponent";
import { UiConfigurationConfig } from "../generated/UiConfigurationConfig";
import { TemplateRegistry } from "./TemplateRegistry";
import { UiComponent } from "./UiComponent";
import { UiComponentConfig } from "../generated/UiComponentConfig";
import { IconPathProvider, TeamAppsUiContext } from "./TeamAppsUiContext";
import { UiPieChart } from "./UiPieChart";
import * as d3 from "d3";
import { UiDataPointWeighting } from '../generated/UiDataPointWeighting';



export class UiTestHarness {

	constructor() {

		let pieChart = new UiPieChart({
			id: "Test",
			dataPointWeighting: UiDataPointWeighting.ABSOLUTE,
			dataPoints: [
				{
					name: "Basic",
					y: 0.010,
					color: {
						red: 232,
						green: 190,
						blue: 0,
						alpha: 1
					}
				},
				{
					name: "Plus", y: 0.050,
					color: {
						red: 241,
						green: 129,
						blue: 0,
						alpha: 1
					}
				},
				{
					name: "Lite", y: 0.060,
					color: {
						red: 0,
						green: 125,
						blue: 131,
						alpha: 1
					},
				},
				{
					name: "Elite", y: 0.080,
					color: {
						red: 148,
						green: 104,
						blue: 139,
						alpha: 1
					}
				},
				{
					name: "Delux", y: 0.080,
					color: {
						red: 152,
						green: 190,
						blue: 0,
						alpha: 1
					}
				},
			],
			height3D: 36,
			rotation3D: 30,
			rotationClockwise: 180,
			innerRadiusProportion: 0.1

		}, new TestTeamAppsUiContext());

		document.body.appendChild(pieChart.getMainDomElement().get(0));

		pieChart.attachedToDom = true;
		pieChart.onDataPointClicked.addListener(n => {
			console.log(n.dataPointName)
		})

		window.addEventListener("resize", () => {
			pieChart.reLayout();
		});
	}

}

class TestTeamAppsUiContext implements TeamAppsUiContext {
	readonly sessionId: string = "Test Component";
	readonly isHighDensityScreen: boolean = false;
	readonly executingCommand: boolean = false;
	readonly config: UiConfigurationConfig = {};
	readonly templateRegistry: TemplateRegistry = new TemplateRegistry(this);

	getComponentById(id: string): UiComponent<UiComponentConfig> {
		return null;
	}

	getIconPath(iconName: string, iconSize: number, ignoreRetina?: boolean): string {
		return null;
	};
}