@onetype/framework 2.0.52 → 2.0.54

package/addons/render/elements/front/items/self/cards/stat/stat.js

@@ -0,0 +1,146 @@
+onetype.AddonReady('elements', (elements) =>
+{
+	elements.ItemAdd({
+		id: 'cards-stat',
+		icon: 'analytics',
+		name: 'Stat Card',
+		description: 'Premium KPI stat card — label, big value, icon, delta and optional inline sparkline chart.',
+		category: 'Cards',
+		author: 'OneType',
+		config: {
+			label: {
+				type: 'string'
+			},
+			value: {
+				type: 'string|number'
+			},
+			description: {
+				type: 'string'
+			},
+			icon: {
+				type: 'string'
+			},
+			iconVariant: {
+				type: 'array',
+				value: ['brand'],
+				options: ['brand', 'blue', 'red', 'orange', 'green', 'bg-1', 'bg-2', 'bg-3', 'bg-4']
+			},
+			delta: {
+				type: 'object',
+				value: null,
+				config: {
+					value: { type: 'string' },
+					label: { type: 'string' },
+					direction: { type: 'string', value: 'up', options: ['up', 'down', 'neutral'] }
+				}
+			},
+			sparkline: {
+				type: 'array',
+				value: [],
+				each: { type: 'number' }
+			},
+			sparklineType: {
+				type: 'string',
+				value: 'area',
+				options: ['line', 'area', 'bar']
+			},
+			sparklineColor: {
+				type: 'string',
+				value: 'brand',
+				options: ['brand', 'blue', 'red', 'orange', 'green']
+			},
+			href: {
+				type: 'string'
+			},
+			target: {
+				type: 'string'
+			},
+			orientation: {
+				type: 'string',
+				value: 'vertical',
+				options: ['vertical', 'horizontal']
+			},
+			loading: {
+				type: 'boolean'
+			},
+			disabled: {
+				type: 'boolean'
+			},
+			active: {
+				type: 'boolean'
+			},
+			variant: {
+				type: 'array',
+				value: ['bg-1', 'border', 'size-m'],
+				options: ['bg-1', 'bg-2', 'bg-3', 'bg-4', 'border', 'hover-lift', 'gradient', 'size-s', 'size-m', 'size-l']
+			},
+			_click: {
+				type: 'function'
+			}
+		},
+		render: function()
+		{
+			this.hasDelta = !!this.delta && !!this.delta.value;
+			this.hasSparkline = this.sparkline && this.sparkline.length > 1;
+			this.hasIcon = !!this.icon;
+			this.isClickable = !!this.href || !!this._click;
+			this.tag = this.href ? 'a' : 'div';
+			this.deltaDir = this.hasDelta ? (this.delta.direction || 'up') : 'neutral';
+			this.deltaIcon = this.deltaDir === 'up' ? 'trending_up' : (this.deltaDir === 'down' ? 'trending_down' : 'trending_flat');
+
+			this.click = (event) =>
+			{
+				if(this.disabled)
+				{
+					event.preventDefault();
+					return;
+				}
+
+				if(this._click)
+				{
+					this._click({ event });
+				}
+			};
+
+			return /* html */ `
+				<${this.tag}
+					:class="'holder ' + variant.join(' ') + ' ' + orientation + (isClickable ? ' clickable' : '') + (loading ? ' loading' : '') + (disabled ? ' disabled' : '') + (active ? ' active' : '')"
+					:href="href || null"
+					:target="target || null"
+					ot-click="click"
+				>
+					<div class="body">
+						<header class="head">
+							<div class="head-text">
+								<span ot-if="label" class="label">{{ label }}</span>
+							</div>
+							<div ot-if="hasIcon" :class="'icon-wrap ' + iconVariant.join(' ')">
+								<i>{{ icon }}</i>
+							</div>
+						</header>
+
+						<div class="value-row">
+							<span class="value">{{ value }}</span>
+							<span ot-if="hasDelta" :class="'delta delta-' + deltaDir">
+								<i>{{ deltaIcon }}</i>
+								<span class="delta-value">{{ delta.value }}</span>
+								<span ot-if="delta.label" class="delta-label">{{ delta.label }}</span>
+							</span>
+						</div>
+
+						<p ot-if="description" class="description">{{ description }}</p>
+					</div>
+
+					<div ot-if="hasSparkline" class="sparkline">
+						<e-charts-sparkline
+							:values="sparkline"
+							:type="sparklineType"
+							:color="sparklineColor"
+							:height="56"
+						></e-charts-sparkline>
+					</div>
+				</${this.tag}>
+			`;
+		}
+	});
+});

