WIP: Markdown template visualization

client/app/visualizations/markdown-template/MarkdownTemplateEditor.jsx

@@ -0,0 +1,21 @@
+import React from 'react';
+import Form from 'antd/lib/form';
+import Input from 'antd/lib/input';
+
+export default function MarkdownTemplateEditor({ options, onOptionsChange }) {
+  const onChange = (e) => {
+    // onOptionsChange(options);
+    options.template = e.target.value;
+    onOptionsChange(options);
+  };
+
+  const template = options.template;
+
+  return (
+    <Form layout="vertical">
+      <Form.Item label="Template">
+        <Input.TextArea rows={8} defaultValue={template} onChange={onChange} />
+      </Form.Item>
+    </Form>
+  );
+}

client/app/visualizations/markdown-template/MarkdownTemplateRenderer.jsx

@@ -0,0 +1,29 @@
+import React from 'react';
+import { markdown } from 'markdown';
+import Mustache from 'mustache';
+
+export default function MarkdownTemplateRenderer({ data, options }) {
+  const { template } = options;
+
+  if (!template) {
+    return null;
+  }
+
+  if (!data || !data.rows) {
+    return null;
+  }
+
+  let html = '';
+  try {
+    html = markdown.toHTML(Mustache.render(template, { rows: data.rows }));
+  } catch (exception) {
+    // ignore
+  }
+
+  const rendered = {
+    __html: html,
+  };
+
+  // eslint-disable-next-line react/no-danger
+  return <div dangerouslySetInnerHTML={rendered} />;
+}

client/app/visualizations/markdown-template/index.js

@@ -0,0 +1,20 @@
+import { registerVisualization } from '@/visualizations';
+import MarkdownTemplateRenderer from './MarkdownTemplateRenderer';
+import MarkdownTemplateEditor from './MarkdownTemplateEditor';
+
+const DEFAULT_OPTIONS = {};
+
+export default function init() {
+  registerVisualization({
+    type: 'MARKDOWN',
+    name: 'Markdown Template',
+    getOptions: options => ({ ...DEFAULT_OPTIONS, ...options }),
+    Renderer: MarkdownTemplateRenderer,
+    Editor: MarkdownTemplateEditor,
+
+    defaultColumns: 2,
+    defaultRows: 2,
+  });
+}
+
+init.init = true;