Merge branch 'area-opation' into 'main'

Area option See merge request chartwerk/line-pod!22
2 years ago · 521a4adc25
9 changed files with 8641 additions and 3085 deletions
--- a/dist/index.d.ts
+++ b/dist/index.d.ts
@ -2,10 +2,13 @@ import { ChartwerkPod, TickOrientation, TimeFormat } from '@chartwerk/core';
 import { LineTimeSerie, LineOptions, Mode } from './types';
 export declare class LinePod extends ChartwerkPod<LineTimeSerie, LineOptions> {
    lineGenerator: any;
+    areaGenerator: any;
    constructor(_el: HTMLElement, _series?: LineTimeSerie[], _options?: LineOptions);
    renderMetrics(): void;
    clearAllMetrics(): void;
    initLineGenerator(): void;
+    initAreaGenerator(): void;
+    getRenderGenerator(serieIdx: number): any;
    appendData(data: [number, number][], shouldRerender?: boolean): void;
    _renderDots(datapoints: number[][], serieIdx: number): void;
    _renderLines(datapoints: number[][], serieIdx: number): void;
--- a/dist/index.js
+++ b/dist/index.js
--- a/dist/types.d.ts
+++ b/dist/types.d.ts
@ -8,6 +8,7 @@ declare type LineTimeSerieParams = {
    useOutOfRange: boolean;
    dashArray: string;
    class: string;
+    renderArea: boolean;
 };
 export declare enum Mode {
    STANDARD = "Standard",
--- a/examples/demo.html
+++ b/examples/demo.html
@ -7,7 +7,7 @@
    <script src="../dist/index.js" type="text/javascript"></script>
  </head>
  <body>
-    <div id="chart" style="width: 500px; height: 500px;"></div>
+    <div id="chart" style="width: 50%; height: 500px;"></div>

    <script type="text/javascript">
      const startTime = 1590590148;
@ -28,7 +28,7 @@
      var pod = new LinePod(
        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: 'test3', datapoints: data3, color: 'orange' },
        ],
--- a/package-lock.json
+++ b/package-lock.json
--- a/package.json
+++ b/package.json
@ -15,7 +15,7 @@
  "author": "CorpGlory",
  "license": "ISC",
  "dependencies": {
-    "@chartwerk/core": "^0.3.10"
+    "@chartwerk/core": "^0.4.0"
  },
  "devDependencies": {
    "@types/d3": "5.16.4",
--- a/src/index.ts
+++ b/src/index.ts
@ -11,6 +11,7 @@ const CROSSHAIR_BACKGROUND_OPACITY = 0.3;

 export class LinePod extends ChartwerkPod<LineTimeSerie, LineOptions> {
  lineGenerator = null;
+  areaGenerator = null;

  constructor(_el: HTMLElement, _series: LineTimeSerie[] = [], _options: LineOptions = {}) {
    super(d3, _el, _series, _options);
@ -21,6 +22,7 @@ export class LinePod extends ChartwerkPod<LineTimeSerie, LineOptions> {

    this.updateCrosshair();
    this.initLineGenerator();
+    this.initAreaGenerator();

    // TODO: seems that renderMetrics is not correct name
    if(this.series.length === 0) {
@ -65,6 +67,21 @@ export class LinePod extends ChartwerkPod<LineTimeSerie, LineOptions> {
      .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 {
    for(let idx = 0; idx < this.series.length; ++idx) {
      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) {
      this.metricContainer.select(`.metric-path-${idx}`)
        .datum(this.series[idx].datapoints)
-        .attr('d', this.lineGenerator);
+        .attr('d', this.getRenderGenerator(idx));

      if(this.series[idx].renderDots === true) {
        this.metricContainer.selectAll(`.metric-circle-${idx}`)
@ -117,19 +134,22 @@ export class LinePod extends ChartwerkPod<LineTimeSerie, LineOptions> {

  _renderLines(datapoints: number[][], serieIdx: number): void {
    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
      .append('path')
      .datum(datapoints)
      .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-width', 1)
      .attr('stroke-opacity', 0.7)
      .attr('pointer-events', 'none')
      .style('stroke-dasharray', dashArray)
-      .attr('d', this.lineGenerator);
+      .attr('d', this.getRenderGenerator(serieIdx));
  }

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