chore: smaller bundle, pic update, dumbbell plot (#78)

config/webpack.config.dev.js

@@ -336,7 +336,10 @@ module.exports = {
     ],
   },
   plugins: [
-    new MonacoWebpackPlugin(),
+    new MonacoWebpackPlugin({
+      // available options are documented at https://github.com/Microsoft/monaco-editor-webpack-plugin#options
+      languages: ['json', 'javascript'],
+    }),
     // Generates an `index.html` file with the <script> injected.
     new HtmlWebpackPlugin({
       inject: true,

config/webpack.config.prod.js

@@ -426,7 +426,10 @@ module.exports = {
     ],
   },
   plugins: [
-    new MonacoWebpackPlugin(),
+    new MonacoWebpackPlugin({
+      // available options are documented at https://github.com/Microsoft/monaco-editor-webpack-plugin#options
+      languages: ['json', 'javascript'],
+    }),
     // Generates an `index.html` file with the <script> injected.
     new HtmlWebpackPlugin({
       inject: true,

package.json

@@ -1,6 +1,6 @@
 {
   "name": "picassojs-studio",
-  "version": "0.1.4",
+  "version": "0.1.5",
   "private": true,
   "dependencies": {
     "@babel/core": "7.4.4",
@@ -33,9 +33,9 @@
     "monaco-editor": "0.16.2",
     "monaco-editor-webpack-plugin": "1.7.0",
     "optimize-css-assets-webpack-plugin": "5.0.1",
-    "picasso-plugin-hammer": "0.25.0",
-    "picasso-plugin-q": "0.25.0",
-    "picasso.js": "0.25.0",
+    "picasso-plugin-hammer": "0.25.2",
+    "picasso-plugin-q": "0.25.2",
+    "picasso.js": "0.25.2",
     "pnp-webpack-plugin": "1.4.3",
     "postcss-flexbugs-fixes": "4.1.0",
     "postcss-loader": "3.0.0",

src/examples/dumbbell-plot.js

@@ -0,0 +1,105 @@
+const code = `
+return {
+  collections: [{
+    key: 'd',
+    data: {
+      extract: {
+        field: 'Dim',
+        props: {
+          start: { field: 'Low' },
+          end: { field: 'High' },
+        },
+      },
+    },
+  }],
+  scales: {
+    y: {
+      data: { extract: { field: 'Dim' } },
+    },
+    v: {
+      data: { fields: ['Low', 'High'] },
+      expand: 0.1,
+    },
+  },
+  components: [{
+    type: 'grid-line',
+    y: 'y',
+  }, {
+    type: 'axis',
+    dock: 'left',
+    scale: 'y',
+  }, {
+    type: 'axis',
+    dock: 'bottom',
+    scale: 'v',
+  }, {
+    key: 'bars',
+    type: 'box',
+    data: {
+      collection: 'd',
+    },
+    settings: {
+      orientation: 'horizontal',
+      major: { scale: 'y' },
+      minor: { scale: 'v' },
+      box: {
+        width: 0.1,
+        fill: '#ccc',
+      },
+    },
+  }, {
+    type: 'point',
+    data: {
+      collection: 'd',
+    },
+    settings: {
+      x: { scale: 'v', ref: 'start' },
+      y: { scale: 'y' },
+      fill: '#fa0',
+      size: 0.8,
+    },
+  }, {
+    type: 'point',
+    data: {
+      collection: 'd',
+    },
+    settings: {
+      x: { scale: 'v', ref: 'end' },
+      y: { scale: 'y' },
+      fill: '#bdf700',
+      size: 0.8,
+    },
+  }],
+};
+`;
+
+const data = `
+var arr = [
+  ['Dim', 'Low', 'High']
+];
+
+var low = 50;
+var high;
+for (var m = 0; m < 24; m++) {
+  low = low + Math.random();
+  high = low + 1 + Math.random() * 5;
+  arr.push([
+    String.fromCharCode(65 + m),
+    low,
+    high
+  ]);
+}
+return [{
+  type: 'matrix',
+  data: arr
+}];
+`;
+
+const item = {
+  id: 'dumbbell-plot',
+  title: 'Dumbbell plot',
+  code,
+  data,
+};
+
+export default item;