Fixed css

.kibana-plugin-helpers.json

@@ -0,0 +1,3 @@
+{
+  "styleSheetToCompile": "public/style/index.scss"
+}

README.md

@@ -0,0 +1,18 @@
+# canvas-csv-renderer
+
+> Adds a CSV renderer with options to export a datatable as a CSV file
+
+#### Example
+```
+filters
+| demodata
+| table
+| render as="csv"
+```
+
+---
+
+## Development
+
+See the [kibana contributing guide](https://github.com/elastic/kibana/blob/master/CONTRIBUTING.md) for instructions setting up your development environment.
+

index.js

@@ -0,0 +1,40 @@
+/*
+ * Licensed to Elasticsearch B.V. under one or more contributor
+ * license agreements. See the NOTICE file distributed with
+ * this work for additional information regarding copyright
+ * ownership. Elasticsearch B.V. licenses this file to you under
+ * the Apache License, Version 2.0 (the "License"); you may
+ * not use this file except in compliance with the License.
+ * You may obtain a copy of the License at
+ *
+ *    http://www.apache.org/licenses/LICENSE-2.0
+ *
+ * Unless required by applicable law or agreed to in writing,
+ * software distributed under the License is distributed on an
+ * "AS IS" BASIS, WITHOUT WARRANTIES OR CONDITIONS OF ANY
+ * KIND, either express or implied.  See the License for the
+ * specific language governing permissions and limitations
+ * under the License.
+ */
+
+import { resolve } from 'path';
+import { existsSync } from 'fs';
+
+export default function(kibana) {
+  return new kibana.Plugin({
+    require: ['interpreter', 'canvas'],
+    name: 'canvas-csv-renderer',
+    uiExports: {
+      // Tell Kibana that the files in `/public` should be loaded into the
+      // browser only when the user is in the Canvas app.
+      canvas: ['plugins/canvas-csv-renderer'],
+      styleSheetPaths: [resolve(__dirname, 'public/style/index.scss'), resolve(__dirname, 'public/style/index.css')].find(p => existsSync(p))],
+    },
+
+    config(Joi) {
+      return Joi.object({
+        enabled: Joi.boolean().default(true),
+      }).default();
+    },
+  });
+}

package.json

@@ -0,0 +1,37 @@
+{
+  "name": "canvas-csv-renderer",
+  "version": "0.1.5",
+  "description": "Adds a CSV renderer with options to export a datatable as a CSV file",
+  "main": "index.js",
+  "kibana": {
+    "version": "7.5.2",
+    "templateVersion": "1.0.0"
+  },
+  "license": "Unlicense",
+  "scripts": {
+    "preinstall": "node ../../preinstall_check",
+    "kbn": "node ../../scripts/kbn",
+    "es": "node ../../scripts/es",
+    "lint": "eslint .",
+    "start": "plugin-helpers start",
+    "test:server": "plugin-helpers test:server",
+    "test:browser": "plugin-helpers test:browser",
+    "build": "plugin-helpers build"
+  },
+  "devDependencies": {
+    "@elastic/eslint-config-kibana": "link:../../packages/eslint-config-kibana",
+    "@elastic/eslint-import-resolver-kibana": "link:../../packages/kbn-eslint-import-resolver-kibana",
+    "@kbn/expect": "link:../../packages/kbn-expect",
+    "@kbn/plugin-helpers": "link:../../packages/kbn-plugin-helpers",
+    "babel-eslint": "^10.0.1",
+    "eslint": "^5.16.0",
+    "eslint-plugin-babel": "^5.3.0",
+    "eslint-plugin-import": "^2.16.0",
+    "eslint-plugin-jest": "^22.4.1",
+    "eslint-plugin-jsx-a11y": "^6.2.1",
+    "eslint-plugin-mocha": "^5.3.0",
+    "eslint-plugin-no-unsanitized": "^3.0.2",
+    "eslint-plugin-prefer-object-spread": "^1.2.1",
+    "eslint-plugin-react": "^7.12.4"
+  }
+}

public/index.js

@@ -0,0 +1,5 @@
+import { csv } from './renderer';
+
+kbnInterpreter.register({
+  renderers: [csv],
+});

public/renderer/component.js

@@ -0,0 +1,33 @@
+import React from 'react';
+import fileSaver from 'file-saver';
+import { EuiCodeBlock, EuiButtonIcon } from '@elastic/eui';
+
+export const Csv = ({ datatable, height, width }) => {
+  const columns = datatable.columns.map(column => column.name).join(',');
+  const rows = datatable.rows
+    .map(row => datatable.columns.map(column => row[column.name]).join(','))
+    .join('\n');
+  const onClick = () => {
+    const csvBlob = new Blob([columns, '\n', rows], {
+      type: 'text/csv',
+    });
+    fileSaver.saveAs(csvBlob, `datatable.csv`);
+  };
+
+  return (
+    <div className="canvasCsv" style={{ width, height, position: 'relative' }}>
+      <EuiCodeBlock className="canvasCsv__code" isCopyable paddingSize="m" overflowHeight={height}>
+        <pre className="canvasCsv__content">
+          <p>{columns}</p>
+          {rows}
+        </pre>
+      </EuiCodeBlock>
+      <EuiButtonIcon
+        {...{ onClick }}
+        className="canvasCsv__button"
+        iconType="exportAction"
+        color="text"
+      />
+    </div>
+  );
+};

public/renderer/index.js

@@ -0,0 +1,30 @@
+import ReactDOM from 'react-dom';
+import React from 'react';
+import { Csv } from './component';
+
+export const csv = () => ({
+  name: 'csv',
+  displayName: 'CSV Format',
+  help: 'Render a datatable in CSV format',
+  reuseDomNode: true,
+  render(domNode, config, handlers) {
+    const { datatable } = config;
+
+    if (!datatable) {
+      return;
+    }
+
+    const renderCSV = () => {
+      const { offsetHeight: height, offsetWidth: width } = domNode;
+      return <Csv {...{ datatable, height, width }} />;
+    };
+
+    ReactDOM.render(renderCSV(), domNode, () => handlers.done());
+
+    handlers.onResize(() => {
+      ReactDOM.render(renderCSV(), domNode, () => handlers.done());
+    });
+
+    handlers.onDestroy(() => ReactDOM.unmountComponentAtNode(domNode));
+  },
+});

public/style/index.scss

@@ -0,0 +1,28 @@
+@import '../../../../node_modules/@elastic/eui/src/global_styling/functions/index';
+@import '../../../../node_modules/@elastic/eui/src/global_styling/variables/index';
+@import '../../../../node_modules/@elastic/eui/src/global_styling/mixins/index';
+
+.canvasCsv {
+  position: relative;
+
+  .canvasCsv__code {
+    padding: 0;
+    width: 100%;
+    height: 100%;
+  }
+
+  .canvasCsv__content {
+    @include euiScrollBar;
+    width: 100%;
+    height: 100%;
+    overflow: auto;
+  }
+
+  .canvasCsv__button {
+    position: absolute;
+    right: 16px;
+    top: 68px;
+    transition: opacity $euiAnimSpeedFast $euiAnimSlightResistance;
+    transition-delay: $euiAnimSpeedNormal;
+  }
+}