package/addons/render/elements/front/items/self/charts/bar/bar.css

@@ -0,0 +1,263 @@
+/* Root */
+
+.e-6f75e2cf
+{
+	display: flex;
+	width: 100%;
+}
+
+/* Holder */
+
+.e-6f75e2cf > .holder
+{
+	display: flex;
+	flex-direction: column;
+	width: 100%;
+	gap: var(--ot-spacing-m);
+	border-radius: var(--ot-radius-l);
+	border: 1px solid transparent;
+	padding: var(--ot-spacing-l);
+}
+
+.e-6f75e2cf > .holder.inline
+{
+	padding: 0;
+	background: transparent !important;
+	border-color: transparent !important;
+	gap: var(--ot-spacing-s);
+}
+
+.e-6f75e2cf > .holder.clean
+{
+	background: transparent !important;
+	border-color: transparent !important;
+	padding: 0;
+}
+
+/* ===== HEAD ===== */
+
+.e-6f75e2cf > .holder > .head
+{
+	display: flex;
+	flex-direction: column;
+	gap: 2px;
+}
+
+.e-6f75e2cf > .holder > .head > .title
+{
+	font-family: var(--ot-font-primary);
+	font-size: var(--ot-size-m);
+	font-weight: 600;
+	color: var(--ot-text-1);
+}
+
+.e-6f75e2cf > .holder > .head > .description
+{
+	font-family: var(--ot-font-primary);
+	font-size: var(--ot-size-s);
+	color: var(--ot-text-3);
+}
+
+/* ===== CANVAS ===== */
+
+.e-6f75e2cf > .holder > .canvas
+{
+	position: relative;
+	width: 100%;
+}
+
+/* ===== GRID ===== */
+
+.e-6f75e2cf > .holder > .canvas > .grid
+{
+	position: absolute;
+	inset: 0;
+	pointer-events: none;
+}
+
+.e-6f75e2cf > .holder > .canvas > .grid > .grid-line
+{
+	position: absolute;
+	left: 32px;
+	right: 0;
+	height: 1px;
+	background: var(--ot-bg-2-border);
+}
+
+.e-6f75e2cf > .holder > .canvas > .grid.horizontal > .grid-line
+{
+	left: 0;
+	right: 0;
+	top: 0;
+	bottom: 24px;
+	width: 1px;
+	height: auto;
+}
+
+.e-6f75e2cf > .holder > .canvas > .grid > .grid-line > .grid-value
+{
+	position: absolute;
+	top: 50%;
+	left: -32px;
+	transform: translateY(-50%);
+	width: 28px;
+	text-align: right;
+	font-family: var(--ot-font-primary);
+	font-size: 10px;
+	font-weight: 600;
+	color: var(--ot-text-3);
+}
+
+.e-6f75e2cf > .holder > .canvas > .grid.horizontal > .grid-line > .grid-value
+{
+	top: auto;
+	bottom: -18px;
+	left: 50%;
+	transform: translateX(-50%);
+	width: auto;
+	text-align: center;
+}
+
+/* ===== BARS ===== */
+
+.e-6f75e2cf > .holder > .canvas > .bars
+{
+	position: relative;
+	display: flex;
+	height: 100%;
+	gap: var(--ot-spacing-s);
+	padding-left: 36px;
+}
+
+.e-6f75e2cf > .holder.horizontal > .canvas > .bars
+{
+	flex-direction: column;
+	padding-left: 0;
+	padding-bottom: 24px;
+}
+
+.e-6f75e2cf > .holder > .canvas > .bars > .bar-wrap
+{
+	position: relative;
+	display: flex;
+	flex-direction: column;
+	justify-content: flex-end;
+	align-items: center;
+	flex: 1;
+	min-width: 0;
+	cursor: pointer;
+}
+
+.e-6f75e2cf > .holder.horizontal > .canvas > .bars > .bar-wrap
+{
+	flex-direction: row;
+	justify-content: flex-start;
+	align-items: center;
+}
+
+.e-6f75e2cf > .holder > .canvas > .bars > .bar-wrap > .bar-value
+{
+	font-family: var(--ot-font-primary);
+	font-size: 11px;
+	font-weight: 700;
+	color: var(--ot-text-1);
+	margin-bottom: 4px;
+	line-height: 1;
+}
+
+.e-6f75e2cf > .holder.horizontal > .canvas > .bars > .bar-wrap > .bar-value
+{
+	margin-bottom: 0;
+	margin-left: var(--ot-spacing-s);
+	order: 2;
+}
+
+.e-6f75e2cf > .holder > .canvas > .bars > .bar-wrap > .bar
+{
+	width: 100%;
+	background: var(--ot-brand);
+	border-radius: var(--ot-radius-s) var(--ot-radius-s) 0 0;
+	min-height: 2px;
+	transition: opacity 0.2s cubic-bezier(0.22, 1, 0.36, 1), filter 0.2s cubic-bezier(0.22, 1, 0.36, 1);
+	opacity: 0.8;
+	animation: e-6f75e2cf-rise 0.6s cubic-bezier(0.22, 1, 0.36, 1) forwards;
+	transform-origin: bottom;
+}
+
+.e-6f75e2cf > .holder.horizontal > .canvas > .bars > .bar-wrap > .bar
+{
+	height: 16px;
+	width: 0;
+	border-radius: 0 var(--ot-radius-s) var(--ot-radius-s) 0;
+	animation: e-6f75e2cf-grow 0.6s cubic-bezier(0.22, 1, 0.36, 1) forwards;
+	transform-origin: left;
+}
+
+@keyframes e-6f75e2cf-rise
+{
+	from { transform: scaleY(0); }
+	to { transform: scaleY(1); }
+}
+
+@keyframes e-6f75e2cf-grow
+{
+	from { transform: scaleX(0); }
+	to { transform: scaleX(1); }
+}
+
+.e-6f75e2cf > .holder > .canvas > .bars > .bar-wrap:hover > .bar,
+.e-6f75e2cf > .holder > .canvas > .bars > .bar-wrap.active > .bar
+{
+	opacity: 1;
+	filter: brightness(1.05);
+}
+
+.e-6f75e2cf > .holder > .canvas > .bars > .bar-wrap > .bar-label
+{
+	font-family: var(--ot-font-primary);
+	font-size: 11px;
+	font-weight: 500;
+	color: var(--ot-text-3);
+	margin-top: 6px;
+	white-space: nowrap;
+	overflow: hidden;
+	text-overflow: ellipsis;
+	max-width: 100%;
+	text-align: center;
+}
+
+.e-6f75e2cf > .holder.horizontal > .canvas > .bars > .bar-wrap > .bar-label
+{
+	margin-top: 0;
+	margin-right: var(--ot-spacing-s);
+	order: 0;
+	width: 80px;
+	text-align: right;
+}
+
+/* ===== BAR COLORS ===== */
+
+.e-6f75e2cf .bar-wrap.color-brand > .bar { background: var(--ot-brand); }
+.e-6f75e2cf .bar-wrap.color-blue > .bar { background: var(--ot-blue); }
+.e-6f75e2cf .bar-wrap.color-red > .bar { background: var(--ot-red); }
+.e-6f75e2cf .bar-wrap.color-orange > .bar { background: var(--ot-orange); }
+.e-6f75e2cf .bar-wrap.color-green > .bar { background: var(--ot-green); }
+
+/* ===== BACKGROUND VARIANTS ===== */
+
+.e-6f75e2cf > .holder.bg-1 { background: var(--ot-bg-1); }
+.e-6f75e2cf > .holder.bg-2 { background: var(--ot-bg-2); }
+.e-6f75e2cf > .holder.bg-3 { background: var(--ot-bg-3); }
+.e-6f75e2cf > .holder.bg-4 { background: var(--ot-bg-4); }
+
+.e-6f75e2cf > .holder.border { border-color: var(--ot-bg-2-border); }
+.e-6f75e2cf > .holder.bg-1.border { border-color: var(--ot-bg-1-border); }
+.e-6f75e2cf > .holder.bg-2.border { border-color: var(--ot-bg-2-border); }
+.e-6f75e2cf > .holder.bg-3.border { border-color: var(--ot-bg-3-border); }
+.e-6f75e2cf > .holder.bg-4.border { border-color: var(--ot-bg-4-border); }
+
+/* ===== SIZE ===== */
+
+.e-6f75e2cf > .holder.size-s { padding: var(--ot-spacing-m); gap: var(--ot-spacing-s); }
+.e-6f75e2cf > .holder.size-m { padding: var(--ot-spacing-l); }
+.e-6f75e2cf > .holder.size-l { padding: var(--ot-spacing-l); gap: var(--ot-spacing-l); }

