divhunt 2.0.0

package/addons/render/transforms/front/js/items/self/chart/pie.js

@@ -0,0 +1,125 @@
+divhunt.AddonReady('transforms', (transforms) =>
+{
+    transforms.ItemAdd({
+        id: 'dh-chart-pie',
+        icon: 'pie_chart',
+        name: 'Pie Chart',
+        description: 'Circular pie chart visualization. Show proportions and percentages in a circle.',
+        js: [
+            'https://cdn.jsdelivr.net/npm/chart.js@4.4.0/dist/chart.umd.min.js'
+        ],
+        config: {
+            'labels': ['array', ['Category A', 'Category B', 'Category C', 'Category D']],
+            'values': ['array', [30, 25, 20, 25]],
+            'options': ['object', {}]
+        },
+        code: function(data, item, compile, node, identifier)
+        {
+            this.setup = () =>
+            {
+                node.innerHTML = '';
+                node.classList.add('dh-chart-pie');
+
+                const canvas = document.createElement('canvas');
+                this.canvas = canvas;
+                node.appendChild(canvas);
+            };
+
+            this.colors = () =>
+            {
+                const style = getComputedStyle(document.body);
+
+                return [
+                    style.getPropertyValue('--dh-brand').trim(),
+                    style.getPropertyValue('--dh-blue').trim(),
+                    style.getPropertyValue('--dh-green').trim(),
+                    style.getPropertyValue('--dh-orange').trim(),
+                    style.getPropertyValue('--dh-red').trim()
+                ];
+            };
+
+            this.dataset = () =>
+            {
+                const values = data['values'].value;
+                const palette = this.colors();
+
+                const extendedPalette = [];
+                for(let i = 0; i < values.length; i++)
+                {
+                    extendedPalette.push(palette[i % palette.length]);
+                }
+
+                return {
+                    data: values,
+                    backgroundColor: extendedPalette,
+                    borderColor: '#ffffff',
+                    borderWidth: 2
+                };
+            };
+
+            this.config = () =>
+            {
+                const style = getComputedStyle(document.body);
+                const textColor = style.getPropertyValue('--dh-text-1').trim();
+
+                return {
+                    type: 'pie',
+                    data: {
+                        labels: data['labels'].value,
+                        datasets: [this.dataset()]
+                    },
+                    options: {
+                        responsive: true,
+                        maintainAspectRatio: false,
+                        plugins: {
+                            legend: {
+                                position: 'bottom',
+                                labels: {
+                                    color: textColor,
+                                    padding: 20,
+                                    font: {
+                                        family: style.getPropertyValue('--dh-font-primary').trim(),
+                                        size: 13
+                                    }
+                                }
+                            },
+                            tooltip: {
+                                callbacks: {
+                                    label: function(context)
+                                    {
+                                        const label = context.label || '';
+                                        const value = context.parsed;
+                                        const total = context.dataset.data.reduce((a, b) => a + b, 0);
+                                        const percentage = ((value / total) * 100).toFixed(1);
+                                        return label + ': ' + percentage + '%';
+                                    }
+                                }
+                            }
+                        },
+                        ...data['options'].value
+                    }
+                };
+            };
+
+            this.initialize = () =>
+            {
+                setTimeout(() =>
+                {
+                    if(typeof Chart === 'undefined')
+                    {
+                        console.error('Chart.js library not loaded');
+                        return;
+                    }
+
+                    const context = this.canvas.getContext('2d');
+                    this.instance = new Chart(context, this.config());
+
+                    node.chart = this.instance;
+                }, 100);
+            };
+
+            this.setup();
+            this.initialize();
+        }
+    });
+});

package/addons/render/transforms/front/js/items/self/chart/radar.js

