@onetype/framework 2.0.39 → 2.0.40

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
Files changed (21) hide show
  1. package/lib/load.js +0 -1
  2. package/package.json +1 -1
  3. package/lib/items/transforms/accordion/accordion.js +0 -172
  4. package/lib/items/transforms/chart/area.js +0 -153
  5. package/lib/items/transforms/chart/bar.js +0 -137
  6. package/lib/items/transforms/chart/bubble.js +0 -166
  7. package/lib/items/transforms/chart/doughnut.js +0 -124
  8. package/lib/items/transforms/chart/line.js +0 -149
  9. package/lib/items/transforms/chart/pie.js +0 -122
  10. package/lib/items/transforms/chart/radar.js +0 -154
  11. package/lib/items/transforms/chart/scatter.js +0 -149
  12. package/lib/items/transforms/codeflask/codeflask.js +0 -97
  13. package/lib/items/transforms/codemirror/codemirror.js +0 -228
  14. package/lib/items/transforms/comparison/comparison.js +0 -139
  15. package/lib/items/transforms/heatmap/heatmap.js +0 -493
  16. package/lib/items/transforms/interact/interact.js +0 -276
  17. package/lib/items/transforms/particles/particles.js +0 -328
  18. package/lib/items/transforms/sparkline/sparkline.js +0 -239
  19. package/lib/items/transforms/swiper/swiper.js +0 -140
  20. package/lib/items/transforms/tabs/tabs.js +0 -459
  21. package/lib/items/transforms/typed/typed.js +0 -172
