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

Merge branch 'area-opation' into 'main' 

Area option

See merge request chartwerk/line-pod!22
merge-requests/23/merge
Alexander Velikiy 3 years ago
parent
323d4c677e 13dc3f8abe
commit
521a4adc25
9 changed files with 8641 additions and 3085 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. 3
      dist/index.d.ts
  2. 4
      dist/index.js
  3. 1
      dist/types.d.ts
  4. 4
      examples/demo.html
  5. 5543
      package-lock.json
  6. 2
      package.json
  7. 28
      src/index.ts
  8. 1
      src/types.ts
  9. 6140
      yarn.lock

3
dist/index.d.ts vendored
Unescape View File

@ -2,10 +2,13 @@ import { ChartwerkPod, TickOrientation, TimeFormat } from '@chartwerk/core';
import { LineTimeSerie, LineOptions, Mode } from './types'; import { LineTimeSerie, LineOptions, Mode } from './types';
export declare class LinePod extends ChartwerkPod<LineTimeSerie, LineOptions> { export declare class LinePod extends ChartwerkPod<LineTimeSerie, LineOptions> {
lineGenerator: any; lineGenerator: any;
areaGenerator: any;
constructor(_el: HTMLElement, _series?: LineTimeSerie[], _options?: LineOptions); constructor(_el: HTMLElement, _series?: LineTimeSerie[], _options?: LineOptions);
renderMetrics(): void; renderMetrics(): void;
clearAllMetrics(): void; clearAllMetrics(): void;
initLineGenerator(): void; initLineGenerator(): void;
initAreaGenerator(): void;
getRenderGenerator(serieIdx: number): any;
appendData(data: [number, number][], shouldRerender?: boolean): void; appendData(data: [number, number][], shouldRerender?: boolean): void;
_renderDots(datapoints: number[][], serieIdx: number): void; _renderDots(datapoints: number[][], serieIdx: number): void;
_renderLines(datapoints: number[][], serieIdx: number): void; _renderLines(datapoints: number[][], serieIdx: number): void;

4
dist/index.js vendored
View File

File diff suppressed because one or more lines are too long

1
dist/types.d.ts vendored
Unescape View File

@ -8,6 +8,7 @@ declare type LineTimeSerieParams = {
useOutOfRange: boolean; useOutOfRange: boolean;
dashArray: string; dashArray: string;
class: string; class: string;
renderArea: boolean;
}; };
export declare enum Mode { export declare enum Mode {
STANDARD = "Standard", STANDARD = "Standard",

4
examples/demo.html
Unescape View File

@ -7,7 +7,7 @@
<script src="../dist/index.js" type="text/javascript"></script> <script src="../dist/index.js" type="text/javascript"></script>
</head> </head>
<body> <body>
<div id="chart" style="width: 500px; height: 500px;"></div> <div id="chart" style="width: 50%; height: 500px;"></div>
<script type="text/javascript"> <script type="text/javascript">
const startTime = 1590590148; const startTime = 1590590148;
@ -28,7 +28,7 @@
var pod = new LinePod( var pod = new LinePod(
document.getElementById('chart'), document.getElementById('chart'),
[ [
{ target: 'test1', datapoints: data1, color: 'green', dashArray: '5,3', class: 'first' }, { target: 'test1', datapoints: data1, color: 'green', dashArray: '5,3', class: 'first', renderArea: true },
{ target: 'test2', datapoints: data2, color: 'blue' }, { target: 'test2', datapoints: data2, color: 'blue' },
{ target: 'test3', datapoints: data3, color: 'orange' }, { target: 'test3', datapoints: data3, color: 'orange' },
], ],

5543
package-lock.json generated
View File

File diff suppressed because it is too large Load Diff

2
package.json
Unescape View File

@ -15,7 +15,7 @@
"author": "CorpGlory", "author": "CorpGlory",
"license": "ISC", "license": "ISC",
"dependencies": { "dependencies": {
"@chartwerk/core": "^0.3.10" "@chartwerk/core": "^0.4.0"
}, },
"devDependencies": { "devDependencies": {
"@types/d3": "5.16.4", "@types/d3": "5.16.4",

28
src/index.ts
Unescape View File

@ -11,6 +11,7 @@ const CROSSHAIR_BACKGROUND_OPACITY = 0.3;
export class LinePod extends ChartwerkPod<LineTimeSerie, LineOptions> { export class LinePod extends ChartwerkPod<LineTimeSerie, LineOptions> {
lineGenerator = null; lineGenerator = null;
areaGenerator = null;
constructor(_el: HTMLElement, _series: LineTimeSerie[] = [], _options: LineOptions = {}) { constructor(_el: HTMLElement, _series: LineTimeSerie[] = [], _options: LineOptions = {}) {
super(d3, _el, _series, _options); super(d3, _el, _series, _options);
@ -21,6 +22,7 @@ export class LinePod extends ChartwerkPod<LineTimeSerie, LineOptions> {
this.updateCrosshair(); this.updateCrosshair();
this.initLineGenerator(); this.initLineGenerator();
this.initAreaGenerator();
// TODO: seems that renderMetrics is not correct name // TODO: seems that renderMetrics is not correct name
if(this.series.length === 0) { if(this.series.length === 0) {
@ -65,6 +67,21 @@ export class LinePod extends ChartwerkPod<LineTimeSerie, LineOptions> {
.y(d => this.yScale(d[1])); .y(d => this.yScale(d[1]));
} }
initAreaGenerator(): void {
this.areaGenerator = this.d3.area()
.x(d => this.xScale(d[0]))
.y1(d => this.yScale(d[1]))
.y0(d => this.height);
}
getRenderGenerator(serieIdx: number): any {
const renderArea = this.series[serieIdx].renderArea;
if(renderArea) {
return this.areaGenerator;
}
return this.lineGenerator;
}
public appendData(data: [number, number][], shouldRerender = true): void { public appendData(data: [number, number][], shouldRerender = true): void {
for(let idx = 0; idx < this.series.length; ++idx) { for(let idx = 0; idx < this.series.length; ++idx) {
if(this.series[idx].visible === false) { if(this.series[idx].visible === false) {
@ -80,7 +97,7 @@ export class LinePod extends ChartwerkPod<LineTimeSerie, LineOptions> {
for(let idx = 0; idx < this.series.length; ++idx) { for(let idx = 0; idx < this.series.length; ++idx) {
this.metricContainer.select(`.metric-path-${idx}`) this.metricContainer.select(`.metric-path-${idx}`)
.datum(this.series[idx].datapoints) .datum(this.series[idx].datapoints)
.attr('d', this.lineGenerator); .attr('d', this.getRenderGenerator(idx));
if(this.series[idx].renderDots === true) { if(this.series[idx].renderDots === true) {
this.metricContainer.selectAll(`.metric-circle-${idx}`) this.metricContainer.selectAll(`.metric-circle-${idx}`)
@ -117,19 +134,22 @@ export class LinePod extends ChartwerkPod<LineTimeSerie, LineOptions> {
_renderLines(datapoints: number[][], serieIdx: number): void { _renderLines(datapoints: number[][], serieIdx: number): void {
const dashArray = this.series[serieIdx].dashArray !== undefined ? this.series[serieIdx].dashArray : '0'; const dashArray = this.series[serieIdx].dashArray !== undefined ? this.series[serieIdx].dashArray : '0';
const customClass = this.series[serieIdx].class || '' const customClass = this.series[serieIdx].class || '';
const fillColor = this.series[serieIdx].renderArea ? this.getSerieColor(serieIdx) : 'none';
const fillOpacity = this.series[serieIdx].renderArea ? 0.5 : 'none';
this.metricContainer this.metricContainer
.append('path') .append('path')
.datum(datapoints) .datum(datapoints)
.attr('class', `metric-path-${serieIdx} metric-el ${customClass}`) .attr('class', `metric-path-${serieIdx} metric-el ${customClass}`)
.attr('fill', 'none') .attr('fill', fillColor)
.attr('fill-opacity', fillOpacity)
.attr('stroke', this.getSerieColor(serieIdx)) .attr('stroke', this.getSerieColor(serieIdx))
.attr('stroke-width', 1) .attr('stroke-width', 1)
.attr('stroke-opacity', 0.7) .attr('stroke-opacity', 0.7)
.attr('pointer-events', 'none') .attr('pointer-events', 'none')
.style('stroke-dasharray', dashArray) .style('stroke-dasharray', dashArray)
.attr('d', this.lineGenerator); .attr('d', this.getRenderGenerator(serieIdx));
} }
_renderMetric( _renderMetric(

1
src/types.ts
Unescape View File

@ -9,6 +9,7 @@ type LineTimeSerieParams = {
useOutOfRange: boolean, // It's temporary hack. Need to refactor getValueInterval() method useOutOfRange: boolean, // It's temporary hack. Need to refactor getValueInterval() method
dashArray: string; // dasharray attr, only for lines dashArray: string; // dasharray attr, only for lines
class: string; // option to add custom class to each serie element class: string; // option to add custom class to each serie element
renderArea: boolean; // TODO: move to render type
} }
export enum Mode { export enum Mode {
STANDARD = 'Standard', STANDARD = 'Standard',

6140
yarn.lock
View File

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