lightview 1.8.2 → 2.0.1

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 (262) hide show
  1. package/.codacy/cli.sh +149 -0
  2. package/.codacy/codacy.yaml +15 -0
  3. package/.github/instructions/codacy.instructions.md +72 -0
  4. package/.wranglerignore +21 -0
  5. package/README.md +1330 -19
  6. package/_headers +4 -0
  7. package/build.js +70 -0
  8. package/components/actions/button.js +151 -0
  9. package/components/actions/dropdown.js +120 -0
  10. package/components/actions/modal.js +146 -0
  11. package/components/actions/swap.js +118 -0
  12. package/components/daisyui.js +288 -0
  13. package/components/data-display/accordion.js +128 -0
  14. package/components/data-display/alert.js +112 -0
  15. package/components/data-display/avatar.js +170 -0
  16. package/components/data-display/badge.js +82 -0
  17. package/components/data-display/card.js +151 -0
  18. package/components/data-display/carousel.js +94 -0
  19. package/components/data-display/chart.js +220 -0
  20. package/components/data-display/chat.js +128 -0
  21. package/components/data-display/collapse.js +103 -0
  22. package/components/data-display/countdown.js +69 -0
  23. package/components/data-display/diff.js +111 -0
  24. package/components/data-display/kbd.js +65 -0
  25. package/components/data-display/loading.js +75 -0
  26. package/components/data-display/progress.js +79 -0
  27. package/components/data-display/radial-progress.js +88 -0
  28. package/components/data-display/skeleton.js +66 -0
  29. package/components/data-display/stats.js +159 -0
  30. package/components/data-display/table.js +146 -0
  31. package/components/data-display/timeline.js +146 -0
  32. package/components/data-display/toast.js +72 -0
  33. package/components/data-display/tooltip.js +74 -0
  34. package/components/data-input/checkbox.js +253 -0
  35. package/components/data-input/file-input.js +224 -0
  36. package/components/data-input/input.js +264 -0
  37. package/components/data-input/radio.js +338 -0
  38. package/components/data-input/range.js +204 -0
  39. package/components/data-input/rating.js +219 -0
  40. package/components/data-input/select.js +287 -0
  41. package/components/data-input/textarea.js +287 -0
  42. package/components/data-input/toggle.js +201 -0
  43. package/components/index.js +137 -0
  44. package/components/layout/divider.js +72 -0
  45. package/components/layout/drawer.js +142 -0
  46. package/components/layout/footer.js +100 -0
  47. package/components/layout/hero.js +109 -0
  48. package/components/layout/indicator.js +90 -0
  49. package/components/layout/join.js +78 -0
  50. package/components/layout/navbar.js +110 -0
  51. package/components/navigation/breadcrumbs.js +91 -0
  52. package/components/navigation/dock.js +103 -0
  53. package/components/navigation/menu.js +126 -0
  54. package/components/navigation/pagination.js +105 -0
  55. package/components/navigation/steps.js +89 -0
  56. package/components/navigation/tabs.css +177 -0
  57. package/components/navigation/tabs.js +123 -0
  58. package/components/theme/theme-switch.css +65 -0
  59. package/components/theme/theme-switch.js +177 -0
  60. package/docs/about.html +164 -0
  61. package/docs/api/computed.html +184 -0
  62. package/docs/api/effects.html +173 -0
  63. package/docs/api/elements.html +180 -0
  64. package/docs/api/enhance.html +225 -0
  65. package/docs/api/hypermedia.html +165 -0
  66. package/docs/api/index.html +178 -0
  67. package/docs/api/nav.html +18 -0
  68. package/docs/api/signals.html +136 -0
  69. package/docs/api/state.html +217 -0
  70. package/docs/assets/images/logo-favicon.svg +42 -0
  71. package/docs/assets/images/logo-static.svg +40 -0
  72. package/docs/assets/images/logo.svg +66 -0
  73. package/docs/assets/js/examplify.js +395 -0
  74. package/docs/assets/styles/site.css +1102 -0
  75. package/docs/assets/styles/themes.css +236 -0
  76. package/docs/components/accordion.html +439 -0
  77. package/docs/components/alert.html +528 -0
  78. package/docs/components/avatar.html +586 -0
  79. package/docs/components/badge.html +531 -0
  80. package/docs/components/breadcrumbs.html +278 -0
  81. package/docs/components/button.html +579 -0
  82. package/docs/components/card.html +561 -0
  83. package/docs/components/carousel.html +286 -0
  84. package/docs/components/chart-area.html +702 -0
  85. package/docs/components/chart-bar.html +782 -0
  86. package/docs/components/chart-column.html +735 -0
  87. package/docs/components/chart-line.html +794 -0
  88. package/docs/components/chart-pie.html +823 -0
  89. package/docs/components/chart.html +610 -15
  90. package/docs/components/chat.html +547 -0
  91. package/docs/components/checkbox.html +641 -0
  92. package/docs/components/collapse.html +536 -0
  93. package/docs/components/component-nav.html +53 -0
  94. package/docs/components/countdown.html +470 -0
  95. package/docs/components/diff.html +245 -0
  96. package/docs/components/divider.html +240 -0
  97. package/docs/components/dock.html +277 -0
  98. package/docs/components/drawer.html +515 -0
  99. package/docs/components/dropdown.html +479 -0
  100. package/docs/components/file-input.html +591 -0
  101. package/docs/components/footer.html +301 -0
  102. package/docs/components/gallery.html +504 -0
  103. package/docs/components/hero.html +264 -0
  104. package/docs/components/index.css +840 -0
  105. package/docs/components/index.html +735 -0
  106. package/docs/components/indicator.html +342 -0
  107. package/docs/components/input.html +644 -0
  108. package/docs/components/join.html +285 -0
  109. package/docs/components/kbd.html +322 -0
  110. package/docs/components/loading.html +521 -0
  111. package/docs/components/menu.html +461 -0
  112. package/docs/components/modal.html +639 -0
  113. package/docs/components/navbar.html +321 -0
  114. package/docs/components/pagination.html +279 -0
  115. package/docs/components/progress.html +514 -0
  116. package/docs/components/radial-progress.html +434 -0
  117. package/docs/components/radio.html +655 -0
  118. package/docs/components/range.html +611 -0
  119. package/docs/components/rating.html +642 -0
  120. package/docs/components/select.html +696 -0
  121. package/docs/components/sidebar-setup.js +93 -0
  122. package/docs/components/skeleton.html +447 -0
  123. package/docs/components/spinner.html +68 -0
  124. package/docs/components/stats.html +486 -0
  125. package/docs/components/steps.html +356 -0
  126. package/docs/components/swap.html +517 -0
  127. package/docs/components/switch.html +68 -0
  128. package/docs/components/table.html +668 -0
  129. package/docs/components/tabs.html +506 -0
  130. package/docs/components/text-input.html +68 -0
  131. package/docs/components/textarea.html +603 -0
  132. package/docs/components/timeline.html +485 -42
  133. package/docs/components/toast.html +474 -0
  134. package/docs/components/toggle.html +564 -0
  135. package/docs/components/tooltip.html +423 -0
  136. package/docs/examples/getting-started-example.html +40 -0
  137. package/docs/examples/index.html +93 -0
  138. package/docs/getting-started/index.html +739 -0
  139. package/docs/getting-started/reviews.html +23 -0
  140. package/docs/getting-started/reviews.odom +108 -0
  141. package/docs/getting-started/reviews.vdom +84 -0
  142. package/docs/index.html +132 -42
  143. package/docs/playground.html +416 -0
  144. package/docs/router.html +285 -0
  145. package/docs/styles/index.html +190 -0
  146. package/functions/_middleware.js +32 -0
  147. package/index.html +309 -0
  148. package/lightview-router.js +364 -0
  149. package/lightview-x.js +1577 -0
  150. package/lightview.js +659 -1200
  151. package/middleware/locale.js +25 -0
  152. package/middleware/markdown.js +44 -0
  153. package/middleware/notFound.js +37 -0
  154. package/package.json +27 -41
  155. package/watch.js +92 -0
  156. package/wrangler.toml +12 -0
  157. package/.idea/lightview.iml +0 -12
  158. package/.idea/modules.xml +0 -8
  159. package/.idea/vcs.xml +0 -6
  160. package/LICENSE +0 -21
  161. package/codepen-no-tabs-embed.css +0 -2
  162. package/docs/CNAME +0 -1
  163. package/docs/api.html +0 -674
  164. package/docs/blank.html +0 -10
  165. package/docs/comparedto.html +0 -89
  166. package/docs/components/chart-repl.html +0 -69
  167. package/docs/components/components.js +0 -113
  168. package/docs/components/contents.html +0 -17
  169. package/docs/components/gantt-repl.html +0 -61
  170. package/docs/components/gantt.html +0 -42
  171. package/docs/components/gauge-repl.html +0 -66
  172. package/docs/components/gauge.html +0 -20
  173. package/docs/components/orgchart-repl.html +0 -64
  174. package/docs/components/orgchart.html +0 -41
  175. package/docs/components/repl-as-src.html +0 -17
  176. package/docs/components/repl-repl.html +0 -95
  177. package/docs/components/repl.html +0 -527
  178. package/docs/components/timeline-repl.html +0 -72
  179. package/docs/components.html +0 -14
  180. package/docs/css/highlightjs.min.css +0 -9
  181. package/docs/css/tutorial.css +0 -35
  182. package/docs/examples/anchor.html +0 -11
  183. package/docs/examples/chart.html +0 -34
  184. package/docs/examples/counter.html +0 -26
  185. package/docs/examples/counter.test.mjs +0 -47
  186. package/docs/examples/counter2.html +0 -26
  187. package/docs/examples/directives.html +0 -79
  188. package/docs/examples/foreign.html +0 -50
  189. package/docs/examples/forgeinform.html +0 -98
  190. package/docs/examples/form.html +0 -61
  191. package/docs/examples/gauge.html +0 -18
  192. package/docs/examples/invalid-template-literals.html +0 -44
  193. package/docs/examples/medium/remote.html +0 -60
  194. package/docs/examples/message.html +0 -18
  195. package/docs/examples/nested.html +0 -11
  196. package/docs/examples/object-bound-form.html +0 -34
  197. package/docs/examples/remote-server.js +0 -51
  198. package/docs/examples/remote.html +0 -34
  199. package/docs/examples/remote.json +0 -1
  200. package/docs/examples/scratch.html +0 -69
  201. package/docs/examples/sensors/index.html +0 -44
  202. package/docs/examples/sensors/sensor-server.js +0 -30
  203. package/docs/examples/shared.html +0 -41
  204. package/docs/examples/template.html +0 -33
  205. package/docs/examples/timeline.html +0 -21
  206. package/docs/examples/todo.html +0 -40
  207. package/docs/examples/top.html +0 -10
  208. package/docs/examples/types.html +0 -94
  209. package/docs/examples/xor.html +0 -62
  210. package/docs/examples.html +0 -25
  211. package/docs/javascript/codejar.min.js +0 -8
  212. package/docs/javascript/highlightjs.min.js +0 -1173
  213. package/docs/javascript/isomorphic-git.js +0 -9
  214. package/docs/javascript/json5.min.js +0 -1
  215. package/docs/javascript/lightning-fs.js +0 -1
  216. package/docs/javascript/lightview.js +0 -1285
  217. package/docs/javascript/marked.min.js +0 -6
  218. package/docs/javascript/peerjs.min.js +0 -70
  219. package/docs/javascript/turndown.js +0 -973
  220. package/docs/javascript/types.js +0 -606
  221. package/docs/javascript/utils.js +0 -45
  222. package/docs/lightview.html +0 -63
  223. package/docs/old_index.html +0 -965
  224. package/docs/old_index.md +0 -1132
  225. package/docs/slidein.html +0 -51
  226. package/docs/tutorial/0-getting-started.html +0 -67
  227. package/docs/tutorial/1-intro-to-variables.html +0 -103
  228. package/docs/tutorial/10-template-components.html +0 -80
  229. package/docs/tutorial/11-linked-components.html +0 -76
  230. package/docs/tutorial/12-imported-components.html +0 -67
  231. package/docs/tutorial/13-input-binding.html +0 -94
  232. package/docs/tutorial/14-automatic-variable-creation.html +0 -74
  233. package/docs/tutorial/15-form-binding.html +0 -110
  234. package/docs/tutorial/16-if-directive.html +0 -60
  235. package/docs/tutorial/17-loop-directives.html +0 -83
  236. package/docs/tutorial/18-sanitizing-and-escaping-input.html +0 -79
  237. package/docs/tutorial/2-imported-and-exported-variables.html +0 -80
  238. package/docs/tutorial/3-data-types.html +0 -89
  239. package/docs/tutorial/4-extended-data-types.html +0 -83
  240. package/docs/tutorial/5-extended-functional-types.html +0 -96
  241. package/docs/tutorial/5.1-extended-functional-types.html +0 -79
  242. package/docs/tutorial/5.2-extended-functional-types.html +0 -70
  243. package/docs/tutorial/6-conventional-javascript.html +0 -75
  244. package/docs/tutorial/7-monitoring-with-observers.html +0 -107
  245. package/docs/tutorial/8-event-listeners.html +0 -65
  246. package/docs/tutorial/9-intro-to-components.html +0 -91
  247. package/docs/tutorial/contents.html +0 -32
  248. package/docs/tutorial/my-component.html +0 -29
  249. package/docs/tutorial/remote-value.json +0 -4
  250. package/docs/websiterepl.html +0 -46
  251. package/jest-puppeteer.config.js +0 -5
  252. package/jest.config.json +0 -12
  253. package/lightview.min.js +0 -1
  254. package/lightview_good.js +0 -1267
  255. package/lightview_optimized.js +0 -1274
  256. package/repl_hold.html +0 -320
  257. package/test/basic.html +0 -104
  258. package/test/basic.test.mjs +0 -315
  259. package/test/extended.html +0 -29
  260. package/test/extended.test.mjs +0 -448
  261. package/types.js +0 -607
  262. package/unsplash.key +0 -1
