chartwerk
/
line-pod
4
0
Fork 0
Code Issues 31 Pull Requests 1 Projects Releases 1 Wiki Activity
Browse Source

external core dep

merge-requests/23/head
rozetko 2 years ago
parent
7e4dc84f45
commit
012434093c
8 changed files with 2974 additions and 3225 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. 2
      build/webpack.dev.conf.js
  2. 3
      build/webpack.prod.conf.js
  3. 2
      examples/demo.html
  4. 2
      examples/demo_live.html
  5. 2
      examples/demo_vertical.html
  6. 10
      package.json
  7. 20
      src/index.ts
  8. 6158
      yarn.lock

2
build/webpack.dev.conf.js
Unescape View File

@ -2,7 +2,7 @@ const baseWebpackConfig = require('./webpack.base.conf');
var conf = baseWebpackConfig; var conf = baseWebpackConfig;
conf.devtool = 'inline-source-map'; conf.devtool = 'inline-source-map';
conf.watch = true;
conf.mode = 'development'; conf.mode = 'development';
conf.output.filename = 'index.dev.js';
module.exports = conf; module.exports = conf;

3
build/webpack.prod.conf.js
Unescape View File

@ -2,5 +2,8 @@ const baseWebpackConfig = require('./webpack.base.conf');
var conf = baseWebpackConfig; var conf = baseWebpackConfig;
conf.mode = 'production'; conf.mode = 'production';
conf.externals = [
'@chartwerk/core'
];
module.exports = baseWebpackConfig; module.exports = baseWebpackConfig;

2
examples/demo.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.js" type="text/javascript"></script> <script src="../dist/index.dev.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>

2
examples/demo_live.html
Unescape View File

@ -5,7 +5,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.js" type="text/javascript"></script> <script src="../dist/index.dev.js" type="text/javascript"></script>
</head> </head>
<body> <body>

2
examples/demo_vertical.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.js" type="text/javascript"></script> <script src="../dist/index.dev.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>

10
package.json
Unescape View File

