@onetype/framework 2.0.52 → 2.0.54

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

@@ -0,0 +1,249 @@
+onetype.AddonReady('elements', (elements) =>
+{
+	elements.ItemAdd({
+		id: 'charts-line',
+		icon: 'show_chart',
+		name: 'Line Chart',
+		description: 'Premium line chart with multi-series, smooth/step, area fill, dots, grid and legend.',
+		category: 'Charts',
+		author: 'OneType',
+		config: {
+			series: {
+				type: 'array',
+				value: [],
+				each: {
+					type: 'object',
+					config: {
+						label: { type: 'string' },
+						color: { type: 'string', value: 'brand' },
+						values: { type: 'array', each: { type: 'number' } }
+					}
+				}
+			},
+			labels: {
+				type: 'array',
+				value: [],
+				each: { type: 'string' }
+			},
+			title: {
+				type: 'string'
+			},
+			description: {
+				type: 'string'
+			},
+			smooth: {
+				type: 'boolean',
+				value: true
+			},
+			fill: {
+				type: 'boolean',
+				value: true
+			},
+			showDots: {
+				type: 'boolean',
+				value: true
+			},
+			showGrid: {
+				type: 'boolean',
+				value: true
+			},
+			showLegend: {
+				type: 'boolean',
+				value: true
+			},
+			showLabels: {
+				type: 'boolean',
+				value: true
+			},
+			height: {
+				type: 'number',
+				value: 240
+			},
+			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.hasLegend = this.showLegend && this.series.length > 0;
+
+			this.formatValue = (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));
+			};
+
+			this.width = 640;
+			this.padding = { top: 12, right: 12, bottom: this.showLabels ? 28 : 12, left: 40 };
+
+			const allValues = this.series.flatMap(s => s.values || []);
+			const max = allValues.length ? Math.max(...allValues) : 1;
+			const min = Math.min(0, ...allValues);
+			const range = max - min || 1;
+			const niceMax = max > 0 ? max * 1.1 : 1;
+
+			const pointCount = this.labels.length || Math.max(...this.series.map(s => (s.values || []).length), 0);
+			const chartWidth = this.width - this.padding.left - this.padding.right;
+			const chartHeight = this.height - this.padding.top - this.padding.bottom;
+
+			const stepX = pointCount > 1 ? chartWidth / (pointCount - 1) : 0;
+
+			// Build series paths
+
+			this.computedSeries = this.series.map(series =>
+			{
+				const values = series.values || [];
+				const points = values.map((value, index) =>
+				{
+					const x = this.padding.left + index * stepX;
+					const y = this.padding.top + chartHeight * (1 - (value - min) / (niceMax - min || 1));
+					return { x, y, value, index };
+				});
+
+				let linePath = '';
+
+				if(points.length)
+				{
+					if(this.smooth)
+					{
+						linePath = `M ${points[0].x} ${points[0].y}`;
+
+						for(let i = 0; i < points.length - 1; i++)
+						{
+							const current = points[i];
+							const next = points[i + 1];
+							const controlX = (current.x + next.x) / 2;
+							linePath += ` C ${controlX} ${current.y}, ${controlX} ${next.y}, ${next.x} ${next.y}`;
+						}
+					}
+					else
+					{
+						linePath = 'M ' + points.map(p => `${p.x} ${p.y}`).join(' L ');
+					}
+				}
+
+				const areaPath = linePath && points.length > 1
+					? linePath + ` L ${points[points.length - 1].x} ${this.padding.top + chartHeight} L ${points[0].x} ${this.padding.top + chartHeight} Z`
+					: '';
+
+				return {
+					label: series.label || '',
+					color: series.color || 'brand',
+					linePath,
+					areaPath,
+					points
+				};
+			});
+
+			// Grid lines
+
+			this.gridLines = [0, 0.25, 0.5, 0.75, 1].map(fraction =>
+			{
+				const y = this.padding.top + chartHeight * (1 - fraction);
+				const value = min + (niceMax - min) * fraction;
+
+				return {
+					y,
+					x1: this.padding.left,
+					x2: this.width - this.padding.right,
+					label: this.formatValue(value)
+				};
+			});
+
+			// X-axis labels
+
+			this.xLabels = (this.labels || []).map((label, index) => ({
+				x: this.padding.left + index * stepX,
+				y: this.height - 4,
+				label
+			}));
+
+			// Build SVG string — SVG namespace cannot be templated through ot-for
+
+			const uid = onetype.GenerateUID();
+
+			const defs = this.computedSeries.map(series => `
+				<linearGradient id="line-fill-${uid}-${series.color}" x1="0" x2="0" y1="0" y2="1">
+					<stop offset="0%" class="area-start color-${series.color}" />
+					<stop offset="100%" class="area-end color-${series.color}" />
+				</linearGradient>
+			`).join('');
+
+			const gridEl = this.showGrid
+				? `<g class="grid">
+					${this.gridLines.map(line => `<line x1="${line.x1}" x2="${line.x2}" y1="${line.y}" y2="${line.y}" class="grid-line"></line>`).join('')}
+					${this.gridLines.map(line => `<text x="${this.padding.left - 6}" y="${line.y + 3}" class="grid-label" text-anchor="end">${line.label}</text>`).join('')}
+				</g>`
+				: '';
+
+			const seriesEl = this.computedSeries.map(series =>
+			{
+				const area = (this.fill && series.areaPath) ? `<path class="area" d="${series.areaPath}" fill="url(#line-fill-${uid}-${series.color})" />` : '';
+				const line = series.linePath ? `<path class="line" d="${series.linePath}" />` : '';
+				const dots = this.showDots ? series.points.map(point => `<circle class="dot" cx="${point.x}" cy="${point.y}" r="3.5"></circle>`).join('') : '';
+
+				return `<g class="series color-${series.color}">${area}${line}${dots}</g>`;
+			}).join('');
+
+			const labelsEl = this.showLabels
+				? `<g class="labels">${this.xLabels.map(label => `<text x="${label.x}" y="${label.y}" class="x-label" text-anchor="middle">${label.label}</text>`).join('')}</g>`
+				: '';
+
+			const svgString = `
+				<svg viewBox="0 0 ${this.width} ${this.height}" preserveAspectRatio="xMidYMid meet">
+					<defs>${defs}</defs>
+					${gridEl}
+					${seriesEl}
+					${labelsEl}
+				</svg>
+			`;
+
+			this.OnReady(() =>
+			{
+				const canvas = this.Element.querySelector('.canvas');
+
+				if(canvas)
+				{
+					const existing = canvas.querySelector('svg');
+					if(existing) existing.remove();
+					canvas.insertAdjacentHTML('afterbegin', svgString);
+				}
+			});
+
+			return /* html */ `
+				<div :class="'holder ' + variant.join(' ')">
+					<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"></div>
+
+					<footer ot-if="hasLegend" class="legend">
+						<div ot-for="series in computedSeries" :class="'legend-item color-' + series.color">
+							<span class="dot-marker"></span>
+							<span>{{ series.label }}</span>
+						</div>
+					</footer>
+				</div>
+			`;
+		}
+	});
+});

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