@@ -0,0 +1,157 @@
+divhunt.AddonReady('transforms', (transforms) =>
+{
+    transforms.ItemAdd({
+        id: 'dh-chart-radar',
+        icon: 'radar',
+        name: 'Radar Chart',
+        description: 'Spider/radar chart visualization. Display multivariate data in a radial layout.',
+        js: [
+            'https://cdn.jsdelivr.net/npm/chart.js@4.4.0/dist/chart.umd.min.js'
+        ],
+        config: {
+            'labels': ['array', ['Speed', 'Strength', 'Defense', 'Attack', 'Agility']],
+            'datasets': ['array', []],
+            'fill': ['boolean', true],
+            'options': ['object', {}]
+        },
+        code: function(data, item, compile, node, identifier)
+        {
+            this.setup = () =>
+            {
+                node.innerHTML = '';
+                node.classList.add('dh-chart-radar');
+
+                const canvas = document.createElement('canvas');
+                this.canvas = canvas;
+                node.appendChild(canvas);
+            };
+
+            this.colors = () =>
+            {
+                const style = getComputedStyle(document.body);
+
+                return {
+                    brand: style.getPropertyValue('--dh-brand').trim(),
+                    blue: style.getPropertyValue('--dh-blue').trim(),
+                    green: style.getPropertyValue('--dh-green').trim(),
+                    orange: style.getPropertyValue('--dh-orange').trim(),
+                    red: style.getPropertyValue('--dh-red').trim(),
+                    brandOpacity: style.getPropertyValue('--dh-brand-opacity').trim(),
+                    blueOpacity: style.getPropertyValue('--dh-blue-opacity').trim(),
+                    greenOpacity: style.getPropertyValue('--dh-green-opacity').trim(),
+                    orangeOpacity: style.getPropertyValue('--dh-orange-opacity').trim(),
+                    redOpacity: style.getPropertyValue('--dh-red-opacity').trim()
+                };
+            };
+
+            this.datasets = () =>
+            {
+                const datasets = data['datasets'].value;
+                const colors = this.colors();
+                const palette = [colors.brand, colors.blue, colors.green, colors.orange, colors.red];
+                const paletteOpacity = [colors.brandOpacity, colors.blueOpacity, colors.greenOpacity, colors.orangeOpacity, colors.redOpacity];
+                const fill = data['fill'].value;
+
+                if(datasets.length === 0)
+                {
+                    return [{
+                        label: 'Sample Data',
+                        data: [75, 60, 85, 70, 80],
+                        backgroundColor: fill ? paletteOpacity[0] : 'transparent',
+                        borderColor: palette[0],
+                        borderWidth: 2,
+                        pointBackgroundColor: palette[0],
+                        pointBorderColor: '#fff',
+                        pointHoverBackgroundColor: '#fff',
+                        pointHoverBorderColor: palette[0]
+                    }];
+                }
+
+                return datasets.map((dataset, index) =>
+                {
+                    const color = palette[index % palette.length];
+                    const colorOpacity = paletteOpacity[index % paletteOpacity.length];
+
+                    return {
+                        ...dataset,
+                        backgroundColor: dataset.backgroundColor || (fill ? colorOpacity : 'transparent'),
+                        borderColor: dataset.borderColor || color,
+                        borderWidth: dataset.borderWidth || 2,
+                        pointBackgroundColor: dataset.pointBackgroundColor || color,
+                        pointBorderColor: dataset.pointBorderColor || '#fff',
+                        pointHoverBackgroundColor: dataset.pointHoverBackgroundColor || '#fff',
+                        pointHoverBorderColor: dataset.pointHoverBorderColor || color
+                    };
+                });
+            };
+
+            this.config = () =>
+            {
+                const style = getComputedStyle(document.body);
+                const textColor = style.getPropertyValue('--dh-text-1').trim();
+                const gridColor = style.getPropertyValue('--dh-bg-3-border').trim();
+
+                return {
+                    type: 'radar',
+                    data: {
+                        labels: data['labels'].value,
+                        datasets: this.datasets()
+                    },
+                    options: {
+                        responsive: true,
+                        maintainAspectRatio: false,
+                        plugins: {
+                            legend: {
+                                labels: {
+                                    color: textColor,
+                                    font: {
+                                        family: style.getPropertyValue('--dh-font-primary').trim()
+                                    }
+                                }
+                            }
+                        },
+                        scales: {
+                            r: {
+                                angleLines: {
+                                    color: gridColor
+                                },
+                                grid: {
+                                    color: gridColor
+                                },
+                                pointLabels: {
+                                    color: textColor
+                                },
+                                ticks: {
+                                    color: textColor,
+                                    backdropColor: 'transparent'
+                                },
+                                beginAtZero: true
+                            }
+                        },
+                        ...data['options'].value
+                    }
+                };
+            };
+
+            this.initialize = () =>
+            {
+                setTimeout(() =>
+                {
+                    if(typeof Chart === 'undefined')
+                    {
+                        console.error('Chart.js library not loaded');
+                        return;
+                    }
+
+                    const context = this.canvas.getContext('2d');
+                    this.instance = new Chart(context, this.config());
+
+                    node.chart = this.instance;
+                }, 100);
+            };
+
+            this.setup();
+            this.initialize();
+        }
+    });
+});