@ -4,8 +4,8 @@
"description": "Chartwerk line chart", "description": "Chartwerk line chart",
"main": "dist/index.js", "main": "dist/index.js",
"scripts": { "scripts": {
"build": "webpack --config build/webpack.prod.conf.js", "build": "webpack --config build/webpack.prod.conf.js && webpack --config build/webpack.dev.conf.js",
"dev": "webpack --config build/webpack.dev.conf.js", "dev": "webpack --watch --config build/webpack.dev.conf.js",
"test": "echo \"Error: no test specified\" && exit 1" "test": "echo \"Error: no test specified\" && exit 1"
}, },
"repository": { "repository": {
@ -15,14 +15,10 @@
"author": "CorpGlory", "author": "CorpGlory",
"license": "ISC", "license": "ISC",
"dependencies": { "dependencies": {
"@chartwerk/core": "^0.4.0" "@chartwerk/core": "^0.5.0-beta2"
}, },
"devDependencies": { "devDependencies": {
"@types/d3": "5.16.4",
"@types/lodash": "^4.14.149",
"css-loader": "^3.4.2", "css-loader": "^3.4.2",
"d3": "5.16.0",
"lodash": "^4.17.15",
"style-loader": "^1.1.3", "style-loader": "^1.1.3",
"ts-loader": "^6.2.1", "ts-loader": "^6.2.1",
"typescript": "^3.8.3", "typescript": "^3.8.3",

20
src/index.ts
Unescape View File

@ -14,7 +14,7 @@ export class LinePod extends ChartwerkPod<LineTimeSerie, LineOptions> {
areaGenerator = null; areaGenerator = null;
constructor(_el: HTMLElement, _series: LineTimeSerie[] = [], _options: LineOptions = {}) { constructor(_el: HTMLElement, _series: LineTimeSerie[] = [], _options: LineOptions = {}) {
super(d3, _el, _series, _options); super(_el, _series, _options);
} }
renderMetrics(): void { renderMetrics(): void {
@ -62,13 +62,13 @@ export class LinePod extends ChartwerkPod<LineTimeSerie, LineOptions> {
} }
initLineGenerator(): void { initLineGenerator(): void {
this.lineGenerator = this.d3.line() this.lineGenerator = d3.line()
.x(d => this.xScale(d[0])) .x(d => this.xScale(d[0]))
.y(d => this.yScale(d[1])); .y(d => this.yScale(d[1]));
} }
initAreaGenerator(): void { initAreaGenerator(): void {
this.areaGenerator = this.d3.area() this.areaGenerator = d3.area()
.x(d => this.xScale(d[0])) .x(d => this.xScale(d[0]))
.y1(d => this.yScale(d[1])) .y1(d => this.yScale(d[1]))
.y0(d => this.height); .y0(d => this.height);
@ -169,7 +169,7 @@ export class LinePod extends ChartwerkPod<LineTimeSerie, LineOptions> {
} }
if(metricOptions.mode === Mode.CHARGE) { if(metricOptions.mode === Mode.CHARGE) {
const dataPairs = this.d3.pairs(datapoints); const dataPairs = d3.pairs(datapoints);
this.metricContainer.selectAll(null) this.metricContainer.selectAll(null)
.data(dataPairs) .data(dataPairs)
.enter() .enter()
@ -325,7 +325,7 @@ export class LinePod extends ChartwerkPod<LineTimeSerie, LineOptions> {
} }
// TODO: d3.bisect is not the best way. Use binary search // TODO: d3.bisect is not the best way. Use binary search
const bisectIndex = this.d3.bisector((d: [number, number]) => d[columnIdx]).left; const bisectIndex = d3.bisector((d: [number, number]) => d[columnIdx]).left;
let closestIdx = bisectIndex(datapoints, value); let closestIdx = bisectIndex(datapoints, value);
// TODO: refactor corner cases // TODO: refactor corner cases
@ -364,8 +364,8 @@ export class LinePod extends ChartwerkPod<LineTimeSerie, LineOptions> {
} }
onMouseMove(): void { onMouseMove(): void {
const eventX = this.d3.mouse(this.chartContainer.node())[0]; const eventX = d3.mouse(this.chartContainer.node())[0];
const eventY = this.d3.mouse(this.chartContainer.node())[1]; const eventY = d3.mouse(this.chartContainer.node())[1];
const xValue = this.xScale.invert(eventX); // mouse x position in xScale const xValue = this.xScale.invert(eventX); // mouse x position in xScale
const yValue = this.yScale.invert(eventY); const yValue = this.yScale.invert(eventY);
// TODO: isOutOfChart is a hack, use clip path correctly // TODO: isOutOfChart is a hack, use clip path correctly
@ -383,8 +383,8 @@ export class LinePod extends ChartwerkPod<LineTimeSerie, LineOptions> {
// TDOO: is shift key pressed // TDOO: is shift key pressed
// TODO: need to refactor this object // TODO: need to refactor this object
this.options.eventsCallbacks.mouseMove({ this.options.eventsCallbacks.mouseMove({
x: this.d3.event.pageX, x: d3.event.pageX,
y: this.d3.event.pageY, y: d3.event.pageY,
xVal: xValue, xVal: xValue,
yVal: yValue, yVal: yValue,
series: datapoints, series: datapoints,
@ -481,7 +481,7 @@ export class LinePod extends ChartwerkPod<LineTimeSerie, LineOptions> {
if(this.isOutOfChart() === true) { if(this.isOutOfChart() === true) {
return; return;
} }
if(this.d3.event.type === 'dblclick' && !this.isDoubleClickActive()) { if(d3.event.type === 'dblclick' && !this.isDoubleClickActive()) {
return; return;
} }
// TODO: its not clear, why we use this orientation here. Mb its better to use separate option // TODO: its not clear, why we use this orientation here. Mb its better to use separate option

6158
yarn.lock
View File

File diff suppressed because it is too large Load Diff
Write Preview
Loading…
Cancel
Save