package/lib/items/transforms/chart/doughnut.js DELETED
@@ -1,124 +0,0 @@
1
- transforms.ItemAdd({
2
- id: 'ot-chart-doughnut',
3
- icon: 'donut_large',
4
- name: 'Doughnut Chart',
5
- description: 'Ring-shaped doughnut chart. Similar to pie chart with a hollow center.',
6
- js: [
7
- 'https://cdn.jsdelivr.net/npm/chart.js@4.4.0/dist/chart.umd.min.js'
8
- ],
9
- config: {
10
- 'labels': ['array', ['Category A', 'Category B', 'Category C', 'Category D']],
11
- 'values': ['array', [30, 25, 20, 25]],
12
- 'cutout': ['string', '50%'],
13
- 'options': ['object', {}]
14
- },
15
- code: function(data, node, transformer)
16
- {
17
- this.setup = () =>
18
- {
19
- node.innerHTML = '';
20
- node.classList.add('ot-chart-doughnut');
21
-
22
- const canvas = document.createElement('canvas');
23
- this.canvas = canvas;
24
- node.appendChild(canvas);
25
- };
26
-
27
- this.colors = () =>
28
- {
29
- const style = getComputedStyle(document.body);
30
-
31
- return [
32
- style.getPropertyValue('--ot-brand').trim(),
33
- style.getPropertyValue('--ot-blue').trim(),
34
- style.getPropertyValue('--ot-green').trim(),
35
- style.getPropertyValue('--ot-orange').trim(),
36
- style.getPropertyValue('--ot-red').trim()
37
- ];
38
- };
39
-
40
- this.dataset = () =>
41
- {
42
- const values = data['values'];
43
- const palette = this.colors();
44
-
45
- const extendedPalette = [];
46
- for(let i = 0; i < values.length; i++)
47
- {
48
- extendedPalette.push(palette[i % palette.length]);
49
- }
50
-
51
- return {
52
- data: values,
53
- backgroundColor: extendedPalette,
54
- borderColor: '#ffffff',
55
- borderWidth: 2
56
- };
57
- };
58
-
59
- this.config = () =>
60
- {
61
- const style = getComputedStyle(document.body);
62
- const textColor = style.getPropertyValue('--ot-text-1').trim();
63
-
64
- return {
65
- type: 'doughnut',
66
- data: {
67
- labels: data['labels'],
68
- datasets: [this.dataset()]
69
- },
70
- options: {
71
- responsive: true,
72
- maintainAspectRatio: false,
73
- cutout: data['cutout'],
74
- plugins: {
75
- legend: {
76
- position: 'bottom',
77
- labels: {
78
- color: textColor,
79
- padding: 20,
80
- font: {
81
- family: style.getPropertyValue('--ot-font-primary').trim(),
82
- size: 13
83
- }
84
- }
85
- },
86
- tooltip: {
87
- callbacks: {
88
- label: function(context)
89
- {
90
- const label = context.label || '';
91
- const value = context.parsed;
92
- const total = context.dataset.data.reduce((a, b) => a + b, 0);
93
- const percentage = ((value / total) * 100).toFixed(1);
94
- return label + ': ' + percentage + '%';
95
- }
96
- }
97
- }
98
- },
99
- ...data['options']
100
- }
101
- };
102
- };
103
-
104
- this.initialize = () =>
105
- {
106
- setTimeout(() =>
107
- {
108
- if(typeof Chart === 'undefined')
109
- {
110
- console.error('Chart.js library not loaded');
111
- return;
112
- }
113
-
114
- const context = this.canvas.getContext('2d');
115
- this.instance = new Chart(context, this.config());
116
-
117
- node.chart = this.instance;
118
- }, 100);
119
- };
120
-
121
- this.setup();
122
- this.initialize();
123
- }
124
- });
package/lib/items/transforms/chart/line.js DELETED
@@ -1,149 +0,0 @@
1
- transforms.ItemAdd({
2
- id: 'ot-chart-line',
3
- icon: 'show_chart',
4
- name: 'Line Chart',
5
- description: 'Line chart for trends over time. Connect data points to show patterns and changes.',
6
- js: [
7
- 'https://cdn.jsdelivr.net/npm/chart.js@4.4.0/dist/chart.umd.min.js'
8
- ],
9
- config: {
10
- 'labels': ['array', ['Jan', 'Feb', 'Mar', 'Apr', 'May', 'Jun']],
11
- 'datasets': ['array', []],
12
- 'smooth': ['boolean', true],
13
- 'fill': ['boolean', false],
14
- 'options': ['object', {}]
15
- },
16
- code: function(data, node, transformer)
17
- {
18
- this.setup = () =>
19
- {
20
- node.innerHTML = '';
21
- node.classList.add('ot-chart-line');
22
-
23
- const canvas = document.createElement('canvas');
24
- this.canvas = canvas;
25
- node.appendChild(canvas);
26
- };
27
-
28
- this.colors = () =>
29
- {
30
- const style = getComputedStyle(document.body);
31
-
32
- return {
33
- brand: style.getPropertyValue('--ot-brand').trim(),
34
- blue: style.getPropertyValue('--ot-blue').trim(),
35
- green: style.getPropertyValue('--ot-green').trim(),
36
- orange: style.getPropertyValue('--ot-orange').trim(),
37
- red: style.getPropertyValue('--ot-red').trim(),
38
- brandOpacity: style.getPropertyValue('--ot-brand-opacity').trim(),
39
- blueOpacity: style.getPropertyValue('--ot-blue-opacity').trim(),
40
- greenOpacity: style.getPropertyValue('--ot-green-opacity').trim(),
41
- orangeOpacity: style.getPropertyValue('--ot-orange-opacity').trim(),
42
- redOpacity: style.getPropertyValue('--ot-red-opacity').trim()
43
- };
44
- };
45
-
46
- this.datasets = () =>
47
- {
48
- const datasets = data['datasets'];
49
- const colors = this.colors();
50
- const palette = [colors.brand, colors.blue, colors.green, colors.orange, colors.red];
51
- const paletteOpacity = [colors.brandOpacity, colors.blueOpacity, colors.greenOpacity, colors.orangeOpacity, colors.redOpacity];
52
- const smooth = data['smooth'];
53
- const fill = data['fill'];
54
-
55
- if(datasets.length === 0)
56
- {
57
- return [{
58
- label: 'Sample Data',
59
- data: [30, 45, 28, 56, 42, 65],
60
- backgroundColor: fill ? paletteOpacity[0] : 'transparent',
61
- borderColor: palette[0],
62
- borderWidth: 2,
63
- tension: smooth ? 0.4 : 0,
64
- fill: fill
65
- }];
66
- }
67
-
68
- return datasets.map((dataset, index) =>
69
- {
70
- const color = palette[index % palette.length];
71
- const colorOpacity = paletteOpacity[index % paletteOpacity.length];
72
-
73
- return {
74
- ...dataset,
75
- backgroundColor: dataset.backgroundColor || (fill ? colorOpacity : 'transparent'),
76
- borderColor: dataset.borderColor || color,
77
- borderWidth: dataset.borderWidth || 2,
78
- tension: dataset.tension !== undefined ? dataset.tension : (smooth ? 0.4 : 0),
79
- fill: dataset.fill !== undefined ? dataset.fill : fill
80
- };
81
- });
82
- };
83
-
84
- this.config = () =>
85
- {
86
- const style = getComputedStyle(document.body);
87
- const textColor = style.getPropertyValue('--ot-text-1').trim();
88
- const gridColor = style.getPropertyValue('--ot-bg-3-border').trim();
89
-
90
- return {
91
- type: 'line',
92
- data: {
93
- labels: data['labels'],
94
- datasets: this.datasets()
95
- },
96
- options: {
97
- responsive: true,
98
- maintainAspectRatio: false,
99
- interaction: {
100
- intersect: false,
101
- mode: 'index'
102
- },
103
- plugins: {
104
- legend: {
105
- labels: {
106
- color: textColor,
107
- font: {
108
- family: style.getPropertyValue('--ot-font-primary').trim()
109
- }
110
- }
111
- }
112
- },
113
- scales: {
114
- x: {
115
- ticks: { color: textColor },
116
- grid: { color: gridColor }
117
- },
118
- y: {
119
- ticks: { color: textColor },
120
- grid: { color: gridColor },
121
- beginAtZero: true
122
- }
123
- },
124
- ...data['options']
125
- }
126
- };
127
- };
128
-
129
- this.initialize = () =>
130
- {
131
- setTimeout(() =>
132
- {
133
- if(typeof Chart === 'undefined')
134
- {
135
- console.error('Chart.js library not loaded');
136
- return;
137
- }
138
-
139
- const context = this.canvas.getContext('2d');
140
- this.instance = new Chart(context, this.config());
141
-
142
- node.chart = this.instance;
143
- }, 100);
144
- };
145
-
146
- this.setup();
147
- this.initialize();
148
- }
149
- });
package/lib/items/transforms/chart/pie.js DELETED
@@ -1,122 +0,0 @@
1
- transforms.ItemAdd({
2
- id: 'ot-chart-pie',
3
- icon: 'pie_chart',
4
- name: 'Pie Chart',
5
- description: 'Circular pie chart visualization. Show proportions and percentages in a circle.',
6
- js: [
7
- 'https://cdn.jsdelivr.net/npm/chart.js@4.4.0/dist/chart.umd.min.js'
8
- ],
9
- config: {
10
- 'labels': ['array', ['Category A', 'Category B', 'Category C', 'Category D']],
11
- 'values': ['array', [30, 25, 20, 25]],
12
- 'options': ['object', {}]
13
- },
14
- code: function(data, node, transformer)
15
- {
16
- this.setup = () =>
17
- {
18
- node.innerHTML = '';
19
- node.classList.add('ot-chart-pie');
20
-
21
- const canvas = document.createElement('canvas');
22
- this.canvas = canvas;
23
- node.appendChild(canvas);
24
- };
25
-
26
- this.colors = () =>
27
- {
28
- const style = getComputedStyle(document.body);
29
-
30
- return [
31
- style.getPropertyValue('--ot-brand').trim(),
32
- style.getPropertyValue('--ot-blue').trim(),
33
- style.getPropertyValue('--ot-green').trim(),
34
- style.getPropertyValue('--ot-orange').trim(),
35
- style.getPropertyValue('--ot-red').trim()
36
- ];
37
- };
38
-
39
- this.dataset = () =>
40
- {
41
- const values = data['values'];
42
- const palette = this.colors();
43
-
44
- const extendedPalette = [];
45
- for(let i = 0; i < values.length; i++)
46
- {
47
- extendedPalette.push(palette[i % palette.length]);
48
- }
49
-
50
- return {
51
- data: values,
52
- backgroundColor: extendedPalette,
53
- borderColor: '#ffffff',
54
- borderWidth: 2
55
- };
56
- };
57
-
58
- this.config = () =>
59
- {
60
- const style = getComputedStyle(document.body);
61
- const textColor = style.getPropertyValue('--ot-text-1').trim();
62
-
63
- return {
64
- type: 'pie',
65
- data: {
66
- labels: data['labels'],
67
- datasets: [this.dataset()]
68
- },
69
- options: {
70
- responsive: true,
71
- maintainAspectRatio: false,
72
- plugins: {
73
- legend: {
74
- position: 'bottom',
75
- labels: {
76
- color: textColor,
77
- padding: 20,
78
- font: {
79
- family: style.getPropertyValue('--ot-font-primary').trim(),
80
- size: 13
81
- }
82
- }
83
- },
84
- tooltip: {
85
- callbacks: {
86
- label: function(context)
87
- {
88
- const label = context.label || '';
89
- const value = context.parsed;
90
- const total = context.dataset.data.reduce((a, b) => a + b, 0);
91
- const percentage = ((value / total) * 100).toFixed(1);
92
- return label + ': ' + percentage + '%';
93
- }
94
- }
95
- }
96
- },
97
- ...data['options']
98
- }
99
- };
100
- };
101
-
102
- this.initialize = () =>
103
- {
104
- setTimeout(() =>
105
- {
106
- if(typeof Chart === 'undefined')
107
- {
108
- console.error('Chart.js library not loaded');
109
- return;
110
- }
111
-
112
- const context = this.canvas.getContext('2d');
113
- this.instance = new Chart(context, this.config());
114
-
115
- node.chart = this.instance;
116
- }, 100);
117
- };
118
-
119
- this.setup();
120
- this.initialize();
121
- }
122
- });
package/lib/items/transforms/chart/radar.js DELETED
@@ -1,154 +0,0 @@
1
- transforms.ItemAdd({
2
- id: 'ot-chart-radar',
3
- icon: 'radar',
4
- name: 'Radar Chart',
5
- description: 'Spider/radar chart visualization. Display multivariate data in a radial layout.',
6
- js: [
7
- 'https://cdn.jsdelivr.net/npm/chart.js@4.4.0/dist/chart.umd.min.js'
8
- ],
9
- config: {
10
- 'labels': ['array', ['Speed', 'Strength', 'Defense', 'Attack', 'Agility']],
11
- 'datasets': ['array', []],
12
- 'fill': ['boolean', true],
13
- 'options': ['object', {}]
14
- },
15
- code: function(data, node, transformer)
16
- {
17
- this.setup = () =>
18
- {
19
- node.innerHTML = '';
20
- node.classList.add('ot-chart-radar');
21
-
22
- const canvas = document.createElement('canvas');
23
- this.canvas = canvas;
24
- node.appendChild(canvas);
25
- };
26
-
27
- this.colors = () =>
28
- {
29
- const style = getComputedStyle(document.body);
30
-
31
- return {
32
- brand: style.getPropertyValue('--ot-brand').trim(),
33
- blue: style.getPropertyValue('--ot-blue').trim(),
34
- green: style.getPropertyValue('--ot-green').trim(),
35
- orange: style.getPropertyValue('--ot-orange').trim(),
36
- red: style.getPropertyValue('--ot-red').trim(),
37
- brandOpacity: style.getPropertyValue('--ot-brand-opacity').trim(),
38
- blueOpacity: style.getPropertyValue('--ot-blue-opacity').trim(),
39
- greenOpacity: style.getPropertyValue('--ot-green-opacity').trim(),
40
- orangeOpacity: style.getPropertyValue('--ot-orange-opacity').trim(),
41
- redOpacity: style.getPropertyValue('--ot-red-opacity').trim()
42
- };
43
- };
44
-
45
- this.datasets = () =>
46
- {
47
- const datasets = data['datasets'];
48
- const colors = this.colors();
49
- const palette = [colors.brand, colors.blue, colors.green, colors.orange, colors.red];
50
- const paletteOpacity = [colors.brandOpacity, colors.blueOpacity, colors.greenOpacity, colors.orangeOpacity, colors.redOpacity];
51
- const fill = data['fill'];
52
-
53
- if(datasets.length === 0)
54
- {
55
- return [{
56
- label: 'Sample Data',
57
- data: [75, 60, 85, 70, 80],
58
- backgroundColor: fill ? paletteOpacity[0] : 'transparent',
59
- borderColor: palette[0],
60
- borderWidth: 2,
61
- pointBackgroundColor: palette[0],
62
- pointBorderColor: '#fff',
63
- pointHoverBackgroundColor: '#fff',
64
- pointHoverBorderColor: palette[0]
65
- }];
66
- }
67
-
68
- return datasets.map((dataset, index) =>
69
- {
70
- const color = palette[index % palette.length];
71
- const colorOpacity = paletteOpacity[index % paletteOpacity.length];
72
-
73
- return {
74
- ...dataset,
75
- backgroundColor: dataset.backgroundColor || (fill ? colorOpacity : 'transparent'),
76
- borderColor: dataset.borderColor || color,
77
- borderWidth: dataset.borderWidth || 2,
78
- pointBackgroundColor: dataset.pointBackgroundColor || color,
79
- pointBorderColor: dataset.pointBorderColor || '#fff',
80
- pointHoverBackgroundColor: dataset.pointHoverBackgroundColor || '#fff',
81
- pointHoverBorderColor: dataset.pointHoverBorderColor || color
82
- };
83
- });
84
- };
85
-
86
- this.config = () =>
87
- {
88
- const style = getComputedStyle(document.body);
89
- const textColor = style.getPropertyValue('--ot-text-1').trim();
90
- const gridColor = style.getPropertyValue('--ot-bg-3-border').trim();
91
-
92
- return {
93
- type: 'radar',
94
- data: {
95
- labels: data['labels'],
96
- datasets: this.datasets()
97
- },
98
- options: {
99
- responsive: true,
100
- maintainAspectRatio: false,
101
- plugins: {
102
- legend: {
103
- labels: {
104
- color: textColor,
105
- font: {
106
- family: style.getPropertyValue('--ot-font-primary').trim()
107
- }
108
- }
109
- }
110
- },
111
- scales: {
112
- r: {
113
- angleLines: {
114
- color: gridColor
115
- },
116
- grid: {
117
- color: gridColor
118
- },
119
- pointLabels: {
120
- color: textColor
121
- },
122
- ticks: {
123
- color: textColor,
124
- backdropColor: 'transparent'
125
- },
126
- beginAtZero: true
127
- }
128
- },
129
- ...data['options']
130
- }
131
- };
132
- };
133
-
134
- this.initialize = () =>
135
- {
136
- setTimeout(() =>
137
- {
138
- if(typeof Chart === 'undefined')
139
- {
140
- console.error('Chart.js library not loaded');
141
- return;
142
- }
143
-
144
- const context = this.canvas.getContext('2d');
145
- this.instance = new Chart(context, this.config());
146
-
147
- node.chart = this.instance;
148
- }, 100);
149
- };
150
-
151
- this.setup();
152
- this.initialize();
153
- }
154
- });
package/lib/items/transforms/chart/scatter.js DELETED
@@ -1,149 +0,0 @@
1
- transforms.ItemAdd({
2
- id: 'ot-chart-scatter',
3
- icon: 'scatter_plot',
4
- name: 'Scatter Plot',
5
- description: 'Scatter plot for correlation data. Show relationship between two variables with points.',
6
- js: [
7
- 'https://cdn.jsdelivr.net/npm/chart.js@4.4.0/dist/chart.umd.min.js'
8
- ],
9
- config: {
10
- 'datasets': ['array', []],
11
- 'options': ['object', {}]
12
- },
13
- code: function(data, node, transformer)
14
- {
15
- this.setup = () =>
16
- {
17
- node.innerHTML = '';
18
- node.classList.add('ot-chart-scatter');
19
-
20
- const canvas = document.createElement('canvas');
21
- this.canvas = canvas;
22
- node.appendChild(canvas);
23
- };
24
-
25
- this.colors = () =>
26
- {
27
- const style = getComputedStyle(document.body);
28
-
29
- return {
30
- brand: style.getPropertyValue('--ot-brand').trim(),
31
- blue: style.getPropertyValue('--ot-blue').trim(),
32
- green: style.getPropertyValue('--ot-green').trim(),
33
- orange: style.getPropertyValue('--ot-orange').trim(),
34
- red: style.getPropertyValue('--ot-red').trim()
35
- };
36
- };
37
-
38
- this.datasets = () =>
39
- {
40
- const datasets = data['datasets'];
41
- const colors = this.colors();
42
- const palette = [colors.brand, colors.blue, colors.green, colors.orange, colors.red];
43
-
44
- if(datasets.length === 0)
45
- {
46
- return [{
47
- label: 'Sample Data',
48
- data: [
49
- {x: 10, y: 20},
50
- {x: 15, y: 35},
51
- {x: 20, y: 30},
52
- {x: 25, y: 45},
53
- {x: 30, y: 40},
54
- {x: 35, y: 55}
55
- ],
56
- backgroundColor: palette[0],
57
- borderColor: palette[0],
58
- borderWidth: 1,
59
- pointRadius: 5
60
- }];
61
- }
62
-
63
- return datasets.map((dataset, index) =>
64
- {
65
- const color = palette[index % palette.length];
66
-
67
- return {
68
- ...dataset,
69
- backgroundColor: dataset.backgroundColor || color,
70
- borderColor: dataset.borderColor || color,
71
- borderWidth: dataset.borderWidth || 1,
72
- pointRadius: dataset.pointRadius || 5
73
- };
74
- });
75
- };
76
-
77
- this.config = () =>
78
- {
79
- const style = getComputedStyle(document.body);
80
- const textColor = style.getPropertyValue('--ot-text-1').trim();
81
- const gridColor = style.getPropertyValue('--ot-bg-3-border').trim();
82
-
83
- return {
84
- type: 'scatter',
85
- data: {
86
- datasets: this.datasets()
87
- },
88
- options: {
89
- responsive: true,
90
- maintainAspectRatio: false,
91
- plugins: {
92
- legend: {
93
- labels: {
94
- color: textColor,
95
- font: {
96
- family: style.getPropertyValue('--ot-font-primary').trim()
97
- }
98
- }
99
- }
100
- },
101
- scales: {
102
- x: {
103
- type: 'linear',
104
- position: 'bottom',
105
- ticks: { color: textColor },
106
- grid: { color: gridColor },
107
- title: {
108
- display: true,
109
- text: 'X Axis',
110
- color: textColor
111
- }
112
- },
113
- y: {
114
- type: 'linear',
115
- ticks: { color: textColor },
116
- grid: { color: gridColor },
117
- title: {
118
- display: true,
119
- text: 'Y Axis',
120
- color: textColor
121
- }
122
- }
123
- },
124
- ...data['options']
125
- }
126
- };
127
- };
128
-
129
- this.initialize = () =>
130
- {
131
- setTimeout(() =>
132
- {
133
- if(typeof Chart === 'undefined')
134
- {
135
- console.error('Chart.js library not loaded');
136
- return;
137
- }
138
-
139
- const context = this.canvas.getContext('2d');
140
- this.instance = new Chart(context, this.config());
141
-
142
- node.chart = this.instance;
143
- }, 100);
144
- };
145
-
146
- this.setup();
147
- this.initialize();
148
- }
149
- });