@fc-plot/ts-graph 0.16.3 → 0.17.0

package/src/interface.ts

@@ -1,148 +1,150 @@
 export type TsGraphType = {
-  [index: string]: any,
-}
+  [index: string]: any;
+};
 
-export type Timestamp = 'x' | 'X';
+export type Timestamp = "x" | "X";
 
 export type BaseOptions = {
-  xkey: number | string,
-  ykey: number | string,
-  ykeyFormatter?: (value: number | string) => number,
-  oykey: string,
-  timestamp: Timestamp,
-}
+  xkey: number | string;
+  ykey: number | string;
+  ykey2?: number | string;
+  ykeyFormatter?: (value: number | string) => number;
+  oykey: string;
+  timestamp: Timestamp;
+};
 
 export type Chart = {
-  id: string,
-  scope?: string,
-  colors: string[],
-  width: number,
-  height: number,
-  marginTop: number,
-  marginRight: number,
-  marginBottom: number,
-  marginLeft: number,
-  renderTo: HTMLElement,
-  containerWidth: number,
-  containerHeight: number,
-}
+  id: string;
+  scope?: string;
+  colors: string[];
+  width: number;
+  height: number;
+  marginTop: number;
+  marginRight: number;
+  marginBottom: number;
+  marginLeft: number;
+  renderTo: HTMLElement;
+  containerWidth: number;
+  containerHeight: number;
+};
 
 export type PlotLine = {
-  value: number,
-  color: string,
-}
+  value: number;
+  color: string;
+};
 
 export type XAxis = {
-  visible: boolean,
-  lineColor: string,
-  lineWidth: number,
-  tickLength: number,
-  tickpadding: number,
-  tickColor: string,
+  visible: boolean;
+  lineColor: string;
+  lineWidth: number;
+  tickLength: number;
+  tickpadding: number;
+  tickColor: string;
   labels: {
-    color: string,
-    fontSize: number,
-    timeFormat?: string, // %Y:%m:%d %H:%M:%S
-  },
-  plotLines: PlotLine[],
-  ticks?: Date[],
-}
+    color: string;
+    fontSize: number;
+    timeFormat?: string; // %Y:%m:%d %H:%M:%S
+  };
+  plotLines: PlotLine[];
+  ticks?: Date[];
+};
 
 export type YAxis = {
-  visible: boolean,
-  min: number,
-  max: number,
-  lineColor: string,
-  lineWidth: number,
-  tickLength: number,
-  tickpadding: number,
-  tickColor: string,
-  gridLineColor: string,
+  visible: boolean;
+  min: number;
+  max: number;
+  lineColor: string;
+  lineWidth: number;
+  tickLength: number;
+  tickpadding: number;
+  tickColor: string;
+  gridLineColor: string;
   labels: {
-    color: string,
-    shadowColor: string,
-    fontSize: number,
+    color: string;
+    shadowColor: string;
+    fontSize: number;
     style: {
-      fontSize: number,
-      color: string,
-    },
-  },
-  plotLines: PlotLine[],
-  tickValueFormatter?: (value: number) => string,
-}
+      fontSize: number;
+      color: string;
+    };
+  };
+  plotLines: PlotLine[];
+  tickValueFormatter?: (value: number) => string;
+};
 
 export type SerieDataItemMarker = {
-  enabled: boolean,
-  radius: number,
-}
+  enabled: boolean;
+  radius: number;
+};
 
 export type SerieDataItem = {
-  [index: string]: any,
-  marker?: SerieDataItemMarker,
-  timestamp?: number,
-  value?: number,
-}
+  [index: string]: any;
+  marker?: SerieDataItemMarker;
+  timestamp?: number;
+  value?: number;
+};
 
 export interface Serie {
-  name: string,
-  color: string,
-  visible: boolean,
-  data: SerieDataItem[],
-  lineDash?: number[],
-  zIndex?: number,
+  name: string;
+  color: string;
+  visible: boolean;
+  data: SerieDataItem[];
+  lineDash?: number[];
+  zIndex?: number;
+  opacity?: number;
 }
 
