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

are option

merge-requests/22/head
vargburz 3 years ago
parent
323d4c677e
commit
c9931aba33
8 changed files with 55933 additions and 3082 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. 47349
      dist/index.js
  3. 1
      dist/types.d.ts
  4. 4
      examples/demo.html
  5. 5489
      package-lock.json
  6. 28
      src/index.ts
  7. 1
      src/types.ts
  8. 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;

47349
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' },
], ],

5489
package-lock.json generated
View File

File diff suppressed because it is too large Load Diff

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