package/addons/render/transforms/front/js/items/self/chart/scatter.js

@@ -0,0 +1,152 @@
+divhunt.AddonReady('transforms', (transforms) =>
+{
+    transforms.ItemAdd({
+        id: 'dh-chart-scatter',
+        icon: 'scatter_plot',
+        name: 'Scatter Plot',
+        description: 'Scatter plot for correlation data. Show relationship between two variables with points.',
+        js: [
+            'https://cdn.jsdelivr.net/npm/chart.js@4.4.0/dist/chart.umd.min.js'
+        ],
+        config: {
+            'datasets': ['array', []],
+            'options': ['object', {}]
+        },
+        code: function(data, item, compile, node, identifier)
+        {
+            this.setup = () =>
+            {
+                node.innerHTML = '';
+                node.classList.add('dh-chart-scatter');
+
+                const canvas = document.createElement('canvas');
+                this.canvas = canvas;
+                node.appendChild(canvas);
+            };
+
+            this.colors = () =>
+            {
+                const style = getComputedStyle(document.body);
+
+                return {
+                    brand: style.getPropertyValue('--dh-brand').trim(),
+                    blue: style.getPropertyValue('--dh-blue').trim(),
+                    green: style.getPropertyValue('--dh-green').trim(),
+                    orange: style.getPropertyValue('--dh-orange').trim(),
+                    red: style.getPropertyValue('--dh-red').trim()
+                };
+            };
+
+            this.datasets = () =>
+            {
+                const datasets = data['datasets'].value;
+                const colors = this.colors();
+                const palette = [colors.brand, colors.blue, colors.green, colors.orange, colors.red];
+
+                if(datasets.length === 0)
+                {
+                    return [{
+                        label: 'Sample Data',
+                        data: [
+                            {x: 10, y: 20},
+                            {x: 15, y: 35},
+                            {x: 20, y: 30},
+                            {x: 25, y: 45},
+                            {x: 30, y: 40},
+                            {x: 35, y: 55}
+                        ],
+                        backgroundColor: palette[0],
+                        borderColor: palette[0],
+                        borderWidth: 1,
+                        pointRadius: 5
+                    }];
+                }
+
+                return datasets.map((dataset, index) =>
+                {
+                    const color = palette[index % palette.length];
+
+                    return {
+                        ...dataset,
+                        backgroundColor: dataset.backgroundColor || color,
+                        borderColor: dataset.borderColor || color,
+                        borderWidth: dataset.borderWidth || 1,
+                        pointRadius: dataset.pointRadius || 5
+                    };
+                });
+            };
+
+            this.config = () =>
+            {
+                const style = getComputedStyle(document.body);
+                const textColor = style.getPropertyValue('--dh-text-1').trim();
+                const gridColor = style.getPropertyValue('--dh-bg-3-border').trim();
+
+                return {
+                    type: 'scatter',
+                    data: {
+                        datasets: this.datasets()
+                    },
+                    options: {
+                        responsive: true,
+                        maintainAspectRatio: false,
+                        plugins: {
+                            legend: {
+                                labels: {
+                                    color: textColor,
+                                    font: {
+                                        family: style.getPropertyValue('--dh-font-primary').trim()
+                                    }
+                                }
+                            }
+                        },
+                        scales: {
+                            x: {
+                                type: 'linear',
+                                position: 'bottom',
+                                ticks: { color: textColor },
+                                grid: { color: gridColor },
+                                title: {
+                                    display: true,
+                                    text: 'X Axis',
+                                    color: textColor
+                                }
+                            },
+                            y: {
+                                type: 'linear',
+                                ticks: { color: textColor },
+                                grid: { color: gridColor },
+                                title: {
+                                    display: true,
+                                    text: 'Y Axis',
+                                    color: textColor
+                                }
+                            }
+                        },
+                        ...data['options'].value
+                    }
+                };
+            };
+
+            this.initialize = () =>
+            {
+                setTimeout(() =>
+                {
+                    if(typeof Chart === 'undefined')
+                    {
+                        console.error('Chart.js library not loaded');
+                        return;
+                    }
+
+                    const context = this.canvas.getContext('2d');
+                    this.instance = new Chart(context, this.config());
+
+                    node.chart = this.instance;
+                }, 100);
+            };
+
+            this.setup();
+            this.initialize();
+        }
+    });
+});

