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

Compare commits

base: chartwerk:6422b49bf02cc75235e425c3d8ee90ebf2737bab
Branches Tags
chartwerk:0.6.17
chartwerk:0.6.18
chartwerk:0.6.19
chartwerk:better-react-component-#58
chartwerk:core-0.6.23
chartwerk:dep-to-core
chartwerk:main
chartwerk:marker-callback-#25
chartwerk:rename-examples
chartwerk:set-git-package
chartwerk:some-tests
chartwerk:svg-version-test
chartwerk:target-master
chartwerk:types-for-mousemove
chartwerk:vue-folder
chartwerk:yarn-workspaces
..
compare: chartwerk:0c3b4041550843cae80926dd815095111f460040
Branches Tags
chartwerk:0.6.17
chartwerk:0.6.18
chartwerk:0.6.19
chartwerk:better-react-component-#58
chartwerk:core-0.6.23
chartwerk:dep-to-core
chartwerk:main
chartwerk:marker-callback-#25
chartwerk:rename-examples
chartwerk:set-git-package
chartwerk:some-tests
chartwerk:svg-version-test
chartwerk:target-master
chartwerk:types-for-mousemove
chartwerk:vue-folder
chartwerk:yarn-workspaces

No commits in common. '6422b49bf02cc75235e425c3d8ee90ebf2737bab' and '0c3b4041550843cae80926dd815095111f460040' have entirely different histories.
6422b49bf0 ... 0c3b404155

4 changed files with 46 additions and 82 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
  1. 39
      examples/area.html
  2. 67
      src/index.ts
  3. 4
      src/models/line_series.ts
  4. 14
      src/types.ts

39
examples/area.html
Unescape View File

@ -1,39 +0,0 @@
<!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.dev.js" type="text/javascript"></script>
</head>
<body>
<div id="chart" style="width: 50%; height: 500px;"></div>
<script type="text/javascript">
let options = {
renderLegend: false, usePanning: false,
axis: {
y: { invert: false, range: [0, 100] },
x: { format: 'numeric', range: [0, 100] },
},
zoomEvents: {
mouse: { zoom: { isActive: false, orientation: 'horizontal' } },
scroll: { zoom: { isActive: false, orientation: 'horizontal' } }
},
}
const data1 = [[0,0], [35, 40], [65, 60], [100, 100]];
const data2 = [[0,0], [35, 50], [65, 65], [80, 100]];
const data3 = [[0,0], [35, 20], [65, 50], [100, 80]];
var pod = new LinePod(
document.getElementById('chart'),
[
{ target: 'test1', datapoints: data1, color: 'green' },
{ target: 'test2', datapoints: data2, color: 'blue', renderArea: 'Below' },
{ target: 'test3', datapoints: data3, color: 'orange', renderArea: 'Above' },
],
options
);
pod.render();
</script>
</body>
</html>

67
src/index.ts
Unescape View File