package/docs/comparedto.html DELETED
@@ -1,89 +0,0 @@
1
- <!DOCTYPE html>
2
- <html lang="en">
3
- <head>
4
- <meta charset="UTF-8">
5
- <title>Lightview:ComparedTo</title>
6
- <script src="./javascript/highlightjs.min.js"></script>
7
- <script src="./javascript/marked.min.js"></script>
8
- <script src="./javascript/utils.js"></script>
9
- <style>
10
- table { border: lightgray; border-style: solid; border-collapse: collapse; width: 100%}
11
- thead th:nth-child(1) {
12
- width: 15%;
13
- }
14
- thead th:nth-child(2) {
15
- width: 17%;
16
- }
17
- thead th:nth-child(3) {
18
- width: 17%;
19
- }
20
- thead th:nth-child(4) {
21
- width: 17%;
22
- }
23
- thead th:nth-child(5) {
24
- width: 17%;
25
- }
26
- thead th:nth-child(6) {
27
- width: 17%;
28
- }
29
- th { text-align: left; border: lightgray; border-style: solid; padding: 5px; }
30
- td { text-align: left; border: lightgray; border-style: solid; padding: 5px; }
31
- </style>
32
- </head>
33
- <body>
34
- <div class="markdown">
35
- | |Lightview |Svelte |Vue |React |Riot |
36
- |-----------|----------|---------|----------|----------|----------|
37
- | *Size* | 8.5K+ | 1.5K+ | 29K+ | 42K+ | 6.5K+ |
38
- | *Community Size* | Tiny | Large | Very Large | Very Large | Medium |
39
- | *Created* | 2022 | 2015 | 2014 | 2011 | 2013 |
40
- | *Focus* | Small to Medium Projects | Any | Any | Any | Any |
41
- | *Preprocessor* | No | Yes | For Components | Yes | Yes |
42
- | *DOM Updates* | Dependency Tracker | Dependency Tracker | VDOM | VDOM | DOM Traversal |
43
- | *Fully Reactive<sup>1</sup>* | Yes | Yes | Yes | No | No |
44
- | *Two Way Data Binding<sup>2</sup>* | Optional | No | No | No | No |
45
- | *Closeness To JavaScript<sup>3</sup>* | 90% | 95% | 80% | 60% | 90% |
46
- | *Basic Learning Curve<sup>4</sup>* | Very Low | Very Low | Low | High | Very Low |
47
- | *Power Use Learning Curve<sup>5</sup>* | Moderate | Moderate | High | Very High | Low |
48
- | *Officially Supported Router* | Future | Yes | Yes | No | Yes |
49
- | *Officially Supported State Management<sup>6</sup>* | Yes | Yes | Yes | No | ? |
50
- | *Officially Supported Transition Effects* | No | Yes | Yes | No | No |
51
- | *Officially Supported Components* | Yes | ? | ? | ? | ? |
52
-
53
-
54
- A version of the most [prevelant UI tool benchmark](https://krausest.github.io/js-framework-benchmark/current.html)
55
- from Krausest has yet to be published. Internal use of this benchmark shows the current performance of Lightview is close to
56
- that of Ember (sometimes faster, sometimes slower). It is often as fast or slightly faster than React and sometimes as fast as Vue.
57
- It is never as fast as Svelte. This should be adequate for many applications. Remember, it is not the
58
- number of users that impacts a UI library, it is the size and change rate of the DOM that needs to be updated. If
59
- you don't have thousands of nodes to update or changes of an extremely high frequency, then you should be able to deliver a
60
- good user experience with Lightview.
61
-
62
- 1. Fully Reactive - Both React and Riot require you to instrument your application with some type of event handlers to
63
- propagate change. Lightview, Svelte, and Vue can propagate change automatically.
64
-
65
- 2. Closeness To JavaScript - A rough approximation of how "traditional" your code can be and how few extra conventions you need to learn
66
- to be productive. In general, this relates to the use of state management, attribute directives, annotations, and language additions that
67
- can't be processed like regular JavaScript.
68
-
69
- 3. Two-way data binding is much maligned. We do understand the issues of tracing data changes through a large application developed over an extended
70
- period of time by multiple-developers. That being said, Lightview works hard to prevent vicious cycles that creat hard to track bugs and is
71
- extraordinarily declarative. It is left to you to decide if you want to use two-way data binding. All variables can be monitored with a simple
72
- call to `addEventListener` without declaring them as `reactive`.
73
-
74
- 4. The learning curves for React are shown as High and Very High due the need to learn JSX, the programming style required, and the need to
75
- use hooks or manage a fair number of lifecyle events directly. We know this may create some lash back, but we believe the extent of this
76
- need sometimes makes things as bad as un-restrained use of two-way data binding.
77
-
78
- 5. Riot is listed as `Low` for power use learning curve because it does not provide a lot of extras. This is not to say it isn't powerful, Riot
79
- focuses on minimalistic simplicity. You can use the rest of JavaScript's native functionality to accomplish what you need.
80
-
81
- 6. State in Lightview is managed with a combination of regular JavaScript objects and the variable functional types `imported`, `exported`, `observed`,
82
- `reactive`, `remote` and `shared`.
83
-
84
- </div>
85
- <script>
86
- processMarkdown();
87
- </script>
88
- </body>
89
- </html>
package/docs/components/chart-repl.html DELETED
@@ -1,69 +0,0 @@
1
- <!DOCTYPE html>
2
- <html lang="en">
3
- <head>
4
- <meta charset="UTF-8">
5
- <title>Lightview:Components:Basic Charts</title>
6
- <link href="../css/tutorial.css" rel="stylesheet">
7
- <link href="../slidein.html" rel="module">
8
- <link href="repl.html" rel="module">
9
- <script src="../javascript/highlightjs.min.js"></script>
10
- <script src="../javascript/marked.min.js"></script>
11
- <script src="../javascript/utils.js"></script>
12
- </head>
13
- <body class="tutorial-body">
14
- <script src="../javascript/lightview.js"></script>
15
- <div class="tutorial-instructions">
16
- <l-slidein src="./contents.html" class="toc"></l-slidein>
17
- <div class="markdown">
18
- ## Basic Charts
19
-
20
- The basic chart component, `l-chart`, supports bar, pie, and column charts through configuration data provided as
21
- relaxed JSON in the tag contetn area.
22
-
23
- </div>
24
- <button class="nav-next"><a href="gantt-repl.html" target="content">Next</a></button>
25
- </div>
26
- <div class="repl">
27
- <h2></h2>
28
- <l-repl id="repl" style="min-height:95vh;min-width:600px;" previewpinned path="$location" previewheight="500px">
29
- <div slot="headhtml"></div>
30
- <div slot="bodyhtml"></div>
31
- <div slot="script"></div>
32
- <template slot="src">
33
- <l-head>
34
- <link href="./chart.html" rel="module">
35
- <script src="../javascript/lightview.js"></script>
36
- </l-head>
37
- <l-body>
38
- <l-chart id="myPieChart" type="PieChart" style="height:500px;" title="How Much Pizza I Ate Last Night">
39
- {
40
- options: { },
41
- columns: [
42
- {label: "Topping", type: "string"},
43
- {label: "Slices", type: "number"}
44
- ],
45
- rows: [
46
- ["Mushrooms", 3],
47
- ["Onions", 1],
48
- ["Olives", 1],
49
- ["Zucchini", 1],
50
- ["Pepperoni", 2]
51
- ]
52
- }
53
- </l-chart>
54
- </l-body>
55
- <script>
56
- const el = document.getElementById("myPieChart");
57
- el.addEventListener("initialized",() => {
58
- const chart = el.chart;
59
- chart.addRow(["Anchovies",1]);
60
- });
61
- </script>
62
- </template>
63
- </l-repl>
64
- </div>
65
- <script>
66
- processMarkdown();
67
- </script>
68
- </body>
69
- </html>
package/docs/components/components.js DELETED
@@ -1,113 +0,0 @@
1
- const chart = (self,{packages = ["corechart"],options={},columns=[],rows=[],type,optionsTransform, rowTransform}={}) => {
2
- options = {...options};
3
- columns = [...columns];
4
- let chart,
5
- datatable;
6
- const chartProxy = (chart) => {
7
- const extras = {
8
- setOption(name,value) {
9
- options[name] = value;
10
- chart.draw(datatable, options);
11
- },
12
- setOptions(newOptions) {
13
- options = {...newOptions};
14
- chart.draw(datatable, options);
15
- }
16
- };
17
- return new Proxy(chart,{
18
- get(target,property) {
19
- let value = extras[property];
20
- if(value!==undefined) return value;
21
- value = target[property];
22
- if(value!==undefined) return Reflect.get(target,property);
23
- value = datatable[property];
24
- if(typeof(value)==="function") {
25
- if(["add","insert","remove","set"].some((prefix) => property.startsWith(prefix))) {
26
- return (...args) => { value.call(datatable,...args); chart.draw(datatable,options); };
27
- };
28
- return value.bind(datatable);
29
- };
30
- }
31
- });
32
- };
33
- const target = self.getElementById("target"),
34
- resizeObserver = new ResizeObserver(entries => {
35
- for (let entry of entries) {
36
- if(entry.contentBoxSize) {
37
- // Firefox implements `contentBoxSize` as a single content rect, rather than an array
38
- const contentBoxSize = Array.isArray(entry.contentBoxSize) ? entry.contentBoxSize[0] : entry.contentBoxSize;
39
- if(options.width !== contentBoxSize.inlineSize) {
40
- options.width = contentBoxSize.inlineSize;
41
- chart.draw(datatable, options);
42
- }
43
- } else {
44
- if(options.width !== entry.contentRect.width) {
45
- options.width = entry.contentRect.width;
46
- chart.draw(datatable, options);
47
- }
48
- }
49
- }
50
- }),
51
- callback = (textNode, oldValue, newValue) => {
52
- datatable = new google.visualization.DataTable();
53
- try {
54
- const config = JSON5.parse(newValue.trim());
55
- if(config.options) Object.assign(options,config.options);
56
- if(config.columns) columns=config.columns;
57
- if(config.rows) rows=config.rows;
58
- columns.forEach((column) => {
59
- datatable.addColumn(column);
60
- });
61
- if(optionsTransform) options = optionsTransform(options);
62
- if(rowTransform) rows = rows.map((row,index) => rowTransform(row,index,options));
63
- datatable.addRows(rows);
64
- const {selectedStyle,style} = options;
65
- rows.forEach((row,index) => {
66
- if(selectedStyle) datatable.setRowProperty(index,"selectedStyle",selectedStyle);
67
- if(style) datatable.setRowProperty(index,"style",style);
68
- });
69
- chart.draw(datatable, options);
70
- } catch (e) {
71
- console.error(e + newValue);
72
- target.innerText = e + newValue;
73
- }
74
- };
75
- self.firstChild.innerText = "Loading ...";
76
- self.variables({type: "string", title: "string", style: "string"}, {observed:true});
77
- if(self.hasAttribute("style")) target.setAttribute("style",self.getAttribute("style"));
78
- self.init = () => {
79
- if(!options.title && self.hasAttribute("title")) options.title = self.getAttribute("title");
80
- self.chart = chart = chartProxy(new google.visualization[type||self.getAttribute("type")](target));
81
- addEventListener("change",({target,value}) => {
82
- if (target === "type") {
83
- chart = new google.visualization[type](target);
84
- } else if (target === "title") {
85
- options.title = value;
86
- } else if(target === "style") {
87
- target.setAttribute("style",value);
88
- }
89
- chart.draw(datatable, options);
90
- });
91
- const node = self.firstChild;
92
- callback(node, node.textContent, node.textContent);
93
- // Will be used by the Lightview global observer
94
- node.characterDataMutationCallback = callback;
95
- // resized charts if window resizes
96
- resizeObserver.observe(document.body);
97
- self.dispatchEvent(new Event("initialized"));
98
- };
99
- self.addEventListener("mounted", ({target}) => {
100
- const gscript = document.createElement("script");
101
- gscript.setAttribute("src","https://www.gstatic.com/charts/loader.js");
102
- gscript.onload = () => {
103
- google.charts.load("current", {"packages":packages});
104
- google.charts.setOnLoadCallback(self.init);
105
- };
106
- self.appendChild(gscript);
107
- });
108
- const jscript = document.createElement("script");
109
- jscript.setAttribute("src","../javascript/json5.min.js");
110
- document.head.appendChild(jscript);
111
- }
112
-
113
- export {chart};
package/docs/components/contents.html DELETED
@@ -1,17 +0,0 @@
1
- <!DOCTYPE html>
2
- <html lang="en">
3
- <head>
4
- <meta charset="UTF-8">
5
- <title>Ligtchview:Tutorial:Contents</title>
6
- </head>
7
- <body>
8
- <ul style="list-style:none;padding-inline-start: 10px">
9
- <li><a href="./chart-repl.html">Basic Charts</a></li>
10
- <li><a href="./gantt-repl.html">Gantt</a></li>
11
- <li><a href="./orgchart-repl.html">Org Chart</a></li>
12
- <li><a href="./timeline-repl.html">Timeline</a></li>
13
- <li><a href="./gauge-repl.html">Gauge</a></li>
14
- <li><a href="./repl-repl.html">REPL</a></li>
15
- </ul>
16
- </body>
17
- </html>
package/docs/components/gantt-repl.html DELETED
@@ -1,61 +0,0 @@
1
- <!DOCTYPE html>
2
- <html lang="en">
3
- <head>
4
- <meta charset="UTF-8">
5
- <title>Lightview:Components:Gantt</title>
6
- <link href="../css/tutorial.css" rel="stylesheet">
7
- <link href="../slidein.html" rel="module">
8
- <link href="repl.html" rel="module">
9
- <script src="../javascript/highlightjs.min.js"></script>
10
- <script src="../javascript/marked.min.js"></script>
11
- <script src="../javascript/utils.js"></script>
12
- </head>
13
- <body class="tutorial-body">
14
- <script src="../javascript/lightview.js"></script>
15
- <div class="tutorial-instructions">
16
- <l-slidein src="./contents.html" class="toc"></l-slidein>
17
- <div class="markdown">
18
- ## Gannt
19
-
20
-
21
-
22
- </div>
23
- <button class="nav-previous"><a href="chart-repl.html" target="content">Previous</a></button>
24
- <button class="nav-next"><a href="orgchart-repl.html" target="content">Next</a></button>
25
- </div>
26
- <div class="repl">
27
- <h2></h2>
28
- <l-repl id="repl" style="min-height:95vh;min-width:600px;" previewpinned path="$location" previewheight="400px">
29
- <div slot="headhtml"></div>
30
- <div slot="bodyhtml"></div>
31
- <div slot="script"></div>
32
- <template slot="src">
33
- <l-head>
34
- <link href="./gantt.html" rel="module">
35
- <script src="../javascript/lightview.js"></script>
36
- </l-head>
37
- <l-body>
38
- <l-gantt id="myChart" style="height:400px;" title="Research Project">
39
- {
40
- options: { },
41
- rows: [
42
- ['Research', 'Find sources',"2015-01-01", "2015-01-05", null, 100, null],
43
- ['Write', 'Write paper',null,"2015-01-09", "3d", 25, 'Research,Outline'],
44
- ['Cite', 'Create bibliography',null, "2015-01-07","1d" , 20, 'Research'],
45
- ['Complete', 'Hand in paper', null, "2015-01-10", "1d" , 0, 'Cite,Write'],
46
- ['Outline', 'Outline paper', null, "2015-01-06", "1d" , 100, 'Research']
47
- ]
48
- }
49
- </l-gantt>
50
- </l-body>
51
- <script>
52
-
53
- </script>
54
- </template>
55
- </l-repl>
56
- </div>
57
- <script>
58
- processMarkdown();
59
- </script>
60
- </body>
61
- </html>
package/docs/components/gantt.html DELETED
@@ -1,42 +0,0 @@
1
- <!DOCTYPE html>
2
- <html>
3
- <head>
4
- <title>Lightview:Component:Gantt</title>
5
- <script src="../javascript/json5.min.js"></script>
6
- </head>
7
- <body>
8
- <div id="target"></div>
9
- <script id="lightview">
10
- (document.currentComponent||(document.currentComponent=document.body)).mount = async function() {
11
- const {chart} = await import(new URL("./components.js", this.componentBaseURI).href),
12
- {duration} = await import(new URL("../javascript/types.js", this.componentBaseURI).href);
13
- chart(self, {
14
- packages: ["gantt"],
15
- columns: [
16
- {label: "Task ID", type: "string"},
17
- {label: "Task Name", type: "string"},
18
- {label: "Start Date", type: "date"},
19
- {label: "End Date", type: "date"},
20
- {label: "Duration", type: "number"},
21
- {label: "% Complete", type: "number"},
22
- {label: "Dependencies", type: "string"}
23
- ],
24
- type: "Gantt",
25
- rowTransform(row, i) {
26
- return row.map((item, index) => {
27
- if (item && (index === 2 || index === 3)) {
28
- const date = new Date(item);
29
- if (!date || typeof (date) !== "object" || !(date instanceof Date)) {
30
- throw new TypeError(`row:${i} col:${index} is not a date`);
31
- }
32
- return date;
33
- }
34
- if (item && index === 4) return duration.parse(item);
35
- return item;
36
- })
37
- }
38
- });
39
- }
40
- </script>
41
- </body>
42
- </html>
package/docs/components/gauge-repl.html DELETED
@@ -1,66 +0,0 @@
1
- <!DOCTYPE html>
2
- <html lang="en">
3
- <head>
4
- <meta charset="UTF-8">
5
- <title>Lightview:Components:Gauge</title>
6
- <link href="../css/tutorial.css" rel="stylesheet">
7
- <link href="../slidein.html" rel="module">
8
- <link href="repl.html" rel="module">
9
- <script src="../javascript/highlightjs.min.js"></script>
10
- <script src="../javascript/marked.min.js"></script>
11
- <script src="../javascript/utils.js"></script>
12
- </head>
13
- <body class="tutorial-body">
14
- <script src="../javascript/lightview.js"></script>
15
- <div class="tutorial-instructions">
16
- <l-slidein src="./contents.html" class="toc"></l-slidein>
17
- <div class="markdown">
18
- ## Gauge
19
-
20
-
21
-
22
- </div>
23
- <button class="nav-previous"><a href="timeline-repl.html" target="content">Previous</a></button>
24
- <button class="nav-next"><a href="repl-repl.html" target="content">Next</a></button>
25
- </div>
26
- <div class="repl">
27
- <h2></h2>
28
- <l-repl id="repl" style="min-height:95vh;min-width:600px;" previewpinned path="$location" previewheight="400px">
29
- <div slot="headhtml"></div>
30
- <div slot="bodyhtml"></div>
31
- <div slot="script"></div>
32
- <template slot="src">
33
- <l-head>
34
- <link href="./gauge.html" rel="module">
35
- <script src="../javascript/lightview.js"></script>
36
- </l-head>
37
- <l-body>
38
- <l-gauge id="myChart" style="height:500px;" title="Server" hidden l-unhide>
39
- {
40
- options: {
41
-
42
- },
43
- rows: [
44
- ['Memory', 80],
45
- ['CPU', 55],
46
- ['Network', 68]
47
- ]
48
- }
49
- </l-gauge>
50
-
51
- </l-body>
52
- <script>
53
- const el = document.getElementById("myChart");
54
- el.addEventListener("initialized",() => {
55
- chart = el.chart;
56
- chart.addRow(["Storage",10]);
57
- });
58
- </script>
59
- </template>
60
- </l-repl>
61
- </div>
62
- <script>
63
- processMarkdown();
64
- </script>
65
- </body>
66
- </html>
package/docs/components/gauge.html DELETED
@@ -1,20 +0,0 @@
1
- <html>
2
- <head>
3
- <meta charset="UTF-8">
4
- <title>Lightview:Component:Gauge</title>
5
- <script src="../javascript/json5.min.js"></script>
6
- </head>
7
- <body>
8
- <div id="target"></div>
9
- <script id="lightview">
10
- (document.currentComponent||(document.currentComponent=document.body)).mount = async function() {
11
- const {chart} = await import(new URL("./components.js", this.componentBaseURI).href);
12
- chart(self, {
13
- packages: ["corechart", "gauge"],
14
- columns: [{label: "Label", type: "string"}, {label: "Value", type: "number"}],
15
- type: "Gauge"
16
- });
17
- }
18
- </script>
19
- </body>
20
- </html>
package/docs/components/orgchart-repl.html DELETED
@@ -1,64 +0,0 @@
1
- <!DOCTYPE html>
2
- <html lang="en">
3
- <head>
4
- <meta charset="UTF-8">
5
- <title>Lightview:Components:Org Chart</title>
6
- <link href="../css/tutorial.css" rel="stylesheet">
7
- <link href="../slidein.html" rel="module">
8
- <link href="repl.html" rel="module">
9
- <script src="../javascript/highlightjs.min.js"></script>
10
- <script src="../javascript/marked.min.js"></script>
11
- <script src="../javascript/utils.js"></script>
12
- </head>
13
- <body class="tutorial-body">
14
- <script src="../javascript/lightview.js"></script>
15
- <div class="tutorial-instructions">
16
- <l-slidein src="./contents.html" class="toc"></l-slidein>
17
- <div class="markdown">
18
- ## Org Chart
19
-
20
-
21
-
22
- </div>
23
- <button class="nav-previous"><a href="gantt-repl.html" target="content">Previous</a></button>
24
- <button class="nav-next"><a href="timeline-repl.html" target="content">Next</a></button>
25
- </div>
26
- <div class="repl">
27
- <h2></h2>
28
- <l-repl id="repl" style="min-height:95vh;min-width:600px;" previewpinned path="$location" previewheight="400px">
29
- <div slot="headhtml"></div>
30
- <div slot="bodyhtml"></div>
31
- <div slot="script"></div>
32
- <template slot="src">
33
- <l-head>
34
- <link href="./orgchart.html" rel="module">
35
- <script src="../javascript/lightview.js"></script>
36
- </l-head>
37
- <l-body>
38
- <l-orgchart id="myChart" style="height:500px;" title="My Org">
39
- {
40
- options: {
41
- selectedStyle:"color:red"
42
- },
43
- // 4 columns in definition data name,title,manager,tooltip
44
- rows: [
45
- ["Mike","President","",""],
46
- ["Jim","CFO","Mike",""],
47
- ['Alice', 'Controller','Jim',""],
48
- ['Bob', 'CIO', 'Mike',""],
49
- ['Carol', 'Executive Assistant',"Mike",""]
50
- ]
51
- }
52
- </l-orgchart>
53
- </l-body>
54
- <script>
55
-
56
- </script>
57
- </template>
58
- </l-repl>
59
- </div>
60
- <script>
61
- processMarkdown();
62
- </script>
63
- </body>
64
- </html>
package/docs/components/orgchart.html DELETED
@@ -1,41 +0,0 @@
1
- <!DOCTYPE html>
2
- <html>
3
- <head>
4
- <title>Lightview:Component:OrgChart</title>
5
- <script src="../javascript/json5.min.js"></script>
6
- </head>
7
- <body>
8
- <link id="load-css-2" rel="stylesheet" type="text/css" href="https://www.gstatic.com/charts/51/css/orgchart/orgchart.css">
9
- <div id="target"></div>
10
- <script id="lightview">
11
- (document.currentComponent||(document.currentComponent=document.body)).mount = async function() {
12
- const {chart} = await import(new URL("./components.js", this.componentBaseURI).href);
13
- chart(self, {
14
- options: {allowHtml: true, allowCollapse: true},
15
- packages: ["orgchart"],
16
- columns: [
17
- {label: "Name", type: "string"},
18
- {label: "Manager", type: "string"},
19
- {label: "Tooltip", type: "string"}
20
- ],
21
- type: "OrgChart",
22
- // 4 columns in definition data name,title,manager,tooltip
23
- rowTransform(row) {
24
- return row.reduce((row, item, index) => {
25
- item ||= "";
26
- if (index === 1) {
27
- row[0] = {
28
- v: row[0],
29
- f: `<div style="text-align:center;">${row[0]}<div style="font-style:italic">${item}</div></div>`
30
- }
31
- } else {
32
- row.push(item);
33
- }
34
- return row;
35
- }, []);
36
- }
37
- });
38
- }
39
- </script>
40
- </body>
41
- </html>
package/docs/components/repl-as-src.html DELETED
@@ -1,17 +0,0 @@
1
- <!DOCTYPE html>
2
- <html lang="en">
3
- <head>
4
- <script src="../javascript/lightview.js?as=x-body"></script>
5
- </head>
6
- <body>
7
- <div class="message">${message}</div>
8
- <script id="lightview">
9
- currentComponent.mount = function() {
10
- this.variables({message:"string"},{set:"Hello world!"});
11
- }
12
- </script>
13
- <style>
14
- .message { font-size: large }
15
- </style>
16
- </body>
17
- </html>