@onetype/framework 2.0.53 → 2.0.54

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

@@ -0,0 +1,222 @@
+/* Root */
+
+.e-6965df40
+{
+	display: flex;
+	width: 100%;
+}
+
+/* Holder */
+
+.e-6965df40 > .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-6965df40 > .holder.inline
+{
+	padding: 0;
+	background: transparent !important;
+	border-color: transparent !important;
+	gap: var(--ot-spacing-s);
+}
+
+.e-6965df40 > .holder.clean
+{
+	background: transparent !important;
+	border-color: transparent !important;
+	padding: 0;
+}
+
+/* ===== HEAD ===== */
+
+.e-6965df40 > .holder > .head
+{
+	display: flex;
+	flex-direction: column;
+	gap: 2px;
+}
+
+.e-6965df40 > .holder > .head > .title
+{
+	font-family: var(--ot-font-primary);
+	font-size: var(--ot-size-m);
+	font-weight: 600;
+	color: var(--ot-text-1);
+}
+
+.e-6965df40 > .holder > .head > .description
+{
+	font-family: var(--ot-font-primary);
+	font-size: var(--ot-size-s);
+	color: var(--ot-text-3);
+}
+
+/* ===== CANVAS ===== */
+
+.e-6965df40 > .holder > .canvas
+{
+	display: flex;
+	align-items: center;
+	gap: var(--ot-spacing-l);
+	flex-wrap: wrap;
+}
+
+.e-6965df40 > .holder > .canvas > .chart-wrap
+{
+	position: relative;
+	flex-shrink: 0;
+}
+
+.e-6965df40 > .holder > .canvas > .chart-wrap > svg
+{
+	display: block;
+	width: 100%;
+	height: 100%;
+	overflow: visible;
+}
+
+/* Track */
+
+.e-6965df40 svg .track
+{
+	stroke: var(--ot-bg-2);
+}
+
+/* Segments */
+
+.e-6965df40 svg .segment
+{
+	transition: stroke-width 0.2s cubic-bezier(0.22, 1, 0.36, 1), filter 0.2s cubic-bezier(0.22, 1, 0.36, 1);
+	cursor: pointer;
+	animation: e-6965df40-draw 0.8s cubic-bezier(0.22, 1, 0.36, 1);
+}
+
+.e-6965df40 svg .segment:hover
+{
+	filter: brightness(1.08);
+}
+
+@keyframes e-6965df40-draw
+{
+	from { opacity: 0; }
+	to { opacity: 1; }
+}
+
+/* Segment colors */
+
+.e-6965df40 svg .segment.color-brand { stroke: var(--ot-brand); }
+.e-6965df40 svg .segment.color-blue { stroke: var(--ot-blue); }
+.e-6965df40 svg .segment.color-red { stroke: var(--ot-red); }
+.e-6965df40 svg .segment.color-orange { stroke: var(--ot-orange); }
+.e-6965df40 svg .segment.color-green { stroke: var(--ot-green); }
+
+/* Center */
+
+.e-6965df40 > .holder > .canvas > .chart-wrap > .center
+{
+	position: absolute;
+	inset: 0;
+	display: flex;
+	flex-direction: column;
+	align-items: center;
+	justify-content: center;
+	gap: 2px;
+	pointer-events: none;
+}
+
+.e-6965df40 > .holder > .canvas > .chart-wrap > .center > .center-value
+{
+	font-family: var(--ot-font-secondary);
+	font-size: 28px;
+	font-weight: 600;
+	color: var(--ot-text-1);
+	line-height: 1;
+	font-variation-settings: 'opsz' 144;
+}
+
+.e-6965df40 > .holder > .canvas > .chart-wrap > .center > .center-label
+{
+	font-family: var(--ot-font-primary);
+	font-size: 11px;
+	font-weight: 600;
+	color: var(--ot-text-3);
+	text-transform: uppercase;
+	letter-spacing: 0.06em;
+}
+
+/* ===== LEGEND ===== */
+
+.e-6965df40 > .holder > .canvas > .legend
+{
+	display: flex;
+	flex-direction: column;
+	flex: 1;
+	min-width: 0;
+	gap: var(--ot-spacing-s);
+}
+
+.e-6965df40 > .holder > .canvas > .legend > .legend-item
+{
+	display: flex;
+	align-items: center;
+	gap: var(--ot-spacing-s);
+	font-family: var(--ot-font-primary);
+	font-size: var(--ot-size-s);
+	color: var(--ot-text-2);
+}
+
+.e-6965df40 > .holder > .canvas > .legend > .legend-item > .dot-marker
+{
+	width: 10px;
+	height: 10px;
+	border-radius: 50%;
+	flex-shrink: 0;
+}
+
+.e-6965df40 > .holder > .canvas > .legend > .legend-item > .legend-label
+{
+	flex: 1;
+	min-width: 0;
+	white-space: nowrap;
+	overflow: hidden;
+	text-overflow: ellipsis;
+}
+
+.e-6965df40 > .holder > .canvas > .legend > .legend-item > .legend-percent
+{
+	font-weight: 700;
+	color: var(--ot-text-1);
+	flex-shrink: 0;
+}
+
+.e-6965df40 .legend-item.color-brand > .dot-marker { background: var(--ot-brand); }
+.e-6965df40 .legend-item.color-blue > .dot-marker { background: var(--ot-blue); }
+.e-6965df40 .legend-item.color-red > .dot-marker { background: var(--ot-red); }
+.e-6965df40 .legend-item.color-orange > .dot-marker { background: var(--ot-orange); }
+.e-6965df40 .legend-item.color-green > .dot-marker { background: var(--ot-green); }
+
+/* ===== BACKGROUND VARIANTS ===== */
+
+.e-6965df40 > .holder.bg-1 { background: var(--ot-bg-1); }
+.e-6965df40 > .holder.bg-2 { background: var(--ot-bg-2); }
+.e-6965df40 > .holder.bg-3 { background: var(--ot-bg-3); }
+.e-6965df40 > .holder.bg-4 { background: var(--ot-bg-4); }
+
+.e-6965df40 > .holder.border { border-color: var(--ot-bg-2-border); }
+.e-6965df40 > .holder.bg-1.border { border-color: var(--ot-bg-1-border); }
+.e-6965df40 > .holder.bg-2.border { border-color: var(--ot-bg-2-border); }
+.e-6965df40 > .holder.bg-3.border { border-color: var(--ot-bg-3-border); }
+.e-6965df40 > .holder.bg-4.border { border-color: var(--ot-bg-4-border); }
+
+/* ===== SIZE ===== */
+
+.e-6965df40 > .holder.size-s { padding: var(--ot-spacing-m); gap: var(--ot-spacing-s); }
+.e-6965df40 > .holder.size-m { padding: var(--ot-spacing-l); }
+.e-6965df40 > .holder.size-l { padding: var(--ot-spacing-l); gap: var(--ot-spacing-l); }

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