package/addons/render/elements/front/items/self/charts/bar/bar.js

@@ -0,0 +1,156 @@
+onetype.AddonReady('elements', (elements) =>
+{
+	elements.ItemAdd({
+		id: 'charts-bar',
+		icon: 'bar_chart',
+		name: 'Bar Chart',
+		description: 'Premium bar chart with labels, values, grid, tooltip on hover, active bar highlight, and inline variant.',
+		category: 'Charts',
+		author: 'OneType',
+		config: {
+			items: {
+				type: 'array',
+				value: [],
+				each: {
+					type: 'object',
+					config: {
+						value: { type: 'number', value: 0 },
+						label: { type: 'string' },
+						color: { type: 'string' },
+						active: { type: 'boolean' }
+					}
+				}
+			},
+			title: {
+				type: 'string'
+			},
+			description: {
+				type: 'string'
+			},
+			orientation: {
+				type: 'string',
+				value: 'vertical',
+				options: ['vertical', 'horizontal']
+			},
+			color: {
+				type: 'string',
+				value: 'brand',
+				options: ['brand', 'blue', 'red', 'orange', 'green']
+			},
+			height: {
+				type: 'number',
+				value: 220
+			},
+			showLabels: {
+				type: 'boolean',
+				value: true
+			},
+			showValues: {
+				type: 'boolean'
+			},
+			showGrid: {
+				type: 'boolean',
+				value: true
+			},
+			format: {
+				type: 'function'
+			},
+			variant: {
+				type: 'array',
+				value: ['bg-1', 'border', 'size-m'],
+				options: ['bg-1', 'bg-2', 'bg-3', 'bg-4', 'border', 'clean', 'inline', 'size-s', 'size-m', 'size-l']
+			}
+		},
+		render: function()
+		{
+			this.hasHead = !!this.title || !!this.description;
+			this.isInline = this.variant.includes('inline');
+
+			this.formatValue = (value) =>
+			{
+				if(this.format)
+				{
+					return this.format(value);
+				}
+
+				if(typeof value !== 'number')
+				{
+					return String(value || '');
+				}
+
+				if(Math.abs(value) >= 1000000)
+				{
+					return (value / 1000000).toFixed(1) + 'M';
+				}
+
+				if(Math.abs(value) >= 1000)
+				{
+					return (value / 1000).toFixed(1) + 'k';
+				}
+
+				return String(Math.round(value));
+			};
+
+			const values = this.items.map(item => item.value || 0);
+			const max = Math.max(...values, 0) || 1;
+			const min = Math.min(0, ...values);
+
+			this.gridLines = [0, 0.25, 0.5, 0.75, 1].map(fraction => ({
+				percent: fraction * 100,
+				value: this.formatValue(max * fraction)
+			}));
+
+			this.bars = this.items.map((item, index) =>
+			{
+				const value = item.value || 0;
+				const normalized = max === 0 ? 0 : Math.max(0, value / max);
+				const percent = normalized * 100;
+
+				return {
+					index,
+					value,
+					label: item.label || '',
+					color: item.color || this.color,
+					active: !!item.active,
+					percent,
+					display: this.formatValue(value)
+				};
+			});
+
+			return /* html */ `
+				<div :class="'holder ' + variant.join(' ') + ' ' + orientation + ' color-' + color">
+					<header ot-if="hasHead" class="head">
+						<div ot-if="title" class="title">{{ title }}</div>
+						<div ot-if="description" class="description">{{ description }}</div>
+					</header>
+
+					<div class="canvas" :style="'height: ' + height + 'px'">
+						<div ot-if="showGrid && orientation === 'vertical'" class="grid">
+							<div ot-for="line in gridLines" class="grid-line" :style="'bottom: ' + line.percent + '%'">
+								<span class="grid-value">{{ line.value }}</span>
+							</div>
+						</div>
+
+						<div ot-if="showGrid && orientation === 'horizontal'" class="grid horizontal">
+							<div ot-for="line in gridLines" class="grid-line" :style="'left: ' + line.percent + '%'">
+								<span class="grid-value">{{ line.value }}</span>
+							</div>
+						</div>
+
+						<div class="bars">
+							<div
+								ot-for="bar in bars"
+								:class="'bar-wrap color-' + bar.color + (bar.active ? ' active' : '')"
+								:ot-tooltip="{ text: bar.label + ': ' + bar.display, position: { x: 'center', y: 'top' } }"
+							>
+								<div ot-if="showValues" class="bar-value">{{ bar.display }}</div>
+								<div class="bar" :style="(orientation === 'vertical' ? 'height: ' : 'width: ') + bar.percent + '%'"></div>
+								<div ot-if="showLabels" class="bar-label">{{ bar.label }}</div>
+							</div>
+						</div>
+					</div>
+				</div>
+			`;
+		}
+	});
+});