@@ -0,0 +1,102 @@
+/* Root */
+
+.e-161c4111
+{
+	display: flex;
+	width: 100%;
+}
+
+/* Holder */
+
+.e-161c4111 > .holder
+{
+	display: block;
+	width: 100%;
+	height: 100%;
+}
+
+.e-161c4111 > .holder > svg
+{
+	display: block;
+	width: 100%;
+	height: 100%;
+	overflow: visible;
+}
+
+/* Line */
+
+.e-161c4111 > .holder > svg > .line
+{
+	fill: none;
+	stroke-width: 1.5;
+	stroke-linecap: round;
+	stroke-linejoin: round;
+	vector-effect: non-scaling-stroke;
+	animation: e-161c4111-draw 0.6s cubic-bezier(0.22, 1, 0.36, 1) forwards;
+}
+
+@keyframes e-161c4111-draw
+{
+	from { opacity: 0; }
+	to { opacity: 1; }
+}
+
+/* Area fill */
+
+.e-161c4111 > .holder > svg > .area
+{
+	opacity: 0.35;
+	animation: e-161c4111-fade 0.6s cubic-bezier(0.22, 1, 0.36, 1) forwards;
+}
+
+@keyframes e-161c4111-fade
+{
+	from { opacity: 0; }
+	to { opacity: 0.35; }
+}
+
+/* Bars */
+
+.e-161c4111 > .holder > svg > .bar
+{
+	animation: e-161c4111-rise 0.4s cubic-bezier(0.22, 1, 0.36, 1) forwards;
+	transform-origin: bottom;
+}
+
+@keyframes e-161c4111-rise
+{
+	from { opacity: 0; transform: scaleY(0); }
+	to { opacity: 1; transform: scaleY(1); }
+}
+
+/* ===== COLORS ===== */
+
+.e-161c4111 > .holder.color-brand > svg > .line { stroke: var(--ot-brand); }
+.e-161c4111 > .holder.color-brand > svg > .area { fill: var(--ot-brand); }
+.e-161c4111 > .holder.color-brand > svg > .bar { fill: var(--ot-brand); }
+.e-161c4111 > .holder.color-brand > svg > defs .area-start { stop-color: var(--ot-brand); stop-opacity: 0.6; }
+.e-161c4111 > .holder.color-brand > svg > defs .area-end { stop-color: var(--ot-brand); stop-opacity: 0; }
+
+.e-161c4111 > .holder.color-blue > svg > .line { stroke: var(--ot-blue); }
+.e-161c4111 > .holder.color-blue > svg > .area { fill: var(--ot-blue); }
+.e-161c4111 > .holder.color-blue > svg > .bar { fill: var(--ot-blue); }
+.e-161c4111 > .holder.color-blue > svg > defs .area-start { stop-color: var(--ot-blue); stop-opacity: 0.6; }
+.e-161c4111 > .holder.color-blue > svg > defs .area-end { stop-color: var(--ot-blue); stop-opacity: 0; }
+
+.e-161c4111 > .holder.color-red > svg > .line { stroke: var(--ot-red); }
+.e-161c4111 > .holder.color-red > svg > .area { fill: var(--ot-red); }
+.e-161c4111 > .holder.color-red > svg > .bar { fill: var(--ot-red); }
+.e-161c4111 > .holder.color-red > svg > defs .area-start { stop-color: var(--ot-red); stop-opacity: 0.6; }
+.e-161c4111 > .holder.color-red > svg > defs .area-end { stop-color: var(--ot-red); stop-opacity: 0; }
+
+.e-161c4111 > .holder.color-orange > svg > .line { stroke: var(--ot-orange); }
+.e-161c4111 > .holder.color-orange > svg > .area { fill: var(--ot-orange); }
+.e-161c4111 > .holder.color-orange > svg > .bar { fill: var(--ot-orange); }
+.e-161c4111 > .holder.color-orange > svg > defs .area-start { stop-color: var(--ot-orange); stop-opacity: 0.6; }
+.e-161c4111 > .holder.color-orange > svg > defs .area-end { stop-color: var(--ot-orange); stop-opacity: 0; }
+
+.e-161c4111 > .holder.color-green > svg > .line { stroke: var(--ot-green); }
+.e-161c4111 > .holder.color-green > svg > .area { fill: var(--ot-green); }
+.e-161c4111 > .holder.color-green > svg > .bar { fill: var(--ot-green); }
+.e-161c4111 > .holder.color-green > svg > defs .area-start { stop-color: var(--ot-green); stop-opacity: 0.6; }
+.e-161c4111 > .holder.color-green > svg > defs .area-end { stop-color: var(--ot-green); stop-opacity: 0; }

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