@@ -0,0 +1,164 @@
+onetype.AddonReady('elements', (elements) =>
+{
+	elements.ItemAdd({
+		id: 'charts-donut',
+		icon: 'donut_large',
+		name: 'Donut Chart',
+		description: 'Premium donut/pie chart with segments, center label, legend and hover tooltips.',
+		category: 'Charts',
+		author: 'OneType',
+		config: {
+			items: {
+				type: 'array',
+				value: [],
+				each: {
+					type: 'object',
+					config: {
+						value: { type: 'number', value: 0 },
+						label: { type: 'string' },
+						color: { type: 'string' }
+					}
+				}
+			},
+			title: {
+				type: 'string'
+			},
+			description: {
+				type: 'string'
+			},
+			center: {
+				type: 'object',
+				value: null,
+				config: {
+					label: { type: 'string' },
+					value: { type: 'string|number' }
+				}
+			},
+			thickness: {
+				type: 'number',
+				value: 18
+			},
+			size: {
+				type: 'number',
+				value: 180
+			},
+			showLegend: {
+				type: 'boolean',
+				value: true
+			},
+			showPercents: {
+				type: 'boolean',
+				value: true
+			},
+			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.hasCenter = !!this.center && (!!this.center.label || this.center.value !== undefined);
+
+			const colors = ['brand', 'blue', 'green', 'orange', 'red'];
+			const radius = 100 - this.thickness / 2 - 2;
+			const circumference = 2 * Math.PI * radius;
+			const total = this.items.reduce((sum, item) => sum + (item.value || 0), 0) || 1;
+
+			let offset = 0;
+
+			this.segments = this.items.map((item, index) =>
+			{
+				const value = item.value || 0;
+				const percent = (value / total) * 100;
+				const dash = (value / total) * circumference;
+				const gap = circumference - dash;
+				const color = item.color || colors[index % colors.length];
+
+				const segment = {
+					index,
+					value,
+					label: item.label || '',
+					color,
+					percent: Math.round(percent * 10) / 10,
+					dash,
+					gap,
+					offset: -offset,
+					display: item.label + ': ' + value + ' (' + Math.round(percent) + '%)'
+				};
+
+				offset += dash;
+
+				return segment;
+			});
+
+			// Pre-render SVG string — inject via innerHTML in OnReady to keep SVG namespace
+
+			const svgString = `
+				<svg viewBox="0 0 200 200">
+					<circle
+						class="track"
+						cx="100"
+						cy="100"
+						r="${radius}"
+						fill="none"
+						stroke-width="${this.thickness}"
+					></circle>
+					${this.segments.map(segment => `
+						<circle
+							class="segment color-${segment.color}"
+							cx="100"
+							cy="100"
+							r="${radius}"
+							fill="none"
+							stroke-width="${this.thickness}"
+							stroke-dasharray="${segment.dash} ${segment.gap}"
+							stroke-dashoffset="${segment.offset}"
+							stroke-linecap="butt"
+							transform="rotate(-90 100 100)"
+						></circle>
+					`).join('')}
+				</svg>
+			`;
+
+			this.OnReady(() =>
+			{
+				const wrap = this.Element.querySelector('.chart-wrap');
+
+				if(wrap)
+				{
+					const existing = wrap.querySelector('svg');
+					if(existing) existing.remove();
+					wrap.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 class="chart-wrap" :style="'width: ' + size + 'px; height: ' + size + 'px'">
+							<div ot-if="hasCenter" class="center">
+								<div ot-if="center.value !== undefined" class="center-value">{{ center.value }}</div>
+								<div ot-if="center.label" class="center-label">{{ center.label }}</div>
+							</div>
+						</div>
+
+						<div ot-if="showLegend" class="legend">
+							<div ot-for="segment in segments" :class="'legend-item color-' + segment.color">
+								<span class="dot-marker"></span>
+								<span class="legend-label">{{ segment.label }}</span>
+								<span ot-if="showPercents" class="legend-percent">{{ segment.percent }}%</span>
+							</div>
+						</div>
+					</div>
+				</div>
+			`;
+		}
+	});
+});

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

@@ -0,0 +1,229 @@
+/* Root */
+
+.e-7f41cd6a
+{
+	display: flex;
+	width: 100%;
+}
+
+/* Holder */
+
+.e-7f41cd6a > .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-7f41cd6a > .holder.inline
+{
+	padding: 0;
+	background: transparent !important;
+	border-color: transparent !important;
+	gap: var(--ot-spacing-s);
+}
+
+.e-7f41cd6a > .holder.clean
+{
+	background: transparent !important;
+	border-color: transparent !important;
+	padding: 0;
+}
+
+/* ===== HEAD ===== */
+
+.e-7f41cd6a > .holder > .head
+{
+	display: flex;
+	flex-direction: column;
+	gap: 2px;
+}
+
+.e-7f41cd6a > .holder > .head > .title
+{
+	font-family: var(--ot-font-primary);
+	font-size: var(--ot-size-m);
+	font-weight: 600;
+	color: var(--ot-text-1);
+}
+
+.e-7f41cd6a > .holder > .head > .description
+{
+	font-family: var(--ot-font-primary);
+	font-size: var(--ot-size-s);
+	color: var(--ot-text-3);
+}
+
+/* ===== CANVAS ===== */
+
+.e-7f41cd6a > .holder > .canvas
+{
+	width: 100%;
+	position: relative;
+}
+
+.e-7f41cd6a > .holder > .canvas > svg
+{
+	display: block;
+	width: 100%;
+	height: auto;
+	overflow: visible;
+}
+
+/* Grid */
+
+.e-7f41cd6a > .holder > .canvas > svg > .grid > .grid-line
+{
+	stroke: var(--ot-bg-2-border);
+	stroke-width: 1;
+	vector-effect: non-scaling-stroke;
+}
+
+.e-7f41cd6a > .holder > .canvas > svg > .grid > .grid-label
+{
+	font-family: var(--ot-font-primary);
+	font-size: 10px;
+	font-weight: 600;
+	fill: var(--ot-text-3);
+}
+
+/* X labels */
+
+.e-7f41cd6a > .holder > .canvas > svg > .labels > .x-label
+{
+	font-family: var(--ot-font-primary);
+	font-size: 10px;
+	font-weight: 500;
+	fill: var(--ot-text-3);
+}
+
+/* Line */
+
+.e-7f41cd6a > .holder > .canvas > svg > .series > .line
+{
+	fill: none;
+	stroke-width: 2;
+	stroke-linecap: round;
+	stroke-linejoin: round;
+	vector-effect: non-scaling-stroke;
+	animation: e-7f41cd6a-draw 0.6s cubic-bezier(0.22, 1, 0.36, 1);
+}
+
+.e-7f41cd6a > .holder > .canvas > svg > .series > .area
+{
+	opacity: 0.3;
+	animation: e-7f41cd6a-fade 0.6s cubic-bezier(0.22, 1, 0.36, 1);
+}
+
+.e-7f41cd6a > .holder > .canvas > svg > .series > .dot
+{
+	stroke: var(--ot-bg-1);
+	stroke-width: 2;
+	cursor: pointer;
+	transition: r 0.2s cubic-bezier(0.22, 1, 0.36, 1);
+}
+
+.e-7f41cd6a > .holder > .canvas > svg > .series > .dot:hover
+{
+	r: 5;
+}
+
+@keyframes e-7f41cd6a-draw
+{
+	from { opacity: 0; }
+	to { opacity: 1; }
+}
+
+@keyframes e-7f41cd6a-fade
+{
+	from { opacity: 0; }
+	to { opacity: 0.3; }
+}
+
+/* ===== SERIES COLORS ===== */
+
+.e-7f41cd6a .series.color-brand > .line { stroke: var(--ot-brand); }
+.e-7f41cd6a .series.color-brand > .dot { fill: var(--ot-brand); }
+.e-7f41cd6a .series.color-brand > .area { fill: var(--ot-brand); }
+.area-start.color-brand { stop-color: var(--ot-brand); stop-opacity: 0.5; }
+.area-end.color-brand { stop-color: var(--ot-brand); stop-opacity: 0; }
+
+.e-7f41cd6a .series.color-blue > .line { stroke: var(--ot-blue); }
+.e-7f41cd6a .series.color-blue > .dot { fill: var(--ot-blue); }
+.e-7f41cd6a .series.color-blue > .area { fill: var(--ot-blue); }
+.area-start.color-blue { stop-color: var(--ot-blue); stop-opacity: 0.5; }
+.area-end.color-blue { stop-color: var(--ot-blue); stop-opacity: 0; }
+
+.e-7f41cd6a .series.color-red > .line { stroke: var(--ot-red); }
+.e-7f41cd6a .series.color-red > .dot { fill: var(--ot-red); }
+.e-7f41cd6a .series.color-red > .area { fill: var(--ot-red); }
+.area-start.color-red { stop-color: var(--ot-red); stop-opacity: 0.5; }
+.area-end.color-red { stop-color: var(--ot-red); stop-opacity: 0; }
+
+.e-7f41cd6a .series.color-orange > .line { stroke: var(--ot-orange); }
+.e-7f41cd6a .series.color-orange > .dot { fill: var(--ot-orange); }
+.e-7f41cd6a .series.color-orange > .area { fill: var(--ot-orange); }
+.area-start.color-orange { stop-color: var(--ot-orange); stop-opacity: 0.5; }
+.area-end.color-orange { stop-color: var(--ot-orange); stop-opacity: 0; }
+
+.e-7f41cd6a .series.color-green > .line { stroke: var(--ot-green); }
+.e-7f41cd6a .series.color-green > .dot { fill: var(--ot-green); }
+.e-7f41cd6a .series.color-green > .area { fill: var(--ot-green); }
+.area-start.color-green { stop-color: var(--ot-green); stop-opacity: 0.5; }
+.area-end.color-green { stop-color: var(--ot-green); stop-opacity: 0; }
+
+/* ===== LEGEND ===== */
+
+.e-7f41cd6a > .holder > .legend
+{
+	display: flex;
+	align-items: center;
+	flex-wrap: wrap;
+	gap: var(--ot-spacing-m);
+}
+
+.e-7f41cd6a > .holder > .legend > .legend-item
+{
+	display: inline-flex;
+	align-items: center;
+	gap: 6px;
+	font-family: var(--ot-font-primary);
+	font-size: var(--ot-size-s);
+	color: var(--ot-text-2);
+}
+
+.e-7f41cd6a > .holder > .legend > .legend-item > .dot-marker
+{
+	width: 10px;
+	height: 10px;
+	border-radius: 50%;
+}
+
+.e-7f41cd6a > .holder > .legend > .legend-item.color-brand > .dot-marker { background: var(--ot-brand); }
+.e-7f41cd6a > .holder > .legend > .legend-item.color-blue > .dot-marker { background: var(--ot-blue); }
+.e-7f41cd6a > .holder > .legend > .legend-item.color-red > .dot-marker { background: var(--ot-red); }
+.e-7f41cd6a > .holder > .legend > .legend-item.color-orange > .dot-marker { background: var(--ot-orange); }
+.e-7f41cd6a > .holder > .legend > .legend-item.color-green > .dot-marker { background: var(--ot-green); }
+
+/* ===== BACKGROUND VARIANTS ===== */
+
+.e-7f41cd6a > .holder.bg-1 { background: var(--ot-bg-1); }
+.e-7f41cd6a > .holder.bg-2 { background: var(--ot-bg-2); }
+.e-7f41cd6a > .holder.bg-3 { background: var(--ot-bg-3); }
+.e-7f41cd6a > .holder.bg-4 { background: var(--ot-bg-4); }
+
+.e-7f41cd6a > .holder.border { border-color: var(--ot-bg-2-border); }
+.e-7f41cd6a > .holder.bg-1.border { border-color: var(--ot-bg-1-border); }
+.e-7f41cd6a > .holder.bg-2.border { border-color: var(--ot-bg-2-border); }
+.e-7f41cd6a > .holder.bg-3.border { border-color: var(--ot-bg-3-border); }
+.e-7f41cd6a > .holder.bg-4.border { border-color: var(--ot-bg-4-border); }
+
+/* ===== SIZE ===== */
+
+.e-7f41cd6a > .holder.size-s { padding: var(--ot-spacing-m); gap: var(--ot-spacing-s); }
+.e-7f41cd6a > .holder.size-m { padding: var(--ot-spacing-l); }
+.e-7f41cd6a > .holder.size-l { padding: var(--ot-spacing-l); gap: var(--ot-spacing-l); }