Alexander Velikiy
3 years ago
17 changed files with 5757 additions and 2 deletions
@ -0,0 +1,201 @@
|
||||
Apache License |
||||
Version 2.0, January 2004 |
||||
http://www.apache.org/licenses/ |
||||
|
||||
TERMS AND CONDITIONS FOR USE, REPRODUCTION, AND DISTRIBUTION |
||||
|
||||
1. Definitions. |
||||
|
||||
"License" shall mean the terms and conditions for use, reproduction, |
||||
and distribution as defined by Sections 1 through 9 of this document. |
||||
|
||||
"Licensor" shall mean the copyright owner or entity authorized by |
||||
the copyright owner that is granting the License. |
||||
|
||||
"Legal Entity" shall mean the union of the acting entity and all |
||||
other entities that control, are controlled by, or are under common |
||||
control with that entity. For the purposes of this definition, |
||||
"control" means (i) the power, direct or indirect, to cause the |
||||
direction or management of such entity, whether by contract or |
||||
otherwise, or (ii) ownership of fifty percent (50%) or more of the |
||||
outstanding shares, or (iii) beneficial ownership of such entity. |
||||
|
||||
"You" (or "Your") shall mean an individual or Legal Entity |
||||
exercising permissions granted by this License. |
||||
|
||||
"Source" form shall mean the preferred form for making modifications, |
||||
including but not limited to software source code, documentation |
||||
source, and configuration files. |
||||
|
||||
"Object" form shall mean any form resulting from mechanical |
||||
transformation or translation of a Source form, including but |
||||
not limited to compiled object code, generated documentation, |
||||
and conversions to other media types. |
||||
|
||||
"Work" shall mean the work of authorship, whether in Source or |
||||
Object form, made available under the License, as indicated by a |
||||
copyright notice that is included in or attached to the work |
||||
(an example is provided in the Appendix below). |
||||
|
||||
"Derivative Works" shall mean any work, whether in Source or Object |
||||
form, that is based on (or derived from) the Work and for which the |
||||
editorial revisions, annotations, elaborations, or other modifications |
||||
represent, as a whole, an original work of authorship. For the purposes |
||||
of this License, Derivative Works shall not include works that remain |
||||
separable from, or merely link (or bind by name) to the interfaces of, |
||||
the Work and Derivative Works thereof. |
||||
|
||||
"Contribution" shall mean any work of authorship, including |
||||
the original version of the Work and any modifications or additions |
||||
to that Work or Derivative Works thereof, that is intentionally |
||||
submitted to Licensor for inclusion in the Work by the copyright owner |
||||
or by an individual or Legal Entity authorized to submit on behalf of |
||||
the copyright owner. For the purposes of this definition, "submitted" |
||||
means any form of electronic, verbal, or written communication sent |
||||
to the Licensor or its representatives, including but not limited to |
||||
communication on electronic mailing lists, source code control systems, |
||||
and issue tracking systems that are managed by, or on behalf of, the |
||||
Licensor for the purpose of discussing and improving the Work, but |
||||
excluding communication that is conspicuously marked or otherwise |
||||
designated in writing by the copyright owner as "Not a Contribution." |
||||
|
||||
"Contributor" shall mean Licensor and any individual or Legal Entity |
||||
on behalf of whom a Contribution has been received by Licensor and |
||||
subsequently incorporated within the Work. |
||||
|
||||
2. Grant of Copyright License. Subject to the terms and conditions of |
||||
this License, each Contributor hereby grants to You a perpetual, |
||||
worldwide, non-exclusive, no-charge, royalty-free, irrevocable |
||||
copyright license to reproduce, prepare Derivative Works of, |
||||
publicly display, publicly perform, sublicense, and distribute the |
||||
Work and such Derivative Works in Source or Object form. |
||||
|
||||
3. Grant of Patent License. Subject to the terms and conditions of |
||||
this License, each Contributor hereby grants to You a perpetual, |
||||
worldwide, non-exclusive, no-charge, royalty-free, irrevocable |
||||
(except as stated in this section) patent license to make, have made, |
||||
use, offer to sell, sell, import, and otherwise transfer the Work, |
||||
where such license applies only to those patent claims licensable |
||||
by such Contributor that are necessarily infringed by their |
||||
Contribution(s) alone or by combination of their Contribution(s) |
||||
with the Work to which such Contribution(s) was submitted. If You |
||||
institute patent litigation against any entity (including a |
||||
cross-claim or counterclaim in a lawsuit) alleging that the Work |
||||
or a Contribution incorporated within the Work constitutes direct |
||||
or contributory patent infringement, then any patent licenses |
||||
granted to You under this License for that Work shall terminate |
||||
as of the date such litigation is filed. |
||||
|
||||
4. Redistribution. You may reproduce and distribute copies of the |
||||
Work or Derivative Works thereof in any medium, with or without |
||||
modifications, and in Source or Object form, provided that You |
||||
meet the following conditions: |
||||
|
||||
(a) You must give any other recipients of the Work or |
||||
Derivative Works a copy of this License; and |
||||
|
||||
(b) You must cause any modified files to carry prominent notices |
||||
stating that You changed the files; and |
||||
|
||||
(c) You must retain, in the Source form of any Derivative Works |
||||
that You distribute, all copyright, patent, trademark, and |
||||
attribution notices from the Source form of the Work, |
||||
excluding those notices that do not pertain to any part of |
||||
the Derivative Works; and |
||||
|
||||
(d) If the Work includes a "NOTICE" text file as part of its |
||||
distribution, then any Derivative Works that You distribute must |
||||
include a readable copy of the attribution notices contained |
||||
within such NOTICE file, excluding those notices that do not |
||||
pertain to any part of the Derivative Works, in at least one |
||||
of the following places: within a NOTICE text file distributed |
||||
as part of the Derivative Works; within the Source form or |
||||
documentation, if provided along with the Derivative Works; or, |
||||
within a display generated by the Derivative Works, if and |
||||
wherever such third-party notices normally appear. The contents |
||||
of the NOTICE file are for informational purposes only and |
||||
do not modify the License. You may add Your own attribution |
||||
notices within Derivative Works that You distribute, alongside |
||||
or as an addendum to the NOTICE text from the Work, provided |
||||
that such additional attribution notices cannot be construed |
||||
as modifying the License. |
||||
|
||||
You may add Your own copyright statement to Your modifications and |
||||
may provide additional or different license terms and conditions |
||||
for use, reproduction, or distribution of Your modifications, or |
||||
for any such Derivative Works as a whole, provided Your use, |
||||
reproduction, and distribution of the Work otherwise complies with |
||||
the conditions stated in this License. |
||||
|
||||
5. Submission of Contributions. Unless You explicitly state otherwise, |
||||
any Contribution intentionally submitted for inclusion in the Work |
||||
by You to the Licensor shall be under the terms and conditions of |
||||
this License, without any additional terms or conditions. |
||||
Notwithstanding the above, nothing herein shall supersede or modify |
||||
the terms of any separate license agreement you may have executed |
||||
with Licensor regarding such Contributions. |
||||
|
||||
6. Trademarks. This License does not grant permission to use the trade |
||||
names, trademarks, service marks, or product names of the Licensor, |
||||
except as required for reasonable and customary use in describing the |
||||
origin of the Work and reproducing the content of the NOTICE file. |
||||
|
||||
7. Disclaimer of Warranty. Unless required by applicable law or |
||||
agreed to in writing, Licensor provides the Work (and each |
||||
Contributor provides its Contributions) on an "AS IS" BASIS, |
||||
WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or |
||||
implied, including, without limitation, any warranties or conditions |
||||
of TITLE, NON-INFRINGEMENT, MERCHANTABILITY, or FITNESS FOR A |
||||
PARTICULAR PURPOSE. You are solely responsible for determining the |
||||
appropriateness of using or redistributing the Work and assume any |
||||
risks associated with Your exercise of permissions under this License. |
||||
|
||||
8. Limitation of Liability. In no event and under no legal theory, |
||||
whether in tort (including negligence), contract, or otherwise, |
||||
unless required by applicable law (such as deliberate and grossly |
||||
negligent acts) or agreed to in writing, shall any Contributor be |
||||
liable to You for damages, including any direct, indirect, special, |
||||
incidental, or consequential damages of any character arising as a |
||||
result of this License or out of the use or inability to use the |
||||
Work (including but not limited to damages for loss of goodwill, |
||||
work stoppage, computer failure or malfunction, or any and all |
||||
other commercial damages or losses), even if such Contributor |
||||
has been advised of the possibility of such damages. |
||||
|
||||
9. Accepting Warranty or Additional Liability. While redistributing |
||||
the Work or Derivative Works thereof, You may choose to offer, |
||||
and charge a fee for, acceptance of support, warranty, indemnity, |
||||
or other liability obligations and/or rights consistent with this |
||||
License. However, in accepting such obligations, You may act only |
||||
on Your own behalf and on Your sole responsibility, not on behalf |
||||
of any other Contributor, and only if You agree to indemnify, |
||||
defend, and hold each Contributor harmless for any liability |
||||
incurred by, or claims asserted against, such Contributor by reason |
||||
of your accepting any such warranty or additional liability. |
||||
|
||||
END OF TERMS AND CONDITIONS |
||||
|
||||
APPENDIX: How to apply the Apache License to your work. |
||||
|
||||
To apply the Apache License to your work, attach the following |
||||
boilerplate notice, with the fields enclosed by brackets "[]" |
||||
replaced with your own identifying information. (Don't include |
||||
the brackets!) The text should be enclosed in the appropriate |
||||
comment syntax for the file format. We also recommend that a |
||||
file or class name and description of purpose be included on the |
||||
same "printed page" as the copyright notice for easier |
||||
identification within third-party archives. |
||||
|
||||
Copyright [yyyy] [name of copyright owner] |
||||
|
||||
Licensed 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. |
@ -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 |
||||
} |
||||
}; |
@ -0,0 +1,8 @@
|
||||
const baseWebpackConfig = require('./webpack.base.conf'); |
||||
|
||||
var conf = baseWebpackConfig; |
||||
conf.devtool = 'inline-source-map'; |
||||
conf.watch = true; |
||||
conf.mode = 'development'; |
||||
|
||||
module.exports = conf; |
@ -0,0 +1,6 @@
|
||||
const baseWebpackConfig = require('./webpack.base.conf'); |
||||
|
||||
var conf = baseWebpackConfig; |
||||
conf.mode = 'production'; |
||||
|
||||
module.exports = baseWebpackConfig; |
@ -0,0 +1,99 @@
|
||||
import { ChartwerkPod, TickOrientation, TimeFormat } from '@chartwerk/core'; |
||||
import { LineTimeSerie, LineOptions, Mode } from './types'; |
||||
export declare class ChartwerkLineChart extends ChartwerkPod<LineTimeSerie, LineOptions> { |
||||
lineGenerator: any; |
||||
metricContainer: any; |
||||
constructor(_el: HTMLElement, _series?: LineTimeSerie[], _options?: LineOptions); |
||||
renderMetrics(): void; |
||||
initLineGenerator(): void; |
||||
appendData(data: [number, number][]): void; |
||||
_renderDots(datapoints: number[][], serieIdx: number): void; |
||||
_renderLines(datapoints: number[][], serieIdx: number): void; |
||||
_renderMetric(datapoints: number[][], metricOptions: { |
||||
color: string; |
||||
confidence: number; |
||||
target: string; |
||||
mode: Mode; |
||||
serieIdx: number; |
||||
renderDots: boolean; |
||||
renderLines: boolean; |
||||
}): void; |
||||
updateCrosshair(): void; |
||||
appendCrosshairCircles(): void; |
||||
appendCrosshairCircle(serieIdx: number): void; |
||||
renderSharedCrosshair(values: { |
||||
x?: number; |
||||
y?: number; |
||||
}): void; |
||||
hideSharedCrosshair(): void; |
||||
moveCrosshairLine(xPosition: number, yPosition: number): void; |
||||
moveCrosshairCircle(xPosition: number, yPosition: number, serieIdx: number): void; |
||||
hideCrosshairCircle(serieIdx: number): void; |
||||
getClosestDatapoint(serie: LineTimeSerie, xValue: number, yValue: number): [number, number]; |
||||
getClosestIndex(datapoints: [number, number][], xValue: number, yValue: number): number; |
||||
getValueInterval(columnIdx: number): number | undefined; |
||||
onMouseMove(): void; |
||||
findAndHighlightDatapoints(xValue: number, yValue: number): { |
||||
value: [number, number]; |
||||
color: string; |
||||
label: string; |
||||
}[]; |
||||
isOutOfRange(closestDatapoint: [number, number], xValue: number, yValue: number, useOutOfRange?: boolean): boolean; |
||||
onMouseOver(): void; |
||||
onMouseOut(): void; |
||||
} |
||||
export declare const VueChartwerkLineChartObject: { |
||||
render(createElement: any): any; |
||||
mixins: { |
||||
props: { |
||||
id: { |
||||
type: StringConstructor; |
||||
required: boolean; |
||||
}; |
||||
series: { |
||||
type: ArrayConstructor; |
||||
required: boolean; |
||||
default: () => any[]; |
||||
}; |
||||
options: { |
||||
type: ObjectConstructor; |
||||
required: boolean; |
||||
default: () => {}; |
||||
}; |
||||
}; |
||||
watch: { |
||||
id(): void; |
||||
series(): void; |
||||
options(): void; |
||||
}; |
||||
mounted(): void; |
||||
destroyed(): void; |
||||
methods: { |
||||
render(): void; |
||||
renderSharedCrosshair(values: { |
||||
x?: number; |
||||
y?: number; |
||||
}): void; |
||||
hideSharedCrosshair(): void; |
||||
onPanningRescale(event: any): void; |
||||
renderChart(): void; |
||||
appendEvents(): void; |
||||
zoomIn(range: any): void; |
||||
zoomOut(centers: any): void; |
||||
mouseMove(evt: any): void; |
||||
mouseOut(): void; |
||||
onLegendClick(idx: any): void; |
||||
panningEnd(range: any): void; |
||||
panning(range: any): void; |
||||
contextMenu(evt: any): void; |
||||
sharedCrosshairMove(event: any): void; |
||||
renderEnd(): void; |
||||
}; |
||||
}[]; |
||||
methods: { |
||||
render(): void; |
||||
renderSharedCrosshair(values: any): void; |
||||
hideSharedCrosshair(): void; |
||||
}; |
||||
}; |
||||
export { LineTimeSerie, LineOptions, Mode, TickOrientation, TimeFormat }; |
File diff suppressed because one or more lines are too long
@ -0,0 +1,16 @@
|
||||
import { TimeSerie, Options } from '@chartwerk/core'; |
||||
declare type LineTimeSerieParams = { |
||||
confidence: number; |
||||
mode: Mode; |
||||
maxLength: number; |
||||
renderDots: boolean; |
||||
renderLines: boolean; |
||||
useOutOfRange: boolean; |
||||
}; |
||||
export declare enum Mode { |
||||
STANDARD = "Standard", |
||||
CHARGE = "Charge" |
||||
} |
||||
export declare type LineTimeSerie = TimeSerie & Partial<LineTimeSerieParams>; |
||||
export declare type LineOptions = Options; |
||||
export {}; |
@ -0,0 +1,36 @@
|
||||
<!DOCTYPE html> |
||||
<html> |
||||
<head> |
||||
<meta content="text/html;charset=utf-8" http-equiv="Content-Type"> |
||||
<meta content="utf-8" http-equiv="encoding"> |
||||
|
||||
<script src="../dist/index.js" type="text/javascript"></script> |
||||
</head> |
||||
<body> |
||||
<div id="chart" style="width: 500px; height: 500px;"></div> |
||||
|
||||
<script type="text/javascript"> |
||||
const startTime = 1590590148; |
||||
const arrayLength = 20; |
||||
const data1 = Array.from({ length: arrayLength }, (el, idx) => [Math.floor(Math.random() * 40), startTime + idx * 10000]); |
||||
const data2 = Array.from({ length: arrayLength }, (el, idx) => [Math.floor(Math.random() * 100), startTime + idx * 10000]); |
||||
const data3 = Array.from({ length: arrayLength }, (el, idx) => [Math.floor(Math.random() * 20) + 90, startTime + idx * 10000]); |
||||
const zoomIn = (ranges) => { const range = ranges[0]; options.axis.x.range = range; pod.updateData(undefined, options) } |
||||
const zoomOut = (ranges) => { console.log('zoomout'); options.axis.x.range = undefined; pod.updateData(undefined, options) } |
||||
let options = { |
||||
renderLegend: false, usePanning: false, axis: { y: { invert: false, range: [0, 350] }, x: { format: 'time' } }, |
||||
eventsCallbacks: { zoomIn: zoomIn, zoomOut } |
||||
} |
||||
var pod = new ChartwerkLineChart( |
||||
document.getElementById('chart'), |
||||
[ |
||||
{ target: 'test1', datapoints: data1, color: 'green' }, |
||||
{ target: 'test2', datapoints: data2, color: 'blue' }, |
||||
{ target: 'test3', datapoints: data3, color: 'orange' }, |
||||
], |
||||
options |
||||
); |
||||
pod.render(); |
||||
</script> |
||||
</body> |
||||
</html> |
@ -0,0 +1,48 @@
|
||||
<!DOCTYPE html> |
||||
<html> |
||||
|
||||
<head> |
||||
<meta content="text/html;charset=utf-8" http-equiv="Content-Type"> |
||||
<meta content="utf-8" http-equiv="encoding"> |
||||
|
||||
<script src="../dist/index.js" type="text/javascript"></script> |
||||
</head> |
||||
|
||||
<body> |
||||
<div id="chart" style="width: 500px; height: 500px;"></div> |
||||
|
||||
<script type="text/javascript"> |
||||
const startTime = 1590590148; |
||||
const arrayLength = 100; |
||||
const data1 = Array.from({ length: arrayLength }, (el, idx) => [Math.floor(Math.random() * 40), startTime + idx * 10000]); |
||||
const data2 = Array.from({ length: arrayLength }, (el, idx) => [Math.floor(Math.random() * 100), startTime + idx * 10000]); |
||||
const data3 = Array.from({ length: arrayLength }, (el, idx) => [Math.floor(Math.random() * 20) + 90, startTime + idx * 10000]); |
||||
let options = { renderLegend: false, usePanning: false, axis: { y: { invert: false, range: [0, 350] }, x: { format: 'time' } } }; |
||||
var pod = new ChartwerkLineChart( |
||||
document.getElementById('chart'), |
||||
[ |
||||
{ target: 'test1', datapoints: data1, color: 'green', maxLength: arrayLength + 30, renderDots: true }, |
||||
{ target: 'test2', datapoints: data2, color: 'blue', maxLength: arrayLength + 30, renderDots: true }, |
||||
{ target: 'test3', datapoints: data3, color: 'orange', maxLength: arrayLength + 30, renderDots: true }, |
||||
], |
||||
options |
||||
); |
||||
pod.render(); |
||||
let rerenderIdx = arrayLength; |
||||
var test = setInterval(() => { |
||||
rerenderIdx += 1; |
||||
const d1 = [Math.floor(Math.random() * 40), startTime + rerenderIdx * 10000]; |
||||
const d2 = [Math.floor(Math.random() * 100), startTime + rerenderIdx * 10000]; |
||||
const d3 = [Math.floor(Math.random() * 20) + 90, startTime + rerenderIdx * 10000]; |
||||
|
||||
console.time('rerender'); |
||||
pod.appendData([d1, d2, d3]); |
||||
console.timeEnd('rerender'); |
||||
if(rerenderIdx > arrayLength + 100) { |
||||
clearInterval(test); |
||||
} |
||||
}, 1000); |
||||
</script> |
||||
</body> |
||||
|
||||
</html> |
@ -0,0 +1,90 @@
|
||||
<!DOCTYPE html> |
||||
<html> |
||||
<head> |
||||
<meta content="text/html;charset=utf-8" http-equiv="Content-Type"> |
||||
<meta content="utf-8" http-equiv="encoding"> |
||||
|
||||
<script src="../dist/index.js" type="text/javascript"></script> |
||||
</head> |
||||
<body> |
||||
<div id="chart" style="width: 50%; height: 500px;"></div> |
||||
|
||||
<script type="text/javascript"> |
||||
const startTime = 1590590148; |
||||
const arrayLength = 20; |
||||
const data1 = createDatapoints(arrayLength, startTime, 40); |
||||
const data2 = createDatapoints(arrayLength, startTime, 30, 50); |
||||
const data3 = createDatapoints(arrayLength, startTime, 20, 90); |
||||
|
||||
let options = { |
||||
renderLegend: false, |
||||
axis: { |
||||
y: { invert: true, valueFormatter: timeValueFormatter, format: 'custom', colorFormatter: colorFormatter }, |
||||
x: { format: 'numeric' } |
||||
}, |
||||
zoomEvents: { |
||||
mouse: { |
||||
pan: { isActive: true, orientation: 'vertical', keyEvent: 'shift' }, |
||||
zoom: { isActive: true, orientation: 'vertical', keyEvent: 'main' } |
||||
}, |
||||
scroll: { |
||||
pan: { isActive: true, orientation: 'vertical', keyEvent: 'main' }, |
||||
zoom: { isActive: false, keyEvent: 'shift' } |
||||
} |
||||
}, |
||||
eventsCallbacks: { zoomIn: zoomIn, zoomOut, panning: onPanning, }, |
||||
crosshair: { orientation: 'horizontal' }, |
||||
margin: { top: 30, right: 20, bottom: 20, left: 50 } |
||||
} |
||||
var pod = new ChartwerkLineChart( |
||||
document.getElementById('chart'), |
||||
[ |
||||
{ target: 'test1', datapoints: data1, color: 'green' }, |
||||
{ target: 'test2', datapoints: data2, color: 'blue' }, |
||||
{ target: 'test3', datapoints: data3, color: 'orange' }, |
||||
], |
||||
options |
||||
); |
||||
pod.render(); |
||||
|
||||
|
||||
function zoomIn(ranges) { |
||||
const range = ranges[1]; |
||||
options.axis.y.range = range; |
||||
pod.updateData(undefined, options); |
||||
} |
||||
|
||||
function zoomOut() { |
||||
options.axis.y.range = undefined; |
||||
console.log('zoomOut', pod.updateData); |
||||
pod.updateData(undefined, options) |
||||
} |
||||
|
||||
function onPanning() { |
||||
console.log('panning', pod); |
||||
} |
||||
|
||||
function createDatapoints(arrayLength, startTime, randomValue, randomOffset = 0) { |
||||
return Array.from({ length: arrayLength }, (el, idx) => [ |
||||
startTime + idx * 10000, // y axis |
||||
Math.floor(Math.random() * randomValue) + randomOffset // x axis |
||||
]); |
||||
} |
||||
|
||||
function timeValueFormatter(value) { |
||||
const date = new Date(value); |
||||
const hours = date.getHours(); |
||||
const minutes = '0' + date.getMinutes(); |
||||
const seconds = '0' + date.getSeconds(); |
||||
return hours + ':' + minutes.substr(-2) + ':' + seconds.substr(-2); |
||||
} |
||||
|
||||
function colorFormatter(value, index) { |
||||
if(index % 2 === 0) { |
||||
return 'red'; |
||||
} |
||||
return 'black'; |
||||
} |
||||
</script> |
||||
</body> |
||||
</html> |
@ -0,0 +1,32 @@
|
||||
{ |
||||
"name": "@chartwerk/line-chart", |
||||
"version": "0.2.4", |
||||
"description": "Chartwerk line chart", |
||||
"main": "dist/index.js", |
||||
"scripts": { |
||||
"build": "webpack --config build/webpack.prod.conf.js", |
||||
"dev": "webpack --config build/webpack.dev.conf.js", |
||||
"test": "echo \"Error: no test specified\" && exit 1" |
||||
}, |
||||
"repository": { |
||||
"type": "git", |
||||
"url": "https://github.com/chartwerk/line-chart.git" |
||||
}, |
||||
"author": "CorpGlory", |
||||
"license": "Apache-2.0", |
||||
"dependencies": { |
||||
"@chartwerk/core": "github:chartwerk/core#6e41013932bf16b05da2bc2757bcfaacba3cdb21" |
||||
}, |
||||
"devDependencies": { |
||||
"@types/d3": "5.16.4", |
||||
"@types/lodash": "^4.14.149", |
||||
"css-loader": "^3.4.2", |
||||
"d3": "5.16.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" |
||||
} |
||||
} |
@ -0,0 +1,522 @@
|
||||
import { ChartwerkPod, VueChartwerkPodMixin, TickOrientation, TimeFormat, CrosshairOrientation } from '@chartwerk/core'; |
||||
import { LineTimeSerie, LineOptions, Mode } from './types'; |
||||
|
||||
import * as d3 from 'd3'; |
||||
import * as _ from 'lodash'; |
||||
|
||||
const METRIC_CIRCLE_RADIUS = 1.5; |
||||
const CROSSHAIR_CIRCLE_RADIUS = 3; |
||||
const CROSSHAIR_BACKGROUND_RAIDUS = 9; |
||||
const CROSSHAIR_BACKGROUND_OPACITY = 0.3; |
||||
|
||||
export class ChartwerkLineChart extends ChartwerkPod<LineTimeSerie, LineOptions> { |
||||
lineGenerator = null; |
||||
metricContainer = null; |
||||
|
||||
constructor(_el: HTMLElement, _series: LineTimeSerie[] = [], _options: LineOptions = {}) { |
||||
super(d3, _el, _series, _options); |
||||
} |
||||
|
||||
renderMetrics(): void { |
||||
this.updateCrosshair(); |
||||
this.initLineGenerator(); |
||||
|
||||
// TODO: seems that renderMetrics is not correct name
|
||||
if(this.series.length === 0) { |
||||
this.renderNoDataPointsMessage(); |
||||
return; |
||||
} |
||||
|
||||
// TODO: move to core, and create only one container
|
||||
// container for clip path
|
||||
const clipContatiner = this.chartContainer |
||||
.append('g') |
||||
.attr('clip-path', `url(#${this.rectClipId})`) |
||||
.attr('class', 'metrics-container'); |
||||
|
||||
// container for panning
|
||||
this.metricContainer = clipContatiner |
||||
.append('g') |
||||
.attr('class', ' metrics-rect') |
||||
|
||||
for(let idx = 0; idx < this.series.length; ++idx) { |
||||
if(this.series[idx].visible === false) { |
||||
continue; |
||||
} |
||||
// TODO: use _.defaults same as in core
|
||||
const confidence = this.series[idx].confidence || 0; |
||||
const mode = this.series[idx].mode || Mode.STANDARD; |
||||
const target = this.series[idx].target; |
||||
const renderDots = this.series[idx].renderDots !== undefined ? this.series[idx].renderDots : false; |
||||
const renderLines = this.series[idx].renderLines !== undefined ? this.series[idx].renderLines : true; |
||||
|
||||
this._renderMetric( |
||||
this.series[idx].datapoints, |
||||
{ |
||||
color: this.getSerieColor(idx), |
||||
confidence, |
||||
target, |
||||
mode, |
||||
serieIdx: idx, |
||||
renderDots, |
||||
renderLines, |
||||
} |
||||
); |
||||
} |
||||
} |
||||
|
||||
initLineGenerator(): void { |
||||
this.lineGenerator = this.d3.line() |
||||
.x(d => this.xScale(d[1])) |
||||
.y(d => this.yScale(d[0])); |
||||
} |
||||
|
||||
public appendData(data: [number, number][]): void { |
||||
this.clearScaleCache(); |
||||
|
||||
for(let idx = 0; idx < this.series.length; ++idx) { |
||||
if(this.series[idx].visible === false) { |
||||
continue; |
||||
} |
||||
this.series[idx].datapoints.push(data[idx]); |
||||
const maxLength = this.series[idx].maxLength; |
||||
if(maxLength !== undefined && this.series[idx].datapoints.length > maxLength) { |
||||
this.series[idx].datapoints.shift(); |
||||
} |
||||
} |
||||
|
||||
for(let idx = 0; idx < this.series.length; ++idx) { |
||||
this.metricContainer.select(`.metric-path-${idx}`) |
||||
.datum(this.series[idx].datapoints) |
||||
.attr('d', this.lineGenerator); |
||||
|
||||
if(this.series[idx].renderDots === true) { |
||||
this.metricContainer.selectAll(`.metric-circle-${idx}`) |
||||
.data(this.series[idx].datapoints) |
||||
.attr('cx', d => this.xScale(d[1])) |
||||
.attr('cy', d => this.yScale(d[0])); |
||||
|
||||
this._renderDots([data[idx]], idx); |
||||
} |
||||
} |
||||
|
||||
this.renderXAxis(); |
||||
this.renderYAxis(); |
||||
this.renderGrid(); |
||||
} |
||||
|
||||
_renderDots(datapoints: number[][], serieIdx: number): void { |
||||
this.metricContainer.selectAll(null) |
||||
.data(datapoints) |
||||
.enter() |
||||
.append('circle') |
||||
.attr('class', `metric-circle-${serieIdx} metric-el`) |
||||
.attr('fill', this.getSerieColor(serieIdx)) |
||||
.attr('r', METRIC_CIRCLE_RADIUS) |
||||
.style('pointer-events', 'none') |
||||
.attr('cx', d => this.xScale(d[1])) |
||||
.attr('cy', d => this.yScale(d[0])); |
||||
} |
||||
|
||||
_renderLines(datapoints: number[][], serieIdx: number): void { |
||||
this.metricContainer |
||||
.append('path') |
||||
.datum(datapoints) |
||||
.attr('class', `metric-path-${serieIdx} metric-el`) |
||||
.attr('fill', 'none') |
||||
.attr('stroke', this.getSerieColor(serieIdx)) |
||||
.attr('stroke-width', 1) |
||||
.attr('stroke-opacity', 0.7) |
||||
.attr('pointer-events', 'none') |
||||
.attr('d', this.lineGenerator); |
||||
} |
||||
|
||||
_renderMetric( |
||||
datapoints: number[][], |
||||
metricOptions: { |
||||
color: string, |
||||
confidence: number, |
||||
target: string, |
||||
mode: Mode, |
||||
serieIdx: number, |
||||
renderDots: boolean, |
||||
renderLines: boolean, |
||||
} |
||||
): void { |
||||
if(_.includes(this.seriesTargetsWithBounds, metricOptions.target)) { |
||||
return; |
||||
} |
||||
|
||||
if(metricOptions.mode === Mode.CHARGE) { |
||||
const dataPairs = this.d3.pairs(datapoints); |
||||
this.metricContainer.selectAll(null) |
||||
.data(dataPairs) |
||||
.enter() |
||||
.append('line') |
||||
.attr('x1', d => this.xScale(d[0][1])) |
||||
.attr('x2', d => this.xScale(d[1][1])) |
||||
.attr('y1', d => this.yScale(d[0][0])) |
||||
.attr('y2', d => this.yScale(d[1][0])) |
||||
.attr('stroke-opacity', 0.7) |
||||
.style('stroke-width', 1) |
||||
.style('stroke', d => { |
||||
if(d[1][0] > d[0][0]) { |
||||
return 'green'; |
||||
} else if (d[1][0] < d[0][0]) { |
||||
return 'red'; |
||||
} else { |
||||
return 'gray'; |
||||
} |
||||
}); |
||||
return; |
||||
} |
||||
|
||||
if(metricOptions.renderLines === true) { |
||||
this._renderLines(datapoints, metricOptions.serieIdx); |
||||
} |
||||
|
||||
if(metricOptions.renderDots === true) { |
||||
this._renderDots(datapoints, metricOptions.serieIdx); |
||||
} |
||||
|
||||
let upperBoundDatapoints = []; |
||||
let lowerBoundDatapoints = []; |
||||
if( |
||||
this.options.bounds !== undefined && |
||||
this.options.bounds.upper !== undefined && |
||||
this.options.bounds.lower !== undefined |
||||
) { |
||||
this.series.forEach(serie => { |
||||
if(serie.target === this.formatedBound(this.options.bounds.upper, metricOptions.target)) { |
||||
upperBoundDatapoints = serie.datapoints; |
||||
} |
||||
if(serie.target === this.formatedBound(this.options.bounds.lower, metricOptions.target)) { |
||||
lowerBoundDatapoints = serie.datapoints; |
||||
} |
||||
}); |
||||
} |
||||
|
||||
if(upperBoundDatapoints.length > 0 && lowerBoundDatapoints.length > 0) { |
||||
const zip = (arr1, arr2) => arr1.map((k, i) => [k[0],k[1], arr2[i][0]]); |
||||
const data = zip(upperBoundDatapoints, lowerBoundDatapoints); |
||||
|
||||
this.metricContainer.append('path') |
||||
.datum(data) |
||||
.attr('fill', metricOptions.color) |
||||
.attr('stroke', 'none') |
||||
.attr('opacity', '0.3') |
||||
.attr('d', this.d3.area() |
||||
.x((d: number[]) => this.xScale(d[1])) |
||||
.y0((d: number[]) => this.yScale(d[0])) |
||||
.y1((d: number[]) => this.yScale(d[2])) |
||||
) |
||||
} |
||||
|
||||
if(metricOptions.confidence > 0) { |
||||
this.metricContainer.append('path') |
||||
.datum(datapoints) |
||||
.attr('fill', metricOptions.color) |
||||
.attr('stroke', 'none') |
||||
.attr('opacity', '0.3') |
||||
.attr('d', this.d3.area() |
||||
.x((d: [number, number]) => this.xScale(d[1])) |
||||
.y0((d: [number, number]) => this.yScale(d[0] + metricOptions.confidence)) |
||||
.y1((d: [number, number]) => this.yScale(d[0] - metricOptions.confidence)) |
||||
) |
||||
} |
||||
} |
||||
|
||||
updateCrosshair(): void { |
||||
// Base don't know anything about crosshair circles, It is only for line pod
|
||||
this.appendCrosshairCircles(); |
||||
} |
||||
|
||||
appendCrosshairCircles(): void { |
||||
// circle for each serie
|
||||
this.series.forEach((serie: LineTimeSerie, serieIdx: number) => { |
||||
this.appendCrosshairCircle(serieIdx); |
||||
}); |
||||
} |
||||
|
||||
appendCrosshairCircle(serieIdx: number): void { |
||||
this.crosshair.append('circle') |
||||
.attr('class', `crosshair-circle-${serieIdx} crosshair-background`) |
||||
.attr('r', CROSSHAIR_BACKGROUND_RAIDUS) |
||||
.attr('clip-path', `url(#${this.rectClipId})`) |
||||
.attr('fill', this.getSerieColor(serieIdx)) |
||||
.style('opacity', CROSSHAIR_BACKGROUND_OPACITY) |
||||
.style('pointer-events', 'none'); |
||||
|
||||
this.crosshair |
||||
.append('circle') |
||||
.attr('class', `crosshair-circle-${serieIdx}`) |
||||
.attr('clip-path', `url(#${this.rectClipId})`) |
||||
.attr('fill', this.getSerieColor(serieIdx)) |
||||
.attr('r', CROSSHAIR_CIRCLE_RADIUS) |
||||
.style('pointer-events', 'none'); |
||||
} |
||||
|
||||
public renderSharedCrosshair(values: { x?: number, y?: number }): void { |
||||
this.onMouseOver(); // TODO: refactor to use it once
|
||||
const eventX = this.xScale(values.x); |
||||
const eventY = this.yScale(values.y); |
||||
this.moveCrosshairLine(eventX, eventY); |
||||
const datapoints = this.findAndHighlightDatapoints(values.x, values.y); |
||||
|
||||
if(this.options.eventsCallbacks === undefined || this.options.eventsCallbacks.sharedCrosshairMove === undefined) { |
||||
console.log('Shared crosshair move, but there is no callback'); |
||||
return; |
||||
} |
||||
|
||||
this.options.eventsCallbacks.sharedCrosshairMove({ |
||||
datapoints: datapoints, |
||||
eventX, eventY |
||||
}); |
||||
} |
||||
|
||||
public hideSharedCrosshair(): void { |
||||
this.crosshair.style('display', 'none'); |
||||
} |
||||
|
||||
moveCrosshairLine(xPosition: number, yPosition: number): void { |
||||
switch(this.options.crosshair.orientation) { |
||||
case CrosshairOrientation.VERTICAL: |
||||
this.crosshair.select('#crosshair-line-x') |
||||
.attr('x1', xPosition) |
||||
.attr('x2', xPosition); |
||||
return; |
||||
case CrosshairOrientation.HORIZONTAL: |
||||
this.crosshair.select('#crosshair-line-y') |
||||
.attr('y1', yPosition) |
||||
.attr('y2', yPosition); |
||||
return; |
||||
case CrosshairOrientation.BOTH: |
||||
this.crosshair.select('#crosshair-line-x') |
||||
.attr('x1', xPosition) |
||||
.attr('x2', xPosition); |
||||
this.crosshair.select('#crosshair-line-y') |
||||
.attr('y1', yPosition) |
||||
.attr('y2', yPosition); |
||||
return; |
||||
default: |
||||
throw new Error(`Unknown type of crosshair orientaion: ${this.options.crosshair.orientation}`); |
||||
} |
||||
} |
||||
|
||||
moveCrosshairCircle(xPosition: number, yPosition: number, serieIdx: number): void { |
||||
this.crosshair.selectAll(`.crosshair-circle-${serieIdx}`) |
||||
.attr('cx', xPosition) |
||||
.attr('cy', yPosition) |
||||
.style('display', null); |
||||
} |
||||
|
||||
hideCrosshairCircle(serieIdx: number): void { |
||||
// hide circle for singe serie
|
||||
this.crosshair.selectAll(`.crosshair-circle-${serieIdx}`) |
||||
.style('display', 'none'); |
||||
} |
||||
|
||||
getClosestDatapoint(serie: LineTimeSerie, xValue: number, yValue: number): [number, number] { |
||||
// get closest datapoint to the "xValue"/"yValue" in the "serie"
|
||||
const datapoints = serie.datapoints; |
||||
const closestIdx = this.getClosestIndex(datapoints, xValue, yValue); |
||||
const datapoint = serie.datapoints[closestIdx]; |
||||
return datapoint; |
||||
} |
||||
|
||||
getClosestIndex(datapoints: [number, number][], xValue: number, yValue: number): number { |
||||
let columnIdx; // 0 for y value, 1 for x value
|
||||
let value; // xValue ot y Value
|
||||
switch(this.options.crosshair.orientation) { |
||||
case CrosshairOrientation.HORIZONTAL: |
||||
columnIdx = 0; |
||||
value = yValue; |
||||
break; |
||||
case CrosshairOrientation.VERTICAL: |
||||
columnIdx = 1; |
||||
value = xValue; |
||||
break; |
||||
case CrosshairOrientation.BOTH: |
||||
// TODO: maybe use voronoi
|
||||
columnIdx = 0; |
||||
value = yValue; |
||||
default: |
||||
throw new Error(`Unknown type of crosshair orientaion: ${this.options.crosshair.orientation}`); |
||||
} |
||||
// TODO: d3.bisect is not the best way. Use binary search
|
||||
const bisectIndex = this.d3.bisector((d: [number, number]) => d[columnIdx]).left; |
||||
let closestIdx = bisectIndex(datapoints, value); |
||||
// TODO: refactor corner cases
|
||||
if(closestIdx < 0) { |
||||
return 0; |
||||
} |
||||
if(closestIdx >= datapoints.length) { |
||||
return datapoints.length - 1; |
||||
} |
||||
// TODO: do we realy need it? Binary search should fix it
|
||||
if( |
||||
closestIdx > 0 && |
||||
Math.abs(value - datapoints[closestIdx - 1][columnIdx]) < |
||||
Math.abs(value - datapoints[closestIdx][columnIdx]) |
||||
) { |
||||
closestIdx -= 1; |
||||
} |
||||
return closestIdx; |
||||
} |
||||
|
||||
getValueInterval(columnIdx: number): number | undefined { |
||||
// columnIdx: 0 for y, 1 for x
|
||||
// inverval: x/y value interval between data points
|
||||
// TODO: move it to base/state instead of timeInterval
|
||||
const intervals = _.map(this.series, serie => { |
||||
if(serie.datapoints.length < 2) { |
||||
return undefined; |
||||
} |
||||
const start = _.head(serie.datapoints)[columnIdx]; |
||||
const end = _.last(serie.datapoints)[columnIdx]; |
||||
const range = Math.abs(end - start); |
||||
const interval = range / (serie.datapoints.length - 1); |
||||
return interval; |
||||
}); |
||||
return _.max(intervals); |
||||
} |
||||
|
||||
onMouseMove(): void { |
||||
const eventX = this.d3.mouse(this.chartContainer.node())[0]; |
||||
const eventY = this.d3.mouse(this.chartContainer.node())[1]; |
||||
const xValue = this.xScale.invert(eventX); // mouse x position in xScale
|
||||
const yValue = this.yScale.invert(eventY); |
||||
// TODO: isOutOfChart is a hack, use clip path correctly
|
||||
if(this.isOutOfChart() === true) { |
||||
this.crosshair.style('display', 'none'); |
||||
return; |
||||
} |
||||
this.moveCrosshairLine(eventX, eventY); |
||||
|
||||
const datapoints = this.findAndHighlightDatapoints(xValue, yValue); |
||||
|
||||
if(this.options.eventsCallbacks === undefined || this.options.eventsCallbacks.mouseMove === undefined) { |
||||
console.log('Mouse move, but there is no callback'); |
||||
return; |
||||
} |
||||
// TDOO: is shift key pressed
|
||||
// TODO: need to refactor this object
|
||||
this.options.eventsCallbacks.mouseMove({ |
||||
x: this.d3.event.pageX, |
||||
y: this.d3.event.pageY, |
||||
xVal: xValue, |
||||
yVal: yValue, |
||||
series: datapoints, |
||||
chartX: eventX, |
||||
chartWidth: this.width |
||||
}); |
||||
} |
||||
|
||||
findAndHighlightDatapoints(xValue: number, yValue: number): { value: [number, number], color: string, label: string }[] { |
||||
if(this.series === undefined || this.series.length === 0) { |
||||
return []; |
||||
} |
||||
let points = []; // datapoints in each metric that is closest to xValue/yValue position
|
||||
this.series.forEach((serie: LineTimeSerie, serieIdx: number) => { |
||||
if( |
||||
serie.visible === false || |
||||
_.includes(this.seriesTargetsWithBounds, serie.target) |
||||
) { |
||||
this.hideCrosshairCircle(serieIdx); |
||||
return; |
||||
} |
||||
const closestDatapoint = this.getClosestDatapoint(serie, xValue, yValue); |
||||
if(closestDatapoint === undefined || this.isOutOfRange(closestDatapoint, xValue, yValue, serie.useOutOfRange)) { |
||||
this.hideCrosshairCircle(serieIdx); |
||||
return; |
||||
} |
||||
|
||||
const yPosition = this.yScale(closestDatapoint[0]); |
||||
const xPosition = this.xScale(closestDatapoint[1]); |
||||
this.moveCrosshairCircle(xPosition, yPosition, serieIdx); |
||||
|
||||
points.push({ |
||||
value: closestDatapoint, |
||||
color: this.getSerieColor(serieIdx), |
||||
label: serie.alias || serie.target |
||||
}); |
||||
}); |
||||
return points; |
||||
} |
||||
|
||||
isOutOfRange(closestDatapoint: [number, number], xValue: number, yValue: number, useOutOfRange = true): boolean { |
||||
// find is mouse position more than xRange/yRange from closest point
|
||||
// TODO: refactor getValueInterval to remove this!
|
||||
if(useOutOfRange === false) { |
||||
return false; |
||||
} |
||||
let columnIdx; // 0 for y value, 1 for x value
|
||||
let value; // xValue ot y Value
|
||||
switch(this.options.crosshair.orientation) { |
||||
case CrosshairOrientation.HORIZONTAL: |
||||
columnIdx = 0; |
||||
value = yValue; |
||||
break; |
||||
case CrosshairOrientation.VERTICAL: |
||||
columnIdx = 1; |
||||
value = xValue; |
||||
break; |
||||
case CrosshairOrientation.BOTH: |
||||
// TODO: maybe use voronoi
|
||||
columnIdx = 0; |
||||
value = yValue; |
||||
default: |
||||
throw new Error(`Unknown type of crosshair orientaion: ${this.options.crosshair.orientation}`); |
||||
} |
||||
const range = Math.abs(closestDatapoint[columnIdx] - value); |
||||
const interval = this.getValueInterval(columnIdx); // interval between points
|
||||
// do not move crosshair circles, it mouse to far from closest point
|
||||
return interval === undefined || range > interval / 2; |
||||
} |
||||
|
||||
onMouseOver(): void { |
||||
this.crosshair.style('display', null); |
||||
this.crosshair.selectAll('.crosshair-circle') |
||||
.style('display', null); |
||||
} |
||||
|
||||
onMouseOut(): void { |
||||
if(this.options.eventsCallbacks !== undefined && this.options.eventsCallbacks.mouseOut !== undefined) { |
||||
this.options.eventsCallbacks.mouseOut(); |
||||
} |
||||
this.crosshair.style('display', 'none'); |
||||
} |
||||
} |
||||
|
||||
// it is used with Vue.component, e.g.: Vue.component('chartwerk-line-chart', VueChartwerkLineChartObject)
|
||||
export const VueChartwerkLineChartObject = { |
||||
// alternative to `template: '<div class="chartwerk-line-chart" :id="id" />'`
|
||||
render(createElement) { |
||||
return createElement( |
||||
'div', |
||||
{ |
||||
class: { 'chartwerk-line-chart': true }, |
||||
attrs: { id: this.id } |
||||
} |
||||
); |
||||
}, |
||||
mixins: [VueChartwerkPodMixin], |
||||
methods: { |
||||
render() { |
||||
if(this.pod === undefined) {
|
||||
this.pod = new ChartwerkLineChart(document.getElementById(this.id), this.series, this.options); |
||||
this.pod.render(); |
||||
} else { |
||||
this.pod.updateData(this.series, this.options); |
||||
} |
||||
}, |
||||
renderSharedCrosshair(values) { |
||||
this.pod.renderSharedCrosshair(values); |
||||
}, |
||||
hideSharedCrosshair() { |
||||
this.pod.hideSharedCrosshair(); |
||||
} |
||||
} |
||||
}; |
||||
|
||||
export { LineTimeSerie, LineOptions, Mode, TickOrientation, TimeFormat }; |
@ -0,0 +1,16 @@
|
||||
import { TimeSerie, Options } from '@chartwerk/core'; |
||||
|
||||
type LineTimeSerieParams = { |
||||
confidence: number, |
||||
mode: Mode, |
||||
maxLength: number, |
||||
renderDots: boolean, |
||||
renderLines: boolean, // TODO: refactor same as scatter-pod
|
||||
useOutOfRange: boolean, // It's temporary hack. Need to refactor getValueInterval() method
|
||||
} |
||||
export enum Mode { |
||||
STANDARD = 'Standard', |
||||
CHARGE = 'Charge' |
||||
} |
||||
export type LineTimeSerie = TimeSerie & Partial<LineTimeSerieParams>; |
||||
export type LineOptions = Options; |
@ -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" |
||||
} |
||||
} |
Loading…
Reference in new issue