@ -1,5 +1,5 @@
import { ChartwerkPod, VueChartwerkPodMixin, TimeFormat, CrosshairOrientation, BrushOrientation, yAxisOrientation } from '@chartwerk/core'; import { ChartwerkPod, VueChartwerkPodMixin, TimeFormat, CrosshairOrientation, BrushOrientation, yAxisOrientation } from '@chartwerk/core';
import { LineTimeSerie, LineOptions, MouseObj, AreaType } from './types'; import { LineTimeSerie, LineOptions, MouseObj } from './types';
import { Markers } from './components/markers'; import { Markers } from './components/markers';
import { Segments } from './components/segments'; import { Segments } from './components/segments';
@ -14,9 +14,14 @@ const METRIC_CIRCLE_RADIUS = 1.5;
const CROSSHAIR_CIRCLE_RADIUS = 3; const CROSSHAIR_CIRCLE_RADIUS = 3;
const CROSSHAIR_BACKGROUND_RAIDUS = 9; const CROSSHAIR_BACKGROUND_RAIDUS = 9;
const CROSSHAIR_BACKGROUND_OPACITY = 0.3; const CROSSHAIR_BACKGROUND_OPACITY = 0.3;
type Generator = d3.Line<[number, number]> | d3.Area<[number, number]>;
class LinePod extends ChartwerkPod<LineTimeSerie, LineOptions> { class LinePod extends ChartwerkPod<LineTimeSerie, LineOptions> {
lineGenerator = null;
areaGenerator = null;
lineGeneratorY1 = null;
areaGeneratorY1 = null;
private _markersLayer: Markers = null; private _markersLayer: Markers = null;
private _segmentsLayer: Segments = null; private _segmentsLayer: Segments = null;
@ -35,14 +40,15 @@ class LinePod extends ChartwerkPod<LineTimeSerie, LineOptions> {
this.clearAllMetrics(); this.clearAllMetrics();
this.updateCrosshair(); this.updateCrosshair();
this.initLineGenerator();
this.initAreaGenerator();
if(!this.series.isSeriesAvailable) { if(!this.series.isSeriesAvailable) {
this.renderNoDataPointsMessage(); this.renderNoDataPointsMessage();
return; return;
} }
for(const serie of this.series.visibleSeries) { for(const serie of this.series.visibleSeries) {
const generator = this.getRenderGenerator(serie.renderArea, serie.yOrientation); this._renderMetric(serie);
this._renderMetric(serie, generator);
} }
if(this._markersConf !== undefined) { if(this._markersConf !== undefined) {
this._markersLayer = new Markers(this.d3Node, this._markersConf, this.state, this.margin); this._markersLayer = new Markers(this.d3Node, this._markersConf, this.state, this.margin);
@ -59,28 +65,31 @@ class LinePod extends ChartwerkPod<LineTimeSerie, LineOptions> {
this._markersLayer?.clear(); this._markersLayer?.clear();
} }
initLineGenerator(): void {
getRenderGenerator(renderArea: AreaType, yOrientation: yAxisOrientation): Generator { this.lineGenerator = d3.line()
const yScale = yOrientation === yAxisOrientation.LEFT ? this.state.yScale : this.state.y1Scale;
switch(renderArea) {
case AreaType.NONE:
// return line generator
return d3.line()
.x(d => this.state.xScale(d[0])) .x(d => this.state.xScale(d[0]))
.y(d => yScale(d[1])); .y(d => this.state.yScale(d[1]));
case AreaType.ABOVE: this.lineGeneratorY1 = d3.line()
return d3.area()
.x(d => this.state.xScale(d[0])) .x(d => this.state.xScale(d[0]))
.y0(this.height) .y(d => this.state.y1Scale(d[1]));
.y1(d => yScale(d[1])); }
case AreaType.BELOW:
return d3.area() initAreaGenerator(): void {
this.areaGenerator = d3.area()
.x(d => this.state.xScale(d[0])) .x(d => this.state.xScale(d[0]))
.y0(d => yScale(d[1])) .y1(d => this.state.yScale(d[1]))
.y1(0); .y0(d => this.height);
default: this.areaGeneratorY1 = d3.area()
throw new Error(`Unknown type of renderArea: ${renderArea}`); .x(d => this.state.xScale(d[0]))
.y1(d => this.state.y1Scale(d[1]))
.y0(d => this.height);
}
getRenderGenerator(renderArea: boolean, yOrientation: yAxisOrientation): any {
if(renderArea) {
return yOrientation === yAxisOrientation.LEFT ? this.areaGenerator : this.areaGeneratorY1;
} }
return yOrientation === yAxisOrientation.LEFT ? this.lineGenerator : this.lineGeneratorY1;
} }
_renderDots(serie: LineTimeSerie): void { _renderDots(serie: LineTimeSerie): void {
@ -96,9 +105,9 @@ class LinePod extends ChartwerkPod<LineTimeSerie, LineOptions> {
.attr('cy', d => this.state.getYScaleByOrientation(serie.yOrientation)(d[1])); .attr('cy', d => this.state.getYScaleByOrientation(serie.yOrientation)(d[1]));
} }
_renderLines(serie: LineTimeSerie, generator: Generator): void { _renderLines(serie: LineTimeSerie): void {
const fillColor = serie.renderArea !== AreaType.NONE ? serie.color : 'none'; const fillColor = serie.renderArea ? serie.color : 'none';
const fillOpacity = serie.renderArea !== AreaType.NONE ? 0.5 : 'none'; const fillOpacity = serie.renderArea ? 0.5 : 'none';
this.metricContainer this.metricContainer
.append('path') .append('path')
@ -111,12 +120,12 @@ class LinePod extends ChartwerkPod<LineTimeSerie, LineOptions> {
.attr('stroke-opacity', 0.7) .attr('stroke-opacity', 0.7)
.attr('pointer-events', 'none') .attr('pointer-events', 'none')
.style('stroke-dasharray', serie.dashArray) .style('stroke-dasharray', serie.dashArray)
.attr('d', generator); .attr('d', this.getRenderGenerator(serie.renderArea, serie.yOrientation));
} }
_renderMetric(serie: LineTimeSerie, generator: Generator): void { _renderMetric(serie: LineTimeSerie): void {
if(serie.renderLines === true) { if(serie.renderLines === true) {
this._renderLines(serie, generator); this._renderLines(serie);
} }
if(serie.renderDots === true) { if(serie.renderDots === true) {
@ -481,4 +490,4 @@ export const VueChartwerkLinePod = {
} }
}; };
export { LineTimeSerie, LineOptions, TimeFormat, LinePod, AreaType }; export { LineTimeSerie, LineOptions, TimeFormat, LinePod };

4
src/models/line_series.ts
Unescape View File

@ -1,5 +1,5 @@
import { CoreSeries, yAxisOrientation } from '@chartwerk/core'; import { CoreSeries, yAxisOrientation } from '@chartwerk/core';
import { LineTimeSerie, AreaType } from '../types'; import { LineTimeSerie } from '../types';
import * as _ from 'lodash'; import * as _ from 'lodash';
@ -10,7 +10,7 @@ const LINE_SERIE_DEFAULTS = {
renderLines: true, renderLines: true,
dashArray: '0', dashArray: '0',
class: '', class: '',
renderArea: AreaType.NONE, renderArea: false,
yOrientation: yAxisOrientation.LEFT, yOrientation: yAxisOrientation.LEFT,
}; };

14
src/types.ts
Unescape View File

@ -2,18 +2,12 @@ import { Serie, Options } from '@chartwerk/core';
import { AxisRange } from '@chartwerk/core/dist/types'; import { AxisRange } from '@chartwerk/core/dist/types';
type LineTimeSerieParams = { type LineTimeSerieParams = {
maxLength: number; maxLength: number,
renderDots: boolean; renderDots: boolean,
renderLines: boolean; // TODO: refactor same as scatter-pod renderLines: boolean, // TODO: refactor same as scatter-pod
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: AreaType; // default is none renderArea: boolean; // TODO: move to render type
}
export enum AreaType {
NONE = 'None',
ABOVE = 'Above',
BELOW = 'Below',
} }
export type LineTimeSerie = Serie & Partial<LineTimeSerieParams>; export type LineTimeSerie = Serie & Partial<LineTimeSerieParams>;

Write Preview
Loading…
Cancel
Save