basic chartwerk project

README.md

@@ -1 +1,11 @@
 # gauge-pod
+
+
+## Run examples 
+
+```bash
+yarn install
+yarn build
+```
+
+then open `examples/01-basic.html` in browser

build/base.webpack.conf.js

@@ -0,0 +1,35 @@
+const path = require('path');
+
+
+function resolve(dir) {
+  return path.join(__dirname, '..', dir)
+}
+
+module.exports = {
+  context: resolve('src'),
+  entry: './index.ts',
+  plugins: [],
+  module: {
+    rules: [
+      {
+        test: /\.ts$/,
+        use: 'ts-loader',
+        exclude: /node_modules/
+      },
+      {
+        test: /\.css$/,
+        use: ['style-loader', 'css-loader'],
+        exclude: /node_modules/
+      }
+    ],
+  },
+  resolve: {
+    extensions: ['.ts', '.js'],
+  },
+  output: {
+    filename: 'index.js',
+    path: resolve('dist'),
+    libraryTarget: 'umd',
+    umdNamedDefine: true
+  }
+};

build/dev.webpack.conf.js

@@ -0,0 +1,8 @@
+const baseWebpackConfig = require('./base.webpack.conf');
+
+var conf = baseWebpackConfig;
+conf.devtool = 'inline-source-map';
+conf.watch = true;
+conf.mode = 'development';
+
+module.exports = conf;

build/prod.webpack.conf.js

@@ -0,0 +1,6 @@
+const baseWebpackConfig = require('./base.webpack.conf');
+
+var conf = baseWebpackConfig;
+conf.mode = 'production';
+
+module.exports = baseWebpackConfig;

package.json

@@ -0,0 +1,28 @@
+{
+  "name": "@chartwerk/gauge-pod",
+  "version": "0.1.0",
+  "description": "Chartwerk gauge pod",
+  "main": "dist/index.js",
+  "scripts": {
+    "build": "webpack --config build/prod.webpack.conf.js",
+    "dev": "webpack --config build/dev.webpack.conf.js",
+    "test": "echo \"Error: no test specified\" && exit 1"
+  },
+  "author": "CorpGlory",
+  "license": "Apache-2.0",
+  "dependencies": {
+    "@chartwerk/base": "github:chartwerk/base"
+  },
+  "devDependencies": {
+    "@types/d3": "^5.7.2",
+    "@types/lodash": "^4.14.149",
+    "css-loader": "^3.4.2",
+    "d3": "^5.15.0",
+    "lodash": "^4.17.15",
+    "style-loader": "^1.1.3",
+    "ts-loader": "^6.2.1",
+    "typescript": "^3.8.3",
+    "webpack": "^4.42.0",
+    "webpack-cli": "^3.3.11"
+  }
+}

src/index.ts

@@ -0,0 +1,54 @@
+import { ChartwerkBase, VueChartwerkBaseMixin, TickOrientation, TimeFormat, AxisFormat } from '@chartwerk/base';
+
+import * as d3 from 'd3';
+import * as _ from 'lodash';
+
+
+export class ChartwerkGaugePod extends ChartwerkBase<any, any> {
+  _metricsContainer: any;
+
+  constructor(el: HTMLElement, _series: any[] = [], _options: any = {}) {
+    super(d3, el, _series, _options);
+  }
+
+  _renderMetrics(): void {
+  }
+
+
+  onMouseOver(): void {
+    // TODO: add
+  }
+
+  onMouseMove(): void {
+    // TODO: add
+  }
+
+  onMouseOut(): void {
+    // TODO: add
+  }
+
+  renderSharedCrosshair(): void {}
+  hideSharedCrosshair(): void {}
+}
+
+// it is used with Vue.component, e.g.: Vue.component('chartwerk-gauge-pod', VueChartwerkGaugePodObject)
+export const VueChartwerkGaugePodObject = {
+  // alternative to `template: '<div class="chartwerk-gauge-pod" :id="id" />'`
+  render(createElement) {
+    return createElement(
+      'div',
+      {
+        class: { 'chartwerk-gauge-pod': true },
+        attrs: { id: this.id }
+      }
+    )
+  },
+  mixins: [VueChartwerkBaseMixin],
+  methods: {
+    render() {
+      const pod = new ChartwerkGaugePod(document.getElementById(this.id), this.series, this.options);
+      pod.render();
+    }
+  }
+};
+

tsconfig.json

@@ -0,0 +1,22 @@
+{
+  "compilerOptions": {
+    "target": "es5",
+    "rootDir": "./src",
+    "module": "esnext",
+    "moduleResolution": "node",
+    "declaration": true,
+    "declarationDir": "dist",
+    "allowSyntheticDefaultImports": true,
+    "inlineSourceMap": false,
+    "sourceMap": true,
+    "noEmitOnError": false,
+    "emitDecoratorMetadata": false,
+    "experimentalDecorators": true,
+    "noImplicitReturns": true,
+    "noImplicitThis": false,
+    "noImplicitUseStrict": false,
+    "noImplicitAny": false,
+    "noUnusedLocals": false,
+    "baseUrl": "./src"
+  }
+}