chartwerk
/
core
4
0
Fork 0
Code Issues 26 Pull Requests Projects Releases Wiki Activity
Browse Source

build example

pull/14/head
vargburz 11 months ago
parent
0cb408c9b5
commit
a4251b69b7
7 changed files with 52 additions and 10 deletions
Whitespace
Show all changes Ignore whitespace when comparing lines Ignore changes in amount of whitespace Ignore changes in whitespace at EOL
Unified View
Diff Options
Show Stats Download Patch File Download Diff File
  1. 40
      build/webpack.demo.conf.js
  2. 5
      example/README.md
  3. 11
      example/example.html
  4. 2
      example/example_pod.ts
  5. 1
      package.json
  6. 1
      src/index.ts
  7. 2
      tsconfig.json

40
build/webpack.demo.conf.js
Unescape View File

@ -0,0 +1,40 @@
const path = require('path');
function resolve(dir) {
return path.join(__dirname, '..', dir)
}
module.exports = {
context: resolve('example'),
entry: './example_pod.ts',
plugins: [],
devtool: 'inline-source-map',
watch: true,
mode: 'development',
module: {
rules: [
{
test: /\.ts$/,
use: 'ts-loader',
exclude: /node_modules/
},
{
test: /\.css$/,
use: [
{ loader: 'style-loader', options: { injectType: 'lazyStyleTag' } },
'css-loader',
],
exclude: /node_modules/
}
],
},
resolve: {
extensions: ['.ts', '.js'],
},
output: {
filename: 'example.js',
path: resolve('example/dist'),
libraryTarget: 'umd',
umdNamedDefine: true
}
};

5
example/README.md
Unescape View File

@ -0,0 +1,5 @@
### HOW TO RUN
run `yarn run dev` and `yarn run demo` in separate terminals simultaneously.
open `example.html` in your browser.

11
example/example.html
Unescape View File

@ -4,7 +4,7 @@
<meta content="text/html;charset=utf-8" http-equiv="Content-Type"> <meta content="text/html;charset=utf-8" http-equiv="Content-Type">
<meta content="utf-8" http-equiv="encoding"> <meta content="utf-8" http-equiv="encoding">
<script src="../dist/index.dev.js" type="text/javascript"></script> <script src="./dist/example.js" type="text/javascript"></script>
</head> </head>
<body> <body>
<div id="chart" style="width: 50%; height: 500px;"></div> <div id="chart" style="width: 50%; height: 500px;"></div>
@ -15,10 +15,9 @@
const data1 = Array.from({ length: arrayLength }, (el, idx) => [startTime + idx * 10000, Math.floor(Math.random() * 40)]); const data1 = Array.from({ length: arrayLength }, (el, idx) => [startTime + idx * 10000, Math.floor(Math.random() * 40)]);
let options = { let options = {
renderLegend: false, usePanning: false, renderLegend: false,
axis: { axis: {
y: { invert: false, range: [0, 350] }, y: { range: [0, 350] },
y1: { isActive: true, range: [0, 10], ticksCount: 8 },
x: { format: 'time' } x: { format: 'time' }
}, },
zoomEvents: { zoomEvents: {
@ -29,9 +28,7 @@
var pod = new ExamplePod( var pod = new ExamplePod(
document.getElementById('chart'), document.getElementById('chart'),
[ [
{ target: 'test1', datapoints: data1, color: 'green', dashArray: '5,3', class: 'first', renderArea: true }, { target: 'test1', datapoints: data1, color: 'green' },
{ target: 'test2', datapoints: data2, color: 'blue', yOrientation: 'right' },
{ target: 'test3', datapoints: data3, color: 'orange' },
], ],
options options
); );

2
example/examplePod.ts → example/example_pod.ts
Unescape View File

@ -43,7 +43,7 @@ class ExamplePod extends ChartwerkPod<Serie, Options> {
.append('path') .append('path')
.datum(serie.datapoints) .datum(serie.datapoints)
.attr('class', `metric-path-${serie.idx} metric-el ${serie.class}`) .attr('class', `metric-path-${serie.idx} metric-el ${serie.class}`)
.attr('fill', serie.color) .attr('fill-opacity', 0)
.attr('stroke', serie.color) .attr('stroke', serie.color)
.attr('stroke-width', 1) .attr('stroke-width', 1)
.attr('stroke-opacity', 0.7) .attr('stroke-opacity', 0.7)

1
package.json
Unescape View File

@ -10,6 +10,7 @@
"scripts": { "scripts": {
"build": "webpack --config build/webpack.prod.conf.js", "build": "webpack --config build/webpack.prod.conf.js",
"dev": "webpack --config build/webpack.dev.conf.js", "dev": "webpack --config build/webpack.dev.conf.js",
"demo": "webpack --config build/webpack.demo.conf.js",
"test": "echo \"Error: no test specified\" && exit 1" "test": "echo \"Error: no test specified\" && exit 1"
}, },
"repository": { "repository": {

1
src/index.ts
Unescape View File

@ -102,6 +102,7 @@ abstract class ChartwerkPod<T extends Serie, O extends Options> {
} }
public render(): void { public render(): void {
console.log('tut');
this.options.callbackRenderStart(); this.options.callbackRenderStart();
this.renderClipPath(); this.renderClipPath();

2
tsconfig.json
Unescape View File

@ -1,7 +1,6 @@
{ {
"compilerOptions": { "compilerOptions": {
"target": "es5", "target": "es5",
"rootDir": "./src",
"module": "esnext", "module": "esnext",
"declaration": true, "declaration": true,
"declarationDir": "dist", "declarationDir": "dist",
@ -16,7 +15,6 @@
"noImplicitUseStrict": false, "noImplicitUseStrict": false,
"noImplicitAny": false, "noImplicitAny": false,
"noUnusedLocals": false, "noUnusedLocals": false,
"baseUrl": "./src",
"moduleResolution": "node" "moduleResolution": "node"
} }
} }

Write Preview
Loading…
Cancel
Save