Skip to content

Commit e89f820

Browse files
authored
Feature/support vega lite (#1251)
Feature/support vega lite
2 parents 59c3452 + 71ea581 commit e89f820

File tree

10 files changed

+103
-11
lines changed

10 files changed

+103
-11
lines changed

package.json

Lines changed: 3 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -138,6 +138,9 @@
138138
"turndown": "~5.0.3",
139139
"uuid": "~3.3.2",
140140
"validator": "~11.1.0",
141+
"vega": "~5.4.0",
142+
"vega-embed": "~4.2.2",
143+
"vega-lite": "~3.4.0",
141144
"velocity-animate": "~1.5.2",
142145
"visibilityjs": "~2.0.2",
143146
"viz.js": "~2.1.2",

public/css/markdown.css

Lines changed: 6 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -126,7 +126,8 @@
126126
.markdown-body pre.sequence-diagram,
127127
.markdown-body pre.graphviz,
128128
.markdown-body pre.mermaid,
129-
.markdown-body pre.abc {
129+
.markdown-body pre.abc,
130+
.markdown-body pre.vega {
130131
text-align: center;
131132
background-color: inherit;
132133
border-radius: 0;
@@ -147,15 +148,17 @@
147148
.markdown-body pre.sequence-diagram > code,
148149
.markdown-body pre.graphviz > code,
149150
.markdown-body pre.mermaid > code,
150-
.markdown-body pre.abc > code {
151+
.markdown-body pre.abc > code,
152+
.markdown-body pre.vega > code {
151153
text-align: left;
152154
}
153155

154156
.markdown-body pre.flow-chart > svg,
155157
.markdown-body pre.sequence-diagram > svg,
156158
.markdown-body pre.graphviz > svg,
157159
.markdown-body pre.mermaid > svg,
158-
.markdown-body pre.abc > svg {
160+
.markdown-body pre.abc > svg,
161+
.markdown-body pre.vega > svg {
159162
max-width: 100%;
160163
height: 100%;
161164
}

public/css/slide.css

Lines changed: 6 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -223,7 +223,8 @@ pre.flow-chart,
223223
pre.sequence-diagram,
224224
pre.graphviz,
225225
pre.mermaid,
226-
pre.abc {
226+
pre.abc,
227+
pre.vega {
227228
text-align: center;
228229
background-color: white;
229230
border-radius: 0;
@@ -234,15 +235,17 @@ pre.flow-chart > code,
234235
pre.sequence-diagram > code,
235236
pre.graphviz > code,
236237
pre.mermaid > code,
237-
pre.abc > code {
238+
pre.abc > code,
239+
pre.vega > code {
238240
text-align: left;
239241
}
240242

241243
pre.flow-chart > svg,
242244
pre.sequence-diagram > svg,
243245
pre.graphviz > svg,
244246
pre.mermaid > svg,
245-
pre.abc > svg {
247+
pre.abc > svg,
248+
pre.vega > svg {
246249
max-width: 100%;
247250
height: 100%;
248251
}

public/docs/features.md

Lines changed: 34 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -313,11 +313,45 @@ GABc dedB|dedB dedB|c2ec B2dB|A2F2 G4:|
313313
g2gf g2Bd|g2f2 e2d2|c2ec B2dB|A2F2 G4:|
314314
```
315315

316+
### PlantUML
317+
```plantuml
318+
start
319+
if (condition A) then (yes)
320+
:Text 1;
321+
elseif (condition B) then (yes)
322+
:Text 2;
323+
stop
324+
elseif (condition C) then (yes)
325+
:Text 3;
326+
elseif (condition D) then (yes)
327+
:Text 4;
328+
else (nothing)
329+
:Text else;
330+
endif
331+
stop
332+
```
333+
334+
### Vega-Lite
335+
```vega
336+
{
337+
"$schema": "https://vega.github.io/schema/vega-lite/v3.json",
338+
"data": {"url": "https://vega.github.io/editor/data/barley.json"},
339+
"mark": "bar",
340+
"encoding": {
341+
"x": {"aggregate": "sum", "field": "yield", "type": "quantitative"},
342+
"y": {"field": "variety", "type": "nominal"},
343+
"color": {"field": "site", "type": "nominal"}
344+
}
345+
}
346+
```
347+
316348
> More information about **sequence diagrams** syntax [here](http://bramp.github.io/js-sequence-diagrams/).
317349
> More information about **flow charts** syntax [here](http://adrai.github.io/flowchart.js/).
318350
> More information about **graphviz** syntax [here](http://www.tonyballantyne.com/graphs.html)
319351
> More information about **mermaid** syntax [here](http://knsv.github.io/mermaid)
320352
> More information about **abc** syntax [here](http://abcnotation.com/learn)
353+
> More information about **plantuml** syntax [here](http://plantuml.com/index)
354+
> More information about **vega** syntax [here](https://vega.github.io/vega-lite/docs)
321355
322356
Alert Area
323357
---

public/js/extra.js

Lines changed: 28 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -419,6 +419,32 @@ export function finishView (view) {
419419
console.warn(err)
420420
}
421421
})
422+
// vega-lite
423+
const vegas = view.find('div.vega.raw').removeClass('raw')
424+
vegas.each((key, value) => {
425+
try {
426+
var $value = $(value)
427+
var $ele = $(value).parent().parent()
428+
429+
const specText = $value.text()
430+
431+
$value.unwrap()
432+
window.vegaEmbed($ele[0], JSON.parse(specText))
433+
.then(result => {
434+
$ele.addClass('vega')
435+
})
436+
.catch(err => {
437+
$ele.append(`<div class="alert alert-warning">${escapeHTML(err)}</div>`)
438+
console.warn(err)
439+
})
440+
.finally(() => {
441+
if (window.viewAjaxCallback) window.viewAjaxCallback()
442+
})
443+
} catch (err) {
444+
$ele.append(`<div class="alert alert-warning">${escapeHTML(err)}</div>`)
445+
console.warn(err)
446+
}
447+
})
422448
// image href new window(emoji not included)
423449
const images = view.find('img.raw[src]').removeClass('raw')
424450
images.each((key, value) => {
@@ -926,6 +952,8 @@ function highlightRender (code, lang) {
926952
return `<div class="mermaid raw">${code}</div>`
927953
} else if (lang === 'abc') {
928954
return `<div class="abc raw">${code}</div>`
955+
} else if (lang === 'vega') {
956+
return `<div class="vega raw">${code}</div>`
929957
}
930958
const result = {
931959
value: code

public/js/index.js

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -100,7 +100,7 @@ var cursorActivityDebounce = 50
100100
var cursorAnimatePeriod = 100
101101
var supportContainers = ['success', 'info', 'warning', 'danger', 'spoiler']
102102
var supportCodeModes = ['javascript', 'typescript', 'jsx', 'htmlmixed', 'htmlembedded', 'css', 'xml', 'clike', 'clojure', 'ruby', 'python', 'shell', 'php', 'sql', 'haskell', 'coffeescript', 'yaml', 'pug', 'lua', 'cmake', 'nginx', 'perl', 'sass', 'r', 'dockerfile', 'tiddlywiki', 'mediawiki', 'go', 'gherkin'].concat(hljs.listLanguages())
103-
var supportCharts = ['sequence', 'flow', 'graphviz', 'mermaid', 'abc', 'plantuml']
103+
var supportCharts = ['sequence', 'flow', 'graphviz', 'mermaid', 'abc', 'plantuml', 'vega']
104104
var supportHeaders = [
105105
{
106106
text: '# h1',

public/views/codimd/foot.ejs

Lines changed: 4 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -19,7 +19,10 @@
1919
<script src="https://cdnjs.cloudflare.com/ajax/libs/gist-embed/2.6.0/gist-embed.min.js" integrity="sha256-KyF2D6xPIJUW5sUDSs93vWyZm+1RzIpKCexxElmxl8g=" crossorigin="anonymous" defer></script>
2020
<script src="https://cdnjs.cloudflare.com/ajax/libs/viz.js/1.7.0/viz.js" integrity="sha256-8t+rndrF+TU4JtelmOH1lDHTMe2ovhO2UbzDArp5lY8=" crossorigin="anonymous" defer></script>
2121
<script src="https://cdnjs.cloudflare.com/ajax/libs/1000hz-bootstrap-validator/0.11.8/validator.min.js" integrity="sha256-LHeY7YoYJ0SSXbCx7sR14Pqna+52moaH3bhv0Mjzd/M=" crossorigin="anonymous" defer></script>
22-
<script src="https://cdnjs.cloudflare.com/ajax/libs/abcjs/3.1.1/abcjs_basic-min.js" integrity="sha256-Sq1r2XXWXQoShQKsS0Wrf5r7fRkErd9Fat9vHYeU68s=" crossorigin="anonymous"></script>
22+
<script src="https://cdnjs.cloudflare.com/ajax/libs/abcjs/3.1.1/abcjs_basic-min.js" integrity="sha256-Sq1r2XXWXQoShQKsS0Wrf5r7fRkErd9Fat9vHYeU68s=" crossorigin="anonymous" defer></script>
23+
<script src="https://cdnjs.cloudflare.com/ajax/libs/vega/5.4.0/vega.min.js" integrity="sha256-PrkRj4B3I5V9yHBLdO3jyyqNUwSKS1CXXIh3VrnFPEU=" crossorigin="anonymous" defer></script>
24+
<script src="https://cdnjs.cloudflare.com/ajax/libs/vega-lite/3.4.0/vega-lite.min.js" integrity="sha256-ro+FWr16NboXJ5rSwInNli1P16ObUXnWUJMgKc8KnHI=" crossorigin="anonymous" defer></script>
25+
<script src="https://cdnjs.cloudflare.com/ajax/libs/vega-embed/4.2.2/vega-embed.min.js" integrity="sha256-FvIpRBgWEczIjFNpbshtVJbx3QlxqxkBkf+xqZeOxUU=" crossorigin="anonymous" defer></script>
2326
<%- include ../build/index-scripts %>
2427
<% } else { %>
2528
<script src="<%- serverURL %>/build/MathJax/MathJax.js" defer></script>

public/views/pretty.ejs

Lines changed: 4 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -88,7 +88,10 @@
8888
<script src="https://cdnjs.cloudflare.com/ajax/libs/highlight.js/9.12.0/highlight.min.js" integrity="sha256-/BfiIkHlHoVihZdc6TFuj7MmJ0TWcWsMXkeDFwhi0zw=" crossorigin="anonymous" defer></script>
8989
<script src="https://cdnjs.cloudflare.com/ajax/libs/gist-embed/2.6.0/gist-embed.min.js" integrity="sha256-KyF2D6xPIJUW5sUDSs93vWyZm+1RzIpKCexxElmxl8g=" crossorigin="anonymous" defer></script>
9090
<script src="https://cdnjs.cloudflare.com/ajax/libs/viz.js/1.7.0/viz.js" integrity="sha256-8t+rndrF+TU4JtelmOH1lDHTMe2ovhO2UbzDArp5lY8=" crossorigin="anonymous" defer></script>
91-
<script src="https://cdnjs.cloudflare.com/ajax/libs/abcjs/3.1.1/abcjs_basic-min.js" integrity="sha256-Sq1r2XXWXQoShQKsS0Wrf5r7fRkErd9Fat9vHYeU68s=" crossorigin="anonymous"></script>
91+
<script src="https://cdnjs.cloudflare.com/ajax/libs/abcjs/3.1.1/abcjs_basic-min.js" integrity="sha256-Sq1r2XXWXQoShQKsS0Wrf5r7fRkErd9Fat9vHYeU68s=" crossorigin="anonymous" defer></script>
92+
<script src="https://cdnjs.cloudflare.com/ajax/libs/vega/5.4.0/vega.min.js" integrity="sha256-PrkRj4B3I5V9yHBLdO3jyyqNUwSKS1CXXIh3VrnFPEU=" crossorigin="anonymous" defer></script>
93+
<script src="https://cdnjs.cloudflare.com/ajax/libs/vega-lite/3.4.0/vega-lite.min.js" integrity="sha256-ro+FWr16NboXJ5rSwInNli1P16ObUXnWUJMgKc8KnHI=" crossorigin="anonymous" defer></script>
94+
<script src="https://cdnjs.cloudflare.com/ajax/libs/vega-embed/4.2.2/vega-embed.min.js" integrity="sha256-FvIpRBgWEczIjFNpbshtVJbx3QlxqxkBkf+xqZeOxUU=" crossorigin="anonymous" defer></script>
9295
<%- include build/pretty-scripts %>
9396
<% } else { %>
9497
<script src="<%- serverURL %>/build/MathJax/MathJax.js" defer></script>

public/views/slide.ejs

Lines changed: 4 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -104,7 +104,10 @@
104104
<script src="https://cdnjs.cloudflare.com/ajax/libs/highlight.js/9.15.9/highlight.min.js" integrity="sha256-/BfiIkHlHoVihZdc6TFuj7MmJ0TWcWsMXkeDFwhi0zw=" crossorigin="anonymous" defer></script>
105105
<script src="https://cdnjs.cloudflare.com/ajax/libs/gist-embed/2.6.0/gist-embed.min.js" integrity="sha256-KyF2D6xPIJUW5sUDSs93vWyZm+1RzIpKCexxElmxl8g=" crossorigin="anonymous" defer></script>
106106
<script src="https://cdnjs.cloudflare.com/ajax/libs/viz.js/2.1.2/viz.js" integrity="sha256-8t+rndrF+TU4JtelmOH1lDHTMe2ovhO2UbzDArp5lY8=" crossorigin="anonymous" defer></script>
107-
<script src="https://cdnjs.cloudflare.com/ajax/libs/abcjs/3.1.1/abcjs_basic-min.js" integrity="sha256-Sq1r2XXWXQoShQKsS0Wrf5r7fRkErd9Fat9vHYeU68s=" crossorigin="anonymous"></script>
107+
<script src="https://cdnjs.cloudflare.com/ajax/libs/abcjs/3.1.1/abcjs_basic-min.js" integrity="sha256-Sq1r2XXWXQoShQKsS0Wrf5r7fRkErd9Fat9vHYeU68s=" crossorigin="anonymous" defer></script>
108+
<script src="https://cdnjs.cloudflare.com/ajax/libs/vega/5.4.0/vega.min.js" integrity="sha256-PrkRj4B3I5V9yHBLdO3jyyqNUwSKS1CXXIh3VrnFPEU=" crossorigin="anonymous" defer></script>
109+
<script src="https://cdnjs.cloudflare.com/ajax/libs/vega-lite/3.4.0/vega-lite.min.js" integrity="sha256-ro+FWr16NboXJ5rSwInNli1P16ObUXnWUJMgKc8KnHI=" crossorigin="anonymous" defer></script>
110+
<script src="https://cdnjs.cloudflare.com/ajax/libs/vega-embed/4.2.2/vega-embed.min.js" integrity="sha256-FvIpRBgWEczIjFNpbshtVJbx3QlxqxkBkf+xqZeOxUU=" crossorigin="anonymous" defer></script>
108111
<%- include build/slide-scripts %>
109112
<% } else { %>
110113
<script src="<%- serverURL %>/build/MathJax/MathJax.js" defer></script>

webpack.common.js

Lines changed: 13 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -257,6 +257,9 @@ module.exports = {
257257
'imports-loader?Raphael=raphael!js-sequence-diagrams',
258258
'expose-loader?Viz!viz.js',
259259
'script-loader!abcjs',
260+
'script-loader!vega',
261+
'script-loader!vega-lite',
262+
'script-loader!vega-embed',
260263
'expose-loader?io!socket.io-client',
261264
'expose-loader?RevealMarkdown!reveal-markdown',
262265
path.join(__dirname, 'public/js/index.js')
@@ -292,6 +295,9 @@ module.exports = {
292295
'imports-loader?Raphael=raphael!js-sequence-diagrams',
293296
'expose-loader?Viz!viz.js',
294297
'script-loader!abcjs',
298+
'script-loader!vega',
299+
'script-loader!vega-lite',
300+
'script-loader!vega-embed',
295301
'expose-loader?RevealMarkdown!reveal-markdown',
296302
path.join(__dirname, 'public/js/pretty.js')
297303
],
@@ -330,6 +336,9 @@ module.exports = {
330336
'imports-loader?Raphael=raphael!js-sequence-diagrams',
331337
'expose-loader?Viz!viz.js',
332338
'script-loader!abcjs',
339+
'script-loader!vega',
340+
'script-loader!vega-lite',
341+
'script-loader!vega-embed',
333342
'headjs',
334343
'expose-loader?Reveal!reveal.js',
335344
'expose-loader?RevealMarkdown!reveal-markdown',
@@ -362,7 +371,10 @@ module.exports = {
362371
'reveal-markdown': path.join(__dirname, 'public/js/reveal-markdown.js'),
363372
abcjs: path.join(__dirname, 'public/vendor/abcjs_basic_3.1.1-min.js'),
364373
raphael: path.join(__dirname, 'node_modules/raphael/raphael.min.js'),
365-
'js-sequence-diagrams': path.join(__dirname, 'node_modules/@hackmd/js-sequence-diagrams/build/main.js')
374+
'js-sequence-diagrams': path.join(__dirname, 'node_modules/@hackmd/js-sequence-diagrams/build/main.js'),
375+
vega: path.join(__dirname, 'node_modules/vega/build/vega.min.js'),
376+
'vega-lite': path.join(__dirname, 'node_modules/vega-lite/build/vega-lite.min.js'),
377+
'vega-embed': path.join(__dirname, 'node_modules/vega-embed/build/vega-embed.min.js')
366378
}
367379
},
368380

0 commit comments

Comments
 (0)