Add chartjs

browser/components/MarkdownPreview.js

@@ -8,6 +8,7 @@ import consts from 'browser/lib/consts'
 import Raphael from 'raphael'
 import flowchart from 'flowchart'
 import SequenceDiagram from 'js-sequence-diagrams'
+import Chart from 'chart.js'
 import eventEmitter from 'browser/main/lib/eventEmitter'
 import htmlTextHelper from 'browser/lib/htmlTextHelper'
 import convertModeName from 'browser/lib/convertModeName'
@@ -412,7 +413,7 @@ export default class MarkdownPreview extends React.Component {
         value = value.replace(codeBlock, htmlTextHelper.encodeEntities(codeBlock))
       })
     }
-    let renderedHTML = this.markdown.render(value)
+    const renderedHTML = this.markdown.render(value)
     attachmentManagement.migrateAttachments(renderedHTML, storagePath, noteKey)
     this.refs.root.contentWindow.document.body.innerHTML = attachmentManagement.fixLocalURLS(renderedHTML, storagePath)
 
@@ -496,6 +497,21 @@ export default class MarkdownPreview extends React.Component {
         el.innerHTML = 'Sequence diagram parse error: ' + e.message
       }
     })
+
+    _.forEach(this.refs.root.contentWindow.document.querySelectorAll('.chart'), (el) => {
+      try {
+        const chartConfig = JSON.parse(el.innerHTML)
+        el.innerHTML = ''
+        var canvas = document.createElement('canvas')
+        el.appendChild(canvas)
+        /* eslint-disable no-new */
+        new Chart(canvas, chartConfig)
+      } catch (e) {
+        console.error(e)
+        el.className = 'chart-error'
+        el.innerHTML = 'chartjs diagram parse error: ' + e.message
+      }
+    })
   }
 
   focus () {

browser/components/markdown.styl

@@ -68,7 +68,7 @@ body
     padding 5px
     margin -5px
     border-radius 5px
-  .flowchart-error, .sequence-error
+  .flowchart-error, .sequence-error .chart-error
     background-color errorBackgroundColor
     color errorTextColor
     padding 5px
@@ -213,7 +213,7 @@ pre
   margin 0 0 1em
   display flex
   line-height 1.4em
-  &.flowchart, &.sequence
+  &.flowchart, &.sequence, &.chart
     display flex
     justify-content center
     background-color white