@@ -0,0 +1,164 @@
+onetype.AddonReady('elements', (elements) =>
+{
+	elements.ItemAdd({
+		id: 'charts-sparkline',
+		icon: 'show_chart',
+		name: 'Sparkline',
+		description: 'Minimal inline chart — line, area or bar — for stat cards and tables. No axes, no grid.',
+		category: 'Charts',
+		author: 'OneType',
+		config: {
+			values: {
+				type: 'array',
+				value: [],
+				each: { type: 'number' }
+			},
+			type: {
+				type: 'string',
+				value: 'area',
+				options: ['line', 'area', 'bar']
+			},
+			color: {
+				type: 'string',
+				value: 'brand',
+				options: ['brand', 'blue', 'red', 'orange', 'green']
+			},
+			height: {
+				type: 'number',
+				value: 40
+			},
+			smooth: {
+				type: 'boolean',
+				value: true
+			},
+			variant: {
+				type: 'array',
+				value: [],
+				options: []
+			}
+		},
+		render: function()
+		{
+			this.width = 120;
+			this.padding = 2;
+
+			const values = this.values.length ? this.values : [0];
+			const min = Math.min(...values);
+			const max = Math.max(...values);
+			const range = max - min || 1;
+
+			const count = values.length;
+			const stepX = count > 1 ? (this.width - this.padding * 2) / (count - 1) : 0;
+
+			const points = values.map((value, index) =>
+			{
+				const x = this.padding + index * stepX;
+				const y = this.padding + (this.height - this.padding * 2) * (1 - (value - min) / range);
+				return { x, y, value };
+			});
+
+			// Smooth bezier path
+
+			const smoothPath = (pts) =>
+			{
+				if(pts.length < 2)
+				{
+					return '';
+				}
+
+				let d = `M ${pts[0].x} ${pts[0].y}`;
+
+				for(let i = 0; i < pts.length - 1; i++)
+				{
+					const current = pts[i];
+					const next = pts[i + 1];
+					const controlX = (current.x + next.x) / 2;
+					d += ` C ${controlX} ${current.y}, ${controlX} ${next.y}, ${next.x} ${next.y}`;
+				}
+
+				return d;
+			};
+
+			const linePath = (pts) =>
+			{
+				if(!pts.length)
+				{
+					return '';
+				}
+
+				return 'M ' + pts.map(pt => `${pt.x} ${pt.y}`).join(' L ');
+			};
+
+			this.linePath = this.smooth ? smoothPath(points) : linePath(points);
+			this.areaPath = this.linePath ? this.linePath + ` L ${points[points.length - 1].x} ${this.height - this.padding} L ${points[0].x} ${this.height - this.padding} Z` : '';
+
+			// Bar mode
+
+			this.bars = [];
+
+			if(this.type === 'bar' && count)
+			{
+				const gap = 1;
+				const barWidth = Math.max(1, (this.width - this.padding * 2 - gap * (count - 1)) / count);
+
+				this.bars = values.map((value, index) =>
+				{
+					const normalized = (value - min) / range;
+					const h = Math.max(1, normalized * (this.height - this.padding * 2));
+					const x = this.padding + index * (barWidth + gap);
+					const y = this.height - this.padding - h;
+					return { x, y, width: barWidth, height: h };
+				});
+			}
+
+			const isLine = this.type === 'line';
+			const isArea = this.type === 'area';
+			const isBar = this.type === 'bar';
+			const gradientId = 'sparkline-fill-' + onetype.GenerateUID();
+
+			const defs = isArea
+				? `<defs>
+						<linearGradient id="${gradientId}" x1="0" x2="0" y1="0" y2="1">
+							<stop offset="0%" class="area-start" />
+							<stop offset="100%" class="area-end" />
+						</linearGradient>
+					</defs>`
+				: '';
+
+			const areaEl = (isArea && this.areaPath)
+				? `<path class="area" d="${this.areaPath}" fill="url(#${gradientId})" />`
+				: '';
+
+			const lineEl = ((isLine || isArea) && this.linePath)
+				? `<path class="line" d="${this.linePath}" />`
+				: '';
+
+			const barsEl = this.bars.map(bar => `<rect class="bar" x="${bar.x}" y="${bar.y}" width="${bar.width}" height="${bar.height}" rx="0.5"></rect>`).join('');
+
+			const svgString = `
+				<svg viewBox="0 0 ${this.width} ${this.height}" preserveAspectRatio="none">
+					${defs}
+					${areaEl}
+					${lineEl}
+					${barsEl}
+				</svg>
+			`;
+
+			this.OnReady(() =>
+			{
+				const wrap = this.Element.querySelector('.holder');
+
+				if(wrap)
+				{
+					const existing = wrap.querySelector('svg');
+					if(existing) existing.remove();
+					wrap.insertAdjacentHTML('afterbegin', svgString);
+				}
+			});
+
+			return /* html */ `
+				<div :class="'holder color-' + color"></div>
+			`;
+		}
+	});
+});