package/addons/render/transforms/front/js/items/self/codeflask.js

@@ -0,0 +1,99 @@
+divhunt.AddonReady('transforms', (transforms) =>
+{
+	transforms.ItemAdd({
+		id: 'codeflask',
+		icon: 'code',
+		name: 'CodeFlask',
+		description: 'Micro code editor with syntax highlighting. Supports live editing with onUpdate handler.',
+		js: [
+			'https://cdn.jsdelivr.net/npm/codeflask/build/codeflask.min.js'
+		],
+		config: {
+			'value': ['string', ''],
+			'language': ['string', 'markup'],
+			'line-numbers': ['boolean', true],
+			'readonly': ['boolean', false],
+			'onUpdate': ['function']
+		},
+		code: function(data, item, compile, node, identifier)
+		{
+			this.setup = () =>
+			{
+				node.classList.add('codeflask-editor');
+				node.classList.add('codeflask-editor-' + identifier);
+
+				const initialValue = data['value'].value || node.textContent || '';
+				node.innerHTML = '';
+
+				this.container = document.createElement('div');
+				this.container.className = 'codeflask-container';
+				node.appendChild(this.container);
+
+				this.initialValue = initialValue;
+			};
+
+			this.styles = () =>
+			{
+				const style = document.createElement('style');
+				style.textContent = `
+					.codeflask-editor-${identifier}
+					{
+						height: 100%;
+						width: 100%;
+					}
+					.codeflask-editor-${identifier} .codeflask-container
+					{
+						height: 100%;
+						width: 100%;
+					}
+					.codeflask-editor-${identifier} .codeflask
+					{
+						height: 100%;
+					}
+				`;
+				document.head.appendChild(style);
+			};
+
+			this.initialize = () =>
+			{
+				setTimeout(() =>
+				{
+					if(typeof CodeFlask === 'undefined')
+					{
+						console.error('CodeFlask library not loaded');
+						node.innerHTML = '<div style="padding: 20px;">CodeFlask not loaded</div>';
+						return;
+					}
+
+					const flask = new CodeFlask(this.container, {
+						language: data['language'].value || 'markup',
+						lineNumbers: data['line-numbers'].value !== false,
+						readonly: data['readonly'].value === true
+					});
+
+					flask.updateCode(this.initialValue);
+
+					this.flask = flask;
+
+					flask.onUpdate((code) =>
+					{
+						// const onUpdate = data['onUpdate'].value;
+						// if(typeof onUpdate === 'function')
+						// {
+						// 	onUpdate({value: code, node});
+						// }
+					});
+
+					node.getValue = () => flask.getCode();
+					node.setValue = (value) => flask.updateCode(value);
+					node.setLanguage = (language) => flask.updateLanguage(language);
+
+				}, 200);
+			};
+
+			this.setup();
+			this.styles();
+			this.initialize();
+		}
+	});
+});