feat(chart): bar chart date options

Author: Jannchie

src/core/chart/BarChart.ts

@@ -9,6 +9,16 @@ import { colorPicker } from "../ColorPicker";
 import { canvasHelper } from "../CanvasHelper";
 import { Stage } from "../Stage";
 import { BaseChart, BaseChartOptions, KeyGener } from "./BaseChart";
+
+interface BarChartOptions extends BaseChartOptions {
+  itemCount?: number;
+  barPadding?: number;
+  barGap?: number;
+  barInfoFormat?: KeyGener;
+  dataLabelSize?: number;
+  showDateLabel?: boolean;
+}
+
 interface BarOptions {
   id: string;
   data: any;
@@ -20,14 +30,21 @@ interface BarOptions {
   alpha: number;
   image?: string;
 }
-
-interface BarChartOptions extends BaseChartOptions {
-  itemCount?: number;
-  barPadding?: number;
-  barGap?: number;
-  barInfoFormat?: KeyGener;
-}
 export class BarChart extends BaseChart {
+  constructor(options?: BarChartOptions) {
+    super(options);
+    if (!options) return;
+    if (options.itemCount) this.itemCount = options.itemCount;
+    if (options.barPadding !== undefined) this.barPadding = options.barPadding;
+    if (options.barGap !== undefined) this.barGap = options.barGap;
+    if (options.barInfoFormat !== undefined)
+      this.barInfoFormat = options.barInfoFormat;
+    if (options.dataLabelSize !== undefined)
+      this.dataLabelSize = options.dataLabelSize;
+    if (options.showDateLabel !== undefined)
+      this.showDateLabel = options.showDateLabel;
+  }
+
   itemCount = 20;
 
   barPadding = 8;
@@ -36,6 +53,8 @@ export class BarChart extends BaseChart {
   lastValue = new Map<string, number>();
   labelPlaceholder: number;
   valuePlaceholder: number;
+  dataLabelSize: number = 60;
+  showDateLabel: boolean = true;
 
   get sampling() {
     if (this.stage) {
@@ -55,13 +74,6 @@ export class BarChart extends BaseChart {
 
   historyIndex: Map<any, any>;
   ids: string[];
-  constructor(options?: BarChartOptions) {
-    super(options);
-    if (!options) return;
-    if (options.itemCount) this.itemCount = options.itemCount;
-    if (options.barPadding !== undefined) this.barPadding = options.barPadding;
-    if (options.barGap !== undefined) this.barGap = options.barGap;
-  }
   setup(stage: Stage) {
     super.setup(stage);
     this.ids = [...this.dataScales.keys()];
@@ -167,20 +179,22 @@ export class BarChart extends BaseChart {
       }
     });
 
-    const dateLabel = new Text({
-      text: d3.timeFormat(this.dateFormat)(this.secToDate(sec)),
-      font: "Sarasa Mono Slab SC",
-      fontSize: 45,
-      fillStyle: "#777",
-      textAlign: "right",
-      fontWeight: "bolder",
-      textBaseline: "bottom",
-      position: {
-        x: this.shape.width - this.margin.right,
-        y: this.shape.height - this.margin.bottom,
-      },
-    });
-    res.children.push(dateLabel);
+    if (this.showDateLabel) {
+      const dateLabel = new Text({
+        text: d3.timeFormat(this.dateFormat)(this.secToDate(sec)),
+        font: "Sarasa Mono Slab SC",
+        fontSize: this.dataLabelSize,
+        fillStyle: "#777",
+        textAlign: "right",
+        fontWeight: "bolder",
+        textBaseline: "bottom",
+        position: {
+          x: this.shape.width - this.margin.right,
+          y: this.shape.height - this.margin.bottom,
+        },
+      });
+      res.children.push(dateLabel);
+    }
     return res;
   }
   private get barHeight() {

src/core/chart/BaseChart.ts

@@ -39,6 +39,27 @@ export type KeyGener =
   | ((id: string, meta: Map<string, any>) => string)
   | ((id: string, meta: Map<string, any>, data: Map<string, any>) => string);
 export abstract class BaseChart extends Ani {
+  constructor(options?: BaseChartOptions) {
+    super();
+    if (!options) return;
+    if (options.fadeTime) this.fadeTime = options.fadeTime;
+    if (options.aniTime) this.aniTime = options.aniTime;
+    if (options.freezeTime) this.freezeTime = options.freezeTime;
+    if (options.idField) this.idField = options.idField;
+    if (options.colorField) this.colorField = options.colorField;
+    if (options.dateField) this.dateField = options.dateField;
+    if (options.valueKeys) this.valueKeys = options.valueKeys;
+    if (options.valueField) this.valueField = options.valueField;
+    if (options.imageField) this.imageField = options.imageField;
+    if (options.margin !== undefined) this.margin = options.margin;
+    if (options.shape) this.shape = options.shape;
+    if (options.dateFormat) this.dateFormat = options.dateFormat;
+    if (options.labelFormat) this.labelFormat = options.labelFormat;
+    if (options.valueFormat) this.valueFormat = options.valueFormat;
+    if (options.data) this.dataName = options.data;
+    if (options.meta) this.metaName = options.meta;
+    if (options.position) this.position = options.position;
+  }
   dataScales: Map<string, any>;
   idField = "id";
   colorField: string | KeyGener = "id";
@@ -67,25 +88,6 @@ export abstract class BaseChart extends Ani {
   xTickFormat = d3.format(",d");
   yTickFormat = d3.format(",d");
 
-  constructor(options?: BaseChartOptions) {
-    super();
-    if (!options) return;
-    if (options.fadeTime) this.fadeTime = options.fadeTime;
-    if (options.aniTime) this.aniTime = options.aniTime;
-    if (options.freezeTime) this.freezeTime = options.freezeTime;
-    if (options.idField) this.idField = options.idField;
-    if (options.colorField) this.colorField = options.colorField;
-    if (options.dateField) this.dateField = options.dateField;
-    if (options.valueKeys) this.valueKeys = options.valueKeys;
-    if (options.valueField) this.valueField = options.valueField;
-    if (options.imageField) this.imageField = options.imageField;
-    if (options.margin !== undefined) this.margin = options.margin;
-    if (options.shape) this.shape = options.shape;
-    if (options.dateFormat) this.dateFormat = options.dateFormat;
-    if (options.data) this.dataName = options.data;
-    if (options.meta) this.metaName = options.meta;
-    if (options.position) this.position = options.position;
-  }
   setup(stage: Stage) {
     super.setup(stage);
     this.setData();