-export type Series = Serie[]
+export type Series = Serie[];
 
 export type Point = {
-  name: string,
-  color: string,
-  x: number,
-  y: number,
-  timestamp: number,
-  value: number,
-  origin: number,
-  serieIndex: number,
-  filledNull?: number,
-  serieOptions: Serie,
-}
+  name: string;
+  color: string;
+  x: number;
+  y: number;
+  timestamp: number;
+  value: number;
+  origin: number;
+  serieIndex: number;
+  filledNull?: number;
+  serieOptions: Serie;
+};
 
 export type Tooltip = {
-  precision: number | 'origin' | 'short',
-  shared: boolean,
-  sharedSortDirection: 'asc' | 'desc',
-  formatter: (points: Point[], originalPoints: Point[]) => string,
-  cascade: boolean,
-  cascadeScope?: string,
-  timeFormat: string,
+  precision: number | "origin" | "short";
+  shared: boolean;
+  sharedSortDirection: "asc" | "desc";
+  formatter: (points: Point[], originalPoints: Point[]) => string;
+  cascade: boolean;
+  cascadeScope?: string;
+  timeFormat: string;
   pointValueformatter?: (value: number) => string;
-}
+};
 
 export type Legend = {
-  align: string,
-  verticalAlign: string,
-  enabled: boolean,
-}
+  align: string;
+  verticalAlign: string;
+  enabled: boolean;
+};
 
 export type Time = {
-  timezoneOffset: number,
-}
+  timezoneOffset: number;
+};
 
 export type NearestPoint = {
-  name: string,
-  color: string,
-  timestamp: number,
-  value: number,
-  origin: number,
-  serieIndex: number,
-  filledNull?: number,
-  serieOptions: Serie,
-}
+  name: string;
+  color: string;
+  timestamp: number;
+  value: number;
+  origin: number;
+  serieIndex: number;
+  filledNull?: number;
+  serieOptions: Serie;
+};
 
 export interface GetNearestPointsFnParam extends BaseOptions {
-  series: Series,
-  x: Date,
-  fillNull: undefined | number,
+  series: Series;
+  x: Date;
+  fillNull: undefined | number;
 }
 
 export interface Shape {
@@ -155,41 +157,41 @@ export interface Shape {
 }
 
 export interface Options extends BaseOptions {
-  ratio: number,
-  chart: Chart,
-  xAxis: XAxis,
-  yAxis: YAxis,
-  tooltip: Tooltip,
-  type: 'line' | 'bar',
+  ratio: number;
+  chart: Chart;
+  xAxis: XAxis;
+  yAxis: YAxis;
+  tooltip: Tooltip;
+  type: "line" | "bar";
   line: {
-    width: number,
-  },
+    width: number;
+  };
   area: {
-    opacity: number,
-  },
+    opacity: number;
+  };
   stack: {
-    enabled: boolean,
-  },
+    enabled: boolean;
+  };
   curve: {
-    enabled: boolean,
-    mode: 'smooth' // 'step' | 'stepAfter' | 'stepBefore'
-  },
-  series: Serie[],
-  notDisplayedSeries: string[],
-  legend: Legend,
-  time: Time,
-  fillNull: undefined | number,
-  xmin: number,
-  xmax: number,
-  ymin: number,
-  ymax: number,
-  shapes: any[],
-  onClick: (d3Event: any, date: Date, value: number) => any,
-  onRightClick: (d3Event: any, date: Date, value: number) => any,
-  onZoom: (getZoomedSeries: () => Series) => any,
-  onZoomWithoutDefult?: (times?: Date[]) => any,
-  onShapeMouseOver: (event: any, shape: Shape) => any,
-  onShapeClick: (event: any, shape: Shape) => any,
+    enabled: boolean;
+    mode: "smooth"; // 'step' | 'stepAfter' | 'stepBefore'
+  };
+  series: Serie[];
+  notDisplayedSeries: string[];
+  legend: Legend;
+  time: Time;
+  fillNull: undefined | number;
+  xmin: number;
+  xmax: number;
+  ymin: number;
+  ymax: number;
+  shapes: any[];
+  onClick: (d3Event: any, date: Date, value: number) => any;
+  onRightClick: (d3Event: any, date: Date, value: number) => any;
+  onZoom: (getZoomedSeries: () => Series) => any;
+  onZoomWithoutDefult?: (times?: Date[]) => any;
+  onShapeMouseOver: (event: any, shape: Shape) => any;
+  onShapeClick: (event: any, shape: Shape) => any;
 }
 
 export type EventPosition = {
@@ -199,33 +201,35 @@ export type EventPosition = {
   offsetY: number;
   layerX: number;
   layerY: number;
-}
+};
 
-export type Transform = {
-  rescaleX: (xScales: any) => any,
-  k: number,
-  x: number,
-  y: number,
-} | undefined
+export type Transform =
+  | {
+      rescaleX: (xScales: any) => any;
+      k: number;
+      x: number;
+      y: number;
+    }
+  | undefined;
 
 export interface WorkerPostMessage extends BaseOptions {
-  id?: string,
-  str?: string,
-  flag?: boolean,
-  x: Date,
-  fillNull: undefined | number,
+  id?: string;
+  str?: string;
+  flag?: boolean;
+  x: Date;
+  fillNull: undefined | number;
 }
 
 export interface XScales {
-  (a: number | Date): number,
-  invert(value: number | { valueOf(): number }): Date,
-  ticks(value: number): Date[],
+  (a: number | Date): number;
+  invert(value: number | { valueOf(): number }): Date;
+  ticks(value: number): Date[];
 }
 
 export interface YScales {
-  (a: number): number,
-  domain(value: number[]): any,
-  nice(value: number): any,
-  ticks(value: number): number[],
-  invert(value: number | { valueOf(): number }): number,
+  (a: number): number;
+  domain(value: number[]): any;
+  nice(value: number): any;
+  ticks(value: number): number[];
+  invert(value: number | { valueOf(): number }): number;
 }

package/src/line.ts

@@ -1,7 +1,7 @@
-import * as d3 from 'd3';
-import { sortBy } from 'lodash';
-import { getColor } from './utils';
-import { Options, Serie, SerieDataItem, XScales, YScales } from './interface';
+import * as d3 from "d3";
+import { sortBy } from "lodash";
+import { getColor } from "./utils";
+import { Options, Serie, SerieDataItem, XScales, YScales } from "./interface";
 
 export default class Line {
   options: Options;
@@ -12,31 +12,42 @@ export default class Line {
   }
 
   draw(xScales: XScales, yScales: YScales) {
-    const { series, chart: { colors, height }, xAxis, xkey, ykey, timestamp, fillNull, notDisplayedSeries, curve } = this.options;
+    const {
+      series,
+      chart: { colors, height },
+      xAxis,
+      xkey,
+      ykey,
+      ykey2,
+      timestamp,
+      fillNull,
+      notDisplayedSeries,
+      curve,
+    } = this.options;
     const { width: lineWidth } = this.options.line;
     const { opacity: areaOpacity } = this.options.area;
     const { ctx } = this;
 
     const xAccessor = (d: SerieDataItem) => {
-      const xVal = timestamp === 'X' ? d[xkey] * 1000 : d[xkey];
+      const xVal = timestamp === "X" ? d[xkey] * 1000 : d[xkey];
       const x = xScales(new Date(xVal));
       return x;
     };
-    const yAccessor = (d: SerieDataItem) => {
+    const yAccessor = (d: SerieDataItem, ykey: any) => {
       const val = d[ykey];
-      if (typeof val === 'number' && !isNaN(val)) {
+      if (typeof val === "number" && !isNaN(val)) {
         return yScales(val);
-      } else if (typeof fillNull === 'number') {
+      } else if (typeof fillNull === "number") {
         return yScales(fillNull);
       }
       return undefined;
     };
     const definedAccessor = (d: SerieDataItem) => {
       const val = d[ykey];
-      return typeof val === 'number' || typeof fillNull === 'number';
+      return typeof val === "number" || typeof fillNull === "number";
     };
 
-    sortBy(series, 'zIndex').forEach((serie: Serie, i: number) => {
+    sortBy(series, "zIndex").forEach((serie: Serie, i: number) => {
       if (serie.visible === false) return;
       if (notDisplayedSeries.indexOf(serie.name) > -1) return;
 
@@ -44,40 +55,54 @@ export default class Line {
 
       serie.color = color;
 
-      if (areaOpacity > 0) {
+      if (areaOpacity > 0 || serie.opacity) {
         ctx.beginPath();
-        const area = d3.area()
+        const area = d3
+          .area()
           .x(xAccessor)
-          .y0(height - xAxis.tickpadding - xAxis.labels.fontSize - 5)
-          .y1(yAccessor)
+          .y0((d: SerieDataItem) => {
+            if (ykey2 && ykey2 in d) {
+              return yAccessor(d, ykey);
+            }
+            return height - xAxis.tickpadding - xAxis.labels.fontSize - 5;
+          })
+          .y1((d: SerieDataItem) => {
+            if (ykey2 && ykey2 in d) {
+              return yAccessor(d, ykey2);
+            }
+            return yAccessor(d, ykey);
+          })
           .defined(definedAccessor)
           .context(ctx);
 
         if (curve.enabled) {
-          if (curve.mode === 'smooth') {
-            area.curve(d3.curveMonotoneX)
+          if (curve.mode === "smooth") {
+            area.curve(d3.curveMonotoneX);
           }
         }
 
-        area(serie.data || [])
+        area(serie.data || []);
 
         ctx.fillStyle = color;
-        ctx.globalAlpha = areaOpacity;
+        ctx.globalAlpha = areaOpacity || (serie.opacity ? serie.opacity : 0.5);
         ctx.fill();
         ctx.closePath();
       }
 
-      if (lineWidth > 0) {
+      if (lineWidth > 0 && serie.opacity === undefined) {
         ctx.beginPath();
-        const line = d3.line()
+        const line = d3
+          .line()
           .x(xAccessor)
-          .y(yAccessor)
+          .y((d: SerieDataItem) => {
+            return yAccessor(d, ykey);
+          })
           .defined(definedAccessor)
           .context(ctx);
 
         if (curve.enabled) {
-          if (curve.mode === 'smooth') {
-            line.curve(d3.curveMonotoneX)
+          if (curve.mode === "smooth") {
+            line.curve(d3.curveMonotoneX);
           }
         }
 
@@ -85,10 +110,10 @@ export default class Line {
 
         line(serie.data || []);
 
-        ctx.lineJoin = 'round';
+        ctx.lineJoin = "round";
         ctx.lineWidth = lineWidth;
         ctx.strokeStyle = color;
-        ctx.lineCap = 'round';
+        ctx.lineCap = "round";
         ctx.globalAlpha = 1;
         ctx.setLineDash(serie.lineDash || []);
         ctx.stroke();